From d6dd30aa4146da28f8ca5b376756811de69ca246 Mon Sep 17 00:00:00 2001
From: fi3ework <fi3ework@gmail.com>
Date: Tue, 27 Dec 2022 00:52:22 +0800
Subject: [PATCH 1/3] fix: importmap should insert before module preload link

---
 packages/vite/src/node/plugins/html.ts | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
index 2deeebfc9a42ab..81f6ede47edbdd 100644
--- a/packages/vite/src/node/plugins/html.ts
+++ b/packages/vite/src/node/plugins/html.ts
@@ -50,6 +50,8 @@ const importMapRE =
   /[ \t]*<script[^>]*type\s*=\s*(?:"importmap"|'importmap'|importmap)[^>]*>.*?<\/script>/is
 const moduleScriptRE =
   /[ \t]*<script[^>]*type\s*=\s*(?:"module"|'module'|module)[^>]*>/i
+const modulePreloadLinkRE =
+  /[ \t]*<link[^>]*rel\s*=\s*(?:"modulepreload"|'modulepreload'|modulepreload).*?\/>/is
 
 export const isHTMLProxy = (id: string): boolean => htmlProxyRE.test(id)
 
@@ -910,7 +912,7 @@ export function preImportMapHook(
 }
 
 /**
- * Move importmap before the first module script
+ * Move importmap before the first module script and modulepreload link
  */
 export function postImportMapHook(): IndexHtmlTransformHook {
   return (html) => {
@@ -921,9 +923,20 @@ export function postImportMapHook(): IndexHtmlTransformHook {
       importMap = match
       return ''
     })
-    if (importMap) {
-      html = html.replace(moduleScriptRE, (match) => `${importMap}\n${match}`)
-    }
+
+    if (!importMap) return html
+
+    const firstModuleScriptIndex = html.match(moduleScriptRE)?.index
+    const firstModulePreloadIndex = html.match(modulePreloadLinkRE)?.index
+    const ImportMapInsertionIndex = Math.min(
+      firstModuleScriptIndex ?? Infinity,
+      firstModulePreloadIndex ?? Infinity,
+    )
+    if (ImportMapInsertionIndex === Infinity) return html
+
+    html = `${html.slice(0, ImportMapInsertionIndex)}${importMap}\n${html.slice(
+      ImportMapInsertionIndex,
+    )}`
 
     return html
   }

From 52bfae4bc8a5d6b721bc66fe07c679a30a7b7aec Mon Sep 17 00:00:00 2001
From: fi3ework <fi3ework@gmail.com>
Date: Wed, 28 Dec 2022 15:24:56 +0800
Subject: [PATCH 2/3] fix: merge module script and module preload link regex

---
 packages/vite/src/node/plugins/html.ts | 35 ++++++++++++--------------
 1 file changed, 16 insertions(+), 19 deletions(-)

diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
index 81f6ede47edbdd..9521f8b89bf2e1 100644
--- a/packages/vite/src/node/plugins/html.ts
+++ b/packages/vite/src/node/plugins/html.ts
@@ -51,7 +51,12 @@ const importMapRE =
 const moduleScriptRE =
   /[ \t]*<script[^>]*type\s*=\s*(?:"module"|'module'|module)[^>]*>/i
 const modulePreloadLinkRE =
-  /[ \t]*<link[^>]*rel\s*=\s*(?:"modulepreload"|'modulepreload'|modulepreload).*?\/>/is
+  /[ \t]*<link[^>]*rel\s*=\s*(?:"modulepreload"|'modulepreload'|modulepreload)[\s\S]*?\/>/i
+
+const importMapDependenciesRE = new RegExp(
+  [moduleScriptRE, modulePreloadLinkRE].map((r) => r.source).join('|'),
+  'i',
+)
 
 export const isHTMLProxy = (id: string): boolean => htmlProxyRE.test(id)
 
@@ -893,17 +898,17 @@ export function preImportMapHook(
     const importMapIndex = html.match(importMapRE)?.index
     if (importMapIndex === undefined) return
 
-    const moduleScriptIndex = html.match(moduleScriptRE)?.index
-    if (moduleScriptIndex === undefined) return
+    const importMapDepIndex = html.match(importMapDependenciesRE)?.index
+    if (importMapDepIndex === undefined) return
 
-    if (moduleScriptIndex < importMapIndex) {
+    if (importMapDepIndex < importMapIndex) {
       const relativeHtml = normalizePath(
         path.relative(config.root, ctx.filename),
       )
       config.logger.warnOnce(
         colors.yellow(
           colors.bold(
-            `(!) <script type="importmap"> should come before <script type="module"> in /${relativeHtml}`,
+            `(!) <script type="importmap"> should come before <script type="module"> and <link rel="modulepreload"> in /${relativeHtml}`,
           ),
         ),
       )
@@ -916,7 +921,7 @@ export function preImportMapHook(
  */
 export function postImportMapHook(): IndexHtmlTransformHook {
   return (html) => {
-    if (!moduleScriptRE.test(html)) return
+    if (!importMapDependenciesRE.test(html)) return
 
     let importMap: string | undefined
     html = html.replace(importMapRE, (match) => {
@@ -924,19 +929,11 @@ export function postImportMapHook(): IndexHtmlTransformHook {
       return ''
     })
 
-    if (!importMap) return html
-
-    const firstModuleScriptIndex = html.match(moduleScriptRE)?.index
-    const firstModulePreloadIndex = html.match(modulePreloadLinkRE)?.index
-    const ImportMapInsertionIndex = Math.min(
-      firstModuleScriptIndex ?? Infinity,
-      firstModulePreloadIndex ?? Infinity,
-    )
-    if (ImportMapInsertionIndex === Infinity) return html
-
-    html = `${html.slice(0, ImportMapInsertionIndex)}${importMap}\n${html.slice(
-      ImportMapInsertionIndex,
-    )}`
+    if (importMap) {
+      html = html.replace(importMapDependenciesRE, (match) => {
+        return `${importMap}\n${match}`
+      })
+    }
 
     return html
   }

From a8d1a2126c14d9f2f7da8f884e104a905358001d Mon Sep 17 00:00:00 2001
From: fi3ework <fi3ework@gmail.com>
Date: Thu, 29 Dec 2022 13:34:03 +0800
Subject: [PATCH 3/3] 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]*<script[^>]*type\s*=\s*(?:"module"|'module'|module)[^>]*>/i
 const modulePreloadLinkRE =
   /[ \t]*<link[^>]*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 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <script type="importmap">
+      {
+        "imports": {
+          "some-pkg": "url-of-pkg"
+        }
+      }
+    </script>
+    <link rel="modulepreload" href="url-of-pkg" />
+    <script type="module" src="/main.js"></script>
+  </head>
+</html>
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',