refactor: extract inline plugin templates as independent files

examples/normal/.dumi/pages/loader-test.tsx

@@ -0,0 +1,2 @@
+// Customize Page for dumi test
+export default () => 'Customize Dumi Test Page';

src/client/theme-api/DumiDemo.tsx

@@ -76,3 +76,7 @@ export const DumiDemo: FC<IDumiDemoProps> = React.memo(
     return JSON.stringify(prev).length === JSON.stringify(next).length;
   },
 );
+
+if (process.env.NODE_ENV !== 'production') {
+  DumiDemo.displayName = 'DumiDemo';
+}

src/client/theme-api/DumiDemoGrid.tsx

@@ -63,3 +63,7 @@ export const DumiDemoGrid: FC<IDumiDemoGridProps> = (props) => {
     </div>
   );
 };
+
+if (process.env.NODE_ENV !== 'production') {
+  DumiDemoGrid.displayName = 'DumiDemoGrid';
+}

src/features/meta.ts

@@ -1,14 +1,17 @@
 import type { IApi } from '@/types';
-import path from 'path';
+import path, { join } from 'path';
 import type { IRoute } from 'umi';
-import { Mustache, winPath } from 'umi/plugin-utils';
+import { winPath } from 'umi/plugin-utils';
 import { isTabRouteFile } from './tabs';
+import { TEMPLATES_DIR } from './util';
 
 export const TABS_META_PATH = 'dumi/meta/tabs.ts';
 export const ATOMS_META_PATH = 'dumi/meta/atoms.ts';
 
