Skip to content

v3.12.0

Choose a tag to compare

View all tags
@yusukebe yusukebe released this 04 Jan 15:37
· 1280 commits to main since this release
v3.12.0
3f8d1ea

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

CSRF Protection Middleware

This release introduces CSRF Protection Middleware. It is easy to use and can prevent CSRF attacks by simply writing like the following:

import { csrf } from 'hono/csrf'

// ...

app.use('*', csrf())

CSRF Protection Middleware compares the Origin header value with the request URL. This is the same method used by SvelteKit and is valid in many situations except when using older browsers.

Thanks to @usualoma! And, the original idea for CSRF Protection was suggested by @htunnicliff. Thanks!

css Helper

We created a built-in CSS in JS(X). It's "hono/css".

The css helper can be used with JSX. You can write the CSS in a css template literal tag and specify the returned value as the class value and it will be applied to that element.

app.get('/', (c) => {
  const headerClass = css`
    background-color: orange;
    color: white;
    padding: 1rem;
  `
  return c.html(
    <html>
      <head>
        <Style />
      </head>
      <body>
        <h1 class={headerClass}>Hello!</h1>
      </body>
    </html>
  )
})

If you use VS Code, you can use vscode-styled-components for Syntax highlighting and IntelliSense for css tagged literals.

SS

By combining keyframes and JSX rendering, you can create a like button without JavaScript!

Like button

Also, you can use a CSS-generating design tool such as Figma to create components even if you are not a CSS guru.

You can use other CSS in JS libraries in Hono, such as Panda CSS. However, hono/css can be used by simply importing the hono package, and Async components and Suspense are also supported.

Thanks to @usualoma!

stream.onAbort()

c.stream() is now deprecated and you should use stream() in Streaming Helper. And, stream.abort() has been added.

app.get('/stream', (c) => {
  return stream(c, async (stream) => {
    stream.onAbort(() => {
      console.log('Aborted!')
    })
    // ...
  })
})

Thanks to @sor4chi!

onNotFound option for serveStatic

Cloudflare Workers, Deno, and Bun serveStatic now have an onNotFound option. You can write a handle when a file is not found.

app.get(
  '/static/*',
  serveStatic({
    onNotFound: (path, c) => {
      console.log(`${path} is not found, you access ${c.req.path}`)
    }
  })
)

Thanks to @Th1nkK1D!

colorize option for showRoutes()

The colorize option has been added to the showRoutes function in hono/dev. If you set this value to false, the output will not be colored, which can be used when you want to log output, etc.

import { showRoutes } from 'hono/dev'

showRoutes(app, {
  colorize: false
})

Other new features

  • feat(dev): add getRouterName()
  • feat(helper): export SSEStreamingApi and SSEMessage. Thanks to @thanks to @watany-dev!
  • feat(client): add param option to $url()

All Updates

New Contributors

Full Changelog: v3.11.12...v3.12.0

Contributors

yusukebe, usualoma, and 5 other contributors
Assets 2
Loading