Merge branch 'main' into fix-vModel-checkbox

Author: Alfred-Skyblue

CHANGELOG.md

@@ -1,3 +1,17 @@
+## [3.3.12](https://github.com/vuejs/core/compare/v3.3.11...v3.3.12) (2023-12-16)
+
+
+### Bug Fixes
+
+* **hydration:** handle appear transition before patch props ([#9837](https://github.com/vuejs/core/issues/9837)) ([e70f4c4](https://github.com/vuejs/core/commit/e70f4c47c553b6e16d8fad70743271ca23802fe7)), closes [#9832](https://github.com/vuejs/core/issues/9832)
+* **sfc/cssVars:** fix loss of CSS v-bind variables when setting inline style with string value ([#9824](https://github.com/vuejs/core/issues/9824)) ([0a387df](https://github.com/vuejs/core/commit/0a387dfb1d04afb6eae4296b6da76dfdaca77af4)), closes [#9821](https://github.com/vuejs/core/issues/9821)
+* **ssr:** fix suspense hydration of fallback content ([#7188](https://github.com/vuejs/core/issues/7188)) ([60415b5](https://github.com/vuejs/core/commit/60415b5d67df55f1fd6b176615299c08640fa142))
+* **types:** add `xmlns:xlink` to `SVGAttributes` ([#9300](https://github.com/vuejs/core/issues/9300)) ([0d61b42](https://github.com/vuejs/core/commit/0d61b429ecf63591d31e09702058fa4c7132e1a7)), closes [#9299](https://github.com/vuejs/core/issues/9299)
+* **types:** fix `shallowRef` type error ([#9839](https://github.com/vuejs/core/issues/9839)) ([9a57158](https://github.com/vuejs/core/commit/9a571582b53220270e498d8712ea59312c0bef3a))
+* **types:** support for generic keyof slots ([#8374](https://github.com/vuejs/core/issues/8374)) ([213eba4](https://github.com/vuejs/core/commit/213eba479ce080efc1053fe636f6be4a4c889b44))
+
+
+
 ## [3.3.11](https://github.com/vuejs/core/compare/v3.3.10...v3.3.11) (2023-12-08)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "version": "3.3.11",
+  "version": "3.3.12",
   "packageManager": "[email protected]",
   "type": "module",
   "scripts": {

packages/compiler-core/package.json

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

packages/compiler-dom/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-dom",
-  "version": "3.3.11",
+  "version": "3.3.12",
   "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.3.11",
+  "version": "3.3.12",
   "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.3.11",
+  "version": "3.3.12",
   "description": "@vue/compiler-ssr",
   "main": "dist/compiler-ssr.cjs.js",
   "types": "dist/compiler-ssr.d.ts",

packages/dts-test/ref.test-d.ts

@@ -163,6 +163,17 @@ const state = reactive({
 
 expectType<string>(state.foo.label)
 
+describe('ref with generic', <T extends { name: string }>() => {
+  const r = {} as T
+  const s = ref(r)
+  expectType<string>(s.value.name)
+
+  const rr = {} as MaybeRef<T>
+  // should at least allow casting
+  const ss = ref(rr) as Ref<T>
+  expectType<string>(ss.value.name)
+})
+
 // shallowRef
 type Status = 'initial' | 'ready' | 'invalidating'
 const shallowStatus = shallowRef<Status>('initial')
@@ -201,11 +212,28 @@ if (refStatus.value === 'initial') {
   expectType<IsAny<typeof a>>(false)
 }
 
-describe('shallowRef with generic', <T>() => {
-  const r = ref({}) as MaybeRef<T>
-  expectType<ShallowRef<T> | Ref<T>>(shallowRef(r))
+describe('shallowRef with generic', <T extends { name: string }>() => {
+  const r = {} as T
+  const s = shallowRef(r)
+  expectType<string>(s.value.name)
+  expectType<ShallowRef<T>>(shallowRef(r))
+
+  const rr = {} as MaybeRef<T>
+  // should at least allow casting
+  const ss = shallowRef(rr) as Ref<T> | ShallowRef<T>
+  expectType<string>(ss.value.name)
 })
 
+{
+  // should return ShallowRef<T> | Ref<T>, not ShallowRef<T | Ref<T>>
+  expectType<ShallowRef<{ name: string }> | Ref<{ name: string }>>(
+    shallowRef({} as MaybeRef<{ name: string }>)
+  )
+  expectType<ShallowRef<number> | Ref<string[]> | ShallowRef<string>>(
+    shallowRef('' as Ref<string[]> | string | number)
+  )
+}
+
 // proxyRefs: should return `reactive` directly
 const r1 = reactive({
   k: 'v'

packages/reactivity-transform/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/reactivity-transform",
-  "version": "3.3.11",
+  "version": "3.3.12",
   "description": "@vue/reactivity-transform",
   "main": "dist/reactivity-transform.cjs.js",
   "files": [

packages/reactivity/package.json

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

packages/reactivity/src/ref.ts

@@ -114,9 +114,13 @@ export type ShallowRef<T = any> = Ref<T> & { [ShallowRefMarker]?: true }
  * @param value - The "inner value" for the shallow ref.
  * @see {@link https://vuejs.org/api/reactivity-advanced.html#shallowref}
  */
-export function shallowRef<T>(value: MaybeRef<T>): Ref<T> | ShallowRef<T>
-export function shallowRef<T extends Ref>(value: T): T
-export function shallowRef<T>(value: T): ShallowRef<T>
+export function shallowRef<T>(
+  value: T
+): Ref extends T
+  ? T extends Ref
+    ? IfAny<T, ShallowRef<T>, T>
+    : ShallowRef<T>
+  : ShallowRef<T>
 export function shallowRef<T = any>(): ShallowRef<T | undefined>
 export function shallowRef(value?: unknown) {
   return createRef(value, true)

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

@@ -1114,6 +1114,41 @@ describe('SSR hydration', () => {
     expect(`mismatch`).not.toHaveBeenWarned()
   })
 
+  test('transition appear w/ event listener', async () => {
+    const container = document.createElement('div')
+    container.innerHTML = `<template><button>0</button></template>`
+    createSSRApp({
+      data() {
+        return {
+          count: 0
+        }
+      },
+      template: `
+        <Transition appear>
+          <button @click="count++">{{count}}</button>
+        </Transition>
+      `
+    }).mount(container)
+
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <button
+        class="v-enter-from v-enter-active"
+      >
+        0
+      </button>
+    `)
+
+    triggerEvent('click', container.querySelector('button')!)
+    await nextTick()
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <button
+        class="v-enter-from v-enter-active"
+      >
+        1
+      </button>
+    `)
+  })
+
   describe('mismatch handling', () => {
     test('text node', () => {
       const { container } = mountWithHydration(`foo`, () => 'bar')

packages/runtime-core/package.json

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

packages/runtime-core/src/hydration.ts

@@ -344,6 +344,28 @@ export function createHydrationFunctions(
       if (dirs) {
         invokeDirectiveHook(vnode, null, parentComponent, 'created')
       }
+
+      // handle appear transition
+      let needCallTransitionHooks = false
+      if (isTemplateNode(el)) {
+        needCallTransitionHooks =
+          needTransition(parentSuspense, transition) &&
+          parentComponent &&
+          parentComponent.vnode.props &&
+          parentComponent.vnode.props.appear
+
+        const content = (el as HTMLTemplateElement).content
+          .firstChild as Element
+
+        if (needCallTransitionHooks) {
+          transition!.beforeEnter(content)
+        }
+
+        // replace <template> node with inner children
+        replaceNode(content, el, parentComponent)
+        vnode.el = el = content
+      }
+
       // props
       if (props) {
         if (
@@ -390,27 +412,6 @@ export function createHydrationFunctions(
         invokeVNodeHook(vnodeHooks, parentComponent, vnode)
       }
 
-      // handle appear transition
-      let needCallTransitionHooks = false
-      if (isTemplateNode(el)) {
-        needCallTransitionHooks =
-          needTransition(parentSuspense, transition) &&
-          parentComponent &&
-          parentComponent.vnode.props &&
-          parentComponent.vnode.props.appear
-
-        const content = (el as HTMLTemplateElement).content
-          .firstChild as Element
-
-        if (needCallTransitionHooks) {
-          transition!.beforeEnter(content)
-        }
-
-        // replace <template> node with inner children
-        replaceNode(content, el, parentComponent)
-        vnode.el = el = content
-      }
-
       if (dirs) {
         invokeDirectiveHook(vnode, null, parentComponent, 'beforeMount')
       }

packages/runtime-dom/__tests__/directives/vOn.spec.ts

@@ -135,4 +135,32 @@ describe('runtime-dom: v-on directive', () => {
     handler(event, 'value', true)
     expect(fn).toBeCalledWith(event, 'value', true)
   })
+
+  it('withKeys cache wrapped listener separately for different modifiers', () => {
+    const el1 = document.createElement('button')
+    const el2 = document.createElement('button')
+    const fn = vi.fn()
+    const handler1 = withKeys(fn, ['a'])
+    const handler2 = withKeys(fn, ['b'])
+    expect(handler1 === handler2).toBe(false)
+    patchEvent(el1, 'onKeyup', null, handler1, null)
+    patchEvent(el2, 'onKeyup', null, handler2, null)
+    triggerEvent(el1, 'keyup', e => (e.key = 'a'))
+    triggerEvent(el2, 'keyup', e => (e.key = 'b'))
+    expect(fn).toBeCalledTimes(2)
+  })
+
+  it('withModifiers cache wrapped listener separately for different modifiers', () => {
+    const el1 = document.createElement('button')
+    const el2 = document.createElement('button')
+    const fn = vi.fn()
+    const handler1 = withModifiers(fn, ['ctrl'])
+    const handler2 = withModifiers(fn, ['shift'])
+    expect(handler1 === handler2).toBe(false)
+    patchEvent(el1, 'onClick', null, handler1, null)
+    patchEvent(el2, 'onClick', null, handler2, null)
+    triggerEvent(el1, 'click', e => (e.ctrlKey = true))
+    triggerEvent(el2, 'click', e => (e.shiftKey = true))
+    expect(fn).toBeCalledTimes(2)
+  })
 })

packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts

@@ -293,4 +293,35 @@ describe('useCssVars', () => {
     await nextTick()
     expect(target.children.length).toBe(0)
   })
+
+  test('with string style', async () => {
+    document.body.innerHTML = ''
+    const state = reactive({ color: 'red' })
+    const root = document.createElement('div')
+    const disabled = ref(false)
+
+    const App = {
+      setup() {
+        useCssVars(() => state)
+        return () => [
+          h(
+            'div',
+            { style: disabled.value ? 'pointer-events: none' : undefined },
+            'foo'
+          )
+        ]
+      }
+    }
+    render(h(App), root)
+    await nextTick()
+    for (const c of [].slice.call(root.children as any)) {
+      expect((c as HTMLElement).style.getPropertyValue(`--color`)).toBe('red')
+    }
+    disabled.value = true
+    await nextTick()
+
+    for (const c of [].slice.call(root.children as any)) {
+      expect((c as HTMLElement).style.getPropertyValue(`--color`)).toBe('red')
+    }
+  })
 })

packages/runtime-dom/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/runtime-dom",
-  "version": "3.3.11",
+  "version": "3.3.12",
   "description": "@vue/runtime-dom",
   "main": "index.js",
   "module": "dist/runtime-dom.esm-bundler.js",

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

@@ -35,12 +35,14 @@ const modifierGuards: Record<
 export const withModifiers = <
   T extends (event: Event, ...args: unknown[]) => any
 >(
-  fn: T & { _withMods?: T },
+  fn: T & { _withMods?: { [key: string]: T } },
   modifiers: string[]
 ) => {
+  const cache = fn._withMods || (fn._withMods = {})
+  const cacheKey = modifiers.join('.')
   return (
-    fn._withMods ||
-    (fn._withMods = ((event, ...args) => {
+    cache[cacheKey] ||
+    (cache[cacheKey] = ((event, ...args) => {
       for (let i = 0; i < modifiers.length; i++) {
         const guard = modifierGuards[modifiers[i]]
         if (guard && guard(event, modifiers)) return
@@ -66,7 +68,7 @@ const keyNames: Record<string, string | string[]> = {
  * @private
  */
 export const withKeys = <T extends (event: KeyboardEvent) => any>(
-  fn: T & { _withKeys?: T },
+  fn: T & { _withKeys?: { [k: string]: T } },
   modifiers: string[]
 ) => {
   let globalKeyCodes: LegacyConfig['keyCodes']
@@ -88,9 +90,12 @@ export const withKeys = <T extends (event: KeyboardEvent) => any>(
     }
   }
 
+  const cache: { [k: string]: T } = fn._withKeys || (fn._withKeys = {})
+  const cacheKey = modifiers.join('.')
+
   return (
-    fn._withKeys ||
-    (fn._withKeys = (event => {
+    cache[cacheKey] ||
+    (cache[cacheKey] = (event => {
       if (!('key' in event)) {
         return
       }

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

@@ -10,6 +10,7 @@ import {
 } from '@vue/runtime-core'
 import { ShapeFlags } from '@vue/shared'
 
+export const CSS_VAR_TEXT = Symbol(__DEV__ ? 'CSS_VAR_TEXT' : '')
 /**
  * Runtime helper for SFC's CSS variable injection feature.
  * @private
@@ -79,8 +80,11 @@ function setVarsOnVNode(vnode: VNode, vars: Record<string, string>) {
 function setVarsOnNode(el: Node, vars: Record<string, string>) {
   if (el.nodeType === 1) {
     const style = (el as HTMLElement).style
+    let cssText = ''
     for (const key in vars) {
       style.setProperty(`--${key}`, vars[key])
+      cssText += `--${key}: ${vars[key]};`
     }
+    ;(style as any)[CSS_VAR_TEXT] = cssText
   }
 }