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)
- Is the way you collect statistics GDPR-compliant? HOT 3
- Hooks stop working when importing npm modules HOT 5
- Docs: code in snippet is wrong
- Conditional Island Children HOT 2
- Easy way to augment esbuild configuration HOT 4
- @tabler/icons-preact error on islands component and dev mode HOT 1
- [bug] deno compile binary does not work on other machines HOT 1
- Hook is already inside component, yet error `Hook can only be invoked from render methods` still occurs HOT 1
- Client Address Bar wont update after 303 redirect response. HOT 6
- JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists. || pragmaFrag cannot be set when runtime is automatic HOT 2
- [Bug] Preact's hydrate will clear uncontrolled property(e.g.`defaultValue) HOT 1
- [bug] partial on form submit HOT 1
- ReadableStream.from not supported if a fresh app is a subfolder HOT 6
- Tailwind plugin wanders into `scss` files then crashes on build HOT 1
- preact has a "We stand with Ukraine" banner, so I won't use it (or fresh or SaasKit)
- What do the <reference /> mean in main.ts? HOT 1
- issues with @headlessui/react HOT 1
- ENV variables in client HOT 5
- Clicking the recipe demo on Fresh's homepage changes the page title to "My Fresh app" HOT 1
- If Fresh /components/ folder doesn't return JS, should I even bother with memo()? HOT 4
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.