Support jsx dev runtime

packages/mdx/lib/core.js

@@ -125,7 +125,7 @@ export function createProcessor(options = {}) {
     .use(recmaJsxRewrite, {development, providerImportSource, outputFormat})
 
   if (!jsx) {
-    pipeline.use(recmaJsxBuild, {outputFormat})
+    pipeline.use(recmaJsxBuild, {development, outputFormat})
   }
 
   pipeline.use(recmaStringify, {SourceMapGenerator}).use(recmaPlugins || [])

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

@@ -1,5 +1,6 @@
 /**
  * @typedef {import('estree-jsx').Program} Program
+ * @typedef {import('estree-util-build-jsx').BuildJsxOptions} BuildJsxOptions
  *
  * @typedef RecmaJsxBuildOptions
  * @property {'program'|'function-body'} [outputFormat='program']
@@ -15,13 +16,13 @@ import {toIdOrMemberExpression} from '../util/estree-util-to-id-or-member-expres
  * A plugin to build JSX into function calls.
  * `estree-util-build-jsx` does all the work for us!
  *
- * @type {import('unified').Plugin<[RecmaJsxBuildOptions]|[], Program>}
+ * @type {import('unified').Plugin<[BuildJsxOptions & RecmaJsxBuildOptions?], Program>}
  */
 export function recmaJsxBuild(options = {}) {
-  const {outputFormat} = options
+  const {development, outputFormat} = options
 
-  return (tree) => {
-    buildJsx(tree)
+  return (tree, file) => {
+    buildJsx(tree, {development, filePath: file.history[0]})
 
     // When compiling to a function body, replace the import that was just
     // generated, and get `jsx`, `jsxs`, and `Fragment` from `arguments[0]`

packages/mdx/test/compile.js

@@ -548,6 +548,56 @@ test('compile', async () => {
   )
   console.log('\nnote: the preceding warning is expected!\n')
 
+  const developmentSourceNode = (
+    await run(
+      compileSync(
+        {value: '<div />', path: 'path/to/file.js'},
+        {development: true}
+      ).value
+    )
+  )({})
+  assert.equal(
+    // @ts-expect-error React attaches source information on this property,
+    // but it’s private and untyped.
+    developmentSourceNode._source,
+    {fileName: 'path/to/file.js', lineNumber: 1, columnNumber: 1},
+    'should expose source information in the automatic jsx dev runtime'
+  )
+
+  assert.equal(
+    compileSync({value: '<X />', path: 'path/to/file.js'}, {development: true})
+      .value,
+    [
+      '/*@jsxRuntime automatic @jsxImportSource react*/',
+      'import {jsxDEV as _jsxDEV} from "react/jsx-dev-runtime";',
+      'function MDXContent(props = {}) {',
+      '  const {wrapper: MDXLayout} = props.components || ({});',
+      '  return MDXLayout ? _jsxDEV(MDXLayout, Object.assign({}, props, {',
+      '    children: _jsxDEV(_createMdxContent, {}, undefined, false, {',
+      '      fileName: "path/to/file.js"',
+      '    }, this)',
+      '  }), undefined, false, {',
+      '    fileName: "path/to/file.js"',
+      '  }, this) : _createMdxContent();',
+      '  function _createMdxContent() {',
+      '    const {X} = props.components || ({});',
+      '    if (!X) _missingMdxReference("X", true, "1:1-1:6");',
+      '    return _jsxDEV(X, {}, undefined, false, {',
+      '      fileName: "path/to/file.js",',
+      '      lineNumber: 1,',
+      '      columnNumber: 1',
+      '    }, this);',
+      '  }',
+      '}',
+      'export default MDXContent;',
+      'function _missingMdxReference(id, component, place) {',
+      '  throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it." + (place ? "\\nIt’s referenced in your code at `" + place + "` in `path/to/file.js`" : ""));',
+      '}',
+      ''
+    ].join('\n'),
+    'should support the jsx dev runtime'
+  )
+
   try {
     renderToStaticMarkup(
       React.createElement(await run(compileSync('<X />', {development: true})))