feat(vapor): vapor transition + transition-group

[edison1105]

Compiler Changes

• Within Vapor components
  • Transition is automatically rewritten as VaporTransition
  • TransitionGroup is automatically rewritten as VaporTransitionGroup
• When the root node of a Transition uses the v-if, the compiler automatically adds a $key property to the rendering result, making it easier for the runtime to track the element's leaving state using the key

  <Transition>
    <h1 v-if="show">
      <span>HI</span>
    </h1>
  </Transition>

will be compiled to

  const n4 = _createComponent(_VaporTransition, null, {
    "default": () => {
      const n1 = _createIf(() => (_ctx.show), () => {
        const n3 = t1()
        n3.$key = 3 // adds a `$key` 
        return n3
      })
      return n1
    }
  })

• When the root node of a Transition has an explicit key, the compiler generates code that includes createKeyedFragment, which creates a new DynamicFragment when the key changes, triggering transitions

  <Transition>
    <span :key="count">{{ count }}</span>
  </Transition>

will be compiled to

  const n1 = _createComponent(_VaporTransition, null, {
    "default": () => {
      return _createKeyedFragment(() => _ctx.count, () => {
        const n0 = t0()
        const x0 = _child(n0)
        _renderEffect(() => _setText(x0, _toDisplayString(_ctx.count)))
        n0.$key = _ctx.count
        return n0
      })
    }
  })

• When appear is set in the Transition and the root node uses v-show, it need to execute applyVShow after the Transition is created to ensure that the appear behavior works properly.

  <div>
    <transition appear>
      <div v-show="!toggle">content</div>
    </transition>
  </div>

will be compiled to

  const deferredApplyVShows = []
  const n2 = t1()
  const n1 = _createComponent(_VaporTransition, {
    appear: () => (""), 
    persisted: () => ("")
  }, {
    "default": () => {
      const n0 = t0()
      deferredApplyVShows.push(() => _applyVShow(n0, () => (!toggle.value)))
      return n0
    }
  })
  _insert(n1, n2)
  deferredApplyVShows.forEach(fn => fn())
  return n2

Runtime Changes

• Added VaporTransition and VaporTransitionGroup components that reuses most of the logic from runtime-dom/Transition
• Transition hooks are now stored on the block.$transition property
• DynamicFragment Update Logic Modification:
  • When removing old elements, leave animations are triggered
  • When rendering new elements, enter animations are triggered
• Extracted baseResolveTransitionHooks from the existing resolveTransitionHooks function to be shared between VaporTransition and Transition. Each component passes its own specific TransitionHooksContext
• Interop:
  • Existing Transition component now supports rendering Vapor components

Tests

• Ported all test cases except those related to KeepAlive, Suspense, and Teleport from packages/vue/tests/e2e/Transition.spec.ts
• Ported all test cases from packages/vue/tests/e2e/TransitionGroup.spec.ts

[netlify[bot]]

✅ Deploy Preview for vapor-repl ready!

Name	Link
🔨 Latest commit	58ac955981d327c4f406da26ee8eb8b338704135
🔍 Latest deploy log	https://app.netlify.com/projects/vapor-repl/deploys/6854cdcab5b6cb00087a9aca
😎 Deploy Preview	https://deploy-preview-12962--vapor-repl.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[pkg-pr-new[bot]]

Open in StackBlitz

@vue/compiler-core

npm i https://pkg.pr.new/@vue/compiler-core@12962

@vue/compiler-dom

npm i https://pkg.pr.new/@vue/compiler-dom@12962

@vue/compiler-sfc

npm i https://pkg.pr.new/@vue/compiler-sfc@12962

@vue/compiler-ssr

npm i https://pkg.pr.new/@vue/compiler-ssr@12962

@vue/compiler-vapor

npm i https://pkg.pr.new/@vue/compiler-vapor@12962

@vue/reactivity

npm i https://pkg.pr.new/@vue/reactivity@12962

@vue/runtime-core

npm i https://pkg.pr.new/@vue/runtime-core@12962

@vue/runtime-dom

npm i https://pkg.pr.new/@vue/runtime-dom@12962

@vue/runtime-vapor

npm i https://pkg.pr.new/@vue/runtime-vapor@12962

@vue/server-renderer

npm i https://pkg.pr.new/@vue/server-renderer@12962

@vue/shared

npm i https://pkg.pr.new/@vue/shared@12962

vue

npm i https://pkg.pr.new/vue@12962

@vue/compat

npm i https://pkg.pr.new/@vue/compat@12962

commit: 1c02f52

[coderabbitai[bot]]

[!IMPORTANT]

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches

🧪 Generate unit tests (beta)

• [ ] Create PR with unit tests
• [ ] Post copyable unit tests in a comment
• [ ] Commit unit tests in branch edison/feat/vaporTransition

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions[bot]]

Size Report

Bundles

File	Size	Gzip	Brotli
compiler-dom.global.prod.js	84.5 kB	30 kB	26.4 kB
runtime-dom.global.prod.js	104 kB	39.3 kB	35.4 kB
vue.global.prod.js	162 kB	59.4 kB	53 kB

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	47.3 kB	18.5 kB	16.9 kB
createApp	56.1 kB	21.6 kB	19.8 kB
createApp + vaporInteropPlugin	77.7 kB	29.1 kB	26.5 kB
createVaporApp	30.5 kB	11.8 kB	10.7 kB
createSSRApp	60.4 kB	23.4 kB	21.3 kB
defineCustomElement	61.1 kB	23.2 kB	21.2 kB
overall	70.8 kB	26.9 kB	24.6 kB