wip: useSelectorPattern

Author: johnsoncodehk

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

@@ -115,6 +115,29 @@ export function render(_ctx) {
 }"
 `;
 
+exports[`compiler: v-for > selector pattern 1`] = `
+"import { setClass as _setClass, useSelectorPattern as _useSelectorPattern, child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
+const t0 = _template("<tr> </tr>", true)
+
+export function render(_ctx) {
+  const _selector0 = _useSelectorPattern(() => _ctx.selected, (..._args) => {
+  _setClass(_args[0], _args[1])
+  }, 'danger', '')
+  const n0 = _createFor(() => (_ctx.rows), (_for_item0) => {
+    _selector0.register(_for_item0.value.id, _for_item0)
+    const n2 = t0()
+    const x2 = _child(n2)
+    _renderEffect(() => {
+      const _row = _for_item0.value
+      const _row_id = _row.id
+      _setText(x2, _toDisplayString(_row_id))
+    })
+    return n2
+  }, (row) => (row.id))
+  return n0
+}"
+`;
+
 exports[`compiler: v-for > v-for aliases w/ complex expressions 1`] = `
 "import { getDefaultValue as _getDefaultValue, child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
 const t0 = _template("<div> </div>", true)

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

@@ -67,6 +67,23 @@ describe('compiler: v-for', () => {
     ).lengthOf(1)
   })
 
