@@ -52,13 +52,15 @@ This specification is written in a [Web IDL][webidl]-like grammar.
52
52
53
53
### Where this specification fits
54
54
55
- hast extends [ unist] [ ] , a format for syntax trees, to benefit from its
56
- [ ecosystem of utilities] [ utilities ] .
55
+ hast extends [ unist] [ ] ,
56
+ a format for syntax trees,
57
+ to benefit from its [ ecosystem of utilities] [ utilities ] .
57
58
58
59
hast relates to [ JavaScript] [ ] in that it has an [ ecosystem of
59
60
utilities] [ list-of-utilities ] for working with compliant syntax trees in
60
61
JavaScript.
61
- However, hast is not limited to JavaScript and can be used in other programming
62
+ However,
63
+ hast is not limited to JavaScript and can be used in other programming
62
64
languages.
63
65
64
66
hast relates to the [ unified] [ ] and [ rehype] [ ] projects in that hast syntax
@@ -68,17 +70,17 @@ trees are used throughout their ecosystems.
68
70
69
71
The reason for introducing a new “virtual” DOM is primarily:
70
72
71
- * The [ DOM] [ ] is very heavy to implement outside of the browser, a lean and
72
- stripped down virtual DOM can be used everywhere
73
+ * The [ DOM] [ ] is very heavy to implement outside of the browser,
74
+ a lean and stripped down virtual DOM can be used everywhere
73
75
* Most virtual DOMs do not focus on ease of use in transformations
74
76
* Other virtual DOMs cannot represent the syntax of HTML in its entirety
75
77
(think comments and document types)
76
78
* Neither the DOM nor virtual DOMs focus on positional information
77
79
78
80
## Types
79
81
80
- If you are using TypeScript, you can use the hast types by installing them
81
- with npm:
82
+ If you are using TypeScript,
83
+ you can use the hast types by installing them with npm:
82
84
83
85
``` sh
84
86
npm install @types/hast
@@ -123,7 +125,8 @@ interface Comment <: Literal {
123
125
** Comment** (** [ Literal] [ dfn-literal ] ** ) represents a [ Comment] [ concept-comment ]
124
126
([ \[ DOM\] ] [ dom ] ).
125
127
126
- For example, the following HTML:
128
+ For example,
129
+ the following HTML:
127
130
128
131
``` html
129
132
<!-- Charlie-->
@@ -146,7 +149,8 @@ interface Doctype <: Node {
146
149
** Doctype** (** [ Node] [ dfn-unist-node ] ** ) represents a
147
150
[ DocumentType] [ concept-documenttype ] ([ \[ DOM\] ] [ dom ] ).
148
151
149
- For example, the following HTML:
152
+ For example,
153
+ the following HTML:
150
154
151
155
``` html
152
156
<!doctype html>
@@ -180,17 +184,19 @@ The `properties` field represents information associated with the element.
180
184
The value of the ` properties ` field implements the
181
185
** [ Properties] [ dfn-properties ] ** interface.
182
186
183
- If the ` tagName ` field is ` 'template' ` , a ` content ` field can be present.
187
+ If the ` tagName ` field is ` 'template' ` ,
188
+ a ` content ` field can be present.
184
189
The value of the ` content ` field implements the ** [ Root] [ dfn-root ] ** interface.
185
190
186
- If the ` tagName ` field is ` 'template' ` , the element must be a
187
- * [ leaf] [ term-leaf ] * .
191
+ If the ` tagName ` field is ` 'template' ` ,
192
+ the element must be a * [ leaf] [ term-leaf ] * .
188
193
189
- If the ` tagName ` field is ` 'noscript' ` , its * [ children ] [ term-child ] * should
190
- be represented as if * [ scripting is disabled ] [ concept-scripting ] *
191
- ([ \[ HTML\] ] [ html ] ).
194
+ If the ` tagName ` field is ` 'noscript' ` ,
195
+ its * [ children ] [ term-child ] * should be represented as if
196
+ * [ scripting is disabled ] [ concept-scripting ] * ([ \[ HTML\] ] [ html ] ).
192
197
193
- For example, the following HTML:
198
+ For example,
199
+ the following HTML:
194
200
195
201
``` html
196
202
<a href =" https://alpha.com" class =" bravo" download ></a >
@@ -221,8 +227,9 @@ interface Root <: Parent {
221
227
222
228
** Root** (** [ Parent] [ dfn-parent ] ** ) represents a document.
223
229
224
- ** Root** can be used as the * [ root] [ term-root ] * of a * [ tree] [ term-tree ] * , or as
225
- a value of the ` content ` field on a ` 'template' ` ** [ Element] [ dfn-element ] ** ,
230
+ ** Root** can be used as the * [ root] [ term-root ] * of a * [ tree] [ term-tree ] * ,
231
+ or as a value of the ` content ` field on a ` 'template' `
232
+ ** [ Element] [ dfn-element ] ** ,
226
233
never as a * [ child] [ term-child ] * .
227
234
228
235
### ` Text `
@@ -236,7 +243,8 @@ interface Text <: Literal {
236
243
** Text** (** [ Literal] [ dfn-literal ] ** ) represents a [ Text] [ concept-text ]
237
244
([ \[ DOM\] ] [ dom ] ).
238
245
239
- For example, the following HTML:
246
+ For example,
247
+ the following HTML:
240
248
241
249
``` html
242
250
<span >Foxtrot</span >
@@ -273,46 +281,64 @@ typedef string PropertyName
273
281
```
274
282
275
283
Property names are keys on ** [ Properties] [ dfn-properties ] ** objects and reflect
276
- HTML, SVG, ARIA, XML, XMLNS, or XLink attribute names.
277
- Often, they have the same value as the corresponding attribute (for example,
278
- ` id ` is a property name reflecting the ` id ` attribute name), but there are some
279
- notable differences.
284
+ HTML,
285
+ SVG,
286
+ ARIA,
287
+ XML,
288
+ XMLNS,
289
+ or XLink attribute names.
290
+ Often,
291
+ they have the same value as the corresponding attribute
292
+ (for example,
293
+ ` id ` is a property name reflecting the ` id ` attribute name),
294
+ but there are some notable differences.
280
295
281
296
> These rules aren’t simple.
282
297
> Use [ ` hastscript ` ] [ h ] (or [ ` property-information ` ] [ pi ] directly) to help.
283
298
284
299
The following rules are used to transform HTML attribute names to property
285
300
names.
286
- These rules are based on [ how ARIA is reflected in the
287
- DOM] [ concept-aria-reflection ] ([ \[ ARIA\] ] [ aria ] ), and differs from how some
288
- (older) HTML attributes are reflected in the DOM.
289
-
290
- 1 . Any name referencing a combinations of multiple words (such as “stroke
291
- miter limit”) becomes a camelcased property name capitalizing each word
292
- boundary.
293
- This includes combinations that are sometimes written as several words.
294
- For example, ` stroke-miterlimit ` becomes ` strokeMiterLimit ` , ` autocorrect `
295
- becomes ` autoCorrect ` , and ` allowfullscreen ` becomes ` allowFullScreen ` .
296
- 2 . Any name that can be hyphenated, becomes a camelcased property name
297
- capitalizing each boundary.
298
- For example, “read-only” becomes ` readOnly ` .
299
- 3 . Compound words that are not used with spaces or hyphens are treated as a
300
- normal word and the previous rules apply.
301
- For example, “placeholder”, “strikethrough”, and “playback” stay the same.
302
- 4 . Acronyms in names are treated as a normal word and the previous rules apply.
303
- For example, ` itemid ` become ` itemId ` and ` bgcolor ` becomes ` bgColor ` .
301
+ These rules are based on
302
+ [ how ARIA is reflected in the DOM] [ concept-aria-reflection ] ([ \[ ARIA\] ] [ aria ] ),
303
+ and differs from how some
304
+ (older)
305
+ HTML attributes are reflected in the DOM.
306
+
307
+ 1 . any name referencing a combinations of multiple words
308
+ (such as “stroke miter limit”) becomes a camelcased property name
309
+ capitalizing each word boundary;
310
+ this includes combinations that are sometimes written as several words;
311
+ for example,
312
+ ` stroke-miterlimit ` becomes ` strokeMiterLimit ` ,
313
+ ` autocorrect ` becomes ` autoCorrect ` ,
314
+ and ` allowfullscreen ` becomes ` allowFullScreen `
315
+ 2 . any name that can be hyphenated,
316
+ becomes a camelcased property name capitalizing each boundary;
317
+ for example,
318
+ “read-only” becomes ` readOnly `
319
+ 3 . compound words that are not used with spaces or hyphens are treated as a
320
+ normal word and the previous rules apply;
321
+ for example,
322
+ “placeholder”,
323
+ “strikethrough”,
324
+ and “playback” stay the same
325
+ 4 . acronyms in names are treated as a normal word and the previous rules apply;
326
+ for example,
327
+ ` itemid ` become ` itemId ` and ` bgcolor ` becomes ` bgColor `
304
328
305
329
###### Exceptions
306
330
307
331
Some jargon is seen as one word even though it may not be seen as such by
308
332
dictionaries.
309
- For example, ` nohref ` becomes ` noHref ` , ` playsinline ` becomes ` playsInline ` ,
333
+ For example,
334
+ ` nohref ` becomes ` noHref ` ,
335
+ ` playsinline ` becomes ` playsInline ` ,
310
336
and ` accept-charset ` becomes ` acceptCharset ` .
311
337
312
338
The HTML attributes ` class ` and ` for ` respectively become ` className ` and
313
339
` htmlFor ` in alignment with the DOM.
314
- No other attributes gain different names as properties, other than a change in
315
- casing.
340
+ No other attributes gain different names as properties,
341
+ other than a change in casing.
316
342
317
343
###### Notes
318
344
@@ -351,29 +377,34 @@ typedef any PropertyValue
351
377
```
352
378
353
379
Property values should reflect the data type determined by their property name.
354
- For example, the HTML ` <div hidden></div> ` has a ` hidden ` attribute, which is
355
- reflected as a ` hidden ` property name set to the property value ` true ` , and
356
- ` <input minlength="5"> ` , which has a ` minlength ` attribute, is reflected as a
357
- ` minLength ` property name set to the property value ` 5 ` .
358
-
359
- > In [ JSON] [ ] , the value ` null ` must be treated as if the property was not
360
- > included.
361
- > In [ JavaScript] [ ] , both ` null ` and ` undefined ` must be similarly ignored.
362
-
363
- The DOM has strict rules on how it coerces HTML to expected values, whereas hast
364
- is more lenient in how it reflects the source.
380
+ For example,
381
+ the HTML ` <div hidden></div> ` has a ` hidden ` attribute,
382
+ which is reflected as a ` hidden ` property name set to the property value ` true ` ,
383
+ and ` <input minlength="5"> ` ,
384
+ which has a ` minlength ` attribute,
385
+ is reflected as a ` minLength ` property name set to the property value ` 5 ` .
386
+
387
+ > In [ JSON] [ ] ,
388
+ > the value ` null ` must be treated as if the property was not included.
389
+ > In [ JavaScript] [ ] ,
390
+ > both ` null ` and ` undefined ` must be similarly ignored.
391
+
392
+ The DOM has strict rules on how it coerces HTML to expected values,
393
+ whereas hast is more lenient in how it reflects the source.
365
394
Where the DOM treats ` <div hidden="no"></div> ` as having a value of ` true ` and
366
- ` <img width="yes"> ` as having a value of ` 0 ` , these should be reflected as
367
- ` 'no' ` and ` 'yes' ` , respectively, in hast.
395
+ ` <img width="yes"> ` as having a value of ` 0 ` ,
396
+ these should be reflected as ` 'no' ` and ` 'yes' ` ,
397
+ respectively,
398
+ in hast.
368
399
369
400
> The reason for this is to allow plugins and utilities to inspect these
370
401
> non-standard values.
371
402
372
403
The DOM also specifies comma separated and space separated lists attribute
373
404
values.
374
405
In hast, these should be treated as ordered lists.
375
- For example, ` <div class="alpha bravo"></div> ` is represented as ` [ 'alpha',
376
- 'bravo'] `.
406
+ For example,
407
+ ` <div class="alpha bravo"></div> ` is represented as ` ['alpha', 'bravo']` .
377
408
378
409
> There’s no special format for the property value of the ` style ` property name.
379
410
@@ -598,8 +629,10 @@ The rest is sorted alphabetically based on content after `hast-util-`
598
629
599
630
## Security
600
631
601
- As hast represents HTML, and improper use of HTML can open you up to a
602
- [ cross-site scripting (XSS)] [ xss ] attack, improper use of hast is also unsafe.
632
+ As hast represents HTML,
633
+ and improper use of HTML can open you up to a [ cross-site scripting (XSS)] [ xss ]
634
+ attack,
635
+ improper use of hast is also unsafe.
603
636
Always be careful with user input and use [ ` hast-util-santize ` ] [ sanitize ] to
604
637
make the hast tree safe.
605
638
@@ -619,20 +652,26 @@ ways to get started.
619
652
See [ ` support.md ` ] [ support ] for ways to get help.
620
653
Ideas for new utilities and tools can be posted in [ ` syntax-tree/ideas ` ] [ ideas ] .
621
654
622
- A curated list of awesome syntax-tree, unist, mdast, hast, xast, and nlcst
623
- resources can be found in [ awesome syntax-tree] [ awesome ] .
655
+ A curated list of awesome syntax-tree,
656
+ unist,
657
+ mdast,
658
+ hast,
659
+ xast,
660
+ and nlcst resources can be found in [ awesome syntax-tree] [ awesome ] .
624
661
625
662
This project has a [ code of conduct] [ coc ] .
626
- By interacting with this repository, organization, or community you agree to
627
- abide by its terms.
663
+ By interacting with this repository,
664
+ organization,
665
+ or community you agree to abide by its terms.
628
666
629
667
## Acknowledgments
630
668
631
669
The initial release of this project was authored by
632
670
[ ** @wooorm ** ] ( https://github.com/wooorm ) .
633
671
634
672
Special thanks to [ ** @eush77 ** ] ( https://github.com/eush77 ) for their work,
635
- ideas, and incredibly valuable feedback!
673
+ ideas,
674
+ and incredibly valuable feedback!
636
675
637
676
Thanks to
638
677
[ ** @andrewburgess ** ] ( https://github.com/andrewburgess ) ,
0 commit comments