Make arguments passed to `{@render children(arg1, arg2, ...)}` be usable in routes
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 20.8k
- Forks
- 2.3k
- Avg merge
- 1d 16h
- Merged PRs (30d)
- 156
Description
Describe the problem
+layout.svelte:
<script lang="ts">
import type { Snippet } from "svelte";
const { children }: { children: Snippet<[number]> } = $props();
let someVal = $state<number | null>(5)
</script>
{#if someVal !== null}
{@render children(someVal)}
{/if}
child +page.svelte or +layout.svelte - How do I get that passed property???
Describe the proposed solution
Some, any way to get the properties passed to children, preferably typed.
Sorry if this is already possible and I missed it!
Alternatives considered
I have considered +layout.ts, but that doesn't help me with narrowing, because I have to do the narrowing in the template HTML.
I have considered contexts, same problem, even worse as it's untyped.
Currently I am mixing runes and stores to achieve this in a universal reactivity pattern. I need stores, because I need to react to two value changes and then make a fetch call, the result of which will set my derived value. (I wouldn't need stores if I could just pass it as described above, because then I could use $effect.) This can be of multiple types, I narrow it in +layout.svelte. I want to pass this narrowed value to children, but I can't, instead I have to do the same work in each child as in the parent.
Importance
would make my life easier
Additional Information
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reviewing the +layout.svelte example and the child +page.svelte or +layout.svelte files described in the issue, then compare the mentioned +layout.ts, context, rune, and store alternatives. Done means a child route can access values passed to {@render children(arg1, arg2, ...)}, with a typed approach that supports the narrowing described.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100