1
1
# hast-util-to-estree
2
2
3
- [ ![ Build] [ build-badge ]] [ build ]
4
- [ ![ Coverage] [ coverage-badge ]] [ coverage ]
5
- [ ![ Downloads] [ downloads-badge ]] [ downloads ]
6
- [ ![ Size] [ size-badge ]] [ size ]
7
- [ ![ Sponsors] [ sponsors-badge ]] [ collective ]
8
- [ ![ Backers] [ backers-badge ]] [ collective ]
9
- [ ![ Chat] [ chat-badge ]] [ chat ]
3
+ [ ![ Build] [ badge-build-image ]] [ badge-build-url ]
4
+ [ ![ Coverage] [ badge-coverage-image ]] [ badge-coverage-url ]
5
+ [ ![ Downloads] [ badge-downloads-image ]] [ badge-downloads-url ]
6
+ [ ![ Size] [ badge-size-image ]] [ badge-size-url ]
10
7
11
- [ hast] [ ] utility to transform to [ estree] [ ] (JSX).
8
+ [ hast] [ github-hast ] utility to transform to [ estree] [ github-estree ] (JSX).
12
9
13
10
## Contents
14
11
34
31
35
32
## What is this?
36
33
37
- This package is a utility that takes a [ hast] [ ] (HTML) syntax tree as input and
38
- turns it into an [ estree] [ ] (JavaScript) syntax tree (with a JSX extension).
34
+ This package is a utility that takes a
35
+ [ hast] [ github-hast ] (HTML)
36
+ syntax tree as input and turns it into an
37
+ [ estree] [ github-estree ] (JavaScript)
38
+ syntax tree (with a JSX extension).
39
39
This package also supports embedded MDX nodes.
40
40
41
41
## When should I use this?
42
42
43
43
This project is useful when you want to embed HTML as JSX inside JS while
44
44
working with syntax trees.
45
- This is used in [ MDX] [ ] .
45
+ This is used in [ MDX] [ mdxjs ] .
46
46
47
47
## Install
48
48
49
- This package is [ ESM only] [ esm ] .
50
- In Node.js (version 16+), install with [ npm] [ ] :
49
+ This package is [ ESM only] [ github-gist- esm] .
50
+ In Node.js (version 16+), install with [ npm] [ npmjs-install ] :
51
51
52
52
``` sh
53
53
npm install hast-util-to-estree
@@ -108,7 +108,7 @@ console.log(toJs(estree, {handlers: jsx}).value)
108
108
109
109
…now running ` node example.js ` (and prettier) yields:
110
110
111
- ``` jsx
111
+ ``` js
112
112
/* Commentz */
113
113
;<>
114
114
< html lang= " en" >
@@ -185,28 +185,30 @@ options.
185
185
186
186
###### Parameters
187
187
188
- * ` tree ` ([ ` HastNode ` ] [ hast-node ] )
188
+ * ` tree ` ([ ` HastNode ` ] [ github- hast-nodes ] )
189
189
— hast tree
190
190
* ` options ` ([ ` Options ` ] [ api-options ] , optional)
191
191
— configuration
192
192
193
193
###### Returns
194
194
195
- estree program node ([ ` Program ` ] [ program ] ).
195
+ estree program node ([ ` Program ` ] [ github-estree- program] ).
196
196
197
197
The program’s last child in ` body ` is most likely an ` ExpressionStatement ` ,
198
198
whose expression is a ` JSXFragment ` or a ` JSXElement ` .
199
199
200
200
Typically, there is only one node in ` body ` , however, this utility also supports
201
- embedded MDX nodes in the HTML (when [ ` mdast-util-mdx ` ] [ mdast-util-mdx ] is used
202
- with mdast to parse markdown before passing its nodes through to hast).
201
+ embedded MDX nodes in the HTML
202
+ (when [ ` mdast-util-mdx ` ] [ github-mdast-util-mdx ] is used with mdast to parse
203
+ markdown before passing its nodes through to hast).
203
204
When MDX ESM import/exports are used, those nodes are added before the fragment
204
205
or element in body.
205
206
206
207
There aren’t many great estree serializers out there that support JSX.
207
- To do that, you can use [ ` estree-util-to-js ` ] [ estree-util-to-js ] .
208
- Or, use [ ` estree-util-build-jsx ` ] [ build-jsx ] to turn JSX into function
209
- calls, and then serialize with whatever (` astring ` , ` escodegen ` ).
208
+ To do that, you can use [ ` estree-util-to-js ` ] [ github-estree-util-to-js ] .
209
+ Or, use [ ` estree-util-build-jsx ` ] [ github-estree-util-build-jsx ]
210
+ to turn JSX into function calls,
211
+ and then serialize with whatever (` astring ` , ` escodegen ` ).
210
212
211
213
### ` defaultHandlers `
212
214
@@ -233,7 +235,7 @@ Turn a hast node into an estree node (TypeScript type).
233
235
234
236
###### Parameters
235
237
236
- * ` node ` ([ ` HastNode ` ][hast-node ])
238
+ * ` node ` ([ ` HastNode ` ][github- hast-nodes ])
237
239
— expected hast node
238
240
* ` state ` ([ ` State ` ][api-state])
239
241
— info passed around about the current state
@@ -307,7 +309,7 @@ Info passed around about the current state (TypeScript type).
307
309
data)
308
310
* ` patch ` ( ` (from : HastNode , to : EstreeNode ) => undefined ` )
309
311
— take positional info from ` from ` (use ` inherit ` if you also want data)
310
- * ` schema ` ([ ` Schema ` ][schema])
312
+ * ` schema ` ([ ` Schema ` ][github-property-information- schema])
311
313
— current schema
312
314
* ` stylePropertyNameCase `
313
315
([ ` StylePropertyNameCase ` ][api-style-property-name-case])
@@ -354,107 +356,97 @@ It’s not safe.
354
356
355
357
## Related
356
358
357
- * [ ` estree -util -build -jsx ` ][build-jsx]
359
+ * [ ` estree -util -build -jsx ` ][github-estree-util- build-jsx]
358
360
— transform JSX to function calls
359
- * [ ` hastscript ` ][hastscript]
361
+ * [ ` hastscript ` ][github- hastscript]
360
362
— hyperscript compatible interface for creating nodes
361
363
* [ ` hast -util -from -dom ` ](https://github.com/syntax-tree/hast-util-from-dom)
362
364
— transform a DOM tree to hast
363
365
364
366
## Contribute
365
367
366
- See [ ` contributing .md ` ][contributing] in [ ` syntax -tree /.github ` ][health] for
367
- ways to get started.
368
- See [ ` support .md ` ][support] for ways to get help.
368
+ See [ ` contributing .md ` ][health- contributing] in [ ` syntax -tree /.github ` ][health]
369
+ for ways to get started.
370
+ See [ ` support .md ` ][health- support] for ways to get help.
369
371
370
- This project has a [code of conduct][coc].
372
+ This project has a [code of conduct][health- coc].
371
373
By interacting with this repository, organization, or community you agree to
372
374
abide by its terms.
373
375
374
376
## License
375
377
376
- [MIT][license] © [Titus Wormer][author ]
378
+ [MIT][file- license] © [Titus Wormer][wooorm ]
377
379
378
380
<!-- Definitions -->
379
381
380
- [build-badge]: https://github.com/syntax-tree/hast-util-to-estree/workflows/main/badge.svg
381
-
382
- [build]: https://github.com/syntax-tree/hast-util-to-estree/actions
383
-
384
- [coverage-badge]: https://img.shields.io/codecov/c/github/syntax-tree/hast-util-to-estree.svg
385
-
386
- [coverage]: https://codecov.io/github/syntax-tree/hast-util-to-estree
387
-
388
- [downloads-badge]: https://img.shields.io/npm/dm/hast-util-to-estree.svg
389
-
390
- [downloads]: https://www.npmjs.com/package/hast-util-to-estree
382
+ [api-default-handlers]: #defaulthandlers
391
383
392
- [size-badge]: https://img.shields.io/badge/dynamic/json?label=minzipped%20size&query=$.size.compressedSize&url=https://deno.bundlejs.com/?q=hast-util-to-estree
384
+ [api-element-attribute-name-case]: #elementattributenamecase
393
385
394
- [size ]: https://bundlejs.com/?q=hast-util-to-estree
386
+ [api-handle ]: #handle
395
387
396
- [sponsors-badge ]: https://opencollective.com/unified/sponsors/badge.svg
388
+ [api-options ]: #options
397
389
398
- [backers-badge ]: https://opencollective.com/unified/backers/badge.svg
390
+ [api-space ]: #space
399
391
400
- [collective ]: https://opencollective.com/unified
392
+ [api-state ]: #state
401
393
402
- [chat-badge ]: https://img.shields.io/badge/chat-discussions-success.svg
394
+ [api-style-property-name-case ]: #stylepropertynamecase
403
395
404
- [chat ]: https://github.com/syntax-tree/unist/discussions
396
+ [api-to-estree ]: #toestreetree-options
405
397
406
- [npm ]: https://docs.npmjs. com/cli/install
398
+ [badge-build-image ]: https://github. com/syntax-tree/hast-util-to-estree/workflows/main/badge.svg
407
399
408
- [esm ]: https://gist. github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c
400
+ [badge-build-url ]: https://github.com/syntax-tree/hast-util-to-estree/actions
409
401
410
- [esmsh ]: https://esm.sh
402
+ [badge-coverage-image ]: https://img.shields.io/codecov/c/github/syntax-tree/hast-util-to-estree.svg
411
403
412
- [typescript ]: https://www.typescriptlang.org
404
+ [badge-coverage-url ]: https://codecov.io/github/syntax-tree/hast-util-to-estree
413
405
414
- [license ]: license
406
+ [badge-downloads-image ]: https://img.shields.io/npm/dm/hast-util-to-estree.svg
415
407
416
- [author ]: https://wooorm. com
408
+ [badge-downloads-url ]: https://www.npmjs. com/package/hast-util-to-estree
417
409
418
- [health ]: https://github.com/syntax-tree/.github
410
+ [badge-size-image ]: https://img.shields.io/bundlejs/size/hast-util-to-estree
419
411
420
- [contributing ]: https://github .com/syntax-tree/.github/blob/main/contributing.md
412
+ [badge-size-url ]: https://bundlejs .com/?q=hast-util-to-estree
421
413
422
- [support ]: https://github.com/syntax-tree/.github/blob/main/support.md
414
+ [esmsh ]: https://esm.sh
423
415
424
- [coc ]: https://github.com/syntax-tree/.github/blob/main/code-of-conduct.md
416
+ [file-license ]: license
425
417
426
- [hastscript ]: https://github.com/syntax-tree/hastscript
418
+ [github-estree ]: https://github.com/estree/estree
427
419
428
- [hast ]: https://github.com/syntax-tree/hast
420
+ [github-estree-program ]: https://github.com/estree/estree/blob/master/es5.md#programs
429
421
430
- [hast-node ]: https://github.com/syntax-tree/hast#nodes
422
+ [github-estree-util-build-jsx ]: https://github.com/wooorm/estree-util-build-jsx
431
423
432
- [estree]: https://github.com/estree /estree
424
+ [github- estree-util-to-js ]: https://github.com/syntax-tree /estree-util-to-js
433
425
434
- [program ]: https://github.com/estree/estree/blob/master/es5.md#programs
426
+ [github-gist-esm ]: https://gist. github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c
435
427
436
- [estree-util-to-js ]: https://github.com/syntax-tree/estree-util-to-js
428
+ [github-hast ]: https://github.com/syntax-tree/hast
437
429
438
- [mdast-util-mdx ]: https://github.com/syntax-tree/mdast-util-mdx
430
+ [github-hast-nodes ]: https://github.com/syntax-tree/hast#nodes
439
431
440
- [build-jsx ]: https://github.com/wooorm/estree-util-build-jsx
432
+ [github-hastscript ]: https://github.com/syntax-tree/hastscript
441
433
442
- [schema ]: https://github.com/wooorm/property-information#api
434
+ [github-mdast-util-mdx ]: https://github.com/syntax-tree/mdast-util-mdx
443
435
444
- [mdx ]: https://mdxjs .com
436
+ [github-property-information-schema ]: https://github .com/wooorm/property-information#api
445
437
446
- [api-default-handlers ]: #defaulthandlers
438
+ [health ]: https://github.com/syntax-tree/.github
447
439
448
- [api-to-estree ]: #toestreetree-options
440
+ [health-coc ]: https://github.com/syntax-tree/.github/blob/main/code-of-conduct.md
449
441
450
- [api-element-attribute-name-case ]: #elementattributenamecase
442
+ [health-contributing ]: https://github.com/syntax-tree/.github/blob/main/contributing.md
451
443
452
- [api-handle ]: #handle
444
+ [health-support ]: https://github.com/syntax-tree/.github/blob/main/support.md
453
445
454
- [api-options ]: #options
446
+ [mdxjs ]: https://mdxjs.com
455
447
456
- [api-space ]: #space
448
+ [npmjs-install ]: https://docs.npmjs.com/cli/install
457
449
458
- [api-state ]: #state
450
+ [typescript ]: https://www.typescriptlang.org
459
451
460
- [api-style-property-name-case ]: #stylepropertynamecase
452
+ [wooorm ]: https://wooorm.com
0 commit comments