@antdv-next/cssinjs 1.0.0-rc.1 → 1.0.0-rc.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/StyleContext.d.mts +3 -3
  2. package/dist/cssinjs-utils/util/genStyleUtils.d.mts +5 -5
  3. package/dist/hooks/useGlobalCache.mjs +63 -33
  4. package/package.json +1 -1
package/dist/StyleContext.d.mts CHANGED
@@ -1,11 +1,11 @@
1
1
  import { Linter } from "./linters/interface.mjs";
2
2
  import "./linters/index.mjs";
3
3
  import { Entity, KeyType } from "./Cache.mjs";
4
- import * as vue0 from "vue";
4
+ import * as vue7 from "vue";
5
5
  import { App, Ref } from "vue";
6
6
 
7
7
  //#region src/StyleContext.d.ts
8
- declare function createCache(): vue0.Raw<Entity>;
8
+ declare function createCache(): vue7.Raw<Entity>;
9
9
  declare function useStyleContextProvide(props: Ref<StyleContextProps>): void;
10
10
  declare function provideStyleContext(app: App, props: Ref<StyleContextProps>): void;
11
11
  declare function useStyleContext(): Ref<{
@@ -105,6 +105,6 @@ interface StyleContextProps {
105
105
  autoPrefix?: boolean;
106
106
  }
107
107
  type StyleProviderProps = StyleContextProps;
108
- declare const StyleProvider: vue0.DefineSetupFnComponent<Partial<StyleContextProps>, {}, {}, Partial<StyleContextProps> & {}, vue0.PublicProps>;
108
+ declare const StyleProvider: vue7.DefineSetupFnComponent<Partial<StyleContextProps>, {}, {}, Partial<StyleContextProps> & {}, vue7.PublicProps>;
109
109
  //#endregion
110
110
  export { StyleProvider, StyleProviderProps, createCache, provideStyleContext, useStyleContext, useStyleContextProvide };
package/dist/cssinjs-utils/util/genStyleUtils.d.mts CHANGED
@@ -6,7 +6,7 @@ import "../../index.mjs";
6
6
  import { UseCSP } from "../hooks/useCSP.mjs";
7
7
  import { UsePrefix } from "../hooks/usePrefix.mjs";
8
8
  import { UseToken } from "../hooks/useToken.mjs";
9
- import * as vue2 from "vue";
9
+ import * as vue0 from "vue";
10
10
  import { Ref, UnwrapRef } from "vue";
11
11
 
12
12
  //#region src/cssinjs-utils/util/genStyleUtils.d.ts
@@ -81,7 +81,7 @@ declare function genStyleUtils<CompTokenMap extends TokenMap, AliasToken extends
81
81
  * @default true
82
82
  */
83
83
  injectStyle?: boolean;
84
- }) => (prefixCls: Ref<string>, rootCls?: Ref<string | undefined>) => readonly [Ref<string, string>, vue2.ComputedRef<string | undefined>];
84
+ }) => (prefixCls: Ref<string>, rootCls?: Ref<string | undefined>) => readonly [Ref<string, string>, vue0.ComputedRef<string | undefined>];
85
85
  genSubStyleComponent: <C extends TokenMapKey<CompTokenMap>>(componentName: C | [C, string], styleFn: GenStyleFn<CompTokenMap, AliasToken, C>, getDefaultToken?: GetDefaultToken<CompTokenMap, AliasToken, C>, options?: {
86
86
  resetStyle?: boolean;
87
87
  resetFont?: boolean;
@@ -96,13 +96,13 @@ declare function genStyleUtils<CompTokenMap extends TokenMap, AliasToken extends
96
96
  order?: number;
97
97
  injectStyle?: boolean;
98
98
  unitless?: Partial<Record<ComponentTokenKey<CompTokenMap, AliasToken, C>, boolean>>;
99
- }) => vue2.DefineComponent<vue2.ExtractPropTypes<{
99
+ }) => vue0.DefineComponent<vue0.ExtractPropTypes<{
100
100
  prefixCls: StringConstructor;
101
101
  rootCls: StringConstructor;
102
- }>, () => null, {}, {}, {}, vue2.ComponentOptionsMixin, vue2.ComponentOptionsMixin, {}, string, vue2.PublicProps, Readonly<vue2.ExtractPropTypes<{
102
+ }>, () => null, {}, {}, {}, vue0.ComponentOptionsMixin, vue0.ComponentOptionsMixin, {}, string, vue0.PublicProps, Readonly<vue0.ExtractPropTypes<{
103
103
  prefixCls: StringConstructor;
104
104
  rootCls: StringConstructor;
105
- }>> & Readonly<{}>, {}, {}, {}, {}, string, vue2.ComponentProvideOptions, true, {}, any>;
105
+ }>> & Readonly<{}>, {}, {}, {}, {}, string, vue0.ComponentProvideOptions, true, {}, any>;
106
106
  genComponentStyleHook: <C extends TokenMapKey<CompTokenMap>>(componentName: C | [C, string], styleFn: GenStyleFn<CompTokenMap, AliasToken, C>, getDefaultToken?: GetDefaultToken<CompTokenMap, AliasToken, C>, options?: {
107
107
  resetStyle?: boolean;
108
108
  resetFont?: boolean;
package/dist/hooks/useGlobalCache.mjs CHANGED
@@ -1,11 +1,17 @@
1
1
  import { pathKey } from "../Cache.mjs";
2
2
  import { useStyleContext } from "../StyleContext.mjs";
3
3
  import { isClientSide } from "../util/index.mjs";
4
- import { computed, watch } from "vue";
4
+ import { computed, onBeforeUnmount, shallowRef, watch } from "vue";
5
5
 
6
6
  //#region src/hooks/useGlobalCache.ts
7
7
  const effectMap = /* @__PURE__ */ new Map();
8
8
  /**
9
+ * 延迟移除样式的时间（毫秒）
10
+ * 用于解决 Vue Transition 动画期间样式被过早移除的问题
11
+ */
12
+ const REMOVE_STYLE_DELAY = 500;
13
+ const delayedRemoveTimers = /* @__PURE__ */ new Map();
14
+ /**
9
15
  * Global cache for CSS-in-JS styles
10
16
  *
11
17
  * This hook manages a reference-counted cache to ensure styles are properly
@@ -15,54 +21,78 @@ const effectMap = /* @__PURE__ */ new Map();
15
21
  * - No useInsertionEffect needed - Vue's watchEffect handles timing naturally
16
22
  * - No StrictMode double-mounting issues - Vue doesn't double-mount
17
23
  * - HMR handling is simpler - can rely on Vue's reactivity system
18
- * - No need for cleanup register pattern - onBeforeUnmount is sufficient
24
+ * - Uses onBeforeUnmount for cleanup instead of watch's onCleanup to have
25
+ * better control over cleanup timing (important for Transition animations)
19
26
  */
20
27
  function useGlobalCache(prefix, keyPath, cacheFn, onCacheRemove, onCacheEffect) {
21
28
  const styleContext = useStyleContext();
22
29
  const fullPath = computed(() => [prefix.value, ...keyPath.value]);
23
30
  const fullPathStr = computed(() => pathKey(fullPath.value));
24
- const buildCache = (updater) => {
25
- styleContext.value.cache.opUpdate(fullPathStr.value, (prevCache) => {
26
- const [times = 0, cache] = prevCache || [void 0, void 0];
27
- const data = [times, cache || cacheFn()];
28
- return updater ? updater(data) : data;
29
- });
31
+ const currentPathRef = shallowRef(fullPathStr.value);
32
+ const globalCache = () => styleContext.value.cache;
33
+ const isServerSide = () => styleContext.value.mock !== void 0 ? styleContext.value.mock === "server" : !isClientSide;
34
+ const clearCache = (pathStr, immediate = false) => {
35
+ if (isServerSide()) return;
36
+ const existingTimer = delayedRemoveTimers.get(pathStr);
37
+ if (existingTimer) {
38
+ clearTimeout(existingTimer);
39
+ delayedRemoveTimers.delete(pathStr);
40
+ }
41
+ const doCleanup = () => {
42
+ globalCache().opUpdate(pathStr, (prevCache) => {
43
+ const [times = 0, cache] = prevCache || [];
44
+ if (times - 1 === 0) {
45
+ onCacheRemove?.(cache, false);
46
+ effectMap.delete(pathStr);
47
+ return null;
48
+ }
49
+ return [times - 1, cache];
50
+ });
51
+ };
52
+ if (immediate || !isClientSide) doCleanup();
53
+ else {
54
+ const timer = setTimeout(() => {
55
+ delayedRemoveTimers.delete(pathStr);
56
+ doCleanup();
57
+ }, REMOVE_STYLE_DELAY);
58
+ delayedRemoveTimers.set(pathStr, timer);
59
+ }
30
60
  };
31
- const getCacheEntity = () => styleContext.value.cache.opGet(fullPathStr.value);
32
- buildCache();
33
61
  const cacheContent = computed(() => {
34
- let entity = styleContext.value.cache.opGet(fullPathStr.value);
62
+ let entity = globalCache().opGet(fullPathStr.value);
35
63
  if (!entity) {
36
- buildCache();
37
- entity = getCacheEntity();
64
+ globalCache().opUpdate(fullPathStr.value, (prevCache) => {
65
+ const [times = 0, cache] = prevCache || [void 0, void 0];
66
+ return [times, cache || cacheFn()];
67
+ });
68
+ entity = globalCache().opGet(fullPathStr.value);
38
69
  }
39
70
  return entity[1];
40
71
  });
41
- watch(fullPathStr, (_, _1, onCleanup) => {
42
- const currentPath = fullPathStr.value;
43
- buildCache(([times, cache]) => [times + 1, cache]);
44
- if (!effectMap.has(currentPath)) {
72
+ watch(fullPathStr, (newPath, oldPath) => {
73
+ if (oldPath) clearCache(oldPath, true);
74
+ currentPathRef.value = newPath;
75
+ const existingTimer = delayedRemoveTimers.get(newPath);
76
+ if (existingTimer) {
77
+ clearTimeout(existingTimer);
78
+ delayedRemoveTimers.delete(newPath);
79
+ }
80
+ globalCache().opUpdate(newPath, (prevCache) => {
81
+ const [times = 0, cache] = prevCache || [void 0, void 0];
82
+ const mergedCache = cache || cacheFn();
83
+ return [times + 1, mergedCache];
84
+ });
85
+ if (!effectMap.has(newPath)) {
45
86
  onCacheEffect?.(cacheContent.value);
46
- effectMap.set(currentPath, true);
87
+ effectMap.set(newPath, true);
47
88
  Promise.resolve().then(() => {
48
- effectMap.delete(currentPath);
89
+ effectMap.delete(newPath);
49
90
  });
50
91
  }
51
- const globalCache = styleContext.value.cache;
52
- const isServerSide = styleContext.value.mock !== void 0 ? styleContext.value.mock === "server" : !isClientSide;
53
- onCleanup(() => {
54
- if (isServerSide) return;
55
- globalCache.opUpdate(currentPath, (prevCache) => {
56
- const [times = 0, cache] = prevCache || [];
57
- if (times - 1 === 0) {
58
- onCacheRemove?.(cache, false);
59
- effectMap.delete(currentPath);
60
- return null;
61
- }
62
- return [times - 1, cache];
63
- });
64
- });
65
92
  }, { immediate: true });
93
+ onBeforeUnmount(() => {
94
+ clearCache(currentPathRef.value);
95
+ });
66
96
  return cacheContent;
67
97
  }
68
98
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@antdv-next/cssinjs",
3
3
  "type": "module",
4
- "version": "1.0.0-rc.1",
4
+ "version": "1.0.0-rc.2",
5
5
  "description": "cssinjs solution for ant-design-vue",
6
6
  "exports": {
7
7
  ".": {