@sveltejs/kit 1.0.0-next.47 → 1.0.0-next.470

package/src/runtime/client/fetcher.js

@@ -0,0 +1,107 @@
+import { hash } from '../hash.js';
+
+let loading = 0;
+
+const native_fetch = window.fetch;
+
+export function lock_fetch() {
+	loading += 1;
+}
+
+export function unlock_fetch() {
+	loading -= 1;
+}
+
+if (import.meta.env.DEV) {
+	let can_inspect_stack_trace = false;
+
+	const check_stack_trace = async () => {
+		const stack = /** @type {string} */ (new Error().stack);
+		can_inspect_stack_trace = stack.includes('check_stack_trace');
+	};
+
+	check_stack_trace();
+
+	window.fetch = (input, init) => {
+		const url = input instanceof Request ? input.url : input.toString();
+		const stack = /** @type {string} */ (new Error().stack);
+
+		const heuristic = can_inspect_stack_trace ? stack.includes('load_node') : loading;
+		if (heuristic) {
+			console.warn(
+				`Loading ${url} using \`window.fetch\`. For best results, use the \`fetch\` that is passed to your \`load\` function: https://kit.svelte.dev/docs/load#input-fetch`
+			);
+		}
+
+		const method = input instanceof Request ? input.method : init?.method || 'GET';
+
+		if (method !== 'GET') {
+			const url = new URL(input instanceof Request ? input.url : input.toString(), document.baseURI)
+				.href;
+			cache.delete(url);
+		}
+
+		return native_fetch(input, init);
+	};
+} else {
+	window.fetch = (input, init) => {
+		const method = input instanceof Request ? input.method : init?.method || 'GET';
+
+		if (method !== 'GET') {
+			const url = new URL(input instanceof Request ? input.url : input.toString(), document.baseURI)
+				.href;
+			cache.delete(url);
+		}
+
+		return native_fetch(input, init);
+	};
+}
+
+const cache = new Map();
+
+/**
+ * Should be called on the initial run of load functions that hydrate the page.
+ * Saves any requests with cache-control max-age to the cache.
+ * @param {RequestInfo} resource
+ * @param {string} resolved
+ * @param {RequestInit} [opts]
+ */
+export function initial_fetch(resource, resolved, opts) {
+	const url = JSON.stringify(typeof resource === 'string' ? resource : resource.url);
+
+	let selector = `script[data-sveltekit-fetched][data-url=${url}]`;
+
+	if (opts && typeof opts.body === 'string') {
+		selector += `[data-hash="${hash(opts.body)}"]`;
+	}
+
+	const script = document.querySelector(selector);
+	if (script?.textContent) {
+		const { body, ...init } = JSON.parse(script.textContent);
+
+		const ttl = script.getAttribute('data-ttl');
+		if (ttl) cache.set(resolved, { body, init, ttl: 1000 * Number(ttl) });
+
+		return Promise.resolve(new Response(body, init));
+	}
+
+	return native_fetch(resource, opts);
+}
+
+/**
+ * Tries to get the response from the cache, if max-age allows it, else does a fetch.
+ * @param {string} resolved
+ * @param {RequestInit} [opts]
+ */
+export function subsequent_fetch(resolved, opts) {
+	const cached = cache.get(resolved);
+	if (cached) {
+		if (performance.now() < cached.ttl) {
+			return new Response(cached.body, cached.init);
+		}
+
+		cache.delete(resolved);
+	}
+
+	return native_fetch(resolved, opts);
+}

package/src/runtime/client/parse.js

