Merge branch 'main' into feat/onEffectCleanup-and-baseWatch

Author: LittleSound

package.json

@@ -70,11 +70,11 @@
     "@rollup/plugin-terser": "^0.4.4",
     "@types/hash-sum": "^1.0.2",
     "@types/minimist": "^1.2.5",
-    "@types/node": "^20.10.6",
+    "@types/node": "^20.10.7",
     "@types/semver": "^7.5.6",
     "@typescript-eslint/eslint-plugin": "^6.17.0",
     "@typescript-eslint/parser": "^6.17.0",
-    "@vitest/coverage-istanbul": "^1.1.1",
+    "@vitest/coverage-istanbul": "^1.1.3",
     "@vue/consolidate": "0.17.3",
     "conventional-changelog-cli": "^4.1.0",
     "enquirer": "^2.4.1",
@@ -86,7 +86,7 @@
     "eslint-plugin-jest": "^27.6.1",
     "estree-walker": "^2.0.2",
     "execa": "^8.0.1",
-    "jsdom": "^23.0.1",
+    "jsdom": "^23.2.0",
     "lint-staged": "^15.2.0",
     "lodash": "^4.17.21",
     "magic-string": "^0.30.5",
@@ -98,7 +98,7 @@
     "prettier": "^3.1.1",
     "pretty-bytes": "^6.1.1",
     "pug": "^3.0.2",
-    "puppeteer": "~21.6.1",
+    "puppeteer": "~21.7.0",
     "rimraf": "^5.0.5",
     "rollup": "^4.1.4",
     "rollup-plugin-dts": "^6.1.0",
@@ -113,6 +113,6 @@
     "tsx": "^4.7.0",
     "typescript": "^5.2.2",
     "vite": "^5.0.5",
-    "vitest": "^1.1.1"
+    "vitest": "^1.1.3"
   }
 }

packages/reactivity/src/reactiveEffect.ts

