Merge branch 'vuejs:main' into main

Author: leemotive

.github/workflows/size-report.yml

@@ -13,6 +13,7 @@ permissions:
 
 env:
   PUPPETEER_SKIP_DOWNLOAD: 'true'
+  COMMENT_MARKER: <!-- VUE_CORE_SIZE -->
 
 jobs:
   size-report:
@@ -52,20 +53,15 @@ jobs:
           path: temp/size-prev
           if_no_artifact_found: warn
 
-      - name: Compare size
-        run: pnpm tsx scripts/size-report.ts > size-report.md
-
-      - name: Read Size Report
-        id: size-report
-        uses: juliangruber/read-file-action@v1
-        with:
-          path: ./size-report.md
+      - name: Prepare report
+        run: |
+          pnpm tsx scripts/size-report.ts > size-report.md
+          echo '${{ env.COMMENT_MARKER }}' >> size-report.md
 
       - name: Create Comment
-        uses: actions-cool/maintain-one-comment@v3
+        uses: thollander/actions-[email protected]
         with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          body: |
-            ${{ steps.size-report.outputs.content }}
-            <!-- VUE_CORE_SIZE -->
-          body-include: '<!-- VUE_CORE_SIZE -->'
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          filePath: size-report.md
+          comment_tag: ${{ env.COMMENT_MARKER }}
+          pr_number: ${{ github.event.workflow_run.pull_requests[0].number }}

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,6 +1,6 @@
 {
   "private": true,
-  "version": "3.4.29",
+  "version": "3.4.30",
   "packageManager": "[email protected]",
   "type": "module",
   "scripts": {

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/package.json

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

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-dom/package.json

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

packages/compiler-sfc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-sfc",
-  "version": "3.4.29",
+  "version": "3.4.30",
   "description": "@vue/compiler-sfc",
   "main": "dist/compiler-sfc.cjs.js",
   "module": "dist/compiler-sfc.esm-browser.js",

packages/compiler-ssr/package.json

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

packages/reactivity/__tests__/computed.spec.ts

@@ -708,6 +708,63 @@ describe('reactivity/computed', () => {
     expect(COMPUTED_SIDE_EFFECT_WARN).toHaveBeenWarned()
   })
 
+  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',
+    )
+    expect(COMPUTED_SIDE_EFFECT_WARN).toHaveBeenWarned()
+  })
+
+  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')
+    expect(c.effect._dirtyLevel).toBe(
+      DirtyLevels.MaybeDirty_ComputedSideEffect_Origin,
+    )
+    expect(d.effect._dirtyLevel).toBe(DirtyLevels.MaybeDirty_ComputedSideEffect)
+    expect(COMPUTED_SIDE_EFFECT_WARN).toHaveBeenWarned()
+  })
+
   it('debug: onTrigger (ref)', () => {
     let events: DebuggerEvent[] = []
     const onTrigger = vi.fn((e: DebuggerEvent) => {

packages/reactivity/package.json

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

packages/reactivity/src/computed.ts

@@ -71,11 +71,15 @@ export class ComputedRefImpl<T> {
   get value() {
     // the computed ref may get wrapped by other proxies e.g. readonly() #3376
     const self = toRaw(this)
+    const lastDirtyLevel = self.effect._dirtyLevel
     if (
       (!self._cacheable || self.effect.dirty) &&
       hasChanged(self._value, (self._value = self.effect.run()!))
     ) {
-      triggerRefValue(self, DirtyLevels.Dirty)
+      // keep dirty level when side effect computed's value changed
+      if (lastDirtyLevel !== DirtyLevels.MaybeDirty_ComputedSideEffect) {
+        triggerRefValue(self, DirtyLevels.Dirty)
+      }
     }
     trackRefValue(self)
     if (

packages/reactivity/src/effect.ts

@@ -93,8 +93,10 @@ export class ReactiveEffect<T = any> {
           if (
             dep.computed.effect._dirtyLevel ===
             DirtyLevels.MaybeDirty_ComputedSideEffect_Origin
-          )
+          ) {
+            resetTracking()
             return true
+          }
           triggerComputed(dep.computed)
           if (this._dirtyLevel >= DirtyLevels.Dirty) {
             break
@@ -306,14 +308,19 @@ export function triggerEffects(
 ) {
   pauseScheduling()
   for (const effect of dep.keys()) {
+    // dep.get(effect) is very expensive, we need to calculate it lazily and reuse the result
+    let tracking: boolean | undefined
+
     if (!dep.computed && effect.computed) {
-      if (dep.get(effect) === effect._trackId && effect._runnings > 0) {
+      if (
+        effect._runnings > 0 &&
+        (tracking ??= dep.get(effect) === effect._trackId)
+      ) {
         effect._dirtyLevel = DirtyLevels.MaybeDirty_ComputedSideEffect_Origin
         continue
       }
     }
-    // dep.get(effect) is very expensive, we need to calculate it lazily and reuse the result
-    let tracking: boolean | undefined
+
     if (
       effect._dirtyLevel < dirtyLevel &&
       (tracking ??= dep.get(effect) === effect._trackId)

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

@@ -35,8 +35,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/package.json

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