jazz-tools 0.14.27 → 0.15.0

package/src/react/testing.tsx

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

package/src/react/tests/testUtils.tsx

@@ -0,0 +1,54 @@
+import {
+  RenderHookOptions,
+  RenderOptions,
+  render,
+  renderHook,
+} from "@testing-library/react";
+import { Account, AnonymousJazzAgent } from "jazz-tools";
+import React from "react";
+import { JazzTestProvider } from "../testing.js";
+
+type JazzExtendedOptions = {
+  account: Account | { guest: AnonymousJazzAgent };
+};
+
+const customRender = (
+  ui: React.ReactNode,
+  options: RenderOptions & JazzExtendedOptions,
+) => {
+  const AllTheProviders = ({
+    children,
+  }: {
+    children: React.ReactNode;
+  }) => {
+    return (
+      <JazzTestProvider account={options.account}>{children}</JazzTestProvider>
+    );
+  };
+
+  return render(ui, { wrapper: AllTheProviders, ...options });
+};
+
+const customRenderHook = <TProps, TResult>(
+  callback: (props: TProps) => TResult,
+  options: RenderHookOptions<TProps> & JazzExtendedOptions,
+) => {
+  const AllTheProviders = ({
+    children,
+  }: {
+    children: React.ReactNode;
+  }) => {
+    return (
+      <JazzTestProvider account={options.account}>{children}</JazzTestProvider>
+    );
+  };
+
+  return renderHook(callback, { wrapper: AllTheProviders, ...options });
+};
+
+// re-export everything
+export * from "@testing-library/react";
+
+// override render method
+export { customRender as render };
+export { customRenderHook as renderHook };

package/src/react/tests/useAcceptInvite.test.ts

@@ -0,0 +1,55 @@
+// @vitest-environment happy-dom
+
+import { CoMap, Group, ID, co, coField, z } from "jazz-tools";
+import { describe, expect, it } from "vitest";
+import { createInviteLink, useAcceptInvite } from "../index.js";
+import { createJazzTestAccount, linkAccounts } from "../testing.js";
+import { renderHook, waitFor } from "./testUtils.js";
+
+describe("useAcceptInvite", () => {
+  it("should accept the invite", async () => {
+    const TestMap = co.map({
+      value: z.string(),
+    });
+
+    const account = await createJazzTestAccount();
+    const inviteSender = await createJazzTestAccount();
+
+    await linkAccounts(account, inviteSender);
+
+    let acceptedId: string | undefined;
+
+    const invitelink = createInviteLink(
+      TestMap.create(
+        { value: "hello" },
+        { owner: Group.create({ owner: inviteSender }) },
+      ),
+      "reader",
+    );
+
+    location.href = invitelink;
+
+    renderHook(
+      () =>
+        useAcceptInvite({
+          invitedObjectSchema: TestMap,
+          onAccept: (id) => {
+            acceptedId = id;
+          },
+        }),
+      {
+        account,
+      },
+    );
+
+    await waitFor(() => {
+      expect(acceptedId).toBeDefined();
+    });
+
+    const accepted = await TestMap.load(acceptedId!, {
+      loadAs: account,
+    });
+
+    expect(accepted?.value).toEqual("hello");
+  });
+});

package/src/react-core/auth/DemoAuth.tsx

@@ -0,0 +1,47 @@
+import { DemoAuth } from "jazz-tools";
+import { useEffect, useMemo, useState } from "react";
+import { useAuthSecretStorage, useJazzContext } from "../hooks.js";
+import { useIsAuthenticated } from "../hooks.js";
+
+/**
+ * `useDemoAuth` is a hook that provides a `JazzAuth` object for demo authentication.
+ *
+ *
+ * ```ts
+ * const { state, logIn, signUp, existingUsers } = useDemoAuth();
+ * ```
+ *
+ * @category Auth Providers
+ */
+export function useDemoAuth() {
+  const context = useJazzContext();
+  const authSecretStorage = useAuthSecretStorage();
+
+  if ("guest" in context) {
+    throw new Error("Demo auth is not supported in guest mode");
+  }
+
+  const authMethod = useMemo(() => {
+    return new DemoAuth(context.authenticate, authSecretStorage);
+  }, []);
+
+  const isAuthenticated = useIsAuthenticated();
+  const [existingUsers, setExistingUsers] = useState<string[]>([]);
+
+  useEffect(() => {
+    authMethod.getExistingUsers().then(setExistingUsers);
+  }, [authMethod]);
+
+  function handleSignUp(username: string) {
+    return authMethod.signUp(username).then(() => {
+      setExistingUsers(existingUsers.concat([username]));
+    });
+  }
+
+  return {
+    state: isAuthenticated ? "signedIn" : "anonymous",
+    logIn: authMethod.logIn,
+    signUp: handleSignUp,
+    existingUsers,
+  } as const;
+}

package/src/react-core/auth/PassphraseAuth.tsx

@@ -0,0 +1,58 @@
+import { PassphraseAuth } from "jazz-tools";
+import { useCallback, useMemo, useSyncExternalStore } from "react";
+import { useAuthSecretStorage, useJazzContext } from "../hooks.js";
+import { useIsAuthenticated } from "../hooks.js";
+
+/**
+ * `usePassphraseAuth` hook provides a `JazzAuth` object for passphrase authentication.
+ *
+ * @example
+ * ```ts
+ * const auth = usePassphraseAuth({ appName, appHostname, wordlist });
+ * ```
+ *
+ * @category Auth Providers
+ */
+export function usePassphraseAuth({
+  wordlist,
+}: {
+  wordlist: string[];
+}) {
+  const context = useJazzContext();
+  const authSecretStorage = useAuthSecretStorage();
+
+  if ("guest" in context) {
+    throw new Error("Passphrase auth is not supported in guest mode");
+  }
+
+  const authMethod = useMemo(() => {
+    return new PassphraseAuth(
+      context.node.crypto,
+      context.authenticate,
+      context.register,
+      authSecretStorage,
+      wordlist,
+    );
+  }, [wordlist]);
+
+  const passphrase = useSyncExternalStore(
+    useCallback(
+      (callback) => {
+        authMethod.loadCurrentAccountPassphrase();
+        return authMethod.subscribe(callback);
+      },
+      [authMethod],
+    ),
+    () => authMethod.passphrase,
+  );
+
+  const isAuthenticated = useIsAuthenticated();
+  return {
+    state: isAuthenticated ? "signedIn" : "anonymous",
+    logIn: authMethod.logIn,
+    signUp: authMethod.signUp,
+    registerNewAccount: authMethod.registerNewAccount,
+    generateRandomPassphrase: authMethod.generateRandomPassphrase,
+    passphrase,
+  } as const;
+}

package/src/react-core/auth/index.ts

@@ -0,0 +1,2 @@
+export * from "./DemoAuth.js";
+export * from "./PassphraseAuth.js";

package/src/react-core/hooks.ts

