@toapi/react 1.2.4 → 1.3.0

package/README.md

@@ -2,6 +2,8 @@
 
 React-Binding for [Toapi](https://www.npmjs.com/package/@toapi/client)
 
+📚 [Docs](https://toapi-js.github.io/toapi/react/)
+
 ## Installation
 ```bash
 npm install @toapi/react

package/dist/observable-promise.d.ts

@@ -0,0 +1,3 @@
+import type { Observable } from "@toapi/common";
+export type ObservablePromise<T> = Promise<T> & Observable<T>;
+//# sourceMappingURL=observable-promise.d.ts.map

package/dist/observable-promise.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"observable-promise.d.ts","sourceRoot":"","sources":["../src/observable-promise.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,MAAM,MAAM,iBAAiB,CAAC,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC"}

package/dist/unstable/use-cursor-query.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { ObservablePromise } from "../observable-promise";
+interface Options {
+    startTransition?: typeof React.startTransition;
+}
+export declare function useCursorQuery<T extends {
+    cursor: string;
+}>(query: (cursor: string) => ObservablePromise<T[]>, { startTransition }?: Options): T[][];
+export {};
+//# sourceMappingURL=use-cursor-query.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-cursor-query.d.ts","sourceRoot":"","sources":["../../src/unstable/use-cursor-query.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE/D,UAAU,OAAO;IACf,eAAe,CAAC,EAAE,OAAO,KAAK,CAAC,eAAe,CAAC;CAChD;AAID,wBAAgB,cAAc,CAAC,CAAC,SAAS;IAAE,MAAM,EAAE,MAAM,CAAA;CAAE,EACzD,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,iBAAiB,CAAC,CAAC,EAAE,CAAC,EACjD,EAAE,eAAuC,EAAE,GAAE,OAAY,SAK1D"}

package/dist/unstable/use-cursor-query.js

@@ -0,0 +1,5 @@
+import React from "react";
+export function useCursorQuery(query, { startTransition = React.startTransition } = []) {
+    const [pages, setPages] = React.useState([]);
+    return React.useMemo(() => [pages.flatMap((page) => page.items)], [pages]);
+}

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

@@ -1,4 +1,4 @@
-import type { Observable } from "@toapi/common";
+import { type Observable } from "@toapi/common";
 import * as React from "react";
 type ObservablePromise<T> = Promise<T> & Observable<T>;
 interface Options {

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

@@ -1 +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;AAED,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,KAkC1D"}
+{"version":3,"file":"use-query.d.ts","sourceRoot":"","sources":["../src/use-query.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,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;AAED,wBAAgB,QAAQ,CAAC,CAAC,EAExB,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,iBAAiB,CAAC,CAAC,CAAC,CAAC,EAC1D,EAAE,eAAuC,EAAE,GAAE,OAAY,KA0C1D"}

package/dist/use-query.js

@@ -1,28 +1,38 @@
+import {} from "@toapi/common";
 import * as React from "react";
-export function useQuery(query, { startTransition = React.startTransition } = {}) {
-    const observable = React.useMemo(typeof query === "function" ? query : () => query, [query]);
-    // The value is kept together with the observable it was loaded for.
-    // Revalidation pushes a new promise for the *same* query, so the stored
-    // value stays valid; a different query invalidates it and we fall back to
-    // `use`, which suspends instead of rendering the previous query's data.
+export function useQuery(
+// TODO remove the useless function-form in next major release
+query, { startTransition = React.startTransition } = {}) {
+    const observable = typeof query === "function" ? query() : query;
+    const queryKey = observable.queryKey ?? null;
     const [state, setState] = React.useState(null);
     React.useEffect(() => {
         let active = true;
         const unsubscribe = observable.subscribe((next) => {
             startTransition(async () => {
-                const value = await next;
-                // A late update from a subscription we have already left behind must
-                // not overwrite the current one.
-                if (active)
-                    setState({ source: observable, value });
+                try {
+                    const value = await next;
+                    // A late update from a subscription we have already left behind must
+                    // not overwrite the current one.
+                    if (active)
+                        setState({ promise: next, queryKey, value });
+                }
+                catch { }
             });
         });
         return () => {
             active = false;
             unsubscribe();
         };
-    }, [observable]);
-    return state !== null && state.source === observable
-        ? state.value
-        : React.use(observable);
+    }, [queryKey, startTransition]);
+    if (!state) {
+        return React.use(observable);
+    }
+    if (state.queryKey !== observable.queryKey) {
+        return React.use(observable);
+    }
+    if (state.promise === observable) {
+        return React.use(observable);
+    }
+    return state.value;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toapi/react",
-  "version": "1.2.4",
+  "version": "1.3.0",
   "author": {
     "name": "Michel Smola",
     "email": "michel.smola@farbenmeer.de"
@@ -12,34 +12,36 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/farbenmeer/tapi.git"
+    "url": "git+https://github.com/toapi-js/toapi.git"
   },
   "files": [
     "dist"
   ],
   "dependencies": {
-    "@toapi/common": "^1.2.4"
+    "@toapi/common": "^1.3.0"
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "^20.0.0",
     "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/jest-dom": "^7.0.0",
     "@testing-library/react": "^16.3.0",
+    "@toapi/client": "^1.3.0",
+    "@toapi/server": "^1.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/server": "^1.2.4",
-    "@toapi/client": "^1.2.4"
+    "react-dom": "^19.3.0",
+    "react-error-boundary": "^6.1.5",
+    "vitest": "^5.0.0",
+    "zod": "^4.1.5"
   },
   "peerDependencies": {
     "react": "^19.1.1",
-    "typescript": "^5 || ^6.0.0"
+    "typescript": "^5 || ^6.0.0 || ^7.0.0"
   },
   "scripts": {
     "build": "tsc -p tsconfig.build.json",
     "release": "pnpm run build && pnpm publish --no-git-checks",
-    "test": "vitest"
+    "test": "vitest run"
   }
 }