feat(worker): support a way to name the worker (#14032)

packages/vite/client.d.ts

@@ -229,14 +229,14 @@ declare module '*.wasm?init' {
 // web worker
 declare module '*?worker' {
  const workerConstructor: {
- new (): Worker
+ new (options?: { name?: string }): Worker
  }
  export default workerConstructor
 }
 
 declare module '*?worker&inline' {
  const workerConstructor: {
- new (): Worker
+ new (options?: { name?: string }): Worker
  }
  export default workerConstructor
 }
@@ -248,14 +248,14 @@ declare module '*?worker&url' {
 
 declare module '*?sharedworker' {
  const sharedWorkerConstructor: {
- new (): SharedWorker
+ new (options?: { name?: string }): SharedWorker
  }
  export default sharedWorkerConstructor
 }
 
 declare module '*?sharedworker&inline' {
  const sharedWorkerConstructor: {
- new (): SharedWorker
+ new (options?: { name?: string }): SharedWorker
  }
  export default sharedWorkerConstructor
 }

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

@@ -295,7 +295,7 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin {
  ? 'module'
  : 'classic'
  : 'module'
- const workerOptions = workerType === 'classic' ? '' : ',{type: "module"}'
+ const workerTypeOption = workerType === 'classic' ? undefined : 'module'
 
  if (isBuild) {
  getDepsOptimizer(config, ssr)?.registerWorkersSource(id)
@@ -310,21 +310,33 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin {
  workerConstructor === 'Worker'
  ? `${encodedJs}
  const blob = typeof window !== "undefined" && window.Blob && new Blob([atob(encodedJs)], { type: "text/javascript;charset=utf-8" });
- export default function WorkerWrapper() {
+ export default function WorkerWrapper(options) {
  let objURL;
  try {
  objURL = blob && (window.URL || window.webkitURL).createObjectURL(blob);
  if (!objURL) throw ''
- return new ${workerConstructor}(objURL)
+ return new ${workerConstructor}(objURL, { name: options?.name })
  } catch(e) {
- return new ${workerConstructor}("data:application/javascript;base64," + encodedJs${workerOptions});
+ return new ${workerConstructor}(
+ "data:application/javascript;base64," + encodedJs,
+ {
+ ${workerTypeOption ? `type: "${workerTypeOption}",` : ''}
+ name: options?.name
+ }
+ );
  } finally {
  objURL && (window.URL || window.webkitURL).revokeObjectURL(objURL);
  }
  }`
  : `${encodedJs}
- export default function WorkerWrapper() {
- return new ${workerConstructor}("data:application/javascript;base64," + encodedJs${workerOptions});
+ export default function WorkerWrapper(options) {
+ return new ${workerConstructor}(
+ "data:application/javascript;base64," + encodedJs,
+ {
+ ${workerTypeOption ? `type: "${workerTypeOption}",` : ''}
+ name: options?.name
+ }
+ );
  }
  `
 
@@ -350,10 +362,14 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin {
  }
 
  return {
- code: `export default function WorkerWrapper() {
- return new ${workerConstructor}(${JSON.stringify(
- url,
- )}${workerOptions})
+ code: `export default function WorkerWrapper(options) {
+ return new ${workerConstructor}(
+ ${JSON.stringify(url)},
+ {
+ ${workerTypeOption ? `type: "${workerTypeOption}",` : ''}
+ name: options?.name
+ }
+ );
  }`,
  map: { mappings: '' }, // Empty sourcemap to suppress Rollup warning
  }

playground/worker/__tests__/es/es-worker.spec.ts

@@ -22,6 +22,10 @@ test('normal', async () => {
  )
 })
 
+test('named', async () => {
+ await untilUpdated(() => page.textContent('.pong-named'), 'pong', true)
+})
+
 test('TS output', async () => {
  await untilUpdated(() => page.textContent('.pong-ts-output'), 'pong', true)
 })
@@ -30,10 +34,18 @@ test('inlined', async () => {
  await untilUpdated(() => page.textContent('.pong-inline'), 'pong', true)
 })
 
+test('named inlined', async () => {
+ await untilUpdated(() => page.textContent('.pong-inline-named'), 'pong', true)
+})
+
 test('shared worker', async () => {
  await untilUpdated(() => page.textContent('.tick-count'), 'pong', true)
 })
 
+test('named shared worker', async () => {
+ await untilUpdated(() => page.textContent('.tick-count-named'), 'pong', true)
+})
+
 test('inline shared worker', async () => {
  await untilUpdated(() => page.textContent('.pong-shared-inline'), 'pong')
 })

playground/worker/__tests__/iife/iife-worker.spec.ts

@@ -17,6 +17,10 @@ test('normal', async () => {
  )
 })
 
+test('named', async () => {
+ await untilUpdated(() => page.textContent('.pong-named'), 'pong', true)
+})
+
 test('TS output', async () => {
  await untilUpdated(() => page.textContent('.pong-ts-output'), 'pong')
 })
@@ -25,10 +29,18 @@ test('inlined', async () => {
  await untilUpdated(() => page.textContent('.pong-inline'), 'pong')
 })
 
+test('named inlined', async () => {
+ await untilUpdated(() => page.textContent('.pong-inline-named'), 'pong', true)
+})
+
 test('shared worker', async () => {
  await untilUpdated(() => page.textContent('.tick-count'), 'pong')
 })
 
+test('named shared worker', async () => {
+ await untilUpdated(() => page.textContent('.tick-count-named'), 'pong', true)
+})
+
 test('inline shared worker', async () => {
  await untilUpdated(() => page.textContent('.pong-shared-inline'), 'pong')
 })

playground/worker/__tests__/relative-base/relative-base-worker.spec.ts

@@ -22,6 +22,10 @@ test('normal', async () => {
  )
 })
 
+test('named', async () => {
+ await untilUpdated(() => page.textContent('.pong-named'), 'pong', true)
+})
+
 test('TS output', async () => {
  await untilUpdated(() => page.textContent('.pong-ts-output'), 'pong', true)
 })
@@ -35,6 +39,10 @@ test('shared worker', async () => {
  await untilUpdated(() => page.textContent('.tick-count'), 'pong', true)
 })
 
+test('named shared worker', async () => {
+ await untilUpdated(() => page.textContent('.tick-count-named'), 'pong', true)
+})
+
 test('inline shared worker', async () => {
  await untilUpdated(() => page.textContent('.pong-shared-inline'), 'pong')
 })

playground/worker/index.html

@@ -20,12 +20,28 @@ <h2 class="format-iife">format iife:</h2>
  <div>asset-url: <span class="asset-url"></span></div>
 </div>
 
+<p>
+ import myWorker from '../my-worker?worker'
+ <span>new myWorker({ name: "named-worker" })</span>
+ <span class="classname">.pong-named</span>
+</p>
+<div>
+ <div>Response from worker: <span class="pong-named"></span></div>
+</div>
+
 <p>
  import InlineWorker from '../my-worker?worker&inline'
  <span class="classname">.pong-inline</span>
 </p>
 <code class="pong-inline"></code>
 
+<p>
+ import InlineWorker from '../my-worker?worker&inline'
+ <span>new InlineWorker({ name: "named-inline-worker" })</span>
+ <span class="classname">.pong-inline-named</span>
+</p>
+<code class="pong-inline-named"></code>
+
 <p>
  import TSOutputWorker from '../possible-ts-output-worker?worker'
  <span class="classname">.pong-ts-output</span>
@@ -38,6 +54,13 @@ <h2 class="format-iife">format iife:</h2>
 </p>
 <code class="tick-count"></code>
 
+<p>
+ import mySharedWorker from '../my-shared-worker?sharedworker&name=shared'
+ <span>new mySharedWorker({ name: "namedSharedWorker" })</span>
+ <span class="classname">.tick-count-named</span>
+</p>
+<code class="tick-count-named"></code>
+
 <p>
  import InlineSharedWorker from '../my-shared-worker?sharedworker&inline'
  <span class="classname">.pong-shared-inline</span>

playground/worker/worker/main-module.js

@@ -21,12 +21,24 @@ worker.addEventListener('message', (e) => {
  text('.asset-url', e.data.viteSvg)
 })
 
+const namedWorker = new myWorker({ name: 'namedWorker' })
+namedWorker.postMessage('ping')
+namedWorker.addEventListener('message', (e) => {
+ text('.pong-named', e.data.msg)
+})
+
 const inlineWorker = new InlineWorker()
 inlineWorker.postMessage('ping')
 inlineWorker.addEventListener('message', (e) => {
  text('.pong-inline', e.data.msg)
 })
 
+const namedInlineWorker = new InlineWorker({ name: 'namedInlineWorker' })
+namedInlineWorker.postMessage('ping')
+namedInlineWorker.addEventListener('message', (e) => {
+ text('.pong-inline-named', e.data.msg)
+})
+
 const startSharedWorker = () => {
  const sharedWorker = new mySharedWorker()
  sharedWorker.port.addEventListener('message', (event) => {
@@ -37,6 +49,16 @@ const startSharedWorker = () => {
 startSharedWorker()
 startSharedWorker()
 
+const startNamedSharedWorker = () => {
+ const sharedWorker = new mySharedWorker({ name: 'namedSharedWorker' })
+ sharedWorker.port.addEventListener('message', (event) => {
+ text('.tick-count-named', event.data)
+ })
+ sharedWorker.port.start()
+}
+startNamedSharedWorker()
+startNamedSharedWorker()
+
 const startInlineSharedWorker = () => {
  const inlineSharedWorker = new InlineSharedWorker()
  inlineSharedWorker.port.addEventListener('message', (event) => {