diff --git a/CHANGELOG.md b/CHANGELOG.md index b9259b3d..213b504f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,25 @@ # Changelog +# [3.3.0-beta.2](https://github.com/ant-design/antd-style/compare/v3.3.0-beta.1...v3.3.0-beta.2) (2023-06-03) + +### ✨ Features + +- CacheManager support delete method ([b3b74e9](https://github.com/ant-design/antd-style/commit/b3b74e9)) + +### 🐛 Bug Fixes + +- fix suspense hydration with ssr ([9f27b16](https://github.com/ant-design/antd-style/commit/9f27b16)) + +# [3.3.0-beta.1](https://github.com/ant-design/antd-style/compare/v3.2.2...v3.3.0-beta.1) (2023-06-03) + +### ✨ Features + +- CacheManager support delete method ([595a5a6](https://github.com/ant-design/antd-style/commit/595a5a6)) + +### 🐛 Bug Fixes + +- fix suspense hydration with ssr ([ef61d10](https://github.com/ant-design/antd-style/commit/ef61d10)) + ## [3.2.2](https://github.com/ant-design/antd-style/compare/v3.2.1...v3.2.2) (2023-06-02) ### 🐛 Bug Fixes diff --git a/package.json b/package.json index fd685b67..631d9fd7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd-style", - "version": "3.2.2", + "version": "3.3.0-beta.2", "description": "a css-in-js solution for application combine with antd v5 token system and emotion", "keywords": [ "antd", @@ -85,7 +85,7 @@ "@emotion/babel-plugin": "^11", "@emotion/jest": "^11", "@emotion/styled": "^11", - "@floating-ui/react": "^0.17", + "@floating-ui/react": "^0.24", "@react-three/fiber": "^8", "@testing-library/jest-dom": "^5", "@testing-library/react": "^13", diff --git a/src/core/CacheManager.ts b/src/core/CacheManager.ts index 64be7176..e9408b6f 100644 --- a/src/core/CacheManager.ts +++ b/src/core/CacheManager.ts @@ -10,7 +10,11 @@ export class CacheManager { this._cacheList.push(cache); } - private hasCache(cache: EmotionCache) { + delete(cache: EmotionCache) { + this._cacheList = this._cacheList.filter((c) => c.key !== cache.key); + } + + hasCache(cache: EmotionCache) { return this._cacheList.some((c) => c.key === cache.key); } diff --git a/src/factories/createThemeProvider/ThemeSwitcher.tsx b/src/factories/createThemeProvider/ThemeSwitcher.tsx index 0b4a14d6..378397cc 100644 --- a/src/factories/createThemeProvider/ThemeSwitcher.tsx +++ b/src/factories/createThemeProvider/ThemeSwitcher.tsx @@ -4,6 +4,7 @@ import useMergeValue from 'use-merge-value'; import { ThemeModeContext } from '@/context'; import { BrowserPrefers, ThemeAppearance, ThemeMode, UseTheme } from '@/types'; import { matchBrowserPrefers } from '@/utils/matchBrowserPrefers'; +import { safeStartTransition } from '@/utils/safeStartTransition'; let darkThemeMatch: MediaQueryList; @@ -32,7 +33,9 @@ const ThemeObserver: FC<{ useLayoutEffect(() => { // 如果不是自动,就明确设定亮暗色 if (themeMode !== 'auto') { - setAppearance(themeMode); + safeStartTransition(() => { + setAppearance(themeMode); + }); return; } // 如果是自动的话,则去做一次匹配,并开始监听 @@ -48,7 +51,7 @@ const ThemeObserver: FC<{ }; }, [themeMode]); - useEffect(() => { + useLayoutEffect(() => { if (!darkThemeMatch) { darkThemeMatch = matchBrowserPrefers('dark'); } @@ -117,7 +120,10 @@ const ThemeSwitcher: FC = memo( // Wait until after client-side hydration to show useEffect(() => { - setStartObserver(true); + // 兼容 React18 的 Suspense 问题 + safeStartTransition(() => { + setStartObserver(true); + }); }, []); return ( diff --git a/src/utils/matchBrowserPrefers.test.ts b/src/utils/matchBrowserPrefers.test.ts index d2e1a309..dc919d2f 100644 --- a/src/utils/matchBrowserPrefers.test.ts +++ b/src/utils/matchBrowserPrefers.test.ts @@ -1,3 +1,4 @@ +import { ThemeAppearance } from 'antd-style'; import { vi } from 'vitest'; import { matchBrowserPrefers } from './matchBrowserPrefers'; @@ -36,4 +37,17 @@ describe('matchBrowserPrefers', () => { // 还原全局变量 global.window = originalWindow; }); + it('should return a MediaQueryList-like object when window object is undefined', () => { + const tempWin = window; + // eslint-disable-next-line no-global-assign,no-native-reassign + window = undefined as any; + + const mode: ThemeAppearance = 'dark'; + const result = matchBrowserPrefers(mode); + + expect(result.matches).toBe(false); + + // eslint-disable-next-line no-global-assign,no-native-reassign + window = tempWin; + }); }); diff --git a/src/utils/safeStartTransition.ts b/src/utils/safeStartTransition.ts new file mode 100644 index 00000000..d2ef0e71 --- /dev/null +++ b/src/utils/safeStartTransition.ts @@ -0,0 +1,9 @@ +import { startTransition, TransitionFunction } from 'react'; + +export const safeStartTransition = (func: TransitionFunction) => { + if (typeof startTransition === 'function') { + startTransition(func); + } else { + func(); + } +};