rehype-recma

[![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]

[rehype][github-rehype] plugin to transform HTML to JS.

Contents

* What is this?
* When should I use this?
* Install
* Use
* API
* [unified().use(rehypeRecma[, options])](#unifieduserehyperecma-options)
* Options
* Types
* Compatibility
* Security
* Contribute
* License

What is this?

This package is a [unified][github-unified] ([rehype][github-rehype]) plugin
that can turn HTML into JavaScript.

When should I use this?

Use this when you want to integrate static HTML into some JavaScript
application.

If you don’t use plugins and access syntax trees manually,
you can directly use [hast-util-to-estree][github-hast-util-to-estree],
which is used inside this plugin.

Install

This package is [ESM only][github-gist-esm].
In Node.js (version 16+),
install with [npm][npm-install]:

``sh
npm install rehype-recma
`

In Deno with [esm.sh][esmsh]:

`js
import rehypeRecma from 'https://esm.sh/rehype-recma@1'
`

In browsers with [esm.sh][esmsh]:

`html

`

Use

Say we have the following module example.js:

`js
import recmaJsx from 'recma-jsx'
import recmaStringify from 'recma-stringify'
import rehypeParse from 'rehype-parse'
import rehypeRecma from 'rehype-recma'
import {unified} from 'unified'

const file = await unified()
.use(rehypeParse, {fragment: true})
.use(rehypeRecma)
.use(recmaJsx)
.use(recmaStringify)
.process('

Hi!

Hello!')

console.log(String(file))
`

…running that with node example.js yields:

`jsx
<>

{"Hi!"}

{"Hello!"}

;
`

API

This package exports no identifiers.
The default export is [rehypeRecma][api-rehype-recma].

$3

Plugin to transform HTML (hast) to JS (estree).

###### Parameters

* options ([Options][api-options], optional)
— configuration

###### Returns

Transform ([Transformer][github-unified-transformer]).

$3

Configuration (TypeScript type).

Same as [Options][github-hast-util-to-estree-options]
from hast-util-to-estree.

Types

This package is fully typed with [TypeScript][].
It exports the additional type [Options][api-options].

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,
rehype-recma@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]

[api-options]: #options

[api-rehype-recma]: #unifieduserehyperecma-options

[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-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/rehype-recma.svg

[badge-downloads-url]: https://www.npmjs.com/package/rehype-recma

[badge-size-image]: https://img.shields.io/bundlejs/size/rehype-recma

[badge-size-url]: https://bundlejs.com/?q=rehype-recma

[badge-sponsors-image]: https://opencollective.com/unified/sponsors/badge.svg

[badge-chat-image]: https://img.shields.io/badge/chat-discussions-success.svg

[badge-chat-url]: https://github.com/mdx-js/mdx/discussions

[esmsh]: https://esm.sh

[file-license]: license

[github-gist-esm]: https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c

[github-hast-util-to-estree-options]: https://github.com/syntax-tree/hast-util-to-estree#options

[github-hast-util-to-estree]: https://github.com/syntax-tree/hast-util-to-estree

[github-rehype]: https://github.com/rehypejs/rehype

[github-unified-transformer]: https://github.com/unifiedjs/unified#transformer

[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