Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

fix(runtime-core): comments before single root element breaking Transition #6238

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
qmhc wants to merge 10 commits into vuejs:main
base: main
Choose a base branch
Loading
from qmhc:transition

Conversation

@qmhc
Copy link

@qmhc qmhc commented Jul 7, 2022

fix #6080.

The testing html 
<script src="../../dist/vue.global.js"></script>
<script type="text/x-template" id="home">
 <div class="home">
 Home
 </div>
</script>
<script type="text/x-template" id="about">
 <!-- Breaking Comment -->
 <div class="about">
 About
 </div>
</script>
<script>
const Home = {
 template: '#home'
}
const About = {
 template: '#about'
}
</script>
<!-- app -->
<div id="app">
 <button @click="isHome = !isHome">
 Toggle
 </button>
 <transition name="fade" mode="out-in">
 <!-- <transition name="fade" mode="in-out"> -->
 <!-- <transition name="fade"> -->
 <home v-if="isHome"></home>
 <about v-else></about>
 </transition>
</div>
<script>
Vue.createApp({
 components: { Home, About },
 data: () => ({
 isHome: true
 })
}).mount('#app')
</script>
<style>
.fade-enter-active {
 animation: fade-in 600ms;
}
.fade-leave-active {
 animation: fade-out 600ms;
}
@keyframes fade-in {
 0% {
 opacity: 0%;
 }
 100% {
 opacity: 100%;
 }
}
@keyframes fade-out {
 0% {
 opacity: 100%;
 }
 100% {
 opacity: 0%;
 }
}
</style>

bodograumann reacted with eyes emoji
Copy link

netlify bot commented Jul 7, 2022

❌ Deploy Preview for vuejs-coverage failed.

Name Link
🔨 Latest commit 3e40425
🔍 Latest deploy log https://app.netlify.com/sites/vuejs-coverage/deploys/62c66098999a3e00085ed4e4

Copy link
Contributor

zhangzhonghe commented Dec 22, 2022 •
edited
Loading

Thanks for your PR, but I think the #7387 way is better because the code it adds can be removed in production mode.

Copy link
Author

qmhc commented Dec 22, 2022

@zhangzhonghe Thanks for your reply. Will it make differentiation in development mode and production mode?

Copy link
Contributor

Will it make differentiation in development mode and production mode?

User-defined comments are removed by the build tool in production mode.

/**
* Indicates a fragment that was created only because the user has placed
* comments at the root level of a template. This is a dev-only flag since
* comments are stripped in production.
*/
DEV_ROOT_FRAGMENT = 1 << 11,

Copy link
Author

qmhc commented Dec 22, 2022

@zhangzhonghe Yes, the comments will be removed in production mode. I mean will this problem occur in development mode? I can reproduce it in playground in development mode.😂

Copy link
Contributor

I am trying to express my perspective more clearly:

  1. Root comment breaking the <Transition> without any warning #6080 is definitely a bug.
  2. This bug only occurs in development mode because the comments are removed in production mode.
  3. Therefore, the code to fix this bug is unnecessary in production mode and can be removed.
  4. Vue identifies code that can be removed in production mode with the global variable __DEV__.
  5. Therefore, the code to fix this bug should be wrapped in the following block of code in order to be removed in production mode.
// The following block of code can be removed in production mode
if (__DEV__) {
 // fix bug
}

Copy link
Author

qmhc commented Jan 4, 2023

@zhangzhonghe I'm not sure if I'm on the right way. The code seems to have many overlaps, hope to get your guidance.

Copy link
Member

This PR seems to be the proper fix. Could you please resolve the conflicts?
zhangzhonghe reacted with thumbs up emoji

Copy link
Contributor

Thanks for your PR, but I think the #7387 way is better because the code it adds can be removed in production mode.

@qmhc I'm very sorry, I realized I was wrong. The #7387 is only valid in the development environment, it is not valid in the production environment.

Maybe you're right.
qmhc reacted with heart emoji

Copy link

github-actions bot commented Aug 30, 2024 •
edited
Loading

Size Report

Bundles

File Size Gzip Brotli
runtime-dom.global.prod.js 100 kB (+82 B) 38 kB (+35 B) 34.2 kB (+41 B)
vue.global.prod.js 159 kB (+82 B) 57.9 kB (+30 B) 51.5 kB (+41 B)

Usages

Name Size Gzip Brotli
createApp (CAPI only) 47 kB (+82 B) 18.3 kB (+36 B) 16.7 kB (+27 B)
createApp 55.1 kB (+82 B) 21.3 kB (+32 B) 19.4 kB (+35 B)
createSSRApp 59.1 kB (+82 B) 23 kB (+29 B) 20.9 kB (+18 B)
defineCustomElement 59.8 kB (+82 B) 22.9 kB (+32 B) 20.8 kB (-33 B)
overall 68.8 kB (+82 B) 26.4 kB (+29 B) 24 kB (-21 B)

Copy link

pkg-pr-new bot commented Aug 30, 2024 •
edited
Loading

Open in Stackblitz

@vue/compiler-core
pnpm add https://pkg.pr.new/@vue/compiler-core@6238
@vue/compiler-dom
pnpm add https://pkg.pr.new/@vue/compiler-dom@6238
@vue/compiler-sfc
pnpm add https://pkg.pr.new/@vue/compiler-sfc@6238
@vue/compiler-ssr
pnpm add https://pkg.pr.new/@vue/compiler-ssr@6238
@vue/reactivity
pnpm add https://pkg.pr.new/@vue/reactivity@6238
@vue/runtime-core
pnpm add https://pkg.pr.new/@vue/runtime-core@6238
@vue/runtime-dom
pnpm add https://pkg.pr.new/@vue/runtime-dom@6238
@vue/server-renderer
pnpm add https://pkg.pr.new/@vue/server-renderer@6238
@vue/shared
pnpm add https://pkg.pr.new/@vue/shared@6238
@vue/compat
pnpm add https://pkg.pr.new/@vue/compat@6238
vue
pnpm add https://pkg.pr.new/vue@6238

commit: 71bdb90

Copy link
Member

/ecosystem-ci run
github-actions[bot], qmhc, and zhangzhonghe reacted with thumbs up emoji

Copy link
Contributor

vue-bot commented Aug 30, 2024

📝 Ran ecosystem CI: Open

suite result latest scheduled
language-tools ❌ failure ❌ failure
nuxt ✅ success ❌ failure
pinia ✅ success ✅ success
primevue ✅ 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

@edison1105 edison1105 added ready for review This PR requires more reviews and removed wait changes labels Oct 23, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@edison1105 edison1105 edison1105 requested changes

Assignees

No one assigned

Labels

🍰 p2-nice-to-have Priority 2: this is not breaking anything but nice to have it addressed. ready for review This PR requires more reviews scope: transition

Projects

Status: Waiting

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Root comment breaking the <Transition> without any warning

AltStyle によって変換されたページ (->オリジナル) /