mirrors
/
vue3-core
mirror of https://mirror.osredm.com/root/vue3-core.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor(compiler-vapor): simplify renderEffect with a single statement

This commit is contained in:
三咲智子 Kevin Deng 2024-02-06 20:46:12 +08:00
parent d10a1a3c08
commit 9ffd4b6c75
No known key found for this signature in database
GPG Key ID: 69992F2250DFD93E
8 changed files with 64 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap
View File

@ -10,9 +10,7 @@ export function render(_ctx) {
const { 0: [n3, { 1: [n2],}],} = _children(n0)
const n1 = _createTextNode()
_insert(n1, n3, n2)
_renderEffect(() => {
_setText(n1, _ctx.count)
})
_renderEffect(() => _setText(n1, _ctx.count))
return n0
}"
`;
@ -153,12 +151,8 @@ export function render(_ctx) {
const { 1: [n2],} = _children(n0)
const n1 = _createTextNode()
_append(n2, n1)
_renderEffect(() => {
_setText(n1, _ctx.bar)
})
_renderEffect(() => {
_setDynamicProp(n2, "id", _ctx.foo)
})
_renderEffect(() => _setText(n1, _ctx.bar))
_renderEffect(() => _setDynamicProp(n2, "id", _ctx.foo))
return n0
}"
`;
@ -173,12 +167,8 @@ export function render(_ctx) {
const { 1: [n2],} = _children(n0)
const n1 = _createTextNode()
_append(n2, n1)
_renderEffect(() => {
_setText(n1, _ctx.bar)
})
_renderEffect(() => {
_setDynamicProp(n2, "id", _ctx.foo)
})
_renderEffect(() => _setText(n1, _ctx.bar))
_renderEffect(() => _setDynamicProp(n2, "id", _ctx.foo))
return n0
}"
`;
@ -193,12 +183,8 @@ export function render(_ctx) {
const n1 = _createTextNode()
const n2 = _createTextNode()
_append(n0, n1, n2)
_renderEffect(() => {
_setText(n1, 1)
})
_renderEffect(() => {
_setText(n2, 2)
})
_renderEffect(() => _setText(n1, 1))
_renderEffect(() => _setText(n2, 2))
return n0
}"
`;
@ -222,8 +208,7 @@ export function render(_ctx) {
_setText(n1, _ctx.count)
_setText(n2, _ctx.count)
_setText(n3, _ctx.count)
_setDynamicProp(n4, "id", _ctx.count)
})
_setDynamicProp(n4, "id", _ctx.count)})
return n0
}"
`;
@ -235,9 +220,7 @@ const t0 = _fragment()
const n0 = t0()
const n1 = _createTextNode()
_append(n0, n1)
_renderEffect(() => {
_setText(n1, a + b.value)
})
_renderEffect(() => _setText(n1, a + b.value))
return n0
})()"
`;
@ -248,9 +231,7 @@ const t0 = _template("<div></div>")
(() => {
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
_setDynamicProps(n1, { [key.value+1]: _unref(foo)[key.value+1]() })
})
_renderEffect(() => _setDynamicProps(n1, { [key.value+1]: _unref(foo)[key.value+1]() }))
return n0
})()"
`;
@ -286,30 +267,14 @@ export function render(_ctx) {
_insert([n3, n4], n0, n9)
_insert([n5, n6], n0, n10)
_append(n0, n7, n8)
_renderEffect(() => {
_setText(n1, 1)
})
_renderEffect(() => {
_setText(n2, 2)
})
_renderEffect(() => {
_setText(n3, 4)
})
_renderEffect(() => {
_setText(n4, 5)
})
_renderEffect(() => {
_setText(n5, 7)
})
_renderEffect(() => {
_setText(n6, 8)
})
_renderEffect(() => {
_setText(n7, 'A')
})
_renderEffect(() => {
_setText(n8, 'B')
})
_renderEffect(() => _setText(n1, 1))
_renderEffect(() => _setText(n2, 2))
_renderEffect(() => _setText(n3, 4))
_renderEffect(() => _setText(n4, 5))
_renderEffect(() => _setText(n5, 7))
_renderEffect(() => _setText(n6, 8))
_renderEffect(() => _setText(n7, 'A'))
_renderEffect(() => _setText(n8, 'B'))
return n0
}"
`;

24
packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap
View File

