Dynamic component loading from a pathname in shallow routing

[mquandalle]

Describe the problem

When implementing shallow routing with modals in SvelteKit, we currently need to statically import page components:

https://svelte.dev/docs/kit/shallow-routing#Loading-data-for-a-route

<script>
  import { preloadData } from '$app/navigation';
  import Modal from "$lib/Modal.svelte"
  import PhotoPage from './[id]/+page.svelte'; // Static import required, could also be `await import(...)`

  const modalData = await preloadData(href); // I can get the data from href, but not the related `+page.svelte` component
</script>

{#if modalOpened}
  <Modal>
    <PhotoPage data={modalData} />
  </Modal>
{/if}

While preloadData() allows us to dynamically fetch route data, there's no equivalent for loading the page component itself. This becomes problematic when handling multiple shallow routes, as each +page.svelte component must be imported statically at build time.

Describe the proposed solution

I'd like to dynamically resolve page components at runtime, similar to how we fetch data:

const modalData = await preloadData(href);
const ModalComponent = await preloadPage(href);

This would simplify shallow routing implementations, especially when dealing with multiple potential routes that could be opened in a modal.

Alternatives considered

The signature of preloadCode could be changed to return the +page.svelte component

Importance

nice to have

Additional Information

No response

[david-plugge]

You can use a dynamic import:

<script>
  async function load() {
    const data = await preloadData(href);
    const component = await import('./[id]/+page.svelte');
    return {
      data,
      component
    }
  }
</script>

But i do wonder how your page component looks like if you can reuse it within the modal. I typically use a specific component for such use cases that i use on the modal and the actual page.

[mquandalle]

Yes I know that I can use a dynamic import but I still need to reference the ./[id]/+page.svelte path in my source code. In my case I have many links to different routes that I open in a modal, so instead I would like the SvelteKit router to resolve these components from a href.