jazz-svelte 0.13.21 → 0.13.24

package/dist/index.d.ts

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

package/dist/index.js

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

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

@@ -0,0 +1,20 @@
+import type { Account, CoValue, CoValueClass, ID, RefsToResolve, RefsToResolveStrict, RegisteredAccount, Resolved } from "jazz-tools";
+export declare class CoState<V extends CoValue, R extends RefsToResolve<V> = true> {
+    #private;
+    constructor(Schema: CoValueClass<V>, id: ID<CoValue> | undefined | null | (() => ID<CoValue> | undefined | null), options?: {
+        resolve?: RefsToResolveStrict<V, R>;
+    });
+    subscribeTo(): void;
+    updateValue(value: Resolved<V, R> | undefined | null): void;
+    get current(): Resolved<V, R> | null | undefined;
+}
+export declare class AccountCoState<A extends Account = RegisteredAccount, R extends RefsToResolve<A> = true> {
+    #private;
+    constructor(options?: {
+        resolve?: RefsToResolveStrict<A, R>;
+    });
+    subscribeTo(): void;
+    logOut: () => void;
+    updateValue(value: Resolved<A, R> | undefined | null): void;
+    get current(): Resolved<A, R> | null | undefined;
+}

package/dist/jazz.class.svelte.js

@@ -0,0 +1,123 @@
+import { createSubscriber } from "svelte/reactivity";
+import { getJazzContext } from "./jazz.svelte.js";
+import { subscribeToCoValue } from "jazz-tools";
+export class CoState {
+    #value = undefined;
+    #subscribe;
+    #ctx = $derived(getJazzContext());
+    #update = () => { };
+    #Schema;
+    #options;
+    #id;
+    #unsubscribe = () => { };
+    constructor(Schema, id, options) {
+        this.#Schema = Schema;
+        this.#options = options;
+        this.#id = typeof id === 'function' ? id() : id;
+        this.#subscribe = createSubscriber((update) => {
+            this.#update = update;
+            // Using an effect to react to the id and ctx changes 
+            $effect.pre(() => {
+                this.#id = typeof id === 'function' ? id() : id;
+                this.subscribeTo();
+            });
+            return () => {
+                this.#unsubscribe();
+            };
+        });
+    }
+    subscribeTo() {
+        const ctx = this.#ctx;
+        const id = this.#id;
+        // Reset state when dependencies change
+        this.updateValue(undefined);
+        this.#unsubscribe();
+        if (!ctx.current || !id)
+            return;
+        const agent = "me" in ctx.current ? ctx.current.me : ctx.current.guest;
+        // Setup subscription with current values
+        this.#unsubscribe = subscribeToCoValue(this.#Schema, id, {
+            resolve: this.#options?.resolve,
+            loadAs: agent,
+            onUnavailable: () => {
+                this.updateValue(null);
+            },
+            onUnauthorized: () => {
+                this.updateValue(null);
+            },
+            syncResolution: true,
+        }, (value) => {
+            this.updateValue(value);
+        });
+    }
+    updateValue(value) {
+        if (value !== this.#value) {
+            this.#value = value;
+            this.#update();
+        }
+    }
+    get current() {
+        this.#subscribe();
+        return this.#value;
+    }
+}
+export class AccountCoState {
+    #value = undefined;
+    #subscribe;
+    #ctx = $derived(getJazzContext());
+    #update = () => { };
+    #unsubscribe = () => { };
+    #options;
+    constructor(options) {
+        this.#options = options;
+        this.#subscribe = createSubscriber((update) => {
+            this.#update = update;
+            // Using an effect to react to the ctx changes
+            $effect.pre(() => {
+                this.subscribeTo();
+            });
+            return () => {
+                this.#unsubscribe();
+            };
+        });
+    }
+    subscribeTo() {
+        const ctx = this.#ctx;
+        // Reset state when dependencies change
+        this.updateValue(undefined);
+        this.#unsubscribe();
+        if (!ctx.current)
+            return;
+        if (!('me' in ctx.current)) {
+            throw new Error("useAccount can't be used in a JazzProvider with auth === 'guest' - consider using useAccountOrGuest()");
+        }
+        const me = ctx.current.me;
+        // Setup subscription with current values
+        this.#unsubscribe = subscribeToCoValue(me.constructor, me.id, {
+            resolve: this.#options?.resolve,
+            loadAs: me,
+            onUnavailable: () => {
+                this.updateValue(null);
+            },
+            onUnauthorized: () => {
+                this.updateValue(null);
+            },
+            syncResolution: true,
+        }, (value) => {
+            this.updateValue(value);
+        });
+    }
+    logOut = () => {
+        this.#ctx.current?.logOut();
+    };
+    updateValue(value) {
+        if (value !== this.#value) {
+            this.#value = value;
+            this.#update();
+        }
+    }
+    get current() {
+        this.#subscribe();
+        return this.#value;
+    }
+}

package/dist/jazz.svelte.d.ts

@@ -46,7 +46,7 @@ export declare function useAccountOrGuest<R extends RefsToResolve<RegisteredAcco
 }): {
     me: Resolved<RegisteredAccount, R> | undefined | null | AnonymousJazzAgent;
 };
