Client-side routing for <form method="GET">

documentation/docs/20-core-concepts/30-form-actions.md

@@ -439,3 +439,17 @@ const response = await fetch(this.action, {
 ### Alternatives
 
 Form actions are the preferred way to send data to the server, since they can be progressively enhanced, but you can also use [`+server.js`](/docs/routing#server) files to expose (for example) a JSON API.
+
+### GET vs POST
+
+As we've seen, to invoke a form action you must use `method="POST"`.
+
+Some forms don't need to `POST` data to the server — search inputs, for example. For these you can use `method="GET"` (or, equivalently, no `method` at all), and SvelteKit will treat them like `<a>` elements, using the client-side router instead of a full page navigation:
+
+```html
+<form action="/search">
+	<input name="q">
+</form>
+```
+
+As with `<a>` elements, you can use the [`data-sveltekit-reload`](/docs/link-options#data-sveltekit-reload) and [`data-sveltekit-noscroll`](/docs/link-options#data-sveltekit-noscroll) options to control the router's behaviour.

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

@@ -6,7 +6,14 @@ import {
 	normalize_path,
 	add_data_suffix
 } from '../../utils/url.js';
-import { find_anchor, get_base_uri, is_external_url, scroll_state } from './utils.js';
+import {
+	find_anchor,
+	get_base_uri,
+	get_link_info,
+	get_router_options,
+	is_external_url,
+	scroll_state
+} from './utils.js';
 import {
 	lock_fetch,
 	unlock_fetch,
@@ -1221,9 +1228,15 @@ export function create_client({ target, base }) {
 		 * @param {number} priority
 		 */
 		function preload(element, priority) {
-			const { url, options, external } = find_anchor(element, base);
+			const a = find_anchor(element, target);
+			if (!a) return;
+
+			const { url, external } = get_link_info(a, base);
+			if (external) return;
 
-			if (!external) {
+			const options = get_router_options(a);
+
+			if (!options.reload) {
 				if (priority <= options.preload_data) {
 					preload_data(/** @type {URL} */ (url));
 				} else if (priority <= options.preload_code) {
@@ -1236,9 +1249,10 @@ export function create_client({ target, base }) {
 			observer.disconnect();
 
 			for (const a of target.querySelectorAll('a')) {
-				const { url, external, options } = find_anchor(a, base);
+				const { url, external } = get_link_info(a, base);
+				const options = get_router_options(a);
 
-				if (external) continue;
+				if (external || options.reload) continue;
 
 				if (options.preload_code === PRELOAD_PRIORITIES.viewport) {
 					observer.observe(a);
@@ -1444,11 +1458,12 @@ export function create_client({ target, base }) {
 				if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
 				if (event.defaultPrevented) return;
 
-				const { a, url, options, has } = find_anchor(
-					/** @type {Element} */ (event.composedPath()[0]),
-					base
-				);
-				if (!a || !url) return;
+				const a = find_anchor(/** @type {Element} */ (event.composedPath()[0]), target);
+				if (!a) return;
+
+				const { url, external, has } = get_link_info(a, base);
+				const options = get_router_options(a);
+				if (!url) return;
 
 				const is_svg_a_element = a instanceof SVGAElement;
 
@@ -1470,7 +1485,7 @@ export function create_client({ target, base }) {
 				if (has.download) return;
 
 				// Ignore the following but fire beforeNavigate
-				if (options.reload || has.rel_external || has.target) {
+				if (external || options.reload) {
 					const navigation = before_navigate({ url, type: 'link' });
 					if (!navigation) {
 						event.preventDefault();
@@ -1513,6 +1528,54 @@ export function create_client({ target, base }) {
 				});
 			});
 
+			target.addEventListener('submit', (event) => {
+				if (event.defaultPrevented) return;
+
+				const form = /** @type {HTMLFormElement} */ (
+					HTMLFormElement.prototype.cloneNode.call(event.target)
+				);
+
+				const submitter = /** @type {HTMLButtonElement | HTMLInputElement} */ (event.submitter);
+
+				const method = event.submitter?.hasAttribute('formmethod')
+					? submitter.formMethod
+					: form.method;
+
+				if (method !== 'get') return;
+
+				const url = new URL(
+					event.submitter?.hasAttribute('formaction') ? submitter.formAction : form.action
+				);
+
+				if (is_external_url(url, base)) return;
+
+				const { noscroll, reload } = get_router_options(
+					/** @type {HTMLFormElement} */ (event.target)
+				);
+				if (reload) return;
+
+				event.preventDefault();
+				event.stopPropagation();
+
+				// @ts-ignore `URLSearchParams(fd)` is kosher, but typescript doesn't know that
+				url.search = new URLSearchParams(new FormData(event.target)).toString();
+
+				navigate({
+					url,
+					scroll: noscroll ? scroll_state() : null,
+					keepfocus: false,
+					redirect_chain: [],
+					details: {
+						state: {},
+						replaceState: false
+					},
+					nav_token: {},
+					accepted: () => {},
+					blocked: () => {},
+					type: 'form'
+				});
+			});
+
 			addEventListener('popstate', (event) => {
 				if (event.state?.[INDEX_KEY]) {
 					// if a popstate-driven navigation is cancelled, we need to counteract it

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

@@ -80,12 +80,59 @@ const levels = {
 
 /**
  * @param {Element} element
+ * @returns {Element | null}
+ */
+function parent_element(element) {
+	let parent = element.assignedSlot ?? element.parentNode;
+
+	// @ts-expect-error handle shadow roots
+	if (parent?.nodeType === 11) parent = parent.host;
+
+	return /** @type {Element} */ (parent);
+}
+
+/**
+ * @param {Element} element
+ * @param {Element} target
+ */
+export function find_anchor(element, target) {
+	while (element !== target) {
+		if (element.nodeName.toUpperCase() === 'A') {
+			return /** @type {HTMLAnchorElement | SVGAElement} */ (element);
+		}
+
+		element = /** @type {Element} */ (parent_element(element));
+	}
+}
+
+/**
+ * @param {HTMLAnchorElement | SVGAElement} a
  * @param {string} base
  */
-export function find_anchor(element, base) {
-	/** @type {HTMLAnchorElement | SVGAElement | undefined} */
-	let a;
+export function get_link_info(a, base) {
+	/** @type {URL | undefined} */
+	let url;
 
+	try {
+		url = new URL(a instanceof SVGAElement ? a.href.baseVal : a.href, document.baseURI);
+	} catch {}
+
+	const has = {
+		rel_external: (a.getAttribute('rel') || '').split(/\s+/).includes('external'),
+		download: a.hasAttribute('download'),
+		target: !!(a instanceof SVGAElement ? a.target.baseVal : a.target)
+	};
+
+	const external =
+		!url || is_external_url(url, base) || has.rel_external || has.target || has.download;
+
+	return { url, has, external };
+}
+
+/**
+ * @param {HTMLFormElement | HTMLAnchorElement | SVGAElement} element
+ */
+export function get_router_options(element) {
 	/** @type {typeof valid_link_options['noscroll'][number] | null} */
 	let noscroll = null;
 
@@ -98,63 +145,24 @@ export function find_anchor(element, base) {
 	/** @type {typeof valid_link_options['reload'][number] | null} */
 	let reload = null;
 
-	while (element !== document.documentElement) {
-		if (!a && element.nodeName.toUpperCase() === 'A') {
-			// SVG <a> elements have a lowercase name
-			a = /** @type {HTMLAnchorElement | SVGAElement} */ (element);
-		}
+	/** @type {Element} */
+	let el = element;
 
-		if (a) {
-			if (preload_code === null) preload_code = link_option(element, 'preload-code');
-			if (preload_data === null) preload_data = link_option(element, 'preload-data');
-			if (noscroll === null) noscroll = link_option(element, 'noscroll');
-			if (reload === null) reload = link_option(element, 'reload');
-		}
-
-		// @ts-expect-error handle shadow roots
-		element = element.assignedSlot ?? element.parentNode;
+	while (el !== document.documentElement) {
+		if (preload_code === null) preload_code = link_option(el, 'preload-code');
+		if (preload_data === null) preload_data = link_option(el, 'preload-data');
+		if (noscroll === null) noscroll = link_option(el, 'noscroll');
+		if (reload === null) reload = link_option(el, 'reload');
 
-		// @ts-expect-error handle shadow roots
-		if (element.nodeType === 11) element = element.host;
+		el = /** @type {Element} */ (parent_element(el));
 	}
 
-	/** @type {URL | undefined} */
-	let url;
-
-	try {
-		url = a && new URL(a instanceof SVGAElement ? a.href.baseVal : a.href, document.baseURI);
-	} catch {}
-
-	const options = {
+	return {
 		preload_code: levels[preload_code ?? 'off'],
 		preload_data: levels[preload_data ?? 'off'],
 		noscroll: noscroll === 'off' ? false : noscroll === '' ? true : null,
 		reload: reload === 'off' ? false : reload === '' ? true : null
 	};
-
-	const has = a
-		? {
-				rel_external: (a.getAttribute('rel') || '').split(/\s+/).includes('external'),
-				download: a.hasAttribute('download'),
-				target: !!(a instanceof SVGAElement ? a.target.baseVal : a.target)
-		  }
-		: {};
-
-	const external =
-		!url ||
-		is_external_url(url, base) ||
-		options.reload ||
-		has.rel_external ||
-		has.target ||
-		has.download;
-
-	return {
-		a,
-		url,
-		options,
-		external,
-		has
-	};
 }
 
 /** @param {any} value */

packages/kit/test/apps/basics/src/routes/routing/form-get/+page.svelte

@@ -0,0 +1,18 @@
+<script>
+	import { afterNavigate } from '$app/navigation';
+	import { page } from '$app/stores';
+
+	let type = '...';
+
+	afterNavigate((navigation) => {
+		type = /** @type {string} */ (navigation.type);
+	});
+</script>
+
+<h1>{$page.url.searchParams.get('q') ?? '...'}</h1>
+<h2>{type}</h2>
+
+<form>
+	<input name="q" />
+	<button>submit</button>
+</form>

packages/kit/test/apps/basics/test/client.test.js

@@ -814,6 +814,22 @@ test.describe('Routing', () => {
 		await page.click('[href="/routing/link-outside-app-target/target"]');
 		expect(await page.textContent('h1')).toBe('target: 0');
 	});
+
+	test('responds to <form method="GET"> submission without reload', async ({ page }) => {
+		await page.goto('/routing/form-get');
+		expect(await page.textContent('h1')).toBe('...');
+		expect(await page.textContent('h2')).toBe('enter');
+
+		const requests = [];
+		page.on('request', (request) => requests.push(request.url()));
+
+		await page.locator('input').fill('updated');
+		await page.click('button');
+
+		expect(requests).toEqual([]);
+		expect(await page.textContent('h1')).toBe('updated');
+		expect(await page.textContent('h2')).toBe('form');
+	});
 });
 
 test.describe('Shadow DOM', () => {

packages/kit/types/index.d.ts

@@ -715,12 +715,13 @@ export interface NavigationTarget {
 
 /**
  * - `enter`: The app has hydrated
+ * - `form`: The user submitted a `<form>`
  * - `leave`: The user is leaving the app by closing the tab or using the back/forward buttons to go to a different document
  * - `link`: Navigation was triggered by a link click
  * - `goto`: Navigation was triggered by a `goto(...)` call or a redirect
  * - `popstate`: Navigation was triggered by back/forward navigation
  */
-export type NavigationType = 'enter' | 'leave' | 'link' | 'goto' | 'popstate';
+export type NavigationType = 'enter' | 'form' | 'leave' | 'link' | 'goto' | 'popstate';
 
 export interface Navigation {
 	/**
@@ -733,6 +734,7 @@ export interface Navigation {
 	to: NavigationTarget | null;
 	/**
 	 * The type of navigation:
+	 * - `form`: The user submitted a `<form>`
 	 * - `leave`: The user is leaving the app by closing the tab or using the back/forward buttons to go to a different document
 	 * - `link`: Navigation was triggered by a link click
 	 * - `goto`: Navigation was triggered by a `goto(...)` call or a redirect
@@ -766,6 +768,7 @@ export interface AfterNavigate extends Navigation {
 	/**
 	 * The type of navigation:
 	 * - `enter`: The app has hydrated
+	 * - `form`: The user submitted a `<form>`
 	 * - `link`: Navigation was triggered by a link click
 	 * - `goto`: Navigation was triggered by a `goto(...)` call or a redirect
 	 * - `popstate`: Navigation was triggered by back/forward navigation