estree-util-build-jsx

Transform JSX in estrees to function calls (for react, preact, and most hyperscript interfaces)

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
estree-util-build-jsx
1302.2.02 months ago2 years agoMinified + gzip package size for estree-util-build-jsx in KB

Readme

estree-util-build-jsx
!Buildbuild-badgebuild !Coveragecoverage-badgecoverage !Downloadsdownloads-badgedownloads !Sizesize-badgesize !Sponsorssponsors-badgecollective !Backersbackers-badgecollective !Chatchat-badgechat
estree utility to turn JSX into function calls: <x /> -> h('x')!

Contents

*   [`buildJsx(tree, options?)`](#buildjsxtree-options)
*   [Example: use with Acorn](#example-use-with-acorn)

What is this?

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.

When should I use this?

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.

Install

This package is ESM onlyesm. In Node.js (version 12.20+, 14.14+, or 16.0+), install with npm:
npm install estree-util-build-jsx

In Deno with esm.shesmsh:
import {buildJsx} from 'https://esm.sh/estree-util-build-jsx@2'

In browsers with esm.shesmsh:
<script type="module">
  import {buildJsx} from 'https://esm.sh/estree-util-build-jsx@2?bundle'
</script>

Use

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

API

This package exports the identifier buildJsx. There is no default export.

buildJsx(tree, options?)

Turn JSX in tree (Programprogram) into function calls: <x /> -> h('x')!
options
Configuration (optional).
👉 Note: you can also configure runtime, importSource, pragma, and pragmaFrag 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 in theSource/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.
Returns
The given tree (Node).

Examples

Example: use with Acorn

To support configuration from comments in Acorn, those comments have to be in the program. This is done by espreeespree but not automatically by acornacorn:
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

Algorithm

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

Types

This package is fully typed with TypeScript. It exports the types Options and Node.

Compatibility

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.

Related

— turn [hast](https://github.com/syntax-tree/hast) (HTML) to [estree][]
JSX
— turn [estree][] to Babel trees

Contribute

See contributing.md in syntax-tree/.githubcontributing for ways to get started. See support.mdsupport for ways to get help.
This project has a code of conductcoc. By interacting with this repository, organization, or community you agree to abide by its terms.

License

MITlicense © Titus Wormerauthor