feat(compiler): implement patterned templates (RFC 823) by ubugeeei · Pull Request #15531 · vuejs/core

ubugeeei · 2026-09-16T05:39:16Z

Implement the compiler portion of RFC 823, based on minor. v-match evaluates its subject once and selects the first v-when whose pattern and guard succeed. Bindings are local to that arm; an unmatched value renders nothing.

VDOM, SSR and Vapor share the parser and selector. The selector checks the pattern, copies bound rest, introduces bindings, then evaluates the guard. Lexical scope code generation preserves branch identity, keys, v-once, slot bindings and hydration. The compiler validates pattern syntax and placement; semantic narrowing and exhaustiveness belong to language-tools #6207.

This is a Draft reference implementation for RFC discussion. It implements the current long-form syntax. Property presence uses in Object(value), following the RFC pseudocode; the RFC's own-property versus in question remains open. Companion documentation: docs #3465.

The SFC top-level form, <template v-match="result">, uses the same lowering as an inner match. The descriptor retains the directive for AST reuse, import usage, HMR, and header source maps. Vite integration requires vite-plugin-vue #847, which fixes the compiler-version check that otherwise drops this AST.

The top-level reference implementation currently supports inline HTML templates. Preprocessing, external src templates, and custom compilers that discard the descriptor AST still need integration.

Validation:

Local unit and jsdom suites: 6,703 passing tests across 278 files; existing expected failures, skips and todos retained.
Type checks, lint and formatting. Full compiler, declaration, browser and Vapor checks run in PR CI.
Browser integration with the companion Vite plugin: VDOM, Vapor and template-only Vapor render and update in dev and production; header-only HMR updates both script-setup modes.
Regressions cover evaluation order, rest copies and getters, branch-local events, keys, v-once, scoped slots, root attribute fallthrough and SSR hydration.

Two existing Transition E2E cases now poll for their final DOM state instead of assuming it after a fixed delay. CI read transition classes before they were removed. The expected DOM, lifecycle assertions, and tests of intermediate transition states are unchanged.

coderabbitai · 2026-09-16T05:39:23Z

Important

Draft PR not reviewed

Draft PRs are not automatically reviewed by default.

Trigger a manual review

To automatically review draft PRs, update your CodeRabbit configuration:

reviews:
  auto_review:
    drafts: true

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

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

pkg-pr-new · 2026-09-16T05:40:09Z

Open in StackBlitz

@vue/compiler-core

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

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

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

@vue/compiler-dom

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

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

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

@vue/compiler-sfc

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

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

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

@vue/compiler-ssr

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

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

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

@vue/compiler-vapor

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

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

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

@vue/reactivity

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

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

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

@vue/runtime-core

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

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

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

@vue/runtime-dom

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

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

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

@vue/runtime-vapor

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

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

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

@vue/server-renderer

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

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

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

@vue/shared

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

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

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

vue

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

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

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

@vue/compat

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

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

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

commit: 5345519

github-actions · 2026-09-16T05:43:20Z

Size Report

Bundles

File	Size	Gzip	Brotli
compiler-dom.global.prod.js	99.7 kB (+12.5 kB)	35.1 kB (+4.51 kB)	30.8 kB (+3.95 kB)
runtime-dom.global.prod.js	116 kB	43.7 kB	39.1 kB
vue.global.prod.js	188 kB (+12 kB)	68.2 kB (+4.38 kB)	60.6 kB (+3.73 kB)

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	53.2 kB	20.6 kB	18.8 kB
createApp	61.9 kB	23.8 kB	21.7 kB
createApp + vaporInteropPlugin	120 kB	43.3 kB	39 kB
createVaporApp	30.7 kB	11.8 kB	10.8 kB
createSSRApp	67.1 kB	25.9 kB	23.5 kB
createVaporSSRApp	37.1 kB	14.1 kB	12.9 kB
defineCustomElement	68.5 kB	25.8 kB	23.5 kB
defineVaporCustomElement	46.1 kB	16.8 kB	15.4 kB
overall	77.3 kB	29.4 kB	26.6 kB

ubugeeei · 2026-09-16T06:12:18Z

This remains a Draft reference implementation of RFC 823, based on minor.

CI passed at 534551950, including Linux/Windows unit tests, declaration checks, browser E2E and Vapor E2E.

The SFC top-level <template v-match="result"> uses the same selection and arm scopes as an inner match. Tests cover AST reuse, script import usage, header source maps, invalid headers, VDOM/Vapor updates, and SSR hydration. The real Vite dev and production checks include template-only Vapor and header-only HMR. Vite plugin #847 fixes the version check needed to retain the descriptor AST.

Scope regressions also cover setup/prop/loop/slot shadowing, $event, duplicate pattern declarations, enclosing value lookups, and v-for="value in value".

Top-level preprocessing, external src templates and custom compilers that discard the descriptor AST remain unfinished. RFC tracking lists the companion PRs and current limits.

feat(compiler): add RFC 823 patterned template reference implementation

0801636

ubugeeei mentioned this pull request Sep 16, 2026

feat: add patterned template tooling (RFC 823) vuejs/language-tools#6207

Draft

This was referenced Sep 16, 2026

RFC: Patterned Templates vuejs/rfcs#823

Open

docs: document patterned templates (RFC 823) vuejs/docs#3465

Draft

edison1105 added version: minor ✨ feature request New feature or request labels Sep 16, 2026

ubugeeei added 2 commits September 16, 2026 14:46

fix(compiler): preserve cached match arm scopes

061e356

refactor(compiler): clarify match selector evaluation phases

5071d79

ubugeeei changed the title ~~feat(compiler): add RFC 823 patterned template reference implementation~~ feat(compiler): implement patterned templates (RFC 823) Sep 16, 2026

ubugeeei added 2 commits September 16, 2026 15:02

test(transition): wait for animation frames before duration

da1d250

test(transition): poll final states in asynchronous cases

256088b

ubugeeei added 3 commits September 16, 2026 16:21

test(compiler): cover patterned template binding scopes

5f7075b

test(compiler): cover shadowed loop sources in match arms

83c5fcc

feat(compiler-sfc): support top-level patterned templates

5345519

Navigation Menu

Uh oh!

feat(compiler): implement patterned templates (RFC 823) - #15531

feat(compiler): implement patterned templates (RFC 823)#15531
ubugeeei wants to merge 8 commits into
vuejs:minorfrom
ubugeeei:feat/patterned-templates-reference

ubugeeei commented Sep 16, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Sep 16, 2026

Draft PR not reviewed

Uh oh!

pkg-pr-new Bot commented Sep 16, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Sep 16, 2026 •

edited

Loading

Uh oh!

ubugeeei commented Sep 16, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

ubugeeei commented Sep 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Sep 16, 2026

Draft PR not reviewed

Uh oh!

pkg-pr-new Bot commented Sep 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Sep 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Size Report

Bundles

Usages

Uh oh!

ubugeeei commented Sep 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ubugeeei commented Sep 16, 2026 •

edited

Loading

pkg-pr-new Bot commented Sep 16, 2026 •

edited

Loading

github-actions Bot commented Sep 16, 2026 •

edited

Loading

ubugeeei commented Sep 16, 2026 •

edited

Loading