+  test('selector pattern', () => {
+    const { code, helpers } = compileWithVFor(
+      `
+      <tr
+        v-for="row of rows"
+        :key="row.id"
+        :class="selected === row.id ? 'danger' : ''"
+      >
+        {{ row.id }}
+      </tr>
+      `,
+    )
+
+    expect(code).matchSnapshot()
+    expect(helpers).contains('useSelectorPattern')
+  })
+
   test('multi effect', () => {
     const { code } = compileWithVFor(
       `<div v-for="(item, index) of items" :item="item" :index="index" />`,

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

@@ -1,16 +1,25 @@
 import {
   type SimpleExpressionNode,
   createSimpleExpression,
+  isStaticNode,
   walkIdentifiers,
 } from '@vue/compiler-dom'
-import { genBlock } from './block'
+import { genBlockContent } from './block'
 import { genExpression } from './expression'
 import type { CodegenContext } from '../generate'
-import type { ForIRNode } from '../ir'
-import { type CodeFragment, NEWLINE, genCall, genMulti } from './utils'
-import type { Identifier } from '@babel/types'
+import type { BlockIRNode, ForIRNode, IREffect } from '../ir'
+import {
+  type CodeFragment,
+  INDENT_END,
+  INDENT_START,
+  NEWLINE,
+  genCall,
+  genMulti,
+} from './utils'
+import { isNodesEquivalent, type Identifier } from '@babel/types'
 import { parseExpression } from '@babel/parser'
 import { VaporVForFlags } from '../../../shared/src/vaporFlags'
+import { getRuntimeHelper } from './prop'
 
 export function genFor(
   oper: ForIRNode,
@@ -78,7 +87,53 @@ export function genFor(
     idMap[indexVar] = null
   }
 
-  const blockFn = context.withId(() => genBlock(render, context, args), idMap)
+  const { selectorPatterns } = matchPatterns(render, keyProp)
+  const patternFrag: CodeFragment[] = []
+
+  for (let i = 0; i < selectorPatterns.length; i++) {
+    const { selector, trueValue, falseValue, effect } = selectorPatterns[i]
+    const selectorName = `_selector${i}`
+    const args: CodeFragment[] = [
+      `() => `,
+      ...genExpression(selector, context),
+      `, (..._args) => {`,
+    ]
+    for (const oper of effect.operations) {
+      const resolvedHelper = getRuntimeHelper(
+        oper.tag,
+        oper.prop.key.content,
+        oper.prop.modifier,
+      )
+      args.push(
+        NEWLINE,
+        ...genCall([helper(resolvedHelper.name), null], `_args[0]`, `_args[1]`),
+      )
+    }
+    args.push(NEWLINE, `}, `, trueValue, `, `, falseValue)
+    patternFrag.push(
+      NEWLINE,
+      `const ${selectorName} = `,
+      ...genCall(helper('useSelectorPattern'), args),
+    )
+  }
+
+  const blockFn = context.withId(() => {
+    const frag: CodeFragment[] = []
+    frag.push('(', ...args, ') => {', INDENT_START)
+    for (let i = 0; i < selectorPatterns.length; i++) {
+      frag.push(
+        NEWLINE,
+        `_selector${i}.register(`,
+        ...genExpression(keyProp!, context),
+        `, `,
+        itemVar,
+        `)`,
+      )
+    }
+    frag.push(...genBlockContent(render, context))
+    frag.push(INDENT_END, NEWLINE, '}')
+    return frag
+  }, idMap)
   exitScope()
 
   let flags = 0
@@ -93,6 +148,7 @@ export function genFor(
   }
 
   return [
+    ...patternFrag,
     NEWLINE,
     `const n${id} = `,
     ...genCall(
@@ -234,3 +290,83 @@ export function genFor(
     return idMap
   }
 }
+
+function matchPatterns(
+  render: BlockIRNode,
+  keyProp: SimpleExpressionNode | undefined,
+) {
+  const selectorPatterns: NonNullable<
+    ReturnType<typeof matchSelectorPattern>
+  >[] = []
+
+  render.effect = render.effect.filter(effect => {
+    if (keyProp !== undefined) {
+      const pattern = matchSelectorPattern(effect, keyProp)
+      if (pattern) {
+        selectorPatterns.push(pattern)
+        return false
+      }
+    }
+    return true
+  })
+
+  return {
+    selectorPatterns,
+  }
+}
+
+function matchSelectorPattern(
+  effect: IREffect,
+  keyProp: SimpleExpressionNode,
+):
+  | {
+      effect: IREffect
+      selector: SimpleExpressionNode
+      trueValue: string
+      falseValue: string
+    }
+  | undefined {
+  // TODO: expressions can be multiple?
+  if (effect.expressions.length === 1) {
+    const ast = effect.expressions[0].ast
+    const content = effect.expressions[0].content
+    if (
+      keyProp !== undefined &&
+      typeof ast === 'object' &&
+      ast?.type === 'ConditionalExpression' &&
+      ast.test.type === 'BinaryExpression' &&
+      ast.test.operator === '===' &&
+      ast.test.left.type !== 'PrivateName' &&
+      isStaticNode(ast.consequent) &&
+      isStaticNode(ast.alternate)
+    ) {
+      const left = ast.test.left
+      const right = ast.test.right
+      for (const [a, b] of [
+        [left, right],
+        [right, left],
+      ]) {
+        if (isNodesEquivalent(a, keyProp.ast)) {
+          return {
+            effect,
+            trueValue: content.slice(
+              ast.consequent.start! - 1,
+              ast.consequent.end! - 1,
+            ),
+            falseValue: content.slice(
+              ast.alternate.start! - 1,
+              ast.alternate.end! - 1,
+            ),
+            selector: {
+              content: content.slice(b.start! - 1, b.end! - 1),
+              ast: b,
+              loc: b.loc as any,
+              isStatic: false,
+            } as any,
+          }
+        }
+      }
+    }
+  }
+  return
+}

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

@@ -163,7 +163,7 @@ export function genPropValue(
   )
 }
 
-function getRuntimeHelper(
+export function getRuntimeHelper(
   tag: string,
   key: string,
   modifier: '.' | '^' | undefined,

packages/runtime-vapor/src/index.ts

@@ -54,3 +54,48 @@ export { withVaporDirectives } from './directives/custom'
  * @internal
  */
 export { simpleSetCurrentInstance } from '@vue/runtime-core'
+
+import { watch } from '@vue/reactivity'
+
+export function useSelectorPattern(
+  getActiveKey: () => any,
+  setter: (element: any, value: any) => void,
+  trueValue: any,
+  falseValue: any,
+): {
+  register: (key: any, element: any) => void
+} {
+  const nodeMap = new Map()
+  let trueElements: any[] | undefined
+
+  watch(getActiveKey, newValue => {
+    if (trueElements !== undefined) {
+      for (const n of trueElements) {
+        setter(n, falseValue)
+      }
+    }
+    trueElements = nodeMap.get(newValue)
+    if (trueElements !== undefined) {
+      for (const n of trueElements) {
+        setter(n, trueValue)
+      }
+    }
+  })
+
+  return { register }
+
+  function register(key: any, element: any): void {
+    const isTrue = getActiveKey() === key
+    setter(element, isTrue ? trueValue : falseValue)
+    let elements = nodeMap.get(key)
+    if (elements !== undefined) {
+      elements.push(element)
+    } else {
+      elements = [element]
+      nodeMap.set(key, elements)
+      if (isTrue) {
+        trueElements = elements
+      }
+    }
+  }
+}