Comments (4)
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.
from fresh.
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 MyButton
component and want to use it to toggle whether some text is visible. The following will not work.
routes/test.tsx
import { useSignal } from "@preact/signals";
import { MyButton } from "../islands/my-button.tsx";
export default () => {
const isVisible = useSignal(false);
return (
<main>
<h1>Demo</h1>
<section>
{isVisible.value &&
<div>text to hide/show</div>}
<MyButton
onClick={() => {
isVisible.value = !isVisible.value;
}}
>
toggle
</MyButton>
</section>
</main>
);
};
components/my-button.tsx
import { ComponentChild, JSX } from "preact";
export const MyButton = (
{ children, ...rest }:
& { children: ComponentChild }
& JSX.HTMLAttributes<HTMLButtonElement>,
) => {
return <button {...rest}>{children}</button>;
};
However, if we extract out <section>...</section>
into it's own island like so:
islands/toggle-section.tsx
import { MyButton } from "@/islands/my-button.tsx";
import { useSignal } from "@preact/signals";
export const ToggleSection = () => {
const isVisible = useSignal(false);
return (
<section>
{isVisible.value &&
<div>text to hide/show</div>}
<MyButton
onClick={() => {
isVisible.value = !isVisible.value;
}}
>
toggle
</MyButton>
</section>
);
};
and change routes/test.tsx
to:
import { ToggleSection } from "@/islands/toggle-section.tsx";
export default () => {
return (
<main>
<h1>Demo</h1>
<ToggleSection />
</main>
);
};
it will work.
Backing up, in this example we have a need to listen for clicks on MyButton
and do something afterwards. To do this, we need to pass a function to onClick
of MyButton
. From what I could tell, the way to do this is to have the <MyButton onClick={...}>
code inside of an island.
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 MyButton
component in such a way that lets users respond to click events?
Maybe I am missing something or thinking about this incorrectly though. If so, please let me know.
from fresh.
@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.
from fresh.
After discussing on #2264, I finally understand what you guys are saying here. Inside of ToggleSection
when we have <MyButton onClick={() => { ... }}>
, we're not actually passing a function into an island (as a property's value). <MyButton>
is not an island because <ToggleSection>
is what established the island boundary.
The docs say stuff about not being able to pass functions to islands, but here with <MyButton onClick={() => { ... }}>
we are not actually passing a function to an island. And furthermore, the docs do actually address this here.
This all makes sense now. Sorry for the confusion, and thank you for explaining.
from fresh.
Related Issues (20)
- Spliting context to a separate file doubles the result
- Splitting context consumer to another file doesn't work HOT 1
- `useContext()` hook returns nothing when join in one component with the context provider HOT 1
- More secure implementation for Islands Architecture HOT 3
- Docs about sharing state between islands are misleading HOT 4
- Error thrown when .env.example contains a variable not set in .env HOT 2
- Deploy to Deno Failed after Updating to 1.6.3
- Usage of deprecated Deno APIs HOT 3
- Trying to use a tailwind plugin, but seems to not be working HOT 2
- Error: The deployment failed: Relative import path "$fresh/server.ts" not prefixed with / or ./ or ../ HOT 1
- Link to Deno instead of Code Snippet
- Explain what SaaS means in the showcase section HOT 1
- [Github Actions] actions/checkout@v3 should be upgraded to v4 HOT 1
- Plugin API changes
- making @mui/material work ? HOT 3
- Bug: Tailwindcss not working in js/jsx files
- When changing the source directory, import maps needs to be in the source for the runtime to work HOT 2
- Plugin routes don't support RouteConfig
- Fresh Components Carouse lisland is not work HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fresh.