@pramen/react 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+import type { Input, PramenClient, Output } from "@pramen/client";
+export interface LiveQueryState<T> {
+    data: T | undefined;
+    error: {
+        error: string;
+        code: string;
+    } | null;
+    loading: boolean;
+}
+export declare function useLiveQuery<Api, K extends keyof Api & string>(client: PramenClient<Api>, name: K, input?: Input<Api, K>): LiveQueryState<Output<Api, K>>;
+export declare function useMutation<Api, K extends keyof Api & string>(client: PramenClient<Api>, name: K): (input?: Input<Api, K>) => Promise<Output<Api, K>>;

package/dist/index.js

@@ -0,0 +1,36 @@
+// @pramen/react — React hooks over @pramen/client.
+//
+//   const client = createClient<typeof app.handlers>({ url, token, tenant });
+//   function Notes() {
+//     const { data, loading } = useLiveQuery(client, "listNotes");
+//     const createNote = useMutation(client, "createNote");
+//     ...
+//   }
+//
+// useLiveQuery opens a live subscription and re-renders on every server push
+// (row-level — only when this query's result actually changed).
+import { useCallback, useEffect, useRef, useState } from "react";
+export function useLiveQuery(client, name, input) {
+    const [state, setState] = useState({
+        data: undefined,
+        error: null,
+        loading: true,
+    });
+    // Re-subscribe only when the query identity changes.
+    const key = JSON.stringify([name, input ?? null]);
+    const inputRef = useRef(input);
+    inputRef.current = input;
+    useEffect(() => {
+        setState((s) => ({ ...s, loading: true }));
+        const stop = client.subscribe(name, inputRef.current, {
+            onData: (result) => setState({ data: result, error: null, loading: false }),
+            onError: (err) => setState((s) => ({ ...s, error: err, loading: false })),
+        });
+        return stop;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [client, name, key]);
+    return state;
+}
+export function useMutation(client, name) {
+    return useCallback((input) => client.call(name, input), [client, name]);
+}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@pramen/react",
+  "version": "0.0.1",
+  "description": "React hooks for a pramen backend — useLiveQuery (reactive) + useMutation.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/netvarec/pramen.git",
+    "directory": "packages/react"
+  },
+  "homepage": "https://github.com/netvarec/pramen#readme",
+  "bugs": "https://github.com/netvarec/pramen/issues",
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "development": "./src/index.ts",
+      "bun": "./src/index.ts",
+      "workerd": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": ["dist", "src"],
+  "scripts": {
+    "build": "rm -rf dist && tsc -p tsconfig.build.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@pramen/client": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  }
+}

package/src/index.ts

@@ -0,0 +1,56 @@
+// @pramen/react — React hooks over @pramen/client.
+//
+//   const client = createClient<typeof app.handlers>({ url, token, tenant });
+//   function Notes() {
+//     const { data, loading } = useLiveQuery(client, "listNotes");
+//     const createNote = useMutation(client, "createNote");
+//     ...
+//   }
+//
+// useLiveQuery opens a live subscription and re-renders on every server push
+// (row-level — only when this query's result actually changed).
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { Input, PramenClient, Output } from "@pramen/client";
+
+export interface LiveQueryState<T> {
+  data: T | undefined;
+  error: { error: string; code: string } | null;
+  loading: boolean;
+}
+
+export function useLiveQuery<Api, K extends keyof Api & string>(
+  client: PramenClient<Api>,
+  name: K,
+  input?: Input<Api, K>,
+): LiveQueryState<Output<Api, K>> {
+  const [state, setState] = useState<LiveQueryState<Output<Api, K>>>({
+    data: undefined,
+    error: null,
+    loading: true,
+  });
+
+  // Re-subscribe only when the query identity changes.
+  const key = JSON.stringify([name, input ?? null]);
+  const inputRef = useRef(input);
+  inputRef.current = input;
+
+  useEffect(() => {
+    setState((s) => ({ ...s, loading: true }));
+    const stop = client.subscribe(name, inputRef.current, {
+      onData: (result) => setState({ data: result, error: null, loading: false }),
+      onError: (err) => setState((s) => ({ ...s, error: err, loading: false })),
+    });
+    return stop;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [client, name, key]);
+
+  return state;
+}
+
+export function useMutation<Api, K extends keyof Api & string>(
+  client: PramenClient<Api>,
+  name: K,
+): (input?: Input<Api, K>) => Promise<Output<Api, K>> {
+  return useCallback((input?: Input<Api, K>) => client.call(name, input), [client, name]);
+}