Support props.children in island components

[jqhr]

Such as Dialog component. These components need hooks and props.children

[ergenekonyigit]

The document said it is not possible currently.

Passing props to islands is supported, but only if the props are JSON serializable. This means that you can only pass primitive types, plain objects, and arrays. It is currently not possible to pass complex objects like Date, custom classes, or functions. This means that it is not possible to pass children to an island, as children are VNodes, which are not serializable.

https://fresh.deno.dev/docs/concepts/islands

[lucacasonato]

Yes, it is not currently possible. I think we can support passing JSX children in the future, but this requires some changes inside of Fresh.

[jqhr]

Thinks. I have read code related to render island.The props of island is transpered by JSON.stringify， the pity is that there are no other great way.

[fritzblue]

Maybe something like superjson?

[gustavo-vasconcellos]

You can't use children, but you can use Render Props pattern: https://legacy.reactjs.org/docs/render-props.html

[xb1g]

You can't use children, but you can use Render Props pattern: https://legacy.reactjs.org/docs/render-props.html

in my case it broke the island. it flashed the rendered component then it's gone.

[lionel-rowe]

Worth mentioning that children is already supported but only in a very limited way — directly passing a string (or array of strings) as children works as expected:

// ok
<Island>some content</Island>
// fails silently
<Island><span>some content</span></Island>

So an appropriate typing for Island's props under the current limitations would be something like:

type IslandProps = {
	children?: string | string[]
}

// ok
<Island>some content</Island>
<Island />
<Island></Island>
<Island>[]</Island>
<Island>['a', 'b']</Island>

// type error
<Island><span /></Island>
<Island>[<span />]</Island>

[OldManFroggy]

right now, I just push values into a signal for the page being used, and have complex islands use signals and (rarely effects) to update the data and bindings of an Island where complex values are required.

Only real limitation is when nesting islands that have interactivity, here a island supported children prop, and error boundaries would be very useful indeed.

-Scott 

On May 9, 2023, SleepyShay @.***> wrote:

Worth mentioning that children is already supported but only in a very limited way — directly passing a string (or array of strings) as children works as expected:

// ok <Island>some content</Island> // fails silently <Island>some content</Island> So an appropriate typing for Island's props under the current limitations would be something like:

type IslandProps = { children?: string | string[] } // ok <Island>some content</Island> <Island /> <Island></Island> <Island>[]</Island> <Island>['a', 'b']</Island> // type error <Island></Island> <Island>[]</Island>

— Reply to this email directly, view it on GitHub https://github.com/denoland/fresh/issues/395#issuecomment-1539355279, or unsubscribe <https://github.com/notifications/unsubscribe- auth/ATXWUNX7CWWVOUW5QEHINU3XFIBQBANCNFSM52RTIO5Q>. You are receiving this because you are subscribed to this thread.Message ID: @.***>