From ddefc064ba23b02a82453cc8dc8c9a89266e64e3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BF=A0=20/=20green?= Date: Sat, 8 Apr 2023 01:55:15 +0900 Subject: [PATCH] fix(worker): asset in iife worker and relative base (#12697) --- packages/vite/src/node/build.ts | 10 ++++- packages/vite/src/node/plugins/asset.ts | 1 + packages/vite/src/node/plugins/worker.ts | 1 + .../relative-base-worker.spec.ts | 10 +++++ .../relative-base-iife/vite.config.js | 1 + playground/worker/package.json | 3 ++ .../worker/vite.config-relative-base-iife.js | 37 +++++++++++++++++++ 7 files changed, 62 insertions(+), 1 deletion(-) create mode 100644 playground/worker/__tests__/relative-base-iife/relative-base-worker.spec.ts create mode 100644 playground/worker/__tests__/relative-base-iife/vite.config.js create mode 100644 playground/worker/vite.config-relative-base-iife.js diff --git a/packages/vite/src/node/build.ts b/packages/vite/src/node/build.ts index 62201970672e21..3abe55fb09cd01 100644 --- a/packages/vite/src/node/build.ts +++ b/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> + 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), diff --git a/packages/vite/src/node/plugins/asset.ts b/packages/vite/src/node/plugins/asset.ts index 6dcf8be3a9c1a0..174b3e5826646c 100644 --- a/packages/vite/src/node/plugins/asset.ts +++ b/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 diff --git a/packages/vite/src/node/plugins/worker.ts b/packages/vite/src/node/plugins/worker.ts index f1e1e4420453a5..c28b7da19dc237 100644 --- a/packages/vite/src/node/plugins/worker.ts +++ b/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 diff --git a/playground/worker/__tests__/relative-base-iife/relative-base-worker.spec.ts b/playground/worker/__tests__/relative-base-iife/relative-base-worker.spec.ts new file mode 100644 index 00000000000000..779cafeda916b8 --- /dev/null +++ b/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, + ) +}) diff --git a/playground/worker/__tests__/relative-base-iife/vite.config.js b/playground/worker/__tests__/relative-base-iife/vite.config.js new file mode 100644 index 00000000000000..39c277bf6e6326 --- /dev/null +++ b/playground/worker/__tests__/relative-base-iife/vite.config.js @@ -0,0 +1 @@ +export { default } from '../../vite.config-relative-base-iife' diff --git a/playground/worker/package.json b/playground/worker/package.json index 3299b9a57556a5..5624c361890903 100644 --- a/playground/worker/package.json +++ b/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": { diff --git a/playground/worker/vite.config-relative-base-iife.js b/playground/worker/vite.config-relative-base-iife.js new file mode 100644 index 00000000000000..28a6103faf9932 --- /dev/null +++ b/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', +})