@toapi/react 0.1.0

package/README.md

@@ -0,0 +1,36 @@
+# @toapi/react
+
+React-Binding for [Toapi](https://www.npmjs.com/package/@toapi/client)
+
+## Installation
+```bash
+npm install @toapi/react
+yarn add @toapi/react
+pnpm add @toapi/react
+bun add @toapi/react
+```
+
+## Usage
+```tsx
+import { useQuery } from '@toapi/react';
+import { client } from "/path/to/tapi-client";
+import { use } from 'react';
+
+function Page() {
+  const booksPromise = useQuery(client.books.get())
+  const books = use(booksPromise)
+
+  return (
+    <div>
+      {books.map(item => (
+        <div key={item.id}>{item.name}</div>
+      ))}
+    </div>
+  );
+}
+```
+
+## What does this do?
+It subscribes Toapi's internal PubSub system to get updates on the data when it is invalidated through TApi's tag-based cache invalication mechanism or manually using the revalidate methods of the TApi client, e.G. `client.books.revalidate()`.
+
+Note that `useQuery` actaully returns a `Promise` which can be passed to client components for granular control of loading states using `Suspense`-Boundaries.

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { useQuery } from "./use-query";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC"}

package/dist/index.js

@@ -0,0 +1 @@
+export { useQuery } from "./use-query";

package/dist/use-lacy.d.ts

@@ -0,0 +1,11 @@
+import type { Observable } from "@farbenmeer/tapi/client";
+import * as React from "react";
+type ObservablePromise<T> = Promise<T> & Observable<T>;
+interface Options {
+    startTransition?: typeof React.startTransition;
+    onError?: (error: Error) => void;
+    swr?: boolean;
+}
+export declare function useLacy<T>(query: ObservablePromise<T> | (() => ObservablePromise<T>), options?: Options): import("@farbenmeer/lacy").LacyPromise<T, never>;
+export {};
+//# sourceMappingURL=use-lacy.d.ts.map

package/dist/use-lacy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-lacy.d.ts","sourceRoot":"","sources":["../src/use-lacy.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,KAAK,iBAAiB,CAAC,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;AAEvD,UAAU,OAAO;IACf,eAAe,CAAC,EAAE,OAAO,KAAK,CAAC,eAAe,CAAC;IAC/C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AAED,wBAAgB,OAAO,CAAC,CAAC,EACvB,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,iBAAiB,CAAC,CAAC,CAAC,CAAC,EAC1D,OAAO,GAAE,OAAY,oDAuCtB"}

package/dist/use-lacy.js

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { lacy } from "@farbenmeer/lacy";
+export function useLacy(query, options = {}) {
+    const optionsRef = React.useRef(options);
+    optionsRef.current = options;
+    const observable = React.useMemo(typeof query === "function" ? query : () => query, [query]);
+    const [data, setData] = React.useState(observable);
+    React.useEffect(() => {
+        const unsubscribe = observable.subscribe((next) => {
+            const { startTransition = React.startTransition, onError, swr, } = optionsRef.current;
+            startTransition(async () => {
+                if (swr) {
+                    try {
+                        await next;
+                        setData(next);
+                    }
+                    catch (error) {
+                        onError?.(error);
+                    }
+                }
+                else {
+                    setData(next);
+                    try {
+                        await next;
+                    }
+                    catch (error) {
+                        onError?.(error);
+                    }
+                }
+            });
+        });
+        return unsubscribe;
+    }, [observable]);
+    return React.useMemo(() => lacy(data), [data]);
+}

package/dist/use-query.d.ts

@@ -0,0 +1,9 @@
+import type { Observable } from "@toapi/client";
+import * as React from "react";
+type ObservablePromise<T> = Promise<T> & Observable<T>;
+interface Options {
+    startTransition?: typeof React.startTransition;
+}
+export declare function useQuery<T>(query: ObservablePromise<T> | (() => ObservablePromise<T>), { startTransition }?: Options): T;
+export {};
+//# sourceMappingURL=use-query.d.ts.map

package/dist/use-query.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-query.d.ts","sourceRoot":"","sources":["../src/use-query.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,KAAK,iBAAiB,CAAC,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;AAEvD,UAAU,OAAO;IACf,eAAe,CAAC,EAAE,OAAO,KAAK,CAAC,eAAe,CAAC;CAChD;AAID,wBAAgB,QAAQ,CAAC,CAAC,EACxB,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,iBAAiB,CAAC,CAAC,CAAC,CAAC,EAC1D,EAAE,eAAuC,EAAE,GAAE,OAAY,KAkB1D"}

package/dist/use-query.js

@@ -0,0 +1,15 @@
+import * as React from "react";
+const noValue = Symbol("ReactTApi:noValue");
+export function useQuery(query, { startTransition = React.startTransition } = {}) {
+    const observable = React.useMemo(typeof query === "function" ? query : () => query, [query]);
+    const [data, setData] = React.useState(noValue);
+    React.useEffect(() => {
+        const unsubscribe = observable.subscribe((next) => {
+            startTransition(async () => {
+                setData(await next);
+            });
+        });
+        return unsubscribe;
+    }, [observable]);
+    return data === noValue ? React.use(observable) : data;
+}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@toapi/react",
+  "version": "0.1.0",
+  "author": {
+    "name": "Michel Smola",
+    "email": "michel.smola@farbenmeer.de"
+  },
+  "type": "module",
+  "module": "dist/index.js",
+  "main": "dist/index.js",
+  "private": false,
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/farbenmeer/tapi.git"
+  },
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "@happy-dom/global-registrator": "^20.0.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/react": "^16.3.0",
+    "@types/node": "^25.0.3",
+    "@types/react": "^19.2.7",
+    "react": "^19.1.1",
+    "vitest": "^4.0.16",
+    "zod": "^4.1.5",
+    "@toapi/client": "^0.12.1",
+    "@toapi/server": "^0.12.1"
+  },
+  "peerDependencies": {
+    "react": "^19.1.1",
+    "typescript": "^5 || ^6.0.0",
+    "@toapi/client": "^0.12.1"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "release": "pnpm run build && pnpm publish --no-git-checks",
+    "test": "vitest"
+  }
+}