From 1e3c230c9011ee842561d44f3027563057a41741 Mon Sep 17 00:00:00 2001 From: baiwusanyu-c <740132583@qq.com> Date: Thu, 8 Jun 2023 19:39:11 +0800 Subject: [PATCH 1/8] fix(runtime-dom): cssvars correctly handles async components --- packages/runtime-dom/src/helpers/useCssVars.ts | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/runtime-dom/src/helpers/useCssVars.ts b/packages/runtime-dom/src/helpers/useCssVars.ts index e0a95c9ca99..2b5c9a898c1 100644 --- a/packages/runtime-dom/src/helpers/useCssVars.ts +++ b/packages/runtime-dom/src/helpers/useCssVars.ts @@ -33,7 +33,16 @@ export function useCssVars(getter: (ctx: any) => Record) { const setVars = () => { const vars = getter(instance.proxy) - setVarsOnVNode(instance.subTree, vars) + // #8520 + if (instance.asyncDep && __FEATURE_SUSPENSE__) { + instance.asyncDep = new Promise(resolve => { + resolve(instance.asyncDep) + }).then(() => { + setVarsOnVNode(instance.subTree, vars) + }) + } else { + setVarsOnVNode(instance.subTree, vars) + } updateTeleports(vars) } From bb0f9345b17c3d2a3bf3feb771eae4b4939c2bf6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=99=BD=E9=9B=BE=E4=B8=89=E8=AF=AD?= <32354856+baiwusanyu-c@users.noreply.github.com> Date: Thu, 8 Jun 2023 21:06:11 +0800 Subject: [PATCH 2/8] fix(runtime-core): updated code --- packages/runtime-dom/src/helpers/useCssVars.ts | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/runtime-dom/src/helpers/useCssVars.ts b/packages/runtime-dom/src/helpers/useCssVars.ts index 2b5c9a898c1..2bd3f089521 100644 --- a/packages/runtime-dom/src/helpers/useCssVars.ts +++ b/packages/runtime-dom/src/helpers/useCssVars.ts @@ -34,11 +34,9 @@ export function useCssVars(getter: (ctx: any) => Record) { const setVars = () => { const vars = getter(instance.proxy) // #8520 - if (instance.asyncDep && __FEATURE_SUSPENSE__) { - instance.asyncDep = new Promise(resolve => { - resolve(instance.asyncDep) - }).then(() => { - setVarsOnVNode(instance.subTree, vars) + if (!instance.asyncResolved && instance.asyncDep && __FEATURE_SUSPENSE__) { + instance.asyncDep.then(() => { + watchPostEffect(setVars) }) } else { setVarsOnVNode(instance.subTree, vars) From b0dfab8a7ac309e05e87b6e9fca6a4f3e49c7e58 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=99=BD=E9=9B=BE=E4=B8=89=E8=AF=AD?= <32354856+baiwusanyu-c@users.noreply.github.com> Date: Thu, 8 Jun 2023 21:46:07 +0800 Subject: [PATCH 3/8] fix(runtime-core): added unit test --- .../__tests__/helpers/useCssVars.spec.ts | 57 +++++++++++++++++++ 1 file changed, 57 insertions(+) diff --git a/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts b/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts index 7d24ec0f434..07c1bef6675 100644 --- a/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts +++ b/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts @@ -118,6 +118,63 @@ describe('useCssVars', () => { } }) + test('with v-if & async component & suspense', async () => { + const state = reactive({ color: 'red' }) + const root = document.createElement('div') + const show = ref(false) + let resolveAsync: any + let asyncPromise: any + + const AsyncComp = { + setup() { + useCssVars(() => state) + asyncPromise = new Promise(r => { + resolveAsync = () => { + r(() => h('p', 'default')) + } + }) + return asyncPromise + } + } + + const App = { + setup() { + return () => + h(Suspense, null, { + default: h('div', {}, show.value ? h(AsyncComp) : h('p')) + }) + } + } + + render(h(App), root) + await nextTick() + // AsyncComp resolve + show.value = true + await nextTick() + resolveAsync() + await asyncPromise.then(() => {}) + // Suspense effects flush + await nextTick() + // css vars use with default tree + for (const c of [].slice.call(root.children as any)) { + expect( + ((c as any).children[0] as HTMLElement).style.getPropertyValue( + `--color` + ) + ).toBe(`red`) + } + + state.color = 'green' + await nextTick() + for (const c of [].slice.call(root.children as any)) { + expect( + ((c as any).children[0] as HTMLElement).style.getPropertyValue( + `--color` + ) + ).toBe('green') + } + }) + test('with subTree changed', async () => { const state = reactive({ color: 'red' }) const value = ref(true) From a15c700302d36931dc05988efce8e41afccb775a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=99=BD=E9=9B=BE=E4=B8=89=E8=AF=AD?= <32354856+baiwusanyu-c@users.noreply.github.com> Date: Fri, 9 Jun 2023 08:56:56 +0800 Subject: [PATCH 4/8] Update packages/runtime-dom/src/helpers/useCssVars.ts Co-authored-by: edison --- packages/runtime-dom/src/helpers/useCssVars.ts | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/runtime-dom/src/helpers/useCssVars.ts b/packages/runtime-dom/src/helpers/useCssVars.ts index 2bd3f089521..45f4c755412 100644 --- a/packages/runtime-dom/src/helpers/useCssVars.ts +++ b/packages/runtime-dom/src/helpers/useCssVars.ts @@ -32,7 +32,16 @@ export function useCssVars(getter: (ctx: any) => Record) { }) const setVars = () => { - const vars = getter(instance.proxy) + // #8520 + if (!instance.asyncResolved && instance.asyncDep && __FEATURE_SUSPENSE__) { + instance.asyncDep.then(() => { + watchPostEffect(setVars) + }) + } else { + const vars = getter(instance.proxy) + setVarsOnVNode(instance.subTree, vars) + updateTeleports(vars) + } // #8520 if (!instance.asyncResolved && instance.asyncDep && __FEATURE_SUSPENSE__) { instance.asyncDep.then(() => { From c1192080b62bf0b344b86f61f1da4d34bc5bafd8 Mon Sep 17 00:00:00 2001 From: baiwusanyu-c <740132583@qq.com> Date: Fri, 9 Jun 2023 08:58:26 +0800 Subject: [PATCH 5/8] fix(runtime-dom): updated code --- packages/runtime-dom/src/helpers/useCssVars.ts | 9 --------- 1 file changed, 9 deletions(-) diff --git a/packages/runtime-dom/src/helpers/useCssVars.ts b/packages/runtime-dom/src/helpers/useCssVars.ts index 45f4c755412..f6ddf1f3d2c 100644 --- a/packages/runtime-dom/src/helpers/useCssVars.ts +++ b/packages/runtime-dom/src/helpers/useCssVars.ts @@ -42,15 +42,6 @@ export function useCssVars(getter: (ctx: any) => Record) { setVarsOnVNode(instance.subTree, vars) updateTeleports(vars) } - // #8520 - if (!instance.asyncResolved && instance.asyncDep && __FEATURE_SUSPENSE__) { - instance.asyncDep.then(() => { - watchPostEffect(setVars) - }) - } else { - setVarsOnVNode(instance.subTree, vars) - } - updateTeleports(vars) } watchPostEffect(setVars) From dc926fbad6d104327ccd777c6d3bb1afcd017a36 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Wed, 3 Jan 2024 02:25:19 +0000 Subject: [PATCH 6/8] [autofix.ci] apply automated fixes --- .../__tests__/helpers/useCssVars.spec.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts b/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts index 5d37e613c07..9f860a5e3c3 100644 --- a/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts +++ b/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts @@ -134,16 +134,16 @@ describe('useCssVars', () => { } }) return asyncPromise - } + }, } const App = { setup() { return () => h(Suspense, null, { - default: h('div', {}, show.value ? h(AsyncComp) : h('p')) + default: h('div', {}, show.value ? h(AsyncComp) : h('p')), }) - } + }, } render(h(App), root) @@ -159,8 +159,8 @@ describe('useCssVars', () => { for (const c of [].slice.call(root.children as any)) { expect( ((c as any).children[0] as HTMLElement).style.getPropertyValue( - `--color` - ) + `--color`, + ), ).toBe(`red`) } @@ -169,8 +169,8 @@ describe('useCssVars', () => { for (const c of [].slice.call(root.children as any)) { expect( ((c as any).children[0] as HTMLElement).style.getPropertyValue( - `--color` - ) + `--color`, + ), ).toBe('green') } }) From 0a92213b9d4b51c426965e0590bb9d63803f8211 Mon Sep 17 00:00:00 2001 From: Evan You Date: Mon, 15 Apr 2024 20:12:09 +0800 Subject: [PATCH 7/8] Update useCssVars.ts --- .../runtime-dom/src/helpers/useCssVars.ts | 20 ++++++++----------- 1 file changed, 8 insertions(+), 12 deletions(-) diff --git a/packages/runtime-dom/src/helpers/useCssVars.ts b/packages/runtime-dom/src/helpers/useCssVars.ts index c49f0b06070..4871fb0e94f 100644 --- a/packages/runtime-dom/src/helpers/useCssVars.ts +++ b/packages/runtime-dom/src/helpers/useCssVars.ts @@ -26,6 +26,10 @@ export function useCssVars(getter: (ctx: any) => Record) { return } + if (__DEV__) { + instance.getCssVars = () => getter(instance.proxy) + } + const updateTeleports = (instance.ut = (vars = getter(instance.proxy)) => { Array.from( document.querySelectorAll(`[data-v-owner="${instance.uid}"]`), @@ -33,21 +37,13 @@ export function useCssVars(getter: (ctx: any) => Record) { }) const setVars = () => { - // #8520 - if (!instance.asyncResolved && instance.asyncDep && __FEATURE_SUSPENSE__) { - instance.asyncDep.then(() => { - watchPostEffect(setVars) - }) - } else { - const vars = getter(instance.proxy) - setVarsOnVNode(instance.subTree, vars) - updateTeleports(vars) - } + const vars = getter(instance.proxy) + setVarsOnVNode(instance.subTree, vars) + updateTeleports(vars) } - watchPostEffect(setVars) - onMounted(() => { + watchPostEffect(setVars) const ob = new MutationObserver(setVars) ob.observe(instance.subTree.el!.parentNode, { childList: true }) onUnmounted(() => ob.disconnect()) From a8a21f54454cc88821bb708766476666a2cf10f4 Mon Sep 17 00:00:00 2001 From: Evan You Date: Mon, 15 Apr 2024 20:12:29 +0800 Subject: [PATCH 8/8] Update useCssVars.ts --- packages/runtime-dom/src/helpers/useCssVars.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/runtime-dom/src/helpers/useCssVars.ts b/packages/runtime-dom/src/helpers/useCssVars.ts index 4871fb0e94f..3da9dcd1972 100644 --- a/packages/runtime-dom/src/helpers/useCssVars.ts +++ b/packages/runtime-dom/src/helpers/useCssVars.ts @@ -26,10 +26,6 @@ export function useCssVars(getter: (ctx: any) => Record) { return } - if (__DEV__) { - instance.getCssVars = () => getter(instance.proxy) - } - const updateTeleports = (instance.ut = (vars = getter(instance.proxy)) => { Array.from( document.querySelectorAll(`[data-v-owner="${instance.uid}"]`),