Registry / serialization / hast-util-to-estree

hast-util-to-estree

library3.1.3jsnpmunverified

hast-util-to-estree is a utility package within the unified/syntax-tree ecosystem designed to transform a HTML Abstract Syntax Tree (hast) into an ECMAScript Abstract Syntax Tree (estree) with JSX extensions. This is particularly useful for embedding HTML content as JSX within JavaScript, such as in MDX. The current stable version is 3.1.3, with releases occurring regularly, often involving minor updates to dependencies or new options, indicating active maintenance. Key differentiators include its specific focus on the hast-to-estree transformation, robust handling of JSX, support for embedded MDX nodes, and its adherence to the unist specification, making it a reliable component in pipelines involving content transformation and compilation.

serialization

npm install hast-util-to-estree

github ↗package ↗

INSTALL

IMPORT

SIG · HAST-UTIL-TO-ESTRE

hast-util-to-estree

serializationjavascriptv3.1.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

toEstree

✓ import { toEstree } from 'hast-util-to-estree'

✗ const { toEstree } = require('hast-util-to-estree')

ESM-only since v3.0.0; CommonJS require() will fail.

defaultHandlers

✓ import { defaultHandlers } from 'hast-util-to-estree'

✗ const { defaultHandlers } = require('hast-util-to-estree')

ESM-only since v3.0.0. Provides default transformation logic for various hast nodes.

ElementAttributeNameCase

✓ import type { ElementAttributeNameCase } from 'hast-util-to-estree'

This is a TypeScript type import used for configuring the casing of element attribute names (e.g., 'react' for camelCase or 'html' for original casing).

Demonstrates transforming a raw HTML string into an ESTree (JavaScript AST) with JSX nodes, then rendering it to a JSX-compatible string using companion utilities.

import { read } from 'to-vfile' import { fromHtml } from 'hast-util-from-html' import { toEstree } from 'hast-util-to-estree' import { toJs, jsx } from 'estree-util-to-js' async function transformHtmlToJsx() { const htmlContent = ` <!doctype html> <html lang=en> <title>Example Page</title> <h1>Hello, hast-util-to-estree!</h1> <p style="color:red">This is a styled paragraph.</p> </html> ` // Convert HTML string to a hast tree const hast = fromHtml(htmlContent) // Convert hast tree to an estree (with JSX nodes) const estree = toEstree(hast) // Convert estree to a JavaScript string (with JSX syntax) const jsxOutput = toJs(estree, { handlers: jsx }).value console.log(jsxOutput) } transformHtmlToJsx().catch(console.error)

Debug

Known issues

breakingVersion 3.0.0 changed the minimum required Node.js version to 16. Older Node.js environments will encounter errors.

fix

Upgrade your Node.js environment to version 16 or newer. Use `nvm` or `volta` for managing Node.js versions.

affects: >=3.0.0

breakingSince version 3.0.0, the package is ESM-only and uses the `exports` field in `package.json`. This means `require()` statements will fail, and specific import paths might change.

fix

Migrate your codebase to use ES Modules `import` syntax. Ensure your project is configured for ESM (e.g., `"type": "module"` in `package.json`).

affects: >=3.0.0

breakingVersion 3.0.0 updated its dependency on `@types/hast`. If your project explicitly depends on `@types/hast`, you may need to update your version as well to avoid type conflicts.

fix

Update your `@types/hast` dependency to a compatible version (typically the latest stable release) in your `package.json`.

affects: >=3.0.0

gotchaComments are attached to neighboring nodes and as a `comments` array on the program node. Some compilers (e.g., Babel) might require `program.comments = undefined` for correct processing.

fix

If experiencing issues with comment handling in down-stream compilers, explicitly remove the `comments` array from the program node: `estree.comments = undefined;`.

affects: >=1.0.0

gotchaJSX frameworks often have different conventions for attributes (e.g., `class` vs `className`, `background-color` vs `backgroundColor`). This utility generates standard JSX, which might need further processing for specific frameworks.

fix

Utilize options like `elementAttributeNameCase` or `stylePropertyNameCase` during transformation, or apply a post-processing step if your target framework requires specific attribute naming conventions.

affects: >=1.0.0

Errors

Common errors & fixes

ERR_REQUIRE_ESM

Attempting to use `require('hast-util-to-estree')` in a CommonJS context after version 3.0.0, which is ESM-only.

fix

Change your import statement to `import { toEstree } from 'hast-util-to-estree'` and ensure your Node.js project or file is configured for ES Modules.

ReferenceError: toEstree is not defined

Incorrectly importing `toEstree` using a default import or a misspelled named import.

fix

Ensure you are using a named import: `import { toEstree } from 'hast-util-to-estree'`.

TypeError: toEstree is not a function

Potentially an incorrect default import being treated as a function, or a version mismatch where `toEstree` isn't properly exported.

fix

Verify that you are using the correct named import: `import { toEstree } from 'hast-util-to-estree'`. Check your package version for any breaking changes related to exports.

Upgrade

Version history

3.1.3latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/syntax-tree/hast-util-to-estree ↗

packagehttps://www.npmjs.com/package/hast-util-to-estree ↗