Allow server-only load functions to return more than JSON

.changeset/tender-spiders-fail.md

@@ -0,0 +1,7 @@
+---
+'@sveltejs/adapter-netlify': patch
+'@sveltejs/adapter-vercel': patch
+'@sveltejs/kit': patch
+---
+
+Use devalue to serialize server-only `load` return values

documentation/docs/03-routing.md

@@ -106,7 +106,7 @@ export async function load({ params }) {
 }
 ```
 
-During client-side navigation, SvelteKit will load this data using `fetch`, which means that the returned value must be serializable as JSON.
+During client-side navigation, SvelteKit will load this data from the server, which means that the returned value must be serializable using [devalue](https://github.com/rich-harris/devalue).
 
 #### Actions
 

documentation/docs/05-load.md

@@ -4,7 +4,7 @@ title: Loading data
 
 A [`+page.svelte`](/docs/routing#page-page-svelte) or [`+layout.svelte`](/docs/routing#layout-layout-svelte) gets its `data` from a `load` function.
 
-If the `load` function is defined in `+page.js` or `+layout.js` it will run both on the server and in the browser. If it's instead defined in `+page.server.js` or `+layout.server.js` it will only run on the server, in which case it can (for example) make database calls and access private [environment variables](/docs/modules#$env-static-private), but can only return data that can be serialized as JSON. In both cases, the return value (if there is one) must be an object.
+If the `load` function is defined in `+page.js` or `+layout.js` it will run both on the server and in the browser. If it's instead defined in `+page.server.js` or `+layout.server.js` it will only run on the server, in which case it can (for example) make database calls and access private [environment variables](/docs/modules#$env-static-private), but can only return data that can be serialized with [devalue](https://github.com/rich-harris/devalue). In both cases, the return value (if there is one) must be an object.
 
 ```js
 /// file: src/routes/+page.js
