Skip to content

Commit 49fd094

Browse files
remcohaszingremcohaszing
authored
Fix generated JSX pragmas for new babel
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.
1 parent 0e6dd7a commit 49fd094

6 files changed

Lines changed: 49 additions & 38 deletions

File tree

‎docs/_asset/editor.jsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
/* @jsxRuntime automatic @jsxImportSource react */
1+
/*
2+
* @jsxRuntime automatic
3+
* @jsxImportSource react
4+
*/
25

36
/**
47
* @typedef {import('@wooorm/starry-night').Grammar} Grammar

‎docs/docs/using-mdx.mdx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,8 @@ That’s *roughly* turned into the following JavaScript.
4141
The below might help to form a mental model:
4242

4343
```tsx path="output-outline.jsx"
44-
/* @jsxRuntime automatic @jsxImportSource react */
44+
/* @jsxRuntime automatic */
45+
/* @jsxImportSource react */
4546

4647
export function Thing() {
4748
return <>World</>

‎packages/mdx/lib/plugin/recma-document.js‎

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -73,8 +73,6 @@ export function recmaDocument(options) {
7373
const exportedIdentifiers = []
7474
/** @type {Array<Directive | ModuleDeclaration | Statement>} */
7575
const replacement = []
76-
/** @type {Array<string>} */
77-
const pragmas = []
7876
let exportAllCount = 0
7977
/** @type {ExportDefaultDeclaration | ExportSpecifier | undefined} */
8078
let layout
@@ -83,31 +81,20 @@ export function recmaDocument(options) {
8381
/** @type {Node} */
8482
let child
8583

86-
if (jsxRuntime) {
87-
pragmas.push('@jsxRuntime ' + jsxRuntime)
88-
}
89-
90-
if (jsxRuntime === 'automatic' && jsxImportSource) {
91-
pragmas.push('@jsxImportSource ' + jsxImportSource)
84+
if (jsxRuntime === 'classic' && pragmaFrag) {
85+
injectPragma(tree, '@jsxFrag', pragmaFrag)
9286
}
9387

9488
if (jsxRuntime === 'classic' && pragma) {
95-
pragmas.push('@jsx ' + pragma)
89+
injectPragma(tree, '@jsx', pragma)
9690
}
9791

98-
if (jsxRuntime === 'classic' && pragmaFrag) {
99-
pragmas.push('@jsxFrag ' + pragmaFrag)
92+
if (jsxRuntime === 'automatic' && jsxImportSource) {
93+
injectPragma(tree, '@jsxImportSource', jsxImportSource)
10094
}
10195

102-
/* c8 ignore next -- comments can be missing in the types, we always have it. */
103-
if (!tree.comments) tree.comments = []
104-
105-
if (pragmas.length > 0) {
106-
tree.comments.unshift({
107-
type: 'Block',
108-
value: pragmas.join(' '),
109-
data: {_mdxIsPragmaComment: true}
110-
})
96+
if (jsxRuntime) {
97+
injectPragma(tree, '@jsxRuntime', jsxRuntime)
11198
}
11299

113100
if (jsxRuntime === 'classic' && pragmaImportSource) {
@@ -706,6 +693,20 @@ export function recmaDocument(options) {
706693
}
707694
}
708695

696+
/**
697+
* @param {Program} tree
698+
* @param {string} name
699+
* @param {string} value
700+
* @returns {undefined}
701+
*/
702+
function injectPragma(tree, name, value) {
703+
tree.comments?.unshift({
704+
type: 'Block',
705+
value: name + ' ' + value,
706+
data: {_mdxIsPragmaComment: true}
707+
})
708+
}
709+
709710
/**
710711
* @param {Expression} importMetaUrl
711712
* @returns {FunctionDeclaration}

‎packages/mdx/lib/plugin/recma-jsx-build.js‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -45,13 +45,10 @@ export function recmaJsxBuild(options) {
4545

4646
// Remove the pragma comment that we injected ourselves as it is no longer
4747
// needed.
48-
if (
49-
tree.comments &&
50-
tree.comments[0].type === 'Block' &&
51-
tree.comments[0].data &&
52-
tree.comments[0].data._mdxIsPragmaComment
53-
) {
54-
tree.comments.shift()
48+
if (tree.comments) {
49+
tree.comments = tree.comments.filter(function (d) {
50+
return !d.data?._mdxIsPragmaComment
51+
})
5552
}
5653

5754
// When compiling to a function body, replace the import that was just

‎packages/mdx/readme.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -653,7 +653,8 @@ Configuration for `createProcessor` (TypeScript type).
653653

654654
```diff
655655
-import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from 'react/jsx-runtime'
656-
+/* @jsxRuntime automatic @jsxImportSource react */
656+
+/*@jsxRuntime automatic*/
657+
+/*@jsxImportSource react*/
657658

658659
export function Thing() {
659660
- return _jsx(_Fragment, {children: 'World'})

‎packages/mdx/test/compile.js‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1154,7 +1154,8 @@ test('@mdx-js/mdx: compile (JSX)', async function (t) {
11541154
assert.equal(
11551155
String(await compile('*a*', {jsx: true})),
11561156
[
1157-
'/*@jsxRuntime automatic @jsxImportSource react*/',
1157+
'/*@jsxRuntime automatic*/',
1158+
'/*@jsxImportSource react*/',
11581159
'function _createMdxContent(props) {',
11591160
' const _components = {',
11601161
' em: "em",',
@@ -1176,7 +1177,8 @@ test('@mdx-js/mdx: compile (JSX)', async function (t) {
11761177
assert.equal(
11771178
String(await compile('<a {...b} c d="1" e={1} />', {jsx: true})),
11781179
[
1179-
'/*@jsxRuntime automatic @jsxImportSource react*/',
1180+
'/*@jsxRuntime automatic*/',
1181+
'/*@jsxImportSource react*/',
11801182
'function _createMdxContent(props) {',
11811183
' return <a {...b} c d="1" e={1} />;',
11821184
'}',
@@ -1195,7 +1197,8 @@ test('@mdx-js/mdx: compile (JSX)', async function (t) {
11951197
assert.equal(
11961198
String(await compile('<><a:b /><c.d/></>', {jsx: true})),
11971199
[
1198-
'/*@jsxRuntime automatic @jsxImportSource react*/',
1200+
'/*@jsxRuntime automatic*/',
1201+
'/*@jsxImportSource react*/',
11991202
'function _createMdxContent(props) {',
12001203
' const {c} = props.components || ({});',
12011204
' if (!c) _missingMdxReference("c", false);',
@@ -1219,7 +1222,8 @@ test('@mdx-js/mdx: compile (JSX)', async function (t) {
12191222
assert.equal(
12201223
String(await compile('<>a {/* 1 */} b</>', {jsx: true})),
12211224
[
1222-
'/*@jsxRuntime automatic @jsxImportSource react*/',
1225+
'/*@jsxRuntime automatic*/',
1226+
'/*@jsxImportSource react*/',
12231227
'/*1*/',
12241228
'function _createMdxContent(props) {',
12251229
' return <><>{"a "}{}{" b"}</></>;',
@@ -1239,7 +1243,8 @@ test('@mdx-js/mdx: compile (JSX)', async function (t) {
12391243
assert.equal(
12401244
String(await compile('{<a-b></a-b>}', {jsx: true})),
12411245
[
1242-
'/*@jsxRuntime automatic @jsxImportSource react*/',
1246+
'/*@jsxRuntime automatic*/',
1247+
'/*@jsxImportSource react*/',
12431248
'function _createMdxContent(props) {',
12441249
' const _components = {',
12451250
' "a-b": "a-b",',
@@ -1261,7 +1266,8 @@ test('@mdx-js/mdx: compile (JSX)', async function (t) {
12611266
assert.equal(
12621267
String(await compile('Hello {props.name}', {jsx: true})),
12631268
[
1264-
'/*@jsxRuntime automatic @jsxImportSource react*/',
1269+
'/*@jsxRuntime automatic*/',
1270+
'/*@jsxImportSource react*/',
12651271
'function _createMdxContent(props) {',
12661272
' const _components = {',
12671273
' p: "p",',
@@ -1289,7 +1295,8 @@ test('@mdx-js/mdx: compile (JSX)', async function (t) {
12891295
)
12901296
),
12911297
[
1292-
'/*@jsxRuntime automatic @jsxImportSource react*/',
1298+
'/*@jsxRuntime automatic*/',
1299+
'/*@jsxImportSource react*/',
12931300
'const MDXLayout = function Layout({components, ...props}) {',
12941301
' return <section {...props} />;',
12951302
'};',
@@ -1320,7 +1327,8 @@ test('@mdx-js/mdx: compile (JSX)', async function (t) {
13201327
})
13211328
),
13221329
[
1323-
'/*@jsxRuntime automatic @jsxImportSource react*/',
1330+
'/*@jsxRuntime automatic*/',
1331+
'/*@jsxImportSource react*/',
13241332
'import {useMDXComponents as _provideComponents} from "@mdx-js/react";',
13251333
'function _createMdxContent(props) {',
13261334
' const _components = {',

0 commit comments

Comments
 (0)