From 7e44805e8bec213b00f17f48131b9286750687cf Mon Sep 17 00:00:00 2001 From: Lenz Weber Date: Thu, 17 Jun 2021 23:36:52 +0200 Subject: [PATCH 1/6] (mdx-loader) only create mdx compiler once per webpack config --- packages/docusaurus-mdx-loader/src/index.js | 64 +++++++++++++-------- 1 file changed, 40 insertions(+), 24 deletions(-) diff --git a/packages/docusaurus-mdx-loader/src/index.js b/packages/docusaurus-mdx-loader/src/index.js index 3f93c0f8c99d..1a44b7a57315 100644 --- a/packages/docusaurus-mdx-loader/src/index.js +++ b/packages/docusaurus-mdx-loader/src/index.js @@ -7,7 +7,7 @@ const {getOptions} = require('loader-utils'); const {readFile} = require('fs-extra'); -const mdx = require('@mdx-js/mdx'); +const {createCompiler} = require('@mdx-js/mdx'); const emoji = require('remark-emoji'); const matter = require('gray-matter'); const stringifyObject = require('stringify-object'); @@ -16,43 +16,58 @@ const rightToc = require('./remark/rightToc'); const transformImage = require('./remark/transformImage'); const tranformAsset = require('./remark/transformAssets'); +const pragma = ` +/* @jsxRuntime classic */ +/* @jsx mdx */ +/* @jsxFrag mdx.Fragment */ +`; + const DEFAULT_OPTIONS = { rehypePlugins: [], remarkPlugins: [emoji, slug, rightToc], }; +const compilerCache = new Map(); + module.exports = async function (fileString) { const callback = this.async(); const {data, content} = matter(fileString); - const reqOptions = getOptions(this) || {}; - const options = { - ...reqOptions, - remarkPlugins: [ - ...(reqOptions.beforeDefaultRemarkPlugins || []), - ...DEFAULT_OPTIONS.remarkPlugins, - [ - transformImage, - {staticDir: reqOptions.staticDir, filePath: this.resourcePath}, - ], - [ - tranformAsset, - {staticDir: reqOptions.staticDir, filePath: this.resourcePath}, + if (!compilerCache.has(this.query)) { + const reqOptions = getOptions(this) || {}; + const options = { + ...reqOptions, + remarkPlugins: [ + ...(reqOptions.beforeDefaultRemarkPlugins || []), + ...DEFAULT_OPTIONS.remarkPlugins, + [ + transformImage, + {staticDir: reqOptions.staticDir, filePath: this.resourcePath}, + ], + [ + tranformAsset, + {staticDir: reqOptions.staticDir, filePath: this.resourcePath}, + ], + ...(reqOptions.remarkPlugins || []), ], - ...(reqOptions.remarkPlugins || []), - ], - rehypePlugins: [ - ...(reqOptions.beforeDefaultRehypePlugins || []), - ...DEFAULT_OPTIONS.rehypePlugins, + rehypePlugins: [ + ...(reqOptions.beforeDefaultRehypePlugins || []), + ...DEFAULT_OPTIONS.rehypePlugins, - ...(reqOptions.rehypePlugins || []), - ], - filepath: this.resourcePath, - }; + ...(reqOptions.rehypePlugins || []), + ], + filepath: this.resourcePath, + }; + compilerCache.set(this.query, [createCompiler(options), options]); + } + const [compiler, options] = compilerCache.get(this.query); let result; try { - result = await mdx(content, options); + result = await compiler.process({ + contents: content, + path: this.resourcePath, + }); } catch (err) { return callback(err); } @@ -84,6 +99,7 @@ module.exports = async function (fileString) { } } const code = ` + ${pragma} import React from 'react'; import { mdx } from '@mdx-js/react'; From f6b95a7bff2fc70579fcf515b851cfa050dbf68c Mon Sep 17 00:00:00 2001 From: Josh-Cena Date: Sun, 7 Nov 2021 22:23:58 +0800 Subject: [PATCH 2/6] type fixes --- packages/docusaurus-mdx-loader/src/index.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/docusaurus-mdx-loader/src/index.ts b/packages/docusaurus-mdx-loader/src/index.ts index 890a3d4ec866..fdbe322b8694 100644 --- a/packages/docusaurus-mdx-loader/src/index.ts +++ b/packages/docusaurus-mdx-loader/src/index.ts @@ -6,7 +6,7 @@ */ import {readFile} from 'fs-extra'; -import {createCompiler} from '@mdx-js/mdx'; +import {createCompiler, Options as MDXOptions} from '@mdx-js/mdx'; import chalk from 'chalk'; import emoji from 'remark-emoji'; import { @@ -128,7 +128,7 @@ export default async function mdxLoader( const hasFrontMatter = Object.keys(frontMatter).length > 0; if (!compilerCache.has(this.query)) { - const options = { + const options: Options = { ...reqOptions, remarkPlugins: [ ...(reqOptions.beforeDefaultRemarkPlugins || []), @@ -152,8 +152,8 @@ export default async function mdxLoader( filepath: this.resourcePath, }; compilerCache.set(this.query, [ - createCompiler(options as any), - options as any, + createCompiler(options as MDXOptions), + options, ]); } From d9d99fbd58605597d594f6627052c087d32570e8 Mon Sep 17 00:00:00 2001 From: Joshua Chen Date: Thu, 20 Jan 2022 15:29:55 +0800 Subject: [PATCH 3/6] fix path --- packages/docusaurus-mdx-loader/src/index.ts | 3 --- .../src/remark/transformImage/index.ts | 17 ++++++++++------- .../src/remark/transformLinks/index.ts | 17 ++++++++++------- 3 files changed, 20 insertions(+), 17 deletions(-) diff --git a/packages/docusaurus-mdx-loader/src/index.ts b/packages/docusaurus-mdx-loader/src/index.ts index add88b56efc9..349b3130da27 100644 --- a/packages/docusaurus-mdx-loader/src/index.ts +++ b/packages/docusaurus-mdx-loader/src/index.ts @@ -138,7 +138,6 @@ export default async function mdxLoader( transformImage, { staticDirs: reqOptions.staticDirs, - filePath, siteDir: reqOptions.siteDir, }, ], @@ -146,7 +145,6 @@ export default async function mdxLoader( transformLinks, { staticDirs: reqOptions.staticDirs, - filePath, siteDir: reqOptions.siteDir, }, ], @@ -157,7 +155,6 @@ export default async function mdxLoader( ...DEFAULT_OPTIONS.rehypePlugins, ...(reqOptions.rehypePlugins || []), ], - filepath: filePath, }; compilerCache.set(this.query, [ createCompiler(options as MDXOptions), diff --git a/packages/docusaurus-mdx-loader/src/remark/transformImage/index.ts b/packages/docusaurus-mdx-loader/src/remark/transformImage/index.ts index efffbeb76f8a..f321cfa4c73f 100644 --- a/packages/docusaurus-mdx-loader/src/remark/transformImage/index.ts +++ b/packages/docusaurus-mdx-loader/src/remark/transformImage/index.ts @@ -27,11 +27,14 @@ const { loaders: {inlineMarkdownImageFileLoader}, } = getFileLoaderUtils(); -interface PluginOptions { - filePath: string; +type PluginOptions = { staticDirs: string[]; siteDir: string; -} +}; + +type Context = PluginOptions & { + filePath: string; +}; async function toImageRequireNode( node: Image, @@ -89,7 +92,7 @@ async function ensureImageFileExist(imagePath: string, sourceFilePath: string) { async function getImageAbsolutePath( imagePath: string, - {siteDir, filePath, staticDirs}: PluginOptions, + {siteDir, filePath, staticDirs}: Context, ) { if (imagePath.startsWith('@site/')) { const imageFilePath = path.join(siteDir, imagePath.replace('@site/', '')); @@ -123,7 +126,7 @@ async function getImageAbsolutePath( } } -async function processImageNode(node: Image, options: PluginOptions) { +async function processImageNode(node: Image, options: Context) { if (!node.url) { throw new Error( `Markdown image URL is mandatory in "${toMessageRelativeFilePath( @@ -149,10 +152,10 @@ async function processImageNode(node: Image, options: PluginOptions) { } const plugin: Plugin<[PluginOptions]> = (options) => { - const transformer: Transformer = async (root) => { + const transformer: Transformer = async (root, file) => { const promises: Promise[] = []; visit(root, 'image', (node: Image) => { - promises.push(processImageNode(node, options)); + promises.push(processImageNode(node, {...options, filePath: file.path!})); }); await Promise.all(promises); }; diff --git a/packages/docusaurus-mdx-loader/src/remark/transformLinks/index.ts b/packages/docusaurus-mdx-loader/src/remark/transformLinks/index.ts index 8d4a9dc386ef..5767536760c9 100644 --- a/packages/docusaurus-mdx-loader/src/remark/transformLinks/index.ts +++ b/packages/docusaurus-mdx-loader/src/remark/transformLinks/index.ts @@ -25,11 +25,14 @@ const { loaders: {inlineMarkdownLinkFileLoader}, } = getFileLoaderUtils(); -interface PluginOptions { - filePath: string; +type PluginOptions = { staticDirs: string[]; siteDir: string; -} +}; + +type Context = PluginOptions & { + filePath: string; +}; // transform the link node to a jsx link with a require() call function toAssetRequireNode(node: Link, assetPath: string, filePath: string) { @@ -71,7 +74,7 @@ async function ensureAssetFileExist(assetPath: string, sourceFilePath: string) { async function getAssetAbsolutePath( assetPath: string, - {siteDir, filePath, staticDirs}: PluginOptions, + {siteDir, filePath, staticDirs}: Context, ) { if (assetPath.startsWith('@site/')) { const assetFilePath = path.join(siteDir, assetPath.replace('@site/', '')); @@ -96,7 +99,7 @@ async function getAssetAbsolutePath( return null; } -async function processLinkNode(node: Link, options: PluginOptions) { +async function processLinkNode(node: Link, options: Context) { if (!node.url) { // try to improve error feedback // see https://github.com/facebook/docusaurus/issues/3309#issuecomment-690371675 @@ -129,10 +132,10 @@ async function processLinkNode(node: Link, options: PluginOptions) { } const plugin: Plugin<[PluginOptions]> = (options) => { - const transformer: Transformer = async (root) => { + const transformer: Transformer = async (root, file) => { const promises: Promise[] = []; visit(root, 'link', (node: Link) => { - promises.push(processLinkNode(node, options)); + promises.push(processLinkNode(node, {...options, filePath: file.path!})); }); await Promise.all(promises); }; From 51d17c5701ef42be983a02bfeb3b43db058268a3 Mon Sep 17 00:00:00 2001 From: Joshua Chen Date: Thu, 20 Jan 2022 16:55:40 +0800 Subject: [PATCH 4/6] remove assertion --- packages/docusaurus-mdx-loader/src/index.ts | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/docusaurus-mdx-loader/src/index.ts b/packages/docusaurus-mdx-loader/src/index.ts index 349b3130da27..072c94d374e1 100644 --- a/packages/docusaurus-mdx-loader/src/index.ts +++ b/packages/docusaurus-mdx-loader/src/index.ts @@ -6,7 +6,7 @@ */ import {readFile} from 'fs-extra'; -import {createCompiler, type Options as MDXOptions} from '@mdx-js/mdx'; +import {createCompiler} from '@mdx-js/mdx'; import logger from '@docusaurus/logger'; import emoji from 'remark-emoji'; import { @@ -156,10 +156,7 @@ export default async function mdxLoader( ...(reqOptions.rehypePlugins || []), ], }; - compilerCache.set(this.query, [ - createCompiler(options as MDXOptions), - options, - ]); + compilerCache.set(this.query, [createCompiler(options), options]); } const [compiler, options] = compilerCache.get(this.query)!; From 94d70de92311591f0d44f40619b5348ad81aaa73 Mon Sep 17 00:00:00 2001 From: sebastienlorber Date: Wed, 26 Jan 2022 18:16:44 +0100 Subject: [PATCH 5/6] docs: add missing Tab/TabItem imports --- website/docs/deployment.mdx | 3 +++ .../guides/markdown-features/markdown-features-code-blocks.mdx | 2 ++ 2 files changed, 5 insertions(+) diff --git a/website/docs/deployment.mdx b/website/docs/deployment.mdx index 197934d35ece..107facd47482 100644 --- a/website/docs/deployment.mdx +++ b/website/docs/deployment.mdx @@ -3,6 +3,9 @@ id: deployment title: Deployment --- +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + To build the static files of your website for production, run: ```bash npm2yarn diff --git a/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx b/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx index b57c25dcddd6..da718a5a9f53 100644 --- a/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx +++ b/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx @@ -7,6 +7,8 @@ slug: /markdown-features/code-blocks import BrowserWindow from '@site/src/components/BrowserWindow'; import CodeBlock from '@theme/CodeBlock'; +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; Code blocks within documentation are super-powered 💪. From 31ae5f173a8fa8c3e80538395198d19f1f3d4cc3 Mon Sep 17 00:00:00 2001 From: Joshua Chen Date: Thu, 31 Mar 2022 14:59:37 +0800 Subject: [PATCH 6/6] fixup --- packages/docusaurus-mdx-loader/src/index.ts | 6 +++--- packages/docusaurus-remark-plugin-npm2yarn/src/index.ts | 9 ++++----- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/packages/docusaurus-mdx-loader/src/index.ts b/packages/docusaurus-mdx-loader/src/index.ts index 43dd26d600f3..8d6e55c79c5e 100644 --- a/packages/docusaurus-mdx-loader/src/index.ts +++ b/packages/docusaurus-mdx-loader/src/index.ts @@ -168,12 +168,12 @@ export default async function mdxLoader( let result: string; try { - result = ( - await compiler.process({ + result = await compiler + .process({ contents: content, path: this.resourcePath, }) - ).toString(); + .then((res) => res.toString()); } catch (err) { return callback(err as Error); } diff --git a/packages/docusaurus-remark-plugin-npm2yarn/src/index.ts b/packages/docusaurus-remark-plugin-npm2yarn/src/index.ts index b16949dd72e4..19c03c4b21c5 100644 --- a/packages/docusaurus-remark-plugin-npm2yarn/src/index.ts +++ b/packages/docusaurus-remark-plugin-npm2yarn/src/index.ts @@ -6,7 +6,7 @@ */ import type {Code, Content, Literal} from 'mdast'; -import type {Plugin, Transformer} from 'unified'; +import type {Plugin} from 'unified'; import type {Node, Parent} from 'unist'; import visit from 'unist-util-visit'; import npmToYarn from 'npm-to-yarn'; @@ -61,9 +61,9 @@ const nodeForImport: Literal = { const plugin: Plugin<[PluginOptions?]> = (options = {}) => { const {sync = false} = options; - let transformed = false; - let alreadyImported = false; - const transformer: Transformer = (root) => { + return (root) => { + let transformed = false; + let alreadyImported = false; visit(root, (node: Node) => { if (isImport(node) && node.value.includes('@theme/Tabs')) { alreadyImported = true; @@ -87,7 +87,6 @@ const plugin: Plugin<[PluginOptions?]> = (options = {}) => { (root as Parent).children.unshift(nodeForImport); } }; - return transformer; }; // To continue supporting `require('npm2yarn')` without the `.default` ㄟ(▔,▔)ㄏ