Skip to content

Pass params to +layout.svelte and +page.svelte components #13904

@Rich-Harris

Description

@Rich-Harris

Describe the problem

We pass data to layout and page components, reflecting the return value of the corresponding load function(s). For pages, we also pass form.

These values are typed using the virtual ./$types module, which for additional convenience is automatically injected by language-tools.

In future, data loading will mostly happen inside the components themselves, based on the current parameters:

const post = $derived(await getPost(page.params.slug));

But page.params gives us limited type safety, even with #13864.

Describe the proposed solution

It would be helpful if params were passed into route components, and were automatically typed:

<script lang="ts">
  import { getPost } from './post.remote.ts';

  let { params } = $props();

  const post = $derived(await getPost(params.slug));
</script>

While this will mostly become useful when remote functions land, I don't see any reason not to do it separately, so that it's ready for use when they do.

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions