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

[qmhc]

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>

[netlify]

❌ Deploy Preview for vuejs-coverage failed.

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

[zhangzhonghe]

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

[qmhc]

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

[zhangzhonghe]

Will it make differentiation in development mode and production mode?

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

core/packages/shared/src/patchFlags.ts

Lines 95 to 100 in 50f1327

	/**
	* 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,

[qmhc]

@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.😂

[zhangzhonghe]

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
}

[qmhc]

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

[edison1105]

This PR seems to be the proper fix. Could you please resolve the conflicts?

[zhangzhonghe]

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.

[github-actions]

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)

[pkg-pr-new]

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

[edison1105]

/ecosystem-ci run

[vue-bot]

📝 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