fix(runtime): CSSVars can work with Teleport #7344

baiwusanyu-c · 2022-12-14T08:00:14Z

moushicheng · 2022-12-14T12:11:23Z

packages/runtime-dom/src/helpers/useCssVars.ts

+        }
+      }
+      if (isArray(vnode.children)) {
+        vnode.children.forEach(n => observeTeleportTarget(n as VNode))


walk vnode tree and observe all teleport node,there may be a extra performance cost
Indeed,we need further consideration

walk vnode tree and observe all teleport node,there may be a extra performance cost Indeed,we need further consideration

I made some modifications, but as you said, I also think that doing so will consume a lot of performance.
I think a better approach should be like suspense , which handles the cssvars update on teleport at the right time during the runtime process, but that is a big change

moushicheng · 2022-12-14T12:41:17Z

see here
bug seem still alive

baiwusanyu-c · 2022-12-16T08:13:21Z

I store the 'data-owner-value' in the 'parentComponent' when the element is unmounted, and reset it when it is updated. And maintain a variable 'teleportUTMap' globally, store 'ut', re-execute 'ut' when updating,

edison1105 · 2022-12-16T08:16:10Z

@baiwusanyu-c
great work! but not working with this scenario

baiwusanyu-c · 2022-12-16T08:18:23Z

@baiwusanyu-c great work! but not working with this scenario

ok，let me see how to fix

…ring

baiwusanyu-c · 2022-12-16T13:28:31Z

Do some refinement and unit testing tomorrow 🤣

netlify · 2022-12-16T13:28:36Z

❌ Deploy Preview for vuejs-coverage failed.

Name	Link
🔨 Latest commit	`f4a605c`
🔍 Latest deploy log	https://app.netlify.com/sites/vuejs-coverage/deploys/639c7209abc1860008079a4f

# Conflicts: # packages/compiler-dom/__tests__/transforms/__snapshots__/stringifyStatic.spec.ts.snap

…SVars # Conflicts: # packages/runtime-core/__tests__/components/Suspense.spec.ts

# Conflicts: # packages/runtime-core/__tests__/components/Suspense.spec.ts

…SVars # Conflicts: # packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts

github-actions · 2023-10-20T09:58:27Z

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	101 kB (+683 B)	38 kB (+239 B)	34.1 kB (+157 B)
vue.global.prod.js	159 kB (+683 B)	57.8 kB (+213 B)	51.4 kB (+190 B)

Usages

Name	Size	Gzip	Brotli
createApp	55.5 kB (+325 B)	21.3 kB (+115 B)	19.5 kB (+114 B)
createSSRApp	59.5 kB (+325 B)	23 kB (+113 B)	21 kB (+88 B)
defineCustomElement	60.2 kB (+325 B)	22.9 kB (+128 B)	20.8 kB (+51 B)
overall	69.3 kB (+325 B)	26.4 kB (+114 B)	24 kB (+99 B)

# Conflicts: # packages/runtime-core/__tests__/components/Suspense.spec.ts

# Conflicts: # packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts

codspeed-hq · 2023-12-19T09:45:41Z

CodSpeed Performance Report

Merging #7344 will not alter performance

_{Comparing baiwusanyu-c:bwsy/fix/teleportCSSVars (e3e85d5) with main (bae79dd)}

Summary

✅ 53 untouched benchmarks

# Conflicts: # packages/runtime-core/__tests__/components/Suspense.spec.ts # packages/runtime-core/src/components/Teleport.ts # packages/runtime-core/src/renderer.ts # packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts # packages/runtime-dom/src/helpers/useCssVars.ts

…SVars # Conflicts: # packages/runtime-core/__tests__/components/Suspense.spec.ts

haoqunjiang · 2024-04-02T14:10:41Z

/ecosystem-ci run

vue-bot · 2024-04-02T14:17:46Z

📝 Ran ecosystem CI: Open

suite	result	latest scheduled
language-tools	✅ success	✅ success
nuxt	❌ failure	✅ success
pinia	✅ success	✅ success
quasar	✅ success	✅ success
radix-vue	✅ success	✅ success
router	✅ success	✅ success
test-utils	✅ success	✅ success
vant	✅ success	✅ success
vite-plugin-vue	✅ success	✅ success
vitepress	✅ success	✅ success
vue-i18n	✅ success	✅ success
vue-macros	✅ success	✅ success
vuetify	✅ success	✅ success
vueuse	✅ success	✅ success
vue-simple-compiler	✅ success	✅ success

haoqunjiang · 2024-04-02T14:26:19Z

Since this PR adds a new export to the @vue/runtime-core package, I think it should be shipped in a minor version.

The Nuxt test failure was due to this. Not a blocker, though.

…SVars # Conflicts: # packages/runtime-core/__tests__/components/Suspense.spec.ts # packages/runtime-core/src/components/Teleport.ts # packages/runtime-core/src/renderer.ts # packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts

baiwusanyu-c added 3 commits December 14, 2022 13:01

fix(runtime): cssVars can work with Teleport

b2d72c7

fix(runtime): update code for unit test

704be6f

fix(runtime-core): add unit test

b8e882d

baiwusanyu-c changed the title ~~fix(runtime): cssVars can work with Teleport~~ fix(runtime): CSSVars can work with Teleport Dec 14, 2022

moushicheng reviewed Dec 14, 2022

View reviewed changes

baiwusanyu-c added 2 commits December 16, 2022 14:24

fix(runtime-core): update code

673940c

fix(runtime-core): update code

b34e64f

baiwusanyu-c force-pushed the bwsy/fix/teleportCSSVars branch from 419dcc4 to b34e64f Compare December 16, 2022 07:36

fix(compiler-core): Add teleportIds in vnode to achieve correct rende…

f4a605c

…ring

baiwusanyu-c marked this pull request as draft December 16, 2022 13:29

fix(runtime-core): Update judgment condition code

8020386

baiwusanyu-c marked this pull request as ready for review December 17, 2022 04:45

baiwusanyu-c added 2 commits December 17, 2022 13:59

fix(compiler-core): update unit test and support suspense

adc9c58

fix(compiler-core): added suspense's unit test

80791fc

skirtles-code mentioned this pull request Dec 17, 2022

fix(runtime-core): Fix cssVar cannot work in teleport #7364

Open

baiwusanyu-c and others added 9 commits December 26, 2022 10:13

Merge branch 'vuejs:main' into bwsy/fix/teleportCSSVars

ad95ea6

Merge branch 'vuejs:main' into bwsy/fix/teleportCSSVars

1752fba

Merge branch 'vuejs:main' into bwsy/fix/teleportCSSVars

fe147fc

Merge branch 'vuejs:main' into bwsy/fix/teleportCSSVars

0dbec82

Merge remote-tracking branch 'origin/main' into bwsy/fix/stringify

be83253

# Conflicts: # packages/compiler-dom/__tests__/transforms/__snapshots__/stringifyStatic.spec.ts.snap

Merge remote-tracking branch 'origin/main' into bwsy/fix/stringify

3f2107e

# Conflicts: # packages/compiler-dom/__tests__/transforms/__snapshots__/stringifyStatic.spec.ts.snap

Merge branch 'vuejs:main' into bwsy/fix/teleportCSSVars

0fa8a0a

Merge branch 'main' into bwsy/fix/teleportCSSVars

174aa23

Merge branch 'main' into bwsy/fix/teleportCSSVars

a6bed2e

baiwusanyu-c and others added 12 commits April 12, 2023 20:46

Merge branch 'main' into bwsy/fix/teleportCSSVars

5537755

Merge branch 'main' into bwsy/fix/teleportCSSVars

50dbdcb

Merge branch 'main' into bwsy/fix/teleportCSSVars

7fbc022

Merge branch 'main' into bwsy/fix/teleportCSSVars

21c10f8

Merge branch 'main' into bwsy/fix/teleportCSSVars

90361f8

Merge remote-tracking branch 'upstream/main' into bwsy/fix/teleportCS…

2dd703d

…SVars # Conflicts: # packages/runtime-core/__tests__/components/Suspense.spec.ts

Merge branch 'vuejs:main' into bwsy/fix/teleportCSSVars

b7cadc2

Merge branch 'main' into bwsy/fix/teleportCSSVars

fa64b07

Merge remote-tracking branch 'origin/main' into bwsy/fix/teleportCSSVars

1fc7b21

# Conflicts: # packages/runtime-core/__tests__/components/Suspense.spec.ts

Merge branch 'main' into bwsy/fix/teleportCSSVars

d081bb4

Merge branch 'main' into bwsy/fix/teleportCSSVars

dbec711

updated code

69b2dcd

sxzz force-pushed the main branch from 39d4fc1 to 1b56405 Compare August 21, 2023 05:00

Merge remote-tracking branch 'upstream/main' into bwsy/fix/teleportCS…

6e0af13

…SVars # Conflicts: # packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts

baiwusanyu-c added 2 commits November 13, 2023 13:36

Merge remote-tracking branch 'origin/main' into bwsy/fix/teleportCSSVars

97aae5f

# Conflicts: # packages/runtime-core/__tests__/components/Suspense.spec.ts

Merge remote-tracking branch 'origin/main' into bwsy/fix/teleportCSSVars

e3e85d5

# Conflicts: # packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts

baiwusanyu-c and others added 4 commits January 3, 2024 11:26

[autofix.ci] apply automated fixes

69a4c5f

chore: updated dts

7067594

Merge remote-tracking branch 'upstream/main' into bwsy/fix/teleportCS…

5e887ab

…SVars # Conflicts: # packages/runtime-core/__tests__/components/Suspense.spec.ts

haoqunjiang added the version: minor label Apr 2, 2024

haoqunjiang added scope: teleport scope: sfc-style-vars labels Apr 2, 2024

baiwusanyu-c and others added 2 commits April 16, 2024 09:02

Merge branch 'main' into bwsy/fix/teleportCSSVars

4ff76d4

Uh oh!

fix(runtime): CSSVars can work with Teleport #7344

Are you sure you want to change the base?

fix(runtime): CSSVars can work with Teleport #7344

Uh oh!

Conversation

baiwusanyu-c commented Dec 14, 2022

Uh oh!

moushicheng Dec 14, 2022

Choose a reason for hiding this comment

Uh oh!

baiwusanyu-c Dec 15, 2022

Choose a reason for hiding this comment

Uh oh!

moushicheng commented Dec 14, 2022

Uh oh!

baiwusanyu-c commented Dec 16, 2022

Uh oh!

edison1105 commented Dec 16, 2022

Uh oh!

baiwusanyu-c commented Dec 16, 2022

Uh oh!

baiwusanyu-c commented Dec 16, 2022

Uh oh!

netlify bot commented Dec 16, 2022

❌ Deploy Preview for vuejs-coverage failed.

Uh oh!

github-actions bot commented Oct 20, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Size Report

Bundles

Usages

Uh oh!

codspeed-hq bot commented Dec 19, 2023

CodSpeed Performance Report

Merging #7344 will not alter performance

Summary

Uh oh!

haoqunjiang commented Apr 2, 2024

Uh oh!

vue-bot commented Apr 2, 2024

Uh oh!

haoqunjiang commented Apr 2, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

github-actions bot commented Oct 20, 2023 •

edited

Loading

haoqunjiang commented Apr 2, 2024 •

edited

Loading