diff --git a/.changeset/empty-numbers-wink.md b/.changeset/empty-numbers-wink.md new file mode 100644 index 000000000000..943dacd3d127 --- /dev/null +++ b/.changeset/empty-numbers-wink.md @@ -0,0 +1,5 @@ +--- +'@sveltejs/kit': patch +--- + +[chore] shared Vite build config diff --git a/packages/kit/src/core/build/build_client.js b/packages/kit/src/core/build/build_client.js index 8bea2daf31b1..9b8a793ec8bc 100644 --- a/packages/kit/src/core/build/build_client.js +++ b/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'); diff --git a/packages/kit/src/core/build/build_server.js b/packages/kit/src/core/build/build_server.js index d5b8d7e6115e..f1b50f5af18c 100644 --- a/packages/kit/src/core/build/build_server.js +++ b/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'); diff --git a/packages/kit/src/core/build/build_service_worker.js b/packages/kit/src/core/build/build_service_worker.js index 6b43554bdd2d..07a188b6aa55 100644 --- a/packages/kit/src/core/build/build_service_worker.js +++ b/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, diff --git a/packages/kit/src/core/build/index.js b/packages/kit/src/core/build/index.js index 4bd182b64753..ace5c1e4d02e 100644 --- a/packages/kit/src/core/build/index.js +++ b/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); diff --git a/packages/kit/src/core/build/utils.js b/packages/kit/src/core/build/utils.js index 23904c58b245..6a0477b9dcc2 100644 --- a/packages/kit/src/core/build/utils.js +++ b/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; + * 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/`; +}