Hono•2mo ago

Nested islands in HonoX

I'm trying to nest islands in fashion similar to this:

// islands/toggleSection.tsx
export const ToggleSection = (children, isOpen, onToggle) => {
  // render accordion row if isOpen + button which fires onToggle
}  

// islands/toggleSectionGroup.tsx
export const ToggleSectionGroup = (children) => {
  const [focused, setFocused] = useState(-1);

  // cloneElement() all children to pass props isOpen and onToggle
}

// routes/index.tsx
...
return <ToggleSectionGroup>
  <ToggleSection />
  <ToggleSection />
  <ToggleSection />
</ToggleSectionGroup>
...

// islands/toggleSection.tsx
export const ToggleSection = (children, isOpen, onToggle) => {
  // render accordion row if isOpen + button which fires onToggle
}  

// islands/toggleSectionGroup.tsx
export const ToggleSectionGroup = (children) => {
  const [focused, setFocused] = useState(-1);

  // cloneElement() all children to pass props isOpen and onToggle
}

// routes/index.tsx
...
return <ToggleSectionGroup>
  <ToggleSection />
  <ToggleSection />
  <ToggleSection />
</ToggleSectionGroup>
...

However, it appears that the inner islands end up rendering on the server. How could I approach this?

1 Reply

chrisyalamov•2mo ago

Possibly related to https://github.com/honojs/honox/issues/47

GitHub

Islands component that accepts children · Issue #47 · honojs/honox

What is the feature you are proposing? Current islands component can not render children in the client side. If we were achieve this, it means we have "Donut Components" pattern. One of t...

Gaming

Programming

Nested islands in HonoX