[chore] shared Vite build config (#5105)

.changeset/empty-numbers-wink.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+[chore] shared Vite build config

packages/kit/src/core/build/build_client.js

@@ -1,32 +1,22 @@
 import fs from 'fs';
 import path from 'path';
-import { svelte } from '@sveltejs/vite-plugin-svelte';
 import { deep_merge } from '../../utils/object.js';
 import { print_config_conflicts } from '../config/index.js';
-import { get_aliases } from '../utils.js';
-import { create_build, find_deps } from './utils.js';
+import { create_build, find_deps, get_default_config } from './utils.js';
 import { posixify } from '../../utils/filesystem.js';
 
 /**
  * @param {{
  *   cwd: string;
- *   assets_base: string;
- *   config: import('types').ValidatedConfig
- *   manifest_data: import('types').ManifestData
+ *   config: import('types').ValidatedConfig;
+ *   manifest_data: import('types').ManifestData;
  *   output_dir: string;
  *   client_entry_file: string;
- *   service_worker_entry_file: string | null;
- *   service_worker_register: boolean;
  * }} options
  */
-export async function build_client({
-	cwd,
-	assets_base,
-	config,
-	manifest_data,
-	output_dir,
-	client_entry_file
-}) {
+export async function build_client(options) {
+	const { cwd, config, manifest_data, output_dir, client_entry_file } = options;
+
 	process.env.VITE_SVELTEKIT_APP_VERSION = config.kit.version.name;
 	process.env.VITE_SVELTEKIT_APP_VERSION_FILE = `${config.kit.appDir}/version.json`;
 	process.env.VITE_SVELTEKIT_APP_VERSION_POLL_INTERVAL = `${config.kit.version.pollInterval}`;
@@ -52,43 +42,10 @@ export async function build_client({
 	});
 
 	/** @type {[any, string[]]} */
-	const [merged_config, conflicts] = deep_merge(await config.kit.vite(), {
-		configFile: false,
-		root: cwd,
-		base: assets_base,
-		build: {
-			cssCodeSplit: true,
-			manifest: true,
-			outDir: `${client_out_dir}/immutable`,
-			polyfillDynamicImport: false,
-			rollupOptions: {
-				input,
-				output: {
-					entryFileNames: '[name]-[hash].js',
-					chunkFileNames: 'chunks/[name]-[hash].js',
-					assetFileNames: 'assets/[name]-[hash][extname]'
-				},
-				preserveEntrySignatures: 'strict'
-			}
-		},
-		resolve: {
-			alias: get_aliases(config)
-		},
-		plugins: [
-			svelte({
-				...config,
-				emitCss: true,
-				compilerOptions: {
-					...config.compilerOptions,
-					hydratable: !!config.kit.browser.hydrate
-				},
-				configFile: false
-			})
-		],
-		// prevent Vite copying the contents of `config.kit.files.assets`,
-		// if it happens to be 'public' instead of 'static'
-		publicDir: false
-	});
+	const [merged_config, conflicts] = deep_merge(
+		await config.kit.vite(),
+		get_default_config({ ...options, client_out_dir, input, ssr: false })
+	);
 
 	print_config_conflicts(conflicts, 'kit.vite.', 'build_client');
 

packages/kit/src/core/build/build_server.js

@@ -1,11 +1,10 @@
 import fs from 'fs';
 import path from 'path';
-import { svelte } from '@sveltejs/vite-plugin-svelte';
 import { mkdirp, posixify } from '../../utils/filesystem.js';
 import { deep_merge } from '../../utils/object.js';
 import { load_template, print_config_conflicts } from '../config/index.js';
-import { get_aliases, get_runtime_path, resolve_entry } from '../utils.js';
-import { create_build, find_deps } from './utils.js';
+import { get_runtime_path, resolve_entry } from '../utils.js';
+import { create_build, find_deps, get_default_config } from './utils.js';
 import { s } from '../../utils/misc.js';
 
 /**
@@ -107,29 +106,17 @@ export class Server {
 /**
  * @param {{
  *   cwd: string;
- *   assets_base: string;
  *   config: import('types').ValidatedConfig
  *   manifest_data: import('types').ManifestData
  *   build_dir: string;
  *   output_dir: string;
  *   service_worker_entry_file: string | null;
- *   service_worker_register: boolean;
  * }} options
  * @param {{ vite_manifest: import('vite').Manifest, assets: import('rollup').OutputAsset[] }} client
  */
-export async function build_server(
-	{
-		cwd,
-		assets_base,
-		config,
-		manifest_data,
-		build_dir,
-		output_dir,
-		service_worker_entry_file,
-		service_worker_register
-	},
-	client
-) {
+export async function build_server(options, client) {
+	const { cwd, config, manifest_data, build_dir, output_dir, service_worker_entry_file } = options;
+
 	let hooks_file = resolve_entry(config.kit.files.hooks);
 	if (!hooks_file || !fs.existsSync(hooks_file)) {
 		hooks_file = path.join(config.kit.outDir, 'build/hooks.js');
@@ -181,7 +168,7 @@ export async function build_server(
 		server_template({
 			config,
 			hooks: app_relative(hooks_file),
-			has_service_worker: service_worker_register && !!service_worker_entry_file,
+			has_service_worker: config.kit.serviceWorker.register && !!service_worker_entry_file,
 			runtime: get_runtime_path(config),
 			template: load_template(cwd, config)
 		})
@@ -211,40 +198,10 @@ export async function build_server(
 	const [modified_vite_config] = deep_merge(default_config, vite_config);
 
 	/** @type {[any, string[]]} */
-	const [merged_config, conflicts] = deep_merge(modified_vite_config, {
-		configFile: false,
-		root: cwd,
-		base: assets_base,
-		build: {
-			ssr: true,
-			outDir: `${output_dir}/server`,
-			manifest: true,
-			polyfillDynamicImport: false,
-			rollupOptions: {
-				input,
-				output: {
-					format: 'esm',
-					entryFileNames: '[name].js',
-					chunkFileNames: 'chunks/[name]-[hash].js',
-					assetFileNames: 'assets/[name]-[hash][extname]'
-				},
-				preserveEntrySignatures: 'strict'
-			}
-		},
-		plugins: [
-			svelte({
-				...config,
-				compilerOptions: {
-					...config.compilerOptions,
-					hydratable: !!config.kit.browser.hydrate
-				},
-				configFile: false
-			})
-		],
-		resolve: {
-			alias: get_aliases(config)
-		}
-	});
+	const [merged_config, conflicts] = deep_merge(
+		modified_vite_config,
+		get_default_config({ ...options, input, ssr: true })
+	);
 
 	print_config_conflicts(conflicts, 'kit.vite.', 'build_server');
 

packages/kit/src/core/build/build_service_worker.js

@@ -4,11 +4,10 @@ import { s } from '../../utils/misc.js';
 import { deep_merge } from '../../utils/object.js';
 import { normalize_path } from '../../utils/url.js';
 import { print_config_conflicts } from '../config/index.js';
+import { assets_base } from './utils.js';
 
 /**
  * @param {{
- *   cwd: string;
- *   assets_base: string;
  *   config: import('types').ValidatedConfig;
  *   manifest_data: import('types').ManifestData;
  *   output_dir: string;
@@ -18,7 +17,7 @@ import { print_config_conflicts } from '../config/index.js';
  * @param {import('vite').Manifest} client_manifest
  */
 export async function build_service_worker(
-	{ cwd, assets_base, config, manifest_data, output_dir, service_worker_entry_file },
+	{ config, manifest_data, output_dir, service_worker_entry_file },
 	prerendered,
 	client_manifest
 ) {
@@ -69,9 +68,7 @@ export async function build_service_worker(
 
 	/** @type {[any, string[]]} */
 	const [merged_config, conflicts] = deep_merge(await config.kit.vite(), {
-		configFile: false,
-		root: cwd,
-		base: assets_base,
+		base: assets_base(config),
 		build: {
 			lib: {
 				entry: service_worker_entry_file,

packages/kit/src/core/build/index.js

@@ -26,23 +26,14 @@ export async function build(config, { log }) {
 
 	const { manifest_data } = sync.all(config);
 
-	// TODO this is so that Vite's preloading works. Unfortunately, it fails
-	// during `svelte-kit preview`, because we use a local asset path. If Vite
-	// used relative paths, I _think_ this could get fixed. Issue here:
-	// https://github.com/vitejs/vite/issues/2009
-	const { base, assets } = config.kit.paths;
-	const assets_base = `${assets || base}/${config.kit.appDir}/immutable/`;
-
 	const options = {
 		cwd,
 		config,
 		build_dir,
-		assets_base,
 		manifest_data,
 		output_dir,
 		client_entry_file: path.relative(cwd, `${get_runtime_path(config)}/client/start.js`),
-		service_worker_entry_file: resolve_entry(config.kit.files.serviceWorker),
-		service_worker_register: config.kit.serviceWorker.register
+		service_worker_entry_file: resolve_entry(config.kit.files.serviceWorker)
 	};
 
 	const client = await build_client(options);

packages/kit/src/core/build/utils.js

@@ -1,4 +1,6 @@
+import { svelte } from '@sveltejs/vite-plugin-svelte';
 import * as vite from 'vite';
+import { get_aliases } from '../utils.js';
 
 /**
  * @typedef {import('rollup').RollupOutput} RollupOutput
@@ -41,3 +43,64 @@ export function find_deps(file, manifest, js, css) {
 		chunk.imports.forEach((file) => find_deps(file, manifest, js, css));
 	}
 }
+
+/**
+ * @param {{
+ *   client_out_dir?: string;
+ *   config: import('types').ValidatedConfig;
+ *   input: Record<string, string>;
+ *   output_dir: string;
+ *   ssr: boolean;
+ * }} options
+ * @return {import('vite').UserConfig}
+ */
+export const get_default_config = function ({ client_out_dir, config, input, output_dir, ssr }) {
+	return {
+		base: assets_base(config),
+		build: {
+			cssCodeSplit: true,
+			manifest: true,
+			outDir: ssr ? `${output_dir}/server` : `${client_out_dir}/immutable`,
+			polyfillDynamicImport: false,
+			rollupOptions: {
+				input,
+				output: {
+					format: 'esm',
+					entryFileNames: ssr ? '[name].js' : '[name]-[hash].js',
+					chunkFileNames: 'chunks/[name]-[hash].js',
+					assetFileNames: 'assets/[name]-[hash][extname]'
+				},
+				preserveEntrySignatures: 'strict'
+			},
+			ssr
+		},
+		plugins: [
+			svelte({
+				...config,
+				compilerOptions: {
+					...config.compilerOptions,
+					hydratable: !!config.kit.browser.hydrate
+				},
+				configFile: false
+			})
+		],
+		// prevent Vite copying the contents of `config.kit.files.assets`,
+		// if it happens to be 'public' instead of 'static'
+		publicDir: false,
+		resolve: {
+			alias: get_aliases(config)
+		}
+	};
+};
+
+/**
+ * @param {import('types').ValidatedConfig} config
+ * @returns {string}
+ */
+export function assets_base(config) {
+	// TODO this is so that Vite's preloading works. Unfortunately, it fails
+	// during `svelte-kit preview`, because we use a local asset path. This
+	// may be fixed in Vite 3: https://github.com/vitejs/vite/issues/2009
+	const { base, assets } = config.kit.paths;
+	return `${assets || base}/${config.kit.appDir}/immutable/`;
+}