generic-jsx-transpiler

0.9.9 verified Fri May 01 auth: no javascript

A library for transpiling JSX for use without React (v0.9.9). It allows creating custom JSX transpilers by providing a serializer function that converts parsed JSX components into any output format. Has no dependencies. Includes a companion webpack loader (generic-jsx-loader). Suitable for projects that want JSX syntax without React, such as with Hyperscript or custom DOM libraries. Release cadence is low; maintained sporadically.

Common errors

error TypeError: parser.parse is not a function ↓

cause Using outdated API where parse was not called; or import issue.

fix

Ensure you have created a Parser instance: const parser = new Parser({ serializer }); then call parser.parse({ source: '...' });

error Cannot find module 'generic-jsx-transpiler' ↓

cause Package not installed or missing from node_modules.

fix

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

error Serialize is not a function ↓

cause Serializer object missing 'serialize' property; or passed incorrectly.

fix

Provide an object with a 'serialize' function: const serializer = { serialize: (parsedComp) => { /* ... */ } };

Warnings

gotcha The parser input 'source' property overrides 'inputPath' if both provided. ↓

fix Pass only one of 'source' or 'inputPath'. When 'source' is set, 'inputPath' is ignored.

gotcha Setting async: true returns a Promise; async: false returns string. Default is false. ↓

fix Set 'async' property in options to true if you need Promise-based parsing. Otherwise, code expects synchronous result.

breaking Version 0.2.0 changed serializer from a function to an object with a 'serialize' method. ↓

fix Wrap your serializer function in { serialize: myFunction } object.

Install

npm install generic-jsx-transpiler

yarn add generic-jsx-transpiler

pnpm add generic-jsx-transpiler

Imports

Parser
wrong
```
import { Parser } from 'generic-jsx-transpiler';
```
correct
```
const { Parser } = require('generic-jsx-transpiler');
```
Library uses CommonJS; named export 'Parser'. ESM imports may fail if bundler does not support CJS interop.

default

wrong

import genericJsx from 'generic-jsx-transpiler';

correct

const transpiler = require('generic-jsx-transpiler');
const Parser = transpiler.Parser;

No default export; only named exports via CJS.

Serializer
```
const { Serializer } = require('generic-jsx-transpiler');
```
Serializer class also exported for advanced usage; see documentation.

Quickstart

Shows how to create a custom serializer that converts JSX to hyperscript calls using generic-jsx-transpiler.

const { Parser } = require('generic-jsx-transpiler');
const fs = require('fs');

// A serializer that converts JSX to Hyperscript calls
function serialize(parsedComp) {
  const { tag, attrs, children } = parsedComp;
  const props = attrs ? Object.keys(attrs).map(k => `${k}: ${JSON.stringify(attrs[k])}`).join(', ') : '';
  const kids = children && children.length ? children.map(c => typeof c === 'string' ? `'${c}'` : serialize(c)).join(', ') : '';
  return `h('${tag}', {${props}}${kids ? ', ' + kids : ''})`;
}

const serializer = { serialize };
const parser = new Parser({ serializer });

const source = fs.readFileSync('example.jsx', 'utf8');
const transpiled = parser.parse({ source, async: false });
console.log(transpiled);