facebook · slorber · Apr 21, 2023 · Nov 3, 2022 · Nov 3, 2022 · Nov 3, 2022
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -372,7 +372,8 @@ module.exports = {
     // We don't provide any escape hatches for this rule. Rest siblings and
     // function placeholder params are always ignored, and any other unused
     // locals must be justified with a disable comment.
-    '@typescript-eslint/no-unused-vars': [ERROR, {ignoreRestSiblings: true}],
+    // TODO revert to error + add varsIgnorePattern _ prefix
+    '@typescript-eslint/no-unused-vars': [WARNING, {ignoreRestSiblings: true}],
     '@typescript-eslint/prefer-optional-chain': ERROR,
     '@docusaurus/no-untranslated-text': [
       WARNING,

@@ -17,7 +17,7 @@
   "dependencies": {
     "@docusaurus/core": "^3.0.0-alpha.0",
     "@docusaurus/preset-classic": "^3.0.0-alpha.0",
-    "@mdx-js/react": "^1.6.22",
+    "@mdx-js/react": "^2.1.5",
     "clsx": "^1.2.1",
     "prism-react-renderer": "^1.3.5",
     "react": "^17.0.2",

@@ -16,7 +16,7 @@
   "dependencies": {
     "@docusaurus/core": "^3.0.0-alpha.0",
     "@docusaurus/preset-classic": "^3.0.0-alpha.0",
-    "@mdx-js/react": "^1.6.22",
+    "@mdx-js/react": "^2.1.5",
     "clsx": "^1.2.1",
     "prism-react-renderer": "^1.3.5",
     "react": "^17.0.2",

@@ -20,7 +20,7 @@
   "dependencies": {
     "@docusaurus/core": "^3.0.0-alpha.0",
     "@docusaurus/preset-classic": "^3.0.0-alpha.0",
-    "@mdx-js/react": "^1.6.22",
+    "@mdx-js/react": "^2.1.5",
     "clsx": "^1.2.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"

@@ -22,12 +22,14 @@
     "@babel/traverse": "^7.19.0",
     "@docusaurus/logger": "^3.0.0-alpha.0",
     "@docusaurus/utils": "^3.0.0-alpha.0",
-    "@mdx-js/mdx": "^1.6.22",
+    "@mdx-js/mdx": "^2.1.5",
     "escape-html": "^1.0.3",
+    "estree-util-value-to-estree": "^2.1.0",
     "file-loader": "^6.2.0",
     "fs-extra": "^10.1.0",
     "image-size": "^1.0.2",
-    "mdast-util-to-string": "^2.0.0",
+    "mdast-util-to-string": "^3.0.0",
+    "remark-gfm": "^3.0.1",
     "remark-emoji": "^2.2.0",
     "stringify-object": "^3.3.0",
     "tslib": "^2.4.0",
@@ -44,12 +46,12 @@
     "@types/stringify-object": "^3.3.1",
     "@types/unist": "^2.0.6",
     "rehype-stringify": "^8.0.0",
-    "remark": "^12.0.1",
-    "remark-mdx": "^1.6.21",
+    "remark": "^14.0.2",
+    "remark-mdx": "^2.1.5",
     "remark-rehype": "^8.1.0",
     "to-vfile": "^6.1.0",
     "unist-builder": "^2.0.3",
-    "unist-util-remove-position": "^3.0.0"
+    "unist-util-remove-position": "^2.0.0"
   },
   "peerDependencies": {
     "react": "^16.8.4 || ^17.0.0",

@@ -7,13 +7,11 @@
 
 import {mdxLoader} from './loader';
 
+import type {TOCItem as TOCItemImported} from './remark/toc';
+
 export default mdxLoader;
 
-export type TOCItem = {
-  readonly value: string;
-  readonly id: string;
-  readonly level: number;
-};
+export type TOCItem = TOCItemImported;
 
 export type LoadedMDXContent<FrontMatter, Metadata, Assets = undefined> = {
   /** As verbatim declared in the MDX document. */

@@ -12,24 +12,29 @@ import {
   parseMarkdownContentTitle,
   escapePath,
   getFileLoaderUtils,
+  escapeMarkdownHeadingIds,
+  unwrapMdxCodeBlocks,
 } from '@docusaurus/utils';
-import {createCompiler} from '@mdx-js/mdx';
 import emoji from 'remark-emoji';
+
 import stringifyObject from 'stringify-object';
 
 import headings from './remark/headings';
 import toc from './remark/toc';
-import unwrapMdxCodeBlocks from './remark/unwrapMdxCodeBlocks';
 import transformImage from './remark/transformImage';
 import transformLinks from './remark/transformLinks';
 import mermaid from './remark/mermaid';
 
-import transformAdmonitions from './remark/admonitions';
+// import transformAdmonitions from './remark/admonitions';
 import type {MarkdownConfig} from '@docusaurus/types';
 import type {LoaderContext} from 'webpack';
-import type {Processor, Plugin} from 'unified';
+
+import type {Processor, PluggableList} from 'unified';
 import type {AdmonitionOptions} from './remark/admonitions';
 
+// @ts-expect-error: TODO
+import type {ProcessorOptions} from '@mdx-js/mdx';
+
 const {
   loaders: {inlineMarkdownImageFileLoader},
 } = getFileLoaderUtils();
@@ -43,16 +48,15 @@ const pragma = `
 const DEFAULT_OPTIONS: MDXOptions = {
   admonitions: true,
   rehypePlugins: [],
-  remarkPlugins: [unwrapMdxCodeBlocks, emoji, headings, toc],
+  // @ts-expect-error: TODO
+  remarkPlugins: [emoji, headings, toc],
   beforeDefaultRemarkPlugins: [],
   beforeDefaultRehypePlugins: [],
 };
 
 const compilerCache = new Map<string | Options, [Processor, Options]>();
 
-export type MDXPlugin =
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  [Plugin<any[]>, any] | Plugin<any[]>;
+export type MDXPlugin = PluggableList;
 
 export type MDXOptions = {
   admonitions: boolean | Partial<AdmonitionOptions>;
@@ -143,12 +147,15 @@ function getAdmonitionsPlugins(
   admonitionsOption: MDXOptions['admonitions'],
 ): MDXPlugin[] {
   if (admonitionsOption) {
+    /*
     const plugin: MDXPlugin =
       admonitionsOption === true
         ? transformAdmonitions
         : [transformAdmonitions, admonitionsOption];
-    return [plugin];
+    // return [plugin]; TODO
+     */
   }
+
   return [];
 }
 
@@ -160,16 +167,35 @@ export async function mdxLoader(
   const filePath = this.resourcePath;
   const reqOptions = this.getOptions();
 
+  const {createProcessor, compile} = await import('@mdx-js/mdx');
+  const gfm = await import('remark-gfm');
+
   const {frontMatter, content: contentWithTitle} = parseFrontMatter(fileString);
 
-  const {content, contentTitle} = parseMarkdownContentTitle(contentWithTitle, {
-    removeContentTitle: reqOptions.removeContentTitle,
-  });
+  const {content: contentUnprocessed, contentTitle} = parseMarkdownContentTitle(
+    contentWithTitle,
+    {
+      removeContentTitle: reqOptions.removeContentTitle,
+    },
+  );
+
+  const content = escapeMarkdownHeadingIds(
+    unwrapMdxCodeBlocks(contentUnprocessed),
+  )
+    // TODO MDX 2 doesn't like unescaped <
+    .replace('\n<!--truncate-->', '');
+
+  /*
+  if (filePath.endsWith('website/blog/releases/2.2/index.mdx')) {
+    console.log(content);
+  }
+   */
 
   const hasFrontMatter = Object.keys(frontMatter).length > 0;
 
   if (!compilerCache.has(this.query)) {
-    const remarkPlugins: MDXPlugin[] = [
+    // @ts-expect-error: TODO
+    const remarkPlugins: ProcessorOptions['remarkPlugins'] = [
       ...(reqOptions.beforeDefaultRemarkPlugins ?? []),
       ...getAdmonitionsPlugins(reqOptions.admonitions ?? false),
       ...DEFAULT_OPTIONS.remarkPlugins,
@@ -188,21 +214,27 @@ export async function mdxLoader(
           siteDir: reqOptions.siteDir,
         },
       ],
+      gfm,
       ...(reqOptions.remarkPlugins ?? []),
     ];
 
-    const rehypePlugins: MDXPlugin[] = [
+    // @ts-expect-error: TODO
+    const rehypePlugins: ProcessorOptions['rehypePlugins'] = [
       ...(reqOptions.beforeDefaultRehypePlugins ?? []),
       ...DEFAULT_OPTIONS.rehypePlugins,
       ...(reqOptions.rehypePlugins ?? []),
     ];
 
-    const options: Options = {
+    const options: ProcessorOptions = {
       ...reqOptions,
       remarkPlugins,
       rehypePlugins,
+      format: 'mdx',
+      providerImportSource: '@mdx-js/react',
     };
-    compilerCache.set(this.query, [createCompiler(options), options]);
+
+    // @ts-expect-error: TODO
+    compilerCache.set(this.query, [createProcessor(options), options]);
   }
 
   const [compiler, options] = compilerCache.get(this.query)!;
@@ -211,12 +243,21 @@ export async function mdxLoader(
   try {
     result = await compiler
       .process({
-        contents: content,
-        path: this.resourcePath,
+        value: content,
+        path: filePath,
       })
       .then((res) => res.toString());
   } catch (err) {
-    return callback(err as Error);
+    return callback(
+      new Error(
+        `MDX compilation failed for file ${filePath}\n${
+          (err as Error).message
+        }`,
+        {
+          cause: err as Error,
+        },
+      ),
+    );
   }
 
   // MDX partials are MDX files starting with _ or in a folder starting with _

@@ -162,7 +162,7 @@ const plugin: Plugin = function plugin(
   }
 
   // add tokenizer to parser after fenced code blocks
-  const Parser = this.Parser.prototype;
+  const Parser = this.Parser!.prototype;
   Parser.blockTokenizers.admonition = blockTokenizer;
   Parser.blockMethods.splice(
     Parser.blockMethods.indexOf('fencedCode') + 1,

@@ -9,12 +9,13 @@
 
 import {parseMarkdownHeadingId, createSlugger} from '@docusaurus/utils';
 import visit from 'unist-util-visit';
-import mdastToString from 'mdast-util-to-string';
 import type {Transformer} from 'unified';
 import type {Heading, Text} from 'mdast';
 
 export default function plugin(): Transformer {
-  return (root) => {
+  return async (root) => {
+    const {toString} = await import('mdast-util-to-string');
+
     const slugs = createSlugger();
     visit(root, 'heading', (headingNode: Heading) => {
       const data = headingNode.data ?? (headingNode.data = {});
@@ -29,7 +30,7 @@ export default function plugin(): Transformer {
         const headingTextNodes = headingNode.children.filter(
           ({type}) => !['html', 'jsx'].includes(type),
         );
-        const heading = mdastToString(
+        const heading = toString(
           headingTextNodes.length > 0 ? headingTextNodes : headingNode,
         );
 

@@ -6,13 +6,13 @@
  */
 
 import path from 'path';
-import remark from 'remark';
-import mdx from 'remark-mdx';
 import vfile from 'to-vfile';
 import plugin from '../index';
 import headings from '../../headings/index';
 
 const processFixture = async (name: string) => {
+  const remark = (await import('remark')).default;
+  const mdx = (await import('remark-mdx')).default;
   const filePath = path.join(__dirname, '__fixtures__', `${name}.md`);
   const file = await vfile.read(filePath);
   const result = await remark()