Skip to content

fix(runtime-core): handle non-isomorphic block element update#15002

Merged
edison1105 merged 4 commits into
vuejs:mainfrom
KazariEX:fix/issue-6385
Jun 25, 2026
Merged

fix(runtime-core): handle non-isomorphic block element update#15002
edison1105 merged 4 commits into
vuejs:mainfrom
KazariEX:fix/issue-6385

Conversation

@KazariEX

@KazariEX KazariEX commented Jun 24, 2026

Copy link
Copy Markdown
Member

fix #6385

Summary by CodeRabbit

  • Bug Fixes
    • Fixed rendering updates where placeholder output was not fully replaced during dynamic/compiled updates, ensuring the final DOM matches the fully resolved UI.
    • Improved renderer fallback behavior when block metadata is inconsistent, forcing a full children diff to keep nested elements, text, and classes in sync.
  • Tests
    • Added a new optimized-mode test to verify correct DOM results when re-rendering from placeholder content to a compiled-style vnode tree.

@coderabbitai

coderabbitai Bot commented Jun 24, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: deed530e-abf6-4e5c-8e2d-09936c92dd94

📥 Commits

Reviewing files that changed from the base of the PR and between c33152b and 7042602.

📒 Files selected for processing (2)
  • packages/runtime-core/__tests__/rendererOptimizedMode.spec.ts
  • packages/runtime-core/src/renderer.ts
🚧 Files skipped from review as they are similar to previous changes (2)
  • packages/runtime-core/tests/rendererOptimizedMode.spec.ts
  • packages/runtime-core/src/renderer.ts

📝 Walkthrough

Walkthrough

patchElement now falls back to a full children diff when dynamicChildren metadata is missing or mismatched. A new optimized-mode test covers the compiled render path.

Changes

patchElement full-diff fallback for mismatched dynamicChildren

Layer / File(s) Summary
Children patching branch in patchElement
packages/runtime-core/src/renderer.ts
patchElement now checks old and new dynamicChildren before using patchBlockChildren, falls back to patchChildren when they differ, and clears optimized state after the full diff.
Regression test for compiled-slot patching
packages/runtime-core/__tests__/rendererOptimizedMode.spec.ts
Adds a test that re-renders a placeholder into an openBlock()/createElementBlock() tree with PatchFlags.CLASS and PatchFlags.TEXT and asserts the DOM becomes the fully updated structure.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested labels

:hammer: p3-minor-bug

Suggested reviewers

  • edison1105

Poem

🐰 A block hopped out to take a peek,
But stale children made it squeak.
So full diff came with a gentle pat,
And the DOM straightened out just like that.
Two carrots up, the test passed through—
A tidy patch, bright and new.

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed Title is concise and accurately summarizes the runtime-core block update fix.
Linked Issues check ✅ Passed The renderer change and new test address #6385 by deopting unstable block updates and preventing the oldChildren error.
Out of Scope Changes check ✅ Passed Only a targeted runtime-core fix and regression test were added, with no unrelated changes.
Docstring Coverage ✅ Passed Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

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

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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

pkg-pr-new Bot commented Jun 24, 2026

Copy link
Copy Markdown

Open in StackBlitz

@vue/compiler-core

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

@vue/compiler-dom

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

@vue/compiler-sfc

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

@vue/compiler-ssr

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

@vue/reactivity

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

@vue/runtime-core

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

@vue/runtime-dom

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

@vue/server-renderer

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

@vue/shared

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

vue

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

@vue/compat

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

commit: 7042602

@github-actions

github-actions Bot commented Jun 24, 2026

Copy link
Copy Markdown

Size Report

Bundles

File Size Gzip Brotli
runtime-dom.global.prod.js 106 kB (+80 B) 40.2 kB (+32 B) 36.2 kB (+111 B)
vue.global.prod.js 165 kB (+80 B) 60.2 kB (+37 B) 53.6 kB (+58 B)

Usages

Name Size Gzip Brotli
createApp (CAPI only) 48.8 kB (+80 B) 19 kB (+28 B) 17.4 kB (+28 B)
createApp 57 kB (+80 B) 22 kB (+28 B) 20.1 kB (+18 B)
createSSRApp 61.3 kB (+80 B) 23.8 kB (+25 B) 21.7 kB (+21 B)
defineCustomElement 63.2 kB (+80 B) 24 kB (+29 B) 21.8 kB (+28 B)
overall 71.8 kB (+80 B) 27.4 kB (+28 B) 25 kB (+20 B)

@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.

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
packages/runtime-core/src/renderer.ts (1)

858-906: 🩺 Stability & Availability | 🔴 Critical | ⚡ Quick win

Separate non-isomorphic blocks from normal leaf nodes, and route HMR through the full-diff branch.

Line 866 can null dynamicChildren for HMR, but Line 881 still branches only on isFullDiffRequired; equal-length HMR blocks then call patchBlockChildren(..., dynamicChildren!) with null. Also, the current predicate is true when both vnodes simply have no nested dynamicChildren, forcing full children/props diffs for normal optimized dynamic leaf nodes.

