jazz-react-native 0.8.51 → 0.9.0

package/src/platform.ts

@@ -0,0 +1,205 @@
+import {
+  Account,
+  AgentID,
+  AnonymousJazzAgent,
+  AuthMethod,
+  CoValue,
+  CoValueClass,
+  CryptoProvider,
+  ID,
+  InviteSecret,
+  SessionID,
+  cojsonInternals,
+  createJazzContext,
+} from "jazz-tools";
+
+import { RawAccountID } from "cojson";
+
+export { RNDemoAuth } from "./auth/DemoAuthMethod.js";
+
+import { PureJSCrypto } from "cojson/native";
+import { createWebSocketPeerWithReconnection } from "./createWebSocketPeerWithReconnection.js";
+import type { RNQuickCrypto } from "./crypto/RNQuickCrypto.js";
+import { ExpoSecureStoreAdapter } from "./storage/expo-secure-store-adapter.js";
+import { KvStoreContext } from "./storage/kv-store-context.js";
+
+/** @category Context Creation */
+export type ReactNativeContext<Acc extends Account> = {
+  me: Acc;
+  logOut: () => void;
+  // TODO: Symbol.dispose?
+  done: () => void;
+};
+
+export type ReactNativeGuestContext = {
+  guest: AnonymousJazzAgent;
+  logOut: () => void;
+  done: () => void;
+};
+
+export type ReactNativeContextOptions<Acc extends Account> = {
+  auth: AuthMethod;
+  AccountSchema: CoValueClass<Acc> & {
+    fromNode: (typeof Account)["fromNode"];
+  };
+} & BaseReactNativeContextOptions;
+
+export type BaseReactNativeContextOptions = {
+  peer: `wss://${string}` | `ws://${string}`;
+  reconnectionTimeout?: number;
+  storage?: "indexedDB" | "singleTabOPFS";
+  CryptoProvider?: typeof PureJSCrypto | typeof RNQuickCrypto;
+};
+
+/** @category Context Creation */
+export async function createJazzRNContext<Acc extends Account>(
+  options: ReactNativeContextOptions<Acc>,
+): Promise<ReactNativeContext<Acc>>;
+export async function createJazzRNContext(
+  options: BaseReactNativeContextOptions,
+): Promise<ReactNativeGuestContext>;
+export async function createJazzRNContext<Acc extends Account>(
+  options: ReactNativeContextOptions<Acc> | BaseReactNativeContextOptions,
+): Promise<ReactNativeContext<Acc> | ReactNativeGuestContext>;
+export async function createJazzRNContext<Acc extends Account>(
+  options: ReactNativeContextOptions<Acc> | BaseReactNativeContextOptions,
+): Promise<ReactNativeContext<Acc> | ReactNativeGuestContext> {
+  const websocketPeer = createWebSocketPeerWithReconnection(
+    options.peer,
+    options.reconnectionTimeout,
+    (peer) => {
+      node.syncManager.addPeer(peer);
+    },
+  );
+
+  const CryptoProvider = options.CryptoProvider || PureJSCrypto;
+
+  const context =
+    "auth" in options
+      ? await createJazzContext({
+          AccountSchema: options.AccountSchema,
+          auth: options.auth,
+          crypto: await CryptoProvider.create(),
+          peersToLoadFrom: [websocketPeer.peer],
+          sessionProvider: provideLockSession,
+        })
+      : await createJazzContext({
+          crypto: await CryptoProvider.create(),
+          peersToLoadFrom: [websocketPeer.peer],
+        });
+
+  const node =
+    "account" in context ? context.account._raw.core.node : context.agent.node;
+
+  return "account" in context
+    ? {
+        me: context.account,
+        done: () => {
+          websocketPeer.done();
+          context.done();
+        },
+        logOut: () => {
+          context.logOut();
+        },
+      }
+    : {
+        guest: context.agent,
+        done: () => {
+          websocketPeer.done();
+          context.done();
+        },
+        logOut: () => {
+          context.logOut();
+        },
+      };
+}
+
+/** @category Auth Providers */
+export type SessionProvider = (
+  accountID: ID<Account> | AgentID,
+) => Promise<SessionID>;
+
+export async function provideLockSession(
+  accountID: ID<Account> | AgentID,
+  crypto: CryptoProvider,
+) {
+  const sessionDone = () => {};
+
+  const kvStore = KvStoreContext.getInstance().getStorage();
+
+  const sessionID =
+    ((await kvStore.get(accountID)) as SessionID) ||
+    crypto.newRandomSessionID(accountID as RawAccountID | AgentID);
+  await kvStore.set(accountID, sessionID);
+
+  return Promise.resolve({
+    sessionID,
+    sessionDone,
+  });
+}
+
+/** @category Invite Links */
+export function createInviteLink<C extends CoValue>(
+  value: C,
+  role: "reader" | "writer" | "admin",
+  { baseURL, valueHint }: { baseURL?: string; valueHint?: string } = {},
+): string {
+  const coValueCore = value._raw.core;
+  let currentCoValue = coValueCore;
+
+  while (currentCoValue.header.ruleset.type === "ownedByGroup") {
+    currentCoValue = currentCoValue.getGroup().core;
+  }
+
+  if (currentCoValue.header.ruleset.type !== "group") {
+    throw new Error("Can't create invite link for object without group");
+  }
+
+  const group = cojsonInternals.expectGroup(currentCoValue.getCurrentContent());
+  const inviteSecret = group.createInvite(role);
+
+  return `${baseURL}/invite/${valueHint ? valueHint + "/" : ""}${
+    value.id
+  }/${inviteSecret}`;
+}
+
+/** @category Invite Links */
+// TODO: copied from jazz-browser, should be shared
+export function parseInviteLink<C extends CoValue>(
+  inviteURL: string,
+):
+  | {
+      valueID: ID<C>;
+      valueHint?: string;
+      inviteSecret: InviteSecret;
+    }
+  | undefined {
+  const url = new URL(inviteURL);
+  const parts = url.hash.split("/");
+
+  let valueHint: string | undefined;
+  let valueID: ID<C> | undefined;
+  let inviteSecret: InviteSecret | undefined;
+
+  if (parts[0] === "#" && parts[1] === "invite") {
+    if (parts.length === 5) {
+      valueHint = parts[2];
+      valueID = parts[3] as ID<C>;
+      inviteSecret = parts[4] as InviteSecret;
+    } else if (parts.length === 4) {
+      valueID = parts[2] as ID<C>;
+      inviteSecret = parts[3] as InviteSecret;
+    }
+
+    if (!valueID || !inviteSecret) {
+      return undefined;
+    }
+    return { valueID, inviteSecret, valueHint };
+  }
+}
+
+export function setupKvStore(kvStore = new ExpoSecureStoreAdapter()) {
+  KvStoreContext.getInstance().initialize(kvStore);
+
+  return kvStore;
+}

