Merge tag 'v3.5.0-alpha.4'

Author: sxzz

CHANGELOG.md

@@ -1,3 +1,19 @@
+# [3.5.0-alpha.4](https://github.com/vuejs/core/compare/v3.4.34...v3.5.0-alpha.4) (2024-07-24)
+
+
+### Bug Fixes
+
+* **suspense/hydration:** fix hydration timing of async component inside suspense ([1b8e197](https://github.com/vuejs/core/commit/1b8e197a5b65d67a9703b8511786fb81df9aa7cc)), closes [#6638](https://github.com/vuejs/core/issues/6638)
+* **useId:** properly mark async boundary for already resolved async component ([cd28172](https://github.com/vuejs/core/commit/cd281725781ada2ab279e919031ae307e146a9d9))
+
+
+
+## [3.4.34](https://github.com/vuejs/core/compare/v3.4.33...v3.4.34) (2024-07-24)
+
+* **defineModel:** correct update with multiple changes in same tick ([#11430](https://github.com/vuejs/core/issues/11430)) ([a18f1ec](https://github.com/vuejs/core/commit/a18f1ecf05842337f1eb39a6871adb8cb4024093)), closes [#11429](https://github.com/vuejs/core/issues/11429)
+
+
+
 # [3.5.0-alpha.3](https://github.com/vuejs/core/compare/v3.4.33...v3.5.0-alpha.3) (2024-07-19)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "version": "3.0.0-vapor",
+  "version": "3.5.0-alpha.4",
   "packageManager": "[email protected]",
   "type": "module",
   "scripts": {

packages/compiler-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-core",
-  "version": "3.5.0-alpha.3",
+  "version": "3.5.0-alpha.4",
   "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.5.0-alpha.3",
+  "version": "3.5.0-alpha.4",
   "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.5.0-alpha.3",
+  "version": "3.5.0-alpha.4",
   "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.5.0-alpha.3",
+  "version": "3.5.0-alpha.4",
   "description": "@vue/compiler-ssr",
   "main": "dist/compiler-ssr.cjs.js",
   "types": "dist/compiler-ssr.d.ts",

packages/reactivity/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/reactivity",
-  "version": "3.5.0-alpha.3",
+  "version": "3.5.0-alpha.4",
   "description": "@vue/reactivity",
   "main": "index.js",
   "module": "dist/reactivity.esm-bundler.js",

packages/runtime-core/__tests__/helpers/useId.spec.ts

@@ -12,10 +12,11 @@ import {
 } from 'vue'
 import { renderToString } from '@vue/server-renderer'
 
-type TestCaseFactory = () => [App, Promise<any>[]]
+type FactoryRes = [App, Promise<any>[]]
+type TestCaseFactory = () => FactoryRes | Promise<FactoryRes>
 
 async function runOnClient(factory: TestCaseFactory) {
-  const [app, deps] = factory()
+  const [app, deps] = await factory()
   const root = document.createElement('div')
   app.mount(root)
   await Promise.all(deps)
@@ -24,7 +25,7 @@ async function runOnClient(factory: TestCaseFactory) {
 }
 
 async function runOnServer(factory: TestCaseFactory) {
-  const [app, _] = factory()
+  const [app, _] = await factory()
   return (await renderToString(app))
     .replace(/<!--[\[\]]-->/g, '') // remove fragment wrappers
     .trim()
@@ -95,8 +96,8 @@ describe('useId', () => {
       'v:0-0 v:0-1 ' + // inside first async subtree
       'v:1-0 v:1-1' // inside second async subtree
     // assert different async resolution order does not affect id stable-ness
-    expect(await getOutput(() => factory(10, 20))).toBe(expected)
-    expect(await getOutput(() => factory(20, 10))).toBe(expected)
+    expect(await getOutput(() => factory(0, 16))).toBe(expected)
+    expect(await getOutput(() => factory(16, 0))).toBe(expected)
   })
 
   test('serverPrefetch', async () => {
@@ -140,8 +141,8 @@ describe('useId', () => {
       'v:0-0 v:0-1 ' + // inside first async subtree
       'v:1-0 v:1-1' // inside second async subtree
     // assert different async resolution order does not affect id stable-ness
-    expect(await getOutput(() => factory(10, 20))).toBe(expected)
-    expect(await getOutput(() => factory(20, 10))).toBe(expected)
+    expect(await getOutput(() => factory(0, 16))).toBe(expected)
+    expect(await getOutput(() => factory(16, 0))).toBe(expected)
   })
 
   test('async setup()', async () => {
@@ -192,8 +193,8 @@ describe('useId', () => {
       'v:1-0 v:1-1' + // inside second async subtree
       '</div>'
     // assert different async resolution order does not affect id stable-ness
-    expect(await getOutput(() => factory(10, 20))).toBe(expected)
-    expect(await getOutput(() => factory(20, 10))).toBe(expected)
+    expect(await getOutput(() => factory(0, 16))).toBe(expected)
+    expect(await getOutput(() => factory(16, 0))).toBe(expected)
   })
 
   test('deep nested', async () => {
@@ -239,4 +240,49 @@ describe('useId', () => {
     expect(await getOutput(() => factory())).toBe(expected)
     expect(await getOutput(() => factory())).toBe(expected)
   })
+
+  test('async component inside async setup, already resolved', async () => {
+    const factory = async (
+      delay1: number,
+      delay2: number,
+    ): Promise<FactoryRes> => {
+      const p1 = promiseWithDelay(null, delay1)
+      const p2 = promiseWithDelay(BasicComponentWithUseId, delay2)
+      const AsyncInner = defineAsyncComponent(() => p2)
+
+      const AsyncSetup = defineComponent({
+        async setup() {
+          await p1
+          return {}
+        },
+        render() {
+          return h(AsyncInner)
+        },
+      })
+
+      const app = createApp({
+        setup() {
+          const id1 = useId()
+          const id2 = useId()
+          return () =>
+            h(Suspense, null, {
+              default: h('div', [id1, ' ', id2, ' ', h(AsyncSetup)]),
+            })
+        },
+      })
+
+      // the async component may have already been resolved
+      await AsyncInner.__asyncLoader()
+      return [app, [p1, p2]]
+    }
+
+    const expected =
+      '<div>' +
+      'v:0 v:1 ' + // root
+      'v:0-0-0 v:0-0-1' + // async component inside async setup
+      '</div>'
+    // assert different async resolution order does not affect id stable-ness
+    expect(await getOutput(async () => factory(0, 16))).toBe(expected)
+    expect(await getOutput(() => factory(16, 0))).toBe(expected)
+  })
 })

packages/runtime-core/__tests__/helpers/useModel.spec.ts

@@ -614,32 +614,31 @@ describe('useModel', () => {
   })
 
   test('set no change value', async () => {
-    let changeChildMsg: (() => void) | null = null
+    let changeChildMsg!: (val: string) => void
 
-    const compRender = vi.fn()
+    const setValue = vi.fn()
     const Comp = defineComponent({
       props: ['msg'],
       emits: ['update:msg'],
       setup(props) {
         const childMsg = useModel(props, 'msg')
-        changeChildMsg = () => {
-          childMsg.value = childMsg.value
-        }
+        changeChildMsg = (val: string) => (childMsg.value = val)
         return () => {
           return childMsg.value
         }
       },
     })
 
-    const msg = ref('HI')
+    const defaultVal = 'defaultVal'
+    const msg = ref(defaultVal)
     const Parent = defineComponent({
       setup() {
         return () =>
           h(Comp, {
             msg: msg.value,
             'onUpdate:msg': val => {
               msg.value = val
-              compRender()
+              setValue()
             },
           })
       },
@@ -648,8 +647,14 @@ describe('useModel', () => {
     const root = nodeOps.createElement('div')
     render(h(Parent), root)
 
-    expect(compRender).toBeCalledTimes(0)
-    changeChildMsg!()
-    expect(compRender).toBeCalledTimes(0)
+    expect(setValue).toBeCalledTimes(0)
+
+    changeChildMsg(defaultVal)
+    expect(setValue).toBeCalledTimes(0)
+
+    changeChildMsg('changed')
+    changeChildMsg(defaultVal)
+    expect(setValue).toBeCalledTimes(2)
+    expect(msg.value).toBe(defaultVal)
   })
 })

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

@@ -688,6 +688,54 @@ describe('SSR hydration', () => {
     expect(container.innerHTML).toBe(`<span>1</span>`)
   })
 
+  // #6638
+  test('Suspense + async component', async () => {
+    let isSuspenseResolved = false
+    let isSuspenseResolvedInChild: any
+    const AsyncChild = defineAsyncComponent(() =>
+      Promise.resolve(
+        defineComponent({
+          setup() {
+            isSuspenseResolvedInChild = isSuspenseResolved
+            const count = ref(0)
+            return () =>
+              h(
+                'span',
+                {
+                  onClick: () => {
+                    count.value++
+                  },
+                },
+                count.value,
+              )
+          },
+        }),
+      ),
+    )
+    const { vnode, container } = mountWithHydration('<span>0</span>', () =>
+      h(
+        Suspense,
+        {
+          onResolve() {
+            isSuspenseResolved = true
+          },
+        },
+        () => h(AsyncChild),
+      ),
+    )
+    expect(vnode.el).toBe(container.firstChild)
+    // wait for hydration to finish
+    await new Promise(r => setTimeout(r))
+
+    expect(isSuspenseResolvedInChild).toBe(false)
+    expect(isSuspenseResolved).toBe(true)
+
+    // assert interaction
+    triggerEvent('click', container.querySelector('span')!)
+    await nextTick()
+    expect(container.innerHTML).toBe(`<span>1</span>`)
+  })
+
   test('Suspense (full integration)', async () => {
     const mountedCalls: number[] = []
     const asyncDeps: Promise<any>[] = []