From 1f9356ba064abb421e14d918a59c7955fff02ab0 Mon Sep 17 00:00:00 2001 From: Caven Date: Sun, 31 Mar 2024 10:16:09 +0800 Subject: [PATCH 1/4] fix: document not in background of chrome extension --- packages/vite/src/client/client.ts | 4 +- packages/vite/src/client/overlay.ts | 73 +++++++++++++++-------------- 2 files changed, 42 insertions(+), 35 deletions(-) diff --git a/packages/vite/src/client/client.ts b/packages/vite/src/client/client.ts index 38b632cb945b57..157d60fded48fc 100644 --- a/packages/vite/src/client/client.ts +++ b/packages/vite/src/client/client.ts @@ -190,7 +190,9 @@ async function handleMessage(payload: HMRPayload) { window.location.reload() return } else { - clearErrorOverlay() + if (enableOverlay) { + clearErrorOverlay() + } isFirstUpdate = false } await Promise.all( diff --git a/packages/vite/src/client/overlay.ts b/packages/vite/src/client/overlay.ts index dffdafd9197ddb..33c9320f509b46 100644 --- a/packages/vite/src/client/overlay.ts +++ b/packages/vite/src/client/overlay.ts @@ -165,39 +165,42 @@ kbd { ` // Error Template -const template = h( - 'div', - { class: 'backdrop', part: 'backdrop' }, - h( - 'div', - { class: 'window', part: 'window' }, - h( - 'pre', - { class: 'message', part: 'message' }, - h('span', { class: 'plugin', part: 'plugin' }), - h('span', { class: 'message-body', part: 'message-body' }), - ), - h('pre', { class: 'file', part: 'file' }), - h('pre', { class: 'frame', part: 'frame' }), - h('pre', { class: 'stack', part: 'stack' }), - h( - 'div', - { class: 'tip', part: 'tip' }, - 'Click outside, press ', - h('kbd', {}, 'Esc'), - ' key, or fix the code to dismiss.', - h('br'), - 'You can also disable this overlay by setting ', - h('code', { part: 'config-option-name' }, 'server.hmr.overlay'), - ' to ', - h('code', { part: 'config-option-value' }, 'false'), - ' in ', - h('code', { part: 'config-file-name' }, hmrConfigName), - '.', - ), - ), - h('style', {}, templateStyle), -) +const template = + 'document' in globalThis + ? h( + 'div', + { class: 'backdrop', part: 'backdrop' }, + h( + 'div', + { class: 'window', part: 'window' }, + h( + 'pre', + { class: 'message', part: 'message' }, + h('span', { class: 'plugin', part: 'plugin' }), + h('span', { class: 'message-body', part: 'message-body' }), + ), + h('pre', { class: 'file', part: 'file' }), + h('pre', { class: 'frame', part: 'frame' }), + h('pre', { class: 'stack', part: 'stack' }), + h( + 'div', + { class: 'tip', part: 'tip' }, + 'Click outside, press ', + h('kbd', {}, 'Esc'), + ' key, or fix the code to dismiss.', + h('br'), + 'You can also disable this overlay by setting ', + h('code', { part: 'config-option-name' }, 'server.hmr.overlay'), + ' to ', + h('code', { part: 'config-option-value' }, 'false'), + ' in ', + h('code', { part: 'config-file-name' }, hmrConfigName), + '.', + ), + ), + h('style', {}, templateStyle), + ) + : undefined const fileRE = /(?:[a-zA-Z]:\\|\/).*?:\d+:\d+/g const codeframeRE = /^(?:>?\s*\d+\s+\|.*|\s+\|\s*\^.*)\r?\n/gm @@ -213,7 +216,9 @@ export class ErrorOverlay extends HTMLElement { super() this.root = this.attachShadow({ mode: 'open' }) - this.root.appendChild(template) + if (template) { + this.root.appendChild(template) + } codeframeRE.lastIndex = 0 const hasFrame = err.frame && codeframeRE.test(err.frame) From 1960075ef5e6ae7b355546c908dbebe70adf043c Mon Sep 17 00:00:00 2001 From: sapphi-red <49056869+sapphi-red@users.noreply.github.com> Date: Wed, 3 Apr 2024 17:55:57 +0900 Subject: [PATCH 2/4] test: add test case --- playground/worker/__tests__/es/worker-es.spec.ts | 2 +- .../__tests__/relative-base/worker-relative-base.spec.ts | 2 +- playground/worker/emit-chunk-dynamic-import-worker.js | 6 +++++- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/playground/worker/__tests__/es/worker-es.spec.ts b/playground/worker/__tests__/es/worker-es.spec.ts index 748cd2b0592bb2..3656b07c18d576 100644 --- a/playground/worker/__tests__/es/worker-es.spec.ts +++ b/playground/worker/__tests__/es/worker-es.spec.ts @@ -200,7 +200,7 @@ test('emit chunk', async () => { ) await untilUpdated( () => page.textContent('.emit-chunk-dynamic-import-worker'), - '"A string/es/"', + '"A stringmodule1/es/"', true, ) }) diff --git a/playground/worker/__tests__/relative-base/worker-relative-base.spec.ts b/playground/worker/__tests__/relative-base/worker-relative-base.spec.ts index ae791ff7f36fe4..6c3180c7e2aa31 100644 --- a/playground/worker/__tests__/relative-base/worker-relative-base.spec.ts +++ b/playground/worker/__tests__/relative-base/worker-relative-base.spec.ts @@ -141,7 +141,7 @@ test.runIf(isBuild)('emit chunk', async () => { ) await untilUpdated( () => page.textContent('.emit-chunk-dynamic-import-worker'), - '"A string./"', + '"A stringmodule1./"', true, ) }) diff --git a/playground/worker/emit-chunk-dynamic-import-worker.js b/playground/worker/emit-chunk-dynamic-import-worker.js index 9c3ede1faa2ed9..3df9fff1e7191b 100644 --- a/playground/worker/emit-chunk-dynamic-import-worker.js +++ b/playground/worker/emit-chunk-dynamic-import-worker.js @@ -1,5 +1,9 @@ +import module1Url from './modules/module1.js?url' + import('./modules/module0').then((module) => { - self.postMessage(module.default + import.meta.env.BASE_URL) + import(/* @vite-ignore */ module1Url).then((module1) => { + self.postMessage(module.default + module1.msg1 + import.meta.env.BASE_URL) + }) }) // for sourcemap From 150846a8a07927bf6dfa44b025bbfc3106f41bff Mon Sep 17 00:00:00 2001 From: sapphi-red <49056869+sapphi-red@users.noreply.github.com> Date: Wed, 3 Apr 2024 20:43:55 +0900 Subject: [PATCH 3/4] fix: check document before showing errors/reloading --- packages/vite/src/client/client.ts | 77 ++++++++++++++++------------- packages/vite/src/client/overlay.ts | 72 +++++++++++++-------------- 2 files changed, 77 insertions(+), 72 deletions(-) diff --git a/packages/vite/src/client/client.ts b/packages/vite/src/client/client.ts index 157d60fded48fc..8fcb145fd0242c 100644 --- a/packages/vite/src/client/client.ts +++ b/packages/vite/src/client/client.ts @@ -102,9 +102,11 @@ function setupWebSocket( notifyListeners('vite:ws:disconnect', { webSocket: socket }) - console.log(`[vite] server connection lost. polling for restart...`) - await waitForSuccessfulPing(protocol, hostAndPath) - location.reload() + if (hasDocument) { + console.log(`[vite] server connection lost. polling for restart...`) + await waitForSuccessfulPing(protocol, hostAndPath) + location.reload() + } }) return socket @@ -182,18 +184,20 @@ async function handleMessage(payload: HMRPayload) { break case 'update': notifyListeners('vite:beforeUpdate', payload) - // if this is the first update and there's already an error overlay, it - // means the page opened with existing server compile error and the whole - // module script failed to load (since one of the nested imports is 500). - // in this case a normal update won't work and a full reload is needed. - if (isFirstUpdate && hasErrorOverlay()) { - window.location.reload() - return - } else { - if (enableOverlay) { - clearErrorOverlay() + if (hasDocument) { + // if this is the first update and there's already an error overlay, it + // means the page opened with existing server compile error and the whole + // module script failed to load (since one of the nested imports is 500). + // in this case a normal update won't work and a full reload is needed. + if (isFirstUpdate && hasErrorOverlay()) { + window.location.reload() + return + } else { + if (enableOverlay) { + clearErrorOverlay() + } + isFirstUpdate = false } - isFirstUpdate = false } await Promise.all( payload.updates.map(async (update): Promise => { @@ -251,21 +255,23 @@ async function handleMessage(payload: HMRPayload) { } case 'full-reload': notifyListeners('vite:beforeFullReload', payload) - if (payload.path && payload.path.endsWith('.html')) { - // if html file is edited, only reload the page if the browser is - // currently on that page. - const pagePath = decodeURI(location.pathname) - const payloadPath = base + payload.path.slice(1) - if ( - pagePath === payloadPath || - payload.path === '/index.html' || - (pagePath.endsWith('/') && pagePath + 'index.html' === payloadPath) - ) { + if (hasDocument) { + if (payload.path && payload.path.endsWith('.html')) { + // if html file is edited, only reload the page if the browser is + // currently on that page. + const pagePath = decodeURI(location.pathname) + const payloadPath = base + payload.path.slice(1) + if ( + pagePath === payloadPath || + payload.path === '/index.html' || + (pagePath.endsWith('/') && pagePath + 'index.html' === payloadPath) + ) { + pageReload() + } + return + } else { pageReload() } - return - } else { - pageReload() } break case 'prune': @@ -274,13 +280,15 @@ async function handleMessage(payload: HMRPayload) { break case 'error': { notifyListeners('vite:error', payload) - const err = payload.err - if (enableOverlay) { - createErrorOverlay(err) - } else { - console.error( - `[vite] Internal Server Error\n${err.message}\n${err.stack}`, - ) + if (hasDocument) { + const err = payload.err + if (enableOverlay) { + createErrorOverlay(err) + } else { + console.error( + `[vite] Internal Server Error\n${err.message}\n${err.stack}`, + ) + } } break } @@ -300,6 +308,7 @@ function notifyListeners(event: string, data: any): void { } const enableOverlay = __HMR_ENABLE_OVERLAY__ +const hasDocument = 'document' in globalThis function createErrorOverlay(err: ErrorPayload['err']) { clearErrorOverlay() diff --git a/packages/vite/src/client/overlay.ts b/packages/vite/src/client/overlay.ts index 33c9320f509b46..3b2bc8f4d76f6f 100644 --- a/packages/vite/src/client/overlay.ts +++ b/packages/vite/src/client/overlay.ts @@ -165,42 +165,40 @@ kbd { ` // Error Template -const template = - 'document' in globalThis - ? h( +const createTemplate = () => + h( + 'div', + { class: 'backdrop', part: 'backdrop' }, + h( + 'div', + { class: 'window', part: 'window' }, + h( + 'pre', + { class: 'message', part: 'message' }, + h('span', { class: 'plugin', part: 'plugin' }), + h('span', { class: 'message-body', part: 'message-body' }), + ), + h('pre', { class: 'file', part: 'file' }), + h('pre', { class: 'frame', part: 'frame' }), + h('pre', { class: 'stack', part: 'stack' }), + h( 'div', - { class: 'backdrop', part: 'backdrop' }, - h( - 'div', - { class: 'window', part: 'window' }, - h( - 'pre', - { class: 'message', part: 'message' }, - h('span', { class: 'plugin', part: 'plugin' }), - h('span', { class: 'message-body', part: 'message-body' }), - ), - h('pre', { class: 'file', part: 'file' }), - h('pre', { class: 'frame', part: 'frame' }), - h('pre', { class: 'stack', part: 'stack' }), - h( - 'div', - { class: 'tip', part: 'tip' }, - 'Click outside, press ', - h('kbd', {}, 'Esc'), - ' key, or fix the code to dismiss.', - h('br'), - 'You can also disable this overlay by setting ', - h('code', { part: 'config-option-name' }, 'server.hmr.overlay'), - ' to ', - h('code', { part: 'config-option-value' }, 'false'), - ' in ', - h('code', { part: 'config-file-name' }, hmrConfigName), - '.', - ), - ), - h('style', {}, templateStyle), - ) - : undefined + { class: 'tip', part: 'tip' }, + 'Click outside, press ', + h('kbd', {}, 'Esc'), + ' key, or fix the code to dismiss.', + h('br'), + 'You can also disable this overlay by setting ', + h('code', { part: 'config-option-name' }, 'server.hmr.overlay'), + ' to ', + h('code', { part: 'config-option-value' }, 'false'), + ' in ', + h('code', { part: 'config-file-name' }, hmrConfigName), + '.', + ), + ), + h('style', {}, templateStyle), + ) const fileRE = /(?:[a-zA-Z]:\\|\/).*?:\d+:\d+/g const codeframeRE = /^(?:>?\s*\d+\s+\|.*|\s+\|\s*\^.*)\r?\n/gm @@ -216,9 +214,7 @@ export class ErrorOverlay extends HTMLElement { super() this.root = this.attachShadow({ mode: 'open' }) - if (template) { - this.root.appendChild(template) - } + this.root.appendChild(createTemplate()) codeframeRE.lastIndex = 0 const hasFrame = err.frame && codeframeRE.test(err.frame) From 10fdd0033339abb91cfce7a51b90b5f6fe0aaabe Mon Sep 17 00:00:00 2001 From: sapphi-red <49056869+sapphi-red@users.noreply.github.com> Date: Wed, 3 Apr 2024 21:25:07 +0900 Subject: [PATCH 4/4] refactor: reuse template --- packages/vite/src/client/overlay.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/vite/src/client/overlay.ts b/packages/vite/src/client/overlay.ts index 3b2bc8f4d76f6f..f0e34cac19e68e 100644 --- a/packages/vite/src/client/overlay.ts +++ b/packages/vite/src/client/overlay.ts @@ -165,6 +165,7 @@ kbd { ` // Error Template +let template: HTMLElement const createTemplate = () => h( 'div', @@ -214,7 +215,8 @@ export class ErrorOverlay extends HTMLElement { super() this.root = this.attachShadow({ mode: 'open' }) - this.root.appendChild(createTemplate()) + template ??= createTemplate() + this.root.appendChild(template) codeframeRE.lastIndex = 0 const hasFrame = err.frame && codeframeRE.test(err.frame)