[breaking] add embedded option, turned off by default

Closes #7940
Adds a new option which defaults to false. If true, events related to navigation etc are listened to on the target element rather the html root

Author: dummdidumm

.changeset/popular-crabs-shop.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+[breaking] add embedded option, turned off by default

packages/kit/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`

packages/kit/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: {

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

@@ -248,7 +248,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: {

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

@@ -88,6 +88,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 = [];
 
@@ -1194,7 +1195,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);
@@ -1208,8 +1209,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) => {
@@ -1228,7 +1229,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);
@@ -1248,7 +1249,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;
 
@@ -1452,14 +1453,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);
@@ -1529,7 +1530,7 @@ export function create_client({ target, base }) {
 				});
 			});
 
-			target.addEventListener('submit', (event) => {
+			container.addEventListener('submit', (event) => {
 				if (event.defaultPrevented) return;
 
 				const form = /** @type {HTMLFormElement} */ (

packages/kit/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`.
+	 * @default false
+	 */
+	embedded?: boolean;
 	/**
 	 * Environment variable configuration
 	 */

packages/kit/types/internal.d.ts

@@ -385,4 +385,5 @@ declare global {
 	const __SVELTEKIT_APP_VERSION_POLL_INTERVAL__: number;
 	const __SVELTEKIT_BROWSER__: boolean;
 	const __SVELTEKIT_DEV__: boolean;
+	const __SVELTEKIT_EMBEDDED__: boolean;
 }