Skip to content

Commit 8264a4d

Browse files
committed
Refactor docs
1 parent 2c64156 commit 8264a4d

File tree

1 file changed

+105
-66
lines changed

1 file changed

+105
-66
lines changed

readme.md

Lines changed: 105 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -52,13 +52,15 @@ This specification is written in a [Web IDL][webidl]-like grammar.
5252

5353
### Where this specification fits
5454

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].
5758

5859
hast relates to [JavaScript][] in that it has an [ecosystem of
5960
utilities][list-of-utilities] for working with compliant syntax trees in
6061
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
6264
languages.
6365

6466
hast relates to the [unified][] and [rehype][] projects in that hast syntax
@@ -68,17 +70,17 @@ trees are used throughout their ecosystems.
6870

6971
The reason for introducing a new “virtual” DOM is primarily:
7072

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
7375
* Most virtual DOMs do not focus on ease of use in transformations
7476
* Other virtual DOMs cannot represent the syntax of HTML in its entirety
7577
(think comments and document types)
7678
* Neither the DOM nor virtual DOMs focus on positional information
7779

7880
## Types
7981

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:
8284

8385
```sh
8486
npm install @types/hast
@@ -123,7 +125,8 @@ interface Comment <: Literal {
123125
**Comment** (**[Literal][dfn-literal]**) represents a [Comment][concept-comment]
124126
([\[DOM\]][dom]).
125127

126-
For example, the following HTML:
128+
For example,
129+
the following HTML:
127130

128131
```html
129132
<!--Charlie-->
@@ -146,7 +149,8 @@ interface Doctype <: Node {
146149
**Doctype** (**[Node][dfn-unist-node]**) represents a
147150
[DocumentType][concept-documenttype] ([\[DOM\]][dom]).
148151

149-
For example, the following HTML:
152+
For example,
153+
the following HTML:
150154

151155
```html
152156
<!doctype html>
@@ -180,17 +184,19 @@ The `properties` field represents information associated with the element.
180184
The value of the `properties` field implements the
181185
**[Properties][dfn-properties]** interface.
182186

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.
184189
The value of the `content` field implements the **[Root][dfn-root]** interface.
185190

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]*.
188193

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]).
192197

193-
For example, the following HTML:
198+
For example,
199+
the following HTML:
194200

195201
```html
196202
<a href="https://alpha.com" class="bravo" download></a>
@@ -221,8 +227,9 @@ interface Root <: Parent {
221227

222228
**Root** (**[Parent][dfn-parent]**) represents a document.
223229

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]**,
226233
never as a *[child][term-child]*.
227234

228235
### `Text`
@@ -236,7 +243,8 @@ interface Text <: Literal {
236243
**Text** (**[Literal][dfn-literal]**) represents a [Text][concept-text]
237244
([\[DOM\]][dom]).
238245

239-
For example, the following HTML:
246+
For example,
247+
the following HTML:
240248

241249
```html
242250
<span>Foxtrot</span>
@@ -273,46 +281,64 @@ typedef string PropertyName
273281
```
274282

275283
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.
280295

281296
> These rules aren’t simple.
282297
> Use [`hastscript`][h] (or [`property-information`][pi] directly) to help.
283298
284299
The following rules are used to transform HTML attribute names to property
285300
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`
304328

305329
###### Exceptions
306330

307331
Some jargon is seen as one word even though it may not be seen as such by
308332
dictionaries.
309-
For example, `nohref` becomes `noHref`, `playsinline` becomes `playsInline`,
333+
For example,
334+
`nohref` becomes `noHref`,
335+
`playsinline` becomes `playsInline`,
310336
and `accept-charset` becomes `acceptCharset`.
311337

312338
The HTML attributes `class` and `for` respectively become `className` and
313339
`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.
316342

317343
###### Notes
318344

@@ -351,29 +377,34 @@ typedef any PropertyValue
351377
```
352378

353379
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.
365394
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.
368399

369400
> The reason for this is to allow plugins and utilities to inspect these
370401
> non-standard values.
371402
372403
The DOM also specifies comma separated and space separated lists attribute
373404
values.
374405
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']`.
377408

378409
> There’s no special format for the property value of the `style` property name.
379410
@@ -598,8 +629,10 @@ The rest is sorted alphabetically based on content after `hast-util-`
598629

599630
## Security
600631

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.
603636
Always be careful with user input and use [`hast-util-santize`][sanitize] to
604637
make the hast tree safe.
605638

@@ -619,20 +652,26 @@ ways to get started.
619652
See [`support.md`][support] for ways to get help.
620653
Ideas for new utilities and tools can be posted in [`syntax-tree/ideas`][ideas].
621654

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].
624661

625662
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.
628666

629667
## Acknowledgments
630668

631669
The initial release of this project was authored by
632670
[**@wooorm**](https://github.com/wooorm).
633671

634672
Special thanks to [**@eush77**](https://github.com/eush77) for their work,
635-
ideas, and incredibly valuable feedback!
673+
ideas,
674+
and incredibly valuable feedback!
636675

637676
Thanks to
638677
[**@andrewburgess**](https://github.com/andrewburgess),

0 commit comments

Comments
 (0)