Merge pull request #173 from vuejs/main

update

.github/workflows/autofix.yml

@@ -31,4 +31,4 @@ jobs:
       - name: Run prettier
         run: pnpm run format
 
-      - uses: autofix-ci/action@ff86a557419858bb967097bfc916833f5647fa8c
+      - uses: autofix-ci/action@551dded8c6cc8a1054039c8bc0b8b48c51dfc6ef

.github/workflows/size-report.yml

@@ -37,7 +37,7 @@ jobs:
         run: pnpm install
 
       - name: Download Size Data
-        uses: dawidd6/action-download-artifact@v6
+        uses: dawidd6/action-download-artifact@v7
         with:
           name: size-data
           run_id: ${{ github.event.workflow_run.id }}
@@ -56,7 +56,7 @@ jobs:
           path: temp/size/base.txt
 
       - name: Download Previous Size Data
-        uses: dawidd6/action-download-artifact@v6
+        uses: dawidd6/action-download-artifact@v7
         with:
           branch: ${{ steps.pr-base.outputs.content }}
           workflow: size-data.yml

package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "version": "3.5.13",
-  "packageManager": "pnpm@9.13.2",
+  "packageManager": "pnpm@9.15.4",
   "type": "module",
   "scripts": {
     "dev": "node scripts/dev.js",
@@ -65,41 +65,41 @@
     "@babel/parser": "catalog:",
     "@babel/types": "catalog:",
     "@rollup/plugin-alias": "^5.1.1",
-    "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-commonjs": "^28.0.2",
     "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-replace": "5.0.4",
-    "@swc/core": "^1.9.2",
+    "@swc/core": "^1.10.15",
     "@types/hash-sum": "^1.0.2",
-    "@types/node": "^22.9.0",
+    "@types/node": "^22.12.0",
     "@types/semver": "^7.5.8",
     "@types/serve-handler": "^6.1.4",
-    "@vitest/coverage-v8": "^2.1.5",
+    "@vitest/coverage-v8": "^3.0.5",
     "@vue/consolidate": "1.0.0",
     "conventional-changelog-cli": "^5.0.0",
     "enquirer": "^2.4.1",
-    "esbuild": "^0.24.0",
+    "esbuild": "^0.25.0",
     "esbuild-plugin-polyfill-node": "^0.3.0",
-    "eslint": "^9.15.0",
-    "eslint-plugin-import-x": "^4.4.2",
-    "@vitest/eslint-plugin": "^1.1.10",
+    "eslint": "^9.18.0",
+    "eslint-plugin-import-x": "^4.6.1",
+    "@vitest/eslint-plugin": "^1.1.27",
     "estree-walker": "catalog:",
-    "jsdom": "^25.0.1",
-    "lint-staged": "^15.2.10",
+    "jsdom": "^26.0.0",
+    "lint-staged": "^15.4.1",
     "lodash": "^4.17.21",
-    "magic-string": "^0.30.12",
+    "magic-string": "^0.30.17",
     "markdown-table": "^3.0.4",
     "marked": "13.0.3",
-    "npm-run-all2": "^7.0.1",
+    "npm-run-all2": "^7.0.2",
     "picocolors": "^1.1.1",
-    "prettier": "^3.3.3",
+    "prettier": "^3.4.2",
     "pretty-bytes": "^6.1.1",
     "pug": "^3.0.3",
-    "puppeteer": "~23.3.0",
+    "puppeteer": "~24.2.0",
     "rimraf": "^6.0.1",
-    "rollup": "^4.27.2",
+    "rollup": "^4.34.6",
     "rollup-plugin-dts": "^6.1.1",
-    "rollup-plugin-esbuild": "^6.1.1",
+    "rollup-plugin-esbuild": "^6.2.0",
     "rollup-plugin-polyfill-node": "^0.13.0",
     "semver": "^7.6.3",
     "serve": "^14.2.4",
@@ -108,9 +108,9 @@
     "todomvc-app-css": "^2.4.3",
     "tslib": "^2.8.1",
     "typescript": "~5.6.2",
-    "typescript-eslint": "^8.14.0",
+    "typescript-eslint": "^8.20.0",
     "vite": "catalog:",
-    "vitest": "^2.1.5"
+    "vitest": "^3.0.5"
   },
   "pnpm": {
     "peerDependencyRules": {

packages-private/sfc-playground/package.json

@@ -13,7 +13,7 @@
     "vite": "catalog:"
   },
   "dependencies": {
-    "@vue/repl": "^4.4.2",
+    "@vue/repl": "^4.4.3",
     "file-saver": "^2.0.5",
     "jszip": "^3.10.1",
     "vue": "workspace:*"

packages-private/sfc-playground/src/download/template/package.json

@@ -11,7 +11,7 @@
     "vue": "^3.4.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.2.0",
-    "vite": "^5.4.11"
+    "@vitejs/plugin-vue": "^5.2.1",
+    "vite": "^6.1.0"
   }
 }

