root
/
vue3-core
mirror of https://github.com/vuejs/core.git
1
0
Fork 0
Code Issues Actions 8 Packages Projects Releases Wiki Activity

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

This commit is contained in:
三咲智子 Kevin Deng 2024-09-19 01:17:16 +08:00
parent e1bedb8ad0
commit cc58f651e1
No known key found for this signature in database
5 changed files with 40 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/compiler-vapor/__tests__/transforms/__snapshots__/vFor.spec.ts.snap
View File

@ -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

10
packages/compiler-vapor/__tests__/transforms/vFor.spec.ts
View File

@ -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,

6
packages/compiler-vapor/src/generators/for.ts
View File

@ -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(', ')}]`
}

43
packages/runtime-vapor/__tests__/for.spec.ts
View File

@ -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

5
packages/runtime-vapor/src/apiCreateFor.ts
View File

@ -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()