feat(worker): allow passing options to worker constructors

packages/playground/worker/__tests__/worker.spec.ts

@@ -22,6 +22,11 @@ test('inlined', async () => {
   await untilUpdated(() => page.textContent('.pong-inline'), 'pong')
 })
 
+test('worker options', async () => {
+  await page.click('.ping-classic')
+  await untilUpdated(() => page.textContent('.pong-classic'), 'pong')
+})
+
 const waitSharedWorkerTick = (
   (resolvedSharedWorkerCount: number) => async (page: Page) => {
     await untilUpdated(async () => {
@@ -52,8 +57,8 @@ if (isBuild) {
   test('inlined code generation', async () => {
     const assetsDir = path.resolve(testDir, 'dist/assets')
     const files = fs.readdirSync(assetsDir)
-    // should have 3 worker chunk
-    expect(files.length).toBe(4)
+    // should have 4 worker chunk
+    expect(files.length).toBe(5)
     const index = files.find((f) => f.includes('index'))
     const content = fs.readFileSync(path.resolve(assetsDir, index), 'utf-8')
     const worker = files.find((f) => f.includes('my-worker'))

packages/playground/worker/classic-worker.ts

@@ -0,0 +1,7 @@
+self.onmessage = (e) => {
+  if (e.data === 'ping') {
+    // Ensure that we are not in a module worker (calling importScripts in module workers throws an error).
+    self.importScripts()
+    self.postMessage('pong')
+  }
+}

packages/playground/worker/index.html

@@ -7,6 +7,9 @@
 <button class="ping-inline">Ping Inline Worker</button>
 <div>Response from inline worker: <span class="pong-inline"></span></div>
 
+<button class="ping-classic">Ping Classic Worker</button>
+<div>Response from classic worker: <span class="pong-classic"></span></div>
+
 <button class="ping-ts-output">Ping Possible Compiled TS Worker</button>
 <div>
   Response from worker imported from code that might be compiled TS:
@@ -22,6 +25,7 @@
 <script type="module">
   import Worker from './my-worker?worker'
   import InlineWorker from './my-worker?worker&inline'
+  import ClassicWorker from './classic-worker?worker'
   import SharedWorker from './my-shared-worker?sharedworker&name=shared'
   import TSOutputWorker from './possible-ts-output-worker?worker'
   import { mode } from './workerImport'
@@ -47,6 +51,15 @@
     inlineWorker.postMessage('ping')
   })
 
+  const classicWorker = new ClassicWorker({ type: 'classic' })
+  classicWorker.addEventListener('message', (e) => {
+    text('.pong-classic', e.data)
+  })
+
+  document.querySelector('.ping-classic').addEventListener('click', () => {
+    classicWorker.postMessage('ping')
+  })
+
   const sharedWorker = new SharedWorker()
   document.querySelector('.tick-shared').addEventListener('click', () => {
     sharedWorker.port.postMessage('tick')

packages/vite/client.d.ts

@@ -169,7 +169,7 @@ declare module '*.pdf' {
 // web worker
 declare module '*?worker' {
   const workerConstructor: {
-    new (): Worker
+    new (workerOptions?: WorkerOptions): Worker
   }
   export default workerConstructor
 }

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

@@ -18,6 +18,12 @@ function parseWorkerRequest(id: string): Record<string, string> | null {
 }
 
 const WorkerFileId = 'worker_file'
+const ClassicWorkerQuery = 'classic'
+
+const esImportEnv = `import ${JSON.stringify(ENV_PUBLIC_PATH)}\n`
+const classicImportEnv = `self.importScripts(${JSON.stringify(
+  ENV_PUBLIC_PATH
+)});\n`
 
 export function webWorkerPlugin(config: ResolvedConfig): Plugin {
   const isBuild = config.command === 'build'
@@ -40,8 +46,11 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin {
     async transform(_, id) {
       const query = parseWorkerRequest(id)
       if (query && query[WorkerFileId] != null) {
+        // For classic workers where `import` is unavailable, we use `importScripts` to inject env.
+        const importEnvCode =
+          query[ClassicWorkerQuery] != null ? classicImportEnv : esImportEnv
         return {
-          code: `import '${ENV_PUBLIC_PATH}'\n` + _
+          code: importEnvCode + _
         }
       }
       if (
@@ -51,7 +60,9 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin {
         return
       }
 
-      let url: string
+      const workerConstructor =
+        query.sharedworker != null ? 'SharedWorker' : 'Worker'
+
       if (isBuild) {
         // bundle the file as entry to support imports
         const rollup = require('rollup') as typeof Rollup
@@ -77,41 +88,52 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin {
           // inline as blob data url
           return `const encodedJs = "${content.toString('base64')}";
             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(workerOptions) {
               const objURL = blob && (window.URL || window.webkitURL).createObjectURL(blob);
               try {
-                return objURL ? new Worker(objURL) : new Worker("data:application/javascript;base64," + encodedJs, {type: "module"});
+                return new Worker(
+                  objURL || ("data:application/javascript;base64," + encodedJs),
+                  Object.assign({ type: "module" }, workerOptions)
+                );
               } finally {
                 objURL && (window.URL || window.webkitURL).revokeObjectURL(objURL);
               }
             }`
         } else {
+          // isBuild: true, inline: false
           const basename = path.parse(cleanUrl(id)).name
           const contentHash = getAssetHash(content)
           const fileName = path.posix.join(
             config.build.assetsDir,
             `${basename}.${contentHash}.js`
           )
-          url = `__VITE_ASSET__${this.emitFile({
+          const url = `__VITE_ASSET__${this.emitFile({
             fileName,
             type: 'asset',
             source: code
           })}__`
+
+          return `export default function WorkerWrapper(workerOptions) {
+            return new ${workerConstructor}(
+              ${JSON.stringify(url)},
+              Object.assign({ type: "module" }, workerOptions)
+            )
+          }`
         }
       } else {
-        url = await fileToUrl(cleanUrl(id), config, this)
+        // isBuild: false
+        let url = await fileToUrl(cleanUrl(id), config, this)
         url = injectQuery(url, WorkerFileId)
-      }
 
-      const workerConstructor =
-        query.sharedworker != null ? 'SharedWorker' : 'Worker'
-      const workerOptions = { type: 'module' }
-
-      return `export default function WorkerWrapper() {
-        return new ${workerConstructor}(${JSON.stringify(
-        url
-      )}, ${JSON.stringify(workerOptions, null, 2)})
-      }`
+        return `export default function WorkerWrapper(workerOptions) {
+          workerOptions = Object.assign({ type: "module" }, workerOptions)
+          let url = ${JSON.stringify(url)}
+          if (workerOptions.type !== "module") {
+            url += ${JSON.stringify('&' + ClassicWorkerQuery)}
+          }
+          return new ${workerConstructor}(url, workerOptions)
+        }`
+      }
     }
   }
 }