feat: upgrade to MDX v2 (#8288)

Co-authored-by: Armano <armano2@users.noreply.github.com>

packages/docusaurus-plugin-content-blog/src/options.ts

@@ -26,7 +26,7 @@ export const DEFAULT_OPTIONS: PluginOptions = {
   beforeDefaultRehypePlugins: [],
   beforeDefaultRemarkPlugins: [],
   admonitions: true,
-  truncateMarker: /<!--\s*truncate\s*-->/,
+  truncateMarker: /<!--\s*truncate\s*-->|\{\/\*\s*truncate\s*\*\/\}/,
   rehypePlugins: [],
   remarkPlugins: [],
   showReadingTime: true,

packages/docusaurus-plugin-content-blog/src/remark/__tests__/__snapshots__/footnoteIDFixer.test.ts.snap

@@ -1,65 +1,101 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`footnoteIDFixer remark plugin appends a hash to each footnote def/ref 1`] = `
-"/* @jsxRuntime classic */
-/* @jsx mdx */
-
-
-
-const layoutProps = {
-  
-};
-const MDXLayout = "wrapper"
-export default function MDXContent({
-  components,
-  ...props
-}) {
-  return <MDXLayout {...layoutProps} {...props} components={components} mdxType="MDXLayout">
-    <p>{\`foo\`}<sup parentName="p" {...{
-        "id": "fnref-1-[HASH]"
-      }}><a parentName="sup" {...{
-          "href": "#fn-1-[HASH]",
-          "className": "footnote-ref"
-        }}>{\`1\`}</a></sup></p>
-    <p>{\`bar\`}<sup parentName="p" {...{
-        "id": "fnref-2-[HASH]"
-      }}><a parentName="sup" {...{
-          "href": "#fn-2-[HASH]",
-          "className": "footnote-ref"
-        }}>{\`2\`}</a></sup></p>
-    <p>{\`baz\`}<sup parentName="p" {...{
-        "id": "fnref-3-[HASH]"
-      }}><a parentName="sup" {...{
-          "href": "#fn-3-[HASH]",
-          "className": "footnote-ref"
-        }}>{\`3\`}</a></sup></p>
-    <div {...{
-      "className": "footnotes"
-    }}>
-      <hr parentName="div"></hr>
-      <ol parentName="div">
-        <li parentName="ol" {...{
-          "id": "fn-1-[HASH]"
-        }}>{\`foo\`}<a parentName="li" {...{
-            "href": "#fnref-1-[HASH]",
-            "className": "footnote-backref"
-          }}>{\`↩\`}</a></li>
-        <li parentName="ol" {...{
-          "id": "fn-2-[HASH]"
-        }}>{\`foo\`}<a parentName="li" {...{
-            "href": "#fnref-2-[HASH]",
-            "className": "footnote-backref"
-          }}>{\`↩\`}</a></li>
-        <li parentName="ol" {...{
-          "id": "fn-3-[HASH]"
-        }}>{\`foo\`}<a parentName="li" {...{
-            "href": "#fnref-3-[HASH]",
-            "className": "footnote-backref"
-          }}>{\`↩\`}</a></li>
-      </ol>
-    </div>
-    </MDXLayout>;
+"/*@jsxRuntime automatic @jsxImportSource react*/
+import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime";
+function _createMdxContent(props) {
+  const _components = Object.assign({
+    p: "p",
+    sup: "sup",
+    a: "a",
+    section: "section",
+    h2: "h2",
+    ol: "ol",
+    li: "li"
+  }, props.components);
+  return _jsxs(_Fragment, {
+    children: [_jsxs(_components.p, {
+      children: ["foo", _jsx(_components.sup, {
+        children: _jsx(_components.a, {
+          href: "#user-content-fn-1-[HASH]",
+          id: "user-content-fnref-1-[HASH]",
+          "data-footnote-ref": true,
+          "aria-describedby": "footnote-label",
+          children: "1"
+        })
+      })]
+    }), "/n", _jsxs(_components.p, {
+      children: ["bar", _jsx(_components.sup, {
+        children: _jsx(_components.a, {
+          href: "#user-content-fn-2-[HASH]",
+          id: "user-content-fnref-2-[HASH]",
+          "data-footnote-ref": true,
+          "aria-describedby": "footnote-label",
+          children: "2"
+        })
+      })]
+    }), "/n", _jsxs(_components.p, {
+      children: ["baz", _jsx(_components.sup, {
+        children: _jsx(_components.a, {
+          href: "#user-content-fn-3-[HASH]",
+          id: "user-content-fnref-3-[HASH]",
+          "data-footnote-ref": true,
+          "aria-describedby": "footnote-label",
+          children: "3"
+        })
+      })]
+    }), "/n", _jsxs(_components.section, {
+      "data-footnotes": true,
+      className: "footnotes",
+      children: [_jsx(_components.h2, {
+        className: "sr-only",
+        id: "footnote-label",
+        children: "Footnotes"
+      }), "/n", _jsxs(_components.ol, {
+        children: ["/n", _jsxs(_components.li, {
+          id: "user-content-fn-1-[HASH]",
+          children: ["/n", _jsxs(_components.p, {
+            children: ["foo ", _jsx(_components.a, {
+              href: "#user-content-fnref-1-[HASH]",
+              "data-footnote-backref": true,
+              className: "data-footnote-backref",
+              "aria-label": "Back to content",
+              children: "↩"
+            })]
+          }), "/n"]
+        }), "/n", _jsxs(_components.li, {
+          id: "user-content-fn-2-[HASH]",
+          children: ["/n", _jsxs(_components.p, {
+            children: ["foo ", _jsx(_components.a, {
+              href: "#user-content-fnref-2-[HASH]",
+              "data-footnote-backref": true,
+              className: "data-footnote-backref",
+              "aria-label": "Back to content",
+              children: "↩"
+            })]
+          }), "/n"]
+        }), "/n", _jsxs(_components.li, {
+          id: "user-content-fn-3-[HASH]",
+          children: ["/n", _jsxs(_components.p, {
+            children: ["foo ", _jsx(_components.a, {
+              href: "#user-content-fnref-3-[HASH]",
+              "data-footnote-backref": true,
+              className: "data-footnote-backref",
+              "aria-label": "Back to content",
+              children: "↩"
+            })]
+          }), "/n"]
+        }), "/n"]
+      }), "/n"]
+    })]
+  });
 }
-;
-MDXContent.isMDXComponent = true;"
+function MDXContent(props = {}) {
+  const {wrapper: MDXLayout} = props.components || ({});
+  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
+    children: _jsx(_createMdxContent, props)
+  })) : _createMdxContent(props);
+}
+export default MDXContent;
+"
 `;

packages/docusaurus-plugin-content-blog/src/remark/__tests__/footnoteIDFixer.test.ts

@@ -5,20 +5,24 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import fs from 'fs-extra';
 import path from 'path';
+import vfile from 'to-vfile';
+
 import {simpleHash} from '@docusaurus/utils';
-import mdx from '@mdx-js/mdx';
 import footnoteIDFixer from '../footnoteIDFixer';
 
 const processFixture = async (name: string) => {
-  const filepath = path.join(__dirname, `__fixtures__/${name}.md`);
-  const result = await mdx(await fs.readFile(filepath, 'utf8'), {
-    filepath,
-    remarkPlugins: [footnoteIDFixer],
+  const mdx = await import('@mdx-js/mdx');
+  const {default: gfm} = await import('remark-gfm');
+
+  const filePath = path.join(__dirname, `__fixtures__/${name}.md`);
+  const file = await vfile.read(filePath);
+
+  const result = await mdx.compile(file, {
+    remarkPlugins: [gfm, footnoteIDFixer],
   });
 
-  return result.toString();
+  return result.value;
 };
 
 describe('footnoteIDFixer remark plugin', () => {

packages/docusaurus-plugin-content-blog/src/remark/footnoteIDFixer.ts

@@ -7,6 +7,7 @@
 
 import visit from 'unist-util-visit';
 import {simpleHash} from '@docusaurus/utils';
+// @ts-expect-error: TODO see https://github.com/microsoft/TypeScript/issues/49721
 import type {Transformer} from 'unified';
 import type {FootnoteReference, FootnoteDefinition} from 'mdast';