Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update dependency hono to v4 #23

Merged
merged 1 commit into from
Mar 27, 2024
Merged

Update dependency hono to v4 #23

merged 1 commit into from
Mar 27, 2024

Conversation

renovate[bot]
Copy link
Contributor

@renovate renovate bot commented Mar 20, 2024 •
edited
Loading

Mend Renovate

This PR contains the following updates:

Package Change Age Adoption Passing Confidence
hono (source) ^3.12.12 -> ^4.0.0 age adoption passing confidence

Release Notes

honojs/hono (hono)

v4.1.3

Compare Source

What's Changed

Full Changelog: honojs/hono@v4.1.2...v4.1.3

v4.1.2

Compare Source

What's Changed

New Contributors

Full Changelog: honojs/hono@v4.1.1...v4.1.2

v4.1.1

Compare Source

What's Changed

New Contributors

Full Changelog: honojs/hono@v4.1.0...v4.1.1

v4.1.0

Compare Source

Hono v4.1.0 is now available! Let's take a look at the new features.

WebSocket Helper

Now Hono supports WebSockets! With WebSocket helper, you can easily handle WebSockets in your application. Currently, Cloudflare Workers / Pages, Deno, and Bun adapters are available.

const app = new Hono()

app.get(
  '/ws',
  upgradeWebSocket((c) => {
    return {
      onMessage(event, ws) {
        console.log(`Message from client: ${event.data}`)
        ws.send('Hello from server!')
      },
      onClose: () => {
        console.log('Connection closed')
      }
    }
  })
)

PRC mode is now also supported for WebSockets endpoints. The following is a demo.

WebSocket Helper

Thanks @​nakasyou!

Body Limit Middleware

Introducing Body Limit Middleware. This middleware can limit the file size of the request body.

const app = new Hono()

app.post(
  '/upload',
  bodyLimit({
    maxSize: 50 * 1024, // 50kb
    onError: (c) => {
      return c.text('overflow :(', 413)
    }
  }),
  async (c) => {
    const body = await c.req.parseBody()
    if (body['file'] instanceof File) {
      console.log(`Got file sized: ${body['file'].size}`)
    }
    return c.text('pass :)')
  }
)

Thanks @​EdamAme-x and @​usualoma!

ES2022

We made the target in the tsconfig.json as ES2022 instead of ES2020. So, the generated JavaScript files are now ES2022. That made the file size smaller! The following is the result of the minify and build of "Hello World" with Wrangler.

// ES2020
hono => Total Upload: 20.15 KiB / gzip: 7.42 KiB
hono/tiny => Total Upload: 12.74 KiB / gzip: 4.69 KiB
// ES2022
hono => Total Upload: 18.46 KiB / gzip: 7.09 KiB
hono/tiny => Total Upload: 11.12 KiB / gzip: 4.38 KiB

Performance has also been improved in some Node.js environments.

SS

Other features
All Updates
New Contributors

Full Changelog: honojs/hono@v4.0.10...v4.1.0

v4.0.10

Compare Source

What's Changed

Full Changelog: honojs/hono@v4.0.9...v4.0.10

v4.0.9

Compare Source

What's Changed

Full Changelog: honojs/hono@v4.0.8...v4.0.9

v4.0.8

Compare Source

What's Changed

New Contributors

Full Changelog: honojs/hono@v4.0.7...v4.0.8

v4.0.7

Compare Source

What's Changed

Full Changelog: honojs/hono@v4.0.6...v4.0.7

v4.0.6

Compare Source

What's Changed

Full Changelog: honojs/hono@v4.0.5...v4.0.6

v4.0.5

Compare Source

What's Changed

Full Changelog: honojs/hono@v4.0.4...v4.0.5

v4.0.4

Compare Source

What's Changed

Full Changelog: honojs/hono@v4.0.3...v4.0.4

v4.0.3

Compare Source

What's Changed

Full Changelog: honojs/hono@v4.0.2...v4.0.3

v4.0.2

Compare Source

This is a patch release. But, it includes a minor feature.

SSG helper now generates HTML files only if they are handling GET or ALL methods.

What's Changed

New Contributors

Full Changelog: honojs/hono@v4.0.1...v4.0.2

v4.0.1

Compare Source

What's Changed

Full Changelog: honojs/hono@v4.0.0...v4.0.1

v4.0.0

Compare Source

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

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: honojs/hono@v3.12.10...v4.0.0

Configuration

📅 Schedule: Branch creation - "before 4am on Monday" in timezone America/Chicago, Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

  • If you want to rebase/retry this PR, check this box

This PR has been generated by Mend Renovate. View repository job log here.

@renovate renovate bot requested a review from a team as a code owner March 20, 2024 03:07
@renovate renovate bot force-pushed the renovate/hono-4.x branch 6 times, most recently from db3bca1 to 77d14cc Compare March 21, 2024 23:55
@renovate renovate bot force-pushed the renovate/hono-4.x branch from 77d14cc to 0f5987d Compare March 27, 2024 22:11
@nicolewhite nicolewhite merged commit 33deba2 into main Mar 27, 2024
6 checks passed
@nicolewhite nicolewhite deleted the renovate/hono-4.x branch March 27, 2024 22:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@nicolewhite nicolewhite nicolewhite approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@nicolewhite