Using Hono as an SPA

What is Hono

Hono is a popular, fast, and lightweight server-side library, but this time, I will try using it as a client-side JSX-compatible library.

There is a template.

Here it is. m(__)m
https://github.com/taisan11/hono-spa-temp

Isn't it a server-side library?

Hono has a JSX-compatible feature called hono/jsx/dom implemented, so this is an attempt to use just that part by extracting it.

How to do it?

Use your preferred TSX- or JSX-compatible bundler, such as Vite or Webpack. Then, add the following content to your tsconfig.json.

tsconfig.json

    /* paths */
    "paths": {
      "react": ["./node_modules/hono/dist/jsx/dom"],
      "react-dom": ["./node_modules/hono/dist/jsx/dom"]
    },

    /* jsx */
    "jsx": "react-jsx",
    "jsxImportSource": "hono/jsx",

By doing this, you can use parts of libraries for React and get TSX types.

Additional configuration for Vite

vite.config.ts

  // Add this to defineConfig
  resolve: {
    alias: {
      react: 'hono/jsx/dom',
      'react-dom': 'hono/jsx/dom'
    }
  }

Additional configuration for Webpack

webpack.config.js

  // I suppose adding the following content should work
  resolve: {
    alias: {
      react: path.resolve(__dirname, './node_modules/hono/dist/jsx/dom'),
      react-dom: path.resolve(__dirname, './node_modules/hono/dist/jsx/dom'),
    },

JSX and React Hooks Compatibility

Code like the following works normally.
*Note: Some React hooks are not supported.

import { useState } from "hono/jsx"
import { render } from "hono/jsx/dom";

function App() {
    const [count, setCount] = useState(0)
    return (
        <>
        <h1>Hono SPA template</h1>
        <p>Count: {count}</p>
        <button onClick={() => setCount(count + 1)}>Increment</button>
        </>
    )
}

render(<App/>,document.getElementById("app")!);

Conclusion

It's convenient and lighter than React, so I hope you give it a try.