refactor(theme): migrate and refactor statistic.ts by @ant-design/cssinjs-utils

components/theme/internal.ts

@@ -1,5 +1,10 @@
 import { useStyleRegister } from '@ant-design/cssinjs';
-import { genCalc as calc, mergeToken } from '@ant-design/cssinjs-utils';
+import {
+  genCalc as calc,
+  mergeToken,
+  statisticToken,
+  statistic,
+} from '@ant-design/cssinjs-utils';
 
 import type {
   AliasToken,
@@ -22,14 +27,12 @@ import genComponentStyleHook, {
   genSubStyleComponent,
 } from './util/genComponentStyleHook';
 import genPresetColor from './util/genPresetColor';
-import statisticToken from './util/statistic';
 import useResetIconStyle from './util/useResetIconStyle';
 
 export type { CSSUtil } from '@ant-design/cssinjs-utils';
 
 export { DesignTokenContext, defaultConfig } from './context';
 export {
-  PresetColors,
   genComponentStyleHook,
   genSubStyleComponent,
   genPresetColor,
@@ -42,6 +45,9 @@ export {
   useResetIconStyle,
   useStyleRegister,
   useToken,
+  // constant
+  PresetColors,
+  statistic,
 };
 export type {
   AliasToken,

components/theme/util/genComponentStyleHook.tsx

@@ -2,6 +2,7 @@
 import type { ComponentType, FC, ReactElement } from 'react';
 import React, { useContext } from 'react';
 import type { CSSInterpolation } from '@ant-design/cssinjs';
+import { mergeToken, statisticToken } from '@ant-design/cssinjs-utils';
 import type { AbstractCalculator } from '@ant-design/cssinjs-utils';
 import { genCalc, token2CSSVar, useCSSVarRegister, useStyleRegister } from '@ant-design/cssinjs';
 import { warning } from 'rc-util';
@@ -18,7 +19,7 @@ import type {
 } from '../interface';
 import useToken, { ignore, unitless } from '../useToken';
 import genMaxMin from './maxmin';
-import statisticToken, { merge as mergeToken } from './statistic';
+
 import useResetIconStyle from './useResetIconStyle';
 
 export type OverrideTokenWithoutDerivative = ComponentTokenMap;

components/theme/util/statistic.ts

@@ -1,85 +0,0 @@
-import type { AnyObject } from '../../_util/type';
-
-declare const CSSINJS_STATISTIC: any;
-
-const enableStatistic =
-  process.env.NODE_ENV !== 'production' || typeof CSSINJS_STATISTIC !== 'undefined';
-let recording = true;
-
-/**
- * This function will do as `Object.assign` in production. But will use Object.defineProperty:get to
- * pass all value access in development. To support statistic field usage with alias token.
- */
-export function merge<T extends AnyObject>(...objs: Partial<T>[]): T {
-  /* istanbul ignore next */
-  if (!enableStatistic) {
-    return Object.assign({}, ...objs);
-  }
-
-  recording = false;
-
-  const ret = {} as T;
-
-  objs.forEach((obj) => {
-    const keys = Object.keys(obj);
-
-    keys.forEach((key) => {
-      Object.defineProperty(ret, key, {
-        configurable: true,
-        enumerable: true,
-        get: () => (obj as any)[key],
-      });
-    });
-  });
-
-  recording = true;
-  return ret;
-}
-
-/** @internal Internal Usage. Not use in your production. */
-export const statistic: Record<
-  string,
-  { global: string[]; component: Record<string, string | number> }
-> = {};
-
-/** @internal Internal Usage. Not use in your production. */
-// eslint-disable-next-line camelcase
-export const _statistic_build_: typeof statistic = {};
-
-/* istanbul ignore next */
-function noop() {}
-
-/** Statistic token usage case. Should use `merge` function if you do not want spread record. */
-const statisticToken = <T extends AnyObject>(token: T) => {
-  let tokenKeys: Set<string> | undefined;
-  let proxy = token;
-  let flush: (componentName: string, componentToken: Record<string, string | number>) => void =
-    noop;
-
-  if (enableStatistic && typeof Proxy !== 'undefined') {
-    tokenKeys = new Set<string>();
-
-    proxy = new Proxy(token, {
-      get(obj: any, prop: any) {
-        if (recording) {
-          tokenKeys!.add(prop);
-        }
-        return obj[prop];
-      },
-    });
-
-    flush = (componentName, componentToken) => {
-      statistic[componentName] = {
-        global: Array.from(tokenKeys!),
-        component: {
-          ...statistic[componentName]?.component,
-          ...componentToken,
-        },
-      };
-    };
-  }
-
-  return { token: proxy, keys: tokenKeys, flush };
-};
-
-export default statisticToken;

scripts/collect-token-statistic.ts

@@ -5,9 +5,8 @@ import cliProgress from 'cli-progress';
 import fs from 'fs-extra';
 import ReactDOMServer from 'react-dom/server';
 
-import { DesignTokenContext } from '../components/theme/internal';
+import { DesignTokenContext, statistic } from '../components/theme/internal';
 import seedToken from '../components/theme/themes/seed';
-import { statistic } from '../components/theme/util/statistic';
 import { generateCssinjs, styleFiles } from './generate-cssinjs';
 
 console.log(`🪄 Collecting token statistics...`);