@@ -0,0 +1,310 @@
+import React, {
+  useCallback,
+  useContext,
+  useRef,
+  useSyncExternalStore,
+} from "react";
+
+import {
+  Account,
+  AccountClass,
+  AnonymousJazzAgent,
+  AnyAccountSchema,
+  CoValue,
+  CoValueOrZodSchema,
+  InboxSender,
+  InstanceOfSchema,
+  JazzContextManager,
+  JazzContextType,
+  Loaded,
+  ResolveQuery,
+  ResolveQueryStrict,
+  SubscriptionScope,
+  anySchemaToCoSchema,
+} from "jazz-tools";
+import { JazzContext, JazzContextManagerContext } from "./provider.js";
+import { getCurrentAccountFromContextManager } from "./utils.js";
+
+export function useJazzContext<Acc extends Account>() {
+  const value = useContext(JazzContext) as JazzContextType<Acc>;
+
+  if (!value) {
+    throw new Error(
+      "You need to set up a JazzProvider on top of your app to use this hook.",
+    );
+  }
+
+  return value;
+}
+
+export function useJazzContextManager<Acc extends Account>() {
+  const value = useContext(JazzContextManagerContext) as JazzContextManager<
+    Acc,
+    {}
+  >;
+
+  if (!value) {
+    throw new Error(
+      "You need to set up a JazzProvider on top of your app to use this hook.",
+    );
+  }
+
+  return value;
+}
+
+export function useAuthSecretStorage() {
+  const value = useContext(JazzContextManagerContext);
+
+  if (!value) {
+    throw new Error(
+      "You need to set up a JazzProvider on top of your app to use this useAuthSecretStorage.",
+    );
+  }
+
+  return value.getAuthSecretStorage();
+}
+
+export function useIsAuthenticated() {
+  const authSecretStorage = useAuthSecretStorage();
+
+  return useSyncExternalStore(
+    useCallback(
+      (callback) => {
+        return authSecretStorage.onUpdate(callback);
+      },
+      [authSecretStorage],
+    ),
+    () => authSecretStorage.isAuthenticated,
+    () => authSecretStorage.isAuthenticated,
+  );
+}
+
+function useCoValueSubscription<
+  S extends CoValueOrZodSchema,
+  const R extends ResolveQuery<S>,
+>(
+  Schema: S,
+  id: string | undefined | null,
+  options?: {
+    resolve?: ResolveQueryStrict<S, R>;
+  },
+) {
+  const contextManager = useJazzContextManager();
+
+  const createSubscription = () => {
+    if (!id) {
+      return {
+        subscription: null,
+        contextManager,
+        id,
+        Schema,
+      };
+    }
+
+    const node = contextManager.getCurrentValue()!.node;
+    const subscription = new SubscriptionScope<any>(
+      node,
+      options?.resolve ?? true,
+      id,
+      {
+        ref: anySchemaToCoSchema(Schema),
+        optional: true,
+      },
+    );
+
+    return {
+      subscription,
+      contextManager,
+      id,
+      Schema,
+    };
+  };
+
+  const [subscription, setSubscription] = React.useState(createSubscription);
+
+  React.useLayoutEffect(() => {
+    if (
+      subscription.contextManager !== contextManager ||
+      subscription.id !== id ||
+      subscription.Schema !== Schema
+    ) {
+      subscription.subscription?.destroy();
+      setSubscription(createSubscription());
+    }
+
+    return contextManager.subscribe(() => {
+      subscription.subscription?.destroy();
+      setSubscription(createSubscription());
+    });
+  }, [Schema, id, contextManager]);
+
+  return subscription.subscription;
+}
+
+export function useCoState<
+  S extends CoValueOrZodSchema,
+  const R extends ResolveQuery<S> = true,
+>(
+  Schema: S,
+  id: string | undefined,
+  options?: {
+    resolve?: ResolveQueryStrict<S, R>;
+  },
+): Loaded<S, R> | undefined | null {
+  const subscription = useCoValueSubscription(Schema, id, options);
+
+  const value = React.useSyncExternalStore<Loaded<S, R> | undefined | null>(
+    React.useCallback(
+      (callback) => {
+        if (!subscription) {
+          return () => {};
+        }
+
+        return subscription.subscribe(callback);
+      },
+      [subscription],
+    ),
+    () => (subscription ? subscription.getCurrentValue() : null),
+    () => (subscription ? subscription.getCurrentValue() : null),
+  );
+
+  return value;
+}
+
+function useAccountSubscription<
+  S extends AccountClass<Account> | AnyAccountSchema,
+  const R extends ResolveQuery<S>,
+>(
+  Schema: S,
+  options?: {
+    resolve?: ResolveQueryStrict<S, R>;
+  },
+) {
+  const contextManager = useJazzContextManager();
+
+  const createSubscription = () => {
+    const agent = getCurrentAccountFromContextManager(contextManager);
+
+    if (agent._type === "Anonymous") {
+      return {
+        subscription: null,
+        contextManager,
+        agent,
+      };
+    }
+
+    // We don't need type validation here, since it's mostly to help users on public API
+    const resolve: any = options?.resolve ?? true;
+
+    const node = contextManager.getCurrentValue()!.node;
+    const subscription = new SubscriptionScope<any>(node, resolve, agent.id, {
+      ref: anySchemaToCoSchema(Schema),
+      optional: true,
+    });
+
+    return {
+      subscription,
+      contextManager,
+      Schema,
+    };
+  };
+
+  const [subscription, setSubscription] = React.useState(createSubscription);
+
+  React.useLayoutEffect(() => {
+    if (
+      subscription.contextManager !== contextManager ||
+      subscription.Schema !== Schema
+    ) {
+      subscription.subscription?.destroy();
+      setSubscription(createSubscription());
+    }
+
+    return contextManager.subscribe(() => {
+      subscription.subscription?.destroy();
+      setSubscription(createSubscription());
+    });
+  }, [Schema, contextManager]);
+
+  return subscription.subscription;
+}
+
+export function useAccount<
+  A extends AccountClass<Account> | AnyAccountSchema,
+  R extends ResolveQuery<A> = true,
+>(
+  AccountSchema: A = Account as unknown as A,
+  options?: {
+    resolve?: ResolveQueryStrict<A, R>;
+  },
+): {
+  me: Loaded<A, R> | undefined | null;
+  agent: AnonymousJazzAgent | Loaded<A, true>;
+  logOut: () => void;
+} {
+  const contextManager = useJazzContextManager<InstanceOfSchema<A>>();
+  const subscription = useAccountSubscription(AccountSchema, options);
+
+  const agent = getCurrentAccountFromContextManager(contextManager);
+
+  const value = React.useSyncExternalStore<Loaded<A, R> | undefined | null>(
+    React.useCallback(
+      (callback) => {
+        if (!subscription) {
+          return () => {};
+        }
+
+        return subscription.subscribe(callback);
+      },
+      [subscription],
+    ),
+    () => (subscription ? subscription.getCurrentValue() : null),
+    () => (subscription ? subscription.getCurrentValue() : null),
+  );
+
+  return {
+    me: value,
+    agent,
+    logOut: contextManager.logOut,
+  };
+}
+
+export function experimental_useInboxSender<
+  I extends CoValue,
+  O extends CoValue | undefined,
+>(inboxOwnerID: string | undefined) {
+  const context = useJazzContext();
+
+  if (!("me" in context)) {
+    throw new Error(
+      "useInboxSender can't be used in a JazzProvider with auth === 'guest'.",
+    );
+  }
+
+  const me = context.me;
+  const inboxRef = useRef<Promise<InboxSender<I, O>> | undefined>(undefined);
+
+  const sendMessage = useCallback(
+    async (message: I) => {
+      if (!inboxOwnerID) throw new Error("Inbox owner ID is required");
+
+      if (!inboxRef.current) {
+        const inbox = InboxSender.load<I, O>(inboxOwnerID, me);
+        inboxRef.current = inbox;
+      }
+
+      let inbox = await inboxRef.current;
+
+      if (inbox.owner.id !== inboxOwnerID) {
+        const req = InboxSender.load<I, O>(inboxOwnerID, me);
+        inboxRef.current = req;
+        inbox = await req;
+      }
+
+      return inbox.sendMessage(message);
+    },
+    [inboxOwnerID],
+  );
+
+  return sendMessage;
+}

