[fix] service-worker builder constant replacement (#7140)

* [fix] service-worker builder constant replacement

* update docs

* changeset

Co-authored-by: Rich Harris <[email protected]>

Author: guifesquet

.changeset/chilled-suns-travel.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+Apply define config to service worker

documentation/docs/10-service-workers.md

@@ -8,6 +8,6 @@ In SvelteKit, if you have a `src/service-worker.js` file (or `src/service-worker
 
 > You can change the [location of your service worker](/docs/configuration#files) and [disable automatic registration](/docs/configuration#serviceworker) in your project configuration.
 
-Inside the service worker you have access to the [`$service-worker` module](/docs/modules#$service-worker).
+Inside the service worker you have access to the [`$service-worker` module](/docs/modules#$service-worker). If your Vite config specifies `define`, this will be applied to service workers as well as your server/client builds.
 
 Because it needs to be bundled (since browsers don't yet support `import` in this context), and depends on the client-side app's build manifest, **service workers only work in the production build, not in development**. To test it locally, use `vite preview`.

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

@@ -16,7 +16,7 @@ import { assets_base } from './utils.js';
  * @param {import('vite').Manifest} client_manifest
  */
 export async function build_service_worker(
-	{ config, manifest_data, output_dir, service_worker_entry_file },
+	{ config, vite_config, manifest_data, output_dir, service_worker_entry_file },
 	prerendered,
 	client_manifest
 ) {
@@ -79,6 +79,7 @@ export async function build_service_worker(
 			outDir: `${output_dir}/client`,
 			emptyOutDir: false
 		},
+		define: vite_config.define,
 		configFile: false,
 		resolve: {
 			alias: {

packages/kit/test/prerendering/basics/src/service-worker.js

@@ -0,0 +1,3 @@
+if (process.env.MY_ENV === 'MY_ENV DEFINED') {
+	console.log(process.env.MY_ENV);
+}

packages/kit/test/prerendering/basics/test/test.js

@@ -230,4 +230,9 @@ test('injects relative service worker', () => {
 	assert.ok(content.includes(`navigator.serviceWorker.register('./service-worker.js')`));
 });
 
+test('define service worker variables', () => {
+	const content = read('service-worker.js');
+	assert.ok(content.includes(`MY_ENV DEFINED`));
+});
+
 test.run();

packages/kit/test/prerendering/basics/vite.config.js

@@ -13,6 +13,10 @@ const config = {
 
 	plugins: [sveltekit()],
 
+	define: {
+		'process.env.MY_ENV': '"MY_ENV DEFINED"'
+	},
+
 	server: {
 		fs: {
 			allow: [path.resolve('../../../src')]