fix: execute classic worker in dev mode

.prettierignore

@@ -10,3 +10,4 @@ pnpm-lock.yaml
 pnpm-workspace.yaml
 packages/playground/tsconfig-json-load-error/has-error/tsconfig.json
 packages/playground/html/invalid.html
+packages/playground/worker/classic-worker.js

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

@@ -26,6 +26,10 @@ test('inlined', async () => {
   await untilUpdated(() => page.textContent('.pong-inline'), 'pong')
 })
 
+test('classic worker is run', async () => {
+  await untilUpdated(() => page.textContent('.classic-worker'), 'A classic')
+})
+
 const waitSharedWorkerTick = (
   (resolvedSharedWorkerCount: number) => async (page: Page) => {
     await untilUpdated(async () => {
@@ -56,7 +60,7 @@ if (isBuild) {
   // assert correct files
   test('inlined code generation', async () => {
     const files = fs.readdirSync(assetsDir)
-    expect(files.length).toBe(6)
+    expect(files.length).toBe(7)
     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.js

@@ -0,0 +1,15 @@
+// prettier-ignore
+function text(el, text) {
+  document.querySelector(el).textContent = text
+}
+
+const classicWorker = new Worker(
+  new URL('./newUrl/classic-worker.js', import.meta.url)   ,
+  // test comment
+
+)
+
+classicWorker.addEventListener('message', ({ data }) => {
+  text('.classic-worker', data)
+})
+classicWorker.postMessage('ping')

packages/playground/worker/index.html

@@ -20,18 +20,22 @@
   <span class="tick-count">0</span>
 </div>
 
-<p>new Worker(new Url('path', import.meta.url))</p>
+<p>new Worker(new Url('path', import.meta.url), { type: 'module' })</p>
 <div class="worker-import-meta-url"></div>
 
-<p>new SharedWorker(new Url('path', import.meta.url))</p>
+<p>new SharedWorker(new Url('path', import.meta.url), { type: 'module' })</p>
 <div class="shared-worker-import-meta-url"></div>
 
+<p>new Worker(new Url('path', import.meta.url))</p>
+<div class="classic-worker"></div>
+
 <script type="module">
   import myWorker from './my-worker?worker'
   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 { mode } from './workerImport'
+  import './classic-worker'
 
   document.querySelector('.mode-true').textContent = mode
 
@@ -78,21 +82,24 @@
   function text(el, text) {
     document.querySelector(el).textContent = text
   }
-
+  const workerOptions = { type: 'module' }
   // url import worker
-  const w = new Worker(new URL('./newUrl/url-worker.js', import.meta.url), {
-    type: 'module'
-  })
+  const w = new Worker(
+    new URL('./newUrl/url-worker.js', import.meta.url),
+    /* @vite-ignore */ workerOptions
+  )
   w.addEventListener('message', (ev) =>
     text(
       '.worker-import-meta-url',
       'worker import.meta.url' + JSON.stringify(ev.data)
     )
   )
 
+  const genWorkerName = () => 'module'
   const w2 = new SharedWorker(
     new URL('./newUrl/url-shared-worker.js', import.meta.url),
     {
+      name: genWorkerName(),
       type: 'module'
     }
   )

packages/playground/worker/newUrl/classic-worker.js

@@ -0,0 +1,5 @@
+importScripts('/classic.js')
+
+self.addEventListener('message', () => {
+  self.postMessage(self.constant)
+})

packages/playground/worker/public/classic.js

@@ -0,0 +1 @@
+self.constant = 'A classic'

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

@@ -13,8 +13,63 @@ import { parseRequest } from '../utils'
 import { ENV_PUBLIC_PATH } from '../constants'
 import MagicString from 'magic-string'
 
+type WorkerType = 'classic' | 'module' | 'ignore'
+
 const WORKER_FILE_ID = 'worker_url_file'
 
+// find the workerOptions end with `)`
+function lexWorkerOptions(code: string, pos: number) {
+  let pattern = ''
+  const opStack = []
+
+  for (let i = pos; i < code.length; i++) {
+    const char = code.charAt(i)
+    if (char === '(') {
+      opStack.push(char)
+    } else if (char === ')') {
+      if (opStack.length) {
+        opStack.pop()
+      } else {
+        break
+      }
+    }
+    pattern += char
+  }
+
+  return pattern
+}
+
+function getWorkerType(code: string, i: number): WorkerType {
+  let workerOptsString = lexWorkerOptions(code, i)
+  const hasViteIgnore = /\/\*\s*@vite-ignore\s*\*\//.test(workerOptsString)
+  if (hasViteIgnore) {
+    return 'ignore'
+  }
+
+  workerOptsString = workerOptsString
+    .replace(multilineCommentsRE, '')
+    .replace(singlelineCommentsRE, '')
+
+  const match = /type\s*\:\s*(['"`]([^'|^"|^`]*)['"`]|.*)/.exec(
+    workerOptsString
+  )
+  if (match) {
+    const { 2: staticStrType } = match
+    if (['classic', 'module'].includes(staticStrType)) {
+      return match[1] as WorkerType
+    } else {
+      // had type options but is not static string.
+      throw new Error(
+        'vite worker options type only support static string, ' +
+          'if you want to ignore this error, ' +
+          'please use /* @vite-ignore */ in the worker options, ' +
+          'but the environment variable of vite will be lost.'
+      )
+    }
+  }
+  return 'classic'
+}
+
 export function workerImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
   const isBuild = config.command === 'build'
 
@@ -23,9 +78,21 @@ export function workerImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
 
     async transform(code, id, options) {
       const query = parseRequest(id)
-      if (query && query[WORKER_FILE_ID] != null) {
+      if (query && query[WORKER_FILE_ID] != null && query['type'] != null) {
+        const workerType = query['type'] as WorkerType
+        let injectEnv = ''
+
+        if (workerType === 'classic') {
+          injectEnv = `importScripts('${ENV_PUBLIC_PATH}')\n`
+        } else if (workerType === 'module') {
+          injectEnv = `import '${ENV_PUBLIC_PATH}'\n`
+        } else if (workerType === 'ignore') {
+          // dynamic worker type we can't know how import the env
+          injectEnv = ''
+        }
+
         return {
-          code: `import '${ENV_PUBLIC_PATH}'\n` + code
+          code: injectEnv + code
         }
       }
       if (
@@ -42,7 +109,6 @@ export function workerImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
         let s: MagicString | null = null
         while ((match = importMetaUrlRE.exec(noCommentsCode))) {
           const { 0: allExp, 2: exp, 3: rawUrl, index } = match
-
           const urlIndex = allExp.indexOf(exp) + index
 
           if (options?.ssr) {
@@ -61,7 +127,7 @@ export function workerImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
           }
 
           s ||= new MagicString(code)
-
+          const workerType = getWorkerType(code, index + allExp.length)
           const file = path.resolve(path.dirname(id), rawUrl.slice(1, -1))
           let url: string
           if (isBuild) {
@@ -80,6 +146,7 @@ export function workerImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
           } else {
             url = await fileToUrl(cleanUrl(file), config, this)
             url = injectQuery(url, WORKER_FILE_ID)
+            url = injectQuery(url, `type=${workerType}`)
           }
           s.overwrite(urlIndex, urlIndex + exp.length, JSON.stringify(url))
         }