jazz-tools 0.18.8 → 0.18.10

package/src/react-core/hooks.ts

@@ -580,6 +580,90 @@ export function useAccount<
   };
 }
 
+/**
+ * React hook for accessing the current user's account with selective data extraction and custom equality checking.
+ *
+ * This hook extends `useAccount` by allowing you to select only specific parts of the account data
+ * through a selector function, which helps reduce unnecessary re-renders by narrowing down the
+ * returned data. Additionally, you can provide a custom equality function to further optimize
+ * performance by controlling when the component should re-render based on the selected data.
+ *
+ * The hook automatically handles the subscription lifecycle and supports deep loading of nested
+ * CoValues through resolve queries, just like `useAccount`.
+ *
+ * @returns The result of the selector function applied to the loaded account data
+ *
+ * @example
+ * ```tsx
+ * // Select only specific fields to reduce re-renders
+ * const MyAppAccount = co.account({
+ *   profile: co.profile(),
+ *   root: co.map({
+ *     name: z.string(),
+ *     email: z.string(),
+ *     lastLogin: z.date(),
+ *   }),
+ * });
+ *
+ * function UserProfile({ accountId }: { accountId: string }) {
+ *   // Only re-render when the profile name changes, not other fields
+ *   const profileName = useAccountWithSelector(
+ *     MyAppAccount,
+ *     {
+ *       resolve: {
+ *         profile: true,
+ *         root: true,
+ *       },
+ *       select: (account) => account?.profile?.name ?? "Loading...",
+ *     }
+ *   );
+ *
+ *   return <h1>{profileName}</h1>;
+ * }
+ * ```
+ *
+ * For more examples, see the [subscription and deep loading](https://jazz.tools/docs/react/using-covalues/subscription-and-loading) documentation.
+ */
+export function useAccountWithSelector<
+  A extends AccountClass<Account> | AnyAccountSchema,
+  TSelectorReturn,
+  R extends ResolveQuery<A> = true,
+>(
+  /** The account schema to use. Defaults to the base Account schema */
+  AccountSchema: A = Account as unknown as A,
+  /** Configuration for the subscription and selection */
+  options: {
+    /** Resolve query to specify which nested CoValues to load from the account */
+    resolve?: ResolveQueryStrict<A, R>;
+    /** Select which value to return from the account data */
+    select: (account: Loaded<A, R> | undefined | null) => TSelectorReturn;
+    /** Equality function to determine if the selected value has changed, defaults to `Object.is` */
+    equalityFn?: (a: TSelectorReturn, b: TSelectorReturn) => boolean;
+  },
+): TSelectorReturn {
+  const subscription = useAccountSubscription(AccountSchema, options);
+
+  return useSyncExternalStoreWithSelector<
+    Loaded<A, R> | undefined | null,
+    TSelectorReturn
+  >(
+    React.useCallback(
+      (callback) => {
+        if (!subscription) {
+          return () => {};
+        }
+
+        return subscription.subscribe(callback);
+      },
+      [subscription],
+    ),
+    () => (subscription ? subscription.getCurrentValue() : null),
+    () => (subscription ? subscription.getCurrentValue() : null),
+    options.select,
+    options.equalityFn ?? Object.is,
+  );
+}
+
 export function experimental_useInboxSender<
   I extends CoValue,
   O extends CoValue | undefined,

package/src/react-core/tests/useAccountWithSelector.test.ts

@@ -0,0 +1,411 @@
+// @vitest-environment happy-dom
+
+import { Account, RefsToResolve, co, z } from "jazz-tools";
+import { beforeEach, describe, expect, it } from "vitest";
+import { useAccountWithSelector, useJazzContextManager } from "../hooks.js";
+import { useIsAuthenticated } from "../index.js";
+import {
+  createJazzTestAccount,
+  createJazzTestGuest,
+  setupJazzTestSync,
+} from "../testing.js";
+import { act, renderHook } from "./testUtils.js";
+import { useRef } from "react";
+
+beforeEach(async () => {
+  await setupJazzTestSync();
+});
+
+const useRenderCount = <T>(hook: () => T) => {
+  const renderCountRef = useRef(0);
+  const result = hook();
+  renderCountRef.current = renderCountRef.current + 1;
+  return {
+    renderCount: renderCountRef.current,
+    result,
+  };
+};
+
+describe("useAccountWithSelector", () => {
+  it("should return the correct selected value", async () => {
+    const AccountRoot = co.map({
+      value: z.string(),
+    });
+
+    const AccountSchema = co
+      .account({
+        root: AccountRoot,
+        profile: co.profile(),
+      })
+      .withMigration((account, creationProps) => {
+        if (!account.$jazz.refs.root) {
+          account.$jazz.set("root", { value: "123" });
+        }
+      });
+
+    const account = await createJazzTestAccount({
+      AccountSchema,
+    });
+
+    const { result } = renderHook(
+      () =>
+        useAccountWithSelector(AccountSchema, {
+          resolve: {
+            root: true,
+          },
+          select: (account) => account?.root.value ?? "Loading...",
+        }),
+      {
+        account,
+      },
+    );
+
+    expect(result.current).toBe("123");
+  });
+
+  it("should load nested values if requested", async () => {
+    const AccountRoot = co.map({
+      value: z.string(),
+      nested: co.map({
+        nestedValue: z.string(),
+      }),
+    });
+
+    const AccountSchema = co
+      .account({
+        root: AccountRoot,
+        profile: co.profile(),
+      })
+      .withMigration((account, creationProps) => {
+        if (!account.$jazz.refs.root) {
+          const root = AccountRoot.create({
+            value: "123",
+            nested: co
+              .map({
+                nestedValue: z.string(),
+              })
+              .create({
+                nestedValue: "456",
+              }),
+          });
+          account.$jazz.set("root", root);
+        }
+      });
+
+    const account = await createJazzTestAccount({
+      AccountSchema,
+    });
+
+    const { result } = renderHook(
+      () =>
+        useAccountWithSelector(AccountSchema, {
+          resolve: {
+            root: {
+              nested: true,
+            },
+          },
+          select: (account) => account?.root.nested.nestedValue ?? "Loading...",
+        }),
+      {
+        account,
+      },
+    );
+
+    expect(result.current).toBe("456");
+  });
+
+  it("should not re-render when a nested coValue is updated and not selected", async () => {
+    const AccountRoot = co.map({
+      value: z.string(),
+      get nested() {
+        return co
+          .map({
+            nestedValue: z.string(),
+          })
+          .optional();
+      },
+    });
+
+    const AccountSchema = co
+      .account({
+        root: AccountRoot,
+        profile: co.profile(),
+      })
+      .withMigration((account, creationProps) => {
+        if (!account.$jazz.refs.root) {
+          const root = AccountRoot.create({
+            value: "1",
+            nested: co
+              .map({
+                nestedValue: z.string(),
+              })
+              .create({
+                nestedValue: "1",
+              }),
+          });
+          account.$jazz.set("root", root);
+        }
+      });
+
+    const account = await createJazzTestAccount({
+      AccountSchema,
+    });
+
+    const { result } = renderHook(
+      () =>
+        useRenderCount(() =>
+          useAccountWithSelector(AccountSchema, {
+            resolve: {
+              root: {
+                nested: true,
+              },
+            },
+            select: (account) => account?.root.value ?? "Loading...",
+          }),
+        ),
+      {
+        account,
+      },
+    );
+
+    await act(async () => {
+      // Update nested value that is not selected
+      account.root.nested?.$jazz.set("nestedValue", "100");
+      await account.$jazz.waitForAllCoValuesSync();
+    });
+
+    expect(result.current.result).toEqual("1");
+    expect(result.current.renderCount).toEqual(1);
+  });
+
+  it("should re-render when a nested coValue is updated and selected", async () => {
+    const AccountRoot = co.map({
+      value: z.string(),
+      get nested() {
+        return co
+          .map({
+            nestedValue: z.string(),
+          })
+          .optional();
+      },
+    });
+
+    const AccountSchema = co
+      .account({
+        root: AccountRoot,
+        profile: co.profile(),
+      })
+      .withMigration((account, creationProps) => {
+        if (!account.$jazz.refs.root) {
+          const root = AccountRoot.create({
+            value: "1",
+            nested: co
+              .map({
+                nestedValue: z.string(),
+              })
+              .create({
+                nestedValue: "1",
+              }),
+          });
+          account.$jazz.set("root", root);
+        }
+      });
+
+    const account = await createJazzTestAccount({
+      AccountSchema,
+    });
+
+    const { result } = renderHook(
+      () =>
+        useRenderCount(() =>
+          useAccountWithSelector(AccountSchema, {
+            resolve: {
+              root: {
+                nested: true,
+              },
+            },
+            select: (account) =>
+              account?.root?.nested?.nestedValue ?? "Loading...",
+          }),
+        ),
+      {
+        account,
+      },
+    );
+
+    await act(async () => {
+      // Update nested value that is selected
+      account.root?.nested?.$jazz.set("nestedValue", "100");
+      await account.$jazz.waitForAllCoValuesSync();
+    });
+
+    expect(result.current.result).toEqual("100");
+    expect(result.current.renderCount).toEqual(2); // Initial render + update
+  });
+
+  it("should not re-render when equalityFn always returns true", async () => {
+    const AccountRoot = co.map({
+      value: z.string(),
+      get nested() {
+        return co
+          .map({
+            nestedValue: z.string(),
+          })
+          .optional();
+      },
+    });
+
+    const AccountSchema = co
+      .account({
+        root: AccountRoot,
+        profile: co.profile(),
+      })
+      .withMigration((account, creationProps) => {
+        if (!account.$jazz.refs.root) {
+          const root = AccountRoot.create({
+            value: "1",
+            nested: co
+              .map({
+                nestedValue: z.string(),
+              })
+              .create({
+                nestedValue: "1",
+              }),
+          });
+          account.$jazz.set("root", root);
+        }
+      });
+
+    const account = await createJazzTestAccount({
+      AccountSchema,
+    });
+
+    const { result } = renderHook(
+      () =>
+        useRenderCount(() =>
+          useAccountWithSelector(AccountSchema, {
+            resolve: {
+              root: {
+                nested: true,
+              },
+            },
+            select: (account) =>
+              account?.root?.nested?.nestedValue ?? "Loading...",
+            equalityFn: () => true, // Always return true to prevent re-renders
+          }),
+        ),
+      {
+        account,
+      },
+    );
+
+    await act(async () => {
+      // Update nested value that is selected
+      account.root?.nested?.$jazz.set("nestedValue", "100");
+      await account.$jazz.waitForAllCoValuesSync();
+    });
+
+    expect(result.current.result).toEqual("1"); // Should still be "1" due to equalityFn
+    expect(result.current.renderCount).toEqual(1); // Should not re-render
+  });
+
+  it("should not load nested values if the account is a guest", async () => {
+    const AccountRoot = co.map({
+      value: z.string(),
+    });
+
+    const AccountSchema = co
+      .account({
+        root: AccountRoot,
+        profile: co.profile(),
+      })
+      .withMigration((account, creationProps) => {
+        if (!account.$jazz.refs.root) {
+          account.$jazz.set("root", { value: "123" });
+        }
+      });
+
+    const account = await createJazzTestGuest();
+
+    const { result } = renderHook(
+      () =>
+        useAccountWithSelector(AccountSchema, {
+          resolve: {
+            root: true,
+          },
+          select: (account) => account?.root?.value ?? "Guest",
+        }),
+      {
+        account,
+      },
+    );
+
+    expect(result.current).toBe("Guest");
+  });
+
+  it("should handle undefined account gracefully", async () => {
+    const account = await createJazzTestGuest();
+
+    const { result } = renderHook(
+      () =>
+        useAccountWithSelector(Account, {
+          select: (account) => account?.$jazz.id ?? "No account",
+        }),
+      {
+        account,
+      },
+    );
+
+    expect(result.current).toBe("No account");
+  });
+
+  it("should re-render when selector result changes due to external prop changes", async () => {
+    const AccountRoot = co.map({
+      value: z.string(),
+    });
+
+    const AccountSchema = co
+      .account({
+        root: AccountRoot,
+        profile: co.profile(),
+      })
+      .withMigration((account, creationProps) => {
+        if (!account.$jazz.refs.root) {
+          account.$jazz.set("root", { value: "initial" });
+        }
+      });
+
+    const account = await createJazzTestAccount({
+      AccountSchema,
+    });
+
+    let externalProp = "suffix1";
+
+    const { result, rerender } = renderHook(
+      () =>
+        useRenderCount(() =>
+          useAccountWithSelector(AccountSchema, {
+            resolve: {
+              root: true,
+            },
+            select: (account) => {
+              const baseValue = account?.root?.value ?? "loading";
+              return `${baseValue}-${externalProp}`;
+            },
+          }),
+        ),
+      {
+        account,
+      },
+    );
+
+    expect(result.current.result).toEqual("initial-suffix1");
+    expect(result.current.renderCount).toEqual(1);
+
+    // Change external prop and rerender
+    externalProp = "suffix2";
+    rerender();
+
+    expect(result.current.result).toEqual("initial-suffix2");
+  });
+});

package/src/react-native-core/hooks.tsx

@@ -14,6 +14,7 @@ export {
   useIsAuthenticated,
   useAccount,
   useCoStateWithSelector,
+  useAccountWithSelector,
 } from "jazz-tools/react-core";
 
 export function useAcceptInviteNative<S extends CoValueClassOrSchema>({

package/src/tools/implementation/ContextManager.ts

@@ -68,10 +68,9 @@ export class JazzContextManager<
   protected authSecretStorage = new AuthSecretStorage();
   protected keepContextOpen = false;
   contextPromise: Promise<void> | undefined;
+  protected authenticatingAccountID: string | null = null;
 
-  constructor(opts?: {
-    useAnonymousFallback?: boolean;
-  }) {
+  constructor(opts?: { useAnonymousFallback?: boolean }) {
     KvStoreContext.getInstance().initialize(this.getKvStore());
 
     if (opts?.useAnonymousFallback) {
@@ -163,11 +162,17 @@ export class JazzContextManager<
     return this.authSecretStorage;
   }
 
+  getAuthenticatingAccountID() {
+    return this.authenticatingAccountID;
+  }
+
   logOut = async () => {
     if (!this.context || !this.props) {
       return;
     }
 
+    this.authenticatingAccountID = null;
+
     await this.props.onLogOut?.();
 
     if (this.props.logOutReplacement) {
@@ -206,17 +211,44 @@ export class JazzContextManager<
       throw new Error("Props required");
     }
 
-    const prevContext = this.context;
-    const migratingAnonymousAccount =
-      await this.shouldMigrateAnonymousAccount();
+    if (
+      this.authenticatingAccountID &&
+      this.authenticatingAccountID === credentials.accountID
+    ) {
+      console.info(
+        "Authentication already in progress for account",
+        credentials.accountID,
+        "skipping duplicate request",
+      );
+      return;
+    }
+
+    if (
+      this.authenticatingAccountID &&
+      this.authenticatingAccountID !== credentials.accountID
+    ) {
+      throw new Error(
+        `Authentication already in progress for different account (${this.authenticatingAccountID}), cannot authenticate ${credentials.accountID}`,
+      );
+    }
+
+    this.authenticatingAccountID = credentials.accountID;
+
+    try {
+      const prevContext = this.context;
+      const migratingAnonymousAccount =
+        await this.shouldMigrateAnonymousAccount();
 
-    this.keepContextOpen = migratingAnonymousAccount;
-    await this.createContext(this.props, { credentials }).finally(() => {
-      this.keepContextOpen = false;
-    });
+      this.keepContextOpen = migratingAnonymousAccount;
+      await this.createContext(this.props, { credentials }).finally(() => {
+        this.keepContextOpen = false;
+      });
 
-    if (migratingAnonymousAccount) {
-      await this.handleAnonymousAccountMigration(prevContext);
+      if (migratingAnonymousAccount) {
+        await this.handleAnonymousAccountMigration(prevContext);
+      }
+    } finally {
+      this.authenticatingAccountID = null;
     }
   };
 
@@ -228,29 +260,40 @@ export class JazzContextManager<
       throw new Error("Props required");
     }
 
-    const prevContext = this.context;
-    const migratingAnonymousAccount =
-      await this.shouldMigrateAnonymousAccount();
-
-    this.keepContextOpen = migratingAnonymousAccount;
-    await this.createContext(this.props, {
-      newAccountProps: {
-        secret: accountSecret,
-        creationProps,
-      },
-    }).finally(() => {
-      this.keepContextOpen = false;
-    });
-
-    if (migratingAnonymousAccount) {
-      await this.handleAnonymousAccountMigration(prevContext);
+    if (this.authenticatingAccountID) {
+      throw new Error("Authentication already in progress");
     }
 
-    if (this.context && "me" in this.context) {
-      return this.context.me.$jazz.id;
-    }
+    // For registration, we don't know the account ID yet, so we'll set it to "register"
+    this.authenticatingAccountID = "register";
 
-    throw new Error("The registration hasn't created a new account");
+    try {
+      const prevContext = this.context;
+      const migratingAnonymousAccount =
+        await this.shouldMigrateAnonymousAccount();
+
+      this.keepContextOpen = migratingAnonymousAccount;
+      await this.createContext(this.props, {
+        newAccountProps: {
+          secret: accountSecret,
+          creationProps,
+        },
+      }).finally(() => {
+        this.keepContextOpen = false;
+      });
+
+      if (migratingAnonymousAccount) {
+        await this.handleAnonymousAccountMigration(prevContext);
+      }
+
+      if (this.context && "me" in this.context) {
+        return this.context.me.$jazz.id;
+      }
+
+      throw new Error("The registration hasn't created a new account");
+    } finally {
+      this.authenticatingAccountID = null;
+    }
   };
 
   private async handleAnonymousAccountMigration(