Skip to content

Commit 748c6ec

Browse files
committed
bump to v1
1 parent 6558d90 commit 748c6ec

File tree

2 files changed

+55
-8
lines changed

2 files changed

+55
-8
lines changed

package.json

+10-3
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,20 @@
11
{
22
"name": "validate-html-nesting",
3-
"version": "0.0.1",
3+
"version": "1.0.0",
44
"description": "Validate parent-child nesting for HTML elements",
55
"main": "src/index.js",
66
"scripts": {
77
"test": "jest"
88
},
9-
"keywords": [],
10-
"author": "",
9+
"keywords": [
10+
"html validator",
11+
"dom validator"
12+
],
13+
"author": "Manan Tank",
14+
"repository": {
15+
"type": "git",
16+
"url": "https://github.com/MananTank/validate-html-nesting.git"
17+
},
1118
"license": "ISC",
1219
"devDependencies": {
1320
"@types/jest": "^27.5.1",

readme.md

+45-5
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,27 @@
11
# validate-html-nesting
22

3-
- Test a parent-child nesting is valid html or not
4-
- it only considers the nesting "invalid" if browser automatically "fixes" it. Other nestings such as `h1 > div` though technically invalid as per HTML spec, it's still considered valid because the browser does not fix it
5-
- supports all tags, including svg
3+
parent-child nesting validation for html elements
4+
5+
This is not a full blown HTML spec validation (intentionally). The parent-child nesting is considered valid if browser does not modify it, regardless of whether or not HTML spec considers it valid or invalid. So, the library is purely for detecting the kind of element nesting which result in altered DOM.
6+
7+
### Example
8+
9+
```html
10+
<p>
11+
hello
12+
<hr/>
13+
</p>
14+
```
15+
16+
browser modifies the above shown structure to below shown structure, which is why the library considers the `p > hr` nesting invalid.
17+
18+
```html
19+
<p>hello</p>
20+
<hr />
21+
<p></p>
22+
```
23+
24+
And though `<h1> <div> hi </div> </h1>` markup is technically invalid as per HTML spec, it's still considered valid because the browser does not modify it, so `h1 > div` nesting is considered valid by the library.
625

726
<br/>
827

@@ -20,7 +39,7 @@ npm i validate-html-nesting
2039
isValidHTMLNesting(parentTag: string, childTag: string) : boolean
2140
```
2241

23-
<br/>
42+
<br />
2443

2544
## Usage Example
2645

@@ -39,6 +58,27 @@ isValidHTMLNesting('div', 'a'); // true
3958

4059
<br/>
4160

42-
## Tests
61+
## See also
62+
63+
- [babel-plugin-validate-jsx-nesting](https://github.com/MananTank/validate-jsx-nesting) - Compile time JSX nesting validation
64+
65+
<br/>
66+
67+
## Who is this library for?
68+
69+
This library is mostly useful for UI framework authors who need a way to make sure that DOM structure rendered by the browser matches the authored markup so that there's no unexpected behaviors
70+
71+
<br/>
72+
73+
<br/>
74+
75+
## Test Suite
4376

4477
Refer to [validation.test.js](/tests/validation.test.js) to see full test suite
78+
79+
<br/>
80+
81+
## Contributing
82+
83+
PR's are welcome.
84+
Create an issue if you found a bug.

0 commit comments

Comments
 (0)