# mxn-jsx-ast-transformer

> Transforms JSX AST into regular JS AST

Latest version **0.8.7** (published 2020-11-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install mxn-jsx-ast-transformer
pnpm add mxn-jsx-ast-transformer
yarn add mxn-jsx-ast-transformer
bun add mxn-jsx-ast-transformer
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: no vulnerabilities; high maintenance score.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.8.7 |
| Published | 2020-11-18 |
| First published | 2020-10-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 10.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Ilya Zimnovich |
| Maintainers | zimnovich |
| Keywords | jsx, react, transpile, transpiler, transform, ast, vdom, javascript |

## Links

- npm: https://www.npmjs.com/package/mxn-jsx-ast-transformer
- Repository: https://github.com/ZimNovich/mxn-jsx-ast-transformer
- Issues: https://github.com/ZimNovich/mxn-jsx-ast-transformer/issues
- npm.io page: https://npm.io/package/mxn-jsx-ast-transformer

## Dependencies (1)

- [estree-walker](https://npm.io/package/estree-walker.md) ^2.0.1

## 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

- 0.8.7 (latest) — 2020-11-18
- 0.8.6 — 2020-11-18
- 0.8.5 — 2020-11-16
- 0.8.3 — 2020-10-16
- 0.8.2 — 2020-10-13
- 0.8.1 — 2020-10-13
- 0.8.0 — 2020-10-13

## README

# mxn-jsx-ast-transformer

Transforms JSX AST into regular JS AST

- ~5.5kb size
- ~2.5kb minified + gzipped

## Usage

We suggest you to load the module via `require` until the stabilization of ES modules in Node.js:
```javascript
const transform = require("mxn-jsx-ast-transformer");
```

Now you can transform ("desugar") all JSX elements into JS calls as follows:
```javascript
let ast = transform(jsx_ast[, options]);
```

Where
 - `jsx_ast` {Object} - ESTree-compilant JSX AST to transform to regular JS AST
 - `options` {Object} - options for JSX ⇒ JS transformation

The default values for the `options` object are shown below:
```javascript
{
    factory: "h",         // factory function to use, e.g. `h`, `m`, `React.createElement`
    quotePropNames: true  // put property names into quotes
}
```

Below is an advanced usage example:

```javascript
let ast = transform(jsx_ast, { factory: "React.createElement", quotePropNames: false });
```

Please note that this tool only converts JSX AST into regular ES5-compliant JavaScript AST. If you want to transpile your source code, check out [mxn-jsx-transpiler](https://github.com/ZimNovich/mxn-jsx-transpiler) or use a code like:

```javascript
// Acorn & Astring
const acorn = require("acorn");
const acornJsx = require("acorn-jsx");
const { generate } = require("astring");

// MXN JSX AST Transformer
const transform = require("mxn-jsx-ast-transformer");

// Create parser
let parser = acorn.Parser.extend(acornJsx({
    allowNamespaces: false
}) );

let code = 'let a = <Greeting firstName="Maximilian" lastName="Pierpont" age={1 + 2 + 3 + 4} />;';

let ast = parser.parse(code, {
    ecmaVersion: 2020,
    sourceType: "module",
    locations: false,
    plugins: { jsx: true }
});

// Transform AST
let ast_new = transform(ast, { factory: "h" });

// Generate code
let transformedCode = generate(ast_new, {
    indent: "    ",
    lineEnd: "\n",
    comments: false
});
```

## License

This module is released under the MIT license.

## Related

- [mxn-jsx-transpiler](https://github.com/ZimNovich/mxn-jsx-transpiler) - Transpiles JSX to regular JavaScript
- [rollup-plugin-mxn-jsx](https://github.com/ZimNovich/rollup-plugin-mxn-jsx) - Rollup JSX plugin that transpiles JSX into JavaScript

---
_Source: https://npm.io/package/mxn-jsx-ast-transformer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._