packages-private/template-explorer/package.json

@@ -11,7 +11,7 @@
     "enableNonBrowserBranches": true
   },
   "dependencies": {
-    "monaco-editor": "^0.52.0",
+    "monaco-editor": "^0.52.2",
     "source-map-js": "^1.2.1"
   }
 }

packages/compiler-core/src/transforms/vBind.ts

@@ -12,7 +12,7 @@ import { camelize } from '@vue/shared'
 import { CAMELIZE } from '../runtimeHelpers'
 import { processExpression } from './transformExpression'
 
-// v-bind without arg is handled directly in ./transformElements.ts due to it affecting
+// v-bind without arg is handled directly in ./transformElement.ts due to its affecting
 // codegen for the entire props object. This transform here is only for v-bind
 // *with* args.
 export const transformBind: DirectiveTransform = (dir, _node, context) => {

packages/compiler-core/src/transforms/vOn.ts

@@ -17,7 +17,7 @@ import { hasScopeRef, isFnExpression, isMemberExpression } from '../utils'
 import { TO_HANDLER_KEY } from '../runtimeHelpers'
 
 export interface VOnDirectiveNode extends DirectiveNode {
-  // v-on without arg is handled directly in ./transformElements.ts due to it affecting
+  // v-on without arg is handled directly in ./transformElement.ts due to its affecting
   // codegen for the entire props object. This transform here is only for v-on
   // *with* args.
   arg: ExpressionNode

packages/compiler-sfc/package.json

@@ -49,7 +49,7 @@
     "@vue/shared": "workspace:*",
     "estree-walker": "catalog:",
     "magic-string": "catalog:",
-    "postcss": "^8.4.49",
+    "postcss": "^8.5.1",
     "source-map-js": "catalog:"
   },
   "devDependencies": {
@@ -58,10 +58,10 @@
     "hash-sum": "^2.0.0",
     "lru-cache": "10.1.0",
     "merge-source-map": "^1.1.0",
-    "minimatch": "~9.0.5",
+    "minimatch": "~10.0.1",
     "postcss-modules": "^6.0.1",
     "postcss-selector-parser": "^7.0.0",
     "pug": "^3.0.3",
-    "sass": "^1.81.0"
+    "sass": "^1.83.4"
   }
 }

packages/compiler-sfc/src/compileScript.ts

