chore: Merge branch 'edison/fix/dynamicComponentWithVHtml' into edison/testVapor
ci / test (push) Waiting to run Details
ci / continuous-release (push) Waiting to run Details

This commit is contained in:
daiwei 2025-06-18 17:36:39 +08:00
commit 8bf75a77db
53 changed files with 2567 additions and 1786 deletions

View File

@ -1,3 +1,41 @@
## [3.5.14](https://github.com/vuejs/core/compare/v3.5.13...v3.5.14) (2025-05-15)
### Bug Fixes
* **compat:** correct deprecation message for v-bind.sync usage ([#13137](https://github.com/vuejs/core/issues/13137)) ([466b30f](https://github.com/vuejs/core/commit/466b30f4049ec89fb282624ec17d1a93472ab93f)), closes [#13133](https://github.com/vuejs/core/issues/13133)
* **compiler-core:** remove slot cache from parent renderCache during unmounting ([#13215](https://github.com/vuejs/core/issues/13215)) ([5d166f3](https://github.com/vuejs/core/commit/5d166f3796a03a497435fc079c6a83a4e9c6cf52))
* **compiler-sfc:** fix scope handling for props destructure in function parameters and catch clauses ([8e34357](https://github.com/vuejs/core/commit/8e3435779a667de485cf9efd78667d0ca14c5f84)), closes [#12790](https://github.com/vuejs/core/issues/12790)
* **compiler-sfc:** treat the return value of `useTemplateRef` as a definite ref ([#13197](https://github.com/vuejs/core/issues/13197)) ([8ae1122](https://github.com/vuejs/core/commit/8ae11226e8ee938615e17c7b81dc38ae3f7cefb9))
* **compiler:** fix spelling error in domTagConfig ([#13043](https://github.com/vuejs/core/issues/13043)) ([388295b](https://github.com/vuejs/core/commit/388295b27f3cc69eba25d325bbe60a36a3df831a))
* **customFormatter:** properly accessing ref value during debugger ([#12948](https://github.com/vuejs/core/issues/12948)) ([fdbd026](https://github.com/vuejs/core/commit/fdbd02658301dd794fe0c84f0018d080a07fca9f))
* **hmr/teleport:** adjust static children traversal for HMR in dev mode ([#12819](https://github.com/vuejs/core/issues/12819)) ([5e37dd0](https://github.com/vuejs/core/commit/5e37dd009562bcd8080a200c32abde2d6e4f0305)), closes [#12816](https://github.com/vuejs/core/issues/12816)
* **hmr:** avoid hydration for hmr root reload ([#12450](https://github.com/vuejs/core/issues/12450)) ([1f98a9c](https://github.com/vuejs/core/commit/1f98a9c493d01c21befa90107f0593bc92a58932)), closes [vitejs/vite-plugin-vue#146](https://github.com/vitejs/vite-plugin-vue/issues/146) [vitejs/vite-plugin-vue#477](https://github.com/vitejs/vite-plugin-vue/issues/477)
* **hmr:** avoid hydration for hmr updating ([#12262](https://github.com/vuejs/core/issues/12262)) ([9c4dbbc](https://github.com/vuejs/core/commit/9c4dbbc5185125835ad3e49baba303bd54676111)), closes [#7706](https://github.com/vuejs/core/issues/7706) [#8170](https://github.com/vuejs/core/issues/8170)
* **reactivity:** ensure markRaw objects are not reactive ([#12824](https://github.com/vuejs/core/issues/12824)) ([295b5ec](https://github.com/vuejs/core/commit/295b5ec19b6a52c4a56652cc4d6e93a4ea7c14ed)), closes [#12807](https://github.com/vuejs/core/issues/12807)
* **reactivity:** ensure multiple effectScope on() and off() calls maintains correct active scope ([22dcbf3](https://github.com/vuejs/core/commit/22dcbf3e20eb84f69c8952f6f70d9990136a4a68)), closes [#12631](https://github.com/vuejs/core/issues/12631) [#12632](https://github.com/vuejs/core/issues/12632) [#12641](https://github.com/vuejs/core/issues/12641)
* **reactivity:** should not recompute if computed does not track reactive data ([#12341](https://github.com/vuejs/core/issues/12341)) ([0b23fd2](https://github.com/vuejs/core/commit/0b23fd23833cf085e7e112bf4435cfc9b360d072)), closes [#12337](https://github.com/vuejs/core/issues/12337)
* **runtime-core:** stop tracking deps in setRef during unmount ([#13210](https://github.com/vuejs/core/issues/13210)) ([016c472](https://github.com/vuejs/core/commit/016c472bd2e7604b21c69dee1da8545ce26e4d2f))
* **runtime-core:** update __vnode of static nodes when patching along the optimized path ([#13223](https://github.com/vuejs/core/issues/13223)) ([b3ecee3](https://github.com/vuejs/core/commit/b3ecee3da8ed5c55dea89ce6b4b376b2b722b018))
* **runtime-core:** inherit comment nodes during block patch in production build ([#10748](https://github.com/vuejs/core/issues/10748)) ([6264505](https://github.com/vuejs/core/commit/626450590d81f79117b34d2a73073b1dc8f551bd)), closes [#10747](https://github.com/vuejs/core/issues/10747) [#12650](https://github.com/vuejs/core/issues/12650)
* **runtime-core:** prevent unmounted vnode from being inserted during transition leave ([#12862](https://github.com/vuejs/core/issues/12862)) ([d6a6ec1](https://github.com/vuejs/core/commit/d6a6ec13ce521683bfb2a22932778ef7b51f8600)), closes [#12860](https://github.com/vuejs/core/issues/12860)
* **runtime-core:** respect immutability for readonly reactive arrays in `v-for` ([#13091](https://github.com/vuejs/core/issues/13091)) ([3f27c58](https://github.com/vuejs/core/commit/3f27c58ffbd4309df369bc89493fdc284dc540bb)), closes [#13087](https://github.com/vuejs/core/issues/13087)
* **runtime-dom:** always treat autocorrect as attribute ([#13001](https://github.com/vuejs/core/issues/13001)) ([1499135](https://github.com/vuejs/core/commit/1499135c227236e037bb746beeb777941b0b58ff)), closes [#5705](https://github.com/vuejs/core/issues/5705)
* **slots:** properly warn if slot invoked in setup ([#12195](https://github.com/vuejs/core/issues/12195)) ([9196222](https://github.com/vuejs/core/commit/9196222ae1d63b52b35ac5fbf5e71494587ccf05)), closes [#12194](https://github.com/vuejs/core/issues/12194)
* **ssr:** properly init slots during ssr rendering ([#12441](https://github.com/vuejs/core/issues/12441)) ([2206cd2](https://github.com/vuejs/core/commit/2206cd235a1627c540e795e378b7564a55b47313)), closes [#12438](https://github.com/vuejs/core/issues/12438)
* **transition:** fix KeepAlive with transition out-in mode behavior in production ([#12468](https://github.com/vuejs/core/issues/12468)) ([343c891](https://github.com/vuejs/core/commit/343c89122448719bd6ed6bd9de986dfb2721d6bf)), closes [#12465](https://github.com/vuejs/core/issues/12465)
* **TransitionGroup:** reset prevChildren to prevent memory leak ([#13183](https://github.com/vuejs/core/issues/13183)) ([8b848cb](https://github.com/vuejs/core/commit/8b848cbbd2af337d23e19e202f9ab433f8580855)), closes [#13181](https://github.com/vuejs/core/issues/13181)
* **types:** allow return any for Options API lifecycle hooks ([#5914](https://github.com/vuejs/core/issues/5914)) ([06310e8](https://github.com/vuejs/core/commit/06310e82f5bed62d1b9733dcb18cd8d6edc988de))
* **types:** the directive's modifiers should be optional ([#12605](https://github.com/vuejs/core/issues/12605)) ([10e54dc](https://github.com/vuejs/core/commit/10e54dcc86a7967f3196d96200bcbd1d3d42082f))
* **typos:** fix comments referencing transformElement.ts ([#12551](https://github.com/vuejs/core/issues/12551))[ci-skip] ([11c053a](https://github.com/vuejs/core/commit/11c053a5429ad0d27a0e2c78b6b026ea00ace116))
### Features
* **types:** add type TemplateRef ([#12645](https://github.com/vuejs/core/issues/12645)) ([636a861](https://github.com/vuejs/core/commit/636a8619f06c71dfd79f7f6412fd130c4f84226f))
## [3.5.13](https://github.com/vuejs/core/compare/v3.5.12...v3.5.13) (2024-11-15) ## [3.5.13](https://github.com/vuejs/core/compare/v3.5.12...v3.5.13) (2024-11-15)
@ -8,7 +46,7 @@
* **custom-element:** avoid triggering mutationObserver when relecting props ([352bc88](https://github.com/vuejs/core/commit/352bc88c1bd2fda09c61ab17ea1a5967ffcd7bc0)), closes [#12214](https://github.com/vuejs/core/issues/12214) [#12215](https://github.com/vuejs/core/issues/12215) * **custom-element:** avoid triggering mutationObserver when relecting props ([352bc88](https://github.com/vuejs/core/commit/352bc88c1bd2fda09c61ab17ea1a5967ffcd7bc0)), closes [#12214](https://github.com/vuejs/core/issues/12214) [#12215](https://github.com/vuejs/core/issues/12215)
* **deps:** update dependency postcss to ^8.4.48 ([#12356](https://github.com/vuejs/core/issues/12356)) ([b5ff930](https://github.com/vuejs/core/commit/b5ff930089985a58c3553977ef999cec2a6708a4)) * **deps:** update dependency postcss to ^8.4.48 ([#12356](https://github.com/vuejs/core/issues/12356)) ([b5ff930](https://github.com/vuejs/core/commit/b5ff930089985a58c3553977ef999cec2a6708a4))
* **hydration:** the component vnode's el should be updated when a mismatch occurs. ([#12255](https://github.com/vuejs/core/issues/12255)) ([a20a4cb](https://github.com/vuejs/core/commit/a20a4cb36a3e717d1f8f259d0d59f133f508ff0a)), closes [#12253](https://github.com/vuejs/core/issues/12253) * **hydration:** the component vnode's el should be updated when a mismatch occurs. ([#12255](https://github.com/vuejs/core/issues/12255)) ([a20a4cb](https://github.com/vuejs/core/commit/a20a4cb36a3e717d1f8f259d0d59f133f508ff0a)), closes [#12253](https://github.com/vuejs/core/issues/12253)
* **reactiivty:** avoid unnecessary watcher effect removal from inactive scope ([2193284](https://github.com/vuejs/core/commit/21932840eae72ffcd357a62ec596aaecc7ec224a)), closes [#5783](https://github.com/vuejs/core/issues/5783) [#5806](https://github.com/vuejs/core/issues/5806) * **reactivity:** avoid unnecessary watcher effect removal from inactive scope ([2193284](https://github.com/vuejs/core/commit/21932840eae72ffcd357a62ec596aaecc7ec224a)), closes [#5783](https://github.com/vuejs/core/issues/5783) [#5806](https://github.com/vuejs/core/issues/5806)
* **reactivity:** release nested effects/scopes on effect scope stop ([#12373](https://github.com/vuejs/core/issues/12373)) ([bee2f5e](https://github.com/vuejs/core/commit/bee2f5ee62dc0cd04123b737779550726374dd0a)), closes [#12370](https://github.com/vuejs/core/issues/12370) * **reactivity:** release nested effects/scopes on effect scope stop ([#12373](https://github.com/vuejs/core/issues/12373)) ([bee2f5e](https://github.com/vuejs/core/commit/bee2f5ee62dc0cd04123b737779550726374dd0a)), closes [#12370](https://github.com/vuejs/core/issues/12370)
* **runtime-dom:** set css vars before user onMounted hooks ([2d5c5e2](https://github.com/vuejs/core/commit/2d5c5e25e9b7a56e883674fb434135ac514429b5)), closes [#11533](https://github.com/vuejs/core/issues/11533) * **runtime-dom:** set css vars before user onMounted hooks ([2d5c5e2](https://github.com/vuejs/core/commit/2d5c5e25e9b7a56e883674fb434135ac514429b5)), closes [#11533](https://github.com/vuejs/core/issues/11533)
* **runtime-dom:** set css vars on update to handle child forcing reflow in onMount ([#11561](https://github.com/vuejs/core/issues/11561)) ([c4312f9](https://github.com/vuejs/core/commit/c4312f9c715c131a09e552ba46e9beb4b36d55e6)) * **runtime-dom:** set css vars on update to handle child forcing reflow in onMount ([#11561](https://github.com/vuejs/core/issues/11561)) ([c4312f9](https://github.com/vuejs/core/commit/c4312f9c715c131a09e552ba46e9beb4b36d55e6))

View File

@ -35,6 +35,7 @@ Please make sure to respect issue requirements and use [the new issue helper](ht
## Stay In Touch ## Stay In Touch
- [X](https://x.com/vuejs) - [X](https://x.com/vuejs)
- [Bluesky](https://bsky.app/profile/vuejs.org)
- [Blog](https://blog.vuejs.org/) - [Blog](https://blog.vuejs.org/)
- [Job Board](https://vuejobs.com/?ref=vuejs) - [Job Board](https://vuejobs.com/?ref=vuejs)

View File

@ -1,7 +1,7 @@
{ {
"private": true, "private": true,
"version": "3.5.13", "version": "3.5.14",
"packageManager": "pnpm@10.7.0", "packageManager": "pnpm@10.9.0",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "node scripts/dev.js", "dev": "node scripts/dev.js",
@ -69,24 +69,24 @@
"@rollup/plugin-json": "^6.1.0", "@rollup/plugin-json": "^6.1.0",
"@rollup/plugin-node-resolve": "^16.0.1", "@rollup/plugin-node-resolve": "^16.0.1",
"@rollup/plugin-replace": "5.0.4", "@rollup/plugin-replace": "5.0.4",
"@swc/core": "^1.11.13", "@swc/core": "^1.11.24",
"@types/hash-sum": "^1.0.2", "@types/hash-sum": "^1.0.2",
"@types/node": "^22.13.14", "@types/node": "^22.14.1",
"@types/semver": "^7.7.0", "@types/semver": "^7.7.0",
"@types/serve-handler": "^6.1.4", "@types/serve-handler": "^6.1.4",
"@vitest/ui": "^3.0.2", "@vitest/ui": "^3.0.2",
"@vitest/coverage-v8": "^3.0.9", "@vitest/coverage-v8": "^3.1.3",
"@vitest/eslint-plugin": "^1.1.38", "@vitest/eslint-plugin": "^1.1.44",
"@vue/consolidate": "1.0.0", "@vue/consolidate": "1.0.0",
"conventional-changelog-cli": "^5.0.0", "conventional-changelog-cli": "^5.0.0",
"enquirer": "^2.4.1", "enquirer": "^2.4.1",
"esbuild": "^0.25.2", "esbuild": "^0.25.4",
"esbuild-plugin-polyfill-node": "^0.3.0", "esbuild-plugin-polyfill-node": "^0.3.0",
"eslint": "^9.23.0", "eslint": "^9.25.1",
"eslint-plugin-import-x": "^4.9.4", "eslint-plugin-import-x": "^4.11.0",
"estree-walker": "catalog:", "estree-walker": "catalog:",
"jsdom": "^26.0.0", "jsdom": "^26.1.0",
"lint-staged": "^15.5.0", "lint-staged": "^15.5.1",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"magic-string": "^0.30.17", "magic-string": "^0.30.17",
"markdown-table": "^3.0.4", "markdown-table": "^3.0.4",
@ -96,38 +96,21 @@
"prettier": "^3.5.3", "prettier": "^3.5.3",
"pretty-bytes": "^6.1.1", "pretty-bytes": "^6.1.1",
"pug": "^3.0.3", "pug": "^3.0.3",
"puppeteer": "~24.4.0", "puppeteer": "~24.8.2",
"rimraf": "^6.0.1", "rimraf": "^6.0.1",
"rollup": "^4.38.0", "rollup": "^4.40.2",
"rollup-plugin-dts": "^6.2.1", "rollup-plugin-dts": "^6.2.1",
"rollup-plugin-esbuild": "^6.2.1", "rollup-plugin-esbuild": "^6.2.1",
"rollup-plugin-polyfill-node": "^0.13.0", "rollup-plugin-polyfill-node": "^0.13.0",
"semver": "^7.7.1", "semver": "^7.7.1",
"serve": "^14.2.4", "serve": "^14.2.4",
"serve-handler": "^6.1.6", "serve-handler": "^6.1.6",
"simple-git-hooks": "^2.12.1", "simple-git-hooks": "^2.13.0",
"todomvc-app-css": "^2.4.3", "todomvc-app-css": "^2.4.3",
"tslib": "^2.8.1", "tslib": "^2.8.1",
"typescript": "~5.6.2", "typescript": "~5.6.2",
"typescript-eslint": "^8.28.0", "typescript-eslint": "^8.31.1",
"vite": "catalog:", "vite": "catalog:",
"vitest": "^3.0.9" "vitest": "^3.1.3"
},
"pnpm": {
"peerDependencyRules": {
"allowedVersions": {
"typescript-eslint>eslint": "^9.0.0",
"@typescript-eslint/eslint-plugin>eslint": "^9.0.0",
"@typescript-eslint/parser>eslint": "^9.0.0",
"@typescript-eslint/type-utils>eslint": "^9.0.0",
"@typescript-eslint/utils>eslint": "^9.0.0"
}
},
"onlyBuiltDependencies": [
"@swc/core",
"esbuild",
"puppeteer",
"simple-git-hooks"
]
} }
} }

View File

@ -4,5 +4,5 @@
"isolatedDeclarations": false, "isolatedDeclarations": false,
"allowJs": true "allowJs": true
}, },
"include": ["./**/*", "../packages/*/src"] "include": ["./**/*", "../../packages/*/src"]
} }

View File

@ -11,7 +11,7 @@
"vue": "latest" "vue": "latest"
}, },
"devDependencies": { "devDependencies": {
"@vitejs/plugin-vue": "^5.2.3", "@vitejs/plugin-vue": "^5.2.4",
"vite": "^6.2.3" "vite": "^6.3.5"
} }
} }

View File

@ -170,6 +170,11 @@ describe('compiler: cacheStatic transform', () => {
{ {
/* _ slot flag */ /* _ slot flag */
}, },
{
type: NodeTypes.JS_PROPERTY,
key: { content: '__' },
value: { content: '[0]' },
},
], ],
}) })
}) })
@ -197,6 +202,11 @@ describe('compiler: cacheStatic transform', () => {
{ {
/* _ slot flag */ /* _ slot flag */
}, },
{
type: NodeTypes.JS_PROPERTY,
key: { content: '__' },
value: { content: '[0]' },
},
], ],
}) })
}) })

View File

@ -1,6 +1,6 @@
{ {
"name": "@vue/compiler-core", "name": "@vue/compiler-core",
"version": "3.5.13", "version": "3.5.14",
"description": "@vue/compiler-core", "description": "@vue/compiler-core",
"main": "index.js", "main": "index.js",
"module": "dist/compiler-core.esm-bundler.js", "module": "dist/compiler-core.esm-bundler.js",

View File

@ -12,11 +12,14 @@ import {
type RootNode, type RootNode,
type SimpleExpressionNode, type SimpleExpressionNode,
type SlotFunctionExpression, type SlotFunctionExpression,
type SlotsObjectProperty,
type TemplateChildNode, type TemplateChildNode,
type TemplateNode, type TemplateNode,
type TextCallNode, type TextCallNode,
type VNodeCall, type VNodeCall,
createArrayExpression, createArrayExpression,
createObjectProperty,
createSimpleExpression,
getVNodeBlockHelper, getVNodeBlockHelper,
getVNodeHelper, getVNodeHelper,
} from '../ast' } from '../ast'
@ -140,6 +143,7 @@ function walk(
} }
let cachedAsArray = false let cachedAsArray = false
const slotCacheKeys = []
if (toCache.length === children.length && node.type === NodeTypes.ELEMENT) { if (toCache.length === children.length && node.type === NodeTypes.ELEMENT) {
if ( if (
node.tagType === ElementTypes.ELEMENT && node.tagType === ElementTypes.ELEMENT &&
@ -163,6 +167,7 @@ function walk(
// default slot // default slot
const slot = getSlotNode(node.codegenNode, 'default') const slot = getSlotNode(node.codegenNode, 'default')
if (slot) { if (slot) {
slotCacheKeys.push(context.cached.length)
slot.returns = getCacheExpression( slot.returns = getCacheExpression(
createArrayExpression(slot.returns as TemplateChildNode[]), createArrayExpression(slot.returns as TemplateChildNode[]),
) )
@ -186,6 +191,7 @@ function walk(
slotName.arg && slotName.arg &&
getSlotNode(parent.codegenNode, slotName.arg) getSlotNode(parent.codegenNode, slotName.arg)
if (slot) { if (slot) {
slotCacheKeys.push(context.cached.length)
slot.returns = getCacheExpression( slot.returns = getCacheExpression(
createArrayExpression(slot.returns as TemplateChildNode[]), createArrayExpression(slot.returns as TemplateChildNode[]),
) )
@ -196,10 +202,31 @@ function walk(
if (!cachedAsArray) { if (!cachedAsArray) {
for (const child of toCache) { for (const child of toCache) {
slotCacheKeys.push(context.cached.length)
child.codegenNode = context.cache(child.codegenNode!) child.codegenNode = context.cache(child.codegenNode!)
} }
} }
// put the slot cached keys on the slot object, so that the cache
// can be removed when component unmounting to prevent memory leaks
if (
slotCacheKeys.length &&
node.type === NodeTypes.ELEMENT &&
node.tagType === ElementTypes.COMPONENT &&
node.codegenNode &&
node.codegenNode.type === NodeTypes.VNODE_CALL &&
node.codegenNode.children &&
!isArray(node.codegenNode.children) &&
node.codegenNode.children.type === NodeTypes.JS_OBJECT_EXPRESSION
) {
node.codegenNode.children.properties.push(
createObjectProperty(
`__`,
createSimpleExpression(JSON.stringify(slotCacheKeys), false),
) as SlotsObjectProperty,
)
}
function getCacheExpression(value: JSChildNode): CacheExpression { function getCacheExpression(value: JSChildNode): CacheExpression {
const exp = context.cache(value) const exp = context.cache(value)
// #6978, #7138, #7114 // #6978, #7138, #7114

View File

@ -342,7 +342,6 @@ export function buildSlots(
: hasForwardedSlots(node.children) : hasForwardedSlots(node.children)
? SlotFlags.FORWARDED ? SlotFlags.FORWARDED
: SlotFlags.STABLE : SlotFlags.STABLE
let slots = createObjectExpression( let slots = createObjectExpression(
slotsProperties.concat( slotsProperties.concat(
createObjectProperty( createObjectProperty(

View File

@ -1,6 +1,6 @@
{ {
"name": "@vue/compiler-dom", "name": "@vue/compiler-dom",
"version": "3.5.13", "version": "3.5.14",
"description": "@vue/compiler-dom", "description": "@vue/compiler-dom",
"main": "index.js", "main": "index.js",
"module": "dist/compiler-dom.esm-bundler.js", "module": "dist/compiler-dom.esm-bundler.js",

View File

@ -196,6 +196,25 @@ return () => {}
}" }"
`; `;
exports[`sfc reactive props destructure > handle function parameters with same name as destructured props 1`] = `
"
export default {
setup(__props) {
function test(value) {
try {
} catch {
}
}
console.log(__props.value)
return () => {}
}
}"
`;
exports[`sfc reactive props destructure > multi-variable declaration 1`] = ` exports[`sfc reactive props destructure > multi-variable declaration 1`] = `
" "
export default { export default {

View File

@ -360,6 +360,22 @@ describe('sfc reactive props destructure', () => {
expect(content).toMatch(`props: ['item'],`) expect(content).toMatch(`props: ['item'],`)
}) })
test('handle function parameters with same name as destructured props', () => {
const { content } = compile(`
<script setup>
const { value } = defineProps()
function test(value) {
try {
} catch {
}
}
console.log(value)
</script>
`)
assertCode(content)
expect(content).toMatch(`console.log(__props.value)`)
})
test('defineProps/defineEmits in multi-variable declaration (full removal)', () => { test('defineProps/defineEmits in multi-variable declaration (full removal)', () => {
const { content } = compile(` const { content } = compile(`
<script setup> <script setup>

View File

@ -211,38 +211,42 @@ color: red
expect( expect(
compileScoped(`.div { color: red; } .div:where(:hover) { color: blue; }`), compileScoped(`.div { color: red; } .div:where(:hover) { color: blue; }`),
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
".div[data-v-test] { color: red; ".div[data-v-test] { color: red;
} }
.div[data-v-test]:where(:hover) { color: blue; .div[data-v-test]:where(:hover) { color: blue;
}"`) }"
`)
expect( expect(
compileScoped(`.div { color: red; } .div:is(:hover) { color: blue; }`), compileScoped(`.div { color: red; } .div:is(:hover) { color: blue; }`),
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
".div[data-v-test] { color: red; ".div[data-v-test] { color: red;
} }
.div[data-v-test]:is(:hover) { color: blue; .div[data-v-test]:is(:hover) { color: blue;
}"`) }"
`)
expect( expect(
compileScoped( compileScoped(
`.div { color: red; } .div:where(.foo:hover) { color: blue; }`, `.div { color: red; } .div:where(.foo:hover) { color: blue; }`,
), ),
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
".div[data-v-test] { color: red; ".div[data-v-test] { color: red;
} }
.div[data-v-test]:where(.foo:hover) { color: blue; .div[data-v-test]:where(.foo:hover) { color: blue;
}"`) }"
`)
expect( expect(
compileScoped( compileScoped(
`.div { color: red; } .div:is(.foo:hover) { color: blue; }`, `.div { color: red; } .div:is(.foo:hover) { color: blue; }`,
), ),
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
".div[data-v-test] { color: red; ".div[data-v-test] { color: red;
} }
.div[data-v-test]:is(.foo:hover) { color: blue; .div[data-v-test]:is(.foo:hover) { color: blue;
}"`) }"
`)
}) })
test('media query', () => { test('media query', () => {

View File

@ -1,6 +1,6 @@
{ {
"name": "@vue/compiler-sfc", "name": "@vue/compiler-sfc",
"version": "3.5.13", "version": "3.5.14",
"description": "@vue/compiler-sfc", "description": "@vue/compiler-sfc",
"main": "dist/compiler-sfc.cjs.js", "main": "dist/compiler-sfc.cjs.js",
"module": "dist/compiler-sfc.esm-browser.js", "module": "dist/compiler-sfc.esm-browser.js",
@ -63,6 +63,6 @@
"postcss-modules": "^6.0.1", "postcss-modules": "^6.0.1",
"postcss-selector-parser": "^7.1.0", "postcss-selector-parser": "^7.1.0",
"pug": "^3.0.3", "pug": "^3.0.3",
"sass": "^1.86.0" "sass": "^1.86.3"
} }
} }

View File

@ -1120,6 +1120,7 @@ function walkDeclaration(
m === userImportAliases['shallowRef'] || m === userImportAliases['shallowRef'] ||
m === userImportAliases['customRef'] || m === userImportAliases['customRef'] ||
m === userImportAliases['toRef'] || m === userImportAliases['toRef'] ||
m === userImportAliases['useTemplateRef'] ||
m === DEFINE_MODEL, m === DEFINE_MODEL,
) )
) { ) {

View File

@ -291,7 +291,8 @@ export function transformDestructuredProps(
parent && parentStack.pop() parent && parentStack.pop()
if ( if (
(node.type === 'BlockStatement' && !isFunctionType(parent!)) || (node.type === 'BlockStatement' && !isFunctionType(parent!)) ||
isFunctionType(node) isFunctionType(node) ||
node.type === 'CatchClause'
) { ) {
popScope() popScope()
} }

View File

@ -1,6 +1,6 @@
{ {
"name": "@vue/compiler-ssr", "name": "@vue/compiler-ssr",
"version": "3.5.13", "version": "3.5.14",
"description": "@vue/compiler-ssr", "description": "@vue/compiler-ssr",
"main": "dist/compiler-ssr.cjs.js", "main": "dist/compiler-ssr.cjs.js",
"types": "dist/compiler-ssr.d.ts", "types": "dist/compiler-ssr.d.ts",

View File

@ -13,6 +13,19 @@ export function render(_ctx) {
}" }"
`; `;
exports[`compiler: template ref transform > function ref 1`] = `
"import { createTemplateRefSetter as _createTemplateRefSetter, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>", true)
export function render(_ctx) {
const _setTemplateRef = _createTemplateRefSetter()
const n0 = t0()
let r0
_renderEffect(() => r0 = _setTemplateRef(n0, bar => _ctx.foo = bar, r0))
return n0
}"
`;
exports[`compiler: template ref transform > ref + v-for 1`] = ` exports[`compiler: template ref transform > ref + v-for 1`] = `
"import { createTemplateRefSetter as _createTemplateRefSetter, createFor as _createFor, template as _template } from 'vue'; "import { createTemplateRefSetter as _createTemplateRefSetter, createFor as _createFor, template as _template } from 'vue';
const t0 = _template("<div></div>", true) const t0 = _template("<div></div>", true)

View File

@ -75,6 +75,17 @@ export function render(_ctx) {
}" }"
`; `;
exports[`cache multiple access > not cache variable in function expression 1`] = `
"import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = t0()
_renderEffect(() => _setDynamicProps(n0, [{ foo: bar => _ctx.foo = bar }], true))
return n0
}"
`;
exports[`cache multiple access > not cache variable only used in property shorthand 1`] = ` exports[`cache multiple access > not cache variable only used in property shorthand 1`] = `
"import { setStyle as _setStyle, renderEffect as _renderEffect, template as _template } from 'vue'; "import { setStyle as _setStyle, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>", true) const t0 = _template("<div></div>", true)

View File

@ -92,6 +92,40 @@ describe('compiler: template ref transform', () => {
expect(code).contains('_setTemplateRef(n0, _ctx.foo, r0)') expect(code).contains('_setTemplateRef(n0, _ctx.foo, r0)')
}) })
test('function ref', () => {
const { ir, code } = compileWithTransformRef(
`<div :ref="bar => foo = bar" />`,
)
expect(ir.block.dynamic.children[0]).toMatchObject({
id: 0,
flags: DynamicFlag.REFERENCED,
})
expect(ir.template).toEqual(['<div></div>'])
expect(ir.block.operation).toMatchObject([
{
type: IRNodeTypes.DECLARE_OLD_REF,
id: 0,
},
])
expect(ir.block.effect).toMatchObject([
{
operations: [
{
type: IRNodeTypes.SET_TEMPLATE_REF,
element: 0,
value: {
content: 'bar => foo = bar',
isStatic: false,
},
},
],
},
])
expect(code).toMatchSnapshot()
expect(code).contains('const _setTemplateRef = _createTemplateRefSetter()')
expect(code).contains('_setTemplateRef(n0, bar => _ctx.foo = bar, r0)')
})
test('ref + v-if', () => { test('ref + v-if', () => {
const { ir, code } = compileWithTransformRef( const { ir, code } = compileWithTransformRef(
`<div ref="foo" v-if="true" />`, `<div ref="foo" v-if="true" />`,

View File

@ -809,4 +809,12 @@ describe('cache multiple access', () => {
expect(code).matchSnapshot() expect(code).matchSnapshot()
expect(code).not.contains('const _bar = _ctx.bar') expect(code).not.contains('const _bar = _ctx.bar')
}) })
test('not cache variable in function expression', () => {
const { code } = compileWithVBind(`
<div v-bind="{ foo: bar => foo = bar }"></div>
`)
expect(code).matchSnapshot()
expect(code).not.contains('const _bar = _ctx.bar')
})
}) })

View File

@ -20,7 +20,6 @@ import type { Identifier, Node } from '@babel/types'
import type { CodegenContext } from '../generate' import type { CodegenContext } from '../generate'
import { isConstantExpression } from '../utils' import { isConstantExpression } from '../utils'
import { type CodeFragment, NEWLINE, buildCodeFragment } from './utils' import { type CodeFragment, NEWLINE, buildCodeFragment } from './utils'
import { walk } from 'estree-walker'
import { type ParserOptions, parseExpression } from '@babel/parser' import { type ParserOptions, parseExpression } from '@babel/parser'
export function genExpression( export function genExpression(
@ -295,33 +294,15 @@ function analyzeExpressions(expressions: SimpleExpressionNode[]) {
continue continue
} }
walk(exp.ast, { walkIdentifiers(exp.ast, (currentNode, parent, parentStack) => {
enter(currentNode: Node, parent: Node | null) { if (parent && isMemberExpression(parent)) {
if (currentNode.type === 'MemberExpression') { const memberExp = extractMemberExpression(parent, name => {
const memberExp = extractMemberExpression( registerVariable(name, exp, true)
currentNode, })
(name: string) => { registerVariable(memberExp, exp, false)
registerVariable(name, exp, true) } else if (!parentStack.some(isMemberExpression)) {
}, registerVariable(currentNode.name, exp, true)
) }
registerVariable(memberExp, exp, false)
return this.skip()
}
// skip shorthand or non-computed property keys
if (
parent &&
parent.type === 'ObjectProperty' &&
parent.key === currentNode &&
(parent.shorthand || !parent.computed)
) {
return this.skip()
}
if (currentNode.type === 'Identifier') {
registerVariable(currentNode.name, exp, true)
}
},
}) })
} }
@ -580,3 +561,9 @@ function extractMemberExpression(
return '' return ''
} }
} }
const isMemberExpression = (node: Node) => {
return (
node.type === 'MemberExpression' || node.type === 'OptionalMemberExpression'
)
}

View File

@ -1017,6 +1017,17 @@ describe('reactivity/computed', () => {
expect(cValue.value).toBe(1) expect(cValue.value).toBe(1)
}) })
test('should not recompute if computed does not track reactive data', async () => {
const spy = vi.fn()
const c1 = computed(() => spy())
c1.value
ref(0).value++ // update globalVersion
c1.value
expect(spy).toBeCalledTimes(1)
})
test('computed should remain live after losing all subscribers', () => { test('computed should remain live after losing all subscribers', () => {
const state = reactive({ a: 1 }) const state = reactive({ a: 1 })
const p = computed(() => state.a + 1) const p = computed(() => state.a + 1)

View File

@ -1,6 +1,6 @@
{ {
"name": "@vue/reactivity", "name": "@vue/reactivity",
"version": "3.5.13", "version": "3.5.14",
"description": "@vue/reactivity", "description": "@vue/reactivity",
"main": "index.js", "main": "index.js",
"module": "dist/reactivity.esm-bundler.js", "module": "dist/reactivity.esm-bundler.js",

View File

@ -324,4 +324,98 @@ describe('component: slots', () => {
'Slot "default" invoked outside of the render function', 'Slot "default" invoked outside of the render function',
).not.toHaveBeenWarned() ).not.toHaveBeenWarned()
}) })
test('basic warn', () => {
const Comp = {
setup(_: any, { slots }: any) {
slots.default && slots.default()
return () => null
},
}
const App = {
setup() {
return () => h(Comp, () => h('div'))
},
}
createApp(App).mount(nodeOps.createElement('div'))
expect(
'Slot "default" invoked outside of the render function',
).toHaveBeenWarned()
})
test('basic warn when mounting another app in setup', () => {
const Comp = {
setup(_: any, { slots }: any) {
slots.default?.()
return () => null
},
}
const mountComp = () => {
createApp({
setup() {
return () => h(Comp, () => 'msg')
},
}).mount(nodeOps.createElement('div'))
}
const App = {
setup() {
mountComp()
return () => null
},
}
createApp(App).mount(nodeOps.createElement('div'))
expect(
'Slot "default" invoked outside of the render function',
).toHaveBeenWarned()
})
test('should not warn when render in setup', () => {
const container = {
setup(_: any, { slots }: any) {
return () => slots.default && slots.default()
},
}
const comp = h(container, null, () => h('div'))
const App = {
setup() {
render(h(comp), nodeOps.createElement('div'))
return () => null
},
}
createApp(App).mount(nodeOps.createElement('div'))
expect(
'Slot "default" invoked outside of the render function',
).not.toHaveBeenWarned()
})
test('basic warn when render in setup', () => {
const container = {
setup(_: any, { slots }: any) {
slots.default && slots.default()
return () => null
},
}
const comp = h(container, null, () => h('div'))
const App = {
setup() {
render(h(comp), nodeOps.createElement('div'))
return () => null
},
}
createApp(App).mount(nodeOps.createElement('div'))
expect(
'Slot "default" invoked outside of the render function',
).toHaveBeenWarned()
})
}) })

View File

@ -1198,4 +1198,51 @@ describe('BaseTransition', () => {
test('should not error on KeepAlive w/ function children', () => { test('should not error on KeepAlive w/ function children', () => {
expect(() => mount({}, () => () => h('div'), true)).not.toThrow() expect(() => mount({}, () => () => h('div'), true)).not.toThrow()
}) })
// #12465
test('mode: "out-in" w/ KeepAlive + fallthrough attrs (prod mode)', async () => {
__DEV__ = false
async function testOutIn({ trueBranch, falseBranch }: ToggleOptions) {
const toggle = ref(true)
const { props, cbs } = mockProps({ mode: 'out-in' }, true)
const root = nodeOps.createElement('div')
const App = {
render() {
return h(
BaseTransition,
{
...props,
class: 'test',
},
() =>
h(KeepAlive, null, toggle.value ? trueBranch() : falseBranch()),
)
},
}
render(h(App), root)
expect(serializeInner(root)).toBe(`<div class="test">0</div>`)
// trigger toggle
toggle.value = false
await nextTick()
expect(props.onBeforeLeave).toHaveBeenCalledTimes(1)
expect(serialize((props.onBeforeLeave as any).mock.calls[0][0])).toBe(
`<div class="test">0</div>`,
)
expect(props.onLeave).toHaveBeenCalledTimes(1)
expect(serialize((props.onLeave as any).mock.calls[0][0])).toBe(
`<div class="test">0</div>`,
)
expect(props.onAfterLeave).not.toHaveBeenCalled()
// enter should not have started
expect(props.onBeforeEnter).not.toHaveBeenCalled()
expect(props.onEnter).not.toHaveBeenCalled()
expect(props.onAfterEnter).not.toHaveBeenCalled()
cbs.doneLeave[`<div class="test">0</div>`]()
expect(serializeInner(root)).toBe(`<span class="test">0</span>`)
}
await runTestWithKeepAlive(testOutIn)
__DEV__ = true
})
}) })

View File

@ -10,14 +10,28 @@ import {
markRaw, markRaw,
nextTick, nextTick,
nodeOps, nodeOps,
onMounted,
h as originalH, h as originalH,
ref, ref,
render, render,
serialize,
serializeInner, serializeInner,
withDirectives, withDirectives,
} from '@vue/runtime-test' } from '@vue/runtime-test'
import { Fragment, createCommentVNode, createVNode } from '../../src/vnode' import {
Fragment,
createBlock,
createCommentVNode,
createTextVNode,
createVNode,
openBlock,
} from '../../src/vnode'
import { toDisplayString } from '@vue/shared'
import { compile, createApp as createDOMApp, render as domRender } from 'vue' import { compile, createApp as createDOMApp, render as domRender } from 'vue'
import type { HMRRuntime } from '../../src/hmr'
declare var __VUE_HMR_RUNTIME__: HMRRuntime
const { rerender, createRecord } = __VUE_HMR_RUNTIME__
describe('renderer: teleport', () => { describe('renderer: teleport', () => {
describe('eager mode', () => { describe('eager mode', () => {
@ -243,6 +257,39 @@ describe('renderer: teleport', () => {
expect(serializeInner(target)).toBe(`teleported`) expect(serializeInner(target)).toBe(`teleported`)
}) })
test('should traverse comment node after updating in optimize mode', async () => {
const target = nodeOps.createElement('div')
const root = nodeOps.createElement('div')
const count = ref(0)
let teleport
__DEV__ = false
render(
h(() => {
teleport =
(openBlock(),
createBlock(Teleport, { to: target }, [
createCommentVNode('comment in teleport'),
]))
return h('div', null, [
createTextVNode(toDisplayString(count.value)),
teleport,
])
}),
root,
)
const commentNode = teleport!.children[0].el
expect(serializeInner(root)).toBe(`<div>0</div>`)
expect(serializeInner(target)).toBe(`<!--comment in teleport-->`)
expect(serialize(commentNode)).toBe(`<!--comment in teleport-->`)
count.value = 1
await nextTick()
__DEV__ = true
expect(serializeInner(root)).toBe(`<div>1</div>`)
expect(teleport!.children[0].el).toBe(commentNode)
})
test('should remove children when unmounted', () => { test('should remove children when unmounted', () => {
const target = nodeOps.createElement('div') const target = nodeOps.createElement('div')
const root = nodeOps.createElement('div') const root = nodeOps.createElement('div')
@ -269,6 +316,34 @@ describe('renderer: teleport', () => {
testUnmount({ to: null, disabled: true }) testUnmount({ to: null, disabled: true })
}) })
// #10747
test('should unmount correctly when using top level comment in teleport', async () => {
const target = nodeOps.createElement('div')
const root = nodeOps.createElement('div')
const count = ref(0)
__DEV__ = false
render(
h(() => {
return h('div', null, [
createTextVNode(toDisplayString(count.value)),
(openBlock(),
createBlock(Teleport, { to: target }, [
createCommentVNode('comment in teleport'),
])),
])
}),
root,
)
count.value = 1
await nextTick()
__DEV__ = true
render(null, root)
expect(root.children.length).toBe(0)
})
test('component with multi roots should be removed when unmounted', () => { test('component with multi roots should be removed when unmounted', () => {
const target = nodeOps.createElement('div') const target = nodeOps.createElement('div')
const root = nodeOps.createElement('div') const root = nodeOps.createElement('div')
@ -741,4 +816,56 @@ describe('renderer: teleport', () => {
expect(tRefInMounted).toBe(target.children[1]) expect(tRefInMounted).toBe(target.children[1])
}) })
} }
test('handle update and hmr rerender', async () => {
const target = document.createElement('div')
const root = document.createElement('div')
const Comp = {
setup() {
const cls = ref('foo')
onMounted(() => {
// trigger update
cls.value = 'bar'
})
return { cls, target }
},
template: `
<Teleport :to="target">
<div :class="cls">
<div>
<slot></slot>
</div>
</div>
</Teleport>
`,
}
const appId = 'test-app-id'
const App = {
__hmrId: appId,
components: { Comp },
render() {
return originalH(Comp, null, { default: () => originalH('div', 'foo') })
},
}
createRecord(appId, App)
domRender(originalH(App), root)
expect(target.innerHTML).toBe(
'<div class="foo"><div><div>foo</div></div></div>',
)
await nextTick()
expect(target.innerHTML).toBe(
'<div class="bar"><div><div>foo</div></div></div>',
)
rerender(appId, () =>
originalH(Comp, null, { default: () => originalH('div', 'bar') }),
)
await nextTick()
expect(target.innerHTML).toBe(
'<div class="bar"><div><div>bar</div></div></div>',
)
})
}) })

View File

@ -1,4 +1,10 @@
import { isReactive, reactive, shallowReactive } from '../../src/index' import {
effect,
isReactive,
reactive,
readonly,
shallowReactive,
} from '../../src/index'
import { renderList } from '../../src/helpers/renderList' import { renderList } from '../../src/helpers/renderList'
describe('renderList', () => { describe('renderList', () => {
@ -65,4 +71,31 @@ describe('renderList', () => {
const shallowReactiveArray = shallowReactive([{ foo: 1 }]) const shallowReactiveArray = shallowReactive([{ foo: 1 }])
expect(renderList(shallowReactiveArray, isReactive)).toEqual([false]) expect(renderList(shallowReactiveArray, isReactive)).toEqual([false])
}) })
it('should not allow mutation', () => {
const arr = readonly(reactive([{ foo: 1 }]))
expect(
renderList(arr, item => {
;(item as any).foo = 0
return item.foo
}),
).toEqual([1])
expect(
`Set operation on key "foo" failed: target is readonly.`,
).toHaveBeenWarned()
})
it('should trigger effect for deep mutations in readonly reactive arrays', () => {
const arr = reactive([{ foo: 1 }])
const readonlyArr = readonly(arr)
let dummy
effect(() => {
dummy = renderList(readonlyArr, item => item.foo)
})
expect(dummy).toEqual([1])
arr[0].foo = 2
expect(dummy).toEqual([2])
})
}) })

View File

@ -32,10 +32,13 @@ import {
withCtx, withCtx,
withDirectives, withDirectives,
} from '@vue/runtime-dom' } from '@vue/runtime-dom'
import type { HMRRuntime } from '../src/hmr'
import { type SSRContext, renderToString } from '@vue/server-renderer' import { type SSRContext, renderToString } from '@vue/server-renderer'
import { PatchFlags, normalizeStyle } from '@vue/shared' import { PatchFlags, normalizeStyle } from '@vue/shared'
import { vShowOriginalDisplay } from '../../runtime-dom/src/directives/vShow' import { vShowOriginalDisplay } from '../../runtime-dom/src/directives/vShow'
import { expect } from 'vitest'
declare var __VUE_HMR_RUNTIME__: HMRRuntime
const { createRecord, reload } = __VUE_HMR_RUNTIME__
function mountWithHydration(html: string, render: () => any) { function mountWithHydration(html: string, render: () => any) {
const container = document.createElement('div') const container = document.createElement('div')
@ -1873,6 +1876,60 @@ describe('SSR hydration', () => {
}) })
}) })
test('hmr reload child wrapped in KeepAlive', async () => {
const id = 'child-reload'
const Child = {
__hmrId: id,
template: `<div>foo</div>`,
}
createRecord(id, Child)
const appId = 'test-app-id'
const App = {
__hmrId: appId,
components: { Child },
template: `
<div>
<KeepAlive>
<Child />
</KeepAlive>
</div>
`,
}
const root = document.createElement('div')
root.innerHTML = await renderToString(h(App))
createSSRApp(App).mount(root)
expect(root.innerHTML).toBe('<div><div>foo</div></div>')
reload(id, {
__hmrId: id,
template: `<div>bar</div>`,
})
await nextTick()
expect(root.innerHTML).toBe('<div><div>bar</div></div>')
})
test('hmr root reload', async () => {
const appId = 'test-app-id'
const App = {
__hmrId: appId,
template: `<div>foo</div>`,
}
const root = document.createElement('div')
root.innerHTML = await renderToString(h(App))
createSSRApp(App).mount(root)
expect(root.innerHTML).toBe('<div>foo</div>')
reload(appId, {
__hmrId: appId,
template: `<div>bar</div>`,
})
await nextTick()
expect(root.innerHTML).toBe('<div>bar</div>')
})
describe('mismatch handling', () => { describe('mismatch handling', () => {
test('text node', () => { test('text node', () => {
const { container } = mountWithHydration(`foo`, () => 'bar') const { container } = mountWithHydration(`foo`, () => 'bar')

View File

@ -1,6 +1,6 @@
{ {
"name": "@vue/runtime-core", "name": "@vue/runtime-core",
"version": "3.5.13", "version": "3.5.14",
"description": "@vue/runtime-core", "description": "@vue/runtime-core",
"main": "index.js", "main": "index.js",
"module": "dist/runtime-core.esm-bundler.js", "module": "dist/runtime-core.esm-bundler.js",

View File

@ -837,7 +837,7 @@ export function setupComponent(
vi(instance) vi(instance)
} else { } else {
initProps(instance, props, isStateful, isSSR) initProps(instance, props, isStateful, isSSR)
initSlots(instance, children, optimized) initSlots(instance, children, optimized || isSSR)
} }
const setupResult = isStateful const setupResult = isStateful

View File

@ -17,7 +17,11 @@ import {
} from '@vue/shared' } from '@vue/shared'
import { warn } from './warning' import { warn } from './warning'
import { isKeepAlive } from './components/KeepAlive' import { isKeepAlive } from './components/KeepAlive'
import { type ContextualRenderFn, withCtx } from './componentRenderContext' import {
type ContextualRenderFn,
currentRenderingInstance,
withCtx,
} from './componentRenderContext'
import { isHmrUpdating } from './hmr' import { isHmrUpdating } from './hmr'
import { DeprecationTypes, isCompatEnabled } from './compat/compatConfig' import { DeprecationTypes, isCompatEnabled } from './compat/compatConfig'
import { TriggerOpTypes, trigger } from '@vue/reactivity' import { TriggerOpTypes, trigger } from '@vue/reactivity'
@ -75,6 +79,11 @@ export type RawSlots = {
* @internal * @internal
*/ */
_?: SlotFlags _?: SlotFlags
/**
* cache indexes for slot content
* @internal
*/
__?: number[]
} }
const isInternalKey = (key: string) => key[0] === '_' || key === '$stable' const isInternalKey = (key: string) => key[0] === '_' || key === '$stable'
@ -98,7 +107,8 @@ const normalizeSlot = (
__DEV__ && __DEV__ &&
currentInstance && currentInstance &&
!currentInstance.vapor && !currentInstance.vapor &&
(!ctx || ctx.root === (currentInstance as ComponentInternalInstance).root) !(ctx === null && currentRenderingInstance) &&
!(ctx && ctx.root !== currentInstance.root)
) { ) {
warn( warn(
`Slot "${key}" invoked outside of the render function: ` + `Slot "${key}" invoked outside of the render function: ` +
@ -171,7 +181,7 @@ const assignSlots = (
// when rendering the optimized slots by manually written render function, // when rendering the optimized slots by manually written render function,
// do not copy the `slots._` compiler flag so that `renderSlot` creates // do not copy the `slots._` compiler flag so that `renderSlot` creates
// slot Fragment with BAIL patchFlag to force full updates // slot Fragment with BAIL patchFlag to force full updates
if (optimized || key !== '_') { if (optimized || !isInternalKey(key)) {
slots[key] = children[key] slots[key] = children[key]
} }
} }

View File

@ -536,9 +536,8 @@ function getInnerChild(vnode: VNode): VNode | undefined {
return vnode return vnode
} }
// #7121 ensure get the child component subtree in case // #7121,#12465 get the component subtree if it's been mounted
// it's been replaced during HMR if (vnode.component) {
if (__DEV__ && vnode.component) {
return vnode.component.subTree return vnode.component.subTree
} }

View File

@ -220,7 +220,8 @@ export const TeleportImpl = {
// even in block tree mode we need to make sure all root-level nodes // even in block tree mode we need to make sure all root-level nodes
// in the teleport inherit previous DOM references so that they can // in the teleport inherit previous DOM references so that they can
// be moved in future patches. // be moved in future patches.
traverseStaticChildren(n1, n2, true) // in dev mode, deep traversal is necessary for HMR
traverseStaticChildren(n1, n2, !__DEV__)
} else if (!optimized) { } else if (!optimized) {
patchChildren( patchChildren(
n1, n1,

View File

@ -1,9 +1,11 @@
import type { VNode, VNodeChild } from '../vnode' import type { VNode, VNodeChild } from '../vnode'
import { import {
isReactive, isReactive,
isReadonly,
isShallow, isShallow,
shallowReadArray, shallowReadArray,
toReactive, toReactive,
toReadonly,
} from '@vue/reactivity' } from '@vue/reactivity'
import { isArray, isObject, isString } from '@vue/shared' import { isArray, isObject, isString } from '@vue/shared'
import { warn } from '../warning' import { warn } from '../warning'
@ -69,14 +71,20 @@ export function renderList(
if (sourceIsArray || isString(source)) { if (sourceIsArray || isString(source)) {
const sourceIsReactiveArray = sourceIsArray && isReactive(source) const sourceIsReactiveArray = sourceIsArray && isReactive(source)
let needsWrap = false let needsWrap = false
let isReadonlySource = false
if (sourceIsReactiveArray) { if (sourceIsReactiveArray) {
needsWrap = !isShallow(source) needsWrap = !isShallow(source)
isReadonlySource = isReadonly(source)
source = shallowReadArray(source) source = shallowReadArray(source)
} }
ret = new Array(source.length) ret = new Array(source.length)
for (let i = 0, l = source.length; i < l; i++) { for (let i = 0, l = source.length; i < l; i++) {
ret[i] = renderItem( ret[i] = renderItem(
needsWrap ? toReactive(source[i]) : source[i], needsWrap
? isReadonlySource
? toReadonly(toReactive(source[i]))
: toReactive(source[i])
: source[i],
i, i,
undefined, undefined,
cached && cached[i], cached && cached[i],

View File

@ -1250,12 +1250,12 @@ function baseCreateRenderer(
} }
} }
// avoid hydration for hmr updating
if (__DEV__ && isHmrUpdating) initialVNode.el = null
// setup() is async. This component relies on async logic to be resolved // setup() is async. This component relies on async logic to be resolved
// before proceeding // before proceeding
if (__FEATURE_SUSPENSE__ && instance.asyncDep) { if (__FEATURE_SUSPENSE__ && instance.asyncDep) {
// avoid hydration for hmr updating
if (__DEV__ && isHmrUpdating) initialVNode.el = null
parentSuspense && parentSuspense &&
parentSuspense.registerDep(instance, setupRenderEffect, optimized) parentSuspense.registerDep(instance, setupRenderEffect, optimized)
@ -2174,7 +2174,9 @@ function baseCreateRenderer(
// unset ref // unset ref
if (ref != null) { if (ref != null) {
pauseTracking()
setRef(ref, null, parentSuspense, vnode, true) setRef(ref, null, parentSuspense, vnode, true)
resetTracking()
} }
// #6593 should clean memo cache when unmount // #6593 should clean memo cache when unmount
@ -2336,7 +2338,17 @@ function baseCreateRenderer(
unregisterHMR(instance) unregisterHMR(instance)
} }
const { bum, scope, job, subTree, um, m, a } = instance const {
bum,
scope,
job,
subTree,
um,
m,
a,
parent,
slots: { __: slotCacheKeys },
} = instance
invalidateMount(m) invalidateMount(m)
invalidateMount(a) invalidateMount(a)
@ -2345,6 +2357,13 @@ function baseCreateRenderer(
invokeArrayFns(bum) invokeArrayFns(bum)
} }
// remove slots content from parent renderCache
if (parent && isArray(slotCacheKeys)) {
slotCacheKeys.forEach(v => {
;(parent as ComponentInternalInstance).renderCache[v] = undefined
})
}
if ( if (
__COMPAT__ && __COMPAT__ &&
isCompatEnabled(DeprecationTypes.INSTANCE_EVENT_HOOKS, instance) isCompatEnabled(DeprecationTypes.INSTANCE_EVENT_HOOKS, instance)
@ -2495,9 +2514,12 @@ function baseCreateRenderer(
// HMR root reload // HMR root reload
if (__DEV__) { if (__DEV__) {
app._context.reload = () => { app._context.reload = () => {
const cloned = cloneVNode(vnode)
// avoid hydration for hmr updating
cloned.el = null
// casting to ElementNamespace because TS doesn't guarantee type narrowing // casting to ElementNamespace because TS doesn't guarantee type narrowing
// over function boundaries // over function boundaries
render(cloneVNode(vnode), container, namespace as ElementNamespace) render(cloned, container, namespace as ElementNamespace)
} }
} }
@ -2604,11 +2626,15 @@ export function traverseStaticChildren(
if (c2.type === Text) { if (c2.type === Text) {
c2.el = c1.el c2.el = c1.el
} }
// also inherit for comment nodes, but not placeholders (e.g. v-if which // #2324 also inherit for comment nodes, but not placeholders (e.g. v-if which
// would have received .el during block patch) // would have received .el during block patch)
if (__DEV__ && c2.type === Comment && !c2.el) { if (c2.type === Comment && !c2.el) {
c2.el = c1.el c2.el = c1.el
} }
if (__DEV__) {
c2.el && (c2.el.__vnode = c2)
}
} }
} }
} }

View File

@ -1,6 +1,6 @@
{ {
"name": "@vue/runtime-dom", "name": "@vue/runtime-dom",
"version": "3.5.13", "version": "3.5.14",
"description": "@vue/runtime-dom", "description": "@vue/runtime-dom",
"main": "index.js", "main": "index.js",
"module": "dist/runtime-dom.esm-bundler.js", "module": "dist/runtime-dom.esm-bundler.js",

View File

@ -82,6 +82,7 @@ const TransitionGroupImpl: ComponentOptions = /*@__PURE__*/ decorate({
moveClass, moveClass,
) )
) { ) {
prevChildren = []
return return
} }
@ -98,6 +99,7 @@ const TransitionGroupImpl: ComponentOptions = /*@__PURE__*/ decorate({
const el = c.el as ElementWithTransition const el = c.el as ElementWithTransition
handleMovedChildren(el, moveClass) handleMovedChildren(el, moveClass)
}) })
prevChildren = []
}) })
return () => { return () => {

View File

@ -1,6 +1,13 @@
import { shallowRef } from '@vue/reactivity' import { ref, shallowRef } from '@vue/reactivity'
import { nextTick } from '@vue/runtime-dom' import { nextTick, resolveDynamicComponent } from '@vue/runtime-dom'
import { createDynamicComponent } from '../src' import {
createComponentWithFallback,
createDynamicComponent,
renderEffect,
setHtml,
setInsertionState,
template,
} from '../src'
import { makeRender } from './_utils' import { makeRender } from './_utils'
const define = makeRender() const define = makeRender()
@ -54,4 +61,22 @@ describe('api: createDynamicComponent', () => {
await nextTick() await nextTick()
expect(html()).toBe('<baz></baz><!--dynamic-component-->') expect(html()).toBe('<baz></baz><!--dynamic-component-->')
}) })
test('render fallback with insertionState', async () => {
const { html, mount } = define({
setup() {
const html = ref('hi')
const n1 = template('<div></div>', true)() as any
setInsertionState(n1)
const n0 = createComponentWithFallback(
resolveDynamicComponent('button') as any,
) as any
renderEffect(() => setHtml(n0, html.value))
return n1
},
}).create()
mount()
expect(html()).toBe('<div><button>hi</button></div>')
})
}) })

View File

@ -360,4 +360,43 @@ describe('attribute fallthrough', () => {
expect(el.getAttribute('aria-x')).toBe(parentVal.value) expect(el.getAttribute('aria-x')).toBe(parentVal.value)
expect(el.getAttribute('aria-y')).toBe(parentVal.value) expect(el.getAttribute('aria-y')).toBe(parentVal.value)
}) })
it('empty string should not be passed to classList.add', async () => {
const t0 = template('<div>', true /* root */)
const Child = defineVaporComponent({
setup() {
const n = t0() as Element
renderEffect(() => {
setClass(n, {
foo: false,
})
})
return n
},
})
const Parent = defineVaporComponent({
setup() {
return createComponent(
Child,
{
class: () => ({
bar: false,
}),
},
null,
true,
)
},
})
const { host } = define({
setup() {
return createComponent(Parent)
},
}).render()
const el = host.children[0]
expect(el.classList.length).toBe(0)
})
}) })

View File

@ -1,10 +1,13 @@
import type { NodeRef } from '../../src/apiTemplateRef' import type { NodeRef } from '../../src/apiTemplateRef'
import { import {
child,
createComponent, createComponent,
createDynamicComponent,
createFor, createFor,
createIf, createIf,
createSlot, createSlot,
createTemplateRefSetter, createTemplateRefSetter,
defineVaporComponent,
insert, insert,
renderEffect, renderEffect,
template, template,
@ -19,7 +22,8 @@ import {
useTemplateRef, useTemplateRef,
watchEffect, watchEffect,
} from '@vue/runtime-dom' } from '@vue/runtime-dom'
import { setElementText } from '../../src/dom/prop' import { setElementText, setText } from '../../src/dom/prop'
import type { VaporComponent } from '../../src/component'
const define = makeRender() const define = makeRender()
@ -676,6 +680,39 @@ describe('api: template ref', () => {
expect(r!.value).toBe(n) expect(r!.value).toBe(n)
}) })
test('work with dynamic component', async () => {
const Child = defineVaporComponent({
setup(_, { expose }) {
const msg = ref('one')
expose({ setMsg: (m: string) => (msg.value = m) })
const n0 = template(`<div> </div>`)() as any
const x0 = child(n0) as any
renderEffect(() => setText(x0, msg.value))
return n0
},
})
const views: Record<string, VaporComponent> = { child: Child }
const view = ref('child')
const refKey = ref<any>(null)
const { html } = define({
setup() {
const setRef = createTemplateRefSetter()
const n0 = createDynamicComponent(() => views[view.value]) as any
setRef(n0, refKey)
return n0
},
}).render()
expect(html()).toBe('<div>one</div><!--dynamic-component-->')
expect(refKey.value).toBeDefined()
refKey.value.setMsg('changed')
await nextTick()
expect(html()).toBe('<div>changed</div><!--dynamic-component-->')
})
// TODO: can not reproduce in Vapor // TODO: can not reproduce in Vapor
// // #2078 // // #2078
// test('handling multiple merged refs', async () => { // test('handling multiple merged refs', async () => {

View File

@ -4,7 +4,14 @@ import {
getRestElement, getRestElement,
renderEffect, renderEffect,
} from '../src' } from '../src'
import { nextTick, ref, shallowRef, triggerRef } from '@vue/runtime-dom' import {
nextTick,
reactive,
readonly,
ref,
shallowRef,
triggerRef,
} from '@vue/runtime-dom'
import { makeRender } from './_utils' import { makeRender } from './_utils'
const define = makeRender() const define = makeRender()
@ -674,4 +681,57 @@ describe('createFor', () => {
await nextTick() await nextTick()
expectCalledTimesToBe('Clear rows', 1, 0, 0, 0) expectCalledTimesToBe('Clear rows', 1, 0, 0, 0)
}) })
describe('readonly source', () => {
test('should not allow mutation', () => {
const arr = readonly(reactive([{ foo: 1 }]))
const { host } = define(() => {
const n1 = createFor(
() => arr,
(item, key, index) => {
const span = document.createElement('li')
renderEffect(() => {
item.value.foo = 0
span.innerHTML = `${item.value.foo}`
})
return span
},
idx => idx,
)
return n1
}).render()
expect(host.innerHTML).toBe('<li>1</li><!--for-->')
expect(
`Set operation on key "foo" failed: target is readonly.`,
).toHaveBeenWarned()
})
test('should trigger effect for deep mutations', async () => {
const arr = reactive([{ foo: 1 }])
const readonlyArr = readonly(arr)
const { host } = define(() => {
const n1 = createFor(
() => readonlyArr,
(item, key, index) => {
const span = document.createElement('li')
renderEffect(() => {
span.innerHTML = `${item.value.foo}`
})
return span
},
idx => idx,
)
return n1
}).render()
expect(host.innerHTML).toBe('<li>1</li><!--for-->')
arr[0].foo = 2
await nextTick()
expect(host.innerHTML).toBe('<li>2</li><!--for-->')
})
})
}) })

View File

@ -2,12 +2,14 @@ import {
EffectScope, EffectScope,
type ShallowRef, type ShallowRef,
isReactive, isReactive,
isReadonly,
isShallow, isShallow,
pauseTracking, pauseTracking,
resetTracking, resetTracking,
shallowReadArray, shallowReadArray,
shallowRef, shallowRef,
toReactive, toReactive,
toReadonly,
} from '@vue/reactivity' } from '@vue/reactivity'
import { import {
FOR_ANCHOR_LABEL, FOR_ANCHOR_LABEL,
@ -71,6 +73,7 @@ type Source = any[] | Record<any, any> | number | Set<any> | Map<any, any>
type ResolvedSource = { type ResolvedSource = {
values: any[] values: any[]
needsWrap: boolean needsWrap: boolean
isReadonlySource: boolean
keys?: string[] keys?: string[]
} }
@ -422,11 +425,13 @@ export function createForSlots(
function normalizeSource(source: any): ResolvedSource { function normalizeSource(source: any): ResolvedSource {
let values = source let values = source
let needsWrap = false let needsWrap = false
let isReadonlySource = false
let keys let keys
if (isArray(source)) { if (isArray(source)) {
if (isReactive(source)) { if (isReactive(source)) {
needsWrap = !isShallow(source) needsWrap = !isShallow(source)
values = shallowReadArray(source) values = shallowReadArray(source)
isReadonlySource = isReadonly(source)
} }
} else if (isString(source)) { } else if (isString(source)) {
values = source.split('') values = source.split('')
@ -447,14 +452,23 @@ function normalizeSource(source: any): ResolvedSource {
} }
} }
} }
return { values, needsWrap, keys } return {
values,
needsWrap,
isReadonlySource,
keys,
}
} }
function getItem( function getItem(
{ keys, values, needsWrap }: ResolvedSource, { keys, values, needsWrap, isReadonlySource }: ResolvedSource,
idx: number, idx: number,
): [item: any, key: any, index?: number] { ): [item: any, key: any, index?: number] {
const value = needsWrap ? toReactive(values[idx]) : values[idx] const value = needsWrap
? isReadonlySource
? toReadonly(toReactive(values[idx]))
: toReactive(values[idx])
: values[idx]
if (keys) { if (keys) {
return [value, keys[idx], idx] return [value, keys[idx], idx]
} else { } else {

View File

@ -20,6 +20,7 @@ import {
isString, isString,
remove, remove,
} from '@vue/shared' } from '@vue/shared'
import { DynamicFragment } from './block'
export type NodeRef = string | Ref | ((ref: Element) => void) export type NodeRef = string | Ref | ((ref: Element) => void)
export type RefEl = Element | VaporComponentInstance export type RefEl = Element | VaporComponentInstance
@ -49,7 +50,7 @@ export function setRef(
if (!instance || instance.isUnmounted) return if (!instance || instance.isUnmounted) return
const setupState: any = __DEV__ ? instance.setupState || {} : null const setupState: any = __DEV__ ? instance.setupState || {} : null
const refValue = isVaporComponent(el) ? getExposed(el) || el : el const refValue = getRefValue(el)
const refs = const refs =
instance.refs === EMPTY_OBJ ? (instance.refs = {}) : instance.refs instance.refs === EMPTY_OBJ ? (instance.refs = {}) : instance.refs
@ -143,3 +144,12 @@ export function setRef(
} }
return ref return ref
} }
const getRefValue = (el: RefEl) => {
if (isVaporComponent(el)) {
return getExposed(el) || el
} else if (el instanceof DynamicFragment) {
return getRefValue(el.nodes as RefEl)
}
return el
}

View File

@ -497,6 +497,14 @@ export function createComponentWithFallback(
return createComponent(comp, rawProps, rawSlots, isSingleRoot, appContext) return createComponent(comp, rawProps, rawSlots, isSingleRoot, appContext)
} }
const _insertionParent = insertionParent
const _insertionAnchor = insertionAnchor
if (isHydrating) {
locateHydrationNode()
} else {
resetInsertionState()
}
const el = createElement(comp) const el = createElement(comp)
// mark single root // mark single root
;(el as any).$root = isSingleRoot ;(el as any).$root = isSingleRoot
@ -516,6 +524,10 @@ export function createComponentWithFallback(
} }
} }
if (!isHydrating && _insertionParent) {
insert(el, _insertionParent, _insertionAnchor)
}
return el return el
} }

View File

@ -1,4 +1,4 @@
import { createApp } from 'vue' import { createApp, defineAsyncComponent, h } from 'vue'
import { renderToString } from '../src/renderToString' import { renderToString } from '../src/renderToString'
const components = { const components = {
@ -156,6 +156,38 @@ describe('ssr: slot', () => {
).toBe(`<div><p>1</p><p>2</p></div>`) ).toBe(`<div><p>1</p><p>2</p></div>`)
}) })
// #12438
test('async component slot with v-if true', async () => {
const Layout = defineAsyncComponent(() =>
Promise.resolve({
template: `<div><slot name="header">default header</slot></div>`,
}),
)
const LayoutLoader = {
setup(_: any, context: any) {
return () => h(Layout, {}, context.slots)
},
}
expect(
await renderToString(
createApp({
components: {
LayoutLoader,
},
template: `
<Suspense>
<LayoutLoader>
<template v-if="true" #header>
new header
</template>
</LayoutLoader>
</Suspense>
`,
}),
),
).toBe(`<div><!--[--> new header <!--]--><!--slot--></div>`)
})
// #11326 // #11326
test('dynamic component slot', async () => { test('dynamic component slot', async () => {
expect( expect(

View File

@ -1,6 +1,6 @@
{ {
"name": "@vue/server-renderer", "name": "@vue/server-renderer",
"version": "3.5.13", "version": "3.5.14",
"description": "@vue/server-renderer", "description": "@vue/server-renderer",
"main": "index.js", "main": "index.js",
"module": "dist/server-renderer.esm-bundler.js", "module": "dist/server-renderer.esm-bundler.js",

View File

@ -1,6 +1,6 @@
{ {
"name": "@vue/shared", "name": "@vue/shared",
"version": "3.5.13", "version": "3.5.14",
"description": "internal utils shared across @vue packages", "description": "internal utils shared across @vue packages",
"main": "index.js", "main": "index.js",
"module": "dist/shared.esm-bundler.js", "module": "dist/shared.esm-bundler.js",

View File

@ -1,6 +1,6 @@
{ {
"name": "@vue/compat", "name": "@vue/compat",
"version": "3.5.13", "version": "3.5.14",
"description": "Vue 3 compatibility build for Vue 2", "description": "Vue 3 compatibility build for Vue 2",
"main": "index.js", "main": "index.js",
"module": "dist/vue.runtime.esm-bundler.js", "module": "dist/vue.runtime.esm-bundler.js",

View File

@ -647,4 +647,55 @@ describe('e2e: TransitionGroup', () => {
}, },
E2E_TIMEOUT, E2E_TIMEOUT,
) )
test(
'not leaking after children unmounted',
async () => {
const client = await page().createCDPSession()
await page().evaluate(async () => {
const { createApp, ref, nextTick } = (window as any).Vue
const show = ref(true)
createApp({
components: {
Child: {
setup: () => {
// Big arrays kick GC earlier
const test = ref([...Array(3000)].map((_, i) => ({ i })))
// @ts-expect-error - Custom property and same lib as runtime is used
window.__REF__ = new WeakRef(test)
return { test }
},
template: `
<p>{{ test.length }}</p>
`,
},
},
template: `
<transition-group>
<Child v-if="show" />
</transition-group>
`,
setup() {
return { show }
},
}).mount('#app')
show.value = false
await nextTick()
})
const isCollected = async () =>
// @ts-expect-error - Custom property
await page().evaluate(() => window.__REF__.deref() === undefined)
while ((await isCollected()) === false) {
await client.send('HeapProfiler.collectGarbage')
}
expect(await isCollected()).toBe(true)
},
E2E_TIMEOUT,
)
}) })

View File

@ -1,6 +1,6 @@
{ {
"name": "vue", "name": "vue",
"version": "3.5.13", "version": "3.5.14",
"description": "The progressive JavaScript framework for building modern web UI.", "description": "The progressive JavaScript framework for building modern web UI.",
"main": "index.js", "main": "index.js",
"module": "dist/vue.runtime.esm-bundler.js", "module": "dist/vue.runtime.esm-bundler.js",

File diff suppressed because it is too large Load Diff

View File

@ -3,10 +3,25 @@ packages:
- 'packages-private/*' - 'packages-private/*'
catalog: catalog:
'@babel/parser': ^7.27.0 '@babel/parser': ^7.27.2
'@babel/types': ^7.27.0 '@babel/types': ^7.27.1
'estree-walker': ^2.0.2 'estree-walker': ^2.0.2
'vite': ^6.1.0 'vite': ^6.1.0
'@vitejs/plugin-vue': https://pkg.pr.new/@vitejs/plugin-vue@c156992 '@vitejs/plugin-vue': ^5.2.4
'magic-string': ^0.30.17 'magic-string': ^0.30.17
'source-map-js': ^1.2.1 'source-map-js': ^1.2.1
onlyBuiltDependencies:
- '@swc/core'
- 'esbuild'
- 'puppeteer'
- 'simple-git-hooks'
- 'unrs-resolver'
peerDependencyRules:
allowedVersions:
'typescript-eslint>eslint': '^9.0.0'
'@typescript-eslint/eslint-plugin>eslint': '^9.0.0'
'@typescript-eslint/parser>eslint': '^9.0.0'
'@typescript-eslint/type-utils>eslint': '^9.0.0'
'@typescript-eslint/utils>eslint': '^9.0.0'