jsx-transpiler

0.1.4 verified Fri May 01 auth: no javascript

Parses and compiles JSX code to JavaScript AST or code, providing a fork of jsx-recast using acorn-jsx for parsing, estraverse/estraverse-fb for traversal, and escodegen for code generation. Current version is 0.1.4. It supports attaching comments to AST in an esprima-compatible way, respects /** @jsx */ annotations, and enables source maps for JSX elements. Differentiators include native AST tools (acorn, estraverse, escodegen) and compatibility with older JavaScript toolchains. Suitable for use as a browserify transform or standalone transformer for JSX to JS.

Common errors

error Error: Cannot find module 'jsx-transpiler' ↓

cause Package not installed or installed globally but required locally.

fix

Run 'npm install jsx-transpiler' in your project directory.

error SyntaxError: Unexpected token '<' ↓

cause JSX code passed to jsx.parse is not recognized because acorn-jsx might not be properly configured.

fix

Ensure the JavaScript code is valid JSX and that the options object is passed correctly. The package expects JSX source code as a string.

error TypeError: jsx.compile is not a function ↓

cause Incorrect import: using default import instead of destructuring require.

fix

Use 'const { compile } = require('jsx-transpiler')'.

Warnings

gotcha This package is a fork of jsx-recast and uses older versions of acorn, estraverse, and escodegen. It may not support modern JSX features or React JSX transform. ↓

fix Consider using @babel/core + @babel/preset-react or esbuild/swc for modern JSX compilation.

breaking Package does not ship ES module (ESM) support. Using import statements will fail in Node.js ESM context. ↓

fix Use CommonJS require() or use a bundler like webpack with CommonJS compatibility.

gotcha The parse function returns a JSX-specific AST, not a standard ESTree. Using this AST directly with other tools may not work without transform. ↓

fix Always call transform() to convert to standard JavaScript AST before passing to escodegen or other ESTree-based tools.

Install

npm install jsx-transpiler

yarn add jsx-transpiler

pnpm add jsx-transpiler

Imports

default

wrong

const jsx = require('jsx-transpiler')

correct

import jsx from 'jsx-transpiler'

Package does not ship ES modules; use CommonJS for now.

parse

wrong

import { parse } from 'jsx-transpiler'

correct

const { parse } = require('jsx-transpiler')

CommonJS-only; named exports not available as ES modules.

compile

wrong

import compile from 'jsx-transpiler'

correct

const { compile } = require('jsx-transpiler')

Default import yields module object, not compile function.

transform

wrong

import { transform } from 'jsx-transpiler'

correct

const { transform } = require('jsx-transpiler')

Same as parse; CommonJS-only.

Quickstart

Demonstrates parsing JSX to AST, transforming to JavaScript AST, and compiling to JavaScript code with source map.

const jsx = require('jsx-transpiler');
const jsxCode = '<X prop={false}><Y /></X>';
const ast = jsx.parse(jsxCode);
const jsAST = jsx.transform(ast);
const result = jsx.compile(jsxCode);
console.log(result.code); // X({prop: false}, Y(null));
console.log(result.map); // source map object