feat: add support for client component in children

[usualoma]

fixes #74

What is this?

#56 allows the insertion of server components as children. In this PR, in addition to that, if a client component is included as a child, it will be hydrate as a client component.

What will this allow us to do?

First, useReducer needs to be added by the following PR.
honojs/hono#2197

After that, the pattern using useReducer() and "Context API" introduced in the following stackoverflow question can be used to share the state.

https://stackoverflow.com/questions/63687178/sharing-states-between-two-components-with-usereducer

Below is a project that implements this.

https://github.com/usualoma/honox-jsx-children

import { createRoute } from "honox/factory";
import Producer from "../islands/producer";
import Consumer from "../islands/consumer";

export default createRoute((c) => {
  const name = c.req.query("name") ?? "no name";
  return c.render(
    <div>
      <h1>Hello, {name}!</h1>
      <h2>Producer</h2>
      <Producer/>
      <h2>Consumer</h2>
      <Consumer/>
    </div>,
    { title: name }
  );
});

producer-consumer.mp4

[yusukebe]

Hi @usualoma

This looks good. It works with the Client component inside the Client component.

With this and useReducer we may be able to share the state as you say, but for now I would like to merge this PR. And how about leaving #74 open? (But if we use React, can we do that already?)

[usualoma]

@yusukebe

Thanks for the review.

Even if an app don't use useReducer, I think this PR alone is worth it, so we can just merge this PR.

And you are right, with the react-renderer, once this PR is merged, we can use React.useReducer to achieve the demo behavior.

#74, yes, let's leave it as is.

[yusukebe]

@usualoma

Okay! I'll merge this now. Thanks!