MyGit

v4.0.0

honojs/hono

版本发布时间: 2024-02-09 19:27:22

honojs/hono最新发布版本:v4.6.2(2024-09-17 09:16:04)

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.

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.

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

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: https://github.com/honojs/hono/compare/v3.12.10...v4.0.0

相关地址：原始地址 下载(tar) 下载(zip)

查看：2024-02-09发行的版本

微信小程序
MyGit:GitHub仓库更新&通知小工具