shallow routing

dialog-shallow-routing/src/app.d.ts

@@ -6,7 +6,10 @@ declare global {
 		// interface Locals {}
 		// interface PageData {}
 		// interface Platform {}
+		interface PageState {
+			dialogOpen?: string;
+		}
 	}
 }
 
-export {};
+export { };

dialog-shallow-routing/src/lib/Dialog/Content.svelte

@@ -1,12 +1,21 @@
 <script lang="ts">
-	import { melt } from '@melt-ui/svelte';
+	import { createSync, melt } from '@melt-ui/svelte';
 	import { dialogRegistry, type DialogName } from '.';
+	import { page } from '$app/stores';
 
 	export let name: DialogName;
 
 	const {
-		elements: { portalled, title, content, description, close, overlay }
+		elements: { portalled, title, content, description, close, overlay },
+		states: { open }
 	} = dialogRegistry.get(name);
+
+	const sync = createSync({ open });
+	$: sync.open($page.state.dialogOpen === name, ($open) => {
+		if ($page.state.dialogOpen !== name) {
+			dialogRegistry.shallow(name, $open);
+		}
+	});
 </script>
 
 <div use:melt={$portalled}>

dialog-shallow-routing/src/lib/Dialog/index.ts

@@ -1,6 +1,7 @@
 import { createDialog, type CreateDialogProps, type Dialog as DialogType } from '@melt-ui/svelte';
 import Trigger from './Trigger.svelte';
 import Content from './Content.svelte';
+import { pushState } from '$app/navigation';
 
 export const DIALOG_NAMES = ['settings', 'login', 'delete'] as const;
 
@@ -22,9 +23,20 @@ function createDialogRegistry() {
 		registry.set(name, dialog);
 	}
 
+	// Shallow routing
+	function shallow(name: DialogName, open: boolean) {
+		if (open) {
+
+			pushState('', {
+				dialogOpen: open ? name : 'none'
+			});
+		}
+	}
+
 	return {
 		get,
-		set
+		set,
+		shallow
 	};
 }