package/src/provider.tsx

@@ -1,314 +1,109 @@
-import React, { useEffect, useState } from "react";
-
-import {
-  Account,
-  AccountClass,
-  AnonymousJazzAgent,
-  AuthMethod,
-  CoValue,
-  CoValueClass,
-  DeeplyLoaded,
-  DepthsIn,
-  ID,
-  subscribeToCoValue,
-} from "jazz-tools";
-import { Linking } from "react-native";
+import { JazzContext, JazzContextType } from "jazz-react-core";
+import { Account, AccountClass, AuthMethod } from "jazz-tools";
+import { useState } from "react";
+import { useEffect, useRef } from "react";
 import {
   BaseReactNativeContextOptions,
-  KvStore,
-  KvStoreContext,
-  ReactNativeContext,
-  ReactNativeGuestContext,
   createJazzRNContext,
-  parseInviteLink,
-} from "./index.js";
-import { ExpoSecureStoreAdapter } from "./storage/expo-secure-store-adapter.js";
+} from "./platform.js";
+export interface Register {}
 
-/** @category Context & Hooks */
-export function createJazzRNApp<Acc extends Account>({
-  kvStore = new ExpoSecureStoreAdapter(),
-  AccountSchema = Account as unknown as AccountClass<Acc>,
-  CryptoProvider,
-}: {
-  kvStore?: KvStore;
+export type RegisteredAccount = Register extends { Account: infer Acc }
+  ? Acc
+  : Account;
+
+export type JazzProviderProps<Acc extends Account = RegisteredAccount> = {
+  children: React.ReactNode;
+  auth: AuthMethod | "guest";
+  peer: `wss://${string}` | `ws://${string}`;
   AccountSchema?: AccountClass<Acc>;
   CryptoProvider?: BaseReactNativeContextOptions["CryptoProvider"];
-} = {}): JazzReactApp<Acc> {
-  const JazzContext = React.createContext<
-    ReactNativeContext<Acc> | ReactNativeGuestContext | undefined
-  >(undefined);
-
-  if (!kvStore) {
-    throw new Error("kvStore is required");
-  }
+};
 
-  KvStoreContext.getInstance().initialize(kvStore);
-
-  function Provider({
-    children,
-    auth,
-    peer,
-    storage,
-  }: {
-    children: React.ReactNode;
-    auth: AuthMethod | "guest";
-    peer: `wss://${string}` | `ws://${string}`;
-    storage?: "indexedDB" | "singleTabOPFS";
-  }) {
-    const [ctx, setCtx] = useState<
-      ReactNativeContext<Acc> | ReactNativeGuestContext | undefined
-    >();
-
-    const [sessionCount, setSessionCount] = useState(0);
+/** @category Context & Hooks */
+export function JazzProvider<Acc extends Account = RegisteredAccount>({
+  children,
+  auth,
+  peer,
+  AccountSchema = Account as unknown as AccountClass<Acc>,
+  CryptoProvider,
+}: JazzProviderProps<Acc>) {
+  const [ctx, setCtx] = useState<JazzContextType<Acc> | undefined>();
+
+  const [sessionCount, setSessionCount] = useState(0);
+
+  const effectExecuted = useRef(false);
+  effectExecuted.current = false;
+
+  useEffect(() => {
+    // Avoid double execution of the effect in development mode for easier debugging.
+    if (process.env.NODE_ENV === "development") {
+      if (effectExecuted.current) {
+        return;
+      }
+      effectExecuted.current = true;
+
+      // In development mode we don't return a cleanup function because otherwise
+      // the double effect execution would mark the context as done immediately.
+      //
+      // So we mark it as done in the subsequent execution.
+      const previousContext = ctx;
+
+      if (previousContext) {
+        previousContext.done();
+      }
+    }
 
-    useEffect(() => {
-      const promiseWithDoneCallback = createJazzRNContext<Acc>(
+    async function createContext() {
+      const currentContext = await createJazzRNContext<Acc>(
         auth === "guest"
           ? {
               peer,
-              storage,
               CryptoProvider,
             }
           : {
               AccountSchema,
               auth: auth,
               peer,
-              storage,
               CryptoProvider,
             },
-      ).then((context) => {
-        setCtx({
-          ...context,
-          logOut: () => {
-            context.logOut();
-            setCtx(undefined);
-            setSessionCount(sessionCount + 1);
-          },
-        });
-        return context.done;
-      });
-
-      return () => {
-        void promiseWithDoneCallback
-          .then((done) => done())
-          .catch((e) => {
-            console.error("Error in createJazzRNContext", e);
-          });
-      };
-    }, [AccountSchema, auth, peer, storage, sessionCount]);
-
-    return (
-      <JazzContext.Provider value={ctx}>{ctx && children}</JazzContext.Provider>
-    );
-  }
-
-  function useAccount(): { me: Acc; logOut: () => void };
-  function useAccount<D extends DepthsIn<Acc>>(
-    depth: D,
-  ): { me: DeeplyLoaded<Acc, D> | undefined; logOut: () => void };
-  function useAccount<D extends DepthsIn<Acc>>(
-    depth?: D,
-  ): { me: Acc | DeeplyLoaded<Acc, D> | undefined; logOut: () => void } {
-    const context = React.useContext(JazzContext);
-
-    if (!context) {
-      throw new Error("useAccount must be used within a JazzProvider");
-    }
-
-    if (!("me" in context)) {
-      throw new Error(
-        "useAccount can't be used in a JazzProvider with auth === 'guest' - consider using useAccountOrGuest()",
       );
-    }
-
-    const me = useCoState<Acc, D>(
-      context?.me.constructor as CoValueClass<Acc>,
-      context?.me.id,
-      depth,
-    );
-
-    return {
-      me: depth === undefined ? me || context.me : me,
-      logOut: context.logOut,
-    };
-  }
-
-  function useAccountOrGuest(): { me: Acc | AnonymousJazzAgent };
-  function useAccountOrGuest<D extends DepthsIn<Acc>>(
-    depth: D,
-  ): { me: DeeplyLoaded<Acc, D> | undefined | AnonymousJazzAgent };
-  function useAccountOrGuest<D extends DepthsIn<Acc>>(
-    depth?: D,
-  ): { me: Acc | DeeplyLoaded<Acc, D> | undefined | AnonymousJazzAgent } {
-    const context = React.useContext(JazzContext);
-
-    if (!context) {
-      throw new Error("useAccountOrGuest must be used within a JazzProvider");
-    }
 
-    const contextMe = "me" in context ? context.me : undefined;
+      const logOut = () => {
+        currentContext.logOut();
+        setCtx(undefined);
+        setSessionCount(sessionCount + 1);
 
-    const me = useCoState<Acc, D>(
-      contextMe?.constructor as CoValueClass<Acc>,
-      contextMe?.id,
-      depth,
-    );
-
-    if ("me" in context) {
-      return {
-        me: depth === undefined ? me || context.me : me,
-      };
-    } else {
-      return { me: context.guest };
-    }
-  }
-
-  function useCoState<V extends CoValue, D>(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    Schema: CoValueClass<V>,
-    id: ID<V> | undefined,
-    depth: D & DepthsIn<V> = [] as D & DepthsIn<V>,
-  ): DeeplyLoaded<V, D> | undefined {
-    const [state, setState] = useState<{
-      value: DeeplyLoaded<V, D> | undefined;
-    }>({ value: undefined });
-    const context = React.useContext(JazzContext);
-
-    if (!context) {
-      throw new Error("useCoState must be used within a JazzProvider");
-    }
-
-    useEffect(() => {
-      if (!id) return;
-
-      return subscribeToCoValue(
-        Schema,
-        id,
-        "me" in context ? context.me : context.guest,
-        depth,
-        (value) => {
-          setState({ value });
-        },
-      );
-    }, [Schema, id, context]);
-
-    return state.value;
-  }
-
-  function useAcceptInvite<V extends CoValue>({
-    invitedObjectSchema,
-    onAccept,
-    forValueHint,
-  }: {
-    invitedObjectSchema: CoValueClass<V>;
-    onAccept: (projectID: ID<V>) => void;
-    forValueHint?: string;
-  }): void {
-    const context = React.useContext(JazzContext);
-
-    if (!context) {
-      throw new Error("useAcceptInvite must be used within a JazzProvider");
-    }
-
-    if (!("me" in context)) {
-      throw new Error(
-        "useAcceptInvite can't be used in a JazzProvider with auth === 'guest'.",
-      );
-    }
-
-    useEffect(() => {
-      const handleDeepLink = ({ url }: { url: string }) => {
-        const result = parseInviteLink<V>(url);
-        if (result && result.valueHint === forValueHint) {
-          context.me
-            .acceptInvite(
-              result.valueID,
-              result.inviteSecret,
-              invitedObjectSchema,
-            )
-            .then(() => {
-              onAccept(result.valueID);
-            })
-            .catch((e) => {
-              console.error("Failed to accept invite", e);
-            });
+        if (process.env.NODE_ENV === "development") {
+          // In development mode we don't return a cleanup function
+          // so we mark the context as done here.
+          currentContext.done();
         }
       };
 
-      const linkingListener = Linking.addEventListener("url", handleDeepLink);
-
-      void Linking.getInitialURL().then((url) => {
-        if (url) handleDeepLink({ url });
+      setCtx({
+        ...currentContext,
+        AccountSchema,
+        logOut,
       });
 
-      return () => {
-        linkingListener.remove();
-      };
-    }, [context, onAccept, invitedObjectSchema, forValueHint]);
-  }
-
-  return {
-    Provider,
-    useAccount,
-    useAccountOrGuest,
-    useCoState,
-    useAcceptInvite,
-    kvStore,
-  };
-}
-
-/** @category Context & Hooks */
-export interface JazzReactApp<Acc extends Account> {
-  /** @category Provider Component */
-  Provider: React.FC<{
-    children: React.ReactNode;
-    auth: AuthMethod | "guest";
-    peer: `wss://${string}` | `ws://${string}`;
-    storage?: "indexedDB" | "singleTabOPFS";
-  }>;
+      return currentContext;
+    }
 
-  /** @category Hooks */
-  useAccount(): {
-    me: Acc;
-    logOut: () => void;
-  };
-  /** @category Hooks */
-  useAccount<D extends DepthsIn<Acc>>(
-    depth: D,
-  ): {
-    me: DeeplyLoaded<Acc, D> | undefined;
-    logOut: () => void;
-  };
+    const promise = createContext();
 
-  /** @category Hooks */
-  useAccountOrGuest(): {
-    me: Acc | AnonymousJazzAgent;
-  };
-  useAccountOrGuest<D extends DepthsIn<Acc>>(
-    depth: D,
-  ): {
-    me: DeeplyLoaded<Acc, D> | undefined | AnonymousJazzAgent;
-  };
-  /** @category Hooks */
-  useCoState<V extends CoValue, D>(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    Schema: { new (...args: any[]): V } & CoValueClass,
-    id: ID<V> | undefined,
-    depth?: D & DepthsIn<V>,
-  ): DeeplyLoaded<V, D> | undefined;
+    // In development mode we don't return a cleanup function because otherwise
+    // the double effect execution would mark the context as done immediately.
+    if (process.env.NODE_ENV === "development") {
+      return;
+    }
 
-  /** @category Hooks */
-  useAcceptInvite<V extends CoValue>({
-    invitedObjectSchema,
-    onAccept,
-    forValueHint,
-  }: {
-    invitedObjectSchema: CoValueClass<V>;
-    onAccept: (projectID: ID<V>) => void;
-    forValueHint?: string;
-  }): void;
+    return () => {
+      void promise.then((context) => context.done());
+    };
+  }, [AccountSchema, auth, peer, sessionCount]);
 
-  kvStore: KvStore;
+  return (
+    <JazzContext.Provider value={ctx}>{ctx && children}</JazzContext.Provider>
+  );
 }
-
-export * from "./media.js";

package/src/storage/kv-store-context.ts

@@ -18,6 +18,10 @@ export class KvStoreContext {
     return KvStoreContext.instance;
   }
 
+  public isInitialized(): boolean {
+    return this.storageInstance !== null;
+  }
+
   public initialize(store: KvStore): void {
     if (!this.storageInstance) {
       this.storageInstance = store;

package/src/testing.tsx

@@ -0,0 +1 @@
+export * from "jazz-react-core/testing";