gantry-web 0.3.5 → 0.4.0

package/src/router.tsx

@@ -1,160 +1,180 @@
-// Tiny pathname router shared by createApp, Link and useRoute. No
-// dependency, history-API based: navigate() pushes, back/forward work,
-// and every subscriber re-renders on change.
-
-import {
-  useSyncExternalStore,
-  type AnchorHTMLAttributes,
-  type ReactNode,
-} from "react";
-import { getShell } from "./bridge";
-
-// Subscriptions go through a window-scoped event, NOT a module-local
-// set: if bundling ever instantiates this module twice (it happened -
-// Vite served excluded node_modules source under ?v=hash and bare URLs
-// at once), a local set splits the subscribers and navigation silently
-// stops re-rendering half the app. The window survives any number of
-// module copies; the route itself already lives in location.pathname.
-const NAV_EVENT = "gantry:navigate";
-
-function notify() {
-  window.dispatchEvent(new Event(NAV_EVENT));
-}
-
-if (typeof window !== "undefined") {
-  window.addEventListener("popstate", notify);
-}
-
-/** navigate switches pages without a full reload. */
-export function navigate(path: string): void {
-  if (location.pathname !== path) {
-    history.pushState(null, "", path);
-  }
-  notify();
-}
-
-/** redirect replaces the current URL (no history entry) - used when a
- * route no longer exists and the app falls back to another page. */
-export function redirect(path: string): void {
-  if (location.pathname !== path) {
-    history.replaceState(null, "", path);
-  }
-  notify();
-}
-
-/** goBack navigates back through the page history (popstate re-renders). */
-export function goBack(): void {
-  history.back();
-}
-
-/** goForward navigates forward through the page history. */
-export function goForward(): void {
-  history.forward();
-}
-
-function subscribe(fn: () => void): () => void {
-  window.addEventListener(NAV_EVENT, fn);
-  return () => window.removeEventListener(NAV_EVENT, fn);
-}
-
-/** useRoute returns the current pathname; re-renders on navigation. */
-export function useRoute(): string {
-  return useSyncExternalStore(subscribe, () => location.pathname);
-}
-
-/** isActive: exact match, or prefix match when exact is false. */
-export function isActive(path: string, to: string, exact = true): boolean {
-  const clean = path !== "/" && path.endsWith("/") ? path.slice(0, -1) : path;
-  if (exact || to === "/") return clean === to;
-  return clean === to || clean.startsWith(to + "/");
-}
-
-export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-  /** Route to navigate to, e.g. "/settings". */
-  to: string;
-  /** Extra class applied while the link's route is current. */
-  activeClassName?: string;
-  /** Match route prefixes too ("/docs" active on "/docs/intro"). */
-  matchPrefix?: boolean;
-  children?: ReactNode;
-}
-
-/**
- * Link navigates between pages and knows when it is the current one:
- * it sets data-active="true"/"false" (style with
- * [data-active="true"] in css, or data-[active=true]: variants in
- * Tailwind), aria-current="page", and appends activeClassName when
- * given.
- */
-export interface ExternalLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-  /** The external URL to open. */
-  href: string;
-  prefix?: string;
-  children?: ReactNode;
-}
-
-/**
- * ExternalLink opens a URL in the user's DEFAULT BROWSER instead of
- * navigating the app's webview, and (in the native window) renders
- * without an href so no URL-preview bubble ever appears. In a plain
- * browser tab it falls back to a normal new-tab link.
- */
-export function ExternalLink({ href, prefix, children, onClick, ...rest }: ExternalLinkProps) {
-  const shell = getShell(prefix);
-  if (!shell.available) {
-    return (
-      <a href={href} target="_blank" rel="noreferrer" onClick={onClick} {...rest}>
-        {children}
-      </a>
-    );
-  }
-  return (
-    <a
-      role="link"
-      tabIndex={0}
-      onClick={(e) => {
-        onClick?.(e);
-        if (!e.defaultPrevented) shell.openExternal(href);
-      }}
-      onKeyDown={(e) => {
-        if (e.key === "Enter") shell.openExternal(href);
-      }}
-      {...rest}
-    >
-      {children}
-    </a>
-  );
-}
-
-export function Link({ to, activeClassName, matchPrefix, className, children, onClick, ...rest }: LinkProps) {
-  const path = useRoute();
-  const active = isActive(path, to, !matchPrefix);
-  const cls = [className, active ? activeClassName : undefined].filter(Boolean).join(" ");
-  // Deliberately NO href: navigation is client-side anyway, and an
-  // href makes the webview show the URL preview bubble in the bottom
-  // corner on hover - a browser artifact that looks wrong in a
-  // desktop app. role/tabIndex/keyboard keep it accessible.
-  return (
-    <a
-      role="link"
-      tabIndex={0}
-      className={cls || undefined}
-      data-active={active ? "true" : "false"}
-      aria-current={active ? "page" : undefined}
-      onClick={(e) => {
-        onClick?.(e);
-        if (e.defaultPrevented || e.button !== 0) return;
-        navigate(to);
-      }}
-      onKeyDown={(e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          navigate(to);
-        }
-      }}
-      {...rest}
-    >
-      {children}
-    </a>
-  );
-}
+// Tiny pathname router shared by createApp, Link and useRoute. No
+// dependency, history-API based: navigate() pushes, back/forward work,
+// and every subscriber re-renders on change.
+
+import {
+  createContext,
+  useContext,
+  useSyncExternalStore,
+  type AnchorHTMLAttributes,
+  type ReactNode,
+} from "react";
+import { getShell } from "./bridge";
+
+/** Params captured from a dynamic route: a string for a [id] segment, a
+ * string[] for a [...slug] catch-all. */
+export type RouteParams = Record<string, string | string[]>;
+
+// The active page's captured params, provided by createApp around the
+// page. Empty for static routes.
+export const ParamsContext = createContext<RouteParams>({});
+
+/**
+ * useParams returns the params captured from the current dynamic route.
+ * For pages/examples/page1/[id] on /examples/page1/7 it is { id: "7" };
+ * for a [...slug] catch-all the value is a string[]. Empty on static
+ * pages. Type it with the shape you expect: useParams<{ id: string }>().
+ */
+export function useParams<T extends RouteParams = RouteParams>(): T {
+  return useContext(ParamsContext) as T;
+}
+
+// Subscriptions go through a window-scoped event, NOT a module-local
+// set: if bundling ever instantiates this module twice (it happened -
+// Vite served excluded node_modules source under ?v=hash and bare URLs
+// at once), a local set splits the subscribers and navigation silently
+// stops re-rendering half the app. The window survives any number of
+// module copies; the route itself already lives in location.pathname.
+const NAV_EVENT = "gantry:navigate";
+
+function notify() {
+  window.dispatchEvent(new Event(NAV_EVENT));
+}
+
+if (typeof window !== "undefined") {
+  window.addEventListener("popstate", notify);
+}
+
+/** navigate switches pages without a full reload. */
+export function navigate(path: string): void {
+  if (location.pathname !== path) {
+    history.pushState(null, "", path);
+  }
+  notify();
+}
+
+/** redirect replaces the current URL (no history entry) - used when a
+ * route no longer exists and the app falls back to another page. */
+export function redirect(path: string): void {
+  if (location.pathname !== path) {
+    history.replaceState(null, "", path);
+  }
+  notify();
+}
+
+/** goBack navigates back through the page history (popstate re-renders). */
+export function goBack(): void {
+  history.back();
+}
+
+/** goForward navigates forward through the page history. */
+export function goForward(): void {
+  history.forward();
+}
+
+function subscribe(fn: () => void): () => void {
+  window.addEventListener(NAV_EVENT, fn);
+  return () => window.removeEventListener(NAV_EVENT, fn);
+}
+
+/** useRoute returns the current pathname; re-renders on navigation. */
+export function useRoute(): string {
+  return useSyncExternalStore(subscribe, () => location.pathname);
+}
+
+/** isActive: exact match, or prefix match when exact is false. */
+export function isActive(path: string, to: string, exact = true): boolean {
+  const clean = path !== "/" && path.endsWith("/") ? path.slice(0, -1) : path;
+  if (exact || to === "/") return clean === to;
+  return clean === to || clean.startsWith(to + "/");
+}
+
+export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  /** Route to navigate to, e.g. "/settings". */
+  to: string;
+  /** Extra class applied while the link's route is current. */
+  activeClassName?: string;
+  /** Match route prefixes too ("/docs" active on "/docs/intro"). */
+  matchPrefix?: boolean;
+  children?: ReactNode;
+}
+
+/**
+ * Link navigates between pages and knows when it is the current one:
+ * it sets data-active="true"/"false" (style with
+ * [data-active="true"] in css, or data-[active=true]: variants in
+ * Tailwind), aria-current="page", and appends activeClassName when
+ * given.
+ */
+export interface ExternalLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  /** The external URL to open. */
+  href: string;
+  prefix?: string;
+  children?: ReactNode;
+}
+
+/**
+ * ExternalLink opens a URL in the user's DEFAULT BROWSER instead of
+ * navigating the app's webview, and (in the native window) renders
+ * without an href so no URL-preview bubble ever appears. In a plain
+ * browser tab it falls back to a normal new-tab link.
+ */
+export function ExternalLink({ href, prefix, children, onClick, ...rest }: ExternalLinkProps) {
+  const shell = getShell(prefix);
+  if (!shell.available) {
+    return (
+      <a href={href} target="_blank" rel="noreferrer" onClick={onClick} {...rest}>
+        {children}
+      </a>
+    );
+  }
+  return (
+    <a
+      role="link"
+      tabIndex={0}
+      onClick={(e) => {
+        onClick?.(e);
+        if (!e.defaultPrevented) shell.openExternal(href);
+      }}
+      onKeyDown={(e) => {
+        if (e.key === "Enter") shell.openExternal(href);
+      }}
+      {...rest}
+    >
+      {children}
+    </a>
+  );
+}
+
+export function Link({ to, activeClassName, matchPrefix, className, children, onClick, ...rest }: LinkProps) {
+  const path = useRoute();
+  const active = isActive(path, to, !matchPrefix);
+  const cls = [className, active ? activeClassName : undefined].filter(Boolean).join(" ");
+  // Deliberately NO href: navigation is client-side anyway, and an
+  // href makes the webview show the URL preview bubble in the bottom
+  // corner on hover - a browser artifact that looks wrong in a
+  // desktop app. role/tabIndex/keyboard keep it accessible.
+  return (
+    <a
+      role="link"
+      tabIndex={0}
+      className={cls || undefined}
+      data-active={active ? "true" : "false"}
+      aria-current={active ? "page" : undefined}
+      onClick={(e) => {
+        onClick?.(e);
+        if (e.defaultPrevented || e.button !== 0) return;
+        navigate(to);
+      }}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          navigate(to);
+        }
+      }}
+      {...rest}
+    >
+      {children}
+    </a>
+  );
+}

