feat: destructuring + nesting in v-for (#217)

Co-authored-by: 三咲智子 Kevin Deng <sxzz@sxzz.moe>

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

@@ -17,10 +17,10 @@ exports[`compiler: template ref transform > ref + v-for 1`] = `
 const t0 = _template("<div></div>")
 
 export function render(_ctx) {
-  const n0 = _createFor(() => ([1,2,3]), (_block) => {
+  const n0 = _createFor(() => ([1,2,3]), (_ctx0) => {
     const n2 = t0()
     _setRef(n2, "foo", void 0, true)
-    return [n2, () => {}]
+    return n2
   })
   return n0
 }"

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

@@ -1,39 +1,102 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`compiler: v-for > array de-structured value 1`] = `
+"import { renderEffect as _renderEffect, setText as _setText, createFor as _createFor, template as _template } from 'vue/vapor';
+const t0 = _template("<div></div>")
+
+export function render(_ctx) {
+  const n0 = _createFor(() => (_ctx.list), (_ctx0) => {
+    const n2 = t0()
+    _renderEffect(() => _setText(n2, _ctx0[0] + _ctx0[1] + _ctx0[2]))
+    return n2
+  }, ([id, ...other], index) => (id), null, null, false, _state => {
+    const [[id, ...other], index] = _state
+    return [id, other, index]
+  })
+  return n0
+}"
+`;
+
 exports[`compiler: v-for > basic v-for 1`] = `
-"import { delegate as _delegate, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, delegateEvents as _delegateEvents, template as _template } from 'vue/vapor';
+"import { delegate as _delegate, renderEffect as _renderEffect, setText as _setText, createFor as _createFor, delegateEvents as _delegateEvents, template as _template } from 'vue/vapor';
 const t0 = _template("<div></div>")
 _delegateEvents("click")
 
 export function render(_ctx) {
-  const n0 = _createFor(() => (_ctx.items), (_block) => {
+  const n0 = _createFor(() => (_ctx.items), (_ctx0) => {
     const n2 = t0()
-    _delegate(n2, "click", () => $event => (_ctx.remove(_block.s[0])))
-    const _updateEffect = () => {
-      const [item] = _block.s
-      _setText(n2, item)
-    }
-    _renderEffect(_updateEffect)
-    return [n2, _updateEffect]
+    _delegate(n2, "click", () => $event => (_ctx.remove(_ctx0[0])))
+    _renderEffect(() => _setText(n2, _ctx0[0]))
+    return n2
   }, (item) => (item.id))
   return n0
 }"
 `;
 
 exports[`compiler: v-for > multi effect 1`] = `
-"import { setDynamicProp as _setDynamicProp, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue/vapor';
+"import { renderEffect as _renderEffect, setDynamicProp as _setDynamicProp, createFor as _createFor, template as _template } from 'vue/vapor';
+const t0 = _template("<div></div>")
+
+export function render(_ctx) {
+  const n0 = _createFor(() => (_ctx.items), (_ctx0) => {
+    const n2 = t0()
+    _renderEffect(() => _setDynamicProp(n2, "item", _ctx0[0]))
+    _renderEffect(() => _setDynamicProp(n2, "index", _ctx0[1]))
+    return n2
+  })
+  return n0
+}"
+`;
+
+exports[`compiler: v-for > nested v-for 1`] = `
+"import { renderEffect as _renderEffect, setText as _setText, createFor as _createFor, insert as _insert, template as _template } from 'vue/vapor';
+const t0 = _template("<span></span>")
+const t1 = _template("<div></div>")
+
+export function render(_ctx) {
+  const n0 = _createFor(() => (_ctx.list), (_ctx0) => {
+    const n5 = t1()
+    const n2 = _createFor(() => (_ctx0[0]), (_ctx2) => {
+      const n4 = t0()
+      _renderEffect(() => _setText(n4, _ctx2[0]+_ctx0[0]))
+      return n4
+    })
+    _insert(n2, n5)
+    return n5
+  })
+  return n0
+}"
+`;
+
+exports[`compiler: v-for > object de-structured value 1`] = `
+"import { renderEffect as _renderEffect, setText as _setText, createFor as _createFor, template as _template } from 'vue/vapor';
+const t0 = _template("<div></div>")
+
+export function render(_ctx) {
+  const n0 = _createFor(() => (_ctx.list), (_ctx0) => {
+    const n2 = t0()
+    _renderEffect(() => _setText(n2, _ctx0[0] + _ctx0[1] + _ctx0[2]))
+    return n2
+  }, ({ id, ...other }, index) => (id), null, null, false, _state => {
+    const [{ id, ...other }, index] = _state
+    return [id, other, index]
+  })
+  return n0
+}"
+`;
+
+exports[`compiler: v-for > v-for aliases w/ complex expressions 1`] = `
+"import { renderEffect as _renderEffect, setText as _setText, createFor as _createFor, template as _template } from 'vue/vapor';
 const t0 = _template("<div></div>")
 
 export function render(_ctx) {
-  const n0 = _createFor(() => (_ctx.items), (_block) => {
+  const n0 = _createFor(() => (_ctx.list), (_ctx0) => {
     const n2 = t0()
-    const _updateEffect = () => {
-      const [item, index] = _block.s
-      _setDynamicProp(n2, "item", item)
-      _setDynamicProp(n2, "index", index)
-    }
-    _renderEffect(_updateEffect)
-    return [n2, _updateEffect]
+    _renderEffect(() => _setText(n2, _ctx0[0] + _ctx.bar + _ctx.baz + _ctx0[1] + _ctx.quux))
+    return n2
+  }, null, null, null, false, _state => {
+    const [{ foo = bar, baz: [qux = quux] }] = _state
+    return [foo, qux]
   })
   return n0
 }"
@@ -44,9 +107,9 @@ exports[`compiler: v-for > w/o value 1`] = `
 const t0 = _template("<div>item</div>")
 
 export function render(_ctx) {
-  const n0 = _createFor(() => (_ctx.items), (_block) => {
+  const n0 = _createFor(() => (_ctx.items), (_ctx0) => {
     const n2 = t0()
-    return [n2, () => {}]
+    return n2
   })
   return n0
 }"

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

@@ -67,9 +67,9 @@ exports[`compiler: v-once > with v-for 1`] = `
 const t0 = _template("<div></div>")
 
 export function render(_ctx) {
-  const n0 = _createFor(() => (_ctx.list), (_block) => {
+  const n0 = _createFor(() => (_ctx.list), (_ctx0) => {
     const n2 = t0()
-    return [n2, () => {}]
+    return n2
   }, null, null, null, true)
   return n0
 }"

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

@@ -86,4 +86,141 @@ describe('compiler: v-for', () => {
     )
     expect(code).matchSnapshot()
   })
+
+  test('nested v-for', () => {
+    const { code, ir } = compileWithVFor(
+      `<div v-for="i in list"><span v-for="j in i">{{ j+i }}</span></div>`,
+    )
+    expect(code).matchSnapshot()
+    expect(code).contains(`_createFor(() => (_ctx.list), (_ctx0) => {`)
+    expect(code).contains(`_createFor(() => (_ctx0[0]), (_ctx2) => {`)
+    expect(code).contains(`_ctx2[0]+_ctx0[0]`)
+    expect(ir.template).toEqual(['<span></span>', '<div></div>'])
+    expect(ir.block.operation).toMatchObject([
+      {
+        type: IRNodeTypes.FOR,
+        id: 0,
+        source: { content: 'list' },
+        value: { content: 'i' },
+        render: {
+          type: IRNodeTypes.BLOCK,
+          dynamic: {
+            children: [{ template: 1 }],
+          },
+        },
+      },
+    ])
+    expect((ir.block.operation[0] as any).render.operation[0]).toMatchObject({
+      type: IRNodeTypes.FOR,
+      id: 2,
+      source: { content: 'i' },
+      value: { content: 'j' },
+      render: {
+        type: IRNodeTypes.BLOCK,
+        dynamic: {
+          children: [{ template: 0 }],
+        },
+      },
+    })
+  })
+
+  test('object de-structured value', () => {
+    const { code, ir } = compileWithVFor(
+      `<div v-for="(  { id, ...other }, index) in list" :key="id">{{ id + other + index }}</div>`,
+    )
+    expect(code).matchSnapshot()
+    expect(code).contains(`return [id, other, index]`)
+    expect(code).contains(`_ctx0[0] + _ctx0[1] + _ctx0[2]`)
+    expect(ir.block.operation[0]).toMatchObject({
+      type: IRNodeTypes.FOR,
+      source: {
+        type: NodeTypes.SIMPLE_EXPRESSION,
+        content: 'list',
+      },
+      value: {
+        type: NodeTypes.SIMPLE_EXPRESSION,
+        content: '{ id, ...other }',
+        ast: {
+          type: 'ArrowFunctionExpression',
+          params: [
+            {
+              type: 'ObjectPattern',
+            },
+          ],
+        },
+      },
+      key: {
+        type: NodeTypes.SIMPLE_EXPRESSION,
+        content: 'index',
+      },
+      index: undefined,
+    })
+  })
+
+  test('array de-structured value', () => {
+    const { code, ir } = compileWithVFor(
+      `<div v-for="([id, ...other], index) in list" :key="id">{{ id + other + index }}</div>`,
+    )
+    expect(code).matchSnapshot()
+    expect(code).contains(`return [id, other, index]`)
+    expect(code).contains(`_ctx0[0] + _ctx0[1] + _ctx0[2]`)
+    expect(ir.block.operation[0]).toMatchObject({
+      type: IRNodeTypes.FOR,
+      source: {
+        type: NodeTypes.SIMPLE_EXPRESSION,
+        content: 'list',
+      },
+      value: {
+        type: NodeTypes.SIMPLE_EXPRESSION,
+        content: '[id, ...other]',
+        ast: {
+          type: 'ArrowFunctionExpression',
+          params: [
+            {
+              type: 'ArrayPattern',
+            },
+          ],
+        },
+      },
+      key: {
+        type: NodeTypes.SIMPLE_EXPRESSION,
+        content: 'index',
+      },
+      index: undefined,
+    })
+  })
+
+  test('v-for aliases w/ complex expressions', () => {
+    const { code, ir } = compileWithVFor(
+      `<div v-for="({ foo = bar, baz: [qux = quux] }) in list">
+        {{ foo + bar + baz + qux + quux }}
+      </div>`,
+    )
+    expect(code).matchSnapshot()
+    expect(code).contains(`return [foo, qux]`)
+    expect(code).contains(
+      `_ctx0[0] + _ctx.bar + _ctx.baz + _ctx0[1] + _ctx.quux`,
+    )
+    expect(ir.block.operation[0]).toMatchObject({
+      type: IRNodeTypes.FOR,
+      source: {
+        type: NodeTypes.SIMPLE_EXPRESSION,
+        content: 'list',
+      },
+      value: {
+        type: NodeTypes.SIMPLE_EXPRESSION,
+        content: '{ foo = bar, baz: [qux = quux] }',
+        ast: {
+          type: 'ArrowFunctionExpression',
+          params: [
+            {
+              type: 'ObjectPattern',
+            },
+          ],
+        },
+      },
+      key: undefined,
+      index: undefined,
+    })
+  })
 })

packages/compiler-vapor/src/generate.ts

@@ -2,7 +2,7 @@ import type {
   CodegenOptions as BaseCodegenOptions,
   BaseCodegenResult,
 } from '@vue/compiler-dom'
-import type { BlockIRNode, IREffect, RootIRNode, VaporHelper } from './ir'
+import type { BlockIRNode, RootIRNode, VaporHelper } from './ir'
 import { extend, remove } from '@vue/shared'
 import { genBlockContent } from './generators/block'
 import { genTemplates } from './generators/template'
@@ -38,10 +38,6 @@ export class CodegenContext {
   identifiers: Record<string, string[]> = Object.create(null)
 
   block: BlockIRNode
-  genEffects: Array<
-    (effects: IREffect[], context: CodegenContext) => CodeFragment[]
-  > = []
-
   withId<T>(fn: () => T, map: Record<string, string | null>): T {
     const { identifiers } = this
     const ids = Object.keys(map)

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

@@ -53,11 +53,7 @@ export function genBlockContent(
   }
 
   push(...genOperations(operation, context))
-  push(
-    ...(context.genEffects.length
-      ? context.genEffects[context.genEffects.length - 1]
-      : genEffects)(effect, context),
-  )
+  push(...genEffects(effect, context))
 
   push(NEWLINE, `return `)