hono [POC] feat: Hono Action

WIP

Mar 04 '25 06:03 yusukebe

Bundle size check

	main (8796371)	#3973 (4c3bd15)	+/-
Bundle Size (B)	18,958B	19,005B	47B
Bundle Size (KB)	18.51K	18.56K	0.05K

Compiler Diagnostics

	main (8796371)	#3973 (4c3bd15)	+/-
Files	261	261	0
Lines	116,442	116,454	12
Identifiers	114,436	114,460	24
Symbols	303,841	303,858	17
Types	214,827	214,834	7
Instantiations	3,091,598	3,091,598	0
Memory used	453,418K	454,410K	992K
I/O read	0.02s	0.02s	0s
I/O write	0s	0s	0s
Parse time	0.81s	0.84s	0.03s
Bind time	0.36s	0.28s	-0.08s
Check time	5.69s	5.63s	-0.06s
Emit time	0s	0s	0s
Total time	6.86s	6.75s	-0.11s

Reported by octocov

Mar 04 '25 06:03 github-actions[bot]

Bundle size check

	main (8796371)	#3973 (1b87e41)	+/-
Bundle Size (B)	18,958B	19,005B	47B
Bundle Size (KB)	18.51K	18.56K	0.05K

Compiler Diagnostics

	main (8796371)	#3973 (1b87e41)	+/-
Files	261	261	0
Lines	116,442	116,454	12
Identifiers	114,436	114,460	24
Symbols	303,841	303,858	17
Types	214,827	214,834	7
Instantiations	3,091,598	3,091,598	0
Memory used	453,418K	454,498K	1,080K
I/O read	0.02s	0.02s	0s
I/O write	0s	0s	0s
Parse time	0.81s	0.71s	-0.1s
Bind time	0.36s	0.3s	-0.06s
Check time	5.69s	5.87s	0.18s
Emit time	0s	0s	0s
Total time	6.86s	6.88s	0.02s

Reported by octocov

Mar 04 '25 06:03 github-actions[bot]

Codecov Report

Attention: Patch coverage is 6.33484% with 207 lines in your changes missing coverage. Please review.

Project coverage is 89.58%. Comparing base (8796371) to head (f7e02d3). Report is 10 commits behind head on main.

Files with missing lines	Patch %	Lines
src/jsx/action/index.ts	0.00%	111 Missing :warning:
src/jsx/action/client.ts	0.00%	93 Missing :warning:
src/utils/url.ts	77.77%	2 Missing :warning:
src/jsx/intrinsic-element/components.ts	75.00%	1 Missing :warning:

:x: 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

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Mar 04 '25 06:03 codecov[bot]

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 app

Error:

CleanShot 2025-03-04 at 16 33 49@2x

Mar 04 '25 07:03 yusukebe

I'll check; give me a few days.

Mar 05 '25 03:03 usualoma

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. https://github.com/honojs/hono/pull/4008

With the following source code and settings,

$ wrangler dev hono-action.tsx

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"
    ]
}

https://github.com/user-attachments/assets/6025ee9b-e663-4c57-9510-18b5159a1d0b

Mar 18 '25 11:03 usualoma

@usualoma Thank you for the response!

It requires a bit adjustment to get it working, and I have confirmed that it works with the following PR content. https://github.com/honojs/hono/pull/4008

I haven't investigated it, so this is just my opinion. Wrangler uses esbuild internally, and esbuild may compile the client's JS. Anyway, I think you know it, but the implementation may be not so good.

However, I want to merge #4008 with this branch. Can you remove the commit https://github.com/honojs/hono/commit/36243d11563527e3be52dec7a6555b5cfdd234e8 then I'll merge it.

Mar 20 '25 09:03 yusukebe

@usualoma

The reason it didn't work was that the JSX settings were wrong! Sorry!

Mar 20 '25 09:03 yusukebe

Hi @yusukebe.

Thanks for checking! I have deleted 36243d1 from #4008.

Mar 20 '25 10:03 usualoma

Bundle size check

	main (5473682)	#3973 (fb5b488)	+/-
Bundle Size (B)	18,976B	19,024B	48B
Bundle Size (KB)	18.53K	18.58K	0.05K

Compiler Diagnostics

	main (5473682)	#3973 (fb5b488)	+/-
Files	261	261	0
Lines	116,441	116,453	12
Identifiers	114,439	114,465	26
Symbols	303,843	303,860	17
Types	214,833	214,840	7
Instantiations	3,091,594	3,091,594	0
Memory used	454,932K	455,171K	239K
I/O read	0.03s	0.02s	-0.01s
I/O write	0s	0s	0s
Parse time	0.79s	0.75s	-0.04s
Bind time	0.32s	0.29s	-0.03s
Check time	5.49s	5.75s	0.26s
Emit time	0s	0s	0s
Total time	6.6s	6.8s	0.2s

Reported by octocov

Mar 20 '25 12:03 github-actions[bot]