@sveltejs/kit 3.0.0-next.22 → 3.0.0-next.24

package/src/exports/vite/plugins/env-vars.js

@@ -0,0 +1,117 @@
+/** @import { Plugin, ResolvedConfig } from 'vite' */
+/** @import { EnvVarConfig } from '@sveltejs/kit/env' */
+/** @import { ValidatedConfig } from 'types' */
+import path from 'node:path';
+import * as sync from '../../../core/sync/sync.js';
+import { create_env_modules, resolve_env_entry } from '../../../core/env.js';
+import { import_peer } from '../../../utils/import.js';
+import { write_if_changed } from '../../../core/sync/utils.js';
+import { posixify } from '../../../utils/os.js';
+
+/**
+ * Generate (and, in dev, maintain) the `${outDir}/generated/{build,dev}/env` modules
+ * derived from `src/env.ts`
+ *
+ * @param {ValidatedConfig} config
+ * @param {(variables: Record<string, EnvVarConfig<any>> | null) => void} callback
+ * @returns {Plugin}
+ */
+export function plugin_env_vars(config, callback) {
+	/** @type {string} */
+	let dir;
+
+	/** @type {Record<string, any>} */
+	let env;
+
+	/** @type {ResolvedConfig} */
+	let resolved_config;
+
+	/** @type {string | null} */
+	let resolved_entry = null;
+
+	/** @type {Set<string>} */
+	let deps = new Set();
+
+	let is_build = false;
+
+	/** @type {Promise<void> | undefined} */
+	let generated;
+
+	async function generate() {
+		const synced = await sync.env(
+			config,
+			resolved_entry,
+			resolved_config.root,
+			resolved_config.mode
+		);
+
+		deps = synced.deps;
+
+		const vars = synced.variables;
+		callback(vars);
+
+		const modules = create_env_modules(
+			config,
+			vars,
+			env,
+			dir,
+			resolved_entry && posixify(path.relative(dir, resolved_entry)),
+			!is_build
+		);
+
+		for (const [file, code] of Object.entries(modules)) {
+			write_if_changed(`${dir}/${file}`, code);
+		}
+	}
+
+	return {
+		name: 'vite-plugin-sveltekit-env-vars',
+
+		async configResolved(c) {
+			resolved_config = c;
+
+			const vite = await import_peer('vite', c.root);
+			env = vite.loadEnv(c.mode, path.resolve(c.root, config.env.dir), '');
+
+			is_build = c.command === 'build';
+
+			dir = posixify(
+				path.resolve(c.root, config.outDir, `generated/${is_build ? 'build' : 'dev'}/env`)
+			);
+		},
+
+		async buildStart() {
+			// runs once via the memo — per-process, whichever environment starts first
+			// (environment names vary by adapter), and never in the postbuild forks,
+			// which resolve the config without building
+			await (generated ??= (async () => {
+				resolved_entry = resolve_env_entry(config, resolved_config.root);
+				await generate();
+			})());
+		},
+
+		configureServer(server) {
+			// `handleHotUpdate` only fires for `change` events on files Vite already knows about,
+			// so it doesn't cover the env entry being created or deleted while the dev server is
+			// running. Watch for those events explicitly, re-resolve the entry, regenerate the
+			// modules and trigger a full reload (mirroring the previous behaviour).
+			const on_entry_add_unlink = async (/** @type {string} */ file) => {
+				const resolved = resolve_env_entry(config, resolved_config.root);
+
+				if (file === resolved_entry || file === resolved) {
+					resolved_entry = resolved;
+					await generate();
+					server.hot.send({ type: 'full-reload' });
+				}
+			};
+
+			server.watcher.on('add', on_entry_add_unlink);
+			server.watcher.on('unlink', on_entry_add_unlink);
+		},
+
+		async handleHotUpdate(update) {
+			if (!deps.has(update.file)) return;
+			await generate();
+		}
+	};
+}

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

@@ -9,6 +9,7 @@ import sirv from 'sirv';
 import { loadEnv, normalizePath } from 'vite';
 import { createReadableStream, getRequest, setResponse } from '../../../exports/node/index.js';
 import { SVELTE_KIT_ASSETS } from '../../../constants.js';
+import { relative_pathname } from '../../../utils/url.js';
 import { is_chrome_devtools_request, not_found } from '../utils.js';
 import { stackless } from '../../../utils/error.js';
 
