recma JavaScript Stringifier Plugin

1.0.0 · active · verified Sun Apr 19

The `recma-stringify` package is a `unified` plugin designed to serialize JavaScript Abstract Syntax Trees (ASTs) back into JavaScript code. It operates within the `recma` ecosystem, which focuses on transforming JavaScript ASTs, similar to how `remark` handles Markdown and `rehype` handles HTML. Currently at version `1.0.0`, it is part of an active project with a stable release cadence that generally aligns with Node.js LTS versions, with major releases dropping support for unmaintained Node.js environments. Its primary differentiator is its seamless integration into the `unified` processing pipeline, abstracting the underlying `estree-util-to-js` utility. This allows developers to easily incorporate JavaScript code generation into broader content processing workflows, such as compiling MDX. It does not parse JavaScript itself; for that, it's typically paired with `recma-parse` or used via the overarching `recma` core package.

Common errors

```
ERR_REQUIRE_ESM: require() of ES Module .../node_modules/recma-stringify/index.js from ... not supported.
```
cause Attempting to use `require()` to import `recma-stringify`, which is an ES module.

fix Change your project to use ES Modules (`type: "module"` in package.json) and use `import recmaStringify from 'recma-stringify'`.
```
TypeError: recmaStringify is not a function
```
cause Incorrectly attempting to instantiate `recmaStringify` with `new` or treating a non-function as a function, often in a CJS context or after a failed default import.

fix Ensure you are using `import recmaStringify from 'recma-stringify'` and passing the imported function directly to `unified().use()`.
```
TypeError: unified(...).use(...).process is not a function
```
cause Missing `await` keyword before `unified().use(...).process(...)` or incorrect chaining in an async context, leading to processing an unresolved Promise.

fix Always `await` the result of `unified().process()` as it returns a Promise. Ensure the surrounding function is `async`.

Warnings

breaking This package is ESM-only. Direct `require()` statements will result in an `ERR_REQUIRE_ESM` error.
Fix: Migrate to ES modules and use `import recmaStringify from 'recma-stringify'`.
breaking Major version releases of `recma-stringify` (and the unified collective) will drop support for unmaintained Node.js versions. Ensure your Node.js runtime is actively supported.
Fix: Upgrade Node.js to a currently maintained LTS version (e.g., Node.js 18+ for future major releases).
gotcha The `recma` ecosystem, including `recma-stringify`, works on JavaScript abstract syntax trees. While `recma-stringify` itself generates code, handling and evaluating arbitrary JavaScript can have security implications. Sanitize inputs if they originate from untrusted sources.
Fix: Implement robust input validation and sanitization for any user-provided JavaScript or content that feeds into the recma pipeline.

Install

npm install recma-stringify npm
yarn add recma-stringify yarn
pnpm add recma-stringify pnpm

Imports

recmaStringify
wrong:
```
const recmaStringify = require('recma-stringify')
```
correct:
```
import recmaStringify from 'recma-stringify'
```
Package is ESM-only and exports a default function. CommonJS `require` will fail.

Options

import type { Options } from 'recma-stringify'

Type import for configuring the plugin.

unified
```
import { unified } from 'unified'
```
`recma-stringify` is a unified plugin and requires `unified` for its processing pipeline.

Quickstart

Demonstrates processing an HTML fragment through rehype, converting it to a recma (JS) AST, applying JSX transformations, and then stringifying it to output JSX code. This shows the typical `unified` pipeline usage.

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

async function processHtmlToJsx() {
  const file = await unified()
    .use(rehypeParse, {fragment: true}) // Parse HTML fragment
    .use(rehypeRecma) // Convert HTML AST (hast) to JS AST (esast)
    .use(recmaJsx) // Transform JS AST for JSX elements
    .use(recmaStringify) // Serialize the JS AST back to code
    .process('<p>Hi!<h1>Hello!') // Process the input string

  console.log(String(file))
}

processHtmlToJsx().catch(console.error)

view raw JSON →