feat: implement Hono JSX wrapper

Author: 3w36zj6

packages/frameworks/hono-jsx/package.json

@@ -31,7 +31,8 @@
     "@zag-js/utils": "workspace:*"
   },
   "devDependencies": {
-    "hono": "4.8.5"
+    "hono": "4.8.5",
+    "clean-package": "2.2.0"
   },
   "peerDependencies": {
     "hono": ">=4.8.0"

packages/frameworks/hono-jsx/src/bindable.ts

@@ -0,0 +1,72 @@
+import type { Bindable, BindableParams } from "@zag-js/core"
+import { identity, isFunction } from "@zag-js/utils"
+import { useEffect, useRef, useState } from "hono/jsx"
+import { flushSync } from "hono/jsx/dom"
+import { useSafeLayoutEffect } from "./use-layout-effect"
+
+export function useBindable<T>(props: () => BindableParams<T>): Bindable<T> {
+  const initial = props().value ?? props().defaultValue
+
+  const eq = props().isEqual ?? Object.is
+
+  const [initialValue] = useState(initial)
+  const [value, setValue] = useState(initialValue)
+
+  const controlled = props().value !== undefined
+
+  const valueRef = useRef(value)
+  valueRef.current = controlled ? props().value : value
+
+  const prevValue = useRef(valueRef.current)
+  useSafeLayoutEffect(() => {
+    prevValue.current = valueRef.current
+  }, [value, props().value])
+
+  const setFn = (value: T | ((prev: T) => T)) => {
+    const prev = prevValue.current === null ? undefined : prevValue.current
+    const next = isFunction(value) ? value(prev as T) : value
+
+    if (props().debug) {
+      console.log(`[bindable > ${props().debug}] setValue`, { next, prev })
+    }
+
+    if (!controlled) setValue(next)
+    if (!eq(next, prev)) {
+      props().onChange?.(next, prev)
+    }
+  }
+
+  function get(): T {
+    return (controlled ? props().value : value) as T
+  }
+
+  return {
+    initial: initialValue,
+    ref: valueRef,
+    get,
+    set(value: T | ((prev: T) => T)) {
+      const exec = props().sync ? flushSync : identity
+      exec(() => setFn(value))
+    },
+    invoke(nextValue: T, prevValue: T) {
+      props().onChange?.(nextValue, prevValue)
+    },
+    hash(value: T) {
+      return props().hash?.(value) ?? String(value)
+    },
+  }
+}
+
+useBindable.cleanup = (fn: VoidFunction) => {
+  useEffect(() => fn, [])
+}
+
+useBindable.ref = <T>(defaultValue: T) => {
+  const value = useRef(defaultValue)
+  return {
+    get: () => value.current as T,
+    set: (next: T) => {
+      value.current = next
+    },
+  }
+}

packages/frameworks/hono-jsx/src/index.ts

@@ -0,0 +1,4 @@
+export { mergeProps } from "@zag-js/core"
+export * from "./machine"
+export * from "./normalize-props"
+export * from "./portal"