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)
Transform JSX to function calls: <x />
-> h('x')
!
There is currently one project actively maintained that can transform JSX to function calls: Babel. Babel is amazing but ginormous (±300kb) and slow. Switching from it to estree in a project where Babel was only a small part made the whole project 68% smaller and 63% faster. So let’s make that two implementations.
npm:
npm install estree-util-build-jsx
Say we have the following file, example.jsx
:
var x = require('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 our script, example.js
, looks as follows:
var fs = require('fs')
var acorn = require('acorn')
var jsx = require('acorn-jsx')
var astring = require('astring')
var build = require('estree-util-build-jsx')
var doc = fs.readFileSync('example.jsx')
var tree = acorn.Parser.extend(jsx()).parse(doc)
build(tree, {pragma: 'x', pragmaFrag: 'null'})
console.log(astring.generate(tree))
Now, running node example
yields:
var x = require('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))));
buildJsx(tree, options?)
Turn JSX in tree
(Program
) into hyperscript calls.
options
options.runtime
Choose the runtime.
(string
, 'automatic'
or 'classic'
, default: 'classic'
).
Comment form: @jsxRuntime theRuntime
.
options.importSource
Place to import jsx
, jsxs
, and/or Fragment
from, when the effective
runtime is automatic (string
, default: 'react'
).
Comment: @jsxImportSource theSource
.
Note that /jsx-runtime
is appended to this provided source.
options.pragma
Identifier or member expression to call when the effective runtime is classic
(string
, default: 'React.createElement'
).
Comment: @jsx identifier
.
options.pragmaFrag
Identifier or member expression to use as a sumbol for fragments when the
effective runtime is classic (string
, default: 'React.Fragment'
).
Comment: @jsxFrag identifier
.
Node
— The given tree
.
To support configuration from comments, those comments have to be in the
program.
This is done automatically by espree
.
For acorn
, it can be done like so:
var acorn = require('acorn')
var jsx = require('acorn-jsx')
var comments = []
var tree = acorn.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
optionssyntax-tree/hast-util-to-estree
— Transform hast (HTML) to estree
JSXcoderaiser/estree-to-babel
— Transform estree to Babel treesFAQs
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.