Split JSX pragma tags over multiple comments

This doesn’t affect their meaning, but the output looks slightly nicer.
mdx-js · Feb 10, 2024 · d9e33f0 · d9e33f0
1 parent 634b6ba
commit d9e33f0
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 41 deletions.
diff --git a/packages/mdx/lib/plugin/recma-document.js b/packages/mdx/lib/plugin/recma-document.js
@@ -102,10 +102,10 @@ export function recmaDocument(options) {
     /* c8 ignore next -- comments can be missing in the types, we always have it. */
     if (!tree.comments) tree.comments = []
 
-    if (pragmas.length > 0) {
+    for (let index = pragmas.length; index--; index >= 0) {
       tree.comments.unshift({
         type: 'Block',
-        value: '\n' + pragmas.join('\n') + '\n',
+        value: pragmas[index],
         data: {_mdxIsPragmaComment: true}
       })
     }

diff --git a/packages/mdx/lib/plugin/recma-jsx-build.js b/packages/mdx/lib/plugin/recma-jsx-build.js
@@ -45,13 +45,15 @@ 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) {
+      let index = 0
+      while (index < tree.comments.length) {
+        if (tree.comments[index].data?._mdxIsPragmaComment) {
+          tree.comments.splice(index, 1)
+        } else {
+          index++
+        }
+      }
     }
 
     // When compiling to a function body, replace the import that was just

diff --git a/packages/mdx/test/compile.js b/packages/mdx/test/compile.js
@@ -1154,10 +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",',
@@ -1179,10 +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} />;',
         '}',
@@ -1201,10 +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);',
@@ -1228,10 +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"}</></>;',
@@ -1251,10 +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",',
@@ -1276,10 +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",',
@@ -1307,10 +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} />;',
           '};',
@@ -1341,10 +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 = {',