Skip to content

Commit

Permalink
Fix generated JSX pragmas for new babel
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
remcohaszing authored Feb 12, 2024
1 parent 0e6dd7a commit 49fd094
Show file tree
Hide file tree
Showing 6 changed files with 49 additions and 38 deletions.
5 changes: 4 additions & 1 deletion docs/_asset/editor.jsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
/* @jsxRuntime automatic @jsxImportSource react */
/*
* @jsxRuntime automatic
* @jsxImportSource react
*/

/**
* @typedef {import('@wooorm/starry-night').Grammar} Grammar
Expand Down
3 changes: 2 additions & 1 deletion docs/docs/using-mdx.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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</>
Expand Down
41 changes: 21 additions & 20 deletions packages/mdx/lib/plugin/recma-document.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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) {
Expand Down Expand Up @@ -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}
Expand Down
11 changes: 4 additions & 7 deletions packages/mdx/lib/plugin/recma-jsx-build.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
3 changes: 2 additions & 1 deletion packages/mdx/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -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'})
Expand Down
24 changes: 16 additions & 8 deletions packages/mdx/test/compile.js
Original file line number Diff line number Diff line change
Expand Up @@ -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",',
Expand All @@ -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} />;',
'}',
Expand All @@ -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);',
Expand All @@ -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"}</></>;',
Expand All @@ -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",',
Expand All @@ -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",',
Expand Down Expand Up @@ -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} />;',
'};',
Expand Down Expand Up @@ -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 = {',
Expand Down

0 comments on commit 49fd094

Please sign in to comment.