support `children` as render prop
smeijer opened this issue · 1 comments
I am interested in helping provide a fix!
No
Which generators are impacted?
- All
- Angular
- HTML
- Preact
- Qwik
- React
- React-Native
- Solid
- Stencil
- Svelte
- Vue
- Web components
Reproduction case
Expected Behaviour
I should be able to use a render prop to let my component consumer control the appearance. The component from the fiddle would be used like
<MyComponent>
{({ status, …props }) => <button {…props}>{status}</button>}
</MyComponent>This works for react, solid, and vue, but not for svelte.
Actual Behaviour
It renders the properties wrong, and throws a build error:
<slot name="default({
status: status
})"/>
[vite-plugin-svelte] …/button.svelte:10:6 Error while preprocessing …/button.svelte - Expected }
file: …/button.svelte:10:6
8 |
9 | <slot name="default({
10 | status: _state.status,
^
Additional Information
No response
children as a render prop is something that doesn't easily exist in all frameworks. I don't believe there is anything in Svelte that allows you to pass a children render prop. The same goes for Qwik: you cannot provide a children render prop function.
Mitosis tries to include features that can easily be mapped to something that already exists in the majority of frameworks it focuses on, so I don't know if this is something we can easily add support for.