Merge branch 'main' into workaround-for-10214

package.json

@@ -1,7 +1,7 @@
 {
  "private": true,
  "version": "3.4.15",
- "packageManager": "pnpm@8.14.1",
+ "packageManager": "pnpm@8.15.1",
  "type": "module",
  "scripts": {
  "dev": "node scripts/dev.js",
@@ -59,26 +59,26 @@
  "node": ">=18.12.0"
  },
  "devDependencies": {
- "@babel/parser": "^7.23.6",
- "@babel/types": "^7.23.6",
+ "@babel/parser": "^7.23.9",
+ "@babel/types": "^7.23.9",
  "@codspeed/vitest-plugin": "^2.3.1",
- "@rollup/plugin-alias": "^5.0.1",
+ "@rollup/plugin-alias": "^5.1.0",
  "@rollup/plugin-commonjs": "^25.0.7",
- "@rollup/plugin-json": "^6.0.1",
+ "@rollup/plugin-json": "^6.1.0",
  "@rollup/plugin-node-resolve": "^15.2.3",
- "@rollup/plugin-replace": "^5.0.4",
+ "@rollup/plugin-replace": "5.0.4",
  "@rollup/plugin-terser": "^0.4.4",
  "@types/hash-sum": "^1.0.2",
  "@types/minimist": "^1.2.5",
- "@types/node": "^20.11.1",
+ "@types/node": "^20.11.16",
  "@types/semver": "^7.5.6",
  "@typescript-eslint/eslint-plugin": "^6.18.1",
  "@typescript-eslint/parser": "^6.18.1",
- "@vitest/coverage-istanbul": "^1.2.1",
+ "@vitest/coverage-istanbul": "^1.2.2",
  "@vue/consolidate": "0.17.3",
  "conventional-changelog-cli": "^4.1.0",
  "enquirer": "^2.4.1",
- "esbuild": "^0.19.5",
+ "esbuild": "^0.20.0",
  "esbuild-plugin-polyfill-node": "^0.3.0",
  "eslint": "^8.56.0",
  "eslint-define-config": "^1.24.1",
@@ -89,30 +89,30 @@
  "jsdom": "^23.2.0",
  "lint-staged": "^15.2.0",
  "lodash": "^4.17.21",
- "magic-string": "^0.30.5",
+ "magic-string": "^0.30.6",
  "markdown-table": "^3.0.3",
- "marked": "^11.1.1",
+ "marked": "^11.2.0",
  "minimist": "^1.2.8",
- "npm-run-all": "^4.1.5",
+ "npm-run-all2": "^5.0.2",
  "picocolors": "^1.0.0",
  "prettier": "^3.2.2",
  "pretty-bytes": "^6.1.1",
  "pug": "^3.0.2",
- "puppeteer": "~21.7.0",
+ "puppeteer": "~21.11.0",
  "rimraf": "^5.0.5",
- "rollup": "^4.1.4",
+ "rollup": "4.9.2",
  "rollup-plugin-dts": "^6.1.0",
- "rollup-plugin-esbuild": "^6.1.0",
- "rollup-plugin-polyfill-node": "^0.12.0",
+ "rollup-plugin-esbuild": "^6.1.1",
+ "rollup-plugin-polyfill-node": "^0.13.0",
  "semver": "^7.5.4",
  "serve": "^14.2.1",
  "simple-git-hooks": "^2.9.0",
- "terser": "^5.22.0",
+ "terser": "^5.27.0",
  "todomvc-app-css": "^2.4.3",
  "tslib": "^2.6.2",
  "tsx": "^4.7.0",
  "typescript": "^5.2.2",
- "vite": "^5.0.5",
- "vitest": "^1.2.1"
+ "vite": "^5.0.12",
+ "vitest": "^1.2.2"
  }
 }

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

@@ -389,4 +389,20 @@ describe('compiler: transform <slot> outlets', () => {
  },
  })
  })
+
+ test('dynamically named slot outlet with v-bind shorthand', () => {
+ const ast = parseWithSlots(`<slot :name />`)
+ expect((ast.children[0] as ElementNode).codegenNode).toMatchObject({
+ type: NodeTypes.JS_CALL_EXPRESSION,
+ callee: RENDER_SLOT,
+ arguments: [
+ `$slots`,
+ {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: `name`,
+ isStatic: false,
+ },
+ ],
+ })
+ })
 })

