|
|
@ -2,8 +2,7 @@ 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 { ComputedRef, Ref } from 'vue';
|
|
|
|
import { onBeforeUnmount, computed, watch } from 'vue';
|
|
|
|
import { onBeforeUnmount, computed, watch, watchEffect, shallowRef } from 'vue';
|
|
|
|
import eagerComputed from '../../eagerComputed';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export default function useClientCache<CacheType>(
|
|
|
|
export default function useClientCache<CacheType>(
|
|
|
|
prefix: string,
|
|
|
|
prefix: string,
|
|
|
@ -13,7 +12,10 @@ export default function useClientCache<CacheType>(
|
|
|
|
): ComputedRef<CacheType> {
|
|
|
|
): ComputedRef<CacheType> {
|
|
|
|
const styleContext = useStyleInject();
|
|
|
|
const styleContext = useStyleInject();
|
|
|
|
const fullPath = computed(() => [prefix, ...keyPath.value]);
|
|
|
|
const fullPath = computed(() => [prefix, ...keyPath.value]);
|
|
|
|
const fullPathStr = eagerComputed(() => fullPath.value.join('_'));
|
|
|
|
const fullPathStr = shallowRef('');
|
|
|
|
|
|
|
|
watchEffect(() => {
|
|
|
|
|
|
|
|
fullPathStr.value = fullPath.value.join('_');
|
|
|
|
|
|
|
|
});
|
|
|
|
const HMRUpdate = useHMR();
|
|
|
|
const HMRUpdate = useHMR();
|
|
|
|
const clearCache = (paths: typeof fullPath.value) => {
|
|
|
|
const clearCache = (paths: typeof fullPath.value) => {
|
|
|
|
styleContext.cache.update(paths, prevCache => {
|
|
|
|
styleContext.cache.update(paths, prevCache => {
|
|
|
@ -28,16 +30,13 @@ export default function useClientCache<CacheType>(
|
|
|
|
return [times - 1, cache];
|
|
|
|
return [times - 1, cache];
|
|
|
|
});
|
|
|
|
});
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
watch(
|
|
|
|
watch(
|
|
|
|
() => fullPath.value.slice(),
|
|
|
|
[fullPathStr, fullPath],
|
|
|
|
(_, oldValue) => {
|
|
|
|
([newStr], [oldStr, oldPath]) => {
|
|
|
|
clearCache(oldValue);
|
|
|
|
if (newStr !== oldStr) {
|
|
|
|
},
|
|
|
|
if (oldPath) clearCache(oldPath);
|
|
|
|
);
|
|
|
|
|
|
|
|
// Create cache
|
|
|
|
// Create cache
|
|
|
|
watch(
|
|
|
|
|
|
|
|
fullPathStr,
|
|
|
|
|
|
|
|
() => {
|
|
|
|
|
|
|
|
styleContext.cache.update(fullPath.value, prevCache => {
|
|
|
|
styleContext.cache.update(fullPath.value, prevCache => {
|
|
|
|
const [times = 0, cache] = prevCache || [];
|
|
|
|
const [times = 0, cache] = prevCache || [];
|
|
|
|
|
|
|
|
|
|
|
@ -47,17 +46,21 @@ export default function useClientCache<CacheType>(
|
|
|
|
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];
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{ immediate: true },
|
|
|
|
{ immediate: true },
|
|
|
|
);
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
onBeforeUnmount(() => {
|
|
|
|
onBeforeUnmount(() => {
|
|
|
|
clearCache(fullPath.value);
|
|
|
|
clearCache(fullPath.value);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
const val = computed(() => styleContext.cache.get(fullPath.value)![1]);
|
|
|
|
const val = computed(() => {
|
|
|
|
|
|
|
|
return styleContext.cache.get(fullPath.value)![1];
|
|
|
|
|
|
|
|
});
|
|
|
|
return val;
|
|
|
|
return val;
|
|
|
|
}
|
|
|
|
}
|
|
|
|