From 610e87946588811b11d6003a15af32060d3d476d Mon Sep 17 00:00:00 2001 From: linzhe141 <1572213544@qq.com> Date: Wed, 4 Sep 2024 16:04:45 +0800 Subject: [PATCH 01/14] fix(runtime-core): cannot update TemplateRef --- .../runtime-core/src/helpers/useTemplateRef.ts | 6 +++++- packages/runtime-core/src/rendererTemplateRef.ts | 14 ++++++++++++-- 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/packages/runtime-core/src/helpers/useTemplateRef.ts b/packages/runtime-core/src/helpers/useTemplateRef.ts index 58c109a9246..c5385f35e6e 100644 --- a/packages/runtime-core/src/helpers/useTemplateRef.ts +++ b/packages/runtime-core/src/helpers/useTemplateRef.ts @@ -22,7 +22,11 @@ export function useTemplateRef( Object.defineProperty(refs, key, { enumerable: true, get: () => r.value, - set: val => (r.value = val), + set: val => { + r.value = val + // @ts-expect-error + r.value!.__v__TemplateRef = true + }, }) } } else if (__DEV__) { diff --git a/packages/runtime-core/src/rendererTemplateRef.ts b/packages/runtime-core/src/rendererTemplateRef.ts index 647ce1fb42f..622cc404af5 100644 --- a/packages/runtime-core/src/rendererTemplateRef.ts +++ b/packages/runtime-core/src/rendererTemplateRef.ts @@ -96,7 +96,12 @@ export function setRef( if (_isString) { refs[ref] = [refValue] if (hasOwn(setupState, ref)) { - setupState[ref] = refs[ref] + // @ts-expect-error + if (setupState[ref] && setupState[ref].__v__TemplateRef) { + // cannot update TemplateRef + } else { + setupState[ref] = value + } } } else { ref.value = [refValue] @@ -109,7 +114,12 @@ export function setRef( } else if (_isString) { refs[ref] = value if (hasOwn(setupState, ref)) { - setupState[ref] = value + // @ts-expect-error + if (setupState[ref] && setupState[ref].__v__TemplateRef) { + // cannot update TemplateRef + } else { + setupState[ref] = value + } } } else if (_isRef) { ref.value = value From d22b9e030027dfda223cc80c09af56b1cc0ea5be Mon Sep 17 00:00:00 2001 From: linzhe141 <1572213544@qq.com> Date: Wed, 4 Sep 2024 16:18:29 +0800 Subject: [PATCH 02/14] chore: update --- packages/runtime-core/src/helpers/useTemplateRef.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/runtime-core/src/helpers/useTemplateRef.ts b/packages/runtime-core/src/helpers/useTemplateRef.ts index c5385f35e6e..d2ee2f1409d 100644 --- a/packages/runtime-core/src/helpers/useTemplateRef.ts +++ b/packages/runtime-core/src/helpers/useTemplateRef.ts @@ -25,7 +25,7 @@ export function useTemplateRef( set: val => { r.value = val // @ts-expect-error - r.value!.__v__TemplateRef = true + if (val) r.value!.__v__TemplateRef = true }, }) } From 5a35e007e8623ce88a75b86cc0d8954e98fb22ed Mon Sep 17 00:00:00 2001 From: linzhe141 <1572213544@qq.com> Date: Wed, 4 Sep 2024 17:59:41 +0800 Subject: [PATCH 03/14] chore: update --- packages/runtime-core/src/component.ts | 1 + .../runtime-core/src/helpers/useTemplateRef.ts | 2 ++ packages/runtime-core/src/rendererTemplateRef.ts | 16 ++++++++++++---- 3 files changed, 15 insertions(+), 4 deletions(-) diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts index 556d158a244..e30f87890d0 100644 --- a/packages/runtime-core/src/component.ts +++ b/packages/runtime-core/src/component.ts @@ -939,6 +939,7 @@ export function handleSetupResult( instance.devtoolsRawSetupState = setupResult } instance.setupState = proxyRefs(setupResult) + instance.setupState.__v__setupResult = setupResult if (__DEV__) { exposeSetupStateOnRenderContext(instance) } diff --git a/packages/runtime-core/src/helpers/useTemplateRef.ts b/packages/runtime-core/src/helpers/useTemplateRef.ts index d2ee2f1409d..0bb0bd9b9ad 100644 --- a/packages/runtime-core/src/helpers/useTemplateRef.ts +++ b/packages/runtime-core/src/helpers/useTemplateRef.ts @@ -8,6 +8,8 @@ export function useTemplateRef( ): Readonly> { const i = getCurrentInstance() const r = shallowRef(null) + // @ts-expect-error + r.__v__TemplateRef = true if (i) { const refs = i.refs === EMPTY_OBJ ? (i.refs = {}) : i.refs diff --git a/packages/runtime-core/src/rendererTemplateRef.ts b/packages/runtime-core/src/rendererTemplateRef.ts index 622cc404af5..d50d37a2fd2 100644 --- a/packages/runtime-core/src/rendererTemplateRef.ts +++ b/packages/runtime-core/src/rendererTemplateRef.ts @@ -96,8 +96,12 @@ export function setRef( if (_isString) { refs[ref] = [refValue] if (hasOwn(setupState, ref)) { - // @ts-expect-error - if (setupState[ref] && setupState[ref].__v__TemplateRef) { + if ( + // @ts-expect-error + setupState.__v__setupResult[ref] && + // @ts-expect-error + setupState.__v__setupResult[ref].__v__TemplateRef + ) { // cannot update TemplateRef } else { setupState[ref] = value @@ -114,8 +118,12 @@ export function setRef( } else if (_isString) { refs[ref] = value if (hasOwn(setupState, ref)) { - // @ts-expect-error - if (setupState[ref] && setupState[ref].__v__TemplateRef) { + if ( + // @ts-expect-error + setupState.__v__setupResult[ref] && + // @ts-expect-error + setupState.__v__setupResult[ref].__v__TemplateRef + ) { // cannot update TemplateRef } else { setupState[ref] = value From 054bd9073d9706d55ab98ef464fb60fff03f11da Mon Sep 17 00:00:00 2001 From: linzhe141 <1572213544@qq.com> Date: Wed, 4 Sep 2024 18:01:27 +0800 Subject: [PATCH 04/14] chore: update --- packages/runtime-core/src/helpers/useTemplateRef.ts | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/runtime-core/src/helpers/useTemplateRef.ts b/packages/runtime-core/src/helpers/useTemplateRef.ts index 0bb0bd9b9ad..b15d52e6fd5 100644 --- a/packages/runtime-core/src/helpers/useTemplateRef.ts +++ b/packages/runtime-core/src/helpers/useTemplateRef.ts @@ -24,11 +24,7 @@ export function useTemplateRef( Object.defineProperty(refs, key, { enumerable: true, get: () => r.value, - set: val => { - r.value = val - // @ts-expect-error - if (val) r.value!.__v__TemplateRef = true - }, + set: val => (r.value = val), }) } } else if (__DEV__) { From 51fee9a432141f931702de5addb5bbfb477cc2e8 Mon Sep 17 00:00:00 2001 From: linzhe141 Date: Wed, 4 Sep 2024 21:23:37 +0800 Subject: [PATCH 05/14] chore: update --- packages/compiler-sfc/src/compileScript.ts | 1 + packages/runtime-core/src/component.ts | 1 - .../runtime-core/src/rendererTemplateRef.ts | 36 +++++++++++-------- 3 files changed, 23 insertions(+), 15 deletions(-) diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts index f3eef6544f6..08cf9da0960 100644 --- a/packages/compiler-sfc/src/compileScript.ts +++ b/packages/compiler-sfc/src/compileScript.ts @@ -927,6 +927,7 @@ export function compileScript( endOffset, `\nconst __returned__ = ${returned}\n` + `Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true })\n` + + `Object.defineProperty(__returned__, '__v__setupResult', { enumerable: false, value: __returned__ })\n` + `return __returned__` + `\n}\n\n`, ) diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts index e30f87890d0..556d158a244 100644 --- a/packages/runtime-core/src/component.ts +++ b/packages/runtime-core/src/component.ts @@ -939,7 +939,6 @@ export function handleSetupResult( instance.devtoolsRawSetupState = setupResult } instance.setupState = proxyRefs(setupResult) - instance.setupState.__v__setupResult = setupResult if (__DEV__) { exposeSetupStateOnRenderContext(instance) } diff --git a/packages/runtime-core/src/rendererTemplateRef.ts b/packages/runtime-core/src/rendererTemplateRef.ts index d50d37a2fd2..32eecf0adcd 100644 --- a/packages/runtime-core/src/rendererTemplateRef.ts +++ b/packages/runtime-core/src/rendererTemplateRef.ts @@ -96,13 +96,17 @@ export function setRef( if (_isString) { refs[ref] = [refValue] if (hasOwn(setupState, ref)) { - if ( - // @ts-expect-error - setupState.__v__setupResult[ref] && - // @ts-expect-error - setupState.__v__setupResult[ref].__v__TemplateRef - ) { - // cannot update TemplateRef + if (__DEV__) { + if ( + setupState.__v__setupResult && + setupState.__v__setupResult[ref] && + // @ts-expect-error + setupState.__v__setupResult[ref].__v__TemplateRef + ) { + // cannot update TemplateRef + } else { + setupState[ref] = value + } } else { setupState[ref] = value } @@ -118,13 +122,17 @@ export function setRef( } else if (_isString) { refs[ref] = value if (hasOwn(setupState, ref)) { - if ( - // @ts-expect-error - setupState.__v__setupResult[ref] && - // @ts-expect-error - setupState.__v__setupResult[ref].__v__TemplateRef - ) { - // cannot update TemplateRef + if (__DEV__) { + if ( + setupState.__v__setupResult && + setupState.__v__setupResult[ref] && + // @ts-expect-error + setupState.__v__setupResult[ref].__v__TemplateRef + ) { + // cannot update TemplateRef + } else { + setupState[ref] = value + } } else { setupState[ref] = value } From 25e93b765fcda9ab59337990d351c1ae9ef88ed9 Mon Sep 17 00:00:00 2001 From: linzhe141 Date: Wed, 4 Sep 2024 22:32:25 +0800 Subject: [PATCH 06/14] chore: update --- .../runtime-core/src/rendererTemplateRef.ts | 22 +++++++++---------- 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/packages/runtime-core/src/rendererTemplateRef.ts b/packages/runtime-core/src/rendererTemplateRef.ts index f3d31006e46..d1257a18680 100644 --- a/packages/runtime-core/src/rendererTemplateRef.ts +++ b/packages/runtime-core/src/rendererTemplateRef.ts @@ -68,19 +68,17 @@ export function setRef( ? () => false : (key: string) => { if (!hasOwn(setupState, key)) return false - if (__DEV__) { - if ( - setupState.__v__setupResult && - // @ts-expect-error - setupState.__v__setupResult[ref] && - // @ts-expect-error - setupState.__v__setupResult[ref].__v__TemplateRef - ) { - return false - } - } else { - return true + if (!__DEV__) return true + if ( + setupState.__v__setupResult && + // @ts-expect-error + setupState.__v__setupResult[ref] && + // @ts-expect-error + setupState.__v__setupResult[ref].__v__TemplateRef + ) { + return false } + return true } // dynamic ref changed. unset old ref From 15284f459172e07bf29b8e40938a4d9b9018f6f0 Mon Sep 17 00:00:00 2001 From: linzhe141 Date: Wed, 4 Sep 2024 22:41:50 +0800 Subject: [PATCH 07/14] chore: update --- packages/runtime-core/src/rendererTemplateRef.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/runtime-core/src/rendererTemplateRef.ts b/packages/runtime-core/src/rendererTemplateRef.ts index d1257a18680..ebc49350d14 100644 --- a/packages/runtime-core/src/rendererTemplateRef.ts +++ b/packages/runtime-core/src/rendererTemplateRef.ts @@ -68,6 +68,8 @@ export function setRef( ? () => false : (key: string) => { if (!hasOwn(setupState, key)) return false + if ((Object.getOwnPropertyDescriptor(refs, key) || EMPTY_OBJ).get) + return false if (!__DEV__) return true if ( setupState.__v__setupResult && From ed70d56bc557318a096320ffd6e5e20c8288ccc1 Mon Sep 17 00:00:00 2001 From: linzhe141 Date: Wed, 4 Sep 2024 23:12:05 +0800 Subject: [PATCH 08/14] chore: update --- packages/runtime-core/src/helpers/useTemplateRef.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/runtime-core/src/helpers/useTemplateRef.ts b/packages/runtime-core/src/helpers/useTemplateRef.ts index b15d52e6fd5..998ba688806 100644 --- a/packages/runtime-core/src/helpers/useTemplateRef.ts +++ b/packages/runtime-core/src/helpers/useTemplateRef.ts @@ -8,8 +8,10 @@ export function useTemplateRef( ): Readonly> { const i = getCurrentInstance() const r = shallowRef(null) - // @ts-expect-error - r.__v__TemplateRef = true + if (__DEV__) { + // @ts-expect-error dev only + r.__v__TemplateRef = true + } if (i) { const refs = i.refs === EMPTY_OBJ ? (i.refs = {}) : i.refs From ad619448e9bb012c4fc41e44f00509fa50f4d133 Mon Sep 17 00:00:00 2001 From: linzhe141 <1572213544@qq.com> Date: Thu, 5 Sep 2024 09:13:06 +0800 Subject: [PATCH 09/14] chore: update --- packages/compiler-sfc/src/compileScript.ts | 1 - packages/runtime-core/src/component.ts | 5 +++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts index 0099506c211..fee05beed96 100644 --- a/packages/compiler-sfc/src/compileScript.ts +++ b/packages/compiler-sfc/src/compileScript.ts @@ -927,7 +927,6 @@ export function compileScript( endOffset, `\nconst __returned__ = ${returned}\n` + `Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true })\n` + - `Object.defineProperty(__returned__, '__v__setupResult', { enumerable: false, value: __returned__ })\n` + `return __returned__` + `\n}\n\n`, ) diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts index cccb7280fd4..d2b960f32af 100644 --- a/packages/runtime-core/src/component.ts +++ b/packages/runtime-core/src/component.ts @@ -940,6 +940,11 @@ export function handleSetupResult( } instance.setupState = proxyRefs(setupResult) if (__DEV__) { + // dev only + Object.defineProperty(setupResult, '__v__setupResult', { + enumerable: false, + value: setupResult, + }) exposeSetupStateOnRenderContext(instance) } } else if (__DEV__ && setupResult !== undefined) { From e127bdb4c5f32b2f56afb27e38961e6db147cc08 Mon Sep 17 00:00:00 2001 From: linzhe141 <1572213544@qq.com> Date: Thu, 5 Sep 2024 09:17:56 +0800 Subject: [PATCH 10/14] chore: update --- packages/runtime-core/src/rendererTemplateRef.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/runtime-core/src/rendererTemplateRef.ts b/packages/runtime-core/src/rendererTemplateRef.ts index ebc49350d14..d1257a18680 100644 --- a/packages/runtime-core/src/rendererTemplateRef.ts +++ b/packages/runtime-core/src/rendererTemplateRef.ts @@ -68,8 +68,6 @@ export function setRef( ? () => false : (key: string) => { if (!hasOwn(setupState, key)) return false - if ((Object.getOwnPropertyDescriptor(refs, key) || EMPTY_OBJ).get) - return false if (!__DEV__) return true if ( setupState.__v__setupResult && From 980185626ba9727cc964dcfb2c48e5a337f7a3eb Mon Sep 17 00:00:00 2001 From: linzhe141 <1572213544@qq.com> Date: Thu, 5 Sep 2024 09:20:36 +0800 Subject: [PATCH 11/14] chore: update --- .../runtime-core/src/rendererTemplateRef.ts | 20 ++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/packages/runtime-core/src/rendererTemplateRef.ts b/packages/runtime-core/src/rendererTemplateRef.ts index d1257a18680..47be3c07407 100644 --- a/packages/runtime-core/src/rendererTemplateRef.ts +++ b/packages/runtime-core/src/rendererTemplateRef.ts @@ -68,15 +68,17 @@ export function setRef( ? () => false : (key: string) => { if (!hasOwn(setupState, key)) return false - if (!__DEV__) return true - if ( - setupState.__v__setupResult && - // @ts-expect-error - setupState.__v__setupResult[ref] && - // @ts-expect-error - setupState.__v__setupResult[ref].__v__TemplateRef - ) { - return false + if (__DEV__) { + if ( + setupState.__v__setupResult && + // @ts-expect-error + setupState.__v__setupResult[ref] && + // @ts-expect-error + setupState.__v__setupResult[ref].__v__TemplateRef + ) { + return false + } + return true } return true } From 532bdd429f5eeedf991cd09c12d9ad63cf9fa06e Mon Sep 17 00:00:00 2001 From: linzhe141 <1572213544@qq.com> Date: Thu, 5 Sep 2024 09:25:28 +0800 Subject: [PATCH 12/14] chore: update test --- .../runtime-core/__tests__/helpers/useTemplateRef.spec.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/runtime-core/__tests__/helpers/useTemplateRef.spec.ts b/packages/runtime-core/__tests__/helpers/useTemplateRef.spec.ts index 10de6f48353..83fff94a47a 100644 --- a/packages/runtime-core/__tests__/helpers/useTemplateRef.spec.ts +++ b/packages/runtime-core/__tests__/helpers/useTemplateRef.spec.ts @@ -90,12 +90,14 @@ describe('useTemplateRef', () => { const Comp = { setup() { tRef = useTemplateRef(key) + const foo = useTemplateRef('bar') return { [key]: tRef, + ['foo']: foo, } }, render() { - return h('div', { ref: key }) + return [h('div', { ref: key }), h('div', { ref: 'foo' })] }, } const root = nodeOps.createElement('div') From 3c75efd3b78c5f980aaef260c86de3df8adf0cdf Mon Sep 17 00:00:00 2001 From: linzhe141 <1572213544@qq.com> Date: Thu, 5 Sep 2024 09:50:10 +0800 Subject: [PATCH 13/14] chore: update --- packages/runtime-core/src/helpers/useTemplateRef.ts | 6 ++---- packages/runtime-core/src/rendererTemplateRef.ts | 4 +++- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/runtime-core/src/helpers/useTemplateRef.ts b/packages/runtime-core/src/helpers/useTemplateRef.ts index 998ba688806..b15d52e6fd5 100644 --- a/packages/runtime-core/src/helpers/useTemplateRef.ts +++ b/packages/runtime-core/src/helpers/useTemplateRef.ts @@ -8,10 +8,8 @@ export function useTemplateRef( ): Readonly> { const i = getCurrentInstance() const r = shallowRef(null) - if (__DEV__) { - // @ts-expect-error dev only - r.__v__TemplateRef = true - } + // @ts-expect-error + r.__v__TemplateRef = true if (i) { const refs = i.refs === EMPTY_OBJ ? (i.refs = {}) : i.refs diff --git a/packages/runtime-core/src/rendererTemplateRef.ts b/packages/runtime-core/src/rendererTemplateRef.ts index 47be3c07407..f961f1219b2 100644 --- a/packages/runtime-core/src/rendererTemplateRef.ts +++ b/packages/runtime-core/src/rendererTemplateRef.ts @@ -131,7 +131,9 @@ export function setRef( if (canSetSetupRef(ref)) { setupState[ref] = value } - } else if (_isRef) { + } + // @ts-expect-error + else if (_isRef && !ref.__v__TemplateRef) { ref.value = value if (rawRef.k) refs[rawRef.k] = value } else if (__DEV__) { From 3bc3c1dd0337282f8f1bda756ec8c08d0f73dbb6 Mon Sep 17 00:00:00 2001 From: linzhe141 <1572213544@qq.com> Date: Thu, 5 Sep 2024 17:13:01 +0800 Subject: [PATCH 14/14] chore: update --- packages/runtime-core/__tests__/helpers/useTemplateRef.spec.ts | 2 +- packages/runtime-core/src/component.ts | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/runtime-core/__tests__/helpers/useTemplateRef.spec.ts b/packages/runtime-core/__tests__/helpers/useTemplateRef.spec.ts index 83fff94a47a..e590a719946 100644 --- a/packages/runtime-core/__tests__/helpers/useTemplateRef.spec.ts +++ b/packages/runtime-core/__tests__/helpers/useTemplateRef.spec.ts @@ -93,7 +93,7 @@ describe('useTemplateRef', () => { const foo = useTemplateRef('bar') return { [key]: tRef, - ['foo']: foo, + foo, } }, render() { diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts index d2b960f32af..b6f47b79b51 100644 --- a/packages/runtime-core/src/component.ts +++ b/packages/runtime-core/src/component.ts @@ -942,7 +942,6 @@ export function handleSetupResult( if (__DEV__) { // dev only Object.defineProperty(setupResult, '__v__setupResult', { - enumerable: false, value: setupResult, }) exposeSetupStateOnRenderContext(instance)