Merge branch 'main' into fix/9264

.github/workflows/autofix.yml

@@ -14,7 +14,7 @@ jobs:
       - uses: actions/checkout@v4
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v3.0.0
+        uses: pnpm/action-setup@v4.0.0
 
       - name: Set node version to 18
         uses: actions/setup-node@v4

.github/workflows/canary-minor.yml

@@ -17,7 +17,7 @@ jobs:
           ref: minor
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v3.0.0
+        uses: pnpm/action-setup@v4.0.0
 
       - name: Set node version to 18
         uses: actions/setup-node@v4

.github/workflows/canary.yml

@@ -15,7 +15,7 @@ jobs:
       - uses: actions/checkout@v4
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v3.0.0
+        uses: pnpm/action-setup@v4.0.0
 
       - name: Install Node.js
         uses: actions/setup-node@v4

.github/workflows/ci.yml

@@ -21,7 +21,7 @@ jobs:
       - uses: actions/checkout@v4
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v3.0.0
+        uses: pnpm/action-setup@v4.0.0
 
       - name: Install Node.js
         uses: actions/setup-node@v4
@@ -43,7 +43,7 @@ jobs:
       - uses: actions/checkout@v4
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v3.0.0
+        uses: pnpm/action-setup@v4.0.0
 
       - name: Install Node.js
         uses: actions/setup-node@v4
@@ -72,7 +72,7 @@ jobs:
           key: chromium-${{ hashFiles('pnpm-lock.yaml') }}
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v3.0.0
+        uses: pnpm/action-setup@v4.0.0
 
       - name: Install Node.js
         uses: actions/setup-node@v4
@@ -98,7 +98,7 @@ jobs:
       - uses: actions/checkout@v4
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v3.0.0
+        uses: pnpm/action-setup@v4.0.0
 
       - name: Install Node.js
         uses: actions/setup-node@v4

.github/workflows/size-data.yml

@@ -23,7 +23,7 @@ jobs:
       - uses: actions/checkout@v4
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v3.0.0
+        uses: pnpm/action-setup@v4.0.0
 
       - name: Install Node.js
         uses: actions/setup-node@v4

.github/workflows/size-report.yml

@@ -24,7 +24,7 @@ jobs:
       - uses: actions/checkout@v4
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v3.0.0
+        uses: pnpm/action-setup@v4.0.0
 
       - name: Install Node.js
         uses: actions/setup-node@v4
@@ -36,14 +36,14 @@ jobs:
         run: pnpm install
 
       - name: Download Size Data
-        uses: dawidd6/action-download-artifact@v3
+        uses: dawidd6/action-download-artifact@v4
         with:
           name: size-data
           run_id: ${{ github.event.workflow_run.id }}
           path: temp/size
 
       - name: Download Previous Size Data
-        uses: dawidd6/action-download-artifact@v3
+        uses: dawidd6/action-download-artifact@v4
         with:
           branch: main
           workflow: size-data.yml

package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "version": "3.4.27",
-  "packageManager": "[email protected].2",
+  "packageManager": "[email protected].4",
   "type": "module",
   "scripts": {
     "dev": "node scripts/dev.js",
@@ -70,7 +70,7 @@
     "@rollup/plugin-terser": "^0.4.4",
     "@types/hash-sum": "^1.0.2",
     "@types/minimist": "^1.2.5",
-    "@types/node": "^20.12.12",
+    "@types/node": "^20.14.0",
     "@types/semver": "^7.5.8",
     "@vitest/coverage-istanbul": "^1.5.2",
     "@vue/consolidate": "1.0.0",
@@ -82,7 +82,7 @@
     "eslint-plugin-import-x": "^0.5.1",
     "eslint-plugin-vitest": "^0.5.4",
     "estree-walker": "^2.0.2",
-    "execa": "^8.0.1",
+    "execa": "^9.1.0",
     "jsdom": "^24.0.0",
     "lint-staged": "^15.2.5",
     "lodash": "^4.17.21",
@@ -107,10 +107,10 @@
     "terser": "^5.31.0",
     "todomvc-app-css": "^2.4.3",
     "tslib": "^2.6.2",
-    "tsx": "^4.11.0",
+    "tsx": "^4.11.2",
     "typescript": "~5.4.5",
     "typescript-eslint": "^7.10.0",
-    "vite": "^5.2.11",
+    "vite": "^5.2.12",
     "vitest": "^1.5.2"
   },
   "pnpm": {

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

@@ -18,7 +18,7 @@ import {
 import { ErrorCodes } from '../../src/errors'
 import { type CompilerOptions, generate } from '../../src'
 import { FRAGMENT, RENDER_LIST, RENDER_SLOT } from '../../src/runtimeHelpers'
-import { PatchFlags } from '@vue/shared'
+import { PatchFlagNames, PatchFlags } from '@vue/shared'
 import { createObjectMatcher, genFlagText } from '../testUtils'
 
 export function parseWithForTransform(
@@ -1043,5 +1043,33 @@ describe('compiler: v-for', () => {
       })
       expect(generate(root).code).toMatchSnapshot()
     })
+
+    test('template v-for key w/ :key shorthand on div', () => {
+      const {
+        node: { codegenNode },
+      } = parseWithForTransform('<div v-for="key in keys" :key>test</div>')
+      expect(codegenNode.patchFlag).toBe(
+        `${PatchFlags.KEYED_FRAGMENT} /* ${PatchFlagNames[PatchFlags.KEYED_FRAGMENT]} */`,
+      )
+    })
+
+    test('template v-for key w/ :key shorthand on template injected to the child', () => {
+      const {
+        node: { codegenNode },
+      } = parseWithForTransform(
+        '<template v-for="key in keys" :key><div>test</div></template>',
+      )
+      expect(assertSharedCodegen(codegenNode, true)).toMatchObject({
+        source: { content: `keys` },
+        params: [{ content: `key` }],
+        innerVNodeCall: {
+          type: NodeTypes.VNODE_CALL,
+          tag: `"div"`,
+          props: createObjectMatcher({
+            key: '[key]',
+          }),
+        },
+      })
+    })
   })
 })

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

