feat(runtime-vapor): KeepAlive (wip)

packages/runtime-vapor/__tests__/components/KeepAlive.spec.ts

@@ -0,0 +1,87 @@
+describe.todo('KeepAlive', () => {
+ test.todo('should preserve state', async () => {})
+
+ test.todo('should call correct lifecycle hooks', async () => {})
+
+ test.todo(
+ 'should call correct lifecycle hooks when toggle the KeepAlive first',
+ async () => {},
+ )
+
+ test.todo('should call lifecycle hooks on nested components', async () => {})
+
+ test.todo(
+ 'should call lifecycle hooks on nested components when root component no hooks',
+ async () => {},
+ )
+
+ test.todo('should call correct hooks for nested keep-alive', async () => {})
+
+ describe.todo('props', () => {
+ test.todo('include (string)', async () => {})
+
+ test.todo('include (regex)', async () => {})
+
+ test.todo('include (array)', async () => {})
+
+ test.todo('exclude (string)', async () => {})
+
+ test.todo('exclude (regex)', async () => {})
+
+ test.todo('exclude (array)', async () => {})
+
+ test.todo('include + exclude', async () => {})
+
+ test.todo('max', async () => {})
+ })
+
+ describe.todo('cache invalidation', () => {
+ test('on include change', async () => {
+ test.todo('on exclude change', async () => {})
+
+ test.todo('on include change + view switch', async () => {})
+
+ test.todo('on exclude change + view switch', async () => {})
+
+ test.todo('should not prune current active instance', async () => {})
+
+ // vuejs/vue #6938
+ test.todo(
+ 'should not cache anonymous component when include is specified',
+ async () => {},
+ )
+
+ test.todo(
+ 'should cache anonymous components if include is not specified',
+ async () => {},
+ )
+
+ // vuejs/vue #7105
+ test.todo(
+ 'should not destroy active instance when pruning cache',
+ async () => {},
+ )
+
+ test.todo(
+ 'should update re-activated component if props have changed',
+ async () => {},
+ )
+ })
+ })
+
+ it.todo('should call correct vnode hooks', async () => {})
+
+ // vuejs/core #1511
+ test.todo(
+ 'should work with cloned root due to scopeId / fallthrough attrs',
+ async () => {},
+ )
+
+ test.todo('should work with async component', async () => {})
+
+ // vuejs/core #4976
+ test.todo('handle error in async onActivated', async () => {})
+
+ // vuejs/core #3648
+ test.todo('should avoid unmount later included components', async () => {})
+})

packages/runtime-vapor/src/component.ts

