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!
estree-util-build-jsx
Advanced tools
Transform JSX in estrees to function calls (for react, preact, and most hyperscript interfaces)
estree utility to turn JSX into function calls: <x />
-> h('x')
!
This package is a utility that takes an estree (JavaScript) syntax tree as input that contains embedded JSX nodes (elements, fragments) and turns them into function calls.
If you already have a tree and only need to compile JSX away, use this. If you have code, using something like SWC or esbuild instead.
This package is ESM only. In Node.js (version 12.20+, 14.14+, or 16.0+), install with npm:
npm install estree-util-build-jsx
In Deno with esm.sh
:
import {buildJsx} from 'https://esm.sh/estree-util-build-jsx@2'
In browsers with esm.sh
:
<script type="module">
import {buildJsx} from 'https://esm.sh/estree-util-build-jsx@2?bundle'
</script>
Say we have the following example.jsx
:
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} />
</>
)
…and next to it a module example.js
:
import fs from 'node:fs/promises'
import {Parser} from 'acorn'
import jsx from 'acorn-jsx'
import {generate} from 'astring'
import {buildJsx} from 'estree-util-build-jsx'
const doc = String(await fs.readFile('example.jsx'))
const tree = Parser.extend(jsx()).parse(doc, {
sourceType: 'module',
ecmaVersion: 2022
})
buildJsx(tree, {pragma: 'x', pragmaFrag: 'null'})
console.log(generate(tree))
…now running node example.js
yields:
import x from 'xastscript';
console.log(x("album", {
id: 123
}, x("name", null, "Born in the U.S.A."), x("artist", null, "Bruce Springsteen"), x("releasedate", {
date: "1984-04-06"
}, "April 6, 1984")));
console.log(x(null, null, 1 + 1, x("self-closing"), x("x", Object.assign({
name: true,
key: "value",
key: expression
}, spread))));
This package exports the identifier buildJsx
.
There is no default export.
buildJsx(tree, options?)
Turn JSX in tree
(Program
) into function calls:
<x />
-> h('x')
!
options
Configuration (optional).
👉 Note: you can also configure
runtime
,importSource
,pragma
, andpragmaFrag
from within files through comments.
options.runtime
Choose the runtime
(string
, 'automatic'
or 'classic'
, default: 'classic'
).
Comment form: @jsxRuntime theRuntime
.
options.importSource
Place to import jsx
, jsxs
, jsxDEV
, and/or Fragment
from, when the
effective runtime is automatic (string
, default: 'react'
).
Comment form: @jsxImportSource theSource
.
👉 Note:
/jsx-runtime
or/jsx-dev-runtime
is appended to this provided source. In CJS, that can resolve to a file, as intheSource/jsx-runtime.js
, but for ESM an export map needs to be set up to point to files:
// … "exports": { // … "./jsx-runtime": "./path/to/jsx-runtime.js", "./jsx-dev-runtime": "./path/to/jsx-runtime.js" // …
options.pragma
Identifier or member expression to call when the effective runtime is classic
(string
, default: 'React.createElement'
).
Comment form: @jsx identifier
.
options.pragmaFrag
Identifier or member expression to use as a symbol for fragments when the
effective runtime is classic (string
, default: 'React.Fragment'
).
Comment form: @jsxFrag identifier
.
options.development
Import jsxDEV
from theSource/jsx-dev-runtime.js
and add location info on
where a component originated from (boolean
, default: false
).
This helps debugging but adds a lot of code that you don’t want in production.
Only used in the automatic runtime.
options.filePath
File path to the original source file (string
, example: 'path/to/file.js'
).
Used in the location info when using the automatic runtime with
development: true
.
The given tree
(Node
).
To support configuration from comments in Acorn, those comments have to be in
the program.
This is done by espree
but not automatically by acorn
:
import {Parser} from 'acorn'
import jsx from 'acorn-jsx'
const doc = '' // To do: get `doc` somehow.
const comments = []
const tree = Parser.extend(jsx()).parse(doc, {onComment: comments})
tree.comments = comments
In almost all cases, this utility is the same as the Babel plugin, except that they work on slightly different syntax trees.
Some differences:
this
is not a component: <this>
-> h('this')
, not h(this)
<a:b c:d>
-> h('a:b', {'c:d': true})
,
which throws by default in Babel or can be turned on with throwIfNamespace
useSpread
, useBuiltIns
, or filter
optionsThis package is fully typed with TypeScript.
It exports the types Options
and Node
.
Projects maintained by the unified collective are compatible with all maintained versions of Node.js. As of now, that is Node.js 12.20+, 14.14+, and 16.0+. Our projects sometimes work with older versions, but this is not guaranteed.
syntax-tree/hast-util-to-estree
— turn hast (HTML) to estree
JSXcoderaiser/estree-to-babel
— turn estree to Babel treesSee 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.
FAQs
Transform JSX in estrees to function calls (for react, preact, and most hyperscript interfaces)
The npm package estree-util-build-jsx receives a total of 1,013,801 weekly downloads. As such, estree-util-build-jsx popularity was classified as popular.
We found that estree-util-build-jsx demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
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.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
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.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.