@ -8,9 +8,7 @@ const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
_setClass(n1, ["foo", { bar: _ctx.isBar }])
})
_renderEffect(() => _setClass(n1, ["foo", { bar: _ctx.isBar }]))
return n0
}"
`;
@ -23,9 +21,7 @@ const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
_setStyle(n1, ["color: green", { color: 'red' }])
})
_renderEffect(() => _setStyle(n1, ["color: green", { color: 'red' }]))
return n0
}"
`;
@ -49,9 +45,7 @@ const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
_setDynamicProps(n1, _ctx.obj)
})
_renderEffect(() => _setDynamicProps(n1, _ctx.obj))
return n0
}"
`;
@ -64,9 +58,7 @@ const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
_setDynamicProps(n1, { id: "foo" }, _ctx.obj)
})
_renderEffect(() => _setDynamicProps(n1, { id: "foo" }, _ctx.obj))
return n0
}"
`;
@ -79,9 +71,7 @@ const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
_setDynamicProps(n1, _ctx.obj, { id: "foo" })
})
_renderEffect(() => _setDynamicProps(n1, _ctx.obj, { id: "foo" }))
return n0
}"
`;
@ -94,9 +84,7 @@ const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
_setDynamicProps(n1, { id: "foo" }, _ctx.obj, { class: "bar" })
})
_renderEffect(() => _setDynamicProps(n1, { id: "foo" }, _ctx.obj, { class: "bar" }))
return n0
}"
`;

60
packages/compiler-vapor/__tests__/transforms/__snapshots__/vBind.spec.ts.snap
View File

@ -8,9 +8,7 @@ const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
_setAttr(n1, "foo-bar", _ctx.id)
})
_renderEffect(() => _setAttr(n1, "foo-bar", _ctx.id))
return n0
}"
`;
@ -23,9 +21,7 @@ const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
_setAttr(n1, "foo-bar", _ctx.fooBar)
})
_renderEffect(() => _setAttr(n1, "foo-bar", _ctx.fooBar))
return n0
}"
`;
@ -38,9 +34,7 @@ const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
_setDynamicProp(n1, "fooBar", _ctx.id)
})
_renderEffect(() => _setDynamicProp(n1, "fooBar", _ctx.id))
return n0
}"
`;
@ -54,9 +48,7 @@ const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
_setDynamicProps(n1, { [_camelize(_ctx.foo)]: _ctx.id })
})
_renderEffect(() => _setDynamicProps(n1, { [_camelize(_ctx.foo)]: _ctx.id }))
return n0
}"
`;
@ -69,9 +61,7 @@ const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
_setDynamicProp(n1, "fooBar", _ctx.fooBar)
})
_renderEffect(() => _setDynamicProp(n1, "fooBar", _ctx.fooBar))
return n0
}"
`;
@ -84,9 +74,7 @@ const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
_setDOMProp(n1, "fooBar", _ctx.fooBar)
})
_renderEffect(() => _setDOMProp(n1, "fooBar", _ctx.fooBar))
return n0
}"
`;
@ -99,9 +87,7 @@ const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
_setDOMProp(n1, "fooBar", _ctx.id)
})
_renderEffect(() => _setDOMProp(n1, "fooBar", _ctx.id))
return n0
}"
`;
@ -114,9 +100,7 @@ const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
_setDOMProp(n1, "fooBar", _ctx.id)
})
_renderEffect(() => _setDOMProp(n1, "fooBar", _ctx.id))
return n0
}"
`;
@ -129,9 +113,7 @@ const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
_setDynamicProps(n1, { [\`.\${_ctx.fooBar}\`]: _ctx.id })
})
_renderEffect(() => _setDynamicProps(n1, { [\`.\${_ctx.fooBar}\`]: _ctx.id }))
return n0
}"
`;
@ -144,9 +126,7 @@ const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
_setDOMProp(n1, "fooBar", _ctx.fooBar)
})
_renderEffect(() => _setDOMProp(n1, "fooBar", _ctx.fooBar))
return n0
}"
`;
@ -159,9 +139,7 @@ const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
_setDynamicProp(n1, "id", _ctx.id)
})
_renderEffect(() => _setDynamicProp(n1, "id", _ctx.id))
return n0
}"
`;
@ -174,9 +152,7 @@ const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
_setDynamicProps(n1, { [_ctx.id]: _ctx.id, [_ctx.title]: _ctx.title })
})
_renderEffect(() => _setDynamicProps(n1, { [_ctx.id]: _ctx.id, [_ctx.title]: _ctx.title }))
return n0
}"
`;
@ -189,9 +165,7 @@ const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
_setDynamicProps(n1, { [_ctx.id]: _ctx.id, foo: "bar", checked: "" })
})
_renderEffect(() => _setDynamicProps(n1, { [_ctx.id]: _ctx.id, foo: "bar", checked: "" }))
return n0
}"
`;
@ -204,9 +178,7 @@ const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
_setDynamicProp(n1, "camel-case", _ctx.camelCase)
})
_renderEffect(() => _setDynamicProp(n1, "camel-case", _ctx.camelCase))
return n0
}"
`;
@ -219,9 +191,7 @@ const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
_setDynamicProp(n1, "id", _ctx.id)
})
_renderEffect(() => _setDynamicProp(n1, "id", _ctx.id))
return n0
}"
`;

8
packages/compiler-vapor/__tests__/transforms/__snapshots__/vHtml.spec.ts.snap
View File

@ -8,9 +8,7 @@ const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
_setHtml(n1, _ctx.code)
})
_renderEffect(() => _setHtml(n1, _ctx.code))
return n0
}"
`;
@ -23,9 +21,7 @@ const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
_setHtml(n1, _ctx.test)
})
_renderEffect(() => _setHtml(n1, _ctx.test))
return n0
}"
`;

