chore: Merge branch 'main' into minor

Author: yyx990803

.github/workflows/autofix.yml

@@ -16,11 +16,12 @@ jobs:
       - name: Install pnpm
         uses: pnpm/[email protected]
 
-      - name: Set node version to 18
+      - name: Install Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 18
-          cache: pnpm
+          node-version-file: '.node-version'
+          registry-url: 'https://registry.npmjs.org'
+          cache: 'pnpm'
 
       - run: pnpm install
 

.github/workflows/canary-minor.yml

@@ -19,10 +19,10 @@ jobs:
       - name: Install pnpm
         uses: pnpm/[email protected]
 
-      - name: Set node version to 18
+      - name: Install Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version-file: '.node-version'
           registry-url: 'https://registry.npmjs.org'
           cache: 'pnpm'
 

CHANGELOG.md

@@ -1,3 +1,24 @@
+## [3.4.30](https://github.com/vuejs/core/compare/v3.4.29...v3.4.30) (2024-06-22)
+
+
+### Bug Fixes
+
+* **compiler-core:** should not remove slot node with `v-else` ([#11150](https://github.com/vuejs/core/issues/11150)) ([e102670](https://github.com/vuejs/core/commit/e102670bde00417c3a5b0262c855b297c0e4169e))
+* **hydration:** fix css vars hydration mismatch false positive on attr-fallthrough ([#11190](https://github.com/vuejs/core/issues/11190)) ([7ad67ce](https://github.com/vuejs/core/commit/7ad67ced26e5f53a47cb42f4834496e4958cb53b)), closes [#11188](https://github.com/vuejs/core/issues/11188)
+* **hydration:** skip prop mismatch check for directives that mutate DOM in created ([3169c91](https://github.com/vuejs/core/commit/3169c914939d02a013b2938aff30dac8525923f8)), closes [#11189](https://github.com/vuejs/core/issues/11189)
+* **reactivity:** fix side effect computed dirty level ([#11183](https://github.com/vuejs/core/issues/11183)) ([3bd79e3](https://github.com/vuejs/core/commit/3bd79e3e5ed960fc42cbf77bc61a97d2c03557c0)), closes [#11181](https://github.com/vuejs/core/issues/11181) [#11169](https://github.com/vuejs/core/issues/11169)
+* **runtime-core:** ensure unmount dynamic components in optimized mode ([#11171](https://github.com/vuejs/core/issues/11171)) ([220fe24](https://github.com/vuejs/core/commit/220fe247484209e62c7f4991902c5335e29c5007)), closes [#11168](https://github.com/vuejs/core/issues/11168)
+* **runtime-core:** update devtool __vnode on patch, avoid memory leak during dev ([a959781](https://github.com/vuejs/core/commit/a959781dd6f609dcb6f16dd7fa47d3b16895e5ca)), closes [#11192](https://github.com/vuejs/core/issues/11192)
+* **runtime-dom:** ensure only symbols are explicitly stringified during attribute patching ([#11182](https://github.com/vuejs/core/issues/11182)) ([a2e35d6](https://github.com/vuejs/core/commit/a2e35d682db15a592f4270bb0cde70a0e7bdc4a6)), closes [#11177](https://github.com/vuejs/core/issues/11177)
+* **runtime-dom:** prevent setting state as attribute for custom elements ([#11165](https://github.com/vuejs/core/issues/11165)) ([8ae4c29](https://github.com/vuejs/core/commit/8ae4c293adcec28f18114cb6016230a86787e6a9)), closes [#11163](https://github.com/vuejs/core/issues/11163)
+
+
+### Performance Improvements
+
+* **reactivity:** cache tracking value ([#11145](https://github.com/vuejs/core/issues/11145)) ([7936dae](https://github.com/vuejs/core/commit/7936daebceab2ae9461c3b8f256e51020fb7d3ed))
+
+
+
 ## [3.4.29](https://github.com/vuejs/core/compare/v3.4.28...v3.4.29) (2024-06-14)
 
 

package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "version": "3.5.0-alpha.2",
-  "packageManager": "pnpm@9.2.0",
+  "packageManager": "pnpm@9.3.0",
   "type": "module",
   "scripts": {
     "dev": "node scripts/dev.js",
@@ -67,35 +67,35 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "5.0.4",
-    "@rollup/plugin-terser": "^0.4.4",
+    "@swc/core": "^1.6.1",
     "@types/hash-sum": "^1.0.2",
     "@types/minimist": "^1.2.5",
     "@types/node": "^20.14.2",
     "@types/semver": "^7.5.8",
-    "@vitest/coverage-istanbul": "^1.5.2",
+    "@vitest/coverage-istanbul": "^1.6.0",
     "@vue/consolidate": "1.0.0",
     "conventional-changelog-cli": "^4.1.0",
     "enquirer": "^2.4.1",
     "esbuild": "^0.21.5",
     "esbuild-plugin-polyfill-node": "^0.3.0",
-    "eslint": "^9.4.0",
+    "eslint": "^9.5.0",
     "eslint-plugin-import-x": "^0.5.1",
     "eslint-plugin-vitest": "^0.5.4",
     "estree-walker": "^2.0.2",
     "execa": "^9.2.0",
-    "jsdom": "^24.0.0",
-    "lint-staged": "^15.2.5",
+    "jsdom": "^24.1.0",
+    "lint-staged": "^15.2.7",
     "lodash": "^4.17.21",
     "magic-string": "^0.30.10",
     "markdown-table": "^3.0.3",
     "marked": "^12.0.2",
     "minimist": "^1.2.8",
     "npm-run-all2": "^6.2.0",
     "picocolors": "^1.0.1",
-    "prettier": "^3.3.1",
+    "prettier": "^3.3.2",
     "pretty-bytes": "^6.1.1",
     "pug": "^3.0.3",
-    "puppeteer": "~22.7.1",
+    "puppeteer": "~22.11.0",
     "rimraf": "^5.0.7",
     "rollup": "^4.18.0",
     "rollup-plugin-dts": "^6.1.1",
@@ -107,11 +107,11 @@
     "terser": "^5.31.1",
     "todomvc-app-css": "^2.4.3",
     "tslib": "^2.6.3",
-    "tsx": "^4.15.1",
+    "tsx": "^4.15.5",
     "typescript": "~5.4.5",
-    "typescript-eslint": "^7.12.0",
-    "vite": "^5.2.13",
-    "vitest": "^1.5.2"
+    "typescript-eslint": "^7.13.0",
+    "vite": "^5.3.1",
+    "vitest": "^1.6.0"
   },
   "pnpm": {
     "peerDependencyRules": {

packages/compiler-core/__tests__/transforms/vSlot.spec.ts

@@ -696,6 +696,7 @@ describe('compiler: transform component slots', () => {
     expect((root as any).children[0].codegenNode.patchFlag).toMatch(
       PatchFlags.DYNAMIC_SLOTS + '',
     )
+    expect((root as any).children[0].children.length).toBe(3)
     expect(generate(root).code).toMatchSnapshot()
   })
 

packages/compiler-core/src/compat/transformFilter.ts

@@ -25,9 +25,7 @@ export const transformFilter: NodeTransform = (node, context) => {
     // filter rewrite is applied before expression transform so only
     // simple expressions are possible at this stage
     rewriteFilter(node.content, context)
-  }
-
-  if (node.type === NodeTypes.ELEMENT) {
+  } else if (node.type === NodeTypes.ELEMENT) {
     node.props.forEach((prop: AttributeNode | DirectiveNode) => {
       if (
         prop.type === NodeTypes.DIRECTIVE &&

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

@@ -226,10 +226,7 @@ export function buildSlots(
           break
         }
       }
-      if (prev && isTemplateNode(prev) && findDir(prev, 'if')) {
-        // remove node
-        children.splice(i, 1)
-        i--
+      if (prev && isTemplateNode(prev) && findDir(prev, /^(else-)?if$/)) {
         __TEST__ && assert(dynamicSlots.length > 0)
         // attach this slot to previous conditional
         let conditional = dynamicSlots[

packages/compiler-sfc/package.json

@@ -62,6 +62,6 @@
     "postcss-modules": "^6.0.0",
     "postcss-selector-parser": "^6.1.0",
     "pug": "^3.0.3",
-    "sass": "^1.77.4"
+    "sass": "^1.77.5"
   }
 }

packages/reactivity/__tests__/computed.spec.ts

@@ -853,6 +853,57 @@ describe('reactivity/computed', () => {
     expect(calls).toMatchObject(['b eval', 'mounted', 'b eval'])
   })
 
+  it('should chained computeds keep reactivity when computed effect happens', async () => {
+    const v = ref('Hello')
+    const c = computed(() => {
+      v.value += ' World'
+      return v.value
+    })
+    const d = computed(() => c.value)
+    const e = computed(() => d.value)
+    const Comp = {
+      setup: () => {
+        return () => d.value + ' | ' + e.value
+      },
+    }
+    const root = nodeOps.createElement('div')
+
+    render(h(Comp), root)
+    await nextTick()
+    expect(serializeInner(root)).toBe('Hello World | Hello World')
+
+    v.value += ' World'
+    await nextTick()
+    expect(serializeInner(root)).toBe(
+      'Hello World World World | Hello World World World',
+    )
+  })
+
+  it('should keep dirty level when side effect computed value changed', () => {
+    const v = ref(0)
+    const c = computed(() => {
+      v.value += 1
+      return v.value
+    })
+    const d = computed(() => {
+      return { d: c.value }
+    })
+
+    const Comp = {
+      setup: () => {
+        return () => {
+          return [d.value.d, d.value.d]
+        }
+      },
+    }
+
+    const root = nodeOps.createElement('div')
+    render(h(Comp), root)
+
+    expect(d.value.d).toBe(1)
+    expect(serializeInner(root)).toBe('11')
+  })
+
   it('debug: onTrigger (ref)', () => {
     let events: DebuggerEvent[] = []
     const onTrigger = vi.fn((e: DebuggerEvent) => {

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

@@ -13,7 +13,6 @@ import {
 } from '../src/index'
 import { createApp, nodeOps, render, serialize } from '@vue/runtime-test'
 
-// reference: https://vue-composition-api-rfc.netlify.com/api.html#provide-inject
 describe('api: provide/inject', () => {
   it('string keys', () => {
     const Provider = {

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

@@ -24,8 +24,6 @@ import {
   TriggerOpTypes,
 } from '@vue/reactivity'
 
-// reference: https://vue-composition-api-rfc.netlify.com/api.html#lifecycle-hooks
-
 describe('api: lifecycle hooks', () => {
   it('onBeforeMount', () => {
     const root = nodeOps.createElement('div')

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

@@ -12,8 +12,6 @@ import {
   watchEffect,
 } from '@vue/runtime-test'
 
-// reference: https://vue-composition-api-rfc.netlify.com/api.html#setup
-
 describe('api: setup context', () => {
   it('should expose return values to template render context', () => {
     const Comp = defineComponent({

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

@@ -36,8 +36,6 @@ import {
   triggerRef,
 } from '@vue/reactivity'
 
-// reference: https://vue-composition-api-rfc.netlify.com/api.html#watch
-
 describe('api: watch', () => {
   it('effect', async () => {
     const state = reactive({ count: 0 })

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

@@ -3,6 +3,7 @@
  */
 
 import {
+  type ObjectDirective,
   Suspense,
   Teleport,
   Transition,
@@ -1674,5 +1675,45 @@ describe('SSR hydration', () => {
       app.mount(container)
       expect(`Hydration style mismatch`).not.toHaveBeenWarned()
     })
+
+    // #11188
+    test('css vars support fallthrough', () => {
+      const container = document.createElement('div')
+      container.innerHTML = `<div style="padding: 4px;--foo:red;"></div>`
+      const app = createSSRApp({
+        setup() {
+          useCssVars(() => ({
+            foo: 'red',
+          }))
+          return () => h(Child)
+        },
+      })
+      const Child = {
+        setup() {
+          return () => h('div', { style: 'padding: 4px' })
+        },
+      }
+      app.mount(container)
+      expect(`Hydration style mismatch`).not.toHaveBeenWarned()
+    })
+
+    // #11189
+    test('should not warn for directives that mutate DOM in created', () => {
+      const container = document.createElement('div')
+      container.innerHTML = `<div class="test red"></div>`
+      const vColor: ObjectDirective = {
+        created(el, binding) {
+          el.classList.add(binding.value)
+        },
+      }
+      const app = createSSRApp({
+        setup() {
+          return () =>
+            withDirectives(h('div', { class: 'test' }), [[vColor, 'red']])
+        },
+      })
+      app.mount(container)
+      expect(`Hydration style mismatch`).not.toHaveBeenWarned()
+    })
   })
 })

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

@@ -487,6 +487,32 @@ describe('renderer: optimized mode', () => {
     expect(spy).toHaveBeenCalledTimes(1)
   })
 
+  test('should call onUnmounted hook for dynamic components receiving an existing vnode w/ component children', async () => {
+    const spy = vi.fn()
+    const show = ref(1)
+    const Child = {
+      setup() {
+        onUnmounted(spy)
+        return () => 'child'
+      },
+    }
+    const foo = h('div', null, h(Child))
+    const app = createApp({
+      render() {
+        return show.value
+          ? (openBlock(),
+            createBlock('div', null, [(openBlock(), createBlock(foo))]))
+          : createCommentVNode('v-if', true)
+      },
+    })
+
+    app.mount(root)
+    show.value = 0
+    await nextTick()
+
+    expect(spy).toHaveBeenCalledTimes(1)
+  })
+
   // #2444
   // `KEYED_FRAGMENT` and `UNKEYED_FRAGMENT` always need to diff its children
   test('non-stable Fragment always need to diff its children', () => {

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

@@ -10,8 +10,6 @@ import {
   shallowRef,
 } from '@vue/runtime-test'
 
-// reference: https://vue-composition-api-rfc.netlify.com/api.html#template-refs
-
 describe('api: template refs', () => {
   it('string ref mount', () => {
     const root = nodeOps.createElement('div')

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

@@ -123,7 +123,6 @@ export const SuspenseImpl = {
     }
   },
   hydrate: hydrateSuspense,
-  create: createSuspenseBoundary,
   normalize: normalizeSuspenseChildren,
 }
 

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

@@ -250,7 +250,6 @@ export const TeleportImpl = {
     vnode: VNode,
     parentComponent: ComponentInternalInstance | null,
     parentSuspense: SuspenseBoundary | null,
-    optimized: boolean,
     { um: unmount, o: { remove: hostRemove } }: RendererInternals,
     doRemove: boolean,
   ) {