feat(worker): bundle worker emit asset file

packages/playground/wasm/__tests__/wasm.spec.ts

@@ -9,3 +9,7 @@ test('should work when output', async () => {
   await page.click('.output-wasm .run')
   await untilUpdated(() => page.textContent('.output-wasm .result'), '24')
 })
+
+test('should work when wasm in worker', async () => {
+  await untilUpdated(() => page.textContent('.worker-wasm .result'), '3')
+})

packages/playground/wasm/index.html

@@ -12,9 +12,20 @@ <h3>When wasm is output, result should be 24</h3>
   <span class="result"></span>
 </div>
 
+<div class="worker-wasm">
+  <h3>worker wasm</h3>
+  <span class="result"></span>
+</div>
+
 <script type="module">
   import light from './light.wasm'
   import heavy from './heavy.wasm'
+  import myWorker from './worker?worker'
+
+  const w = new myWorker()
+  w.addEventListener('message', (ev) => {
+    text('.worker-wasm .result', ev.data.result)
+  })
 
   async function testWasm(init, resultElement) {
     const { exported_func } = await init({
@@ -25,6 +36,10 @@ <h3>When wasm is output, result should be 24</h3>
     exported_func()
   }
 
+  function text(el, text) {
+    document.querySelector(el).textContent = text
+  }
+
   document
     .querySelector('.inline-wasm .run')
     .addEventListener('click', async () =>

packages/playground/wasm/vite.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite'
+export default defineConfig({
+  build: {
+    // make can no emit light.wasm
+    // and emit add.wasm
+    assetsInlineLimit: 80
+  }
+})

packages/playground/wasm/worker.js

@@ -0,0 +1,5 @@
+import init from './add.wasm'
+init().then((exports) => {
+  // eslint-disable-next-line no-undef
+  self.postMessage({ result: exports.add(1, 2) })
+})

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

@@ -51,12 +51,20 @@ test.concurrent.each([[true], [false]])('shared worker', async (doTick) => {
   await waitSharedWorkerTick(page)
 })
 
+test('worker emitted', async () => {
+  await untilUpdated(() => page.textContent('.nested-worker'), 'pong')
+  await untilUpdated(
+    () => page.textContent('.nested-worker-dynamic-import'),
+    '"msg":"pong"'
+  )
+})
+
 if (isBuild) {
   const assetsDir = path.resolve(testDir, 'dist/assets')
   // assert correct files
   test('inlined code generation', async () => {
     const files = fs.readdirSync(assetsDir)
-    expect(files.length).toBe(8)
+    expect(files.length).toBe(11)
     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'))
@@ -75,18 +83,6 @@ if (isBuild) {
     expect(content).toMatch(`(window.URL||window.webkitURL).createObjectURL`)
     expect(content).toMatch(`window.Blob`)
   })
-
-  test('worker need bundle', () => {
-    fs.readdirSync(assetsDir)
-      .filter(
-        (file) =>
-          file.includes('url-worker') || file.includes('url-shared-worker')
-      )
-      .forEach((file) => {
-        const content = fs.readFileSync(path.resolve(assetsDir, file), 'utf-8')
-        expect(content.startsWith('(function(){')).toBe(true)
-      })
-  })
 }
 
 test('classic worker is run', async () => {

packages/playground/worker/index.html

@@ -26,6 +26,9 @@
 <p>new SharedWorker(new Url('path', import.meta.url), { type: 'module' })</p>
 <div class="shared-worker-import-meta-url"></div>
 
+<p>nested worker</p>
+<div class="nested-worker"></div>
+<div class="nested-worker-dynamic-import"></div>
 <p>new Worker(new Url('path', import.meta.url))</p>
 <div class="classic-worker"></div>
 
@@ -37,6 +40,7 @@
   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 NestedWorker from './worker-nested-worker?worker'
   import { mode } from './workerImport'
   import './classic-worker'
 
@@ -114,4 +118,15 @@
     )
   })
   w2.port.start()
+
+  const nestedWorker = new NestedWorker()
+  nestedWorker.addEventListener('message', (ev) => {
+    console.log(ev)
+    if (typeof ev.data === 'string') {
+      text('.nested-worker', ev.data)
+    } else {
+      text('.nested-worker-dynamic-import', JSON.stringify(ev.data))
+    }
+  })
+  nestedWorker.postMessage('ping')
 </script>

packages/playground/worker/sub-worker.js

@@ -0,0 +1,13 @@
+self.onmessage = (event) => {
+  if (event.data === 'ping') {
+    self.postMessage('pong')
+  }
+}
+const data = import('./workerImport')
+data.then((data) => {
+  const { mode, msg } = data
+  self.postMessage({
+    mode,
+    msg
+  })
+})

packages/playground/worker/vite.config.ts

@@ -3,9 +3,10 @@ import { defineConfig } from 'vite'
 
 export default defineConfig({
   build: {
-    target: process.env.NODE_ENV === 'production' ? 'chrome60' : 'esnext'
+    // target: process.env.NODE_ENV === 'production' ? 'chrome60' : 'esnext'
   },
   worker: {
+    format: 'es',
     plugins: [vueJsx()]
   }
 })

packages/playground/worker/worker-nested-worker.js

@@ -0,0 +1,13 @@
+import SubWorker from './sub-worker?worker'
+
+const subWorker = new SubWorker()
+
+self.onmessage = (event) => {
+  if (event.data === 'ping') {
+    subWorker.postMessage('ping')
+  }
+}
+
+subWorker.onmessage = (event) => {
+  self.postMessage(event.data)
+}

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

@@ -10,6 +10,7 @@ import { onRollupWarning } from '../build'
 const WorkerFileId = 'worker_file'
 
 export async function bundleWorkerEntry(
+  ctx: Rollup.TransformPluginContext,
   config: ResolvedConfig,
   id: string
 ): Promise<Buffer> {
@@ -27,11 +28,25 @@ export async function bundleWorkerEntry(
   })
   let code: string
   try {
-    const { output } = await bundle.generate({
+    const {
+      output: [outputCode, ...outputChunks]
+    } = await bundle.generate({
       format,
       sourcemap: config.build.sourcemap
     })
-    code = output[0].code
+    code = outputCode.code
+    outputChunks.forEach((outputChunk) => {
+      if (outputChunk.type === 'asset') {
+        ctx.emitFile(outputChunk)
+      }
+      if (outputChunk.type === 'chunk') {
+        ctx.emitFile({
+          fileName: `${config.build.assetsDir}/${outputChunk.fileName}`,
+          source: outputChunk.code,
+          type: 'asset'
+        })
+      }
+    })
   } finally {
     await bundle.close()
   }
@@ -72,7 +87,7 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin {
 
       let url: string
       if (isBuild) {
-        const code = await bundleWorkerEntry(config, id)
+        const code = await bundleWorkerEntry(this, config, id)
         if (query.inline != null) {
           const { format } = config.worker
           const workerOptions = format === 'es' ? '{type: "module"}' : '{}'

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

@@ -138,7 +138,7 @@ export function workerImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
           const file = path.resolve(path.dirname(id), rawUrl.slice(1, -1))
           let url: string
           if (isBuild) {
-            const content = await bundleWorkerEntry(config, file)
+            const content = await bundleWorkerEntry(this, config, file)
             const basename = path.parse(cleanUrl(file)).name
             const contentHash = getAssetHash(content)
             const fileName = path.posix.join(