@based/react 4.2.7 → 4.3.1

package/dist/index.d.ts

@@ -1,10 +1,12 @@
 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;
 };
@@ -13,6 +15,7 @@ export declare const useQuery: <T = any>(name?: string, payload?: any, opts?: {
 }) => {
     loading: boolean;
     data?: T;
+    error?: BasedError;
     checksum?: number;
 };
 export declare const useClient: () => BasedClient;

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useClient = exports.useQuery = exports.useConnected = exports.useAuthState = exports.Provider = void 0;
+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 }) => {
@@ -23,6 +23,19 @@ const useAuthState = () => {
     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);
@@ -50,28 +63,58 @@ const useQuery = (name, payload, opts) => {
     if (client && name) {
         const q = client.query(name, payload, opts);
         const { id, cache } = q;
-        const [checksum, update] = (0, react_1.useState)(cache?.checksum);
+        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]);
-        return cache
-            ? { loading: false, data: cache.value, checksum }
-            : { loading: true };
+        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 };
     }
-    // stubs
     (0, react_1.useState)();
     (0, react_1.useEffect)(() => { }, [null]);
     return { loading: true };
 };
 exports.useQuery = useQuery;
 const useClient = () => {
-    const client = (0, react_1.useContext)(Ctx);
-    return client;
+    return (0, react_1.useContext)(Ctx);
 };
 exports.useClient = useClient;
 //# 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":"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"}

package/package.json

@@ -1,9 +1,11 @@
 {
   "name": "@based/react",
-  "version": "4.2.7",
+  "version": "4.3.1",
   "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",
     "watch": "npm run build -- --watch",
     "clean": "rimraf {.turbo,dist,node_modules}"
@@ -13,7 +15,9 @@
     "@types/react": "^18.0.29",
     "rimraf": "^3.0.2",
     "ts-node": "10.9.1",
-    "typescript": "^4.3.5"
+    "typescript": "^4.3.5",
+    "react-dom": "^18.2.0",
+    "@saulx/aristotle": "^4.7.1"
   },
   "peerDependencies": {
     "@based/client": "^4.6.1",

package/src/index.ts

@@ -8,6 +8,7 @@ import {
   ReactNode,
 } from 'react'
 import { BasedClient, AuthState } from '@based/client'
+import { BasedError } from '@based/client'
 
 const Ctx = createContext<BasedClient>(null)
 
@@ -36,6 +37,20 @@ export const useAuthState = (): AuthState => {
   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)
@@ -69,6 +84,7 @@ export const useQuery = <T = any>(
 ): {
   loading: boolean
   data?: T
+  error?: BasedError
   checksum?: number
 } => {
   const client: BasedClient = useContext(Ctx)
@@ -76,24 +92,64 @@ export const useQuery = <T = any>(
   if (client && name) {
     const q = client.query(name, payload, opts)
     const { id, cache } = q
-    const [checksum, update] = useState(cache?.checksum)
+    const [checksumOrError, update] = useState<number | BasedError>(
+      cache?.checksum
+    )
 
     useEffect(() => {
-      const unsubscribe = q.subscribe((_, checksum) => {
-        update(checksum)
-      })
-
+      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])
 
-    return cache
-      ? { loading: false, data: cache.value, checksum }
-      : { loading: true }
+    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 }
   }
 
-  // stubs
   useState()
   useEffect(() => {}, [null])
 
@@ -101,6 +157,5 @@ export const useQuery = <T = any>(
 }
 
 export const useClient = (): BasedClient => {
-  const client = useContext(Ctx)
-  return client
+  return useContext(Ctx)
 }

package/test/based-server.ts

@@ -0,0 +1,31 @@
+import { BasedServer } from '@based/server'
+import { BasedQueryFunction } from '@based/functions'
+
+const counter: BasedQueryFunction<{ speed: number }, { cnt: number }> = (
+  _based,
+  payload,
+  update
+) => {
+  let cnt = 0
+  // update({ cnt })
+  const int = setInterval(() => {
+    update({ cnt: ++cnt })
+  }, payload.speed ?? 1e3)
+  return () => {
+    clearInterval(int)
+  }
+}
+
+const server = new BasedServer({
+  port: 8081,
+  functions: {
+    configs: {
+      counter: {
+        type: 'query',
+        fn: counter,
+      },
+    },
+  },
+})
+
+server.start()

package/test/browser.tsx

@@ -0,0 +1,77 @@
+import React, { useState } from 'react'
+import based from '@based/client'
+import { createRoot } from 'react-dom/client'
+import { Provider, useQuery, useLoading } from '../src'
+
+const client = based({
+  url: 'ws://localhost:8081',
+})
+
+const Tester = () => {
+  const somethingIsLoading = useLoading()
+
+  const [q, setP] = useState<any>({
+    name: 'counter',
+    payload: { bla: true },
+  })
+
+  const x = useQuery(q.name, q.payload)
+
+  const payloads = [
+    { name: 'counter', payload: { bla: false } },
+    { name: 'counter', payload: { bla: true } },
+    { name: 'gurt', payload: { bla: false } },
+    { name: null },
+  ]
+
+  return (
+    <div>
+      <div
+        style={{
+          display: 'flex',
+        }}
+      >
+        <div
+          style={{
+            width: 50,
+            height: 50,
+            background: somethingIsLoading ? 'red' : 'blue',
+          }}
+        ></div>
+        {payloads.map((v) => {
+          return (
+            <div
+              style={{
+                border: '1px solid green',
+                padding: 5,
+                cursor: 'pointer',
+              }}
+              onClick={() => setP(v)}
+            >
+              <pre>{JSON.stringify(v, null, 2)}</pre>
+            </div>
+          )
+        })}
+      </div>
+
+      <pre>{JSON.stringify(x, null, 2)}</pre>
+    </div>
+  )
+}
+
+function App() {
+  return (
+    <div
+      style={{
+        padding: 100,
+      }}
+    >
+      <Provider client={client}>
+        <Tester />
+      </Provider>
+    </div>
+  )
+}
+
+const root = createRoot(document.body)
+root.render(<App />)