jsx-transform

2.4.1 verified Fri May 01 auth: no javascript

JSX transpiler that desugars JSX into plain JavaScript, decoupled from React. Current stable version is 2.4.1. Release cadence is low/infrequent. It provides configurable factory function names, spread attribute handling, and unknown tag patterns, making it suitable for use with Mercury, virtual-dom, or custom virtual DOM implementations. Key differentiators: not tied to React, supports browserify transforms, and offers fine-grained control over output.

Common errors

error Cannot find module 'jsx-transform' ↓

cause Package not installed or path incorrectly set.

fix

Run npm install jsx-transform and ensure node_modules is in require/import path.

error Unexpected token '<' ↓

cause Code containing JSX is being run without transformation.

fix

Use jsx-transform.fromString() or set up browserify transform to transpile .jsx files.

error Factory function not defined ↓

cause The factory option points to a function not in scope.

fix

Make sure the factory function (e.g., mercury.h) is available in the output context, or define it as a global.

error TypeError: Cannot read properties of undefined (reading 'replace') ↓

cause fromFile received a non-string path or file does not exist.

fix

Ensure the path is a valid existing file path.

Warnings

gotcha Default options may not suit all virtual DOM libraries. Check factory, spreadFn, and unknownTagPattern. ↓

fix Explicitly pass options matching your virtual DOM library (e.g., factory: 'mercury.h', spreadFn: 'Object.assign').

gotcha When using browserifyTransform, ensure filename ends with .jsx or pass appropriate options. ↓

fix Use b.transform(jsx.browserifyTransform({ ext: '.jsx' })) or rename files to .jsx.

deprecated Some options like `passUnknownTagsToFactory` and `unknownTagsAsString` may be confusing; prefer `unknownTagPattern` for custom rendering. ↓

fix Use unknownTagPattern for template-based rendering instead of boolean flags.

gotcha Children are passed as array by default (arrayChildren: true). If library expects separate arguments, set arrayChildren: false. ↓

fix Pass `arrayChildren: false` to spread children as arguments.

Install

npm install jsx-transform

yarn add jsx-transform

pnpm add jsx-transform

Imports

fromString

wrong

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

correct

import { fromString } from 'jsx-transform'

ESM-style import works with bundlers; CommonJS require also works.

fromFile

wrong

const jsx = require('jsx-transform'); jsx.fromFile

correct

import { fromFile } from 'jsx-transform'

Named export available via ESM or CommonJS property access.

browserifyTransform

wrong

const browserifyTransform = require('jsx-transform/browserifyTransform')

correct

import { browserifyTransform } from 'jsx-transform'

Not a submodule; use named export from main package.

Quickstart

Shows basic usage of fromString, fromFile, and browserifyTransform with custom factory.

const jsx = require('jsx-transform');
const result = jsx.fromString('<h1>Hello World</h1>', {
  factory: 'mercury.h'
});
console.log(result); // 'mercury.h("h1", null, ["Hello World"])'
// Using fromFile
const fs = require('fs');
fs.writeFileSync('test.jsx', '<div>Test</div>');
const output = jsx.fromFile('test.jsx', { factory: 'h' });
console.log(output); // 'h("div", null, ["Test"])'
// Browserify transform
const browserify = require('browserify');
const b = browserify();
b.transform(jsx.browserifyTransform({ factory: 'h' }));