Merge branch 'main' into workaround-for-10214

johnsoncodehk · Feb 6, 2024 · 65eedb1 · 65eedb1
2 parents 0728c45 + 6c7e0bd
commit 65eedb1
Show file tree

Hide file tree

Showing 17 changed files with 637 additions and 894 deletions.
diff --git a/package.json b/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"
   }
 }
diff --git a/packages/compiler-core/__tests__/transforms/transformSlotOutlet.spec.ts b/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,
+        },
+      ],
+    })
+  })
 })
diff --git a/packages/compiler-core/package.json b/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"
   }
 }
diff --git a/packages/compiler-core/src/transforms/transformSlotOutlet.ts b/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)

diff --git a/packages/compiler-sfc/package.json b/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"
   }
 }
diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/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()
+    })
   })
 })
diff --git a/packages/runtime-core/src/component.ts b/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()

diff --git a/packages/runtime-core/src/customFormatter.ts b/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'
 

diff --git a/packages/runtime-core/src/hydration.ts b/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'
     }

diff --git a/packages/runtime-dom/src/directives/vModel.ts b/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)

diff --git a/packages/runtime-dom/src/helpers/useCssVars.ts b/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)

diff --git a/packages/sfc-playground/package.json b/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",

diff --git a/packages/sfc-playground/src/download/template/package.json b/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"
   }
 }
diff --git a/packages/vue-compat/package.json b/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"
   },