@sveltejs/kit 3.0.0-next.2 → 3.0.0-next.21

package/src/exports/vite/utils.js

@@ -1,31 +1,24 @@
+import fs from 'node:fs';
 import path from 'node:path';
 import { posixify } from '../../utils/os.js';
 import { negotiate } from '../../utils/http.js';
 import { escape_html } from '../../utils/escape.js';
+import { escape_for_regexp } from '../../utils/regex.js';
 import { stackless } from '../../utils/error.js';
 import { dedent } from '../../core/sync/utils.js';
-import {
-	app_server,
-	app_env_private,
-	service_worker,
-	sveltekit_env_private
-} from './module_ids.js';
+import { app_server, app_env_private, sveltekit_env_private } from './module_ids.js';
 
 /**
- * Transforms kit.alias to a valid vite.resolve.alias array.
+ * Transforms alias to a valid vite.resolve.alias array.
  *
  * Related to tsconfig path alias creation.
  *
- * @param {import('types').ValidatedKitConfig} config
+ * @param {import('types').ValidatedConfig} config
  * @param {string} root
- * */
+ */
 export function get_config_aliases(config, root) {
 	/** @type {import('vite').Alias[]} */
-	const alias = [
-		// For now, we handle `$lib` specially here rather than make it a default value for
-		// `config.kit.alias` since it has special meaning for packaging, etc.
-		{ find: '$lib', replacement: config.files.lib }
-	];
+	const alias = [];
 
 	for (let [key, value] of Object.entries(config.alias)) {
 		value = posixify(value);
@@ -36,29 +29,22 @@ export function get_config_aliases(config, root) {
 			// Doing just `{ find: key.slice(0, -2) ,..}` would mean `import .. from "key"` would also be matched, which we don't want
 			alias.push({
 				find: new RegExp(`^${escape_for_regexp(key.slice(0, -2))}\\/(.+)$`),
-				replacement: `${path.resolve(root, value)}/$1`
+				replacement: `${posixify(path.resolve(root, value))}/$1`
 			});
 		} else if (key + '/*' in config.alias) {
 			// key and key/* both exist -> the replacement for key needs to happen _only_ on import .. from "key"
 			alias.push({
 				find: new RegExp(`^${escape_for_regexp(key)}$`),
-				replacement: path.resolve(root, value)
+				replacement: posixify(path.resolve(root, value))
 			});
 		} else {
-			alias.push({ find: key, replacement: path.resolve(root, value) });
+			alias.push({ find: key, replacement: posixify(path.resolve(root, value)) });
 		}
 	}
 
 	return alias;
 }
 
-/**
- * @param {string} str
- */
-function escape_for_regexp(str) {
-	return str.replace(/[.*+?^${}()|[\]\\]/g, (match) => '\\' + match);
-}
-
 /**
  * Silently respond with 404 for Chrome DevTools workspaces request.
  * Chrome always requests this at the root, regardless of base path.
@@ -118,22 +104,17 @@ export function not_found(req, res, base) {
 const query_pattern = /\?.*$/s;
 
 /**
- * Removes cwd/lib path from the start of the id
+ * Removes cwd path from the start of the id and replaces any `#`-prefixed
+ * import alias target paths with their alias names.
  * @param {string} id
- * @param {string} lib
+ * @param {Array<{ alias: string, path: string }>} aliases — sorted by path length descending
  * @param {string} cwd
  */
