chore: replace the deprecated json helper with Response.json

.changeset/pre/runtime-response-json.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+chore: use `Response.json` instead of the deprecated `json` helper in runtime responses

documentation/docs/10-getting-started/40-web-standards.md

@@ -24,20 +24,18 @@ An instance of [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Res
 
 ### Headers
 
-The [`Headers`](https://developer.mozilla.org/en-US/docs/Web/API/Headers) interface allows you to read incoming `request.headers` and set outgoing `response.headers`. For example, you can get the `request.headers` as shown below, and use the [`json` convenience function](@sveltejs-kit#json) to send modified `response.headers`:
+The [`Headers`](https://developer.mozilla.org/en-US/docs/Web/API/Headers) interface allows you to read incoming `request.headers` and set outgoing `response.headers`. For example, you can get the `request.headers` as shown below, and use [`Response.json`](https://developer.mozilla.org/en-US/docs/Web/API/Response/json_static) to send modified `response.headers`:
 
 ```js
 // @errors: 2461
 /// file: src/routes/what-is-my-user-agent/+server.js
-import { json } from '@sveltejs/kit';
-
 /** @type {import('./$types').RequestHandler} */
 export function GET({ request }) {
 	// log all headers
 	console.log(...request.headers);
 
 	// create a JSON Response using a header we received
-	return json({
+	return Response.json({
 		// retrieve a specific header
 		userAgent: request.headers.get('user-agent')
 	}, {
@@ -54,16 +52,14 @@ When dealing with HTML native form submissions you'll be working with [`FormData
 ```js
 // @errors: 2461
 /// file: src/routes/hello/+server.js
-import { json } from '@sveltejs/kit';
-
 /** @type {import('./$types').RequestHandler} */
 export async function POST(event) {
 	const body = await event.request.formData();
 
 	// log all fields
 	console.log([...body]);
 
-	return json({
+	return Response.json({
 		// get a specific field's value
 		name: body.get('name') ?? 'world'
 	});

documentation/docs/20-core-concepts/10-routing.md

@@ -320,7 +320,7 @@ export function GET({ url }) {
 
 The first argument to `Response` can be a [`ReadableStream`](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream), making it possible to stream large amounts of data or create server-sent events (unless deploying to platforms that buffer responses, like AWS Lambda).
 
-You can use the [`error`](@sveltejs-kit#error), [`redirect`](@sveltejs-kit#redirect) and [`json`](@sveltejs-kit#json) methods from `@sveltejs/kit` for convenience (but you don't have to).
+You can use the [`error`](@sveltejs-kit#error) and [`redirect`](@sveltejs-kit#redirect) methods from `@sveltejs/kit` for convenience (but you don't have to).
 
 If an error is thrown (either `error(...)` or an unexpected error), the response will be a JSON representation of the error or a fallback error page — which can be customised via `src/error.html` — depending on the `Accept` header. The [`+error.svelte`](#error) component will _not_ be rendered in this case. You can read more about error handling [here](errors).
 
@@ -361,12 +361,10 @@ By exporting `POST`/`PUT`/`PATCH`/`DELETE`/`OPTIONS`/`HEAD`/`QUERY` handlers, `+
 
 ```js
 /// file: src/routes/api/add/+server.js
-import { json } from '@sveltejs/kit';
-
 /** @type {import('./$types').RequestHandler} */
 export async function POST({ request }) {
 	const { a, b } = await request.json();
-	return json(a + b);
+	return Response.json(a + b);
 }
 ```
 
@@ -380,18 +378,16 @@ Exporting the `fallback` handler will match any unhandled request methods, inclu
 
 ```js
 /// file: src/routes/api/add/+server.js
-import { json, text } from '@sveltejs/kit';
-
 /** @type {import('./$types').RequestHandler} */
 export async function POST({ request }) {
 	const { a, b } = await request.json();
-	return json(a + b);
+	return Response.json(a + b);
 }
 
 // This handler will respond to PUT, PATCH, DELETE, etc.
 /** @type {import('./$types').RequestHandler} */
 export async function fallback({ request }) {
-	return text(`I caught your ${request.method} request!`);
+	return new Response(`I caught your ${request.method} request!`);
 }
 ```
 

packages/kit/src/runtime/app/server/remote/prerender.js

@@ -1,7 +1,6 @@
 /** @import { RemoteResource, RemotePrerenderFunction } from '$app/server' */
 /** @import { RemoteFunctionResponse, RemotePrerenderInputsGenerator, RemotePrerenderInternals, MaybePromise } from 'types' */
 /** @import { StandardSchemaV1 } from '@standard-schema/spec' */
-import { json } from '@sveltejs/kit';
 import { HandledHttpError } from '@sveltejs/kit/internal';
 import { get_request_store } from '@sveltejs/kit/internal/server';
 import { stringify_remote_arg } from '../../../shared.js';
@@ -145,7 +144,7 @@ export function prerender(validate_or_fn, fn_or_options, maybe_options) {
 				const body = { type: 'result', data: stringify({ _: result }) };
 				state.prerendering.dependencies.set(url, {
 					body: JSON.stringify(body),
-					response: json(body)
+					response: Response.json(body)
 				});
 			}
 

packages/kit/src/runtime/server/errors.js

@@ -1,4 +1,4 @@
-import { json, text } from '@sveltejs/kit';
+import { text } from '@sveltejs/kit';
 import {
 	HandledHttpError,
 	HttpError,
@@ -28,7 +28,7 @@ export async function handle_fatal_error(event, state, options, error) {
 	]);
 
 	if (event.isDataRequest || type === 'application/json') {
-		return json(body, {
+		return Response.json(body, {
 			status
 		});
 	}

packages/kit/src/runtime/server/page/actions.js

@@ -2,7 +2,6 @@
 /** @import { ActionResult } from '$app/forms' */
 /** @import { SSROptions, SSRNode, ServerNode } from 'types' */
 import { DEV } from 'esm-env';
-import { json } from '@sveltejs/kit';
 import { HttpError, Redirect, ActionFailure, SvelteKitError } from '@sveltejs/kit/internal';
 import { with_request_store, merge_tracing, record_span } from '@sveltejs/kit/internal/server';
 import { normalize_error } from '../../../utils/error.js';
@@ -164,7 +163,7 @@ export function action_json_redirect(redirect) {
  * @param {ResponseInit} [init]
  */
 function action_json(data, init) {
-	return with_version_header(json(data, init));
+	return with_version_header(Response.json(data, init));
 }
 
 /**

packages/kit/src/runtime/server/remote-functions.js

@@ -3,7 +3,7 @@
 /** @import { ActionResult } from '$app/forms' */
 /** @import { RemoteFormInternals, RemoteFunctionData, RemoteFunctionResponse, RemoteInternals, RequestState, SSROptions } from 'types' */
 
-import { json, error } from '@sveltejs/kit';
+import { error } from '@sveltejs/kit';
 import { Redirect, SvelteKitError } from '@sveltejs/kit/internal';
 import { with_request_store, merge_tracing, record_span } from '@sveltejs/kit/internal/server';
 import { app_dir, base } from '#app/paths';
@@ -262,7 +262,7 @@ async function handle_remote_call_internal(event, state, options, manifest, id)
 
 				if (data._.issues) {
 					// special case — don't serialize refreshes/reconnects
-					return json(
+					return Response.json(
 						/** @type {RemoteFunctionResponse} */ ({
 							type: 'result',
 							data: stringify(data)
@@ -310,7 +310,7 @@ async function handle_remote_call_internal(event, state, options, manifest, id)
 
 		await collect_remote_data(data, event, state, options);
 
-		return json(
+		return Response.json(
 			/** @type {RemoteFunctionResponse} */ ({
 				type: 'result',
 				data: stringify(data)
@@ -321,7 +321,7 @@ async function handle_remote_call_internal(event, state, options, manifest, id)
 		if (error instanceof Redirect) {
 			const data = await collect_remote_data({ redirect: error.location }, event, state, options);
 
-			return json(
+			return Response.json(
 				/** @type {RemoteFunctionResponse} */ ({
 					type: 'result',
 					data: stringify(data)
@@ -332,7 +332,7 @@ async function handle_remote_call_internal(event, state, options, manifest, id)
 
 		const transformed = await handle_error_and_jsonify(event, state, options, error);
 
-		return json(
+		return Response.json(
 			/** @type {RemoteFunctionResponse} */ ({
 				type: 'error',
 				error: transformed

packages/kit/src/runtime/server/respond.js

@@ -1,6 +1,6 @@
 /** @import { SSRNode } from 'types' */
 import { DEV } from 'esm-env';
-import { json, text } from '@sveltejs/kit';
+import { text } from '@sveltejs/kit';
 import { Redirect, SvelteKitError } from '@sveltejs/kit/internal';
 import {
 	merge_tracing,
@@ -111,7 +111,7 @@ export async function internal_respond(request, options, manifest, state) {
 				})
 			) {
 				const message = 'Cross-site remote requests are forbidden';
-				return json({ message }, { status: 403 });
+				return Response.json({ message }, { status: 403 });
 			}
 		} else if (options.csrf_check_origin) {
 			const forbidden = is_csrf_forbidden({
@@ -126,7 +126,7 @@ export async function internal_respond(request, options, manifest, state) {
 				const opts = { status: 403 };
 
 				if (request.headers.get('accept') === 'application/json') {
-					return json({ message }, opts);
+					return Response.json({ message }, opts);
 				}
 
 				return text(message, opts);