hast-util-to-estree

[![Build][badge-build-image]][badge-build-url]
[![Coverage][badge-coverage-image]][badge-coverage-url]
[![Downloads][badge-downloads-image]][badge-downloads-url]
[![Size][badge-size-image]][badge-size-url]

[hast][github-hast] utility to transform to [estree][github-estree] (JSX).

Contents

* What is this?
* When should I use this?
* Install
* Use
* API
* [toEstree(tree[, options])](#toestreetree-options)
* defaultHandlers
* ElementAttributeNameCase
* Handle
* Options
* Space
* State
* StylePropertyNameCase
* Types
* Compatibility
* Security
* Related
* Contribute
* License

What is this?

This package is a utility that takes a
[hast][github-hast] (HTML)
syntax tree as input and turns it into an
[estree][github-estree] (JavaScript)
syntax tree (with a JSX extension).
This package also supports embedded MDX nodes.

When should I use this?

This project is useful when you want to embed HTML as JSX inside JS while
working with syntax trees.
This is used in [MDX][mdxjs].

Install

This package is [ESM only][github-gist-esm].
In Node.js (version 16+), install with [npm][npmjs-install]:

``sh
npm install hast-util-to-estree
`

In Deno with [esm.sh][esmsh]:

`js
import {toEstree} from 'https://esm.sh/hast-util-to-estree@3'
`

In browsers with [esm.sh][esmsh]:

`html

`

Use

Say our module example.html contains:

`html






Hello, world!






cx="120"
cy="70"
rx="100"
ry="50"
/>


`

…and our module example.js looks as follows:

`js
import fs from 'node:fs/promises'
import {jsx, toJs} from 'estree-util-to-js'
import {fromHtml} from 'hast-util-from-html'
import {toEstree} from 'hast-util-to-estree'

const hast = fromHtml(await fs.readFile('example.html'))

const estree = toEstree(hast)

console.log(toJs(estree, {handlers: jsx}).value)
`

…now running node example.js (and prettier) yields:

`js
/ Commentz /
;<>



{'\n'}

{'\n'}




{'Hello, world!'}


{'\n'}
download
style={{
width: '1',
height: '10px'
}}
/>
{'\n'}
{}
{'\n'}

{'\n '}

{'\n '}

{'\n'}

{'\n'}