packages/compiler-core/package.json

@@ -46,13 +46,13 @@
  },
  "homepage": "https://github.com/vuejs/core/tree/main/packages/compiler-core#readme",
  "dependencies": {
- "@babel/parser": "^7.23.6",
+ "@babel/parser": "^7.23.9",
  "@vue/shared": "workspace:*",
  "entities": "^4.5.0",
  "estree-walker": "^2.0.2",
  "source-map-js": "^1.0.2"
  },
  "devDependencies": {
- "@babel/types": "^7.23.6"
+ "@babel/types": "^7.23.9"
  }
 }

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

@@ -6,12 +6,14 @@ import {
  type SlotOutletNode,
  createCallExpression,
  createFunctionExpression,
+ createSimpleExpression,
 } from '../ast'
 import { isSlotOutlet, isStaticArgOf, isStaticExp } from '../utils'
 import { type PropsExpression, buildProps } from './transformElement'
 import { ErrorCodes, createCompilerError } from '../errors'
 import { RENDER_SLOT } from '../runtimeHelpers'
 import { camelize } from '@vue/shared'
+import { processExpression } from './transformExpression'
 
 export const transformSlotOutlet: NodeTransform = (node, context) => {
  if (isSlotOutlet(node)) {
@@ -76,7 +78,15 @@ export function processSlotOutlet(
  }
  } else {
  if (p.name === 'bind' && isStaticArgOf(p.arg, 'name')) {
- if (p.exp) slotName = p.exp
+ if (p.exp) {
+ slotName = p.exp
+ } else if (p.arg && p.arg.type === NodeTypes.SIMPLE_EXPRESSION) {
+ const name = camelize(p.arg.content)
+ slotName = p.exp = createSimpleExpression(name, false, p.arg.loc)
+ if (!__BROWSER__) {
+ slotName = p.exp = processExpression(p.exp, context)
+ }
+ }
  } else {
  if (p.name === 'bind' && p.arg && isStaticExp(p.arg)) {
  p.arg.content = camelize(p.arg.content)

packages/compiler-sfc/package.json

@@ -42,26 +42,26 @@
  },
  "homepage": "https://github.com/vuejs/core/tree/main/packages/compiler-sfc#readme",
  "dependencies": {
- "@babel/parser": "^7.23.6",
+ "@babel/parser": "^7.23.9",
  "@vue/compiler-core": "workspace:*",
  "@vue/compiler-dom": "workspace:*",
  "@vue/compiler-ssr": "workspace:*",
  "@vue/shared": "workspace:*",
  "estree-walker": "^2.0.2",
- "magic-string": "^0.30.5",
+ "magic-string": "^0.30.6",
  "postcss": "^8.4.33",
  "source-map-js": "^1.0.2"
  },
  "devDependencies": {
- "@babel/types": "^7.23.6",
+ "@babel/types": "^7.23.9",
  "@vue/consolidate": "^0.17.3",
  "hash-sum": "^2.0.0",
- "lru-cache": "^10.1.0",
+ "lru-cache": "^10.2.0",
  "merge-source-map": "^1.1.0",
  "minimatch": "^9.0.3",
  "postcss-modules": "^6.0.0",
  "postcss-selector-parser": "^6.0.15",
  "pug": "^3.0.2",
- "sass": "^1.69.7"
+ "sass": "^1.70.0"
  }
 }

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

@@ -19,6 +19,7 @@ import {
  onMounted,
  ref,
  renderSlot,
+ useCssVars,
  vModelCheckbox,
  vShow,
  withDirectives,
@@ -1538,5 +1539,20 @@ describe('SSR hydration', () => {
  )
  expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
  })
+
+ test('should not warn css v-bind', () => {
+ const container = document.createElement('div')
+ container.innerHTML = `<div style="--foo:red;color:var(--foo);" />`
+ const app = createSSRApp({
+ setup() {
+ useCssVars(() => ({
+ foo: 'red',
+ }))
+ return () => h('div', { style: { color: 'var(--foo)' } })
+ },
+ })
+ app.mount(container)
+ expect(`Hydration style mismatch`).not.toHaveBeenWarned()
+ })
  })
 })

