Remove unneeded pragma comment after transform

mdx-js · Oct 24, 2023 · f48d038 · f48d038
1 parent 765310c
commit f48d038
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,14 +762,14 @@ 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) { /* … */ }
   export default function MDXContent(props = {}) { /* … */ }
   ```
 
   ```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
@@ -641,7 +641,6 @@ test('@mdx-js/mdx: syntax: MDX (JSX)', async function (t) {
 </table>`)
       ),
       [
-        '/*@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
@@ -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)