From ddfe37a14e2abd9d66aa43fabd0efd359a78e322 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Fri, 11 Aug 2023 19:37:53 +0800 Subject: [PATCH] docs: bump theme-editor (#44171) * chore: fix plugin antd import * chore: code clean * chore: fix image test * chore: fix image test --- .dumi/pages/theme-editor/index.tsx | 142 ++++------------------------- .dumi/theme/plugin.ts | 23 ++++- .dumirc.ts | 2 +- .jest.js | 2 + package.json | 2 +- tests/shared/imageTest.tsx | 2 +- 6 files changed, 42 insertions(+), 131 deletions(-) diff --git a/.dumi/pages/theme-editor/index.tsx b/.dumi/pages/theme-editor/index.tsx index 1ee416a805..d67fa4ca52 100644 --- a/.dumi/pages/theme-editor/index.tsx +++ b/.dumi/pages/theme-editor/index.tsx @@ -1,17 +1,11 @@ -import { createStyles } from 'antd-style'; -import { ThemeEditor, enUS, zhCN } from 'antd-token-previewer'; +import { enUS, zhCN } from 'antd-token-previewer'; import { Helmet } from 'dumi'; -import React, { Suspense, useCallback, useEffect, useState } from 'react'; -import type { JSONContent, TextContent } from 'vanilla-jsoneditor'; +import React, { Suspense, useEffect } from 'react'; import type { ThemeConfig } from 'antd/es/config-provider/context'; -import { Button, ConfigProvider, Modal, Spin, Typography, message } from 'antd'; +import { Button, message, Skeleton } from 'antd'; import useLocale from '../../hooks/useLocale'; -const JSONEditor = React.lazy(() => import('../../theme/common/JSONEditor')); - -function isObject(target: any) { - return Object.prototype.toString.call(target) === '[object Object]'; -} +const ThemeEditor = React.lazy(() => import('antd-token-previewer/lib/ThemeEditor')); const locales = { cn: { @@ -38,17 +32,6 @@ const locales = { }, }; -const useStyle = createStyles(({ css }) => ({ - header: css({ - display: 'flex', - height: 56, - alignItems: 'center', - padding: '0 24px', - justifyContent: 'space-between', - borderBottom: '1px solid #F0F0F0', - }), -})); - const ANT_DESIGN_V5_THEME_EDITOR_THEME = 'ant-design-v5-theme-editor-theme'; const CustomTheme = () => { @@ -57,13 +40,6 @@ const CustomTheme = () => { const [theme, setTheme] = React.useState({}); - const [editModelOpen, setEditModelOpen] = useState(false); - const [editThemeFormatRight, setEditThemeFormatRight] = useState(true); - const [themeConfigContent, setThemeConfigContent] = useState({ - text: '{}', - json: undefined, - }); - useEffect(() => { const storedConfig = localStorage.getItem(ANT_DESIGN_V5_THEME_EDITOR_THEME); if (storedConfig) { @@ -77,61 +53,11 @@ const CustomTheme = () => { } }, []); - const { styles } = useStyle(); - const handleSave = () => { localStorage.setItem(ANT_DESIGN_V5_THEME_EDITOR_THEME, JSON.stringify(theme)); messageApi.success(locale.saveSuccessfully); }; - const handleEditConfig = () => { - setEditModelOpen(true); - }; - - const editModelClose = useCallback(() => { - setEditModelOpen(false); - }, [themeConfigContent]); - - const handleEditConfigChange = (newcontent, preContent, status) => { - setThemeConfigContent(newcontent); - setEditThemeFormatRight(!status.contentErrors); - }; - - const editSave = useCallback(() => { - const contentFormatError = !editThemeFormatRight; - - if (contentFormatError) { - message.error(locale.editJsonContentTypeError); - return; - } - const themeConfig = themeConfigContent.text - ? JSON.parse(themeConfigContent.text) - : themeConfigContent.json; - if (!isObject(themeConfig)) { - message.error(locale.editJsonContentTypeError); - return; - } - setTheme(themeConfig); - editModelClose(); - messageApi.success(locale.editSuccessfully); - }, [themeConfigContent, editThemeFormatRight]); - - const handleExport = () => { - const file = new File([JSON.stringify(theme, null, 2)], `Ant Design Theme.json`, { - type: 'text/json; charset=utf-8;', - }); - const tmpLink = document.createElement('a'); - const objectUrl = URL.createObjectURL(file); - - tmpLink.href = objectUrl; - tmpLink.download = file.name; - document.body.appendChild(tmpLink); - tmpLink.click(); - - document.body.removeChild(tmpLink); - URL.revokeObjectURL(objectUrl); - }; - return (
@@ -139,58 +65,22 @@ const CustomTheme = () => { {contextHolder} - -
- - {locale.title} - -
- - - -
- } - > - - - - - + }> + { + setTheme(newTheme.config); + }} + locale={lang === 'cn' ? zhCN : enUS} + actions={ -
-
- { - setTheme(newTheme.config); - setThemeConfigContent({ - json: newTheme.config, - text: undefined, - }); - }} - locale={lang === 'cn' ? zhCN : enUS} + } /> - + ); }; diff --git a/.dumi/theme/plugin.ts b/.dumi/theme/plugin.ts index 68438c08ab..2f312dc468 100644 --- a/.dumi/theme/plugin.ts +++ b/.dumi/theme/plugin.ts @@ -5,9 +5,28 @@ import type { IApi, IRoute } from 'dumi'; import ReactTechStack from 'dumi/dist/techStacks/react'; import chalk from 'chalk'; import sylvanas from 'sylvanas'; -import { extractStaticStyle } from 'antd-style'; +import createEmotionServer from '@emotion/server/create-instance'; import localPackage from '../../package.json'; +function extractEmotionStyle(html: string) { + // copy from emotion ssr + // https://github.com/vercel/next.js/blob/deprecated-main/examples/with-emotion-vanilla/pages/_document.js + const styles = global.__ANTD_STYLE_CACHE_MANAGER_FOR_SSR__.getCacheList().map((cache) => { + const result = createEmotionServer(cache).extractCritical(html); + if (!result.css) return null; + + const { css, ids } = result; + + return { + key: cache.key, + css, + ids, + tag: ``, + }; + }); + return styles.filter(Boolean); +} + export const getHash = (str: string, length = 8) => createHash('md5').update(str).digest('hex').slice(0, length); @@ -129,7 +148,7 @@ const RoutesPlugin = (api: IApi) => { file.content = file.content.replace('', `${globalStyles}`); // 1. 提取 antd-style 样式 - const styles = extractStaticStyle(file.content, { includeAntd: false }); + const styles = extractEmotionStyle(file.content); // 2. 提取每个样式到独立 css 文件 styles.forEach((result) => { diff --git a/.dumirc.ts b/.dumirc.ts index 2f7b95de0a..f9aed1f0e5 100644 --- a/.dumirc.ts +++ b/.dumirc.ts @@ -11,6 +11,7 @@ export default defineConfig({ }, ssr: process.env.NODE_ENV === 'production' ? {} : false, hash: true, + mfsu: false, crossorigin: {}, outputPath: '_site', favicons: ['https://gw.alipayobjects.com/zos/rmsportal/rlpTLlbMzTNYuZGGCVYM.png'], @@ -34,7 +35,6 @@ export default defineConfig({ }, extraRehypePlugins: [rehypeAntd], extraRemarkPlugins: [remarkAntd], - mfsu: false, metas: [{ name: 'theme-color', content: '#1677ff' }], analytics: { ga_v2: 'UA-72788897-1', diff --git a/.jest.js b/.jest.js index 08ff43ec46..20d85ca82e 100644 --- a/.jest.js +++ b/.jest.js @@ -33,6 +33,8 @@ module.exports = { '/\\.(css|less)$/': 'identity-obj-proxy', '^antd$': '/components/index', '^antd/es/(.*)$': '/components/$1', + '^antd/lib/(.*)$': '/components/$1', + '^antd/locale/(.*)$': '/components/locale/$1', }, testPathIgnorePatterns: ['/node_modules/', 'dekko', 'node', 'image.test.js', 'image.test.ts'], transform: { diff --git a/package.json b/package.json index 19565db1c2..70ced90bb9 100644 --- a/package.json +++ b/package.json @@ -210,7 +210,7 @@ "@typescript-eslint/parser": "^5.40.0", "antd-img-crop": "^4.9.0", "antd-style": "^3.4.2-beta.1", - "antd-token-previewer": "^1.1.0-21", + "antd-token-previewer": "^2.0.1", "chalk": "^4.0.0", "cheerio": "1.0.0-rc.12", "circular-dependency-plugin": "^5.2.2", diff --git a/tests/shared/imageTest.tsx b/tests/shared/imageTest.tsx index 16c91160cc..372e1a18fe 100644 --- a/tests/shared/imageTest.tsx +++ b/tests/shared/imageTest.tsx @@ -38,7 +38,7 @@ export default function imageTest(component: React.ReactElement) { MockDate.set(dayjs('2016-11-22').valueOf()); page.on('request', onRequestHandle); await page.goto(`file://${process.cwd()}/tests/index.html`); - await page.addStyleTag({ path: `${process.cwd()}/dist/reset.css` }); + await page.addStyleTag({ path: `${process.cwd()}/components/style/reset.css` }); await page.addStyleTag({ content: '*{animation: none!important;}' }); const cache = createCache();