@@ -1,5 +1,6 @@
-import type { DirectiveTransform } from '../transform'
+import type { DirectiveTransform, TransformContext } from '../transform'
 import {
+  type DirectiveNode,
   type ExpressionNode,
   NodeTypes,
   type SimpleExpressionNode,
@@ -56,11 +57,8 @@ export const transformBind: DirectiveTransform = (dir, _node, context) => {
       }
     }
 
-    const propName = camelize((arg as SimpleExpressionNode).content)
-    exp = dir.exp = createSimpleExpression(propName, false, arg.loc)
-    if (!__BROWSER__) {
-      exp = dir.exp = processExpression(exp, context)
-    }
+    transformBindShorthand(dir, context)
+    exp = dir.exp!
   }
 
   if (arg.type !== NodeTypes.SIMPLE_EXPRESSION) {
@@ -98,6 +96,19 @@ export const transformBind: DirectiveTransform = (dir, _node, context) => {
   }
 }
 
+export const transformBindShorthand = (
+  dir: DirectiveNode,
+  context: TransformContext,
+) => {
+  const arg = dir.arg!
+
+  const propName = camelize((arg as SimpleExpressionNode).content)
+  dir.exp = createSimpleExpression(propName, false, arg.loc)
+  if (!__BROWSER__) {
+    dir.exp = processExpression(dir.exp, context)
+  }
+}
+
 const injectPrefix = (arg: ExpressionNode, prefix: string) => {
   if (arg.type === NodeTypes.SIMPLE_EXPRESSION) {
     if (arg.isStatic) {

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

@@ -47,6 +47,7 @@ import {
 import { processExpression } from './transformExpression'
 import { validateBrowserExpression } from '../validateExpression'
 import { PatchFlagNames, PatchFlags } from '@vue/shared'
+import { transformBindShorthand } from './vBind'
 
 export const transformFor = createStructuralDirectiveTransform(
   'for',
@@ -60,13 +61,20 @@ export const transformFor = createStructuralDirectiveTransform(
       ]) as ForRenderListExpression
       const isTemplate = isTemplateNode(node)
       const memo = findDir(node, 'memo')
-      const keyProp = findProp(node, `key`)
+      const keyProp = findProp(node, `key`, false, true)
+      if (keyProp && keyProp.type === NodeTypes.DIRECTIVE && !keyProp.exp) {
+        // resolve :key shorthand #10882
+        transformBindShorthand(keyProp, context)
+      }
       const keyExp =
         keyProp &&
         (keyProp.type === NodeTypes.ATTRIBUTE
-          ? createSimpleExpression(keyProp.value!.content, true)
-          : keyProp.exp!)
-      const keyProperty = keyProp ? createObjectProperty(`key`, keyExp!) : null
+          ? keyProp.value
+            ? createSimpleExpression(keyProp.value.content, true)
+            : undefined
+          : keyProp.exp)
+      const keyProperty =
+        keyProp && keyExp ? createObjectProperty(`key`, keyExp) : null
 
       if (!__BROWSER__ && isTemplate) {
         // #2085 / #5288 process :key and v-memo expressions need to be

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.2"
+    "sass": "^1.77.4"
   }
 }

packages/reactivity/__tests__/computed.spec.ts

@@ -258,7 +258,7 @@ describe('reactivity/computed', () => {
     ])
   })
 
