Merge branch 'main' into fix/prevent-unnecessary-patch

.github/workflows/ci.yml

@@ -16,6 +16,7 @@ jobs:
     uses: ./.github/workflows/test.yml
 
   continuous-release:
+    if: github.repository == 'vuejs/core'
     runs-on: ubuntu-latest
     steps:
       - name: Checkout

.github/workflows/size-data.yml

@@ -18,6 +18,7 @@ env:
 
 jobs:
   upload:
+    if: github.repository == 'vuejs/core'
     runs-on: ubuntu-latest
 
     steps:

.github/workflows/size-report.yml

@@ -18,6 +18,7 @@ jobs:
   size-report:
     runs-on: ubuntu-latest
     if: >
+      github.repository == 'vuejs/core' &&
       github.event.workflow_run.event == 'pull_request' &&
       github.event.workflow_run.conclusion == 'success'
     steps:

package.json

@@ -7,7 +7,7 @@
     "dev": "node scripts/dev.js",
     "build": "node scripts/build.js",
     "build-dts": "tsc -p tsconfig.build-browser.json && tsc -p tsconfig.build-node.json && rollup -c rollup.dts.config.js",
-    "clean": "rimraf packages/*/dist temp .eslintcache",
+    "clean": "rimraf --glob packages/*/dist temp .eslintcache",
     "size": "run-s \"size-*\" && tsx scripts/usage-size.ts",
     "size-global": "node scripts/build.js vue runtime-dom -f global -p --size",
     "size-esm-runtime": "node scripts/build.js vue -f esm-bundler-runtime",
@@ -66,9 +66,9 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "5.0.4",
-    "@swc/core": "^1.7.19",
+    "@swc/core": "^1.7.23",
     "@types/hash-sum": "^1.0.2",
-    "@types/node": "^20.16.2",
+    "@types/node": "^20.16.3",
     "@types/semver": "^7.5.8",
     "@types/serve-handler": "^6.1.4",
     "@vitest/coverage-v8": "^2.0.5",
@@ -82,19 +82,19 @@
     "eslint-plugin-vitest": "^0.5.4",
     "estree-walker": "catalog:",
     "jsdom": "^25.0.0",
-    "lint-staged": "^15.2.9",
+    "lint-staged": "^15.2.10",
     "lodash": "^4.17.21",
     "magic-string": "^0.30.11",
     "markdown-table": "^3.0.3",
     "marked": "13.0.3",
     "npm-run-all2": "^6.2.2",
-    "picocolors": "^1.0.1",
+    "picocolors": "^1.1.0",
     "prettier": "^3.3.3",
     "pretty-bytes": "^6.1.1",
     "pug": "^3.0.3",
     "puppeteer": "~23.0.2",
     "rimraf": "^6.0.1",
-    "rollup": "^4.21.1",
+    "rollup": "^4.21.2",
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-esbuild": "^6.1.1",
     "rollup-plugin-polyfill-node": "^0.13.0",
@@ -106,7 +106,7 @@
     "tslib": "^2.7.0",
     "tsx": "^4.19.0",
     "typescript": "~5.5.4",
-    "typescript-eslint": "^8.3.0",
+    "typescript-eslint": "^8.4.0",
     "vite": "catalog:",
     "vitest": "^2.0.5"
   },

packages-private/dts-test/setupHelpers.test-d.ts

@@ -427,6 +427,51 @@ describe('defineModel', () => {
   defineModel<string>({ default: 123 })
   // @ts-expect-error unknown props option
   defineModel({ foo: 123 })
+
+  // unrelated getter and setter types
+  {
+    const modelVal = defineModel({
+      get(_: string[]): string {
+        return ''
+      },
+      set(_: number) {
+        return 1
+      },
+    })
+    expectType<string | undefined>(modelVal.value)
+    modelVal.value = 1
+    modelVal.value = undefined
+    // @ts-expect-error
+    modelVal.value = 'foo'
+
+    const [modelVal2] = modelVal
+    expectType<string | undefined>(modelVal2.value)
+    modelVal2.value = 1
+    modelVal2.value = undefined
+    // @ts-expect-error
+    modelVal.value = 'foo'
+
+    const count = defineModel('count', {
+      get(_: string[]): string {
+        return ''
+      },
+      set(_: number) {
+        return ''
+      },
+    })
+    expectType<string | undefined>(count.value)
+    count.value = 1
+    count.value = undefined
+    // @ts-expect-error
+    count.value = 'foo'
+
+    const [count2] = count
+    expectType<string | undefined>(count2.value)
+    count2.value = 1
+    count2.value = undefined
+    // @ts-expect-error
+    count2.value = 'foo'
+  }
 })
 
 describe('useModel', () => {

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

@@ -11,7 +11,7 @@
     "vue": "^3.4.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.1.2",
+    "@vitejs/plugin-vue": "^5.1.3",
     "vite": "^5.4.2"
   }
 }

packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap

@@ -880,11 +880,13 @@ export default {
 
         const count = ref(0)
         const style = { color: 'red' }
+        const height = ref(0)
         
 return (_ctx, _push, _parent, _attrs) => {
   const _cssVars = { style: {
   "--xxxxxxxx-count": (count.value),
-  "--xxxxxxxx-style\\\\.color": (style.color)
+  "--xxxxxxxx-style\\\\.color": (style.color),
+  "--xxxxxxxx-height\\\\ \\\\+\\\\ \\\\\\"px\\\\\\"": (height.value + "px")
 }}
   _push(\`<!--[--><div\${
     _ssrRenderAttrs(_cssVars)

packages/compiler-sfc/__tests__/compileScript.spec.ts

@@ -606,6 +606,7 @@ describe('SFC compile <script setup>', () => {
         import { ref } from 'vue'
         const count = ref(0)
         const style = { color: 'red' }
+        const height = ref(0)
         </script>
         <template>
           <div>{{ count }}</div>
@@ -614,6 +615,7 @@ describe('SFC compile <script setup>', () => {
         <style>
         div { color: v-bind(count) }
         span { color: v-bind(style.color) }
+        span { color: v-bind(height + "px") }
         </style>
         `,
         {
@@ -629,6 +631,9 @@ describe('SFC compile <script setup>', () => {
       expect(content).not.toMatch(`useCssVars`)
       expect(content).toMatch(`"--${mockId}-count": (count.value)`)
       expect(content).toMatch(`"--${mockId}-style\\\\.color": (style.color)`)
+      expect(content).toMatch(
+        `"--${mockId}-height\\\\ \\\\+\\\\ \\\\\\"px\\\\\\"": (height.value + "px")`,
+      )
       assertCode(content)
     })
 

packages/compiler-sfc/__tests__/compileScript/importUsageCheck.spec.ts

@@ -250,3 +250,18 @@ test('check when has explicit parse options', () => {
   )
   expect(content).toMatch('return { get x() { return x } }')
 })
+
+// #11745
+test('shorthand binding w/ kebab-case', () => {
+  const { content } = compile(
+    `
+    <script setup lang="ts">
+      import { fooBar } from "./foo.ts"
+    </script>
+    <template>
+      <div :foo-bar></div>
+    </template>
+    `,
+  )
+  expect(content).toMatch('return { get fooBar() { return fooBar }')
+})

packages/compiler-sfc/package.json

@@ -49,7 +49,7 @@
     "@vue/shared": "workspace:*",
     "estree-walker": "catalog:",
     "magic-string": "catalog:",
-    "postcss": "^8.4.41",
+    "postcss": "^8.4.44",
     "source-map-js": "catalog:"
   },
   "devDependencies": {

packages/compiler-sfc/src/script/importUsageCheck.ts

@@ -62,7 +62,7 @@ function resolveTemplateUsedIdentifiers(sfc: SFCDescriptor): Set<string> {
               extractIdentifiers(ids, prop.exp)
             } else if (prop.name === 'bind' && !prop.exp) {
               // v-bind shorthand name as identifier
-              ids.add((prop.arg as SimpleExpressionNode).content)
+              ids.add(camelize((prop.arg as SimpleExpressionNode).content))
             }
           }
           if (

packages/compiler-sfc/src/script/utils.ts

@@ -121,15 +121,3 @@ export const propNameEscapeSymbolsRE: RegExp =
 export function getEscapedPropName(key: string): string {
   return propNameEscapeSymbolsRE.test(key) ? JSON.stringify(key) : key
 }
-
-export const cssVarNameEscapeSymbolsRE: RegExp =
-  /[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g
-
-export function getEscapedCssVarName(
-  key: string,
-  doubleEscape: boolean,
-): string {
-  return key.replace(cssVarNameEscapeSymbolsRE, s =>
-    doubleEscape ? `\\\\${s}` : `\\${s}`,
-  )
-}

packages/compiler-sfc/src/style/cssVars.ts

@@ -8,9 +8,9 @@ import {
   processExpression,
 } from '@vue/compiler-dom'
 import type { SFCDescriptor } from '../parse'
-import { getEscapedCssVarName } from '../script/utils'
 import type { PluginCreator } from 'postcss'
 import hash from 'hash-sum'
+import { getEscapedCssVarName } from '@vue/shared'
 
 export const CSS_VARS_HELPER = `useCssVars`
 

packages/reactivity/__tests__/reactiveArray.spec.ts

@@ -724,6 +724,27 @@ describe('reactivity/reactive/Array', () => {
       expect(state.things.forEach('foo', 'bar', 'baz')).toBeUndefined()
       expect(state.things.map('foo', 'bar', 'baz')).toEqual(['1', '2', '3'])
       expect(state.things.some('foo', 'bar', 'baz')).toBe(true)
+
+      {
+        class Collection extends Array {
+          find(matcher: any) {
+            return super.find(matcher)
+          }
+        }
+
+        const state = reactive({
+          // @ts-expect-error
+          things: new Collection({ foo: '' }),
+        })
+
+        const bar = computed(() => {
+          return state.things.find((obj: any) => obj.foo === 'bar')
+        })
+        bar.value
+        state.things[0].foo = 'bar'
+
+        expect(bar.value).toEqual({ foo: 'bar' })
+      }
     })
   })
 })

