diff --git a/packages/playground/worker/__tests__/es/es-worker.spec.ts b/packages/playground/worker/__tests__/es/es-worker.spec.ts index a815596721c268..27f81b010df74f 100644 --- a/packages/playground/worker/__tests__/es/es-worker.spec.ts +++ b/packages/playground/worker/__tests__/es/es-worker.spec.ts @@ -51,8 +51,12 @@ test.concurrent.each([[true], [false]])('shared worker', async (doTick) => { await waitSharedWorkerTick(page) }) -test('worker emitted', async () => { - await untilUpdated(() => page.textContent('.nested-worker'), 'pong') +test('worker emitted and import.meta.url in nested worker (serve)', async () => { + expect(await page.textContent('.nested-worker')).toMatch('/worker-nested') + expect(await page.textContent('.nested-worker-module')).toMatch('/sub-worker') + expect(await page.textContent('.nested-worker-constructor')).toMatch( + '"type":"constructor"' + ) }) if (isBuild) { @@ -60,7 +64,7 @@ if (isBuild) { // assert correct files test('inlined code generation', async () => { const files = fs.readdirSync(assetsDir) - expect(files.length).toBe(21) + expect(files.length).toBe(26) const index = files.find((f) => f.includes('main-module')) const content = fs.readFileSync(path.resolve(assetsDir, index), 'utf-8') const worker = files.find((f) => f.includes('my-worker')) @@ -79,6 +83,15 @@ if (isBuild) { expect(content).toMatch(`(window.URL||window.webkitURL).createObjectURL`) expect(content).toMatch(`window.Blob`) }) + + test('worker emitted and import.meta.url in nested worker (build)', async () => { + expect(await page.textContent('.nested-worker-module')).toMatch( + '"type":"module"' + ) + expect(await page.textContent('.nested-worker-constructor')).toMatch( + '"type":"constructor"' + ) + }) } test('module worker', async () => { @@ -100,3 +113,11 @@ test('emit chunk', async () => { '"A string/es/"' ) }) + +test('import.meta.glob in worker', async () => { + expect(await page.textContent('.importMetaGlob-worker')).toMatch('["') +}) + +test('import.meta.globEager in worker', async () => { + expect(await page.textContent('.importMetaGlobEager-worker')).toMatch('["') +}) diff --git a/packages/playground/worker/__tests__/iife/worker.spec.ts b/packages/playground/worker/__tests__/iife/worker.spec.ts index 9be78d57edd702..16750a893cb073 100644 --- a/packages/playground/worker/__tests__/iife/worker.spec.ts +++ b/packages/playground/worker/__tests__/iife/worker.spec.ts @@ -51,10 +51,11 @@ test.concurrent.each([[true], [false]])('shared worker', async (doTick) => { await waitSharedWorkerTick(page) }) -test('worker emitted and import.meta.url in nested worker', async () => { - await untilUpdated( - () => page.textContent('.nested-worker'), - 'pong http://localhost:3000/iife/sub-worker.js?worker_file' +test('worker emitted and import.meta.url in nested worker (serve)', async () => { + expect(await page.textContent('.nested-worker')).toMatch('/worker-nested') + expect(await page.textContent('.nested-worker-module')).toMatch('/sub-worker') + expect(await page.textContent('.nested-worker-constructor')).toMatch( + '"type":"constructor"' ) }) @@ -63,7 +64,7 @@ if (isBuild) { // assert correct files test('inlined code generation', async () => { const files = fs.readdirSync(assetsDir) - expect(files.length).toBe(12) + expect(files.length).toBe(13) const index = files.find((f) => f.includes('main-module')) const content = fs.readFileSync(path.resolve(assetsDir, index), 'utf-8') const worker = files.find((f) => f.includes('my-worker')) @@ -82,6 +83,15 @@ if (isBuild) { expect(content).toMatch(`(window.URL||window.webkitURL).createObjectURL`) expect(content).toMatch(`window.Blob`) }) + + test('worker emitted and import.meta.url in nested worker (build)', async () => { + expect(await page.textContent('.nested-worker-module')).toMatch( + '"type":"module"' + ) + expect(await page.textContent('.nested-worker-constructor')).toMatch( + '"type":"constructor"' + ) + }) } test('module worker', async () => { @@ -94,3 +104,7 @@ test('classic worker', async () => { expect(await page.textContent('.classic-worker')).toMatch('A classic') expect(await page.textContent('.classic-shared-worker')).toMatch('A classic') }) + +test('import.meta.globEager in worker', async () => { + expect(await page.textContent('.importMetaGlobEager-worker')).toMatch('["') +}) diff --git a/packages/playground/worker/__tests__/sourcemap-hidden/sourcemap-hidden-worker.spec.ts b/packages/playground/worker/__tests__/sourcemap-hidden/sourcemap-hidden-worker.spec.ts index 1797ac5269e411..e4cb3318ebd5f5 100644 --- a/packages/playground/worker/__tests__/sourcemap-hidden/sourcemap-hidden-worker.spec.ts +++ b/packages/playground/worker/__tests__/sourcemap-hidden/sourcemap-hidden-worker.spec.ts @@ -9,7 +9,7 @@ if (isBuild) { test('sourcemap generation for web workers', async () => { const files = fs.readdirSync(assetsDir) // should have 2 worker chunk - expect(files.length).toBe(24) + expect(files.length).toBe(26) const index = files.find((f) => f.includes('main-module')) const content = fs.readFileSync(path.resolve(assetsDir, index), 'utf-8') const indexSourcemap = getSourceMapUrl(content) diff --git a/packages/playground/worker/__tests__/sourcemap-inline/sourcemap-inline-worker.spec.ts b/packages/playground/worker/__tests__/sourcemap-inline/sourcemap-inline-worker.spec.ts index 89af0878213ab9..ceda7dae1fec7c 100644 --- a/packages/playground/worker/__tests__/sourcemap-inline/sourcemap-inline-worker.spec.ts +++ b/packages/playground/worker/__tests__/sourcemap-inline/sourcemap-inline-worker.spec.ts @@ -9,7 +9,7 @@ if (isBuild) { test('sourcemap generation for web workers', async () => { const files = fs.readdirSync(assetsDir) // should have 2 worker chunk - expect(files.length).toBe(12) + expect(files.length).toBe(13) const index = files.find((f) => f.includes('main-module')) const content = fs.readFileSync(path.resolve(assetsDir, index), 'utf-8') const indexSourcemap = getSourceMapUrl(content) diff --git a/packages/playground/worker/__tests__/sourcemap/sourcemap-worker.spec.ts b/packages/playground/worker/__tests__/sourcemap/sourcemap-worker.spec.ts index 24af73d5e3edfa..04cc079b4bc289 100644 --- a/packages/playground/worker/__tests__/sourcemap/sourcemap-worker.spec.ts +++ b/packages/playground/worker/__tests__/sourcemap/sourcemap-worker.spec.ts @@ -9,7 +9,7 @@ if (isBuild) { test('sourcemap generation for web workers', async () => { const files = fs.readdirSync(assetsDir) // should have 2 worker chunk - expect(files.length).toBe(24) + expect(files.length).toBe(26) const index = files.find((f) => f.includes('main-module')) const content = fs.readFileSync(path.resolve(assetsDir, index), 'utf-8') const indexSourcemap = getSourceMapUrl(content) diff --git a/packages/playground/worker/classic-shared-worker.js b/packages/playground/worker/classic-shared-worker.js index 8bd39e194f0618..e629208f05cf0a 100644 --- a/packages/playground/worker/classic-shared-worker.js +++ b/packages/playground/worker/classic-shared-worker.js @@ -4,3 +4,6 @@ self.onconnect = (event) => { const port = event.ports[0] port.postMessage(self.constant) } + +// for sourcemap +console.log('classic-shared-worker.js') diff --git a/packages/playground/worker/classic-worker.js b/packages/playground/worker/classic-worker.js index 0700428ee0c80b..238857acf00a58 100644 --- a/packages/playground/worker/classic-worker.js +++ b/packages/playground/worker/classic-worker.js @@ -3,3 +3,6 @@ importScripts(`/${self.location.pathname.split("/")[1]}/classic.js`) self.addEventListener('message', () => { self.postMessage(self.constant) }) + +// for sourcemap +console.log("classic-worker.js") diff --git a/packages/playground/worker/emit-chunk-dynamic-import-worker.js b/packages/playground/worker/emit-chunk-dynamic-import-worker.js index f96e0b15d26497..9c3ede1faa2ed9 100644 --- a/packages/playground/worker/emit-chunk-dynamic-import-worker.js +++ b/packages/playground/worker/emit-chunk-dynamic-import-worker.js @@ -1,3 +1,6 @@ -import('./modules/module').then((module) => { +import('./modules/module0').then((module) => { self.postMessage(module.default + import.meta.env.BASE_URL) }) + +// for sourcemap +console.log('emit-chunk-dynamic-import-worker.js') diff --git a/packages/playground/worker/emit-chunk-nested-worker.js b/packages/playground/worker/emit-chunk-nested-worker.js index 6cb72b9488cfaf..629322033f3d9b 100644 --- a/packages/playground/worker/emit-chunk-nested-worker.js +++ b/packages/playground/worker/emit-chunk-nested-worker.js @@ -26,3 +26,6 @@ import('./module-and-worker').then((res) => { data: res.module }) }) + +// for sourcemap +console.log('emit-chunk-nested-worker.js') diff --git a/packages/playground/worker/emit-chunk-sub-worker.js b/packages/playground/worker/emit-chunk-sub-worker.js index 5d20becc781dd7..60d302e20bbb8a 100644 --- a/packages/playground/worker/emit-chunk-sub-worker.js +++ b/packages/playground/worker/emit-chunk-sub-worker.js @@ -6,3 +6,6 @@ Promise.all([ const _data = { ...data[0], ...data[1], ...data[2] } self.postMessage(_data) }) + +// for sourcemap +console.log('emit-chunk-sub-worker.js') diff --git a/packages/playground/worker/importMetaGlob.worker.js b/packages/playground/worker/importMetaGlob.worker.js new file mode 100644 index 00000000000000..074a986c9bd808 --- /dev/null +++ b/packages/playground/worker/importMetaGlob.worker.js @@ -0,0 +1,8 @@ +const modules = import.meta.glob('./modules/*js') + +self.onmessage = function (e) { + self.postMessage(Object.keys(modules)) +} + +// for sourcemap +console.log('importMetaGlob.worker.js') diff --git a/packages/playground/worker/importMetaGlobEager.worker.js b/packages/playground/worker/importMetaGlobEager.worker.js new file mode 100644 index 00000000000000..7947f65ab8c7f9 --- /dev/null +++ b/packages/playground/worker/importMetaGlobEager.worker.js @@ -0,0 +1,8 @@ +const modules = import.meta.globEager('./modules/*js') + +self.onmessage = function (e) { + self.postMessage(Object.keys(modules)) +} + +// for sourcemap +console.log('importMetaGlobEager.worker.js') diff --git a/packages/playground/worker/index.html b/packages/playground/worker/index.html index 602aa3d06bfcac..b0c524305fc33e 100644 --- a/packages/playground/worker/index.html +++ b/packages/playground/worker/index.html @@ -40,11 +40,25 @@

format iife:

- import NestedWorker from './worker-nested-worker?worker' - nested worker + import NestedWorker from './worker-nested-worker?worker' - import.meta.url .nested-worker

+

+ import NestedWorker from './worker-nested-worker?worker' - nested module + worker + .nested-worker-module +

+ + +

+ import NestedWorker from './worker-nested-worker?worker' - nested worker + constructor + .nested-worker-constructor +

+ +

new Worker(new URL('./classic-worker.js', import.meta.url)) .classic-worker @@ -58,9 +72,22 @@

format iife:

+

+ use import.meta.globEager in iife worker + .importMetaGlobEager-worker +

+ +
+

+

+ use import.meta.glob in es worker + .importMetaGlob-worker +

+ +

worker emit chunk
module and worker:worker in worker file
diff --git a/packages/playground/worker/module-and-worker.js b/packages/playground/worker/module-and-worker.js index 659e556f08e4a6..036dcdf4edf11d 100644 --- a/packages/playground/worker/module-and-worker.js +++ b/packages/playground/worker/module-and-worker.js @@ -1,5 +1,8 @@ -import constant from './modules/module' +import constant from './modules/module0' self.postMessage(constant) export const module = 'module and worker' + +// for sourcemap +console.log('module-and-worker.js') diff --git a/packages/playground/worker/modules/module.js b/packages/playground/worker/modules/module0.js similarity index 100% rename from packages/playground/worker/modules/module.js rename to packages/playground/worker/modules/module0.js diff --git a/packages/playground/worker/modules/module2.js b/packages/playground/worker/modules/module2.js index 60447933b8b16e..70c0fc94586ffd 100644 --- a/packages/playground/worker/modules/module2.js +++ b/packages/playground/worker/modules/module2.js @@ -1,3 +1,3 @@ -export * from './module' +export * from './module0' export * from './module1' export const msg2 = 'module2' diff --git a/packages/playground/worker/modules/module3.js b/packages/playground/worker/modules/module3.js index 33355423bc030e..65f7e274da3242 100644 --- a/packages/playground/worker/modules/module3.js +++ b/packages/playground/worker/modules/module3.js @@ -1,2 +1,2 @@ -export * from './module' +export * from './module0' export const msg3 = 'module3' diff --git a/packages/playground/worker/my-shared-worker.ts b/packages/playground/worker/my-shared-worker.ts index cd5b24f265b955..caab5257394266 100644 --- a/packages/playground/worker/my-shared-worker.ts +++ b/packages/playground/worker/my-shared-worker.ts @@ -14,3 +14,6 @@ onconnect = (event) => { } } } + +// for sourcemap +console.log('my-shared-worker.js') diff --git a/packages/playground/worker/my-worker.ts b/packages/playground/worker/my-worker.ts index dd6061885128c7..553754f4901030 100644 --- a/packages/playground/worker/my-worker.ts +++ b/packages/playground/worker/my-worker.ts @@ -6,3 +6,6 @@ self.onmessage = (e) => { self.postMessage({ msg, mode, bundleWithPlugin }) } } + +// for sourcemap +console.log('my-worker.js') diff --git a/packages/playground/worker/possible-ts-output-worker.mjs b/packages/playground/worker/possible-ts-output-worker.mjs index 25f1a447617cd9..db76614bc78267 100644 --- a/packages/playground/worker/possible-ts-output-worker.mjs +++ b/packages/playground/worker/possible-ts-output-worker.mjs @@ -5,3 +5,6 @@ self.onmessage = (e) => { self.postMessage({ msg, mode }) } } + +// for sourcemap +console.log('possible-ts-output-worker.mjs') diff --git a/packages/playground/worker/sub-worker.js b/packages/playground/worker/sub-worker.js index eff49dfbb46ba6..37d5d4effabb27 100644 --- a/packages/playground/worker/sub-worker.js +++ b/packages/playground/worker/sub-worker.js @@ -1,5 +1,8 @@ self.onmessage = (event) => { if (event.data === 'ping') { - self.postMessage(`pong ${import.meta.url}`) + self.postMessage(`pong ${self.location.href}`) } } + +// for sourcemap +console.log('sub-worker.js') diff --git a/packages/playground/worker/url-shared-worker.js b/packages/playground/worker/url-shared-worker.js index 3535d5c277ec84..9ef32c58f6c64b 100644 --- a/packages/playground/worker/url-shared-worker.js +++ b/packages/playground/worker/url-shared-worker.js @@ -1,6 +1,9 @@ -import constant from './modules/module' +import constant from './modules/module0' self.onconnect = (event) => { const port = event.ports[0] port.postMessage(constant) } + +// for sourcemap +console.log('url-shared-worker.js') diff --git a/packages/playground/worker/url-worker.js b/packages/playground/worker/url-worker.js index c25cbefdff89ec..1ba50225ee339d 100644 --- a/packages/playground/worker/url-worker.js +++ b/packages/playground/worker/url-worker.js @@ -1 +1,4 @@ -self.postMessage('A string' + import.meta.env.BASE_URL + import.meta.url) +self.postMessage('A string' + import.meta.env.BASE_URL + self.location.url) + +// for sourcemap +console.log('url-worker.js') diff --git a/packages/playground/worker/worker-nested-worker.js b/packages/playground/worker/worker-nested-worker.js index 6d4d1e4969005f..e74d1db760409b 100644 --- a/packages/playground/worker/worker-nested-worker.js +++ b/packages/playground/worker/worker-nested-worker.js @@ -8,6 +8,24 @@ self.onmessage = (event) => { } } -subWorker.onmessage = (event) => { - self.postMessage(event.data) +self.postMessage(self.location.href) + +subWorker.onmessage = (ev) => { + self.postMessage({ + type: 'module', + data: ev.data + }) } + +const classicWorker = new Worker(new URL('./url-worker.js', import.meta.url), { + type: 'module' +}) +classicWorker.addEventListener('message', (ev) => { + self.postMessage({ + type: 'constructor', + data: ev.data + }) +}) + +// for sourcemap +console.log('worker-nested-worker.js') diff --git a/packages/playground/worker/worker/main-format-es.js b/packages/playground/worker/worker/main-format-es.js index 801c13469151a3..e418c82a136927 100644 --- a/packages/playground/worker/worker/main-format-es.js +++ b/packages/playground/worker/worker/main-format-es.js @@ -1,5 +1,6 @@ // run when format es import NestedWorker from '../emit-chunk-nested-worker?worker' +import ImportMetaGlobWorker from '../importMetaGlob.worker?worker' function text(el, text) { document.querySelector(el).textContent = text @@ -39,3 +40,11 @@ const moduleWorker = new Worker( moduleWorker.addEventListener('message', (ev) => { text('.module-and-worker-worker', JSON.stringify(ev.data)) }) + +const importMetaGlobWorker = new ImportMetaGlobWorker() + +importMetaGlobWorker.postMessage('1') + +importMetaGlobWorker.addEventListener('message', (e) => { + text('.importMetaGlob-worker', JSON.stringify(e.data)) +}) diff --git a/packages/playground/worker/worker/main-module.js b/packages/playground/worker/worker/main-module.js index 417cf1728c4b09..6284ca63686e99 100644 --- a/packages/playground/worker/worker/main-module.js +++ b/packages/playground/worker/worker/main-module.js @@ -3,6 +3,7 @@ import InlineWorker from '../my-worker?worker&inline' import mySharedWorker from '../my-shared-worker?sharedworker&name=shared' import TSOutputWorker from '../possible-ts-output-worker?worker' import NestedWorker from '../worker-nested-worker?worker' +import ImportMetaGlobEagerWorker from '../importMetaGlobEager.worker?worker' import { mode } from '../modules/workerImport' function text(el, text) { @@ -56,6 +57,13 @@ const nestedWorker = new NestedWorker() nestedWorker.addEventListener('message', (ev) => { if (typeof ev.data === 'string') { text('.nested-worker', JSON.stringify(ev.data)) + } else if (typeof ev.data === 'object') { + const data = ev.data + if (data.type === 'module') { + text('.nested-worker-module', JSON.stringify(ev.data)) + } else if (data.type === 'constructor') { + text('.nested-worker-constructor', JSON.stringify(ev.data)) + } } }) nestedWorker.postMessage('ping') @@ -83,3 +91,11 @@ w2.port.addEventListener('message', (ev) => { text('.shared-worker-import-meta-url', JSON.stringify(ev.data)) }) w2.port.start() + +const importMetaGlobEagerWorker = new ImportMetaGlobEagerWorker() + +importMetaGlobEagerWorker.postMessage('1') + +importMetaGlobEagerWorker.addEventListener('message', (e) => { + text('.importMetaGlobEager-worker', JSON.stringify(e.data)) +}) diff --git a/packages/vite/src/node/plugins/importAnalysisBuild.ts b/packages/vite/src/node/plugins/importAnalysisBuild.ts index 9f4c75025fff27..ff315d008f57a5 100644 --- a/packages/vite/src/node/plugins/importAnalysisBuild.ts +++ b/packages/vite/src/node/plugins/importAnalysisBuild.ts @@ -87,8 +87,8 @@ function preload(baseModule: () => Promise<{}>, deps?: string[]) { */ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin { const ssr = !!config.build.ssr - const insertPreload = !(ssr || !!config.build.lib) const isWorker = config.isWorker + const insertPreload = !(ssr || !!config.build.lib || isWorker) const scriptRel = config.build.polyfillModulePreload ? `'modulepreload'` @@ -123,11 +123,6 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin { return } - if (isWorker) { - // preload method use `document` and can't run in the worker - return - } - await init let imports: readonly ImportSpecifier[] = [] @@ -159,6 +154,18 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin { source.slice(start, end) === 'import.meta' && source.slice(end, end + 5) === '.glob' ) { + // es worker allow globEager / glob + // iife worker just allow globEager + if ( + isWorker && + config.worker.format === 'iife' && + source.slice(end, end + 10) !== '.globEager' + ) { + this.error( + '`import.meta.glob` is not supported in workers with `iife` format, use `import.meta.globEager` instead.', + end + ) + } const { importsString, exp, endIndex, isEager } = await transformImportGlob( source, diff --git a/packages/vite/src/node/plugins/worker.ts b/packages/vite/src/node/plugins/worker.ts index 4113b7153f9b35..5826980f5b0f72 100644 --- a/packages/vite/src/node/plugins/worker.ts +++ b/packages/vite/src/node/plugins/worker.ts @@ -58,6 +58,14 @@ function emitWorkerAssets( ) } +function emitWorkerSourcemap( + ctx: Rollup.TransformPluginContext, + config: ResolvedConfig, + asset: EmittedFile +) { + return emitWorkerFile(ctx, config, asset, 'assets') +} + function emitWorkerChunks( ctx: Rollup.TransformPluginContext, config: ResolvedConfig, @@ -138,14 +146,11 @@ function emitSourcemapForWorkerEntry( const contentHash = getAssetHash(content) const fileName = `${basename}.${contentHash}.js.map` const filePath = path.posix.join(config.build.assetsDir, fileName) - if (!context.cache.has(contentHash)) { - context.cache.set(contentHash, true) - context.emitFile({ - fileName: filePath, - type: 'asset', - source: data - }) - } + emitWorkerSourcemap(context, config, { + fileName: filePath, + type: 'asset', + source: data + }) // Emit the comment that tells the JS debugger where it can find the // sourcemap file. @@ -154,7 +159,10 @@ function emitSourcemapForWorkerEntry( if (config.build.sourcemap === true) { // inline web workers need to use the full sourcemap path // non-inline web workers can use a relative path - const sourceMapUrl = query?.inline != null ? filePath : fileName + const sourceMapUrl = + query?.inline != null + ? path.posix.join(config.base, filePath) + : fileName code += `//# sourceMappingURL=${sourceMapUrl}` } } @@ -194,7 +202,6 @@ export async function workerFileToUrl( export function webWorkerPlugin(config: ResolvedConfig): Plugin { const isBuild = config.command === 'build' - const isWorker = config.isWorker return { name: 'vite:worker', @@ -279,7 +286,7 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin { }, renderChunk(code) { - if (isWorker && code.includes('import.meta.url')) { + if (config.isWorker && code.includes('import.meta.url')) { return code.replace('import.meta.url', 'self.location.href') } }