feat(context): introduce `c.render()` #1397

yusukebe · 2023-09-03T01:21:28Z

This PR introduces 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()
})

Subsequently, 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',
  })
})

Although this feature is set to debut as experimental, its transition to general availability will be swift, contingent upon no significant issues arising.

ThatOneBro · 2023-09-04T01:31:58Z

Cool, I like this a lot! Seems like a good logical step for having different paths render in different ways. 👍

yusukebe · 2023-09-05T07:01:50Z

Thanks! Merging now!

yusukebe added 2 commits September 3, 2023 09:55

feat(context): introduce c.render()

28191bf

denoify

4fe1ff1

yusukebe changed the base branch from main to next September 5, 2023 07:00

yusukebe merged commit 40c350c into next Sep 5, 2023
10 checks passed

yusukebe deleted the feat/context-render branch September 5, 2023 07:01

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(context): introduce `c.render()` #1397

feat(context): introduce `c.render()` #1397

yusukebe commented Sep 3, 2023

ThatOneBro commented Sep 4, 2023

yusukebe commented Sep 5, 2023

feat(context): introduce c.render() #1397

feat(context): introduce c.render() #1397

Conversation

yusukebe commented Sep 3, 2023

ThatOneBro commented Sep 4, 2023

yusukebe commented Sep 5, 2023

feat(context): introduce `c.render()` #1397

feat(context): introduce `c.render()` #1397