@sveltejs/kit 1.0.0-next.575 → 1.0.0-next.577

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/kit",
-  "version": "1.0.0-next.575",
+  "version": "1.0.0-next.577",
   "repository": {
     "type": "git",
     "url": "https://github.com/sveltejs/kit",

package/src/core/config/options.js

@@ -129,6 +129,8 @@ const options = object(
 				checkOrigin: boolean(true)
 			}),
 
+			embedded: boolean(false),
+
 			// TODO: remove this for the 1.0 release
 			endpointExtensions: error(
 				(keypath) => `${keypath} has been renamed to config.kit.moduleExtensions`

package/src/exports/vite/build/build_server.js

@@ -66,6 +66,7 @@ export class Server {
 				check_origin: ${s(config.kit.csrf.checkOrigin)},
 			},
 			dev: false,
+			embedded: ${config.kit.embedded},
 			handle_error: (error, event) => {
 				return this.options.hooks.handleError({
 					error,

package/src/exports/vite/build/utils.js

@@ -147,7 +147,8 @@ export function get_default_build_config({ config, input, ssr, outDir }) {
 			__SVELTEKIT_APP_VERSION_FILE__: JSON.stringify(`${config.kit.appDir}/version.json`),
 			__SVELTEKIT_APP_VERSION_POLL_INTERVAL__: JSON.stringify(config.kit.version.pollInterval),
 			__SVELTEKIT_BROWSER__: ssr ? 'false' : 'true',
-			__SVELTEKIT_DEV__: 'false'
+			__SVELTEKIT_DEV__: 'false',
+			__SVELTEKIT_EMBEDDED__: config.kit.embedded ? 'true' : 'false'
 		},
 		publicDir: ssr ? false : config.kit.files.assets,
 		resolve: {

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

@@ -449,6 +449,7 @@ export async function dev(vite, vite_config, svelte_config) {
 							check_origin: svelte_config.kit.csrf.checkOrigin
 						},
 						dev: true,
+						embedded: svelte_config.kit.embedded,
 						handle_error: async (error, event) => {
 							const error_object = await hooks.handleError({
 								error: new Proxy(error, {

package/src/exports/vite/index.js

@@ -59,9 +59,25 @@ const enforced_config = {
 	root: true
 };
 
-/** @return {import('vite').Plugin[]} */
-export function sveltekit() {
-	return [...svelte(), ...kit()];
+/** @return {Promise<import('vite').Plugin[]>} */
+export async function sveltekit() {
+	const svelte_config = await load_config();
+
+	/** @type {import('@sveltejs/vite-plugin-svelte').Options} */
+	const vite_plugin_svelte_options = {
+		configFile: false,
+		extensions: svelte_config.extensions,
+		preprocess: svelte_config.preprocess,
+		onwarn: svelte_config.onwarn,
+		compilerOptions: {
+			// @ts-expect-error SvelteKit requires hydratable true by default
+			hydratable: true,
+			...svelte_config.compilerOptions
+		},
+		...svelte_config.vitePlugin
+	};
+
+	return [...svelte(vite_plugin_svelte_options), ...kit({ svelte_config })];
 }
 
 /**
@@ -74,12 +90,10 @@ export function sveltekit() {
  * - https://rollupjs.org/guide/en/#build-hooks
  * - https://rollupjs.org/guide/en/#output-generation-hooks
  *
+ * @param {{ svelte_config: import('types').ValidatedConfig }} options
  * @return {import('vite').Plugin[]}
  */
-function kit() {
-	/** @type {import('types').ValidatedConfig} */
-	let svelte_config;
-
+function kit({ svelte_config }) {
 	/** @type {import('vite').ResolvedConfig} */
 	let vite_config;
 
@@ -193,7 +207,6 @@ function kit() {
 		 */
 		async config(config, config_env) {
 			vite_config_env = config_env;
-			svelte_config = await load_config();
 
 			env = get_env(svelte_config.kit.env, vite_config_env.mode);
 
@@ -249,7 +262,8 @@ function kit() {
 				define: {
 					__SVELTEKIT_APP_VERSION_POLL_INTERVAL__: '0',
 					__SVELTEKIT_BROWSER__: config_env.ssrBuild ? 'false' : 'true',
-					__SVELTEKIT_DEV__: 'true'
+					__SVELTEKIT_DEV__: 'true',
+					__SVELTEKIT_EMBEDDED__: svelte_config.kit.embedded ? 'true' : 'false'
 				},
 				publicDir: svelte_config.kit.files.assets,
 				resolve: {

package/src/runtime/client/client.js

@@ -89,6 +89,7 @@ function check_for_removed_attributes() {
  * @returns {import('./types').Client}
  */
 export function create_client({ target, base }) {
+	const container = __SVELTEKIT_EMBEDDED__ ? target : document.documentElement;
 	/** @type {Array<((url: URL) => boolean)>} */
 	const invalidated = [];
 
@@ -1199,7 +1200,7 @@ export function create_client({ target, base }) {
 		/** @type {NodeJS.Timeout} */
 		let mousemove_timeout;
 
-		target.addEventListener('mousemove', (event) => {
+		container.addEventListener('mousemove', (event) => {
 			const target = /** @type {Element} */ (event.target);
 
 			clearTimeout(mousemove_timeout);
@@ -1213,8 +1214,8 @@ export function create_client({ target, base }) {
 			preload(/** @type {Element} */ (event.composedPath()[0]), 1);
 		}
 
-		target.addEventListener('mousedown', tap);
-		target.addEventListener('touchstart', tap, { passive: true });
+		container.addEventListener('mousedown', tap);
+		container.addEventListener('touchstart', tap, { passive: true });
 
 		const observer = new IntersectionObserver(
 			(entries) => {
@@ -1233,7 +1234,7 @@ export function create_client({ target, base }) {
 		 * @param {number} priority
 		 */
 		function preload(element, priority) {
-			const a = find_anchor(element, target);
+			const a = find_anchor(element, container);
 			if (!a) return;
 
 			const { url, external } = get_link_info(a, base);
@@ -1253,7 +1254,7 @@ export function create_client({ target, base }) {
 		function after_navigate() {
 			observer.disconnect();
 
-			for (const a of target.querySelectorAll('a')) {
+			for (const a of container.querySelectorAll('a')) {
 				const { url, external } = get_link_info(a, base);
 				if (external) continue;
 
@@ -1457,14 +1458,14 @@ export function create_client({ target, base }) {
 			}
 
 			/** @param {MouseEvent} event */
-			target.addEventListener('click', (event) => {
+			container.addEventListener('click', (event) => {
 				// Adapted from https://github.com/visionmedia/page.js
 				// MIT license https://github.com/visionmedia/page.js#license
 				if (event.button || event.which !== 1) return;
 				if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
 				if (event.defaultPrevented) return;
 
-				const a = find_anchor(/** @type {Element} */ (event.composedPath()[0]), target);
+				const a = find_anchor(/** @type {Element} */ (event.composedPath()[0]), container);
 				if (!a) return;
 
 				const { url, external, has } = get_link_info(a, base);
@@ -1534,7 +1535,7 @@ export function create_client({ target, base }) {
 				});
 			});
 
-			target.addEventListener('submit', (event) => {
+			container.addEventListener('submit', (event) => {
 				if (event.defaultPrevented) return;
 
 				const form = /** @type {HTMLFormElement} */ (
@@ -1639,11 +1640,25 @@ export function create_client({ target, base }) {
 			});
 		},
 
-		_hydrate: async ({ status, error, node_ids, params, route, data: server_data_nodes, form }) => {
+		_hydrate: async ({
+			status = 200,
+			error,
+			node_ids,
+			params,
+			route,
+			data: server_data_nodes,
+			form
+		}) => {
 			hydrated = true;
 
 			const url = new URL(location.href);
 
+			if (!__SVELTEKIT_EMBEDDED__) {
+				// See https://github.com/sveltejs/kit/pull/4935#issuecomment-1328093358 for one motivation
+				// of determining the params on the client side.
+				({ params = {}, route = { id: null } } = get_navigation_intent(url, false) || {});
+			}
+
 			/** @type {import('./types').NavigationFinished | undefined} */
 			let result;
 

package/src/runtime/server/page/render.js

@@ -266,24 +266,41 @@ export async function render_response({
 	}
 
 	if (page_config.csr) {
+		const opts = [
+			`env: ${s(options.public_env)}`,
+			`paths: ${s(options.paths)}`,
+			`target: document.querySelector('[data-sveltekit-hydrate="${target}"]').parentNode`,
+			`version: ${s(options.version)}`
+		];
+
+		if (page_config.ssr) {
+			const hydrate = [
+				`node_ids: [${branch.map(({ node }) => node.index).join(', ')}]`,
+				`data: ${serialized.data}`,
+				`form: ${serialized.form}`
+			];
+
+			if (status !== 200) {
+				hydrate.push(`status: ${status}`);
+			}
+
+			if (error) {
+				hydrate.push(`error: ${devalue.uneval(error)}`);
+			}
+
+			if (options.embedded) {
+				hydrate.push(`params: ${devalue.uneval(event.params)}`, `route: ${s(event.route)}`);
+			}
+
+			opts.push(`hydrate: {\n\t\t\t\t\t${hydrate.join(',\n\t\t\t\t\t')}\n\t\t\t\t}`);
+		}
+
 		// prettier-ignore
 		const init_app = `
 			import { start } from ${s(prefixed(entry.file))};
 
 			start({
-				env: ${s(options.public_env)},
-				hydrate: ${page_config.ssr ? `{
-					status: ${status},
-					error: ${devalue.uneval(error)},
-					node_ids: [${branch.map(({ node }) => node.index).join(', ')}],
-					params: ${devalue.uneval(event.params)},
-					route: ${s(event.route)},
-					data: ${serialized.data},
-					form: ${serialized.form}
-				}` : 'null'},
-				paths: ${s(options.paths)},
-				target: document.querySelector('[data-sveltekit-hydrate="${target}"]').parentNode,
-				version: ${s(options.version)}
+				${opts.join(',\n\t\t\t\t')}
 			});
 		`;
 

package/types/ambient.d.ts

@@ -433,5 +433,5 @@ declare module '@sveltejs/kit/vite' {
 	/**
 	 * Returns the SvelteKit Vite plugins.
 	 */
-	export function sveltekit(): Plugin[];
+	export function sveltekit(): Promise<Plugin[]>;
 }

package/types/index.d.ts

@@ -325,6 +325,11 @@ export interface KitConfig {
 		 */
 		checkOrigin?: boolean;
 	};
+	/**
+	 * Whether or not the app is embedded inside a larger app. If `true`, SvelteKit will add its event listeners related to navigation etc on the parent of `%sveltekit.body%` instead of `window`, and will pass `params` from the server rather than inferring them from `location.pathname`.
+	 * @default false
+	 */
+	embedded?: boolean;
 	/**
 	 * Environment variable configuration
 	 */

package/types/internal.d.ts

@@ -299,6 +299,7 @@ export interface SSROptions {
 		check_origin: boolean;
 	};
 	dev: boolean;
+	embedded: boolean;
 	handle_error(error: Error & { frame?: string }, event: RequestEvent): MaybePromise<App.Error>;
 	hooks: ServerHooks;
 	manifest: SSRManifest;
@@ -387,4 +388,5 @@ declare global {
 	const __SVELTEKIT_APP_VERSION_POLL_INTERVAL__: number;
 	const __SVELTEKIT_BROWSER__: boolean;
 	const __SVELTEKIT_DEV__: boolean;
+	const __SVELTEKIT_EMBEDDED__: boolean;
 }