Merge pull request #145 from ant-design/beta

🐛 fix: fix rerender with ThemeSwitcher

Author: arvinxx

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [3.6.2-beta.1](https://github.com/ant-design/antd-style/compare/v3.6.1...v3.6.2-beta.1) (2024-03-24)
+
+### 🐛 Bug Fixes
+
+- Fix rerender with ThemeSwitcher ([8669b88](https://github.com/ant-design/antd-style/commit/8669b88))
+
 ## [3.6.1](https://github.com/ant-design/antd-style/compare/v3.6.0...v3.6.1) (2023-12-08)
 
 ### 🐛 Bug Fixes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd-style",
-  "version": "3.6.1",
+  "version": "3.6.2-beta.1",
   "description": "css-in-js solution for application combine with antd v5 token system and emotion",
   "keywords": [
     "antd",
@@ -69,72 +69,72 @@
     ]
   },
   "dependencies": {
-    "@ant-design/cssinjs": "^1",
-    "@babel/runtime": "^7",
-    "@emotion/cache": "^11",
-    "@emotion/css": "^11",
-    "@emotion/react": "^11",
-    "@emotion/serialize": "^1",
-    "@emotion/server": "^11",
-    "@emotion/utils": "^1",
-    "use-merge-value": "^1"
+    "@ant-design/cssinjs": "^1.18.5",
+    "@babel/runtime": "^7.24.1",
+    "@emotion/cache": "^11.11.0",
+    "@emotion/css": "^11.11.2",
+    "@emotion/react": "^11.11.4",
+    "@emotion/serialize": "^1.1.3",
+    "@emotion/server": "^11.11.0",
+    "@emotion/utils": "^1.2.1",
+    "use-merge-value": "^1.2.0"
   },
   "devDependencies": {
-    "@ant-design/icons": "^5",
-    "@commitlint/cli": "^17",
-    "@emotion/jest": "^11",
-    "@emotion/styled": "^11",
-    "@floating-ui/react": "^0.24",
-    "@lobehub/i18n-cli": "^1.14.3",
-    "@react-three/fiber": "^8",
-    "@testing-library/jest-dom": "^5",
-    "@testing-library/react": "^13",
-    "@types/fs-extra": "^11.0.1",
-    "@types/jest": "^27",
-    "@types/lodash": "^4",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "@types/testing-library__jest-dom": "^5",
-    "@umijs/lint": "^4",
+    "@ant-design/icons": "^5.3.5",
+    "@commitlint/cli": "^17.8.1",
+    "@emotion/jest": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@floating-ui/react": "^0.24.8",
+    "@lobehub/i18n-cli": "^1.15.4",
+    "@react-three/fiber": "^8.15.19",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^13.4.0",
+    "@types/fs-extra": "^11.0.4",
+    "@types/jest": "^27.5.2",
+    "@types/lodash": "^4.17.0",
+    "@types/react": "^18.2.69",
+    "@types/react-dom": "^18.2.22",
+    "@types/testing-library__jest-dom": "^5.14.9",
+    "@umijs/lint": "^4.1.5",
     "@vitest/coverage-v8": "0.34.6",
-    "antd": "^5",
-    "babel-plugin-antd-style": "^1",
-    "chalk": "^4",
-    "classnames": "^2",
-    "commitlint": "^17",
-    "commitlint-config-gitmoji": "^2",
-    "concurrently": "^7",
-    "cross-env": "^7",
-    "dumi": "^2",
+    "antd": "^5.15.3",
+    "babel-plugin-antd-style": "^1.0.4",
+    "chalk": "^4.1.2",
+    "classnames": "^2.5.1",
+    "commitlint": "^17.8.1",
+    "commitlint-config-gitmoji": "^2.3.1",
+    "concurrently": "^7.6.0",
+    "cross-env": "^7.0.3",
+    "dumi": "^2.2.17",
     "dumi-theme-antd-style": "latest",
-    "eslint": "^8",
-    "father": "^4",
-    "framer-motion": "^8",
-    "framer-motion-3d": "^8",
-    "fs-extra": "^11",
-    "gh-pages": "^5",
-    "history": "^5",
-    "husky": "^8",
-    "jsdom": "^22",
-    "lint-staged": "^13",
-    "lodash": "^4",
-    "prettier": "^2",
-    "prettier-plugin-organize-imports": "^3",
-    "prettier-plugin-packagejson": "^2",
-    "react": "^18",
-    "react-dom": "^18",
-    "react-layout-kit": "^1",
-    "react-use-measure": "^2",
-    "semantic-release": "^19",
-    "semantic-release-config-gitmoji": "^1",
-    "styled-components": "^6.0.0-rc.3",
-    "stylelint": "^14",
-    "three": "^0.148",
-    "ts-node": "^10",
-    "typescript": "^5",
-    "vite": "^4.5.0",
+    "eslint": "^8.57.0",
+    "father": "^4.4.0",
+    "framer-motion": "^8.5.5",
+    "framer-motion-3d": "^8.5.5",
+    "fs-extra": "^11.2.0",
+    "gh-pages": "^5.0.0",
+    "history": "^5.3.0",
+    "husky": "^8.0.3",
+    "jsdom": "^22.1.0",
+    "lint-staged": "^13.3.0",
+    "lodash": "^4.17.21",
+    "prettier": "^2.8.8",
+    "prettier-plugin-organize-imports": "^3.2.4",
+    "prettier-plugin-packagejson": "^2.4.12",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-layout-kit": "^1.9.0",
+    "react-use-measure": "^2.1.1",
+    "semantic-release": "^19.0.5",
+    "semantic-release-config-gitmoji": "^1.5.3",
+    "styled-components": "^6.1.8",
+    "stylelint": "^14.16.1",
+    "three": "^0.148.0",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.4.3",
+    "vite": "^4.5.2",
     "vitest": "0.34.6",
-    "zustand": "^4"
+    "zustand": "^4.5.2"
   },
   "peerDependencies": {
     "antd": ">=5.8.1",

src/core/createCSS.ts

@@ -7,6 +7,7 @@ import { serializeStyles } from '@emotion/serialize';
 const createClassNameGenerator =
   (cache: EmotionCache, options: ClassNameGeneratorOption): ClassNameGenerator =>
   (...args) => {
+    // @ts-ignore
     const serialized = serializeStyles(args, cache.registered, undefined);
 
     insertStyles(cache, serialized, false, options);

src/core/createSerializeStyles.ts

@@ -14,4 +14,6 @@ export interface SerializeCSS {
  * 提供给 createStyles 方法，用于将用户写入的 css 字符串序列化成特定结构的样式对象
  * @param args
  */
-export const serializeCSS: SerializeCSS = (...args) => serializeStyles(args);
+export const serializeCSS: SerializeCSS = (...args) =>
+  // @ts-ignore
+  serializeStyles(args);

src/factories/createThemeProvider/AntdProvider.tsx

@@ -67,4 +67,6 @@ const AntdProvider: FC<AntdProviderProps> = memo(
   },
 );
 
+AntdProvider.displayName = 'AntdProvider';
+
 export default AntdProvider;

src/factories/createThemeProvider/ThemeSwitcher.tsx

@@ -1,4 +1,4 @@
-import { FC, memo, ReactNode, useEffect, useLayoutEffect, useState } from 'react';
+import { FC, memo, ReactNode, useLayoutEffect, useState } from 'react';
 import useMergeValue from 'use-merge-value';
 
 import { ThemeModeContext } from '@/context';
@@ -120,16 +120,6 @@ const ThemeSwitcher: FC<ThemeSwitcherProps> = memo(
       matchBrowserPrefers('dark')?.matches ? 'dark' : 'light',
     );
 
-    const [startObserver, setStartObserver] = useState(false);
-
-    // Wait until after client-side hydration to show
-    useEffect(() => {
-      // 兼容 React18 的 Suspense 问题
-      safeStartTransition(() => {
-        setStartObserver(true);
-      });
-    }, []);
-
     return (
       <ThemeModeContext.Provider
         value={{
@@ -141,17 +131,22 @@ const ThemeSwitcher: FC<ThemeSwitcherProps> = memo(
           browserPrefers,
         }}
       >
-        {startObserver && (
-          <ThemeObserver
-            themeMode={themeMode}
-            setAppearance={setAppearance}
-            setBrowserPrefers={setBrowserPrefers}
-          />
-        )}
+        {
+          // Wait until after client-side hydration to show
+          typeof window !== 'undefined' && (
+            <ThemeObserver
+              themeMode={themeMode}
+              setAppearance={setAppearance}
+              setBrowserPrefers={setBrowserPrefers}
+            />
+          )
+        }
         {children}
       </ThemeModeContext.Provider>
     );
   },
 );
 
+ThemeSwitcher.displayName = 'ThemeSwitcher';
+
 export default ThemeSwitcher;

src/functions/createInstance.ts

@@ -1,4 +1,4 @@
-import { createContext } from 'react';
+import { createContext, FC } from 'react';
 
 import { CacheManager, createCSS, createEmotion, serializeCSS } from '@/core';
 
@@ -109,6 +109,8 @@ export const createInstance = <T = any>(options: CreateOptions<T>) => {
     useTheme,
   });
 
+  (ThemeProvider as FC).displayName = 'AntdStyleThemeProvider';
+
   // ******** 上面这些都和主题相关，如果做了任何改动，都需要排查一遍 ************ //
   const { cx } = createCSS(emotion.cache, { hashPriority: internalOptions.hashPriority });
   const { injectGlobal, keyframes } = emotion;