@@ -0,0 +1,60 @@
+import { exec, parse_route_id } from '../../utils/routing.js';
+
+/**
+ * @param {import('types').CSRPageNodeLoader[]} nodes
+ * @param {number[]} server_loads
+ * @param {typeof import('__GENERATED__/client-manifest.js').dictionary} dictionary
+ * @param {Record<string, (param: string) => boolean>} matchers
+ * @returns {import('types').CSRRoute[]}
+ */
+export function parse(nodes, server_loads, dictionary, matchers) {
+	const layouts_with_server_load = new Set(server_loads);
+
+	return Object.entries(dictionary).map(([id, [leaf, layouts, errors]]) => {
+		const { pattern, names, types } = parse_route_id(id);
+
+		const route = {
+			id,
+			/** @param {string} path */
+			exec: (path) => {
+				const match = pattern.exec(path);
+				if (match) return exec(match, names, types, matchers);
+			},
+			errors: [1, ...(errors || [])].map((n) => nodes[n]),
+			layouts: [0, ...(layouts || [])].map(create_layout_loader),
+			leaf: create_leaf_loader(leaf)
+		};
+
+		// bit of a hack, but ensures that layout/error node lists are the same
+		// length, without which the wrong data will be applied if the route
+		// manifest looks like `[[a, b], [c,], d]`
+		route.errors.length = route.layouts.length = Math.max(
+			route.errors.length,
+			route.layouts.length
+		);
+
+		return route;
+	});
+
+	/**
+	 * @param {number} id
+	 * @returns {[boolean, import('types').CSRPageNodeLoader]}
+	 */
+	function create_leaf_loader(id) {
+		// whether or not the route uses the server data is
+		// encoded using the ones' complement, to save space
+		const uses_server_data = id < 0;
+		if (uses_server_data) id = ~id;
+		return [uses_server_data, nodes[id]];
+	}
+
+	/**
+	 * @param {number | undefined} id
+	 * @returns {[boolean, import('types').CSRPageNodeLoader] | undefined}
+	 */
+	function create_layout_loader(id) {
+		// whether or not the layout uses the server data is
+		// encoded in the layouts array, to save space
+		return id === undefined ? id : [layouts_with_server_load.has(id), nodes[id]];
+	}
+}

package/src/runtime/client/singletons.js

@@ -0,0 +1,21 @@
+import { writable } from 'svelte/store';
+import { create_updated_store, notifiable_store } from './utils.js';
+
+/** @type {import('./types').Client} */
+export let client;
+
+/**
+ * @param {{
+ *   client: import('./types').Client;
+ * }} opts
+ */
+export function init(opts) {
+	client = opts.client;
+}
+
+export const stores = {
+	url: notifiable_store({}),
+	page: notifiable_store({}),
+	navigating: writable(/** @type {import('types').Navigation | null} */ (null)),
+	updated: create_updated_store()
+};

package/src/runtime/client/start.js

@@ -0,0 +1,45 @@
+import { create_client } from './client.js';
+import { init } from './singletons.js';
+import { set_paths } from '../paths.js';
+import { set_public_env } from '../env-public.js';
+
+/**
+ * @param {{
+ *   env: Record<string, string>;
+ *   hydrate: {
+ *     status: number;
+ *     error: Error | (import('../server/page/types').SerializedHttpError);
+ *     node_ids: number[];
+ *     params: Record<string, string>;
+ *     routeId: string | null;
+ *     data: Array<import('types').ServerDataNode | null>;
+ *     errors: Record<string, any> | null;
+ *   };
+ *   paths: {
+ *     assets: string;
+ *     base: string;
+ *   },
+ *   target: Element;
+ *   trailing_slash: import('types').TrailingSlash;
+ * }} opts
+ */
+export async function start({ env, hydrate, paths, target, trailing_slash }) {
+	set_public_env(env);
+	set_paths(paths);
+
+	const client = create_client({
+		target,
+		base: paths.base,
+		trailing_slash
+	});
+
+	init({ client });
+
+	if (hydrate) {
+		await client._hydrate(hydrate);
+	} else {
+		client.goto(location.href, { replaceState: true });
+	}
+
+	client._start_router();
+}

package/src/runtime/client/types.d.ts