@@ -256,7 +256,7 @@ export async function load({ setHeaders }) {
 
 ### Output
 
-The returned `data`, if any, must be an object of values. For a server-only `load` function, these values must be JSON-serializable. Top-level promises will be awaited, which makes it easy to return multiple promises without creating a waterfall:
+The returned `data`, if any, must be an object of values. For a server-only `load` function, these values must be serializable with [devalue](https://github.com/rich-harris/devalue). Top-level promises will be awaited, which makes it easy to return multiple promises without creating a waterfall:
 
 ```js
 // @filename: $types.d.ts

packages/adapter-netlify/index.js

@@ -211,7 +211,7 @@ async function generate_lambda_functions({ builder, publish, split, esm }) {
  writeFileSync(`.netlify/functions-internal/${name}.js`, fn);
 
  redirects.push(`${pattern} /.netlify/functions/${name} 200`);
- redirects.push(`${pattern}/__data.json /.netlify/functions/${name} 200`);
+ redirects.push(`${pattern}/__data.js /.netlify/functions/${name} 200`);
  }
  };
  });

packages/adapter-vercel/index.js

@@ -224,7 +224,7 @@ export default function ({ external = [], edge, split } = {}) {
  sliced_pattern = '^/?';
  }
 
- const src = `${sliced_pattern}(?:/__data.json)?$`; // TODO adding /__data.json is a temporary workaround — those endpoints should be treated as distinct routes
+ const src = `${sliced_pattern}(?:/__data.js)?$`; // TODO adding /__data.js is a temporary workaround — those endpoints should be treated as distinct routes
 
  await generate_function(route.id || 'index', src, entry.generateManifest);
  }

packages/kit/package.json

@@ -12,7 +12,7 @@
  "dependencies": {
  "@sveltejs/vite-plugin-svelte": "^1.0.1",
  "cookie": "^0.5.0",
- "devalue": "^2.0.1",
+ "devalue": "^3.1.2",
  "kleur": "^4.1.4",
  "magic-string": "^0.26.2",
  "mime": "^3.0.0",

packages/kit/src/core/constants.js → packages/kit/src/constants.js

@@ -3,3 +3,5 @@
 export const SVELTE_KIT_ASSETS = '/_svelte_kit_assets';
 
 export const GENERATED_COMMENT = '// this file is generated — do not edit it\n';
+
+export const DATA_SUFFIX = '/__data.js';

packages/kit/src/core/env.js

@@ -1,4 +1,4 @@
-import { GENERATED_COMMENT } from './constants.js';
+import { GENERATED_COMMENT } from '../constants.js';
 import { runtime_base } from './utils.js';
 
 /**

packages/kit/src/core/sync/write_ambient.js

@@ -1,6 +1,6 @@
 import path from 'path';
 import { get_env } from '../../exports/vite/utils.js';
-import { GENERATED_COMMENT } from '../constants.js';
+import { GENERATED_COMMENT } from '../../constants.js';
 import { create_types } from '../env.js';
 import { write_if_changed } from './utils.js';
 

packages/kit/src/exports/vite/dev/index.js

@@ -8,7 +8,7 @@ import { installPolyfills } from '../../../exports/node/polyfills.js';
 import { coalesce_to_error } from '../../../utils/error.js';
 import { posixify } from '../../../utils/filesystem.js';
 import { load_template } from '../../../core/config/index.js';
-import { SVELTE_KIT_ASSETS } from '../../../core/constants.js';
+import { SVELTE_KIT_ASSETS } from '../../../constants.js';
 import * as sync from '../../../core/sync/sync.js';
 import { get_mime_lookup, runtime_base, runtime_prefix } from '../../../core/utils.js';
 import { get_env, prevent_illegal_vite_imports, resolve_entry } from '../utils.js';

packages/kit/src/exports/vite/preview/index.js

@@ -4,7 +4,7 @@ import sirv from 'sirv';
 import { pathToFileURL } from 'url';
 import { getRequest, setResponse } from '../../../exports/node/index.js';
 import { installPolyfills } from '../../../exports/node/polyfills.js';
-import { SVELTE_KIT_ASSETS } from '../../../core/constants.js';
+import { SVELTE_KIT_ASSETS } from '../../../constants.js';
 import { loadEnv } from 'vite';
 
 /** @typedef {import('http').IncomingMessage} Req */

packages/kit/src/runtime/client/client.js

@@ -393,7 +393,7 @@ export function create_client({ target, base, trailing_slash }) {
  * status: number;
  * error: HttpError | Error | null;
  * routeId: string | null;
- * validation_errors?: string | undefined;
+ * validation_errors?: Record<string, any> | null;
  * }} opts
  */
  async function get_navigation_result_from_branch({
@@ -700,20 +700,7 @@ export function create_client({ target, base, trailing_slash }) {
 
  if (route.uses_server_data && invalid_server_nodes.some(Boolean)) {
  try {
- const res = await native_fetch(
- `${url.pathname}${url.pathname.endsWith('/') ? '' : '/'}__data.json${url.search}`,
- {
- headers: {
- 'x-sveltekit-invalidated': invalid_server_nodes.map((x) => (x ? '1' : '')).join(',')
- }
- }
- );
-
- server_data = /** @type {import('types').ServerData} */ (await res.json());
-
- if (!res.ok) {
- throw server_data;
- }
+ server_data = await load_data(url, invalid_server_nodes);
  } catch (e) {
  // something went catastrophically wrong — bail and defer to the server
  native_navigation(url);
@@ -868,19 +855,18 @@ export function create_client({ target, base, trailing_slash }) {
  if (node.server) {
  // TODO post-https://github.com/sveltejs/kit/discussions/6124 we can use
  // existing root layout data
- const res = await native_fetch(
- `${url.pathname}${url.pathname.endsWith('/') ? '' : '/'}__data.json${url.search}`,
- {
- headers: {
- 'x-sveltekit-invalidated': '1'
- }
- }
- );
+ try {
+ const server_data = await load_data(url, [true]);
 
- const server_data_nodes = await res.json();
- server_data_node = server_data_nodes?.[0] ?? null;
+ if (
+ server_data.type !== 'data' ||
+ (server_data.nodes[0] && server_data.nodes[0].type !== 'data')
+ ) {
+ throw 0;
+ }
 
- if (!res.ok || server_data_nodes?.type !== 'data') {
+ server_data_node = server_data.nodes[0] ?? null;
+ } catch {
  // at this point we have no choice but to fall back to the server
  native_navigation(url);
 
@@ -1284,32 +1270,32 @@ export function create_client({ target, base, trailing_slash }) {
  });
  },
 
- _hydrate: async ({ status, error, node_ids, params, routeId }) => {
+ _hydrate: async ({
+ status,
+ error: original_error, // TODO get rid of this
+ node_ids,
+ params,
+ routeId,
+ data: server_data_nodes,
+ errors: validation_errors
+ }) => {
  const url = new URL(location.href);
 
  /** @type {import('./types').NavigationFinished | undefined} */
  let result;
 
  try {
- /**
- * @param {string} type
- * @param {any} fallback
- */
- const parse = (type, fallback) => {
- const script = document.querySelector(`script[sveltekit\\:data-type="${type}"]`);
- return script?.textContent ? JSON.parse(script.textContent) : fallback;
- };
- /**
- * @type {Array<import('types').ServerDataNode | null>}
- * On initial navigation, this will only consist of data nodes or `null`.
- * A possible error is passed through the `error` property, in which case
- * the last entry of `node_ids` is an error page and the last entry of
- * `server_data_nodes` is `null`.
- */
- const server_data_nodes = parse('server_data', []);
- const validation_errors = parse('validation_errors', undefined);
-
  const branch_promises = node_ids.map(async (n, i) => {
+ const server_data_node = server_data_nodes[i];
+
+ if (server_data_node?.type === 'error') {
+ if (server_data_node.httperror) {
+ throw error(server_data_node.httperror.status, server_data_node.httperror.message);
+ }
+
+ throw server_data_node.error;
+ }
+
  return load_node({
  loader: nodes[n],
  url,
@@ -1322,7 +1308,7 @@ export function create_client({ target, base, trailing_slash }) {
  }
  return data;
  },
- server_data_node: create_data_node(server_data_nodes[i])
+ server_data_node: create_data_node(server_data_node)
  });
  });
 
@@ -1331,13 +1317,15 @@ export function create_client({ target, base, trailing_slash }) {
  params,
  branch: await Promise.all(branch_promises),
  status,
- error: /** @type {import('../server/page/types').SerializedHttpError} */ (error)
+ error: /** @type {import('../server/page/types').SerializedHttpError} */ (original_error)
  ?.__is_http_error
  ? new HttpError(
- /** @type {import('../server/page/types').SerializedHttpError} */ (error).status,
- error.message
+ /** @type {import('../server/page/types').SerializedHttpError} */ (
+ original_error
+ ).status,
+ original_error.message
  )
- : error,
+ : original_error,
  validation_errors,
  routeId
  });
@@ -1363,3 +1351,27 @@ export function create_client({ target, base, trailing_slash }) {
  }
  };
 }
+
+let data_id = 1;
+
+/**
+ * @param {URL} url
+ * @param {boolean[]} invalid
+ * @returns {Promise<import('types').ServerData>}
+ */
+async function load_data(url, invalid) {
+ const data_url = new URL(url);
+ data_url.pathname += `${url.pathname.endsWith('/') ? '' : '/'}__data.js`;
+ data_url.searchParams.set('__invalid', invalid.map((x) => (x ? 'y' : 'n')).join(''));
+ data_url.searchParams.set('__id', String(data_id++));
+
+ await import(/* @vite-ignore */ data_url.href);
+
+ // @ts-expect-error
+ const server_data = window.__sveltekit_data;
+
+ // @ts-expect-error
+ delete window.__sveltekit_data;
+
+ return server_data;
+}

packages/kit/src/runtime/client/start.js

@@ -20,6 +20,8 @@ export { set_public_env } from '../env-public.js';
  * node_ids: number[];
  * params: Record<string, string>;
  * routeId: string | null;
+ * data: Array<import('types').ServerDataNode | import('types').ServerErrorNode | null>;
+ * errors: Record<string, any> | null;
  * };
  * }} opts
  */

packages/kit/src/runtime/client/types.d.ts

@@ -27,6 +27,8 @@ export interface Client {
  node_ids: number[];
  params: Record<string, string>;
  routeId: string | null;
+ data: Array<import('types').ServerDataNode | import('types').ServerErrorNode | null>;
+ errors: Record<string, any> | null;
  }) => Promise<void>;
  _start_router: () => void;
 }