Client-side routing for <form method="GET"> (#7828)

* failing test for #7251

* separate find_anchor from get_link_options

* get things basically working

* allow opt-out

* oops

* docs

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

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

Co-authored-by: S. Elliott Johnson <[email protected]>

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

Co-authored-by: S. Elliott Johnson <[email protected]>

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

Co-authored-by: Geoff Rich <[email protected]>

* fix typescript things

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

Co-authored-by: Patrick <[email protected]>

* feat: Make types less gross looking (#7883)

* remove suggestion remnant

* Create soft-timers-thank.md

Co-authored-by: S. Elliott Johnson <[email protected]>
Co-authored-by: Geoff Rich <[email protected]>
Co-authored-by: Patrick <[email protected]>
Co-authored-by: Ignatius Bagus <[email protected]>

Author: 5 people

.changeset/soft-timers-thank.md

@@ -0,0 +1,5 @@
+---
+"@sveltejs/kit": patch
+---
+
+[breaking] Use 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 set the [`data-sveltekit-reload`](/docs/link-options#data-sveltekit-reload) and [`data-sveltekit-noscroll`](/docs/link-options#data-sveltekit-noscroll) attributes on the `<form>` 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,10 +1249,12 @@ 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);
 				if (external) continue;
 
+				const options = get_router_options(a);
+				if (options.reload) continue;
+
 				if (options.preload_code === PRELOAD_PRIORITIES.viewport) {
 					observer.observe(a);
 				}
@@ -1444,11 +1459,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 +1486,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 +1529,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 | null} */ (
+					event.submitter
+				);
+
+				const method = 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-expect-error `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

@@ -35,13 +35,18 @@ const valid_link_options = /** @type {const} */ ({
 	reload: ['', 'off']
 });
 
+/**
+ * @template {LinkOptionName} T
+ * @typedef {typeof valid_link_options[T][number]} ValidLinkOptions
+ */
+
 /**
  * @template {LinkOptionName} T
  * @param {Element} element
  * @param {T} name
  */
 function link_option(element, name) {
-	const value = /** @type {typeof valid_link_options[T][number] | null} */ (
+	const value = /** @type {ValidLinkOptions<T> | null} */ (
 		element.getAttribute(`data-sveltekit-${name}`)
 	);
 
@@ -52,7 +57,7 @@ function link_option(element, name) {
 
 /**
  * @template {LinkOptionName} T
- * @template {typeof valid_link_options[T][number] | null} U
+ * @template {ValidLinkOptions<T> | null} U
  * @param {Element} element
  * @param {T} name
  * @param {U} value
@@ -80,80 +85,88 @@ const levels = {
 
 /**
  * @param {Element} element
- * @param {string} base
+ * @returns {Element | null}
  */
-export function find_anchor(element, base) {
-	/** @type {HTMLAnchorElement | SVGAElement | undefined} */
-	let a;
-
-	/** @type {typeof valid_link_options['noscroll'][number] | null} */
-	let noscroll = null;
-
-	/** @type {typeof valid_link_options['preload-code'][number] | null} */
-	let preload_code = null;
+function parent_element(element) {
+	let parent = element.assignedSlot ?? element.parentNode;
 
-	/** @type {typeof valid_link_options['preload-data'][number] | null} */
-	let preload_data = null;
-
-	/** @type {typeof valid_link_options['reload'][number] | null} */
-	let reload = null;
+	// @ts-expect-error handle shadow roots
+	if (parent?.nodeType === 11) parent = parent.host;
 
-	while (element !== document.documentElement) {
-		if (!a && element.nodeName.toUpperCase() === 'A') {
-			// SVG <a> elements have a lowercase name
-			a = /** @type {HTMLAnchorElement | SVGAElement} */ (element);
-		}
+	return /** @type {Element} */ (parent);
+}
 
-		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');
+/**
+ * @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);
 		}
 
-		// @ts-expect-error handle shadow roots
-		element = element.assignedSlot ?? element.parentNode;
-
-		// @ts-expect-error handle shadow roots
-		if (element.nodeType === 11) element = element.host;
+		element = /** @type {Element} */ (parent_element(element));
 	}
+}
 
+/**
+ * @param {HTMLAnchorElement | SVGAElement} a
+ * @param {string} base
+ */
+export function get_link_info(a, base) {
 	/** @type {URL | undefined} */
 	let url;
 
 	try {
-		url = a && new URL(a instanceof SVGAElement ? a.href.baseVal : a.href, document.baseURI);
+		url = new URL(a instanceof SVGAElement ? a.href.baseVal : a.href, document.baseURI);
 	} catch {}
 
-	const options = {
-		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 = {
+		rel_external: (a.getAttribute('rel') || '').split(/\s+/).includes('external'),
+		download: a.hasAttribute('download'),
+		target: !!(a instanceof SVGAElement ? a.target.baseVal : a.target)
 	};
 
-	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;
+		!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 {ValidLinkOptions<'noscroll'> | null} */
+	let noscroll = null;
+
+	/** @type {ValidLinkOptions<'preload-code'> | null} */
+	let preload_code = null;
+
+	/** @type {ValidLinkOptions<'preload-data'> | null} */
+	let preload_data = null;
+
+	/** @type {ValidLinkOptions<'reload'> | null} */
+	let reload = null;
+
+	/** @type {Element} */
+	let el = element;
+
+	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');
+
+		el = /** @type {Element} */ (parent_element(el));
+	}
 
 	return {
-		a,
-		url,
-		options,
-		external,
-		has
+		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
 	};
 }
 

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', () => {