fix(runtime-core): disable tracking block in h function #8213

edison1105 · 2023-05-02T13:32:57Z

Summary by CodeRabbit

Bug Fixes
- Fixed edge cases where certain programmatically-created virtual elements could be incorrectly tracked, preventing unexpected rendering glitches.
Performance
- Reduced unnecessary render tracking during virtual element creation, improving runtime stability and reducing wasted work.
Documentation
- Added clarifying comments about render tracking behavior during virtual element creation to aid future maintenance.

github-actions · 2023-10-20T04:05:14Z

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	101 kB (+52 B)	38.4 kB (+21 B)	34.6 kB (+24 B)
vue.global.prod.js	159 kB (+52 B)	58.5 kB (+21 B)	52 kB (-26 B)

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	46.5 kB	18.2 kB	16.7 kB
createApp	54.5 kB	21.2 kB	19.4 kB
createSSRApp	58.7 kB	22.9 kB	20.9 kB
defineCustomElement	59.5 kB	22.8 kB	20.8 kB
overall	68.6 kB (+52 B)	26.4 kB (+20 B)	24 kB (+20 B)

pkg-pr-new · 2024-10-16T07:31:50Z

Open in StackBlitz

@vue/compiler-core

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

@vue/compiler-dom

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

@vue/compiler-sfc

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

@vue/compiler-ssr

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

@vue/reactivity

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

@vue/runtime-core

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

@vue/runtime-dom

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

@vue/server-renderer

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

@vue/shared

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

vue

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

@vue/compat

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

commit: d37c02a

coderabbitai · 2025-09-01T04:00:24Z

Walkthrough

Added a local wrapper in h() that disables block tracking (setBlockTracking(-1)) before calling createVNode and restores it (setBlockTracking(1)) after, replacing all createVNode calls in h(); includes a reference to issue #6913.

Changes

Cohort / File(s)	Summary
h() block tracking wrapper `packages/runtime-core/src/h.ts`	Import `setBlockTracking`; add `doCreateVNode` wrapper that calls `setBlockTracking(-1)` before and `setBlockTracking(1)` after `createVNode`; replace all internal `createVNode` calls in `h()` with `doCreateVNode`; add comment referencing issue #6913.

Sequence Diagram(s)

sequenceDiagram
  actor C as Caller
  participant H as h()
  participant W as doCreateVNode
  participant BT as setBlockTracking
  participant CV as createVNode

  C->>H: h(type, props?, children?)
  H->>W: doCreateVNode(type, props, children)
  W->>BT: setBlockTracking(-1)
  W->>CV: createVNode(type, props, children)
  CV-->>W: vnode
  W->>BT: setBlockTracking(1)
  W-->>H: vnode
  H-->>C: vnode
  note over W,BT: Temporarily disable block tracking during vnode creation (per #6913)

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Assessment against linked issues

Objective	Addressed	Explanation
Prevent unintended rerender/disappearance when using computed with h() by adjusting block tracking during vnode creation (#6913)	✅

Suggested labels

:hammer: p3-minor-bug

Suggested reviewers

Doctor-wu

Poem

I paused the blocks with careful hops,
Wrapped each vnode in gentler stops.
No vanished arrows, no surprise,
Just steady renders, clear-eyed skies.
— a rabbit’s tweak, with tiny hops 🥕

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

MCP integration is disabled by default for public repositories
Jira integration is disabled by default for public repositories
Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 124e158 and d37c02a.

📒 Files selected for processing (1)

packages/runtime-core/src/h.ts (2 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

packages/runtime-core/src/h.ts

✨ Finishing Touches

📝 Generate Docstrings

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

Add @coderabbitai ignore or @coderabbit ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

Visit our Status Page to check the current availability of CodeRabbit.
Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (1)

packages/runtime-core/src/h.ts (1)

205-206: Optional: hoist helper to module scope to avoid per-call allocation.

Defining doCreateVNode outside h() avoids creating a new closure on every call. Impact is minor since h() isn’t used by compiled templates, but it’s a cheap win.

If you prefer, lift the helper above the h() overloads and keep the same signature.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

MCP integration is disabled by default for public repositories
Jira integration is disabled by default for public repositories
Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 24fccb4 and 124e158.

📒 Files selected for processing (1)

packages/runtime-core/src/h.ts (2 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

packages/runtime-core/src/h.ts (2)

packages/runtime-core/src/index.ts (3)

setBlockTracking (368-368)

createVNode (111-111)

isVNode (111-111)

packages/shared/src/general.ts (2)

isObject (53-54)

isArray (39-39)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)

GitHub Check: Redirect rules
GitHub Check: Header rules
GitHub Check: Pages changed
GitHub Check: test / e2e-test

🔇 Additional comments (2)

packages/runtime-core/src/h.ts (2)

10-11: Import looks correct.

Pulling in setBlockTracking from './vnode' is appropriate for this usage.

218-218: Consistent usage of the helper across all code paths.

All createVNode calls are replaced with doCreateVNode, ensuring tracking is disabled consistently. LGTM.

Please add/confirm a regression test covering the computed + h() repro from issue #6913 (including nested h(), array children, and slot functions) to ensure no dynamicChildren/block tracking regressions.

Also applies to: 221-221, 224-224, 232-232

packages/runtime-core/src/h.ts

edison1105 · 2025-09-02T08:50:55Z

/ecosystem-ci run

vue-bot · 2025-09-02T08:58:32Z

📝 Ran ecosystem CI: Open

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

spaceemotion · 2025-09-02T19:24:50Z

packages/runtime-core/src/h.ts

@@ -201,25 +202,35 @@ export function h<P>(

 // Actual implementation
 export function h(type: any, propsOrChildren?: any, children?: any): VNode {
+  // #6913 disable tracking block in h function
+  const doCreateVNode = (type: any, props?: any, children?: any) => {


Just stumbled upon this as I was reading the changelog. Is there a reason why every call to h will now (afaik) create an inline version of doCreateVNode? Can't this be created outside of the scope of calling h()?

You are right, I made some simplifications to the h function and removed the doCreateVNode function. See #13841

fix(runtime-core): disabled tracking block in h function

4dfb851

edison1105 changed the title ~~fix(runtime-core): disabled tracking block in h function~~ fix(runtime-core): disable tracking block in h function May 2, 2023

chore: add comment

6b98378

edison1105 mentioned this pull request May 2, 2023

使用template模式在属性传递时，若有h函数的执行，则可能会导致异常的报错 #8203

Closed

chore: improve code

3dc4e44

sxzz force-pushed the main branch from 39d4fc1 to 1b56405 Compare August 21, 2023 05:00

Merge branch 'main' into fix/hFn

0723334

edison1105 and others added 3 commits March 19, 2024 17:56

Merge branch 'main' into fix/hFn

235c723

[autofix.ci] apply automated fixes

de96c6b

Merge branch 'main' into fix/hFn

cbd0726

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 Oct 16, 2024

Merge branch 'main' into fix/hFn

9beeecc

edison1105 removed this from Issue / PR Management Sep 1, 2025

Merge branch 'main' into fix/hFn

124e158

coderabbitai bot reviewed Sep 1, 2025

View reviewed changes

packages/runtime-core/src/h.ts Outdated Show resolved Hide resolved

edison1105 added 2 commits September 2, 2025 16:41

Merge branch 'main' into fix/hFn

5bcd2b0

chore: tweaks

d37c02a

vuejs deleted a comment from edison1105 Sep 2, 2025

edison1105 merged commit 8f6b505 into vuejs:main Sep 2, 2025
14 checks passed

spaceemotion reviewed Sep 2, 2025

View reviewed changes

coderabbitai bot mentioned this pull request Sep 3, 2025

chore(runtime-core): simplify block-tracking disabling in h function #13841

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix(runtime-core): disable tracking block in h function #8213

fix(runtime-core): disable tracking block in h function #8213

Uh oh!

edison1105 commented May 2, 2023 •

edited by coderabbitai bot

Loading

Uh oh!

github-actions bot commented Oct 20, 2023 •

edited

Loading

Uh oh!

pkg-pr-new bot commented Oct 16, 2024 •

edited

Loading

Uh oh!

coderabbitai bot commented Sep 1, 2025 •

edited

Loading

Chat

Support

CodeRabbit Commands (Invoked using PR/Issue comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Status, Documentation and Community

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

edison1105 commented Sep 2, 2025

Uh oh!

vue-bot commented Sep 2, 2025

Uh oh!

Uh oh!

spaceemotion Sep 2, 2025

Uh oh!

edison1105 Sep 3, 2025

Uh oh!

Uh oh!

Uh oh!

fix(runtime-core): disable tracking block in h function #8213

fix(runtime-core): disable tracking block in h function #8213

Uh oh!

Conversation

edison1105 commented May 2, 2023 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

github-actions bot commented Oct 20, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Size Report

Bundles

Usages

Uh oh!

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

Uh oh!

Uh oh!

coderabbitai bot commented Sep 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Assessment against linked issues

Suggested labels

Suggested reviewers

Poem

Chat

Support

CodeRabbit Commands (Invoked using PR/Issue comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Status, Documentation and Community

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

edison1105 commented Sep 2, 2025

Uh oh!

vue-bot commented Sep 2, 2025

Uh oh!

Uh oh!

spaceemotion Sep 2, 2025

Choose a reason for hiding this comment

Uh oh!

edison1105 Sep 3, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

edison1105 commented May 2, 2023 •

edited by coderabbitai bot

Loading

github-actions bot commented Oct 20, 2023 •

edited

Loading

pkg-pr-new bot commented Oct 16, 2024 •

edited

Loading

coderabbitai bot commented Sep 1, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)