jazz-tools 0.18.37 → 0.19.0

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

@@ -4,7 +4,9 @@ import {
   AccountClass,
   AnyAccountSchema,
   CoValueClassOrSchema,
+  CoValueLoadingState,
   Loaded,
+  MaybeLoaded,
   ResolveQuery,
   ResolveQueryStrict,
 } from "jazz-tools";
@@ -43,14 +45,16 @@ export function createCoValueSubscriptionContext<
       });
 
       const loadState = useSubscriptionSelector(subscription, {
-        select: (value) => (!value ? value : true),
+        select: (value) => value.$jazz.loadingState,
       });
 
-      if (loadState === undefined) {
+      if (loadState === CoValueLoadingState.LOADING) {
         return loadingFallback ?? null;
       }
-
-      if (loadState === null) {
+      if (
+        loadState === CoValueLoadingState.UNAUTHORIZED ||
+        loadState === CoValueLoadingState.UNAVAILABLE
+      ) {
         return unavailableFallback ?? null;
       }
 
@@ -106,14 +110,17 @@ export function createAccountSubscriptionContext<
       });
 
       const loadState = useSubscriptionSelector(subscription, {
-        select: (value) => (!value ? value : true),
+        select: (value) => value.$jazz.loadingState,
       });
 
-      if (loadState === undefined) {
+      if (loadState === CoValueLoadingState.LOADING) {
         return loadingFallback ?? null;
       }
 
-      if (loadState === null) {
+      if (
+        loadState === CoValueLoadingState.UNAUTHORIZED ||
+        loadState === CoValueLoadingState.UNAVAILABLE
+      ) {
         return unavailableFallback ?? null;
       }
 

package/src/react-core/tests/createCoValueSubscriptionContext.test.tsx

@@ -0,0 +1,233 @@
+// @vitest-environment happy-dom
+
+import { cojsonInternals } from "cojson";
+import { co, z, CoValueLoadingState } from "jazz-tools";
+import { assertLoaded } from "jazz-tools/testing";
+import { useRef } from "react";
+import { beforeEach, describe, expect, it } from "vitest";
+import { createCoValueSubscriptionContext } from "../index.js";
+import {
+  createJazzTestAccount,
+  JazzTestProvider,
+  setupJazzTestSync,
+} from "../testing.js";
+import { act, render, renderHook, waitFor } from "./testUtils.js";
+
+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("createCoValueSubscriptionContext", () => {
+  it("creates a custom provider and selector hook for a coValue schema", () => {
+    const TestMap = co.map({
+      value: z.string(),
+    });
+
+    const map = TestMap.create({
+      value: "123",
+    });
+
+    const { Provider, useSelector } = createCoValueSubscriptionContext(TestMap);
+
+    const { result } = renderHook(
+      () => {
+        return useSelector();
+      },
+      {
+        wrapper: ({ children }) => (
+          <JazzTestProvider>
+            <Provider id={map.$jazz.id}>{children}</Provider>
+          </JazzTestProvider>
+        ),
+      },
+    );
+
+    expect(result.current.value).toBe("123");
+  });
+
+  it("the selector hook updates when the coValue changes", () => {
+    const TestMap = co.map({
+      value: z.string(),
+    });
+
+    const map = TestMap.create({
+      value: "123",
+    });
+
+    const { Provider, useSelector } = createCoValueSubscriptionContext(TestMap);
+
+    const { result } = renderHook(
+      () => {
+        return useSelector();
+      },
+      {
+        wrapper: ({ children }) => (
+          <JazzTestProvider>
+            <Provider id={map.$jazz.id}>{children}</Provider>
+          </JazzTestProvider>
+        ),
+      },
+    );
+
+    expect(result.current.value).toBe("123");
+
+    act(() => {
+      map.$jazz.set("value", "456");
+    });
+
+    expect(result.current.value).toBe("456");
+  });
+
+  it("the selector hook can be narrowed down further with a select function", () => {
+    const TestMap = co.map({
+      value: z.string(),
+    });
+
+    const map = TestMap.create({
+      value: "123",
+    });
+
+    const { Provider, useSelector } = createCoValueSubscriptionContext(TestMap);
+
+    const { result } = renderHook(
+      () => {
+        return useSelector({
+          select: (v) => v.value,
+        });
+      },
+      {
+        wrapper: ({ children }) => (
+          <JazzTestProvider>
+            <Provider id={map.$jazz.id}>{children}</Provider>
+          </JazzTestProvider>
+        ),
+      },
+    );
+
+    expect(result.current).toBe("123");
+  });
+
+  it("should not re-render when a non-selected field changes", () => {
+    const TestMap = co.map({
+      value: z.string(),
+      other: z.string(),
+    });
+
+    const map = TestMap.create({
+      value: "1",
+      other: "1",
+    });
+
+    const { Provider, useSelector } = createCoValueSubscriptionContext(TestMap);
+
+    const { result } = renderHook(
+      () =>
+        useRenderCount(() => {
+          return useSelector({
+            select: (v) => v.value,
+          });
+        }),
+      {
+        wrapper: ({ children }) => (
+          <JazzTestProvider>
+            <Provider id={map.$jazz.id}>{children}</Provider>
+          </JazzTestProvider>
+        ),
+      },
+    );
+
+    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("the provider shows a loading fallback when loading the coValue", async () => {
+    const TestMap = co.map({
+      value: z.string(),
+    });
+
+    const { Provider } = createCoValueSubscriptionContext(TestMap);
+
+    const { container } = render(
+      <JazzTestProvider>
+        <Provider id="co_test123" loadingFallback={<div>Loading...</div>}>
+          <div>Children should not render</div>
+        </Provider>
+      </JazzTestProvider>,
+    );
+
+    // The loading fallback should be rendered
+    expect(container.textContent).toContain("Loading...");
+    // Children should not be rendered
+    expect(container.textContent).not.toContain("Children should not render");
+  });
+
+  it("the provider shows an unavailable fallback when the coValue is unavailable", async () => {
+    const TestMap = co.map({
+      value: z.string(),
+    });
+
+    const { Provider } = createCoValueSubscriptionContext(TestMap);
+
+    const { container } = render(
+      <JazzTestProvider>
+        <Provider
+          id="invalid_id"
+          loadingFallback={<div>Loading...</div>}
+          unavailableFallback={<div>Unavailable</div>}
+        >
+          <div>Children should not render</div>
+        </Provider>
+      </JazzTestProvider>,
+    );
+
+    // Initially shows loading fallback
+    expect(container.textContent).toContain("Loading...");
+
+    // Should show unavailable fallback after CoValue load timeout
+    await waitFor(() => {
+      expect(container.textContent).toContain("Unavailable");
+    });
+
+    // Children should never be rendered
+    expect(container.textContent).not.toContain("Children should not render");
+  });
+
+  it("should throw error when useSelector is used outside provider", () => {
+    const TestMap = co.map({
+      value: z.string(),
+    });
+
+    const { useSelector } = createCoValueSubscriptionContext(TestMap);
+
+    expect(() => {
+      renderHook(() => {
+        return useSelector();
+      });
+    }).toThrow(
+      "useSelector must be used within a coValue subscription provider",
+    );
+  });
+});

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

@@ -6,7 +6,7 @@ import { describe, bench } from "vitest";
 import {
   useAccountSubscription,
   useSubscriptionSelector,
-  useAccountWithSelector,
+  useAccount,
   CoValueSubscription,
 } from "../index.js";
 import { createJazzTestAccount, setupJazzTestSync } from "../testing.js";
@@ -23,11 +23,16 @@ await createJazzTestAccount({
 const AccountSchema = co.account();
 
 const AccountName = () => {
-  const name = useAccountWithSelector(AccountSchema, {
+  const name = useAccount(AccountSchema, {
     resolve: {
       profile: true,
     },
-    select: (account) => account?.profile?.name,
+    select: (account) => {
+      if (!account.$isLoaded) {
+        return null;
+      }
+      return account.profile.name;
+    },
   });
 
   if (!name) return null;
@@ -41,7 +46,12 @@ const AccountNameFromSubscription = ({
   subscription: CoValueSubscription<typeof AccountSchema, { profile: true }>;
 }) => {
   const name = useSubscriptionSelector(subscription, {
-    select: (account) => account?.profile?.name,
+    select: (account) => {
+      if (!account.$isLoaded) {
+        return null;
+      }
+      return account.profile.name;
+    },
   });
 
   if (!name) return null;
@@ -199,9 +209,12 @@ describe("deeply resolved coMaps", async () => {
   }) => {
     const allProjectsTasks = useSubscriptionSelector(subscription, {
       select: (account) => {
-        return account?.root.organizations.flatMap((org) =>
-          org?.projects.flatMap((project) =>
-            project?.[taskListType]?.flatMap((task) => task),
+        if (!account.$isLoaded) {
+          return null;
+        }
+        return account.root.organizations.flatMap((org) =>
+          org.projects.flatMap((project) =>
+            project[taskListType].flatMap((task) => task),
           ),
         );
       },
@@ -210,7 +223,7 @@ describe("deeply resolved coMaps", async () => {
     return (
       <div>
         {allProjectsTasks?.map((task) => (
-          <div key={task?.$jazz.id}>{task?.title}</div>
+          <div key={task.$jazz.id}>{task.title}</div>
         ))}
       </div>
     );
@@ -266,7 +279,7 @@ describe("deeply resolved coMaps", async () => {
   }: {
     taskListType: "tasks" | "draftTasks" | "deletedTasks";
   }) => {
-    const subscription = useAccountWithSelector(AccountSchema, {
+    const subscription = useAccount(AccountSchema, {
       resolve: {
         root: {
           organizations: {
@@ -282,18 +295,22 @@ describe("deeply resolved coMaps", async () => {
           },
         },
       },
-      select: (account) =>
-        account?.root.organizations.flatMap((org) =>
-          org?.projects.flatMap((project) =>
-            project?.[taskListType]?.flatMap((task) => task),
+      select: (account) => {
+        if (!account.$isLoaded) {
+          return null;
+        }
+        return 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 key={task.$jazz.id}>{task.title}</div>
         ))}
       </div>
     );

package/src/react-core/tests/{useAccountWithSelector.test.ts → useAccount.selector.test.ts}

@@ -2,7 +2,7 @@
 
 import { Account, RefsToResolve, co, z, Group } from "jazz-tools";
 import { assert, beforeEach, describe, expect, it } from "vitest";
-import { useAccountWithSelector, useJazzContextManager } from "../hooks.js";
+import { useAccount, useJazzContextManager } from "../hooks.js";
 import { useIsAuthenticated } from "../index.js";
 import {
   createJazzTestAccount,
@@ -26,7 +26,7 @@ const useRenderCount = <T>(hook: () => T) => {
   };
 };
 
-describe("useAccountWithSelector", () => {
+describe("useAccount", () => {
   it("should return the correct selected value", async () => {
     const AccountRoot = co.map({
       value: z.string(),
@@ -49,11 +49,16 @@ describe("useAccountWithSelector", () => {
 
     const { result } = renderHook(
       () =>
-        useAccountWithSelector(AccountSchema, {
+        useAccount(AccountSchema, {
           resolve: {
             root: true,
           },
-          select: (account) => account?.root.value ?? "Loading...",
+          select: (account) => {
+            if (!account.$isLoaded) {
+              return "Loading...";
+            }
+            return account.root.value;
+          },
         }),
       {
         account,
@@ -98,13 +103,18 @@ describe("useAccountWithSelector", () => {
 
     const { result } = renderHook(
       () =>
-        useAccountWithSelector(AccountSchema, {
+        useAccount(AccountSchema, {
           resolve: {
             root: {
               nested: true,
             },
           },
-          select: (account) => account?.root.nested.nestedValue ?? "Loading...",
+          select: (account) => {
+            if (!account.$isLoaded) {
+              return "Loading...";
+            }
+            return account.root.nested.nestedValue;
+          },
         }),
       {
         account,
@@ -154,13 +164,18 @@ describe("useAccountWithSelector", () => {
     const { result } = renderHook(
       () =>
         useRenderCount(() =>
-          useAccountWithSelector(AccountSchema, {
+          useAccount(AccountSchema, {
             resolve: {
               root: {
                 nested: true,
               },
             },
-            select: (account) => account?.root.value ?? "Loading...",
+            select: (account) => {
+              if (!account.$isLoaded) {
+                return "Loading...";
+              }
+              return account.root.value;
+            },
           }),
         ),
       {
@@ -218,14 +233,18 @@ describe("useAccountWithSelector", () => {
     const { result } = renderHook(
       () =>
         useRenderCount(() =>
-          useAccountWithSelector(AccountSchema, {
+          useAccount(AccountSchema, {
             resolve: {
               root: {
                 nested: true,
               },
             },
-            select: (account) =>
-              account?.root?.nested?.nestedValue ?? "Loading...",
+            select: (account) => {
+              if (!account.$isLoaded) {
+                return "Loading...";
+              }
+              return account.root.nested?.nestedValue ?? "Loading...";
+            },
           }),
         ),
       {
@@ -283,14 +302,18 @@ describe("useAccountWithSelector", () => {
     const { result } = renderHook(
       () =>
         useRenderCount(() =>
-          useAccountWithSelector(AccountSchema, {
+          useAccount(AccountSchema, {
             resolve: {
               root: {
                 nested: true,
               },
             },
-            select: (account) =>
-              account?.root?.nested?.nestedValue ?? "Loading...",
+            select: (account) => {
+              if (!account.$isLoaded) {
+                return "Loading...";
+              }
+              return account.root.nested?.nestedValue ?? "Loading...";
+            },
             equalityFn: () => true, // Always return true to prevent re-renders
           }),
         ),
@@ -329,11 +352,16 @@ describe("useAccountWithSelector", () => {
 
     const { result } = renderHook(
       () =>
-        useAccountWithSelector(AccountSchema, {
+        useAccount(AccountSchema, {
           resolve: {
             root: true,
           },
-          select: (account) => account?.root?.value ?? "Guest",
+          select: (account) => {
+            if (!account.$isLoaded) {
+              return "Guest";
+            }
+            return account.root.value;
+          },
         }),
       {
         account,
@@ -348,8 +376,13 @@ describe("useAccountWithSelector", () => {
 
     const { result } = renderHook(
       () =>
-        useAccountWithSelector(Account, {
-          select: (account) => account?.$jazz.id ?? "No account",
+        useAccount(Account, {
+          select: (account) => {
+            if (!account.$isLoaded) {
+              return "No account";
+            }
+            return account.$jazz.id;
+          },
         }),
       {
         account,
@@ -384,12 +417,17 @@ describe("useAccountWithSelector", () => {
     const { result, rerender } = renderHook(
       () =>
         useRenderCount(() =>
-          useAccountWithSelector(AccountSchema, {
+          useAccount(AccountSchema, {
             resolve: {
               root: true,
             },
             select: (account) => {
-              const baseValue = account?.root?.value ?? "loading";
+              let baseValue: string;
+              if (!account.$isLoaded) {
+                baseValue = "loading";
+              } else {
+                baseValue = account.root.value;
+              }
               return `${baseValue}-${externalProp}`;
             },
           }),
@@ -440,19 +478,29 @@ describe("useAccountWithSelector", () => {
     group.addMember("everyone", "writer");
     const { result } = renderHook(
       () => {
-        const branchAccountRoot = useAccountWithSelector(AccountSchema, {
+        const branchAccountRoot = useAccount(AccountSchema, {
           resolve: {
             root: true,
           },
-          select: (account) => account?.root,
+          select: (account) => {
+            if (!account.$isLoaded) {
+              return undefined;
+            }
+            return account.root;
+          },
           unstable_branch: { name: "feature-branch" },
         });
 
-        const mainAccountRoot = useAccountWithSelector(AccountSchema, {
+        const mainAccountRoot = useAccount(AccountSchema, {
           resolve: {
             root: true,
           },
-          select: (account) => account?.root,
+          select: (account) => {
+            if (!account.$isLoaded) {
+              return undefined;
+            }
+            return account.root;
+          },
         });
 
         return {