From cc58f651e1ceb0e87e1ace44378a49909da70c32 Mon Sep 17 00:00:00 2001 From: =?utf8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?= Date: Thu, 19 Sep 2024 01:17:16 +0800 Subject: [PATCH] refactor(compiler-vapor): remove `proxyRefs` in v-for --- .../__snapshots__/vFor.spec.ts.snap | 18 ++++---- .../__tests__/transforms/vFor.spec.ts | 10 ++--- packages/compiler-vapor/src/generators/for.ts | 6 +-- packages/runtime-vapor/__tests__/for.spec.ts | 43 +++++++++---------- packages/runtime-vapor/src/apiCreateFor.ts | 5 +-- 5 files changed, 40 insertions(+), 42 deletions(-) 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 b9a81d4148..49b1f57345 100644 --- 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("
") 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("
") 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("
") 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("
") 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("
") 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 3c2df10704..58064e4c3d 100644 --- 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(['', '
']) 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 d22eaebf4f..6fece136ec 100644 --- 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 9ce3ffa17a..815d0eec15 100644 --- 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 ee56eabf38..def382b24c 100644 --- 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 | number | Set | Map /*! #__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() -- 2.47.3