package/src/react-core/index.ts

@@ -0,0 +1,3 @@
+export * from "./hooks.js";
+export * from "./provider.js";
+export * from "./auth/index.js";

package/src/react-core/provider.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+import { Account, JazzContextManager, JazzContextType } from "jazz-tools";
+
+export const JazzContext = React.createContext<
+  JazzContextType<Account> | undefined
+>(undefined);
+
+export const JazzContextManagerContext = React.createContext<
+  JazzContextManager<Account, {}> | undefined
+>(undefined);

package/src/react-core/testing.tsx

@@ -0,0 +1,42 @@
+import { Account, AnonymousJazzAgent } from "jazz-tools";
+import { TestJazzContextManager } from "jazz-tools/testing";
+import { useCallback, useState, useSyncExternalStore } from "react";
+import { JazzContext, JazzContextManagerContext } from "./provider.js";
+
+export function JazzTestProvider<Acc extends Account>({
+  children,
+  account,
+  isAuthenticated,
+}: {
+  children: React.ReactNode;
+  account?: Acc | { guest: AnonymousJazzAgent };
+  isAuthenticated?: boolean;
+}) {
+  const [contextManager] = useState(() => {
+    return TestJazzContextManager.fromAccountOrGuest<Acc>(account, {
+      isAuthenticated,
+    });
+  });
+
+  const value = useSyncExternalStore(
+    useCallback((callback) => contextManager.subscribe(callback), []),
+    () => contextManager.getCurrentValue(),
+    () => contextManager.getCurrentValue(),
+  );
+
+  return (
+    <JazzContext.Provider value={value}>
+      <JazzContextManagerContext.Provider value={contextManager}>
+        {children}
+      </JazzContextManagerContext.Provider>
+    </JazzContext.Provider>
+  );
+}
+
+export {
+  createJazzTestAccount,
+  createJazzTestGuest,
+  linkAccounts,
+  setActiveAccount,
+  setupJazzTestSync,
+} from "jazz-tools/testing";

package/src/react-core/tests/testUtils.tsx

@@ -0,0 +1,65 @@
+import {
+  RenderHookOptions,
+  RenderOptions,
+  render,
+  renderHook,
+} from "@testing-library/react";
+import { Account, AnonymousJazzAgent, AuthSecretStorage } from "jazz-tools";
+import React from "react";
+import { JazzTestProvider } from "../testing.js";
+
+type JazzExtendedOptions = {
+  account?: Account | { guest: AnonymousJazzAgent };
+  isAuthenticated?: boolean;
+};
+
+const customRender = (
+  ui: React.ReactNode,
+  options: RenderOptions & JazzExtendedOptions = {},
+) => {
+  const AllTheProviders = ({
+    children,
+  }: {
+    children: React.ReactNode;
+  }) => {
+    return (
+      <JazzTestProvider
+        account={options.account}
+        isAuthenticated={options.isAuthenticated}
+      >
+        {children}
+      </JazzTestProvider>
+    );
+  };
+
+  return render(ui, { wrapper: AllTheProviders, ...options });
+};
+
+const customRenderHook = <TProps, TResult>(
+  callback: (props: TProps) => TResult,
+  options: RenderHookOptions<TProps> & JazzExtendedOptions = {},
+) => {
+  const AllTheProviders = ({
+    children,
+  }: {
+    children: React.ReactNode;
+  }) => {
+    return (
+      <JazzTestProvider
+        account={options.account}
+        isAuthenticated={options.isAuthenticated}
+      >
+        {children}
+      </JazzTestProvider>
+    );
+  };
+
+  return renderHook(callback, { wrapper: AllTheProviders, ...options });
+};
+
+// re-export everything
+export * from "@testing-library/react";
+
+// override render method
+export { customRender as render };
+export { customRenderHook as renderHook };