refactor: useRouteMeta fully use getRouteMetaById (#1889)

* fix: useRouteMeta fully use getRouteMetaById

* refactor: runtime get frontmatter directly

* refactor: use sync frontmatter

src/client/theme-api/useRouteMeta.ts

@@ -5,10 +5,9 @@ import {
   useLocation,
   useRouteData,
 } from 'dumi';
-import { useCallback, useState } from 'react';
+import { useMemo } from 'react';
 import use from './context/use';
 import type { IRouteMeta } from './types';
-import { useIsomorphicLayoutEffect } from './utils';
 
 const cache = new Map<string, ReturnType<getRouteMetaById>>();
 
@@ -28,28 +27,26 @@ export const useRouteMeta = () => {
   const { pathname } = useLocation();
   const { clientRoutes } = useAppData();
 
-  const routeMeta = useAsyncRouteMeta(route.id);
-
-  const getter = useCallback((): IRouteMeta => {
-    let ret: IRouteMeta;
-
+  const curRoute = useMemo(() => {
     if (route.path === pathname && !('isLayout' in route)) {
       // use `useRouteData` result if matched, for performance
-      ret = routeMeta;
+      return route;
     } else {
       // match manually for dynamic route & layout component
       const matched = matchRoutes(clientRoutes, pathname)?.pop();
-
-      ret = (matched?.route as any)?.meta;
+      return matched?.route;
     }
-
-    return ret || { frontmatter: {}, toc: [], texts: [] };
   }, [clientRoutes.length, pathname]);
-  const [meta, setMeta] = useState<IRouteMeta>(getter);
 
-  useIsomorphicLayoutEffect(() => {
-    setMeta(getter);
-  }, [clientRoutes.length, pathname]);
+  const meta: IRouteMeta = useAsyncRouteMeta((curRoute as any)?.id) || {
+    frontmatter: {},
+    toc: [],
+    texts: [],
+  };
+
+  if (curRoute && 'meta' in curRoute && (curRoute.meta as any)._atom_route) {
+    meta._atom_route = true;
+  }
 
   return meta;
 };

src/features/compile/index.ts

@@ -145,7 +145,7 @@ export default (api: IApi) => {
       .rule('dumi-page')
       .type('javascript/auto')
       .test(/\.(j|t)sx?$/)
-      .resourceQuery(/meta$/)
+      .resourceQuery(/(meta|frontmatter)$/)
       .use('page-meta-loader')
       .loader(require.resolve('../../loaders/page'));
 

src/features/meta.ts

@@ -65,6 +65,15 @@ export default (api: IApi) => {
       },
     });
 
+    api.writeTmpFile({
+      noPluginDir: true,
+      path: 'dumi/meta/frontmatter.ts',
+      tplPath: winPath(join(TEMPLATES_DIR, 'meta-frontmatter.ts.tpl')),
+      context: {
+        metaFiles: parsedMetaFiles,
+      },
+    });
+
     // generate meta lazy entry
     const mdFiles = parsedMetaFiles.filter((metaFile) =>
       metaFile.file.endsWith('.md'),

src/templates/meta-frontmatter.ts.tpl

@@ -0,0 +1,11 @@
+{{#metaFiles}}
+import { frontmatter as fm{{{index}}} } from '{{{file}}}?type=frontmatter';
+{{/metaFiles}}
+
+export const filesFrontmatter = {
+  {{#metaFiles}}
+  '{{{id}}}': {
+    frontmatter: fm{{{index}}},
+  },
+  {{/metaFiles}}
+}

src/templates/meta-route.ts.tpl

@@ -1,9 +1,9 @@
 import { tabs } from './tabs';
+import { filesFrontmatter } from './frontmatter';
 
 const files = {
 {{#metaFiles}}
   '{{{id}}}': {
-    frontmatterGetter: () => import('{{{file}}}?type=frontmatter'),
     textGetter: () => import('{{{file}}}?type=text'),
     {{#tabs}}
     tabs: {{{tabs}}},
@@ -20,7 +20,7 @@ export const getRouteMetaById = async (id: string) => {
   }
 
   const text = await file.textGetter();
-  const frontmatter = await file.frontmatterGetter();
+  const frontmatter = filesFrontmatter[id];
 
   const tabsMeta = file.tabs && await Promise.all(file.tabs.map(async (tab) => {
     const meta = await getRouteMetaById(tab) ?? {

src/templates/meta-runtime.ts.tpl

@@ -1,5 +1,6 @@
 import { warning } from 'rc-util';
-import { filesMeta, tabs } from '.';
+import { tabs } from './tabs';
+import { filesFrontmatter } from './frontmatter';
 import deepmerge from '{{{deepmerge}}}';
 
 // Proxy do not warning since `Object.keys` will get nothing to loop
@@ -14,20 +15,20 @@ function wrapEmpty(meta, fieldName, defaultValue) {
 
 export const patchRoutes = ({ routes }) => {
   Object.values(routes).forEach((route) => {
-    if (filesMeta[route.id]) {
-      if (process.env.NODE_ENV === 'production' && (route.meta?.frontmatter?.debug || filesMeta[route.id].frontmatter.debug)) {
+    if (filesFrontmatter[route.id]) {
+      if (process.env.NODE_ENV === 'production' && (route.meta?.frontmatter?.debug || filesFrontmatter[route.id].frontmatter.debug)) {
         // hide route in production which set hide frontmatter
         delete routes[route.id];
       } else {
         // merge meta to route object
-        route.meta = deepmerge(route.meta, filesMeta[route.id]);
+        route.meta = deepmerge(route.meta, filesFrontmatter[route.id]);
 
         wrapEmpty(route.meta, 'demos', {});
         wrapEmpty(route.meta, 'texts', []);
 
         // apply real tab data from id
         route.meta.tabs = route.meta.tabs?.map((id) => {
-          const meta = filesMeta[id] || {
+          const meta = filesFrontmatter[id] || {
             frontmatter: { title: tabs[id].title },
             toc: [],
             texts: [],
@@ -44,4 +45,4 @@ export const patchRoutes = ({ routes }) => {
       }
     }
   });
-}
+}