[POC] feat: Hono Action

jsr.json

@@ -34,6 +34,7 @@
     "./trailing-slash": "./src/middleware/trailing-slash/index.ts",
     "./html": "./src/helper/html/index.ts",
     "./css": "./src/helper/css/index.ts",
+    "./action": "./src/jsx/action/index.ts",
     "./jsx": "./src/jsx/index.ts",
     "./jsx/jsx-dev-runtime": "./src/jsx/jsx-dev-runtime.ts",
     "./jsx/jsx-runtime": "./src/jsx/jsx-runtime.ts",
@@ -121,4 +122,4 @@
       "src/**/*.test.tsx"
     ]
   }
-}
+}

package.json

@@ -144,6 +144,11 @@
       "import": "./dist/helper/css/index.js",
       "require": "./dist/cjs/helper/css/index.js"
     },
+    "./action": {
+      "types": "./dist/types/jsx/action/index.d.ts",
+      "import": "./dist/jsx/action/index.js",
+      "require": "./dist/cjs/jsx/action/index.js"
+    },
     "./jsx": {
       "types": "./dist/types/jsx/index.d.ts",
       "import": "./dist/jsx/index.js",
@@ -470,6 +475,9 @@
       "css": [
         "./dist/types/helper/css"
       ],
+      "action": [
+        "./dist/types/jsx/action/index.d.ts"
+      ],
       "jsx": [
         "./dist/types/jsx"
       ],

src/hono-base.ts

@@ -27,7 +27,7 @@ import type {
   Schema,
 } from './types'
 import { COMPOSED_HANDLER } from './utils/constants'
-import { getPath, getPathNoStrict, mergePath } from './utils/url'
+import { getPath, getPathNoStrict, mergePath, getRoutePath } from './utils/url'
 
 const notFoundHandler = (c: Context) => {
   return c.text('404 Not Found', 404)
@@ -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 }
+    this.router.add(method, getRoutePath(path), [handler, r])
     this.routes.push(r)
   }
 

src/jsx/action/client.ts

@@ -0,0 +1,106 @@
+export default function client() {
+  const init = () => {
+    document
+      .querySelectorAll<HTMLFormElement | HTMLInputElement>(
+        'form[action^="/hono-action-"], input[formaction^="/hono-action-"]'
+      )
+      .forEach((el) => {
+        const form = el instanceof HTMLFormElement ? el : el.form
+        const action = el.getAttribute(el instanceof HTMLFormElement ? 'action' : 'formaction')
+        if (!form || !action) {
+          return
+        }
+
+        const handler = async (ev: SubmitEvent | MouseEvent) => {
+          const commentNodes = document.createTreeWalker(document, NodeFilter.SHOW_COMMENT, {
+            acceptNode: (node) => {
+              return node.nodeValue?.includes(action)
+                ? NodeFilter.FILTER_ACCEPT
+                : NodeFilter.FILTER_REJECT
+            },
+          })
+          const startNode = commentNodes.nextNode()
+          const endNode = commentNodes.nextNode()
+          if (!startNode || !endNode) {
+            return
+          }
+
+          ev.preventDefault()
+
+          const props = startNode.nodeValue?.split('props:')[1] || '{}'
+
+          if (form.getAttribute('data-hono-disabled')) {
+            form.setAttribute('data-hono-disabled', '1')
+          }
+          const formData = new FormData(form)
+          const response = await fetch(action, {
+            method: 'POST',
+            body: formData,
+            headers: {
+              'X-Hono-Action': 'true',
+              'X-Hono-Action-Props': props,
+            },
+          })
+
+          if (response.headers.get('X-Hono-Action-Redirect')) {
+            return (window.location.href = response.headers.get('X-Hono-Action-Redirect')!)
+          }
+
+          let removed = false
+          const stream = response.body
+          if (!stream) {
+            return
+          }
+          const reader = stream.getReader()
+          while (true) {
+            const { done, value } = await reader.read()
+            if (done) {
+              break
+            }
+
+            // FIXME: Replace only the difference
+            if (!removed) {
+              for (
+                let node: ChildNode | null | undefined = startNode.nextSibling;
+                node !== endNode;
+
+              ) {
+                const next: ChildNode | null | undefined = node?.nextSibling
+                node?.parentNode?.removeChild(node)
+                node = next
+              }
+              removed = true
+            }
+
+            const decoder = new TextDecoder()
+            const chunk = decoder.decode(value, { stream: true })
+            const parser = new DOMParser()
+            const doc = parser.parseFromString(chunk, 'text/html')
+            const newComponents = [...doc.head.childNodes, ...doc.body.childNodes] as HTMLElement[]
+            newComponents.forEach((newComponent) => {
+              if (newComponent.tagName === 'SCRIPT') {
+                const script = newComponent.innerHTML
+                newComponent = document.createElement('script')
+                newComponent.innerHTML = script
+              }
+              endNode.parentNode?.insertBefore(newComponent, endNode)
+            })
+          }
+
+          form.removeAttribute('data-hono-disabled')
+        }
+
+        if (el instanceof HTMLFormElement) {
+          form.addEventListener('submit', handler)
+        } else {
+          form.addEventListener('click', handler)
+        }
+      })
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init)
+  } else {
+    init()
+  }
+}

