jazz-svelte 0.9.22 → 0.10.0

package/LICENSE.txt

@@ -1,4 +1,4 @@
-Copyright 2024, Garden Computing, Inc.
+Copyright 2025, Garden Computing, Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -16,4 +16,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.

package/dist/Provider.svelte

@@ -1,64 +1,55 @@
 <script lang="ts" module>
-  export type Props<Acc extends Account = Account> = {
+  export type Props<Acc extends Account = Account> = JazzContextManagerProps<Acc> & {
     children?: Snippet;
-    auth: AuthMethod | 'guest';
-    peer: `wss://${string}` | `ws://${string}`;
-    storage?: 'indexedDB' | 'singleTabOPFS';
-    AccountSchema?: AccountClass<Acc>;
   };
 </script>
 
 <script lang="ts" generics="Acc extends Account">
-  import { createJazzBrowserContext } from 'jazz-browser';
-  import type { AccountClass, AuthMethod } from 'jazz-tools';
+  import { JazzBrowserContextManager, type JazzContextManagerProps } from 'jazz-browser';
+  import type { AuthSecretStorage } from 'jazz-tools';
   import { Account } from 'jazz-tools';
   import { type Snippet, setContext, untrack } from 'svelte';
-  import { JAZZ_CTX, type JazzContext } from './jazz.svelte.js';
+  import { JAZZ_AUTH_CTX, JAZZ_CTX, type JazzContext } from './jazz.svelte.js';
 
-  let { children, auth, peer, storage, AccountSchema }: Props<Acc> = $props();
+  let props: Props<Acc> = $props();
+
+  const contextManager = new JazzBrowserContextManager<Acc>();
 
   const ctx = $state<JazzContext<Acc>>({ current: undefined });
   setContext<JazzContext<Acc>>(JAZZ_CTX, ctx);
-  let sessionCount = $state(0);
+  setContext<AuthSecretStorage>(JAZZ_AUTH_CTX, contextManager.getAuthSecretStorage());
 
   $effect(() => {
-    auth;
-    peer;
-    storage;
-    sessionCount;
+    props.sync.when;
+    props.sync.peer;
+    props.storage;
+    props.guestMode;
     return untrack(() => {
-      if (!auth || !peer) return;
+      if (!props.sync) return;
 
-      const promiseWithDoneCallback = createJazzBrowserContext<Acc>(
-        auth === 'guest'
-          ? {
-              peer,
-              storage
-            }
-          : {
-              AccountSchema: AccountSchema ?? Account as unknown as AccountClass<Acc>,
-              auth,
-              peer,
-              storage
-            }
-      ).then((context) => {
-        ctx.current = {
-          ...context,
-          logOut: () => {
-            context.logOut();
-            ctx.current = undefined;
-            sessionCount = sessionCount + 1;
-          }
-        };
-        return context.done;
-      });
-      return () => {
-        void promiseWithDoneCallback.then((done) => done());
-      };
+      contextManager
+        .createContext({
+          sync: props.sync,
+          storage: props.storage,
+          guestMode: props.guestMode,
+          AccountSchema: props.AccountSchema,
+          defaultProfileName: props.defaultProfileName,
+          onAnonymousAccountDiscarded: props.onAnonymousAccountDiscarded,
+          onLogOut: props.onLogOut,
+        })
+        .catch((error) => {
+          console.error('Error creating Jazz browser context:', error);
+        });
+    });
+  });
+
+  $effect(() => {
+    return contextManager.subscribe(() => {
+      ctx.current = contextManager.getCurrentValue();
     });
   });
 </script>
 
 {#if ctx.current}
-  {@render children?.()}
+  {@render props.children?.()}
 {/if}

package/dist/Provider.svelte.d.ts

@@ -1,11 +1,7 @@
-export type Props<Acc extends Account = Account> = {
+export type Props<Acc extends Account = Account> = JazzContextManagerProps<Acc> & {
     children?: Snippet;
-    auth: AuthMethod | 'guest';
-    peer: `wss://${string}` | `ws://${string}`;
-    storage?: 'indexedDB' | 'singleTabOPFS';
-    AccountSchema?: AccountClass<Acc>;
 };
-import type { AccountClass, AuthMethod } from 'jazz-tools';
+import { type JazzContextManagerProps } from 'jazz-browser';
 import { Account } from 'jazz-tools';
 import { type Snippet } from 'svelte';
 declare class __sveltets_Render<Acc extends Account> {

package/dist/auth/PasskeyAuth.svelte.d.ts

@@ -1,21 +1,7 @@
 import { BrowserPasskeyAuth } from "jazz-browser";
-export type PasskeyAuthState = ({
-    state: "uninitialized";
-} | {
-    state: "loading";
-} | {
-    state: "ready";
-    logIn: () => void;
-    signUp: (username: string) => void;
-} | {
-    state: "signedIn";
-    logOut: () => void;
-}) & {
-    errors: string[];
-};
 export type PasskeyAuth = {
-    current?: BrowserPasskeyAuth;
-    state: PasskeyAuthState;
+    current: BrowserPasskeyAuth;
+    state: "anonymous" | "signedIn";
 };
 /** @category Auth Providers */
 export declare function usePasskeyAuth({ appName, appHostname, }: {

package/dist/auth/PasskeyAuth.svelte.js

@@ -1,53 +1,18 @@
+import { getAuthSecretStorage, getJazzContext } from "../jazz.svelte.js";
 import { BrowserPasskeyAuth } from "jazz-browser";
-import { onMount } from "svelte";
+import { useIsAuthenticated } from "./useIsAuthenticated.svelte.js";
 /** @category Auth Providers */
 export function usePasskeyAuth({ appName, appHostname, }) {
-    let instance = $state();
-    let state = $state({
-        state: "loading",
-        errors: [],
-    });
-    // Function to create a new auth instance
-    function createAuthInstance() {
-        instance = new BrowserPasskeyAuth({
-            onReady(next) {
-                state = {
-                    state: "ready",
-                    logIn: next.logIn,
-                    signUp: next.signUp,
-                    errors: [],
-                };
-            },
-            onSignedIn(next) {
-                state = {
-                    state: "signedIn",
-                    logOut: () => {
-                        // First set state to loading
-                        state = { state: "loading", errors: [] };
-                        // Then trigger logout
-                        next.logOut();
-                        // Create new instance to trigger onReady
-                        createAuthInstance();
-                    },
-                    errors: [],
-                };
-            },
-            onError(error) {
-                state = {
-                    ...state,
-                    errors: [...state.errors, error.toString()],
-                };
-            },
-        }, appName, appHostname);
+    const context = getJazzContext();
+    const authSecretStorage = getAuthSecretStorage();
+    const auth = new BrowserPasskeyAuth(context.current.node.crypto, context.current.authenticate, authSecretStorage, appName, appHostname);
+    if ("guest" in context.current) {
+        throw new Error("Passkey auth is not supported in guest mode");
     }
-    // Initialize the auth instance on mount
-    onMount(() => {
-        createAuthInstance();
-    });
+    const isAuthenticated = useIsAuthenticated();
+    const state = $derived(isAuthenticated.value ? "signedIn" : "anonymous");
     return {
-        get current() {
-            return instance;
-        },
+        current: auth,
         get state() {
             return state;
         },

package/dist/auth/PasskeyAuthBasicUI.svelte

@@ -1,42 +1,58 @@
 <script lang="ts">
-  import { type PasskeyAuthState } from 'jazz-svelte';
+  import type { Snippet } from 'svelte';
+  import { usePasskeyAuth } from './PasskeyAuth.svelte.js';
 
-  let { state: authState }: { state: PasskeyAuthState } = $props();
+  let { appName, children }: { appName: string; children?: Snippet } = $props();
 
-  let name = $state('');
+  const auth = usePasskeyAuth({ appName });
+
+  let error = $state<string | undefined>(undefined);
 
   function signUp(e: Event) {
+    const formData = new FormData(e.currentTarget as HTMLFormElement);
+    const name = formData.get('name') as string;
+
+    if (!name) {
+      error = 'Name is required';
+      return;
+    }
     e.preventDefault();
-    if (!name.trim() || authState.state !== 'ready') return;
-    authState.signUp(name);
+    error = undefined;
+    auth.current.signUp(name).catch((e) => {
+      error = e.message;
+    });
   }
 
   function logIn(e: Event) {
+    error = undefined;
     e.preventDefault();
     e.stopPropagation();
-    if (authState.state !== 'ready') return;
-    authState.logIn();
+    auth.current.logIn().catch((e) => {
+      error = e.message;
+    });
   }
 </script>
 
-<div style="max-width: 18rem; display: flex; flex-direction: column; gap: 2rem;">
-  {#if authState.state === 'loading'}
-    <div>Loading...</div>
-  {:else if authState.state === 'ready'}
-    {#if authState.errors?.length > 0}
-      <div style="color: red;">
-        {#each authState.errors as error}
-          <div>{error}</div>
-        {/each}
-      </div>
-    {/if}
-    <form onsubmit={signUp}>
-      <input type="text" placeholder="Display name" bind:value={name} autocomplete="name" />
-      <input type="submit" value="Sign up" />
-    </form>
-    <button onclick={logIn}> Log in with existing account </button>
-  {/if}
-</div>
+{#if auth.state === 'anonymous'}
+  <div
+    style="width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center;"
+  >
+    <div style="max-width: 18rem; display: flex; flex-direction: column; gap: 2rem;">
+      {#if error}
+        <div style="color: red;">
+          {error}
+        </div>
+      {/if}
+      <form onsubmit={signUp}>
+        <input type="text" name="name" placeholder="Display name" autocomplete="name" />
+        <input type="submit" value="Sign up" />
+      </form>
+      <button onclick={logIn}> Log in with existing account </button>
+    </div>
+  </div>
+{:else}
+  {@render children?.()}
+{/if}
 
 <style>
   form {
@@ -49,17 +65,17 @@
   input[type='submit'] {
     background: #000;
     color: #fff;
-	padding: 6px 12px;
+    padding: 6px 12px;
     border: none;
     border-radius: 6px;
-	min-height: 38px;
+    min-height: 38px;
     cursor: pointer;
   }
 
   input[type='text'] {
     border: 2px solid #000;
-	padding: 6px 12px;
+    padding: 6px 12px;
     border-radius: 6px;
-	min-height: 24px;
+    min-height: 24px;
   }
 </style>

package/dist/auth/PasskeyAuthBasicUI.svelte.d.ts

@@ -1,6 +1,7 @@
-import { type PasskeyAuthState } from 'jazz-svelte';
+import type { Snippet } from 'svelte';
 type $$ComponentProps = {
-    state: PasskeyAuthState;
+    appName: string;
+    children?: Snippet;
 };
 declare const PasskeyAuthBasicUi: import("svelte").Component<$$ComponentProps, {}, "">;
 type PasskeyAuthBasicUi = ReturnType<typeof PasskeyAuthBasicUi>;

package/dist/auth/PassphraseAuth.svelte.d.ts

@@ -0,0 +1,9 @@
+/** @category Auth Providers */
+export declare function usePassphraseAuth({ wordlist, }: {
+    wordlist: string[];
+}): {
+    logIn: (passphrase: string) => Promise<void>;
+    signUp: () => Promise<string>;
+    readonly passphrase: string;
+    readonly state: "anonymous" | "signedIn";
+};

package/dist/auth/PassphraseAuth.svelte.js

@@ -0,0 +1,29 @@
+import { untrack } from "svelte";
+import { getAuthSecretStorage, getJazzContext } from "../jazz.svelte.js";
+import { useIsAuthenticated } from "./useIsAuthenticated.svelte.js";
+import { PassphraseAuth } from "jazz-tools";
+/** @category Auth Providers */
+export function usePassphraseAuth({ wordlist, }) {
+    const context = getJazzContext();
+    const authSecretStorage = getAuthSecretStorage();
+    const auth = new PassphraseAuth(context.current.node.crypto, context.current.authenticate, authSecretStorage, wordlist);
+    let passphrase = $state(auth.passphrase);
+    $effect(untrack(() => {
+        auth.loadCurrentAccountPassphrase();
+        return auth.subscribe(() => {
+            passphrase = auth.passphrase;
+        });
+    }));
+    const isAuthenticated = useIsAuthenticated();
+    const state = $derived(isAuthenticated.value ? "signedIn" : "anonymous");
+    return {
+        logIn: auth.logIn,
+        signUp: auth.signUp,
+        get passphrase() {
+            return passphrase;
+        },
+        get state() {
+            return state;
+        },
+    };
+}

package/dist/auth/index.d.ts

@@ -1,2 +1,3 @@
-export * from "./PasskeyAuth.svelte";
+export * from "./PasskeyAuth.svelte.js";
+export * from "./PassphraseAuth.svelte.js";
 export { default as PasskeyAuthBasicUI } from "./PasskeyAuthBasicUI.svelte";

package/dist/auth/index.js

@@ -1,2 +1,3 @@
-export * from "./PasskeyAuth.svelte";
+export * from "./PasskeyAuth.svelte.js";
+export * from "./PassphraseAuth.svelte.js";
 export { default as PasskeyAuthBasicUI } from "./PasskeyAuthBasicUI.svelte";

package/dist/auth/useIsAuthenticated.svelte.d.ts

@@ -0,0 +1,3 @@
+export declare function useIsAuthenticated(): {
+    readonly value: boolean;
+};

package/dist/auth/useIsAuthenticated.svelte.js

@@ -0,0 +1,17 @@
+import { getAuthSecretStorage } from "../jazz.svelte.js";
+import { onDestroy } from "svelte";
+export function useIsAuthenticated() {
+    const authSecretStorage = getAuthSecretStorage();
+    let isAuthenticated = $state(authSecretStorage.isAuthenticated);
+    const unsubscribe = authSecretStorage.onUpdate(() => {
+        isAuthenticated = authSecretStorage.isAuthenticated;
+    });
+    onDestroy(() => {
+        unsubscribe();
+    });
+    return {
+        get value() {
+            return isAuthenticated;
+        }
+    };
+}

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export { createInviteLink, parseInviteLink } from "jazz-browser";
 export * from "./auth/index.js";
 export * from "./jazz.svelte.js";
+export { useIsAuthenticated } from "./auth/useIsAuthenticated.svelte.js";

package/dist/index.js

@@ -1,3 +1,4 @@
 export { createInviteLink, parseInviteLink } from "jazz-browser";
 export * from "./auth/index.js";
 export * from "./jazz.svelte.js";
+export { useIsAuthenticated } from "./auth/useIsAuthenticated.svelte.js";

package/dist/jazz.svelte.d.ts

@@ -1,5 +1,4 @@
-import { type BrowserContext, type BrowserGuestContext } from 'jazz-browser';
-import type { AnonymousJazzAgent, CoValue, CoValueClass, DeeplyLoaded, DepthsIn, ID } from 'jazz-tools';
+import type { AnonymousJazzAgent, AuthSecretStorage, CoValue, CoValueClass, DeeplyLoaded, DepthsIn, ID, JazzContextType } from 'jazz-tools';
 import { Account } from 'jazz-tools';
 import Provider from './Provider.svelte';
 export { Provider as JazzProvider };
@@ -7,17 +6,21 @@ export { Provider as JazzProvider };
  * The key for the Jazz context.
  */
 export declare const JAZZ_CTX: {};
+export declare const JAZZ_AUTH_CTX: {};
 /**
  * The Jazz context.
  */
 export type JazzContext<Acc extends Account> = {
-    current?: BrowserContext<Acc> | BrowserGuestContext;
+    current?: JazzContextType<Acc>;
 };
 /**
  * Get the current Jazz context.
  * @returns The current Jazz context.
  */
-export declare function getJazzContext<Acc extends Account>(): JazzContext<Acc>;
+export declare function getJazzContext<Acc extends Account>(): {
+    current: JazzContextType<Acc>;
+};
+export declare function getAuthSecretStorage(): AuthSecretStorage;
 export interface Register {
 }
 export type RegisteredAccount = Register extends {
@@ -28,14 +31,14 @@ export declare function useAccount(): {
     logOut: () => void;
 };
 export declare function useAccount<D extends DepthsIn<RegisteredAccount>>(depth: D): {
-    me: DeeplyLoaded<RegisteredAccount, D> | undefined;
+    me: DeeplyLoaded<RegisteredAccount, D> | undefined | null;
     logOut: () => void;
 };
 export declare function useAccountOrGuest(): {
     me: RegisteredAccount | AnonymousJazzAgent;
 };
 export declare function useAccountOrGuest<D extends DepthsIn<RegisteredAccount>>(depth: D): {
-    me: DeeplyLoaded<RegisteredAccount, D> | undefined | AnonymousJazzAgent;
+    me: DeeplyLoaded<RegisteredAccount, D> | undefined | null | AnonymousJazzAgent;
 };
 /**
  * Use a CoValue with a optional depth.
@@ -45,7 +48,7 @@ export declare function useAccountOrGuest<D extends DepthsIn<RegisteredAccount>>
  * @returns The CoValue.
  */
 export declare function useCoState<V extends CoValue, D extends DepthsIn<V> = []>(Schema: CoValueClass<V>, id: ID<V> | undefined, depth?: D): {
-    current?: DeeplyLoaded<V, D>;
+    current?: DeeplyLoaded<V, D> | null;
 };
 /**
  * Use the accept invite hook.

package/dist/jazz.svelte.js

@@ -7,12 +7,27 @@ export { Provider as JazzProvider };
  * The key for the Jazz context.
  */
 export const JAZZ_CTX = {};
+export const JAZZ_AUTH_CTX = {};
 /**
  * Get the current Jazz context.
  * @returns The current Jazz context.
  */
 export function getJazzContext() {
-    return getContext(JAZZ_CTX);
+    const context = getContext(JAZZ_CTX);
+    if (!context) {
+        throw new Error('useJazzContext must be used within a JazzProvider');
+    }
+    if (!context.current) {
+        throw new Error('Jazz context is not initialized');
+    }
+    return context;
+}
+export function getAuthSecretStorage() {
+    const context = getContext(JAZZ_AUTH_CTX);
+    if (!context) {
+        throw new Error('useJazzContext must be used within a JazzProvider');
+    }
+    return context;
 }
 /**
  * Use the current account with a optional depth.
@@ -102,7 +117,9 @@ export function useCoState(Schema, id, depth = []) {
         return subscribeToCoValue(Schema, id, 'me' in ctx.current ? ctx.current.me : ctx.current.guest, depth, (value) => {
             // Get current value from our stable observable
             state = value;
-        }, undefined, true);
+        }, () => {
+            state = null;
+        }, true);
     });
     return {
         get current() {
@@ -128,6 +145,7 @@ export function useAcceptInvite({ invitedObjectSchema, onAccept, forValueHint })
     }
     // Subscribe to the onAccept function.
     $effect(() => {
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
         _onAccept;
         // Subscribe to the onAccept function.
         untrack(() => {

package/dist/testing.d.ts

@@ -1,8 +1,9 @@
-import { Account, AnonymousJazzAgent } from "jazz-tools";
+import { Account, AnonymousJazzAgent, AuthSecretStorage } from "jazz-tools";
 import { type JazzContext } from './jazz.svelte.js';
-export declare function createJazzTestContext<Acc extends Account>({ account }: {
-    account: Acc | {
+export declare function createJazzTestContext<Acc extends Account>(opts?: {
+    account?: Acc | {
         guest: AnonymousJazzAgent;
     };
-}): Map<{}, JazzContext<Acc>>;
+    isAuthenticated?: boolean;
+}): Map<{} | {}, AuthSecretStorage | JazzContext<Acc>>;
 export { createJazzTestAccount, createJazzTestGuest, linkAccounts, setActiveAccount, setupJazzTestSync, } from "jazz-tools/testing";

package/dist/testing.js

@@ -1,17 +1,21 @@
-import { Account, AnonymousJazzAgent } from "jazz-tools";
-import { JAZZ_CTX } from './jazz.svelte.js';
-import { getJazzContextShape } from "jazz-tools/testing";
-export function createJazzTestContext({ account }) {
+import { Account, AnonymousJazzAgent, AuthSecretStorage, } from "jazz-tools";
+import { JAZZ_AUTH_CTX, JAZZ_CTX } from './jazz.svelte.js';
+import { TestJazzContextManager } from "jazz-tools/testing";
+export function createJazzTestContext(opts = {}) {
     const ctx = new Map();
-    const value = getJazzContextShape(account);
+    const account = opts.account ?? Account.getMe();
+    const value = TestJazzContextManager.fromAccountOrGuest(account, {
+        isAuthenticated: opts.isAuthenticated
+    });
+    ctx.set(JAZZ_AUTH_CTX, value.getAuthSecretStorage());
     if ('guest' in account) {
         ctx.set(JAZZ_CTX, {
-            current: value
+            current: value.getCurrentValue()
         });
     }
     else {
         ctx.set(JAZZ_CTX, {
-            current: value
+            current: value.getCurrentValue()
         });
     }
     return ctx;

package/dist/tests/components/ProviderTestComponent.svelte

@@ -1,13 +1,11 @@
 <script lang="ts">
   import { JazzProvider } from "../../jazz.svelte.js";
 
-  const { auth } = $props();
+  const { guestMode } = $props();
 </script>
 
 <div data-testid="provider-test">
-  <JazzProvider {auth} peer="wss://cloud.jazz.tools/?key=jazz-svelte-test">
-    {#if auth}
-      <span data-testid="provider-auth-test">{JSON.stringify(auth)}</span>
-    {/if}
+  <JazzProvider {guestMode} peer="wss://cloud.jazz.tools/?key=jazz-svelte-test">
+    <span data-testid="provider-auth-test">Hello</span>
   </JazzProvider>
 </div>

package/dist/tests/components/ProviderTestComponent.svelte.d.ts

@@ -1,5 +1,5 @@
 declare const ProviderTestComponent: import("svelte").Component<{
-    auth: any;
+    guestMode: any;
 }, {}, "">;
 type ProviderTestComponent = ReturnType<typeof ProviderTestComponent>;
 export default ProviderTestComponent;

package/dist/tests/components/usePassphraseAuth.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { usePassphraseAuth } from "../../auth/PassphraseAuth.svelte.js";
+
+  let { wordlist, setResult }: { wordlist: string[]; setResult: (value: ReturnType<typeof usePassphraseAuth>) => void } = $props();
+
+  const auth = usePassphraseAuth({ wordlist });
+  
+  $effect(() => {
+    setResult({
+      state: auth.state,
+      passphrase: auth.passphrase,
+      logIn: auth.logIn,
+      signUp: auth.signUp
+    });
+  });
+</script>
+
+<div>Test Component</div> 

package/dist/tests/components/usePassphraseAuth.svelte.d.ts

@@ -0,0 +1,7 @@
+import { usePassphraseAuth } from "../../auth/PassphraseAuth.svelte.js";
+declare const UsePassphraseAuth: import("svelte").Component<{
+    wordlist: string[];
+    setResult: (value: ReturnType<typeof usePassphraseAuth>) => void;
+}, {}, "">;
+type UsePassphraseAuth = ReturnType<typeof UsePassphraseAuth>;
+export default UsePassphraseAuth;

package/dist/tests/fixtures.d.ts

@@ -0,0 +1 @@
+export declare const testWordlist: string[];