Allow service workers to import assets (#9285)

* use rollupOptions instead of lib

* always create a single chunk, prevent preload helper injection

* lint

* changeset

* fix arguments

* test

* lint

---------

Co-authored-by: Rich Harris <git@rich-harris.dev>
Co-authored-by: Rich Harris <rich.harris@vercel.com>

.changeset/twelve-seals-vanish.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: allow service-worker.js to import assets

packages/kit/src/exports/vite/build/build_service_worker.js

@@ -3,7 +3,6 @@ import * as vite from 'vite';
 import { dedent } from '../../../core/sync/utils.js';
 import { s } from '../../../utils/misc.js';
 import { get_config_aliases } from '../utils.js';
-import { assets_base } from './utils.js';
 
 /**
  * @param {string} out
@@ -64,16 +63,16 @@ export async function build_service_worker(
 	);
 
 	await vite.build({
-		base: assets_base(kit),
 		build: {
-			lib: {
-				entry: /** @type {string} */ (service_worker_entry_file),
-				name: 'app',
-				formats: ['es']
-			},
+			modulePreload: false,
 			rollupOptions: {
+				input: {
+					'service-worker': service_worker_entry_file
+				},
 				output: {
-					entryFileNames: 'service-worker.js'
+					entryFileNames: '[name].js',
+					assetFileNames: `${kit.appDir}/immutable/assets/[name].[hash][extname]`,
+					inlineDynamicImports: true
 				}
 			},
 			outDir: `${out}/client`,
@@ -84,6 +83,13 @@ export async function build_service_worker(
 		publicDir: false,
 		resolve: {
 			alias: [...get_config_aliases(kit), { find: '$service-worker', replacement: service_worker }]
+		},
+		experimental: {
+			renderBuiltUrl(filename) {
+				return {
+					runtime: `new URL(${JSON.stringify(filename)}, location.href).pathname`
+				};
+			}
 		}
 	});
 }

packages/kit/src/exports/vite/build/utils.js

@@ -83,6 +83,17 @@ export function resolve_symlinks(manifest, file) {
 	return { chunk, file };
 }
 
+const method_names = new Set(['GET', 'HEAD', 'PUT', 'POST', 'DELETE', 'PATCH', 'OPTIONS']);
+
+// If we'd written this in TypeScript, it could be easy...
+/**
+ * @param {string} str
+ * @returns {str is import('types').HttpMethod}
+ */
+export function is_http_method(str) {
+	return method_names.has(str);
+}
+
 /**
  * @param {import('types').ValidatedKitConfig} config
  * @returns {string}

packages/kit/test/apps/options-2/src/service-worker.js

@@ -1,7 +1,9 @@
 import { base, build, version } from '$service-worker';
+import src from './image.jpg?url';
 
 self.base = base;
 self.build = build;
+self.image_src = src;
 
 const name = `cache-${version}`;
 

packages/kit/test/apps/options-2/test/test.js

@@ -42,7 +42,7 @@ test.describe('paths', () => {
 test.describe('Service worker', () => {
 	if (process.env.DEV) return;
 
-	test('build /basepath/service-worker.js', async ({ request }) => {
+	test('build /basepath/service-worker.js', async ({ baseURL, request }) => {
 		const response = await request.get('/basepath/service-worker.js');
 		const content = await response.text();
 
@@ -54,12 +54,16 @@ test.describe('Service worker', () => {
 			build: null
 		};
 
+		const pathname = '/basepath/service-worker.js';
+
 		fn(self, {
-			pathname: '/basepath/service-worker.js'
+			href: baseURL + pathname,
+			pathname
 		});
 
 		expect(self.base).toBe('/basepath');
 		expect(self.build[0]).toMatch(/\/basepath\/_app\/immutable\/entry\/start\.[\w-]+\.js/);
+		expect(self.image_src).toMatch(/\/basepath\/_app\/immutable\/assets\/image\.[\w-]+\.jpg/);
 	});
 
 	test('does not register /basepath/service-worker.js', async ({ page }) => {