🐛 fix: fix suspense error in ssr hydration (#61)

* ⬆️ chore: update dev deps * 🐛 fix: fix suspense hydration with ssr * ✨ feat: CacheManager support delete method * ✅ test: add test for matchBrowserPrefers * 🔖 chore(release): v3.3.0-beta.1 [skip ci] # [3.3.0-beta.1](v3.2.2...v3.3.0-beta.1) (2023-06-03) ### ✨ Features * CacheManager support delete method ([595a5a6](595a5a6)) ### 🐛 Bug Fixes * fix suspense hydration with ssr ([ef61d10](ef61d10)) * 📝 docs: 补充完善 StyleProvider 的文档 * 📝 docs: 补充完善 createInstance 文档 * 📝 docs: 补充优化 useResponsive 文档 * ⬆️ chore: update dev deps * 🐛 fix: fix suspense hydration with ssr * ✨ feat: CacheManager support delete method * ✅ test: add test for matchBrowserPrefers * 🔖 chore(release): v3.3.0-beta.1 [skip ci] # [3.3.0-beta.1](v3.2.2...v3.3.0-beta.1) (2023-06-03) ### ✨ Features * CacheManager support delete method ([595a5a6](595a5a6)) ### 🐛 Bug Fixes * fix suspense hydration with ssr ([ef61d10](ef61d10)) * 🔖 chore(release): v3.3.0-beta.2 [skip ci] # [3.3.0-beta.2](v3.3.0-beta.1...v3.3.0-beta.2) (2023-06-03) ### ✨ Features * CacheManager support delete method ([b3b74e9](b3b74e9)) ### 🐛 Bug Fixes * fix suspense hydration with ssr ([9f27b16](9f27b16)) --------- Co-authored-by: semantic-release-bot <[email protected]>
ant-design · Jun 4, 2023 · d4ce424 · d4ce424
1 parent cde16f3
commit d4ce424
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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<ThemeSwitcherProps> = 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
@@ -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
@@ -0,0 +1,9 @@
+import { startTransition, TransitionFunction } from 'react';
+
+export const safeStartTransition = (func: TransitionFunction) => {
+  if (typeof startTransition === 'function') {
+    startTransition(func);
+  } else {
+    func();
+  }
+};