fix(compiler-vapor): emit createElement-backed children nested in a template

[edison1105]

Summary by CodeRabbit

• Bug Fixes
  • Fixed rendering of nested custom and plain template elements.
  • Improved handling of dynamic content inside template elements, including reactive text updates.
  • Preserved template anchors and child placement when templates are nested or positioned alongside sibling elements.
  • Corrected generated output for template structures to ensure consistent DOM insertion behavior.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Team

Run ID: 8b7029d6-054e-416a-8076-cc306d46137c

📥 Commits

Reviewing files that changed from the base of the PR and between 4b2f191 and dab8e3b.

⛔ Files ignored due to path filters (1)

• packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap is excluded by !**/*.snap

📒 Files selected for processing (3)

• packages/compiler-vapor/__tests__/transforms/transformElement.spec.ts
• packages/compiler-vapor/src/generators/template.ts
• packages/runtime-vapor/__tests__/dom/template.spec.ts

Included review availability: Your plan provides up to 10 included reviews per hour; 7 remain after this review.

---

📝 Walkthrough

Walkthrough

The compiler now treats operation-backed children as subtree owners during template generation. New compiler and runtime tests cover nested custom elements, plain templates, anchor placement, child insertion, and reactive text updates.

Changes

Template subtree generation

Layer / File(s)	Summary
Subtree-aware child generation packages/compiler-vapor/src/generators/template.ts	genChildren handles dynamic children owned by operations and skips duplicate recursive generation.
Compiler and runtime validation packages/compiler-vapor/__tests__/transforms/transformElement.spec.ts, packages/runtime-vapor/__tests__/dom/template.spec.ts	Tests verify generated insertion calls, plain template anchors, nested child insertion, and reactive text updates.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Merge Risk: ⚪ Minimal · up to dab8e

Nested template and custom-element children with dynamic content now render through their owning element path, preserving insertion anchors and reactive text updates. The covered behavior is ready to merge.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 3 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main compiler fix: emitting createElement-backed children nested inside a template.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

• Fix all pre-merge checks with AI

✨ Finishing Touches 💡 2

📝 Generate docstrings 💡

• Create stacked PR
• Commit on current branch

🛠️ Fix failing CI checks 💡

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch edison/fix/create-element-child-codegen

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[pkg-pr-new]

Open in StackBlitz

@vue/compiler-core

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

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

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

@vue/compiler-dom

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

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

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

@vue/compiler-sfc

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

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

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

@vue/compiler-ssr

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

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

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

@vue/compiler-vapor

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

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

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

@vue/reactivity

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

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

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

@vue/runtime-core

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

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

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

@vue/runtime-dom

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

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

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

@vue/runtime-vapor

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

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

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

@vue/server-renderer

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

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

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

@vue/shared

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

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

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

vue

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

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

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

@vue/compat

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

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

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

commit: dab8e3b

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
compiler-dom.global.prod.js	87.2 kB	30.6 kB	26.9 kB
runtime-dom.global.prod.js	116 kB	43.8 kB	39.2 kB
vue.global.prod.js	176 kB	63.9 kB	56.9 kB

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	53.2 kB	20.6 kB	18.8 kB
createApp	62.2 kB	24 kB	21.8 kB
createApp + vaporInteropPlugin	118 kB	42.7 kB	38.3 kB
createVaporApp	30.9 kB	11.9 kB	10.9 kB
createSSRApp	67.4 kB	26 kB	23.6 kB
createVaporSSRApp	37 kB	14.1 kB	12.9 kB
defineCustomElement	68.7 kB	25.9 kB	23.6 kB
defineVaporCustomElement	46.3 kB	16.8 kB	15.4 kB
overall	77.6 kB	29.5 kB	26.7 kB