From 55110d1b05e8fb9b4a7a34a32445324f3e8e2337 Mon Sep 17 00:00:00 2001 From: patak Date: Fri, 3 Nov 2023 18:31:34 +0100 Subject: [PATCH 1/3] fix: processNodeUrl for srcset --- .../src/node/server/middlewares/indexHtml.ts | 56 ++++++++++--------- 1 file changed, 29 insertions(+), 27 deletions(-) diff --git a/packages/vite/src/node/server/middlewares/indexHtml.ts b/packages/vite/src/node/server/middlewares/indexHtml.ts index f248107e259ac4..3430f225d8961d 100644 --- a/packages/vite/src/node/server/middlewares/indexHtml.ts +++ b/packages/vite/src/node/server/middlewares/indexHtml.ts @@ -114,43 +114,45 @@ const processNodeUrl = ( originalUrl?: string, server?: ViteDevServer, ): string | undefined => { - if (server?.moduleGraph) { - const mod = server.moduleGraph.urlToModuleMap.get(url) - if (mod && mod.lastHMRTimestamp > 0) { - url = injectQuery(url, `t=${mod.lastHMRTimestamp}`) + // prefix with base (dev only, base is never relative) + const replacer = (url: string) => { + if (server?.moduleGraph) { + const mod = server.moduleGraph.urlToModuleMap.get(url) + if (mod && mod.lastHMRTimestamp > 0) { + url = injectQuery(url, `t=${mod.lastHMRTimestamp}`) + } } - } - if ( - (url[0] === '/' && url[1] !== '/') || - // #3230 if some request url (localhost:3000/a/b) return to fallback html, the relative assets - // path will add `/a/` prefix, it will caused 404. - // - // skip if url contains `:` as it implies a url protocol or Windows path that we don't want to replace. - // - // rewrite `./index.js` -> `localhost:5173/a/index.js`. - // rewrite `../index.js` -> `localhost:5173/index.js`. - // rewrite `relative/index.js` -> `localhost:5173/a/relative/index.js`. - ((url[0] === '.' || (wordCharRE.test(url[0]) && !url.includes(':'))) && - originalUrl && - originalUrl !== '/' && - htmlPath === '/index.html') - ) { - // prefix with base (dev only, base is never relative) - const replacer = (url: string) => { + if ( + (url[0] === '/' && url[1] !== '/') || + // #3230 if some request url (localhost:3000/a/b) return to fallback html, the relative assets + // path will add `/a/` prefix, it will caused 404. + // + // skip if url contains `:` as it implies a url protocol or Windows path that we don't want to replace. + // + // rewrite `./index.js` -> `localhost:5173/a/index.js`. + // rewrite `../index.js` -> `localhost:5173/index.js`. + // rewrite `relative/index.js` -> `localhost:5173/a/relative/index.js`. + ((url[0] === '.' || (wordCharRE.test(url[0]) && !url.includes(':'))) && + originalUrl && + originalUrl !== '/' && + htmlPath === '/index.html') + ) { const devBase = config.base const fullUrl = path.posix.join(devBase, url) if (server && shouldPreTransform(url, config)) { preTransformRequest(server, fullUrl, devBase) } return fullUrl + } else { + return url } - - const processedUrl = useSrcSetReplacer - ? processSrcSetSync(url, ({ url }) => replacer(url)) - : replacer(url) - return processedUrl } + + const processedUrl = useSrcSetReplacer + ? processSrcSetSync(url, ({ url }) => replacer(url)) + : replacer(url) + return processedUrl } const devHtmlHook: IndexHtmlTransformHook = async ( html, From 4d70dcf70bd45e8c11cdd2e25d14a187ac339125 Mon Sep 17 00:00:00 2001 From: patak Date: Fri, 3 Nov 2023 19:27:49 +0100 Subject: [PATCH 2/3] test: add test for dev --- playground/assets/__tests__/assets.spec.ts | 12 ++++++++++++ playground/assets/index.html | 6 ++++++ 2 files changed, 18 insertions(+) diff --git a/playground/assets/__tests__/assets.spec.ts b/playground/assets/__tests__/assets.spec.ts index d3de2304894584..846f8c304a2088 100644 --- a/playground/assets/__tests__/assets.spec.ts +++ b/playground/assets/__tests__/assets.spec.ts @@ -283,6 +283,18 @@ describe('image', () => { expect(s).toMatch(/\/foo\/bar\/icon\.png \dx/) }) }) + + // TODO: fix build + test.runIf(!isBuild)('srcset (mixed)', async () => { + const img = await page.$('.img-src-set-mixed') + const srcset = await img.getAttribute('srcset') + const srcs = srcset.split(', ') + expect(srcs[1]).toMatch( + isBuild + ? /\/foo\/bar\/assets\/asset-[-\w]{8}\.png \dx/ + : /\/foo\/bar\/nested\/asset.png \dx/, + ) + }) }) describe('svg fragments', () => { diff --git a/playground/assets/index.html b/playground/assets/index.html index 94dfe6b31ad196..ebb938d72f75a1 100644 --- a/playground/assets/index.html +++ b/playground/assets/index.html @@ -151,6 +151,12 @@

Image Src Set

srcset="/icon.png 1x, /icon.png 2x" alt="" /> +

HTML only asset

From 68e09595026d92990aebbaa175eebe34afeda53e Mon Sep 17 00:00:00 2001 From: patak Date: Mon, 6 Nov 2023 09:49:16 +0100 Subject: [PATCH 3/3] chore: avoid unneeded overwrite --- packages/vite/src/node/server/middlewares/indexHtml.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/vite/src/node/server/middlewares/indexHtml.ts b/packages/vite/src/node/server/middlewares/indexHtml.ts index 3430f225d8961d..c6548de0f14c65 100644 --- a/packages/vite/src/node/server/middlewares/indexHtml.ts +++ b/packages/vite/src/node/server/middlewares/indexHtml.ts @@ -113,7 +113,7 @@ const processNodeUrl = ( htmlPath: string, originalUrl?: string, server?: ViteDevServer, -): string | undefined => { +): string => { // prefix with base (dev only, base is never relative) const replacer = (url: string) => { if (server?.moduleGraph) { @@ -248,7 +248,7 @@ const devHtmlHook: IndexHtmlTransformHook = async ( originalUrl, server, ) - if (processedUrl) { + if (processedUrl !== src.value) { overwriteAttrValue(s, sourceCodeLocation!, processedUrl) } } else if (isModule && node.childNodes.length) { @@ -269,7 +269,7 @@ const devHtmlHook: IndexHtmlTransformHook = async ( htmlPath, originalUrl, ) - if (processedUrl) { + if (processedUrl !== url) { s.update(start, end, processedUrl) } } @@ -308,7 +308,7 @@ const devHtmlHook: IndexHtmlTransformHook = async ( htmlPath, originalUrl, ) - if (processedUrl) { + if (processedUrl !== p.value) { overwriteAttrValue( s, node.sourceCodeLocation!.attrs![attrKey],