Registry / serialization / jsx-transform-modern

jsx-transform-modern

library2.0.3jsnpmunverified

A standalone JSX transpiler that desugars JSX into JavaScript, decoupled from React. Version 2.0.3 is the current stable release; the project is in maintenance mode. It is a rewrite of jsx-transform using acorn for parsing, aiming to be a drop-in replacement with the same API. Unlike Babel's JSX plugin, it requires no React dependency and offers configurable factory functions, spread handling, and unknown tag patterns. It provides three main functions: fromString, fromFile, and browserifyTransform. It supports Node.js and browser environments, though browser usage typically requires a bundler. Releases are infrequent, with no recent updates. Preferred over babel for minimal, non-React JSX transformations.

serialization

npm install jsx-transform-modern

github ↗package ↗

INSTALL

IMPORT

SIG · JSX-TRANSFORM-MODE

jsx-transform-modern

serializationjavascriptv2.0.3

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import jsx from 'jsx-transform-modern'

✗ const jsx = require('jsx-transform-modern').default

Default import works as the module exports an object. In CJS, use require('jsx-transform-modern') directly.

fromString

✓ import { fromString } from 'jsx-transform-modern'

✗ const fromString = require('jsx-transform-modern').fromString

Named import is supported. CJS require also works but is not recommended for ESM.

fromFile

✓ import { fromFile } from 'jsx-transform-modern'

✗ const fromFile = require('jsx-transform-modern').fromFile

Same as fromString.

Shows basic usage of fromString and fromFile with custom factory and options.

import { fromString, fromFile } from 'jsx-transform-modern'; // Transform JSX string to JavaScript const result = fromString('<h1>Hello World</h1>', { factory: 'React.createElement' }); console.log(result); // => React.createElement("h1", null, ["Hello World"]) // Transform from file const fs = require('fs'); fs.writeFileSync('input.jsx', '<App color="blue"><Child /></App>'); const output = fromFile('input.jsx', { factory: 'h', arrayChildren: false }); console.log(output); // => h("App", { color: "blue" }, h("Child", null))

Debug

Known issues

gotchaDefault value for arrayChildren is true, which wraps children in an array. This differs from React's createElement which uses rest arguments. Set arrayChildren: false if using with React.

fix

Pass { arrayChildren: false } to match React behavior.

affects: >=1.0.0

gotchaUnknown tags (capitalized) are treated as functions by default unless passUnknownTagsToFactory is true. This may cause errors if you expect them to be strings.

fix

Set { passUnknownTagsToFactory: true } to pass them as objects to factory, or { unknownTagsAsString: true } to pass as strings.

affects: >=1.0.0

gotchaThe module uses acorn for parsing; the ecmaversion option defaults to 8. If you use newer JS features (e.g., optional chaining), you must set ecmaversion to a higher number (e.g., 2020) or parsing may fail.

fix

Set { ecmaversion: 2020 } or the appropriate ECMAScript version.

affects: >=1.0.0

breakingVersion 2.x is a rewrite with acorn. It aims to be a drop-in replacement but there may be edge cases with parsing differences from the original jsx-transform.

fix

Test your code when upgrading from 1.x; check for parsing errors or output differences.

affects: >=2.0.0

Errors

Common errors & fixes

SyntaxError: Unexpected token ... while parsing JSX

Acorn does not support spread attributes in JSX by default; the spreadFn option must be provided and acorn may need a plugin.

fix

Ensure you have set the spreadFn option, or use a babel-based transformer if spread is heavily used.

Error: Cannot find module 'acorn'

acorn is a required dependency and must be installed alongside jsx-transform-modern.

fix

Run 'npm install jsx-transform-modern' which will install acorn as a dependency.

TypeError: jsx.fromString is not a function

The module was imported incorrectly (e.g., using default import when only named exports are available).

fix

Use import { fromString } from 'jsx-transform-modern' or const { fromString } = require('jsx-transform-modern').

Upgrade

Version history

2.0.3latest on npm

Audit

Dependencies

acornrequiredUses acorn for JavaScript parsing

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/brenca/jsx-transform-modern ↗

packagehttps://www.npmjs.com/package/jsx-transform-modern ↗