fix(worker): asset in iife worker and relative base (#12697)

Author: sapphi-red

packages/vite/src/node/build.ts

@@ -1100,6 +1100,12 @@ const relativeUrlMechanisms: Record<
 }
 /* end of copy */
 
+const customRelativeUrlMechanisms = {
+  ...relativeUrlMechanisms,
+  'worker-iife': (relativePath) =>
+    getResolveUrl(`'${relativePath}', self.location.href`),
+} as const satisfies Record<string, (relativePath: string) => string>
+
 export type RenderBuiltAssetUrl = (
   filename: string,
   type: {
@@ -1149,8 +1155,10 @@ export function toOutputFilePathInJS(
 
 export function createToImportMetaURLBasedRelativeRuntime(
   format: InternalModuleFormat,
+  isWorker: boolean,
 ): (filename: string, importer: string) => { runtime: string } {
-  const toRelativePath = relativeUrlMechanisms[format]
+  const formatLong = isWorker && format === 'iife' ? 'worker-iife' : format
+  const toRelativePath = customRelativeUrlMechanisms[formatLong]
   return (filename, importer) => ({
     runtime: toRelativePath(
       path.posix.relative(path.dirname(importer), filename),

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

@@ -69,6 +69,7 @@ export function renderAssetUrlInJS(
 ): MagicString | undefined {
   const toRelativeRuntime = createToImportMetaURLBasedRelativeRuntime(
     opts.format,
+    config.isWorker,
   )
 
   let match: RegExpExecArray | null

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

@@ -369,6 +369,7 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin {
       if (code.match(workerAssetUrlRE)) {
         const toRelativeRuntime = createToImportMetaURLBasedRelativeRuntime(
           outputOptions.format,
+          config.isWorker,
         )
 
         let match: RegExpExecArray | null

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

@@ -0,0 +1,10 @@
+import { test } from 'vitest'
+import { isBuild, page, untilUpdated } from '~utils'
+
+test('asset url', async () => {
+  await untilUpdated(
+    () => page.textContent('.asset-url'),
+    isBuild ? '/worker-assets/worker_asset-vite' : '/vite.svg',
+    true,
+  )
+})

playground/worker/__tests__/relative-base-iife/vite.config.js

@@ -0,0 +1 @@
+export { default } from '../../vite.config-relative-base-iife'

playground/worker/package.json

@@ -21,6 +21,9 @@
     "dev:relative-base": "WORKER_MODE=inline vite --config ./vite.config-relative-base.js dev",
     "build:relative-base": "WORKER_MODE=inline vite --config ./vite.config-relative-base.js build",
     "preview:relative-base": "WORKER_MODE=inline vite --config ./vite.config-relative-base.js preview",
+    "dev:relative-base-iife": "WORKER_MODE=inline vite --config ./vite.config-relative-base-iife.js dev",
+    "build:relative-base-iife": "WORKER_MODE=inline vite --config ./vite.config-relative-base-iife.js build",
+    "preview:relative-base-iife": "WORKER_MODE=inline vite --config ./vite.config-relative-base-iife.js preview",
     "debug": "node --inspect-brk ../../packages/vite/bin/vite"
   },
   "dependencies": {

playground/worker/vite.config-relative-base-iife.js

@@ -0,0 +1,37 @@
+import vite from 'vite'
+import workerPluginTestPlugin from './worker-plugin-test-plugin'
+
+export default vite.defineConfig({
+  base: './',
+  resolve: {
+    alias: {
+      '@': __dirname,
+    },
+  },
+  worker: {
+    format: 'iife',
+    plugins: [workerPluginTestPlugin()],
+    rollupOptions: {
+      output: {
+        assetFileNames: 'worker-assets/worker_asset-[name]-[hash].[ext]',
+        chunkFileNames: 'worker-chunks/worker_chunk-[name]-[hash].js',
+        entryFileNames: 'worker-entries/worker_entry-[name]-[hash].js',
+      },
+    },
+  },
+  build: {
+    outDir: 'dist/relative-base-iife',
+    rollupOptions: {
+      output: {
+        assetFileNames: 'other-assets/[name]-[hash].[ext]',
+        chunkFileNames: 'chunks/[name]-[hash].js',
+        entryFileNames: 'entries/[name]-[hash].js',
+      },
+    },
+  },
+  testConfig: {
+    baseRoute: '/relative-base-iife/',
+  },
+  plugins: [workerPluginTestPlugin()],
+  cacheDir: 'node_modules/.vite-relative-base-iife',
+})