Refactor to externalize recma packages

Closes GH-2030.

Author: wooorm

package-lock.json

@@ -1,11 +1,10 @@
 /**
  * @import {Program} from 'estree-jsx'
- * @import {ElementAttributeNameCase, StylePropertyNameCase} from 'hast-util-to-estree'
  * @import {Root} from 'mdast'
+ * @import {Options as RehypeRecmaOptions} from 'rehype-recma'
  * @import {Options as RemarkRehypeOptions} from 'remark-rehype'
  * @import {SourceMapGenerator} from 'source-map'
  * @import {PluggableList, Processor} from 'unified'
- * @import {Node} from 'unist'
  */
 
 /**
@@ -24,7 +23,7 @@
  *   when using the webpack loader (`@mdx-js/loader`) or the Rollup integration
  *   (`@mdx-js/rollup`) through Vite, this is automatically inferred from how
  *   you configure those tools.
- * @property {ElementAttributeNameCase | null | undefined} [elementAttributeNameCase='react']
+ * @property {RehypeRecmaOptions['elementAttributeNameCase']} [elementAttributeNameCase='react']
  *   Casing to use for attribute names (default: `'react'`);
  *   HTML casing is for example `class`, `stroke-linecap`, `xml:lang`;
  *   React casing is for example `className`, `strokeLinecap`, `xmlLang`;
@@ -112,7 +111,7 @@
  *   nodes (see `nodeTypes`) are passed through;
  *   In particular, you might want to pass configuration for footnotes if your
  *   content is not in English.
- * @property {StylePropertyNameCase | null | undefined} [stylePropertyNameCase='dom']
+ * @property {RehypeRecmaOptions['stylePropertyNameCase']} [stylePropertyNameCase='dom']
  *   Casing to use for property names in `style` objects (default: `'dom'`);
  *   CSS casing is for example `background-color` and `-webkit-line-clamp`;
  *   DOM casing is for example `backgroundColor` and `WebkitLineClamp`;
@@ -125,15 +124,17 @@
  */
 
 import {unreachable} from 'devlop'
+import recmaBuildJsx from 'recma-build-jsx'
+import recmaJsx from 'recma-jsx'
+import recmaStringify from 'recma-stringify'
+import rehypeRecma from 'rehype-recma'
 import remarkMdx from 'remark-mdx'
 import remarkParse from 'remark-parse'
 import remarkRehype from 'remark-rehype'
 import {unified} from 'unified'
+import {recmaBuildJsxTransform} from './plugin/recma-build-jsx-transform.js'
 import {recmaDocument} from './plugin/recma-document.js'
-import {recmaJsxBuild} from './plugin/recma-jsx-build.js'
 import {recmaJsxRewrite} from './plugin/recma-jsx-rewrite.js'
-import {recmaStringify} from './plugin/recma-stringify.js'
-import {rehypeRecma} from './plugin/rehype-recma.js'
 import {rehypeRemoveRaw} from './plugin/rehype-remove-raw.js'
 import {remarkMarkAndUnravel} from './plugin/remark-mark-and-unravel.js'
 import {nodeTypes} from './node-types.js'
