refactor(compiler-vapor): remove `proxyRefs` in v-for

diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vFor.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vFor.spec.ts.snap
index b9a81d4148375f775bc5e90b2c4629fca4daa2f6..49b1f5734581833990a8aaf01d804eac800a830f 100644 (file)
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vFor.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vFor.spec.ts.snap
@@ -7,7 +7,7 @@ const t0 = _template("<div></div>")
 export function render(_ctx) {
   const n0 = _createFor(() => (_ctx.list), _withDestructure(([[id, ...other], index]) => [id, other, index], (_ctx0) => {
     const n2 = t0()
-    _renderEffect(() => _setText(n2, _ctx0[0] + _ctx0[1] + _ctx0[2]))
+    _renderEffect(() => _setText(n2, _ctx0[0].value + _ctx0[1].value + _ctx0[2].value))
     return n2
   }), ([id, ...other], index) => (id))
   return n0
@@ -22,8 +22,8 @@ _delegateEvents("click")
 export function render(_ctx) {
   const n0 = _createFor(() => (_ctx.items), (_ctx0) => {
     const n2 = t0()
-    _delegate(n2, "click", () => $event => (_ctx.remove(_ctx0[0])))
-    _renderEffect(() => _setText(n2, _ctx0[0]))
+    _delegate(n2, "click", () => $event => (_ctx.remove(_ctx0[0].value)))
+    _renderEffect(() => _setText(n2, _ctx0[0].value))
     return n2
   }, (item) => (item.id))
   return n0
@@ -51,8 +51,8 @@ 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]))
+    _renderEffect(() => _setDynamicProp(n2, "item", _ctx0[0].value))
+    _renderEffect(() => _setDynamicProp(n2, "index", _ctx0[1].value))
     return n2
   })
   return n0