@@ -13,7 +13,7 @@ import {
 // The main WeakMap that stores {target -> key -> dep} connections.
 // Conceptually, it's easier to think of a dependency as a Dep class
 // which maintains a Set of subscribers, but we simply store them as
-// raw Sets to reduce memory overhead.
+// raw Maps to reduce memory overhead.
 type KeyToDepMap = Map<any, Dep>
 const targetMap = new WeakMap<object, KeyToDepMap>()
 

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

@@ -1431,11 +1431,35 @@ describe('SSR hydration', () => {
       mountWithHydration(`<div style="color:red;"></div>`, () =>
         h('div', { style: `color:red;` }),
       )
+      mountWithHydration(
+        `<div style="color:red; font-size: 12px;"></div>`,
+        () => h('div', { style: `font-size: 12px; color:red;` }),
+      )
+      mountWithHydration(`<div style="color:red;display:none;"></div>`, () =>
+        withDirectives(createVNode('div', { style: 'color: red' }, ''), [
+          [vShow, false],
+        ]),
+      )
       expect(`Hydration style mismatch`).not.toHaveBeenWarned()
       mountWithHydration(`<div style="color:red;"></div>`, () =>
         h('div', { style: { color: 'green' } }),
       )
-      expect(`Hydration style mismatch`).toHaveBeenWarned()
+      expect(`Hydration style mismatch`).toHaveBeenWarnedTimes(1)
+    })
+
+    test('style mismatch w/ v-show', () => {
+      mountWithHydration(`<div style="color:red;display:none"></div>`, () =>
+        withDirectives(createVNode('div', { style: 'color: red' }, ''), [
+          [vShow, false],
+        ]),
+      )
+      expect(`Hydration style mismatch`).not.toHaveBeenWarned()
+      mountWithHydration(`<div style="color:red;"></div>`, () =>
+        withDirectives(createVNode('div', { style: 'color: red' }, ''), [
+          [vShow, false],
+        ]),
+      )
+      expect(`Hydration style mismatch`).toHaveBeenWarnedTimes(1)
     })
 
     test('attr mismatch', () => {
@@ -1451,6 +1475,12 @@ describe('SSR hydration', () => {
       mountWithHydration(`<select multiple></div>`, () =>
         h('select', { multiple: 'multiple' }),
       )
+      mountWithHydration(`<textarea>foo</textarea>`, () =>
+        h('textarea', { value: 'foo' }),
+      )
+      mountWithHydration(`<textarea></textarea>`, () =>
+        h('textarea', { value: '' }),
+      )
       expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
 
       mountWithHydration(`<div></div>`, () => h('div', { id: 'foo' }))

packages/runtime-core/src/components/Suspense.ts

@@ -400,7 +400,6 @@ export interface SuspenseBoundary {
   namespace: ElementNamespace
   container: RendererElement
   hiddenContainer: RendererElement
-  anchor: RendererNode | null
   activeBranch: VNode | null
   pendingBranch: VNode | null
   deps: number
@@ -473,14 +472,14 @@ function createSuspenseBoundary(
     assertNumber(timeout, `Suspense timeout`)
   }
 
+  const initialAnchor = anchor
   const suspense: SuspenseBoundary = {
     vnode,
     parent: parentSuspense,
     parentComponent,
     namespace,
     container,
     hiddenContainer,
-    anchor,
     deps: 0,
     pendingId: suspenseId++,
     timeout: typeof timeout === 'number' ? timeout : -1,
@@ -529,20 +528,28 @@ function createSuspenseBoundary(
               move(
                 pendingBranch!,
                 container,
-                next(activeBranch!),
+                anchor === initialAnchor ? next(activeBranch!) : anchor,
                 MoveType.ENTER,
               )
               queuePostFlushCb(effects)
             }
           }
         }
-        // this is initial anchor on mount
-        let { anchor } = suspense
         // unmount current active tree
         if (activeBranch) {
           // if the fallback tree was mounted, it may have been moved
           // as part of a parent suspense. get the latest anchor for insertion
-          anchor = next(activeBranch)
+          // #8105 if `delayEnter` is true, it means that the mounting of
+          // `activeBranch` will be delayed. if the branch switches before
+          // transition completes, both `activeBranch` and `pendingBranch` may
+          // coexist in the `hiddenContainer`. This could result in
+          // `next(activeBranch!)` obtaining an incorrect anchor
+          // (got `pendingBranch.el`).
+          // Therefore, after the mounting of activeBranch is completed,
+          // it is necessary to get the latest anchor.
+          if (parentNode(activeBranch.el!) !== suspense.hiddenContainer) {
+            anchor = next(activeBranch)
+          }
           unmount(activeBranch, parentComponent, suspense, true)
         }
         if (!delayEnter) {

packages/runtime-core/src/hydration.ts

@@ -448,7 +448,7 @@ export function createHydrationFunctions(
         ) {
           for (const key in props) {
             // check hydration mismatch
-            if (__DEV__ && propHasMismatch(el, key, props[key])) {
+            if (__DEV__ && propHasMismatch(el, key, props[key], vnode)) {
               hasMismatch = true
             }
             if (
@@ -712,7 +712,12 @@ export function createHydrationFunctions(
 /**
  * Dev only
  */
-function propHasMismatch(el: Element, key: string, clientValue: any): boolean {
+function propHasMismatch(
+  el: Element,
+  key: string,
+  clientValue: any,
+  vnode: VNode,
+): boolean {
   let mismatchType: string | undefined
   let mismatchKey: string | undefined
   let actual: any
@@ -726,24 +731,41 @@ function propHasMismatch(el: Element, key: string, clientValue: any): boolean {
       mismatchType = mismatchKey = `class`
     }
   } else if (key === 'style') {
-    actual = el.getAttribute('style')
-    expected = isString(clientValue)
-      ? clientValue
-      : stringifyStyle(normalizeStyle(clientValue))
-    if (actual !== expected) {
+    // style might be in different order, but that doesn't affect cascade
+    actual = toStyleMap(el.getAttribute('style') || '')
+    expected = toStyleMap(
+      isString(clientValue)
+        ? clientValue
+        : stringifyStyle(normalizeStyle(clientValue)),
+    )
+    // If `v-show=false`, `display: 'none'` should be added to expected
+    if (vnode.dirs) {
+      for (const { dir, value } of vnode.dirs) {
+        // @ts-expect-error only vShow has this internal name
+        if (dir.name === 'show' && !value) {
+          expected.set('display', 'none')
+        }
+      }
+    }
+    if (!isMapEqual(actual, expected)) {
       mismatchType = mismatchKey = 'style'
     }
   } else if (
     (el instanceof SVGElement && isKnownSvgAttr(key)) ||
     (el instanceof HTMLElement && (isBooleanAttr(key) || isKnownHtmlAttr(key)))
   ) {
-    actual = el.hasAttribute(key) && el.getAttribute(key)
+    // #10000 some attrs such as textarea.value can't be get by `hasAttribute`
+    actual = el.hasAttribute(key)
+      ? el.getAttribute(key)
+      : key in el
+        ? el[key as keyof typeof el]
+        : ''
     expected = isBooleanAttr(key)
       ? includeBooleanAttr(clientValue)
         ? ''
         : false
       : clientValue == null
-        ? false
+        ? ''
         : String(clientValue)
     if (actual !== expected) {
       mismatchType = `attribute`
@@ -783,3 +805,28 @@ function isSetEqual(a: Set<string>, b: Set<string>): boolean {
   }
   return true
 }
+
+function toStyleMap(str: string): Map<string, string> {
+  const styleMap: Map<string, string> = new Map()
+  for (const item of str.split(';')) {
+    let [key, value] = item.split(':')
+    key = key?.trim()
+    value = value?.trim()
+    if (key && value) {
+      styleMap.set(key, value)
+    }
+  }
+  return styleMap
+}
+
+function isMapEqual(a: Map<string, string>, b: Map<string, string>): boolean {
+  if (a.size !== b.size) {
+    return false
+  }
+  for (const [key, value] of a) {
+    if (value !== b.get(key)) {
+      return false
+    }
+  }
+  return true
+}

packages/runtime-core/src/scheduler.ts

@@ -243,7 +243,6 @@ function flushJobs(seen?: CountMap) {
         if (__DEV__ && check(job)) {
           continue
         }
-        // console.log(`running:`, job.id)
         callWithErrorHandling(job, null, ErrorCodes.SCHEDULER)
       }
     }

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

@@ -30,7 +30,7 @@ describe('runtime-dom: v-show directive', () => {
     })
     render(h(component), root)
 
-    const $div = root.querySelector('div')
+    const $div = root.children[0]
 
     expect($div.style.display).toEqual('')
   })
@@ -46,7 +46,7 @@ describe('runtime-dom: v-show directive', () => {
     })
     render(h(component), root)
 
-    const $div = root.querySelector('div')
+    const $div = root.children[0]
 
     expect($div.style.display).toEqual('none')
   })
@@ -62,7 +62,7 @@ describe('runtime-dom: v-show directive', () => {
     })
     render(h(component), root)
 
-    const $div = root.querySelector('div')
+    const $div = root.children[0]
     const data = root._vnode.component.data
 
     expect($div.style.display).toEqual('')
@@ -113,7 +113,7 @@ describe('runtime-dom: v-show directive', () => {
     })
     render(h(component), root)
 
-    const $div = root.querySelector('div')
+    const $div = root.children[0]
     const data = root._vnode.component.data
 
     expect($div.style.display).toEqual('block')
@@ -138,7 +138,7 @@ describe('runtime-dom: v-show directive', () => {
     })
     render(h(component), root)
 
-    const $div = root.querySelector('div')
+    const $div = root.children[0]
 
     expect($div.style.display).toEqual('none')
 
@@ -173,7 +173,7 @@ describe('runtime-dom: v-show directive', () => {
     })
     render(h(component), root)
 
-    const $div = root.querySelector('div')
+    const $div = root.children[0]
 
     expect($div.style.display).toEqual('none')
 

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

@@ -7,7 +7,7 @@ interface VShowElement extends HTMLElement {
   [vShowOldKey]: string
 }
 
-export const vShow: ObjectDirective<VShowElement> = {
+export const vShow: ObjectDirective<VShowElement> & { name?: 'show' } = {
   beforeMount(el, { value }, { transition }) {
     el[vShowOldKey] = el.style.display === 'none' ? '' : el.style.display
     if (transition && value) {
@@ -42,6 +42,10 @@ export const vShow: ObjectDirective<VShowElement> = {
   },
 }
 
+if (__DEV__) {
+  vShow.name = 'show'
+}
+
 function setDisplay(el: VShowElement, value: unknown): void {
   el.style.display = value ? el[vShowOldKey] : 'none'
 }