-export declare function useCoState<V extends CoValue, R extends RefsToResolve<V>>(Schema: CoValueClass<V>, id: ID<CoValue> | undefined, options?: {
+export declare function useCoState<V extends CoValue, R extends RefsToResolve<V>>(Schema: CoValueClass<V>, id: ID<CoValue> | undefined | (() => ID<CoValue> | undefined), options?: {
     resolve?: RefsToResolveStrict<V, R>;
 }): {
     current: Resolved<V, R> | undefined | null;

package/dist/jazz.svelte.js

@@ -93,12 +93,13 @@ export function useCoState(Schema, id, options) {
     $effect(() => {
         // Reset state when dependencies change
         state = undefined;
+        const idValue = typeof id === 'function' ? id() : id;
         // Return early if no context or id, effectively cleaning up any previous subscription
-        if (!ctx?.current || !id)
+        if (!ctx?.current || !idValue)
             return;
         const agent = "me" in ctx.current ? ctx.current.me : ctx.current.guest;
         // Setup subscription with current values
-        return subscribeToCoValue(Schema, id, {
+        return subscribeToCoValue(Schema, idValue, {
             resolve: options?.resolve,
             loadAs: agent,
             onUnavailable: () => {

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

@@ -0,0 +1,38 @@
+<script lang="ts" module>
+  export type Props = {
+    id: ID<Person>;
+  };
+</script>
+
+<script lang="ts">
+  import { CoState } from '../../../jazz.class.svelte.js';
+
+  import { type ID } from 'jazz-tools';
+  import { Person } from './schema.js';
+
+  let props: Props = $props();
+
+  const person = new CoState(Person, () => props.id, {
+    resolve: {
+      dog: true
+    }
+  })
+</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">{person.current!.dog.name}</div>

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

@@ -0,0 +1,8 @@
+export type Props = {
+    id: ID<Person>;
+};
+import { type ID } from 'jazz-tools';
+import { Person } from './schema.js';
+declare const UpdateNestedValue: import("svelte").Component<Props, {}, "">;
+type UpdateNestedValue = ReturnType<typeof UpdateNestedValue>;
+export default UpdateNestedValue;

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

@@ -0,0 +1,34 @@
+<script lang="ts" module>
+  export type Props = {
+    id: ID<Person>;
+  };
+</script>
+
+<script lang="ts">
+  import { AccountCoState } from '../../../jazz.class.svelte.js';
+
+  import { type ID } from 'jazz-tools';
+  import { MyAccount, Person } from './schema.js';
+
+  const person = new AccountCoState<MyAccount, { root: { dog: true } }>({
+    resolve: {
+      root: {
+        dog: true
+      }
+    }
+  });
+</script>
+
+<!-- Using non-null assertions because we want to test that locally available values are never null -->
+<label>
+  Name
+  <input type="text" bind:value={person.current!.root.name} />
+</label>
+
+<label>
+  Dog
+  <input type="text" bind:value={person.current!.root.dog.name} />
+</label>
+
+<div data-testid="person-name">{person.current!.root.name}</div>
+<div data-testid="person-dog-name">{person.current!.root.dog.name}</div>

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

@@ -0,0 +1,23 @@
+export type Props = {
+    id: ID<Person>;
+};
+import { type ID } from 'jazz-tools';
+import { Person } from './schema.js';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const UpdateNestedValueAccount: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type UpdateNestedValueAccount = InstanceType<typeof UpdateNestedValueAccount>;
+export default UpdateNestedValueAccount;

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

@@ -0,0 +1,13 @@
+import { Account, co, CoMap } from "jazz-tools";
+export declare class Dog extends CoMap {
+    name: co<string>;
+}
+export declare class Person extends CoMap {
+    name: co<string>;
+    age: co<number>;
+    dog: co<Dog | null>;
+}
+export declare class MyAccount extends Account {
+    root: co<Person | null>;
+    migrate(): void;
+}

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

@@ -0,0 +1,17 @@
+import { Account, co, CoMap } from "jazz-tools";
+export class Dog extends CoMap {
+    name = co.string;
+}
+export class Person extends CoMap {
+    name = co.string;
+    age = co.number;
+    dog = co.ref(Dog);
+}
+export class MyAccount extends Account {
+    root = co.ref(Person);
+    migrate() {
+        if (!this._refs.root) {
+            this.root = Person.create({ name: "John", age: 30, dog: Dog.create({ name: "Rex" }, this) }, this);
+        }
+    }
+}

package/dist/tests/components/ProviderTestComponent.svelte

@@ -5,7 +5,9 @@
 </script>
 
 <div data-testid="provider-test">
-  <JazzProvider {guestMode} peer="wss://cloud.jazz.tools/?key=jazz-svelte-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/useAccount.svelte

@@ -1,18 +1,20 @@
 <script lang="ts" module>
   export type Props = {
-    depth?: DepthsIn<RegisteredAccount>;
+    depth?: RefsToResolve<RegisteredAccount>;
     setResult: (result: ReturnType<typeof useAccount> | undefined) => void;
   };
 </script>
 
 <script lang="ts">
   import { useAccount, type RegisteredAccount } from '../../jazz.svelte.js';
-  import type { DepthsIn } from 'jazz-tools';
+  import type { RefsToResolve } from 'jazz-tools';
 
   let { depth, setResult }: Props = $props();
 
   if (depth) {
-    const result = $derived(useAccount(depth));
+    const result = $derived(useAccount({
+      resolve: depth
+    }));
 
     $effect(() => {
       setResult(result);

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

@@ -1,9 +1,9 @@
 export type Props = {
-    depth?: DepthsIn<RegisteredAccount>;
+    depth?: RefsToResolve<RegisteredAccount>;
     setResult: (result: ReturnType<typeof useAccount> | undefined) => void;
 };
 import { useAccount, type RegisteredAccount } from '../../jazz.svelte.js';
-import type { DepthsIn } from 'jazz-tools';
+import type { RefsToResolve } from 'jazz-tools';
 declare const UseAccount: import("svelte").Component<Props, {}, "">;
 type UseAccount = ReturnType<typeof UseAccount>;
 export default UseAccount;

package/dist/tests/components/useAccountOrGuest.svelte

@@ -1,18 +1,20 @@
 <script lang="ts" module>
   export type Props = {
-    depth?: DepthsIn<RegisteredAccount>;
+    depth?: RefsToResolve<RegisteredAccount>;
     setResult: (result: ReturnType<typeof useAccountOrGuest> | undefined) => void;
   };
 </script>
 
 <script lang="ts">
   import { useAccountOrGuest, type RegisteredAccount } from '../../jazz.svelte.js';
-  import type { DepthsIn } from 'jazz-tools';
+  import type { RefsToResolve } from 'jazz-tools';
 
   let { depth, setResult }: Props = $props();
 
   if (depth) {
-    const result = $derived(useAccountOrGuest(depth));
+    const result = $derived(useAccountOrGuest({
+      resolve: depth
+    }));
 
     $effect(() => {
       setResult(result);

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

@@ -1,9 +1,9 @@
 export type Props = {
-    depth?: DepthsIn<RegisteredAccount>;
+    depth?: RefsToResolve<RegisteredAccount>;
     setResult: (result: ReturnType<typeof useAccountOrGuest> | undefined) => void;
 };
 import { useAccountOrGuest, type RegisteredAccount } from '../../jazz.svelte.js';
-import type { DepthsIn } from 'jazz-tools';
+import type { RefsToResolve } from 'jazz-tools';
 declare const UseAccountOrGuest: import("svelte").Component<Props, {}, "">;
 type UseAccountOrGuest = ReturnType<typeof UseAccountOrGuest>;
 export default UseAccountOrGuest;

package/dist/tests/components/useCoState.svelte

@@ -2,18 +2,18 @@
   export type Props<R extends CoValue> = {
     Schema: CoValueClass<R>;
     id: ID<R>;
-    depth: DepthsIn<R>;
-    setResult: (result: R | undefined) => void;
+    resolve: RefsToResolve<R>;
+    setResult: (result: R | undefined | null) => void;
   };
 </script>
 
 <script lang="ts" generics="R extends CoValue">
   import { useCoState } from '../../jazz.svelte.js';
-  import type { CoValue, CoValueClass, DepthsIn, ID } from 'jazz-tools';
+  import type { CoValue, CoValueClass, RefsToResolve, ID } from 'jazz-tools';
 
-  let { Schema, id, depth, setResult }: Props<R> = $props();
+  let { Schema, id, resolve, setResult }: Props<R> = $props();
 
-  const result = $derived(useCoState(Schema, id, depth));
+  const result = $derived(useCoState(Schema, id, { resolve: resolve as any }));
 
   $effect(() => {
     setResult(result.current);

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

@@ -1,10 +1,10 @@
 export type Props<R extends CoValue> = {
     Schema: CoValueClass<R>;
     id: ID<R>;
-    depth: DepthsIn<R>;
-    setResult: (result: R | undefined) => void;
+    resolve: RefsToResolve<R>;
+    setResult: (result: R | undefined | null) => void;
 };
-import type { CoValue, CoValueClass, DepthsIn, ID } from 'jazz-tools';
+import type { CoValue, CoValueClass, RefsToResolve, ID } from 'jazz-tools';
 declare class __sveltets_Render<R extends CoValue> {
     props(): Props<R>;
     events(): {};

package/dist/tests/components/usePassphraseAuth.svelte

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jazz-svelte",
-  "version": "0.13.21",
+  "version": "0.13.24",
   "files": [
     "dist",
     "!dist/**/*.test.*",
@@ -49,9 +49,9 @@
     "vite": "6.0.11"
   },
   "dependencies": {
-    "cojson": "0.13.21",
-    "jazz-browser": "0.13.21",
-    "jazz-tools": "0.13.21"
+    "jazz-browser": "0.13.23",
+    "jazz-tools": "0.13.23",
+    "cojson": "0.13.23"
   },
   "scripts": {
     "dev": "vite dev",