hast-util-to-estree

[![Build][build-badge]][build] [![Coverage][coverage-badge]][coverage] [![Downloads][downloads-badge]][downloads] [![Size][size-badge]][size] [![Sponsors][sponsors-badge]][collective] [![Backers][backers-badge]][collective] [![Chat][chat-badge]][chat]

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

Contents

• What is this?
• When should I use this?
• Install
• Use
• API
  • toEstree(tree[, 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][] (HTML) syntax tree as input and turns it into an [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][].

Install

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

npm install hast-util-to-estree

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

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

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

Use

Say our module example.html contains:

<title>Hi!</title>

<h1>Hello, world!</h1>
<a style="width:1;height:10px" download=""></a>

<svg xmlns="https://www.w3.org/2000/svg">
  <title>SVG `&lt;ellipse&gt;` element</title>
  <ellipse ry="50" rx="100" cy="70" cx="120"></ellipse>
</svg>

…and our module example.js looks as follows:

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:

/* Commentz */
;<>
  
    
      <title>{'Hi!'}</title>
      {'\n'}
      
      {'\n'}
    
    
      <h1>{'Hello, world!'}</h1>
      {'\n'}
      <a style="{{" download="">
      {'\n'}
      {}
      {'\n'}
      <svg xmlns="https://www.w3.org/2000/svg">
        {'\n  '}
        <title>{'SVG `</title>
        {'\n  '}
        <ellipse ry="50" rx="100" cy="70" cx="120"></ellipse>
        {'\n'}
      </svg>
      {'\n'}
      </a>