@@ -225,12 +226,13 @@ export function createProcessor(options) {
     .use(recmaJsxRewrite, settings)
 
   if (!settings.jsx) {
-    pipeline.use(recmaJsxBuild, settings)
+    pipeline.use(recmaBuildJsx, settings).use(recmaBuildJsxTransform, settings)
   }
 
-  // @ts-expect-error: `Program` is close enough to a `Node`,
-  // but type inference has trouble with it and bridges.
-  pipeline.use(recmaStringify, settings).use(settings.recmaPlugins || [])
+  pipeline
+    .use(recmaJsx)
+    .use(recmaStringify, settings)
+    .use(settings.recmaPlugins || [])
 
   // @ts-expect-error: TS doesn’t get the plugins we added with if-statements.
   return pipeline

packages/mdx/lib/core.js

@@ -1,48 +1,37 @@
 /**
  * @import {Program} from 'estree-jsx'
- * @import {Options as BuildJsxOptions} from 'estree-util-build-jsx'
- * @import {VFile} from 'vfile'
  */
 
 /**
- * @typedef ExtraOptions
- *   Configuration for internal plugin `recma-jsx-build`.
+ * @typedef Options
+ *   Configuration for internal plugin `recma-build-jsx-transform`.
  * @property {'function-body' | 'program' | null | undefined} [outputFormat='program']
  *   Whether to keep the import of the automatic runtime or get it from
  *   `arguments[0]` instead (default: `'program'`).
- *
- * @typedef {BuildJsxOptions & ExtraOptions} Options
- *   Options.
  */
 
-import {buildJsx} from 'estree-util-build-jsx'
 import {specifiersToDeclarations} from '../util/estree-util-specifiers-to-declarations.js'
 import {toIdOrMemberExpression} from '../util/estree-util-to-id-or-member-expression.js'
 
 /**
- * A plugin to build JSX into function calls.
- * `estree-util-build-jsx` does all the work for us!
+ * Plugin to change the tree after compiling JSX away.
  *
  * @param {Readonly<Options> | null | undefined} [options]
  *   Configuration (optional).
  * @returns
  *   Transform.
  */
-export function recmaJsxBuild(options) {
+export function recmaBuildJsxTransform(options) {
   /* c8 ignore next -- always given in `@mdx-js/mdx` */
-  const {development, outputFormat} = options || {}
+  const {outputFormat} = options || {}
 
   /**
    * @param {Program} tree
    *   Tree.
-   * @param {VFile} file
-   *   File.
    * @returns {undefined}
    *   Nothing.
    */
-  return function (tree, file) {
-    buildJsx(tree, {development, filePath: file.history[0]})
-
+  return function (tree) {
     // Remove the pragma comment that we injected ourselves as it is no longer
     // needed.
     if (tree.comments) {

packages/mdx/lib/plugin/recma-jsx-build.js packages/mdx/lib/plugin/recma-build-jsx-transform.js

@@ -49,14 +49,15 @@
     "@types/mdx": "^2.0.0",
     "collapse-white-space": "^2.0.0",
     "devlop": "^1.0.0",
-    "estree-util-build-jsx": "^3.0.0",
     "estree-util-is-identifier-name": "^3.0.0",
     "estree-util-scope": "^1.0.0",
-    "estree-util-to-js": "^2.0.0",
     "estree-walker": "^3.0.0",
-    "hast-util-to-estree": "^3.0.0",
     "hast-util-to-jsx-runtime": "^2.0.0",
     "markdown-extensions": "^2.0.0",
+    "recma-build-jsx": "^1.0.0",
+    "recma-jsx": "^1.0.0",
+    "recma-stringify": "^1.0.0",
+    "rehype-recma": "^1.0.0",
     "remark-mdx": "^3.0.0",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.0.0",

packages/mdx/lib/plugin/recma-stringify.js

@@ -1134,7 +1134,7 @@ probably.
 Then we go to JavaScript: [esast][] (JS; an
 AST which is compatible with estree but looks a bit more like other unist ASTs).
 This transformation is done by
-[`syntax-tree/hast-util-to-estree`][hast-util-to-estree].
+[`rehype-recma`][rehype-recma].
 This is a new ecosystem that does not have utilities or plugins yet.
 But it’s where `@mdx-js/mdx` does its thing: where it adds imports/exports,
 where it compiles JSX away into `_jsx()` calls, and where it does the other cool
@@ -1239,7 +1239,7 @@ abide by its terms.
 
 [hast]: https://github.com/syntax-tree/hast
 
-[hast-util-to-estree]: https://github.com/syntax-tree/hast-util-to-estree
+[rehype-recma]: https://github.com/mdx-js/recma/tree/main/packages/rehype-recma
 
 [rehype-highlight]: https://github.com/rehypejs/rehype-highlight
 

packages/mdx/lib/plugin/rehype-recma.js

@@ -1067,7 +1067,7 @@ test('@mdx-js/mdx: compile', async function (t) {
         const exception = /** @type {Error} */ (error)
         const match = /at Component \(([^)]+)\)/.exec(String(exception.stack))
         const actual = match?.[1].split(/\\|\//g).join('/') || ''
-        return (base.pathname + 'unknown.mdx:2:3').endsWith(actual)
+        return (base.pathname + 'unknown.js:2:3').endsWith(actual)
       }
     )