feat: dynamic import support ?url and ?worker (#8261)

Author: poyoho

packages/vite/src/node/__tests__/plugins/dynamicImportVar/__snapshots__/parse.test.ts.snap

@@ -1,9 +1,11 @@
 // Vitest Snapshot v1
 
-exports[`parse positives > ? in url 1`] = `"__variableDynamicImportRuntimeHelper((import.meta.glob(\\"./mo?ds/*.js\\", {\\"as\\":\\"raw\\",\\"import\\":\\"*\\"})), \`./mo?ds/\${base ?? foo}.js\`)"`;
+exports[`parse positives > ? in url 1`] = `"__variableDynamicImportRuntimeHelper((import.meta.glob(\\"./mo?ds/*.js\\", {\\"as\\":\\"url\\",\\"import\\":\\"*\\"})), \`./mo?ds/\${base ?? foo}.js\`)"`;
 
 exports[`parse positives > ? in variables 1`] = `"__variableDynamicImportRuntimeHelper((import.meta.glob(\\"./mods/*.js\\", {\\"as\\":\\"raw\\",\\"import\\":\\"*\\"})), \`./mods/\${base ?? foo}.js\`)"`;
 
+exports[`parse positives > ? in worker 1`] = `"__variableDynamicImportRuntimeHelper((import.meta.glob(\\"./mo?ds/*.js\\", {\\"as\\":\\"worker\\",\\"import\\":\\"*\\"})), \`./mo?ds/\${base ?? foo}.js\`)"`;
+
 exports[`parse positives > alias path 1`] = `"__variableDynamicImportRuntimeHelper((import.meta.glob(\\"./mods/*.js\\")), \`./mods/\${base}.js\`)"`;
 
 exports[`parse positives > basic 1`] = `"__variableDynamicImportRuntimeHelper((import.meta.glob(\\"./mods/*.js\\")), \`./mods/\${base}.js\`)"`;
@@ -14,4 +16,4 @@ exports[`parse positives > with multi ../ and itself 1`] = `"__variableDynamicIm
 
 exports[`parse positives > with query raw 1`] = `"__variableDynamicImportRuntimeHelper((import.meta.glob(\\"./mods/*.js\\", {\\"as\\":\\"raw\\",\\"import\\":\\"*\\"})), \`./mods/\${base}.js\`)"`;
 
-exports[`parse positives > with query url 1`] = `"__variableDynamicImportRuntimeHelper((import.meta.glob(\\"./mods/*.js\\")), \`./mods/\${base}.js\`)"`;
+exports[`parse positives > with query url 1`] = `"__variableDynamicImportRuntimeHelper((import.meta.glob(\\"./mods/*.js\\", {\\"as\\":\\"url\\",\\"import\\":\\"*\\"})), \`./mods/\${base}.js\`)"`;

packages/vite/src/node/__tests__/plugins/dynamicImportVar/parse.test.ts

@@ -39,7 +39,11 @@ describe('parse positives', () => {
   })
 
   it('? in url', async () => {
-    expect(await run('`./mo?ds/${base ?? foo}.js?raw`')).toMatchSnapshot()
+    expect(await run('`./mo?ds/${base ?? foo}.js?url`')).toMatchSnapshot()
+  })
+
+  it('? in worker', async () => {
+    expect(await run('`./mo?ds/${base ?? foo}.js?worker`')).toMatchSnapshot()
   })
 
   it('with ../ and itself', async () => {

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

@@ -4,6 +4,7 @@ import { init, parse as parseImports } from 'es-module-lexer'
 import type { ImportSpecifier } from 'es-module-lexer'
 import { parse as parseJS } from 'acorn'
 import { dynamicImportToGlob } from '@rollup/plugin-dynamic-import-vars'
+import type { KnownAsTypeMap } from 'types/importGlob'
 import type { Plugin } from '../plugin'
 import type { ResolvedConfig } from '../config'
 import {
@@ -19,7 +20,7 @@ import { toAbsoluteGlob } from './importMetaGlob'
 export const dynamicImportHelperId = '/@vite/dynamic-import-helper'
 
 interface DynamicImportRequest {
-  as?: 'raw'
+  as?: keyof KnownAsTypeMap
 }
 
 interface DynamicImportPattern {
@@ -65,6 +66,14 @@ function parseDynamicImportPattern(
     globParams = { as: 'raw' }
   }
 
+  if (rawQuery?.url !== undefined) {
+    globParams = { as: 'url' }
+  }
+
+  if (rawQuery?.worker !== undefined) {
+    globParams = { as: 'worker' }
+  }
+
   return {
     globParams,
     userPattern,

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

@@ -1,5 +1,5 @@
 import { expect, test } from 'vitest'
-import { getColor, page, serverLogs, untilUpdated } from '~utils'
+import { getColor, isBuild, page, serverLogs, untilUpdated } from '~utils'
 
 test('should load literal dynamic import', async () => {
   await page.click('.baz')
@@ -93,6 +93,22 @@ test('should load dynamic import with vars raw', async () => {
   )
 })
 
+test('should load dynamic import with vars url', async () => {
+  await untilUpdated(
+    () => page.textContent('.dynamic-import-with-vars-url'),
+    isBuild ? 'data:application/javascript' : '/alias/url.js',
+    true
+  )
+})
+
+test('should load dynamic import with vars worker', async () => {
+  await untilUpdated(
+    () => page.textContent('.dynamic-import-with-vars-worker'),
+    'load worker',
+    true
+  )
+})
+
 test('should load dynamic import with css in package', async () => {
   await page.click('.pkg-css')
   await untilUpdated(() => getColor('.pkg-css'), 'blue', true)

playground/dynamic-import/alias/url.js

@@ -0,0 +1 @@
+export const url = 'load url'

playground/dynamic-import/alias/worker.js

@@ -0,0 +1,5 @@
+self.onmessage = (event) => {
+  self.postMessage({
+    msg: 'load worker'
+  })
+}

playground/dynamic-import/index.html

@@ -19,6 +19,12 @@
 <p>dynamic-import-with-vars-raw</p>
 <div class="dynamic-import-with-vars-raw">todo</div>
 
+<p>dynamic-import-with-vars-url</p>
+<div class="dynamic-import-with-vars-url">todo</div>
+
+<p>dynamic-import-with-vars-worker</p>
+<div class="dynamic-import-with-vars-worker">todo</div>
+
 <div class="view"></div>
 
 <div class="dynamic-import-self"></div>

playground/dynamic-import/nested/index.js

@@ -97,6 +97,21 @@ import(`../alias/${base}.js?raw`).then((mod) => {
   text('.dynamic-import-with-vars-raw', JSON.stringify(mod))
 })
 
+base = 'url'
+import(`../alias/${base}.js?url`).then((mod) => {
+  text('.dynamic-import-with-vars-url', JSON.stringify(mod))
+})
+
+base = 'worker'
+import(`../alias/${base}.js?worker`).then((workerMod) => {
+  const worker = new workerMod.default()
+  worker.postMessage('1')
+  worker.addEventListener('message', (ev) => {
+    console.log(ev)
+    text('.dynamic-import-with-vars-worker', JSON.stringify(ev.data))
+  })
+})
+
 base = 'hi'
 import(`@/${base}.js`).then((mod) => {
   text('.dynamic-import-with-vars-alias', mod.hi())

playground/worker/worker/main-module.js

@@ -78,3 +78,15 @@ w2.port.addEventListener('message', (ev) => {
   text('.shared-worker-import-meta-url', JSON.stringify(ev.data))
 })
 w2.port.start()
+
+const workers = import.meta.glob('../importMetaGlobEager.*.js', {
+  as: 'worker',
+  eager: true
+})
+const importMetaGlobEagerWorker = new workers[
+  '../importMetaGlobEager.worker.js'
+].default()
+importMetaGlobEagerWorker.postMessage('1')
+importMetaGlobEagerWorker.addEventListener('message', (e) => {
+  text('.importMetaGlobEager-worker', JSON.stringify(e.data))
+})