🐛 fix: 修复页面白屏错误 (#122)

* 🐛 fix: 修复页面白屏错误

* chore: fix lint

* chore: update

* chore: 更新说明

* chore: update

wait: umijs/dumi#2165

* chore: update peerdeps

* chore: re-import

Author: Wxh16144

package.json

@@ -74,6 +74,7 @@
     "react-layout-kit": "^1",
     "react-syntax-highlighter": "^15",
     "shiki-es": "^0.2",
+    "swr": "^2.2.5",
     "use-merge-value": "^1",
     "zustand": "^4.4.1",
     "zustand-utils": "^1"
@@ -122,7 +123,7 @@
     "vitest": "latest"
   },
   "peerDependencies": {
-    "dumi": "^2.0.0",
+    "dumi": "^2.4.7",
     "react": ">=16.8",
     "react-dom": ">=16.8"
   },

src/components/StoreUpdater/index.tsx

@@ -1,16 +1,9 @@
 import { useDebounceEffect } from 'ahooks';
-import {
-  useLocale,
-  useLocation,
-  useNavData,
-  useRouteMeta,
-  useSidebarData,
-  useSiteData,
-  useTabMeta,
-} from 'dumi';
+import { useLocale, useLocation, useNavData, useSidebarData, useSiteData, useTabMeta } from 'dumi';
 import isEqual from 'fast-deep-equal';
 import React, { memo, useEffect } from 'react';
 import { SiteStore, useStoreApi } from '../../store/useSiteStore';
+import { useRouteMeta } from './useRouteMeta';
 
 const isBrowser = typeof window !== 'undefined';
 
@@ -71,13 +64,14 @@ const getHomeNav = (id: string) => ({
 export const StoreUpdater = memo(() => {
   const siteData = useSiteData();
   const sidebar = useSidebarData();
-  const routeMeta = useRouteMeta();
   const tabMeta = useTabMeta();
   const navData = useNavData();
   const location = useLocation();
   const locale = useLocale();
   const storeApi = useStoreApi();
 
+  useRouteMeta();
+
   useSyncState('siteData', siteData, () => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { setLoading, ...data } = siteData;
@@ -92,7 +86,6 @@ export const StoreUpdater = memo(() => {
   });
 
   useSyncState('sidebar', sidebar);
-  useSyncState('routeMeta', routeMeta);
   useSyncState('location', location);
   useSyncState('tabMeta', tabMeta);
   useSyncState('locale', locale);

src/components/StoreUpdater/useRouteMeta.ts

@@ -0,0 +1,32 @@
+import { getRouteMetaById, useMatchedRoute } from 'dumi';
+import type { IRouteMeta } from 'dumi/dist/client/theme-api/types';
+import useSWR from 'swr';
+import { useStoreApi } from '../../store/useSiteStore';
+
+const EMPTY_META = {
+  frontmatter: {},
+  toc: [],
+  texts: [],
+} as any;
+
+// https://github.com/umijs/dumi/pull/2165
+export const useRouteMeta = () => {
+  const storeApi = useStoreApi();
+  const matched = useMatchedRoute();
+
+  const merge = (meta: IRouteMeta = EMPTY_META) => {
+    if (matched.meta) {
+      Object.keys(matched.meta).forEach((key) => {
+        (meta as any)[key] ??= (matched.meta as any)[key];
+      });
+    }
+    return meta;
+  };
+
+  useSWR(matched.id, getRouteMetaById, {
+    fallback: EMPTY_META,
+    onSuccess: (meta) => {
+      storeApi.setState({ routeMeta: merge(meta) });
+    },
+  });
+};

src/store/useSiteStore.ts

@@ -1,43 +1,15 @@
-import { AtomAsset } from 'dumi-assets-types';
-import {
-  ILocale,
-  ILocalesConfig,
-  INavItem,
-  IPreviewerProps,
-  IRouteMeta,
-  ISidebarGroup,
-  IThemeConfig,
-} from 'dumi/dist/client/theme-api/types';
-import { PICKED_PKG_FIELDS } from 'dumi/dist/constants';
+import type { ISiteContext } from 'dumi/dist/client/theme-api/context';
+import { ILocale, INavItem, IRouteMeta, ISidebarGroup } from 'dumi/dist/client/theme-api/types';
 import equal from 'fast-deep-equal';
 import type { Location } from 'history';
-import { createWithEqualityFn } from 'zustand/traditional';
-
-import { ComponentType } from 'react';
 import { StoreApi } from 'zustand';
 import { createContext } from 'zustand-utils';
 import { devtools } from 'zustand/middleware';
+import { createWithEqualityFn } from 'zustand/traditional';
 
 export type NavData = (INavItem & { children?: INavItem[] | undefined })[];
 
-export interface ISiteData {
-  pkg: Partial<Record<keyof typeof PICKED_PKG_FIELDS, any>>;
-  entryExports: Record<string, any>;
-  demos: Record<
-    string,
-    {
-      component: ComponentType;
-      asset: IPreviewerProps['asset'];
-      routeId: string;
-    }
-  >;
-
-  components: Record<string, AtomAsset>;
-  locales: ILocalesConfig;
-  themeConfig: IThemeConfig;
-  loading: boolean;
-  setLoading: (status: boolean) => void;
-}
+export type ISiteData = ISiteContext;
 
 export interface SiteStore {
   siteData: ISiteData;