jazz-svelte 0.13.21 → 0.13.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export { createInviteLink, parseInviteLink } from "jazz-browser";
2
2
  export * from "./auth/index.js";
3
3
  export * from "./jazz.svelte.js";
4
+ export * from "./jazz.class.svelte.js";
4
5
  export { useIsAuthenticated } from "./auth/useIsAuthenticated.svelte.js";
package/dist/index.js CHANGED
@@ -1,4 +1,5 @@
1
1
  export { createInviteLink, parseInviteLink } from "jazz-browser";
2
2
  export * from "./auth/index.js";
3
3
  export * from "./jazz.svelte.js";
4
+ export * from "./jazz.class.svelte.js";
4
5
  export { useIsAuthenticated } from "./auth/useIsAuthenticated.svelte.js";
@@ -0,0 +1,20 @@
1
+ import type { Account, CoValue, CoValueClass, ID, RefsToResolve, RefsToResolveStrict, RegisteredAccount, Resolved } from "jazz-tools";
2
+ export declare class CoState<V extends CoValue, R extends RefsToResolve<V> = true> {
3
+ #private;
4
+ constructor(Schema: CoValueClass<V>, id: ID<CoValue> | undefined | null | (() => ID<CoValue> | undefined | null), options?: {
5
+ resolve?: RefsToResolveStrict<V, R>;
6
+ });
7
+ subscribeTo(): void;
8
+ updateValue(value: Resolved<V, R> | undefined | null): void;
9
+ get current(): Resolved<V, R> | null | undefined;
10
+ }
11
+ export declare class AccountCoState<A extends Account = RegisteredAccount, R extends RefsToResolve<A> = true> {
12
+ #private;
13
+ constructor(options?: {
14
+ resolve?: RefsToResolveStrict<A, R>;
15
+ });
16
+ subscribeTo(): void;
17
+ logOut: () => void;
18
+ updateValue(value: Resolved<A, R> | undefined | null): void;
19
+ get current(): Resolved<A, R> | null | undefined;
20
+ }
@@ -0,0 +1,123 @@
1
+ import { createSubscriber } from "svelte/reactivity";
2
+ import { getJazzContext } from "./jazz.svelte.js";
3
+ import { subscribeToCoValue } from "jazz-tools";
4
+ export class CoState {
5
+ #value = undefined;
6
+ #subscribe;
7
+ #ctx = $derived(getJazzContext());
8
+ #update = () => { };
9
+ #Schema;
10
+ #options;
11
+ #id;
12
+ #unsubscribe = () => { };
13
+ constructor(Schema, id, options) {
14
+ this.#Schema = Schema;
15
+ this.#options = options;
16
+ this.#id = typeof id === 'function' ? id() : id;
17
+ this.#subscribe = createSubscriber((update) => {
18
+ this.#update = update;
19
+ // Using an effect to react to the id and ctx changes
20
+ $effect.pre(() => {
21
+ this.#id = typeof id === 'function' ? id() : id;
22
+ this.subscribeTo();
23
+ });
24
+ return () => {
25
+ this.#unsubscribe();
26
+ };
27
+ });
28
+ }
29
+ subscribeTo() {
30
+ const ctx = this.#ctx;
31
+ const id = this.#id;
32
+ // Reset state when dependencies change
33
+ this.updateValue(undefined);
34
+ this.#unsubscribe();
35
+ if (!ctx.current || !id)
36
+ return;
37
+ const agent = "me" in ctx.current ? ctx.current.me : ctx.current.guest;
38
+ // Setup subscription with current values
39
+ this.#unsubscribe = subscribeToCoValue(this.#Schema, id, {
40
+ resolve: this.#options?.resolve,
41
+ loadAs: agent,
42
+ onUnavailable: () => {
43
+ this.updateValue(null);
44
+ },
45
+ onUnauthorized: () => {
46
+ this.updateValue(null);
47
+ },
48
+ syncResolution: true,
49
+ }, (value) => {
50
+ this.updateValue(value);
51
+ });
52
+ }
53
+ updateValue(value) {
54
+ if (value !== this.#value) {
55
+ this.#value = value;
56
+ this.#update();
57
+ }
58
+ }
59
+ get current() {
60
+ this.#subscribe();
61
+ return this.#value;
62
+ }
63
+ }
64
+ export class AccountCoState {
65
+ #value = undefined;
66
+ #subscribe;
67
+ #ctx = $derived(getJazzContext());
68
+ #update = () => { };
69
+ #unsubscribe = () => { };
70
+ #options;
71
+ constructor(options) {
72
+ this.#options = options;
73
+ this.#subscribe = createSubscriber((update) => {
74
+ this.#update = update;
75
+ // Using an effect to react to the ctx changes
76
+ $effect.pre(() => {
77
+ this.subscribeTo();
78
+ });
79
+ return () => {
80
+ this.#unsubscribe();
81
+ };
82
+ });
83
+ }
84
+ subscribeTo() {
85
+ const ctx = this.#ctx;
86
+ // Reset state when dependencies change
87
+ this.updateValue(undefined);
88
+ this.#unsubscribe();
89
+ if (!ctx.current)
90
+ return;
91
+ if (!('me' in ctx.current)) {
92
+ throw new Error("useAccount can't be used in a JazzProvider with auth === 'guest' - consider using useAccountOrGuest()");
93
+ }
94
+ const me = ctx.current.me;
95
+ // Setup subscription with current values
96
+ this.#unsubscribe = subscribeToCoValue(me.constructor, me.id, {
97
+ resolve: this.#options?.resolve,
98
+ loadAs: me,
99
+ onUnavailable: () => {
100
+ this.updateValue(null);
101
+ },
102
+ onUnauthorized: () => {
103
+ this.updateValue(null);
104
+ },
105
+ syncResolution: true,
106
+ }, (value) => {
107
+ this.updateValue(value);
108
+ });
109
+ }
110
+ logOut = () => {
111
+ this.#ctx.current?.logOut();
112
+ };
113
+ updateValue(value) {
114
+ if (value !== this.#value) {
115
+ this.#value = value;
116
+ this.#update();
117
+ }
118
+ }
119
+ get current() {
120
+ this.#subscribe();
121
+ return this.#value;
122
+ }
123
+ }
@@ -46,7 +46,7 @@ export declare function useAccountOrGuest<R extends RefsToResolve<RegisteredAcco
46
46
  }): {
47
47
  me: Resolved<RegisteredAccount, R> | undefined | null | AnonymousJazzAgent;
48
48
  };
