How to implement shallow routing with Skeleton modals?

[rChaoz]

I have a few Skeleton modals I'm using and they work great. However, I would like to implement SvelteKit's shallow routing so that you can navigate back from a modal (especially if it's full screen) or similar using the browser's navigation. This is especially useful for mobile users, which tend to close dialogs with the back gesture, rather than an X button.

The way it works in SvelteKit is:

1. Push some state when you want to show the modal

pushState('', {
    showModal: true,
});

2. Display the modal using an if statement or similar

{#if $page.state.showModal}
    <Modal close={() => history.back()} />
{/if}

3. Close the modal using history.back(), as seen in the close function above

My question is: how can I achieve that? I like the modal backdrop and scrolling that Skeleton provides by default in all modals. I would like to have something like this in my root +layout.svelte:

<Modal show={$page.state.showModal}>
    {#if $page.state.whichModal == "123"}
        ...content...
    {/if}
</Modal>

This way, the animation/similar stuff is handled using the boolean prop and I handle which content should be displayed (similar to how drawers content is already handled in Skeleton).

How can I achieve this? What I'm thinking about right now, to not re-invent too much stuff, is:

1. To display a modal, do both pushState(...) and modalStore.trigger()
2. On mount, check page state and trigger modals as needed
3. On page back ($: onStateChange($page.state)), manually close modals

Is there a better way to do this?

[rChaoz]

While I'm still looking for a better answer, this is what I have so far. It works, a bit glitchy at times but it's fine for now.

app.d.ts

declare namespace App {
    // ...
    interface PageState {
        modal?: keyof import("$lib/modals").ModalRegistry
    }
}

modals.ts in lib folder

import type { ModalSettings } from "@skeletonlabs/skeleton"
import SomeModal from "$lib/SomeModal.svelte"

export const modalRegistry = {
    modalName: {
        type: "component",
        component: { ref: SomeModal },
    }
} satisfies Record<string, ModalSettings>

export type ModalRegistry = typeof modalRegistry

Root +layout.svelte

initializeStores()
const drawerStore = getDrawerStore()
const modalStore = getModalStore()

// This allows updating the modals via browser navigation
$: updateModals($page.state)
$: if (!$modalStore) onModalClose()

function updateModals(state: App.PageState) {
    modalStore.set(state.modal ? [modalRegistry[state.modal]] : [])
}

function onModalClose() {
    if ($page.state.modal != null) history.back()
}

To open a modal: pushState("", { modal: "modalName" })
To close a modal: history.back() or modalStore.close()

The limitation I have now is that I can't have multiple modals in queue, but I don't need that feature now so it's fine with me. But I think one could make AppState.modals a list instead and that should be all.

[endigo9740]

@rChaoz right now development on Skeleton v3 and Svelte 5 support are taking precedence, so we won't have official guidance around this for a bit, but some users reported success with the method shared here:

• use Skeleton Modals with Shallow routing #2328