Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix generated JSX pragmas for new babel #2438

Merged
merged 7 commits into from
Feb 12, 2024
Merged

Fix generated JSX pragmas for new babel #2438

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
156187c
Fix the generated JSX pragmas
remcohaszing Feb 8, 2024
634b6ba
Prettify generated JSX pragmas
remcohaszing Feb 8, 2024
d9e33f0
Split JSX pragma tags over multiple comments
remcohaszing Feb 10, 2024
47b017e
Update docs
remcohaszing Feb 10, 2024
220006b
Apply suggestions from code review
remcohaszing Feb 10, 2024
dbc5164
Update packages/mdx/lib/plugin/recma-jsx-build.js
remcohaszing Feb 10, 2024
ddfdf61
Unshift pragma comments to the estree directly
remcohaszing Feb 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion docs/_asset/editor.jsx
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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 = []

This comment was marked as spam.

Sign in to view

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)
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nitty, but I don‘t really like the reverse stuff.
This works locally (but I can’t suggest it on GH as it overlaps):

    tree.comments.unshift(
      ...pragmas.map(function (d) {
        return /** @type {const} */ ({
          type: 'Block',
          value: d,
          data: {_mdxIsPragmaComment: true}
        })
      })
    )

Only don’t really like the const but TS needs it apparently

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tried this at first, but TS caught me too.

I see the pragmas array is only used here. Instead of creating the pragmas array above, I could also unshift the comment nodes directly on lines 86-100.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ahh. I dunno maybe a lot of repetition. Maybe more comments will be added in the future too.
I don‘t mind my const too much? How do you feel about that?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I already applied this using a function to avoid repetition. I like it, but I can revert if you don’t.


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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
Loading