@based/react 4.3.1 → 4.4.0

package/dist/Ctx.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { BasedClient } from '@based/client';
+export declare const Ctx: import("react").Context<BasedClient>;

package/dist/Ctx.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Ctx = void 0;
+const react_1 = require("react");
+exports.Ctx = (0, react_1.createContext)(null);
+//# sourceMappingURL=Ctx.js.map

package/dist/Ctx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Ctx.js","sourceRoot":"","sources":["../src/Ctx.ts"],"names":[],"mappings":";;;AAAA,iCAAqC;AAGxB,QAAA,GAAG,GAAG,IAAA,qBAAa,EAAc,IAAI,CAAC,CAAA"}

package/dist/Provider.d.ts

@@ -0,0 +1,6 @@
+import { FC, ReactNode } from 'react';
+import { BasedClient } from '@based/client';
+export declare const Provider: FC<{
+    client: BasedClient;
+    children: ReactNode;
+}>;

package/dist/Provider.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Provider = void 0;
+const react_1 = require("react");
+const Ctx_1 = require("./Ctx");
+const Provider = ({ client, children }) => {
+    return (0, react_1.createElement)(Ctx_1.Ctx.Provider, { value: client }, children);
+};
+exports.Provider = Provider;
+//# sourceMappingURL=Provider.js.map

package/dist/Provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Provider.js","sourceRoot":"","sources":["../src/Provider.ts"],"names":[],"mappings":";;;AAAA,iCAAoD;AAEpD,+BAA2B;AAEpB,MAAM,QAAQ,GAGhB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC5B,OAAO,IAAA,qBAAa,EAAC,SAAG,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,QAAQ,CAAC,CAAA;AACjE,CAAC,CAAA;AALY,QAAA,QAAQ,YAKpB"}

package/dist/index.d.ts

@@ -1,21 +1,8 @@
-import { FC, ReactNode } from 'react';
-import { BasedClient, AuthState } from '@based/client';
-import { BasedError } from '@based/client';
-export declare const Provider: FC<{
-    client: BasedClient;
-    children: ReactNode;
-}>;
-export declare const useAuthState: () => AuthState;
-export declare const useLoading: () => boolean;
-export declare const useConnected: () => {
-    connected: boolean;
-};
-export declare const useQuery: <T = any>(name?: string, payload?: any, opts?: {
-    persistent: boolean;
-}) => {
-    loading: boolean;
-    data?: T;
-    error?: BasedError;
-    checksum?: number;
-};
-export declare const useClient: () => BasedClient;
+export * from './Ctx';
+export * from './Provider';
+export * from './useAuthState';
+export * from './useClient';
+export * from './useConnected';
+export * from './useLoading';
+export * from './useQuery';
+export * from './useWindow';

package/dist/index.js

@@ -1,120 +1,25 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useClient = exports.useQuery = exports.useConnected = exports.useLoading = exports.useAuthState = exports.Provider = void 0;
-const react_1 = require("react");
-const Ctx = (0, react_1.createContext)(null);
-const Provider = ({ client, children }) => {
-    return (0, react_1.createElement)(Ctx.Provider, { value: client }, children);
-};
-exports.Provider = Provider;
-const useAuthState = () => {
-    const client = (0, react_1.useContext)(Ctx);
-    const [state, setState] = (0, react_1.useState)(client?.authState || {});
-    (0, react_1.useEffect)(() => {
-        if (client) {
-            setState(client.authState);
-            const listener = (authState) => {
-                setState(authState);
-            };
-            client.on('authstate-change', listener);
-            return () => client.off('authstate-change', listener);
-        }
-    }, [client]);
-    return state;
-};
-exports.useAuthState = useAuthState;
-const useLoadingListeners = new Set();
-const hooksLoading = new Set();
-const useLoading = () => {
-    const [isLoading, setLoading] = (0, react_1.useState)(hooksLoading.size > 0);
-    (0, react_1.useEffect)(() => {
-        useLoadingListeners.add(setLoading);
-        return () => {
-            useLoadingListeners.delete(setLoading);
-        };
-    }, []);
-    return isLoading;
-};
-exports.useLoading = useLoading;
-const useConnected = () => {
-    const client = (0, react_1.useContext)(Ctx);
-    const [connected, setConnected] = (0, react_1.useState)(client.connected);
-    (0, react_1.useEffect)(() => {
-        if (client) {
-            setConnected(client.connected);
-            const listener = () => {
-                setConnected(client.connected);
-            };
-            client.on('disconnect', listener);
-            client.on('reconnect', listener);
-            client.on('connect', listener);
-            return () => {
-                client.off('disconnect', listener);
-                client.off('reconnect', listener);
-                client.off('connect', listener);
-            };
-        }
-    }, [client]);
-    return { connected };
-};
-exports.useConnected = useConnected;
-const useQuery = (name, payload, opts) => {
-    const client = (0, react_1.useContext)(Ctx);
-    if (client && name) {
-        const q = client.query(name, payload, opts);
-        const { id, cache } = q;
-        const [checksumOrError, update] = (0, react_1.useState)(cache?.checksum);
-        (0, react_1.useEffect)(() => {
-            const unsubscribe = q.subscribe((_, checksum) => {
-                update(checksum);
-            }, (err) => {
-                update(err);
-            });
-            return () => {
-                const isLoading = hooksLoading.size > 0;
-                if (hooksLoading.delete(id) && !(hooksLoading.size > 0) && isLoading) {
-                    useLoadingListeners.forEach((fn) => {
-                        fn(false);
-                    });
-                }
-                unsubscribe();
-                update(0);
-            };
-        }, [id]);
-        if (checksumOrError) {
-            const isLoading = hooksLoading.size > 0;
-            if (hooksLoading.delete(id)) {
-                if (!(hooksLoading.size > 0) && isLoading) {
-                    useLoadingListeners.forEach((fn) => {
-                        fn(false);
-                    });
-                }
-            }
-            if (typeof checksumOrError === 'number') {
-                if (!cache) {
-                    return { loading: true };
-                }
-                return { loading: false, data: cache.value, checksum: checksumOrError };
-            }
-            return { loading: false, error: checksumOrError };
-        }
-        const isLoading = hooksLoading.size > 0;
-        if (hooksLoading.add(id)) {
-            if (!isLoading) {
-                useLoadingListeners.forEach((fn) => {
-                    fn(true);
-                });
-            }
-        }
-        return { loading: true };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
     }
-    (0, react_1.useState)();
-    (0, react_1.useEffect)(() => { }, [null]);
-    return { loading: true };
-};
-exports.useQuery = useQuery;
-const useClient = () => {
-    return (0, react_1.useContext)(Ctx);
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
-exports.useClient = useClient;
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Ctx"), exports);
+__exportStar(require("./Provider"), exports);
+__exportStar(require("./useAuthState"), exports);
+__exportStar(require("./useClient"), exports);
+__exportStar(require("./useConnected"), exports);
+__exportStar(require("./useLoading"), exports);
+__exportStar(require("./useQuery"), exports);
+__exportStar(require("./useWindow"), exports);
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,wCAAqB;AACrB,6CAA0B;AAC1B,iDAA8B;AAC9B,8CAA2B;AAC3B,iDAA8B;AAC9B,+CAA4B;AAC5B,6CAA0B;AAC1B,8CAA2B"}

package/dist/useAuthState.d.ts

@@ -0,0 +1,2 @@
+import { AuthState } from '@based/client';
+export declare const useAuthState: () => AuthState;

package/dist/useAuthState.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAuthState = void 0;
+const react_1 = require("react");
+const Ctx_1 = require("./Ctx");
+const useAuthState = () => {
+    const client = (0, react_1.useContext)(Ctx_1.Ctx);
+    const [state, setState] = (0, react_1.useState)(client?.authState || {});
+    (0, react_1.useEffect)(() => {
+        if (client) {
+            setState(client.authState);
+            const listener = (authState) => {
+                setState(authState);
+            };
+            client.on('authstate-change', listener);
+            return () => client.off('authstate-change', listener);
+        }
+    }, [client]);
+    return state;
+};
+exports.useAuthState = useAuthState;
+//# sourceMappingURL=useAuthState.js.map

package/dist/useAuthState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAuthState.js","sourceRoot":"","sources":["../src/useAuthState.ts"],"names":[],"mappings":";;;AAAA,iCAAuD;AAEvD,+BAA2B;AAEpB,MAAM,YAAY,GAAG,GAAc,EAAE;IAC1C,MAAM,MAAM,GAAgB,IAAA,kBAAU,EAAC,SAAG,CAAC,CAAA;IAC3C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAY,MAAM,EAAE,SAAS,IAAI,EAAE,CAAC,CAAA;IAEtE,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,MAAM,EAAE;YACV,QAAQ,CAAC,MAAM,CAAC,SAAS,CAAC,CAAA;YAC1B,MAAM,QAAQ,GAAG,CAAC,SAAS,EAAE,EAAE;gBAC7B,QAAQ,CAAC,SAAS,CAAC,CAAA;YACrB,CAAC,CAAA;YACD,MAAM,CAAC,EAAE,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAA;YACvC,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAA;SACtD;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;IAEZ,OAAO,KAAK,CAAA;AACd,CAAC,CAAA;AAhBY,QAAA,YAAY,gBAgBxB"}

package/dist/useClient.d.ts

@@ -0,0 +1,2 @@
+import { BasedClient } from '@based/client';
+export declare const useClient: () => BasedClient;

package/dist/useClient.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useClient = void 0;
+const react_1 = require("react");
+const Ctx_1 = require("./Ctx");
+const useClient = () => {
+    return (0, react_1.useContext)(Ctx_1.Ctx);
+};
+exports.useClient = useClient;
+//# sourceMappingURL=useClient.js.map

package/dist/useClient.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useClient.js","sourceRoot":"","sources":["../src/useClient.ts"],"names":[],"mappings":";;;AAAA,iCAAkC;AAElC,+BAA2B;AAEpB,MAAM,SAAS,GAAG,GAAgB,EAAE;IACzC,OAAO,IAAA,kBAAU,EAAC,SAAG,CAAC,CAAA;AACxB,CAAC,CAAA;AAFY,QAAA,SAAS,aAErB"}

package/dist/useConnected.d.ts

@@ -0,0 +1,3 @@
+export declare const useConnected: () => {
+    connected: boolean;
+};

package/dist/useConnected.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useConnected = void 0;
+const react_1 = require("react");
+const Ctx_1 = require("./Ctx");
+const useConnected = () => {
+    const client = (0, react_1.useContext)(Ctx_1.Ctx);
+    const [connected, setConnected] = (0, react_1.useState)(client.connected);
+    (0, react_1.useEffect)(() => {
+        if (client) {
+            setConnected(client.connected);
+            const listener = () => {
+                setConnected(client.connected);
+            };
+            client.on('disconnect', listener);
+            client.on('reconnect', listener);
+            client.on('connect', listener);
+            return () => {
+                client.off('disconnect', listener);
+                client.off('reconnect', listener);
+                client.off('connect', listener);
+            };
+        }
+    }, [client]);
+    return { connected };
+};
+exports.useConnected = useConnected;
+//# sourceMappingURL=useConnected.js.map

package/dist/useConnected.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useConnected.js","sourceRoot":"","sources":["../src/useConnected.ts"],"names":[],"mappings":";;;AAAA,iCAAuD;AAEvD,+BAA2B;AAEpB,MAAM,YAAY,GAAG,GAAG,EAAE;IAC/B,MAAM,MAAM,GAAgB,IAAA,kBAAU,EAAC,SAAG,CAAC,CAAA;IAC3C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,MAAM,CAAC,SAAS,CAAC,CAAA;IAE5D,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,MAAM,EAAE;YACV,YAAY,CAAC,MAAM,CAAC,SAAS,CAAC,CAAA;YAC9B,MAAM,QAAQ,GAAG,GAAG,EAAE;gBACpB,YAAY,CAAC,MAAM,CAAC,SAAS,CAAC,CAAA;YAChC,CAAC,CAAA;YACD,MAAM,CAAC,EAAE,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAA;YACjC,MAAM,CAAC,EAAE,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;YAChC,MAAM,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAA;YAC9B,OAAO,GAAG,EAAE;gBACV,MAAM,CAAC,GAAG,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAA;gBAClC,MAAM,CAAC,GAAG,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;gBACjC,MAAM,CAAC,GAAG,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAA;YACjC,CAAC,CAAA;SACF;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;IAEZ,OAAO,EAAE,SAAS,EAAE,CAAA;AACtB,CAAC,CAAA;AAtBY,QAAA,YAAY,gBAsBxB"}

package/dist/useLoading.d.ts

@@ -0,0 +1,3 @@
+export declare const useLoadingListeners: Set<Function>;
+export declare const hooksLoading: Set<number>;
+export declare const useLoading: () => boolean;

package/dist/useLoading.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLoading = exports.hooksLoading = exports.useLoadingListeners = void 0;
+const react_1 = require("react");
+exports.useLoadingListeners = new Set();
+exports.hooksLoading = new Set();
+const useLoading = () => {
+    const [isLoading, setLoading] = (0, react_1.useState)(exports.hooksLoading.size > 0);
+    (0, react_1.useEffect)(() => {
+        exports.useLoadingListeners.add(setLoading);
+        return () => {
+            exports.useLoadingListeners.delete(setLoading);
+        };
+    }, []);
+    return isLoading;
+};
+exports.useLoading = useLoading;
+//# sourceMappingURL=useLoading.js.map

package/dist/useLoading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLoading.js","sourceRoot":"","sources":["../src/useLoading.ts"],"names":[],"mappings":";;;AAAA,iCAA2C;AAE9B,QAAA,mBAAmB,GAAkB,IAAI,GAAG,EAAE,CAAA;AAC9C,QAAA,YAAY,GAAgB,IAAI,GAAG,EAAE,CAAA;AAC3C,MAAM,UAAU,GAAG,GAAG,EAAE;IAC7B,MAAM,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAC,oBAAY,CAAC,IAAI,GAAG,CAAC,CAAC,CAAA;IAC/D,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,2BAAmB,CAAC,GAAG,CAAC,UAAU,CAAC,CAAA;QACnC,OAAO,GAAG,EAAE;YACV,2BAAmB,CAAC,MAAM,CAAC,UAAU,CAAC,CAAA;QACxC,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IACN,OAAO,SAAS,CAAA;AAClB,CAAC,CAAA;AATY,QAAA,UAAU,cAStB"}

package/dist/useQuery.d.ts

@@ -0,0 +1,9 @@
+import { BasedError } from '@based/client';
+export declare const useQuery: <T = any>(name?: string, payload?: any, opts?: {
+    persistent: boolean;
+}) => {
+    loading: boolean;
+    data?: T;
+    error?: BasedError;
+    checksum?: number;
+};

package/dist/useQuery.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useQuery = void 0;
+const react_1 = require("react");
+const Ctx_1 = require("./Ctx");
+const useLoading_1 = require("./useLoading");
+const useQuery = (name, payload, opts) => {
+    const client = (0, react_1.useContext)(Ctx_1.Ctx);
+    if (client && name) {
+        const q = client.query(name, payload, opts);
+        const { id, cache } = q;
+        const [checksumOrError, update] = (0, react_1.useState)(cache?.checksum);
+        (0, react_1.useEffect)(() => {
+            const unsubscribe = q.subscribe((_, checksum) => {
+                update(checksum);
+            }, (err) => {
+                update(err);
+            });
+            return () => {
+                const isLoading = useLoading_1.hooksLoading.size > 0;
+                if (useLoading_1.hooksLoading.delete(id) && !(useLoading_1.hooksLoading.size > 0) && isLoading) {
+                    useLoading_1.useLoadingListeners.forEach((fn) => {
+                        fn(false);
+                    });
+                }
+                unsubscribe();
+                update(0);
+            };
+        }, [id]);
+        if (checksumOrError) {
+            const isLoading = useLoading_1.hooksLoading.size > 0;
+            if (useLoading_1.hooksLoading.delete(id)) {
+                if (!(useLoading_1.hooksLoading.size > 0) && isLoading) {
+                    useLoading_1.useLoadingListeners.forEach((fn) => {
+                        fn(false);
+                    });
+                }
+            }
+            if (typeof checksumOrError === 'number') {
+                if (!cache) {
+                    return { loading: true };
+                }
+                return { loading: false, data: cache.value, checksum: checksumOrError };
+            }
+            return { loading: false, error: checksumOrError };
+        }
+        const isLoading = useLoading_1.hooksLoading.size > 0;
+        if (useLoading_1.hooksLoading.add(id)) {
+            if (!isLoading) {
+                useLoading_1.useLoadingListeners.forEach((fn) => {
+                    fn(true);
+                });
+            }
+        }
+        return { loading: true };
+    }
+    (0, react_1.useState)();
+    (0, react_1.useEffect)(() => { }, [null]);
+    return { loading: true };
+};
+exports.useQuery = useQuery;
+//# sourceMappingURL=useQuery.js.map

package/dist/useQuery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useQuery.js","sourceRoot":"","sources":["../src/useQuery.ts"],"names":[],"mappings":"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"}

package/dist/useWindow.d.ts

@@ -0,0 +1,15 @@
+type UseWindowState = {
+    loading: boolean;
+    items: any[];
+    checksum?: number;
+};
+export declare const useWindow: (name: string, getPayload: ({ offset, limit }: {
+    offset: any;
+    limit: any;
+}) => any, opts: {
+    path: string[];
+    pages: number[];
+    size: number;
+    persistent?: boolean;
+}, dependencies?: any) => UseWindowState;
+export {};

package/dist/useWindow.js

@@ -0,0 +1,125 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useWindow = void 0;
+const react_1 = require("react");
+const Ctx_1 = require("./Ctx");
+const hash_1 = require("@saulx/hash");
+const useWindow = (name, getPayload, opts, dependencies) => {
+    const [checksum, setCheckum] = (0, react_1.useState)(0);
+    const cache = (0, react_1.useRef)();
+    const client = (0, react_1.useContext)(Ctx_1.Ctx);
+    const queries = (0, react_1.useRef)();
+    const unsubs = (0, react_1.useRef)();
+    const raf = (0, react_1.useRef)();
+    const currModifyHash = (0, react_1.useRef)();
+    const currResetHash = (0, react_1.useRef)();
+    const modifyHash = `${opts.size}.${opts.persistent}`;
+    if (dependencies) {
+        // complete reset
+        const resetHash = (0, hash_1.hash)(dependencies);
+        if (currResetHash.current !== resetHash) {
+            currModifyHash.current = null;
+            cache.current = null;
+        }
+    }
+    if (currModifyHash.current !== modifyHash) {
+        // reset queries but keep cache
+        for (const n in unsubs.current) {
+            unsubs.current[n]();
+        }
+        if (raf.current) {
+            cancelAnimationFrame(raf.current);
+            raf.current = null;
+        }
+        queries.current = [];
+        unsubs.current = {};
+        currModifyHash.current = modifyHash;
+        if (!cache.current) {
+            cache.current = { items: [], loading: true, checksum: 0 };
+        }
+    }
+    (0, react_1.useEffect)(() => {
+        return () => {
+            for (const n in unsubs.current) {
+                unsubs.current[n]();
+            }
+            if (raf.current) {
+                cancelAnimationFrame(raf.current);
+            }
+        };
+    }, []);
+    if (client && name) {
+        const { pages, size, persistent = false, path } = opts;
+        const active = new Set();
+        // add new subs
+        pages.forEach((n) => {
+            // pages start at 1 => shift to 0
+            n -= 1;
+            active.add(n);
+            if (!(n in queries.current)) {
+                const payload = getPayload({ offset: n * size, limit: size });
+                const q = client.query(name, payload, { persistent });
+                queries.current[n] = q;
+            }
+            if (n in unsubs.current)
+                return;
+            unsubs.current[n] = queries.current[n].subscribe(() => {
+                if (raf.current)
+                    return;
+                raf.current = requestAnimationFrame(() => {
+                    raf.current = null;
+                    setCheckum(queries.current.reduce((combined, { cache }) => {
+                        const checksum = cache?.checksum;
+                        return checksum ? combined + checksum : combined;
+                    }, 0));
+                });
+            });
+        });
+        // remove inactive subs
+        queries.current.forEach((_, n) => {
+            if (n in unsubs.current && !active.has(n)) {
+                unsubs.current[n]();
+                delete unsubs.current[n];
+            }
+        });
+        if (cache.current.checksum === checksum) {
+            return cache.current;
+        }
+        let l = queries.current.length;
+        cache.current.loading = false;
+        cache.current.checksum = checksum;
+        while (l--) {
+            const q = queries.current[l];
+            const m = size * l + size;
+            let i = size * l;
+            if (q) {
+                if (q.cache) {
+                    let data = q.cache.value;
+                    if (data) {
+                        for (const i of path) {
+                            data = data[i];
+                        }
+                        for (let j = 0; i < m; i++) {
+                            const item = data[j++];
+                            if (!item)
+                                break;
+                            cache.current.items[i] = item;
+                        }
+                    }
+                }
+                else {
+                    cache.current.loading = true;
+                }
+            }
+            // fill up empty items with null
+            for (; i < m; i++) {
+                if (!(i in cache.current.items)) {
+                    cache.current.items[i] = null;
+                }
+            }
+        }
+    }
+    return cache.current;
+};
+exports.useWindow = useWindow;
+//# sourceMappingURL=useWindow.js.map

package/dist/useWindow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWindow.js","sourceRoot":"","sources":["../src/useWindow.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@based/react",
-  "version": "4.3.1",
+  "version": "4.4.0",
   "license": "MIT",
   "main": "dist/index.js",
   "scripts": {
     "browser": "npx aristotle watch -t ./test/browser.tsx",
     "server": "npx ts-node ./test/based-server.ts",
-    "build": "npx  tsc",
+    "build": "npx tsc",
     "watch": "npm run build -- --watch",
     "clean": "rimraf {.turbo,dist,node_modules}"
   },

package/src/Ctx.ts

@@ -0,0 +1,4 @@
+import { createContext } from 'react'
+import { BasedClient } from '@based/client'
+
+export const Ctx = createContext<BasedClient>(null)

package/src/Provider.ts

@@ -0,0 +1,10 @@
+import { createElement, FC, ReactNode } from 'react'
+import { BasedClient } from '@based/client'
+import { Ctx } from './Ctx'
+
+export const Provider: FC<{
+  client: BasedClient
+  children: ReactNode
+}> = ({ client, children }) => {
+  return createElement(Ctx.Provider, { value: client }, children)
+}

package/src/index.ts

@@ -1,161 +1,8 @@
-import {
-  useContext,
-  createContext,
-  createElement,
-  useState,
-  useEffect,
-  FC,
-  ReactNode,
-} from 'react'
-import { BasedClient, AuthState } from '@based/client'
-import { BasedError } from '@based/client'
-
-const Ctx = createContext<BasedClient>(null)
-
-export const Provider: FC<{
-  client: BasedClient
-  children: ReactNode
-}> = ({ client, children }) => {
-  return createElement(Ctx.Provider, { value: client }, children)
-}
-
-export const useAuthState = (): AuthState => {
-  const client: BasedClient = useContext(Ctx)
-  const [state, setState] = useState<AuthState>(client?.authState || {})
-
-  useEffect(() => {
-    if (client) {
-      setState(client.authState)
-      const listener = (authState) => {
-        setState(authState)
-      }
-      client.on('authstate-change', listener)
-      return () => client.off('authstate-change', listener)
-    }
-  }, [client])
-
-  return state
-}
-
-const useLoadingListeners: Set<Function> = new Set()
-const hooksLoading: Set<number> = new Set()
-
-export const useLoading = () => {
-  const [isLoading, setLoading] = useState(hooksLoading.size > 0)
-  useEffect(() => {
-    useLoadingListeners.add(setLoading)
-    return () => {
-      useLoadingListeners.delete(setLoading)
-    }
-  }, [])
-  return isLoading
-}
-
-export const useConnected = () => {
-  const client: BasedClient = useContext(Ctx)
-  const [connected, setConnected] = useState(client.connected)
-
-  useEffect(() => {
-    if (client) {
-      setConnected(client.connected)
-      const listener = () => {
-        setConnected(client.connected)
-      }
-      client.on('disconnect', listener)
-      client.on('reconnect', listener)
-      client.on('connect', listener)
-      return () => {
-        client.off('disconnect', listener)
-        client.off('reconnect', listener)
-        client.off('connect', listener)
-      }
-    }
-  }, [client])
-
-  return { connected }
-}
-
-export const useQuery = <T = any>(
-  name?: string,
-  payload?: any,
-  opts?: {
-    persistent: boolean
-  }
-): {
-  loading: boolean
-  data?: T
-  error?: BasedError
-  checksum?: number
-} => {
-  const client: BasedClient = useContext(Ctx)
-
-  if (client && name) {
-    const q = client.query(name, payload, opts)
-    const { id, cache } = q
-    const [checksumOrError, update] = useState<number | BasedError>(
-      cache?.checksum
-    )
-
-    useEffect(() => {
-      const unsubscribe = q.subscribe(
-        (_, checksum) => {
-          update(checksum)
-        },
-        (err) => {
-          update(err)
-        }
-      )
-      return () => {
-        const isLoading = hooksLoading.size > 0
-        if (hooksLoading.delete(id) && !(hooksLoading.size > 0) && isLoading) {
-          useLoadingListeners.forEach((fn) => {
-            fn(false)
-          })
-        }
-        unsubscribe()
-        update(0)
-      }
-    }, [id])
-
-    if (checksumOrError) {
-      const isLoading = hooksLoading.size > 0
-      if (hooksLoading.delete(id)) {
-        if (!(hooksLoading.size > 0) && isLoading) {
-          useLoadingListeners.forEach((fn) => {
-            fn(false)
-          })
-        }
-      }
-
-      if (typeof checksumOrError === 'number') {
-        if (!cache) {
-          return { loading: true }
-        }
-
-        return { loading: false, data: cache.value, checksum: checksumOrError }
-      }
-
-      return { loading: false, error: checksumOrError }
-    }
-
-    const isLoading = hooksLoading.size > 0
-    if (hooksLoading.add(id)) {
-      if (!isLoading) {
-        useLoadingListeners.forEach((fn) => {
-          fn(true)
-        })
-      }
-    }
-
-    return { loading: true }
-  }
-
-  useState()
-  useEffect(() => {}, [null])
-
-  return { loading: true }
-}
-
-export const useClient = (): BasedClient => {
-  return useContext(Ctx)
-}
+export * from './Ctx'
+export * from './Provider'
+export * from './useAuthState'
+export * from './useClient'
+export * from './useConnected'
+export * from './useLoading'
+export * from './useQuery'
+export * from './useWindow'

package/src/useAuthState.ts

@@ -0,0 +1,21 @@
+import { useContext, useState, useEffect } from 'react'
+import { BasedClient, AuthState } from '@based/client'
+import { Ctx } from './Ctx'
+
+export const useAuthState = (): AuthState => {
+  const client: BasedClient = useContext(Ctx)
+  const [state, setState] = useState<AuthState>(client?.authState || {})
+
+  useEffect(() => {
+    if (client) {
+      setState(client.authState)
+      const listener = (authState) => {
+        setState(authState)
+      }
+      client.on('authstate-change', listener)
+      return () => client.off('authstate-change', listener)
+    }
+  }, [client])
+
+  return state
+}

package/src/useClient.ts

@@ -0,0 +1,7 @@
+import { useContext } from 'react'
+import { BasedClient } from '@based/client'
+import { Ctx } from './Ctx'
+
+export const useClient = (): BasedClient => {
+  return useContext(Ctx)
+}

package/src/useConnected.ts

@@ -0,0 +1,27 @@
+import { useContext, useState, useEffect } from 'react'
+import { BasedClient } from '@based/client'
+import { Ctx } from './Ctx'
+
+export const useConnected = () => {
+  const client: BasedClient = useContext(Ctx)
+  const [connected, setConnected] = useState(client.connected)
+
+  useEffect(() => {
+    if (client) {
+      setConnected(client.connected)
+      const listener = () => {
+        setConnected(client.connected)
+      }
+      client.on('disconnect', listener)
+      client.on('reconnect', listener)
+      client.on('connect', listener)
+      return () => {
+        client.off('disconnect', listener)
+        client.off('reconnect', listener)
+        client.off('connect', listener)
+      }
+    }
+  }, [client])
+
+  return { connected }
+}

package/src/useLoading.ts

@@ -0,0 +1,14 @@
+import { useState, useEffect } from 'react'
+
+export const useLoadingListeners: Set<Function> = new Set()
+export const hooksLoading: Set<number> = new Set()
+export const useLoading = () => {
+  const [isLoading, setLoading] = useState(hooksLoading.size > 0)
+  useEffect(() => {
+    useLoadingListeners.add(setLoading)
+    return () => {
+      useLoadingListeners.delete(setLoading)
+    }
+  }, [])
+  return isLoading
+}

package/src/useQuery.ts

@@ -0,0 +1,85 @@
+import { useContext, useState, useEffect } from 'react'
+import { BasedClient, BasedError } from '@based/client'
+import { Ctx } from './Ctx'
+import { hooksLoading, useLoadingListeners } from './useLoading'
+
+export const useQuery = <T = any>(
+  name?: string,
+  payload?: any,
+  opts?: {
+    persistent: boolean
+  }
+): {
+  loading: boolean
+  data?: T
+  error?: BasedError
+  checksum?: number
+} => {
+  const client: BasedClient = useContext(Ctx)
+
+  if (client && name) {
+    const q = client.query(name, payload, opts)
+    const { id, cache } = q
+    const [checksumOrError, update] = useState<number | BasedError>(
+      cache?.checksum
+    )
+
+    useEffect(() => {
+      const unsubscribe = q.subscribe(
+        (_, checksum) => {
+          update(checksum)
+        },
+        (err) => {
+          update(err)
+        }
+      )
+      return () => {
+        const isLoading = hooksLoading.size > 0
+        if (hooksLoading.delete(id) && !(hooksLoading.size > 0) && isLoading) {
+          useLoadingListeners.forEach((fn) => {
+            fn(false)
+          })
+        }
+        unsubscribe()
+        update(0)
+      }
+    }, [id])
+
+    if (checksumOrError) {
+      const isLoading = hooksLoading.size > 0
+      if (hooksLoading.delete(id)) {
+        if (!(hooksLoading.size > 0) && isLoading) {
+          useLoadingListeners.forEach((fn) => {
+            fn(false)
+          })
+        }
+      }
+
+      if (typeof checksumOrError === 'number') {
+        if (!cache) {
+          return { loading: true }
+        }
+
+        return { loading: false, data: cache.value, checksum: checksumOrError }
+      }
+
+      return { loading: false, error: checksumOrError }
+    }
+
+    const isLoading = hooksLoading.size > 0
+    if (hooksLoading.add(id)) {
+      if (!isLoading) {
+        useLoadingListeners.forEach((fn) => {
+          fn(true)
+        })
+      }
+    }
+
+    return { loading: true }
+  }
+
+  useState()
+  useEffect(() => {}, [null])
+
+  return { loading: true }
+}

package/src/useWindow.ts

@@ -0,0 +1,149 @@
+import { useState, useEffect, useContext, useRef } from 'react'
+import { Ctx } from './Ctx'
+import { BasedClient, BasedQuery } from '@based/client'
+import { hash } from '@saulx/hash'
+
+type UseWindowState = {
+  loading: boolean
+  items: any[]
+  checksum?: number
+}
+
+export const useWindow = (
+  name: string,
+  getPayload: ({ offset, limit }) => any,
+  opts: {
+    path: string[]
+    pages: number[]
+    size: number
+    persistent?: boolean
+  },
+  dependencies?: any
+): UseWindowState => {
+  const [checksum, setCheckum] = useState(0)
+  const cache = useRef<UseWindowState>()
+  const client: BasedClient = useContext(Ctx)
+  const queries = useRef<BasedQuery[]>()
+  const unsubs = useRef<{}>()
+  const raf = useRef<number>()
+  const currModifyHash = useRef<string>()
+  const currResetHash = useRef<number>()
+  const modifyHash = `${opts.size}.${opts.persistent}`
+
+  if (dependencies) {
+    // complete reset
+    const resetHash = hash(dependencies)
+    if (currResetHash.current !== resetHash) {
+      currModifyHash.current = null
+      cache.current = null
+    }
+  }
+
+  if (currModifyHash.current !== modifyHash) {
+    // reset queries but keep cache
+    for (const n in unsubs.current) {
+      unsubs.current[n]()
+    }
+    if (raf.current) {
+      cancelAnimationFrame(raf.current)
+      raf.current = null
+    }
+    queries.current = []
+    unsubs.current = {}
+    currModifyHash.current = modifyHash
+
+    if (!cache.current) {
+      cache.current = { items: [], loading: true, checksum: 0 }
+    }
+  }
+
+  useEffect(() => {
+    return () => {
+      for (const n in unsubs.current) {
+        unsubs.current[n]()
+      }
+      if (raf.current) {
+        cancelAnimationFrame(raf.current)
+      }
+    }
+  }, [])
+
+  if (client && name) {
+    const { pages, size, persistent = false, path } = opts
+    const active = new Set()
+
+    // add new subs
+    pages.forEach((n) => {
+      // pages start at 1 => shift to 0
+      n -= 1
+      active.add(n)
+      if (!(n in queries.current)) {
+        const payload = getPayload({ offset: n * size, limit: size })
+        const q = client.query(name, payload, { persistent })
+        queries.current[n] = q
+      }
+      if (n in unsubs.current) return
+      unsubs.current[n] = queries.current[n].subscribe(() => {
+        if (raf.current) return
+        raf.current = requestAnimationFrame(() => {
+          raf.current = null
+          setCheckum(
+            queries.current.reduce((combined, { cache }) => {
+              const checksum = cache?.checksum
+              return checksum ? combined + checksum : combined
+            }, 0)
+          )
+        })
+      })
+    })
+
+    // remove inactive subs
+    queries.current.forEach((_, n) => {
+      if (n in unsubs.current && !active.has(n)) {
+        unsubs.current[n]()
+        delete unsubs.current[n]
+      }
+    })
+
+    if (cache.current.checksum === checksum) {
+      return cache.current
+    }
+
+    let l = queries.current.length
+    cache.current.loading = false
+    cache.current.checksum = checksum
+
+    while (l--) {
+      const q = queries.current[l]
+      const m = size * l + size
+      let i = size * l
+
+      if (q) {
+        if (q.cache) {
+          let data = q.cache.value
+          if (data) {
+            for (const i of path) {
+              data = data[i]
+            }
+            for (let j = 0; i < m; i++) {
+              const item = data[j++]
+              if (!item) break
+              cache.current.items[i] = item
+            }
+          }
+        } else {
+          cache.current.loading = true
+        }
+      }
+
+      // fill up empty items with null
+      for (; i < m; i++) {
+        if (!(i in cache.current.items)) {
+          cache.current.items[i] = null
+        }
+      }
+    }
+  }
+
+  return cache.current
+}

package/test/based-server.ts

@@ -16,10 +16,37 @@ const counter: BasedQueryFunction<{ speed: number }, { cnt: number }> = (
   }
 }
 
