support `children` as render prop

[smeijer]

I am interested in helping provide a fix!

No

Which generators are impacted?

• [ ] All
• [ ] Angular
• [ ] HTML
• [ ] Preact
• [ ] Qwik
• [ ] React
• [ ] React-Native
• [ ] Solid
• [ ] Stencil
• [X] Svelte
• [x] Vue
• [ ] Web components

Reproduction case

https://mitosis.builder.io/?outputTab=M4NwpgNgLmQ%3D&code=JYWwDg9gTgLgBAbzgVwM4FMDKNrrgXzgDMoIQ4AiAAQCNlgAbAE3SgDpgIB6EYHVYKgoBuAFCiYATzB4ACqTCo4AXkSi4cAMYALRkyjoAdgH4AXHAAUYBanMJ1GuKhgBDGGnMByBhBdNghgDmnnAAPnCeqMiamuioqJ5iGvgAlCoAfHAAogzoIEYwYvji6AAekLBwLEQuyAzwRMiGmjCchnAAspIAwmSQhgVWNmn2GpoQhs5OrjB4qmhYOAYWo47Obh4RPn4BwQA0DqliDlxcTmR46ERE6C1K44YwpAwMu3AABuvuqO9wLoZMOAQGDaVjTNx4awQRTiDQGdxQdoWBwaAA86RRjgQUMUbB0egMhhW4O%2B5i%2B6DYXzQBBSxUccFRXAxGhSRSAA%3D

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

[samijaber]

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.