Skip to content

fix(compiler-vapor): use createElement path for plain template#14744

Merged
edison1105 merged 3 commits into
minorfrom
edison/fix/templateError
Apr 22, 2026
Merged

fix(compiler-vapor): use createElement path for plain template#14744
edison1105 merged 3 commits into
minorfrom
edison/fix/templateError

Conversation

@edison1105

@edison1105 edison1105 commented Apr 21, 2026

Copy link
Copy Markdown
Member

Summary by CodeRabbit

  • Tests

    • Expanded test coverage for plain <template> elements, custom elements, text rendering, and v-text directive behavior
  • Bug Fixes

    • Improved text content escaping and materialization within template elements
    • Enhanced reactivity support for dynamic content in compiled templates
    • Refined v-text directive compilation for template elements

@coderabbitai

coderabbitai Bot commented Apr 21, 2026

Copy link
Copy Markdown

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: b2daeccd-b0bd-4187-a3d5-6f1130c66d8a

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:

  • 🔍 Trigger review
🚥 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%. 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.
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.
Title check ✅ Passed The title accurately describes the main change: modifying the compiler-vapor to use the createElement path (via useCreateElement flag) for plain template elements, which is the core fix across multiple files in this changeset.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch edison/fix/templateError

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

@github-actions

Copy link
Copy Markdown

Size Report

Bundles

File Size Gzip Brotli
compiler-dom.global.prod.js 86.4 kB 30.3 kB 26.6 kB
runtime-dom.global.prod.js 113 kB 42.4 kB 38 kB
vue.global.prod.js 172 kB 62.2 kB 55.5 kB

Usages

Name Size Gzip Brotli
createApp (CAPI only) 51.3 kB 20 kB 18.3 kB
createApp 60.4 kB 23.3 kB 21.2 kB
createApp + vaporInteropPlugin 96.9 kB 34.9 kB 31.5 kB
createVaporApp 35 kB 12.9 kB 11.8 kB
createSSRApp 64.9 kB 25.1 kB 22.8 kB
createVaporSSRApp 41.3 kB 15 kB 13.8 kB
defineCustomElement 67 kB 25.3 kB 23 kB
defineVaporCustomElement 42.3 kB 15 kB 13.8 kB
overall 75.4 kB 28.7 kB 26.1 kB

@pkg-pr-new

pkg-pr-new Bot commented Apr 21, 2026

Copy link
Copy Markdown

Open in StackBlitz

@vue/compiler-core

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

@vue/compiler-dom

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

@vue/compiler-sfc

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

@vue/compiler-ssr

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

@vue/compiler-vapor

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

@vue/reactivity

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

@vue/runtime-core

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

@vue/runtime-dom

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

@vue/runtime-vapor

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

@vue/server-renderer

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

@vue/shared

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

vue

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

@vue/compat

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

commit: 1c7830a

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

🧹 Nitpick comments (1)
packages/compiler-vapor/src/transforms/vText.ts (1)

52-73: Reuse the synthetic child id for SET_TEXT.

Lines 68-69 recompute the target from context.dynamic.children[node.children.length] even though registerSyntheticTextChild() already returned the inserted node id. Threading that id through keeps this transform decoupled from child-slot bookkeeping and makes the invalid-children path less fragile.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/compiler-vapor/src/transforms/vText.ts` around lines 52 - 73, The
transform recomputes the target element for the SET_TEXT effect from
context.dynamic.children[node.children.length] instead of reusing the synthetic
child id returned by registerSyntheticTextChild(); change the code so the id
produced by registerSyntheticTextChild(context, '') (call site:
registerSyntheticTextChild) is preserved in an outer-scope variable and used as
the element when building the IRNodeTypes.SET_TEXT effect (instead of
context.dynamic.children[node.children.length]!.id!), so that the SET_TEXT's
element is the same id passed into the earlier context.registerOperation that
inserted the synthetic text child; ensure the id is declared before the if
(useCreateElement) branch and assigned inside it so it’s available later when
creating the effect.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@packages/compiler-vapor/src/transforms/vText.ts`:
- Around line 52-73: The transform recomputes the target element for the
SET_TEXT effect from context.dynamic.children[node.children.length] instead of
reusing the synthetic child id returned by registerSyntheticTextChild(); change
the code so the id produced by registerSyntheticTextChild(context, '') (call
site: registerSyntheticTextChild) is preserved in an outer-scope variable and
used as the element when building the IRNodeTypes.SET_TEXT effect (instead of
context.dynamic.children[node.children.length]!.id!), so that the SET_TEXT's
element is the same id passed into the earlier context.registerOperation that
inserted the synthetic text child; ensure the id is declared before the if
(useCreateElement) branch and assigned inside it so it’s available later when
creating the effect.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: d8fb9b3d-b000-4d1a-8674-88562cbae6f4

📥 Commits

Reviewing files that changed from the base of the PR and between 05426e0 and b6d70cd.

⛔ Files ignored due to path filters (2)
  • packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap is excluded by !**/*.snap
  • packages/compiler-vapor/__tests__/transforms/__snapshots__/vText.spec.ts.snap is excluded by !**/*.snap
