fix(worker): fix applyToEnvironment hooks on worker build (vitejs#18793)

Author: hi-ogawa

packages/vite/src/node/config.ts

@@ -522,9 +522,7 @@ export interface LegacyOptions {
 
 export interface ResolvedWorkerOptions {
   format: 'es' | 'iife'
-  plugins: (
-    bundleChain: string[],
-  ) => Promise<{ plugins: Plugin[]; config: ResolvedConfig }>
+  plugins: (bundleChain: string[]) => Promise<ResolvedConfig>
   rollupOptions: RollupOptions
 }
 
@@ -1340,7 +1338,10 @@ export async function resolveConfig(
         .map((hook) => hook(workerResolved)),
     )
 
-    return { plugins: resolvedWorkerPlugins, config: workerResolved }
+    return {
+      ...workerResolved,
+      plugins: resolvedWorkerPlugins,
+    }
   }
 
   const resolvedWorkerOptions: ResolvedWorkerOptions = {

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

@@ -75,13 +75,14 @@ async function bundleWorkerEntry(
   // bundle the file as entry to support imports
   const { rollup } = await import('rollup')
   const { plugins, rollupOptions, format } = config.worker
-  const { plugins: resolvedPlugins, config: workerConfig } =
-    await plugins(newBundleChain)
+  const workerConfig = await plugins(newBundleChain)
   const workerEnvironment = new BuildEnvironment('client', workerConfig) // TODO: should this be 'worker'?
+  await workerEnvironment.init()
+
   const bundle = await rollup({
     ...rollupOptions,
     input,
-    plugins: resolvedPlugins.map((p) =>
+    plugins: workerEnvironment.plugins.map((p) =>
       injectEnvironmentToHooks(workerEnvironment, p),
     ),
     onwarn(warning, warn) {

playground/worker/__tests__/es/worker-es.spec.ts

@@ -14,6 +14,7 @@ test('normal', async () => {
     () => page.textContent('.asset-url'),
     isBuild ? '/es/assets/worker_asset-vite.svg' : '/es/vite.svg',
   )
+  await untilUpdated(() => page.textContent('.dep-cjs'), '[cjs ok]')
 })
 
 test('named', async () => {

playground/worker/__tests__/iife/worker-iife.spec.ts

@@ -189,7 +189,7 @@ test.runIf(isServe)('sourcemap is correct after env is injected', async () => {
   const content = await (await response).text()
   const { mappings } = decodeSourceMapUrl(content)
   expect(mappings).toMatchInlineSnapshot(
-    `";;AAAA,SAAS,OAAO,kBAAkB;AAClC,SAAS,MAAM,WAAW;AAC1B,SAAS,wBAAwB;AACjC,OAAO,aAAa;AACpB,MAAM,UAAU,YAAY;AAE5B,KAAK,YAAY,CAAC,MAAM;AACtB,MAAI,EAAE,SAAS,QAAQ;AACrB,SAAK,YAAY,EAAE,KAAK,MAAM,kBAAkB,SAAS,SAAS,KAAK,CAAC;AAAA,EAC1E;AACA,MAAI,EAAE,SAAS,gBAAgB;AAC7B,SAAK,YAAY;AAAA,MACf,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AACF;AACA,KAAK,YAAY;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAGD,QAAQ,IAAI,cAAc"`,
+    `";;AAAA,SAAS,OAAO,kBAAkB;AAClC,OAAO,YAAY;AACnB,SAAS,MAAM,WAAW;AAC1B,SAAS,wBAAwB;AACjC,OAAO,aAAa;AACpB,MAAM,UAAU,YAAY;AAE5B,KAAK,YAAY,CAAC,MAAM;AACtB,MAAI,EAAE,SAAS,QAAQ;AACrB,SAAK,YAAY;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AACA,MAAI,EAAE,SAAS,gBAAgB;AAC7B,SAAK,YAAY;AAAA,MACf,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AACF;AACA,KAAK,YAAY;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAGD,QAAQ,IAAI,cAAc"`,
   )
 })
 

playground/worker/dep-cjs/index.cjs

@@ -0,0 +1 @@
+exports.test = '[cjs ok]'

playground/worker/dep-cjs/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "@vitejs/test-worker-dep-cjs",
+  "type": "commonjs",
+  "exports": "./index.cjs"
+}

playground/worker/index.html

@@ -18,6 +18,7 @@ <h2 class="format-iife">format iife:</h2>
   <div>mode: <span class="mode"></span></div>
   <div>bundle-with-plugin: <span class="bundle-with-plugin"></span></div>
   <div>asset-url: <span class="asset-url"></span></div>
+  <div>dep-cjs: <span class="dep-cjs"></span></div>
 </div>
 
 <p>

playground/worker/my-worker.ts

@@ -1,12 +1,21 @@
 import { msg as msgFromDep } from '@vitejs/test-dep-to-optimize'
+import depCjs from '@vitejs/test-worker-dep-cjs'
 import { mode, msg } from './modules/workerImport.js'
 import { bundleWithPlugin } from './modules/test-plugin'
 import viteSvg from './vite.svg'
 const metaUrl = import.meta.url
 
 self.onmessage = (e) => {
   if (e.data === 'ping') {
-    self.postMessage({ msg, mode, bundleWithPlugin, viteSvg, metaUrl, name })
+    self.postMessage({
+      msg,
+      mode,
+      bundleWithPlugin,
+      viteSvg,
+      metaUrl,
+      name,
+      depCjs,
+    })
   }
   if (e.data === 'ping-unicode') {
     self.postMessage({
@@ -16,6 +25,7 @@ self.onmessage = (e) => {
       viteSvg,
       metaUrl,
       name,
+      depCjs,
     })
   }
 }
@@ -27,6 +37,7 @@ self.postMessage({
   viteSvg,
   metaUrl,
   name,
+  depCjs,
 })
 
 // for sourcemap

playground/worker/package.json

@@ -29,6 +29,7 @@
   },
   "dependencies": {
     "@vitejs/test-dep-self-reference-url-worker": "file:./dep-self-reference-url-worker",
-    "@vitejs/test-dep-to-optimize": "file:./dep-to-optimize"
+    "@vitejs/test-dep-to-optimize": "file:./dep-to-optimize",
+    "@vitejs/test-worker-dep-cjs": "file:./dep-cjs"
   }
 }

playground/worker/worker/main-module.js

@@ -21,6 +21,7 @@ worker.addEventListener('message', (e) => {
   text('.mode', e.data.mode)
   text('.bundle-with-plugin', e.data.bundleWithPlugin)
   text('.asset-url', e.data.viteSvg)
+  text('.dep-cjs', e.data.depCjs.test)
 })
 
 const namedWorker = new myWorker({ name: 'namedWorker' })