@sveltejs/kit 1.0.0-next.5 → 1.0.0-next.500

package/src/exports/vite/preview/index.js

@@ -0,0 +1,189 @@
+import fs from 'fs';
+import { join } from 'path';
+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 '../../../constants.js';
+import { loadEnv } from 'vite';
+
+/** @typedef {import('http').IncomingMessage} Req */
+/** @typedef {import('http').ServerResponse} Res */
+/** @typedef {(req: Req, res: Res, next: () => void) => void} Handler */
+
+/**
+ * @param {{
+ *   middlewares: import('connect').Server;
+ *   httpServer: import('http').Server;
+ * }} vite
+ * @param {import('vite').ResolvedConfig} vite_config
+ * @param {import('types').ValidatedConfig} svelte_config
+ */
+export async function preview(vite, vite_config, svelte_config) {
+	installPolyfills();
+
+	const { paths } = svelte_config.kit;
+	const base = paths.base;
+	const assets = paths.assets ? SVELTE_KIT_ASSETS : paths.base;
+
+	const protocol = vite_config.preview.https ? 'https' : 'http';
+
+	const etag = `"${Date.now()}"`;
+
+	const index_file = join(svelte_config.kit.outDir, 'output/server/index.js');
+	const manifest_file = join(svelte_config.kit.outDir, 'output/server/manifest.js');
+
+	/** @type {import('types').ServerModule} */
+	const { Server, override } = await import(pathToFileURL(index_file).href);
+	const { manifest } = await import(pathToFileURL(manifest_file).href);
+
+	override({
+		paths: { base, assets },
+		prerendering: false,
+		protocol,
+		read: (file) => fs.readFileSync(join(svelte_config.kit.files.assets, file))
+	});
+
+	const server = new Server(manifest);
+	await server.init({
+		env: loadEnv(vite_config.mode, process.cwd(), '')
+	});
+
+	return () => {
+		// generated client assets and the contents of `static`
+		vite.middlewares.use(
+			scoped(
+				assets,
+				sirv(join(svelte_config.kit.outDir, 'output/client'), {
+					setHeaders: (res, pathname) => {
+						// only apply to immutable directory, not e.g. version.json
+						if (pathname.startsWith(`/${svelte_config.kit.appDir}/immutable`)) {
+							res.setHeader('cache-control', 'public,max-age=31536000,immutable');
+						}
+					}
+				})
+			)
+		);
+
+		vite.middlewares.use((req, res, next) => {
+			const original_url = /** @type {string} */ (req.url);
+			const { pathname } = new URL(original_url, 'http://dummy');
+
+			if (pathname.startsWith(base)) {
+				next();
+			} else {
+				res.statusCode = 404;
+				res.end(`Not found (did you mean ${base + pathname}?)`);
+			}
+		});
+
+		// prerendered dependencies
+		vite.middlewares.use(
+			scoped(base, mutable(join(svelte_config.kit.outDir, 'output/prerendered/dependencies')))
+		);
+
+		// prerendered pages (we can't just use sirv because we need to
+		// preserve the correct trailingSlash behaviour)
+		vite.middlewares.use(
+			scoped(base, (req, res, next) => {
+				let if_none_match_value = req.headers['if-none-match'];
+
+				if (if_none_match_value?.startsWith('W/"')) {
+					if_none_match_value = if_none_match_value.substring(2);
+				}
+
+				if (if_none_match_value === etag) {
+					res.statusCode = 304;
+					res.end();
+					return;
+				}
+
+				const { pathname } = new URL(/** @type {string} */ (req.url), 'http://dummy');
+
+				// only treat this as a page if it doesn't include an extension
+				if (pathname === '/' || /\/[^./]+\/?$/.test(pathname)) {
+					const file = join(
+						svelte_config.kit.outDir,
+						'output/prerendered/pages' +
+							pathname +
+							(pathname.endsWith('/') ? 'index.html' : '.html')
+					);
+
+					if (fs.existsSync(file)) {
+						res.writeHead(200, {
+							'content-type': 'text/html',
+							etag
+						});
+
+						fs.createReadStream(file).pipe(res);
+						return;
+					}
+				}
+
+				next();
+			})
+		);
+
+		// SSR
+		vite.middlewares.use(async (req, res) => {
+			const host = req.headers['host'];
+
+			let request;
+
+			try {
+				request = await getRequest({
+					base: `${protocol}://${host}`,
+					request: req
+				});
+			} catch (/** @type {any} */ err) {
+				res.statusCode = err.status || 400;
+				return res.end('Invalid request body');
+			}
+
+			setResponse(
+				res,
+				await server.respond(request, {
+					getClientAddress: () => {
+						const { remoteAddress } = req.socket;
+						if (remoteAddress) return remoteAddress;
+						throw new Error('Could not determine clientAddress');
+					}
+				})
+			);
+		});
+	};
+}
+
+/**
+ * @param {string} dir
+ * @returns {Handler}
+ */
+const mutable = (dir) =>
+	fs.existsSync(dir)
+		? sirv(dir, {
+				etag: true,
+				maxAge: 0
+		  })
+		: (_req, _res, next) => next();
+
+/**
+ * @param {string} scope
+ * @param {Handler} handler
+ * @returns {Handler}
+ */
+function scoped(scope, handler) {
+	if (scope === '') return handler;
+
+	return (req, res, next) => {
+		if (req.url?.startsWith(scope)) {
+			const original_url = req.url;
+			req.url = req.url.slice(scope.length);
+			handler(req, res, () => {
+				req.url = original_url;
+				next();
+			});
+		} else {
+			next();
+		}
+	};
+}

