estree-util-build-jsx

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.

Install

npm:

npm install estree-util-build-jsx

Use

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))));

API

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.

Returns

Node — The given tree.

Notes

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:

• No pure annotations or dev things
• this is not a component: <this> -> h('this'), not h(this)
• Namespaces are supported: <a:b c:d> -> h('a:b', {'c:d': true}), which throws by default in Babel or can be turned on with throwIfNamespace
• No useSpread, useBuiltIns, or filter options

Related

• syntax-tree/hast-util-to-estree — Transform hast (HTML) to estree JSX
• coderaiser/estree-to-babel — Transform estree to Babel trees

License

MIT © Titus Wormer