temp mdx experiments

packages/docusaurus-mdx-loader/src/index.ts

@@ -5,9 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {mdxLoader} from './loader';
+import {mdxLoader, type Options} from './loader';
 
 import type {TOCItem as TOCItemImported} from './remark/toc/types';
+import type {RuleSetUseItem} from 'webpack';
+import {createProcessorsCacheEntry} from './processor';
+
+export async function prepareMDXLoaderCache(options: Options): Promise<void> {
+  // pre-fill the processor cache
+  await createProcessorsCacheEntry({options});
+}
 
 export default mdxLoader;
 

packages/docusaurus-mdx-loader/src/loader.ts

@@ -16,7 +16,7 @@ import {
 import stringifyObject from 'stringify-object';
 import preprocessor from './preprocessor';
 import {validateMDXFrontMatter} from './frontMatter';
-import {createProcessorCached} from './processor';
+import {createProcessorCached, getProcessorCached} from './processor';
 import type {ResolveMarkdownLink} from './remark/resolveMarkdownLinks';
 import type {MDXOptions} from './processor';
 
@@ -143,15 +143,22 @@ export async function mdxLoader(
   const callback = this.async();
   const filePath = this.resourcePath;
   const options: Options = this.getOptions();
+  const query = this.query as Options;
+
+  fileContent = `# Hello\nWorld`;
 
   ensureMarkdownConfig(options);
 
+  /*
   const {frontMatter} = await options.markdownConfig.parseFrontMatter({
     filePath,
     fileContent,
     defaultParseFrontMatter: DEFAULT_PARSE_FRONT_MATTER,
   });
-  const mdxFrontMatter = validateMDXFrontMatter(frontMatter.mdx);
+
+   */
+  const frontMatter = {};
+  const mdxFrontMatter = validateMDXFrontMatter(frontMatter);
 
   const preprocessedContent = preprocessor({
     fileContent,
@@ -162,20 +169,59 @@ export async function mdxLoader(
 
   const hasFrontMatter = Object.keys(frontMatter).length > 0;
 
-  const processor = await createProcessorCached({
-    filePath,
-    options,
-    mdxFrontMatter,
-  });
+  const processor =
+    getProcessorCached({filePath, options, mdxFrontMatter}) ??
+    (await createProcessorCached({
+      filePath,
+      options: query,
+      mdxFrontMatter,
+    }));
+
+  if (callback) {
+    callback(null, '');
+    return;
+  }
 
   let result: {content: string; data: {[key: string]: unknown}};
   try {
+    result = {
+      content: `
+import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime";
+function _createMdxContent(props) {
+  const _components = {
+    h1: "h1",
+    p: "p",
+    ...props.components
+  };
+  return _jsxs(_Fragment, {
+    children: [_jsx(_components.h1, {
+      children: "Hello"
+    }), "\\n", _jsx(_components.p, {
+      children: "World"
+    })]
+  });
+}
+export default function MDXContent(props = {}) {
+  const {wrapper: MDXLayout} = props.components || ({});
+  return MDXLayout ? _jsx(MDXLayout, {
+    ...props,
+    children: _jsx(_createMdxContent, {
+      ...props
+    })
+  }) : _createMdxContent(props);
+}
+      `,
+      data: {},
+    };
+    /*
     result = await processor.process({
       content: preprocessedContent,
       filePath,
       frontMatter,
       compilerName,
     });
+
+     */
   } catch (errorUnknown) {
     const error = errorUnknown as Error;
 
@@ -235,17 +281,19 @@ ${JSON.stringify(frontMatter, null, 2)}`;
   }
 
   const metadataJsonString = metadataPath
-    ? await readMetadataPath(metadataPath)
+    ? JSON.stringify({
+        authors: [],
+        tags: [],
+        date: new Date().toString(),
+        frontMatter: {image: '', keywords: []},
+      })
     : undefined;
 
   const metadata = metadataJsonString
     ? (JSON.parse(metadataJsonString) as {[key: string]: unknown})
     : undefined;
 
-  const assets =
-    options.createAssets && metadata
-      ? options.createAssets({frontMatter, metadata})
-      : undefined;
+  const assets = options.createAssets && metadata ? {image: ''} : undefined;
 
   const fileLoaderUtils = getFileLoaderUtils(compilerName === 'server');
 

packages/docusaurus-mdx-loader/src/processor.ts

@@ -75,6 +75,8 @@ function getAdmonitionsPlugins(
 
 // Need to be async due to ESM dynamic imports...
 async function createProcessorFactory() {
+  console.log('createProcessorFactory');
+
   const {createProcessor: createMdxProcessor} = await import('@mdx-js/mdx');
   const {default: frontmatter} = await import('remark-frontmatter');
   const {default: rehypeRaw} = await import('rehype-raw');
@@ -226,19 +228,21 @@ type ProcessorsCacheEntry = {
 
 // Compilers are cached so that Remark/Rehype plugins can run
 // expensive code during initialization
-const ProcessorsCache = new Map<string | Options, ProcessorsCacheEntry>();
+const ProcessorsCache = new Map<Options, ProcessorsCacheEntry>();
 
-async function createProcessorsCacheEntry({
+export async function createProcessorsCacheEntry({
   options,
 }: {
   options: Options;
 }): Promise<ProcessorsCacheEntry> {
-  const {createProcessorSync} = await createProcessorFactory();
-
   const compilers = ProcessorsCache.get(options);
   if (compilers) {
+    console.log('createProcessorsCacheEntry - cache hit');
     return compilers;
   }
+  console.log('createProcessorsCacheEntry - cache MISS!', ProcessorsCache.size);
+
+  const {createProcessorSync} = await createProcessorFactory();
 
   const compilerCacheEntry: ProcessorsCacheEntry = {
     mdProcessor: createProcessorSync({
@@ -265,6 +269,7 @@ export async function createProcessorCached({
   mdxFrontMatter: MDXFrontMatter;
   options: Options;
 }): Promise<SimpleProcessor> {
+  console.log('createProcessorCached (async)');
   const compilers = await createProcessorsCacheEntry({options});
 
   const format = getFormat({
@@ -275,3 +280,27 @@ export async function createProcessorCached({
 
   return format === 'md' ? compilers.mdProcessor : compilers.mdxProcessor;
 }
+
+export function getProcessorCached({
+  filePath,
+  mdxFrontMatter,
+  options,
+}: {
+  filePath: string;
+  mdxFrontMatter: MDXFrontMatter;
+  options: Options;
+}): SimpleProcessor | null {
+  const compilers = ProcessorsCache.get(options);
+
+  if (!compilers) {
+    return null;
+  }
+
+  const format = getFormat({
+    filePath,
+    frontMatterFormat: mdxFrontMatter.format,
+    markdownConfigFormat: options.markdownConfig.format,
+  });
+
+  return format === 'md' ? compilers.mdProcessor : compilers.mdxProcessor;
+}

packages/docusaurus/src/commands/build.ts

@@ -190,6 +190,10 @@ async function buildLocale({
     }
   });
 
+  if (router === 'browser') {
+    return outDir;
+  }
+
   const {collectedData} = await PerfLogger.async('SSG', () =>
     executeSSG({
       props,

packages/docusaurus/src/webpack/utils.ts

@@ -55,6 +55,10 @@ export function getStyleLoaders(
     ...cssOptionsArg,
   };
 
+  if (isServer || !isServer) {
+    return [{loader: require.resolve('null-loader')}];
+  }
+
   // On the server we don't really need to extract/emit CSS
   // We only need to transform CSS module imports to a styles object
   if (isServer) {
@@ -80,29 +84,6 @@ export function getStyleLoaders(
       loader: require.resolve('css-loader'),
       options: cssOptions,
     },
-
-    // TODO apart for configurePostCss(), do we really need this loader?
-    // Note: using postcss here looks inefficient/duplicate
-    // But in practice, it's not a big deal because css-loader also uses postcss
-    // and is able to reuse the parsed AST from postcss-loader
-    // See https://github.com/webpack-contrib/css-loader/blob/master/src/index.js#L159
-    {
-      // Options for PostCSS as we reference these options twice
-      // Adds vendor prefixing based on your specified browser support in
-      // package.json
-      loader: require.resolve('postcss-loader'),
-      options: {
-        postcssOptions: {
-          // Necessary for external CSS imports to work
-          // https://github.com/facebook/create-react-app/issues/2677
-          ident: 'postcss',
-          plugins: [
-            // eslint-disable-next-line global-require
-            require('autoprefixer'),
-          ],
-        },
-      },
-    },
   ];
 }
 

website/docusaurus.config.ts

@@ -234,12 +234,12 @@ export default async function createConfigAsync() {
       isVersioningDisabled ||
       process.env.DOCUSAURUS_CURRENT_LOCALE !== defaultLocale
         ? 'warn'
-        : 'throw',
+        : 'warn',
     onBrokenAnchors:
       isVersioningDisabled ||
       process.env.DOCUSAURUS_CURRENT_LOCALE !== defaultLocale
         ? 'warn'
-        : 'throw',
+        : 'warn',
     onBrokenMarkdownLinks: 'warn',
     favicon: 'img/docusaurus.ico',
     customFields: {
@@ -330,9 +330,9 @@ export default async function createConfigAsync() {
           ],
         } satisfies ClientRedirectsOptions,
       ],
+
       [
         'ideal-image',
-
         {
           quality: 70,
           max: 1030,
@@ -342,6 +342,7 @@ export default async function createConfigAsync() {
           disableInDev: true,
         } satisfies IdealImageOptions,
       ],
+
       [
         'pwa',
         {