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

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) => {