From 1dbd6424927c6b14b4a4d751b5d10d0955aa96e4 Mon Sep 17 00:00:00 2001 From: daiwei Date: Tue, 31 Dec 2024 09:30:16 +0800 Subject: [PATCH] chore: update --- .../__snapshots__/compile.spec.ts.snap | 4 +- .../transformTemplateRef.spec.ts.snap | 4 +- .../transforms/__snapshots__/vIf.spec.ts.snap | 20 +-- .../__snapshots__/vOnce.spec.ts.snap | 4 +- packages/compiler-vapor/src/generators/if.ts | 4 +- .../__tests__/apiLifecycle.spec.ts | 29 ++-- .../__tests__/componentSlots.spec.ts | 11 +- .../__tests__/dom/templateRef.spec.ts | 144 +++++++++--------- packages/runtime-vapor/__tests__/if.spec.ts | 102 +++++++------ packages/runtime-vapor/src/apiCreateIf.ts | 6 +- 10 files changed, 167 insertions(+), 161 deletions(-) diff --git a/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap b/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap index ec297293c..f7c38ff45 100644 --- a/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap +++ b/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap @@ -35,13 +35,13 @@ export function render(_ctx) { const _directive_test = _resolveDirective("test") const n4 = _createComponentWithFallback(_component_Comp, null, { "default": () => { - const n0 = _createIf(() => (true) && (() => { + const n0 = _createIf(() => (true) ? () => { const n3 = t0() const n2 = _createComponentWithFallback(_component_Bar) _withDirectives(n2, [[_directive_hello, void 0, void 0, { world: true }]]) _insert(n2, n3) return n3 - })) + } : undefined) return n0 } }, true) diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformTemplateRef.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformTemplateRef.spec.ts.snap index 9f6c6fea8..6daa919b8 100644 --- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformTemplateRef.spec.ts.snap +++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformTemplateRef.spec.ts.snap @@ -34,11 +34,11 @@ const t0 = _template("
", true) export function render(_ctx) { const _setTemplateRef = _createTemplateRefSetter() - const n0 = _createIf(() => (true) && (() => { + const n0 = _createIf(() => (true) ? () => { const n2 = t0() _setTemplateRef(n2, "foo") return n2 - })) + } : undefined) return n0 }" `; diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vIf.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vIf.spec.ts.snap index df1545d0f..581804838 100644 --- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vIf.spec.ts.snap +++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vIf.spec.ts.snap @@ -5,11 +5,11 @@ exports[`compiler: v-if > basic v-if 1`] = ` const t0 = _template("
", true) export function render(_ctx) { - const n0 = _createIf(() => (_ctx.ok) && (() => { + const n0 = _createIf(() => (_ctx.ok) ? () => { const n2 = t0() _renderEffect(() => _setText(n2, _ctx.msg)) return n2 - })) + } : undefined) return n0 }" `; @@ -47,14 +47,14 @@ exports[`compiler: v-if > dedupe same template 1`] = ` const t0 = _template("
hello
") export function render(_ctx) { - const n0 = _createIf(() => (_ctx.ok) && (() => { + const n0 = _createIf(() => (_ctx.ok) ? () => { const n2 = t0() return n2 - })) - const n3 = _createIf(() => (_ctx.ok) && (() => { + } : undefined) + const n3 = _createIf(() => (_ctx.ok) ? () => { const n5 = t0() return n5 - })) + } : undefined) return [n0, n3] }" `; @@ -66,13 +66,13 @@ const t1 = _template("hello") const t2 = _template("

", true) export function render(_ctx) { - const n0 = _createIf(() => (_ctx.ok) && (() => { + const n0 = _createIf(() => (_ctx.ok) ? () => { const n2 = t0() const n3 = t1() const n4 = t2() _renderEffect(() => _setText(n4, _ctx.msg)) return [n2, n3, n4] - })) + } : undefined) return n0 }" `; @@ -124,10 +124,10 @@ export function render(_ctx) { const n0 = _createIf(() => (_ctx.ok) ? () => { const n2 = t0() return n2 - } : () => (_ctx.orNot) && (() => { + } : () => (_ctx.orNot) ? () => { const n4 = t1() return n4 - })) + } : undefined) return n0 }" `; diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap index ee25990a5..64547034c 100644 --- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap +++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap @@ -78,10 +78,10 @@ exports[`compiler: v-once > with v-if 1`] = ` const t0 = _template("
", true) export function render(_ctx) { - const n0 = _createIf(() => (_ctx.expr) && (() => { + const n0 = _createIf(() => (_ctx.expr) ? () => { const n2 = t0() return n2 - }), true) + } : undefined, true) return n0 }" `; diff --git a/packages/compiler-vapor/src/generators/if.ts b/packages/compiler-vapor/src/generators/if.ts index d59d86618..e3c9b6ab4 100644 --- a/packages/compiler-vapor/src/generators/if.ts +++ b/packages/compiler-vapor/src/generators/if.ts @@ -31,8 +31,8 @@ export function genIf( negativeArg.push(...genIf(negative!, context, true)) } } else { - positiveArg.unshift(' && (') - positiveArg.push(')') + positiveArg.unshift(' ? ') + positiveArg.push(' : undefined') } codes.push(...positiveArg) diff --git a/packages/runtime-vapor/__tests__/apiLifecycle.spec.ts b/packages/runtime-vapor/__tests__/apiLifecycle.spec.ts index af9f10f9f..1cc2e463c 100644 --- a/packages/runtime-vapor/__tests__/apiLifecycle.spec.ts +++ b/packages/runtime-vapor/__tests__/apiLifecycle.spec.ts @@ -138,9 +138,8 @@ describe('api: lifecycle hooks', () => { const { render, host } = define({ setup() { // @ts-expect-error - const n0 = createIf( - () => toggle.value, - () => createComponent(Child), + const n0 = createIf(() => + toggle.value ? () => createComponent(Child) : undefined, ) return n0 }, @@ -172,9 +171,8 @@ describe('api: lifecycle hooks', () => { const { render, host } = define({ setup() { // @ts-expect-error - const n0 = createIf( - () => toggle.value, - () => createComponent(Child), + const n0 = createIf(() => + toggle.value ? () => createComponent(Child) : undefined, ) return n0 }, @@ -206,9 +204,8 @@ describe('api: lifecycle hooks', () => { const { render, host } = define({ setup() { // @ts-expect-error - const n0 = createIf( - () => toggle.value, - () => createComponent(Child), + const n0 = createIf(() => + toggle.value ? () => createComponent(Child) : undefined, ) return n0 }, @@ -249,9 +246,10 @@ describe('api: lifecycle hooks', () => { onUnmounted(() => calls.push('onUnmounted')) // @ts-expect-error - const n0 = createIf( - () => toggle.value, - () => createComponent(Mid, { count: () => count.value }), + const n0 = createIf(() => + toggle.value + ? () => createComponent(Mid, { count: () => count.value }) + : undefined, ) return n0 }, @@ -428,9 +426,10 @@ describe('api: lifecycle hooks', () => { const { render } = define({ setup() { // @ts-expect-error - return createIf( - () => toggle.value, - () => [createComponent(Child), createComponent(Child)], + return createIf(() => + toggle.value + ? () => [createComponent(Child), createComponent(Child)] + : undefined, ) }, }) diff --git a/packages/runtime-vapor/__tests__/componentSlots.spec.ts b/packages/runtime-vapor/__tests__/componentSlots.spec.ts index f4ff0c31c..5f1e7929d 100644 --- a/packages/runtime-vapor/__tests__/componentSlots.spec.ts +++ b/packages/runtime-vapor/__tests__/componentSlots.spec.ts @@ -447,11 +447,12 @@ describe('component: slots', () => { setup() { return createComponent(Child, null, { default: () => { - return createIf( - () => toggle.value, - () => { - return document.createTextNode('content') - }, + return createIf(() => + toggle.value + ? () => { + return document.createTextNode('content') + } + : () => [], ) }, }) diff --git a/packages/runtime-vapor/__tests__/dom/templateRef.spec.ts b/packages/runtime-vapor/__tests__/dom/templateRef.spec.ts index a9a116f8a..41f637d93 100644 --- a/packages/runtime-vapor/__tests__/dom/templateRef.spec.ts +++ b/packages/runtime-vapor/__tests__/dom/templateRef.spec.ts @@ -89,13 +89,14 @@ describe('api: template ref', () => { }, render() { const setRef = createTemplateRefSetter() - const n0 = createIf( - () => toggle.value, - () => { - const n1 = t0() - setRef(n1 as Element, 'refKey') - return n1 - }, + const n0 = createIf(() => + toggle.value + ? () => { + const n1 = t0() + setRef(n1 as Element, 'refKey') + return n1 + } + : undefined, ) return n0 }, @@ -160,13 +161,14 @@ describe('api: template ref', () => { const t0 = template('
') const { render } = define({ render() { - const n0 = createIf( - () => toggle.value, - () => { - const n1 = t0() - createTemplateRefSetter()(n1 as Element, fn) - return n1 - }, + const n0 = createIf(() => + toggle.value + ? () => { + const n1 = t0() + createTemplateRefSetter()(n1 as Element, fn) + return n1 + } + : undefined, ) return n0 }, @@ -371,18 +373,18 @@ describe('api: template ref', () => { render() { const instance = currentInstance! const setRef = createTemplateRefSetter() - const n0 = createIf( - () => refToggle.value, - () => { - const n1 = t0() - setRef(n1 as Element, 'foo') - return n1 - }, - () => { - const n1 = t1() - setRef(n1 as Element, 'foo') - return n1 - }, + const n0 = createIf(() => + refToggle.value + ? () => { + const n1 = t0() + setRef(n1 as Element, 'foo') + return n1 + } + : () => { + const n1 = t1() + setRef(n1 as Element, 'foo') + return n1 + }, ) watchEffect( () => { @@ -416,30 +418,31 @@ describe('api: template ref', () => { const t1 = template('
  • ') const { render } = define({ render() { - const n0 = createIf( - () => show.value, - () => { - const n1 = t0() - const n2 = createFor( - () => list, - state => { - const n1 = t1() - createTemplateRefSetter()( - n1 as Element, - listRefs, - undefined, - true, + const n0 = createIf(() => + show.value + ? () => { + const n1 = t0() + const n2 = createFor( + () => list, + state => { + const n1 = t1() + createTemplateRefSetter()( + n1 as Element, + listRefs, + undefined, + true, + ) + renderEffect(() => { + const [item] = state + setText(n1, item) + }) + return n1 + }, ) - renderEffect(() => { - const [item] = state - setText(n1, item) - }) + insert(n2, n1 as ParentNode) return n1 - }, - ) - insert(n2, n1 as ParentNode) - return n1 - }, + } + : undefined, ) return n0 }, @@ -479,30 +482,31 @@ describe('api: template ref', () => { return { listRefs } }, render() { - const n0 = createIf( - () => show.value, - () => { - const n1 = t0() - const n2 = createFor( - () => list, - state => { - const n1 = t1() - createTemplateRefSetter()( - n1 as Element, - 'listRefs', - undefined, - true, + const n0 = createIf(() => + show.value + ? () => { + const n1 = t0() + const n2 = createFor( + () => list, + state => { + const n1 = t1() + createTemplateRefSetter()( + n1 as Element, + 'listRefs', + undefined, + true, + ) + renderEffect(() => { + const [item] = state + setText(n1, item) + }) + return n1 + }, ) - renderEffect(() => { - const [item] = state - setText(n1, item) - }) + insert(n2, n1 as ParentNode) return n1 - }, - ) - insert(n2, n1 as ParentNode) - return n1 - }, + } + : undefined, ) return n0 }, diff --git a/packages/runtime-vapor/__tests__/if.spec.ts b/packages/runtime-vapor/__tests__/if.spec.ts index a7e6266a7..f768d0f7c 100644 --- a/packages/runtime-vapor/__tests__/if.spec.ts +++ b/packages/runtime-vapor/__tests__/if.spec.ts @@ -38,21 +38,21 @@ describe('createIf', () => { const n0 = t0() insert( - createIf( - spyConditionFn, - // v-if - (spyIfFn ||= vi.fn(() => { - const n2 = t1() - renderEffect(() => { - setText(n2, count.value) - }) - return n2 - })), - // v-else - (spyElseFn ||= vi.fn(() => { - const n4 = t2() - return n4 - })), + createIf(() => + spyConditionFn() + ? // v-if + (spyIfFn ||= vi.fn(() => { + const n2 = t1() + renderEffect(() => { + setText(n2, count.value) + }) + return n2 + })) + : // v-else + (spyElseFn ||= vi.fn(() => { + const n4 = t2() + return n4 + })), ), n0 as any as ParentNode, ) @@ -61,7 +61,7 @@ describe('createIf', () => { expect(host.innerHTML).toBe('

    zero

    ') expect(spyConditionFn).toHaveBeenCalledTimes(1) - expect(spyIfFn!).toHaveBeenCalledTimes(0) + expect(spyIfFn!).toBeUndefined() expect(spyElseFn!).toHaveBeenCalledTimes(1) count.value++ @@ -98,19 +98,21 @@ describe('createIf', () => { const t0 = template('Vapor') const t1 = template('Hello ') const { host } = define(() => { - const n1 = createIf( - () => ok1.value, - () => { - const n2 = t1() - const n3 = createIf( - () => ok2.value, - () => { - const n4 = t0() - return n4 - }, - ) - return [n2, n3] - }, + const n1 = createIf(() => + ok1.value + ? () => { + const n2 = t1() + const n3 = createIf(() => + ok2.value + ? () => { + const n4 = t0() + return n4 + } + : undefined, + ) + return [n2, n3] + } + : undefined, ) return n1 }).render() @@ -158,29 +160,29 @@ describe('createIf', () => { const t0 = template('

    ') const { instance } = define(() => { - const n1 = createIf( - spyConditionFn1, - () => { - const n2 = t0() - withDirectives(children(n2, 0), [ - [vDirective, () => (update.value, '1')], - ]) - return n2 - }, - () => - createIf( - spyConditionFn2, - () => { + const n1 = createIf(() => + spyConditionFn1() + ? () => { const n2 = t0() - withDirectives(children(n2, 0), [[vDirective, () => '2']]) + withDirectives(children(n2, 0), [ + [vDirective, () => (update.value, '1')], + ]) return n2 - }, - () => { - const n2 = t0() - withDirectives(children(n2, 0), [[vDirective, () => '3']]) - return n2 - }, - ), + } + : () => + createIf(() => + spyConditionFn2() + ? () => { + const n2 = t0() + withDirectives(children(n2, 0), [[vDirective, () => '2']]) + return n2 + } + : () => { + const n2 = t0() + withDirectives(children(n2, 0), [[vDirective, () => '3']]) + return n2 + }, + ), ) return [n1] }).render() diff --git a/packages/runtime-vapor/src/apiCreateIf.ts b/packages/runtime-vapor/src/apiCreateIf.ts index bcf01e96e..fb2c48812 100644 --- a/packages/runtime-vapor/src/apiCreateIf.ts +++ b/packages/runtime-vapor/src/apiCreateIf.ts @@ -2,15 +2,15 @@ import { type BlockFn, DynamicFragment } from './block' import { renderEffect } from './renderEffect' export function createIf( - ifBlockFn: () => BlockFn, + ifBlockGetter: () => BlockFn | undefined, once?: boolean, // hydrationNode?: Node, ): DynamicFragment { const frag = __DEV__ ? new DynamicFragment('if') : new DynamicFragment() if (once) { - frag.update(ifBlockFn()) + frag.update(ifBlockGetter()) } else { - renderEffect(() => frag.update(ifBlockFn())) + renderEffect(() => frag.update(ifBlockGetter())) } return frag }