refactor: more cache (#45302)

* chore: cache

* chore: clean up

* chore: clean up

* refactor: part

* chore: bump

* chore: fix lint

* chore: fix lint

* chore: fix alt

components/config-provider/index.tsx

@@ -24,11 +24,11 @@ import defaultSeedToken from '../theme/themes/seed';
 import type {
   BadgeConfig,
   ButtonConfig,
-  DrawerConfig,
   ComponentStyleConfig,
   ConfigConsumerProps,
   CSPConfig,
   DirectionType,
+  DrawerConfig,
   FlexConfig,
   ModalConfig,
   PopupOverflow,
@@ -547,16 +547,21 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
       parsedComponents[componentName] = parsedToken;
     });
 
+    const mergedToken = {
+      ...defaultSeedToken,
+      ...token,
+    };
+
     return {
       ...rest,
       theme: themeObj,
 
-      token: {
+      token: mergedToken,
-        ...defaultSeedToken,
-        ...token,
-      },
-
       components: parsedComponents,
+      override: {
+        override: mergedToken,
+        ...parsedComponents,
+      },
     };
   }, [mergedTheme]);
 

components/theme/context.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 import type { Theme } from '@ant-design/cssinjs';
 import { createTheme } from '@ant-design/cssinjs';
-import React from 'react';
+
 import type { AliasToken, MapToken, OverrideToken, SeedToken } from './interface';
 import defaultDerivative from './themes/default';
 import defaultSeedToken from './themes/seed';
@@ -11,17 +12,22 @@ export const defaultTheme = createTheme(defaultDerivative);
 // To ensure snapshot stable. We disable hashed in test env.
 export const defaultConfig = {
   token: defaultSeedToken,
+  override: { override: defaultSeedToken },
   hashed: true,
 };
 
+export type ComponentsToken = {
+  [key in keyof OverrideToken]?: OverrideToken[key] & {
+    theme?: Theme<SeedToken, MapToken>;
+  };
+};
+
 export interface DesignTokenProviderProps {
   token: Partial<AliasToken>;
   theme?: Theme<SeedToken, MapToken>;
-  components?: {
+  components?: ComponentsToken;
-    [key in keyof OverrideToken]?: OverrideToken[key] & {
+  /** Just merge `token` & `override` at top to save perf */
-      theme?: Theme<SeedToken, MapToken>;
+  override: { override: Partial<AliasToken> } & ComponentsToken;
-    };
-  };
   hashed?: string | boolean;
 }
 

components/theme/useToken.ts

@@ -1,10 +1,11 @@
+import React from 'react';
 import type { Theme } from '@ant-design/cssinjs';
 import { useCacheToken } from '@ant-design/cssinjs';
-import React from 'react';
+
 import version from '../version';
-import type { AliasToken, GlobalToken, MapToken, SeedToken } from './interface';
 import type { DesignTokenProviderProps } from './context';
 import { defaultTheme, DesignTokenContext } from './context';
+import type { AliasToken, GlobalToken, MapToken, SeedToken } from './interface';
 import defaultSeedToken from './themes/seed';
 import formatToken from './util/alias';
 
@@ -57,12 +58,7 @@ export default function useToken(): [
   token: GlobalToken,
   hashId: string,
 ] {
-  const {
+  const { token: rootDesignToken, hashed, theme, override } = React.useContext(DesignTokenContext);
-    token: rootDesignToken,
-    hashed,
-    theme,
-    components,
-  } = React.useContext(DesignTokenContext);
 
   const salt = `${version}-${hashed || ''}`;
 
@@ -73,7 +69,7 @@ export default function useToken(): [
     [defaultSeedToken, rootDesignToken],
     {
       salt,
-      override: { override: rootDesignToken, ...components },
+      override,
       getComputedToken,
       // formatToken will not be consumed after 1.15.0 with getComputedToken.
       // But token will break if @ant-design/cssinjs is under 1.15.0 without it

components/tree/demo/virtual-scroll.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Tree } from 'antd';
+import { Tooltip, Tree } from 'antd';
 import type { DataNode } from 'antd/es/tree';
 
 const dig = (path = '0', level = 3) => {
@@ -22,6 +22,15 @@ const dig = (path = '0', level = 3) => {
 
 const treeData = dig();
 
-const App: React.FC = () => <Tree treeData={treeData} height={233} defaultExpandAll />;
+const MemoTooltip = Tooltip || React.memo(Tooltip);
+
+const App: React.FC = () => (
+  <Tree
+    treeData={treeData}
+    height={233}
+    defaultExpandAll
+    titleRender={(item) => <MemoTooltip title={item.title as any}>{item.title as any}</MemoTooltip>}
+  />
+);
 
 export default App;

package.json

@@ -110,7 +110,7 @@
   ],
   "dependencies": {
     "@ant-design/colors": "^7.0.0",
-    "@ant-design/cssinjs": "^1.17.0",
+    "@ant-design/cssinjs": "^1.17.1",
     "@ant-design/icons": "^5.2.6",
     "@ant-design/react-slick": "~1.0.2",
     "@babel/runtime": "^7.18.3",
@@ -154,7 +154,7 @@
     "rc-tree": "~5.7.12",
     "rc-tree-select": "~5.13.0",
     "rc-upload": "~4.3.5",
-    "rc-util": "^5.37.0",
+    "rc-util": "^5.38.0",
     "scroll-into-view-if-needed": "^3.0.3",
     "throttle-debounce": "^5.0.0"
   },
@@ -217,7 +217,7 @@
     "cross-fetch": "^4.0.0",
     "crypto": "^1.0.1",
     "dekko": "^0.2.1",
-    "dumi": "^2.3.0-alpha.4",
+    "dumi": "^2.3.0-alpha.7",
     "dumi-plugin-color-chunk": "^1.0.2",
     "duplicate-package-checker-webpack-plugin": "^3.0.0",
     "esbuild-loader": "^4.0.0",

scripts/collect-token-statistic.ts

@@ -1,9 +1,10 @@
 /* eslint-disable no-console */
+import React from 'react';
 import chalk from 'chalk';
 import fs from 'fs-extra';
 import ProgressBar from 'progress';
-import React from 'react';
 import ReactDOMServer from 'react-dom/server';
+
 import { DesignTokenContext } from '../components/theme/internal';
 import seedToken from '../components/theme/themes/seed';
 import { statistic } from '../components/theme/util/statistic';
@@ -26,10 +27,18 @@ const bar = new ProgressBar('🚀 Collecting by component: [:bar] :component (:c
     render(Component: any) {
       ReactDOMServer.renderToString(React.createElement(Component));
       // Render wireframe
+      const wireframeToken = { ...seedToken, wireframe: true };
       ReactDOMServer.renderToString(
         React.createElement(
           DesignTokenContext.Provider,
-          { value: { token: { ...seedToken, wireframe: true } } },
+          {
+            value: {
+              token: wireframeToken,
+              override: {
+                override: wireframeToken,
+              },
+            },
+          },
           React.createElement(Component),
         ),
       );