src/jsx/action/index.ts

@@ -0,0 +1,138 @@
+import { createHash } from 'node:crypto'
+import type { Context, Hono } from '../..'
+import { useRequestContext } from '../../middleware/jsx-renderer'
+import type { BlankEnv } from '../../types'
+import { raw } from '../../utils/html'
+import type { HtmlEscapedString } from '../../utils/html'
+import { absolutePath } from '../../utils/url'
+import { jsxFn, Fragment } from '../base'
+import type { Props } from '../base'
+import { PERMALINK } from '../constants'
+import { renderToReadableStream } from '../streaming'
+import type { FC } from '../types'
+import client from './client'
+
+interface ActionHandler<Env extends BlankEnv> {
+  (data: Record<string, any> | undefined, c: Context<Env>, props: Props | undefined):
+    | HtmlEscapedString
+    | Promise<HtmlEscapedString>
+    | Response
+    | Promise<Response>
+}
+
+type ActionReturn = [(key: string) => () => void, FC]
+
+const clientScript = `(${client.toString()})()`
+const clientScriptUrl = `/hono-action-${createHash('sha256').update(clientScript).digest('hex')}.js`
+
+export const createAction = <Env extends BlankEnv>(
+  app: Hono<Env>,
+  handler: ActionHandler<Env>
+): ActionReturn => {
+  const name = `/hono-action-${createHash('sha256').update(handler.toString()).digest('hex')}`
+
+  app.post(`${name}/:key`, async (c) => {
+    if (!c.req.header('X-Hono-Action')) {
+      return c.json({ error: 'Not a Hono Action' }, 400)
+    }
+
+    const props = JSON.parse(c.req.header('X-Hono-Action-Props') || '{}')
+    const data = await c.req.parseBody()
+    const res = await handler(data, c, props)
+    if (res instanceof Response) {
+      if (res.status > 300 && res.status < 400) {
+        return new Response('', {
+          headers: {
+            'X-Hono-Action-Redirect': res.headers.get('Location') || '',
+          },
+        })
+      }
+      return res
+    } else {
+      return c.body(renderToReadableStream(res), {
+        headers: {
+          'Content-Type': 'text/html; charset=UTF-8',
+          'Transfer-Encoding': 'chunked',
+        },
+      })
+    }
+  })
+
+  // FIXME: dedupe
+  app.get(
+    absolutePath(clientScriptUrl),
+    () =>
+      new Response(clientScript, {
+        headers: { 'Content-Type': 'application/javascript' },
+      })
+  )
+
+  const permalinkGenerator = (key: string) => {
+    let actionName: string | undefined
+    const subAction = () => {
+      if (!actionName) {
+        app.routes.forEach(({ path }) => {
+          if (path.includes(name)) {
+            actionName = path.replace(':key', key)
+          }
+        })
+      }
+      return actionName
+    }
+    ;(subAction as any)['key'] = key
+    return subAction
+  }
+
+  const action = (key: string) => {
+    const a = () => {}
+    ;(a as any)[PERMALINK] = permalinkGenerator(key)
+    return a
+  }
+  ;(action as any)[PERMALINK] = permalinkGenerator('default')
+
+  return [
+    action,
+    async (props: Props = {}) => {
+      const subAction = props.action || action
+      const key = (subAction as any)[PERMALINK]['key']
+
+      const c = useRequestContext()
+      const res = await handler(undefined, c, props)
+      if (res instanceof Response) {
+        throw new Error('Response is not supported in JSX')
+      }
+      return Fragment({
+        children: [
+          // TBD: load client library, Might be simpler to make it globally referenceable and read from CDN
+          jsxFn(
+            'script',
+            { src: clientScriptUrl, async: true },
+            jsxFn(async () => '', {}, []) as any
+          ) as any,
+          raw(
+            `<!-- ${name}/${key} props:${JSON.stringify(props)
+              .replace(/</g, '\\u003c')
+              .replace(/>/g, '\\u003e')} -->`
+          ),
+          res,
+          raw(`<!-- /${name}/${key} -->`),
+        ],
+      })
+    },
+  ]
+}
+
+export const createForm = <Env extends BlankEnv>(
+  app: Hono<Env>,
+  handler: ActionHandler<Env>
+): [ActionReturn[1]] => {
+  const [action, Component] = createAction(app, handler)
+  const subAction = action(Math.random().toString(36).substring(2, 15))
+  return [
+    (props: Props = {}) => {
+      return jsxFn('form', { action: subAction }, [
+        jsxFn(Component as any, { ...props, action: subAction }, []) as any,
+      ]) as any
+    },
+  ]
+}

