feat: support remarkPlugins & rehypePlugins (#160)

Author: csr632

packages/playground/use-theme-doc/package.json

@@ -24,6 +24,9 @@
     "@types/react": "^18.2.13",
     "@vitejs/plugin-react": "^4.0.1",
     "@vitejs/plugin-react-swc": "^3.3.2",
+    "rehype-mathjax": "^4.0.3",
+    "remark-emoji": "^4.0.0",
+    "remark-math": "^5.1.1",
     "rimraf": "^4.4.1",
     "serve": "^14.2.0",
     "vite": "^4.4.8",

packages/playground/use-theme-doc/pages/md-test1$.md

@@ -8,6 +8,19 @@ import Counter from './Counter';
 
 <Counter />
 
+# test mdx plugin
+
+remark-emoji: :dog: :+1:
+
+remark-math:
+
+Lift($$L$$) can be determined by Lift Coefficient ($$C_L$$) like the following
+equation.
+
+$$
+L = \frac{1}{2} \rho v^2 S C_L
+$$
+
 # Heading one
 
 Sint sit cillum pariatur eiusmod nulla pariatur ipsum. Sit laborum anim qui mollit tempor pariatur nisi minim dolor. Aliquip et adipisicing sit sit fugiat commodo id sunt. Nostrud enim ad commodo incididunt cupidatat in ullamco ullamco Lorem cupidatat velit enim et Lorem. Ut laborum cillum laboris fugiat culpa sint irure do reprehenderit culpa occaecat. Exercitation esse mollit tempor magna aliqua in occaecat aliquip veniam reprehenderit nisi dolor in laboris dolore velit.

packages/playground/use-theme-doc/vite.config.ts

@@ -1,7 +1,7 @@
 import { defineConfig } from 'vite'
 import * as path from 'path'
 // import react from '@vitejs/plugin-react'
-import react from "@vitejs/plugin-react-swc";
+import react from '@vitejs/plugin-react-swc'
 
 import pages from 'vite-plugin-react-pages'
 
@@ -16,6 +16,29 @@ export default defineConfig({
     pages({
       pagesDir: path.join(__dirname, 'pages'),
       // useHashRouter: true
+      modifyRemarkPlugins(original) {
+        return [
+          ...original,
+          {
+            name: 'remark-emoji',
+            createPlugin: () => import('remark-emoji').then((m) => m.default),
+          },
+          {
+            name: 'remark-math',
+            createPlugin: () => import('remark-math').then((m) => m.default),
+          },
+        ]
+      },
+      modifyRehypePlugins(original) {
+        return [
+          ...original,
+          {
+            name: 'rehype-mathjax',
+            createPlugin: () =>
+              import('rehype-mathjax').then((m) => m.default as any),
+          },
+        ]
+      },
     }),
   ],
   // theme local dev

packages/react-pages/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-react-pages",
-  "version": "4.1.4",
+  "version": "4.1.5-alpha.0",
   "type": "module",
   "types": "./dist/node-types/index.d.ts",
   "exports": {

packages/react-pages/src/node/index.ts

@@ -1,5 +1,5 @@
 import * as path from 'path'
-import type { PluggableList } from 'unified'
+import type { PluggableList, Pluggable } from 'unified'
 import type {
   Plugin,
   IndexHtmlTransformContext,
@@ -58,8 +58,22 @@ export interface PluginConfig {
   pageStrategy?: PageStrategy
   useHashRouter?: boolean
   staticSiteGeneration?: staticSiteGenerationConfig
+  /** user can add/remove remark plugins passed to mdx */
+  modifyRemarkPlugins?: ModifyNamedUnifiedPlugins
+  /** user can add/remove rehype plugins passed to mdx */
+  modifyRehypePlugins?: ModifyNamedUnifiedPlugins
 }
 
+export type NamedUnifiedPlugin = {
+  /** use name so that modifier can recognize a plugin */
+  name: string
+  createPlugin: () => Pluggable | Promise<Pluggable>
+}
+
+export type ModifyNamedUnifiedPlugins = (
+  original: NamedUnifiedPlugin[]
+) => NamedUnifiedPlugin[]
+
 function pluginFactory(opts: PluginConfig = {}): Plugin {
   const { useHashRouter = false, staticSiteGeneration } = opts
 
@@ -277,8 +291,8 @@ export default async function setupPlugins(
   // use dynamic import so that it supports node commonjs
   const mdx = await import('@mdx-js/rollup')
   const mdxPlugin = mdx.default({
-    remarkPlugins: await getRemarkPlugins(),
-    rehypePlugins: await getRehypePlugins(),
+    remarkPlugins: await getRemarkPlugins(vpConfig.modifyRemarkPlugins),
+    rehypePlugins: await getRehypePlugins(vpConfig.modifyRehypePlugins),
     // treat .md as mdx
     mdExtensions: [],
     mdxExtensions: ['.md', '.mdx'],
@@ -294,25 +308,68 @@ export default async function setupPlugins(
   ]
 }
 
-function getRemarkPlugins(): Promise<PluggableList> {
-  return Promise.all([
-    // use dynamic import so that it works in node commonjs
-    import('remark-frontmatter').then((m) => m.default),
-    import('remark-gfm').then((m) => m.default),
-    import('remark-mdx-images').then((m) => m.default),
+function getRemarkPlugins(
+  modifyPlugins?: ModifyNamedUnifiedPlugins
+): Promise<PluggableList> {
+  const originalPlugins: NamedUnifiedPlugin[] = [
+    {
+      name: 'remark-frontmatter',
+      // use dynamic import so that it works in node commonjs
+      // use lazy-eval function so that we don't import/create a plugin until we actually need it
+      // (it may be removed by modifyPlugins so we can avoid calling it)
+      createPlugin: () => import('remark-frontmatter').then((m) => m.default),
+    },
+    {
+      name: 'remark-gfm',
+      createPlugin: () => import('remark-gfm').then((m) => m.default),
+    },
+    {
+      name: 'remark-mdx-images',
+      createPlugin: () => import('remark-mdx-images').then((m) => m.default),
+    },
+    {
+      name: 'DemoMdxPlugin',
+      createPlugin: () => DemoMdxPlugin,
+    },
+    {
+      name: 'TsInfoMdxPlugin',
+      createPlugin: () => TsInfoMdxPlugin,
+    },
+    {
+      name: 'FileTextMdxPlugin',
+      createPlugin: () => FileTextMdxPlugin,
+    },
+  ]
+  return createFinalPlugins(originalPlugins, modifyPlugins)
+}
 
-    // plugins created for vite-pages:
-    DemoMdxPlugin,
-    TsInfoMdxPlugin,
-    FileTextMdxPlugin,
-  ])
+function getRehypePlugins(
+  modifyPlugins?: ModifyNamedUnifiedPlugins
+): Promise<PluggableList> {
+  const originalPlugins: NamedUnifiedPlugin[] = [
+    {
+      name: 'rehype-slug',
+      // use dynamic import so that it works in node commonjs
+      // use lazy-eval function so that we don't import/create a plugin until we actually need it
+      // (it may be removed by modifyPlugins so we can avoid calling it)
+      createPlugin: () => import('rehype-slug').then((m) => m.default),
+    },
+  ]
+  return createFinalPlugins(originalPlugins, modifyPlugins)
 }
 
-function getRehypePlugins(): Promise<PluggableList> {
-  return Promise.all([
-    // use dynamic import so that it works in node commonjs
-    import('rehype-slug').then((m) => m.default),
-  ])
+function createFinalPlugins(
+  originalPlugins: NamedUnifiedPlugin[],
+  modifyPlugins: ModifyNamedUnifiedPlugins | undefined
+) {
+  const finalPlugins = (() => {
+    if (typeof modifyPlugins === 'function') {
+      const res = modifyPlugins(originalPlugins)
+      if (Array.isArray(res)) return res
+    }
+    return originalPlugins
+  })()
+  return Promise.all(finalPlugins.map(({ createPlugin }) => createPlugin()))
 }
 
 /**