Fix the generated JSX pragmas

Each JSX pragma needs to be on its own line for tools like Babel or TypeScript to understand them. There is a broken pragma in the @mdx-js/preact tests, which was left untouched. Due to a misconfiguration, to fix it, would break type checking.
mdx-js · Feb 8, 2024 · 156187c · 156187c
1 parent b9b37b6
commit 156187c
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 12 deletions.
diff --git a/docs/_asset/editor.jsx b/docs/_asset/editor.jsx
@@ -1,4 +1,5 @@
-/* @jsxRuntime automatic @jsxImportSource react */
+/* @jsxRuntime automatic
+@jsxImportSource react */
 
 /**
  * @typedef {import('@wooorm/starry-night').Grammar} Grammar

diff --git a/docs/docs/using-mdx.mdx b/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</>

diff --git a/packages/mdx/lib/plugin/recma-document.js b/packages/mdx/lib/plugin/recma-document.js
@@ -105,7 +105,7 @@ export function recmaDocument(options) {
     if (pragmas.length > 0) {
       tree.comments.unshift({
         type: 'Block',
-        value: pragmas.join(' '),
+        value: pragmas.join('\n'),
         data: {_mdxIsPragmaComment: true}
       })
     }

diff --git a/packages/mdx/readme.md b/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'})

diff --git a/packages/mdx/test/compile.js b/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 = {',