feat(middleware): implement middleware for injecting HTML head elements #4125
Conversation
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #4125 +/- ##
==========================================
- Coverage 91.34% 91.07% -0.28%
==========================================
Files 168 169 +1
Lines 10700 10773 +73
Branches 3148 3085 -63
==========================================
+ Hits 9774 9811 +37
- Misses 925 961 +36
Partials 1 1 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
Hi @nakasyou ! Thank you for the PR. I have some thoughts about injecting HTML head elements. I'll comment later. |
Co-authored-by: EdamAmex <121654029+EdamAme-x@users.noreply.github.com>
Co-authored-by: EdamAmex <121654029+EdamAme-x@users.noreply.github.com>
|
Hey @nakasyou How about using the feature of React 19 that hoists import { createGenerator } from '@unocss/core'
import presetUno from '@unocss/preset-uno'
import { Hono } from 'hono'
import { jsxRenderer } from 'hono/jsx-renderer'
const app = new Hono()
app.use(
jsxRenderer(async ({ children }) => {
const HTML = (
<html>
<head />
<body>
<div>{children}</div>
</body>
</html>
)
const uno = await createGenerator({
presets: [presetUno()],
})
const { css } = await uno.generate(HTML.toString())
return (
<>
{HTML}
<style>{css}</style>
</>
)
})
)
app.get('/', async (c) => {
return c.render(<div className='text-2xl'>Hello World</div>)
})
export default app
I don't know your specific use cases, but I think you can resolve the issue by injecting props into |
|
Hi @yusukebe, sorry for late reply.
Think of creating a middleware that injects props into head, please. import { unoCSS } from 'my-unocss-middleware-for-hono' // internals using other jsxRenderer
app.use(unoCSS())
app.use(
jsxRenderer(async ({ children }) => {
return <html>
<head />
<body>
<header>Menu</header>
<div>{children}</div>
</body>
</html>
)
})
)Currently, we can't use renderer two or more at same time. What do you think about it? |
|
Hi @nakasyou In my opinion, we need to consider this feature not only the I know injecting content into HTML on the response is a common use case. There are some practices that use HTMLRewriter on Cloudflare Workers to inject the content into HTML tags. That API is also implemented in Bun, and you can find WASM implementations that include supporting Deno:
I believe that using HTMLRewriter will resolve the issue. You may want to add the feature specifically for the |
|
Hi @yusukebe, thank you for telling your opinion and I see that this shouldn't be included in core. Closing this. |
3 participants
This pull request introduces a new middleware,
htmlHead, for injecting HTML<head>elements dynamically or statically into responses. The changes include adding the middleware implementation, its corresponding tests, and updating relevant configuration files to integrate the new functionality.I expect this middleware is used with dynamic CSS generation such as UnoCSS and Tailwind CSS, without pre building:
Of course, you can use renderer, but you can't use renderer two or more at same time, so it's difficult to create middleware which injects custom head elements into HTML without this middleware.
The author should do the following, if applicable
bun run format:fix && bun run lint:fixto format the code