diff --git a/.changeset/pre/runtime-response-json.md b/.changeset/pre/runtime-response-json.md new file mode 100644 index 000000000000..46f56be3ff6c --- /dev/null +++ b/.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 diff --git a/documentation/docs/10-getting-started/40-web-standards.md b/documentation/docs/10-getting-started/40-web-standards.md index 81fc10d8b25a..fb3b03332f64 100644 --- a/documentation/docs/10-getting-started/40-web-standards.md +++ b/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,8 +52,6 @@ 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(); @@ -63,7 +59,7 @@ export async function POST(event) { // log all fields console.log([...body]); - return json({ + return Response.json({ // get a specific field's value name: body.get('name') ?? 'world' }); diff --git a/documentation/docs/20-core-concepts/10-routing.md b/documentation/docs/20-core-concepts/10-routing.md index 2202076c28a0..4ce47d352804 100644 --- a/documentation/docs/20-core-concepts/10-routing.md +++ b/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!`); } ``` diff --git a/packages/kit/src/runtime/app/server/remote/prerender.js b/packages/kit/src/runtime/app/server/remote/prerender.js index a7c0a8081742..b7aa91f10ad3 100644 --- a/packages/kit/src/runtime/app/server/remote/prerender.js +++ b/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) }); } diff --git a/packages/kit/src/runtime/server/errors.js b/packages/kit/src/runtime/server/errors.js index 377627a4add0..dcdd153e2ca4 100644 --- a/packages/kit/src/runtime/server/errors.js +++ b/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 }); } diff --git a/packages/kit/src/runtime/server/page/actions.js b/packages/kit/src/runtime/server/page/actions.js index 00e3a6dc0e64..708143d24c2d 100644 --- a/packages/kit/src/runtime/server/page/actions.js +++ b/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)); } /** diff --git a/packages/kit/src/runtime/server/remote-functions.js b/packages/kit/src/runtime/server/remote-functions.js index 43674bc0abf9..32c35234df4a 100644 --- a/packages/kit/src/runtime/server/remote-functions.js +++ b/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 diff --git a/packages/kit/src/runtime/server/respond.js b/packages/kit/src/runtime/server/respond.js index 8121051104cb..8f94df47b812 100644 --- a/packages/kit/src/runtime/server/respond.js +++ b/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);