use Skeleton Modals with Shallow routing

[IslamZaoui]

Hello brothers
I want to use Skeleton modals with shallow routing to display a search page as a modal without navigation
can anyone help me, I don't know how I can use modals to display the page
I just need an example

[endigo9740]

Hey @IslamZaoui, Shallow Routing is a pretty exciting feature for SvelteKit v2. But given it just launched a few days ago it's not really at the forefront for us right now. We're still testing general support per these posts:

• Does Skeleton Support... #2329
• SvelteKit v2 Update! #2312

Unfortunately this isn't a feature that can just be tacked onto the existing modal system in Skeleton. Modals will need to be purpose built to support this from the ground up. Plus, it's a SvelteKit ONLY feature. While we only provide official troubleshooting and support for SvelteKit, we go out of our away to avoid breaking support for Svelte/Vite, Astro, and other means of using Svelte. This feature simply won't work for those options.

This means we likely won't ever be able to support this with the feature, because again - Skeleton supports Svelte (not just SvelteKit).

That said, all features in Skeleton are optional and opt-in. Given this, you always have the option of rolling your own alternative. Our friend Huntabyte actually provided a great walk through of the Shallow Routing and showcase of how to create a modal system using this feature though:

https://www.youtube.com/watch?v=B19DEGEclfk&t=371s

Hopefully that help get you up and running!

[RichardDENewcombe]

I got shallow routing working with the below heavily borrowed from Huntabyte's work in the video linked.

I was having issues with getting the data into meta using $page.state.data so I'm circumventing it by getting the data directly from the result once checking that it was loaded successfully.

Function for the a tag.

const onClick = async (e: MouseEvent & { currentTarget: HTMLAnchorElement }) => {
if (e.metaKey || e.ctrlKey) return
e.preventDefault()

const { href } = e.currentTarget;

const result = await preloadData(href);

if (result.type === 'loaded' && result.status === 200) {
  pushState(href, {
    data: result.data
  });
  const settings: ModalSettings = {
    type: 'component',
    component: { ref: ModalComponent },
    response: (r) => history.back(),
    meta: {
      data: result.data
    }
  };
  modalStore.trigger(settings);
  } else {
    goto(href)
  }
}

Modal component:

<script lang="ts>
  import type { SvelteComponent } from 'svelte';
  import { getModalStore } from '@skeletonlabs/skeleton';
  import Page from '../+page.svelte';

  const modalStore = getModalStore();
</script>

{#if $modalStore[0]}
  <div class="card p-4 w-modal-wide shadow-xl space-y-4">
    <Page data={$modalStore[0].meta} />
  </div>
{/if}

[matrixOperator]

Thanks @RichardDENewcombe! I was able to get shallow routing to work using your snippets.
Just want to add that in order to handle the correct behavior of the "back" button, I also have to add the following to the caller of the modal:

import { onMount } from "svelte";

// Handler for popstate events
function handleModalClose() {
    modalStore.close();
}

// Subscribe to popstate events when the component is mounted
onMount(() => {
    window.addEventListener("popstate", handleModalClose);

    // Clean up the event listener when the component is destroyed
    return () => {
        window.removeEventListener("popstate", handleModalClose);
    };
});

cheers!