@epoch32/visage 0.0.0-stage → 0.0.0

package/src/router/router.tsx

@@ -0,0 +1,352 @@
+import { type Child, Show } from "../dom";
+import {
+  computed,
+  createContext,
+  onCleanup,
+  type ReadonlySignal,
+  signal,
+  useContext,
+  type WritableSignal
+} from "../signals";
+
+export interface LocationState {
+  pathname: ReadonlySignal<string>;
+  search: ReadonlySignal<string>;
+  hash: ReadonlySignal<string>;
+}
+
+export interface RouterContextValue {
+  location: LocationState;
+  navigate: (to: string, options?: { replace?: boolean }) => void;
+  params: ReadonlySignal<Record<string, string>>;
+  base: string;
+  matchedRoute: ReadonlySignal<MatchedRoute | null>;
+  routes: RouteDefinition[];
+  registerRoute: (route: RouteDefinition) => void;
+}
+
+export interface MatchedRoute {
+  path: string;
+  params: Record<string, string>;
+  component?: (props?: any) => Child;
+  children?: Child;
+}
+
+export interface RouteDefinition {
+  path: string;
+  component?: (props?: any) => Child;
+  children?: Child;
+  matcher: RegExp;
+  paramNames: string[];
+}
+
+const RouterContext = createContext<RouterContextValue | null>(null);
+
+function compilePath(path: string): { matcher: RegExp; paramNames: string[] } {
+  const paramNames: string[] = [];
+  const normalized = path.replace(/\/+$/, "") || "/";
+
+  const regexStr = normalized
+    .replace(/:([a-zA-Z0-9_]+)/g, (_, name) => {
+      paramNames.push(name);
+      return "([^/]+)";
+    })
+    .replace(/\*/g, "(.*)");
+
+  const matcher = new RegExp(`^${regexStr}(?:/)?$`);
+  return { matcher, paramNames };
+}
+
+function matchRoute(routes: RouteDefinition[], pathname: string, base = ""): MatchedRoute | null {
+  const cleanPath =
+    base && pathname.startsWith(base) ? pathname.slice(base.length) || "/" : pathname;
+
+  for (const route of routes) {
+    const match = cleanPath.match(route.matcher);
+    if (match) {
+      const params: Record<string, string> = {};
+      const captures = match.slice(1);
+      route.paramNames.forEach((name, i) => {
+        params[name] = decodeURIComponent(captures[i] ?? "");
+      });
+
+      return {
+        path: route.path,
+        params,
+        component: route.component,
+        children: route.children
+      };
+    }
+  }
+
+  return null;
+}
+
+export interface RouterProps {
+  base?: string;
+  mode?: "history" | "hash";
+  children: Child;
+}
+
+/**
+ * Root Router provider managing browser location state and URL synchronization
+ */
+export function Router(props: RouterProps): Child {
+  const base = props.base ?? "";
+  const mode = props.mode ?? "history";
+
+  const getPathname = () => {
+    if (typeof window === "undefined" || !window.location) return "/";
+    if (mode === "hash") {
+      const hash = window.location.hash.slice(1) || "/";
+      return hash.split("?")[0] || "/";
+    }
+    return window.location.pathname || "/";
+  };
+
+  const getSearch = () => {
+    if (typeof window === "undefined" || !window.location) return "";
+    if (mode === "hash") {
+      const hash = window.location.hash.slice(1);
+      const queryIdx = hash.indexOf("?");
+      return queryIdx !== -1 ? hash.slice(queryIdx) : "";
+    }
+    return window.location.search || "";
+  };
+
+  const getHash = () => {
+    if (typeof window === "undefined" || !window.location) return "";
+    return window.location.hash || "";
+  };
+
+  const pathname: WritableSignal<string> = signal(getPathname());
+  const search: WritableSignal<string> = signal(getSearch());
+  const hash: WritableSignal<string> = signal(getHash());
+
+  const routes: RouteDefinition[] = [];
+  const registeredRoutes = signal<RouteDefinition[]>([]);
+
+  const registerRoute = (route: RouteDefinition) => {
+    routes.push(route);
+    registeredRoutes.set([...routes]);
+  };
+
+  const syncLocation = () => {
+    pathname.set(getPathname());
+    search.set(getSearch());
+    hash.set(getHash());
+  };
+
+  if (typeof window !== "undefined") {
+    const eventName = mode === "hash" ? "hashchange" : "popstate";
+    window.addEventListener(eventName, syncLocation);
+    onCleanup(() => window.removeEventListener(eventName, syncLocation));
+  }
+
+  const navigate = (to: string, options?: { replace?: boolean }) => {
+    if (typeof window === "undefined" || !window.history) {
+      pathname.set(to);
+      return;
+    }
+
+    const target = base ? `${base.replace(/\/$/, "")}/${to.replace(/^\//, "")}` : to;
+
+    if (mode === "hash") {
+      if (options?.replace) {
+        window.location.replace(`#${to}`);
+      } else {
+        window.location.hash = `#${to}`;
+      }
+    } else {
+      if (options?.replace) {
+        window.history.replaceState(null, "", target);
+      } else {
+        window.history.pushState(null, "", target);
+      }
+    }
+    syncLocation();
+  };
+
+  const matchedRoute = computed(() => {
+    const currentPath = pathname();
+    const routeList = registeredRoutes();
+    return matchRoute(routeList, currentPath, base);
+  });
+
+  const params = computed(() => matchedRoute()?.params ?? {});
+
+  const routerValue: RouterContextValue = {
+    location: { pathname, search, hash },
+    navigate,
+    params,
+    base,
+    matchedRoute,
+    routes,
+    registerRoute
+  };
+
+  return RouterContext.Provider({
+    value: routerValue,
+    children: props.children
+  });
+}
+
+export interface RouteProps {
+  path: string;
+  component?: (props: any) => Child;
+  children?: Child;
+}
+
+/**
+ * Route declaration registering URL path pattern and view component
+ */
+export function Route(props: RouteProps): Child {
+  const router = useContext(RouterContext);
+  if (!router) {
+    throw new Error("<Route> must be rendered inside a <Router>");
+  }
+
+  const { matcher, paramNames } = compilePath(props.path);
+  router.registerRoute({
+    path: props.path,
+    component: props.component,
+    children: props.children,
+    matcher,
+    paramNames
+  });
+
+  return null;
+}
+
+export interface RoutesProps {
+  children: Child;
+  fallback?: Child;
+}
+
+/**
+ * Routes outlet matching the current URL to registered Route definitions
+ */
+export function Routes(props: RoutesProps): Child {
+  const router = useContext(RouterContext);
+  if (!router) {
+    throw new Error("<Routes> must be rendered inside a <Router>");
+  }
+
+  const _ =
+    typeof props.children === "function" ? (props.children as () => Child)() : props.children;
+
+  return Show({
+    when: () => router.matchedRoute() !== null,
+    fallback: props.fallback ?? (() => document.createTextNode("404 Not Found")),
+    children: () => {
+      const match = router.matchedRoute();
+      if (!match) return null;
+
+      if (match.component) {
+        return match.component({ params: match.params });
+      }
+      return match.children ?? null;
+    }
+  });
+}
+
+export interface LinkProps {
+  href: string;
+  class?: string | (() => string);
+  activeClass?: string;
+  replace?: boolean;
+  children: Child;
+  [key: string]: any;
+}
+
+/**
+ * Accessible client-side navigation Link with active state highlighting
+ */
+export function Link(props: LinkProps): Child {
+  const router = useContext(RouterContext);
+  const { href, class: className, activeClass = "active", replace, children, ...rest } = props;
+
+  const handleClick = (e: MouseEvent) => {
+    if (e.ctrlKey || e.metaKey || e.altKey || e.shiftKey || e.button !== 0) {
+      return;
+    }
+
+    e.preventDefault();
+    if (router) {
+      router.navigate(href, { replace });
+    } else if (typeof window !== "undefined") {
+      window.location.href = href;
+    }
+  };
+
+  const isActive = computed(() => {
+    if (!router) return false;
+    const current = router.location.pathname();
+    return current === href || (href !== "/" && current.startsWith(href));
+  });
+
+  const computedClass = computed(() => {
+    const baseCls = typeof className === "function" ? className() : (className ?? "");
+    if (activeClass && isActive()) {
+      return baseCls ? `${baseCls} ${activeClass}` : activeClass;
+    }
+    return baseCls;
+  });
+
+  return (
+    <a href={href} class={computedClass} onClick={handleClick} {...rest}>
+      {children}
+    </a>
+  );
+}
+
+/**
+ * Access the active router location state signals
+ */
+export function useLocation(): LocationState {
+  const router = useContext(RouterContext);
+  if (!router) throw new Error("useLocation must be used within a <Router>");
+  return router.location;
+}
+
+/**
+ * Access the imperative navigate function
+ */
+export function useNavigate(): (to: string, options?: { replace?: boolean }) => void {
+  const router = useContext(RouterContext);
+  if (!router) throw new Error("useNavigate must be used within a <Router>");
+  return router.navigate;
+}
+
+/**
+ * Access reactive URL parameter signals
+ */
+export function useParams<T extends Record<string, string> = Record<string, string>>(): () => T {
+  const router = useContext(RouterContext);
+  if (!router) throw new Error("useParams must be used within a <Router>");
+  return () => router.params() as T;
+}
+
+/**
+ * Access and manipulate URL query search parameters reactively
+ */
+export function useSearchParams(): [
+  () => URLSearchParams,
+  (params: Record<string, string> | URLSearchParams) => void
+] {
+  const router = useContext(RouterContext);
+  if (!router) throw new Error("useSearchParams must be used within a <Router>");
+
+  const params = computed(() => new URLSearchParams(router.location.search()));
+
+  const setSearchParams = (next: Record<string, string> | URLSearchParams) => {
+    const sp = next instanceof URLSearchParams ? next : new URLSearchParams(next);
+    const queryString = sp.toString();
+    const newUrl = `${router.location.pathname()}${queryString ? `?${queryString}` : ""}${router.location.hash()}`;
+    router.navigate(newUrl);
+  };
+
+  return [params, setSearchParams];
+}
+
+export { lazy } from "../dom";

