From 618468cd7b8e94934ac646e3c80832c1ed8357bf Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Fri, 27 May 2022 21:42:54 -0700 Subject: [PATCH] [chore] shared Vite build config --- .changeset/empty-numbers-wink.md | 5 ++ packages/kit/src/core/build/build_client.js | 61 +++--------------- packages/kit/src/core/build/build_server.js | 54 +++------------- .../src/core/build/build_service_worker.js | 9 +-- packages/kit/src/core/build/index.js | 8 --- packages/kit/src/core/build/utils.js | 64 +++++++++++++++++++ 6 files changed, 92 insertions(+), 109 deletions(-) create mode 100644 .changeset/empty-numbers-wink.md 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..c98cd313da99 100644 --- a/packages/kit/src/core/build/build_client.js +++ b/packages/kit/src/core/build/build_client.js @@ -1,32 +1,24 @@ 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 +44,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..eb8e58b22c03 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,7 +106,6 @@ export class Server { /** * @param {{ * cwd: string; - * assets_base: string; * config: import('types').ValidatedConfig * manifest_data: import('types').ManifestData * build_dir: string; @@ -117,19 +115,17 @@ export class Server { * }} options * @param {{ vite_manifest: import('vite').Manifest, assets: import('rollup').OutputAsset[] }} client */ -export async function build_server( - { +export async function build_server(options, client) { + const { cwd, - assets_base, config, manifest_data, build_dir, output_dir, service_worker_entry_file, service_worker_register - }, - client -) { + } = 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'); @@ -211,40 +207,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..e635e38e323a 100644 --- a/packages/kit/src/core/build/index.js +++ b/packages/kit/src/core/build/index.js @@ -26,18 +26,10 @@ 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`), diff --git a/packages/kit/src/core/build/utils.js b/packages/kit/src/core/build/utils.js index 23904c58b245..88c4998872e1 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,65 @@ 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. 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; + return `${assets || base}/${config.kit.appDir}/immutable/`; +}