honojs/hono v3.10.0 on GitHub

Hono v3.10.0 is now available! Let's explore the new features.

Support for Async Components in JSX

Hono's JSX now supports Async Components. You can use async/await in your components.

const fetchData = async () => {
  const res = await fetch('https://jsonplaceholder.typicode.com/todos/1')
  return res.json<{ title: string }>()
}

const Component = async () => {
  const data = await fetchData()
  return <div>{data.title}</div>
}

app.get('/', (c) => {
  return c.html(
    <html>
      <body>
        <h1>Hono v3.10.0</h1>
        <Component />
      </body>
    </html>
  )
})

Thanks, @usualoma!

Introduction of `Suspense` and `renderToReadableStream()`

With the Async Component, as shown above, it will await until fetch is completed. But now, if you want to render HTML before that, you can use Suspense.

When you use Suspense with renderToReadableStream(), it initially renders the content in fallback. After the Promise in Suspense is resolved, the real content is rendered.

import { renderToReadableStream, Suspense } from 'hono/jsx/streaming'

// ...

app.get('/', (c) => {
  const stream = renderToReadableStream(
    <html>
      <body>
        <h1>Hono v3.10.0</h1>
        <Suspense fallback={<div>loading...</div>}>
          <Component />
        </Suspense>
      </body>
    </html>
  )
  return c.body(stream, {
    headers: {
      'Content-Type': 'text/html; charset=UTF-8',
      'Transfer-Encoding': 'chunked'
    }
  })
})

If you make Component sleep for 2 seconds, the result will be as follows:

Area.mp4

Thanks, @usualoma!

JSX Renderer Middleware Now Supports `stream`

The JSX Renderer Middleware now supports stream, allowing you to use Suspense with it. You can return streaming responses without renderToReadableStream() and without writing header values such as Transfer-Encoding: chunked.

import { jsxRenderer } from 'hono/jsx-renderer'

// ...

app.get(
  '*',
  jsxRenderer(
    ({ children }) => {
      return (
        <html>
          <body>
            <h1>Hono v3.10.0</h1>
            {children}
          </body>
        </html>
      )
    },
    {
      stream: true
    }
  )
)

app.get('/', (c) => {
  return c.render(
    <Suspense fallback={<div>loading...</div>}>
      <Component />
    </Suspense>
  )
})

Thanks, @usualoma!

AWS Lambda Adapter Now Supports Streaming Response

The streamHandle is now available in the AWS Lambda adapter. With this, AWS Lambda can handle streaming responses.

import { Hono } from 'hono'
import { streamHandle } from 'hono/aws-lambda'

const app = new Hono()

app.get('/stream', async (c) => {
  return c.streamText(async (stream) => {
    for (let i = 0; i < 3; i++) {
      await stream.writeln(`${i}`)
      await stream.sleep(1)
    }
  })
})

const handler = streamHandle(app)

Thanks, @watany-dev!

Support `@jsx precompile` for Deno

Now, Hono's JSX supports the precompile feature for Deno. To enable it, write deno.json as follows.

{
  "compilerOptions": {
    "jsx": "precompile",
    "jsxImportSource": "hono/jsx"
  },
  "imports": {
    "hono/jsx/jsx-runtime": "https://deno.land/x/hono@v3.10.0/jsx/jsx-runtime.ts"
  }
}

Thanks, @usualoma!

Ecosystem

The ecosystem is evolving. Today, we introduce one framework using Hono.

Ree.js https://ree.js.org/ - Ree.js is a library that makes web development faster and easier by providing features such as URL Imports, JSX support, and server-side rendering.

All Updates

feat(adaptor): Support AWS Function URL Streaming by @watany-dev in #1625
feat: Introduce streaming API with Suspense and use. by @usualoma in #1630
feat(helper/factory): remove @experimental from createMiddleware() by @yusukebe in #1653
fix(jsx/streaming): Fixed a bug that caused async components to be evaluated multiple times inside Suspense. by @usualoma in #1656
fix(helper): Stream SSE Helper Non-Closure by @watany-dev in #1650
feat(jsx): Define jsxTemplate/jsxAttr/jsxEscape for "@jsx precompile" of Deno 1.38 by @usualoma in #1651
feat(jsx/streaming): Support nested Suspense. by @usualoma in #1660
perf(jsx/streaming): In multiple Suspense, go ahead in the order of resolved. by @usualoma in #1663
feat(jsx-renderer): Support "stream" option in jsxRenderer. by @usualoma in #1662
docs: rename Fastly Compute@Edge to Compute by @yusukebe in #1664
fix(jsx/streaming): Fixed a problem when multiple children are added directly under Suspense. by @usualoma in #1665
fix(types): infer env types with chaining handlers by @yusukebe in #1668
feat(hono): remove experimental flag from app.mount() by @yusukebe in #1669
fix(Adaptor): Lambda Response Streaming With Content Type by @watany-dev in #1673
fix(types): allow arbitrary values as environment values by @screendriver in #1680
fix(context): implement ContextVariableMap for c.var by @yusukebe in #1682
feat(app): use console.error() for default errorHandler by @yusukebe in #1687
Next by @yusukebe in #1690

New Contributors

@screendriver made their first contribution in #1680

Full Changelog: v3.9.2...v3.10.0

honojs/hono v3.10.0 on GitHub

Support for Async Components in JSX

Introduction of Suspense and renderToReadableStream()

JSX Renderer Middleware Now Supports stream

AWS Lambda Adapter Now Supports Streaming Response

Support @jsx precompile for Deno

Ecosystem

All Updates

New Contributors

honojs/hono v3.10.0
on GitHub

Introduction of `Suspense` and `renderToReadableStream()`

JSX Renderer Middleware Now Supports `stream`

Support `@jsx precompile` for Deno