From 156187ceab22b4c2c5fdb87839731dc34548a149 Mon Sep 17 00:00:00 2001 From: Remco Haszing Date: Thu, 8 Feb 2024 10:30:17 +0100 Subject: [PATCH 1/7] 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. --- docs/_asset/editor.jsx | 3 ++- docs/docs/using-mdx.mdx | 3 ++- packages/mdx/lib/plugin/recma-document.js | 2 +- packages/mdx/readme.md | 3 ++- packages/mdx/test/compile.js | 24 +++++++++++++++-------- 5 files changed, 23 insertions(+), 12 deletions(-) diff --git a/docs/_asset/editor.jsx b/docs/_asset/editor.jsx index 0960cb0cf..835e2a4b9 100644 --- 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 index 932385136..a8428c7c8 100644 --- 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 index fec6ce0b8..50bdf0498 100644 --- 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 index e396bcc1d..2b8b07457 100644 --- 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 index c7334dc13..a87f238ca 100644 --- 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('', {jsx: true})), [ - '/*@jsxRuntime automatic @jsxImportSource react*/', + '/*@jsxRuntime automatic', + '@jsxImportSource react*/', 'function _createMdxContent(props) {', ' return ;', '}', @@ -1195,7 +1197,8 @@ test('@mdx-js/mdx: compile (JSX)', async function (t) { assert.equal( String(await compile('<>', {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('{}', {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
;', '};', @@ -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 = {', From 634b6bacf078f182e0c1523de48d12f9a5637fe9 Mon Sep 17 00:00:00 2001 From: Remco Haszing Date: Thu, 8 Feb 2024 15:24:46 +0100 Subject: [PATCH 2/7] Prettify generated JSX pragmas --- docs/_asset/editor.jsx | 6 ++- docs/docs/using-mdx.mdx | 6 ++- packages/mdx/lib/plugin/recma-document.js | 2 +- packages/mdx/readme.md | 6 ++- packages/mdx/test/compile.js | 48 +++++++++++++++-------- 5 files changed, 45 insertions(+), 23 deletions(-) diff --git a/docs/_asset/editor.jsx b/docs/_asset/editor.jsx index 835e2a4b9..3129dfb96 100644 --- a/docs/_asset/editor.jsx +++ b/docs/_asset/editor.jsx @@ -1,5 +1,7 @@ -/* @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 index a8428c7c8..1a0c77c28 100644 --- a/docs/docs/using-mdx.mdx +++ b/docs/docs/using-mdx.mdx @@ -41,8 +41,10 @@ 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 index 50bdf0498..5e405e89d 100644 --- 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('\n'), + value: '\n' + pragmas.join('\n') + '\n', data: {_mdxIsPragmaComment: true} }) } diff --git a/packages/mdx/readme.md b/packages/mdx/readme.md index 2b8b07457..f10b2e12b 100644 --- a/packages/mdx/readme.md +++ b/packages/mdx/readme.md @@ -653,8 +653,10 @@ 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 index a87f238ca..f520627bc 100644 --- a/packages/mdx/test/compile.js +++ b/packages/mdx/test/compile.js @@ -1154,8 +1154,10 @@ 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",', @@ -1177,8 +1179,10 @@ test('@mdx-js/mdx: compile (JSX)', async function (t) { assert.equal( String(await compile('', {jsx: true})), [ - '/*@jsxRuntime automatic', - '@jsxImportSource react*/', + '/*', + '@jsxRuntime automatic', + '@jsxImportSource react', + '*/', 'function _createMdxContent(props) {', ' return ;', '}', @@ -1197,8 +1201,10 @@ test('@mdx-js/mdx: compile (JSX)', async function (t) { assert.equal( String(await compile('<>', {jsx: true})), [ - '/*@jsxRuntime automatic', - '@jsxImportSource react*/', + '/*', + '@jsxRuntime automatic', + '@jsxImportSource react', + '*/', 'function _createMdxContent(props) {', ' const {c} = props.components || ({});', ' if (!c) _missingMdxReference("c", false);', @@ -1222,8 +1228,10 @@ 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"};', @@ -1243,8 +1251,10 @@ test('@mdx-js/mdx: compile (JSX)', async function (t) { assert.equal( String(await compile('{}', {jsx: true})), [ - '/*@jsxRuntime automatic', - '@jsxImportSource react*/', + '/*', + '@jsxRuntime automatic', + '@jsxImportSource react', + '*/', 'function _createMdxContent(props) {', ' const _components = {', ' "a-b": "a-b",', @@ -1266,8 +1276,10 @@ 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",', @@ -1295,8 +1307,10 @@ test('@mdx-js/mdx: compile (JSX)', async function (t) { ) ), [ - '/*@jsxRuntime automatic', - '@jsxImportSource react*/', + '/*', + '@jsxRuntime automatic', + '@jsxImportSource react', + '*/', 'const MDXLayout = function Layout({components, ...props}) {', ' return
;', '};', @@ -1327,8 +1341,10 @@ 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 = {', From d9e33f09b827b1b5e978cff2361074da1754721b Mon Sep 17 00:00:00 2001 From: Remco Haszing Date: Sat, 10 Feb 2024 14:20:20 +0100 Subject: [PATCH 3/7] Split JSX pragma tags over multiple comments MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This doesn’t affect their meaning, but the output looks slightly nicer. --- packages/mdx/lib/plugin/recma-document.js | 4 +- packages/mdx/lib/plugin/recma-jsx-build.js | 16 ++++---- packages/mdx/test/compile.js | 48 ++++++++-------------- 3 files changed, 27 insertions(+), 41 deletions(-) diff --git a/packages/mdx/lib/plugin/recma-document.js b/packages/mdx/lib/plugin/recma-document.js index 5e405e89d..75a91ce06 100644 --- 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 index c4445510d..f657bf798 100644 --- 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 index f520627bc..779c878e4 100644 --- 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('', {jsx: true})), [ - '/*', - '@jsxRuntime automatic', - '@jsxImportSource react', - '*/', + '/*@jsxRuntime automatic*/', + '/*@jsxImportSource react*/', 'function _createMdxContent(props) {', ' return ;', '}', @@ -1201,10 +1197,8 @@ test('@mdx-js/mdx: compile (JSX)', async function (t) { assert.equal( String(await compile('<>', {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('{}', {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
;', '};', @@ -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 = {', From 47b017ec241341c754327073726ac3666b48b068 Mon Sep 17 00:00:00 2001 From: Remco Haszing Date: Sat, 10 Feb 2024 14:24:14 +0100 Subject: [PATCH 4/7] Update docs --- docs/docs/using-mdx.mdx | 6 ++---- packages/mdx/readme.md | 6 ++---- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/docs/docs/using-mdx.mdx b/docs/docs/using-mdx.mdx index 1a0c77c28..698d1a16e 100644 --- a/docs/docs/using-mdx.mdx +++ b/docs/docs/using-mdx.mdx @@ -41,10 +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/readme.md b/packages/mdx/readme.md index f10b2e12b..9f0067ccf 100644 --- a/packages/mdx/readme.md +++ b/packages/mdx/readme.md @@ -653,10 +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'}) From 220006b0801486562311eb1f09bef1c08676ef99 Mon Sep 17 00:00:00 2001 From: Remco Haszing Date: Sat, 10 Feb 2024 16:06:23 +0100 Subject: [PATCH 5/7] Apply suggestions from code review Co-authored-by: Titus Signed-off-by: Remco Haszing --- docs/_asset/editor.jsx | 2 +- docs/docs/using-mdx.mdx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/_asset/editor.jsx b/docs/_asset/editor.jsx index 3129dfb96..fd6168b5b 100644 --- a/docs/_asset/editor.jsx +++ b/docs/_asset/editor.jsx @@ -1,4 +1,4 @@ -/** +/* * @jsxRuntime automatic * @jsxImportSource react */ diff --git a/docs/docs/using-mdx.mdx b/docs/docs/using-mdx.mdx index 698d1a16e..b990a8912 100644 --- a/docs/docs/using-mdx.mdx +++ b/docs/docs/using-mdx.mdx @@ -41,8 +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 From dbc51641158dc5a6839da87df9830430e0c33838 Mon Sep 17 00:00:00 2001 From: Remco Haszing Date: Sat, 10 Feb 2024 16:31:50 +0100 Subject: [PATCH 6/7] Update packages/mdx/lib/plugin/recma-jsx-build.js Signed-off-by: Remco Haszing --- packages/mdx/lib/plugin/recma-jsx-build.js | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/packages/mdx/lib/plugin/recma-jsx-build.js b/packages/mdx/lib/plugin/recma-jsx-build.js index f657bf798..1bd8ef30a 100644 --- a/packages/mdx/lib/plugin/recma-jsx-build.js +++ b/packages/mdx/lib/plugin/recma-jsx-build.js @@ -46,14 +46,9 @@ export function recmaJsxBuild(options) { // Remove the pragma comment that we injected ourselves as it is no longer // needed. if (tree.comments) { - let index = 0 - while (index < tree.comments.length) { - if (tree.comments[index].data?._mdxIsPragmaComment) { - tree.comments.splice(index, 1) - } else { - index++ - } - } + tree.comments = tree.comments.filter(function (d) { + return !d.data?._mdxIsPragmaComment + }) } // When compiling to a function body, replace the import that was just From ddfdf618f6a696ed700e9f1088ee4d421189cd94 Mon Sep 17 00:00:00 2001 From: Remco Haszing Date: Sat, 10 Feb 2024 16:33:07 +0100 Subject: [PATCH 7/7] Unshift pragma comments to the estree directly This removes the need to keep an intermediate pragmas array which is only used to map over directly after defining it. --- packages/mdx/lib/plugin/recma-document.js | 41 ++++++++++++----------- 1 file changed, 21 insertions(+), 20 deletions(-) diff --git a/packages/mdx/lib/plugin/recma-document.js b/packages/mdx/lib/plugin/recma-document.js index 75a91ce06..65ba326d6 100644 --- a/packages/mdx/lib/plugin/recma-document.js +++ b/packages/mdx/lib/plugin/recma-document.js @@ -73,8 +73,6 @@ export function recmaDocument(options) { const exportedIdentifiers = [] /** @type {Array} */ const replacement = [] - /** @type {Array} */ - 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 = [] - - for (let index = pragmas.length; index--; index >= 0) { - tree.comments.unshift({ - type: 'Block', - value: pragmas[index], - 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}