packages/runtime-core/src/component.ts

@@ -519,6 +519,12 @@ export interface ComponentInternalInstance {
  * @internal
  */
  ut?: (vars?: Record<string, string>) => void
+
+ /**
+ * dev only. For style v-bind hydration mismatch checks
+ * @internal
+ */
+ getCssVars?: () => Record<string, string>
 }
 
 const emptyAppContext = createAppContext()

packages/runtime-core/src/customFormatter.ts

@@ -1,6 +1,12 @@
-import { type Ref, isReactive, isReadonly, isRef, toRaw } from '@vue/reactivity'
+import {
+ type Ref,
+ isReactive,
+ isReadonly,
+ isRef,
+ isShallow,
+ toRaw,
+} from '@vue/reactivity'
 import { EMPTY_OBJ, extend, isArray, isFunction, isObject } from '@vue/shared'
-import { isShallow } from '../../reactivity/src/reactive'
 import type { ComponentInternalInstance, ComponentOptions } from './component'
 import type { ComponentPublicInstance } from './componentPublicInstance'
 

packages/runtime-core/src/hydration.ts

@@ -449,7 +449,10 @@ export function createHydrationFunctions(
  ) {
  for (const key in props) {
  // check hydration mismatch
- if (__DEV__ && propHasMismatch(el, key, props[key], vnode)) {
+ if (
+ __DEV__ &&
+ propHasMismatch(el, key, props[key], vnode, parentComponent)
+ ) {
  hasMismatch = true
  }
  if (
@@ -718,6 +721,7 @@ function propHasMismatch(
  key: string,
  clientValue: any,
  vnode: VNode,
+ instance: ComponentInternalInstance | null,
 ): boolean {
  let mismatchType: string | undefined
  let mismatchKey: string | undefined
@@ -748,6 +752,12 @@ function propHasMismatch(
  }
  }
  }
+
+ const cssVars = instance?.getCssVars?.()
+ for (const key in cssVars) {
+ expectedMap.set(`--${key}`, String(cssVars[key]))
+ }
+
  if (!isMapEqual(actualMap, expectedMap)) {
  mismatchType = mismatchKey = 'style'
  }

packages/runtime-dom/src/directives/vModel.ts

@@ -239,11 +239,6 @@ function setSelected(
  return
  }
 
- // fast path for updates triggered by other changes
- if (isArrayValue && looseEqual(value, oldValue)) {
- return
- }
-
  for (let i = 0, l = el.options.length; i < l; i++) {
  const option = el.options[i]
  const optionValue = getValue(option)

packages/runtime-dom/src/helpers/useCssVars.ts

@@ -32,6 +32,10 @@ export function useCssVars(getter: (ctx: any) => Record<string, string>) {
  ).forEach(node => setVarsOnNode(node, vars))
  })
 
+ if (__DEV__) {
+ instance.getCssVars = () => getter(instance.proxy)
+ }
+
  const setVars = () => {
  const vars = getter(instance.proxy)
  setVarsOnVNode(instance.subTree, vars)

packages/sfc-playground/package.json

@@ -9,8 +9,8 @@
  "serve": "vite preview"
  },
  "devDependencies": {
- "@vitejs/plugin-vue": "^4.4.0",
- "vite": "^5.0.5"
+ "@vitejs/plugin-vue": "^5.0.3",
+ "vite": "^5.0.12"
  },
  "dependencies": {
  "@vue/repl": "^3.1.1",

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

@@ -8,10 +8,10 @@
  "serve": "vite preview"
  },
  "dependencies": {
- "vue": "^3.3.0"
+ "vue": "^3.4.0"
  },
  "devDependencies": {
- "@vitejs/plugin-vue": "^4.4.0",
- "vite": "^5.0.0"
+ "@vitejs/plugin-vue": "^5.0.3",
+ "vite": "^5.0.12"
  }
 }

packages/vue-compat/package.json

@@ -52,7 +52,7 @@
  },
  "homepage": "https://github.com/vuejs/core/tree/main/packages/vue-compat#readme",
  "dependencies": {
- "@babel/parser": "^7.23.6",
+ "@babel/parser": "^7.23.9",
  "estree-walker": "^2.0.2",
  "source-map-js": "^1.0.2"
  },