feat: destructuring + nesting in v-for

[LittleSound]

related #204 closes #220

TODO

• Achieve the expected functionality
• Test and support more edge cases
• Maintain good performance

Playground

TODO List Demo

Runtime Code

const n0 = _createFor(
  () => source1, 
  ctx0 => {
  // ^ ShallowReactive
    const n1 = t0()

    on(element, () => ctx0[1])
    //                ^ other
    renderEffect(() => setText(n2, ctx0[0] + ctx0[1] + ctx0[2]))
    //                             ^ id      ^ other   ^ index

    // Nested v-for
    const n2 = _createFor(
      () => source2,
      ctx1 => {
        console.log(ctx0[0], ctx1[0])
        //          ^ id     ^ item of source2
      },
    )

    insert(n2, n1)
    return n1
  }, 

  // Get item key with destructuring assignment
  ({ id, ...other }, index) => (id),
  null, null, false,

  // Destructuring assignment
  state => {
  // ^ state === block.state
    const [{ id, ...other }, index] = _state
    return [id, other, index]
  },
)

Benchmark

Benchmark

main hash: 1008199647224ba793b6c3a596483e1ed69df946

Benchmark mounting

in branch main

• shallowRef source:
  runLots: min: 349.90 / max: 543.30 / median: 467.90ms / mean: 431.01ms / time: 495.70ms / std: 72.04 over 30 runs

• ref source:
  runLots: min: 354.10 / max: 614.70 / median: 400.10ms / mean: 440.34ms / time: 400.10ms / std: 91.12 over 30 runs

in this PR

• shallowRef source:
  runLots: min: 358.10 / max: 604.20 / median: 381.00ms / mean: 388.91ms / time: 381.90ms / std: 43.88 over 30 runs

• ref source:
  runLots: min: 365.40 / max: 581.70 / median: 387.00ms / mean: 419.89ms / time: 444.60ms / std: 55.14 over 30 runs

Update every 10th row (10,000 rows)

in branch main

• shallowRef source:
  update: min: 133.10 / max: 356.70 / median: 150.00ms / mean: 166.53ms / time: 319.40ms / std: 47.89 over 30 runs

• ref source:
  update: min: 133.20 / max: 529.40 / median: 150.20ms / mean: 174.48ms / time: 166.80ms / std: 76.70 over 30 runs

in this PR

• shallowRef source:
  update: min: 144.90 / max: 291.90 / median: 159.90ms / mean: 164.11ms / time: 159.90ms / std: 27.89 over 30 runs

• ref source:
  update: min: 132.60 / max: 294.60 / median: 150.00ms / mean: 163.70ms / time: 150.00ms / std: 45.18 over 30 runs

[netlify]

✅ Deploy Preview for vapor-template-explorer ready!

Name	Link
🔨 Latest commit	572cf89
🔍 Latest deploy log	https://app.netlify.com/sites/vapor-template-explorer/deploys/6656c0ed324f9b000826ed3c
😎 Deploy Preview	https://deploy-preview-217--vapor-template-explorer.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for vapor-repl ready!

Name	Link
🔨 Latest commit	572cf89
🔍 Latest deploy log	https://app.netlify.com/sites/vapor-repl/deploys/6656c0ed7405f3000845cf1f
😎 Deploy Preview	https://deploy-preview-217--vapor-repl.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
compiler-dom.global.prod.js	80 kB	28.1 kB	24.7 kB
compiler-vapor.global.prod.js	56.8 kB (-224 B)	19.3 kB (-60 B)	17.4 kB (-86 B)
runtime-dom.global.prod.js	94.9 kB	35.8 kB	32.3 kB
runtime-vapor.global.prod.js	48.2 kB (+306 B)	18 kB (+95 B)	16.4 kB (+106 B)
vue-vapor.global.prod.js	102 kB (+82 B)	35.7 kB (+15 B)	32.2 kB (+37 B)
vue.global.prod.js	152 kB	55.1 kB	49.2 kB

Usages

Name	Size	Gzip	Brotli
createApp	55.3 kB	21.2 kB	19.4 kB
createSSRApp	58.6 kB	22.5 kB	20.5 kB
defineCustomElement	57.6 kB	21.9 kB	20 kB
vapor	48.5 kB (+306 B)	18 kB (+111 B)	16.5 kB (+98 B)
overall	69.1 kB	26.2 kB	23.8 kB

[LittleSound]

The current Playground in the Vapor project uses a list of shallowRef in bench/App.vue to measure the performance of v-for. When updating something, it directly refreshes the entire list with rows.value = rows.value.slice(). It seems like this is a kind of negative optimization when measuring projects like "Update every 10th row"?

[sxzz]

playground/src/v-for.js:29:9 should be updated as well.