HonoをSPAとして使う

Honoとは

Honoは最近流行りの早く、軽いサーバーサイドライブラリですが、今回はクライアントサイドのjsx互換のライブラリとして使ってみます。

テンプレートあります。

こちらです。m(__)m
https://github.com/taisan11/hono-spa-temp

サーバーサイドライブラリじゃないの?

Honoにはhono/jsx/domというjsx互換の機能が実装されているのでそれだけ抜き出して使おうという試みです。

どうやるの?

ViteやWebpackなどのお好みのtsx対応もしくはjsx対応のバンドラーを使用します。
そしたら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",

こうすることで、react用のライブラリの一部を使えたり、tsxの型がついたりします。

viteでの追加設定

vite.config.ts

  // これをdefineConfigに追記
  resolve: {
    alias: {
      react: 'hono/jsx/dom',
      'react-dom': 'hono/jsx/dom'
    }
  }

webpackでの追加設定

webpack.config.js

  // 下記の内容を追記すればいいのかな
  resolve: {
    alias: {
      react: path.resolve(__dirname, './node_modules/hono/dist/jsx/dom'),
      react-dom: path.resolve(__dirname, './node_modules/hono/dist/jsx/dom'),
    },

jsx,react hooks互換

普通に下のようなコードが動きます。
※対応してないreact hooksなどもあります。

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")!);

終わりに

便利かつreactより軽量なので使ってほしい。