@@ -176,9 +177,9 @@ export async function preview(vite, vite_config, svelte_config) {
 					}
 
 					if (redirect) {
-						if (search) redirect += search;
-						res.writeHead(307, {
-							location: redirect
+						res.writeHead(308, {
+							// relative so (possibly invisible) path prefixes are preserved
+							location: relative_pathname(pathname, redirect) + search
 						});
 
 						res.end();
@@ -206,7 +207,8 @@ export async function preview(vite, vite_config, svelte_config) {
 
 			const request = getRequest({
 				base: `${protocol}://${host}`,
-				request: req
+				request: req,
+				response: res
 			});
 
 			setResponse(

package/src/exports/vite/utils.js

@@ -6,7 +6,7 @@ import { escape_html } from '../../utils/escape.js';
 import { escape_for_regexp } from '../../utils/regex.js';
 import { stackless } from '../../utils/error.js';
 import { dedent } from '../../core/sync/utils.js';
-import { app_server, app_env_private, sveltekit_env_private } from './module_ids.js';
+import { app_server, app_env_private } from './module_ids.js';
 
 /**
  * Transforms alias to a valid vite.resolve.alias array.
@@ -119,7 +119,7 @@ export function normalize_id(id, aliases, cwd) {
 		return '$app/server';
 	}
 
-	if (id === app_env_private || id === sveltekit_env_private) {
+	if (id === app_env_private) {
 		return '$app/env/private';
 	}
 
@@ -191,8 +191,6 @@ function can_export_remote_module(directory) {
 export const server_only_module_pattern = /[/.]server\.[^/]+$/;
 export const server_only_directory_pattern = /\/server\//;
 
-export const strip_virtual_prefix = /** @param {string} id */ (id) => id.replace('\0virtual:', '');
-
 /**
  * For `error_for_missing_config('remote functions', 'experimental.remoteFunctions', 'true')`,
  * returns:

package/src/runtime/app/env/{types.d.ts → client.js}

@@ -1,19 +1,24 @@
+import { payload } from '../../client/payload.js';
+
 /**
  * `true` if the app is running in the browser.
+ * @type {boolean}
  */
-export const browser: boolean;
+export const browser = true;
 
 /**
  * Whether the dev server is running. This is not guaranteed to correspond to `NODE_ENV` or `MODE`.
+ * @type {boolean}
  */
-export const dev: boolean;
+export const dev = __SVELTEKIT_DEV__;
 
 /**
  * SvelteKit analyses your app during the `build` step by running it. During this process, `building` is `true`. This also applies during prerendering.
+ * @type {boolean}
  */
-export const building: boolean;
+export const building = false;
 
 /**
  * The value of `config.version.name`.
  */
-export const version: string;
+export const version = payload.version;

package/src/runtime/app/env/index.js

@@ -1,2 +1 @@
-export { BROWSER as browser, DEV as dev } from 'esm-env';
-export { building, version } from './internal.js';
+export { browser, dev, building, version } from '#app/env';

package/src/runtime/app/env/private/index.js

@@ -0,0 +1 @@
+export * from '<sveltekit:generated>/env/private/server.js';

package/src/runtime/app/env/public/client.js

@@ -1 +1 @@
-export * from '__sveltekit/env/public/client';
+export * from '<sveltekit:generated>/env/public/client.js';

package/src/runtime/app/env/public/server.js

@@ -1 +1 @@
-export * from '__sveltekit/env/public/server';
+export * from '<sveltekit:generated>/env/public/server.js';

package/src/runtime/app/env/{internal.js → server.js}

@@ -1,8 +1,8 @@
-import { BROWSER } from 'esm-env';
-import { payload } from '../../client/payload.js';
-
-export const version = BROWSER ? payload.version : __SVELTEKIT_APP_VERSION__;
+export const browser = false;
+export const dev = __SVELTEKIT_DEV__;
+export const version = __SVELTEKIT_APP_VERSION__;
 export let building = false;
+
 export let prerendering = false;
 
 export function set_building() {

package/src/runtime/app/forms/client.js

@@ -0,0 +1,263 @@
+/** @import { ActionResult, SubmitFunction } from './types.js' */
+import { HttpError, SvelteKitError } from '@sveltejs/kit/internal';
+import { DEV } from 'esm-env';
+import { noop } from '../../../utils/functions.js';
+import { refreshAll } from '../navigation/index.js';
+import {
+	applyAction,
+	apply_action_navigation,
+	handle_error,
+	is_current_location
+} from '../../client/client.js';
+import { notify_version } from '#app/state/client';
+import { deserialize } from './shared.js';
+
+export { applyAction, deserialize };
+
+/**
+ * Shallow clone an element, so that we can access e.g. `form.action` without worrying
+ * that someone has added an `<input name="action">` (https://github.com/sveltejs/kit/issues/7593)
+ * @template {HTMLElement} T
+ * @param {T} element
+ * @returns {T}
+ */
+function clone(element) {
+	return /** @type {T} */ (HTMLElement.prototype.cloneNode.call(element));
+}
+
+/**
+ * This action enhances a `<form>` element that otherwise would work without JavaScript.
+ *
+ * The `submit` function is called upon submission with the given FormData and the `action` that should be triggered.
+ * If `cancel` is called, the form will not be submitted.
+ * You can use the abort `controller` to cancel the submission in case another one starts.
+ * If a function is returned, that function is called with the response from the server.
+ * If nothing is returned, the fallback will be used.
+ *
+ * If this function or its return value isn't set, it emulates the browser-native behaviour, just without the full-page reload. It
+ * - resets the `<form>` element and refreshes all data in case of a successful submission with no redirect response
+ * - updates the `form` prop, `page.form` and `page.status` if the action is on the same page as the form
+ * - navigates to the page the submission lands on — populating that page's `form` prop and `page.status` — on success and failure if that isn't the current page, just as a native form submission would, but with the `?/actionName` param stripped from the destination URL
+ * - redirects in case of a redirect response
+ * - renders the nearest error page in case of an unexpected error — the one nearest the action's route, if the action is on a different page
+ *
+ * If you provide a custom function with a callback and want to use the default behavior, invoke `update` in your callback.
+ * It accepts an options object
+ * - `reset: false` if you don't want the `<form>` values to be reset after a successful submission
+ * - `refreshAll` to control whether all data is refreshed after submission; it defaults to `true` for successes and `false` for failures
+ * - `navigate: false` to apply non-redirect results to the current page rather than navigating to `result.location`; redirects are always followed
+ * @template {Record<string, unknown> | undefined} Success
+ * @template {Record<string, unknown> | undefined} Failure
+ * @param {HTMLFormElement} form_element The form element
+ * @param {SubmitFunction<Success, Failure>} submit Submit callback
+ */
+export function enhance(form_element, submit = noop) {
+	if (DEV && clone(form_element).method !== 'post') {
+		throw new Error('use:enhance can only be used on <form> fields with method="POST"');
+	}
+
+	/**
+	 * @param {{
+	 *   result: ActionResult;
+	 *   reset?: boolean;
+	 *   refreshAll?: boolean;
+	 *   invalidateAll?: boolean;
+	 *   navigate?: boolean;
+	 * }} opts
+	 */
+	const fallback_callback = async ({
+		result,
+		reset = true,
+		refreshAll: should_refresh_all,
+		invalidateAll: deprecated_invalidate_all,
+		navigate = true
+	}) => {
+		if (DEV && deprecated_invalidate_all !== undefined) {
+			console.warn(
+				'The `update({ invalidateAll })` option has been deprecated in favour of `update({ refreshAll })`'
+			);
+		}
+
+		should_refresh_all ??= deprecated_invalidate_all ?? result.type === 'success';
+
+		if (result.type === 'success' && reset) {
+			// We call reset from the prototype to avoid DOM clobbering
+			HTMLFormElement.prototype.reset.call(form_element);
+		}
+
+		const destination =
+			navigate && result.type !== 'redirect' && !is_current_location(result.location)
+				? result.location
+				: undefined;
+
+		if (destination === undefined) {
+			if (should_refresh_all && result.type !== 'redirect') {
+				await refreshAll();
+			}
+
+			await applyAction(result);
+			return;
+		}
+
+		// emulate the browser: navigate to where the submission lands, rendering that
+		// page with this result
+		await apply_action_navigation(destination, result, should_refresh_all);
+	};
+
+	/** @param {SubmitEvent} event */
+	async function handle_submit(event) {
+		const method = event.submitter?.hasAttribute('formmethod')
+			? /** @type {HTMLButtonElement | HTMLInputElement} */ (event.submitter).formMethod
+			: clone(form_element).method;
+		if (method !== 'post') return;
+
+		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
+				: clone(form_element).action
+		);
+
+		const enctype = event.submitter?.hasAttribute('formenctype')
+			? /** @type {HTMLButtonElement | HTMLInputElement} */ (event.submitter).formEnctype
+			: clone(form_element).enctype;
+
+		const form_data = new FormData(form_element, event.submitter);
+
+		if (DEV && enctype !== 'multipart/form-data') {
+			for (const value of form_data.values()) {
+				if (value instanceof File) {
+					throw new Error(
+						'Your form contains <input type="file"> fields, but is missing the necessary `enctype="multipart/form-data"` attribute. This will lead to inconsistent behavior between enhanced and native forms. For more details, see https://github.com/sveltejs/kit/issues/9819.'
+					);
+				}
+			}
+		}
+
+		const controller = new AbortController();
+
+		let cancelled = false;
+		const cancel = () => (cancelled = true);
+
+		const callback =
+			(await submit({
+				action,
+				cancel,
+				controller,
+				formData: form_data,
+				formElement: form_element,
+				submitter: event.submitter
+			})) ?? fallback_callback;
+		if (cancelled) return;
+
+		/** @type {ActionResult} */
+		let result;
+
+		try {
+			const headers = new Headers({
+				accept: 'application/json',
+				'x-sveltekit-action': 'true'
+			});
+
+			// do not explicitly set the `Content-Type` header when sending `FormData`
+			// or else it will interfere with the browser's header setting
+			// see https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest_API/Using_FormData_Objects#sect4
+			if (enctype !== 'multipart/form-data') {
+				headers.set(
+					'Content-Type',
+					/^(:?application\/x-www-form-urlencoded|text\/plain)$/.test(enctype)
+						? enctype
+						: 'application/x-www-form-urlencoded'
+				);
+			}
+
+			// @ts-expect-error `URLSearchParams(form_data)` is kosher, but typescript doesn't know that
+			const body = enctype === 'multipart/form-data' ? form_data : new URLSearchParams(form_data);
+
+			const response = await fetch(action, {
+				method: 'POST',
+				headers,
+				cache: 'no-store',
+				body,
+				signal: controller.signal
+			});
+
+			// detect new deployments from the response header
+			notify_version(response.headers.get('x-sveltekit-version'));
+
+			const text = await response.text();
+
+			/** @type {any} */
+			let parsed;
+			try {
+				// an empty body carries no result for an error response
+				parsed = text === '' && !response.ok ? undefined : deserialize(text);
+			} catch (error) {
+				// only an error response may have a non-ActionResult body, e.g. an HTML error page
+				if (response.ok) throw error;
+			}
+
+			if (
+				parsed?.type === 'success' ||
+				parsed?.type === 'failure' ||
+				parsed?.type === 'redirect' ||
+				parsed?.type === 'error'
+			) {
+				result = parsed;
+				if (result.type === 'error' || result.type === 'failure') {
+					result.status = response.status;
+				}
+			} else if (!response.ok) {
+				// the action never ran, e.g. the CSRF check or a proxy rejected the request.
+				// an `App.Error`-shaped body is an expected error, anything else goes through `handleError`
+				throw parsed && typeof parsed === 'object' && typeof parsed.message === 'string'
+					? new HttpError({ ...parsed, status: response.status })
+					: new SvelteKitError(
+							response.status,
+							response.statusText,
+							typeof parsed === 'string' ? parsed : response.statusText
+						);
+			} else {
+				result = parsed;
+			}
+		} catch (error) {
+			if (/** @type {any} */ (error)?.name === 'AbortError') return;
+			result = {
+				type: 'error',
+				error: await handle_error(error, {
+					params: {},
+					route: { id: null },
+					url: new URL(location.href)
+				})
+			};
+		}
+
+		await callback({
+			action,
+			formData: form_data,
+			formElement: form_element,
+			update: (opts) =>
+				fallback_callback({
+					result,
+					reset: opts?.reset,
+					refreshAll: opts?.refreshAll,
+					invalidateAll: opts?.invalidateAll,
+					navigate: opts?.navigate
+				}),
+			// @ts-expect-error generic constraints stuff we don't care about
+			result
+		});
+	}
+
+	// @ts-expect-error
+	HTMLFormElement.prototype.addEventListener.call(form_element, 'submit', handle_submit);
+
+	return {
+		destroy() {
+			// @ts-expect-error
+			HTMLFormElement.prototype.removeEventListener.call(form_element, 'submit', handle_submit);
+		}
+	};
+}