feat: support more source types for v-for

Co-authored-by: wangjie36 <[email protected]>

closes #139

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

@@ -54,7 +54,7 @@ describe('compiler: v-for', () => {
  children: [{ template: 0 }],
  },
  },
- keyProperty: {
+ keyProp: {
  type: NodeTypes.SIMPLE_EXPRESSION,
  content: 'item.id',
  },

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

@@ -11,17 +11,19 @@ import {
  NEWLINE,
  buildCodeFragment,
  genCall,
+ genMulti,
 } from './utils'
 
 export function genFor(
  oper: ForIRNode,
  context: CodegenContext,
 ): CodeFragment[] {
  const { vaporHelper } = context
- const { source, value, key, render, keyProperty } = oper
+ const { source, value, key, index, render, keyProp } = oper
 
  const rawValue = value && value.content
  const rawKey = key && key.content
+ const rawIndex = index && index.content
 
  const sourceExpr = ['() => (', ...genExpression(source, context), ')']
  let updateFn = '_updateEffect'
@@ -30,6 +32,7 @@ export function genFor(
  const idMap: Record<string, string> = {}
  if (rawValue) idMap[rawValue] = `_block.s[0]`
  if (rawKey) idMap[rawKey] = `_block.s[1]`
+ if (rawIndex) idMap[rawIndex] = `_block.s[2]`
 
  const blockReturns = (returns: CodeFragment[]): CodeFragment[] => [
  '[',
@@ -43,19 +46,20 @@ export function genFor(
  )
 
  let getKeyFn: CodeFragment[] | false = false
- if (keyProperty) {
+ if (keyProp) {
  const idMap: Record<string, null> = {}
  if (rawValue) idMap[rawValue] = null
  if (rawKey) idMap[rawKey] = null
- const expr = context.withId(
- () => genExpression(keyProperty, context),
- idMap,
- )
+ if (rawIndex) idMap[rawIndex] = null
+ const expr = context.withId(() => genExpression(keyProp, context), idMap)
  getKeyFn = [
- '(',
- rawValue ? rawValue : rawKey ? '_' : '',
- rawKey && `, ${rawKey}`,
- ') => (',
+ ...genMulti(
+ ['(', ')', ', '],
+ rawValue ? rawValue : rawKey || rawIndex ? '_' : undefined,
+ rawKey ? rawKey : rawIndex ? '__' : undefined,
+ rawIndex,
+ ),
+ ' => (',
  ...expr,
  ')',
  ]

packages/compiler-vapor/src/ir.ts

@@ -73,7 +73,7 @@ export interface ForIRNode extends BaseIRNode {
  value?: SimpleExpressionNode
  key?: SimpleExpressionNode
  index?: SimpleExpressionNode
- keyProperty?: SimpleExpressionNode
+ keyProp?: SimpleExpressionNode
  render: BlockIRNode
 }
 

packages/compiler-vapor/src/transforms/vFor.ts

@@ -73,7 +73,7 @@ export function processFor(
  value: value as SimpleExpressionNode | undefined,
  key: key as SimpleExpressionNode | undefined,
  index: index as SimpleExpressionNode | undefined,
- keyProperty,
+ keyProp: keyProperty,
  render,
  })
  }

packages/runtime-vapor/__tests__/for.spec.ts

@@ -1,63 +1,187 @@
-import {
- computed,
- createFor,
- createTextNode,
- nextTick,
- ref,
- renderEffect,
- setText,
-} from '../src'
+import { createFor, nextTick, ref, renderEffect } from '../src'
 import { makeRender } from './_utils'
 
 const define = makeRender()
 
 describe('createFor', () => {
- test('basic', async () => {
+ test('array source', async () => {
  const list = ref([{ name: '1' }, { name: '2' }, { name: '3' }])
- const sort = ref(false)
- const sortedList = computed(() =>
- sort.value ? Array.from(list.value).reverse() : list.value,
- )
+ function reverse() {
+ list.value = list.value.reverse()
+ }
 
  const { host } = define(() => {
  const n1 = createFor(
- () => sortedList.value,
+ () => list.value,
  block => {
- const n3 = createTextNode()
+ const span = document.createElement('li')
  const update = () => {
- const [item] = block.s
- setText(n3, item.name)
+ const [item, key, index] = block.s
+ span.innerHTML = `${key}. ${item.name}`
+
+ // index should be undefined if source is not an object
+ expect(index).toBe(undefined)
  }
  renderEffect(update)
- return [n3, update]
+ return [span, update]
  },
+ item => item.name,
  )
- return [n1]
+ return n1
  }).render()
 
- expect(host.innerHTML).toBe('123<!--for-->')
+ expect(host.innerHTML).toBe(
+ '<li>0. 1</li><li>1. 2</li><li>2. 3</li><!--for-->',
+ )
 
  // add
  list.value.push({ name: '4' })
  await nextTick()
- expect(host.innerHTML).toBe('1234<!--for-->')
+ expect(host.innerHTML).toBe(
+ '<li>0. 1</li><li>1. 2</li><li>2. 3</li><li>3. 4</li><!--for-->',
+ )
 
  // move
- sort.value = true
+ reverse()
  await nextTick()
- expect(host.innerHTML).toBe('4321<!--for-->')
- sort.value = false
+ expect(host.innerHTML).toBe(
+ '<li>0. 4</li><li>1. 3</li><li>2. 2</li><li>3. 1</li><!--for-->',
+ )
+
+ reverse()
  await nextTick()
- expect(host.innerHTML).toBe('1234<!--for-->')
+ expect(host.innerHTML).toBe(
+ '<li>0. 1</li><li>1. 2</li><li>2. 3</li><li>3. 4</li><!--for-->',
+ )
 
  // change
  list.value[0].name = 'a'
  await nextTick()
- expect(host.innerHTML).toBe('a234<!--for-->')
+ expect(host.innerHTML).toBe(
+ '<li>0. a</li><li>1. 2</li><li>2. 3</li><li>3. 4</li><!--for-->',
+ )
 
  // remove
+ list.value.splice(1, 1)
+ await nextTick()
+ expect(host.innerHTML).toBe(
+ '<li>0. a</li><li>1. 3</li><li>2. 4</li><!--for-->',
+ )
+
+ // clear
  list.value = []
  await nextTick()
  expect(host.innerHTML).toBe('<!--for-->')
  })
+
+ test('number source', async () => {
+ const count = ref(3)
+
+ const { host } = define(() => {
+ const n1 = createFor(
+ () => count.value,
+ block => {
+ const span = document.createElement('li')
+ const update = () => {
+ const [item, key, index] = block.s
+ span.innerHTML = `${key}. ${item}`
+
+ // index should be undefined if source is not an object
+ expect(index).toBe(undefined)
+ }
+ renderEffect(update)
+ return [span, update]
+ },
+ item => item.name,
+ )
+ return n1
+ }).render()
+
+ expect(host.innerHTML).toBe(
+ '<li>0. 1</li><li>1. 2</li><li>2. 3</li><!--for-->',
+ )
+
+ // add
+ count.value = 4
+ await nextTick()
+ expect(host.innerHTML).toBe(
+ '<li>0. 1</li><li>1. 2</li><li>2. 3</li><li>3. 4</li><!--for-->',
+ )
+
+ // remove
+ count.value = 2
+ await nextTick()
+ expect(host.innerHTML).toBe('<li>0. 1</li><li>1. 2</li><!--for-->')
+
+ // clear
+ count.value = 0
+ await nextTick()
+ expect(host.innerHTML).toBe('<!--for-->')
+ })
+
+ test('object source', async () => {
+ const initial = () => ({ a: 1, b: 2, c: 3 })
+ const data = ref<Record<string, number>>(initial())
+
+ const { host } = define(() => {
+ const n1 = createFor(
+ () => data.value,
+ block => {
+ const span = document.createElement('li')
+ const update = () => {
+ const [item, key, index] = block.s
+ span.innerHTML = `${key}${index}. ${item}`
+ expect(index).not.toBe(undefined)
+ }
+ renderEffect(update)
+ return [span, update]
+ },
+ item => {
+ return item
+ },
+ )
+ return n1
+ }).render()
+
+ expect(host.innerHTML).toBe(
+ '<li>a0. 1</li><li>b1. 2</li><li>c2. 3</li><!--for-->',
+ )
+
+ // move
+ data.value = {
+ c: 3,
+ b: 2,
+ a: 1,
+ }
+ await nextTick()
+ expect(host.innerHTML).toBe(
+ '<li>c0. 3</li><li>b1. 2</li><li>a2. 1</li><!--for-->',
+ )
+
+ // add
+ data.value.d = 4
+ await nextTick()
+ expect(host.innerHTML).toBe(
+ '<li>c0. 3</li><li>b1. 2</li><li>a2. 1</li><li>d3. 4</li><!--for-->',
+ )
+
+ // change
+ data.value.b = 100
+ await nextTick()
+ expect(host.innerHTML).toBe(
+ '<li>c0. 3</li><li>b1. 100</li><li>a2. 1</li><li>d3. 4</li><!--for-->',
+ )
+
+ // remove
+ delete data.value.c
+ await nextTick()
+ expect(host.innerHTML).toBe(
+ '<li>b0. 100</li><li>a1. 1</li><li>d2. 4</li><!--for-->',
+ )
+
+ // clear
+ data.value = {}
+ await nextTick()
+ expect(host.innerHTML).toBe('<!--for-->')
+ })
 })