Skip to content

Commit

Permalink
wip(vapor): improve v-for codegen + minor optimization
Browse files Browse the repository at this point in the history
  • Loading branch information
@yyx990803
yyx990803 committed Jan 31, 2025
1 parent 2b0731a commit cad7f0e
Show file tree
Hide file tree
Showing 9 changed files with 119 additions and 111 deletions.
2 changes: 1 addition & 1 deletion packages/compiler-vapor/__tests__/transforms/__snapshots__/transformTemplateRef.spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const t0 = _template("<div></div>", true)
export function render(_ctx) {
const _setTemplateRef = _createTemplateRefSetter()
const n0 = _createFor(() => ([1,2,3]), (_ctx0) => {
const n0 = _createFor(() => ([1,2,3]), (_for_item0) => {
const n2 = t0()
_setTemplateRef(n2, "foo", void 0, true)
return n2
Expand Down
40 changes: 20 additions & 20 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 @@ -5,9 +5,9 @@ exports[`compiler: v-for > array de-structured value (with rest) 1`] = `
const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = _createFor(() => (_ctx.list), (_ctx0) => {
const n0 = _createFor(() => (_ctx.list), (_for_item0, _for_key0) => {
const n2 = t0()
_renderEffect(() => _setText(n2, _ctx0[0].value[0] + _ctx0[0].value.slice(1) + _ctx0[1].value))
_renderEffect(() => _setText(n2, _for_item0.value[0] + _for_item0.value.slice(1) + _for_key0.value))
return n2
}, ([id, ...other], index) => (id))
return n0
Expand All @@ -19,9 +19,9 @@ exports[`compiler: v-for > array de-structured value 1`] = `
const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = _createFor(() => (_ctx.list), (_ctx0) => {
const n0 = _createFor(() => (_ctx.list), (_for_item0, _for_key0) => {
const n2 = t0()
_renderEffect(() => _setText(n2, _ctx0[0].value[0] + _ctx0[0].value[1] + _ctx0[1].value))
_renderEffect(() => _setText(n2, _for_item0.value[0] + _for_item0.value[1] + _for_key0.value))
return n2
}, ([id, other], index) => (id))
return n0
Expand All @@ -34,10 +34,10 @@ const t0 = _template("<div></div>", true)
_delegateEvents("click")
export function render(_ctx) {
const n0 = _createFor(() => (_ctx.items), (_ctx0) => {
const n0 = _createFor(() => (_ctx.items), (_for_item0) => {
const n2 = t0()
_delegate(n2, "click", () => $event => (_ctx.remove(_ctx0[0].value)))
_renderEffect(() => _setText(n2, _ctx0[0].value))
_delegate(n2, "click", () => $event => (_ctx.remove(_for_item0.value)))
_renderEffect(() => _setText(n2, _for_item0.value))
return n2
}, (item) => (item.id))
return n0
Expand All @@ -49,11 +49,11 @@ exports[`compiler: v-for > multi effect 1`] = `
const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = _createFor(() => (_ctx.items), (_ctx0) => {
const n0 = _createFor(() => (_ctx.items), (_for_item0, _for_key0) => {
const n2 = t0()
_renderEffect(() => {
_setProp(n2, "item", _ctx0[0].value)
_setProp(n2, "index", _ctx0[1].value)
_setProp(n2, "item", _for_item0.value)
_setProp(n2, "index", _for_key0.value)
})
return n2
})
Expand All @@ -67,11 +67,11 @@ const t0 = _template("<span></span>")
const t1 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = _createFor(() => (_ctx.list), (_ctx0) => {
const n0 = _createFor(() => (_ctx.list), (_for_item0) => {
const n5 = t1()
const n2 = _createFor(() => (_ctx0[0].value), (_ctx1) => {
const n2 = _createFor(() => (_for_item0.value), (_for_item1) => {
const n4 = t0()
_renderEffect(() => _setText(n4, _ctx1[0].value+_ctx0[0].value))
_renderEffect(() => _setText(n4, _for_item1.value+_for_item0.value))
return n4
})
_insert(n2, n5)
Expand All @@ -86,9 +86,9 @@ exports[`compiler: v-for > object de-structured value (with rest) 1`] = `
const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = _createFor(() => (_ctx.list), (_ctx0) => {
const n0 = _createFor(() => (_ctx.list), (_for_item0, _for_key0) => {
const n2 = t0()
_renderEffect(() => _setText(n2, _ctx0[0].value.id + _getRestElement(_ctx0[0].value, ["id"]) + _ctx0[1].value))
_renderEffect(() => _setText(n2, _for_item0.value.id + _getRestElement(_for_item0.value, ["id"]) + _for_key0.value))
return n2
}, ({ id, ...other }, index) => (id))
return n0
Expand All @@ -100,9 +100,9 @@ exports[`compiler: v-for > object de-structured value 1`] = `
const t0 = _template("<span></span>", true)
export function render(_ctx) {
const n0 = _createFor(() => (_ctx.items), (_ctx0) => {
const n0 = _createFor(() => (_ctx.items), (_for_item0) => {
const n2 = t0()
_renderEffect(() => _setText(n2, _ctx0[0].value.id, _ctx0[0].value.value))
_renderEffect(() => _setText(n2, _for_item0.value.id, _for_item0.value.value))
return n2
}, ({ id, value }) => (id))
return n0
Expand All @@ -114,9 +114,9 @@ exports[`compiler: v-for > v-for aliases w/ complex expressions 1`] = `
const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = _createFor(() => (_ctx.list), (_ctx0) => {
const n0 = _createFor(() => (_ctx.list), (_for_item0) => {
const n2 = t0()
_renderEffect(() => _setText(n2, _getDefaultValue(_ctx._ctx0[0].value.foo, _ctx.bar) + _ctx.bar + _ctx.baz + _getDefaultValue(_ctx._ctx0[0].value.baz[0], _ctx.quux) + _ctx.quux))
_renderEffect(() => _setText(n2, _getDefaultValue(_for_item0.value.foo, _ctx.bar) + _ctx.bar + _ctx.baz + _getDefaultValue(_for_item0.value.baz[0], _ctx.quux) + _ctx.quux))
return n2
})
return n0
Expand All @@ -128,7 +128,7 @@ exports[`compiler: v-for > w/o value 1`] = `
const t0 = _template("<div>item</div>", true)
export function render(_ctx) {
const n0 = _createFor(() => (_ctx.items), (_ctx0) => {
const n0 = _createFor(() => (_ctx.items), (_for_item0) => {
const n2 = t0()
return n2
})
Expand Down
2 changes: 1 addition & 1 deletion packages/compiler-vapor/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ exports[`compiler: v-once > with v-for 1`] = `
const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = _createFor(() => (_ctx.list), (_ctx0) => {
const n0 = _createFor(() => (_ctx.list), (_for_item0) => {
const n2 = t0()
return n2
}, null, null, true)
Expand Down
18 changes: 9 additions & 9 deletions packages/compiler-vapor/__tests__/transforms/vFor.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,9 +84,11 @@ describe('compiler: v-for', () => {
`<div v-for="i in list"><span v-for="j in i">{{ j+i }}</span></div>`,
)
expect(code).matchSnapshot()
expect(code).contains(`_createFor(() => (_ctx.list), (_ctx0) => {`)
expect(code).contains(`_createFor(() => (_ctx0[0].value), (_ctx1) => {`)
expect(code).contains(`_ctx1[0].value+_ctx0[0].value`)
expect(code).contains(`_createFor(() => (_ctx.list), (_for_item0) => {`)
expect(code).contains(
`_createFor(() => (_for_item0.value), (_for_item1) => {`,
)
expect(code).contains(`_for_item1.value+_for_item0.value`)
expect(ir.template).toEqual(['<span></span>', '<div></div>'])
expect(ir.block.operation).toMatchObject([
{
Expand Down Expand Up @@ -149,7 +151,7 @@ describe('compiler: v-for', () => {
`<div v-for="( { id, ...other }, index) in list" :key="id">{{ id + other + index }}</div>`,
)
expect(code).matchSnapshot()
expect(code).toContain('_getRestElement(_ctx0[0].value, ["id"])')
expect(code).toContain('_getRestElement(_for_item0.value, ["id"])')
expect(ir.block.operation[0]).toMatchObject({
type: IRNodeTypes.FOR,
source: {
Expand Down Expand Up @@ -212,7 +214,7 @@ describe('compiler: v-for', () => {
`<div v-for="([id, ...other], index) in list" :key="id">{{ id + other + index }}</div>`,
)
expect(code).matchSnapshot()
expect(code).toContain('_ctx0[0].value.slice(1)')
expect(code).toContain('_for_item0.value.slice(1)')
expect(ir.block.operation[0]).toMatchObject({
type: IRNodeTypes.FOR,
source: {
Expand Down Expand Up @@ -246,11 +248,9 @@ describe('compiler: v-for', () => {
</div>`,
)
expect(code).matchSnapshot()
expect(code).toContain(`_getDefaultValue(_for_item0.value.foo, _ctx.bar)`)
expect(code).toContain(
`_getDefaultValue(_ctx._ctx0[0].value.foo, _ctx.bar)`,
)
expect(code).toContain(
`_getDefaultValue(_ctx._ctx0[0].value.baz[0], _ctx.quux)`,
`_getDefaultValue(_for_item0.value.baz[0], _ctx.quux)`,
)
expect(ir.block.operation[0]).toMatchObject({
type: IRNodeTypes.FOR,
Expand Down
27 changes: 19 additions & 8 deletions packages/compiler-vapor/src/generators/for.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,13 @@ export function genFor(
const idToPathMap = parseValueDestructure()

const [depth, exitScope] = context.enterScope()
const propsName = `_ctx${depth}`
const idMap: Record<string, string | SimpleExpressionNode | null> = {}

const itemVar = `_for_item${depth}`
idMap[itemVar] = null

idToPathMap.forEach((pathInfo, id) => {
let path = `${propsName}[0].value${pathInfo ? pathInfo.path : ''}`
let path = `${itemVar}.value${pathInfo ? pathInfo.path : ''}`
if (pathInfo) {
if (pathInfo.helper) {
idMap[pathInfo.helper] = null
Expand All @@ -50,13 +52,22 @@ export function genFor(
idMap[id] = path
}
})
if (rawKey) idMap[rawKey] = `${propsName}[1].value`
if (rawIndex) idMap[rawIndex] = `${propsName}[2].value`

const blockFn = context.withId(
() => genBlock(render, context, [propsName]),
idMap,
)
const args = [itemVar]
if (rawKey) {
const keyVar = `_for_key${depth}`
args.push(`, ${keyVar}`)
idMap[rawKey] = `${keyVar}.value`
idMap[keyVar] = null
}
if (rawIndex) {
const indexVar = `_for_index${depth}`
args.push(`, ${indexVar}`)
idMap[rawIndex] = `${indexVar}.value`
idMap[indexVar] = null
}

const blockFn = context.withId(() => genBlock(render, context, args), idMap)
exitScope()

return [
Expand Down
4 changes: 2 additions & 2 deletions packages/runtime-vapor/__tests__/apiCreateSelector.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ describe.todo('api: createSelector', () => {
const isSleected = createSelector(index)
return createFor(
() => list.value,
([item]) => {
item => {
const span = document.createElement('li')
renderEffect(() => {
calledTimes += 1
Expand Down Expand Up @@ -73,7 +73,7 @@ describe.todo('api: createSelector', () => {
)
return createFor(
() => list.value,
([item]) => {
item => {
const span = document.createElement('li')
renderEffect(() => {
calledTimes += 1
Expand Down
9 changes: 3 additions & 6 deletions packages/runtime-vapor/__tests__/dom/templateRef.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -422,7 +422,7 @@ describe('api: template ref', () => {
const n1 = t0()
const n2 = createFor(
() => list,
state => {
item => {
const n1 = t1()
createTemplateRefSetter()(
n1 as Element,
Expand All @@ -431,7 +431,6 @@ describe('api: template ref', () => {
true,
)
renderEffect(() => {
const [item] = state
setText(n1, item)
})
return n1
Expand Down Expand Up @@ -485,7 +484,7 @@ describe('api: template ref', () => {
const n1 = t0()
const n2 = createFor(
() => list,
state => {
item => {
const n1 = t1()
createTemplateRefSetter()(
n1 as Element,
Expand All @@ -494,7 +493,6 @@ describe('api: template ref', () => {
true,
)
renderEffect(() => {
const [item] = state
setText(n1, item)
})
return n1
Expand Down Expand Up @@ -546,7 +544,7 @@ describe('api: template ref', () => {
const n2 = n1!.nextSibling!
const n3 = createFor(
() => list.value,
state => {
item => {
const n4 = t1()
createTemplateRefSetter()(
n4 as Element,
Expand All @@ -555,7 +553,6 @@ describe('api: template ref', () => {
true,
)
renderEffect(() => {
const [item] = state
setText(n4, item)
})
return n4
Expand Down
Loading

0 comments on commit cad7f0e

Please sign in to comment.