fix: fixed some TS issues during antd integration

ant-design · Jul 17, 2024 · b912ba3 · b912ba3
1 parent 271ee2a
commit b912ba3
Show file tree

Hide file tree

Showing 9 changed files with 147 additions and 61 deletions.
diff --git a/src/hooks/useToken.ts b/src/hooks/useToken.ts
@@ -1,31 +1,24 @@
 import type { Theme, TokenType } from '@ant-design/cssinjs';
 
-import type { OverrideTokenMap, TokenMap } from '../interface';
+import type { OverrideTokenMap, TokenMap, GlobalToken } from '../interface';
 
 export type TokenMapWithTheme<
   CompTokenMap extends TokenMap,
-  DesignToken extends TokenType,
   AliasToken extends TokenType,
+  DesignToken extends TokenType,
 > = {
-    [key in keyof OverrideTokenMap<CompTokenMap>]?: OverrideTokenMap<CompTokenMap>[key] & {
+    [key in keyof OverrideTokenMap<CompTokenMap, AliasToken>]?: OverrideTokenMap<CompTokenMap, AliasToken>[key] & {
       theme?: Theme<DesignToken, AliasToken>;
     };
   };
 
-export type GlobalToken<
-  CompTokenMap extends TokenMap,
-  AliasToken extends TokenType,
-> = Partial<AliasToken & CompTokenMap>;
-
 export interface UseTokenReturn<
   CompTokenMap extends TokenMap,
-  DesignToken extends TokenType,
   AliasToken extends TokenType,
+  DesignToken extends TokenType,
 > {
   token: GlobalToken<CompTokenMap, AliasToken>;
   realToken?: GlobalToken<CompTokenMap, AliasToken>;
-  /** Just merge `token` & `override` at top to save perf */
-  override: { override: OverrideTokenMap<CompTokenMap> };
   theme?: Theme<DesignToken, AliasToken>;
   components?: TokenMapWithTheme<CompTokenMap, DesignToken, AliasToken>;
   hashId?: string;

diff --git a/src/index.ts b/src/index.ts
@@ -1,4 +1,25 @@
 export { default as genStyleUtils } from './util/genStyleUtils';
-
 export { default as genCalc } from './util/calc';
-export type { default as AbstractCalculator } from './util/calc/calculator';
+export {
+  default as statisticToken,
+  merge as mergeToken,
+} from './util/statistic';
+
+export type {
+  OverrideTokenMap,
+  TokenMap,
+  TokenMapKey,
+  GlobalTokenWithComponent,
+  ComponentToken,
+  ComponentTokenKey,
+  GlobalToken,
+} from './interface';
+export type { default as AbstractCalculator } from './util/calc/calculator';
+export type {
+  FullToken,
+  GetDefaultToken,
+  GetDefaultTokenFn,
+  GenStyleFn,
+  TokenWithCommonCls,
+  CSSUtil,
+} from './util/genStyleUtils';
diff --git a/src/interface/components.ts b/src/interface/components.ts
@@ -1,14 +1,35 @@
 import type { TokenType } from '@ant-design/cssinjs';
 
-export type TokenMap = Record<string, TokenType>;
+export type TokenMap = object;
 
 export type TokenMapKey<CompTokenMap extends TokenMap> = Extract<keyof CompTokenMap, string>;
 
-export type OverrideTokenMap<CompTokenMap extends TokenMap> = Partial<CompTokenMap>;
+export type GlobalToken<
+  CompTokenMap extends TokenMap,
+  AliasToken extends TokenType,
+> = AliasToken & CompTokenMap;
 
-export type GlobalTokenWithComponent<CompTokenMap extends TokenMap, C extends TokenMapKey<CompTokenMap>> = CompTokenMap &
-  CompTokenMap[C];
+export type OverrideTokenMap<
+  CompTokenMap extends TokenMap,
+  AliasToken extends TokenType,
+> = {
+    [key in keyof CompTokenMap]: Partial<CompTokenMap[key]> & Partial<AliasToken>;
+  };
 
-export type ComponentToken<CompTokenMap extends TokenMap, C extends TokenMapKey<CompTokenMap>> = Exclude<OverrideTokenMap<CompTokenMap>[C], undefined>;
+export type GlobalTokenWithComponent<
+  CompTokenMap extends TokenMap,
+  AliasToken extends TokenType,
+  C extends TokenMapKey<CompTokenMap>
+> = GlobalToken<CompTokenMap, AliasToken> & CompTokenMap[C];
 
-export type ComponentTokenKey<CompTokenMap extends TokenMap, C extends TokenMapKey<CompTokenMap>> = keyof ComponentToken<CompTokenMap, C>;
+export type ComponentToken<
+  CompTokenMap extends TokenMap,
+  AliasToken extends TokenType,
+  C extends TokenMapKey<CompTokenMap>
+> = Exclude<OverrideTokenMap<CompTokenMap, AliasToken>[C], undefined>;
+
+export type ComponentTokenKey<
+  CompTokenMap extends TokenMap,
+  AliasToken extends TokenType,
+  C extends TokenMapKey<CompTokenMap>,
+> = keyof ComponentToken<CompTokenMap, AliasToken, C>;
diff --git a/src/interface/index.ts b/src/interface/index.ts
@@ -5,6 +5,7 @@ export type {
   GlobalTokenWithComponent,
   ComponentToken,
   ComponentTokenKey,
+  GlobalToken,
 } from './components';
 
 export type UseComponentStyleResult = [(node: React.ReactNode) => React.ReactElement, string];
diff --git a/src/util/genStyleUtils.tsx b/src/util/genStyleUtils.tsx
@@ -61,23 +61,27 @@ export type TokenWithCommonCls<T> = T & {
 
 export type FullToken<
   CompTokenMap extends TokenMap,
+  AliasToken extends TokenType,
   C extends TokenMapKey<CompTokenMap>,
-> = TokenWithCommonCls<GlobalTokenWithComponent<CompTokenMap, C>>;
+> = TokenWithCommonCls<GlobalTokenWithComponent<CompTokenMap, AliasToken, C>>;
 
 export type GenStyleFn<
   CompTokenMap extends TokenMap,
+  AliasToken extends TokenType,
   C extends TokenMapKey<CompTokenMap>,
-> = (token: FullToken<CompTokenMap, C>, info: StyleInfo) => CSSInterpolation;
+> = (token: FullToken<CompTokenMap, AliasToken, C>, info: StyleInfo) => CSSInterpolation;
 
 export type GetDefaultTokenFn<
   CompTokenMap extends TokenMap,
+  AliasToken extends TokenType,
   C extends TokenMapKey<CompTokenMap>,
-> = (token: Partial<CompTokenMap[C]>) => CompTokenMap[C];
+> = (token: AliasToken & Partial<CompTokenMap[C]>) => CompTokenMap[C];
 
 export type GetDefaultToken<
   CompTokenMap extends TokenMap,
+  AliasToken extends TokenType,
   C extends TokenMapKey<CompTokenMap>,
-> = null | CompTokenMap[C] | GetDefaultTokenFn<CompTokenMap, C>;
+> = null | CompTokenMap[C] | GetDefaultTokenFn<CompTokenMap, AliasToken, C>;
 
 export interface SubStyleComponentProps {
   prefixCls: string;
@@ -100,12 +104,12 @@ export type GetResetStyles<
 
 export default function genStyleUtils<
   CompTokenMap extends TokenMap,
-  DesignToken extends TokenType,
   AliasToken extends TokenType,
+  DesignToken extends TokenType,
 >(
   config: {
     usePrefix: UsePrefix;
-    useToken: UseToken<CompTokenMap, DesignToken, AliasToken>;
+    useToken: UseToken<CompTokenMap, AliasToken, DesignToken>;
     useCSP?: UseCSP;
     getResetStyles?: GetResetStyles<CompTokenMap, AliasToken>,
   }
@@ -120,20 +124,20 @@ export default function genStyleUtils<
 
   function genStyleHooks<C extends TokenMapKey<CompTokenMap>>(
     component: C | [C, string],
-    styleFn: GenStyleFn<CompTokenMap, C>,
-    getDefaultToken?: GetDefaultToken<CompTokenMap, C>,
+    styleFn: GenStyleFn<CompTokenMap, AliasToken, C>,
+    getDefaultToken?: GetDefaultToken<CompTokenMap, AliasToken, C>,
     options?: {
       resetStyle?: boolean;
       resetFont?: boolean;
       deprecatedTokens?: [
-        ComponentTokenKey<CompTokenMap, C>,
-        ComponentTokenKey<CompTokenMap, C>,
+        ComponentTokenKey<CompTokenMap, AliasToken, C>,
+        ComponentTokenKey<CompTokenMap, AliasToken, C>,
       ][];
       /**
        * Component tokens that do not need unit.
        */
       unitless?: {
-        [key in ComponentTokenKey<CompTokenMap, C>]: boolean;
+        [key in ComponentTokenKey<CompTokenMap, AliasToken, C>]: boolean;
       };
       /**
        * Only use component style in client side. Ignore in SSR.
@@ -167,7 +171,7 @@ export default function genStyleUtils<
     };
     Object.keys(originUnitless).forEach((key) => {
       compUnitless[prefixToken(key)] =
-        originUnitless[key as keyof ComponentTokenKey<CompTokenMap, C>];
+        originUnitless[key as keyof ComponentTokenKey<CompTokenMap, AliasToken, C>];
     });
 
     // Options
@@ -201,17 +205,17 @@ export default function genStyleUtils<
 
   function genCSSVarRegister<C extends TokenMapKey<CompTokenMap>>(
     component: C,
-    getDefaultToken: GetDefaultToken<CompTokenMap, C> | undefined,
+    getDefaultToken: GetDefaultToken<CompTokenMap, AliasToken, C> | undefined,
     options: {
       unitless?: {
-        [key in ComponentTokenKey<CompTokenMap, C>]: boolean;
+        [key in ComponentTokenKey<CompTokenMap, AliasToken, C>]: boolean;
       };
       ignore?: {
         [key in keyof AliasToken]?: boolean;
       };
       deprecatedTokens?: [
-        ComponentTokenKey<CompTokenMap, C>,
-        ComponentTokenKey<CompTokenMap, C>,
+        ComponentTokenKey<CompTokenMap, AliasToken, C>,
+        ComponentTokenKey<CompTokenMap, AliasToken, C>,
       ][];
       injectStyle?: boolean;
       prefixToken: (key: string) => string;
@@ -240,12 +244,12 @@ export default function genStyleUtils<
           scope: rootCls,
         },
         () => {
-          const defaultToken = getDefaultComponentToken<CompTokenMap, C>(
+          const defaultToken = getDefaultComponentToken<CompTokenMap, AliasToken, C>(
             component,
             realToken,
             getDefaultToken,
           );
-          const componentToken = getComponentToken<CompTokenMap, C>(
+          const componentToken = getComponentToken<CompTokenMap, AliasToken, C>(
             component,
             realToken,
             defaultToken,
@@ -289,15 +293,15 @@ export default function genStyleUtils<
 
   function genComponentStyleHook<C extends TokenMapKey<CompTokenMap>>(
     componentName: C | [C, string],
-    styleFn: GenStyleFn<CompTokenMap, C>,
-    getDefaultToken?: GetDefaultToken<CompTokenMap, C>,
+    styleFn: GenStyleFn<CompTokenMap, AliasToken, C>,
+    getDefaultToken?: GetDefaultToken<CompTokenMap, AliasToken, C>,
     options: {
       resetStyle?: boolean;
       resetFont?: boolean;
       // Deprecated token key map [["oldTokenKey", "newTokenKey"], ["oldTokenKey", "newTokenKey"]]
       deprecatedTokens?: [
-        ComponentTokenKey<CompTokenMap, C>,
-        ComponentTokenKey<CompTokenMap, C>,
+        ComponentTokenKey<CompTokenMap, AliasToken, C>,
+        ComponentTokenKey<CompTokenMap, AliasToken, C>,
       ][];
       /**
        * Only use component style in client side. Ignore in SSR.
@@ -309,10 +313,10 @@ export default function genStyleUtils<
       order?: number;
       injectStyle?: boolean;
       unitless?: {
-        [key in ComponentTokenKey<CompTokenMap, C>]: boolean;
+        [key in ComponentTokenKey<CompTokenMap, AliasToken, C>]: boolean;
       };
       genCommonStyle?: (
-        token: OverrideTokenMap<CompTokenMap>,
+        token: OverrideTokenMap<CompTokenMap, AliasToken>,
         componentPrefixCls: string,
         rootCls?: string,
         resetFont?: boolean,
@@ -392,11 +396,12 @@ export default function genStyleUtils<
 
           const defaultComponentToken = getDefaultComponentToken<
             CompTokenMap,
+            AliasToken,
             C
           >(component, realToken, getDefaultToken) ?? {};
 
           const componentCls = `.${prefixCls}`;
-          const componentToken = getComponentToken<CompTokenMap, C>(
+          const componentToken = getComponentToken<CompTokenMap, AliasToken, C>(
             component,
             realToken,
             defaultComponentToken,
@@ -427,7 +432,7 @@ export default function genStyleUtils<
               min,
             },
             cssVar ? defaultComponentToken : componentToken,
-          ) as FullToken<CompTokenMap, C>;
+          );
 
           const styleInterpolation = styleFn(mergedToken, {
             hashId,
@@ -456,15 +461,15 @@ export default function genStyleUtils<
 
   function genSubStyleComponent<C extends TokenMapKey<CompTokenMap>>(
     componentName: C | [C, string],
-    styleFn: GenStyleFn<CompTokenMap, C>,
-    getDefaultToken?: GetDefaultToken<CompTokenMap, C>,
+    styleFn: GenStyleFn<CompTokenMap, AliasToken, C>,
+    getDefaultToken?: GetDefaultToken<CompTokenMap, AliasToken, C>,
     options: {
       resetStyle?: boolean;
       resetFont?: boolean;
       // Deprecated token key map [["oldTokenKey", "newTokenKey"], ["oldTokenKey", "newTokenKey"]]
       deprecatedTokens?: [
-        ComponentTokenKey<CompTokenMap, C>,
-        ComponentTokenKey<CompTokenMap, C>,
+        ComponentTokenKey<CompTokenMap, AliasToken, C>,
+        ComponentTokenKey<CompTokenMap, AliasToken, C>,
       ][];
       /**
        * Only use component style in client side. Ignore in SSR.
@@ -476,7 +481,7 @@ export default function genStyleUtils<
       order?: number;
       injectStyle?: boolean;
       unitless?: {
-        [key in ComponentTokenKey<CompTokenMap, C>]: boolean;
+        [key in ComponentTokenKey<CompTokenMap, AliasToken, C>]: boolean;
       };
     } = {},
   ) {

diff --git a/src/util/getComponentToken.ts b/src/util/getComponentToken.ts
@@ -4,18 +4,23 @@ import type {
   TokenMapKey,
   ComponentTokenKey,
   ComponentToken,
-  OverrideTokenMap,
+  GlobalToken,
 } from '../interface';
+import type { TokenType } from '@ant-design/cssinjs';
 
-export default function getComponentToken<CompTokenMap extends TokenMap, C extends TokenMapKey<CompTokenMap>>(
+export default function getComponentToken<
+  CompTokenMap extends TokenMap,
+  AliasToken extends TokenType,
+  C extends TokenMapKey<CompTokenMap>,
+>(
   component: C,
-  token: OverrideTokenMap<CompTokenMap>,
+  token: GlobalToken<CompTokenMap, AliasToken>,
   defaultToken: CompTokenMap[C],
   options?: {
-    deprecatedTokens?: [ComponentTokenKey<CompTokenMap, C>, ComponentTokenKey<CompTokenMap, C>][];
+    deprecatedTokens?: [ComponentTokenKey<CompTokenMap, AliasToken, C>, ComponentTokenKey<CompTokenMap, AliasToken, C>][];
   },
 ) {
-  const customToken = { ...(token[component] as ComponentToken<CompTokenMap, C>) };
+  const customToken = { ...(token[component] as ComponentToken<CompTokenMap, AliasToken, C>) };
   if (options?.deprecatedTokens) {
     const { deprecatedTokens } = options;
     deprecatedTokens.forEach(([oldTokenKey, newTokenKey]) => {

diff --git a/src/util/getDefaultComponentToken.ts b/src/util/getDefaultComponentToken.ts
@@ -1,14 +1,19 @@
+import type { TokenType } from '@ant-design/cssinjs';
 import { merge as mergeToken } from './statistic';
 import type { GetDefaultToken, GetDefaultTokenFn } from './genStyleUtils';
-import type { OverrideTokenMap, TokenMap, TokenMapKey } from '../interface';
+import type { GlobalToken, TokenMap, TokenMapKey } from '../interface';
 
-export default function getDefaultComponentToken<CompTokenMap extends TokenMap, C extends TokenMapKey<CompTokenMap>>(
+export default function getDefaultComponentToken<
+  CompTokenMap extends TokenMap,
+  AliasToken extends TokenType,
+  C extends TokenMapKey<CompTokenMap>
+>(
   component: C,
-  token: OverrideTokenMap<CompTokenMap>,
-  getDefaultToken: GetDefaultToken<CompTokenMap, C>,
+  token: GlobalToken<CompTokenMap, AliasToken>,
+  getDefaultToken: GetDefaultToken<CompTokenMap, AliasToken, C>,
 ): any {
   if (typeof getDefaultToken === 'function') {
-    return (getDefaultToken as GetDefaultTokenFn<CompTokenMap, C>)(mergeToken<any>(token, token[component] ?? {}));
+    return (getDefaultToken as GetDefaultTokenFn<CompTokenMap, AliasToken, C>)(mergeToken<any>(token, token[component] ?? {}));
   }
   return getDefaultToken ?? {};
 };
diff --git a/tests/genStyleUtils.test.tsx b/tests/genStyleUtils.test.tsx
@@ -4,6 +4,10 @@ import { render, renderHook } from '@testing-library/react';
 import { genStyleUtils } from '../src'
 import type { CSSVarRegisterProps, SubStyleComponentProps } from '../src/util/genStyleUtils';
 
+interface TestCompTokenMap {
+  TestComponent: {}
+}
+
 describe('genStyleUtils', () => {
   const mockConfig = {
     usePrefix: jest.fn().mockReturnValue({
@@ -21,7 +25,7 @@ describe('genStyleUtils', () => {
     getResetStyles: jest.fn().mockReturnValue([]),
   };
 
-  const { genStyleHooks, genSubStyleComponent, genComponentStyleHook } = genStyleUtils(mockConfig);
+  const { genStyleHooks, genSubStyleComponent, genComponentStyleHook } = genStyleUtils<TestCompTokenMap, {}, {}>(mockConfig);
 
   describe('genStyleHooks', () => {
     it('should generate style hooks', () => {