kit icon indicating copy to clipboard operation
kit copied to clipboard

Make arguments passed to `{@render children(arg1, arg2, ...)}` be usable in routes

Open flevi29 opened this issue 1 year ago • 0 comments

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

flevi29 avatar Oct 12 '24 08:10 flevi29