+type MetaFiles = { index: number; file: string; id: string }[];
+
 export default (api: IApi) => {
-  const metaFiles: { index: number; file: string; id: string }[] = [];
+  const metaFiles: MetaFiles = [];
 
   api.register({
     key: 'modifyRoutes',
@@ -46,55 +49,32 @@ export default (api: IApi) => {
       content: 'export const components = null;',
     });
 
-    // generate meta entry
+    // [legacy] generate meta entry
+    const parsedMetaFiles: MetaFiles = await api.applyPlugins({
+      type: api.ApplyPluginsType.modify,
+      key: 'dumi.modifyMetaFiles',
+      initialValue: JSON.parse(JSON.stringify(metaFiles)),
+    });
+
     api.writeTmpFile({
       noPluginDir: true,
       path: 'dumi/meta/index.ts',
-      content: Mustache.render(
-        `{{#metaFiles}}
-import { demos as dm{{{index}}}, frontmatter as fm{{{index}}}, toc as toc{{{index}}}, texts as txt{{{index}}} } from '{{{file}}}?type=meta';
-{{/metaFiles}}
-
-export { components } from './atoms';
-export { tabs } from './tabs';
-
-export const filesMeta = {
-  {{#metaFiles}}
-  '{{{id}}}': {
-    frontmatter: fm{{{index}}},
-    toc: toc{{{index}}},
-    texts: txt{{{index}}},
-    demos: dm{{{index}}},
-    {{#tabs}}
-    tabs: {{{tabs}}},
-    {{/tabs}}
-  },
-  {{/metaFiles}}
-}
-
-// generate demos data in runtime, for reuse route.id to reduce bundle size
-export const demos = Object.entries(filesMeta).reduce((acc, [id, meta]) => {
-  // append route id to demo
-  Object.values(meta.demos).forEach((demo) => {
-    demo.routeId = id;
-  });
-  // merge demos
-  Object.assign(acc, meta.demos);
+      tplPath: winPath(join(TEMPLATES_DIR, 'meta.ts.tpl')),
+      context: {
+        metaFiles: parsedMetaFiles,
+      },
+    });
 
-  // remove demos from meta, to avoid deep clone demos in umi routes/children compatible logic
-  delete meta.demos;
+    // generate meta by per route
+    parsedMetaFiles.forEach((metaFile) => {
+      const fileId = metaFile.id.replace(/\//g, '_').replace(/\$/g, '_');
 
-  return acc;
-}, {});
-`,
-        {
-          metaFiles: await api.applyPlugins({
-            type: api.ApplyPluginsType.modify,
-            key: 'dumi.modifyMetaFiles',
-            initialValue: metaFiles,
-          }),
-        },
-      ),
+      api.writeTmpFile({
+        noPluginDir: true,
+        path: `dumi/meta/route_${fileId}.ts`,
+        tplPath: winPath(join(TEMPLATES_DIR, 'meta-single.ts.tpl')),
+        context: metaFile,
+      });
     });
 
     // generate runtime plugin, to append page meta to route object

src/features/theme/index.ts

@@ -10,9 +10,10 @@ import { parseModuleSync } from '@umijs/bundler-utils';
 import { execSync } from 'child_process';
 import fs from 'fs';
 import hostedGit from 'hosted-git-info';
-import path from 'path';
+import path, { join } from 'path';
 import { deepmerge, lodash, resolve, semver, winPath } from 'umi/plugin-utils';
 import { safeExcludeInMFSU } from '../derivative';
+import { TEMPLATES_DIR } from '../util';
 import loadTheme, { IThemeLoadResult } from './loader';
 
 const DEFAULT_THEME_PATH = path.join(__dirname, '../../../theme-default');
@@ -369,68 +370,30 @@ export default DumiLoading;
     api.writeTmpFile({
       noPluginDir: true,
       path: 'dumi/theme/ContextWrapper.tsx',
-      content: `import React, { useState, useEffect, useRef } from 'react';
-import { useOutlet, history } from 'dumi';
-import { SiteContext } from '${winPath(
-        require.resolve('../../client/theme-api/context'),
-      )}';
-import { demos, components } from '../meta';
-import { locales } from '../locales/config';${
-        hasDefaultExport
-          ? `\nimport entryDefaultExport from '${winPath(entryFile!)}';`
-          : ''
-      }${
-        hasNamedExport
-          ? `\nimport * as entryMemberExports from '${winPath(entryFile!)}';`
-          : ''
-      }
-
-const entryExports = {
-  ${hasDefaultExport ? 'default: entryDefaultExport,' : ''}
-  ${hasNamedExport ? '...entryMemberExports,' : ''}
-};
-
-export default function DumiContextWrapper() {
-  const outlet = useOutlet();
-  const [loading, setLoading] = useState(false);
-  const prev = useRef(history.location.pathname);
-
-  useEffect(() => {
-    return history.listen((next) => {
-      if (next.location.pathname !== prev.current) {
-        prev.current = next.location.pathname;
-
-        // scroll to top when route changed
-        document.documentElement.scrollTo(0, 0);
-      }
-    });
-  }, []);
-
-  return (
-    <SiteContext.Provider value={{
-      pkg: ${JSON.stringify(
-        lodash.pick(api.pkg, ...Object.keys(PICKED_PKG_FIELDS)),
-      )},
-      historyType: "${api.config.history?.type || 'browser'}",
-      entryExports,
-      demos,
-      components,
-      locales,
-      loading,
-      setLoading,
-      hostname: ${JSON.stringify(api.config.sitemap?.hostname)},
-      themeConfig: ${JSON.stringify(
-        Object.assign(
-          lodash.pick(api.config, 'logo', 'description', 'title'),
-          api.config.themeConfig,
+      tplPath: winPath(join(TEMPLATES_DIR, 'ContextWrapper.ts.tpl')),
+      context: {
+        contextPath: winPath(require.resolve('../../client/theme-api/context')),
+        defaultExport: hasDefaultExport
+          ? `import entryDefaultExport from '${winPath(entryFile!)}';`
+          : '',
+        namedExport: hasNamedExport
+          ? `import * as entryMemberExports from '${winPath(entryFile!)}';`
+          : '',
+        hasDefaultExport,
+        hasNamedExport,
+        pkg: JSON.stringify(
+          lodash.pick(api.pkg, ...Object.keys(PICKED_PKG_FIELDS)),
         ),
-      )},
-      _2_level_nav_available: ${api.appData._2LevelNavAvailable},
-    }}>
-      {outlet}
-    </SiteContext.Provider>
-  );
-}`,
+        historyType: api.config.history?.type || 'browser',
+        hostname: String(JSON.stringify(api.config.sitemap?.hostname)),
+        themeConfig: JSON.stringify(
+          Object.assign(
+            lodash.pick(api.config, 'logo', 'description', 'title'),
+            api.config.themeConfig,
+          ),
+        ),
+        _2_level_nav_available: api.appData._2LevelNavAvailable,
+      },
     });
 
     const primaryColor =

src/features/util.ts

@@ -0,0 +1,3 @@
+import { join } from 'path';
+
+export const TEMPLATES_DIR = join(__dirname, '../templates');

src/loaders/markdown/index.ts

@@ -135,7 +135,7 @@ export default DumiMarkdownContent;`;
   }
 }
 
-function getDepsCacheKey(deps: typeof depsMapping['0'] = []) {
+function getDepsCacheKey(deps: (typeof depsMapping)['0'] = []) {
   return JSON.stringify(
     deps.map((file) => `${file}:${fs.statSync(file).mtimeMs}`),
   );

src/templates/ContextWrapper.ts.tpl

@@ -0,0 +1,53 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { useOutlet, history } from 'dumi';
+import { SiteContext } from '{{{contextPath}}}';
+import { demos, components } from '../meta';
+import { locales } from '../locales/config';
+{{{defaultExport}}}
+{{{namedExport}}}
+
+const entryExports = {
+  {{#hasDefaultExport}}
+    default: entryDefaultExport,
+  {{/hasDefaultExport}}
+  {{#hasNamedExport}}
+    ...entryMemberExports,
+  {{/hasNamedExport}}
+};
+
+export default function DumiContextWrapper() {
+  const outlet = useOutlet();
+  const [loading, setLoading] = useState(false);
+  const prev = useRef(history.location.pathname);
+
+  useEffect(() => {
+    return history.listen((next) => {
+      if (next.location.pathname !== prev.current) {
+        prev.current = next.location.pathname;
+
+        // scroll to top when route changed
+        document.documentElement.scrollTo(0, 0);
+      }
+    });
+  }, []);
+
+  const context = {
+    pkg: {{{pkg}}},
+    historyType: "{{{historyType}}}",
+    entryExports,
+    demos,
+    components,
+    locales,
+    loading,
+    setLoading,
+    hostname: {{{hostname}}},
+    themeConfig: {{{themeConfig}}},
+    _2_level_nav_available: {{{_2_level_nav_available}}},
+  };
+
+  return (
+    <SiteContext.Provider value={context}>
+      {outlet}
+    </SiteContext.Provider>
+  );
+}

src/templates/meta-single.ts.tpl

@@ -0,0 +1,16 @@
+import {
+  demos,
+  frontmatter,
+  toc,
+  texts
+} from '{{{file}}}?type=meta';
+
+export const filesMeta = {
+    frontmatter,
+    toc,
+    texts,
+    demos,
+    {{#tabs}}
+    tabs: {{{tabs}}},
+    {{/tabs}}
+}

src/templates/meta.ts.tpl

@@ -0,0 +1,35 @@
+{{#metaFiles}}
+import { demos as dm{{{index}}}, frontmatter as fm{{{index}}}, toc as toc{{{index}}}, texts as txt{{{index}}} } from '{{{file}}}?type=meta';
+{{/metaFiles}}
+
+export { components } from './atoms';
+export { tabs } from './tabs';
+
+export const filesMeta = {
+  {{#metaFiles}}
+  '{{{id}}}': {
+    frontmatter: fm{{{index}}},
+    toc: toc{{{index}}},
+    texts: txt{{{index}}},
+    demos: dm{{{index}}},
+    {{#tabs}}
+    tabs: {{{tabs}}},
+    {{/tabs}}
+  },
+  {{/metaFiles}}
+}
+
+// generate demos data in runtime, for reuse route.id to reduce bundle size
+export const demos = Object.entries(filesMeta).reduce((acc, [id, meta]) => {
+  // append route id to demo
+  Object.values(meta.demos).forEach((demo) => {
+    demo.routeId = id;
+  });
+  // merge demos
+  Object.assign(acc, meta.demos);
+
+  // remove demos from meta, to avoid deep clone demos in umi routes/children compatible logic
+  delete meta.demos;
+
+  return acc;
+}, {});