Skip to content

Commit

Permalink
🐛 fix: Fix Dumi break change
Browse files Browse the repository at this point in the history
  • Loading branch information
canisminor1990 committed Nov 22, 2024
1 parent 262248d commit 26740ba
Show file tree
Hide file tree
Showing 24 changed files with 335 additions and 192 deletions.
38 changes: 21 additions & 17 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
"scripts": {
"build": "father build",
"ci": "npm run lint && npm run type-check",
"dev": "father dev",
"dev": "concurrently -n dumi,example -c blue,yellow \"father dev\" \"npm run docs:dev\"",
"docs:build": "cd example && npm run build",
"docs:dev": "cd example && npm run dev",
"doctor": "father doctor",
Expand Down Expand Up @@ -69,51 +69,55 @@
]
},
"dependencies": {
"@floating-ui/react": "^0.26.17",
"ahooks": "^3.8.0",
"@floating-ui/react": "^0.26.28",
"ahooks": "^3.8.1",
"chalk": "^4.1.2",
"fast-deep-equal": "^3.1.3",
"history": "^5.3.0",
"lodash-es": "^4.17.21",
"polished": "^4.3.1",
"rc-footer": "^0.6.8",
"react-layout-kit": "^1.9.0",
"swr": "^2.2.5",
"use-merge-value": "^1.2.0",
"zustand": "^4.5.2"
"zustand": "^4.5.5",
"zustand-utils": "^1.3.2"
},
"devDependencies": {
"@commitlint/cli": "^19.3.0",
"@lobehub/lint": "^1.23.4",
"@commitlint/cli": "^19.6.0",
"@lobehub/lint": "^1.24.4",
"@types/lodash-es": "^4.17.12",
"@types/node": "^20.14.2",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@types/node": "^20.17.6",
"@types/react": "^18.3.12",
"@types/react-dom": "^18.3.1",
"@vitest/coverage-v8": "^1.6.0",
"clean-pkg-json": "^1.2.0",
"commitlint": "^19.3.0",
"dumi-assets-types": "^2.3.0",
"eslint": "^8.57.0",
"father": "4.3.1",
"commitlint": "^19.6.0",
"concurrently": "^9.1.0",
"dumi-assets-types": "^2.4.14",
"eslint": "^8.57.1",
"father": "^4.5.1",
"father-plugin-dumi-theme": "1.0.0-rc.1",
"husky": "^9.0.11",
"husky": "^9.1.7",
"jsdom": "^22.1.0",
"leva": "^0.9.35",
"lint-staged": "^13.3.0",
"prettier": "^3.3.2",
"prettier": "^3.3.3",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"remark": "^14.0.3",
"remark-cli": "^11.0.0",
"semantic-release": "^21.1.2",
"stylelint": "^15.11.0",
"typescript": "^5.4.5",
"typescript": "^5.6.3",
"vitest": "^1.6.0"
},
"peerDependencies": {
"@giscus/react": ">=3",
"@lobehub/ui": ">=1",
"antd": ">=5",
"dumi": "~2.2",
"antd-style": ">=3",
"dumi": ">=2",
"lucide-react": ">=0.292",
"react": ">=18",
"react-dom": ">=18",
Expand Down
7 changes: 4 additions & 3 deletions src/components/ApiHeader/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Divider, Space, Typography } from 'antd';
import { useResponsive } from 'antd-style';
import { Edit3, Github } from 'lucide-react';
import { type ReactNode, memo } from 'react';
import { Flexbox } from 'react-layout-kit';
import { Flexbox, FlexboxProps } from 'react-layout-kit';

import { ApiHeaderConfig } from '@/types';

Expand Down Expand Up @@ -72,7 +72,7 @@ export interface ServiceItem {
url: string;
}

