jazz-tools 0.19.22 → 0.20.0

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

@@ -218,6 +218,50 @@ describe("useSuspenseCoState", () => {
     );
   });
 
+  it("should throw error when CoValue is deleted", async () => {
+    const TestMap = co.map({
+      value: z.string(),
+    });
+
+    const owner = await createJazzTestAccount({
+      isCurrentActiveAccount: true,
+    });
+
+    const map = TestMap.create(
+      {
+        value: "123",
+      },
+      Group.create(owner).makePublic("reader"),
+    );
+
+    map.$jazz.raw.core.deleteCoValue();
+
+    const TestComponent = () => {
+      const value = useSuspenseCoState(TestMap, map.$jazz.id);
+      return <div>{value.value}</div>;
+    };
+
+    const { container } = await act(async () => {
+      return render(
+        <ErrorBoundary FallbackComponent={ErrorFallback}>
+          <Suspense fallback={<div>Loading...</div>}>
+            <TestComponent />
+          </Suspense>
+        </ErrorBoundary>,
+        {
+          account: owner,
+        },
+      );
+    });
+
+    await waitFor(
+      () => {
+        expect(container.textContent).toContain("Error: deleted");
+      },
+      { timeout: 10_000 },
+    );
+  });
+
   it("should throw error when CoValue is unavailable due disabled network", async () => {
     disableJazzTestSync();
 

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

@@ -33,7 +33,6 @@ export type JazzContextManagerProps<
   onAnonymousAccountDiscarded?: (
     anonymousAccount: InstanceOfSchema<S>,
   ) => Promise<void>;
-  CryptoProvider?: BaseReactNativeContextOptions["CryptoProvider"];
 };
 
 export class ReactNativeContextManager<
@@ -50,7 +49,6 @@ export class ReactNativeContextManager<
         sync: props.sync,
         storage: props.storage,
         authSecretStorage: this.authSecretStorage,
-        CryptoProvider: props.CryptoProvider,
       });
     } else {
       return createJazzReactNativeContext<S>({
@@ -61,7 +59,6 @@ export class ReactNativeContextManager<
         newAccountProps: authProps?.newAccountProps,
         defaultProfileName: props.defaultProfileName,
         authSecretStorage: this.authSecretStorage,
-        CryptoProvider: props.CryptoProvider,
       });
     }
   }

package/src/react-native-core/auth/usePasskeyAuth.tsx

@@ -1,7 +1,7 @@
 import {
   useAuthSecretStorage,
   useIsAuthenticated,
-  useJazzContext,
+  useJazzContextValue,
 } from "jazz-tools/react-core";
 import { useMemo } from "react";
 import { ReactNativePasskeyAuth } from "./PasskeyAuth.js";
