@peerbit/react 0.0.13 → 0.0.14

package/src/usePeer.tsx

@@ -5,7 +5,7 @@ import { DirectSub } from "@peerbit/pubsub";
 import { yamux } from "@chainsafe/libp2p-yamux";
 import {
     getFreeKeypair,
-    getTabId,
+    getClientId,
     inIframe,
     cookiesWhereClearedJustNow,
 } from "./utils.js";
@@ -21,21 +21,46 @@ import { ProgramClient } from "@peerbit/program";
 import { identify } from "@libp2p/identify";
 import { webSockets } from "@libp2p/websockets";
 import { circuitRelayTransport } from "@libp2p/circuit-relay-v2";
-
 import * as filters from "@libp2p/websockets/filters";
 import { detectIncognito } from "detectincognitojs";
 
+export class ClientBusyError extends Error {
+    constructor(message: string) {
+        super(message);
+        this.name = "CreateClientError";
+    }
+}
+
 export type ConnectionStatus =
     | "disconnected"
     | "connected"
     | "connecting"
     | "failed";
-interface IPeerContext {
+
+/** Discriminated union for PeerContext */
+export type IPeerContext = (ProxyPeerContext | NodePeerContext) & {
+    error?: Error;
+};
+
+export interface ProxyPeerContext {
+    type: "proxy";
+    peer: ProgramClient | undefined;
+    promise: Promise<void> | undefined;
+    loading: boolean;
+    status: ConnectionStatus;
+    persisted: boolean | undefined;
+    /** Present only in proxy (iframe) mode */
+    targetOrigin: string;
+}
+
+export interface NodePeerContext {
+    type: "node";
     peer: ProgramClient | undefined;
     promise: Promise<void> | undefined;
     loading: boolean;
     status: ConnectionStatus;
     persisted: boolean | undefined;
+    tabIndex: number;
 }
 
 if (!window.name) {
@@ -44,6 +69,7 @@ if (!window.name) {
 
 export const PeerContext = React.createContext<IPeerContext>({} as any);
 export const usePeer = () => useContext(PeerContext);
+
 type IFrameOptions = {
     type: "proxy";
     targetOrigin: string;
@@ -56,15 +82,14 @@ type NodeOptions = {
     keypair?: Ed25519Keypair;
     bootstrap?: (Multiaddr | string)[];
     host?: boolean;
+    singleton?: boolean;
 };
-type TopOptions = NodeOptions & WithMemory;
+
+type TopOptions = NodeOptions & { inMemory?: boolean };
 type TopAndIframeOptions = {
     iframe: IFrameOptions | NodeOptions;
     top: TopOptions;
 };
-type WithMemory = {
-    inMemory?: boolean;
-};
 type WithChildren = {
     children: JSX.Element;
 };
@@ -77,147 +102,161 @@ export const PeerProvider = (options: PeerOptions) => {
     const [promise, setPromise] = React.useState<Promise<void> | undefined>(
         undefined
     );
-
     const [persisted, setPersisted] = React.useState<boolean | undefined>(
         undefined
     );
-
     const [loading, setLoading] = React.useState<boolean>(true);
     const [connectionState, setConnectionState] =
         React.useState<ConnectionStatus>("disconnected");
-    const memo = React.useMemo<IPeerContext>(
-        () => ({
-            peer,
-            promise,
-            loading,
-            connectionState,
-            status: connectionState,
-            persisted: persisted,
-        }),
-        [
-            loading,
-            !!promise,
-            connectionState,
-            peer?.identity?.publicKey?.hashcode(),
-            persisted,
-        ]
-    );
+
+    const [tabIndex, setTabIndex] = React.useState<number>(-1);
+
+    const [error, setError] = React.useState<Error | undefined>(undefined); // <-- error state
+
+    // Decide which options to use based on whether we're in an iframe.
+    // If options.top is defined, assume we have separate settings for iframe vs. host.
+    const nodeOptions: IFrameOptions | TopOptions = (
+        options as TopAndIframeOptions
+    ).top
+        ? inIframe()
+            ? (options as TopAndIframeOptions).iframe
+            : { ...options, ...(options as TopAndIframeOptions).top } // we merge root and top options, TODO should this be made in a different way to prevent confusion about top props?
+        : (options as TopOptions);
+
+    // If running as a proxy (iframe), expect a targetOrigin.
+    const computedTargetOrigin =
+        nodeOptions.type === "proxy"
+            ? (nodeOptions as IFrameOptions).targetOrigin
+            : undefined;
+
+    const memo = React.useMemo<IPeerContext>(() => {
+        if (nodeOptions.type === "proxy") {
+            return {
+                type: "proxy",
+                peer,
+                promise,
+                loading,
+                status: connectionState,
+                persisted,
+                targetOrigin: computedTargetOrigin as string,
+                error,
+            };
+        } else {
+            return {
+                type: "node",
+                peer,
+                promise,
+                loading,
+                status: connectionState,
+                persisted,
+                tabIndex,
+                error,
+            };
+        }
+    }, [
+        loading,
+        promise,
+        connectionState,
+        peer,
+        persisted,
+        tabIndex,
+        computedTargetOrigin,
+        error,
+    ]);
 
     useMount(() => {
         setLoading(true);
         const fn = async () => {
             await sodium.ready;
-            if (peer) {
-                await peer.stop();
-                setPeer(undefined);
-            }
-
             let newPeer: ProgramClient;
-            const nodeOptions = (options as TopAndIframeOptions).top
-                ? inIframe()
-                    ? (options as TopAndIframeOptions).iframe
-                    : (options as TopAndIframeOptions).top
-                : (options as TopOptions);
 
             if (nodeOptions.type !== "proxy") {
                 const releaseFirstLock = cookiesWhereClearedJustNow();
-                const nodeId =
-                    nodeOptions.keypair ||
-                    (
-                        await getFreeKeypair(
-                            "",
-                            new FastMutex({
-                                clientId: getTabId(),
-                                timeout: 1000,
-                            }),
-                            undefined,
-                            {
-                                releaseFirstLock, // when clearing cookies sometimes the localStorage is not cleared immediately so we need to release the lock forcefully. TODO investigate why this is happening
-                                releaseLockIfSameId: true, // reuse keypairs from same tab, (force release)
-                            }
-                        )
-                    ).key;
+
+                const sessionId = getClientId("session");
+                const mutex = new FastMutex({
+                    clientId: sessionId,
+                    timeout: 1e3,
+                });
+                if (nodeOptions.singleton) {
+                    const localId = getClientId("local");
+                    try {
+                        const lockKey = localId + "-singleton";
+                        globalThis.onbeforeunload = function () {
+                            mutex.release(lockKey);
+                        };
+                        await mutex.lock(lockKey, () => true, {
+                            replaceIfSameClient: true,
+                        });
+                    } catch (error) {
+                        console.error("Failed to lock singleton client", error);
+                        throw new ClientBusyError(
+                            "Failed to lock single client"
+                        );
+                    }
+                }
+
+                let nodeId: Ed25519Keypair;
+                if (nodeOptions.keypair) {
+                    nodeId = nodeOptions.keypair;
+                } else {
+                    const kp = await getFreeKeypair("", mutex, undefined, {
+                        releaseFirstLock,
+                        releaseLockIfSameId: true,
+                    });
+                    globalThis.onbeforeunload = function () {
+                        mutex.release(kp.path);
+                    };
+                    nodeId = kp.key;
+                    setTabIndex(kp.index);
+                }
                 const peerId = nodeId.toPeerId();
 
                 let directory: string | undefined = undefined;
                 if (
-                    !(nodeOptions as WithMemory).inMemory &&
+                    !(nodeOptions as TopOptions).inMemory &&
                     !(await detectIncognito()).isPrivate
                 ) {
                     const persisted = await navigator.storage.persist();
                     setPersisted(persisted);
                     if (!persisted) {
                         setPersisted(false);
-                        if (window["chrome"]) {
-                            console.error(
-                                "Request persistance but was not given permission by browser. Adding this site to your bookmarks or enabling push notifications might allow your chrome browser to persist data"
-                            );
-                        } else {
-                            console.error(
-                                "Request persistance but was not given permission by browser."
-                            );
-                        }
+                        console.error(
+                            "Request persistence but permission was not granted by browser."
+                        );
                     } else {
                         directory = `./repo/${peerId.toString()}/`;
                     }
                 }
 
-                // We create a new directrory to make tab to tab communication go smoothly
                 console.log("Create client");
                 newPeer = await Peerbit.create({
                     libp2p: {
-                        addresses: {
-                            listen: [
-                                "/p2p-circuit",
-                                /* "/webrtc" */
-                            ], // TMP disable because flaky behaviour with libp2p 1.8.1
-                        },
+                        addresses: { listen: ["/p2p-circuit"] },
                         connectionEncrypters: [noise()],
-                        peerId, //, having the same peer accross broswers does not work, only one tab will be recognized by other peers
-                        connectionManager: {
-                            maxConnections: 100,
-                        },
-                        connectionMonitor: {
-                            enabled: false,
-                        },
-
+                        peerId,
+                        connectionManager: { maxConnections: 100 },
+                        connectionMonitor: { enabled: false },
                         streamMuxers: [yamux()],
                         ...(nodeOptions.network === "local"
                             ? {
                                   connectionGater: {
-                                      denyDialMultiaddr: () => {
-                                          // by default we refuse to dial local addresses from the browser since they
-                                          // are usually sent by remote peers broadcasting undialable multiaddrs but
-                                          // here we are explicitly connecting to a local node so do not deny dialing
-                                          // any discovered address
-                                          return false;
-                                      },
+                                      denyDialMultiaddr: () => false,
                                   },
                                   transports: [
-                                      // Add websocket impl so we can connect to "unsafe" ws (production only allows wss)
-                                      webSockets({
-                                          filter: filters.all,
-                                      }),
+                                      webSockets({ filter: filters.all }),
                                       circuitRelayTransport(),
-                                      /*    webRTC(), */ // TMP disable because flaky behaviour with libp2p 1.8.1
                                   ],
                               }
                             : {
                                   transports: [
                                       webSockets({ filter: filters.wss }),
                                       circuitRelayTransport(),
-                                      /*   webRTC(), */ // TMP disable because flaky behaviour with libp2p 1.8.1
                                   ],
                               }),
-
                         services: {
                             pubsub: (c) =>
-                                new DirectSub(c, {
-                                    canRelayMessage: true,
-                                    /*      connectionManager: {
-                                            autoDial: false,
-                                        }, */
-                                }),
+                                new DirectSub(c, { canRelayMessage: true }),
                             identify: identify(),
                         },
                     },
@@ -232,7 +271,6 @@ export const PeerProvider = (options: PeerOptions) => {
 
                 setConnectionState("connecting");
 
-                // Resolve bootstrap nodes async (we want to return before this is done)
                 const connectFn = async () => {
                     try {
                         if (nodeOptions.network === "local") {
@@ -245,7 +283,6 @@ export const PeerProvider = (options: PeerOptions) => {
                                     ).text())
                             );
                         } else {
-                            // TODO fix types. When proxy client this will not be available
                             if (nodeOptions.bootstrap) {
                                 for (const addr of nodeOptions.bootstrap) {
                                     await newPeer.dial(addr);
@@ -272,19 +309,28 @@ export const PeerProvider = (options: PeerOptions) => {
                 promise.then(() => {
                     console.log("Bootstrap done");
                 });
-                // Make sure data flow as expected between tabs and windows locally (offline states)
-
                 if (nodeOptions.waitForConnnected !== false) {
                     await promise;
                 }
             } else {
-                newPeer = await createClient(nodeOptions.targetOrigin);
+                // When in proxy mode (iframe), use the provided targetOrigin.
+                newPeer = await createClient(
+                    (nodeOptions as IFrameOptions).targetOrigin
+                );
             }
 
             setPeer(newPeer);
             setLoading(false);
         };
-        setPromise(fn());
+        const fnWithErrorHandling = async () => {
+            try {
+                await fn();
+            } catch (error: any) {
+                setError(error);
+                setLoading(false);
+            }
+        };
+        setPromise(fnWithErrorHandling());
     });
 
     return (

package/src/useProgram.tsx

@@ -1,17 +1,14 @@
 import { Program, OpenOptions, ProgramEvents } from "@peerbit/program";
 import { usePeer } from "./usePeer.js";
+import { PublicSignKey } from "@peerbit/crypto";
 import { useEffect, useReducer, useRef, useState } from "react";
-const addressOrUndefined = <
-    A,
-    B extends ProgramEvents,
-    P extends Program<A, B>
->(
+const addressOrDefined = <A, B extends ProgramEvents, P extends Program<A, B>>(
     p?: P
 ) => {
     try {
         return p?.address;
     } catch (error) {
-        return undefined;
+        return !!p;
     }
 };
 type ExtractArgs<T> = T extends Program<infer Args> ? Args : never;
@@ -22,16 +19,20 @@ export const useProgram = <
         Program<any, ProgramEvents>
 >(
     addressOrOpen?: P | string,
-    options?: OpenOptions<P>
+    options?: OpenOptions<P> & { id?: string; keepOpenOnUnmount?: boolean }
 ) => {
     const { peer } = usePeer();
     let [program, setProgram] = useState<P | undefined>();
+    const [id, setId] = useState<string | undefined>(options?.id);
     let [loading, setLoading] = useState(true);
     const [session, forceUpdate] = useReducer((x) => x + 1, 0);
     let programLoadingRef = useRef<Promise<P>>();
-    const [peerCounter, setPeerCounter] = useState<number>(1);
-    let closingRef = useRef<Promise<any>>(Promise.resolve());
+    const [peers, setPeers] = useState<PublicSignKey[]>([]);
 
+    let closingRef = useRef<Promise<any>>(Promise.resolve());
+    /*   if (options?.debug) {
+          console.log("useProgram", addressOrOpen, options);
+      } */
     useEffect(() => {
         if (!peer || !addressOrOpen) {
             return;
@@ -45,19 +46,29 @@ export const useProgram = <
                 .then((p) => {
                     changeListener = () => {
                         p.getReady().then((set) => {
-                            setPeerCounter(set.size);
+                            setPeers([...set.values()]);
                         });
                     };
                     p.events.addEventListener("join", changeListener);
                     p.events.addEventListener("leave", changeListener);
-                    p.getReady().then((set) => {
-                        setPeerCounter(set.size);
-                    });
+                    p.getReady()
+                        .then((set) => {
+                            setPeers([...set.values()]);
+                        })
+                        .catch((e) => {
+                            console.log("Error getReady()", e);
+                        });
                     setProgram(p);
                     forceUpdate();
-
+                    if (options?.id) {
+                        setId(p.address);
+                    }
                     return p;
                 })
+                .catch((e) => {
+                    console.error("failed to open", e);
+                    throw e;
+                })
                 .finally(() => {
                     setLoading(false);
                 });
@@ -70,8 +81,8 @@ export const useProgram = <
             // TODO don't close on reopen the same db?
             if (programLoadingRef.current) {
                 closingRef.current =
-                    programLoadingRef.current.then((p) =>
-                        p.close().then(() => {
+                    programLoadingRef.current.then((p) => {
+                        const unsubscribe = () => {
                             p.events.removeEventListener(
                                 "join",
                                 changeListener
@@ -85,21 +96,27 @@ export const useProgram = <
                                 setProgram(undefined);
                                 programLoadingRef.current = undefined;
                             }
-                        })
-                    ) || Promise.resolve();
+                        };
+                        if (options?.keepOpenOnUnmount) {
+                            return unsubscribe();
+                        }
+                        return p.close().then(unsubscribe);
+                    }) || Promise.resolve();
             }
         };
     }, [
         peer?.identity.publicKey.hashcode(),
+        options?.id,
         typeof addressOrOpen === "string"
             ? addressOrOpen
-            : addressOrUndefined(addressOrOpen),
+            : addressOrDefined(addressOrOpen),
     ]);
     return {
         program,
         session,
         loading,
         promise: programLoadingRef.current,
-        peerCounter,
+        peers,
+        id,
     };
 };

package/src/utils.ts

@@ -4,7 +4,7 @@ import { FastMutex } from "./lockstorage";
 import { v4 as uuid } from "uuid";
 import sodium from "libsodium-wrappers";
 
-const TAB_ID_KEY = "TAB_ID";
+const CLIENT_ID_STORAGE_KEY = "CLIENT_ID";
 export const cookiesWhereClearedJustNow = () => {
     const lastPersistedAt = localStorage.getItem("lastPersistedAt");
     if (lastPersistedAt) {
@@ -14,13 +14,14 @@ export const cookiesWhereClearedJustNow = () => {
     return true;
 };
 
-export const getTabId = () => {
-    const idFromStorage = sessionStorage.getItem(TAB_ID_KEY);
+export const getClientId = (type: "session" | "local") => {
+    const storage = type === "session" ? sessionStorage : localStorage;
+    const idFromStorage = storage.getItem(CLIENT_ID_STORAGE_KEY);
     if (idFromStorage) {
         return idFromStorage;
     } else {
         const id = uuid(); // generate unique UUID
-        sessionStorage.setItem(TAB_ID_KEY, id);
+        storage.setItem(CLIENT_ID_STORAGE_KEY, id);
         return id;
     }
 };
@@ -29,16 +30,13 @@ const ID_COUNTER_KEY = "idc/";
 
 const getKeyId = (prefix: string, id: number) => prefix + "/" + id;
 
-export const releaseKey = (
-    path: string,
-    lock: FastMutex = new FastMutex({ clientId: getTabId() })
-) => {
+export const releaseKey = (path: string, lock: FastMutex) => {
     lock.release(path);
 };
 
 export const getFreeKeypair = async (
     id: string = "",
-    lock: FastMutex = new FastMutex({ clientId: getTabId() }),
+    lock: FastMutex,
     lockCondition: () => boolean = () => true,
     options?: {
         releaseLockIfSameId?: boolean;
@@ -52,16 +50,16 @@ export const getFreeKeypair = async (
     for (let i = 0; i < 10000; i++) {
         const key = getKeyId(id, i);
         let lockedInfo = lock.getLockedInfo(key);
-        console.log(
-            "KEY KEY AT",
-            key,
-            id,
-            i,
-            lockedInfo,
-            lockedInfo === lock.clientId,
-            options
-        );
-
+        /*         console.log(
+                    "KEY KEY AT",
+                    key,
+                    id,
+                    i,
+                    lockedInfo,
+                    lockedInfo === lock.clientId,
+                    options
+                );
+         */
         if (lockedInfo) {
             if (
                 (lockedInfo === lock.clientId &&
@@ -73,7 +71,7 @@ export const getFreeKeypair = async (
                 continue;
             }
         }
-        console.log("aquire id at", i);
+
         await lock.lock(key, lockCondition);
 
         localStorage.setItem(
@@ -82,6 +80,7 @@ export const getFreeKeypair = async (
         );
         await lock.release(idCounterKey);
         return {
+            index: i,
             path: key,
             key: await getKeypair(key),
         };
@@ -141,3 +140,59 @@ export const inIframe = () => {
         return true;
     }
 };
+
+export function debounceLeadingTrailing<
+    T extends (this: any, ...args: any[]) => void
+>(
+    func: T,
+    delay: number
+): ((this: ThisParameterType<T>, ...args: Parameters<T>) => void) & {
+    cancel: () => void;
+} {
+    let timeoutId: ReturnType<typeof setTimeout> | null = null;
+    let lastArgs: Parameters<T> | null = null;
+    let lastThis: any;
+    let pendingTrailing = false;
+
+    const debounced = function (
+        this: ThisParameterType<T>,
+        ...args: Parameters<T>
+    ) {
+        if (!timeoutId) {
+            // Leading call: no timer means this is the first call in this period.
+            func.apply(this, args);
+        } else {
+            // Subsequent calls during the delay mark that a trailing call is needed.
+            pendingTrailing = true;
+        }
+        // Always update with the most recent context and arguments.
+        lastArgs = args;
+        lastThis = this;
+
+        // Reset the timer.
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+        }
+        timeoutId = setTimeout(() => {
+            timeoutId = null;
+            // If there were any calls during the delay, call the function on the trailing edge.
+            if (pendingTrailing && lastArgs) {
+                func.apply(lastThis, lastArgs);
+            }
+            // Reset the trailing flag after the trailing call.
+            pendingTrailing = false;
+        }, delay);
+    } as ((this: ThisParameterType<T>, ...args: Parameters<T>) => void) & {
+        cancel: () => void;
+    };
+
+    debounced.cancel = () => {
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+            timeoutId = null;
+        }
+        pendingTrailing = false;
+    };
+
+    return debounced;
+}