package/src/exports/vite/types.d.ts

@@ -0,0 +1,3 @@
+export interface EnforcedConfig {
+	[key: string]: EnforcedConfig | true;
+}

package/src/exports/vite/utils.js

@@ -0,0 +1,157 @@
+import path from 'path';
+import { loadConfigFromFile, loadEnv } from 'vite';
+import { runtime_directory } from '../../core/utils.js';
+import { posixify } from '../../utils/filesystem.js';
+
+/**
+ * @param {import('vite').ResolvedConfig} config
+ * @param {import('vite').ConfigEnv} config_env
+ * @return {Promise<import('vite').UserConfig>}
+ */
+export async function get_vite_config(config, config_env) {
+	const loaded = await loadConfigFromFile(
+		config_env,
+		config.configFile,
+		undefined,
+		config.logLevel
+	);
+
+	if (!loaded) {
+		throw new Error('Could not load Vite config');
+	}
+	return { ...loaded.config, mode: config_env.mode };
+}
+
+/**
+ * @param {...import('vite').UserConfig} configs
+ * @returns {import('vite').UserConfig}
+ */
+export function merge_vite_configs(...configs) {
+	return deep_merge(
+		...configs.map((config) => ({
+			...config,
+			resolve: {
+				...config.resolve,
+				alias: normalize_alias(config.resolve?.alias || {})
+			}
+		}))
+	);
+}
+
+/**
+ * Takes zero or more objects and returns a new object that has all the values
+ * deeply merged together. None of the original objects will be mutated at any
+ * level, and the returned object will have no references to the original
+ * objects at any depth. If there's a conflict the last one wins, except for
+ * arrays which will be combined.
+ * @param {...Object} objects
+ * @returns {Record<string, any>} the merged object
+ */
+export function deep_merge(...objects) {
+	const result = {};
+	/** @type {string[]} */
+	objects.forEach((o) => merge_into(result, o));
+	return result;
+}
+
+/**
+ * normalize kit.vite.resolve.alias as an array
+ * @param {import('vite').AliasOptions} o
+ * @returns {import('vite').Alias[]}
+ */
+function normalize_alias(o) {
+	if (Array.isArray(o)) return o;
+	return Object.entries(o).map(([find, replacement]) => ({ find, replacement }));
+}
+
+/**
+ * Merges b into a, recursively, mutating a.
+ * @param {Record<string, any>} a
+ * @param {Record<string, any>} b
+ */
+function merge_into(a, b) {
+	/**
+	 * Checks for "plain old Javascript object", typically made as an object
+	 * literal. Excludes Arrays and built-in types like Buffer.
+	 * @param {any} x
+	 */
+	const is_plain_object = (x) => typeof x === 'object' && x.constructor === Object;
+
+	for (const prop in b) {
+		if (is_plain_object(b[prop])) {
+			if (!is_plain_object(a[prop])) {
+				a[prop] = {};
+			}
+			merge_into(a[prop], b[prop]);
+		} else if (Array.isArray(b[prop])) {
+			if (!Array.isArray(a[prop])) {
+				a[prop] = [];
+			}
+			a[prop].push(...b[prop]);
+		} else {
+			a[prop] = b[prop];
+		}
+	}
+}
+
+/**
+ * Transforms kit.alias to a valid vite.resolve.alias array.
+ * Related to tsconfig path alias creation.
+ *
+ * @param {import('types').ValidatedKitConfig} config
+ * */
+export function get_aliases(config) {
+	/** @type {import('vite').Alias[]} */
+	const alias = [
+		{ find: '__GENERATED__', replacement: path.posix.join(config.outDir, 'generated') },
+		{ find: '$app', replacement: `${runtime_directory}/app` },
+		// For now, we handle `$lib` specially here rather than make it a default value for
+		// `config.kit.alias` since it has special meaning for packaging, etc.
+		{ find: '$lib', replacement: config.files.lib }
+	];
+
+	for (let [key, value] of Object.entries(config.alias)) {
+		value = posixify(value);
+		if (value.endsWith('/*')) {
+			value = value.slice(0, -2);
+		}
+		if (key.endsWith('/*')) {
+			// Doing just `{ find: key.slice(0, -2) ,..}` would mean `import .. from "key"` would also be matched, which we don't want
+			alias.push({
+				find: new RegExp(`^${escape_for_regexp(key.slice(0, -2))}\\/(.+)$`),
+				replacement: `${path.resolve(value)}/$1`
+			});
+		} else if (key + '/*' in config.alias) {
+			// key and key/* both exist -> the replacement for key needs to happen _only_ on import .. from "key"
+			alias.push({
+				find: new RegExp(`^${escape_for_regexp(key)}$`),
+				replacement: path.resolve(value)
+			});
+		} else {
+			alias.push({ find: key, replacement: path.resolve(value) });
+		}
+	}
+
+	return alias;
+}
+
+/**
+ * @param {string} str
+ */
+function escape_for_regexp(str) {
+	return str.replace(/[.*+?^${}()|[\]\\]/g, (match) => '\\' + match);
+}
+
+/**
+ * Load environment variables from process.env and .env files
+ * @param {import('types').ValidatedKitConfig['env']} env_config
+ * @param {string} mode
+ */
+export function get_env(env_config, mode) {
+	const entries = Object.entries(loadEnv(mode, env_config.dir, ''));
+
+	return {
+		public: Object.fromEntries(entries.filter(([k]) => k.startsWith(env_config.publicPrefix))),
+		private: Object.fromEntries(entries.filter(([k]) => !k.startsWith(env_config.publicPrefix)))
+	};
+}

