void-plugin-hono-jsx 0.1.0-alpha.1 → 0.1.0-alpha.3

package/src/runtime/form.ts

@@ -0,0 +1,71 @@
+import { useContext, useRef, useState } from 'hono/jsx';
+import { isAbortError, submitAction, VoidActionError, type FormMethod } from 'void/pages-client';
+import { RouterContext, useErrors, useRouter } from './pages.tsx';
+
+function fieldErrors(error: VoidActionError): Record<string, string> {
+  const body = error.body;
+  if (typeof body !== 'object' || body === null || !('errors' in body) || typeof body.errors !== 'object' || body.errors === null) return {};
+  return Object.fromEntries(Object.entries(body.errors).filter((entry): entry is [string, string] => typeof entry[1] === 'string'));
+}
+
+export function useForm<T extends Record<string, unknown>>(initialData: T) {
+  if (!useContext(RouterContext)) throw new Error('Hono Pages: useForm requires the full Pages renderer; island form helpers are unsupported.');
+  const router = useRouter();
+  const initialErrors = useErrors();
+  const [data, updateData] = useState(initialData);
+  const [errors, setErrors] = useState(initialErrors);
+  const [pending, setPending] = useState(false);
+  const [wasSuccessful, setSuccessful] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+  const active = useRef(false);
+  const generation = useRef(0);
+
+  const setData: typeof updateData = (next) => {
+    updateData(next);
+    setSuccessful(false);
+    setErrors({});
+    setError(null);
+  };
+
+  async function submit(method: FormMethod, url: string) {
+    if (active.current) return;
+    active.current = true;
+    const id = ++generation.current;
+    setPending(true);
+    setSuccessful(false);
+    setError(null);
+    setErrors({});
+    try {
+      const result = await submitAction(router, url, { method: method.toUpperCase(), data, preserveScroll: true });
+      if (id !== generation.current) return;
+      if (result.ok) setSuccessful(true);
+      else { setError(result.error); setErrors(fieldErrors(result.error)); }
+    } catch (failure) {
+      if (id === generation.current && !isAbortError(failure)) {
+        setError(failure instanceof Error ? failure : new Error(String(failure)));
+      }
+    } finally {
+      if (id === generation.current) { active.current = false; setPending(false); }
+    }
+  }
+
+  function cancel() {
+    if (!active.current) return;
+    const id = ++generation.current;
+    active.current = false;
+    setPending(false);
+    setSuccessful(false);
+    void router.refresh().catch((failure: unknown) => {
+      if (id === generation.current) setError(failure instanceof Error ? failure : new Error(String(failure)));
+    });
+  }
+
+  return {
+    data, setData, errors, pending, wasSuccessful, error, submit, cancel,
+    reset() { setData(initialData); },
+    post: (url: string) => submit('post', url),
+    put: (url: string) => submit('put', url),
+    patch: (url: string) => submit('patch', url),
+    delete: (url: string) => submit('delete', url),
+  };
+}

package/src/runtime/pages.tsx

@@ -0,0 +1,45 @@
+import { createContext, useContext, type JSX } from 'hono/jsx';
+import type { VoidRouter } from 'void/pages-client';
+import type { PageObject } from 'void/pages-protocol';
+export type { DeferredState as Deferred } from 'void';
+
+export const RouterContext = createContext<VoidRouter | null>(null);
+export const PageContext = createContext<PageObject | null>(null);
+
+function usePage() {
+  const page = useContext(PageContext);
+  if (!page) throw new Error('Hono Pages: page data requires a page provider.');
+  return page;
+}
+
+export function useShared() { return usePage().shared; }
+export function useParams() { return usePage().params; }
+export function useErrors() { return usePage().errors ?? {}; }
+
+export function useRouter(): VoidRouter {
+  const router = useContext(RouterContext);
+  if (!router) throw new Error('Hono Pages: useRouter requires a page provider.');
+  return router;
+}
+
+type LinkProps = Omit<JSX.IntrinsicElements['a'], 'href' | 'onClick'> & {
+  href: string;
+  reloadDocument?: boolean;
+  replace?: boolean;
+  onClick?: (event: MouseEvent) => void;
+};
+
+export function Link({ href, reloadDocument, replace, onClick, ...attributes }: LinkProps) {
+  const router = useRouter();
+  return <a {...attributes} href={href} onClick={(event: MouseEvent) => {
+    onClick?.(event);
+    if (event.defaultPrevented || reloadDocument || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+    if (attributes.download !== undefined || (attributes.target && attributes.target !== '_self') || attributes.rel?.split(/\s+/).includes('external')) return;
+    const url = new URL(href, window.location.href);
+    if (url.origin !== window.location.origin || !['http:', 'https:'].includes(url.protocol)) return;
+    event.preventDefault();
+    void router.visit(url, { replace }).catch((error: unknown) => {
+      window.dispatchEvent(new CustomEvent('hono-pages:navigation-error', { detail: error }));
+    });
+  }} />;
+}