package/src/rpc/client.ts

@@ -0,0 +1,317 @@
+import { createMutation } from "../query/create-mutation";
+import { createQuery } from "../query/create-query";
+import { RPCError } from "./error";
+import { matchesRulePattern } from "./server";
+import type {
+  ClientOptions,
+  ClientRouter,
+  Router,
+  RPCResponse,
+  SubscriptionCallbacks,
+  SubscriptionHandle
+} from "./types";
+
+async function resolveHeaders(
+  headers?:
+    | Record<string, string>
+    | Record<string, any>
+    | (() => Promise<Record<string, string>> | Record<string, string>),
+  fullPath = ""
+): Promise<Record<string, string>> {
+  if (!headers) return {};
+  if (typeof headers === "function") {
+    return await headers();
+  }
+
+  const result: Record<string, string> = {};
+  for (const [key, val] of Object.entries(headers)) {
+    if (typeof val === "object" || typeof val === "function") {
+      if (matchesRulePattern(key, fullPath, fullPath)) {
+        const resolved = typeof val === "function" ? await val() : val;
+        if (resolved && typeof resolved === "object") {
+          Object.assign(result, resolved);
+        }
+      }
+    } else if (typeof val === "string") {
+      result[key] = val;
+    }
+  }
+  return result;
+}
+
+function createProxyPath(options: ClientOptions, path: string[] = []): any {
+  return new Proxy(
+    {},
+    {
+      get(_target, prop: string) {
+        if (prop === "then") return undefined;
+
+        if (prop === "query") {
+          return async (
+            input?: unknown,
+            callOpts?: { signal?: AbortSignal; headers?: Record<string, string> }
+          ) => {
+            const fetchFn = options.fetch ?? globalThis.fetch;
+            const baseUrl = options.baseUrl.replace(/\/+$/, "");
+            const fullPath = path.join(".");
+            let url = `${baseUrl}/${fullPath}`;
+
+            if (input !== undefined) {
+              const serialized = JSON.stringify(input);
+              url += `${url.includes("?") ? "&" : "?"}input=${encodeURIComponent(serialized)}`;
+            }
+
+            const dynamicHeaders = await resolveHeaders(options.headers, fullPath);
+            const headers = {
+              Accept: "application/json",
+              ...dynamicHeaders,
+              ...callOpts?.headers
+            };
+
+            const devtools =
+              typeof window !== "undefined" ? (window as any).__VISAGE_DEVTOOLS__ : null;
+            const logId = devtools?.logRpcCall({
+              id: `rpc_${Date.now()}_${Math.random().toString(36).slice(2, 6)}`,
+              path: fullPath,
+              type: "query",
+              input
+            });
+
+            try {
+              const res = await fetchFn(url, {
+                method: "GET",
+                headers,
+                signal: callOpts?.signal
+              });
+
+              const body: RPCResponse = await res.json();
+              if ("error" in body) {
+                devtools?.updateRpcCall(logId, { status: "error", error: body.error });
+                throw new RPCError({
+                  code: body.error.code,
+                  message: body.error.message,
+                  issues: body.error.issues
+                });
+              }
+
+              devtools?.updateRpcCall(logId, { status: "success", response: body.result.data });
+              return body.result.data;
+            } catch (err) {
+              devtools?.updateRpcCall(logId, { status: "error", error: err });
+              throw err;
+            }
+          };
+        }
+
+        if (prop === "mutate") {
+          return async (
+            input?: unknown,
+            callOpts?: { signal?: AbortSignal; headers?: Record<string, string> }
+          ) => {
+            const fetchFn = options.fetch ?? globalThis.fetch;
+            const baseUrl = options.baseUrl.replace(/\/+$/, "");
+            const fullPath = path.join(".");
+            const url = `${baseUrl}/${fullPath}`;
+
+            const dynamicHeaders = await resolveHeaders(options.headers, fullPath);
+            const headers = {
+              "Content-Type": "application/json",
+              Accept: "application/json",
+              ...dynamicHeaders,
+              ...callOpts?.headers
+            };
+
+            const devtools =
+              typeof window !== "undefined" ? (window as any).__VISAGE_DEVTOOLS__ : null;
+            const logId = devtools?.logRpcCall({
+              id: `rpc_${Date.now()}_${Math.random().toString(36).slice(2, 6)}`,
+              path: fullPath,
+              type: "mutation",
+              input
+            });
+
+            try {
+              const res = await fetchFn(url, {
+                method: "POST",
+                headers,
+                body: JSON.stringify({ input }),
+                signal: callOpts?.signal
+              });
+
+              const body: RPCResponse = await res.json();
+              if ("error" in body) {
+                devtools?.updateRpcCall(logId, { status: "error", error: body.error });
+                throw new RPCError({
+                  code: body.error.code,
+                  message: body.error.message,
+                  issues: body.error.issues
+                });
+              }
+
+              devtools?.updateRpcCall(logId, { status: "success", response: body.result.data });
+              return body.result.data;
+            } catch (err) {
+              devtools?.updateRpcCall(logId, { status: "error", error: err });
+              throw err;
+            }
+          };
+        }
+
+        if (prop === "subscribe") {
+          return (input: unknown, callbacks: SubscriptionCallbacks): SubscriptionHandle => {
+            const fetchFn = options.fetch ?? globalThis.fetch;
+            const baseUrl = options.baseUrl.replace(/\/+$/, "");
+            const fullPath = path.join(".");
+            let url = `${baseUrl}/${fullPath}`;
+
+            if (input !== undefined) {
+              const serialized = JSON.stringify(input);
+              url += `${url.includes("?") ? "&" : "?"}input=${encodeURIComponent(serialized)}`;
+            }
+
+            const controller = new AbortController();
+            const devtools =
+              typeof window !== "undefined" ? (window as any).__VISAGE_DEVTOOLS__ : null;
+            const logId = devtools?.logRpcCall({
+              id: `rpc_${Date.now()}_${Math.random().toString(36).slice(2, 6)}`,
+              path: fullPath,
+              type: "subscription",
+              input
+            });
+
+            (async () => {
+              try {
+                const dynamicHeaders = await resolveHeaders(options.headers, fullPath);
+                const headers = {
+                  Accept: "text/event-stream",
+                  ...dynamicHeaders
+                };
+
+                const res = await fetchFn(url, {
+                  method: "GET",
+                  headers,
+                  signal: controller.signal
+                });
+
+                if (!res.ok || !res.body) {
+                  throw new Error(`Subscription connection failed with status ${res.status}`);
+                }
+
+                const reader = res.body.getReader();
+                const decoder = new TextDecoder();
+                let buffer = "";
+
+                while (true) {
+                  const { done, value } = await reader.read();
+                  if (done) break;
+
+                  buffer += decoder.decode(value, { stream: true });
+                  const lines = buffer.split("\n\n");
+                  buffer = lines.pop() ?? "";
+
+                  for (const line of lines) {
+                    const trimmed = line.trim();
+                    if (trimmed.startsWith("data:")) {
+                      const jsonStr = trimmed.slice(5).trim();
+                      try {
+                        const parsed = JSON.parse(jsonStr);
+                        devtools?.logRpcEvent(logId, parsed);
+                        callbacks.onData(parsed);
+                      } catch (parseErr) {
+                        devtools?.updateRpcCall(logId, { status: "error", error: parseErr });
+                        callbacks.onError?.(parseErr);
+                      }
+                    } else if (trimmed.startsWith("event: error")) {
+                      devtools?.updateRpcCall(logId, { status: "error" });
+                      callbacks.onError?.(new Error("Server event stream error"));
+                    }
+                  }
+                }
+
+                callbacks.onComplete?.();
+              } catch (err: any) {
+                if (!controller.signal.aborted) {
+                  callbacks.onError?.(err);
+                }
+              }
+            })();
+
+            return {
+              unsubscribe: () => {
+                controller.abort();
+              }
+            };
+          };
+        }
+
+        if (prop === "queryKey") {
+          return (input?: unknown) => {
+            const resolvedInput = typeof input === "function" ? (input as () => unknown)() : input;
+            const key: unknown[] = [...path];
+            if (resolvedInput !== undefined) {
+              key.push(resolvedInput);
+            }
+            return key;
+          };
+        }
+
+        if (prop === "queryOptions") {
+          return (input?: unknown, extra?: Record<string, unknown>) => {
+            const resolvedInput = typeof input === "function" ? (input as () => unknown)() : input;
+            const key: unknown[] = [...path];
+            if (resolvedInput !== undefined) {
+              key.push(resolvedInput);
+            }
+            return {
+              queryKey: key,
+              queryFn: ({ signal }: { signal: AbortSignal }) => {
+                const queryFn = createProxyPath(options, path).query;
+                return queryFn(resolvedInput, { signal });
+              },
+              ...extra
+            };
+          };
+        }
+
+        if (prop === "createQuery" || prop === "useQuery") {
+          return (input?: unknown, extra?: Record<string, unknown>) => {
+            const proxy = createProxyPath(options, path);
+            return createQuery(() => proxy.queryOptions(input, extra));
+          };
+        }
+
+        if (prop === "mutationKey") {
+          return () => [...path];
+        }
+
+        if (prop === "mutationOptions") {
+          return (extra?: Record<string, unknown>) => {
+            return {
+              mutationKey: [...path],
+              mutationFn: (input: unknown) => {
+                const mutateFn = createProxyPath(options, path).mutate;
+                return mutateFn(input);
+              },
+              ...extra
+            };
+          };
+        }
+
+        if (prop === "createMutation" || prop === "useMutation") {
+          return (extra?: Record<string, unknown>) => {
+            const proxy = createProxyPath(options, path);
+            return createMutation(proxy.mutationOptions(extra));
+          };
+        }
+
+        return createProxyPath(options, [...path, prop]);
+      }
+    }
+  );
+}
+
+export function createClient<TRouter extends Router<any, any>>(
+  options: ClientOptions
+): ClientRouter<TRouter> {
+  return createProxyPath(options, []) as ClientRouter<TRouter>;
+}