Registry / serialization / estree-util-build-jsx

estree-util-build-jsx

library3.0.1jsnpmunverified

estree-util-build-jsx is a utility designed to transform JSX nodes within an ESTree (Abstract Syntax Tree) into standard function calls, such as those used by `h` (hyperscript) functions for React, Preact, or custom renderers. This package currently stands at version 3.0.1, with recent major updates in 3.0.0 introducing breaking changes like ESM-only distribution and requiring Node.js 16+. Its release cadence is active, with consistent updates and bug fixes. A key differentiator is its focus on AST transformation rather than full code compilation, making it suitable for pipelines where an AST is already available (e.g., from Acorn or other parsers). Unlike comprehensive compilers like SWC or esbuild, it does not parse raw source code. It also has specific behavioral differences compared to Babel's JSX transform, such as explicit support for namespaces and different handling of `this` as a component.

serialization web-framework

github ↗package ↗

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.

Package is ESM-only since v2.0.0; CommonJS require() is not supported.

import { buildJsx } from 'estree-util-build-jsx'

Type import for configuration; avoid importing as a value.

import type { Options } from 'estree-util-build-jsx'

Type import for the JSX runtime configuration; avoid importing as a value.

import type { Runtime } from 'estree-util-build-jsx'

This quickstart demonstrates parsing JSX with `acorn-jsx`, transforming the resulting ESTree using `buildJsx` to convert JSX elements into function calls, and then converting the modified tree back into JavaScript code.

import jsx from 'acorn-jsx'; import { fromJs } from 'esast-util-from-js'; import { buildJsx } from 'estree-util-build-jsx'; import { toJs } from 'estree-util-to-js'; // Simulate reading a JSX file content const doc = ` import x from 'xastscript'; console.log( <album id={123}> <name>Born in the U.S.A.</name> <artist>Bruce Springsteen</artist> <releasedate date="1984-04-06">April 6, 1984</releasedate> </album> ); console.log( <> {1 + 1} <self-closing /> <x name key="value" key={expression} {...spread} /> </> ); `; // Parse the JSX content into an ESTree const tree = fromJs(doc, { module: true, plugins: [jsx()] }); // Transform JSX nodes in the tree into function calls // The buildJsx function modifies the tree in place and yields undefined. buildJsx(tree, { pragma: 'x', pragmaFrag: 'null' }); // Convert the modified ESTree back to JavaScript code const transformedCode = toJs(tree).value; console.log(transformedCode);

Debug

Known footguns

breakingVersion 3.0.0 updated the minimum Node.js requirement to 16. Older Node.js versions are no longer supported.

breakingThe package transitioned to ESM-only distribution. CommonJS `require()` statements will no longer work.

breakingThe `buildJsx` function no longer returns the transformed tree. It modifies the tree in place and yields `undefined`.

breakingThe `BuildJsxOptions` TypeScript type was removed. Use the `Options` type instead.

gotchaThe package now uses the `exports` field in `package.json` for module resolution. Direct imports to internal or private paths within the package might break.

Upgrade

Version history

Breaking-change detection hasn't run for this library yet.

Audit

Security & dependencies

CVE tracking and dependency tree are planned for a later release.

Agent activity

9 hits · last 30 days

gptbot

ahrefsbot

script

Resources

githubhttps://github.com/syntax-tree/estree-util-build-jsx ↗

packagehttps://www.npmjs.com/package/estree-util-build-jsx ↗