Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

JSX middleware

See original GitHub issue

We want to have JSX middleware. This was discussed in this issue #289 .

I want to make the following:

Just support for Sever-Side Rendering. Don’t support the browser side. Render it as strings, not virtual DOM
Make it as middleware
Zero-dependencies
Use c.render method
Support props.children

Code example:

import { Hono } from 'hono'
import { jsx } from 'hono/jsx'
import { Header, Footer } from './component'

const app = new Hono()

const Layout = (props) => {
  <html>
    <body>{props.children}</body>
  </html>
}

type Props = {
  message: string
}

const Top = <Props>(props) => {
  return (
    <Layout>
      <Header />
        <h1>{ props.message }</h1>
      <Footer />
    </Layout>
  )
}

app.get('/', (c) => {
  const message = 'Hello Hono!'
  return c.render(<Top message={message} />)
})

app.fire()

Issue Analytics

State:
Created a year ago
Comments:8 (6 by maintainers)

Top GitHub Comments

1reaction

usualomacommented, Jun 9, 2022

So, I will keep implementing the JSX middleware in the branch, we should add more tests and add other features ( have to make dangerouslySetInnerHTML??). Please don’t stop helping.

👌

JSX SSR and Hotwire

I too think it’s great to be able to use JSX SSR and Hotwire to generate HTML strings and still improve the UX without the development costs!

1reaction

yusukebecommented, Jun 5, 2022

I know the Flareact. It seems to be a good framework like Next.js for Cloudflare Workers. And now, there is Remix that works in Cloudflare Workers. If I build a large website, I’ll use one of these frameworks.

But, if I build a few small HTML pages, it’s cumbersome to use these React-based frameworks. In the case of Hono, I want a tiny function to make HTML. It should not be React and having Virtual Dom. But, JSX is easy to write. So, I want a middleware that outputs HTML strings with JSX syntax.

And… isn’t it pretty cool that we can use JSX in Hono:)

Top Results From Across the Web

Middleware - Redux

Redux middleware solves different problems than Express or Koa middleware, but in a conceptually similar way. It provides a third-party ...

Redux Middleware – What it is and How to Build it from Scratch

In this article, we will explore what middleware is in Redux, why it's used, and how you can create your own middleware from...

An Overview of Redux Middleware for React Applications

An Overview of Redux Middleware for React Applications · 1. An event occurs · 2. An action is dispatched · 3. Reducer creates...

Writing Custom Middleware - LearnHowToProgram.com

In this lesson, we'll add Redux to our application and write a custom middleware function. Installing Redux. First, we'll add Redux and React...

JSX Middleware - Hono

JSX Middleware enable rendering HTML with JSX syntax. It's just for Sever-Side-Rendering. No virtual DOM. This middleware is only for writing with ...