Skip to content

v4.0.0
Compare
Choose a tag to compare
@yusukebe yusukebe released this 09 Feb 11:27
· 167 commits to main since this release
v4.0.0
ca6f365

Going to full-stack.

Hono v4.0.0 is out! This major update includes some breaking changes and the addition of three major features.

  1. Static Site Generation
  2. Client Components
  3. File-based Routing

So Hono is going to full-stack. Let's take a look at the three features.

1. Static Site Generation

We introduce SSG Helper. With it you can generate static pages of your Hono applications.

To use this, create a separate file build.ts from the application and call the toSSG() function in it.

import fs from 'node:fs/promises'
import { toSSG } from 'hono/ssg'
import app from './src/index'

toSSG(app, fs)

There are adapters for Bun and Deno, so you can write shorter for Bun, for example.

import { toSSG } from 'hono/bun'
import app from './src/index'

toSSG(app)

And, just run it.

bun ./build.ts

Then HTML is generated.

$ ls static
about.html  index.html

You can easily deploy this page to Cloudflare Pages, etc.

$ wrangler pages deploy static

With Vite

We have created a plugin @hono/vite-ssg for Vite. By using this, you will be able to develop and build a static sites with just the vite command.

The configuration is the following:

import build from '@hono/vite-ssg'
import devServer from '@hono/vite-dev-server'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    build(),
    devServer({
      entry: 'src/index.tsx'
    })
  ]
})

If you want to develope, just run the command:

vite

If you want to build, just run the command:

vite build

In combination with the deployment mentioned above to Cloudflare Pages, you can develop, SSG build, and deploy non-stop. And each of them is extremely fast (the video is 2x faster).

Screen cast

2. Client Components

hono/jsx was originally designed to run server-side as an alternative to template engines such as Mustache. Server-side JSX is an interesting experiment, creating a new stack to combine with HTMX and Alpine.js. But that's not all.

Now, hono/jsx runs on the client as well. We call it hono/jsx/dom or Client Components.

The exact same code as React runs with Hono's JSX.

import { useState } from 'hono/jsx'
import { render } from 'hono/jsx/dom'

function Counter() {
  const [count, setCount] = useState(0)
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  )
}

function App() {
  return (
    <html>
      <body>
        <Counter />
      </body>
    </html>
  )
}

const root = document.getElementById('root')
render(<App />, root)

The Hooks listed below are also implemented and you can create Client Components just like in React.

  • useContext
  • useEffect
  • useState
  • useCallback
  • use
  • startTransition
  • useDeferredValue
  • useMemo
  • useLayoutEffect
  • Memo
  • isValidElement

startViewTransition family

In addition, the original APIs, startViewTransition family make the View Transition API easy to use.

import { useState, startViewTransition } from 'hono/jsx'
import { Style, css, keyframes } from 'hono/css'

const fadeIn = keyframes`
  from { opacity: 0; }
  to { opacity: 1; }
`

const App = () => {
  const [showTitleImage, setShowTitleImage] = useState(false)

  return (
    <>
      <button onClick={() => startViewTransition(() => setShowTitleImage((state) => !state))}>Click!</button>
      <div>
        {!showTitleImage ? (
          <img src="https://hono.dev/images/logo.png" />
        ) : (
          <div
            class={css`
              animation: ${fadeIn} 1s;
              background: url('https://hono.dev/images/logo-large.png');
              background-size: contain;
              background-repeat: no-repeat;
              background-position: center;
              width: 500px;
              height: 200px;
            `}
          />
        )}
      </div>
    </>
  )
}

You can easily create the animation.

SC

Ultra-small

The hono/jsx/dom is fast and ultra-small. It has a smaller JSX runtime dedicated to the DOM in addition to the common server and client ones. Just specify hono/jsx/dom instead of hono/jsx in tsconfig.json.

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

The above counter example is 2.8KB with Brotli compression.

SS

In comparison, React is 47.3 KB for the same thing.

SS

3. File-based Routing

Last is File-based Routing. This is not included in the hono package, but is provided in a separate package.

It is named HonoX.

HonoX

HonoX has the following features.

  • File-based routing - You can create a large application like Next.js.
  • Fast SSR - Rendering is ultra-fast thanks to Hono.
  • BYOR - You can bring your own renderer, not only one using hono/jsx.
  • Islands hydration - If you want interactions, create an island. JavaScript is hydrated only for it.
  • Middleware - It works as Hono, so you can use a lot of Hono's middleware.

You can try it now. One of create-hono's starter templates named "x-base" uses HonoX.

For detailed usage, please see the following HonoX repository.

https://github.com/honojs/honox

The core is still tiny

The addition of this feature has no impact on the core. "Hello World" in hono/tiny is still small, only 12KB minified.

Other new features

  • feat(base): Set Default Path to '*' for app.use() - #1753
  • feat(hono-base): app.on supports multiple paths - #1923
  • feat(css): Introduce pseudo global selector and class name based extend syntax - #1928
  • feat(jsx-renderer): Nested Layouts via Renderer - #1945
  • feat!: validator throws error rathar than return c.json() - #2021
  • feat: introduce Accepts Helper - #2001
  • feat(serve-static): mimes option for serve-static - #2094
  • feat!(validator): supports transformation - #2130

Breaking Changes

There are several breaking changes. Please see the Migration Guide below.

https://github.com/honojs/hono/blob/main/docs/MIGRATION.md

Thanks

Thanks to all contributors. Great job on all the hard work!

All Updates

New Contributors

Full Changelog: v3.12.10...v4.0.0

Contributors

yusukebe, javascripter, and 9 other contributors
Assets 2