Repository navigation
Conversation
🚀 Deploying Preview to Cloudflare 🚀Preview URL: https://feat-hono-adapter-void-cloud.voidzero-docs.workers.dev (commit 4dda94d)This URL reflects your latest Preview deploymentPreview Deployments by commit
|
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Adds
@void/hono, a Pages adapter for Hono JSX, next to the React, Vue, Svelte and Solid adapters. Pages, layouts, and islands are written in TSX and rendered withhono/jsxon the server andhono/jsx/domin the browser.Of course, you can use React, and Hono JSX doesn't have all of React's features. But Hono JSX is small, and with Hono JSX, the app doesn't need a UI library dependency. I think Hono JSX is a good option for users. If they want to write an SSR-based website, they can use Hono JSX.
Where Hono JSX fits
Hono JSX suits apps that are mostly server-rendered: content sites, Markdown, island pages with a few interactive components, and apps whose server is already written with Hono. On the server this adapter is on par with the React adapter: SSR, loaders, actions, layouts and typed routes work the same way, and the public API has the same names.
It is not a replacement for the React adapter. The differences are in the browser:
Suspenseanduse().Deferredis{ loading, value, error }, as in the Vue, Svelte and Solid adapters.router.visit()has noresolveOn: 'data', so it does not integrate withstartTransitionoruseActionState.Apps with a lot of client-side state are better served by the React adapter. In return the client runtime is small: the whole client build of
playground/hono-pagesis 29 kB gzipped, against 31 kB for the Solid playground with the same pages.What is included
packages/hono: the adapter. It has the same public API as the other adapters:Form,Link,useForm,useIslandForm,useRouter,useNavigation,useParams,useShared,action,DeferredandInferProps.voidHono()takes the sameviewTransitionsandprefetchoptions.@void/md: Markdown pages render through Hono JSX when the Hono adapter is installed, including islands anduseFrontmatter().void init/create-void: Hono is a starter choice.playground/hono-pages: the Solid playground ported to Hono JSX. It runs the shared browser contract.@void/honosection in the API reference.Behavior worth knowing
hydrateRootinhono/jsx/domrenders the page again instead of adopting the server DOM. The resulting DOM matches the server HTML on the playground pages, but focus and values typed before hydration are lost. The adapter callshydrateRoot, so it picks up real hydration when Hono supports it.router.visit()rejects with that error and the current page stays on screen.Not included
void/client/hono,useSession).void gen ssr --hono.Testing
Link, the page client and the Markdown output.vp run build:all,vp run build:docs,vp run check,vp lintandvp fmt --checkpass.vp test run: all Hono tests pass. On my machineinit.test.ts,init-install.test.tsandnitro.test.tsfail, and they fail the same way without this change.VOID_PACKED_FRAMEWORK=honoand pnpm passes. I did not run it with npm.