feat(vapor): vapor transition + transition-group #12962

edison1105 · 2025-02-27T08:45:38Z

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 · 2025-02-27T08:46:04Z

✅ Deploy Preview for vapor-repl ready!

Name	Link
🔨 Latest commit	`58ac955`
🔍 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 · 2025-02-27T08:50:39Z

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: 98e1dd1

coderabbitai · 2025-06-19T06:41:23Z

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.

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Explain this complex logic.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai explain this code block.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and explain its main purpose.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

github-actions · 2025-07-15T01:46:59Z

Size Report

Bundles

File	Size	Gzip	Brotli
compiler-dom.global.prod.js	84.6 kB (+526 B)	30 kB (+168 B)	26.4 kB (+228 B)
runtime-dom.global.prod.js	104 kB (+490 B)	39.3 kB (+114 B)	35.4 kB (+156 B)
vue.global.prod.js	163 kB (+488 B)	59.5 kB (+150 B)	52.9 kB (+108 B)

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	47.3 kB (+115 B)	18.5 kB (+59 B)	16.9 kB (+42 B)
createApp	56.2 kB (+115 B)	21.6 kB (+44 B)	19.8 kB (+44 B)
createApp + vaporInteropPlugin	77.7 kB (+9.15 kB)	29.1 kB (+3.27 kB)	26.4 kB (+2.85 kB)
createVaporApp	30.5 kB (+9.5 kB)	11.7 kB (+3.43 kB)	10.7 kB (+3.11 kB)
createSSRApp	60.5 kB (+134 B)	23.4 kB (+55 B)	21.3 kB (+67 B)
defineCustomElement	61.2 kB (+115 B)	23.2 kB (+57 B)	21.2 kB (+40 B)
overall	70.9 kB (+338 B)	26.9 kB (+86 B)	24.5 kB (+77 B)

edison1105 force-pushed the edison/feat/vaporTransition branch from 47e4e13 to 71db1e0 Compare February 27, 2025 09:29

feat(vapor): vapor transition

41822e3

edison1105 force-pushed the edison/feat/vaporTransition branch from 71db1e0 to 41822e3 Compare February 27, 2025 09:36

edison1105 added 4 commits February 27, 2025 22:31

wip: handle mode

7cee024

refactor: reuse code from BaseTransition

a8140ac

wip: handle in-out mode

8957eaa

wip: save

413651d

edison1105 force-pushed the edison/feat/vaporTransition branch 2 times, most recently from a6362cb to 989e79f Compare March 3, 2025 14:04

wip: save

1e79054

edison1105 force-pushed the edison/feat/vaporTransition branch from 989e79f to 1e79054 Compare March 3, 2025 14:07

edison1105 added 3 commits March 4, 2025 10:34

wip: save

75de3bb

wip: auto generate key for vif branch if it wraps in transition

3a31f08

wip: handle built-in components

7e593c2

edison1105 force-pushed the edison/feat/vaporTransition branch from 93a4de3 to f139002 Compare March 4, 2025 12:14

edison1105 added the scope: vapor related to vapor mode label Mar 4, 2025

edison1105 force-pushed the edison/feat/vaporTransition branch from f139002 to 841e0cf Compare March 4, 2025 13:12

wip: handle keyed element transition

11bcb21

edison1105 force-pushed the edison/feat/vaporTransition branch from 841e0cf to 11bcb21 Compare March 4, 2025 14:02

wip: refactor

90dc4e2

edison1105 force-pushed the edison/feat/vaporTransition branch from 1b5e9ef to 27d15c5 Compare March 5, 2025 01:06

wip: improve types

3fcba1d

edison1105 force-pushed the edison/feat/vaporTransition branch from 27d15c5 to 3fcba1d Compare March 5, 2025 01:26

edison1105 added 4 commits March 5, 2025 10:12

wip: inject useVaporTransition call for treeshaking

5dce316

wip: save

b92ea0a

wip: save

e3f8ba4

Merge branch 'vapor' into edison/feat/vaporTransition

14f102a

edison1105 force-pushed the edison/feat/vaporTransition branch from 44be78b to afc732e Compare March 5, 2025 09:13

edison1105 added 9 commits March 13, 2025 11:09

wip: handle props update

1540002

test: add more tests

055ca98

wip: port tests and fix bugs

b1b11c7

test: add more tests

d147b1c

test: add more tests

d5bd63a

wip: handle fallthrough attrs

c9ee8d1

wip: handle fallthrough attrs

ecef92b

wip: add more tests

bbe4452

test: add more tests

9ee219a

edison1105 force-pushed the edison/feat/vaporTransition branch from 3048952 to 9ee219a Compare March 14, 2025 06:40

wip: work with v-show appear

2caeecd

edison1105 force-pushed the edison/feat/vaporTransition branch from d486cf8 to 2caeecd Compare March 14, 2025 09:37

edison1105 added 5 commits March 16, 2025 10:00

wip: refactor

acd2af2

chore: update export

f0ebb0b

refactor: add createElement helper

c7bd982

wip: update

7a4a4c0

chore: update

e42ff1b

edison1105 force-pushed the edison/feat/vaporTransition branch from 4c016a8 to e42ff1b Compare March 17, 2025 06:52

edison1105 marked this pull request as ready for review March 17, 2025 06:57

edison1105 added 2 commits March 19, 2025 08:44

chore: update

d8ccabe

chore: reset prevChildren after updated

cb8830f

edison1105 force-pushed the edison/feat/vaporTransition branch from d6861d4 to cb8830f Compare April 10, 2025 08:25

edison1105 force-pushed the vapor branch from 66c6902 to f78a9d0 Compare May 8, 2025 10:02

fix: mark single root for transition block

542e401

edison1105 force-pushed the edison/feat/vaporTransition branch from 41aba70 to 542e401 Compare June 19, 2025 06:59

chore: Merge branch 'vapor' into edison/feat/vaporTransition

58ac955

Base automatically changed from vapor to minor July 7, 2025 00:06

chore: Merge branch 'minor' into edison/feat/vaporTransition

98e1dd1

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

feat(vapor): vapor transition + transition-group #12962

feat(vapor): vapor transition + transition-group #12962

Uh oh!

edison1105 commented Feb 27, 2025 •

edited

Loading

Uh oh!

netlify bot commented Feb 27, 2025 •

edited

Loading

Uh oh!

pkg-pr-new bot commented Feb 27, 2025 •

edited

Loading

Uh oh!

coderabbitai bot commented Jun 19, 2025

Review skipped

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

Uh oh!

github-actions bot commented Jul 15, 2025

Uh oh!

Uh oh!

Uh oh!

feat(vapor): vapor transition + transition-group #12962

Are you sure you want to change the base?

feat(vapor): vapor transition + transition-group #12962

Uh oh!

Conversation

edison1105 commented Feb 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Compiler Changes

Runtime Changes

Tests

Uh oh!

netlify bot commented Feb 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for vapor-repl ready!

Uh oh!

pkg-pr-new bot commented Feb 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot commented Jun 19, 2025

Review skipped

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

github-actions bot commented Jul 15, 2025

Size Report

Bundles

Usages

Uh oh!

Uh oh!

edison1105 commented Feb 27, 2025 •

edited

Loading

netlify bot commented Feb 27, 2025 •

edited

Loading

pkg-pr-new bot commented Feb 27, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)