@@ -0,0 +1,91 @@
+import {
+	afterNavigate,
+	beforeNavigate,
+	goto,
+	invalidate,
+	invalidateAll,
+	prefetch,
+	prefetchRoutes
+} from '$app/navigation';
+import { CSRPageNode, CSRPageNodeLoader, CSRRoute, Uses } from 'types';
+import { HttpError } from '../control.js';
+import { SerializedHttpError } from '../server/page/types.js';
+
+export interface Client {
+	// public API, exposed via $app/navigation
+	after_navigate: typeof afterNavigate;
+	before_navigate: typeof beforeNavigate;
+	disable_scroll_handling: () => void;
+	goto: typeof goto;
+	invalidate: typeof invalidate;
+	invalidateAll: typeof invalidateAll;
+	prefetch: typeof prefetch;
+	prefetch_routes: typeof prefetchRoutes;
+
+	// private API
+	_hydrate: (opts: {
+		status: number;
+		error: Error | SerializedHttpError;
+		node_ids: number[];
+		params: Record<string, string>;
+		routeId: string | null;
+		data: Array<import('types').ServerDataNode | null>;
+		errors: Record<string, any> | null;
+	}) => Promise<void>;
+	_start_router: () => void;
+}
+
+export type NavigationIntent = {
+	/**
+	 * `url.pathname + url.search`
+	 */
+	id: string;
+	/**
+	 * The route parameters
+	 */
+	params: Record<string, string>;
+	/**
+	 * The route that matches `path`
+	 */
+	route: CSRRoute;
+	/**
+	 * The destination URL
+	 */
+	url: URL;
+};
+
+export type NavigationResult = NavigationRedirect | NavigationFinished;
+
+export type NavigationRedirect = {
+	type: 'redirect';
+	location: string;
+};
+
+export type NavigationFinished = {
+	type: 'loaded';
+	state: NavigationState;
+	props: Record<string, any>;
+};
+
+export type BranchNode = {
+	node: CSRPageNode;
+	loader: CSRPageNodeLoader;
+	server: DataNode | null;
+	shared: DataNode | null;
+	data: Record<string, any> | null;
+};
+
+export interface DataNode {
+	type: 'data';
+	data: Record<string, any> | null;
+	uses: Uses;
+}
+
+export interface NavigationState {
+	branch: Array<BranchNode | undefined>;
+	error: HttpError | Error | null;
+	params: Record<string, string>;
+	route: CSRRoute | null;
+	session_id: number;
+	url: URL;
+}

package/src/runtime/client/utils.js

@@ -0,0 +1,159 @@
+import { writable } from 'svelte/store';
+import { assets } from '../paths.js';
+
+/* global __SVELTEKIT_APP_VERSION__, __SVELTEKIT_APP_VERSION_FILE__, __SVELTEKIT_APP_VERSION_POLL_INTERVAL__ */
+
+/** @param {HTMLDocument} doc */
+export function get_base_uri(doc) {
+	let baseURI = doc.baseURI;
+
+	if (!baseURI) {
+		const baseTags = doc.getElementsByTagName('base');
+		baseURI = baseTags.length ? baseTags[0].href : doc.URL;
+	}
+
+	return baseURI;
+}
+
+export function scroll_state() {
+	return {
+		x: pageXOffset,
+		y: pageYOffset
+	};
+}
+
+/** @param {Event} event */
+export function find_anchor(event) {
+	/** @type {HTMLAnchorElement | SVGAElement | undefined} */
+	let a;
+
+	/** @type {boolean | null} */
+	let noscroll = null;
+
+	/** @type {boolean | null} */
+	let prefetch = null;
+
+	/** @type {boolean | null} */
+	let reload = null;
+
+	for (const element of event.composedPath()) {
+		if (!(element instanceof Element)) continue;
+
+		if (!a && element.nodeName.toUpperCase() === 'A') {
+			// SVG <a> elements have a lowercase name
+			a = /** @type {HTMLAnchorElement | SVGAElement} */ (element);
+		}
+
+		if (noscroll === null) noscroll = get_link_option(element, 'data-sveltekit-noscroll');
+		if (prefetch === null) prefetch = get_link_option(element, 'data-sveltekit-prefetch');
+		if (reload === null) reload = get_link_option(element, 'data-sveltekit-reload');
+	}
+
+	const url = a && new URL(a instanceof SVGAElement ? a.href.baseVal : a.href, document.baseURI);
+
+	return {
+		a,
+		url,
+		options: {
+			noscroll,
+			prefetch,
+			reload
+		}
+	};
+}
+
+const warned = new WeakSet();
+
+/**
+ * @param {Element} element
+ * @param {string} attribute
+ */
+function get_link_option(element, attribute) {
+	const value = element.getAttribute(attribute);
+	if (value === null) return value;
+
+	if (value === '') return true;
+	if (value === 'off') return false;
+
+	if (__SVELTEKIT_DEV__ && !warned.has(element)) {
+		console.error(`Unexpected value for ${attribute} — should be "" or "off"`, element);
+		warned.add(element);
+	}
+
+	return false;
+}
+
+/** @param {any} value */
+export function notifiable_store(value) {
+	const store = writable(value);
+	let ready = true;
+
+	function notify() {
+		ready = true;
+		store.update((val) => val);
+	}
+
+	/** @param {any} new_value */
+	function set(new_value) {
+		ready = false;
+		store.set(new_value);
+	}
+
+	/** @param {(value: any) => void} run */
+	function subscribe(run) {
+		/** @type {any} */
+		let old_value;
+		return store.subscribe((new_value) => {
+			if (old_value === undefined || (ready && new_value !== old_value)) {
+				run((old_value = new_value));
+			}
+		});
+	}
+
+	return { notify, set, subscribe };
+}
+
+export function create_updated_store() {
+	const { set, subscribe } = writable(false);
+
+	const interval = __SVELTEKIT_APP_VERSION_POLL_INTERVAL__;
+
+	/** @type {NodeJS.Timeout} */
+	let timeout;
+
+	async function check() {
+		if (import.meta.env.DEV || import.meta.env.SSR) return false;
+
+		clearTimeout(timeout);
+
+		if (interval) timeout = setTimeout(check, interval);
+
+		const res = await fetch(`${assets}/${__SVELTEKIT_APP_VERSION_FILE__}`, {
+			headers: {
+				pragma: 'no-cache',
+				'cache-control': 'no-cache'
+			}
+		});
+
+		if (res.ok) {
+			const { version } = await res.json();
+			const updated = version !== __SVELTEKIT_APP_VERSION__;
+
+			if (updated) {
+				set(true);
+				clearTimeout(timeout);
+			}
+
+			return updated;
+		} else {
+			throw new Error(`Version check failed: ${res.status}`);
+		}
+	}
+
+	if (interval) timeout = setTimeout(check, interval);
+
+	return {
+		subscribe,
+		check
+	};
+}

