jazz-tools 0.18.23 → 0.18.24

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/tools/implementation/zodSchema/schemaTypes/AccountSchema.ts

@@ -1,10 +1,10 @@
-import { CryptoProvider } from "cojson";
 import {
   Account,
   AccountCreationProps,
   BranchDefinition,
   Group,
   RefsToResolveStrict,
+  Simplify,
 } from "../../../internal.js";
 import { AnonymousJazzAgent } from "../../anonymousJazzAgent.js";
 import { InstanceOrPrimitiveOfSchema } from "../typeConverters/InstanceOrPrimitiveOfSchema.js";
@@ -48,10 +48,9 @@ export interface AccountSchema<
     > {
   builtin: "Account";
 
-  create: (options: {
-    creationProps?: { name: string };
-    crypto?: CryptoProvider;
-  }) => Promise<AccountInstance<Shape>>;
+  create: (
+    options: Simplify<Parameters<(typeof Account)["create"]>[0]>,
+  ) => Promise<AccountInstance<Shape>>;
 
   load: <R extends ResolveQuery<AccountSchema<Shape>>>(
     id: string,
@@ -61,6 +60,7 @@ export interface AccountSchema<
     },
   ) => Promise<Loaded<AccountSchema<Shape>, R> | null>;
 
+  /** @internal */
   createAs: (
     as: Account,
     options: {