jazz-vue 0.8.10 → 0.8.12

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # jazz-react
 
+## 0.8.12
+
+### Patch Changes
+
+- a734530: fix useCoState reactivity
+- Updated dependencies [f6bc8af]
+  - jazz-browser@0.8.22
+
+## 0.8.11
+
+### Patch Changes
+
+- Updated dependencies [0f30eea]
+- Updated dependencies [149ca97]
+  - cojson@0.8.21
+  - jazz-tools@0.8.21
+  - jazz-browser@0.8.21
+
 ## 0.8.10
 
 ### Patch Changes

package/dist/createJazzVueApp.d.ts

@@ -1,5 +1,5 @@
 import { Account, AnonymousJazzAgent, CoValue, CoValueClass, DeeplyLoaded, DepthsIn, ID } from 'jazz-tools';
-import { Component, ComputedRef, Ref } from 'vue';
+import { Component, ComputedRef, MaybeRef, Ref } from 'vue';
 export declare const logoutHandler: Ref<(() => void) | undefined, (() => void) | undefined>;
 export interface JazzVueApp<Acc extends Account> {
     JazzProvider: Component;
@@ -17,7 +17,7 @@ export interface JazzVueApp<Acc extends Account> {
     useAccountOrGuest<D extends DepthsIn<Acc>>(depth: D): {
         me: ComputedRef<DeeplyLoaded<Acc, D> | undefined | AnonymousJazzAgent>;
     };
-    useCoState<V extends CoValue, D>(Schema: CoValueClass<V>, id: ID<V> | undefined, depth?: D & DepthsIn<V>): Ref<DeeplyLoaded<V, D> | undefined>;
+    useCoState<V extends CoValue, D>(Schema: CoValueClass<V>, id: MaybeRef<ID<V> | undefined>, depth?: D & DepthsIn<V>): Ref<DeeplyLoaded<V, D> | undefined>;
     useAcceptInvite<V extends CoValue>(args: {
         invitedObjectSchema: CoValueClass<V>;
         onAccept: (projectID: ID<V>) => void;

package/dist/index.js

@@ -1,11 +1,11 @@
-import { createJazzBrowserContext as D, consumeInviteLinkFromWindowLocation as _, BrowserDemoAuth as B } from "jazz-browser";
-import { Account as j, subscribeToCoValue as T } from "jazz-tools";
-import { ref as y, defineComponent as R, provide as V, onMounted as P, watch as A, onUnmounted as I, computed as v, toRaw as b, shallowRef as M, inject as N, reactive as $, openBlock as g, createElementBlock as f, normalizeStyle as w, Fragment as k, createElementVNode as x, toDisplayString as C, renderList as E, withModifiers as F, withDirectives as G, vModelText as W, createCommentVNode as L, toRef as q, renderSlot as H, unref as J } from "vue";
-const S = y(), O = Symbol("JazzContext");
+import { createJazzBrowserContext as D, consumeInviteLinkFromWindowLocation as M, BrowserDemoAuth as _ } from "jazz-browser";
+import { Account as B, subscribeToCoValue as V } from "jazz-tools";
+import { ref as z, defineComponent as R, provide as j, onMounted as P, watch as I, onUnmounted as k, computed as v, toRaw as w, shallowRef as T, unref as S, inject as N, reactive as $, openBlock as g, createElementBlock as f, normalizeStyle as y, Fragment as C, createElementVNode as x, toDisplayString as J, renderList as E, withModifiers as F, withDirectives as G, vModelText as W, createCommentVNode as L, toRef as q, renderSlot as H } from "vue";
+const A = z(), O = Symbol("JazzContext");
 function te({
-  AccountSchema: p = j
+  AccountSchema: p = B
 } = {}) {
-  const i = R({
+  const u = R({
     name: "JazzProvider",
     props: {
       auth: {
@@ -21,28 +21,28 @@ function te({
         default: void 0
       }
     },
-    setup(r, { slots: o }) {
-      const t = y(
+    setup(t, { slots: o }) {
+      const r = z(
         void 0
-      ), n = y(0);
-      V(O, t);
-      const s = async () => {
-        var e, u;
-        t.value && ((u = (e = t.value).done) == null || u.call(e), t.value = void 0);
+      ), a = z(0);
+      j(O, r);
+      const n = async () => {
+        var e, s;
+        r.value && ((s = (e = r.value).done) == null || s.call(e), r.value = void 0);
         try {
           const m = await D(
-            r.auth === "guest" ? { peer: r.peer, storage: r.storage } : {
+            t.auth === "guest" ? { peer: t.peer, storage: t.storage } : {
               AccountSchema: p,
-              auth: r.auth,
-              peer: r.peer,
-              storage: r.storage
+              auth: t.auth,
+              peer: t.peer,
+              storage: t.storage
             }
           );
-          t.value = {
+          r.value = {
             ...m,
             logOut: () => {
-              var z;
-              (z = S.value) == null || z.call(S), n.value += 1;
+              var b;
+              (b = A.value) == null || b.call(A), a.value += 1;
             }
           };
         } catch (m) {
@@ -50,28 +50,29 @@ function te({
         }
       };
       return P(() => {
-        s();
-      }), A(
-        () => n.value,
+        n();
+      }), I(
+        () => a.value,
         async () => {
-          await s();
+          await n();
         }
-      ), I(() => {
-        var e, u;
-        t.value && ((u = (e = t.value).done) == null || u.call(e));
+      ), k(() => {
+        var e, s;
+        r.value && ((s = (e = r.value).done) == null || s.call(e));
       }), () => {
         var e;
-        return t.value ? (e = o.default) == null ? void 0 : e.call(o) : null;
+        return r.value ? (e = o.default) == null ? void 0 : e.call(o) : null;
       };
     }
   });
   function l() {
-    const r = N(O);
-    if (!r)
+    const t = N(O);
+    if (!t)
       throw new Error("useJazzContext must be used within a JazzProvider");
-    return r;
+    return t;
   }
-  function a(r) {
+  function i(t) {
+    var n, e;
     const o = l();
     if (!o.value)
       throw new Error("useAccount must be used within a JazzProvider");
@@ -79,136 +80,143 @@ function te({
       throw new Error(
         "useAccount can't be used in a JazzProvider with auth === 'guest' - consider using useAccountOrGuest()"
       );
-    const t = d(
-      o.value.me.constructor,
-      o.value.me.id,
-      r
+    const r = v(
+      () => "me" in o.value ? o.value.me : void 0
+    ), a = d(
+      (n = r.value) == null ? void 0 : n.constructor,
+      (e = r.value) == null ? void 0 : e.id,
+      t
     );
     return {
       me: v(() => {
-        const n = r === void 0 ? t.value || b(o.value.me) : t.value;
-        return n && b(n);
+        const s = t === void 0 ? a.value || w(o.value.me) : a.value;
+        return s && w(s);
       }),
       logOut: o.value.logOut
     };
   }
-  function c(r) {
+  function c(t) {
+    var n, e;
     const o = l();
     if (!o.value)
       throw new Error("useAccountOrGuest must be used within a JazzProvider");
-    const t = "me" in o.value ? o.value.me : void 0, n = d(
-      t == null ? void 0 : t.constructor,
-      t == null ? void 0 : t.id,
-      r
+    const r = v(
+      () => "me" in o.value ? o.value.me : void 0
+    ), a = d(
+      (n = r.value) == null ? void 0 : n.constructor,
+      (e = r.value) == null ? void 0 : e.id,
+      t
     );
     return "me" in o.value ? {
       me: v(
-        () => r === void 0 ? n.value || b(o.value.me) : n.value
+        () => t === void 0 ? a.value || w(o.value.me) : a.value
       )
     } : {
-      me: v(() => b(o.value.guest))
+      me: v(() => w(o.value.guest))
     };
   }
-  function d(r, o, t = []) {
-    const n = M(void 0), s = l();
-    if (!s.value)
+  function d(t, o, r = []) {
+    const a = T(void 0), n = l();
+    if (!n.value)
       throw new Error("useCoState must be used within a JazzProvider");
     let e;
-    return A(
-      [() => o, () => s, () => r, () => t],
+    return I(
+      [() => S(o), () => n, () => t, () => r],
       () => {
-        e && e(), o && (e = T(
-          r,
-          o,
-          "me" in s.value ? b(s.value.me) : b(s.value.guest),
+        e && e();
+        const m = S(o);
+        m && (e = V(
           t,
-          (m) => {
-            n.value = m;
+          m,
+          "me" in n.value ? w(n.value.me) : w(n.value.guest),
+          r,
+          (b) => {
+            a.value = b;
           }
         ));
       },
-      { immediate: !0 }
-    ), I(() => {
+      { deep: !0, immediate: !0 }
+    ), k(() => {
       e && e();
-    }), v(() => n.value);
+    }), v(() => a.value);
   }
   function h({
-    invitedObjectSchema: r,
+    invitedObjectSchema: t,
     onAccept: o,
-    forValueHint: t
+    forValueHint: r
   }) {
-    const n = l();
-    if (!n.value)
+    const a = l();
+    if (!a.value)
       throw new Error("useAcceptInvite must be used within a JazzProvider");
-    if (!("me" in n.value))
+    if (!("me" in a.value))
       throw new Error(
         "useAcceptInvite can't be used in a JazzProvider with auth === 'guest'."
       );
-    const s = () => {
-      _({
-        as: b(n.value.me),
-        invitedObjectSchema: r,
-        forValueHint: t
-      }).then((u) => u && o(u.valueID)).catch((u) => {
-        console.error("Failed to accept invite", u);
+    const n = () => {
+      M({
+        as: w(a.value.me),
+        invitedObjectSchema: t,
+        forValueHint: r
+      }).then((s) => s && o(s.valueID)).catch((s) => {
+        console.error("Failed to accept invite", s);
       });
     };
     P(() => {
-      s();
-    }), A(
+      n();
+    }), I(
       () => o,
-      (e, u) => {
-        e !== u && s();
+      (e, s) => {
+        e !== s && n();
       }
     );
   }
   return {
-    JazzProvider: i,
-    useAccount: a,
+    JazzProvider: u,
+    useAccount: i,
     useAccountOrGuest: c,
     useCoState: d,
     useAcceptInvite: h
   };
 }
-function re({
+function oe({
   seedAccounts: p
 } = {}) {
-  const i = $({
+  const u = $({
     state: "loading",
     errors: []
-  }), l = y(
-    new B(
+  }), l = z(
+    new _(
       {
-        onReady: ({ signUp: a, existingUsers: c, logInAs: d }) => {
-          i.state = "ready", i.signUp = a, i.existingUsers = c, i.logInAs = d, i.errors = [];
+        onReady: ({ signUp: i, existingUsers: c, logInAs: d }) => {
+          u.state = "ready", u.signUp = i, u.existingUsers = c, u.logInAs = d, u.errors = [];
         },
-        onSignedIn: ({ logOut: a }) => {
-          i.state = "signedIn", i.logOut = () => {
-            a(), i.state = "ready", i.errors = [];
-          }, i.errors = [], S.value = i.logOut;
+        onSignedIn: ({ logOut: i }) => {
+          u.state = "signedIn", u.logOut = () => {
+            i(), u.state = "ready", u.errors = [];
+          }, u.errors = [], A.value = u.logOut;
         },
-        onError: (a) => {
-          i.errors.push(a.toString());
+        onError: (i) => {
+          u.errors.push(i.toString());
         }
       },
       p
     )
   );
-  return I(() => {
-    i.state === "signedIn" && (S.value = void 0);
-  }), { authMethod: l, state: i };
+  return k(() => {
+    u.state === "signedIn" && (A.value = void 0);
+  }), { authMethod: l, state: u };
 }
 const K = { key: 0 }, Q = {
   key: 0,
   style: { display: "flex", "flex-direction": "column", gap: "0.5rem" }
-}, X = ["onClick", "aria-label"], oe = /* @__PURE__ */ R({
+}, X = ["onClick", "aria-label"], re = /* @__PURE__ */ R({
   __name: "DemoAuthBasicUI",
   props: {
     appName: {},
     state: {}
   },
   setup(p) {
-    const i = p, l = y(""), a = v(
+    const u = p, l = z(""), i = v(
       () => window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
     ), c = v(() => ({
       minHeight: "100vh",
@@ -221,77 +229,77 @@ const K = { key: 0 }, Q = {
       maxWidth: "100vw",
       gap: "2rem",
       margin: "0",
-      ...a.value ? { background: "#000" } : {}
+      ...i.value ? { background: "#000" } : {}
     })), d = v(() => ({
-      border: a.value ? "2px solid #444" : "2px solid #ddd",
+      border: i.value ? "2px solid #444" : "2px solid #ddd",
       padding: "11px 8px",
       borderRadius: "6px",
-      background: a.value ? "#000" : "#fff",
-      color: a.value ? "#fff" : "#000"
+      background: i.value ? "#000" : "#fff",
+      color: i.value ? "#fff" : "#000"
     })), h = v(() => ({
       padding: "13px 5px",
       border: "none",
       borderRadius: "6px",
       cursor: "pointer",
-      background: a.value ? "#444" : "#ddd",
-      color: a.value ? "#fff" : "#000"
-    })), r = v(() => ({
-      background: a.value ? "#0d0d0d" : "#eee",
-      color: a.value ? "#fff" : "#000",
+      background: i.value ? "#444" : "#ddd",
+      color: i.value ? "#fff" : "#000"
+    })), t = v(() => ({
+      background: i.value ? "#0d0d0d" : "#eee",
+      color: i.value ? "#fff" : "#000",
       padding: "0.5rem",
       border: "none",
       borderRadius: "6px"
     })), o = () => {
-      i.state.signUp(l.value), l.value = "";
-    }, t = (n) => {
-      i.state.logInAs(n);
+      u.state.signUp(l.value), l.value = "";
+    }, r = (a) => {
+      u.state.logInAs(a);
     };
-    return (n, s) => (g(), f("div", {
-      style: w(c.value)
+    return (a, n) => (g(), f("div", {
+      style: y(c.value)
     }, [
-      n.state.state === "loading" ? (g(), f("div", K, "Loading...")) : n.state.state === "ready" ? (g(), f(k, { key: 1 }, [
+      a.state.state === "loading" ? (g(), f("div", K, "Loading...")) : a.state.state === "ready" ? (g(), f(C, { key: 1 }, [
         x("h1", {
-          style: w({ color: a.value ? "#fff" : "#000", textAlign: "center" })
-        }, C(n.appName), 5),
-        (g(!0), f(k, null, E(n.state.errors, (e) => (g(), f("div", {
+          style: y({ color: i.value ? "#fff" : "#000", textAlign: "center" })
+        }, J(a.appName), 5),
+        (g(!0), f(C, null, E(a.state.errors, (e) => (g(), f("div", {
           key: e,
           style: { color: "red" }
-        }, C(e), 1))), 128)),
+        }, J(e), 1))), 128)),
         x("form", {
           onSubmit: F(o, ["prevent"]),
           style: { display: "flex", "flex-direction": "column", gap: "0.5rem" }
         }, [
           G(x("input", {
-            "onUpdate:modelValue": s[0] || (s[0] = (e) => l.value = e),
+            "onUpdate:modelValue": n[0] || (n[0] = (e) => l.value = e),
             placeholder: "Display name",
             autoComplete: "webauthn",
-            style: w(d.value)
+            style: y(d.value)
           }, null, 4), [
             [W, l.value]
           ]),
           x("input", {
             type: "submit",
             value: "Sign up",
-            style: w(h.value)
+            style: y(h.value)
           }, null, 4)
         ], 32),
-        n.state.existingUsers.length > 0 ? (g(), f("div", Q, [
+        a.state.existingUsers.length > 0 ? (g(), f("div", Q, [
           x("p", {
-            style: w({
-              color: a.value ? "#e2e2e2" : "#000",
+            style: y({
+              color: i.value ? "#e2e2e2" : "#000",
               textAlign: "center",
               paddingTop: "0.5rem",
               borderTop: "1px solid",
-              borderColor: a.value ? "#111" : "#e2e2e2"
+              borderColor: i.value ? "#111" : "#e2e2e2"
             })
           }, " Log in as ", 4),
-          (g(!0), f(k, null, E(n.state.existingUsers, (e) => (g(), f("button", {
+          (g(!0), f(C, null, E(a.state.existingUsers, (e) => (g(), f("button", {
             key: e,
-            onClick: (u) => t(e),
+            onClick: (s) => r(e),
             type: "button",
             "aria-label": `Log in as ${e}`,
-            style: w(r.value)
-          }, C(e), 13, X))), 128))
+            style: y(t.value)
+          }, J(e), 13, X))), 128))
         ])) : L("", !0)
       ], 64)) : L("", !0)
     ], 4));
@@ -303,59 +311,59 @@ const K = { key: 0 }, Q = {
     maxWidth: {}
   },
   setup(p) {
-    function i(c, d) {
-      const h = y({});
-      let r;
-      const o = A(
+    function u(c, d) {
+      const h = z({});
+      let t;
+      const o = I(
         () => {
-          var t;
-          return [(t = c.value) == null ? void 0 : t.id, d];
+          var r;
+          return [(r = c.value) == null ? void 0 : r.id, d];
         },
         () => {
-          let t;
-          return c.value ? c.value.subscribe({}, (s) => {
-            var u, m;
-            const e = s == null ? void 0 : s.highestResAvailable({ maxWidth: d });
+          let r;
+          return c.value ? c.value.subscribe({}, (n) => {
+            var s, m;
+            const e = n == null ? void 0 : n.highestResAvailable({ maxWidth: d });
             if (e) {
-              if (e.res !== t) {
-                t = e.res;
-                const z = e.stream.toBlob();
-                if (z) {
-                  const U = URL.createObjectURL(z);
+              if (e.res !== r) {
+                r = e.res;
+                const b = e.stream.toBlob();
+                if (b) {
+                  const U = URL.createObjectURL(b);
                   h.value = {
                     src: U,
                     res: e.res,
-                    originalSize: (u = c.value) == null ? void 0 : u.originalSize
-                  }, r && r(), r = () => {
+                    originalSize: (s = c.value) == null ? void 0 : s.originalSize
+                  }, t && t(), t = () => {
                     setTimeout(() => URL.revokeObjectURL(U), 200);
                   };
                 }
               }
             } else
               h.value = {
-                src: s == null ? void 0 : s.placeholderDataURL,
+                src: n == null ? void 0 : n.placeholderDataURL,
                 res: "placeholder",
                 originalSize: (m = c.value) == null ? void 0 : m.originalSize
               };
           }) : void 0;
         }
       );
-      return I(() => {
-        o(), r && r();
+      return k(() => {
+        o(), t && t();
       }), h;
     }
-    const l = p, a = i(q(l, "image"), l.maxWidth);
+    const l = p, i = u(q(l, "image"), l.maxWidth);
     return (c, d) => H(c.$slots, "default", {
-      src: J(a).src,
-      res: J(a).res,
-      originalSize: J(a).originalSize
+      src: S(i).src,
+      res: S(i).res,
+      originalSize: S(i).originalSize
     });
   }
 });
 export {
-  oe as DemoAuthBasicUI,
+  re as DemoAuthBasicUI,
   ne as ProgressiveImg,
   te as createJazzVueApp,
-  S as logoutHandler,
-  re as useDemoAuth
+  A as logoutHandler,
+  oe as useDemoAuth
 };

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "jazz-vue",
-  "version": "0.8.10",
+  "version": "0.8.12",
   "type": "module",
   "main": "dist/index.js",
   "types": "src/index.ts",
   "license": "MIT",
   "dependencies": {
     "@scure/bip39": "^1.3.0",
-    "cojson": "0.8.19",
-    "jazz-browser": "0.8.20",
-    "jazz-tools": "0.8.19"
+    "cojson": "0.8.21",
+    "jazz-browser": "0.8.22",
+    "jazz-tools": "0.8.21"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.1.4",

package/src/createJazzVueApp.ts

@@ -19,6 +19,7 @@ import {
 import {
   Component,
   ComputedRef,
+  MaybeRef,
   PropType,
   Ref,
   ShallowRef,
@@ -31,6 +32,7 @@ import {
   ref,
   shallowRef,
   toRaw,
+  unref,
   watch,
 } from "vue";
 
@@ -56,7 +58,7 @@ export interface JazzVueApp<Acc extends Account> {
 
   useCoState<V extends CoValue, D>(
     Schema: CoValueClass<V>,
-    id: ID<V> | undefined,
+    id: MaybeRef<ID<V> | undefined>,
     depth?: D & DepthsIn<V>,
   ): Ref<DeeplyLoaded<V, D> | undefined>;
 
@@ -181,9 +183,13 @@ export function createJazzVueApp<Acc extends Account>({
       );
     }
 
+    const contextMe = computed(() =>
+      "me" in context.value ? context.value.me : undefined,
+    );
+
     const me = useCoState<Acc, D>(
-      context.value.me.constructor as CoValueClass<Acc>,
-      context.value.me.id,
+      contextMe.value?.constructor as CoValueClass<Acc>,
+      contextMe.value?.id,
       depth,
     );
 
@@ -219,11 +225,13 @@ export function createJazzVueApp<Acc extends Account>({
       throw new Error("useAccountOrGuest must be used within a JazzProvider");
     }
 
-    const contextMe = "me" in context.value ? context.value.me : undefined;
+    const contextMe = computed(() =>
+      "me" in context.value ? context.value.me : undefined,
+    );
 
     const me = useCoState<Acc, D>(
-      contextMe?.constructor as CoValueClass<Acc>,
-      contextMe?.id,
+      contextMe.value?.constructor as CoValueClass<Acc>,
+      contextMe.value?.id,
       depth,
     );
 
@@ -244,7 +252,7 @@ export function createJazzVueApp<Acc extends Account>({
 
   function useCoState<V extends CoValue, D>(
     Schema: CoValueClass<V>,
-    id: ID<V> | undefined,
+    id: MaybeRef<ID<V> | undefined>,
     depth: D & DepthsIn<V> = [] as D & DepthsIn<V>,
   ): Ref<DeeplyLoaded<V, D> | undefined> {
     const state: ShallowRef<DeeplyLoaded<V, D> | undefined> =
@@ -258,15 +266,16 @@ export function createJazzVueApp<Acc extends Account>({
     let unsubscribe: (() => void) | undefined;
 
     watch(
-      [() => id, () => context, () => Schema, () => depth],
+      [() => unref(id), () => context, () => Schema, () => depth],
       () => {
         if (unsubscribe) unsubscribe();
 
-        if (!id) return;
+        const idValue = unref(id);
+        if (!idValue) return;
 
         unsubscribe = subscribeToCoValue(
           Schema,
-          id,
+          idValue,
           "me" in context.value
             ? toRaw(context.value.me)
             : toRaw(context.value.guest),
@@ -276,7 +285,7 @@ export function createJazzVueApp<Acc extends Account>({
           },
         );
       },
-      { immediate: true },
+      { deep: true, immediate: true },
     );
 
     onUnmounted(() => {