feat: web worker

Author: yyx990803

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

@@ -0,0 +1,29 @@
+import fs from 'fs'
+import path from 'path'
+import { untilUpdated, isBuild, testDir } from '../../testUtils'
+
+test('normal', async () => {
+  await page.click('.ping')
+  await untilUpdated(() => page.textContent('.pong'), 'pong')
+})
+
+test('inlined', async () => {
+  await page.click('.ping-inline')
+  await untilUpdated(() => page.textContent('.pong-inline'), 'pong')
+})
+
+if (isBuild) {
+  // assert correct files
+  test('inlined code generation', async () => {
+    const assetsDir = path.resolve(testDir, 'dist/assets')
+    const files = fs.readdirSync(assetsDir)
+    // should have only 1 worker chunk
+    expect(files.length).toBe(2)
+    const index = files.find((f) => f.includes('index'))
+    const content = fs.readFileSync(path.resolve(assetsDir, index), 'utf-8')
+    // chunk
+    expect(content).toMatch(`new Worker("/assets`)
+    // inlined
+    expect(content).toMatch(`new Worker("data:application/javascript`)
+  })
+}

packages/playground/worker/index.html

@@ -0,0 +1,28 @@
+<button class="ping">Ping</button>
+<div>Response from worker: <span class="pong"></span></div>
+
+<button class="ping-inline">Ping Inline Worker</button>
+<div>Response from inline worker: <span class="pong-inline"></span></div>
+
+<script type="module">
+  import Worker from './my-worker?worker'
+  import InlineWorker from './my-worker?worker&inline'
+
+  const worker = new Worker()
+  worker.addEventListener('message', (e) => {
+    document.querySelector('.pong').textContent = e.data
+  })
+
+  document.querySelector('.ping').addEventListener('click', () => {
+    worker.postMessage('ping')
+  })
+
+  const inlineWorker = new InlineWorker()
+  inlineWorker.addEventListener('message', (e) => {
+    document.querySelector('.pong-inline').textContent = e.data
+  })
+
+  document.querySelector('.ping-inline').addEventListener('click', () => {
+    inlineWorker.postMessage('ping')
+  })
+</script>

packages/playground/worker/my-worker.js

@@ -0,0 +1,7 @@
+import { msg } from './workerImport'
+
+self.onmessage = (e) => {
+  if (e.data === 'ping') {
+    self.postMessage(msg)
+  }
+}

packages/playground/worker/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "test-worker",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "debug": "node --inspect-brk ../../vite/bin/vite"
+  }
+}

packages/playground/worker/workerImport.js

@@ -0,0 +1 @@
+export const msg = 'pong'

packages/vite/src/node/build/index.ts

@@ -1,6 +1,6 @@
 import fs from 'fs'
 import path from 'path'
-import { resolveConfig, UserConfig } from '../config'
+import { resolveConfig, UserConfig, ResolvedConfig } from '../config'
 import Rollup, { Plugin, RollupBuild, RollupOptions } from 'rollup'
 import { buildReporterPlugin } from '../plugins/reporter'
 import { buildDefinePlugin } from '../plugins/define'
@@ -149,21 +149,9 @@ export async function build(
   }
 }
 
