Remove runtime renderer, still support MDXProvider

packages/loader/index.js

@@ -1,10 +1,7 @@
 const {getOptions} = require('loader-utils')
 const mdx = require('@mdx-js/mdx')
 
-const DEFAULT_RENDERER = `
-import React from 'react'
-import {mdx} from '@mdx-js/react'
-`
+const DEFAULT_RENDERER = 'import React from "react"'
 
 module.exports = async function (content) {
   const callback = this.async()

packages/loader/test/index.test.js

@@ -5,9 +5,7 @@ const webpack = require('webpack')
 const MemoryFs = require('memory-fs')
 const React = require('react')
 const {renderToString} = require('react-dom/server')
-const _extends = require('@babel/runtime/helpers/extends')
-const _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties')
-const {mdx} = require('../../react')
+const {useMDXComponents} = require('../../react')
 
 const transform = (filePath, options) => {
   return new Promise((resolve, reject) => {
@@ -57,30 +55,18 @@ const transform = (filePath, options) => {
 }
 
 const run = value => {
-  // Webpack 5 (replace everything in this function with):
-  // const val = 'return ' + value.replace(/__webpack_require__\(0\)/, 'return $&')
-  //
-  // // eslint-disable-next-line no-new-func
-  // return new Function(val)().default
   // Replace import/exports w/ parameters and return value.
   const val = value
-    .replace(
-      /import _objectWithoutProperties from "@babel\/runtime\/helpers\/objectWithoutProperties";/,
-      ''
-    )
-    .replace(/import _extends from "@babel\/runtime\/helpers\/extends";/, '')
-    .replace(/import React from 'react';/, '')
-    .replace(/import \{ mdx } from '@mdx-js\/react';/, '')
+    .replace(/import "core-js\/.+";/g, '')
+    .replace(/import React from "react";/, '')
+    .replace(/import \{.+?\} from "@mdx-js\/react";/g, '')
     .replace(/export default/, 'return')
 
   // eslint-disable-next-line no-new-func
-  return new Function(
-    'mdx',
-    'React',
-    '_extends',
-    '_objectWithoutProperties',
-    val
-  )(mdx, React, _extends, _objectWithoutProperties)
+  return new Function('React', '__provideComponents', val)(
+    React,
+    useMDXComponents
+  )
 }
 
 describe('@mdx-js/loader', () => {

packages/mdx/.babelrc

@@ -7,6 +7,11 @@
         "useBuiltIns": "usage"
       }
     ],
-    "@babel/react"
+    [
+      "@babel/react",
+      {
+        "throwIfNamespace": false
+      }
+    ]
   ]
 }

packages/mdx/estree-to-js.js

@@ -1,4 +1,5 @@
 const astring = require('astring')
+const stringifyEntities = require('stringify-entities/light')
 
 module.exports = estreeToJs
 
@@ -20,7 +21,7 @@ const customGenerator = Object.assign({}, astring.baseGenerator, {
 })
 
 function estreeToJs(estree) {
-  return astring.generate(estree, {generator: customGenerator})
+  return astring.generate(estree, {generator: customGenerator, comments: true})
 }
 
 // `attr="something"`
@@ -30,7 +31,16 @@ function JSXAttribute(node, state) {
 
   if (node.value != null) {
     state.write('=')
-    this[node.value.type](node.value, state)
+
+    // Encode double quotes in attribute values.
+    if (node.value.type === 'Literal' && typeof node.value.value === 'string') {
+      state.write(
+        '"' + stringifyEntities(node.value.value, {subset: ['"']}) + '"',
+        node
+      )
+    } else {
+      this[node.value.type](node.value, state)
+    }
   }
 }
 

packages/mdx/index.js

@@ -6,10 +6,6 @@ const minifyWhitespace = require('rehype-minify-whitespace')
 const mdxAstToMdxHast = require('./mdx-ast-to-mdx-hast')
 const mdxHastToJsx = require('./mdx-hast-to-jsx')
 
-const pragma = `/* @jsxRuntime classic */
-/* @jsx mdx */
-/* @jsxFrag mdx.Fragment */`
-
 function createMdxAstCompiler(options = {}) {
   return unified()
     .use(remarkParse)
@@ -37,13 +33,13 @@ function createConfig(mdx, options) {
 }
 
 function sync(mdx, options = {}) {
-  const file = createCompiler(options).processSync(createConfig(mdx, options))
-  return pragma + '\n' + String(file)
+  return String(createCompiler(options).processSync(createConfig(mdx, options)))
 }
 
 async function compile(mdx, options = {}) {
-  const file = await createCompiler(options).process(createConfig(mdx, options))
-  return pragma + '\n' + String(file)
+  return String(
+    await createCompiler(options).process(createConfig(mdx, options))
+  )
 }
 
 module.exports = compile