@@ -52,7 +52,7 @@ export function usePasskeyAuth({
   appName: string;
   rpId: string;
 }) {
-  const context = useJazzContext();
+  const context = useJazzContextValue();
   const authSecretStorage = useAuthSecretStorage();
 
   if ("guest" in context) {

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

@@ -1,7 +1,7 @@
 import { useEffect } from "react";
 
 import { CoValueClassOrSchema, parseInviteLink } from "jazz-tools";
-import { useJazzContext } from "jazz-tools/react-core";
+import { useJazzContextValue } from "jazz-tools/react-core";
 import { Linking } from "react-native";
 
 export {
@@ -10,7 +10,7 @@ export {
   experimental_useInboxSender,
   useDemoAuth,
   usePassphraseAuth,
-  useJazzContext,
+  useJazzContextValue,
   useAuthSecretStorage,
   useIsAuthenticated,
   useAccount,
@@ -34,7 +34,7 @@ export function useAcceptInviteNative<S extends CoValueClassOrSchema>({
   onAccept: (projectID: string) => void;
   forValueHint?: string;
 }): void {
-  const context = useJazzContext();
+  const context = useJazzContextValue();
 
   if (!("me" in context)) {
     throw new Error(

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

@@ -1,6 +1,5 @@
 import NetInfo from "@react-native-community/netinfo";
 import { LocalNode, Peer, getSqliteStorageAsync } from "cojson";
-import { PureJSCrypto } from "cojson/dist/crypto/PureJSCrypto"; // Importing from dist to not rely on the exports field
 import {
   Account,
   AccountClass,
@@ -20,14 +19,12 @@ import { ReactNativeSessionProvider } from "./ReactNativeSessionProvider.js";
 
 import { SQLiteDatabaseDriverAsync } from "cojson";
 import { WebSocketPeerWithReconnection } from "cojson-transport-ws";
-import type { RNQuickCrypto } from "jazz-tools/react-native-core/crypto";
-import type { RNCrypto } from "cojson/crypto/RNCrypto";
+import { RNCrypto } from "cojson/crypto/RNCrypto";
 
 export type BaseReactNativeContextOptions = {
   sync: SyncConfig;
   reconnectionTimeout?: number;
   storage?: SQLiteDatabaseDriverAsync | "disabled";
-  CryptoProvider?: typeof PureJSCrypto | typeof RNQuickCrypto | typeof RNCrypto;
   authSecretStorage: AuthSecretStorage;
 };
 
@@ -40,8 +37,7 @@ class ReactNativeWebSocketPeerWithReconnection extends WebSocketPeerWithReconnec
 }
 
 async function setupPeers(options: BaseReactNativeContextOptions) {
-  const CryptoProvider = options.CryptoProvider || PureJSCrypto;
-  const crypto = await CryptoProvider.create();
+  const crypto = await RNCrypto.create();
   let node: LocalNode | undefined = undefined;
 
   const peers: Peer[] = [];

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

@@ -3,12 +3,17 @@ import {
   AccountClass,
   AnyAccountSchema,
   CoValueFromRaw,
-  InstanceOfSchema,
-  JazzContextType,
   KvStore,
 } from "jazz-tools";
-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";
 import type { JazzContextManagerProps } from "./ReactNativeContextManager.js";
 import { ReactNativeContextManager } from "./ReactNativeContextManager.js";
 import { setupKvStore } from "./platform.js";
@@ -20,6 +25,7 @@ export type JazzProviderProps<
 > = {
   children: React.ReactNode;
   kvStore?: KvStore;
+  fallback?: React.ReactNode | null;
   authSecretStorageKey?: string;
 } & JazzContextManagerProps<S>;
 
@@ -39,9 +45,15 @@ export function JazzProviderCore<
   logOutReplacement,
   onAnonymousAccountDiscarded,
   kvStore,
-  CryptoProvider,
   authSecretStorageKey,
+  fallback = null,
 }: JazzProviderProps<S>) {
+  if (useContext(JazzContext)) {
+    throw new Error(
+      "You can't nest a JazzProvider inside another JazzProvider.",
+    );
+  }
+
   setupKvStore(kvStore);
 
   const [contextManager] = React.useState(
@@ -53,46 +65,40 @@ export function JazzProviderCore<
   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,
-          CryptoProvider,
-        } 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 React Native context:", error);
-          });
-        }
+  if (contextManager.propsChanged(props)) {
+    contextManager.createContext(props).catch((error) => {
+      console.log(error.stack);
+      console.error("Error creating Jazz React Native 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(() => {
@@ -106,10 +112,8 @@ export function JazzProviderCore<
   }, []);
 
   return (
-    <JazzContext.Provider value={value}>
-      <JazzContextManagerContext.Provider value={contextManager}>
-        {value && children}
-      </JazzContextManagerContext.Provider>
+    <JazzContext.Provider value={contextManager}>
+      {isReady ? children : fallback}
     </JazzContext.Provider>
   );
 }

package/src/svelte/jazz.class.svelte.ts

@@ -99,10 +99,7 @@ export class CoState<
             // @ts-expect-error The resolve query type isn't compatible with the coValueClassFromCoValueClassOrSchema conversion
             resolve,
             loadAs: agent,
-            onUnavailable: (value) => {
-              this.update(value);
-            },
-            onUnauthorized: (value) => {
+            onError: (value) => {
               this.update(value);
             },
             syncResolution: true,
@@ -181,10 +178,7 @@ export class AccountCoState<
           {
             resolve,
             loadAs: me,
-            onUnavailable: (value) => {
-              this.update(value);
-            },
-            onUnauthorized: (value) => {
+            onError: (value) => {
               this.update(value);
             },
             syncResolution: true,

package/src/svelte/tests/AccountCoState.svelte.test.ts

@@ -0,0 +1,79 @@
+// @vitest-environment happy-dom
+
+import { CoValueLoadingState, co, z } from "jazz-tools";
+import { assertLoaded } from "jazz-tools/testing";
+import { beforeEach, describe, expect, it } from "vitest";
+import { createJazzTestAccount, setupJazzTestSync } from "../testing";
+import { render, screen, waitFor } from "./testUtils";
+import TestAccountCoStateWrapper from "./TestAccountCoStateWrapper.svelte";
+
+describe("AccountCoState", () => {
+  beforeEach(async () => {
+    await setupJazzTestSync();
+  });
+
+  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({
+        profile: co.profile(),
+        root: AccountRoot,
+      })
+      .withMigration((account) => {
+        if (!account.$jazz.refs.root) {
+          account.$jazz.set("root", { value: "123" });
+        }
+      });
+
+    const account = await createJazzTestAccount({
+      AccountSchema,
+      isCurrentActiveAccount: true,
+    });
+
+    render(
+      TestAccountCoStateWrapper,
+      {
+        Schema: AccountSchema,
+        options: {
+          resolve: {
+            root: true,
+          },
+        },
+      },
+      {
+        account,
+      },
+    );
+
+    // Ensure the account (and root) is loaded first.
+    const loaded = await account.$jazz.ensureLoaded({
+      resolve: {
+        root: true,
+      },
+    });
+    assertLoaded(loaded.root);
+
+    await waitFor(() => {
+      expect(screen.getByTestId("loading-state").textContent).toBe(
+        CoValueLoadingState.LOADED,
+      );
+      expect(screen.getByTestId("is-loaded").textContent).toBe("true");
+    });
+
+    // Delete the required child (root) -> AccountCoState should bubble the error.
+    loaded.root.$jazz.raw.core.deleteCoValue();
+    await loaded.root.$jazz.raw.core.waitForSync();
+
+    await waitFor(() => {
+      expect(screen.getByTestId("loading-state").textContent).toBe(
+        CoValueLoadingState.DELETED,
+      );
+      expect(screen.getByTestId("is-loaded").textContent).toBe("false");
+    });
+  });
+});
+
+

package/src/svelte/tests/CoState.svelte.test.ts

@@ -54,4 +54,40 @@ describe("CoState", () => {
     );
     expect(stateValue.name).toBe("John Doe");
   });
+
+  it("should return a 'deleted' value when the coValue is deleted", async () => {
+    const Person = co.map({
+      name: co.plainText(),
+    });
+    const PersonWithName = Person.resolved({ name: true });
+    const person = Person.create({ name: "John Doe" }, publicGroup);
+
+    render(
+      TestCoStateWrapper,
+      {
+        Schema: PersonWithName,
+        id: person.$jazz.id,
+      },
+      {
+        account: clientAccount,
+      },
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId("loading-state").textContent).toBe(
+        CoValueLoadingState.LOADED,
+      );
+    });
+
+    // Delete on the server (owner/admin) and ensure it propagates.
+    person.$jazz.raw.core.deleteCoValue();
+    await person.$jazz.raw.core.waitForSync();
+
+    await waitFor(() => {
+      expect(screen.getByTestId("loading-state").textContent).toBe(
+        CoValueLoadingState.DELETED,
+      );
+      expect(screen.getByTestId("is-loaded").textContent).toBe("false");
+    });
+  });
 });

package/src/svelte/tests/TestAccountCoStateWrapper.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import type { AnyAccountSchema, ResolveQuery } from "jazz-tools";
+  import { AccountCoState } from "../jazz.class.svelte";
+
+  type Props<A extends AnyAccountSchema, R extends ResolveQuery<A>> = {
+    Schema: A;
+    options?: { resolve?: R };
+  };
+
+  let { Schema, options }: Props<any, any> = $props();
+
+  const state = new AccountCoState(Schema, options);
+</script>
+
+<div data-testid="account-costate-wrapper">
+  <div data-testid="loading-state">{state.current.$jazz.loadingState}</div>
+  <div data-testid="is-loaded">{state.current.$isLoaded ? "true" : "false"}</div>
+  {#if state.current.$isLoaded}
+    <div data-testid="account-id">{state.current.$jazz.id}</div>
+    <div data-testid="state-json">{JSON.stringify(state.current.toJSON())}</div>
+  {/if}
+</div>
+
+

package/src/tools/coValues/deepLoading.ts

@@ -46,6 +46,7 @@ export type NotLoaded<T> = {
     id: ID<T>;
     loadingState:
       | typeof CoValueLoadingState.LOADING
+      | typeof CoValueLoadingState.DELETED
       | typeof CoValueLoadingState.UNAVAILABLE
       | typeof CoValueLoadingState.UNAUTHORIZED;
   };
@@ -70,6 +71,7 @@ export type Inaccessible<T> = {
   $jazz: {
     id: ID<T>;
     loadingState:
+      | typeof CoValueLoadingState.DELETED
       | typeof CoValueLoadingState.UNAVAILABLE
       | typeof CoValueLoadingState.UNAUTHORIZED;
   };