perf: simplify worker re-export code

Author: danielroe

src/plugins/unplugin.ts

@@ -83,46 +83,43 @@ export const WorkerPlugin = (opts: WorkerPluginOptions) => createUnplugin(() =>
       let source = ''
       if (opts.mode === 'client') {
         source += `
-const counts = {}
 const map = {}
+let count = 0
+let _nuxt_worker
 
-function initWorker (worker, name) {
-  map[name] = {}
-  counts[name] = 0
+function initWorker (worker) {
+  const worker = new Worker(new URL(${JSON.stringify(file)}, import.meta.url))
   worker.onmessage = (e) => {
-    const [resolve, reject] = map[name][e.data.id]
+    const [resolve, reject] = map[e.data.id]
     if ('error' in e.data) {
       reject(new Error(e.data.error))
     } else {
       resolve(e.data.result)
     }
   }
   return worker
-}`
+}
+`
       }
 
       for (const name of exports) {
-        source += `\nvar _nuxt_worker_${name};`
-
-        source += `\nasync function ${name} (...args) {\n`
+        source += `\nexport async function ${name} (...args) {`
         if (opts.mode === 'server') {
-          source += `\n  const { ${name}: fn } = await import(${JSON.stringify(opts.context.workerExports[name])})\n`
-          source += `\n  return fn(...args)\n`
+          source += `\n  const { ${name}: fn } = await import(${JSON.stringify(opts.context.workerExports[name])})`
+          source += `\n  return fn(...args)`
         }
         else {
-          source += `\n  _nuxt_worker_${name} ||= initWorker(new Worker(new URL(${JSON.stringify(opts.context.workerExports[name])}, import.meta.url)), ${JSON.stringify(name)})\n`
-          source += `\n  const id = counts[${JSON.stringify(name)}]++`
+          source += `\n  _nuxt_worker ||= initWorker()\n`
+          source += `\n  const id = count++`
           source += `\n  return new Promise((resolve, reject) => {`
-          source += `\n    map[${JSON.stringify(name)}][id] = [resolve, reject]`,
-          source += `\n    _nuxt_worker_${name}.postMessage({ name: ${JSON.stringify(name)}, args, id })`
+          source += `\n    map[id] = [resolve, reject]`,
+          source += `\n    _nuxt_worker.postMessage({ name: ${JSON.stringify(name)}, args, id })`
           source += `\n  })`
         }
 
         source += `\n}\n`
       }
 
-      source += `\nexport { ${exports.join(', ')} }\n`
-
       return {
         code: source,
         map: null,

test/__snapshots__/auto-import.client.js

@@ -1,12 +1,12 @@
 
-const counts = {}
 const map = {}
+let count = 0
+let _nuxt_worker
 
-function initWorker (worker, name) {
-  map[name] = {}
-  counts[name] = 0
+function initWorker (worker) {
+  const worker = new Worker(new URL("somefile.ts", import.meta.url))
   worker.onmessage = (e) => {
-    const [resolve, reject] = map[name][e.data.id]
+    const [resolve, reject] = map[e.data.id]
     if ('error' in e.data) {
       reject(new Error(e.data.error))
     } else {
@@ -15,16 +15,23 @@ function initWorker (worker, name) {
   }
   return worker
 }
-var _nuxt_worker_bob;
-async function bob (...args) {
 
-  _nuxt_worker_bob ||= initWorker(new Worker(new URL("somefile.ts", import.meta.url)), "bob")
+export async function foo (...args) {
+  _nuxt_worker ||= initWorker()
 
-  const id = counts["bob"]++
+  const id = count++
   return new Promise((resolve, reject) => {
-    map["bob"][id] = [resolve, reject]
-    _nuxt_worker_bob.postMessage({ name: "bob", args, id })
+    map[id] = [resolve, reject]
+    _nuxt_worker.postMessage({ name: "foo", args, id })
   })
 }
 
-export { bob }
+export async function bar (...args) {
+  _nuxt_worker ||= initWorker()
+
+  const id = count++
+  return new Promise((resolve, reject) => {
+    map[id] = [resolve, reject]
+    _nuxt_worker.postMessage({ name: "bar", args, id })
+  })
+}

test/__snapshots__/auto-import.server.js

@@ -1,11 +1,10 @@
 
-var _nuxt_worker_bob;
-async function bob (...args) {
-
-  const { bob: fn } = await import("somefile.ts")
-
+export async function foo (...args) {
+  const { foo: fn } = await import("somefile.ts")
   return fn(...args)
-
 }
 
-export { bob }
+export async function bar (...args) {
+  const { bar: fn } = await import("somefile.ts")
+  return fn(...args)
+}

test/__snapshots__/worker.client.js

@@ -1,5 +1,5 @@
-const bob = () => 42; const foo = () => "thing"
-const __worker_exports__ = { bob: bob }
+const foo = () => 42; const bar = async () => "thing"; const baz = function () { }
+const __worker_exports__ = { foo: foo, bar: bar }
 self.onmessage = async (e) => {
   const { name, args, id } = e.data
   const fn = __worker_exports__[name]

test/transform.spec.ts

@@ -3,24 +3,17 @@ import { describe, it, expect } from 'vitest'
 import { WorkerTransformPlugin, WorkerPlugin, VIRTUAL_ID } from '../src/plugins/unplugin.js'
 
 describe('worker transform', () => {
+  const workerSource = 'export const foo = () => 42; export const bar = async () => "thing"; export const baz = function () { }'
   it('should not transform code on the server', async () => {
-    const code = await transform('server', 'export const bob = () => 42; export const foo = () => "thing"')
+    const code = await transform('server', workerSource)
     expect(code).toBeUndefined()
   })
   it('should transform code on the client', async () => {
-    const code = await transform('client', 'export const bob = () => 42; export const foo = () => "thing"')
+    const code = await transform('client', workerSource)
     expect(code).toMatchFileSnapshot('__snapshots__/worker.client.js')
   })
 })
 
-async function transform(mode: 'server' | 'client', code: string) {
-  const context = { workerExports: {}, reverseMap: { 'somefile.ts': ['bob'] } }
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const plugin = WorkerTransformPlugin({ mode, context }).raw({}, {} as any)
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  return (plugin as any).transform(code, 'somefile.ts')?.code
-}
-
 describe('worker loader', () => {
   it('should load worker on server', async () => {
     const code = await load('server')
@@ -32,8 +25,18 @@ describe('worker loader', () => {
   })
 })
 
+// Helper utils
+
+const context = { workerExports: { foo: 'somefile.ts', bar: 'somefile.ts' }, reverseMap: { 'somefile.ts': ['foo', 'bar'] } }
+
+async function transform(mode: 'server' | 'client', code: string) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const plugin = WorkerTransformPlugin({ mode, context }).raw({}, {} as any)
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return (plugin as any).transform(code, 'somefile.ts')?.code
+}
+
 async function load(mode: 'server' | 'client') {
-  const context = { workerExports: { bob: 'somefile.ts' }, reverseMap: { 'somefile.ts': ['bob'] } }
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const plugin = WorkerPlugin({ mode, context }).raw({}, {} as any)
   // eslint-disable-next-line @typescript-eslint/no-explicit-any