Skip to content

chore(deps): update dependency hono to ^3.6.3#87

Merged
renovate[bot] merged 1 commit intomasterfrom
renovate/hono-3.x
Sep 17, 2023
Merged

chore(deps): update dependency hono to ^3.6.3#87
renovate[bot] merged 1 commit intomasterfrom
renovate/hono-3.x

Conversation

@renovate
Copy link
Copy Markdown
Contributor

@renovate renovate Bot commented Sep 11, 2023 •
edited
Loading

Mend Renovate

This PR contains the following updates:

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

Release Notes

honojs/hono (hono)

v3.6.3

Compare Source

What's Changed

Full Changelog: honojs/hono@v3.6.2...v3.6.3

v3.6.2

Compare Source

What's Changed
New Contributors

Full Changelog: honojs/hono@v3.6.1...v3.6.2

v3.6.1

Compare Source

This release includes tiny features and bug fixes.

What's Changed

Full Changelog: honojs/hono@v3.6.0...v3.6.1

v3.6.0

Compare Source

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

Introduce c.render()

We introduce c.render() and c.setRenderer() functions.
These functions enhance Hono's response handling, allowing for more flexible and modular response structures, especially useful for defining common parts of responses, like HTML layouts.

You can set a layout using c.setRenderer() within a custom middleware, as shown below:

app.use('*', async (c, next) => {
  c.setRenderer((content) => {
    return c.html(
      <html>
        <body>
          <p>{content}</p>
        </body>
      </html>
    )
  })
  await next()
})

Then, you can utilize c.render() to create responses within this layout:

app.get('/', (c) => {
  return c.render('Hello!')
})

The output of which will be:

<html><body><p>Hello!</p></body></html>

Additionally, this feature offers the flexibility to customize arguments. To ensure type safety, types can be defined as:

declare module 'hono' {
  interface ContextRenderer {
    (content: string, head: { title: string }): Response
  }
}

Here's an example of how you can use this:

app.use('/pages/*', async (c, next) => {
  c.setRenderer((content, head) => {
    return c.html(
      <html>
        <head>
          <title>{head.title}</title>
        </head>
        <body>
          <header>{head.title}</header>
          <p>{content}</p>
        </body>
      </html>
    )
  })
  await next()
})

app.get('/pages/my-favorite', (c) => {
  return c.render(<p>Ramen and Sushi</p>, {
    title: 'My favorite',
  })
})

app.get('/pages/my-hobbies', (c) => {
  return c.render(<p>Watching baseball</p>, {
    title: 'My hobbies',
  })
})

Using c.render() with JSX and html middleware, you can create HTML pages more easily!

Introduce c.var

The next feature we're introducing is c.var.

Before this release, to access the actual value of a variable, you had to use c.get():

const client = c.get('client')

Now, with c.var, a more intuitive syntax is available:

const result = c.var.client.oneMethod()
Screenshot 2023-09-04 at 22 54 18

For instance, you can set an instance of the client for accessing an API with a middleware and then retrieve it using c.var.client:

const app = new Hono<{
  Variables: {
    client: Client
  }
}>()

app.use('*', async (c, next) => {
  c.set('client', new ApiClient())
  await next()
})

app.get('/', (c) => {
  const books = c.var.client.getBooks()
  //...
})

FC for JSX

The type FC is exported from hono/jsx. You can use it to specify types for your function components.

import type { FC } from 'hono/jsx'

const Layout: FC<{ title: string }> = (props) => {
  return (
    <html>
      <head>
        <title>{props.title}</title>
      </head>
      <body>{props.children}</body>
    </html>
  )
}

const Top = (
  <Layout title='Home page'>
    <h1>Hono</h1>
    <p>Hono is great</p>
  </Layout>
)

$url() in Hono Client

You can get a URL object for accessing the the endpoint by using $url().

const route = app.get('/api/foo/bar', (c) => c.jsonT({ foo: 'bar' }))

const client = hc<typeof route>('http://localhost:8787/')
const url = client.api.foo.bar.$url()
console.log(url.pathname) // `/api/foo/bar`

Thanks @​renzor-fist !

Factory helper

Now, Hono offers a middleware factory method to create a middleware handler.

import { middleware } from 'hono/factory'

const mw = (message: string) =>
  middleware(async (c, next) => {
    await next()
    c.header('X-Message', message)
  })

By defining your middleware with middleware, the appropriate types will be added.

Vite dev-server for Hono

Now, we introduce a new Vite Plugin to enhance developing your Hono application.

@hono/vite-dev-server is a Vite Plugin that provides a custom dev-server for fetch-based web applications like those using Hono.
You can develop your application with Vite. It's fast.

Features
  • Support any fetch-based applications.
  • Hono applications run on.
  • Fast by Vite.
  • HMR.
  • Supporting Cloudflare Bindings.
  • Also runs on Bun.
Demo
Screen.Recording.2023-09-07.at.15.05.25.mov
Usage
Installation

You can install vite and @hono/vite-dev-server via npm.

npm i -D vite @&#8203;hono/vite-dev-server

Or you can install them with Bun.

bun add vite @&#8203;hono/vite-dev-server
Settings

Add "type": "module" to your package.json. Then, create vite.config.ts and edit it.

import { defineConfig } from 'vite'
import devServer from '@&#8203;hono/vite-dev-server'

export default defineConfig({
  plugins: [
    devServer({
      entry: 'src/index.ts', // The file path of your application.
    }),
  ],
})
Development

Just run vite.

npm exec vite

Or

bunx --bun vite
See more details

Visit the GitHub project: https://github.com/honojs/vite-plugins/tree/main/packages/dev-server

Deprecate some properties in HonoRequest

These properties in the HonoRequest have been deprecated.

  • headers()
  • body()
  • bodyUsed()
  • integrity()
  • keepalive()
  • referrer()
  • signal()

For instance, if you want to use headers, please use c.req.raw.headers().

Replaced Jest with Vitest

This might not be a new feature, but it's a significant change.

We've switched the test framework used in Hono's core project from Jest to Vitest! It's fast!

Screenshot 2023-09-11 at 7 49 07

Thanks @​ThatOneBro for the great work!

All Updates

New Contributors

Full Changelog: honojs/hono@v3.5.8...v3.6.0

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Enabled.

♻ 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 AdiRishi as a code owner September 11, 2023 01:09
@renovate renovate Bot enabled auto-merge (squash) September 11, 2023 01:09
@renovate renovate Bot force-pushed the renovate/hono-3.x branch 3 times, most recently from 645d67c to 30f87ab Compare September 15, 2023 05:54
@renovate renovate Bot changed the title chore(deps): update dependency hono to ^3.6.0 chore(deps): update dependency hono to ^3.6.1 Sep 15, 2023
@renovate renovate Bot force-pushed the renovate/hono-3.x branch 3 times, most recently from ffe9354 to 0f43e5e Compare September 16, 2023 12:28
@renovate renovate Bot changed the title chore(deps): update dependency hono to ^3.6.1 chore(deps): update dependency hono to ^3.6.2 Sep 16, 2023
@renovate renovate Bot force-pushed the renovate/hono-3.x branch from 0f43e5e to 10a3e53 Compare September 16, 2023 12:41
@renovate renovate Bot changed the title chore(deps): update dependency hono to ^3.6.2 chore(deps): update dependency hono to ^3.6.3 Sep 16, 2023
@renovate renovate Bot force-pushed the renovate/hono-3.x branch from 10a3e53 to 1a77077 Compare September 16, 2023 15:43
@renovate renovate Bot merged commit 3be226b into master Sep 17, 2023
@renovate renovate Bot deleted the renovate/hono-3.x branch September 17, 2023 00:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@AdiRishi AdiRishi AdiRishi 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

@AdiRishi