Skip to content

fix(vdomInterop): handling template ref on vdom child with insertion state#14243

Merged
edison1105 merged 1 commit intominorfrom
edison/fix/setRefVdomInteropWithInsertionState
Dec 25, 2025
Merged

fix(vdomInterop): handling template ref on vdom child with insertion state#14243
edison1105 merged 1 commit intominorfrom
edison/fix/setRefVdomInteropWithInsertionState

Conversation

@edison1105
Copy link
Copy Markdown
Member

@edison1105 edison1105 commented Dec 25, 2025

close #14242

Copilot AI review requested due to automatic review settings December 25, 2025 07:04
@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Dec 25, 2025

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/fix/setRefVdomInteropWithInsertionState

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

@github-actions
Copy link
Copy Markdown

github-actions bot commented Dec 25, 2025

Size Report

Bundles

File Size Gzip Brotli
compiler-dom.global.prod.js 85.5 kB 30 kB 26.5 kB
runtime-dom.global.prod.js 108 kB 40.7 kB 36.6 kB
vue.global.prod.js 167 kB 60.7 kB 54.1 kB

Usages

Name Size Gzip Brotli
createApp (CAPI only) 48.3 kB 18.9 kB 17.3 kB
createApp 57.3 kB 22 kB 20.1 kB
createApp + vaporInteropPlugin 97.3 kB (+24 B) 35.8 kB (+4 B) 32.3 kB (-42 B)
createVaporApp 42.6 kB 15.6 kB 14.3 kB
createSSRApp 61.7 kB 23.9 kB 21.7 kB
defineCustomElement 63.4 kB 23.9 kB 21.8 kB
overall 72.1 kB 27.3 kB 24.9 kB

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new bot commented Dec 25, 2025

Open in StackBlitz

@vue/compiler-core

pnpm add https://pkg.pr.new/@vue/compiler-core@14243

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

yarn add https://pkg.pr.new/@vue/compiler-core@14243.tgz

@vue/compiler-dom

pnpm add https://pkg.pr.new/@vue/compiler-dom@14243

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

yarn add https://pkg.pr.new/@vue/compiler-dom@14243.tgz

@vue/compiler-sfc

pnpm add https://pkg.pr.new/@vue/compiler-sfc@14243

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

yarn add https://pkg.pr.new/@vue/compiler-sfc@14243.tgz

@vue/compiler-ssr

pnpm add https://pkg.pr.new/@vue/compiler-ssr@14243

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

yarn add https://pkg.pr.new/@vue/compiler-ssr@14243.tgz

@vue/compiler-vapor

pnpm add https://pkg.pr.new/@vue/compiler-vapor@14243

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

yarn add https://pkg.pr.new/@vue/compiler-vapor@14243.tgz

@vue/reactivity

pnpm add https://pkg.pr.new/@vue/reactivity@14243

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

yarn add https://pkg.pr.new/@vue/reactivity@14243.tgz

@vue/runtime-core

pnpm add https://pkg.pr.new/@vue/runtime-core@14243

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

yarn add https://pkg.pr.new/@vue/runtime-core@14243.tgz

@vue/runtime-dom

pnpm add https://pkg.pr.new/@vue/runtime-dom@14243

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

yarn add https://pkg.pr.new/@vue/runtime-dom@14243.tgz

@vue/runtime-vapor

pnpm add https://pkg.pr.new/@vue/runtime-vapor@14243

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

yarn add https://pkg.pr.new/@vue/runtime-vapor@14243.tgz

@vue/server-renderer

pnpm add https://pkg.pr.new/@vue/server-renderer@14243

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

yarn add https://pkg.pr.new/@vue/server-renderer@14243.tgz

@vue/shared

pnpm add https://pkg.pr.new/@vue/shared@14243

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

yarn add https://pkg.pr.new/@vue/shared@14243.tgz

vue

pnpm add https://pkg.pr.new/vue@14243

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

yarn add https://pkg.pr.new/vue@14243.tgz

@vue/compat

pnpm add https://pkg.pr.new/@vue/compat@14243

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

yarn add https://pkg.pr.new/@vue/compat@14243.tgz

commit: efe1cd2

Copilot AI reviewed Dec 25, 2025
View reviewed changes
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

This PR fixes an issue where template refs were not properly set on vdom children when using insertion state (e.g., when the child is wrapped in a parent element). The fix ensures that when setRef is called on an already-mounted vdom component, the ref is properly established.

  • Adds a call to vdomSetRef in the setRef method when the component is already mounted
  • Includes a comprehensive test case to verify the fix works with vdom children and insertion state

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File Description
packages/runtime-vapor/src/vdomInterop.ts Added ref setting logic for already-mounted vdom components in the setRef method
packages/runtime-vapor/tests/dom/templateRef.spec.ts Added test case to verify template refs work correctly with vdom children when using insertion state

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@edison1105 edison1105 linked an issue Dec 25, 2025 that may be closed by this pull request
<script setup vapor>: component template ref is always undefined #14242
Closed
@edison1105 edison1105 added ready to merge The PR is ready to be merged. scope: vapor related to vapor mode labels Dec 25, 2025
@edison1105 edison1105 changed the title fix(templateRef): handling template ref on vdom child with insertion state fix(vdomInterop): handling template ref on vdom child with insertion state Dec 25, 2025
@edison1105 edison1105 moved this to Vapor in Next Minor Dec 25, 2025
@edison1105 edison1105 merged commit cc872d6 into minor Dec 25, 2025
23 checks passed
@edison1105 edison1105 deleted the edison/fix/setRefVdomInteropWithInsertionState branch December 25, 2025 13:21
@github-project-automation github-project-automation bot moved this from Vapor to Done in Next Minor Dec 25, 2025
@edison1105 edison1105 mentioned this pull request Dec 25, 2025
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

Assignees

No one assigned

Labels

ready to merge The PR is ready to be merged. scope: vapor related to vapor mode

Projects

Next Minor
Status: Done

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

<script setup vapor>: component template ref is always undefined

2 participants

@edison1105