|
|
@ -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,36 +30,37 @@ export default function useClientCache<CacheType>( |
|
|
|
return [times - 1, cache]; |
|
|
|
return [times - 1, cache]; |
|
|
|
}); |
|
|
|
}); |
|
|
|
}; |
|
|
|
}; |
|
|
|
watch( |
|
|
|
|
|
|
|
() => fullPath.value.slice(), |
|
|
|
|
|
|
|
(_, oldValue) => { |
|
|
|
|
|
|
|
clearCache(oldValue); |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
// Create cache |
|
|
|
|
|
|
|
watch( |
|
|
|
|
|
|
|
fullPathStr, |
|
|
|
|
|
|
|
() => { |
|
|
|
|
|
|
|
styleContext.cache.update(fullPath.value, prevCache => { |
|
|
|
|
|
|
|
const [times = 0, cache] = prevCache || []; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// HMR should always ignore cache since developer may change it |
|
|
|
watch( |
|
|
|
let tmpCache = cache; |
|
|
|
[fullPathStr, fullPath], |
|
|
|
if (process.env.NODE_ENV !== 'production' && cache && HMRUpdate) { |
|
|
|
([newStr], [oldStr, oldPath]) => { |
|
|
|
onCacheRemove?.(tmpCache, HMRUpdate); |
|
|
|
if (newStr !== oldStr) { |
|
|
|
tmpCache = null; |
|
|
|
if (oldPath) clearCache(oldPath); |
|
|
|
} |
|
|
|
// Create cache |
|
|
|
|
|
|
|
styleContext.cache.update(fullPath.value, prevCache => { |
|
|
|
|
|
|
|
const [times = 0, cache] = prevCache || []; |
|
|
|
|
|
|
|
|
|
|
|
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; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
// console.log('create'); |
|
|
|
|
|
|
|
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; |
|
|
|
} |
|
|
|
} |
|
|
|