Proposed fix
-    const isFullDiffRequired = !(
-      dynamicChildren &&
-      n1.dynamicChildren &&
-      n1.dynamicChildren.length === dynamicChildren.length
-    )
+    const isNonIsomorphicBlock = !!(
+      (dynamicChildren || n1.dynamicChildren) &&
+      (!dynamicChildren ||
+        !n1.dynamicChildren ||
+        n1.dynamicChildren.length !== dynamicChildren.length)
+    )
+    const forceFullDiff =
+      isNonIsomorphicBlock || (__DEV__ && isHmrUpdating)
 
     // HMR updated, force full diff
-    if (isFullDiffRequired || (__DEV__ && isHmrUpdating)) {
+    if (forceFullDiff) {
       patchFlag = 0
       optimized = false
       dynamicChildren = null
     }
@@
-    if (isFullDiffRequired) {
+    if (dynamicChildren) {
+      patchBlockChildren(
+        n1.dynamicChildren!,
+        dynamicChildren,
+        el,
+        parentComponent,
+        parentSuspense,
+        resolveChildrenNamespace(n2, namespace),
+        slotScopeIds,
+      )
+      if (__DEV__) {
+        // necessary for HMR
+        traverseStaticChildren(n1, n2)
+      }
+    } else if (!optimized) {
       patchChildren(
         n1,
         n2,
@@
         slotScopeIds,
         false,
       )
-    } else {
-      patchBlockChildren(
-        n1.dynamicChildren!,
-        dynamicChildren!,
-        el,
-        parentComponent,
-        parentSuspense,
-        resolveChildrenNamespace(n2, namespace),
-        slotScopeIds,
-      )
-      if (__DEV__) {
-        // necessary for HMR
-        traverseStaticChildren(n1, n2)
-      }
     }
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/runtime-core/src/renderer.ts` around lines 858 - 906, Separate
non-isomorphic blocks from normal optimized leaf nodes, and ensure HMR always
uses the full-diff path. Update the logic around isFullDiffRequired in
renderer.ts so it only forces a full diff for user-wrapped/non-isomorphic
blocks, not for ordinary vnodes that simply lack dynamicChildren, and keep HMR
from falling through to patchBlockChildren when dynamicChildren has been nulled.
Use the existing patchChildren, patchBlockChildren, and isHmrUpdating branches
to route HMR updates through the full-diff branch and avoid calling
patchBlockChildren with null dynamicChildren.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Outside diff comments:
In `@packages/runtime-core/src/renderer.ts`:
- Around line 858-906: Separate non-isomorphic blocks from normal optimized leaf
nodes, and ensure HMR always uses the full-diff path. Update the logic around
isFullDiffRequired in renderer.ts so it only forces a full diff for
user-wrapped/non-isomorphic blocks, not for ordinary vnodes that simply lack
dynamicChildren, and keep HMR from falling through to patchBlockChildren when
dynamicChildren has been nulled. Use the existing patchChildren,
patchBlockChildren, and isHmrUpdating branches to route HMR updates through the
full-diff branch and avoid calling patchBlockChildren with null dynamicChildren.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: b1ae86aa-2282-4b74-aeb1-66b53d70e03b

📥 Commits

Reviewing files that changed from the base of the PR and between 325eb1d and 303de0e.

📒 Files selected for processing (2)
  • packages/runtime-core/__tests__/rendererOptimizedMode.spec.ts
  • packages/runtime-core/src/renderer.ts

@edison1105

Copy link
Copy Markdown
Member

The safer fix is to deopt before patching when the old and new dynamicChildren metadata cannot be matched.

dynamicChildren is only valid for positional patching when both sides come from the same stable block shape. In this case, user-wrapped compiled output can switch from a manual vnode to a compiled block vnode, so only falling back for children is not enough: root props may still go through the patch-flag fast path and leave stale attrs behind.

By setting patchFlag = 0, optimized = false, and dynamicChildren = null up front, the update follows the normal full-diff path for both children and props.

see 7042602

@edison1105

Copy link
Copy Markdown
Member

/ecosystem-ci run

@edison1105 edison1105 added ready to merge The PR is ready to be merged. 🍰 p2-nice-to-have Priority 2: this is not breaking anything but nice to have it addressed. labels Jun 25, 2026
@vue-bot

vue-bot commented Jun 25, 2026

Copy link
Copy Markdown
Contributor

📝 Ran ecosystem CI: Open

suite result latest scheduled
radix-vue failure failure
quasar success success
primevue success success
language-tools success success
pinia success success
vant success success
test-utils success success
vitepress success failure
router success success
nuxt success success
vue-macros success success
vuetify success failure
vue-i18n success success
vueuse success success
vite-plugin-vue success failure
vue-simple-compiler success failure

@edison1105 edison1105 merged commit 932ddd0 into vuejs:main Jun 25, 2026
18 of 19 checks passed
@KazariEX KazariEX deleted the fix/issue-6385 branch June 25, 2026 08:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🍰 p2-nice-to-have Priority 2: this is not breaking anything but nice to have it addressed. ready to merge The PR is ready to be merged.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

OldChildren is null with modified component

3 participants