@sveltejs/kit 1.8.3 → 1.8.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/kit",
-  "version": "1.8.3",
+  "version": "1.8.5",
   "repository": {
     "type": "git",
     "url": "https://github.com/sveltejs/kit",
@@ -16,7 +16,7 @@
     "devalue": "^4.3.0",
     "esm-env": "^1.0.0",
     "kleur": "^4.1.5",
-    "magic-string": "^0.29.0",
+    "magic-string": "^0.30.0",
     "mime": "^3.0.0",
     "sade": "^1.8.1",
     "set-cookie-parser": "^2.5.1",
@@ -80,7 +80,7 @@
     "node": "^16.14 || >=18"
   },
   "scripts": {
-    "lint": "prettier --check . --config ../../.prettierrc --ignore-path .gitignore && eslint src/**/*.js",
+    "lint": "prettier --check . --config ../../.prettierrc --ignore-path .gitignore",
     "check": "tsc",
     "check:all": "tsc && pnpm -r --filter=\"./**\" check",
     "format": "prettier --write . --config ../../.prettierrc --ignore-path .gitignore",

package/postinstall.js

@@ -1,5 +1,5 @@
-import fs from 'fs';
-import path from 'path';
+import fs from 'node:fs';
+import path from 'node:path';
 import glob from 'tiny-glob/sync.js';
 import { load_config } from './src/core/config/index.js';
 import * as sync from './src/core/sync/sync.js';

package/src/core/adapt/builder.js

@@ -82,7 +82,7 @@ export function create_builder({
 				return;
 			}
 
-			const files = await glob('**/*.{html,js,json,css,svg,xml,wasm}', {
+			const files = await glob('**/*.{html,js,mjs,json,css,svg,xml,wasm}', {
 				cwd: directory,
 				dot: true,
 				absolute: true,

package/src/core/config/options.js

@@ -138,6 +138,10 @@ const options = object(
 
 			outDir: string('.svelte-kit'),
 
+			output: object({
+				preloadStrategy: list(['modulepreload', 'preload-js', 'preload-mjs'], 'modulepreload')
+			}),
+
 			paths: object({
 				base: validate('', (input, keypath) => {
 					assert_string(input, keypath);

package/src/core/sync/write_server.js

@@ -36,6 +36,7 @@ export const options = {
 	embedded: ${config.kit.embedded},
 	env_public_prefix: '${config.kit.env.publicPrefix}',
 	hooks: null, // added lazily, via \`get_hooks\`
+	preload_strategy: ${s(config.kit.output.preloadStrategy)},
 	root,
 	service_worker: ${has_service_worker},
 	templates: {

package/src/exports/vite/index.js

@@ -507,6 +507,9 @@ export function set_building() {
 					}
 				}
 
+				// see the kit.output.preloadStrategy option for details on why we have multiple options here
+				const ext = kit.output.preloadStrategy === 'preload-mjs' ? 'mjs' : 'js';
+
 				new_config = {
 					base: ssr ? assets_base(kit) : './',
 					build: {
@@ -516,12 +519,8 @@ export function set_building() {
 							input,
 							output: {
 								format: 'esm',
-								// 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`,
+								entryFileNames: ssr ? '[name].js' : `${prefix}/[name].[hash].${ext}`,
+								chunkFileNames: ssr ? 'chunks/[name].js' : `${prefix}/chunks/[name].[hash].${ext}`,
 								assetFileNames: `${prefix}/assets/[name].[hash][extname]`,
 								hoistTransitiveImports: false
 							},

package/src/runtime/server/data/index.js

@@ -38,8 +38,6 @@ export async function render_data(
 		});
 	}
 
-	state.initiator = route;
-
 	try {
 		const node_ids = [...route.page.layouts, route.page.leaf];
 		const invalidated = invalidated_data_nodes ?? node_ids.map(() => true);

package/src/runtime/server/endpoint.js

@@ -4,12 +4,11 @@ import { method_not_allowed } from './utils.js';
 
 /**
  * @param {import('types').RequestEvent} event
- * @param {import('types').SSRRoute} route
  * @param {import('types').SSREndpoint} mod
  * @param {import('types').SSRState} state
  * @returns {Promise<Response>}
  */
-export async function render_endpoint(event, route, mod, state) {
+export async function render_endpoint(event, mod, state) {
 	const method = /** @type {import('types').HttpMethod} */ (event.request.method);
 
 	let handler = mod[method];
@@ -29,7 +28,7 @@ export async function render_endpoint(event, route, mod, state) {
 	}
 
 	if (state.prerendering && !prerender) {
-		if (state.initiator) {
+		if (state.depth > 0) {
 			// if request came from a prerendered page, bail
 			throw new Error(`${event.route.id} is not prerenderable`);
 		} else {
@@ -39,8 +38,6 @@ export async function render_endpoint(event, route, mod, state) {
 		}
 	}
 
-	state.initiator = route;
-
 	try {
 		const response = await handler(
 			/** @type {import('types').RequestEvent<Record<string, any>>} */ (event)

package/src/runtime/server/fetch.js

@@ -131,7 +131,10 @@ export function create_fetch({ event, options, manifest, state, get_cookie_heade
 					);
 				}
 
-				response = await respond(request, options, manifest, state);
+				response = await respond(request, options, manifest, {
+					...state,
+					depth: state.depth + 1
+				});
 
 				const set_cookie = response.headers.get('set-cookie');
 				if (set_cookie) {

package/src/runtime/server/index.js

@@ -58,6 +58,10 @@ export class Server {
 			);
 		}
 
-		return respond(request, this.#options, this.#manifest, options);
+		return respond(request, this.#options, this.#manifest, {
+			...options,
+			error: false,
+			depth: 0
+		});
 	}
 }

package/src/runtime/server/page/index.js

@@ -16,9 +16,13 @@ import { respond_with_error } from './respond_with_error.js';
 import { get_option } from '../../../utils/options.js';
 import { get_data_json } from '../data/index.js';
 
+/**
+ * The maximum request depth permitted before assuming we're stuck in an infinite loop
+ */
+const MAX_DEPTH = 10;
+
 /**
  * @param {import('types').RequestEvent} event
- * @param {import('types').SSRRoute} route
  * @param {import('types').PageNodeIndexes} page
  * @param {import('types').SSROptions} options
  * @param {import('types').SSRManifest} manifest
@@ -26,16 +30,14 @@ import { get_data_json } from '../data/index.js';
  * @param {import('types').RequiredResolveOptions} resolve_opts
  * @returns {Promise<Response>}
  */
-export async function render_page(event, route, page, options, manifest, state, resolve_opts) {
-	if (state.initiator === route) {
+export async function render_page(event, page, options, manifest, state, resolve_opts) {
+	if (state.depth > MAX_DEPTH) {
 		// infinite request cycle detected
 		return text(`Not found: ${event.url.pathname}`, {
-			status: 404
+			status: 404 // TODO in some cases this should be 500. not sure how to differentiate
 		});
 	}
 
-	state.initiator = route;
-
 	if (is_action_json_request(event)) {
 		const node = await manifest._.nodes[page.leaf]();
 		return handle_action_json_request(event, options, node?.server);
@@ -322,7 +324,7 @@ export async function render_page(event, route, page, options, manifest, state,
 			fetched
 		});
 	} catch (e) {
-		// if we end up here, it means the data loaded successfull
+		// if we end up here, it means the data loaded successfully
 		// but the page failed to render, or that a prerendering error occurred
 		return await respond_with_error({
 			event,

package/src/runtime/server/page/render.js

@@ -273,12 +273,13 @@ export async function render_response({
 		);
 
 		for (const path of included_modulepreloads) {
-			// we use modulepreload with the Link header for Chrome, along with
-			// <link rel="preload"> for Safari. This results in the fastest loading in
-			// the most used browsers, with no double-loading. Note that we need to use
-			// .mjs extensions for `preload` to behave like `modulepreload` in Chrome
+			// see the kit.output.preloadStrategy option for details on why we have multiple options here
 			link_header_preloads.add(`<${encodeURI(path)}>; rel="modulepreload"; nopush`);
-			head += `\n\t\t<link rel="preload" as="script" crossorigin="anonymous" href="${path}">`;
+			if (options.preload_strategy !== 'modulepreload') {
+				head += `\n\t\t<link rel="preload" as="script" crossorigin="anonymous" href="${path}">`;
+			} else if (state.prerendering) {
+				head += `\n\t\t<link rel="modulepreload" href="${path}">`;
+			}
 		}
 
 		const blocks = [];

package/src/runtime/server/page/respond_with_error.js

@@ -1,11 +1,6 @@
 import { render_response } from './render.js';
 import { load_data, load_server_data } from './load_data.js';
-import {
-	handle_error_and_jsonify,
-	static_error_page,
-	redirect_response,
-	GENERIC_ERROR
-} from '../utils.js';
+import { handle_error_and_jsonify, static_error_page, redirect_response } from '../utils.js';
 import { get_option } from '../../../utils/options.js';
 import { HttpError, Redirect } from '../../control.js';
 
@@ -43,7 +38,7 @@ export async function respond_with_error({
 		const csr = get_option([default_layout], 'csr') ?? true;
 
 		if (ssr) {
-			state.initiator = GENERIC_ERROR;
+			state.error = true;
 
 			const server_data_promise = load_server_data({
 				event,

package/src/runtime/server/respond.js

@@ -5,7 +5,7 @@ import { render_page } from './page/index.js';
 import { render_response } from './page/render.js';
 import { respond_with_error } from './page/respond_with_error.js';
 import { is_form_content_type } from '../../utils/http.js';
-import { GENERIC_ERROR, handle_fatal_error, redirect_response } from './utils.js';
+import { handle_fatal_error, redirect_response } from './utils.js';
 import {
 	decode_pathname,
 	decode_params,
@@ -38,7 +38,13 @@ const default_filter = () => false;
 /** @type {import('types').RequiredResolveOptions['preload']} */
 const default_preload = ({ type }) => type === 'js' || type === 'css';
 
-/** @type {import('types').Respond} */
+/**
+ * @param {Request} request
+ * @param {import('types').SSROptions} options
+ * @param {import('types').SSRManifest} manifest
+ * @param {import('types').SSRState} state
+ * @returns {Promise<Response>}
+ */
 export async function respond(request, options, manifest, state) {
 	/** URL but stripped from the potential `/__data.json` suffix and its search param  */
 	let url = new URL(request.url);
@@ -358,17 +364,9 @@ export async function respond(request, options, manifest, state) {
 						trailing_slash ?? 'never'
 					);
 				} else if (route.endpoint && (!route.page || is_endpoint_request(event))) {
-					response = await render_endpoint(event, route, await route.endpoint(), state);
+					response = await render_endpoint(event, await route.endpoint(), state);
 				} else if (route.page) {
-					response = await render_page(
-						event,
-						route,
-						route.page,
-						options,
-						manifest,
-						state,
-						resolve_opts
-					);
+					response = await render_page(event, route.page, options, manifest, state, resolve_opts);
 				} else {
 					// a route will always have a page or an endpoint, but TypeScript
 					// doesn't know that
@@ -378,15 +376,15 @@ export async function respond(request, options, manifest, state) {
 				return response;
 			}
 
-			if (state.initiator === GENERIC_ERROR) {
+			if (state.error) {
 				return text('Internal Server Error', {
 					status: 500
 				});
 			}
 
 			// if this request came direct from the user, rather than
-			// via a `fetch` in a `load`, render a 404 page
-			if (!state.initiator) {
+			// via our own `fetch`, render a 404 page
+			if (state.depth === 0) {
 				return await respond_with_error({
 					event,
 					options,

package/src/runtime/server/utils.js

@@ -16,11 +16,6 @@ export function is_pojo(body) {
 	return true;
 }
 
-/** @type {import('types').SSRErrorPage} */
-export const GENERIC_ERROR = {
-	id: '__error'
-};
-
 /**
  * @param {Partial<Record<import('types').HttpMethod, any>>} mod
  * @param {import('types').HttpMethod} method

package/types/index.d.ts

@@ -422,6 +422,20 @@ export interface KitConfig {
 	 * @default ".svelte-kit"
 	 */
 	outDir?: string;
+	/**
+	 * Options related to the build output format
+	 */
+	output?: {
+		/**
+		 * SvelteKit will preload the JavaScript modules needed for the initial page to avoid import 'waterfalls', resulting in faster application startup. There
+		 * are three strategies with different trade-offs:
+		 * - `modulepreload` - uses `<link rel="modulepreload">`. This delivers the best results in Chromium-based browsers, but is currently ignored by Firefox and Safari (though support is coming to Safari soon).
+		 * - `preload-js` - uses `<link rel="preload">`. Prevents waterfalls in Chromium and Safari, but Chromium will parse each module twice (once as a script, once as a module). Causes modules to be requested twice in Firefox. This is a good setting if you want to maximise performance for users on iOS devices at the cost of a very slight degradation for Chromium users.
+		 * - `preload-mjs` - uses `<link rel="preload">` but with the `.mjs` extension which prevents double-parsing in Chromium. Some static webservers will fail to serve .mjs files with a `Content-Type: application/javascript` header, which will cause your application to break. If that doesn't apply to you, this is the option that will deliver the best performance for the largest number of users, until `modulepreload` is more widely supported.
+		 * @default "modulepreload"
+		 */
+		preloadStrategy?: 'modulepreload' | 'preload-js' | 'preload-mjs';
+	};
 	paths?: {
 		/**
 		 * An absolute path that your app's files are served from. This is useful if your files are served from a storage bucket of some kind.

package/types/internal.d.ts

@@ -157,15 +157,6 @@ export type RecursiveRequired<T> = {
 
 export type RequiredResolveOptions = Required<ResolveOptions>;
 
-export interface Respond {
-	(
-		request: Request,
-		options: SSROptions,
-		manifest: SSRManifest,
-		state: SSRState
-	): Promise<Response>;
-}
-
 export interface RouteParam {
 	name: string;
 	matcher: string;
@@ -337,6 +328,7 @@ export interface SSROptions {
 	embedded: boolean;
 	env_public_prefix: string;
 	hooks: ServerHooks;
+	preload_strategy: ValidatedConfig['kit']['output']['preloadStrategy'];
 	root: SSRComponent['default'];
 	service_worker: boolean;
 	templates: {
@@ -352,10 +344,6 @@ export interface SSROptions {
 	version_hash: string;
 }
 
-export interface SSRErrorPage {
-	id: '__error';
-}
-
 export interface PageNodeIndexes {
 	errors: Array<number | undefined>;
 	layouts: Array<number | undefined>;
@@ -380,7 +368,14 @@ export interface SSRRoute {
 export interface SSRState {
 	fallback?: string;
 	getClientAddress(): string;
-	initiator?: SSRRoute | SSRErrorPage;
+	/**
+	 * True if we're currently attempting to render an error page
+	 */
+	error: boolean;
+	/**
+	 * Allows us to prevent `event.fetch` from making infinitely looping internal requests
+	 */
+	depth: number;
 	platform?: any;
 	prerendering?: PrerenderOptions;
 	/**