package/src/service.ts

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { callGo, connect } from "./socket";
+import { callGo, connect, GantryCallError } from "./socket";
 
 export interface Service {
   /** call awaits a Go function registered on this service (ui.Calls). */
@@ -35,6 +35,8 @@ export function useService(name: string): Service {
 export interface CallResult<T> {
   data: T | undefined;
   error: string | null;
+  /** The gerr code of a failed call ("panic.call", "auth.expired", ...). */
+  code: string | null;
   loading: boolean;
   /** reload re-runs the call. */
   reload: () => void;
@@ -48,6 +50,7 @@ export interface CallResult<T> {
 export function useCall<T = unknown>(key: string, name: string, payload?: unknown): CallResult<T> {
   const [data, setData] = useState<T | undefined>(undefined);
   const [error, setError] = useState<string | null>(null);
+  const [code, setCode] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
   const [tick, setTick] = useState(0);
   const alive = useRef(true);
@@ -57,6 +60,7 @@ export function useCall<T = unknown>(key: string, name: string, payload?: unknow
     alive.current = true;
     setLoading(true);
     setError(null);
+    setCode(null);
     callGo(key, name, payload)
       .then((v) => {
         if (alive.current) {
@@ -67,6 +71,7 @@ export function useCall<T = unknown>(key: string, name: string, payload?: unknow
       .catch((e: Error) => {
         if (alive.current) {
           setError(e.message);
+          if (e instanceof GantryCallError && e.code) setCode(e.code);
           setLoading(false);
         }
       });
@@ -78,5 +83,5 @@ export function useCall<T = unknown>(key: string, name: string, payload?: unknow
   }, [key, name, payloadKey, tick]);
 
   const reload = useCallback(() => setTick((t) => t + 1), []);
-  return { data, error, loading, reload };
+  return { data, error, code, loading, reload };
 }