package/src/runtime/app/env.js

@@ -0,0 +1 @@
+throw new Error('$app/env has been renamed to $app/environment');

package/src/runtime/app/environment.js

@@ -0,0 +1,11 @@
+/**
+ * @type {import('$app/environment').browser}
+ */
+export const browser = !import.meta.env.SSR;
+
+/**
+ * @type {import('$app/environment').dev}
+ */
+export const dev = __SVELTEKIT_DEV__;
+
+export { prerendering } from '../env.js';

package/src/runtime/app/forms.js

@@ -0,0 +1,114 @@
+import { invalidateAll } from './navigation.js';
+import { client } from '../client/singletons.js';
+
+/**
+ * @param {string} name
+ */
+function guard(name) {
+	return () => {
+		throw new Error(`Cannot call ${name}(...) on the server`);
+	};
+}
+
+const ssr = import.meta.env.SSR;
+
+/** @type {import('$app/forms').applyAction} */
+export const applyAction = ssr ? guard('applyAction') : client.apply_action;
+
+/** @type {import('$app/forms').enhance} */
+export function enhance(form, submit = () => {}) {
+	/**
+	 * @param {{
+	 *   action: URL;
+	 *   result: import('types').ActionResult;
+	 * }} opts
+	 */
+	const fallback_callback = async ({ action, result }) => {
+		if (result.type === 'success') {
+			await invalidateAll();
+		}
+
+		// For success/invalid 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'
+		) {
+			applyAction(result);
+		}
+	};
+
+	/** @param {SubmitEvent} event */
+	async function handle_submit(event) {
+		event.preventDefault();
+
+		const action = new URL(
+			// We can't do submitter.formAction directly because that property is always set
+			event.submitter?.hasAttribute('formaction')
+				? /** @type {HTMLButtonElement | HTMLInputElement} */ (event.submitter).formAction
+				: form.action
+		);
+
+		const data = new FormData(form);
+		const controller = new AbortController();
+
+		let cancelled = false;
+		const cancel = () => (cancelled = true);
+
+		const callback =
+			submit({
+				action,
+				cancel,
+				controller,
+				data,
+				form
+			}) ?? fallback_callback;
+		if (cancelled) return;
+
+		/** @type {import('types').ActionResult} */
+		let result;
+
+		try {
+			const response = await fetch(action, {
+				method: 'POST',
+				headers: {
+					accept: 'application/json'
+				},
+				body: data,
+				signal: controller.signal
+			});
+
+			result = await response.json();
+		} catch (error) {
+			if (/** @type {any} */ (error)?.name === 'AbortError') return;
+			result = { type: 'error', error };
+		}
+
+		callback({
+			action,
+			data,
+			form,
+			// @ts-expect-error generic constraints stuff we don't care about
+			result,
+			// TODO remove for 1.0
+			get type() {
+				throw new Error('(result) => {...} has changed to ({ result }) => {...}');
+			},
+			get location() {
+				throw new Error('(result) => {...} has changed to ({ result }) => {...}');
+			},
+			get error() {
+				throw new Error('(result) => {...} has changed to ({ result }) => {...}');
+			}
+		});
+	}
+
+	form.addEventListener('submit', handle_submit);
+
+	return {
+		destroy() {
+			form.removeEventListener('submit', handle_submit);
+		}
+	};
+}

