diff --git a/packages/vite/src/node/__tests__/plugins/dynamicImportVar/__snapshots__/parse.test.ts.snap b/packages/vite/src/node/__tests__/plugins/dynamicImportVar/__snapshots__/parse.test.ts.snap
index b5f649d6bc336b..a90bf10d119042 100644
--- a/packages/vite/src/node/__tests__/plugins/dynamicImportVar/__snapshots__/parse.test.ts.snap
+++ b/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\`)"`;
diff --git a/packages/vite/src/node/__tests__/plugins/dynamicImportVar/parse.test.ts b/packages/vite/src/node/__tests__/plugins/dynamicImportVar/parse.test.ts
index 422dcb59ca5b37..cfd816d00fe8b5 100644
--- a/packages/vite/src/node/__tests__/plugins/dynamicImportVar/parse.test.ts
+++ b/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 () => {
diff --git a/packages/vite/src/node/plugins/dynamicImportVars.ts b/packages/vite/src/node/plugins/dynamicImportVars.ts
index 93250f74618316..0f32f5ff581920 100644
--- a/packages/vite/src/node/plugins/dynamicImportVars.ts
+++ b/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,
diff --git a/playground/dynamic-import/__tests__/dynamic-import.spec.ts b/playground/dynamic-import/__tests__/dynamic-import.spec.ts
index cec996b46a669f..8b599462470d18 100644
--- a/playground/dynamic-import/__tests__/dynamic-import.spec.ts
+++ b/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)
diff --git a/playground/dynamic-import/alias/url.js b/playground/dynamic-import/alias/url.js
new file mode 100644
index 00000000000000..c9b0c79461d91e
--- /dev/null
+++ b/playground/dynamic-import/alias/url.js
@@ -0,0 +1 @@
+export const url = 'load url'
diff --git a/playground/dynamic-import/alias/worker.js b/playground/dynamic-import/alias/worker.js
new file mode 100644
index 00000000000000..6206a6536b8064
--- /dev/null
+++ b/playground/dynamic-import/alias/worker.js
@@ -0,0 +1,5 @@
+self.onmessage = (event) => {
+ self.postMessage({
+ msg: 'load worker'
+ })
+}
diff --git a/playground/dynamic-import/index.html b/playground/dynamic-import/index.html
index 8eb5e60098a15c..d13e842804eaa7 100644
--- a/playground/dynamic-import/index.html
+++ b/playground/dynamic-import/index.html
@@ -19,6 +19,12 @@
dynamic-import-with-vars-raw
todo
+dynamic-import-with-vars-url
+todo
+
+dynamic-import-with-vars-worker
+todo
+
diff --git a/playground/dynamic-import/nested/index.js b/playground/dynamic-import/nested/index.js
index baad37bc0d9228..dc4992abc85021 100644
--- a/playground/dynamic-import/nested/index.js
+++ b/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())
diff --git a/playground/worker/worker/main-module.js b/playground/worker/worker/main-module.js
index a1205a4a7e46b8..f83dce99011bca 100644
--- a/playground/worker/worker/main-module.js
+++ b/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))
+})