📒 Files selected for processing (9)
  • packages/compiler-vapor/__tests__/transforms/transformElement.spec.ts
  • packages/compiler-vapor/__tests__/transforms/vText.spec.ts
  • packages/compiler-vapor/src/generators/component.ts
  • packages/compiler-vapor/src/ir/index.ts
  • packages/compiler-vapor/src/transforms/transformChildren.ts
  • packages/compiler-vapor/src/transforms/transformElement.ts
  • packages/compiler-vapor/src/transforms/transformText.ts
  • packages/compiler-vapor/src/transforms/vText.ts
  • packages/runtime-vapor/__tests__/component.spec.ts

@edison1105 edison1105 added scope: vapor related to vapor mode labels Apr 21, 2026
@edison1105 edison1105 force-pushed the edison/fix/templateError branch from 4144d2f to 3b70a2e Compare April 22, 2026 01:23
@edison1105 edison1105 changed the title fix(compiler-vapor): use createElement path for dynamic plain template fix(compiler-vapor): use createElement path for plain template Apr 22, 2026
@edison1105 edison1105 marked this pull request as ready for review April 22, 2026 01:42

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🧹 Nitpick comments (1)
packages/compiler-vapor/src/transforms/vText.ts (1)

67-73: Non-null assertion on id! is safe but could be clearer.

At line 69, useCreateElement ? id! : context.reference() uses a non-null assertion. While this is safe because id is always assigned when useCreateElement is true (lines 41 and 54), the control flow is split across two separate if blocks (literal vs non-literal).

The code is correct as-is, but if you want to make the invariant more explicit, you could restructure to avoid the assertion.

♻️ Optional: Extract common element reference pattern
+    const textElement = useCreateElement ? id! : context.reference()
     context.registerEffect([exp], {
       type: IRNodeTypes.SET_TEXT,
-      element: useCreateElement ? id! : context.reference(),
+      element: textElement,
       values: [exp],
       generated: !useCreateElement,
       isComponent,
     })
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/compiler-vapor/src/transforms/vText.ts` around lines 67 - 73, The
non-null assertion id! in the context.registerEffect call hides the invariant
that id is set when useCreateElement is true; make that invariant explicit by
computing an elementRef beforehand (useCreateElement ? id : context.reference())
and ensure id is checked or assigned before using it (e.g., throw or assert if
id is unexpectedly undefined), then pass elementRef into context.registerEffect;
update references to IRNodeTypes.SET_TEXT, context.registerEffect, id,
useCreateElement, and context.reference() accordingly so no non-null assertion
is required.
🤖 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/compiler-vapor/__tests__/abbreviation.spec.ts`:
- Around line 182-192: Restore the commented-out <template> assertions in the
abbreviation test by re-enabling the two checkAbbr calls and updating their
expected outputs to match the new createElement-path semantics: use the
checkAbbr helper to assert the input strings containing <template> still produce
the updated abbreviation and full-render outputs (adjust the second and third
string arguments to reflect the createElement-style compilation instead of the
old native <template> form); locate the two commented checkAbbr invocations
around the existing tests and replace their expected abbreviated and full HTML
strings to the new compiled form produced by the createElement path.

---

Nitpick comments:
In `@packages/compiler-vapor/src/transforms/vText.ts`:
- Around line 67-73: The non-null assertion id! in the context.registerEffect
call hides the invariant that id is set when useCreateElement is true; make that
invariant explicit by computing an elementRef beforehand (useCreateElement ? id
: context.reference()) and ensure id is checked or assigned before using it
(e.g., throw or assert if id is unexpectedly undefined), then pass elementRef
into context.registerEffect; update references to IRNodeTypes.SET_TEXT,
context.registerEffect, id, useCreateElement, and context.reference()
accordingly so no non-null assertion is required.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 089a4740-427c-466f-af2f-f05784722c92

📥 Commits

Reviewing files that changed from the base of the PR and between 4144d2f and 1c7830a.

⛔ Files ignored due to path filters (2)
  • packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap is excluded by !**/*.snap
  • packages/compiler-vapor/__tests__/transforms/__snapshots__/transformText.spec.ts.snap is excluded by !**/*.snap
📒 Files selected for processing (7)
  • packages/compiler-vapor/__tests__/abbreviation.spec.ts
  • packages/compiler-vapor/__tests__/transforms/transformElement.spec.ts
  • packages/compiler-vapor/__tests__/transforms/transformText.spec.ts
  • packages/compiler-vapor/src/transforms/transformElement.ts
  • packages/compiler-vapor/src/transforms/transformText.ts
  • packages/compiler-vapor/src/transforms/vText.ts
  • packages/runtime-vapor/__tests__/component.spec.ts
✅ Files skipped from review due to trivial changes (1)
  • packages/compiler-vapor/tests/transforms/transformText.spec.ts
🚧 Files skipped from review as they are similar to previous changes (3)
  • packages/compiler-vapor/tests/transforms/transformElement.spec.ts
  • packages/runtime-vapor/tests/component.spec.ts
  • packages/compiler-vapor/src/transforms/transformText.ts

Comment thread packages/compiler-vapor/__tests__/abbreviation.spec.ts
@edison1105 edison1105 merged commit 19a870d into minor Apr 22, 2026
17 checks passed
@edison1105 edison1105 deleted the edison/fix/templateError branch April 22, 2026 01:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

scope: vapor related to vapor mode

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant