220 lines
5.3 KiB
Markdown
220 lines
5.3 KiB
Markdown
# recma-jsx
|
|
|
|
[![Build][badge-build-image]][badge-build-url]
|
|
[![Coverage][badge-coverage-image]][badge-coverage-url]
|
|
[![Downloads][badge-downloads-image]][badge-downloads-url]
|
|
[![Size][badge-size-image]][badge-size-url]
|
|
[![Sponsors][badge-sponsors-image]][badge-collective-url]
|
|
[![Backers][badge-backers-image]][badge-collective-url]
|
|
[![Chat][badge-chat-image]][badge-chat-url]
|
|
|
|
**[recma][github-recma]** plugin to add support for parsing and serializing
|
|
[JSX][github-io-jsx].
|
|
|
|
## Contents
|
|
|
|
* [What is this?](#what-is-this)
|
|
* [When should I use this?](#when-should-i-use-this)
|
|
* [Install](#install)
|
|
* [Use](#use)
|
|
* [API](#api)
|
|
* [`unified().use(recmaJsx)`](#unifieduserecmajsx)
|
|
* [Syntax](#syntax)
|
|
* [Syntax tree](#syntax-tree)
|
|
* [Types](#types)
|
|
* [Compatibility](#compatibility)
|
|
* [Security](#security)
|
|
* [Contribute](#contribute)
|
|
* [License](#license)
|
|
|
|
## What is this?
|
|
|
|
This package is a [unified][github-unified]
|
|
([recma][github-recma])
|
|
that enables JSX.
|
|
You can use this plugin to add support for parsing and serializing it.
|
|
|
|
## When should I use this?
|
|
|
|
You can use this if you want to use `recma` and JSX.
|
|
You can also use [`acorn-jsx`][github-acorn-jsx] manually with
|
|
[`acorn`][github-acorn] for parsing.
|
|
And use the [`jsx`][github-estree-util-to-js-jsx] handlers from
|
|
[`estree-util-to-js`][github-estree-util-to-js] manually.
|
|
|
|
## Install
|
|
|
|
This package is [ESM only][github-gist-esm].
|
|
In Node.js (version 16+),
|
|
install with [npm][npm-install]:
|
|
|
|
```sh
|
|
npm install recma-jsx
|
|
```
|
|
|
|
In Deno with [`esm.sh`][esmsh]:
|
|
|
|
```js
|
|
import recmaJsx from 'https://esm.sh/recma-jsx@1'
|
|
```
|
|
|
|
In browsers with [`esm.sh`][esmsh]:
|
|
|
|
```html
|
|
<script type="module">
|
|
import recmaJsx from 'https://esm.sh/recma-jsx@1?bundle'
|
|
</script>
|
|
```
|
|
|
|
## Use
|
|
|
|
Say we have the following module `example.js`:
|
|
|
|
```js
|
|
import recmaJsx from 'recma-jsx'
|
|
import recmaParse from 'recma-parse'
|
|
import recmaStringify from 'recma-stringify'
|
|
import {unified} from 'unified'
|
|
|
|
const file = await unified()
|
|
.use(recmaParse)
|
|
.use(recmaJsx)
|
|
.use(recmaStringify)
|
|
.process('console.log(<em>Hi!</em>)')
|
|
|
|
console.log(String(file))
|
|
```
|
|
|
|
…running that with `node example.js` yields:
|
|
|
|
```js
|
|
console.log(<em>Hi!</em>);
|
|
```
|
|
|
|
## API
|
|
|
|
This package exports no identifiers.
|
|
The default export is [`recmaJsx`][api-recma-jsx].
|
|
|
|
### `unified().use(recmaJsx)`
|
|
|
|
Plugin to add support for parsing and serializing JSX.
|
|
|
|
###### Parameters
|
|
|
|
There are no parameters.
|
|
|
|
###### Returns
|
|
|
|
Nothing (`undefined`).
|
|
|
|
## Syntax
|
|
|
|
JSX is parsed and serialized according to [`facebook/jsx`][github-io-jsx].
|
|
|
|
## Syntax tree
|
|
|
|
The syntax tree format used in recma is [esast][github-esast] and
|
|
[estree][github-estree].
|
|
|
|
## Types
|
|
|
|
This package is fully typed with [TypeScript][].
|
|
It exports no additional types.
|
|
|
|
## Compatibility
|
|
|
|
Projects maintained by the unified collective are compatible with maintained
|
|
versions of Node.js.
|
|
|
|
When we cut a new major release,
|
|
we drop support for unmaintained versions of Node.
|
|
This means we try to keep the current release line,
|
|
`recma-jsx@1`,
|
|
compatible with Node.js 16.
|
|
|
|
## Security
|
|
|
|
As **recma** works on JS and evaluating JS is unsafe,
|
|
use of recma can also be unsafe.
|
|
Do not evaluate unsafe code.
|
|
|
|
## Contribute
|
|
|
|
See [§ Contribute][mdxjs-contribute] on our site for ways to get started.
|
|
See [§ Support][mdxjs-support] for ways to get help.
|
|
|
|
This project has a [code of conduct][health-coc].
|
|
By interacting with this repository,
|
|
organization,
|
|
or community you agree to abide by its terms.
|
|
|
|
## License
|
|
|
|
[MIT][file-license] © [Titus Wormer][wooorm]
|
|
|
|
<!-- Definitions -->
|
|
|
|
[api-recma-jsx]: #unifieduserecmajsx
|
|
|
|
[badge-backers-image]: https://opencollective.com/unified/backers/badge.svg
|
|
|
|
[badge-build-image]: https://github.com/mdx-js/recma/actions/workflows/main.yml/badge.svg
|
|
|
|
[badge-build-url]: https://github.com/mdx-js/recma/actions
|
|
|
|
[badge-chat-image]: https://img.shields.io/badge/chat-discussions-success.svg
|
|
|
|
[badge-chat-url]: https://github.com/mdx-js/mdx/discussions
|
|
|
|
[badge-collective-url]: https://opencollective.com/unified
|
|
|
|
[badge-coverage-image]: https://img.shields.io/codecov/c/github/mdx-js/recma.svg
|
|
|
|
[badge-coverage-url]: https://codecov.io/github/mdx-js/recma
|
|
|
|
[badge-downloads-image]: https://img.shields.io/npm/dm/recma-jsx.svg
|
|
|
|
[badge-downloads-url]: https://www.npmjs.com/package/recma-jsx
|
|
|
|
[badge-size-image]: https://img.shields.io/bundlejs/size/recma-jsx
|
|
|
|
[badge-size-url]: https://bundlejs.com/?q=recma-jsx
|
|
|
|
[badge-sponsors-image]: https://opencollective.com/unified/sponsors/badge.svg
|
|
|
|
[esmsh]: https://esm.sh
|
|
|
|
[file-license]: license
|
|
|
|
[github-acorn]: https://github.com/acornjs/acorn
|
|
|
|
[github-acorn-jsx]: https://github.com/acornjs/acorn-jsx
|
|
|
|
[github-esast]: https://github.com/syntax-tree/esast
|
|
|
|
[github-estree]: https://github.com/estree/estree
|
|
|
|
[github-estree-util-to-js]: https://github.com/syntax-tree/estree-util-to-js
|
|
|
|
[github-estree-util-to-js-jsx]: https://github.com/syntax-tree/estree-util-to-js#jsx
|
|
|
|
[github-gist-esm]: https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c
|
|
|
|
[github-io-jsx]: http://facebook.github.io/jsx/
|
|
|
|
[github-recma]: https://github.com/mdx-js/recma
|
|
|
|
[github-unified]: https://github.com/unifiedjs/unified
|
|
|
|
[health-coc]: https://github.com/mdx-js/.github/blob/main/code-of-conduct.md
|
|
|
|
[mdxjs-contribute]: https://mdxjs.com/community/contribute/
|
|
|
|
[mdxjs-support]: https://mdxjs.com/community/support/
|
|
|
|
[npm-install]: https://docs.npmjs.com/cli/install
|
|
|
|
[typescript]: https://www.typescriptlang.org
|
|
|
|
[wooorm]: https://wooorm.com
|