@@ -170,8 +170,6 @@ export function compileScript(
   const scriptLang = script && script.lang
   const scriptSetupLang = scriptSetup && scriptSetup.lang
 
-  let refBindings: string[] | undefined
-
   if (!scriptSetup) {
     if (!script) {
       throw new Error(`[@vue/compiler-sfc] SFC contains no <script> tags.`)
@@ -740,12 +738,6 @@ export function compileScript(
   for (const key in setupBindings) {
     ctx.bindingMetadata[key] = setupBindings[key]
   }
-  // known ref bindings
-  if (refBindings) {
-    for (const key of refBindings) {
-      ctx.bindingMetadata[key] = BindingTypes.SETUP_REF
-    }
-  }
 
   // 7. inject `useCssVars` calls
   if (

packages/compiler-sfc/src/rewriteDefault.ts

@@ -39,7 +39,7 @@ export function rewriteDefaultAST(
   ast.forEach(node => {
     if (node.type === 'ExportDefaultDeclaration') {
       if (node.declaration.type === 'ClassDeclaration' && node.declaration.id) {
-        let start: number =
+        const start: number =
           node.declaration.decorators && node.declaration.decorators.length > 0
             ? node.declaration.decorators[
                 node.declaration.decorators.length - 1

packages/reactivity/src/effectScope.ts

@@ -8,6 +8,10 @@ export class EffectScope {
    * @internal
    */
   private _active = true
+  /**
+   * @internal track `on` calls, allow `on` call multiple times
+   */
+  private _on = 0
   /**
    * @internal
    */
@@ -99,20 +103,27 @@ export class EffectScope {
     }
   }
 
+  prevScope: EffectScope | undefined
   /**
    * This should only be called on non-detached scopes
    * @internal
    */
   on(): void {
-    activeEffectScope = this
+    if (++this._on === 1) {
+      this.prevScope = activeEffectScope
+      activeEffectScope = this
+    }
   }
 
   /**
    * This should only be called on non-detached scopes
    * @internal
    */
   off(): void {
-    activeEffectScope = this.parent
+    if (this._on > 0 && --this._on === 0) {
+      activeEffectScope = this.prevScope
+      this.prevScope = undefined
+    }
   }
 
   stop(fromParent?: boolean): void {

packages/runtime-core/__tests__/apiWatch.spec.ts

@@ -31,6 +31,7 @@ import {
   TrackOpTypes,
   TriggerOpTypes,
   effectScope,
+  onScopeDispose,
   shallowReactive,
   shallowRef,
   toRef,
@@ -1982,4 +1983,31 @@ describe('api: watch', () => {
     expect(spy1).toHaveBeenCalled()
     expect(spy2).toHaveBeenCalled()
   })
+
+  // #12631
+  test('this.$watch w/ onScopeDispose', () => {
+    const onCleanup = vi.fn()
+    const toggle = ref(true)
+
+    const Comp = defineComponent({
+      render() {},
+      created(this: any) {
+        this.$watch(
+          () => 1,
+          function () {},
+        )
+        onScopeDispose(onCleanup)
+      },
+    })
+
+    const App = defineComponent({
+      render() {
+        return toggle.value ? h(Comp) : null
+      },
+    })
+
+    const root = nodeOps.createElement('div')
+    createApp(App).mount(root)
+    expect(onCleanup).toBeCalledTimes(0)
+  })
 })

packages/runtime-core/src/components/KeepAlive.ts

@@ -187,6 +187,11 @@ const KeepAliveImpl: ComponentOptions = {
         // Update components tree
         devtoolsComponentAdded(instance)
       }
+
+      // for e2e test
+      if (__DEV__ && __BROWSER__) {
+        ;(instance as any).__keepAliveStorageContainer = storageContainer
+      }
     }
 
     function unmount(vnode: VNode) {

packages/runtime-core/src/renderer.ts

@@ -2049,7 +2049,13 @@ function baseCreateRenderer(
         queuePostRenderEffect(() => transition!.enter(el!), parentSuspense)
       } else {
         const { leave, delayLeave, afterLeave } = transition!
-        const remove = () => hostInsert(el!, container, anchor)
+        const remove = () => {
+          if (vnode.ctx!.isUnmounted) {
+            hostRemove(el!)
+          } else {
+            hostInsert(el!, container, anchor)
+          }
+        }
         const performLeave = () => {
           leave(el!, () => {
             remove()

packages/vue/__tests__/e2e/Transition.spec.ts

@@ -1,3 +1,4 @@
+import type { ElementHandle } from 'puppeteer'
 import { E2E_TIMEOUT, setupPuppeteer } from './e2eUtils'
 import path from 'node:path'
 import { Transition, createApp, h, nextTick, ref } from 'vue'
@@ -1653,6 +1654,74 @@ describe('e2e: Transition', () => {
       },
       E2E_TIMEOUT,
     )
+
+    // #12860
+    test(
+      'unmount children',
+      async () => {
+        const unmountSpy = vi.fn()
+        let storageContainer: ElementHandle<HTMLDivElement>
+        const setStorageContainer = (container: any) =>
+          (storageContainer = container)
+        await page().exposeFunction('unmountSpy', unmountSpy)
+        await page().exposeFunction('setStorageContainer', setStorageContainer)
+        await page().evaluate(() => {
+          const { unmountSpy, setStorageContainer } = window as any
+          const { createApp, ref, h, onUnmounted, getCurrentInstance } = (
+            window as any
+          ).Vue
+          createApp({
+            template: `
+            <div id="container">
+              <transition>
+                <KeepAlive :include="includeRef">
+                  <TrueBranch v-if="toggle"></TrueBranch>
+                </KeepAlive>
+              </transition>
+            </div>
+            <button id="toggleBtn" @click="click">button</button>
+          `,
+            components: {
+              TrueBranch: {
+                name: 'TrueBranch',
+                setup() {
+                  const instance = getCurrentInstance()
+                  onUnmounted(() => {
+                    unmountSpy()
+                    setStorageContainer(instance.__keepAliveStorageContainer)
+                  })
+                  const count = ref(0)
+                  return () => h('div', count.value)
+                },
+              },
+            },
+            setup: () => {
+              const includeRef = ref(['TrueBranch'])
+              const toggle = ref(true)
+              const click = () => {
+                toggle.value = !toggle.value
+                if (toggle.value) {
+                  includeRef.value = ['TrueBranch']
+                } else {
+                  includeRef.value = []
+                }
+              }
+              return { toggle, click, unmountSpy, includeRef }
+            },
+          }).mount('#app')
+        })
+
+        await transitionFinish()
+        expect(await html('#container')).toBe('<div>0</div>')
+
+        await click('#toggleBtn')
+        await transitionFinish()
+        expect(await html('#container')).toBe('<!--v-if-->')
+        expect(unmountSpy).toBeCalledTimes(1)
+        expect(await storageContainer!.evaluate(x => x.innerHTML)).toBe(``)
+      },
+      E2E_TIMEOUT,
+    )
   })
 
   describe('transition with Suspense', () => {