@sveltejs/kit 3.0.0-next.16 → 3.0.0-next.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/kit",
-  "version": "3.0.0-next.16",
+  "version": "3.0.0-next.17",
   "description": "SvelteKit is the fastest way to build Svelte apps",
   "keywords": [
     "framework",

package/src/core/sync/write_types/index.js

@@ -232,6 +232,7 @@ function update_types(config, routes, route, root, to_delete = new Set()) {
 			'type OptionalUnion<U extends Record<string, any>, A extends keyof U = U extends U ? keyof U : never> = U extends unknown ? { [P in Exclude<A, keyof U>]?: never } & U : never;',
 
 			// Re-export `Snapshot` from @sveltejs/kit — in future we could use this to infer <T> from the return type of `snapshot.capture`
+			'/** @deprecated Use the `snapshot` helper from `$app/navigation` instead. */',
 			'export type Snapshot<T = any> = Kit.Snapshot<T>;',
 
 			'export type ErrorProps = { error: App.Error };'

package/src/exports/hooks/sequence.js

@@ -2,6 +2,7 @@
 import {
 	merge_tracing,
 	get_request_store,
+	record_span,
 	with_request_store
 } from '@sveltejs/kit/internal/server';
 
@@ -95,7 +96,7 @@ export function sequence(...handlers) {
 		function apply_handle(i, event, parent_options) {
 			const handle = handlers[i];
 
-			return state.tracing.record_span({
+			return record_span({
 				name: `sveltekit.handle.sequenced.${handle.name ? handle.name : i}`,
 				attributes: {},
 				fn: async (current) => {

package/src/exports/internal/server/index.js

@@ -32,4 +32,6 @@ export {
 
 export { init_remote_functions } from './remote-functions.js';
 
+export { init_tracing, otel, record_span } from './telemetry.js';
+
 export * from '../shared.js';

package/src/exports/internal/server/telemetry.js

@@ -0,0 +1,95 @@
+/** @import { Tracer, SpanStatusCode, PropagationAPI, ContextAPI } from '@opentelemetry/api' */
+/** @import { RecordSpan } from 'types' */
+import { HttpError, Redirect } from '../shared.js';
+import { noop_span } from '../../../runtime/telemetry/noop.js';
+
+// Import this module by its bare specifier so bundled and external code share its state.
+
+/** @type {Promise<{ tracer: Tracer, SpanStatusCode: typeof SpanStatusCode, propagation: PropagationAPI, context: ContextAPI }> | null} */
+export let otel = null;
+
+/**
+ * The caller passes in `import('@opentelemetry/api')` so the import lives behind
+ * `__SVELTEKIT_SERVER_TRACING_ENABLED__` in the bundled runtime and is eliminated
+ * from builds with tracing disabled, where the package may not be installed.
+ * @param {Promise<typeof import('@opentelemetry/api')>} api
+ * @returns {void}
+ */
+export function init_tracing(api) {
+	otel ??= api
+		.then((module) => {
+			return {
+				tracer: module.trace.getTracer('sveltekit'),
+				propagation: module.propagation,
+				context: module.context,
+				SpanStatusCode: module.SpanStatusCode
+			};
+		})
+		.catch(() => {
+			throw new Error(
+				'Tracing is enabled (see the SvelteKit plugin `tracing.server` option in your vite.config.js), but `@opentelemetry/api` is not available. This error will likely resolve itself when you set up your tracing instrumentation in `instrumentation.server.js`. For more information, see https://svelte.dev/docs/kit/observability#opentelemetry-api'
+			);
+		});
+}
+
+/** @type {RecordSpan} */
+export async function record_span({ name, attributes, fn }) {
+	if (otel === null) {
+		return fn(noop_span);
+	}
+
+	const { SpanStatusCode, tracer } = await otel;
+
+	return tracer.startActiveSpan(name, { attributes }, async (span) => {
+		try {
+			return await fn(span);
+		} catch (error) {
+			if (error instanceof HttpError) {
+				span.setAttributes({
+					[`${name}.result.type`]: 'known_error',
+					[`${name}.result.status`]: error.status,
+					[`${name}.result.message`]: error.body.message
+				});
+				if (error.status >= 500) {
+					span.recordException({
+						name: 'HttpError',
+						message: error.body.message
+					});
+					span.setStatus({
+						code: SpanStatusCode.ERROR,
+						message: error.body.message
+					});
+				}
+			} else if (error instanceof Redirect) {
+				span.setAttributes({
+					[`${name}.result.type`]: 'redirect',
+					[`${name}.result.status`]: error.status,
+					[`${name}.result.location`]: error.location
+				});
+			} else if (error instanceof Error) {
+				span.setAttributes({
+					[`${name}.result.type`]: 'unknown_error'
+				});
+				span.recordException({
+					name: error.name,
+					message: error.message,
+					// conditional so this compiles under consumers' `exactOptionalPropertyTypes`
+					...(error.stack !== undefined && { stack: error.stack })
+				});
+				span.setStatus({
+					code: SpanStatusCode.ERROR,
+					message: error.message
+				});
+			} else {
+				span.setAttributes({
+					[`${name}.result.type`]: 'unknown_error'
+				});
+				span.setStatus({ code: SpanStatusCode.ERROR });
+			}
+
+			throw error;
+		} finally {
+			span.end();
+		}
+	});
+}

package/src/exports/public.d.ts

@@ -1941,15 +1941,20 @@ export type Actions<
  *   };
  * }}
  * ```
+ *
+ * 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 }
-	| { type: 'failure'; status: number; data?: Failure }
+	| { 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 };
+	| { type: 'error'; status?: number; error: App.Error; location?: string };
 
 /**
  * The object returned by the [`error`](https://svelte.dev/docs/kit/@sveltejs-kit#error) function.
@@ -1990,15 +1995,21 @@ export type SubmitFunction<
 			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.
-			 * @param invalidateAll Set `invalidateAll: false` if you don't want the action to call `invalidateAll` after submission.
+			 * @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; invalidateAll?: boolean }) => Promise<void>;
+			update: (options?: {
+				reset?: boolean;
+				refreshAll?: boolean;
+				navigate?: boolean;
+				/** @deprecated Use `refreshAll` instead. */
+				invalidateAll?: boolean;
+			}) => Promise<void>;
 	  }) => MaybePromise<void>)
 >;
 
 /**
  * The type of `export const snapshot` exported from a page or layout component.
+ * @deprecated Use the [`snapshot`](https://svelte.dev/docs/kit/$app-navigation#snapshot) helper from `$app/navigation` instead.
  */
 export interface Snapshot<T = any> {
 	capture: () => T;

package/src/runtime/app/forms.js

@@ -1,7 +1,12 @@
 import { DEV } from 'esm-env';
 import { noop } from '../../utils/functions.js';
 import { refreshAll } from './navigation.js';
-import { applyAction, handle_error } from '../client/client.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';
 
@@ -30,10 +35,6 @@ export { applyAction };
  * @returns {import('@sveltejs/kit').ActionResult<Success, Failure>}
  */
 export function deserialize(result) {
-	if (result === '') {
-		return { type: 'success', status: 204, data: undefined };
-	}
-
 	const parsed = JSON.parse(result);
 
 	if (parsed.data) {
@@ -63,17 +64,18 @@ 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
@@ -86,37 +88,50 @@ export function enhance(form_element, submit = noop) {
 
 	/**
 	 * @param {{
-	 *   action: URL;
-	 *   invalidateAll?: boolean;
 	 *   result: import('@sveltejs/kit').ActionResult;
-	 *   reset?: boolean
+	 *   reset?: boolean;
+	 *   refreshAll?: boolean;
+	 *   invalidateAll?: 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) {
+		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);
+		}
+
+		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();
 			}
-		}
 
-		// 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'
-		) {
 			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 */
@@ -202,13 +217,9 @@ export function enhance(form_element, submit = noop) {
 			// detect new deployments from the response header
 			notify_version(response.headers.get('x-sveltekit-version'));
 
-			if (response.status === 204) {
-				result = { type: 'success', status: 204 };
-			} else {
-				result = deserialize(await response.text());
-				if (result.type === 'error' || result.type === 'failure') {
-					result.status = response.status;
-				}
+			result = deserialize(await response.text());
+			if (result.type === 'error' || result.type === 'failure') {
+				result.status = response.status;
 			}
 		} catch (error) {
 			if (/** @type {any} */ (error)?.name === 'AbortError') return;
@@ -228,10 +239,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/navigation.js

@@ -12,3 +12,4 @@ export {
 	pushState,
 	replaceState
 } from '../client/client.js';
+export { snapshot } from '../client/snapshots.js';