diff --git a/docs/docs/using-mdx.mdx b/docs/docs/using-mdx.mdx index 713fe5aa1..932385136 100644 --- a/docs/docs/using-mdx.mdx +++ b/docs/docs/using-mdx.mdx @@ -62,7 +62,6 @@ Some observations: The *actual* output is: ```tsx path="output-actual.js" -/* @jsxRuntime automatic @jsxImportSource react */ import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from 'react/jsx-runtime' export function Thing() { diff --git a/packages/mdx/lib/plugin/recma-document.js b/packages/mdx/lib/plugin/recma-document.js index b822f7367..516158423 100644 --- a/packages/mdx/lib/plugin/recma-document.js +++ b/packages/mdx/lib/plugin/recma-document.js @@ -103,7 +103,11 @@ export function recmaDocument(options) { if (!tree.comments) tree.comments = [] if (pragmas.length > 0) { - tree.comments.unshift({type: 'Block', value: pragmas.join(' ')}) + tree.comments.unshift({ + type: 'Block', + value: pragmas.join(' '), + data: {_mdxIsPragmaComment: true} + }) } if (jsxRuntime === 'classic' && pragmaImportSource) { diff --git a/packages/mdx/lib/plugin/recma-jsx-build.js b/packages/mdx/lib/plugin/recma-jsx-build.js index 58192166c..c4445510d 100644 --- a/packages/mdx/lib/plugin/recma-jsx-build.js +++ b/packages/mdx/lib/plugin/recma-jsx-build.js @@ -43,6 +43,17 @@ export function recmaJsxBuild(options) { return function (tree, file) { buildJsx(tree, {development, filePath: file.history[0]}) + // 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() + } + // When compiling to a function body, replace the import that was just // generated, and get `jsx`, `jsxs`, and `Fragment` from `arguments[0]` // instead. diff --git a/packages/mdx/lib/types.d.ts b/packages/mdx/lib/types.d.ts index cc90c8fe9..dd633c2c9 100644 --- a/packages/mdx/lib/types.d.ts +++ b/packages/mdx/lib/types.d.ts @@ -10,6 +10,16 @@ interface EsastData extends UnistData { _mdxExplicitJsx?: boolean | null | undefined } +interface EsastCommentData extends EsastData { + /** + * Whether a node (only used on comments) was generated by us to include the + * JSX pragmas, so that when we compile JSX away, we can remove it. + * + * Registered by `@mdx-js/mdx/lib/types.d.ts`. + */ + _mdxIsPragmaComment?: boolean | null | undefined +} + // Register data on `estree`. declare module 'estree' { interface BaseNode { @@ -20,6 +30,15 @@ declare module 'estree' { */ data?: EsastData | undefined } + + interface Comment { + /** + * Extra unist data passed added by `recma-document`. + * + * Registered by `@mdx-js/mdx/lib/types.d.ts`. + */ + data?: EsastCommentData | undefined + } } // Register data on `mdast`. diff --git a/packages/mdx/readme.md b/packages/mdx/readme.md index 72ba7a6cb..a04d5908d 100644 --- a/packages/mdx/readme.md +++ b/packages/mdx/readme.md @@ -104,7 +104,6 @@ console.log(String(compiled)) Yields roughly: ```tsx -/* @jsxRuntime automatic @jsxImportSource react */ import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from 'react/jsx-runtime' export function Thing() { @@ -653,8 +652,8 @@ Configuration for `createProcessor` (TypeScript type). …yields this difference: ```diff - /* @jsxRuntime automatic @jsxImportSource react */ -import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from 'react/jsx-runtime' + +/* @jsxRuntime automatic @jsxImportSource react */ export function Thing() { - return _jsx(_Fragment, {children: 'World'}) @@ -701,9 +700,7 @@ Configuration for `createProcessor` (TypeScript type). …yields this difference: ```diff - -/* @jsxRuntime automatic @jsxImportSource react */ -import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from 'react/jsx-runtime' - +/* @jsxRuntime automatic @jsxImportSource preact */ +import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from 'preact/jsx-runtime' ``` @@ -729,9 +726,7 @@ Configuration for `createProcessor` (TypeScript type). …yields this difference: ```diff - -/* @jsxRuntime automatic @jsxImportSource react */ -import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from 'react/jsx-runtime' - +/* @jsxRuntime classic @jsx React.createElement @jsxFrag React.Fragment */ +import React from 'react' export function Thing() { @@ -767,7 +762,6 @@ Configuration for `createProcessor` (TypeScript type). …yields: ```tsx - /* @jsxRuntime automatic @jsxImportSource react */ import {jsx as _jsx, jsxs as _jsxs} from 'react/jsx-runtime' export const no = 3.14 function _createMdxContent(props) { /* … */ } @@ -775,6 +769,7 @@ Configuration for `createProcessor` (TypeScript type). ``` ```tsx + 'use strict' const {Fragment: _Fragment, jsx: _jsx} = arguments[0] const no = 3.14 function _createMdxContent(props) { /* … */ } @@ -826,9 +821,7 @@ Configuration for `createProcessor` (TypeScript type). …yields this difference: ```diff - -/* @jsxRuntime classic @jsx React.createElement @jsxFrag React.Fragment */ -import React from 'react' - +/* @jsxRuntime classic @jsx preact.createElement @jsxFrag preact.Fragment */ +import preact from 'preact/compat' export function Thing() { @@ -879,7 +872,6 @@ Configuration for `createProcessor` (TypeScript type). …yields this difference: ```diff - /* @jsxRuntime automatic @jsxImportSource react */ import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from 'react/jsx-runtime' +import {useMDXComponents as _provideComponents} from '@mdx-js/react' diff --git a/packages/mdx/test/syntax.js b/packages/mdx/test/syntax.js index 5ae661ef1..32e95549b 100644 --- a/packages/mdx/test/syntax.js +++ b/packages/mdx/test/syntax.js @@ -641,7 +641,6 @@ test('@mdx-js/mdx: syntax: MDX (JSX)', async function (t) { `) ), [ - '/*@jsxRuntime automatic @jsxImportSource react*/', 'import {jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime";', 'function _createMdxContent(props) {', ' return _jsx("table", {', @@ -868,7 +867,6 @@ test('@mdx-js/mdx: syntax: MDX (ESM)', async function (t) { ) ), [ - '/*@jsxRuntime automatic @jsxImportSource react*/', 'import {jsxDEV as _jsxDEV} from "react/jsx-dev-runtime";', 'function _createMdxContent(props) {', ' const {X} = props.components || ({});', @@ -906,7 +904,6 @@ test('@mdx-js/mdx: syntax: MDX (ESM)', async function (t) { assert.equal( String(await compile('# hi', {outputFormat: 'function-body'})), [ - '/*@jsxRuntime automatic @jsxImportSource react*/', '"use strict";', 'const {jsx: _jsx} = arguments[0];', 'function _createMdxContent(props) {', diff --git a/packages/rollup/test/index.js b/packages/rollup/test/index.js index b6ab10697..aad2e5b99 100644 --- a/packages/rollup/test/index.js +++ b/packages/rollup/test/index.js @@ -41,7 +41,7 @@ test('@mdx-js/rollup', async function (t) { // Source map. assert.equal( chunk.map?.mappings, - ';;;AAAO,SAAA,OAAA,GAAA;;AAA8B,IAAA,QAAA,EAAA,QAAA;;;;;;;;;AAEnC,IAAA,QAAA,EAAA,CAAA,SAAA,EAAAA,GAAA,CAAA,OAAA,EAAA,EAAA,CAAA,CAAA;;;;;;;;;;;;;;;' + ';;AAAO,SAAA,OAAA,GAAA;;AAA8B,IAAA,QAAA,EAAA,QAAA;;;;;;;;;AAEnC,IAAA,QAAA,EAAA,CAAA,SAAA,EAAAA,GAAA,CAAA,OAAA,EAAA,EAAA,CAAA,CAAA;;;;;;;;;;;;;;;' ) await fs.writeFile(jsUrl, chunk.code)