From a8d1a2126c14d9f2f7da8f884e104a905358001d Mon Sep 17 00:00:00 2001 From: fi3ework Date: Thu, 29 Dec 2022 13:34:03 +0800 Subject: [PATCH] test: add case --- packages/vite/src/node/plugins/html.ts | 18 +++++++++--------- playground/html/__tests__/html.spec.ts | 19 +++++++++++++------ playground/html/importmapOrder.html | 14 ++++++++++++++ playground/html/vite.config.js | 5 ++++- 4 files changed, 40 insertions(+), 16 deletions(-) create mode 100644 playground/html/importmapOrder.html diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts index 9521f8b89bf2e1..e85cef2fe32070 100644 --- a/packages/vite/src/node/plugins/html.ts +++ b/packages/vite/src/node/plugins/html.ts @@ -52,8 +52,7 @@ const moduleScriptRE = /[ \t]*]*type\s*=\s*(?:"module"|'module'|module)[^>]*>/i const modulePreloadLinkRE = /[ \t]*]*rel\s*=\s*(?:"modulepreload"|'modulepreload'|modulepreload)[\s\S]*?\/>/i - -const importMapDependenciesRE = new RegExp( +const importMapAppendRE = new RegExp( [moduleScriptRE, modulePreloadLinkRE].map((r) => r.source).join('|'), 'i', ) @@ -898,10 +897,10 @@ export function preImportMapHook( const importMapIndex = html.match(importMapRE)?.index if (importMapIndex === undefined) return - const importMapDepIndex = html.match(importMapDependenciesRE)?.index - if (importMapDepIndex === undefined) return + const importMapAppendIndex = html.match(importMapAppendRE)?.index + if (importMapAppendIndex === undefined) return - if (importMapDepIndex < importMapIndex) { + if (importMapAppendIndex < importMapIndex) { const relativeHtml = normalizePath( path.relative(config.root, ctx.filename), ) @@ -921,7 +920,7 @@ export function preImportMapHook( */ export function postImportMapHook(): IndexHtmlTransformHook { return (html) => { - if (!importMapDependenciesRE.test(html)) return + if (!importMapAppendRE.test(html)) return let importMap: string | undefined html = html.replace(importMapRE, (match) => { @@ -930,9 +929,10 @@ export function postImportMapHook(): IndexHtmlTransformHook { }) if (importMap) { - html = html.replace(importMapDependenciesRE, (match) => { - return `${importMap}\n${match}` - }) + html = html.replace( + importMapAppendRE, + (match) => `${importMap}\n${match}`, + ) } return html diff --git a/playground/html/__tests__/html.spec.ts b/playground/html/__tests__/html.spec.ts index 87cc249a38eaf8..5ba3eb09be1cae 100644 --- a/playground/html/__tests__/html.spec.ts +++ b/playground/html/__tests__/html.spec.ts @@ -251,12 +251,6 @@ describe.runIf(isServe)('invalid', () => { }) }) -test('importmap', () => { - expect(browserLogs).not.toContain( - 'An import map is added after module script load was triggered.', - ) -}) - describe('Valid HTML', () => { test('valid HTML is parsed', async () => { await page.goto(viteTestUrl + '/valid.html') @@ -267,3 +261,16 @@ describe('Valid HTML', () => { expect(await getColor('#duplicated-attrs')).toBe('green') }) }) + +describe('importmap', () => { + beforeAll(async () => { + await page.goto(viteTestUrl + '/importmapOrder.html') + }) + + // Should put this test at the end to get all browser logs above + test('importmap should be prepended', async () => { + expect(browserLogs).not.toContain( + 'An import map is added after module script load was triggered.', + ) + }) +}) diff --git a/playground/html/importmapOrder.html b/playground/html/importmapOrder.html new file mode 100644 index 00000000000000..7d4303a655f33a --- /dev/null +++ b/playground/html/importmapOrder.html @@ -0,0 +1,14 @@ + + + + + + + + diff --git a/playground/html/vite.config.js b/playground/html/vite.config.js index 4d029b1e835d26..f7eb421975ee00 100644 --- a/playground/html/vite.config.js +++ b/playground/html/vite.config.js @@ -28,6 +28,7 @@ module.exports = { ), linkProps: resolve(__dirname, 'link-props/index.html'), valid: resolve(__dirname, 'valid.html'), + importmapOrder: resolve(__dirname, 'importmapOrder.html'), }, }, }, @@ -168,7 +169,9 @@ ${ }, { name: 'head-prepend-importmap', - transformIndexHtml() { + transformIndexHtml(_, ctx) { + if (ctx.path.includes('importmapOrder')) return + return [ { tag: 'script',