export const ApiHeader = memo<ApiTitleProps>(
export const ApiHeader = memo<ApiTitleProps & FlexboxProps>(
({
title,
type,
Expand All @@ -83,6 +83,7 @@ export const ApiHeader = memo<ApiTitleProps>(
sourceUrl,
docUrl,
serviceList = [],
...rest
}) => {
const { styles } = useStyles();
const { mobile } = useResponsive();
Expand All @@ -106,7 +107,7 @@ export const ApiHeader = memo<ApiTitleProps>(
: `import { ${componentName} } from '${pkg}';`;

return (
<Flexbox id={'api-header'} style={{ marginBottom: 24 }}>
<Flexbox id={'api-header'} style={{ marginBottom: 24 }} width={'100%'} {...rest}>
<Typography.Title className={styles.title}>{title}</Typography.Title>
{description && <Markdown className={styles.desc}>{description}</Markdown>}
{!isDoc && (
Expand Down
58 changes: 29 additions & 29 deletions src/components/StoreUpdater/index.tsx
Original file line number Diff line number Diff line change
@@ -1,30 +1,23 @@
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, { type DependencyList, type EffectCallback, useEffect } from 'react';
import React, { memo, useEffect } from 'react';

import { SiteStore, useSiteStore } from '@/store/useSiteStore';
import { SiteStore, useStoreApi } from '../../store/useSiteStore';
import { useRouteMeta } from './useRouteMeta';

const isBrowser = typeof window !== 'undefined';

const SSRInit: Record<string, boolean> = {};

const useReact18xUpdater = (effect: EffectCallback, deps?: DependencyList) => {
const useReact18xUpdater = (effect: React.EffectCallback, deps?: React.DependencyList) => {
useEffect(() => {
(React as any).startTransition(() => {
effect();
});
}, deps);
};
const useLegacyUpdater = (effect: EffectCallback, deps?: DependencyList) => {
const useLegacyUpdater = (effect: React.EffectCallback, deps?: React.DependencyList) => {
useDebounceEffect(
() => {
effect();
Expand All @@ -41,9 +34,10 @@ const useSyncState = <T extends keyof SiteStore>(
value: SiteStore[T],
updateMethod?: (key: T, value: SiteStore[T]) => void,
) => {
const storeApi = useStoreApi();
const updater = updateMethod
? updateMethod
: (key: T, value: SiteStore[T]) => useSiteStore.setState({ [key]: value });
: (key: T, value: SiteStore[T]) => storeApi.setState({ [key]: value });

// 如果是 Node 环境,直接更新一次 store
// 但是为了避免多次更新 store,所以加一个标记
Expand All @@ -57,45 +51,51 @@ const useSyncState = <T extends keyof SiteStore>(
}, [value]);
};

const homeNav = {
const displayLangHomeNavMap: Record<string, string> = {
'en-US': 'Home',
'zh-CN': '首页',
};

const getHomeNav = (id: string) => ({
activePath: '/',
link: '/',
title: 'Home',
};
title: displayLangHomeNavMap[id],
});

export const StoreUpdater = () => {
const siteData: any = useSiteData();
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;
const {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
siteData: { setLoading: _, ...previousData },
} = useSiteStore.getState();
siteData: { setLoading: _, ...prevData },
} = storeApi.getState();

if (isEqual(data, previousData)) return;
if (isEqual(data, prevData)) return;

useSiteStore.setState({ siteData });
storeApi.setState({ siteData });
});

useSyncState('sidebar', sidebar);
useSyncState('routeMeta', routeMeta);
useSyncState('location', location);
useSyncState('tabMeta', tabMeta);
useSyncState('locale', locale);

useSyncState('navData', navData, () => {
const data = siteData.themeConfig.hideHomeNav ? navData : [homeNav, ...navData];
const data = siteData.themeConfig.hideHomeNav ? navData : [getHomeNav(locale.id), ...navData];

useSiteStore.setState({ navData: data });
storeApi.setState({ navData: data });
});

return false;
};
return null;
});
33 changes: 33 additions & 0 deletions src/components/StoreUpdater/useRouteMeta.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
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: {},
texts: [],
toc: [],
} 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) {
for (const key of Object.keys(matched.meta)) {
(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) });
},
});
};
3 changes: 1 addition & 2 deletions src/layouts/DocLayout/DocumentLayout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { useResponsive, useTheme } from 'antd-style';
import { Helmet, useIntl, useLocation } from 'dumi';
import isEqual from 'fast-deep-equal';
import { memo, useCallback, useEffect } from 'react';
import { shallow } from 'zustand/shallow';

import Changelog from '@/pages/Changelog';
import Docs from '@/pages/Docs';
Expand Down Expand Up @@ -39,7 +38,7 @@ const DocumentLayout = memo(() => {
page: page,
siteTitle: siteTitleSel(s),
};
}, shallow);
});

const fm = useSiteStore((s) => s.routeMeta.frontmatter, isEqual);

Expand Down
22 changes: 22 additions & 0 deletions src/layouts/DocLayout/ThemeProvider.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { ThemeProvider } from '@lobehub/ui';
import isEqual from 'fast-deep-equal';
import { PropsWithChildren, memo } from 'react';

import GlobalStyle from '@/layouts/DocLayout/GlobalStyle';
import { siteSelectors, useSiteStore, useThemeStore } from '@/store';
import customToken from '@/styles/customToken';

export default memo<PropsWithChildren>(({ children }) => {
const themeMode = useThemeStore((st) => st.themeMode);
const userToken = useSiteStore(siteSelectors.token, isEqual);

return (
<ThemeProvider
customToken={(themeToken) => Object.assign({}, customToken(themeToken), userToken)}
themeMode={themeMode}
>
<GlobalStyle />
{children}
</ThemeProvider>
);
});
50 changes: 32 additions & 18 deletions src/layouts/DocLayout/index.tsx
Original file line number Diff line number Diff line change
@@ -1,32 +1,46 @@
import { ThemeProvider } from '@lobehub/ui';
import { memo } from 'react';
import { shallow } from 'zustand/shallow';
import {
useLocale,
useLocation,
useNavData,
useRouteMeta,
useSidebarData,
useSiteData,
useTabMeta,
} from 'dumi';
import { memo, useMemo } from 'react';

import Favicons from '@/components/Favicons';
import { StoreUpdater } from '@/components/StoreUpdater';
import GlobalStyle from '@/layouts/DocLayout/GlobalStyle';
import { siteSelectors, useSiteStore, useThemeStore } from '@/store';
import customToken from '@/styles/customToken';
import { Provider, createStore } from '@/store';

import DocumentLayout from './DocumentLayout';
import ThemeProvider from './ThemeProvider';

const App = memo(() => {
const themeMode = useThemeStore((st) => st.themeMode, shallow);
const userToken = useSiteStore(siteSelectors.token);

const App = memo(({ initState }: any) => {
return (
<>
<Provider createStore={() => createStore(initState)}>
<Favicons />
<StoreUpdater />
<ThemeProvider
customToken={(themeToken) => Object.assign({}, customToken(themeToken), userToken)}
themeMode={themeMode}
>
<GlobalStyle />
<ThemeProvider>
<DocumentLayout />
</ThemeProvider>
</>
</Provider>
);
});

export default App;
export default memo(() => {
const siteData = useSiteData();
const sidebar = useSidebarData();
const routeMeta = useRouteMeta();
const tabMeta = useTabMeta();
const navData = useNavData();
const location = useLocation();
const locale = useLocale();

const initState = useMemo(
() => ({ locale, location, navData, routeMeta, sidebar, siteData, tabMeta }),
[],
);

return <App initState={initState} />;
});
Loading

0 comments on commit 26740ba

Please sign in to comment.