fix: externalise the jsx runtime (#59)

kentcdodds · Jun 28, 2021 · c4bd871 · c4bd871
1 parent 9de63f2
commit c4bd871
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 41 deletions.
diff --git a/package.json b/package.json
@@ -40,20 +40,20 @@
     "validate": "kcd-scripts validate"
   },
   "dependencies": {
-    "@babel/runtime": "^7.14.0",
+    "@babel/runtime": "^7.14.6",
     "@esbuild-plugins/node-resolve": "^0.1.4",
     "@fal-works/esbuild-plugin-global-externals": "^2.1.1",
-    "esbuild": "^0.12.8",
+    "esbuild": "^0.12.11",
     "gray-matter": "^4.0.3",
     "remark-frontmatter": "^3.0.0",
     "remark-mdx-frontmatter": "^1.0.1",
-    "xdm": "^1.11.0"
+    "xdm": "^1.11.1"
   },
   "devDependencies": {
-    "@testing-library/react": "^11.2.7",
-    "@types/jsdom": "^16.2.11",
-    "@types/react": "^17.0.5",
-    "@types/react-dom": "^17.0.7",
+    "@testing-library/react": "^12.0.0",
+    "@types/jsdom": "^16.2.12",
+    "@types/react": "^17.0.11",
+    "@types/react-dom": "^17.0.8",
     "cross-env": "^7.0.3",
     "jsdom": "^16.6.0",
     "kcd-scripts": "^11.1.0",
@@ -62,7 +62,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "remark-mdx-images": "^1.0.2",
-    "typescript": "^4.3.2",
+    "typescript": "^4.3.4",
     "uvu": "^0.5.1"
   },
   "eslintConfig": {

diff --git a/src/__tests__/index.js b/src/__tests__/index.js
@@ -143,9 +143,11 @@ import Demo from './demo'
 <Demo />
   `.trim()
 
-  const error = /** @type Error */ (await bundleMDX(mdxSource, {
-    files: {},
-  }).catch(e => e))
+  const error = /** @type Error */ (
+    await bundleMDX(mdxSource, {
+      files: {},
+    }).catch(e => e)
+  )
 
   assert.equal(
     error.message,
@@ -161,11 +163,13 @@ import Demo from './demo'
 <Demo />
   `.trim()
 
-  const error = /** @type Error */ (await bundleMDX(mdxSource, {
-    files: {
-      './demo.tsx': `import './blah-blah'`,
-    },
-  }).catch(e => e))
+  const error = /** @type Error */ (
+    await bundleMDX(mdxSource, {
+      files: {
+        './demo.tsx': `import './blah-blah'`,
+      },
+    }).catch(e => e)
+  )
 
   assert.equal(
     error.message,
@@ -181,16 +185,18 @@ import Demo from './demo.blah'
 <Demo />
   `.trim()
 
-  const error = /** @type Error */ (await bundleMDX(mdxSource, {
-    files: {
-      './demo.blah': `what even is this?`,
-    },
-  }).catch(e => e))
+  const error = /** @type Error */ (
+    await bundleMDX(mdxSource, {
+      files: {
+        './demo.blah': `what even is this?`,
+      },
+    }).catch(e => e)
+  )
 
   assert.equal(
     error.message,
     `Build failed with 1 error:
-__mdx_bundler_fake_dir__/_mdx_bundler_entry_point.mdx:3:17: error: [plugin: JavaScript plugins] Invalid loader: "blah" (valid: js, jsx, ts, tsx, css, json, text, base64, dataurl, file, binary)`,
+__mdx_bundler_fake_dir__/_mdx_bundler_entry_point.mdx:3:17: error: [plugin: inMemory] Invalid loader: "blah" (valid: js, jsx, ts, tsx, css, json, text, base64, dataurl, file, binary)`,
   )
 })
 
@@ -366,24 +372,26 @@ test('should output assets', async () => {
 
   assert.match(container.innerHTML, 'src="/img/150')
 
-  const error = /** @type Error */ (await bundleMDX(mdxSource, {
-    cwd: process.cwd(),
-    xdmOptions: options => {
-      options.remarkPlugins = [remarkMdxImages]
-
-      return options
-    },
-    esbuildOptions: options => {
-      options.loader = {
-        ...options.loader,
-        // esbuild will throw its own error if we try to use `file` loader without `outdir`
-        '.png': 'dataurl',
-      }
-      options.write = true
-
-      return options
-    },
-  }).catch(e => e))
+  const error = /** @type Error */ (
+    await bundleMDX(mdxSource, {
+      cwd: process.cwd(),
+      xdmOptions: options => {
+        options.remarkPlugins = [remarkMdxImages]
+
+        return options
+      },
+      esbuildOptions: options => {
+        options.loader = {
+          ...options.loader,
+          // esbuild will throw its own error if we try to use `file` loader without `outdir`
+          '.png': 'dataurl',
+        }
+        options.write = true
+
+        return options
+      },
+    }).catch(e => e)
+  )
 
   assert.equal(
     error.message,

diff --git a/src/client.js b/src/client.js
@@ -1,4 +1,5 @@
 import * as React from 'react'
+import * as _jsx_runtime from 'react/jsx-runtime.js'
 
 /**
  * @typedef {{[name: string]: React.ComponentType | string | ComponentMap}} ComponentMap
@@ -15,7 +16,7 @@ import * as React from 'react'
  * @return {React.FunctionComponent<MDXContentProps>}
  */
 function getMDXComponent(code, globals) {
-  const scope = {React, ...globals}
+  const scope = {React, _jsx_runtime, ...globals}
   // eslint-disable-next-line
   const fn = new Function(...Object.keys(scope), code)
   return fn(...Object.values(scope))

diff --git a/src/index.js b/src/index.js
@@ -137,6 +137,10 @@ async function bundleMDX(
           varName: 'ReactDOM',
           type: 'cjs',
         },
+        'react/jsx-runtime': {
+          varName: '_jsx_runtime',
+          type: 'cjs',
+        },
       }),
       // eslint-disable-next-line @babel/new-cap
       NodeResolvePlugin({extensions: ['.js', '.ts', '.jsx', '.tsx']}),