package/src/runtime/app/navigation.js

@@ -0,0 +1,23 @@
+import { client } from '../client/singletons.js';
+
+/**
+ * @param {string} name
+ */
+function guard(name) {
+	return () => {
+		throw new Error(`Cannot call ${name}(...) on the server`);
+	};
+}
+
+const ssr = import.meta.env.SSR;
+
+export const disableScrollHandling = ssr
+	? guard('disableScrollHandling')
+	: client.disable_scroll_handling;
+export const goto = ssr ? guard('goto') : client.goto;
+export const invalidate = ssr ? guard('invalidate') : client.invalidate;
+export const invalidateAll = ssr ? guard('invalidateAll') : client.invalidateAll;
+export const prefetch = ssr ? guard('prefetch') : client.prefetch;
+export const prefetchRoutes = ssr ? guard('prefetchRoutes') : client.prefetch_routes;
+export const beforeNavigate = ssr ? () => {} : client.before_navigate;
+export const afterNavigate = ssr ? () => {} : client.after_navigate;

package/src/runtime/app/paths.js

@@ -0,0 +1 @@
+export { base, assets } from '../paths.js';

package/src/runtime/app/stores.js

@@ -0,0 +1,102 @@
+import { getContext } from 'svelte';
+import { browser } from './environment.js';
+import { stores as browser_stores } from '../client/singletons.js';
+
+// TODO remove this (for 1.0? after 1.0?)
+let warned = false;
+export function stores() {
+	if (!warned) {
+		console.error('stores() is deprecated; use getStores() instead');
+		warned = true;
+	}
+	return getStores();
+}
+
+/**
+ * @type {import('$app/stores').getStores}
+ */
+export const getStores = () => {
+	const stores = browser ? browser_stores : getContext('__svelte__');
+
+	const readonly_stores = {
+		page: {
+			subscribe: stores.page.subscribe
+		},
+		navigating: {
+			subscribe: stores.navigating.subscribe
+		},
+		updated: stores.updated
+	};
+
+	// TODO remove this for 1.0
+	Object.defineProperties(readonly_stores, {
+		preloading: {
+			get() {
+				console.error('stores.preloading is deprecated; use stores.navigating instead');
+				return {
+					subscribe: stores.navigating.subscribe
+				};
+			},
+			enumerable: false
+		},
+		session: {
+			get() {
+				removed_session();
+				return {};
+			},
+			enumerable: false
+		}
+	});
+
+	return readonly_stores;
+};
+
+/** @type {typeof import('$app/stores').page} */
+export const page = {
+	/** @param {(value: any) => void} fn */
+	subscribe(fn) {
+		const store = getStores().page;
+		return store.subscribe(fn);
+	}
+};
+
+/** @type {typeof import('$app/stores').navigating} */
+export const navigating = {
+	subscribe(fn) {
+		const store = getStores().navigating;
+		return store.subscribe(fn);
+	}
+};
+
+function removed_session() {
+	// TODO remove for 1.0
+	throw new Error(
+		'stores.session is no longer available. See https://github.com/sveltejs/kit/discussions/5883'
+	);
+}
+
+export const session = {
+	subscribe: removed_session,
+	set: removed_session,
+	update: removed_session
+};
+
+/** @type {typeof import('$app/stores').updated} */
+export const updated = {
+	subscribe(fn) {
+		const store = getStores().updated;
+
+		if (browser) {
+			updated.check = store.check;
+		}
+
+		return store.subscribe(fn);
+	},
+	check: () => {
+		throw new Error(
+			browser
+				? `Cannot check updated store before subscribing`
+				: `Can only check updated store in browser`
+		);
+	}
+};

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

@@ -0,0 +1,26 @@
+declare module '__GENERATED__/client-manifest.js' {
+	import { CSRPageNodeLoader, ClientHooks, ParamMatcher } from 'types';
+
+	/**
+	 * A list of all the error/layout/page nodes used in the app
+	 */
+	export const nodes: CSRPageNodeLoader[];
+
+	/**
+	 * A list of all layout node ids that have a server load function.
+	 * Pages are not present because it's shorter to encode it on the leaf itself.
+	 */
+	export const server_loads: number[];
+
+	/**
+	 * A map of `[routeId: string]: [leaf, layouts, errors]` tuples, which
+	 * is parsed into an array of routes on startup. The numbers refer to the indices in `nodes`.
+	 * If the leaf number is negative, it means it does use a server load function and the complement is the node index.
+	 * The route layout and error nodes are not referenced, they are always number 0 and 1 and always apply.
+	 */
+	export const dictionary: Record<string, [leaf: number, layouts: number[], errors?: number[]]>;
+
+	export const matchers: Record<string, ParamMatcher>;
+
+	export const hooks: ClientHooks;
+}