feat: rework dynamic-import-vars

packages/playground/dynamic-import/__tests__/dynamic-import.spec.ts

@@ -60,6 +60,30 @@ test('should load dynamic import with css', async () => {
   )
 })
 
+test('should load dynamic import with vars', async () => {
+  await untilUpdated(
+    () => page.textContent('.dynamic-import-with-vars'),
+    'hello',
+    true
+  )
+})
+
+test('should load dynamic import with vars alias', async () => {
+  await untilUpdated(
+    () => page.textContent('.dynamic-import-with-vars-alias'),
+    'hello',
+    true
+  )
+})
+
+test('should load dynamic import with vars raw', async () => {
+  await untilUpdated(
+    () => page.textContent('.dynamic-import-with-vars-raw'),
+    'export function hello()',
+    true
+  )
+})
+
 test('should load dynamic import with css in package', async () => {
   await page.click('.pkg-css')
   await untilUpdated(() => getColor('.pkg-css'), 'blue', true)

packages/playground/dynamic-import/alias/hello.js

@@ -0,0 +1,3 @@
+export function hello() {
+  return 'hello'
+}

packages/playground/dynamic-import/alias/hi.js

@@ -0,0 +1,3 @@
+export function hi() {
+  return 'hi'
+}

packages/playground/dynamic-import/index.html

@@ -10,6 +10,20 @@
 <button class="css">css</button>
 <button class="pkg-css">pkg-css</button>
 
+<p>dynamic-import-with-vars</p>
+<div class="dynamic-import-with-vars">todo</div>
+
+<p>dynamic-import-with-vars-alias</p>
+<div class="dynamic-import-with-vars-alias">todo</div>
+
+<p>dynamic-import-with-vars-raw</p>
+<div class="dynamic-import-with-vars-raw">todo</div>
+
 <div class="view"></div>
 
 <script type="module" src="./nested/index.js"></script>
+<style>
+  p {
+    color: #0088ff;
+  }
+</style>

packages/playground/dynamic-import/nested/hello.js

@@ -0,0 +1,3 @@
+export function hello() {
+  return 'hello'
+}

packages/playground/dynamic-import/nested/index.js

@@ -78,3 +78,17 @@ document.querySelector('.pkg-css').addEventListener('click', async () => {
 function text(el, text) {
   document.querySelector(el).textContent = text
 }
+
+const base = 'hello'
+
+import(`../alias/${base}.js`).then((mod) => {
+  text('.dynamic-import-with-vars', mod.hello())
+})
+
+import(`@/${base}.js`).then((mod) => {
+  text('.dynamic-import-with-vars-alias', mod.hello())
+})
+
+import(`../alias/${base}.js?raw`).then((mod) => {
+  text('.dynamic-import-with-vars-raw', JSON.stringify(mod))
+})

packages/playground/dynamic-import/vite.config.js

@@ -1,7 +1,8 @@
 const fs = require('fs')
 const path = require('path')
+const vite = require('vite')
 
-module.exports = {
+module.exports = vite.defineConfig({
   plugins: [
     {
       name: 'copy',
@@ -20,5 +21,10 @@ module.exports = {
         )
       }
     }
-  ]
-}
+  ],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'alias')
+    }
+  }
+})

packages/vite/src/node/build.ts

@@ -26,7 +26,7 @@ import { copyDir, emptyDir, lookupFile, normalizePath } from './utils'
 import { manifestPlugin } from './plugins/manifest'
 import commonjsPlugin from '@rollup/plugin-commonjs'
 import type { RollupCommonJSOptions } from 'types/commonjs'
-import dynamicImportVars from '@rollup/plugin-dynamic-import-vars'
+import { dynamicImportVarsPlugin } from './plugins/dynamicImportVars'
 import type { RollupDynamicImportVarsOptions } from 'types/dynamicImportVars'
 import type { Logger } from './logger'
 import type { TransformOptions } from 'esbuild'
