@sveltejs/kit 1.7.2 → 1.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/kit",
-  "version": "1.7.2",
+  "version": "1.8.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/sveltejs/kit",
@@ -13,7 +13,7 @@
     "@sveltejs/vite-plugin-svelte": "^2.0.0",
     "@types/cookie": "^0.5.1",
     "cookie": "^0.5.0",
-    "devalue": "^4.2.3",
+    "devalue": "^4.3.0",
     "esm-env": "^1.0.0",
     "kleur": "^4.1.5",
     "magic-string": "^0.29.0",
@@ -22,7 +22,7 @@
     "set-cookie-parser": "^2.5.1",
     "sirv": "^2.0.2",
     "tiny-glob": "^0.2.9",
-    "undici": "5.19.1"
+    "undici": "5.20.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.29.2",

package/src/core/env.js

@@ -3,11 +3,6 @@ import { runtime_base } from './utils.js';
 
 /**
  * @typedef {'public' | 'private'} EnvType
- * @typedef {{
- * 	public: Record<string, string>;
- * 	private: Record<string, string>;
- * 	prefix: string;
- * }} EnvData
  */
 
 /**
@@ -44,12 +39,12 @@ export function create_dynamic_module(type, dev_values) {
 		);
 		return `export const env = {\n${keys.join(',\n')}\n}`;
 	}
-	return `export { ${type}_env as env } from '${runtime_base}/shared.js';`;
+	return `export { ${type}_env as env } from '${runtime_base}/shared-server.js';`;
 }
 
 /**
  * @param {EnvType} id
- * @param {EnvData} env
+ * @param {import('types').Env} env
  * @returns {string}
  */
 export function create_static_types(id, env) {
@@ -63,15 +58,16 @@ export function create_static_types(id, env) {
 
 /**
  * @param {EnvType} id
- * @param {EnvData} env
+ * @param {import('types').Env} env
+ * @param {string} prefix
  * @returns {string}
  */
-export function create_dynamic_types(id, env) {
+export function create_dynamic_types(id, env, prefix) {
 	const properties = Object.keys(env[id])
 		.filter((k) => valid_identifier.test(k))
 		.map((k) => `\t\t${k}: string;`);
 
-	const prefixed = `[key: \`${env.prefix}\${string}\`]`;
+	const prefixed = `[key: \`${prefix}\${string}\`]`;
 
 	if (id === 'private') {
 		properties.push(`\t\t${prefixed}: undefined;`);

package/src/core/generate_manifest/index.js

@@ -86,7 +86,7 @@ export function generate_manifest({ build_data, relative_path, routes }) {
 		assets: new Set(${s(assets)}),
 		mimeTypes: ${s(get_mime_lookup(build_data.manifest_data))},
 		_: {
-			entry: ${s(build_data.client_entry)},
+			client: ${s(build_data.client)},
 			nodes: [
 				${(node_paths).map(loader).join(',\n\t\t\t\t')}
 			],

package/src/core/sync/write_ambient.js

@@ -21,9 +21,10 @@ function read_description(filename) {
 }
 
 /**
- * @param {import('../env.js').EnvData} env
+ * @param {import('types').Env} env
+ * @param {string} prefix
  */
-const template = (env) => `
+const template = (env, prefix) => `
 ${GENERATED_COMMENT}
 
 /// <reference types="@sveltejs/kit" />
@@ -35,10 +36,10 @@ ${read_description('$env+static+public.md')}
 ${create_static_types('public', env)}
 
 ${read_description('$env+dynamic+private.md')}
-${create_dynamic_types('private', env)}
+${create_dynamic_types('private', env, prefix)}
 
 ${read_description('$env+dynamic+public.md')}
-${create_dynamic_types('public', env)}
+${create_dynamic_types('public', env, prefix)}
 `;
 
 /**
@@ -53,6 +54,6 @@ export function write_ambient(config, mode) {
 
 	write_if_changed(
 		path.join(config.outDir, 'ambient.d.ts'),
-		template({ ...env, prefix: config.env.publicPrefix })
+		template(env, config.env.publicPrefix)
 	);
 }

package/src/core/sync/write_client_manifest.js

@@ -106,9 +106,8 @@ export function write_client_manifest(kit, manifest_data, output, metadata) {
 
 	const hooks_file = resolve_entry(kit.files.hooks.client);
 
-	// String representation of __CLIENT__/manifest.js
 	write_if_changed(
-		`${output}/manifest.js`,
+		`${output}/app.js`,
 		trim(`
 			${hooks_file ? `import * as client_hooks from '${relative_path(output, hooks_file)}';` : ''}
 
@@ -125,6 +124,8 @@ export function write_client_manifest(kit, manifest_data, output, metadata) {
 					hooks_file ? 'client_hooks.handleError || ' : ''
 				}(({ error }) => { console.error(error) }),
 			};
+
+			export { default as root } from '../root.svelte';
 		`)
 	);
 

package/src/core/sync/write_server.js

@@ -1,5 +1,6 @@
 import fs from 'node:fs';
 import path from 'node:path';
+import { hash } from '../../runtime/hash.js';
 import { posixify, resolve_entry } from '../../utils/filesystem.js';
 import { s } from '../../utils/misc.js';
 import { load_error_page, load_template } from '../config/index.js';
@@ -25,11 +26,11 @@ const server_template = ({
 	error_page
 }) => `
 import root from '../root.svelte';
-import { set_assets, set_building, set_private_env, set_public_env, set_version } from '${runtime_directory}/shared.js';
-
-set_version(${s(config.kit.version.name)});
+import { set_building } from '__sveltekit/environment';
+import { set_assets, set_private_env, set_public_env } from '${runtime_directory}/shared-server.js';
 
 export const options = {
+	app_template_contains_nonce: ${template.includes('%sveltekit.nonce%')},
 	csp: ${s(config.kit.csp)},
 	csrf_check_origin: ${s(config.kit.csrf.checkOrigin)},
 	embedded: ${config.kit.embedded},
@@ -50,7 +51,8 @@ export const options = {
 		error: ({ status, message }) => ${s(error_page)
 			.replace(/%sveltekit\.status%/g, '" + status + "')
 			.replace(/%sveltekit\.error\.message%/g, '" + message + "')}
-	}
+	},
+	version_hash: ${s(hash(config.kit.version.name))}
 };
 
 export function get_hooks() {

package/src/exports/vite/build/utils.js

@@ -6,6 +6,7 @@ import path from 'node:path';
  * @param {import('vite').Manifest} manifest
  * @param {string} entry
  * @param {boolean} add_dynamic_css
+ * @returns {import('types').AssetDependencies}
  */
 export function find_deps(manifest, entry, add_dynamic_css) {
 	/** @type {Set<string>} */

package/src/exports/vite/dev/index.js

@@ -105,11 +105,19 @@ export async function dev(vite, vite_config, svelte_config) {
 			assets: new Set(manifest_data.assets.map((asset) => asset.file)),
 			mimeTypes: get_mime_lookup(manifest_data),
 			_: {
-				entry: {
-					file: `${runtime_base}/client/start.js`,
-					imports: [],
-					stylesheets: [],
-					fonts: []
+				client: {
+					start: {
+						file: `${runtime_base}/client/start.js`,
+						imports: [],
+						stylesheets: [],
+						fonts: []
+					},
+					app: {
+						file: `${svelte_config.kit.outDir}/generated/client/app.js`,
+						imports: [],
+						stylesheets: [],
+						fonts: []
+					}
 				},
 				nodes: manifest_data.nodes.map((node, index) => {
 					return async () => {
@@ -443,15 +451,13 @@ export async function dev(vite, vite_config, svelte_config) {
 					await vite.ssrLoadModule(`${runtime_base}/server/index.js`)
 				);
 
-				const { set_assets, set_version, set_fix_stack_trace } =
+				const { set_assets, set_fix_stack_trace } =
 					/** @type {import('types').ServerInternalModule} */ (
-						await vite.ssrLoadModule(`${runtime_base}/shared.js`)
+						await vite.ssrLoadModule(`${runtime_base}/shared-server.js`)
 					);
 
 				set_assets(assets);
 
-				set_version(svelte_config.kit.version.name);
-
 				set_fix_stack_trace(fix_stack_trace);
 
 				const server = new Server(manifest);

package/src/exports/vite/index.js

@@ -23,6 +23,7 @@ import { write_client_manifest } from '../../core/sync/write_client_manifest.js'
 import prerender from '../../core/postbuild/prerender.js';
 import analyse from '../../core/postbuild/analyse.js';
 import { s } from '../../utils/misc.js';
+import { hash } from '../../runtime/hash.js';
 
 export { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
@@ -164,6 +165,8 @@ function kit({ svelte_config }) {
 	const { kit } = svelte_config;
 	const out = `${kit.outDir}/output`;
 
+	const version_hash = hash(kit.version.name);
+
 	/** @type {import('vite').ResolvedConfig} */
 	let vite_config;
 
@@ -220,12 +223,7 @@ function kit({ svelte_config }) {
 			const new_config = {
 				resolve: {
 					alias: [
-						{
-							find: '__CLIENT__',
-							replacement: `${generated}/${is_build ? 'client-optimized' : 'client'}`
-						},
 						{ find: '__SERVER__', replacement: `${generated}/server` },
-						{ find: '__GENERATED__', replacement: generated },
 						{ find: '$app', replacement: `${runtime_directory}/app` },
 						...get_config_aliases(kit)
 					]
@@ -324,12 +322,15 @@ function kit({ svelte_config }) {
 
 		async resolveId(id) {
 			// treat $env/static/[public|private] as virtual
-			if (id.startsWith('$env/') || id === '__sveltekit/paths' || id === '$service-worker') {
+			if (id.startsWith('$env/') || id.startsWith('__sveltekit/') || id === '$service-worker') {
 				return `\0${id}`;
 			}
 		},
 
 		async load(id, options) {
+			const browser = !options?.ssr;
+			const global = `__sveltekit_${version_hash}`;
+
 			if (options?.ssr === false && process.env.TEST !== 'true') {
 				const normalized_cwd = vite.normalizePath(cwd);
 				const normalized_lib = vite.normalizePath(kit.files.lib);
@@ -356,16 +357,28 @@ function kit({ svelte_config }) {
 						vite_config_env.command === 'serve' ? env.private : undefined
 					);
 				case '\0$env/dynamic/public':
+					// populate `$env/dynamic/public` from `window`
+					if (browser) {
+						return `export const env = ${global}.env;`;
+					}
+
 					return create_dynamic_module(
 						'public',
 						vite_config_env.command === 'serve' ? env.public : undefined
 					);
 				case '\0$service-worker':
 					return create_service_worker_module(svelte_config);
+
 				// for internal use only. it's published as $app/paths externally
 				// we use this alias so that we won't collide with user aliases
 				case '\0__sveltekit/paths':
 					const { assets, base } = svelte_config.kit.paths;
+
+					if (browser) {
+						return `export const base = ${s(base)};
+export const assets = ${global}.assets;`;
+					}
+
 					return `export const base = ${s(base)};
 export let assets = ${assets ? s(assets) : 'base'};
 
@@ -373,6 +386,15 @@ export let assets = ${assets ? s(assets) : 'base'};
 export function set_assets(path) {
 	assets = path;
 }`;
+
+				case '\0__sveltekit/environment':
+					const { version } = svelte_config.kit;
+					return `export const version = ${s(version.name)};
+export let building = false;
+
+export function set_building() {
+	building = true;
+}`;
 			}
 		}
 	};
@@ -460,30 +482,29 @@ export function set_assets(path) {
 						input[name] = path.resolve(file);
 					});
 				} else {
-					/** @type {Record<string, string>} */
-					input.start = `${runtime_directory}/client/start.js`;
+					input['entry/start'] = `${runtime_directory}/client/start.js`;
+					input['entry/app'] = `${kit.outDir}/generated/client-optimized/app.js`;
 
-					manifest_data.nodes.forEach((node) => {
-						if (node.component) {
-							const resolved = path.resolve(node.component);
-							const relative = decodeURIComponent(path.relative(kit.files.routes, resolved));
+					/**
+					 * @param {string | undefined} file
+					 */
+					function add_input(file) {
+						if (!file) return;
 
-							const name = relative.startsWith('..')
-								? path.basename(node.component)
-								: posixify(path.join('pages', relative));
-							input[`components/${name}`] = resolved;
-						}
+						const resolved = path.resolve(file);
+						const relative = decodeURIComponent(path.relative(kit.files.routes, resolved));
 
-						if (node.universal) {
-							const resolved = path.resolve(node.universal);
-							const relative = decodeURIComponent(path.relative(kit.files.routes, resolved));
+						const name = relative.startsWith('..')
+							? path.basename(file).replace(/^\+/, '')
+							: relative.replace(/(\\|\/)\+/g, '-').replace(/[\\/]/g, '-');
 
-							const name = relative.startsWith('..')
-								? path.basename(node.universal)
-								: posixify(path.join('pages', relative));
-							input[`modules/${name}`] = resolved;
-						}
-					});
+						input[`entry/${name}`] = resolved;
+					}
+
+					for (const node of manifest_data.nodes) {
+						add_input(node.component);
+						add_input(node.universal);
+					}
 				}
 
 				new_config = {
@@ -495,9 +516,13 @@ export function set_assets(path) {
 							input,
 							output: {
 								format: 'esm',
-								entryFileNames: ssr ? '[name].js' : `${prefix}/[name]-[hash].js`,
-								chunkFileNames: ssr ? 'chunks/[name].js' : `${prefix}/chunks/[name]-[hash].js`,
-								assetFileNames: `${prefix}/assets/[name]-[hash][extname]`,
+								// we use .mjs for client-side modules, because this signals to Chrome (when it
+								// reads the <link rel="preload">) that it should parse the file as a module
+								// rather than as a script, preventing a double parse. Ideally we'd just use
+								// modulepreload, but Safari prevents that
+								entryFileNames: ssr ? '[name].js' : `${prefix}/[name].[hash].mjs`,
+								chunkFileNames: ssr ? 'chunks/[name].js' : `${prefix}/chunks/[name].[hash].mjs`,
+								assetFileNames: `${prefix}/assets/[name].[hash][extname]`,
 								hoistTransitiveImports: false
 							},
 							preserveEntrySignatures: 'strict'
@@ -601,7 +626,7 @@ export function set_assets(path) {
 					app_path: `${kit.paths.base.slice(1)}${kit.paths.base ? '/' : ''}${kit.appDir}`,
 					manifest_data,
 					service_worker: !!service_worker_entry_file ? 'service-worker.js' : null, // TODO make file configurable?
-					client_entry: null,
+					client: null,
 					server_manifest
 				};
 
@@ -658,11 +683,18 @@ export function set_assets(path) {
 				/** @type {import('vite').Manifest} */
 				const client_manifest = JSON.parse(read(`${out}/client/${vite_config.build.manifest}`));
 
-				build_data.client_entry = find_deps(
-					client_manifest,
-					posixify(path.relative('.', `${runtime_directory}/client/start.js`)),
-					false
-				);
+				build_data.client = {
+					start: find_deps(
+						client_manifest,
+						posixify(path.relative('.', `${runtime_directory}/client/start.js`)),
+						false
+					),
+					app: find_deps(
+						client_manifest,
+						posixify(path.relative('.', `${kit.outDir}/generated/client-optimized/app.js`)),
+						false
+					)
+				};
 
 				const css = output.filter(
 					/** @type {(value: any) => value is import('rollup').OutputAsset} */

package/src/internal.d.ts

@@ -1,3 +1,10 @@
+/** Internal version of $app/environment */
+declare module '__sveltekit/environment' {
+	export const building: boolean;
+	export const version: string;
+	export function set_building(): void;
+}
+
 /** Internal version of $app/paths */
 declare module '__sveltekit/paths' {
 	export const base: `/${string}`;

package/src/runtime/app/environment.js

@@ -10,4 +10,4 @@ export const browser = BROWSER;
  */
 export const dev = DEV;
 
-export { building, version } from '../shared.js';
+export { building, version } from '__sveltekit/environment';