${repeat( diff --git a/packages/compiler-dom/src/transforms/stringifyStatic.ts b/packages/compiler-dom/src/transforms/stringifyStatic.ts index a608ea3c4b3..cd8f1a9d184 100644 --- a/packages/compiler-dom/src/transforms/stringifyStatic.ts +++ b/packages/compiler-dom/src/transforms/stringifyStatic.ts @@ -261,8 +261,7 @@ function analyzeNode(node: StringifiableNode): [number, number] | false { isOptionTag && isStaticArgOf(p.arg, 'value') && p.exp && - p.exp.ast && - p.exp.ast.type !== 'StringLiteral' + !p.exp.isStatic ) { return bail() } From ec917cfdb9d0169cd0835d3a0e28244242657dc9 Mon Sep 17 00:00:00 2001 From: skirtle <65301168+skirtles-code@users.noreply.github.com> Date: Fri, 11 Oct 2024 03:48:54 +0100 Subject: [PATCH 024/222] perf(reactivity): avoid unnecessary recursion in removeSub (#12135) --- .../reactivity/__tests__/computed.spec.ts | 32 +++++++++++++++++++ packages/reactivity/src/effect.ts | 25 ++++++++------- 2 files changed, 45 insertions(+), 12 deletions(-) diff --git a/packages/reactivity/__tests__/computed.spec.ts b/packages/reactivity/__tests__/computed.spec.ts index 36c477adb88..123df44f253 100644 --- a/packages/reactivity/__tests__/computed.spec.ts +++ b/packages/reactivity/__tests__/computed.spec.ts @@ -1107,4 +1107,36 @@ describe('reactivity/computed', () => { end.prop4.value, ]).toMatchObject([-2, -4, 2, 3]) }) + + test('performance when removing dependencies from deeply nested computeds', () => { + const base = ref(1) + const trigger = ref(true) + const computeds: ComputedRef[] = [] + + const LAYERS = 30 + + for (let i = 0; i < LAYERS; i++) { + const earlier = [...computeds] + + computeds.push( + computed(() => { + return base.value + earlier.reduce((sum, c) => sum + c.value, 0) + }), + ) + } + + const tail = computed(() => + trigger.value ? computeds[computeds.length - 1].value : 0, + ) + + const t0 = performance.now() + expect(tail.value).toBe(2 ** (LAYERS - 1)) + const t1 = performance.now() + expect(t1 - t0).toBeLessThan(process.env.CI ? 100 : 30) + + trigger.value = false + expect(tail.value).toBe(0) + const t2 = performance.now() + expect(t2 - t1).toBeLessThan(process.env.CI ? 100 : 30) + }) }) diff --git a/packages/reactivity/src/effect.ts b/packages/reactivity/src/effect.ts index 243518839b3..886f380dd52 100644 --- a/packages/reactivity/src/effect.ts +++ b/packages/reactivity/src/effect.ts @@ -426,23 +426,24 @@ function removeSub(link: Link, soft = false) { nextSub.prevSub = prevSub link.nextSub = undefined } - if (dep.subs === link) { - // was previous tail, point new tail to prev - dep.subs = prevSub - } if (__DEV__ && dep.subsHead === link) { // was previous head, point new head to next dep.subsHead = nextSub } - if (!dep.subs && dep.computed) { - // if computed, unsubscribe it from all its deps so this computed and its - // value can be GCed - dep.computed.flags &= ~EffectFlags.TRACKING - for (let l = dep.computed.deps; l; l = l.nextDep) { - // here we are only "soft" unsubscribing because the computed still keeps - // referencing the deps and the dep should not decrease its sub count - removeSub(l, true) + if (dep.subs === link) { + // was previous tail, point new tail to prev + dep.subs = prevSub + + if (!prevSub && dep.computed) { + // if computed, unsubscribe it from all its deps so this computed and its + // value can be GCed + dep.computed.flags &= ~EffectFlags.TRACKING + for (let l = dep.computed.deps; l; l = l.nextDep) { + // here we are only "soft" unsubscribing because the computed still keeps + // referencing the deps and the dep should not decrease its sub count + removeSub(l, true) + } } } From b4d35349d8bc39aa15bd3f1094d230e5928b177c Mon Sep 17 00:00:00 2001 From: yangxiuxiu <79584569+yangxiuxiu1115@users.noreply.github.com> Date: Fri, 11 Oct 2024 10:49:14 +0800 Subject: [PATCH 025/222] fix(useId): ensure useId consistency when using serverPrefetch (#12128) close #12102 --- .../__tests__/helpers/useId.spec.ts | 35 +++++++++++++++++++ packages/runtime-core/src/component.ts | 13 ++++--- 2 files changed, 43 insertions(+), 5 deletions(-) diff --git a/packages/runtime-core/__tests__/helpers/useId.spec.ts b/packages/runtime-core/__tests__/helpers/useId.spec.ts index d71260cdaff..3860d43db20 100644 --- a/packages/runtime-core/__tests__/helpers/useId.spec.ts +++ b/packages/runtime-core/__tests__/helpers/useId.spec.ts @@ -8,6 +8,7 @@ import { defineAsyncComponent, defineComponent, h, + onServerPrefetch, useId, } from 'vue' import { renderToString } from '@vue/server-renderer' @@ -145,6 +146,40 @@ describe('useId', () => { expect(await getOutput(() => factory(16, 0))).toBe(expected) }) + test('components with serverPrefetch', async () => { + const factory = (): ReturnType => { + const SPOne = defineComponent({ + setup() { + onServerPrefetch(() => {}) + return () => h(BasicComponentWithUseId) + }, + }) + + const SPTwo = defineComponent({ + render() { + return h(BasicComponentWithUseId) + }, + }) + + const app = createApp({ + setup() { + const id1 = useId() + const id2 = useId() + return () => [id1, ' ', id2, ' ', h(SPOne), ' ', h(SPTwo)] + }, + }) + return [app, []] + } + + const expected = + 'v-0 v-1 ' + // root + 'v-0-0 v-0-1 ' + // inside first async subtree + 'v-2 v-3' // inside second async subtree + // assert different async resolution order does not affect id stable-ness + expect(await getOutput(() => factory())).toBe(expected) + expect(await getOutput(() => factory())).toBe(expected) + }) + test('async setup()', async () => { const factory = ( delay1: number, diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts index a1ce1de4eb9..939f5a401f0 100644 --- a/packages/runtime-core/src/component.ts +++ b/packages/runtime-core/src/component.ts @@ -856,11 +856,10 @@ function setupStatefulComponent( // 2. call setup() const { setup } = Component if (setup) { + pauseTracking() const setupContext = (instance.setupContext = setup.length > 1 ? createSetupContext(instance) : null) - const reset = setCurrentInstance(instance) - pauseTracking() const setupResult = callWithErrorHandling( setup, instance, @@ -870,12 +869,16 @@ function setupStatefulComponent( setupContext, ], ) + const isAsyncSetup = isPromise(setupResult) resetTracking() reset() - if (isPromise(setupResult)) { - // async setup, mark as async boundary for useId() - if (!isAsyncWrapper(instance)) markAsyncBoundary(instance) + if ((isAsyncSetup || instance.sp) && !isAsyncWrapper(instance)) { + // async setup / serverPrefetch, mark as async boundary for useId() + markAsyncBoundary(instance) + } + + if (isAsyncSetup) { setupResult.then(unsetCurrentInstance, unsetCurrentInstance) if (isSSR) { // return the promise so server-renderer can wait on it From 76a8223199c148b79a5c0ea19e235164809760cd Mon Sep 17 00:00:00 2001 From: linzhe <40790268+linzhe141@users.noreply.github.com> Date: Fri, 11 Oct 2024 10:50:36 +0800 Subject: [PATCH 026/222] fix(teleport): handle disabled teleport with updateCssVars (#12113) close #12112 --- .../runtime-core/src/components/Teleport.ts | 24 ++++++++++++------- .../__tests__/helpers/useCssVars.spec.ts | 1 + 2 files changed, 17 insertions(+), 8 deletions(-) diff --git a/packages/runtime-core/src/components/Teleport.ts b/packages/runtime-core/src/components/Teleport.ts index d268322cb12..5def1b2d721 100644 --- a/packages/runtime-core/src/components/Teleport.ts +++ b/packages/runtime-core/src/components/Teleport.ts @@ -147,7 +147,7 @@ export const TeleportImpl = { } if (!disabled) { mount(target, targetAnchor) - updateCssVars(n2) + updateCssVars(n2, false) } } else if (__DEV__ && !disabled) { warn( @@ -160,7 +160,7 @@ export const TeleportImpl = { if (disabled) { mount(container, mainAnchor) - updateCssVars(n2) + updateCssVars(n2, true) } if (isTeleportDeferred(n2.props)) { @@ -267,7 +267,7 @@ export const TeleportImpl = { ) } } - updateCssVars(n2) + updateCssVars(n2, disabled) } }, @@ -389,12 +389,13 @@ function hydrateTeleport( querySelector, )) if (target) { + const disabled = isTeleportDisabled(vnode.props) // if multiple teleports rendered to the same target element, we need to // pick up from where the last teleport finished instead of the first node const targetNode = (target as TeleportTargetElement)._lpa || target.firstChild if (vnode.shapeFlag & ShapeFlags.ARRAY_CHILDREN) { - if (isTeleportDisabled(vnode.props)) { + if (disabled) { vnode.anchor = hydrateChildren( nextSibling(node), vnode, @@ -446,7 +447,7 @@ function hydrateTeleport( ) } } - updateCssVars(vnode) + updateCssVars(vnode, disabled) } return vnode.anchor && nextSibling(vnode.anchor as Node) } @@ -462,13 +463,20 @@ export const Teleport = TeleportImpl as unknown as { } } -function updateCssVars(vnode: VNode) { +function updateCssVars(vnode: VNode, isDisabled: boolean) { // presence of .ut method indicates owner component uses css vars. // code path here can assume browser environment. const ctx = vnode.ctx if (ctx && ctx.ut) { - let node = vnode.targetStart - while (node && node !== vnode.targetAnchor) { + let node, anchor + if (isDisabled) { + node = vnode.el + anchor = vnode.anchor + } else { + node = vnode.targetStart + anchor = vnode.targetAnchor + } + while (node && node !== anchor) { if (node.nodeType === 1) node.setAttribute('data-v-owner', ctx.uid) node = node.nextSibling } diff --git a/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts b/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts index 06b3e714132..c4df0873140 100644 --- a/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts +++ b/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts @@ -350,6 +350,7 @@ describe('useCssVars', () => { expect(() => render(h(App), root)).not.toThrow(TypeError) await nextTick() expect(target.children.length).toBe(0) + expect(root.children[0].outerHTML.includes('data-v-owner')).toBe(true) }) test('with string style', async () => { From d3ecde8a696ff62c8d0ab067fd1d7ee0565b63c5 Mon Sep 17 00:00:00 2001 From: linzhe <40790268+linzhe141@users.noreply.github.com> Date: Fri, 11 Oct 2024 10:51:57 +0800 Subject: [PATCH 027/222] fix(compiler-sfc): do not skip TSInstantiationExpression when transforming props destructure (#12064) --- .../definePropsDestructure.spec.ts.snap | 19 +++++++++++++++++++ .../definePropsDestructure.spec.ts | 15 +++++++++++++++ .../src/script/definePropsDestructure.ts | 6 ++---- 3 files changed, 36 insertions(+), 4 deletions(-) diff --git a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/definePropsDestructure.spec.ts.snap b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/definePropsDestructure.spec.ts.snap index 12d5a67db7e..1044b0e167c 100644 --- a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/definePropsDestructure.spec.ts.snap +++ b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/definePropsDestructure.spec.ts.snap @@ -320,3 +320,22 @@ return { rest } }" `; + +exports[`sfc reactive props destructure > with TSInstantiationExpression 1`] = ` +"import { defineComponent as _defineComponent } from 'vue' +type Foo = (data: T) => void + +export default /*@__PURE__*/_defineComponent({ + props: { + value: { type: Function } + }, + setup(__props: any) { + + + const foo = __props.value<123> + +return () => {} +} + +})" +`; diff --git a/packages/compiler-sfc/__tests__/compileScript/definePropsDestructure.spec.ts b/packages/compiler-sfc/__tests__/compileScript/definePropsDestructure.spec.ts index 106e469f188..50602eb59bc 100644 --- a/packages/compiler-sfc/__tests__/compileScript/definePropsDestructure.spec.ts +++ b/packages/compiler-sfc/__tests__/compileScript/definePropsDestructure.spec.ts @@ -198,6 +198,21 @@ describe('sfc reactive props destructure', () => { }`) }) + test('with TSInstantiationExpression', () => { + const { content } = compile( + ` + + `, + { isProd: true }, + ) + assertCode(content) + expect(content).toMatch(`const foo = __props.value<123>`) + }) + test('aliasing', () => { const { content, bindings } = compile(` + `) + assertCode(content) + expect(content).toMatch(`z: { type: Number, required: true }`) + expect(content).toMatch(`y: { type: String, required: true }`) + expect(content).toMatch(`x: { type: Number, required: false }`) + expect(bindings).toStrictEqual({ + x: BindingTypes.PROPS, + y: BindingTypes.PROPS, + z: BindingTypes.PROPS, + }) + }) + + test('w/ intersection type', () => { + const { content, bindings } = compile(` + + `) + assertCode(content) + expect(content).toMatch(`y: { type: String, required: true }`) + expect(content).toMatch(`x: { type: Number, required: false }`) + expect(bindings).toStrictEqual({ + x: BindingTypes.PROPS, + y: BindingTypes.PROPS, + }) + }) + test('w/ exported interface', () => { const { content, bindings } = compile(`