packages/reactivity/__tests__/ref.spec.ts

@@ -46,26 +46,22 @@ describe('reactivity/ref', () => {
   it('ref wrapped in reactive should not track internal _value access', () => {
     const a = ref(1)
     const b = reactive(a)
-    let calls = 0
     let dummy
-
-    effect(() => {
-      calls++
+    const fn = vi.fn(() => {
       dummy = b.value // this will observe both b.value and a.value access
     })
-    expect(calls).toBe(1)
+    effect(fn)
+    expect(fn).toHaveBeenCalledTimes(1)
     expect(dummy).toBe(1)
 
     // mutating a.value should only trigger effect once
-    calls = 0
     a.value = 3
-    expect(calls).toBe(1)
+    expect(fn).toHaveBeenCalledTimes(2)
     expect(dummy).toBe(3)
 
     // mutating b.value should trigger the effect twice. (once for a.value change and once for b.value change)
-    calls = 0
     b.value = 5
-    expect(calls).toBe(2)
+    expect(fn).toHaveBeenCalledTimes(4)
     expect(dummy).toBe(5)
   })
 

packages/reactivity/src/arrayInstrumentations.ts

@@ -242,9 +242,13 @@ function apply(
   const needsWrap = arr !== self && !isShallow(self)
   // @ts-expect-error our code is limited to es2016 but user code is not
   const methodFn = arr[method]
-  // @ts-expect-error
-  if (methodFn !== arrayProto[method]) {
-    const result = methodFn.apply(arr, args)
+
+  // #11759
+  // If the method being called is from a user-extended Array, the arguments will be unknown
+  // (unknown order and unknown parameter types). In this case, we skip the shallowReadArray
+  // handling and directly call apply with self.
+  if (methodFn !== arrayProto[method as any]) {
+    const result = methodFn.apply(self, args)
     return needsWrap ? toReactive(result) : result
   }
 

packages/reactivity/src/effect.ts

@@ -507,7 +507,7 @@ export function resetTracking(): void {
  * The cleanup function is called right before the next effect run, or when the
  * effect is stopped.
  *
- * Throws a warning iff there is no currenct active effect. The warning can be
+ * Throws a warning if there is no current active effect. The warning can be
  * suppressed by passing `true` to the second argument.
  *
  * @param fn - the cleanup function to be registered

packages/reactivity/src/watch.ts

@@ -95,6 +95,10 @@ export function getCurrentWatcher(): ReactiveEffect<any> | undefined {
  * associated effect re-runs.
  *
  * @param cleanupFn - The callback function to attach to the effect's cleanup.
+ * @param failSilently - if `true`, will not throw warning when called without
+ * an active effect.
+ * @param owner - The effect that this cleanup function should be attached to.
+ * By default, the current active effect.
  */
 export function onWatcherCleanup(
   cleanupFn: () => void,

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

@@ -152,10 +152,10 @@ describe('SSR hydration', () => {
   // #7285
   test('element with multiple continuous text vnodes', async () => {
     // should no mismatch warning
-    const { container } = mountWithHydration('<div>fooo</div>', () =>
-      h('div', ['fo', createTextVNode('o'), 'o']),
+    const { container } = mountWithHydration('<div>foo0o</div>', () =>
+      h('div', ['fo', createTextVNode('o'), 0, 'o']),
     )
-    expect(container.textContent).toBe('fooo')
+    expect(container.textContent).toBe('foo0o')
   })
 
   test('element with elements children', async () => {
@@ -2021,6 +2021,26 @@ describe('SSR hydration', () => {
       app.mount(container)
       expect(`Hydration style mismatch`).not.toHaveBeenWarned()
     })
+
+    test('escape css var name', () => {
+      const container = document.createElement('div')
+      container.innerHTML = `<div style="padding: 4px;--foo\\.bar:red;"></div>`
+      const app = createSSRApp({
+        setup() {
+          useCssVars(() => ({
+            'foo.bar': 'red',
+          }))
+          return () => h(Child)
+        },
+      })
+      const Child = {
+        setup() {
+          return () => h('div', { style: 'padding: 4px' })
+        },
+      }
+      app.mount(container)
+      expect(`Hydration style mismatch`).not.toHaveBeenWarned()
+    })
   })
 
   describe('data-allow-mismatch', () => {