test(compiler-vapor): v-for de-structured + complex expressions + nested

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

@@ -1,5 +1,22 @@
 // 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, renderEffect as _renderEffect, setText as _setText, createFor as _createFor, delegateEvents as _delegateEvents, template as _template } from 'vue/vapor';
 const t0 = _template("<div></div>")
@@ -51,7 +68,7 @@ export function render(_ctx) {
 }"
 `;
 
-exports[`compiler: v-for > v-for /w destructuring an array 1`] = `
+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>")
 
@@ -60,26 +77,26 @@ export function render(_ctx) {
  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
+ }, ({ 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 /w destructuring an object 1`] = `
+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.list), (_ctx0) => {
  const n2 = t0()
- _renderEffect(() => _setText(n2, _ctx0[0] + _ctx0[1] + _ctx0[2]))
+ _renderEffect(() => _setText(n2, _ctx0[0] + _ctx0[1] + _ctx0[2] + _ctx0[3] + _ctx0[4]))
  return n2
- }, ({ id, ...other }, index) => (id), null, null, false, _state => {
- const [{ id, ...other }, index] = _state
- return [id, other, index]
+ }, null, null, null, false, _state => {
+ const [{ foo = bar, baz: [qux = quux] }] = _state
+ return [foo, bar, baz, qux, quux]
  })
  return n0
 }"

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

@@ -88,23 +88,140 @@ describe('compiler: v-for', () => {
  })
 
  test('nested v-for', () => {
- const { code } = compileWithVFor(
+ 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('v-for /w destructuring an object', () => {
- const { code } = compileWithVFor(
- `<div v-for="({ id, ...other }, index) of list" :key="id">{{ id + other + index }}</div>`,
+ 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 /w destructuring an array', () => {
- const { code } = compileWithVFor(
- `<div v-for="([id, ...other], index) of list" :key="id">{{ id + other + index }}</div>`,
+ // TODO v-for aliases w/ complex expressions
+ test.fails('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,
+ })
  })
 })