Skip to content

fix(runtime-vapor): delay teleport child init until target is available#14593

Merged
edison1105 merged 2 commits intominorfrom
edison/refactor/vaporTeleport
Mar 17, 2026
Merged

fix(runtime-vapor): delay teleport child init until target is available#14593
edison1105 merged 2 commits intominorfrom
edison/refactor/vaporTeleport

Conversation

@edison1105
Copy link
Copy Markdown
Member

@edison1105 edison1105 commented Mar 16, 2026

Summary by CodeRabbit

  • Bug Fixes
    • Enhanced Teleport component to properly handle delayed teleport target availability with lazy initialization of child components. Improved KeepAlive integration, ensuring correct lifecycle hook invocation. Refined hydration and server-side rendering behavior when teleport targets are initially unavailable.

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new bot commented Mar 16, 2026

Open in StackBlitz

@vue/compiler-core

pnpm add https://pkg.pr.new/@vue/compiler-core@14593
npm i https://pkg.pr.new/@vue/compiler-core@14593
yarn add https://pkg.pr.new/@vue/compiler-core@14593.tgz

@vue/compiler-dom

pnpm add https://pkg.pr.new/@vue/compiler-dom@14593
npm i https://pkg.pr.new/@vue/compiler-dom@14593
yarn add https://pkg.pr.new/@vue/compiler-dom@14593.tgz

@vue/compiler-sfc

pnpm add https://pkg.pr.new/@vue/compiler-sfc@14593
npm i https://pkg.pr.new/@vue/compiler-sfc@14593
yarn add https://pkg.pr.new/@vue/compiler-sfc@14593.tgz

@vue/compiler-ssr

pnpm add https://pkg.pr.new/@vue/compiler-ssr@14593
npm i https://pkg.pr.new/@vue/compiler-ssr@14593
yarn add https://pkg.pr.new/@vue/compiler-ssr@14593.tgz

@vue/compiler-vapor

pnpm add https://pkg.pr.new/@vue/compiler-vapor@14593
npm i https://pkg.pr.new/@vue/compiler-vapor@14593
yarn add https://pkg.pr.new/@vue/compiler-vapor@14593.tgz

@vue/reactivity

pnpm add https://pkg.pr.new/@vue/reactivity@14593
npm i https://pkg.pr.new/@vue/reactivity@14593
yarn add https://pkg.pr.new/@vue/reactivity@14593.tgz

@vue/runtime-core

pnpm add https://pkg.pr.new/@vue/runtime-core@14593
npm i https://pkg.pr.new/@vue/runtime-core@14593
yarn add https://pkg.pr.new/@vue/runtime-core@14593.tgz

@vue/runtime-dom

pnpm add https://pkg.pr.new/@vue/runtime-dom@14593
npm i https://pkg.pr.new/@vue/runtime-dom@14593
yarn add https://pkg.pr.new/@vue/runtime-dom@14593.tgz

@vue/runtime-vapor

pnpm add https://pkg.pr.new/@vue/runtime-vapor@14593
npm i https://pkg.pr.new/@vue/runtime-vapor@14593
yarn add https://pkg.pr.new/@vue/runtime-vapor@14593.tgz

@vue/server-renderer

pnpm add https://pkg.pr.new/@vue/server-renderer@14593
npm i https://pkg.pr.new/@vue/server-renderer@14593
yarn add https://pkg.pr.new/@vue/server-renderer@14593.tgz

@vue/shared

pnpm add https://pkg.pr.new/@vue/shared@14593
npm i https://pkg.pr.new/@vue/shared@14593
yarn add https://pkg.pr.new/@vue/shared@14593.tgz

vue

pnpm add https://pkg.pr.new/vue@14593
npm i https://pkg.pr.new/vue@14593
yarn add https://pkg.pr.new/vue@14593.tgz

@vue/compat

pnpm add https://pkg.pr.new/@vue/compat@14593
npm i https://pkg.pr.new/@vue/compat@14593
yarn add https://pkg.pr.new/@vue/compat@14593.tgz

commit: f846787

@github-actions
Copy link
Copy Markdown

Size Report

Bundles

File Size Gzip Brotli
compiler-dom.global.prod.js 86.4 kB 30.2 kB 26.6 kB
runtime-dom.global.prod.js 111 kB 41.9 kB 37.6 kB
vue.global.prod.js 170 kB 61.7 kB 55 kB

Usages

Name Size Gzip Brotli
createApp (CAPI only) 50.6 kB 19.8 kB 18 kB
createApp 59.6 kB 23.1 kB 21 kB
createApp + vaporInteropPlugin 83.6 kB 31 kB 28 kB
createVaporApp 28.4 kB 11 kB 10.1 kB
createSSRApp 63.9 kB 24.8 kB 22.5 kB
createVaporSSRApp 31.6 kB 12.2 kB 11.2 kB
defineCustomElement 66.2 kB 25.1 kB 22.8 kB
defineVaporCustomElement 39 kB 14.4 kB 13.2 kB
overall 74.5 kB 28.4 kB 25.8 kB