12
packages/compiler-vapor/__tests__/transforms/__snapshots__/vIf.spec.ts.snap
View File

@ -11,9 +11,7 @@ export function render(_ctx) {
const n1 = _createIf(() => (_ctx.ok), () => {
const n2 = t0()
const { 0: [n3],} = _children(n2)
_renderEffect(() => {
_setText(n3, _ctx.msg)
})
_renderEffect(() => _setText(n3, _ctx.msg))
return n2
})
_append(n0, n1)
@ -43,9 +41,7 @@ export function render(_ctx) {
return n4
}))
_prepend(n0, n1)
_renderEffect(() => {
_setText(n5, _ctx.text)
})
_renderEffect(() => _setText(n5, _ctx.text))
return n0
}"
`;
@ -82,9 +78,7 @@ export function render(_ctx) {
const n1 = _createIf(() => (_ctx.ok), () => {
const n2 = t0()
const { 2: [n3],} = _children(n2)
_renderEffect(() => {
_setText(n3, _ctx.msg)
})
_renderEffect(() => _setText(n3, _ctx.msg))
return n2
})
_append(n0, n1)

24
packages/compiler-vapor/__tests__/transforms/__snapshots__/vOn.spec.ts.snap
View File

@ -34,9 +34,7 @@ const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
_on(n1, _ctx.event, (...args) => (_ctx.handler && _ctx.handler(...args)))
})
_renderEffect(() => _on(n1, _ctx.event, (...args) => (_ctx.handler && _ctx.handler(...args))))
return n0
}"
`;
@ -49,9 +47,7 @@ const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
_on(n1, _ctx.event(_ctx.foo), (...args) => (_ctx.handler && _ctx.handler(...args)))
})
_renderEffect(() => _on(n1, _ctx.event(_ctx.foo), (...args) => (_ctx.handler && _ctx.handler(...args))))
return n0
}"
`;
@ -64,9 +60,7 @@ const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
_on(n1, _ctx.event, (...args) => (_ctx.handler && _ctx.handler(...args)))
})
_renderEffect(() => _on(n1, _ctx.event, (...args) => (_ctx.handler && _ctx.handler(...args))))
return n0
}"
`;
@ -316,9 +310,7 @@ const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
_on(n1, (_ctx.event) === "click" ? "mouseup" : (_ctx.event), _withModifiers((...args) => (_ctx.test && _ctx.test(...args)), ["middle"]))
})
_renderEffect(() => _on(n1, (_ctx.event) === "click" ? "mouseup" : (_ctx.event), _withModifiers((...args) => (_ctx.test && _ctx.test(...args)), ["middle"])))
return n0
}"
`;
@ -344,9 +336,7 @@ const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
_on(n1, (_ctx.event) === "click" ? "contextmenu" : (_ctx.event), _withKeys(_withModifiers((...args) => (_ctx.test && _ctx.test(...args)), ["right"]), ["right"]))
})
_renderEffect(() => _on(n1, (_ctx.event) === "click" ? "contextmenu" : (_ctx.event), _withKeys(_withModifiers((...args) => (_ctx.test && _ctx.test(...args)), ["right"]), ["right"])))
return n0
}"
`;
@ -372,9 +362,7 @@ const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
_on(n1, _ctx.e, _withKeys(_withModifiers((...args) => (_ctx.test && _ctx.test(...args)), ["left"]), ["left"]))
})
_renderEffect(() => _on(n1, _ctx.e, _withKeys(_withModifiers((...args) => (_ctx.test && _ctx.test(...args)), ["left"]), ["left"])))
return n0
}"
`;

8
packages/compiler-vapor/__tests__/transforms/__snapshots__/vText.spec.ts.snap
View File

@ -8,9 +8,7 @@ const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
_setText(n1, _ctx.str)
})
_renderEffect(() => _setText(n1, _ctx.str))
return n0
}"
`;
@ -23,9 +21,7 @@ const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
_setText(n1, _ctx.test)
})
_renderEffect(() => _setText(n1, _ctx.test))
return n0
}"
`;

16
packages/compiler-vapor/src/generators/operation.ts
View File

@ -73,10 +73,18 @@ export function genEffect({ operations }: IREffect, context: CodegenContext) {
const { vaporHelper } = context
const [frag, push] = buildCodeFragment(
NEWLINE,
`${vaporHelper('renderEffect')}(() => {`,
INDENT_START,
`${vaporHelper('renderEffect')}(() => `,
)
operations.forEach(op => push(...genOperation(op, context)))
push(INDENT_END, NEWLINE, '})')
const [fragOps, pushOps] = buildCodeFragment()
operations.forEach(op => pushOps(...genOperation(op, context)))
const newlineCount = fragOps.filter(frag => frag === NEWLINE).length
if (newlineCount > 1) {
push('{', INDENT_START, ...fragOps, INDENT_END, '})')
} else {
push(...fragOps.filter(frag => frag !== NEWLINE), ')')
}
return frag
}