Skip to content

Commit 3bd13d7

Browse files
wooormwooorm
committed
Add improved docs
1 parent 3397a66 commit 3bd13d7

File tree

1 file changed

+90
-21
lines changed

1 file changed

+90
-21
lines changed

‎readme.md

+90-21
Original file line numberDiff line numberDiff line change
@@ -8,44 +8,87 @@
88
[![Backers][backers-badge]][collective]
99
[![Chat][chat-badge]][chat]
1010

11-
[**hast**][hast] utility to transform [Parse5’s AST][ast] to a hast
12-
[*tree*][tree].
11+
[hast][] utility to transform from [`parse5`][parse5]s [AST][].
1312

14-
## Install
13+
## Contents
14+
15+
* [What is this?](#what-is-this)
16+
* [When should I use this?](#when-should-i-use-this)
17+
* [Install](#install)
18+
* [Use](#use)
19+
* [API](#api)
20+
* [`fromParse5(ast[, file|options])`](#fromparse5ast-fileoptions)
21+
* [Types](#types)
22+
* [Compatibility](#compatibility)
23+
* [Security](#security)
24+
* [Related](#related)
25+
* [Contribute](#contribute)
26+
* [License](#license)
27+
28+
## What is this?
29+
30+
This package is a utility that can turn a parse5 tree into a hast tree.
1531

16-
This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c):
17-
Node 12+ is needed to use it and it must be `import`ed instead of `require`d.
32+
## When should I use this?
1833

19-
[npm][]:
34+
You can use this package when using `parse5` as an HTML parser and wanting to
35+
work with hast.
36+
37+
The utility [`hast-util-to-parse5`][hast-util-to-parse5] does the inverse of
38+
this utility.
39+
It generates `parse5`s AST again.
40+
41+
The rehype plugin [`rehype-parse`][rehype-parse] wraps this utility with
42+
`parse5` to both parse HTML and generate hast from it at a higher-level (easier)
43+
abstraction.
44+
45+
## Install
46+
47+
This package is [ESM only][esm].
48+
In Node.js (version 12.20+, 14.14+, 16.0+, 18.0+), install with [npm][]:
2049

2150
```sh
2251
npm install hast-util-from-parse5
2352
```
2453

54+
In Deno with [`esm.sh`][esmsh]:
55+
56+
```js
57+
import {fromParse5} from "https://esm.sh/hast-util-from-parse5@7"
58+
```
59+
60+
In browsers with [`esm.sh`][esmsh]:
61+
62+
```html
63+
<script type="module">
64+
import {fromParse5} from "https://esm.sh/hast-util-from-parse5@7?bundle"
65+
</script>
66+
```
67+
2568
## Use
2669

27-
Say we have the following file, `example.html`:
70+
Say our document `example.html` contains:
2871

2972
```html
3073
<!doctype html><title>Hello!</title><h1 id="world">World!<!--after-->
3174
```
3275

33-
And our script, `example.js`, looks as follows:
76+
…and our module `example.js` looks as follows:
3477

3578
```js
3679
import {parse} from 'parse5'
37-
import {readSync} from 'to-vfile'
80+
import {read} from 'to-vfile'
3881
import {inspect} from 'unist-util-inspect'
3982
import {fromParse5} from 'hast-util-from-parse5'
4083

41-
const file = readSync('example.html')
84+
const file = await read('example.html')
4285
const p5ast = parse(String(file), {sourceCodeLocationInfo: true})
4386
const hast = fromParse5(p5ast, file)
4487

4588
console.log(inspect(hast))
4689
```
4790

48-
Now, running `node example` yields:
91+
…now running `node example.js` yields:
4992

5093
```text
5194
root[2] (1:1-2:1, 0-70)
@@ -71,21 +114,21 @@ root[2] (1:1-2:1, 0-70)
71114

72115
## API
73116

74-
This package exports the following identifiers: `fromParse5`.
117+
This package exports the identifier `fromParse5`.
75118
There is no default export.
76119

77120
### `fromParse5(ast[, file|options])`
78121

79-
Transform [Parse5’s AST][ast] to a [**hast**][hast] [*tree*][tree].
122+
Transform from [`parse5`][parse5]s [AST][].
80123

81124
##### `options`
82125

83126
If `options` is a [`VFile`][vfile], it’s treated as `{file: options}`.
84127

85128
###### `options.space`
86129

87-
Whether the [*root*][root] of the [*tree*][tree] is in the `'html'` or `'svg'`
88-
space (enum, `'svg'` or `'html'`, default: `'html'`).
130+
Whether the [*root*][root] of the [*tree*][tree] is in the HTML or SVG space
131+
(enum, `'svg'` or `'html'`, default: `'html'`).
89132

90133
If an element in with the SVG namespace is found in `ast`, `fromParse5`
91134
automatically switches to the SVG space when entering the element, and switches
@@ -148,6 +191,18 @@ The verbose info would looks as follows:
148191
}
149192
```
150193

194+
## Types
195+
196+
This package is fully typed with [TypeScript][].
197+
It exports the additional type `Options`.
198+
199+
## Compatibility
200+
201+
Projects maintained by the unified collective are compatible with all maintained
202+
versions of Node.js.
203+
As of now, that is Node.js 12.20+, 14.14+, 16.0+, and 18.0+.
204+
Our projects sometimes work with older versions, but this is not guaranteed.
205+
151206
## Security
152207

153208
Use of `hast-util-from-parse5` can open you up to a
@@ -170,8 +225,8 @@ Use of `hast-util-from-parse5` can open you up to a
170225

171226
## Contribute
172227

173-
See [`contributing.md` in `syntax-tree/.github`][contributing] for ways to get
174-
started.
228+
See [`contributing.md`][contributing] in [`syntax-tree/.github`][health] for
229+
ways to get started.
175230
See [`support.md`][support] for ways to get help.
176231

177232
This project has a [code of conduct][coc].
@@ -212,15 +267,27 @@ abide by its terms.
212267

213268
[npm]: https://docs.npmjs.com/cli/install
214269

270+
[esm]: https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c
271+
272+
[esmsh]: https://esm.sh
273+
274+
[typescript]: https://www.typescriptlang.org
275+
215276
[license]: license
216277

217278
[author]: https://wooorm.com
218279

219-
[contributing]: https://github.com/syntax-tree/.github/blob/HEAD/contributing.md
280+
[health]: https://github.com/syntax-tree/.github
281+
282+
[contributing]: https://github.com/syntax-tree/.github/blob/main/contributing.md
220283

221-
[support]: https://github.com/syntax-tree/.github/blob/HEAD/support.md
284+
[support]: https://github.com/syntax-tree/.github/blob/main/support.md
222285

223-
[coc]: https://github.com/syntax-tree/.github/blob/HEAD/code-of-conduct.md
286+
[coc]: https://github.com/syntax-tree/.github/blob/main/code-of-conduct.md
287+
288+
[xss]: https://en.wikipedia.org/wiki/Cross-site_scripting
289+
290+
[parse5]: https://github.com/inikulin/parse5
224291

225292
[ast]: https://github.com/inikulin/parse5/blob/HEAD/packages/parse5/docs/tree-adapter/default/interface-list.md
226293

@@ -232,10 +299,12 @@ abide by its terms.
232299

233300
[positional-information]: https://github.com/syntax-tree/unist#positional-information
234301

302+
[hast-util-to-parse5]: https://github.com/syntax-tree/hast-util-to-parse5
303+
235304
[file]: https://github.com/syntax-tree/unist#file
236305

237306
[hast]: https://github.com/syntax-tree/hast
238307

239308
[node]: https://github.com/syntax-tree/hast#nodes
240309

241-
[xss]: https://en.wikipedia.org/wiki/Cross-site_scripting
310+
[rehype-parse]: https://github.com/rehypejs/rehype/tree/main/packages/rehype-parse

0 commit comments

Comments
 (0)