jazz-svelte 0.14.23 → 0.14.25

package/dist/auth/PasskeyAuth.svelte.js

@@ -10,7 +10,7 @@ export function usePasskeyAuth({ appName, appHostname, }) {
         throw new Error("Passkey auth is not supported in guest mode");
     }
     const isAuthenticated = useIsAuthenticated();
-    const state = $derived(isAuthenticated.value ? "signedIn" : "anonymous");
+    const state = $derived(isAuthenticated.current ? "signedIn" : "anonymous");
     return {
         current: auth,
         get state() {

package/dist/auth/PassphraseAuth.svelte.js

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

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

@@ -1,3 +1,5 @@
 export declare function useIsAuthenticated(): {
+    /** @deprecated Use `current` instead */
     readonly value: boolean;
+    readonly current: boolean;
 };

package/dist/auth/useIsAuthenticated.svelte.js

@@ -1,17 +1,22 @@
+import { createSubscriber } from "svelte/reactivity";
 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();
+    const subscribe = createSubscriber((update) => {
+        const off = authSecretStorage.onUpdate(update);
+        return () => off();
     });
+    function getCurrent() {
+        subscribe();
+        return authSecretStorage.isAuthenticated;
+    }
     return {
+        /** @deprecated Use `current` instead */
         get value() {
-            return isAuthenticated;
+            return getCurrent();
+        },
+        get current() {
+            return getCurrent();
         }
     };
 }

package/dist/jazz.class.svelte.d.ts

@@ -14,4 +14,5 @@ export declare class AccountCoState<A extends (AccountClass<Account> & CoValueFr
     logOut: () => void;
     get current(): Loaded<A, R> | null | undefined;
     get agent(): import("jazz-tools").AnonymousJazzAgent | InstanceOfSchema<A>;
+    get isAuthenticated(): boolean;
 }

package/dist/jazz.class.svelte.js

@@ -1,6 +1,7 @@
 import { createSubscriber } from 'svelte/reactivity';
 import { getJazzContext } from './jazz.svelte';
 import { anySchemaToCoSchema, subscribeToCoValue } from 'jazz-tools';
+import { useIsAuthenticated } from './auth/useIsAuthenticated.svelte.js';
 export class CoState {
     #value = undefined;
     #ctx = getJazzContext();
@@ -8,46 +9,46 @@ export class CoState {
     #subscribe;
     constructor(Schema, id, options) {
         this.#id = $derived.by(typeof id === 'function' ? id : () => id);
-        this.#subscribe = $derived.by(() => {
-            const ctx = this.#ctx.current;
-            const id = this.#id;
-            if (!ctx || !id)
-                return;
-            const agent = 'me' in ctx ? ctx.me : ctx.guest;
-            return createSubscriber(update => {
-                const unsubscribe = subscribeToCoValue(anySchemaToCoSchema(Schema), id, {
-                    // @ts-expect-error The resolve query type isn't compatible with the anySchemaToCoSchema conversion
-                    resolve: options?.resolve,
-                    loadAs: agent,
-                    onUnavailable: () => {
-                        this.#value = null;
+        this.#subscribe = createSubscriber(update => {
+            return $effect.root(() => {
+                $effect.pre(() => {
+                    const ctx = this.#ctx.current;
+                    const id = this.#id;
+                    if (!ctx || !id)
+                        return update();
+                    const agent = 'me' in ctx ? ctx.me : ctx.guest;
+                    const unsubscribe = subscribeToCoValue(anySchemaToCoSchema(Schema), id, {
+                        // @ts-expect-error The resolve query type isn't compatible with the anySchemaToCoSchema conversion
+                        resolve: options?.resolve,
+                        loadAs: agent,
+                        onUnavailable: () => {
+                            this.#value = null;
+                            update();
+                        },
+                        onUnauthorized: () => {
+                            this.#value = null;
+                            update();
+                        },
+                        syncResolution: true
+                    }, value => {
+                        if (value === this.#value)
+                            return;
+                        this.#value = value;
                         update();
-                    },
-                    onUnauthorized: () => {
-                        this.#value = null;
-                        update();
-                    },
-                    syncResolution: true
-                }, value => {
-                    if (value === this.#value)
-                        return;
-                    this.#value = value;
-                    update();
+                    });
+                    return () => {
+                        unsubscribe();
+                        this.#value = undefined;
+                    };
                 });
-                return () => {
-                    unsubscribe();
-                    this.#value = undefined;
-                };
             });
         });
         $effect.pre(() => {
-            if (!this.#id || !this.#ctx.current)
-                return;
-            this.#subscribe?.();
+            this.#subscribe();
         });
     }
     get current() {
-        this.#subscribe?.();
+        this.#subscribe();
         return this.#value;
     }
 }
@@ -56,49 +57,48 @@ export class AccountCoState {
     #ctx = getJazzContext();
     #subscribe;
     constructor(Schema, options) {
-        this.#subscribe = $derived.by(() => {
-            const ctx = this.#ctx.current;
-            if (!ctx || !('me' in ctx))
-                return;
-            const me = ctx.me;
-            return createSubscriber(update => {
-                // Setup subscription with current values
-                const unsubscribe = subscribeToCoValue(anySchemaToCoSchema(Schema), me.id, {
-                    // @ts-expect-error The resolve query type isn't compatible with the anySchemaToCoSchema conversion
-                    resolve: options?.resolve,
-                    loadAs: me,
-                    onUnavailable: () => {
-                        this.#value = null;
-                        update();
-                    },
-                    onUnauthorized: () => {
-                        this.#value = null;
+        this.#subscribe = createSubscriber(update => {
+            return $effect.root(() => {
+                $effect.pre(() => {
+                    const ctx = this.#ctx.current;
+                    if (!ctx || !('me' in ctx))
+                        return update();
+                    const me = ctx.me;
+                    const unsubscribe = subscribeToCoValue(anySchemaToCoSchema(Schema), me.id, {
+                        // @ts-expect-error The resolve query type isn't compatible with the anySchemaToCoSchema conversion
+                        resolve: options?.resolve,
+                        loadAs: me,
+                        onUnavailable: () => {
+                            this.#value = null;
+                            update();
+                        },
+                        onUnauthorized: () => {
+                            this.#value = null;
+                            update();
+                        },
+                        syncResolution: true
+                    }, value => {
+                        if (value === this.#value)
+                            return;
+                        this.#value = value;
                         update();
-                    },
-                    syncResolution: true
-                }, value => {
-                    if (value === this.#value)
-                        return;
-                    this.#value = value;
-                    update();
+                    });
+                    return () => {
+                        unsubscribe();
+                        this.#value = undefined;
+                    };
                 });
-                return () => {
-                    unsubscribe();
-                    this.#value = undefined;
-                };
             });
         });
         $effect.pre(() => {
-            if (!this.#ctx.current)
-                return;
-            this.#subscribe?.();
+            this.#subscribe();
         });
     }
     logOut = () => {
         this.#ctx.current?.logOut();
     };
     get current() {
-        this.#subscribe?.();
+        this.#subscribe();
         return this.#value;
     }
     get agent() {
@@ -107,4 +107,8 @@ export class AccountCoState {
         }
         return 'me' in this.#ctx.current ? this.#ctx.current.me : this.#ctx.current.guest;
     }
+    #isAuthenticated = useIsAuthenticated();
+    get isAuthenticated() {
+        return this.#isAuthenticated.current;
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jazz-svelte",
-  "version": "0.14.23",
+  "version": "0.14.25",
   "files": [
     "dist",
     "!dist/**/*.test.*",
@@ -46,12 +46,13 @@
     "svelte-check": "^4.0.0",
     "typescript": "5.6.2",
     "typescript-eslint": "^8.0.0",
-    "vite": "6.3.5"
+    "vite": "6.3.5",
+    "jazz-inspector-element": "0.14.25"
   },
   "dependencies": {
-    "cojson": "0.14.23",
-    "jazz-tools": "0.14.23",
-    "jazz-browser": "0.14.23"
+    "cojson": "0.14.25",
+    "jazz-tools": "0.14.25",
+    "jazz-browser": "0.14.25"
   },
   "scripts": {
     "dev": "vite dev",
@@ -65,6 +66,8 @@
     "format-and-lint": "pnpm run format && pnpm run lint",
     "format-and-lint:fix": "pnpm run format --write && pnpm run lint --fix",
     "test": "vitest",
-    "test:coverage": "vitest --coverage"
+    "test:coverage": "vitest --coverage",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui"
   }
 }

package/dist/tests/components/CoState/UpdateNestedValue.svelte

@@ -1,32 +0,0 @@
-<script lang="ts">
-  import { CoState } from '../../../jazz.class.svelte.js';
-  import { Person } from './schema.js';
-
-  let props: { id: string } = $props();
-
-  const person = new CoState(Person, () => props.id, {
-    resolve: {
-      dog: true
-    }
-  })
-
-  const dogName = $derived(person.current!.dog.name);
-</script>
-
-<!-- Using non-null assertions because we want to test that locally available values are never null -->
-<label>
-  Name
-  <!-- Jazz values are reactive, but they are not recognized as reactive by Svelte -->
-  <!-- svelte-ignore binding_property_non_reactive -->
-  <input type="text" bind:value={person.current!.name} />
-</label>
-
-<label>
-  Dog
-   <!-- Jazz values are reactive, but they are not recognized as reactive by Svelte -->
-  <!-- svelte-ignore binding_property_non_reactive -->
-  <input type="text" bind:value={person.current!.dog.name} />
-</label>
-
-<div data-testid="person-name">{person.current!.name}</div>
-<div data-testid="person-dog-name">{dogName}</div>

package/dist/tests/components/CoState/UpdateNestedValue.svelte.d.ts

@@ -1,6 +0,0 @@
-type $$ComponentProps = {
-    id: string;
-};
-declare const UpdateNestedValue: import("svelte").Component<$$ComponentProps, {}, "">;
-type UpdateNestedValue = ReturnType<typeof UpdateNestedValue>;
-export default UpdateNestedValue;

package/dist/tests/components/CoState/UpdateNestedValueAccount.svelte

@@ -1,33 +0,0 @@
-<script lang="ts">
-  import { AccountCoState } from '../../../jazz.class.svelte.js';
-
-  import { MyAccount } from './schema.js';
-
-  const me = new AccountCoState(MyAccount, {
-    resolve: {
-      root: {
-        dog: true
-      }
-    }
-  });
-
-  const dogName = $derived(me.current!.root.dog.name);
-</script>
-
-<!-- Using non-null assertions because we want to test that locally available values are never null -->
-<label>
-  Name
-  <!-- Jazz values are reactive, but they are not recognized as reactive by Svelte -->
-  <!-- svelte-ignore binding_property_non_reactive -->
-  <input type="text" bind:value={me.current!.root.name} />
-</label>
-
-<label>
-  Dog
-  <!-- Jazz values are reactive, but they are not recognized as reactive by Svelte -->
-  <!-- svelte-ignore binding_property_non_reactive -->
-  <input type="text" bind:value={me.current!.root.dog.name} />
-</label>
-
-<div data-testid="person-name">{me.current!.root.name}</div>
-<div data-testid="person-dog-name">{dogName}</div>

package/dist/tests/components/CoState/UpdateNestedValueAccount.svelte.d.ts

@@ -1,3 +0,0 @@
-declare const UpdateNestedValueAccount: import("svelte").Component<Record<string, never>, {}, "">;
-type UpdateNestedValueAccount = ReturnType<typeof UpdateNestedValueAccount>;
-export default UpdateNestedValueAccount;

package/dist/tests/components/CoState/schema.d.ts

@@ -1,25 +0,0 @@
-import { z } from "jazz-tools";
-export declare const Dog: import("jazz-tools").CoMapSchema<{
-    name: z.z.ZodString;
-}>;
-export declare const Person: import("jazz-tools").CoMapSchema<{
-    name: z.z.ZodString;
-    age: z.z.ZodNumber;
-    dog: import("jazz-tools").CoMapSchema<{
-        name: z.z.ZodString;
-    }>;
-}>;
-export declare const MyAccount: import("jazz-tools").AccountSchema<{
-    profile: import("jazz-tools/dist/internal").CoProfileSchema<{
-        name: z.z.core.$ZodString<string>;
-        inbox?: z.z.core.$ZodOptional<z.z.core.$ZodString>;
-        inboxInvite?: z.z.core.$ZodOptional<z.z.core.$ZodString>;
-    }>;
-    root: import("jazz-tools").CoMapSchema<{
-        name: z.z.ZodString;
-        age: z.z.ZodNumber;
-        dog: import("jazz-tools").CoMapSchema<{
-            name: z.z.ZodString;
-        }>;
-    }>;
-}>;

package/dist/tests/components/CoState/schema.js

@@ -1,17 +0,0 @@
-import { co, z } from "jazz-tools";
-export const Dog = co.map({
-    name: z.string(),
-});
-export const Person = co.map({
-    name: z.string(),
-    age: z.number(),
-    dog: Dog,
-});
-export const MyAccount = co.account({
-    profile: co.profile(),
-    root: Person,
-}).withMigration((account) => {
-    if (!account._refs.root) {
-        account.root = Person.create({ name: "John", age: 30, dog: Dog.create({ name: "Rex" }, account) }, account);
-    }
-});

package/dist/tests/components/ProviderTestComponent.svelte

@@ -1,13 +0,0 @@
-<script lang="ts">
-  import { JazzProvider } from "../../jazz.svelte.js";
-
-  const { guestMode } = $props();
-</script>
-
-<div data-testid="provider-test">
-  <JazzProvider {guestMode} sync={{
-    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 +0,0 @@
-declare const ProviderTestComponent: import("svelte").Component<{
-    guestMode: any;
-}, {}, "">;
-type ProviderTestComponent = ReturnType<typeof ProviderTestComponent>;
-export default ProviderTestComponent;