@edison1105 edison1105 added scope: teleport scope: vapor related to vapor mode labels Mar 16, 2026
@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Mar 17, 2026

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.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 9245a40e-bfb4-4d83-9eda-aa720f10b0a4

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

Use the checkbox below for a quick retry:

  • ✅ Review completed - (🔄 Check again to review again)
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch edison/refactor/vaporTeleport
📝 Coding Plan
  • Generate coding plan for human review comments

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

@edison1105 edison1105 merged commit 3941eab into minor Mar 17, 2026
20 of 23 checks passed
Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/runtime-vapor/src/components/Teleport.ts`:
- Around line 126-145: The renderEffect body in initChildren must run with the
Teleport's owner instance set on every effect run; move or add a
setCurrentInstance(this.ownerInstance) call inside the renderEffect callback
(and restore the previous instance after the callback finishes) so that each
invocation of rawSlots!.default() sees the correct currentInstance; update the
corresponding restore to call setCurrentInstance(prevInstance) (or use the
returned prev value from setCurrentInstance) within the renderEffect finally
block to ensure currentInstance is restored on every rerun and that
createComponent and component.ts see the proper app/parent context.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 8bf83dd7-a96e-4ec3-b587-2330b6aced15

📥 Commits

Reviewing files that changed from the base of the PR and between caea24d and f846787.

📒 Files selected for processing (3)
  • packages/runtime-vapor/__tests__/components/Teleport.spec.ts
  • packages/runtime-vapor/__tests__/hydration.spec.ts
  • packages/runtime-vapor/src/components/Teleport.ts

Comment on lines 126 to +145
private initChildren(): void {
renderEffect(() => {
this.handleChildrenUpdate(
this.rawSlots!.default && (this.rawSlots!.default as BlockFn)(),
)
})
this.bindChildren(this.nodes)
const prevInstance = setCurrentInstance(this.ownerInstance)
try {
this.childrenInitialized = true
renderEffect(() => {
const prevOwner = setCurrentSlotOwner(this.slotOwner)
const prevKeepAliveCtx = setCurrentKeepAliveCtx(this.keepAliveCtx)
try {
this.handleChildrenUpdate(
this.rawSlots!.default && (this.rawSlots!.default as BlockFn)(),
)
} finally {
setCurrentKeepAliveCtx(prevKeepAliveCtx)
setCurrentSlotOwner(prevOwner)
}
})
this.bindChildren(this.nodes)
} finally {
setCurrentInstance(...prevInstance)
}
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Restore currentInstance on every delayed-child rerun.

setCurrentInstance(this.ownerInstance) only wraps the initial renderEffect() registration. After the first late mount, later effect reruns call rawSlots.default() without re-entering the owner instance, and createComponent() then falls back to missing parent/app-context wiring. packages/runtime-vapor/src/component.ts reads currentInstance for that metadata, so a delayed teleport that later re-renders its slot root can recreate children under the wrong context.

🛠️ Proposed fix
   private initChildren(): void {
     const prevInstance = setCurrentInstance(this.ownerInstance)
     try {
       this.childrenInitialized = true
       renderEffect(() => {
+        const prevEffectInstance = setCurrentInstance(this.ownerInstance)
         const prevOwner = setCurrentSlotOwner(this.slotOwner)
         const prevKeepAliveCtx = setCurrentKeepAliveCtx(this.keepAliveCtx)
         try {
           this.handleChildrenUpdate(
             this.rawSlots!.default && (this.rawSlots!.default as BlockFn)(),
           )
         } finally {
           setCurrentKeepAliveCtx(prevKeepAliveCtx)
           setCurrentSlotOwner(prevOwner)
+          setCurrentInstance(...prevEffectInstance)
         }
       })
       this.bindChildren(this.nodes)
     } finally {
       setCurrentInstance(...prevInstance)
     }
   }
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/runtime-vapor/src/components/Teleport.ts` around lines 126 - 145,
The renderEffect body in initChildren must run with the Teleport's owner
instance set on every effect run; move or add a
setCurrentInstance(this.ownerInstance) call inside the renderEffect callback
(and restore the previous instance after the callback finishes) so that each
invocation of rawSlots!.default() sees the correct currentInstance; update the
corresponding restore to call setCurrentInstance(prevInstance) (or use the
returned prev value from setCurrentInstance) within the renderEffect finally
block to ensure currentInstance is restored on every rerun and that
createComponent and component.ts see the proper app/parent context.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

scope: teleport scope: vapor related to vapor mode

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant