Skip to content

Commit 64e1a66

Browse files
committed
Add improved docs
1 parent 8b5dac0 commit 64e1a66

File tree

1 file changed

+128
-39
lines changed

1 file changed

+128
-39
lines changed

readme.md

Lines changed: 128 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -8,27 +8,79 @@
88
[![Backers][backers-badge]][collective]
99
[![Chat][chat-badge]][chat]
1010

11-
[**hast**][hast] utility to parse the [*tree*][tree] again, now supporting
12-
embedded `raw` nodes.
11+
[hast][] utility to parse the tree and semistandard `raw` nodes (strings of
12+
HTML) again, keeping positional info okay.
13+
14+
## Contents
15+
16+
* [What is this?](#what-is-this)
17+
* [When should I use this?](#when-should-i-use-this)
18+
* [Install](#install)
19+
* [Use](#use)
20+
* [API](#api)
21+
* [`raw(tree[, file][, options])`](#rawtree-file-options)
22+
* [Types](#types)
23+
* [Compatibility](#compatibility)
24+
* [Security](#security)
25+
* [Related](#related)
26+
* [Contribute](#contribute)
27+
* [License](#license)
28+
29+
## What is this?
30+
31+
This package is a utility to parse a document again.
32+
It passes each node and embedded raw HTML through an HTML parser
33+
([`parse5`][parse5]), to recreate a tree exactly as how a browser would parse
34+
it, while keeping the original data and positional info intact.
35+
36+
## When should I use this?
37+
38+
This utility is particularly useful when coming from markdown and wanting to
39+
support HTML embedded inside that markdown (which requires passing
40+
`allowDangerousHtml: true` to `mdast-util-to-hast`).
41+
Markdown dictates how, say, a list item or emphasis can be parsed.
42+
We can use that to turn the markdown syntax tree into an HTML syntax tree.
43+
But markdown also dictates that things that look like HTML, are passed through
44+
untouched, even when it just looks like XML but doesn’t really make sense, so we
45+
can’t normally use these strings of “HTML” to create an HTML syntax tree.
46+
This utility can.
47+
It can be used to take those strings of HTML and include them into the syntax
48+
tree as actual nodes.
49+
50+
If your final result is HTML and you trust content, then “strings” are fine
51+
(you can pass `allowDangerousHtml: true` to `hast-util-to-html`, which passes
52+
HTML through untouched).
53+
But there are two main cases where a proper syntax tree is preferred:
54+
55+
* hast utilities need a proper syntax tree as they operate on actual nodes to
56+
inspect or transform things, they can’t operate on strings of HTML
57+
* other output formats (React, MDX, etc) need actual nodes and can’t handle
58+
strings of HTML
59+
60+
The plugin [`rehype-raw`][rehype-raw] wraps this utility at a higher-level
61+
(easier) abstraction.
1362

14-
One of the reasons to do this is for “malformed” syntax trees: for example, say
15-
there’s an `h1` element in a `p` element, this utility will make them siblings.
63+
## Install
1664

17-
Another reason to do this is if raw HTML/XML is embedded in a syntax tree, which
18-
can occur when coming from Markdown using [`mdast-util-to-hast`][to-hast].
65+
This package is [ESM only][esm].
66+
In Node.js (version 12.20+, 14.14+, 16.0+, or 18.0+), install with [npm][]:
1967

20-
If you’re working with [**remark**][remark] and/or
21-
[`remark-rehype`][remark-rehype], use [`rehype-raw`][rehype-raw] instead.
68+
```sh
69+
npm install hast-util-raw
70+
```
2271

23-
## Install
72+
In Deno with [`esm.sh`][esmsh]:
2473

25-
This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c):
26-
Node 12+ is needed to use it and it must be `import`ed instead of `require`d.
74+
```js
75+
import {raw} from 'https://esm.sh/hast-util-raw@7'
76+
```
2777

28-
[npm][]:
78+
In browsers with [`esm.sh`][esmsh]:
2979

30-
```sh
31-
npm install hast-util-raw
80+
```html
81+
<script type="module">
82+
import {raw} from 'https://esm.sh/hast-util-raw@7?bundle'
83+
</script>
3284
```
3385

3486
## Use
@@ -64,21 +116,58 @@ Yields:
64116

65117
## API
66118

67-
This package exports the following identifiers: `raw`.
119+
This package exports the identifier `raw`.
68120
There is no default export.
69121

70122
### `raw(tree[, file][, options])`
71123

72-
Given a [**hast**][hast] [*tree*][tree] and an optional [vfile][] (for
73-
[positional info][position-information]), return a new parsed-again
74-
[**hast**][hast] [*tree*][tree].
124+
Parse the tree and raw nodes (strings of HTML) again, keeping positional info
125+
okay.
126+
127+
> 👉 **Note**: `tree` should have positional info and `file`, when given, must
128+
> be a [vfile][] corresponding to `tree`.
129+
130+
##### `options`
131+
132+
Configuration (optional).
75133

76134
###### `options.passThrough`
77135

78-
List of custom hast node types to pass through (keep) in hast
79-
(`Array<string>`, default: `[]`).
136+
List of custom hast node types to pass through (keep) in hast (`Array<string>`,
137+
default: `[]`).
80138
If the passed through nodes have children, those children are expected to be
81-
hast and will be handled.
139+
hast and will be handled by this utility.
140+
141+
## Types
142+
143+
This package is fully typed with [TypeScript][].
144+
It exports the additional type `Options`.
145+
146+
It also registers the `Raw` node type with `@types/hast`.
147+
If you’re working with the syntax tree, make sure to import this utility
148+
somewhere in your types, as that registers the new node types in the tree.
149+
150+
```js
151+
/**
152+
* @typedef {import('hast-util-raw')}
153+
*/
154+
155+
import {visit} from 'unist-util-visit'
156+
157+
/** @type {import('hast').Root} */
158+
const tree = getHastNodeSomeHow()
159+
160+
visit(tree, (node) => {
161+
// `node` can now be a `raw` node.
162+
})
163+
```
164+
165+
## Compatibility
166+
167+
Projects maintained by the unified collective are compatible with all maintained
168+
versions of Node.js.
169+
As of now, that is Node.js 12.20+, 14.14+, 16.0+, and 18.0+.
170+
Our projects sometimes work with older versions, but this is not guaranteed.
82171

83172
## Security
84173

@@ -97,20 +186,20 @@ Yields:
97186
<script>alert(1)</script>
98187
```
99188

100-
Do not use this utility in combination with user input or use
101-
[`hast-util-santize`][sanitize].
189+
Either do not use this utility in combination with user input, or use
190+
[`hast-util-santize`][hast-util-sanitize].
102191

103192
## Related
104193

105194
* [`mdast-util-to-hast`](https://github.com/syntax-tree/mdast-util-to-hast)
106195
— transform mdast to hast
107196
* [`rehype-raw`](https://github.com/rehypejs/rehype-raw)
108-
wrapper plugin for [rehype](https://github.com/rehypejs/rehype)
197+
rehype plugin
109198

110199
## Contribute
111200

112-
See [`contributing.md` in `syntax-tree/.github`][contributing] for ways to get
113-
started.
201+
See [`contributing.md`][contributing] in [`syntax-tree/.github`][health] for
202+
ways to get started.
114203
See [`support.md`][support] for ways to get help.
115204

116205
This project has a [code of conduct][coc].
@@ -151,32 +240,32 @@ abide by its terms.
151240

152241
[npm]: https://docs.npmjs.com/cli/install
153242

243+
[esm]: https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c
244+
245+
[esmsh]: https://esm.sh
246+
247+
[typescript]: https://www.typescriptlang.org
248+
154249
[license]: license
155250

156251
[author]: https://wooorm.com
157252

158-
[contributing]: https://github.com/syntax-tree/.github/blob/HEAD/contributing.md
253+
[health]: https://github.com/syntax-tree/.github
159254

160-
[support]: https://github.com/syntax-tree/.github/blob/HEAD/support.md
255+
[contributing]: https://github.com/syntax-tree/.github/blob/main/contributing.md
161256

162-
[coc]: https://github.com/syntax-tree/.github/blob/HEAD/code-of-conduct.md
257+
[support]: https://github.com/syntax-tree/.github/blob/main/support.md
163258

164-
[tree]: https://github.com/syntax-tree/unist#tree
259+
[coc]: https://github.com/syntax-tree/.github/blob/main/code-of-conduct.md
165260

166-
[position-information]: https://github.com/syntax-tree/unist#positional-information
261+
[xss]: https://en.wikipedia.org/wiki/Cross-site_scripting
167262

168263
[hast]: https://github.com/syntax-tree/hast
169264

170-
[to-hast]: https://github.com/syntax-tree/mdast-util-to-hast
265+
[hast-util-sanitize]: https://github.com/syntax-tree/hast-util-sanitize
171266

172267
[vfile]: https://github.com/vfile/vfile
173268

174-
[remark]: https://github.com/remarkjs/remark
175-
176-
[remark-rehype]: https://github.com/remarkjs/remark-rehype
177-
178269
[rehype-raw]: https://github.com/rehypejs/rehype-raw
179270

180-
[xss]: https://en.wikipedia.org/wiki/Cross-site_scripting
181-
182-
[sanitize]: https://github.com/syntax-tree/hast-util-sanitize
271+
[parse5]: https://github.com/inikulin/parse5

0 commit comments

Comments
 (0)