+const fakeDb = (_based, { offset, limit }, update) => {
+  let i
+  let cnt = 0
+  const timer = setTimeout(() => {
+    const doit = () => {
+      cnt++
+      const things = Array.from(Array(limit)).map((_, i) => {
+        return {
+          id: `${i + offset} - ${cnt}`,
+        }
+      })
+      update({ things })
+    }
+
+    i = setInterval(doit, 1e3)
+    doit()
+  }, 100)
+  return () => {
+    clearTimeout(timer)
+    clearInterval(i)
+  }
+}
+
 const server = new BasedServer({
   port: 8081,
   functions: {
     configs: {
+      'fake-db': {
+        type: 'query',
+        fn: fakeDb,
+      },
       counter: {
         type: 'query',
         fn: counter,

package/test/browser.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import based from '@based/client'
 import { createRoot } from 'react-dom/client'
-import { Provider, useQuery, useLoading } from '../src'
+import { Provider, useQuery, useLoading, useWindow } from '../src'
 
 const client = based({
   url: 'ws://localhost:8081',
@@ -37,10 +37,11 @@ const Tester = () => {
             height: 50,
             background: somethingIsLoading ? 'red' : 'blue',
           }}
-        ></div>
-        {payloads.map((v) => {
+        />
+        {payloads.map((v, i) => {
           return (
             <div
+              key={i}
               style={{
                 border: '1px solid green',
                 padding: 5,
@@ -53,12 +54,68 @@ const Tester = () => {
           )
         })}
       </div>
-
-      <pre>{JSON.stringify(x, null, 2)}</pre>
     </div>
   )
 }
 
+const UseWindowTester = () => {
+  const [pages, setPages] = useState([1, 2])
+  const [size, setSize] = useState(4)
+  const { items, loading } = useWindow(
+    'fake-db',
+    ({ offset, limit }) => {
+      return {
+        offset,
+        limit,
+      }
+    },
+    {
+      path: ['things'], // where are the items in the response?
+      pages, // array of page numbers - starts at 1
+      size, // amount of items per page
+    }
+  )
+
+  return (
+    <>
+      <div style={{ display: 'flex' }}>
+        <pre>{JSON.stringify({ loading, items }, null, 2)}</pre>
+        <div>
+          {items.map((item, index) => {
+            return <div key={index}>{item?.id || '-'}</div>
+          })}
+        </div>
+      </div>
+      <button
+        style={{
+          background: 'lightgrey',
+          padding: 16,
+        }}
+        onClick={() => {
+          setPages(
+            pages.map((n) => {
+              return n + 3
+            })
+          )
+        }}
+      >
+        Move ({pages.join(',')})
+      </button>
+      <button
+        style={{
+          background: 'lightgrey',
+          padding: 16,
+        }}
+        onClick={() => {
+          setSize(size + 1)
+        }}
+      >
+        Resize ({size})
+      </button>
+    </>
+  )
+}
+
 function App() {
   return (
     <div
@@ -68,6 +125,7 @@ function App() {
     >
       <Provider client={client}>
         <Tester />
+        <UseWindowTester />
       </Provider>
     </div>
   )