Last 12 weeks · 8 commits
3 of 6 standards met
closes #240 closes #256 Summary Use matching root boundaries and deterministic root IDs when rendering islands on the server and hydrating them on the client. This fixes React BYOR cases where produced different values during SSR and hydration. Headless UI components from libraries such as Ark UI and Radix Primitives can now use the same generated IDs on the server and client to associate triggers with their content. This change also adds a renderer API that decouples island creation and hydration from the JSX implementation. Hono JSX remains the default, while applications can provide adapters for React, Preact, and Solid. Background Previously, React BYOR rendered the entire page as one React tree on the server but called separately for each `useId()identifierPrefixclient()honox/vite/clienthonox()honox()hydratecreateElementcreateChildrencreateClient()ServerRendererClientRenderercreateApp({ renderer })createClient({ renderer })renderercreateApp()createClient()hydratecreateElementcreateClient()renderercreateChildrenrenderer.createElementcreateApp()ServerRendererclient.jsxImportSourceislandComponents.reactApiImportSourcejsxImportSourcetsconfig.jsondeno.jsondeno.jsonchonox()island_roothonox-0data-hono-rootidentifierPrefixtemplate[data-hono-template]` elements and remove those templates from the DOM. Extracting a parent island's templates does not consume templates inside nested islands or siblings outside the island. Do not apply server-only HonoX plugins during client builds. Review question The renderer API makes HonoX pluggable, but BYOR still requires substantial configuration. Should HonoX provide adapters for common renderers such as React, Preact, and Solid? tsdown currently generates package exports for every entry point. This is a known issue and is intentionally outside the current scope. Should this PR also adjust the tsdown configuration?
`Script/dist/.vite/manifest.jsonsrcdata-hono-hydratednpm create hono@latestx-basicoutDirvite.config.tsvite build --mode client && vite build`, which has the same shape. I am happy to send a PR if this direction looks right.
What is the feature you are proposing? When placing island component files under , the following configuration works as expected: However, the following configuration does not work when placing them under : I found a workaround by specifying the option in as shown below, but ideally I would like to change the island directory and load files as island components without using this option — just by configuring the Vite plugin.
Summary Fix hydration for islands rendered inside another island through a component prop. An island is normally hydrated from a top-level `defaultcomponent-exportprops.childrendata-hono-templatecontentimagecomponent-exportdefaultdata-hono-template`. Add a generic test covering named nested island exports and named template props.
Repository: honojs/honox. Description: HonoX - Hono based meta framework Stars: 2931, Forks: 94. Primary language: TypeScript. Languages: TypeScript (99.9%), JavaScript (0%), MDX (0%). License: MIT. Homepage: https://hono.dev Latest release: v0.1.61 (1mo ago). Open PRs: 5, open issues: 57. Last activity: 1mo ago. Community health: 50%. Top contributors: yusukebe, usualoma, 3w36zj6, bruceharrison1984, meck93, muningis, ryuapp, berlysia, mika-f, mrtska and others.