feat: destructuring + nesting in v-for

LittleSound commented 3 months ago

related #204 closes #220

TODO

[x] Achieve the expected functionality
[x] Test and support more edge cases
[x] Maintain good performance

Playground

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

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[bot] commented 3 months ago

Deploy Preview for vapor-template-explorer ready!

Name	Link
Latest commit	572cf898470c9c8b77b0d3bf317f08c7097c50fa
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[bot] commented 3 months ago

Deploy Preview for vapor-repl ready!

Name	Link
Latest commit	572cf898470c9c8b77b0d3bf317f08c7097c50fa
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[bot] commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

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

vuejs / core-vapor