From a54c41e49a5abec0c936a7f5da71d08c17c94505 Mon Sep 17 00:00:00 2001 From: sebastien Date: Mon, 26 Aug 2024 18:36:59 +0200 Subject: [PATCH] temp mdx experiments --- packages/docusaurus-mdx-loader/src/index.ts | 9 ++- packages/docusaurus-mdx-loader/src/loader.ts | 72 +++++++++++++++---- .../docusaurus-mdx-loader/src/processor.ts | 37 ++++++++-- packages/docusaurus/src/commands/build.ts | 4 ++ packages/docusaurus/src/webpack/utils.ts | 27 ++----- website/docusaurus.config.ts | 7 +- 6 files changed, 113 insertions(+), 43 deletions(-) diff --git a/packages/docusaurus-mdx-loader/src/index.ts b/packages/docusaurus-mdx-loader/src/index.ts index 41fbf60da4..293ffa20e1 100644 --- a/packages/docusaurus-mdx-loader/src/index.ts +++ b/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 { + // pre-fill the processor cache + await createProcessorsCacheEntry({options}); +} export default mdxLoader; diff --git a/packages/docusaurus-mdx-loader/src/loader.ts b/packages/docusaurus-mdx-loader/src/loader.ts index f84c8ef1ee..082067956c 100644 --- a/packages/docusaurus-mdx-loader/src/loader.ts +++ b/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'); diff --git a/packages/docusaurus-mdx-loader/src/processor.ts b/packages/docusaurus-mdx-loader/src/processor.ts index 1a89d2f6ee..8def6f3277 100644 --- a/packages/docusaurus-mdx-loader/src/processor.ts +++ b/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(); +const ProcessorsCache = new Map(); -async function createProcessorsCacheEntry({ +export async function createProcessorsCacheEntry({ options, }: { options: Options; }): Promise { - 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 { + 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; +} diff --git a/packages/docusaurus/src/commands/build.ts b/packages/docusaurus/src/commands/build.ts index 17952898f6..52ecc5e181 100644 --- a/packages/docusaurus/src/commands/build.ts +++ b/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, diff --git a/packages/docusaurus/src/webpack/utils.ts b/packages/docusaurus/src/webpack/utils.ts index a77984832b..1eb2fba9e0 100644 --- a/packages/docusaurus/src/webpack/utils.ts +++ b/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'), - ], - }, - }, - }, ]; } diff --git a/website/docusaurus.config.ts b/website/docusaurus.config.ts index 6d2a40ea60..d83e6e2a5a 100644 --- a/website/docusaurus.config.ts +++ b/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', {