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

@@ -56,7 +56,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(8)
     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'))
@@ -88,3 +88,8 @@ if (isBuild) {
       })
   })
 }
+
+test('classic worker is run', async () => {
+  expect(await page.textContent('.classic-worker')).toMatch('A classic')
+  expect(await page.textContent('.classic-shared-worker')).toMatch('A classic')
+})

packages/playground/worker/classic-worker.js

@@ -0,0 +1,29 @@
+// 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')
+
+const classicSharedWorker = new SharedWorker(
+  new URL('./newUrl/classic-shared-worker.js', import.meta.url),
+  {
+    type: 'classic'
+  }
+)
+classicSharedWorker.port.addEventListener('message', (ev) => {
+  text(
+    '.classic-shared-worker',
+    ev.data
+  )
+})
+classicSharedWorker.port.start()

packages/playground/worker/index.html

@@ -20,18 +20,25 @@
   <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>
+
+<p>new Worker(new Url('path', import.meta.url), { type: 'classic' })</p>
+<div class="classic-shared-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 +85,25 @@
   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),
     {
+      /* @vite-ignore */
+      name: genWorkerName(),
       type: 'module'
     }
   )

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

@@ -0,0 +1,6 @@
+importScripts('/classic.js')
+
+self.onconnect = (event) => {
+  const port = event.ports[0]
+  port.postMessage(self.constant)
+}

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

@@ -1,3 +1,4 @@
+import JSON5 from 'json5'
 import type { ResolvedConfig } from '../config'
 import type { Plugin } from '../plugin'
 import { getAssetHash, fileToUrl } from './asset'
@@ -10,22 +11,110 @@ import {
 import path from 'path'
 import { bundleWorkerEntry } from './worker'
 import { parseRequest } from '../utils'
-import { ENV_PUBLIC_PATH } from '../constants'
+import { ENV_ENTRY, ENV_PUBLIC_PATH } from '../constants'
 import MagicString from 'magic-string'
+import type { ViteDevServer } from '..'
+
+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
+  }
+
+  // had `,` split worker params
+  const commaIndex = pattern.indexOf(',')
+  if (commaIndex > -1) {
+    pattern = pattern.substring(commaIndex + 1)
+  }
+  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, '')
+    .trim()
+
+  if (!workerOptsString.length) {
+    return 'classic'
+  }
+
+  let workerOpts: { type: WorkerType } = { type: 'classic' }
+  try {
+    workerOpts = JSON5.parse(workerOptsString)
+  } catch (e) {
+    // can't parse by JSON5, so the worker options had unexpect char.
+    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.'
+    )
+  }
+
+  if (['classic', 'module'].includes(workerOpts.type)) {
+    return workerOpts.type
+  }
+  return 'classic'
+}
+
 export function workerImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
   const isBuild = config.command === 'build'
+  let server: ViteDevServer
 
   return {
     name: 'vite:worker-import-meta-url',
 
+    configureServer(_server) {
+      server = _server
+    },
+
     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') {
+          if (isBuild) {
+            injectEnv = ''
+          } else if (server) {
+            // dynamic worker type we can't know how import the env
+            // so we copy /@vite/env code of server transform result into file header
+            const { moduleGraph } = server
+            const module = moduleGraph.getModuleById(ENV_ENTRY)
+            injectEnv = module?.transformResult?.code || ''
+          }
+        }
+
         return {
-          code: `import '${ENV_PUBLIC_PATH}'\n` + code
+          code: injectEnv + code
         }
       }
       if (
@@ -42,7 +131,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 +149,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 +168,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))
         }