Sveltekit shallow routing with form

<script>
	import { preloadData, pushState, goto, replaceState } from '$app/navigation';
	import { page } from '$app/stores';
	import Form from './form/+page.svelte';
</script>

<a
	href="/form"
	on:click={async (e) => {
		// bail if opening a new tab, or we're on too small a screen
		if (e.metaKey || innerWidth < 640) return;

		// prevent navigation
		e.preventDefault();

		const { href } = e.currentTarget;

		// run `load` functions (or rather, get the result of the `load` functions
		// that are already running because of `data-sveltekit-preload-data`)
		const result = await preloadData(href);

		if (result.type === 'loaded' && result.status === 200) {
			pushState(href, { selected: result.data });
		} else {
			// something bad happened! try navigating
			goto(href);
		}
	}}
>
	Go to form
</a>

{#if $page.state.selected}
	<button on:click={() => history.back()}>Close</button>
	<Form data={$page.state.selected} shallow={true} />
{/if}

<script>
	import { enhance } from '$app/forms';
	import { goto, preloadData, replaceState } from '$app/navigation';
	export let data;
	export let shallow = false;
</script>

<p>Hello {data.name}</p>

<form
	method="POST"
	action="/form"
	use:enhance={() => {
		return async ({ update }) => {
			await update();
			if (shallow) {
				const result = await preloadData('/form');
				if (result.type === 'loaded' && result.status === 200) {
					replaceState('/form', { selected: result.data });
				} else {
					goto('/form');
				}
			}
		};
	}}
>
	<input type="text" name="name" />
	<button>Submit</button>
</form>