src/jsx/dom/hooks/index.ts

@@ -86,6 +86,6 @@ export const useActionState = <T>(
     setState(await fn(state, data))
   }
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ;(actionState as any)[PERMALINK] = permalink
+  ;(actionState as any)[PERMALINK] = () => permalink
   return [state, actionState]
 }

src/jsx/intrinsic-element/components.ts

@@ -94,7 +94,7 @@
 
   if (string instanceof Promise) {
     return string.then((resString) =>
-      raw(string, [
+      raw(resString, [
         ...((resString as HtmlEscapedString).callbacks || []),
         insertIntoHead(tag, resString, restProps, precedence),
       ])
@@ -172,7 +172,8 @@
   }>
 > = (props) => {
   if (typeof props.action === 'function') {
-    props.action = PERMALINK in props.action ? (props.action[PERMALINK] as string) : undefined
+    props.action =
+      PERMALINK in props.action ? (props.action[PERMALINK] as () => string)() : undefined
   }
   return newJSXNode('form', props)
 }
@@ -185,7 +186,7 @@
 ) => {
   if (typeof props.formAction === 'function') {
     props.formAction =
-      PERMALINK in props.formAction ? (props.formAction[PERMALINK] as string) : undefined
+      PERMALINK in props.formAction ? (props.formAction[PERMALINK] as () => string)() : undefined
   }
   return newJSXNode(tag, props)
 }

src/utils/url.ts

@@ -159,6 +159,18 @@
   }`
 }
 
+export const absolutePath = <T extends string>(path: T): T => {
+  return `@@@${path}` as T
+}
+
+export const isAbsolutePath = (path: string) => {
+  return path.startsWith('@@@')
+}
+
+export const getRoutePath = (path: string) => {
+  return path.startsWith('@@@') ? path.slice(3) : path
+}
+
 export const checkOptionalParameter = (path: string): string[] | null => {
   /*
    If path is `/api/animals/:type?` it will return: