feat(html): html simple script tag support import-expression

packages/playground/assets/__tests__/assets.spec.ts

@@ -57,6 +57,12 @@ describe('raw references from /public', () => {
   })
 })
 
+test('import-expression from simple script', async () => {
+  expect(await page.textContent('.import-expression')).toMatch(
+    '[success][success]'
+  )
+})
+
 describe('asset imports from js', () => {
   test('relative', async () => {
     expect(await page.textContent('.asset-import-relative')).toMatch(assetMatch)

packages/playground/assets/index.html

@@ -147,6 +147,12 @@ <h2>new URL(`./${dynamic}`, import.meta.url)</h2>
   <code class="dynamic-import-meta-url-2"></code>
 </p>
 
+<h2>simple script tag import-expression</h2>
+<code class="import-expression"></code>
+<script>
+  import('./static/import-expression.js')
+  import('/import-expression.js')
+</script>
 <h2>url in style tag</h2>
 <h3>url</h3>
 <style class="style-url">

packages/playground/assets/static/import-expression.js

@@ -0,0 +1 @@
+document.querySelector('.import-expression').textContent += '[success]'

packages/vite/src/node/plugins/html.ts

@@ -29,14 +29,21 @@ import { modulePreloadPolyfillId } from './modulePreloadPolyfill'
 import type {
   AttributeNode,
   NodeTransform,
-  TextNode,
   ElementNode,
-  CompilerError
+  CompilerError,
+  TextNode
 } from '@vue/compiler-dom'
 import { NodeTypes } from '@vue/compiler-dom'
 
+interface ScriptAssetsUrl {
+  start: number
+  end: number
+  url: string
+}
+
 const htmlProxyRE = /\?html-proxy[&inline\-css]*&index=(\d+)\.(js|css)$/
 const inlineCSSRE = /__VITE_INLINE_CSS__([^_]+_\d+)__/g
+const inlineImportRE = /\bimport\s*\(("[^"]*"|'[^']*')\)/g
 export const isHTMLProxy = (id: string): boolean => htmlProxyRE.test(id)
 
 // HTML Proxy Caches are stored by config -> filePath -> index
@@ -250,6 +257,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
         let js = ''
         const s = new MagicString(html)
         const assetUrls: AttributeNode[] = []
+        const scriptUrls: ScriptAssetsUrl[] = []
         let inlineModuleIndex = -1
 
         let everyScriptIsAsync = true
@@ -308,6 +316,17 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
               config.logger.warn(
                 `<script src="${url}"> in "${publicPath}" can't be bundled without type="module" attribute`
               )
+            } else if (node.children.length) {
+              const scriptNode = node.children.pop()! as TextNode
+              const code = scriptNode.content
+              let match: RegExpExecArray | null
+              while ((match = inlineImportRE.exec(code))) {
+                const { 0: full, 1: url, index } = match
+                const startUrl = full.indexOf(url)
+                const start = scriptNode.loc.start.offset + index + startUrl + 1
+                const end = start + url.length - 2
+                scriptUrls.push({ start, end, url: url.slice(1, -1) })
+              }
             }
           }
 
@@ -434,6 +453,14 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
             }
           }
         }
+        // emit <script>import("./aaa")</script> asset
+        for (const { start, end, url } of scriptUrls) {
+          if (!isExcludedUrl(url)) {
+            s.overwrite(start, end, await urlToBuiltUrl(url, id, config, this))
+          } else if (checkPublicFile(url, config)) {
+            s.overwrite(start, end, config.base + url.slice(1))
+          }
+        }
 
         processedHtml.set(id, s.toString())