@@ -187,6 +187,7 @@ export interface ComponentInternalInstance {
  isMounted: boolean
  isUnmounted: boolean
  isUpdating: boolean
+ isDeactivated?: boolean
  // TODO: registory of provides, lifecycles, ...
  /**
  * @internal

packages/runtime-vapor/src/components/KeepAlive.ts

@@ -0,0 +1,230 @@
+import {
+ type Component,
+ type ComponentInternalInstance,
+ type ObjectComponent,
+ getCurrentInstance,
+} from '../component'
+import type { Block } from '../apiRender'
+import { invokeArrayFns, isArray, isRegExp, isString } from '@vue/shared'
+import { queuePostFlushCb } from '../scheduler'
+import { watch } from '../apiWatch'
+import { onBeforeUnmount, onMounted, onUpdated } from '../apiLifecycle'
+import { warn } from '..'
+
+type MatchPattern = string | RegExp | (string | RegExp)[]
+
+export interface KeepAliveProps {
+ include?: MatchPattern
+ exclude?: MatchPattern
+ max?: number | string
+}
+
+type CacheKey = PropertyKey | Component
+type Cache = Map<CacheKey, ComponentInternalInstance>
+type Keys = Set<CacheKey>
+
+// TODO: render coantext alternative
+export interface KeepAliveComponentInternalInstance
+ extends ComponentInternalInstance {
+ activate: () => void
+ deactivate: () => void
+}
+
+export const isKeepAlive = (instance: ComponentInternalInstance): boolean =>
+ (instance as any).__isKeepAlive
+
+const KeepAliveImpl: ObjectComponent = {
+ name: 'KeepAlive',
+
+ // @ts-expect-error
+ __isKeepAlive: true,
+
+ props: {
+ include: [String, RegExp, Array],
+ exclude: [String, RegExp, Array],
+ max: [String, Number],
+ },
+
+ setup(props: KeepAliveProps, { slots }) {
+ const instance = getCurrentInstance() as KeepAliveComponentInternalInstance
+
+ // TODO: ssr
+
+ const cache: Cache = new Map()
+ const keys: Keys = new Set()
+ let current: ComponentInternalInstance | null = null
+
+ // TODO: is it necessary?
+ // if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
+ // ;(instance as any).__v_cache = cache
+ // }
+
+ // TODO: suspense
+ // const parentSuspense = instance.suspense
+
+ // TODO:
+ // const storageContainer = template('<div></div>')()
+
+ instance.activate = () => {
+ // TODO:
+ // move(vnode, container, anchor, MoveType.ENTER, parentSuspense)
+
+ // TODO: suspense (queuePostRenderEffect)
+ queuePostFlushCb(() => {
+ instance.isDeactivated = false
+ if (instance.a) {
+ invokeArrayFns(instance.a)
+ }
+ })
+
+ // TODO: devtools
+ // if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
+ // // Update components tree
+ // devtoolsComponentAdded(instance)
+ // }
+ }
+
+ instance.deactivate = () => {
+ // TODO:
+ // invalidateMount(instance.m)
+ // invalidateMount(instance.a)
+ // move(vnode, storageContainer, null, MoveType.LEAVE, parentSuspense)
+
+ // TODO: suspense (queuePostRenderEffect)
+ queuePostFlushCb(() => {
+ if (instance.da) {
+ invokeArrayFns(instance.da)
+ }
+ instance.isDeactivated = true
+ })
+
+ // TODO: devtools
+ // if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
+ // // Update components tree
+ // devtoolsComponentAdded(instance)
+ // }
+ }
+
+ function pruneCache(filter?: (name: string) => boolean) {
+ cache.forEach((cachedInstance, key) => {
+ const name = cachedInstance.type.name
+ if (name && (!filter || !filter(name))) {
+ pruneCacheEntry(key)
+ }
+ })
+ }
+
+ function pruneCacheEntry(key: CacheKey) {
+ const cached = cache.get(key)
+ if (!current || cached !== current) {
+ // TODO:
+ // unmount(cached)
+ } else if (current) {
+ // current active instance should no longer be kept-alive.
+ // we can't unmount it now but it might be later, so reset its flag now.
+ // TODO:
+ // resetShapeFlag(current)
+ }
+ cache.delete(key)
+ keys.delete(key)
+ }
+
+ // prune cache on include/exclude prop change
+ watch(
+ () => [props.include, props.exclude],
+ ([include, exclude]) => {
+ include && pruneCache(name => matches(include, name))
+ exclude && pruneCache(name => !matches(exclude, name))
+ },
+ // prune post-render after `current` has been updated
+ { flush: 'post', deep: true },
+ )
+
+ // cache sub tree after render
+ let pendingCacheKey: CacheKey | null = null
+ const cacheSubtree = () => {
+ // fix #1621, the pendingCacheKey could be 0
+ if (pendingCacheKey != null) {
+ cache.set(pendingCacheKey, instance)
+ }
+ }
+ onMounted(cacheSubtree)
+ onUpdated(cacheSubtree)
+
+ onBeforeUnmount(() => {
+ // TODO:
+ })
+
+ // TODO: effects
+ return () => {
+ pendingCacheKey = null
+
+ if (!slots.default) {
+ return null
+ }
+
+ const children = slots.default()
+ const childInstance = children as ComponentInternalInstance
+ if (isArray(children) && children.length > 1) {
+ if (__DEV__) {
+ warn(`KeepAlive should contain exactly one component child.`)
+ }
+ current = null
+ return children
+ } else {
+ // TODO:
+ }
+
+ const name = childInstance.type.name
+ const { include, exclude, max } = props
+
+ if (
+ (include && (!name || !matches(include, name))) ||
+ (exclude && name && matches(exclude, name))
+ ) {
+ return (current = childInstance)
+ }
+
+ const key = childInstance.type // TODO: vnode key
+ const cachedBlock = cache.get(key)
+
+ pendingCacheKey = key
+
+ if (cachedBlock) {
+ // TODO: setTransitionHooks
+
+ keys.delete(key)
+ keys.add(key)
+ } else {
+ keys.add(key)
+ if (max && keys.size > parseInt(max as string, 10)) {
+ pruneCacheEntry(keys.values().next().value)
+ }
+ }
+
+ return (current = childInstance)
+ }
+ },
+}
+
+export const KeepAlive = KeepAliveImpl as any as {
+ __isKeepAlive: true
+ new (): {
+ $props: KeepAliveProps
+ $slots: {
+ default(): Block
+ }
+ }
+}
+
+function matches(pattern: MatchPattern, name: string): boolean {
+ if (isArray(pattern)) {
+ return pattern.some((p: string | RegExp) => matches(p, name))
+ } else if (isString(pattern)) {
+ return pattern.split(',').includes(name)
+ } else if (isRegExp(pattern)) {
+ return pattern.test(name)
+ }
+ /* istanbul ignore next */
+ return false
+}