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

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

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