{"id":25817,"library":"jsx-transform","title":"jsx-transform","description":"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.","status":"active","version":"2.4.1","language":"javascript","source_language":"en","source_url":"git://github.com/alexmingoia/jsx-transform","tags":["javascript","jsx","virtual-hyperscript","vtree","virtual-dom","html","mercury","hyperscript"],"install":[{"cmd":"npm install jsx-transform","lang":"bash","label":"npm"},{"cmd":"yarn add jsx-transform","lang":"bash","label":"yarn"},{"cmd":"pnpm add jsx-transform","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"ESM-style import works with bundlers; CommonJS require also works.","wrong":"const fromString = require('jsx-transform').fromString","symbol":"fromString","correct":"import { fromString } from 'jsx-transform'"},{"note":"Named export available via ESM or CommonJS property access.","wrong":"const jsx = require('jsx-transform'); jsx.fromFile","symbol":"fromFile","correct":"import { fromFile } from 'jsx-transform'"},{"note":"Not a submodule; use named export from main package.","wrong":"const browserifyTransform = require('jsx-transform/browserifyTransform')","symbol":"browserifyTransform","correct":"import { browserifyTransform } from 'jsx-transform'"}],"quickstart":{"code":"const jsx = require('jsx-transform');\nconst result = jsx.fromString('<h1>Hello World</h1>', {\n  factory: 'mercury.h'\n});\nconsole.log(result); // 'mercury.h(\"h1\", null, [\"Hello World\"])'\n// Using fromFile\nconst fs = require('fs');\nfs.writeFileSync('test.jsx', '<div>Test</div>');\nconst output = jsx.fromFile('test.jsx', { factory: 'h' });\nconsole.log(output); // 'h(\"div\", null, [\"Test\"])'\n// Browserify transform\nconst browserify = require('browserify');\nconst b = browserify();\nb.transform(jsx.browserifyTransform({ factory: 'h' }));","lang":"javascript","description":"Shows basic usage of fromString, fromFile, and browserifyTransform with custom factory."},"warnings":[{"fix":"Explicitly pass options matching your virtual DOM library (e.g., factory: 'mercury.h', spreadFn: 'Object.assign').","message":"Default options may not suit all virtual DOM libraries. Check factory, spreadFn, and unknownTagPattern.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Use b.transform(jsx.browserifyTransform({ ext: '.jsx' })) or rename files to .jsx.","message":"When using browserifyTransform, ensure filename ends with .jsx or pass appropriate options.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use unknownTagPattern for template-based rendering instead of boolean flags.","message":"Some options like `passUnknownTagsToFactory` and `unknownTagsAsString` may be confusing; prefer `unknownTagPattern` for custom rendering.","severity":"deprecated","affected_versions":"<3.0.0"},{"fix":"Pass `arrayChildren: false` to spread children as arguments.","message":"Children are passed as array by default (arrayChildren: true). If library expects separate arguments, set arrayChildren: false.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Run `npm install jsx-transform` and ensure node_modules is in require/import path.","cause":"Package not installed or path incorrectly set.","error":"Cannot find module 'jsx-transform'"},{"fix":"Use jsx-transform.fromString() or set up browserify transform to transpile .jsx files.","cause":"Code containing JSX is being run without transformation.","error":"Unexpected token '<'"},{"fix":"Make sure the factory function (e.g., mercury.h) is available in the output context, or define it as a global.","cause":"The factory option points to a function not in scope.","error":"Factory function not defined"},{"fix":"Ensure the path is a valid existing file path.","cause":"fromFile received a non-string path or file does not exist.","error":"TypeError: Cannot read properties of undefined (reading 'replace')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}