[POC] feat: Hono Action #3973
[POC] feat: Hono Action #3973
Conversation
Co-authored-by: Yusuke Wada <yusuke@kamawada.com>
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
Codecov ReportAttention: Patch coverage is
❌ Your patch check has failed because the patch coverage (6.33%) is below the target coverage (80.00%). You can increase the patch coverage or adjust the target coverage. Additional details and impacted files@@ Coverage Diff @@
## main #3973 +/- ##
==========================================
- Coverage 91.29% 89.58% -1.72%
==========================================
Files 168 170 +2
Lines 10772 10981 +209
Branches 3057 3148 +91
==========================================
+ Hits 9834 9837 +3
- Misses 937 1143 +206
Partials 1 1 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
Hey @usualoma ! Shall we work on Hono Action as just POC? I think Hono Action will be super helpful with using HonoX. In this PR, it throws the following error. Can you take a look at it? App: import { Hono } from '../../src'
import { createAction } from '../../src/jsx/action'
import { jsxRenderer } from '../../src/middleware/jsx-renderer'
const renderer = jsxRenderer(
({ children }) => {
return (
<html>
<body>
<main>{children}</main>
</body>
</html>
)
},
{
stream: true,
}
)
const app = new Hono()
app.use(renderer)
const [action, Component] = createAction(app, async (data, c) => {
return <></>
})
app.get('/', (c) => {
return c.render(
<section>
<form>
<Component />
</form>
</section>
)
})
export default appError:
|
|
I'll check; give me a few days. |
|
Hi @yusukebe. Sorry for the delay. I have not been able to reproduce the error you indicated. It requires a bit adjustment to get it working, and I have confirmed that it works with the following PR content. With the following source code and settings, Ran and worked. /** @jsxRuntime automatic @jsxImportSource ./src/jsx */
import { Hono } from './src/'
import { createAction } from './src/jsx/action'
import { jsxRenderer } from './src/middleware/jsx-renderer'
const renderer = jsxRenderer(
({ children }) => {
return (
<html>
<body>
<main>{children}</main>
</body>
</html>
)
},
{
stream: true,
}
)
const app = new Hono()
app.use(renderer)
const [action, Component] = createAction(app, async (data, c) => {
return (
<>
Hello {data?.name}
<input type='text' name='name' />
<input type='submit' value='Submit' />
</>
)
})
app.get('/', (c) => {
return c.render(
<section>
<form action={action}>
<Component />
</form>
</section>
)
})
export default app{
"$schema": "node_modules/wrangler/config-schema.json",
"name": "test",
"compatibility_date": "2025-03-17",
"observability": {
"enabled": true
},
"compatibility_flags": [
"nodejs_compat_v2"
]
}CleanShot.2025-03-18.at.19.58.33.mp4 |
|
@usualoma Thank you for the response!
I haven't investigated it, so this is just my opinion. Wrangler uses However, I want to merge #4008 with this branch. Can you remove the commit 36243d1 then I'll merge it. |
|
The reason it didn't work was that the JSX settings were wrong! Sorry! |
| @@ -372,8 +372,8 @@ class Hono<E extends Env = Env, S extends Schema = {}, BasePath extends string = | |||
| #addRoute(method: string, path: string, handler: H) { | |||
| method = method.toUpperCase() | |||
| path = mergePath(this._basePath, path) | |||
| const r: RouterRoute = { path, method, handler } | |||
| this.router.add(method, path, [handler, r]) | |||
| const r: RouterRoute = { path: path, method: method, handler: handler } | |||
There was a problem hiding this comment.
| const r: RouterRoute = { path: path, method: method, handler: handler } | |
| const r: RouterRoute = { path, method, handler } |
I think this section should be written in shorthand property.
(#3640)
Bundle size check
Compiler Diagnostics
Reported by octocov |
WIP