Skip to content

Commit

Permalink
refactor(compiler-vapor): remove proxyRefs in v-for
Browse files Browse the repository at this point in the history
  • Loading branch information
@sxzz
sxzz committed Sep 18, 2024
1 parent e1bedb8 commit cc58f65
Show file tree
Hide file tree
Showing 5 changed files with 40 additions and 42 deletions.
18 changes: 9 additions & 9 deletions packages/compiler-vapor/__tests__/transforms/__snapshots__/vFor.spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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)
Expand All @@ -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
Expand All @@ -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
Expand Down
10 changes: 5 additions & 5 deletions packages/compiler-vapor/__tests__/transforms/vFor.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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([
{
Expand Down Expand Up @@ -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: {
Expand Down Expand Up @@ -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: {
Expand Down Expand Up @@ -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,
Expand Down
6 changes: 3 additions & 3 deletions packages/compiler-vapor/src/generators/for.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(', ')}]`
}
Expand Down
43 changes: 21 additions & 22 deletions packages/runtime-vapor/__tests__/for.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
},
Expand Down Expand Up @@ -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)
})
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
5 changes: 2 additions & 3 deletions packages/runtime-vapor/src/apiCreateFor.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import {
type ShallowRef,
effectScope,
isReactive,
proxyRefs,
shallowRef,
triggerRef,
} from '@vue/reactivity'
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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()
Expand Down

0 comments on commit cc58f65

Please sign in to comment.