https://github.com/manantank/babel-plugin-validate-jsx-nesting

compile time JSX nesting validation
https://github.com/manantank/babel-plugin-validate-jsx-nesting

Last synced: 1 day ago
JSON representation

compile time JSX nesting validation

• Host: GitHub
• URL: https://github.com/manantank/babel-plugin-validate-jsx-nesting
• Owner: MananTank
• Created: 2022-05-13T15:52:10.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-04-23T07:59:03.000Z (over 1 year ago)
• Last Synced: 2024-11-07T21:52:07.589Z (13 days ago)
• Language: JavaScript
• Size: 578 KB
• Stars: 10
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# babel-plugin-validate-jsx-nesting

### Compile time JSX nesting validation

Example

```html

Failed to Compile.

Error: Invalid HTML nesting: 
 can not be child of 


  1 | 


  2 |    Hello 

> 3 |   


    |   ^^^^^^

  4 |    World 

  5 | 

  6 |

```





### Why this validation is important?

without such validation, when JSX is converted to HTML and rendered in the DOM, the Browser will try to fix the invalid nestings ( such as `
` inside `
` ) and thus the rendered DOM will have a different structure than JSX structure.

This is a big issue for frameworks that rely on JSX rendering the exact same elements in DOM. This can lead to unexpected behaviors.




### Validation library

This babel plugin uses the [validate-html-nesting](https://github.com/MananTank/validate-html-nesting) library for validating HTML element nesting




## Install

```

npm i -D babel-plugin-validate-jsx-nesting

```




## babel config

Refer to the [babel config](https://babeljs.io/docs/en/configuration) guide to learn about configuring babel

## no options

with this config, the plugin throws an error when invalid JSX nesting is found

```json

{

	"plugins": ["validate-jsx-nesting"]

}

```




### with `warnOnly: true` option

With this config, the plugin logs a warning when invalid JSX nesting is found

```json

{

	"plugins": [["validate-jsx-nesting", { "warnOnly": true }]]

}

```