Fix generated JSX pragmas for new babel

Babel changed which comments it supports.
TypeScript followed.
This commit generates comments that work in both old and new Babel and which
should work in all tools that support comment pragmas.

Closes GH-2438.
Related-to: babel/babel#13896.

Author: remcohaszing

docs/_asset/editor.jsx

@@ -1,4 +1,7 @@
-/* @jsxRuntime automatic @jsxImportSource react */
+/*
+ * @jsxRuntime automatic
+ * @jsxImportSource react
+ */
 
 /**
  * @typedef {import('@wooorm/starry-night').Grammar} Grammar

docs/docs/using-mdx.mdx

@@ -41,7 +41,8 @@ That’s *roughly* turned into the following JavaScript.
 The below might help to form a mental model:
 
 ```tsx path="output-outline.jsx"
-/* @jsxRuntime automatic @jsxImportSource react */
+/* @jsxRuntime automatic */
+/* @jsxImportSource react */
 
 export function Thing() {
   return <>World</>

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

@@ -73,8 +73,6 @@ export function recmaDocument(options) {
     const exportedIdentifiers = []
     /** @type {Array<Directive | ModuleDeclaration | Statement>} */
     const replacement = []
-    /** @type {Array<string>} */
-    const pragmas = []
     let exportAllCount = 0
     /** @type {ExportDefaultDeclaration | ExportSpecifier | undefined} */
     let layout
@@ -83,31 +81,20 @@ export function recmaDocument(options) {
     /** @type {Node} */
     let child
 
-    if (jsxRuntime) {
-      pragmas.push('@jsxRuntime ' + jsxRuntime)
-    }
-
-    if (jsxRuntime === 'automatic' && jsxImportSource) {
-      pragmas.push('@jsxImportSource ' + jsxImportSource)
+    if (jsxRuntime === 'classic' && pragmaFrag) {
+      injectPragma(tree, '@jsxFrag', pragmaFrag)
     }
 
     if (jsxRuntime === 'classic' && pragma) {
-      pragmas.push('@jsx ' + pragma)
+      injectPragma(tree, '@jsx', pragma)
     }
 
-    if (jsxRuntime === 'classic' && pragmaFrag) {
-      pragmas.push('@jsxFrag ' + pragmaFrag)
+    if (jsxRuntime === 'automatic' && jsxImportSource) {
+      injectPragma(tree, '@jsxImportSource', jsxImportSource)
     }
 
-    /* c8 ignore next -- comments can be missing in the types, we always have it. */
-    if (!tree.comments) tree.comments = []
-
-    if (pragmas.length > 0) {
-      tree.comments.unshift({
-        type: 'Block',
-        value: pragmas.join(' '),
-        data: {_mdxIsPragmaComment: true}
-      })
+    if (jsxRuntime) {
+      injectPragma(tree, '@jsxRuntime', jsxRuntime)
     }
 
     if (jsxRuntime === 'classic' && pragmaImportSource) {
@@ -706,6 +693,20 @@ export function recmaDocument(options) {
   }
 }
 
+/**
+ * @param {Program} tree
+ * @param {string} name
+ * @param {string} value
+ * @returns {undefined}
+ */
+function injectPragma(tree, name, value) {
+  tree.comments?.unshift({
+    type: 'Block',
+    value: name + ' ' + value,
+    data: {_mdxIsPragmaComment: true}
+  })
+}
+
 /**
  * @param {Expression} importMetaUrl
  * @returns {FunctionDeclaration}

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

@@ -45,13 +45,10 @@ export function recmaJsxBuild(options) {
 
     // Remove the pragma comment that we injected ourselves as it is no longer
     // needed.
-    if (
-      tree.comments &&
-      tree.comments[0].type === 'Block' &&
-      tree.comments[0].data &&
-      tree.comments[0].data._mdxIsPragmaComment
-    ) {
-      tree.comments.shift()
+    if (tree.comments) {
+      tree.comments = tree.comments.filter(function (d) {
+        return !d.data?._mdxIsPragmaComment
+      })
     }
 
     // When compiling to a function body, replace the import that was just

packages/mdx/readme.md

@@ -653,7 +653,8 @@ Configuration for `createProcessor` (TypeScript type).
 
   ```diff
   -import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from 'react/jsx-runtime'
-  +/* @jsxRuntime automatic @jsxImportSource react */
+  +/*@jsxRuntime automatic*/
+  +/*@jsxImportSource react*/
 
   export function Thing() {
   -  return _jsx(_Fragment, {children: 'World'})

packages/mdx/test/compile.js

@@ -1154,7 +1154,8 @@ test('@mdx-js/mdx: compile (JSX)', async function (t) {
     assert.equal(
       String(await compile('*a*', {jsx: true})),
       [
-        '/*@jsxRuntime automatic @jsxImportSource react*/',
+        '/*@jsxRuntime automatic*/',
+        '/*@jsxImportSource react*/',
         'function _createMdxContent(props) {',
         '  const _components = {',
         '    em: "em",',
@@ -1176,7 +1177,8 @@ test('@mdx-js/mdx: compile (JSX)', async function (t) {
     assert.equal(
       String(await compile('<a {...b} c d="1" e={1} />', {jsx: true})),
       [
-        '/*@jsxRuntime automatic @jsxImportSource react*/',
+        '/*@jsxRuntime automatic*/',
+        '/*@jsxImportSource react*/',
         'function _createMdxContent(props) {',
         '  return <a {...b} c d="1" e={1} />;',
         '}',
@@ -1195,7 +1197,8 @@ test('@mdx-js/mdx: compile (JSX)', async function (t) {
       assert.equal(
         String(await compile('<><a:b /><c.d/></>', {jsx: true})),
         [
-          '/*@jsxRuntime automatic @jsxImportSource react*/',
+          '/*@jsxRuntime automatic*/',
+          '/*@jsxImportSource react*/',
           'function _createMdxContent(props) {',
           '  const {c} = props.components || ({});',
           '  if (!c) _missingMdxReference("c", false);',
@@ -1219,7 +1222,8 @@ test('@mdx-js/mdx: compile (JSX)', async function (t) {
     assert.equal(
       String(await compile('<>a {/* 1 */} b</>', {jsx: true})),
       [
-        '/*@jsxRuntime automatic @jsxImportSource react*/',
+        '/*@jsxRuntime automatic*/',
+        '/*@jsxImportSource react*/',
         '/*1*/',
         'function _createMdxContent(props) {',
         '  return <><>{"a "}{}{" b"}</></>;',
@@ -1239,7 +1243,8 @@ test('@mdx-js/mdx: compile (JSX)', async function (t) {
       assert.equal(
         String(await compile('{<a-b></a-b>}', {jsx: true})),
         [
-          '/*@jsxRuntime automatic @jsxImportSource react*/',
+          '/*@jsxRuntime automatic*/',
+          '/*@jsxImportSource react*/',
           'function _createMdxContent(props) {',
           '  const _components = {',
           '    "a-b": "a-b",',
@@ -1261,7 +1266,8 @@ test('@mdx-js/mdx: compile (JSX)', async function (t) {
     assert.equal(
       String(await compile('Hello {props.name}', {jsx: true})),
       [
-        '/*@jsxRuntime automatic @jsxImportSource react*/',
+        '/*@jsxRuntime automatic*/',
+        '/*@jsxImportSource react*/',
         'function _createMdxContent(props) {',
         '  const _components = {',
         '    p: "p",',
@@ -1289,7 +1295,8 @@ test('@mdx-js/mdx: compile (JSX)', async function (t) {
           )
         ),
         [
-          '/*@jsxRuntime automatic @jsxImportSource react*/',
+          '/*@jsxRuntime automatic*/',
+          '/*@jsxImportSource react*/',
           'const MDXLayout = function Layout({components, ...props}) {',
           '  return <section {...props} />;',
           '};',
@@ -1320,7 +1327,8 @@ test('@mdx-js/mdx: compile (JSX)', async function (t) {
           })
         ),
         [
-          '/*@jsxRuntime automatic @jsxImportSource react*/',
+          '/*@jsxRuntime automatic*/',
+          '/*@jsxImportSource react*/',
           'import {useMDXComponents as _provideComponents} from "@mdx-js/react";',
           'function _createMdxContent(props) {',
           '  const _components = {',