# jsx-transform-modern > JSX transpiler. Desugar JSX into JavaScript. A standard and configurable implementation of JSX decoupled from React. Latest version **2.0.3** (published 2023-12-07) · 0BSD license · 0 weekly downloads ## Install ```sh npm install jsx-transform-modern pnpm add jsx-transform-modern yarn add jsx-transform-modern bun add jsx-transform-modern ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 2.0.3 | | Published | 2023-12-07 | | First published | 2021-10-05 | | Weekly downloads | 0 | | License | 0BSD | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 5 | | Unpacked size | 36.2 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 3 | | Author | Benedek Heilig | | Maintainers | brenca, protostr | | Keywords | jsx, jsx-transform | ## Links - npm: https://www.npmjs.com/package/jsx-transform-modern - Repository: https://github.com/brenca/jsx-transform-modern - Issues: https://github.com/brenca/jsx-transform-modern/issues - npm.io page: https://npm.io/package/jsx-transform-modern ## Dependencies (5) - [acorn](https://npm.io/package/acorn.md) ^8.5.0 - [through2](https://npm.io/package/through2.md) ^4.0.2 - [acorn-jsx](https://npm.io/package/acorn-jsx.md) ^5.3.2 - [acorn-walk](https://npm.io/package/acorn-walk.md) ^8.2.0 - [inline-source-map](https://npm.io/package/inline-source-map.md) ^0.6.2 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 2.0.3 (latest) — 2023-12-07 - 2.0.2 — 2023-12-06 - 2.0.1 — 2022-04-28 - 2.0.0 — 2022-04-25 - 1.0.4 — 2022-03-31 - 1.0.3 — 2021-12-08 - 1.0.2 — 2021-10-06 - 1.0.1 — 2021-10-05 - 1.0.0 — 2021-10-05 ## README # jsx-transform-modern > This module is a rewrite of [jsx-transform](https://github.com/alexmingoia/jsx-transform) using [acorn](https://github.com/acornjs/acorn). It aims to be a drop in replacement for the old module, keeping the same API, and taking the tests and documentation from it to ensure compatibility. The rest of this document comes from the original module. > JSX transpiler. Desugar JSX into JavaScript. This module aims to be a standard and configurable implementation of JSX decoupled from [React](https://github.com/facebook/react) for use with [Mercury](https://github.com/Raynos/mercury) or other modules. JSX is a JavaScript syntax for composing virtual DOM elements. See React's [documentation][0] for an explanation. For linting files containing JSX see [JSXHint](https://github.com/STRML/JSXHint). ## Installation ```sh npm install jsx-transform-modern ``` ## API ## jsx-transform-modern This module aims to be a standard and configurable implementation of JSX decoupled from [React](https://github.com/facebook/react) for use with [Mercury](https://github.com/Raynos/mercury) or other modules. JSX is a JavaScript syntax for composing virtual DOM elements. See React's [documentation][0] for an explanation. For linting files containing JSX see [JSXHint](https://github.com/STRML/JSXHint). * [jsx-transform-modern](#module_jsx-transform-modern) * [~fromString(str, [options])](#module_jsx-transform-modern..fromString) ⇒ String * [~fromFile(path, [options])](#module_jsx-transform-modern..fromFile) ⇒ String * [~browserifyTransform([filename], [options])](#module_jsx-transform-modern..browserifyTransform) ⇒ function ### jsx-transform-modern~fromString(str, [options]) ⇒ String Desugar JSX and return transformed string. **Kind**: inner method of [jsx-transform-modern](#module_jsx-transform-modern) | Param | Type | Description | | --- | --- | --- | | str | String | | | [options] | Object | | | options.factory | String | Factory function name for element creation. | | [options.spreadFn] | String | Name of function for use with spread attributes (default: Object.assign). | | [options.unknownTagPattern] | String | uses given pattern for unknown tags where `{tag}` is replaced by the tag name. Useful for rending mercury components as `Component.render()` instead of `Component()`. | | [options.passUnknownTagsToFactory] | Boolean | Handle unknown tags like known tags, and pass them as an object to `options.factory`. If true, `createElement(Component)` instead of `Component()` (default: false). | | [options.unknownTagsAsString] | Boolean | Pass unknown tags as string to `options.factory` (default: false). | | [options.arrayChildren] | Boolean | Pass children as array instead of arguments (default: true). | | [options.ecmaversion] | Number | ECMAScript version (default: 8). | **Example** ```javascript var jsx = require('jsx-transform-modern'); jsx.fromString('

Hello World

', { factory: 'mercury.h' }); // => 'mercury.h("h1", null, ["Hello World"])' ``` ### jsx-transform-modern~fromFile(path, [options]) ⇒ String **Kind**: inner method of [jsx-transform-modern](#module_jsx-transform-modern) | Param | Type | | --- | --- | | path | String | | [options] | Object | ### jsx-transform-modern~browserifyTransform([filename], [options]) ⇒ function Make a browserify transform. **Kind**: inner method of [jsx-transform-modern](#module_jsx-transform-modern) **Returns**: function - browserify transform | Param | Type | Description | | --- | --- | --- | | [filename] | String | | | [options] | Object | | | [options.extensions] | String | Array of file extensions to run browserify transform on (default: `['.js', '.jsx', '.es', '.es6']`). | **Example** ```javascript var browserify = require('browserify'); var jsxify = require('jsx-transform-modern').browserifyTransform; browserify() .transform(jsxify, options) .bundle() ``` Use `.configure(options)` to return a configured transform: ```javascript var browserify = require('browserify'); var jsxify = require('jsx-transform-modern').browserifyTransform; browserify({ transforms: [jsxify.configure(options)] }).bundle() ``` Use in `package.json`: ```json "browserify": { "transform": [ ["jsx-transform-modern/browserify", { "factory": "h" }] ] } ``` ## BSD Licensed [0]: https://facebook.github.io/react/docs/jsx-in-depth.html --- _Source: https://npm.io/package/jsx-transform-modern · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._