From 99fc83199cde52e52c145e13db2d278e65f3574a Mon Sep 17 00:00:00 2001 From: daiwei Date: Thu, 21 Nov 2024 14:22:38 +0800 Subject: [PATCH 1/5] fix(hmr): avoid hydration for hmr root reload --- packages/runtime-core/src/apiCreateApp.ts | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/runtime-core/src/apiCreateApp.ts b/packages/runtime-core/src/apiCreateApp.ts index 3d53716de08..7a64eae6dab 100644 --- a/packages/runtime-core/src/apiCreateApp.ts +++ b/packages/runtime-core/src/apiCreateApp.ts @@ -383,11 +383,10 @@ export function createAppAPI( context.reload = () => { // casting to ElementNamespace because TS doesn't guarantee type narrowing // over function boundaries - render( - cloneVNode(vnode), - rootContainer, - namespace as ElementNamespace, - ) + const cloned = cloneVNode(vnode) + // avoid hydration for hmr updating + cloned.el = null + render(cloned, rootContainer, namespace as ElementNamespace) } } From fcd2c9fcbe179ce38ec2092151de4b73089bfe96 Mon Sep 17 00:00:00 2001 From: daiwei Date: Thu, 21 Nov 2024 14:31:36 +0800 Subject: [PATCH 2/5] test: add test case --- .../runtime-core/__tests__/hydration.spec.ts | 26 ++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/packages/runtime-core/__tests__/hydration.spec.ts index 56011d06359..2ba2c5e0060 100644 --- a/packages/runtime-core/__tests__/hydration.spec.ts +++ b/packages/runtime-core/__tests__/hydration.spec.ts @@ -35,7 +35,10 @@ import { import { type SSRContext, renderToString } from '@vue/server-renderer' import { PatchFlags, normalizeStyle } from '@vue/shared' import { vShowOriginalDisplay } from '../../runtime-dom/src/directives/vShow' -import { expect } from 'vitest' +import type { HMRRuntime } from '../src/hmr' + +declare var __VUE_HMR_RUNTIME__: HMRRuntime +const { createRecord, reload } = __VUE_HMR_RUNTIME__ function mountWithHydration(html: string, render: () => any) { const container = document.createElement('div') @@ -1843,6 +1846,27 @@ describe('SSR hydration', () => { } }) + test('hmr root reload', async () => { + const appId = 'test-app-id' + const App = { + __hmrId: appId, + template: `
foo
`, + } + createRecord(appId, App) + + const root = document.createElement('div') + root.innerHTML = await renderToString(h(App)) + createSSRApp(App).mount(root) + expect(root.innerHTML).toBe('
foo
') + + reload(appId, { + __hmrId: appId, + template: `
bar
`, + }) + await nextTick() + expect(root.innerHTML).toBe('
bar
') + }) + describe('mismatch handling', () => { test('text node', () => { const { container } = mountWithHydration(`foo`, () => 'bar') From 750edbdf6f12fcbd7637cba438f878066ec4e2a8 Mon Sep 17 00:00:00 2001 From: daiwei Date: Fri, 22 Nov 2024 10:43:28 +0800 Subject: [PATCH 3/5] test: update --- packages/runtime-core/__tests__/hydration.spec.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/packages/runtime-core/__tests__/hydration.spec.ts index 2ba2c5e0060..9dad24f9732 100644 --- a/packages/runtime-core/__tests__/hydration.spec.ts +++ b/packages/runtime-core/__tests__/hydration.spec.ts @@ -38,7 +38,7 @@ import { vShowOriginalDisplay } from '../../runtime-dom/src/directives/vShow' import type { HMRRuntime } from '../src/hmr' declare var __VUE_HMR_RUNTIME__: HMRRuntime -const { createRecord, reload } = __VUE_HMR_RUNTIME__ +const { reload } = __VUE_HMR_RUNTIME__ function mountWithHydration(html: string, render: () => any) { const container = document.createElement('div') @@ -1852,7 +1852,6 @@ describe('SSR hydration', () => { __hmrId: appId, template: `
foo
`, } - createRecord(appId, App) const root = document.createElement('div') root.innerHTML = await renderToString(h(App)) From 5562a81b7f6f8cdf26583b71b616407f22e75cdf Mon Sep 17 00:00:00 2001 From: daiwei Date: Tue, 13 May 2025 21:04:16 +0800 Subject: [PATCH 4/5] chore: minor tweaks --- packages/runtime-core/src/apiCreateApp.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/runtime-core/src/apiCreateApp.ts b/packages/runtime-core/src/apiCreateApp.ts index 1dac6129e7c..cba5e4ede02 100644 --- a/packages/runtime-core/src/apiCreateApp.ts +++ b/packages/runtime-core/src/apiCreateApp.ts @@ -383,11 +383,11 @@ export function createAppAPI( // HMR root reload if (__DEV__) { context.reload = () => { - // casting to ElementNamespace because TS doesn't guarantee type narrowing - // over function boundaries const cloned = cloneVNode(vnode) // avoid hydration for hmr updating cloned.el = null + // casting to ElementNamespace because TS doesn't guarantee type narrowing + // over function boundaries render(cloned, rootContainer, namespace as ElementNamespace) } } From a0d7ed931f69b671ec3ff21a22837ed393d13d21 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Tue, 13 May 2025 14:21:24 +0000 Subject: [PATCH 5/5] [autofix.ci] apply automated fixes --- packages/runtime-core/__tests__/hydration.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/packages/runtime-core/__tests__/hydration.spec.ts index 2a15600062c..20519cf997f 100644 --- a/packages/runtime-core/__tests__/hydration.spec.ts +++ b/packages/runtime-core/__tests__/hydration.spec.ts @@ -1879,7 +1879,7 @@ describe('SSR hydration', () => { await nextTick() expect(root.innerHTML).toBe('
bar
') }) - + test('hmr root reload', async () => { const appId = 'test-app-id' const App = {