-  it('debug: onTrigger', () => {
+  it('debug: onTrigger (reactive)', () => {
     let events: DebuggerEvent[] = []
     const onTrigger = vi.fn((e: DebuggerEvent) => {
       events.push(e)
@@ -618,4 +618,29 @@ describe('reactivity/computed', () => {
     expect(serializeInner(root)).toBe('Hello World World World World')
     expect(COMPUTED_SIDE_EFFECT_WARN).toHaveBeenWarned()
   })
+
+  it('debug: onTrigger (ref)', () => {
+    let events: DebuggerEvent[] = []
+    const onTrigger = vi.fn((e: DebuggerEvent) => {
+      events.push(e)
+    })
+    const obj = ref(1)
+    const c = computed(() => obj.value, { onTrigger })
+
+    // computed won't trigger compute until accessed
+    c.value
+
+    obj.value++
+
+    expect(c.value).toBe(2)
+    expect(onTrigger).toHaveBeenCalledTimes(1)
+    expect(events[0]).toEqual({
+      effect: c.effect,
+      target: toRaw(obj),
+      type: TriggerOpTypes.SET,
+      key: 'value',
+      oldValue: 1,
+      newValue: 2,
+    })
+  })
 })

packages/reactivity/__tests__/readonly.spec.ts

@@ -450,7 +450,7 @@ describe('reactivity/readonly', () => {
       bar: markRaw({ b: 2 }),
     })
     expect(isReadonly(obj.foo)).toBe(true)
-    expect(isReactive(obj.bar)).toBe(false)
+    expect(isReadonly(obj.bar)).toBe(false)
   })
 
   test('should make ref readonly', () => {

packages/reactivity/src/ref.ts

@@ -69,6 +69,7 @@ export function triggerRefValue(
   ref: RefBase<any>,
   dirtyLevel: DirtyLevels = DirtyLevels.Dirty,
   newVal?: any,
+  oldVal?: any,
 ) {
   ref = toRaw(ref)
   const dep = ref.dep
@@ -82,6 +83,7 @@ export function triggerRefValue(
             type: TriggerOpTypes.SET,
             key: 'value',
             newValue: newVal,
+            oldValue: oldVal,
           }
         : void 0,
     )
@@ -177,9 +179,10 @@ class RefImpl<T> {
       this.__v_isShallow || isShallow(newVal) || isReadonly(newVal)
     newVal = useDirectValue ? newVal : toRaw(newVal)
     if (hasChanged(newVal, this._rawValue)) {
+      const oldVal = this._rawValue
       this._rawValue = newVal
       this._value = useDirectValue ? newVal : toReactive(newVal)
-      triggerRefValue(this, DirtyLevels.Dirty, newVal)
+      triggerRefValue(this, DirtyLevels.Dirty, newVal, oldVal)
     }
   }
 }

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

@@ -749,4 +749,39 @@ describe('component props', () => {
     expect(`Invalid prop name: "ref"`).toHaveBeenWarned()
     expect(`Invalid prop name: "$foo"`).toHaveBeenWarned()
   })
+
+  // #5517
+  test('events should not be props when component updating', async () => {
+    let props: any
+    function eventHandler() {}
+    const foo = ref(1)
+
+    const Child = defineComponent({
+      setup(_props) {
+        props = _props
+      },
+      emits: ['event'],
+      props: ['foo'],
+      template: `<div>{{ foo }}</div>`,
+    })
+
+    const Comp = defineComponent({
+      setup() {
+        return {
+          foo,
+          eventHandler,
+        }
+      },
+      components: { Child },
+      template: `<Child @event="eventHandler" :foo="foo" />`,
+    })
+
+    const root = document.createElement('div')
+    domRender(h(Comp), root)
+    expect(props).not.toHaveProperty('onEvent')
+
+    foo.value++
+    await nextTick()
+    expect(props).not.toHaveProperty('onEvent')
+  })
 })

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

@@ -63,6 +63,17 @@ describe('vnode', () => {
     })
   })
 
+  test('create from an existing text vnode', () => {
+    const vnode1 = createVNode('div', null, 'text', PatchFlags.TEXT)
+    const vnode2 = createVNode(vnode1)
+    expect(vnode2).toMatchObject({
+      type: 'div',
+      patchFlag: PatchFlags.BAIL,
+      children: 'text',
+      shapeFlag: ShapeFlags.ELEMENT | ShapeFlags.TEXT_CHILDREN,
+    })
+  })
+
   test('vnode keys', () => {
     for (const key of ['', 'a', 0, 1, NaN]) {
       expect(createVNode('div', { key }).key).toBe(key)