Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
By Philipp Burckhardt - Oct 17, 2024
hast-util-to-estree
Advanced tools
What is hast-util-to-estree?
The `hast-util-to-estree` package is a utility that converts HAST (Hypertext Abstract Syntax Tree) to ESTree (ECMAScript Tree). This is particularly useful for projects that need to manipulate HTML or Markdown content and then transform it into JavaScript code structures.
What are hast-util-to-estree's main functionalities?
Convert HAST to ESTree
This feature allows you to convert a HAST node into an ESTree node. The code sample demonstrates converting a simple HAST node representing a <div> element into its ESTree equivalent.
const toEstree = require('hast-util-to-estree');
const hast = { type: 'element', tagName: 'div', properties: {}, children: [] };
const estree = toEstree(hast);
console.log(estree);Handling different HAST node types
This feature shows how the utility handles different types of HAST nodes, including text nodes. The code sample converts a HAST node representing a <p> element with text content into its ESTree equivalent.
const toEstree = require('hast-util-to-estree');
const hast = { type: 'element', tagName: 'p', properties: {}, children: [{ type: 'text', value: 'Hello, world!' }] };
const estree = toEstree(hast);
console.log(estree);Other packages similar to hast-util-to-estree
rehype-parse
The `rehype-parse` package is used to parse HTML into HAST. While it doesn't convert HAST to ESTree, it is often used in conjunction with `hast-util-to-estree` to first parse HTML and then convert it to JavaScript structures.
unist-util-visit
The `unist-util-visit` package is a utility for traversing Unist syntax trees, which include HAST. It doesn't convert HAST to ESTree but can be used to manipulate HAST nodes before conversion.
hast-util-to-estree
hast utility to transform a tree to estree JSX.
Install
This package is ESM only:
Node 12+ is needed to use it and it must be imported instead of required.
npm:
npm install hast-util-to-estree
Use
Say we have the following HTML file, example.html:
<!doctype html>
<html lang=en>
<title>Hi!</title>
<link rel=stylesheet href=index.css>
<h1>Hello, world!</h1>
<a download style="width:1;height:10px"></a>
<!--commentz-->
<svg xmlns="http://www.w3.org/2000/svg">
<title>SVG `<ellipse>` element</title>
<ellipse
cx="120"
cy="70"
rx="100"
ry="50"
/>
</svg>
<script src="index.js"></script>
And our script, example.js, is:
import fs from 'node:fs'
import parse5 from 'parse5'
import {fromParse5} from 'hast-util-from-parse5'
import {toEstree} from 'hast-util-to-estree'
import recast from 'recast'
const hast = fromParse5(parse5.parse(String(fs.readFileSync('example.html'))))
const estree = toEstree(hast)
estree.comments = null // `recast` doesn’t like comments on the root.
console.log(recast.prettyPrint(estree).code)
Now, node example (and prettier), yields:
;<>
<html lang="en">
<head>
<title>{'Hi!'}</title>
{'\n'}
<link rel="stylesheet" href="index.css" />
{'\n'}
</head>
<body>
<h1>{'Hello, world!'}</h1>
{'\n'}
<a
download
style={{
width: '1',
height: '10px'
}}
/>
{'\n'}
{/*commentz*/}
{'\n'}
<svg xmlns="http://www.w3.org/2000/svg">
{'\n '}
<title>{'SVG `<ellipse>` element'}</title>
{'\n '}
<ellipse cx="120" cy="70" rx="100" ry="50" />
{'\n'}
</svg>
{'\n'}
<script src="index.js" />
{'\n'}
</body>
</html>
</>
API
This package exports the following identifiers: toEstree.
There is no default export.
toEstree(tree, options?)
Transform a hast tree to an estree (JSX).
options
space(enum,'svg'or'html', default:'html') — Whether node is in the'html'or'svg'space. If ansvgelement is found when inside the HTML space,toEstreeautomatically switches to the SVG space when entering the element, and switches back when exiting
Returns
estree — a Program node, whose last child in body is most
likely an ExpressionStatement whose expression is a JSXFragment or a
JSXElement.
Typically, there is only one node in body, however, this utility also supports
embedded MDX nodes in the HTML (when mdast-util-mdx is used
with mdast to parse markdown before passing its nodes through to hast).
When MDX ESM import/exports are used, those nodes are added before the fragment
or element in body.
Note
Comments are both attached to the tree in their neighbouring nodes (recast and
babel style), and added as a comments array on the program node (espree
style).
You may have to do program.comments = null for certain compilers.
There aren’t many great estree serializers out there that support JSX.
recast does a fine job.
Or use estree-util-build-jsx to turn JSX into function
calls and then serialize with whatever (astring, escodegen).
Security
You’re working with JavaScript. It’s not safe.
Related
hastscript— Hyperscript compatible interface for creating nodeshast-util-from-dom— Transform a DOM tree to hastunist-builder— Create any unist treexastscript— Create a xast treeestree-util-build-jsx— Transform JSX to function calls
Contribute
See contributing.md in syntax-tree/.github for ways to get
started.
See support.md for ways to get help.
This project has a code of conduct. By interacting with this repository, organization, or community you agree to abide by its terms.
License
FAQs
hast utility to transform to estree (JavaScript AST) JSX
The npm package hast-util-to-estree receives a total of 1,120,714 weekly downloads. As such, hast-util-to-estree popularity was classified as popular.
We found that hast-util-to-estree demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Package last updated on 31 Aug 2021
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Product
Enhancing Open-Source Compliance: Introducing Socket’s Advanced License Analysis
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
By Christopher Bailey - Oct 17, 2024
Product
Introducing Socket Optimize
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.
By John-David Dalton - Oct 16, 2024