-async function doBuild(
-  inlineConfig: UserConfig & { mode?: string } = {},
-  configPath?: string | false
-) {
-  const mode = inlineConfig.mode || 'production'
-  const config = await resolveConfig(inlineConfig, 'build', mode, configPath)
+export function resolveBuildPlugins(config: ResolvedConfig): Plugin[] {
   const options = config.build
-
-  const resolve = (p: string) => path.resolve(config.root, p)
-
-  const input = options.rollupOptions?.input || resolve('index.html')
-  const outDir = resolve(options.outDir)
-  const publicDir = resolve('public')
-
-  const plugins = [
+  return [
     ...(config.plugins as Plugin[]),
     ...(options.rollupOptions.plugins || []),
     buildHtmlPlugin(config),
@@ -179,6 +167,22 @@ async function doBuild(
     ...(options.manifest ? [manifestPlugin()] : []),
     buildReporterPlugin(config)
   ]
+}
+
+async function doBuild(
+  inlineConfig: UserConfig & { mode?: string } = {},
+  configPath?: string | false
+) {
+  const mode = inlineConfig.mode || 'production'
+  const config = await resolveConfig(inlineConfig, 'build', mode, configPath)
+  const options = config.build
+
+  const resolve = (p: string) => path.resolve(config.root, p)
+
+  const input = options.rollupOptions?.input || resolve('index.html')
+  const outDir = resolve(options.outDir)
+  const publicDir = resolve('public')
+  const plugins = resolveBuildPlugins(config)
 
   const rollup = require('rollup') as typeof Rollup
 

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

@@ -10,6 +10,7 @@ import { assetPlugin } from './asset'
 import { clientInjectionsPlugin } from './clientInjections'
 import { htmlPlugin } from './html'
 import { wasmPlugin } from './wasm'
+import { webWorkerPlugin } from './worker'
 
 export function resolvePlugins(
   config: ResolvedConfig,
@@ -29,6 +30,7 @@ export function resolvePlugins(
       namedExports: true
     }),
     wasmPlugin(config),
+    webWorkerPlugin(config),
     assetPlugin(config),
     ...normalPlugins,
     ...postPlugins,

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

@@ -46,7 +46,7 @@ export function buildReporterPlugin(config: ResolvedConfig): Plugin {
 
   return {
     name: 'vite:size',
-    generateBundle(_, output) {
+    writeBundle(_, output) {
       for (const file in output) {
         const chunk = output[file]
         if (chunk.type === 'chunk') {

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

@@ -13,7 +13,7 @@ import {
   normalizePath
 } from '../utils'
 
-const supportedExts = ['.mjs', '.js', '.ts', '.jsx', '.tsx']
+export const supportedExts = ['.mjs', '.js', '.ts', '.jsx', '.tsx']
 const mainFields = ['module', 'jsnext', 'jsnext:main', 'browser', 'main']
 
 const isDebug = process.env.DEBUG

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

@@ -0,0 +1,74 @@
+import { ResolvedConfig } from '../config'
+import { Plugin } from '../plugin'
+import { parse as parseUrl } from 'url'
+import qs, { ParsedUrlQuery } from 'querystring'
+import { fileToUrl } from './asset'
+import { cleanUrl } from '../utils'
+import Rollup from 'rollup'
+import { resolveBuildPlugins } from '..'
+
+function isWorkerRequest(id: string): ParsedUrlQuery | false {
+  const { search } = parseUrl(id)
+  if (!search) {
+    return false
+  }
+  const query = qs.parse(search.slice(1))
+  return query.worker != null ? query : false
+}
+
+export function webWorkerPlugin(config: ResolvedConfig): Plugin {
+  const isBuild = config.command === 'build'
+
+  return {
+    name: 'vite:worker',
+
+    load(id) {
+      if (isBuild && isWorkerRequest(id)) {
+        return ''
+      }
+    },
+
+    async transform(_, id) {
+      const query = isWorkerRequest(id)
+      if (!query) {
+        return
+      }
+
+      let url: string
+      if (config.command === 'serve') {
+        url = await fileToUrl(cleanUrl(id), config, this)
+      } else {
+        if (query.inline != null) {
+          // bundle the file as entry to support imports and inline as base64
+          // data url
+          const rollup = require('rollup') as typeof Rollup
+          const bundle = await rollup.rollup({
+            input: cleanUrl(id),
+            plugins: resolveBuildPlugins(config)
+          })
+          try {
+            const { output } = await bundle.generate({
+              format: 'es',
+              sourcemap: config.build.sourcemap
+            })
+            url = `data:application/javascript;base64,${Buffer.from(
+              output[0].code
+            ).toString('base64')}`
+          } finally {
+            bundle.close()
+          }
+        } else {
+          // emit as separate chunk
+          url = `__VITE_ASSET__${this.emitFile({
+            type: 'chunk',
+            id: cleanUrl(id)
+          })}`
+        }
+      }
+
+      return `export default function WorkerWrapper() {
+        return new Worker(${JSON.stringify(url)}, { type: 'module' })
+      }`
+    }
+  }
+}