49
- export declare function useCoState<V extends CoValue, R extends RefsToResolve<V>>(Schema: CoValueClass<V>, id: ID<CoValue> | undefined, options?: {
49
+ export declare function useCoState<V extends CoValue, R extends RefsToResolve<V>>(Schema: CoValueClass<V>, id: ID<CoValue> | undefined | (() => ID<CoValue> | undefined), options?: {
50
50
  resolve?: RefsToResolveStrict<V, R>;
51
51
  }): {
52
52
  current: Resolved<V, R> | undefined | null;
@@ -93,12 +93,13 @@ export function useCoState(Schema, id, options) {
93
93
  $effect(() => {
94
94
  // Reset state when dependencies change
95
95
  state = undefined;
96
+ const idValue = typeof id === 'function' ? id() : id;
96
97
  // Return early if no context or id, effectively cleaning up any previous subscription
97
- if (!ctx?.current || !id)
98
+ if (!ctx?.current || !idValue)
98
99
  return;
99
100
  const agent = "me" in ctx.current ? ctx.current.me : ctx.current.guest;
100
101
  // Setup subscription with current values
101
- return subscribeToCoValue(Schema, id, {
102
+ return subscribeToCoValue(Schema, idValue, {
102
103
  resolve: options?.resolve,
103
104
  loadAs: agent,
104
105
  onUnavailable: () => {
@@ -0,0 +1,38 @@
1
+ <script lang="ts" module>
2
+ export type Props = {
3
+ id: ID<Person>;
4
+ };
5
+ </script>
6
+
7
+ <script lang="ts">
8
+ import { CoState } from '../../../jazz.class.svelte.js';
9
+
10
+ import { type ID } from 'jazz-tools';
11
+ import { Person } from './schema.js';
12
+
13
+ let props: Props = $props();
14
+
15
+ const person = new CoState(Person, () => props.id, {
16
+ resolve: {
17
+ dog: true
18
+ }
19
+ })
20
+ </script>
21
+
22
+ <!-- Using non-null assertions because we want to test that locally available values are never null -->
23
+ <label>
24
+ Name
25
+ <!-- Jazz values are reactive, but they are not recognized as reactive by Svelte -->
26
+ <!-- svelte-ignore binding_property_non_reactive -->
27
+ <input type="text" bind:value={person.current!.name} />
28
+ </label>
29
+
30
+ <label>
31
+ Dog
32
+ <!-- Jazz values are reactive, but they are not recognized as reactive by Svelte -->
33
+ <!-- svelte-ignore binding_property_non_reactive -->
34
+ <input type="text" bind:value={person.current!.dog.name} />
35
+ </label>
36
+
37
+ <div data-testid="person-name">{person.current!.name}</div>
38
+ <div data-testid="person-dog-name">{person.current!.dog.name}</div>
@@ -0,0 +1,8 @@
1
+ export type Props = {
2
+ id: ID<Person>;
3
+ };
4
+ import { type ID } from 'jazz-tools';
5
+ import { Person } from './schema.js';
6
+ declare const UpdateNestedValue: import("svelte").Component<Props, {}, "">;
7
+ type UpdateNestedValue = ReturnType<typeof UpdateNestedValue>;
8
+ export default UpdateNestedValue;
@@ -0,0 +1,34 @@
1
+ <script lang="ts" module>
2
+ export type Props = {
3
+ id: ID<Person>;
4
+ };
5
+ </script>
6
+
7
+ <script lang="ts">
8
+ import { AccountCoState } from '../../../jazz.class.svelte.js';
9
+
10
+ import { type ID } from 'jazz-tools';
11
+ import { MyAccount, Person } from './schema.js';
12
+
13
+ const person = new AccountCoState<MyAccount, { root: { dog: true } }>({
14
+ resolve: {
15
+ root: {
16
+ dog: true
17
+ }
18
+ }
19
+ });
20
+ </script>
21
+
22
+ <!-- Using non-null assertions because we want to test that locally available values are never null -->
23
+ <label>
24
+ Name
25
+ <input type="text" bind:value={person.current!.root.name} />
26
+ </label>
27
+
28
+ <label>
29
+ Dog
30
+ <input type="text" bind:value={person.current!.root.dog.name} />
31
+ </label>
32
+
33
+ <div data-testid="person-name">{person.current!.root.name}</div>
34
+ <div data-testid="person-dog-name">{person.current!.root.dog.name}</div>
@@ -0,0 +1,23 @@
1
+ export type Props = {
2
+ id: ID<Person>;
3
+ };
4
+ import { type ID } from 'jazz-tools';
5
+ import { Person } from './schema.js';
6
+ 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> {
7
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
8
+ $$bindings?: Bindings;
9
+ } & Exports;
10
+ (internal: unknown, props: {
11
+ $$events?: Events;
12
+ $$slots?: Slots;
13
+ }): Exports & {
14
+ $set?: any;
15
+ $on?: any;
16
+ };
17
+ z_$$bindings?: Bindings;
18
+ }
19
+ declare const UpdateNestedValueAccount: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
20
+ [evt: string]: CustomEvent<any>;
21
+ }, {}, {}, string>;
22
+ type UpdateNestedValueAccount = InstanceType<typeof UpdateNestedValueAccount>;
23
+ export default UpdateNestedValueAccount;
@@ -0,0 +1,13 @@
1
+ import { Account, co, CoMap } from "jazz-tools";
2
+ export declare class Dog extends CoMap {
3
+ name: co<string>;
4
+ }
5
+ export declare class Person extends CoMap {
6
+ name: co<string>;
7
+ age: co<number>;
8
+ dog: co<Dog | null>;
9
+ }
10
+ export declare class MyAccount extends Account {
11
+ root: co<Person | null>;
12
+ migrate(): void;
13
+ }
@@ -0,0 +1,17 @@
1
+ import { Account, co, CoMap } from "jazz-tools";
2
+ export class Dog extends CoMap {
3
+ name = co.string;
4
+ }
5
+ export class Person extends CoMap {
6
+ name = co.string;
7
+ age = co.number;
8
+ dog = co.ref(Dog);
9
+ }
10
+ export class MyAccount extends Account {
11
+ root = co.ref(Person);
12
+ migrate() {
13
+ if (!this._refs.root) {
14
+ this.root = Person.create({ name: "John", age: 30, dog: Dog.create({ name: "Rex" }, this) }, this);
15
+ }
16
+ }
17
+ }
@@ -5,7 +5,9 @@
5
5
  </script>
6
6
 
7
7
  <div data-testid="provider-test">
8
- <JazzProvider {guestMode} peer="wss://cloud.jazz.tools/?key=jazz-svelte-test">
8
+ <JazzProvider {guestMode} sync={{
9
+ peer: "wss://cloud.jazz.tools/?key=jazz-svelte-test"
10
+ }}>
9
11
  <span data-testid="provider-auth-test">Hello</span>
10
12
  </JazzProvider>
11
13
  </div>
@@ -1,18 +1,20 @@
1
1
  <script lang="ts" module>
2
2
  export type Props = {
3
- depth?: DepthsIn<RegisteredAccount>;
3
+ depth?: RefsToResolve<RegisteredAccount>;
4
4
  setResult: (result: ReturnType<typeof useAccount> | undefined) => void;
5
5
  };
6
6
  </script>
7
7
 
8
8
  <script lang="ts">
9
9
  import { useAccount, type RegisteredAccount } from '../../jazz.svelte.js';
10
- import type { DepthsIn } from 'jazz-tools';
10
+ import type { RefsToResolve } from 'jazz-tools';
11
11
 
12
12
  let { depth, setResult }: Props = $props();
13
13
 
14
14
  if (depth) {
15
- const result = $derived(useAccount(depth));
15
+ const result = $derived(useAccount({
16
+ resolve: depth
17
+ }));
16
18
 
17
19
  $effect(() => {
18
20
  setResult(result);
@@ -1,9 +1,9 @@
1
1
  export type Props = {
2
- depth?: DepthsIn<RegisteredAccount>;
2
+ depth?: RefsToResolve<RegisteredAccount>;
3
3
  setResult: (result: ReturnType<typeof useAccount> | undefined) => void;
4
4
  };
5
5
  import { useAccount, type RegisteredAccount } from '../../jazz.svelte.js';
6
- import type { DepthsIn } from 'jazz-tools';
6
+ import type { RefsToResolve } from 'jazz-tools';
7
7
  declare const UseAccount: import("svelte").Component<Props, {}, "">;
8
8
  type UseAccount = ReturnType<typeof UseAccount>;
9
9
  export default UseAccount;
@@ -1,18 +1,20 @@
1
1
  <script lang="ts" module>
2
2
  export type Props = {
3
- depth?: DepthsIn<RegisteredAccount>;
3
+ depth?: RefsToResolve<RegisteredAccount>;
4
4
  setResult: (result: ReturnType<typeof useAccountOrGuest> | undefined) => void;
5
5
  };
6
6
  </script>
7
7
 
8
8
  <script lang="ts">
9
9
  import { useAccountOrGuest, type RegisteredAccount } from '../../jazz.svelte.js';
10
- import type { DepthsIn } from 'jazz-tools';
10
+ import type { RefsToResolve } from 'jazz-tools';
11
11
 
12
12
  let { depth, setResult }: Props = $props();
13
13
 
14
14
  if (depth) {
15
- const result = $derived(useAccountOrGuest(depth));
15
+ const result = $derived(useAccountOrGuest({
16
+ resolve: depth
17
+ }));
16
18
 
17
19
  $effect(() => {
18
20
  setResult(result);
@@ -1,9 +1,9 @@
1
1
  export type Props = {
2
- depth?: DepthsIn<RegisteredAccount>;
2
+ depth?: RefsToResolve<RegisteredAccount>;
3
3
  setResult: (result: ReturnType<typeof useAccountOrGuest> | undefined) => void;
4
4
  };
5
5
  import { useAccountOrGuest, type RegisteredAccount } from '../../jazz.svelte.js';
6
- import type { DepthsIn } from 'jazz-tools';
6
+ import type { RefsToResolve } from 'jazz-tools';
7
7
  declare const UseAccountOrGuest: import("svelte").Component<Props, {}, "">;
8
8
  type UseAccountOrGuest = ReturnType<typeof UseAccountOrGuest>;
9
9
  export default UseAccountOrGuest;
@@ -2,18 +2,18 @@
2
2
  export type Props<R extends CoValue> = {
3
3
  Schema: CoValueClass<R>;
4
4
  id: ID<R>;
5
- depth: DepthsIn<R>;
6
- setResult: (result: R | undefined) => void;
5
+ resolve: RefsToResolve<R>;
6
+ setResult: (result: R | undefined | null) => void;
7
7
  };
8
8
  </script>
9
9
 
10
10
  <script lang="ts" generics="R extends CoValue">
11
11
  import { useCoState } from '../../jazz.svelte.js';
12
- import type { CoValue, CoValueClass, DepthsIn, ID } from 'jazz-tools';
12
+ import type { CoValue, CoValueClass, RefsToResolve, ID } from 'jazz-tools';
13
13
 
14
- let { Schema, id, depth, setResult }: Props<R> = $props();
14
+ let { Schema, id, resolve, setResult }: Props<R> = $props();
15
15
 
16
- const result = $derived(useCoState(Schema, id, depth));
16
+ const result = $derived(useCoState(Schema, id, { resolve: resolve as any }));
17
17
 
18
18
  $effect(() => {
19
19
  setResult(result.current);
@@ -1,10 +1,10 @@
1
1
  export type Props<R extends CoValue> = {
2
2
  Schema: CoValueClass<R>;
3
3
  id: ID<R>;
4
- depth: DepthsIn<R>;
5
- setResult: (result: R | undefined) => void;
4
+ resolve: RefsToResolve<R>;
5
+ setResult: (result: R | undefined | null) => void;
6
6
  };
7
- import type { CoValue, CoValueClass, DepthsIn, ID } from 'jazz-tools';
7
+ import type { CoValue, CoValueClass, RefsToResolve, ID } from 'jazz-tools';
8
8
  declare class __sveltets_Render<R extends CoValue> {
9
9
  props(): Props<R>;
10
10
  events(): {};
@@ -1,18 +1,25 @@
1
1
  <script lang="ts">
2
- import { usePassphraseAuth } from "../../auth/PassphraseAuth.svelte.js";
2
+ import { usePassphraseAuth } from '../../auth/PassphraseAuth.svelte.js';
3
3
 
4
- let { wordlist, setResult }: { wordlist: string[]; setResult: (value: ReturnType<typeof usePassphraseAuth>) => void } = $props();
4
+ let {
5
+ wordlist,
6
+ setResult
7
+ }: { wordlist: string[]; setResult: (value: Result) => void } = $props();
5
8
 
6
9
  const auth = usePassphraseAuth({ wordlist });
7
-
10
+
11
+ const result = $derived({
12
+ state: auth.state,
13
+ passphrase: auth.passphrase,
14
+ logIn: auth.logIn,
15
+ signUp: auth.signUp
16
+ });
17
+
18
+ type Result = typeof result;
19
+
8
20
  $effect(() => {
9
- setResult({
10
- state: auth.state,
11
- passphrase: auth.passphrase,
12
- logIn: auth.logIn,
13
- signUp: auth.signUp
14
- });
21
+ setResult(result);
15
22
  });
16
23
  </script>
17
24
 
18
- <div>Test Component</div>
25
+ <div>Test Component</div>
@@ -1,7 +1,11 @@
1
- import { usePassphraseAuth } from "../../auth/PassphraseAuth.svelte.js";
2
1
  declare const UsePassphraseAuth: import("svelte").Component<{
3
2
  wordlist: string[];
4
- setResult: (value: ReturnType<typeof usePassphraseAuth>) => void;
3
+ setResult: (value: {
4
+ state: string;
5
+ passphrase: string;
6
+ logIn: (passphrase: string) => Promise<void>;
7
+ signUp: (name?: string) => Promise<string>;
8
+ }) => void;
5
9
  }, {}, "">;
6
10
  type UsePassphraseAuth = ReturnType<typeof UsePassphraseAuth>;
7
11
  export default UsePassphraseAuth;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "jazz-svelte",
3
- "version": "0.13.21",
3
+ "version": "0.13.24",
4
4
  "files": [
5
5
  "dist",
6
6
  "!dist/**/*.test.*",
@@ -49,9 +49,9 @@
49
49
  "vite": "6.0.11"
50
50
  },
51
51
  "dependencies": {
52
- "cojson": "0.13.21",
53
- "jazz-browser": "0.13.21",
54
- "jazz-tools": "0.13.21"
52
+ "jazz-browser": "0.13.23",
53
+ "jazz-tools": "0.13.23",
54
+ "cojson": "0.13.23"
55
55
  },
56
56
  "scripts": {
57
57
  "dev": "vite dev",