Islands component that accepts children about honox

[usualoma]

Hi @berlysia Thanks for the report!
cc @yusukebe

#35 will partially fix this problem, but it does not work correctly when children is a function component. I have an idea to deal with this, so please give me a few days.

[usualoma]

Support children with server-side Suspense (streaming) is coming soon.

• Hydrate without waiting for the server side Suspense to resolve, and user can click button.
• Children are updated according to the server-side Suspense resolve.

ServerClientComponents.mp4

const ChildContent3 = async () => {
  await new Promise((resolve) => setTimeout(resolve, 1000))
  throw new Error('Error in child content 3')
}

const ChildContent2 = async () => {
  await new Promise((resolve) => setTimeout(resolve, 1000))
  return (
    <>
      <p>Counter children 2</p>
      <ErrorBoundary fallback={<p>Something went wrong</p>}>
        <Suspense fallback="<p>Loading...</p>">
          <ChildContent3 />
        </Suspense>
      </ErrorBoundary>
    </>
  )
}

const ChildContent1 = async () => {
  await new Promise((resolve) => setTimeout(resolve, 1000))
  return (
    <>
      <p>Counter children 1</p>
      <Suspense fallback="<p>Loading...</p>">
        <ChildContent2 />
      </Suspense>
    </>
  )
}

const Children = async () => {
  return (
    <Suspense fallback="<p>Loading...</p>">
      <ChildContent1 />
    </Suspense>
  )
}

export default createRoute((c) => {
  const name = c.req.query('name') ?? 'no name'
  return c.render(
    <div class={className}>
      <h1>Hello, {name}!</h1>
      <Counter>
        <Children />
      </Counter>
    </div>,
    { title: name }
  )
})

[yusukebe]

Hi @berlysia

This issue is resolved by #35. I'll release the new version, including the change, later.

[yusukebe]

@berlysia !

I've released v0.1.2, which supports that it can pass children to islands/client components (including Suspense!) thanks to @usualoma . Could you try it?

[usualoma]

Oops, forgot to get the attribute values!
I'll fix that right away.

[berlysia]

Great. The fix works for my site locally. I'm waiting for merge and publish.