From 8669b8825e1c4de68d88096740269b72bb57cdab Mon Sep 17 00:00:00 2001 From: arvinxx Date: Sun, 24 Mar 2024 15:01:58 +0800 Subject: [PATCH 1/3] :bug: fix: fix rerender with ThemeSwitcher --- .../createThemeProvider/AntdProvider.tsx | 2 ++ .../createThemeProvider/ThemeSwitcher.tsx | 31 ++++++++----------- src/functions/createInstance.ts | 4 ++- 3 files changed, 18 insertions(+), 19 deletions(-) diff --git a/src/factories/createThemeProvider/AntdProvider.tsx b/src/factories/createThemeProvider/AntdProvider.tsx index 369bc5d6..4d1ba172 100644 --- a/src/factories/createThemeProvider/AntdProvider.tsx +++ b/src/factories/createThemeProvider/AntdProvider.tsx @@ -67,4 +67,6 @@ const AntdProvider: FC = memo( }, ); +AntdProvider.displayName = 'AntdProvider'; + export default AntdProvider; diff --git a/src/factories/createThemeProvider/ThemeSwitcher.tsx b/src/factories/createThemeProvider/ThemeSwitcher.tsx index 3abde9cb..dd73000d 100644 --- a/src/factories/createThemeProvider/ThemeSwitcher.tsx +++ b/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 = 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 ( = memo( browserPrefers, }} > - {startObserver && ( - - )} + { + // Wait until after client-side hydration to show + typeof window !== 'undefined' && ( + + ) + } {children} ); }, ); +ThemeSwitcher.displayName = 'ThemeSwitcher'; + export default ThemeSwitcher; diff --git a/src/functions/createInstance.ts b/src/functions/createInstance.ts index 721ee7f9..eed03259 100644 --- a/src/functions/createInstance.ts +++ b/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 = (options: CreateOptions) => { useTheme, }); + (ThemeProvider as FC).displayName = 'AntdStyleThemeProvider'; + // ******** 上面这些都和主题相关，如果做了任何改动，都需要排查一遍 ************ // const { cx } = createCSS(emotion.cache, { hashPriority: internalOptions.hashPriority }); const { injectGlobal, keyframes } = emotion; From 3ccd27d1223e3b2a1bb639aa0537235ac41c0ac0 Mon Sep 17 00:00:00 2001 From: arvinxx Date: Sun, 24 Mar 2024 15:10:05 +0800 Subject: [PATCH 2/3] :rotating_light: chore: fix ci --- package.json | 122 +++++++++++++++--------------- src/core/createCSS.ts | 1 + src/core/createSerializeStyles.ts | 4 +- 3 files changed, 65 insertions(+), 62 deletions(-) diff --git a/package.json b/package.json index eab287d7..41b4fad5 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/core/createCSS.ts b/src/core/createCSS.ts index cb8f6465..89be9d6a 100644 --- a/src/core/createCSS.ts +++ b/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); diff --git a/src/core/createSerializeStyles.ts b/src/core/createSerializeStyles.ts index e4b7beb6..f1e1b574 100644 --- a/src/core/createSerializeStyles.ts +++ b/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); From 86f9d069c724a05fccd0cf00da99e7bd84533698 Mon Sep 17 00:00:00 2001 From: semantic-release-bot Date: Sun, 24 Mar 2024 07:12:48 +0000 Subject: [PATCH 3/3] :bookmark: chore(release): v3.6.2-beta.1 [skip ci] MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## [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)) --- CHANGELOG.md | 6 ++++++ package.json | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index efe65033..12f39dc4 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/package.json b/package.json index 41b4fad5..3c520b63 100644 --- a/package.json +++ b/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",