-
Notifications
You must be signed in to change notification settings - Fork 594
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Docs about serializability are misleading #2263
Comments
When you use an island within an island, the child island is really just a component. The only reason to include it in your islands folder is if you intend to use it as a top-level island/entry-point. |
I see. Thanks for explaining. I don't think it is relevant though. Let me elaborate and use an example. Suppose that you have a routes/test.tsx
components/my-button.tsx
However, if we extract out islands/toggle-section.tsx
and change
it will work. Backing up, in this example we have a need to listen for clicks on The docs say that you can't pass non-serializable values like functions as prop values. But as this example shows, that is not true. Furthermore, being able to do so seems like an important thing because if you can't, how would you eg. build that Maybe I am missing something or thinking about this incorrectly though. If so, please let me know. |
@adamzerner The example is flawed. It won't work because routes are only ever rendered on the server. The signal condition {isVisible.value &&
<div>text to hide/show</div>} will never be re-rendered. Extracting that part to its own island and passing the signal as a prop will make it reactive. |
After discussing on #2264, I finally understand what you guys are saying here. Inside of The docs say stuff about not being able to pass functions to islands, but here with This all makes sense now. Sorry for the confusion, and thank you for explaining. |
Interactive islands (docs) seems to indicate that you can't pass non-serializable values like functions and JSX as properties to islands. However, as Sharing state between islands demonstrates, you can do so. You just have to do so from an island as opposed to a non-island component.
For example, if you're in
NonIslandComponent
and you try to do<Island onClick={...} />
, it won't work. Similarly, if you try to do<Island slot={<SomeJsx />} />
, it won't work. But, if you're inside ofParentIsland
, doing<ChildIsland onClick={...} />
will work. And so will<ChildIsland slot={<SomeJsx />} />
.The text was updated successfully, but these errors were encountered: