jazz-tools 0.18.23 → 0.18.25

package/src/react-core/tests/subscription.bench.tsx

@@ -0,0 +1,319 @@
+// @vitest-environment happy-dom
+
+import { cojsonInternals } from "cojson";
+import { co, z } from "jazz-tools";
+import { describe, bench } from "vitest";
+import {
+  useAccountSubscription,
+  useSubscriptionSelector,
+  useAccountWithSelector,
+  CoValueSubscription,
+} from "../index.js";
+import { createJazzTestAccount, setupJazzTestSync } from "../testing.js";
+import { render } from "./testUtils.js";
+
+cojsonInternals.setCoValueLoadingRetryDelay(300);
+
+await setupJazzTestSync();
+await createJazzTestAccount({
+  isCurrentActiveAccount: true,
+  creationProps: { name: "Hermes Puggington" },
+});
+
+const AccountSchema = co.account();
+
+const AccountName = () => {
+  const name = useAccountWithSelector(AccountSchema, {
+    resolve: {
+      profile: true,
+    },
+    select: (account) => account?.profile?.name,
+  });
+
+  if (!name) return null;
+
+  return <span>{name}</span>;
+};
+
+const AccountNameFromSubscription = ({
+  subscription,
+}: {
+  subscription: CoValueSubscription<typeof AccountSchema, { profile: true }>;
+}) => {
+  const name = useSubscriptionSelector(subscription, {
+    select: (account) => account?.profile?.name,
+  });
+
+  if (!name) return null;
+
+  return <span>{name}</span>;
+};
+
+const UseAccountWithSelector = () => {
+  return (
+    <div>
+      {Array.from({ length: 1000 }).map((_, i) => (
+        <AccountName key={i} />
+      ))}
+    </div>
+  );
+};
+
+const UseAccountSubscription = () => {
+  const subscription = useAccountSubscription(AccountSchema, {
+    resolve: {
+      profile: true,
+    },
+  });
+
+  return (
+    <div>
+      {Array.from({ length: 1000 }).map((_, i) => (
+        <AccountNameFromSubscription key={i} subscription={subscription} />
+      ))}
+    </div>
+  );
+};
+
+describe("1000 value loads", () => {
+  bench(
+    "useAccountSubscription + useSubscriptionSelector",
+    () => {
+      render(<UseAccountSubscription />);
+    },
+    { iterations: 50 },
+  );
+
+  bench(
+    "useAccountWithSelector",
+    () => {
+      render(<UseAccountWithSelector />);
+    },
+    { iterations: 50 },
+  );
+});
+
+describe("deeply resolved coMaps", async () => {
+  const Task = co.map({
+    title: z.string(),
+    get project() {
+      return Project;
+    },
+  });
+
+  const TaskList = co.list(Task);
+
+  const Project = co.map({
+    name: z.string(),
+    tasks: TaskList,
+    draftTasks: TaskList,
+    deletedTasks: TaskList,
+  });
+
+  const Organization = co.map({
+    name: z.string(),
+    projects: co.list(Project),
+  });
+
+  const AccountRoot = co.map({
+    organizations: co.list(Organization),
+  });
+
+  const AccountSchema = co
+    .account({
+      root: AccountRoot,
+      profile: co.profile(),
+    })
+    .withMigration(async (account) => {
+      if (!account.$jazz.has("root")) {
+        account.$jazz.set("root", {
+          organizations: [
+            {
+              name: "My organization",
+              projects: [
+                {
+                  name: "My project",
+                  tasks: [],
+                  draftTasks: [],
+                  deletedTasks: [],
+                },
+              ],
+            },
+          ],
+        });
+      }
+    });
+
+  const account = await createJazzTestAccount({
+    AccountSchema,
+    isCurrentActiveAccount: true,
+    creationProps: { name: "Hermes Puggington" },
+  });
+
+  const root = await account.root.$jazz.ensureLoaded({
+    resolve: {
+      organizations: {
+        $each: {
+          projects: {
+            $each: true,
+          },
+        },
+      },
+    },
+  });
+
+  const project = root.organizations[0]?.projects[0]!;
+
+  for (let i = 0; i < 250; i++) {
+    const taskList = (["tasks", "draftTasks", "deletedTasks"] as const)[i % 3]!;
+
+    project[taskList].$jazz.push({
+      title: `Task ${i}`,
+      project,
+    });
+  }
+
+  const SingleSubscriptionTasks = ({
+    subscription,
+    taskListType,
+  }: {
+    subscription: CoValueSubscription<
+      typeof AccountSchema,
+      {
+        root: {
+          organizations: {
+            $each: {
+              projects: {
+                $each: {
+                  tasks: { $each: { project: true } };
+                  draftTasks: { $each: { project: true } };
+                  deletedTasks: { $each: { project: true } };
+                };
+              };
+            };
+          };
+        };
+      }
+    >;
+    taskListType: "tasks" | "draftTasks" | "deletedTasks";
+  }) => {
+    const allProjectsTasks = useSubscriptionSelector(subscription, {
+      select: (account) => {
+        return account?.root.organizations.flatMap((org) =>
+          org?.projects.flatMap((project) =>
+            project?.[taskListType]?.flatMap((task) => task),
+          ),
+        );
+      },
+    });
+
+    return (
+      <div>
+        {allProjectsTasks?.map((task) => (
+          <div key={task?.$jazz.id}>{task?.title}</div>
+        ))}
+      </div>
+    );
+  };
+
+  const SingleSubscription = () => {
+    const subscription = useAccountSubscription(AccountSchema, {
+      resolve: {
+        root: {
+          organizations: {
+            $each: {
+              projects: {
+                $each: {
+                  tasks: { $each: { project: true } },
+                  draftTasks: { $each: { project: true } },
+                  deletedTasks: { $each: { project: true } },
+                },
+              },
+            },
+          },
+        },
+      },
+    });
+
+    return (
+      <div>
+        <SingleSubscriptionTasks
+          subscription={subscription}
+          taskListType="tasks"
+        />
+        <SingleSubscriptionTasks
+          subscription={subscription}
+          taskListType="draftTasks"
+        />
+        <SingleSubscriptionTasks
+          subscription={subscription}
+          taskListType="deletedTasks"
+        />
+      </div>
+    );
+  };
+
+  bench(
+    "useAccountSubscription + useSubscriptionSelector",
+    () => {
+      render(<SingleSubscription />);
+    },
+    { iterations: 200 },
+  );
+
+  const MultipleSubscriptionTasks = ({
+    taskListType,
+  }: {
+    taskListType: "tasks" | "draftTasks" | "deletedTasks";
+  }) => {
+    const subscription = useAccountWithSelector(AccountSchema, {
+      resolve: {
+        root: {
+          organizations: {
+            $each: {
+              projects: {
+                $each: {
+                  tasks: { $each: { project: true } },
+                  draftTasks: { $each: { project: true } },
+                  deletedTasks: { $each: { project: true } },
+                },
+              },
+            },
+          },
+        },
+      },
+      select: (account) =>
+        account?.root.organizations.flatMap((org) =>
+          org?.projects.flatMap((project) =>
+            project?.[taskListType]?.flatMap((task) => task),
+          ),
+        ),
+    });
+
+    return (
+      <div>
+        {subscription?.map((task) => (
+          <div key={task?.$jazz.id}>{task?.title}</div>
+        ))}
+      </div>
+    );
+  };
+
+  const MultipleSubscription = () => {
+    return (
+      <div>
+        <MultipleSubscriptionTasks taskListType="tasks" />
+        <MultipleSubscriptionTasks taskListType="draftTasks" />
+        <MultipleSubscriptionTasks taskListType="deletedTasks" />
+      </div>
+    );
+  };
+
+  bench(
+    "useAccountWithSelector",
+    () => {
+      render(<MultipleSubscription />);
+    },
+    { iterations: 200 },
+  );
+});

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

@@ -0,0 +1,250 @@
+// @vitest-environment happy-dom
+
+import { cojsonInternals } from "cojson";
+import { co, z } from "jazz-tools";
+import { beforeEach, describe, expect, expectTypeOf, it } from "vitest";
+import {
+  useCoValueSubscription,
+  useAccountSubscription,
+  useSubscriptionSelector,
+} from "../index.js";
+import { createJazzTestAccount, setupJazzTestSync } from "../testing.js";
+import { act, renderHook, waitFor } from "./testUtils.js";
+import { useRef } from "react";
+
+beforeEach(async () => {
+  await setupJazzTestSync();
+
+  await createJazzTestAccount({
+    isCurrentActiveAccount: true,
+  });
+});
+
+cojsonInternals.setCoValueLoadingRetryDelay(300);
+
+const useRenderCount = <T>(hook: () => T) => {
+  const renderCountRef = useRef(0);
+  const result = hook();
+  renderCountRef.current = renderCountRef.current + 1;
+  return {
+    renderCount: renderCountRef.current,
+    result,
+  };
+};
+
+describe("useSubscriptionSelector", () => {
+  it("should return coValue", () => {
+    const TestMap = co.map({
+      value: z.string(),
+    });
+
+    const map = TestMap.create({
+      value: "123",
+    });
+
+    const { result } = renderHook(() => {
+      const subscription = useCoValueSubscription(TestMap, map.$jazz.id);
+      return useSubscriptionSelector(subscription);
+    });
+
+    expect(result.current?.value).toBe("123");
+  });
+
+  it("should resolve nested coValues", () => {
+    const TestNestedMap = co.map({
+      content: z.string(),
+    });
+
+    const TestMap = co.map({
+      content: z.string(),
+      nested: TestNestedMap,
+    });
+
+    const map = TestMap.create({
+      content: "123",
+      nested: {
+        content: "456",
+      },
+    });
+
+    const { result } = renderHook(() => {
+      const subscription = useCoValueSubscription(TestMap, map.$jazz.id);
+      return useSubscriptionSelector(subscription);
+    });
+
+    expect(result.current?.nested?.content).toBe("456");
+  });
+
+  it("should return null on invalid coValue id", async () => {
+    const TestMap = co.map({
+      value: z.string(),
+    });
+
+    const { result } = renderHook(() => {
+      const subscription = useCoValueSubscription(TestMap, "123");
+      return useSubscriptionSelector(subscription);
+    });
+
+    expect(result.current).toBeUndefined();
+
+    await waitFor(() => {
+      expect(result.current).toBeNull();
+    });
+  });
+
+  it("should return coAccount", async () => {
+    const account = await createJazzTestAccount();
+
+    const { result } = renderHook(
+      () => {
+        const subscription = useAccountSubscription(co.account());
+        return useSubscriptionSelector(subscription);
+      },
+      {
+        account,
+      },
+    );
+
+    expect(result.current?.$jazz.id).toBe(account.$jazz.id);
+  });
+
+  it("should return value from coValue with selector", () => {
+    const TestMap = co.map({
+      value: z.string(),
+    });
+
+    const map = TestMap.create({
+      value: "123",
+    });
+
+    const { result } = renderHook(() => {
+      const subscription = useCoValueSubscription(TestMap, map.$jazz.id);
+      return useSubscriptionSelector(subscription, {
+        select: (v) => v?.value,
+      });
+    });
+
+    expect(result.current).toBe("123");
+  });
+
+  it("should return value from coAccount with selector", async () => {
+    const account = await createJazzTestAccount({
+      creationProps: { name: "test" },
+    });
+
+    const { result } = renderHook(
+      () => {
+        const subscription = useAccountSubscription(co.account());
+        return useSubscriptionSelector(subscription, {
+          select: (v) => v?.profile?.name,
+        });
+      },
+      {
+        account,
+      },
+    );
+
+    expect(result.current).toBe("test");
+  });
+
+  it("should update value from coValue with selected value changes", () => {
+    const TestMap = co.map({
+      value: z.string(),
+    });
+
+    const map = TestMap.create({
+      value: "123",
+    });
+
+    const { result } = renderHook(() => {
+      const subscription = useCoValueSubscription(TestMap, map.$jazz.id);
+      return useSubscriptionSelector(subscription, {
+        select: (v) => v?.value,
+      });
+    });
+
+    expect(result.current).toBe("123");
+
+    act(() => {
+      map.$jazz.set("value", "456");
+    });
+
+    expect(result.current).toBe("456");
+  });
+
+  it("should not re-render when a non-selected field is updated and not selected", () => {
+    const TestMap = co.map({
+      value: z.string(),
+      other: z.string(),
+    });
+
+    const map = TestMap.create({
+      value: "1",
+      other: "1",
+    });
+
+    const { result } = renderHook(() =>
+      useRenderCount(() => {
+        const subscription = useCoValueSubscription(TestMap, map.$jazz.id);
+        return useSubscriptionSelector(subscription, {
+          select: (v) => v?.value,
+        });
+      }),
+    );
+
+    expect(result.current.result).toBe("1");
+    expect(result.current.renderCount).toBe(1);
+
+    act(() => {
+      map.$jazz.set("other", "2");
+    });
+
+    expect(result.current.result).toBe("1");
+    expect(result.current.renderCount).toBe(1);
+  });
+
+  it("should only re-render or load new value when equalityFn returns true", () => {
+    const TestMap = co.map({
+      value: z.number(),
+      other: z.number(),
+    });
+
+    const map = TestMap.create({
+      value: 1,
+      other: 2,
+    });
+
+    const { result } = renderHook(() =>
+      useRenderCount(() => {
+        const subscription = useCoValueSubscription(TestMap, map.$jazz.id);
+        return useSubscriptionSelector(subscription, {
+          select: (v) =>
+            v
+              ? [Math.floor(v.value / 5), Math.floor(v.other / 5)].toSorted()
+              : [],
+          equalityFn: (a, b) => a.every((v, i) => v === b[i]),
+        });
+      }),
+    );
+
+    expect(result.current.result).toEqual([0, 0]);
+    expect(result.current.renderCount).toBe(1);
+
+    act(() => {
+      map.$jazz.applyDiff({
+        value: 3,
+        other: 4,
+      });
+    });
+
+    expect(result.current.result).toEqual([0, 0]);
+    expect(result.current.renderCount).toBe(1);
+
+    act(() => {
+      map.$jazz.set("value", 5);
+    });
+
+    expect(result.current.result).toEqual([0, 1]);
+    expect(result.current.renderCount).toBe(2);
+  });
+});

package/src/react-core/types.ts

@@ -0,0 +1,19 @@
+import {
+  CoValueClassOrSchema,
+  ResolveQuery,
+  SubscriptionScope,
+} from "jazz-tools";
+
+declare const subscriptionTag: unique symbol;
+
+export type CoValueSubscription<
+  S extends CoValueClassOrSchema,
+  R extends ResolveQuery<S>,
+> =
+  | (SubscriptionScope<any> & {
+      [subscriptionTag]: {
+        schema: S;
+        resolve: R;
+      };
+    })
+  | null;

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

@@ -16,6 +16,9 @@ export {
   useCoStateWithSelector,
   useAccountWithSelector,
   useSyncConnectionStatus,
+  useCoValueSubscription,
+  useAccountSubscription,
+  useSubscriptionSelector,
 } from "jazz-tools/react-core";
 
 export function useAcceptInviteNative<S extends CoValueClassOrSchema>({

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

@@ -4,6 +4,12 @@ export * from "./provider.js";
 export * from "./storage/kv-store-context.js";
 export * from "./media/image.js";
 
+export {
+  createCoValueSubscriptionContext,
+  createAccountSubscriptionContext,
+  type CoValueSubscription,
+} from "jazz-tools/react-core";
+
 export { SQLiteDatabaseDriverAsync } from "cojson";
 export { parseInviteLink } from "jazz-tools";
 export { createInviteLink, setupKvStore } from "./platform.js";

package/src/react-native-core/platform.ts

@@ -46,7 +46,7 @@ async function setupPeers(options: BaseReactNativeContextOptions) {
   const crypto = await CryptoProvider.create();
   let node: LocalNode | undefined = undefined;
 
-  const peersToLoadFrom: Peer[] = [];
+  const peers: Peer[] = [];
 
   const storage =
     options.storage && options.storage !== "disabled"
@@ -58,7 +58,7 @@ async function setupPeers(options: BaseReactNativeContextOptions) {
       toggleNetwork: () => {},
       addConnectionListener: () => () => {},
       connected: () => false,
-      peersToLoadFrom,
+      peers,
       setNode: () => {},
       crypto,
       storage,
@@ -72,11 +72,11 @@ async function setupPeers(options: BaseReactNativeContextOptions) {
       if (node) {
         node.syncManager.addPeer(peer);
       } else {
-        peersToLoadFrom.push(peer);
+        peers.push(peer);
       }
     },
     removePeer: (peer) => {
-      peersToLoadFrom.splice(peersToLoadFrom.indexOf(peer), 1);
+      peers.splice(peers.indexOf(peer), 1);
     },
   });
 
@@ -106,7 +106,7 @@ async function setupPeers(options: BaseReactNativeContextOptions) {
       };
     },
     connected: () => wsPeer.connected,
-    peersToLoadFrom,
+    peers,
     setNode,
     crypto,
     storage,
@@ -118,7 +118,7 @@ export async function createJazzReactNativeGuestContext(
 ) {
   const {
     toggleNetwork,
-    peersToLoadFrom,
+    peers,
     setNode,
     crypto,
     storage,
@@ -128,7 +128,7 @@ export async function createJazzReactNativeGuestContext(
 
   const context = createAnonymousJazzContext({
     crypto,
-    peersToLoadFrom,
+    peers,
     storage,
   });
 
@@ -170,7 +170,7 @@ export async function createJazzReactNativeContext<
 >(options: ReactNativeContextOptions<S>) {
   const {
     toggleNetwork,
-    peersToLoadFrom,
+    peers,
     setNode,
     crypto,
     storage,
@@ -202,7 +202,7 @@ export async function createJazzReactNativeContext<
   const context = await createJazzContext({
     credentials: options.credentials,
     newAccountProps: options.newAccountProps,
-    peersToLoadFrom,
+    peers,
     crypto,
     defaultProfileName: options.defaultProfileName,
     AccountSchema: options.AccountSchema,

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

@@ -20,6 +20,7 @@ export type JazzProviderProps<
 > = {
   children: React.ReactNode;
   kvStore?: KvStore;
+  authSecretStorageKey?: string;
 } & JazzContextManagerProps<S>;
 
 /** @category Context & Hooks */
@@ -39,11 +40,12 @@ export function JazzProviderCore<
   onAnonymousAccountDiscarded,
   kvStore,
   CryptoProvider,
+  authSecretStorageKey,
 }: JazzProviderProps<S>) {
   setupKvStore(kvStore);
 
   const [contextManager] = React.useState(
-    () => new ReactNativeContextManager<S>(),
+    () => new ReactNativeContextManager<S>({ authSecretStorageKey }),
   );
 
   const onLogOutRefCallback = useRefCallback(onLogOut);