-export function normalize_id(id, lib, cwd) {
+export function normalize_id(id, aliases, cwd) {
 	id = id.replace(query_pattern, '');
 
-	if (id.startsWith(lib)) {
-		id = id.replace(lib, '$lib');
-	}
-
-	if (id.startsWith(cwd)) {
-		id = path.relative(cwd, id);
-	}
-
+	// check before the cwd is removed — in a user's app these modules live
+	// inside `node_modules`, i.e. within the cwd
 	if (id === app_server) {
 		return '$app/server';
 	}
@@ -142,29 +123,86 @@ export function normalize_id(id, lib, cwd) {
 		return '$app/env/private';
 	}
 
-	if (id === service_worker) {
-		return '$service-worker';
+	for (const { alias, path } of aliases) {
+		if (id === path || id.startsWith(path + '/')) {
+			id = id.replace(path, alias);
+			break;
+		}
+	}
+
+	if (id.startsWith(cwd)) {
+		id = path.relative(cwd, id);
 	}
 
 	return posixify(id);
 }
 
+export const remote_module_pattern = /[/.]remote\.[^/]+$/;
+
+/**
+ * A cache of which directories can export remote modules
+ * @type {Map<string, boolean>}
+ */
+const remote_module_cache = new Map();
+
+/**
+ * Whether `id` is a remote module. Files in node_modules only count if the
+ * package they belong to has a peer dependency on `@sveltejs/kit`
+ * @param {string} id
+ * @returns {boolean}
+ */
+export function is_remote_module(id) {
+	id = posixify(id);
+	if (!remote_module_pattern.test(id)) return false;
+	if (!id.includes('node_modules')) return true;
+
+	return can_export_remote_module(path.dirname(id));
+}
+
+/**
+ * @param {string} directory
+ * @returns {boolean}
+ */
+function can_export_remote_module(directory) {
+	let cached = remote_module_cache.get(directory);
+	if (cached !== undefined) return cached;
+
+	let pkg;
+
+	try {
+		pkg = JSON.parse(fs.readFileSync(path.join(directory, 'package.json'), 'utf8'));
+	} catch {}
+
+	if (pkg?.peerDependencies?.['@sveltejs/kit']) {
+		cached = true;
+	} else {
+		const parent = path.dirname(directory);
+
+		cached =
+			path.basename(directory) === 'node_modules' || parent === directory
+				? false // base case
+				: can_export_remote_module(parent); // recurse
+	}
+
+	remote_module_cache.set(directory, cached);
+	return cached;
+}
+
+export const server_only_module_pattern = /[/.]server\.[^/]+$/;
+export const server_only_directory_pattern = /\/server\//;
+
 export const strip_virtual_prefix = /** @param {string} id */ (id) => id.replace('\0virtual:', '');
 
 /**
- * For `error_for_missing_config('instrumentation.server.js', 'kit.experimental.instrumentation.server', true)`,
+ * For `error_for_missing_config('remote functions', 'experimental.remoteFunctions', 'true')`,
  * returns:
  *
  * ```
- * To enable `instrumentation.server.js`, add the following to your `svelte.config.js`:
+ * To enable remote functions, add the following to the SvelteKit plugin in your `vite.config.js`:
  *
  *\`\`\`js
- *	kit:
- *		experimental:
- *			instrumentation:
- *				server: true
- *			}
- *		}
+ *	experimental: {
+ *		remoteFunctions: true
  *	}
  *\`\`\`
  *```
@@ -185,7 +223,7 @@ export function error_for_missing_config(feature_name, path, value) {
 
 	throw stackless(
 		dedent`\
-			To enable ${feature_name}, add the following to your \`svelte.config.js\`:
+			To enable ${feature_name}, add the following to your SvelteKit plugin in \`vite.config.js\`:
 
 			${result}
 		`

package/src/pathname.js

@@ -0,0 +1,55 @@
+const DATA_SUFFIX = '/__data.json';
+const HTML_DATA_SUFFIX = '.html__data.json';
+
+/** @param {string} pathname */
+export function has_data_suffix(pathname) {
+	return pathname.endsWith(DATA_SUFFIX) || pathname.endsWith(HTML_DATA_SUFFIX);
+}
+
+/** @param {string} pathname */
+export function add_data_suffix(pathname) {
+	if (pathname.endsWith('.html')) return pathname.replace(/\.html$/, HTML_DATA_SUFFIX);
+	return pathname.replace(/\/$/, '') + DATA_SUFFIX;
+}
+
+/** @param {string} pathname */
+export function strip_data_suffix(pathname) {
+	if (pathname.endsWith(HTML_DATA_SUFFIX)) {
+		return pathname.slice(0, -HTML_DATA_SUFFIX.length) + '.html';
+	}
+
+	return pathname.slice(0, -DATA_SUFFIX.length);
+}
+
+const ROUTE_SUFFIX = '/__route.js';
+const HTML_ROUTE_SUFFIX = '.html__route.js';
+
+/**
+ * @param {string} pathname
+ * @returns {boolean}
+ */
+export function has_resolution_suffix(pathname) {
+	return pathname.endsWith(ROUTE_SUFFIX) || pathname.endsWith(HTML_ROUTE_SUFFIX);
+}
+
+/**
+ * Convert a regular URL to a route to send to SvelteKit's server-side route resolution endpoint
+ * @param {string} pathname
+ * @returns {string}
+ */
+export function add_resolution_suffix(pathname) {
+	if (pathname.endsWith('.html')) return pathname.replace(/\.html$/, HTML_ROUTE_SUFFIX);
+	return pathname.replace(/\/$/, '') + ROUTE_SUFFIX;
+}
+
+/**
+ * @param {string} pathname
+ * @returns {string}
+ */
+export function strip_resolution_suffix(pathname) {
+	if (pathname.endsWith(HTML_ROUTE_SUFFIX)) {
+		return pathname.slice(0, -HTML_ROUTE_SUFFIX.length) + '.html';
+	}
+
+	return pathname.slice(0, -ROUTE_SUFFIX.length);
+}

package/src/runner.js

@@ -0,0 +1,15 @@
+/** @import { ViteDevServer } from 'vite' */
+
+/**
+ * @param {typeof import('vite')} vite the peer resolved vite module
+ * @param {ViteDevServer} server
+ */
+export function get_runner(vite, server) {
+	// `isRunnableDevEnvironment` does an `instanceof` check and will fail if
+	// we're using different instances of Vite
+	if (!vite.isRunnableDevEnvironment(server.environments.ssr)) {
+		throw new Error('The configured Vite SSR environment must be a RunnableDevEnvironment');
+	}
+
+	return server.environments.ssr.runner;
+}

package/src/runtime/app/env/internal.js

@@ -1,4 +1,7 @@
-export const version = __SVELTEKIT_APP_VERSION__;
+import { BROWSER } from 'esm-env';
+import { payload } from '../../client/payload.js';
+
+export const version = BROWSER ? payload.version : __SVELTEKIT_APP_VERSION__;
 export let building = false;
 export let prerendering = false;
 
@@ -9,6 +12,3 @@ export function set_building() {
 export function set_prerendering() {
 	prerendering = true;
 }
-
-// force /@vite/client to be injected
-import.meta.hot;

package/src/runtime/app/env/types.d.ts

@@ -14,6 +14,6 @@ export const dev: boolean;
 export const building: boolean;
 
 /**
- * The value of `config.kit.version.name`.
+ * The value of `config.version.name`.
  */
 export const version: string;

package/src/runtime/app/environment/index.js

@@ -1,6 +1,6 @@
-import { dev } from '../env/index.js';
+import { DEV } from 'esm-env';
 export * from '../env/index.js';
 
-if (dev) {
-	console.warn('`$app/environment` is now `$app/env`');
+if (DEV) {
+	console.warn('`$app/environment` is deprecated, use `$app/env` instead');
 }

package/src/runtime/app/{forms.js → forms/index.js}

@@ -1,9 +1,15 @@
-import * as devalue from 'devalue';
-import { BROWSER, DEV } from 'esm-env';
-import { noop } from '../../utils/functions.js';
-import { invalidateAll } from './navigation.js';
-import { app as client_app, applyAction } from '../client/client.js';
-import { app as server_app } from '../server/app.js';
+/** @import { ActionResult, SubmitFunction } from './types.js' */
+import { DEV } from 'esm-env';
+import { noop } from '../../../utils/functions.js';
+import { refreshAll } from '../navigation/index.js';
+import {
+	applyAction,
+	apply_action_navigation,
+	handle_error,
+	is_current_location
+} from '../../client/client.js';
+import { notify_version } from '../../client/state.svelte.js';
+import { parse } from '#app/internal/transport';
 
 export { applyAction };
 
@@ -27,15 +33,13 @@ export { applyAction };
  * @template {Record<string, unknown> | undefined} Success
  * @template {Record<string, unknown> | undefined} Failure
  * @param {string} result
- * @returns {import('@sveltejs/kit').ActionResult<Success, Failure>}
+ * @returns {ActionResult<Success, Failure>}
  */
 export function deserialize(result) {
 	const parsed = JSON.parse(result);
 
 	if (parsed.data) {
-		// the decoders should never be initialised at the top-level because `app`
-		// will not be initialised yet if `kit.output.bundleStrategy` is 'single' or 'inline'
-		parsed.data = devalue.parse(parsed.data, BROWSER ? client_app.decoders : server_app.decoders);
+		parsed.data = parse(parsed.data);
 	}
 
 	return parsed;
@@ -61,21 +65,22 @@ function clone(element) {
  * If a function is returned, that function is called with the response from the server.
  * If nothing is returned, the fallback will be used.
  *
- * If this function or its return value isn't set, it
- * - falls back to updating the `form` prop with the returned data if the action is on the same page as the form
- * - updates `page.status`
- * - resets the `<form>` element and invalidates all data in case of successful submission with no redirect response
+ * If this function or its return value isn't set, it emulates the browser-native behaviour, just without the full-page reload. It
+ * - resets the `<form>` element and refreshes all data in case of a successful submission with no redirect response
+ * - updates the `form` prop, `page.form` and `page.status` if the action is on the same page as the form
+ * - navigates to the page the submission lands on — populating that page's `form` prop and `page.status` — on success and failure if that isn't the current page, just as a native form submission would, but with the `?/actionName` param stripped from the destination URL
  * - redirects in case of a redirect response
- * - redirects to the nearest error page in case of an unexpected error
+ * - renders the nearest error page in case of an unexpected error — the one nearest the action's route, if the action is on a different page
  *
  * If you provide a custom function with a callback and want to use the default behavior, invoke `update` in your callback.
  * It accepts an options object
  * - `reset: false` if you don't want the `<form>` values to be reset after a successful submission
- * - `invalidateAll: false` if you don't want the action to call `invalidateAll` after submission
+ * - `refreshAll` to control whether all data is refreshed after submission; it defaults to `true` for successes and `false` for failures
+ * - `navigate: false` to apply non-redirect results to the current page rather than navigating to `result.location`; redirects are always followed
  * @template {Record<string, unknown> | undefined} Success
  * @template {Record<string, unknown> | undefined} Failure
  * @param {HTMLFormElement} form_element The form element
- * @param {import('@sveltejs/kit').SubmitFunction<Success, Failure>} submit Submit callback
+ * @param {SubmitFunction<Success, Failure>} submit Submit callback
  */
 export function enhance(form_element, submit = noop) {
 	if (DEV && clone(form_element).method !== 'post') {
@@ -84,37 +89,50 @@ export function enhance(form_element, submit = noop) {
 
 	/**
 	 * @param {{
-	 *   action: URL;
+	 *   result: ActionResult;
+	 *   reset?: boolean;
+	 *   refreshAll?: boolean;
 	 *   invalidateAll?: boolean;
-	 *   result: import('@sveltejs/kit').ActionResult;
-	 *   reset?: boolean
+	 *   navigate?: boolean;
 	 * }} opts
 	 */
 	const fallback_callback = async ({
-		action,
 		result,
 		reset = true,
-		invalidateAll: shouldInvalidateAll = true
+		refreshAll: should_refresh_all,
+		invalidateAll: deprecated_invalidate_all,
+		navigate = true
 	}) => {
-		if (result.type === 'success') {
-			if (reset) {
-				// We call reset from the prototype to avoid DOM clobbering
-				HTMLFormElement.prototype.reset.call(form_element);
-			}
-			if (shouldInvalidateAll) {
-				await invalidateAll();
-			}
+		if (DEV && deprecated_invalidate_all !== undefined) {
+			console.warn(
+				'The `update({ invalidateAll })` option has been deprecated in favour of `update({ refreshAll })`'
+			);
+		}
+
+		should_refresh_all ??= deprecated_invalidate_all ?? result.type === 'success';
+
+		if (result.type === 'success' && reset) {
+			// We call reset from the prototype to avoid DOM clobbering
+			HTMLFormElement.prototype.reset.call(form_element);
 		}
 
-		// For success/failure results, only apply action if it belongs to the
-		// current page, otherwise `form` will be updated erroneously
-		if (
-			location.origin + location.pathname === action.origin + action.pathname ||
-			result.type === 'redirect' ||
-			result.type === 'error'
-		) {
+		const destination =
+			navigate && result.type !== 'redirect' && !is_current_location(result.location)
+				? result.location
+				: undefined;
+
+		if (destination === undefined) {
+			if (should_refresh_all && result.type !== 'redirect') {
+				await refreshAll();
+			}
+
 			await applyAction(result);
+			return;
 		}
+
+		// emulate the browser: navigate to where the submission lands, rendering that
+		// page with this result
+		await apply_action_navigation(destination, result, should_refresh_all);
 	};
 
 	/** @param {SubmitEvent} event */
@@ -165,7 +183,7 @@ export function enhance(form_element, submit = noop) {
 			})) ?? fallback_callback;
 		if (cancelled) return;
 
-		/** @type {import('@sveltejs/kit').ActionResult} */
+		/** @type {ActionResult} */
 		let result;
 
 		try {
@@ -197,11 +215,23 @@ export function enhance(form_element, submit = noop) {
 				signal: controller.signal
 			});
 
+			// detect new deployments from the response header
+			notify_version(response.headers.get('x-sveltekit-version'));
+
 			result = deserialize(await response.text());
-			if (result.type === 'error') result.status = response.status;
+			if (result.type === 'error' || result.type === 'failure') {
+				result.status = response.status;
+			}
 		} catch (error) {
 			if (/** @type {any} */ (error)?.name === 'AbortError') return;
-			result = { type: 'error', error };
+			result = {
+				type: 'error',
+				error: await handle_error(error, {
+					params: {},
+					route: { id: null },
+					url: new URL(location.href)
+				})
+			};
 		}
 
 		await callback({
@@ -210,10 +240,11 @@ export function enhance(form_element, submit = noop) {
 			formElement: form_element,
 			update: (opts) =>
 				fallback_callback({
-					action,
 					result,
 					reset: opts?.reset,
-					invalidateAll: opts?.invalidateAll
+					refreshAll: opts?.refreshAll,
+					invalidateAll: opts?.invalidateAll,
+					navigate: opts?.navigate
 				}),
 			// @ts-expect-error generic constraints stuff we don't care about
 			result

package/src/runtime/app/forms/public.d.ts

@@ -0,0 +1,2 @@
+export * from './index.js';
+export type { ActionResult, SubmitFunction } from './types.js';

package/src/runtime/app/forms/types.d.ts

@@ -0,0 +1,56 @@
+// kept separate from public.d.ts so generated $types can resolve these without pulling in the runtime graph
+import type { MaybePromise } from '../../../types/private.js';
+/**
+ * When calling a form action via fetch, the response will be one of these shapes.
+ * ```svelte
+ * <form method="post" use:enhance={() => {
+ *   return ({ result }) => {
+ * 		// result is of type ActionResult
+ *   };
+ * }}
+ * ```
+ *
+ * Success and failure results carry the root-relative `pathname + search` of the action URL, with
+ * the `?/actionName` parameter removed. Redirect results carry the redirect target. Server-generated
+ * error results also carry the action location, while client-generated errors such as network
+ * failures do not. `update` uses this location to emulate native form navigation.
+ */
+export type ActionResult<
+	Success extends Record<string, unknown> | undefined = Record<string, any>,
+	Failure extends Record<string, unknown> | undefined = Record<string, any>
+> =
+	| { type: 'success'; status: number; data?: Success; location: string }
+	| { type: 'failure'; status: number; data?: Failure; location: string }
+	| { type: 'redirect'; status: number; location: string }
+	| { type: 'error'; status?: number; error: App.Error; location?: string };
+
+export type SubmitFunction<
+	Success extends Record<string, unknown> | undefined = Record<string, any>,
+	Failure extends Record<string, unknown> | undefined = Record<string, any>
+> = (input: {
+	action: URL;
+	formData: FormData;
+	formElement: HTMLFormElement;
+	controller: AbortController;
+	submitter: HTMLElement | null;
+	cancel: () => void;
+}) => MaybePromise<
+	| void
+	| ((opts: {
+			formData: FormData;
+			formElement: HTMLFormElement;
+			action: URL;
+			result: ActionResult<Success, Failure>;
+			/**
+			 * Call this to get the default behavior of a form submission response.
+			 * @param options Set `reset: false` if you don't want the `<form>` values to be reset after a successful submission. `refreshAll` defaults to `true` for successful results and `false` for failures. When the submission navigates, setting it to `false` still runs the destination's `load` functions but may reuse shared layout data. Set `navigate: false` to apply non-redirect results to the current page instead of navigating to `result.location`. Redirects are always followed.
+			 */
+			update: (options?: {
+				reset?: boolean;
+				refreshAll?: boolean;
+				navigate?: boolean;
+				/** @deprecated Use `refreshAll` instead. */
+				invalidateAll?: boolean;
+			}) => Promise<void>;
+	  }) => MaybePromise<void>)
+>;

package/src/runtime/app/internal/transport.js

@@ -0,0 +1,53 @@
+/** @import { Transport } from '@sveltejs/kit/hooks' */
+import * as devalue from 'devalue';
+import { DEV } from 'esm-env';
+
+/** @type {(thing: any) => string} */
+export let uneval = () => {
+	throw new Error(DEV ? 'called uneval before init_transport' : '');
+};
+
+/** @type {(data: any) => string} */
+export let stringify = () => {
+	throw new Error(DEV ? 'called stringify before init_transport' : '');
+};
+
+/** @type {(data: string) => any} */
+export let parse = () => {
+	throw new Error(DEV ? 'called parse before init_transport' : '');
+};
+
+/** @type {Record<string, (data: any) => any>} */
+export let encoders = {};
+
+/** @type {Record<string, (data: any) => any>} */
+export let decoders = {};
+
+export let has_custom_transporters = false;
+
+/**
+ *
+ * @param {Transport} transport
+ */
+export function init_transport(transport) {
+	const transporters = Object.entries(transport);
+
+	has_custom_transporters = transporters.length > 0;
+
+	/** @param {unknown} thing */
+	const replacer = (thing) => {
+		for (const key of Object.keys(transport)) {
+			const encoded = transport[key].encode(thing);
+			if (encoded) {
+				return `app.decode('${key}', ${devalue.uneval(encoded, replacer)})`;
+			}
+		}
+	};
+
+	encoders = Object.fromEntries(transporters.map(([k, v]) => [k, v.encode]));
+	decoders = Object.fromEntries(transporters.map(([k, v]) => [k, v.decode]));
+
+	uneval = (data) => devalue.uneval(data, replacer);
+	stringify = (data) => devalue.stringify(data, encoders);
+	parse = (data) => devalue.parse(data, decoders);
+}

package/src/runtime/app/manifest/index.js

@@ -0,0 +1 @@
+export * from '__sveltekit/manifest-data';

package/src/runtime/app/{navigation.js → navigation/index.js}

@@ -11,4 +11,5 @@ export {
 	preloadData,
 	pushState,
 	replaceState
-} from '../client/client.js';
+} from '../../client/client.js';
+export { snapshot } from '../../client/snapshots.js';