jazz-tools 0.19.22 → 0.20.0

package/src/react/auth/Clerk.tsx

@@ -8,12 +8,15 @@ import {
   KvStoreContext,
 } from "jazz-tools";
 import { LocalStorageKVStore } from "jazz-tools/browser";
-import { useAuthSecretStorage, useJazzContext } from "jazz-tools/react-core";
+import {
+  useAuthSecretStorage,
+  useJazzContextValue,
+} from "jazz-tools/react-core";
 import { ReactNode, useEffect, useMemo, useState } from "react";
 import { JazzProviderProps, JazzReactProvider } from "../provider.js";
 
 function useJazzClerkAuth(clerk: MinimalClerkClient) {
-  const context = useJazzContext();
+  const context = useJazzContextValue();
   const authSecretStorage = useAuthSecretStorage();
 
   if ("guest" in context) {

package/src/react/auth/PasskeyAuth.tsx

@@ -2,7 +2,7 @@ import { BrowserPasskeyAuth } from "jazz-tools/browser";
 import {
   useAuthSecretStorage,
   useIsAuthenticated,
-  useJazzContext,
+  useJazzContextValue,
 } from "jazz-tools/react-core";
 import { useMemo, useState } from "react";
 
@@ -23,7 +23,7 @@ export function usePasskeyAuth({
   appName: string;
   appHostname?: string;
 }) {
-  const context = useJazzContext();
+  const context = useJazzContextValue();
   const authSecretStorage = useAuthSecretStorage();
 
   if ("guest" in context) {

package/src/react/hooks.tsx

@@ -2,7 +2,7 @@ import { consumeInviteLinkFromWindowLocation } from "jazz-tools/browser";
 import { useEffect } from "react";
 
 import { CoValueClassOrSchema } from "jazz-tools";
-import { useJazzContext } from "jazz-tools/react-core";
+import { useJazzContextValue } from "jazz-tools/react-core";
 
 export function useAcceptInvite<S extends CoValueClassOrSchema>({
   invitedObjectSchema,
@@ -13,7 +13,7 @@ export function useAcceptInvite<S extends CoValueClassOrSchema>({
   onAccept: (valueID: string) => void;
   forValueHint?: string;
 }): void {
-  const context = useJazzContext();
+  const context = useJazzContextValue();
 
   if (!("me" in context)) {
     throw new Error(
@@ -46,6 +46,7 @@ export function useAcceptInvite<S extends CoValueClassOrSchema>({
 
 export {
   experimental_useInboxSender,
+  useJazzContextValue,
   useJazzContext,
   useAuthSecretStorage,
   useAccount,

package/src/react/provider.tsx

@@ -3,15 +3,20 @@ import {
   AccountClass,
   AnyAccountSchema,
   CoValueFromRaw,
-  InstanceOfSchema,
-  JazzContextType,
 } from "jazz-tools";
 import {
   JazzBrowserContextManager,
   JazzContextManagerProps,
 } from "jazz-tools/browser";
-import { JazzContext, JazzContextManagerContext } from "jazz-tools/react-core";
-import React, { useEffect, useRef } from "react";
+import { JazzContext } from "jazz-tools/react-core";
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useSyncExternalStore,
+} from "react";
 
 export type JazzProviderProps<
   S extends
@@ -43,6 +48,12 @@ export function JazzReactProvider<
   fallback = null,
   authSecretStorageKey,
 }: JazzProviderProps<S>) {
+  if (useContext(JazzContext)) {
+    throw new Error(
+      "You can't nest a JazzProvider inside another JazzProvider.",
+    );
+  }
+
   const [contextManager] = React.useState(
     () =>
       new JazzBrowserContextManager<S>({
@@ -56,45 +67,40 @@ export function JazzReactProvider<
   const onAnonymousAccountDiscardedRefCallback = useRefCallback(
     onAnonymousAccountDiscarded,
   );
-  const logoutReplacementActiveRef = useRef(false);
-  logoutReplacementActiveRef.current = Boolean(logOutReplacement);
-  const onAnonymousAccountDiscardedEnabled = Boolean(
-    onAnonymousAccountDiscarded,
-  );
 
-  const value = React.useSyncExternalStore<
-    JazzContextType<InstanceOfSchema<S>> | undefined
-  >(
-    React.useCallback(
-      (callback) => {
-        const props = {
-          AccountSchema,
-          guestMode,
-          sync,
-          storage,
-          defaultProfileName,
-          onLogOut: onLogOutRefCallback,
-          logOutReplacement: logoutReplacementActiveRef.current
-            ? logOutReplacementRefCallback
-            : undefined,
-          onAnonymousAccountDiscarded: onAnonymousAccountDiscardedEnabled
-            ? onAnonymousAccountDiscardedRefCallback
-            : undefined,
-        } satisfies JazzContextManagerProps<S>;
+  const props = useMemo(() => {
+    return {
+      AccountSchema,
+      guestMode,
+      sync,
+      storage,
+      defaultProfileName,
+      onLogOut: onLogOutRefCallback,
+      logOutReplacement: logOutReplacement
+        ? logOutReplacementRefCallback
+        : undefined,
+      onAnonymousAccountDiscarded: onAnonymousAccountDiscarded
+        ? onAnonymousAccountDiscardedRefCallback
+        : undefined,
+    } satisfies JazzContextManagerProps<S>;
+  }, [guestMode, sync.peer, sync.when, storage]);
 
-        if (contextManager.propsChanged(props)) {
-          contextManager.createContext(props).catch((error) => {
-            console.log(error.stack);
-            console.error("Error creating Jazz browser context:", error);
-          });
-        }
+  if (contextManager.propsChanged(props) && typeof window !== "undefined") {
+    contextManager.createContext(props).catch((error) => {
+      console.log(error.stack);
+      console.error("Error creating Jazz browser context:", error);
+    });
+  }
 
+  const isReady = useSyncExternalStore(
+    useCallback(
+      (callback) => {
         return contextManager.subscribe(callback);
       },
-      [sync, guestMode].concat(storage as any),
+      [contextManager],
     ),
-    () => contextManager.getCurrentValue(),
-    () => contextManager.getCurrentValue(),
+    () => Boolean(contextManager.getCurrentValue()),
+    () => Boolean(contextManager.getCurrentValue()),
   );
 
   useEffect(() => {
@@ -108,10 +114,8 @@ export function JazzReactProvider<
   }, []);
 
   return (
-    <JazzContext.Provider value={value}>
-      <JazzContextManagerContext.Provider value={contextManager}>
-        {value ? children : fallback}
-      </JazzContextManagerContext.Provider>
+    <JazzContext.Provider value={contextManager}>
+      {isReady ? children : fallback}
     </JazzContext.Provider>
   );
 }

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

@@ -1,6 +1,6 @@
 import { DemoAuth } from "jazz-tools";
 import { useEffect, useMemo, useState } from "react";
-import { useAuthSecretStorage, useJazzContext } from "../hooks.js";
+import { useAuthSecretStorage, useJazzContextValue } from "../hooks.js";
 import { useIsAuthenticated } from "../hooks.js";
 
 /**
@@ -14,7 +14,7 @@ import { useIsAuthenticated } from "../hooks.js";
  * @category Auth Providers
  */
 export function useDemoAuth() {
-  const context = useJazzContext();
+  const context = useJazzContextValue();
   const authSecretStorage = useAuthSecretStorage();
 
   if ("guest" in context) {

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

@@ -1,6 +1,6 @@
 import { PassphraseAuth } from "jazz-tools";
 import { useCallback, useMemo, useSyncExternalStore } from "react";
-import { useAuthSecretStorage, useJazzContext } from "../hooks.js";
+import { useAuthSecretStorage, useJazzContextValue } from "../hooks.js";
 import { useIsAuthenticated } from "../hooks.js";
 
 /**
@@ -14,7 +14,7 @@ import { useIsAuthenticated } from "../hooks.js";
  * @category Auth Providers
  */
 export function usePassphraseAuth({ wordlist }: { wordlist: string[] }) {
-  const context = useJazzContext();
+  const context = useJazzContextValue();
   const authSecretStorage = useAuthSecretStorage();
 
   if ("guest" in context) {

package/src/react-core/hooks.ts

@@ -19,7 +19,6 @@ import {
   InboxSender,
   InstanceOfSchema,
   JazzContextManager,
-  JazzContextType,
   Loaded,
   MaybeLoaded,
   NotLoaded,
@@ -32,13 +31,13 @@ import {
   getUnloadedCoValueWithoutId,
   type BranchDefinition,
 } from "jazz-tools";
-import { JazzContext, JazzContextManagerContext } from "./provider.js";
+import { JazzContext } from "./provider.js";
 import { getCurrentAccountFromContextManager } from "./utils.js";
 import { CoValueSubscription } from "./types.js";
 import { use } from "./use.js";
 
 export function useJazzContext<Acc extends Account>() {
-  const value = useContext(JazzContext) as JazzContextType<Acc>;
+  const value = useContext(JazzContext) as JazzContextManager<Acc, {}>;
 
   if (!value) {
     throw new Error(
@@ -49,31 +48,31 @@ export function useJazzContext<Acc extends Account>() {
   return value;
 }
 
-export function useJazzContextManager<Acc extends Account>() {
-  const value = useContext(JazzContextManagerContext) as JazzContextManager<
-    Acc,
-    {}
-  >;
+export function useJazzContextValue<Acc extends Account>() {
+  const contextManager = useJazzContext<Acc>();
 
-  if (!value) {
+  const context = useSyncExternalStore(
+    useCallback(
+      (callback) => {
+        return contextManager.subscribe(callback);
+      },
+      [contextManager],
+    ),
+    () => contextManager.getCurrentValue(),
+    () => contextManager.getCurrentValue(),
+  );
+
+  if (!context) {
     throw new Error(
-      "You need to set up a JazzProvider on top of your app to use this hook.",
+      "The JazzProvider is not initialized yet. This looks like a bug, please report it.",
     );
   }
 
-  return value;
+  return context;
 }
 
 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();
+  return useJazzContext().getAuthSecretStorage();
 }
 
 export function useIsAuthenticated() {
@@ -122,7 +121,7 @@ interface SubscriptionsState {
   schema: CoValueClassOrSchema;
   ids: readonly (string | undefined | null)[];
   resolve: ResolveQuery<any>;
-  contextManager: ReturnType<typeof useJazzContextManager>;
+  contextManager: ReturnType<typeof useJazzContext>;
   agent: AnonymousJazzAgent | Loaded<any, true>;
   branchName?: string;
   branchOwnerId?: string;
@@ -142,7 +141,7 @@ function useCoValueSubscriptions(
   resolve: ResolveQuery<any>,
   branch?: BranchDefinition,
 ): (SubscriptionScope<CoValue> | null)[] {
-  const contextManager = useJazzContextManager();
+  const contextManager = useJazzContext();
   const agent = useAgent();
 
   const callerStack = useMemo(() => captureStack(), []);
@@ -536,7 +535,7 @@ export function useAccountSubscription<
     unstable_branch?: BranchDefinition;
   },
 ) {
-  const contextManager = useJazzContextManager();
+  const contextManager = useJazzContext();
 
   // Capture stack trace at hook call time
   const callerStack = useMemo(() => captureStack(), []);
@@ -783,7 +782,7 @@ export function useSuspenseAccount<
  * Returns a function for logging out of the current account.
  */
 export function useLogOut(): () => void {
-  const contextManager = useJazzContextManager();
+  const contextManager = useJazzContext();
   return contextManager.logOut;
 }
 
@@ -798,7 +797,7 @@ export function useLogOut(): () => void {
 export function useAgent<
   A extends AccountClass<Account> | AnyAccountSchema = typeof Account,
 >(): AnonymousJazzAgent | Loaded<A, true> {
-  const contextManager = useJazzContextManager<InstanceOfSchema<A>>();
+  const contextManager = useJazzContext<InstanceOfSchema<A>>();
 
   const getCurrentValue = () =>
     getCurrentAccountFromContextManager(contextManager) as
@@ -821,7 +820,7 @@ export function experimental_useInboxSender<
   I extends CoValue,
   O extends CoValue | undefined,
 >(inboxOwnerID: string | undefined) {
-  const context = useJazzContext();
+  const context = useJazzContextValue();
 
   if (!("me" in context)) {
     throw new Error(
@@ -868,7 +867,7 @@ export function experimental_useInboxSender<
  * after 5 seconds of not receiving a ping from the server.
  */
 export function useSyncConnectionStatus() {
-  const context = useJazzContext();
+  const context = useJazzContextValue();
 
   const connected = useSyncExternalStore(
     useCallback(

package/src/react-core/provider.tsx

@@ -1,11 +1,7 @@
 import React from "react";
 
-import { Account, JazzContextManager, JazzContextType } from "jazz-tools";
+import { Account, JazzContextManager } 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

@@ -1,7 +1,7 @@
 import { Account, AnonymousJazzAgent } from "jazz-tools";
 import { TestJazzContextManager } from "jazz-tools/testing";
 import { useCallback, useState, useSyncExternalStore } from "react";
-import { JazzContext, JazzContextManagerContext } from "./provider.js";
+import { JazzContext } from "./provider.js";
 
 export function JazzTestProvider<Acc extends Account>({
   children,
@@ -18,17 +18,9 @@ export function JazzTestProvider<Acc extends Account>({
     });
   });
 
-  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 value={contextManager}>
+      {children}
     </JazzContext.Provider>
   );
 }

package/src/react-core/tests/useAccount.selector.test.ts

@@ -1,9 +1,8 @@
 // @vitest-environment happy-dom
 
-import { Account, RefsToResolve, co, z, Group } from "jazz-tools";
+import { Account, co, z, Group } from "jazz-tools";
 import { assert, beforeEach, describe, expect, it } from "vitest";
-import { useAccount, useJazzContextManager } from "../hooks.js";
-import { useIsAuthenticated } from "../index.js";
+import { useAccount } from "../hooks.js";
 import {
   createJazzTestAccount,
   createJazzTestGuest,

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

@@ -3,12 +3,7 @@
 import { CoValueLoadingState, Group, RefsToResolve, co, z } from "jazz-tools";
 import { assertLoaded } from "jazz-tools/testing";
 import { assert, beforeEach, describe, expect, it } from "vitest";
-import {
-  useAccount,
-  useAgent,
-  useJazzContextManager,
-  useLogOut,
-} from "../hooks.js";
+import { useAccount, useAgent, useJazzContext, useLogOut } from "../hooks.js";
 import { useIsAuthenticated } from "../index.js";
 import {
   createJazzTestAccount,
@@ -68,6 +63,61 @@ describe("useAccount", () => {
     expect(result.current.root.value).toBe("123");
   });
 
+  it("should return a 'deleted' value when a required resolved child is deleted", async () => {
+    const AccountRoot = co.map({
+      value: z.string(),
+    });
+
+    const AccountSchema = co
+      .account({
+        root: AccountRoot,
+        profile: co.profile(),
+      })
+      .withMigration((account) => {
+        if (!account.$jazz.refs.root) {
+          account.$jazz.set("root", { value: "123" });
+        }
+      });
+
+    const account = await createJazzTestAccount({
+      AccountSchema,
+      isCurrentActiveAccount: true,
+    });
+
+    const { result } = renderHook(
+      () =>
+        useAccount(AccountSchema, {
+          resolve: {
+            root: true,
+          },
+        }),
+      {
+        account,
+      },
+    );
+
+    await waitFor(() => {
+      assertLoaded(result.current);
+      assertLoaded(result.current.root);
+      expect(result.current.root.value).toBe("123");
+    });
+
+    assertLoaded(result.current);
+    assertLoaded(result.current.root);
+    // Capture the root reference before deletion; after deletion the account may become NotLoaded.
+    const root = result.current.root;
+
+    act(() => {
+      root.$jazz.raw.core.deleteCoValue();
+    });
+
+    await waitFor(() => {
+      expect(result.current.$jazz.loadingState).toBe(
+        CoValueLoadingState.DELETED,
+      );
+    });
+  });
+
   it("should be in sync with useIsAuthenticated when logOut is called", async () => {
     const account = await createJazzTestAccount({});
 
@@ -140,7 +190,7 @@ describe("useAccount", () => {
       () => {
         const isAuthenticated = useIsAuthenticated();
         const account = useAccount();
-        const contextManager = useJazzContextManager();
+        const contextManager = useJazzContext();
 
         if (account) {
           if (!accounts.includes(account.$jazz.id)) {

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

@@ -224,6 +224,43 @@ describe("useCoState", () => {
     });
   });
 
+  it("should return a 'deleted' value when the coValue is deleted", async () => {
+    const TestMap = co.map({
+      value: z.string(),
+    });
+
+    const account = await createJazzTestAccount({
+      isCurrentActiveAccount: true,
+    });
+
+    const map = TestMap.create(
+      {
+        value: "123",
+      },
+      Group.create(account).makePublic("reader"),
+    );
+
+    const { result } = renderHook(() => useCoState(TestMap, map.$jazz.id), {
+      account,
+    });
+
+    await waitFor(() => {
+      assertLoaded(result.current);
+      expect(result.current.value).toBe("123");
+    });
+
+    console.log("deleting");
+    act(() => {
+      map.$jazz.raw.core.deleteCoValue();
+    });
+
+    await waitFor(() => {
+      expect(result.current.$jazz.loadingState).toBe(
+        CoValueLoadingState.DELETED,
+      );
+    });
+  });
+
   it("should return a 'loaded' value if the coValue is shared with everyone", async () => {
     const TestMap = co.map({
       value: z.string(),

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

@@ -3,10 +3,7 @@
 import { CoMap, Group, Inbox, Loaded, co, z } from "jazz-tools";
 import { assertLoaded } from "jazz-tools/testing";
 import { describe, expect, it } from "vitest";
-import {
-  experimental_useInboxSender,
-  useJazzContextManager,
-} from "../index.js";
+import { experimental_useInboxSender, useJazzContext } from "../index.js";
 import {
   createJazzTestAccount,
   linkAccounts,
@@ -75,7 +72,7 @@ describe("useInboxSender", () => {
 
     const { result } = renderHook(
       () => {
-        const ctx = useJazzContextManager();
+        const ctx = useJazzContext();
         const send = experimental_useInboxSender(inboxReceiver.$jazz.id);
         return { ctx, send };
       },

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

@@ -239,6 +239,74 @@ describe("useSuspenseAccount", () => {
     });
   });
 
+  it("should throw error when a required resolved child is deleted", async () => {
+    const AccountRoot = co.map({
+      value: z.string(),
+    });
+
+    const MyAppAccount = co
+      .account({
+        profile: co.profile({
+          name: z.string(),
+        }),
+        root: AccountRoot,
+      })
+      .withMigration((account, creationProps) => {
+        if (!account.$jazz.refs.profile) {
+          account.$jazz.set("profile", {
+            name: creationProps?.name || "John Doe",
+          });
+        }
+        if (!account.$jazz.refs.root) {
+          account.$jazz.set("root", {
+            value: "123",
+          });
+        }
+      });
+
+    const account = await createJazzTestAccount({
+      AccountSchema: MyAppAccount,
+      isCurrentActiveAccount: true,
+      creationProps: {
+        name: "John Doe",
+      },
+    });
+
+    // Ensure root exists, then delete it.
+    const loaded = await account.$jazz.ensureLoaded({
+      resolve: { root: true },
+    });
+    loaded.root.$jazz.raw.core.deleteCoValue();
+
+    const TestComponent = () => {
+      const account = useSuspenseAccount(MyAppAccount, {
+        resolve: {
+          root: true,
+          profile: true,
+        },
+      });
+      return <div>{account.profile.name}</div>;
+    };
+
+    const { container } = await act(async () => {
+      return render(
+        <ErrorBoundary FallbackComponent={ErrorFallback}>
+          <Suspense fallback={<div>Loading...</div>}>
+            <TestComponent />
+          </Suspense>
+        </ErrorBoundary>,
+        { account },
+      );
+    });
+
+    await waitFor(
+      () => {
+        expect(container.textContent).toContain("Error: deleted");
+      },
+      { timeout: 10_000 },
+    );
+  });
+
   it("should throw error for anonymous agent", async () => {
     const MyAppAccount = co.account({
       profile: co.profile({