@@ -285,7 +285,7 @@ export function resolveBuildPlugins(config: ResolvedConfig): {
       watchPackageDataPlugin(config),
       commonjsPlugin(options.commonjsOptions),
       dataURIPlugin(),
-      dynamicImportVars(options.dynamicImportVarsOptions),
+      dynamicImportVarsPlugin(config),
       assetImportMetaUrlPlugin(config),
       ...(options.rollupOptions.plugins
         ? (options.rollupOptions.plugins.filter(Boolean) as Plugin[])

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

@@ -0,0 +1,242 @@
+import path from 'path'
+import MagicString from 'magic-string'
+import { init, parse as parseImports } from 'es-module-lexer'
+import type { ImportSpecifier } from 'es-module-lexer'
+import type { Plugin } from '../plugin'
+import type { ResolvedConfig } from '../config'
+import { parseRequest } from '../utils'
+import { parse as parseJS } from 'acorn'
+import { createFilter } from '@rollup/pluginutils'
+import { dynamicImportToGlob } from '@rollup/plugin-dynamic-import-vars'
+import type { TransformGlobImportResult } from './importMetaGlob'
+import { transformGlobImport } from './importMetaGlob'
+import type { ViteDevServer } from '../server'
+
+interface DynamicImportRequest {
+  as?: 'raw'
+}
+
+interface DynamicImportPattern {
+  globParams: DynamicImportRequest | null
+  userPattern: string
+  rawPattern: string
+}
+
+const dynamicImportHelper = (glob: Record<string, any>, path: string) => {
+  const v = glob[path]
+  if (v) {
+    return typeof v === 'function' ? v() : Promise.resolve(v)
+  }
+  return new Promise((_, reject) => {
+    ;(typeof queueMicrotask === 'function' ? queueMicrotask : setTimeout)(
+      reject.bind(null, new Error('Unknown variable dynamic import: ' + path))
+    )
+  })
+}
+export const dynamicImportHelperId = '/@vite/dynamic-import-helper'
+
+export function parseDynamicImportPattern(
+  strings: string
+): DynamicImportPattern | null {
+  const filename = strings.slice(1, -1)
+  const rawQuery = parseRequest(filename)
+  let globParams: DynamicImportRequest | null = null
+  const ast = (
+    parseJS(strings, {
+      ecmaVersion: 'latest',
+      sourceType: 'module'
+    }) as any
+  ).body[0].expression
+
+  const userPatternQuery = dynamicImportToGlob(ast, filename)
+  if (!userPatternQuery) {
+    return null
+  }
+
+  const [userPattern] = userPatternQuery.split('?', 2)
+  const [rawPattern] = filename.split('?', 2)
+
+  if (rawQuery?.raw !== undefined) {
+    globParams = { as: 'raw' }
+  }
+
+  return {
+    globParams,
+    userPattern,
+    rawPattern
+  }
+}
+
+export async function transformDynamicImportGlob(
+  source: string,
+  root: string,
+  importer: string,
+  start: number,
+  end: number,
+  resolve: (url: string, importer?: string) => Promise<string | undefined>
+): Promise<{
+  glob: TransformGlobImportResult
+  pattern: string
+  rawPattern: string
+} | null> {
+  let fileName = source.slice(start, end)
+
+  if (fileName[1] !== '.' && fileName[1] !== '/' && resolve) {
+    const resolvedFileName = await resolve(fileName.slice(1, -1), importer)
+    if (!resolvedFileName) {
+      return null
+    }
+    const relativeFileName = path.posix.relative(
+      path.dirname(importer),
+      resolvedFileName
+    )
+    fileName = `\`${relativeFileName}\``
+  }
+
+  const dynamicImportPattern = parseDynamicImportPattern(fileName)
+  if (!dynamicImportPattern) {
+    return null
+  }
+  const { globParams, rawPattern, userPattern } = dynamicImportPattern
+  const params = globParams ? `, ${JSON.stringify(globParams)}` : ''
+  const exp = `import.meta.glob(${JSON.stringify(userPattern)}${params})`
+  const glob = await transformGlobImport(
+    exp,
+    importer,
+    root,
+    resolve,
+    false,
+    false
+  )
+
+  return {
+    rawPattern,
+    pattern: userPattern,
+    glob: glob!
+  }
+}
+
+export function dynamicImportHelperPlugin(): Plugin {
+  return {
+    name: 'vite:dynamic-import-helper',
+    resolveId(id) {
+      if (id === dynamicImportHelperId) {
+        return id
+      }
+    },
+
+    load(id) {
+      if (id === dynamicImportHelperId) {
+        return 'export default' + dynamicImportHelper.toString()
+      }
+    }
+  }
+}
+
+export function dynamicImportVarsPlugin(config: ResolvedConfig): Plugin {
+  const resolve = config.createResolver({
+    preferRelative: true,
+    tryIndex: false,
+    extensions: []
+  })
+  const { include, exclude, warnOnError } =
+    config.build.dynamicImportVarsOptions
+  const filter = createFilter(include, exclude)
+  let server: ViteDevServer
+
+  return {
+    name: 'vite:dynamic-import-vars',
+
+    configureServer(_server) {
+      server = _server
+    },
+
+    async transform(source, importer) {
+      if (!filter(importer)) {
+        return
+      }
+
+      await init
+
+      let imports: readonly ImportSpecifier[] = []
+      try {
+        imports = parseImports(source)[0]
+      } catch (e: any) {
+        this.error(e, e.idx)
+      }
+
+      if (!imports.length) {
+        return null
+      }
+
+      let s: MagicString | undefined
+      let needDynamicImportHelper = false
+
+      for (let index = 0; index < imports.length; index++) {
+        const {
+          s: start,
+          e: end,
+          ss: expStart,
+          se: expEnd,
+          d: dynamicIndex
+        } = imports[index]
+
+        if (dynamicIndex === -1 || source[start] !== '`') {
+          continue
+        }
+
+        s ||= new MagicString(source)
+        let result
+        try {
+          result = await transformDynamicImportGlob(
+            source,
+            config.root,
+            importer,
+            start,
+            end,
+            resolve
+          )
+        } catch (error) {
+          if (warnOnError) {
+            this.warn(error)
+          } else {
+            this.error(error)
+          }
+        }
+
+        if (!result) {
+          continue
+        }
+
+        const { rawPattern, glob } = result
+
+        needDynamicImportHelper = true
+        s.overwrite(
+          expStart,
+          expEnd,
+          `__variableDynamicImportRuntimeHelper(${glob.s.toString()}, \`${rawPattern}\`)`
+        )
+        if (server) {
+          const allGlobs = glob.matches.map((i) => i.globsResolved)
+          server._importGlobMap.set(importer, allGlobs)
+          glob.files.forEach((file) => {
+            // update watcher
+            server!.watcher.add(path.posix.dirname(file))
+          })
+        }
+      }
+
+      if (s) {
+        if (needDynamicImportHelper) {
+          s.prepend(
+            `import __variableDynamicImportRuntimeHelper from "${dynamicImportHelperId}";`
+          )
+        }
+        return {
+          code: s.toString(),
+          map: config.build.sourcemap ? s.generateMap({ hires: true }) : null
+        }
+      }
+    }
+  }
+}