package/src/runtime/components/error.svelte

@@ -0,0 +1,16 @@
+<script>
+	import { page } from '$app/stores';
+</script>
+
+<h1>{$page.status}</h1>
+
+<pre>{$page.error.message}</pre>
+
+<!-- TODO figure out what to do with frames/stacktraces in prod -->
+<!-- frame is populated by Svelte in its CompileError and is a Rollup/Vite convention -->
+{#if $page.error.frame}
+	<pre>{$page.error.frame}</pre>
+{/if}
+{#if $page.error.stack}
+	<pre>{$page.error.stack}</pre>
+{/if}

package/src/runtime/control.js

@@ -0,0 +1,33 @@
+export class HttpError {
+	// without these, things like `$page.error.stack` will error. we don't want to
+	// include a stack for these sorts of errors, but we also don't want red
+	// squigglies everywhere, so this feels like a not-terribile compromise
+	name = 'HttpError';
+
+	/** @type {void} */
+	stack = undefined;
+
+	/**
+	 * @param {number} status
+	 * @param {string | undefined} message
+	 */
+	constructor(status, message) {
+		this.status = status;
+		this.message = message ?? `Error: ${status}`;
+	}
+
+	toString() {
+		return this.message;
+	}
+}
+
+export class Redirect {
+	/**
+	 * @param {number} status
+	 * @param {string} location
+	 */
+	constructor(status, location) {
+		this.status = status;
+		this.location = location;
+	}
+}

package/src/runtime/env/dynamic/private.js

@@ -0,0 +1 @@
+export { env } from '../../env-private.js';

package/src/runtime/env/dynamic/public.js

@@ -0,0 +1 @@
+export { env } from '../../env-public.js';

package/src/runtime/env-private.js

@@ -0,0 +1,6 @@
+export let env = {};
+
+/** @type {(environment: Record<string, string>) => void} */
+export function set_private_env(environment) {
+	env = environment;
+}

package/src/runtime/env-public.js

@@ -0,0 +1,6 @@
+export let env = {};
+
+/** @type {(environment: Record<string, string>) => void} */
+export function set_public_env(environment) {
+	env = environment;
+}

package/src/runtime/env.js

@@ -0,0 +1,6 @@
+export let prerendering = false;
+
+/** @param {boolean} value */
+export function set_prerendering(value) {
+	prerendering = value;
+}

package/src/runtime/hash.js

@@ -0,0 +1,16 @@
+/**
+ * Hash using djb2
+ * @param {import('types').StrictBody} value
+ */
+export function hash(value) {
+	let hash = 5381;
+	let i = value.length;
+
+	if (typeof value === 'string') {
+		while (i) hash = (hash * 33) ^ value.charCodeAt(--i);
+	} else {
+		while (i) hash = (hash * 33) ^ value[--i];
+	}
+
+	return (hash >>> 0).toString(36);
+}

package/src/runtime/paths.js

@@ -0,0 +1,11 @@
+/** @type {string} */
+export let base = '';
+
+/** @type {string} */
+export let assets = '';
+
+/** @param {{ base: string, assets: string }} paths */
+export function set_paths(paths) {
+	base = paths.base;
+	assets = paths.assets || base;
+}