perf(runtime-vapor): remove reliance on onScopeDispose in useSelector

Author: johnsoncodehk

packages/compiler-vapor/__tests__/transforms/__snapshots__/vFor.spec.ts.snap

@@ -137,36 +137,36 @@ export function render(_ctx) {
 `;
 
 exports[`compiler: v-for > selector pattern 1`] = `
-"import { useSelectorPattern as _useSelectorPattern, child as _child, toDisplayString as _toDisplayString, setText as _setText, createFor as _createFor, template as _template } from 'vue';
+"import { child as _child, toDisplayString as _toDisplayString, setText as _setText, createFor as _createFor, template as _template } from 'vue';
 const t0 = _template("<tr> </tr>", true)
 
 export function render(_ctx) {
-  const _selector0_0 = _useSelectorPattern(() => _ctx.selected, () => (_ctx.rows))
   const n0 = _createFor(() => (_ctx.rows), (_for_item0) => {
     const n2 = t0()
     const x2 = _child(n2)
-    _selector0_0.register(_for_item0.value.id, () => {
+    _selector0_0.register(() => {
       _setText(x2, _toDisplayString(_ctx.selected === _for_item0.value.id ? 'danger' : ''))
     })
     return n2
   }, (row) => (row.id))
+  const _selector0_0 = n0.useSelector(() => _ctx.selected)
   return n0
 }"
 `;
 
 exports[`compiler: v-for > selector pattern 2`] = `
-"import { useSelectorPattern as _useSelectorPattern, setClass as _setClass, createFor as _createFor, template as _template } from 'vue';
+"import { setClass as _setClass, createFor as _createFor, template as _template } from 'vue';
 const t0 = _template("<tr></tr>", true)
 
 export function render(_ctx) {
-  const _selector0_0 = _useSelectorPattern(() => _ctx.selected, () => (_ctx.rows))
   const n0 = _createFor(() => (_ctx.rows), (_for_item0) => {
     const n2 = t0()
-    _selector0_0.register(_for_item0.value.id, () => {
+    _selector0_0.register(() => {
       _setClass(n2, _ctx.selected === _for_item0.value.id ? 'danger' : '')
     })
     return n2
   }, (row) => (row.id))
+  const _selector0_0 = n0.useSelector(() => _ctx.selected)
   return n0
 }"
 `;
@@ -189,18 +189,18 @@ export function render(_ctx) {
 `;
 
 exports[`compiler: v-for > selector pattern 4`] = `
-"import { useSelectorPattern as _useSelectorPattern, setClass as _setClass, createFor as _createFor, template as _template } from 'vue';
+"import { setClass as _setClass, createFor as _createFor, template as _template } from 'vue';
 const t0 = _template("<tr></tr>", true)
 
 export function render(_ctx) {
-  const _selector0_0 = _useSelectorPattern(() => _ctx.selected, () => (_ctx.rows))
   const n0 = _createFor(() => (_ctx.rows), (_for_item0) => {
     const n2 = t0()
-    _selector0_0.register(_for_item0.value.id, () => {
+    _selector0_0.register(() => {
       _setClass(n2, { danger: _for_item0.value.id === _ctx.selected })
     })
     return n2
   }, (row) => (row.id))
+  const _selector0_0 = n0.useSelector(() => _ctx.selected)
   return n0
 }"
 `;

packages/compiler-vapor/src/generators/for.ts

@@ -107,11 +107,9 @@ export function genFor(
     patternFrag.push(
       NEWLINE,
       `const ${selectorName} = `,
-      ...genCall(helper('useSelectorPattern'), [
+      ...genCall(`n${id}.useSelector`, [
         `() => `,
         ...genExpression(selector, context),
-        `, `,
-        ...sourceExpr,
       ]),
     )
   }
@@ -120,9 +118,6 @@ export function genFor(
     const frag: CodeFragment[] = []
     frag.push('(', ...args, ') => {', INDENT_START)
     if (selectorPatterns.length || keyOnlyBindingPatterns.length) {
-      const keyExpr =
-        render.expressions.find(expr => expr.content === keyProp!.content) ??
-        keyProp!
       frag.push(
         ...genBlockContent(render, context, false, () => {
           const patternFrag: CodeFragment[] = []
@@ -131,9 +126,7 @@ export function genFor(
             const { effect } = selectorPatterns[i]
             patternFrag.push(
               NEWLINE,
-              `_selector${id}_${i}.register(`,
-              ...genExpression(keyExpr, context),
-              `, () => {`,
+              `_selector${id}_${i}.register(() => {`,
               INDENT_START,
             )
             for (const oper of effect.operations) {
@@ -171,7 +164,6 @@ export function genFor(
   }
 
   return [
-    ...patternFrag,
     NEWLINE,
     `const n${id} = `,
     ...genCall(
@@ -182,6 +174,7 @@ export function genFor(
       flags ? String(flags) : undefined,
       // todo: hydrationNode
     ),
+    ...patternFrag,
   ]
 
   // construct a id -> accessor path map.

packages/runtime-vapor/src/apiCreateFor.ts

@@ -3,7 +3,6 @@ import {
   type ShallowRef,
   isReactive,
   isShallow,
-  onScopeDispose,
   pauseTracking,
   resetTracking,
   shallowReadArray,
@@ -80,12 +79,15 @@ export const createFor = (
   let oldBlocks: ForBlock[] = []
   let newBlocks: ForBlock[]
   let parent: ParentNode | undefined | null
+  // useSelector only
+  let currentKey: any
   // TODO handle this in hydration
   const parentAnchor = __DEV__ ? createComment('for') : createTextNode()
   const frag = new VaporFragment(oldBlocks)
   const instance = currentInstance!
   const canUseFastRemove = flags & VaporVForFlags.FAST_REMOVE
   const isComponent = flags & VaporVForFlags.IS_COMPONENT
+  const selectors: ReturnType<typeof useSelector>[] = []
 
   if (__DEV__ && !instance) {
     warn('createFor() can only be used inside setup()')
@@ -113,9 +115,12 @@ export const createFor = (
         }
       } else if (!newLength) {
         // fast path for clearing all
+        for (const selector of selectors) {
+          selector.cleanup()
+        }
         const doRemove = !canUseFastRemove
         for (let i = 0; i < oldLength; i++) {
-          unmount(oldBlocks[i], doRemove)
+          unmount(oldBlocks[i], doRemove, false)
         }
         if (canUseFastRemove) {
           parent!.textContent = ''
@@ -230,6 +235,7 @@ export const createFor = (
     const keyRef = needKey ? shallowRef(key) : undefined
     const indexRef = needIndex ? shallowRef(index) : undefined
 
+    currentKey = key2
     let nodes: Block
     let scope: EffectScope | undefined
     if (isComponent) {
@@ -292,9 +298,18 @@ export const createFor = (
     }
   }
 
-  const unmount = ({ nodes, scope }: ForBlock, doRemove = true) => {
+  const unmount = (
+    { nodes, scope, key }: ForBlock,
+    doRemove = true,
+    doDeregister = true,
+  ) => {
     scope && scope.stop()
     doRemove && removeBlock(nodes, parent!)
+    if (doDeregister) {
+      for (const selector of selectors) {
+        selector.deregister(key)
+      }
+    }
   }
 
   if (flags & VaporVForFlags.ONCE) {
@@ -307,7 +322,63 @@ export const createFor = (
     insert(frag, _insertionParent, _insertionAnchor)
   }
 
+  // @ts-expect-error
+  frag.useSelector = useSelector
+
   return frag
+
+  function useSelector(getActiveKey: () => any): {
+    register: (key: any, cb: () => void) => void
+    deregister: (key: any) => void
+    cleanup: () => void
+  } {
+    let operMap = new Map<any, (() => void)[]>()
+    let activeKey = getActiveKey()
+    let activeOpers: (() => void)[] | undefined
+
+    watch(getActiveKey, newValue => {
+      if (activeOpers !== undefined) {
+        for (const oper of activeOpers) {
+          oper()
+        }
+      }
+      activeOpers = operMap.get(newValue)
+      if (activeOpers !== undefined) {
+        for (const oper of activeOpers) {
+          oper()
+        }
+      }
+    })
+
+    const res = { register, deregister, cleanup }
+    selectors.push(res)
+    return res
+
+    function cleanup() {
+      operMap = new Map()
+    }
+
+    function register(oper: () => void) {
+      oper()
+      let opers = operMap.get(currentKey)
+      if (opers !== undefined) {
+        opers.push(oper)
+      } else {
+        opers = [oper]
+        operMap.set(currentKey, opers)
+        if (currentKey === activeKey) {
+          activeOpers = opers
+        }
+      }
+    }
+
+    function deregister(key: any) {
+      operMap.delete(key)
+      if (key === activeKey) {
+        activeOpers = undefined
+      }
+    }
+  }
 }
 
 export function createForSlots(
@@ -390,74 +461,3 @@ export function getRestElement(val: any, keys: string[]): any {
 export function getDefaultValue(val: any, defaultVal: any): any {
   return val === undefined ? defaultVal : val
 }
-
-export function useSelectorPattern(
-  getActiveKey: () => any,
-  source: () => any[],
-): {
-  register: (key: any, cb: () => void) => void
-} {
-  let mapVersion = 1
-  let operMap = new Map<any, (() => void)[]>()
-  let activeOpers: (() => void)[] | undefined
-
-  watch(source, newValue => {
-    if (Array.isArray(newValue) && !newValue.length) {
-      operMap = new Map()
-      activeOpers = undefined
-      mapVersion++
-    }
-  })
-  watch(getActiveKey, newValue => {
-    if (activeOpers !== undefined) {
-      for (const oper of activeOpers) {
-        oper()
-      }
-    }
-    activeOpers = operMap.get(newValue)
-    if (activeOpers !== undefined) {
-      for (const oper of activeOpers) {
-        oper()
-      }
-    }
-  })
-
-  return { register }
-
-  function register(key: any, oper: () => void) {
-    oper()
-    let opers = operMap.get(key)
-    if (opers !== undefined) {
-      opers.push(oper)
-    } else {
-      opers = [oper]
-      operMap.set(key, opers)
-      if (getActiveKey() === key) {
-        activeOpers = opers
-      }
-    }
-    const currentMapVersion = mapVersion
-    onScopeDispose(() => {
-      if (currentMapVersion === mapVersion) {
-        deregister(key, oper)
-      }
-    })
-  }
-
-  function deregister(key: any, oper: () => void) {
-    const opers = operMap.get(key)
-    if (opers !== undefined) {
-      if (opers.length === 1) {
-        operMap.delete(key)
-        if (activeOpers === opers) {
-          activeOpers = undefined
-        }
-      } else {
-        const index = opers.indexOf(oper)
-        if (index >= 0) {
-          opers.splice(index, 1)
-        }
-      }
-    }
-  }
-}

packages/runtime-vapor/src/index.ts

@@ -37,7 +37,6 @@ export {
   createForSlots,
   getRestElement,
   getDefaultValue,
-  useSelectorPattern,
 } from './apiCreateFor'
 export { createTemplateRefSetter } from './apiTemplateRef'
 export { createDynamicComponent } from './apiCreateDynamicComponent'