github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: cssinjs effect error

pull/6358/head
tangjinzhou 2023-03-13 11:11:40 +08:00
parent f819a1b209
commit b22bd85828
2 changed files with 29 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/_util/cssinjs/Cache.ts
View File

@ -5,12 +5,12 @@ class Entity {
/** @private Internal cache map. Do not access this directly */
cache = new Map<string, ValueType>();
get(keys: KeyType[]): ValueType | null {
return this.cache.get(keys.join('%')) || null;
get(keys: KeyType[] | string): ValueType | null {
return this.cache.get(Array.isArray(keys) ? keys.join('%') : keys) || null;
}
update(keys: KeyType[], valueFn: (origin: ValueType | null) => ValueType | null) {
const path = keys.join('%');
update(keys: KeyType[] | string, valueFn: (origin: ValueType | null) => ValueType | null) {
const path = Array.isArray(keys) ? keys.join('%') : keys;
const prevValue = this.cache.get(path)!;
const nextValue = valueFn(prevValue);

58
components/_util/cssinjs/hooks/useGlobalCache.tsx
View File

@ -1,27 +1,25 @@
import { useStyleInject } from '../StyleContext';
import type { KeyType } from '../Cache';
import useHMR from './useHMR';
import type { ComputedRef, Ref } from 'vue';
import { onBeforeUnmount, computed, watch, watchEffect, shallowRef } from 'vue';
import type { ShallowRef, Ref } from 'vue';
import { onBeforeUnmount, watch, watchEffect, shallowRef } from 'vue';
export default function useClientCache<CacheType>(
prefix: string,
keyPath: Ref<KeyType[]>,
cacheFn: () => CacheType,
onCacheRemove?: (cache: CacheType, fromHMR: boolean) => void,
): ComputedRef<CacheType> {
): ShallowRef<CacheType> {
const styleContext = useStyleInject();
const fullPath = computed(() => [prefix, ...keyPath.value]);
const fullPathStr = shallowRef('');
const res = shallowRef<CacheType>();
watchEffect(() => {
fullPathStr.value = fullPath.value.join('_');
fullPathStr.value = [prefix, ...keyPath.value].join('%');
});
const HMRUpdate = useHMR();
const clearCache = (paths: typeof fullPath.value) => {
styleContext.cache.update(paths, prevCache => {
const clearCache = (pathStr: string) => {
styleContext.cache.update(pathStr, prevCache => {
const [times = 0, cache] = prevCache || [];
const nextCount = times - 1;
if (nextCount === 0) {
onCacheRemove?.(cache, false);
return null;
@ -32,35 +30,29 @@ export default function useClientCache<CacheType>(
};
watch(
[fullPathStr, fullPath],
([newStr], [oldStr, oldPath]) => {
if (newStr !== oldStr) {
if (oldPath) clearCache(oldPath);
// Create cache
styleContext.cache.update(fullPath.value, prevCache => {
const [times = 0, cache] = prevCache || [];
fullPathStr,
(newStr, oldStr) => {
if (oldStr) clearCache(oldStr);
// Create cache
styleContext.cache.update(newStr, prevCache => {
const [times = 0, cache] = prevCache || [];
// HMR should always ignore cache since developer may change it
let tmpCache = cache;
if (process.env.NODE_ENV !== 'production' && cache && HMRUpdate) {
onCacheRemove?.(tmpCache, HMRUpdate);
tmpCache = null;
}
// console.log('create');
const mergedCache = tmpCache || cacheFn();
// HMR should always ignore cache since developer may change it
let tmpCache = cache;
if (process.env.NODE_ENV !== 'production' && cache && HMRUpdate) {
onCacheRemove?.(tmpCache, HMRUpdate);
tmpCache = null;
}
const mergedCache = tmpCache || cacheFn();
return [times + 1, mergedCache];
});
}
return [times + 1, mergedCache];
});
res.value = styleContext.cache.get(fullPathStr.value)![1];
},
{ immediate: true },
);
onBeforeUnmount(() => {
clearCache(fullPath.value);
clearCache(fullPathStr.value);
});
const val = computed(() => {
return styleContext.cache.get(fullPath.value)![1];
});
return val;
return res;
}