@@ -67,9 +67,9 @@ const t1 = _template("<div></div>")
 export function render(_ctx) {
   const n0 = _createFor(() => (_ctx.list), (_ctx0) => {
     const n5 = t1()
-    const n2 = _createFor(() => (_ctx0[0]), (_ctx1) => {
+    const n2 = _createFor(() => (_ctx0[0].value), (_ctx1) => {
       const n4 = t0()
-      _renderEffect(() => _setText(n4, _ctx1[0]+_ctx0[0]))
+      _renderEffect(() => _setText(n4, _ctx1[0].value+_ctx0[0].value))
       return n4
     })
     _insert(n2, n5)
@@ -86,7 +86,7 @@ const t0 = _template("<div></div>")
 export function render(_ctx) {
   const n0 = _createFor(() => (_ctx.list), _withDestructure(([{ id, ...other }, index]) => [id, other, index], (_ctx0) => {
     const n2 = t0()
-    _renderEffect(() => _setText(n2, _ctx0[0] + _ctx0[1] + _ctx0[2]))
+    _renderEffect(() => _setText(n2, _ctx0[0].value + _ctx0[1].value + _ctx0[2].value))
     return n2
   }), ({ id, ...other }, index) => (id))
   return n0
@@ -100,7 +100,7 @@ const t0 = _template("<div></div>")
 export function render(_ctx) {
   const n0 = _createFor(() => (_ctx.list), _withDestructure(([{ foo = bar, baz: [qux = quux] }]) => [foo, qux], (_ctx0) => {
     const n2 = t0()
-    _renderEffect(() => _setText(n2, _ctx0[0] + _ctx.bar + _ctx.baz + _ctx0[1] + _ctx.quux))
+    _renderEffect(() => _setText(n2, _ctx0[0].value + _ctx.bar + _ctx.baz + _ctx0[1].value + _ctx.quux))
     return n2
   }))
   return n0

diff --git a/packages/compiler-vapor/__tests__/transforms/vFor.spec.ts b/packages/compiler-vapor/__tests__/transforms/vFor.spec.ts
index 3c2df1070461fe0cd3380c84b1950d39a17c3682..58064e4c3d09e3b4954b4aa04af06ac3111a2cc6 100644 (file)
--- a/packages/compiler-vapor/__tests__/transforms/vFor.spec.ts
+++ b/packages/compiler-vapor/__tests__/transforms/vFor.spec.ts
@@ -93,8 +93,8 @@ describe('compiler: v-for', () => {
     )
     expect(code).matchSnapshot()
     expect(code).contains(`_createFor(() => (_ctx.list), (_ctx0) => {`)
-    expect(code).contains(`_createFor(() => (_ctx0[0]), (_ctx1) => {`)
-    expect(code).contains(`_ctx1[0]+_ctx0[0]`)
+    expect(code).contains(`_createFor(() => (_ctx0[0].value), (_ctx1) => {`)
+    expect(code).contains(`_ctx1[0].value+_ctx0[0].value`)
     expect(ir.template).toEqual(['<span></span>', '<div></div>'])
     expect(ir.block.operation).toMatchObject([
       {
@@ -130,7 +130,7 @@ describe('compiler: v-for', () => {
     )
     expect(code).matchSnapshot()
     expect(code).contains(`([{ id, ...other }, index]) => [id, other, index]`)
-    expect(code).contains(`_ctx0[0] + _ctx0[1] + _ctx0[2]`)
+    expect(code).contains(`_ctx0[0].value + _ctx0[1].value + _ctx0[2].value`)
     expect(ir.block.operation[0]).toMatchObject({
       type: IRNodeTypes.FOR,
       source: {
@@ -163,7 +163,7 @@ describe('compiler: v-for', () => {
     )
     expect(code).matchSnapshot()
     expect(code).contains(`([[id, ...other], index]) => [id, other, index]`)
-    expect(code).contains(`_ctx0[0] + _ctx0[1] + _ctx0[2]`)
+    expect(code).contains(`_ctx0[0].value + _ctx0[1].value + _ctx0[2]`)
     expect(ir.block.operation[0]).toMatchObject({
       type: IRNodeTypes.FOR,
       source: {
@@ -199,7 +199,7 @@ describe('compiler: v-for', () => {
     expect(code).matchSnapshot()
     expect(code).contains(`([{ foo = bar, baz: [qux = quux] }]) => [foo, qux]`)
     expect(code).contains(
-      `_ctx0[0] + _ctx.bar + _ctx.baz + _ctx0[1] + _ctx.quux`,
+      `_ctx0[0].value + _ctx.bar + _ctx.baz + _ctx0[1].value + _ctx.quux`,
     )
     expect(ir.block.operation[0]).toMatchObject({
       type: IRNodeTypes.FOR,

diff --git a/packages/compiler-vapor/src/generators/for.ts b/packages/compiler-vapor/src/generators/for.ts
index d22eaebf4f00ea66681b47d01a03daddf2b21d9f..6fece136ec4f64c1174d2eac73c26764dc9b08d3 100644 (file)
--- a/packages/compiler-vapor/src/generators/for.ts
+++ b/packages/compiler-vapor/src/generators/for.ts
@@ -47,10 +47,10 @@ export function genFor(
   if (context.options.prefixIdentifiers) {
     propsName = `_ctx${depth}`
     Array.from(idsOfValue).forEach(
-      (id, idIndex) => (idMap[id] = `${propsName}[${idIndex}]`),
+      (id, idIndex) => (idMap[id] = `${propsName}[${idIndex}].value`),
     )
-    if (rawKey) idMap[rawKey] = `${propsName}[${idsOfValue.size}]`
-    if (rawIndex) idMap[rawIndex] = `${propsName}[${idsOfValue.size + 1}]`
+    if (rawKey) idMap[rawKey] = `${propsName}[${idsOfValue.size}].value`
+    if (rawIndex) idMap[rawIndex] = `${propsName}[${idsOfValue.size + 1}].value`
   } else {
     propsName = `[${[rawValue || ((rawKey || rawIndex) && '_'), rawKey || (rawIndex && '__'), rawIndex].filter(Boolean).join(', ')}]`
   }

diff --git a/packages/runtime-vapor/__tests__/for.spec.ts b/packages/runtime-vapor/__tests__/for.spec.ts
index 9ce3ffa17a15514a352f9ab34fcfb754c783cb08..815d0eec1519fbd5090dd52f43f5732bc14be782 100644 (file)
--- a/packages/runtime-vapor/__tests__/for.spec.ts
+++ b/packages/runtime-vapor/__tests__/for.spec.ts
@@ -28,7 +28,7 @@ describe('createFor', () => {
         state => {
           const span = document.createElement('li')
           renderEffect(() => {
-            const [item, key, index] = state
+            const [{ value: item }, { value: key }, { value: index }] = state
             span.innerHTML = `${key}. ${item.name}`
 
             // index should be undefined if source is not an object
@@ -94,11 +94,11 @@ describe('createFor', () => {
         state => {
           const span = document.createElement('li')
           renderEffect(() => {
-            const [item, key, index] = state
+            const [{ value: item }, { value: key }, index] = state
             span.innerHTML = `${key}. ${item}`
 
             // index should be undefined if source is not an object
-            expect(index).toBe(undefined)
+            expect(index.value).toBe(undefined)
           })
           return span
         },
@@ -139,7 +139,7 @@ describe('createFor', () => {
         state => {
           const span = document.createElement('li')
           renderEffect(() => {
-            const [item, key, index] = state
+            const [{ value: item }, { value: key }, { value: index }] = state
             span.innerHTML = `${key}${index}. ${item}`
             expect(index).not.toBe(undefined)
           })
@@ -319,23 +319,22 @@ describe('createFor', () => {
     const { host } = define(() => {
       const n1 = createFor(
         () => list.value,
-        withDestructure(
-          state => {
-            const [{ name }, key, index] = state
-            return [name, key, index]
-          },
-          state => {
-            const span = document.createElement('li')
-            renderEffect(() => {
-              const [name, key, index] = state
-              span.innerHTML = `${key}. ${name}`
-
-              // index should be undefined if source is not an object
-              expect(index).toBe(undefined)
-            })
-            return span
-          },
-        ),
+        state => {
+          const span = document.createElement('li')
+          renderEffect(() => {
+            const [
+              {
+                value: { name },
+              },
+              { value: key },
+              index,
+            ] = state
+            span.innerHTML = `${key}. ${name}`
+            // index should be undefined if source is not an object
+            expect(index.value).toBe(undefined)
+          })
+          return span
+        },
         item => item.name,
       )
       return n1
@@ -398,7 +397,7 @@ describe('createFor', () => {
         state => {
           const span = document.createElement('li')
           renderEffect(() => {
-            const [item, key, index] = state
+            const [{ value: item }, { value: key }, { value: index }] = state
             span.innerHTML = `${key}. ${item.name}`
 
             // index should be undefined if source is not an object

diff --git a/packages/runtime-vapor/src/apiCreateFor.ts b/packages/runtime-vapor/src/apiCreateFor.ts
index ee56eabf38196d6fe2662d57fae01ee6820ad993..def382b24c8f4ca827b726ea79c0c93b52a48f2f 100644 (file)
--- a/packages/runtime-vapor/src/apiCreateFor.ts
+++ b/packages/runtime-vapor/src/apiCreateFor.ts
@@ -3,7 +3,6 @@ import {
   type ShallowRef,
   effectScope,
   isReactive,
-  proxyRefs,
   shallowRef,
   triggerRef,
 } from '@vue/reactivity'
@@ -37,7 +36,7 @@ type Source = any[] | Record<any, any> | number | Set<any> | Map<any, any>
 /*! #__NO_SIDE_EFFECTS__ */
 export const createFor = (
   src: () => Source,
-  renderItem: (block: any) => Block,
+  renderItem: (block: ForBlock['state']) => Block,
   getKey?: (item: any, key: any, index?: number) => any,
   getMemo?: (item: any, key: any, index?: number) => any[],
   hydrationNode?: Node,
@@ -265,7 +264,7 @@ export const createFor = (
       memo: getMemo && getMemo(item, key, index),
       [fragmentKey]: true,
     })
-    block.nodes = scope.run(() => renderItem(proxyRefs(state)))!
+    block.nodes = scope.run(() => renderItem(state))!
 
     // TODO v-memo
     // if (getMemo) block.update()