jazz-vue 0.9.23 → 0.10.0

package/dist/index.js

@@ -1,316 +1,440 @@
-import { consumeInviteLinkFromWindowLocation as E, BrowserDemoAuth as M } from "jazz-browser";
-import { createInviteLink as de, parseInviteLink as ve } from "jazz-browser";
-import { subscribeToCoValue as _ } from "jazz-tools";
-import { ref as y, shallowRef as B, watch as S, unref as w, toRaw as p, onUnmounted as k, computed as l, onMounted as G, inject as T, reactive as V, defineComponent as D, openBlock as v, createElementBlock as m, normalizeStyle as g, Fragment as A, createElementVNode as b, toDisplayString as I, renderList as L, withModifiers as $, withDirectives as j, vModelText as H, createCommentVNode as J, toRef as N, renderSlot as F } from "vue";
-import { J as W, l as O } from "./provider-BZnz6FpX.js";
-import { a as fe } from "./provider-BZnz6FpX.js";
-const oe = y();
-function x() {
-  const u = T(
-    W
-  );
-  if (!u)
+import { consumeInviteLinkFromWindowLocation, BrowserPasskeyAuth } from "jazz-browser";
+import { createInviteLink, parseInviteLink } from "jazz-browser";
+import { subscribeToCoValue, DemoAuth, PassphraseAuth } from "jazz-tools";
+import { ref, inject, shallowRef, watch, unref, toRaw, onUnmounted, computed, onMounted, watchEffect, defineComponent, renderSlot, openBlock, createElementBlock, createElementVNode, normalizeStyle, toDisplayString, withDirectives, vModelText, Fragment, renderList, createCommentVNode, toRef } from "vue";
+import { J as JazzContextSymbol, a as JazzAuthContextSymbol } from "./provider-CkA-a4Og.js";
+import { b } from "./provider-CkA-a4Og.js";
+const logoutHandler = ref();
+function useJazzContext() {
+  const context = inject(JazzContextSymbol);
+  if (!(context == null ? void 0 : context.value)) {
     throw new Error("useJazzContext must be used within a JazzProvider");
-  return u;
+  }
+  return context;
+}
+function useAuthSecretStorage() {
+  const context = inject(JazzAuthContextSymbol);
+  if (!context) {
+    throw new Error("useAuthSecretStorage must be used within a JazzProvider");
+  }
+  return context;
 }
-function q() {
-  function u(r) {
-    const e = x();
-    if (!e.value)
+function createUseAccountComposables() {
+  function useAccount2(depth) {
+    const context = useJazzContext();
+    if (!context.value) {
       throw new Error("useAccount must be used within a JazzProvider");
-    if (!("me" in e.value))
+    }
+    if (!("me" in context.value)) {
       throw new Error(
         "useAccount can't be used in a JazzProvider with auth === 'guest' - consider using useAccountOrGuest()"
       );
-    const o = e.value.me, n = P(
-      o.constructor,
-      o.id,
-      r
+    }
+    const contextMe = context.value.me;
+    const me = useCoState(
+      contextMe.constructor,
+      contextMe.id,
+      depth
     );
     return {
-      me: l(() => {
-        const s = r === void 0 ? n.value || p(e.value.me) : n.value;
-        return s && p(s);
+      me: computed(() => {
+        const value = depth === void 0 ? me.value || toRaw(context.value.me) : me.value;
+        return value ? toRaw(value) : value;
       }),
-      logOut: e.value.logOut
+      logOut: context.value.logOut
     };
   }
-  function t(r) {
-    var s, a;
-    const e = x();
-    if (!e.value)
+  function useAccountOrGuest2(depth) {
+    var _a, _b;
+    const context = useJazzContext();
+    if (!context.value) {
       throw new Error("useAccountOrGuest must be used within a JazzProvider");
-    const o = l(
-      () => "me" in e.value ? e.value.me : void 0
-    ), n = P(
-      (s = o.value) == null ? void 0 : s.constructor,
-      (a = o.value) == null ? void 0 : a.id,
-      r
+    }
+    const contextMe = computed(
+      () => "me" in context.value ? context.value.me : void 0
     );
-    return "me" in e.value ? {
-      me: l(
-        () => r === void 0 ? n.value || p(e.value.me) : n.value
-      )
-    } : {
-      me: l(() => p(e.value.guest))
-    };
+    const me = useCoState(
+      (_a = contextMe.value) == null ? void 0 : _a.constructor,
+      (_b = contextMe.value) == null ? void 0 : _b.id,
+      depth
+    );
+    if ("me" in context.value) {
+      return {
+        me: computed(
+          () => depth === void 0 ? me.value || toRaw(context.value.me) : me.value
+        )
+      };
+    } else {
+      return {
+        me: computed(() => toRaw(context.value.guest))
+      };
+    }
   }
   return {
-    useAccount: u,
-    useAccountOrGuest: t
+    useAccount: useAccount2,
+    useAccountOrGuest: useAccountOrGuest2
   };
 }
-const { useAccount: ne, useAccountOrGuest: re } = q();
-function P(u, t, r = []) {
-  const e = B(void 0), o = x();
-  if (!o.value)
+const { useAccount, useAccountOrGuest } = createUseAccountComposables();
+function useCoState(Schema, id, depth = []) {
+  const state = shallowRef(void 0);
+  const context = useJazzContext();
+  if (!context.value) {
     throw new Error("useCoState must be used within a JazzProvider");
-  let n;
-  return S(
-    [() => w(t), () => o, () => u, () => r],
+  }
+  let unsubscribe;
+  watch(
+    [() => unref(id), () => context, () => Schema, () => depth],
     () => {
-      n && n();
-      const a = w(t);
-      a && (n = _(
-        u,
-        a,
-        "me" in o.value ? p(o.value.me) : p(o.value.guest),
-        r,
-        (h) => {
-          e.value = h;
+      if (unsubscribe) unsubscribe();
+      const idValue = unref(id);
+      if (!idValue) return;
+      unsubscribe = subscribeToCoValue(
+        Schema,
+        idValue,
+        "me" in context.value ? toRaw(context.value.me) : toRaw(context.value.guest),
+        depth,
+        (value) => {
+          state.value = value;
+        },
+        () => {
+          state.value = null;
         },
-        void 0,
-        !0
-      ));
+        true
+      );
     },
-    { deep: !0, immediate: !0 }
-  ), k(() => {
-    n && n();
-  }), l(() => e.value);
+    { deep: true, immediate: true }
+  );
+  onUnmounted(() => {
+    if (unsubscribe) unsubscribe();
+  });
+  const computedState = computed(() => state.value);
+  return computedState;
 }
-function se({
-  invitedObjectSchema: u,
-  onAccept: t,
-  forValueHint: r
+function useAcceptInvite({
+  invitedObjectSchema,
+  onAccept,
+  forValueHint
 }) {
-  const e = x();
-  if (!e.value)
+  const context = useJazzContext();
+  if (!context.value) {
     throw new Error("useAcceptInvite must be used within a JazzProvider");
-  if (!("me" in e.value))
+  }
+  if (!("me" in context.value)) {
     throw new Error(
       "useAcceptInvite can't be used in a JazzProvider with auth === 'guest'."
     );
-  const o = () => {
-    E({
-      as: p(e.value.me),
-      invitedObjectSchema: u,
-      forValueHint: r
-    }).then((s) => s && t(s.valueID)).catch((s) => {
-      console.error("Failed to accept invite", s);
+  }
+  const runInviteAcceptance = () => {
+    const result = consumeInviteLinkFromWindowLocation({
+      as: toRaw(context.value.me),
+      invitedObjectSchema,
+      forValueHint
+    });
+    result.then((res) => res && onAccept(res.valueID)).catch((e) => {
+      console.error("Failed to accept invite", e);
     });
   };
-  G(() => {
-    o();
-  }), S(
-    () => t,
-    (n, s) => {
-      n !== s && o();
+  onMounted(() => {
+    runInviteAcceptance();
+  });
+  watch(
+    () => onAccept,
+    (newOnAccept, oldOnAccept) => {
+      if (newOnAccept !== oldOnAccept) {
+        runInviteAcceptance();
+      }
     }
   );
 }
-function ue({
-  seedAccounts: u
-} = {}) {
-  const t = V({
-    state: "loading",
-    errors: []
-  }), r = y(
-    new M(
-      {
-        onReady: ({ signUp: e, existingUsers: o, logInAs: n }) => {
-          t.state = "ready", t.signUp = e, t.existingUsers = o, t.logInAs = n, t.errors = [];
-        },
-        onSignedIn: ({ logOut: e }) => {
-          t.state = "signedIn", t.logOut = () => {
-            e(), t.state = "ready", t.errors = [];
-          }, t.errors = [], O.value = t.logOut;
-        },
-        onError: (e) => {
-          t.errors.push(e.toString());
-        }
-      },
-      u
-    )
+function useIsAuthenticated() {
+  const authSecretStorage = useAuthSecretStorage();
+  const isAuthenticated = ref(authSecretStorage.isAuthenticated);
+  const handleUpdate = () => {
+    isAuthenticated.value = authSecretStorage.isAuthenticated;
+  };
+  onMounted(() => {
+    const cleanup = authSecretStorage.onUpdate(handleUpdate);
+    onUnmounted(cleanup);
+  });
+  return isAuthenticated;
+}
+function useDemoAuth() {
+  const context = useJazzContext();
+  const authSecretStorage = useAuthSecretStorage();
+  if ("guest" in context.value) {
+    throw new Error("Demo auth is not supported in guest mode");
+  }
+  const authMethod = computed(
+    () => new DemoAuth(context.value.authenticate, authSecretStorage)
   );
-  return k(() => {
-    t.state === "signedIn" && (O.value = void 0);
-  }), { authMethod: r, state: t };
+  const existingUsers = ref([]);
+  const isAuthenticated = useIsAuthenticated();
+  watch(authMethod, () => {
+    authMethod.value.getExistingUsers().then((users) => {
+      existingUsers.value = users;
+    });
+  });
+  return computed(() => ({
+    state: isAuthenticated.value ? "signedIn" : "anonymous",
+    logIn(username) {
+      authMethod.value.logIn(username);
+    },
+    signUp(username) {
+      authMethod.value.signUp(username);
+    },
+    existingUsers: existingUsers.value
+  }));
+}
+function usePassphraseAuth({
+  wordlist
+}) {
+  const context = useJazzContext();
+  const authSecretStorage = useAuthSecretStorage();
+  const isAuthenticated = useIsAuthenticated();
+  if ("guest" in context.value) {
+    throw new Error("Passphrase auth is not supported in guest mode");
+  }
+  const authMethod = computed(() => {
+    return new PassphraseAuth(
+      context.value.node.crypto,
+      context.value.authenticate,
+      authSecretStorage,
+      wordlist
+    );
+  });
+  const passphrase = ref(authMethod.value.passphrase);
+  watchEffect((onCleanup) => {
+    authMethod.value.loadCurrentAccountPassphrase();
+    const unsubscribe = authMethod.value.subscribe(() => {
+      passphrase.value = authMethod.value.passphrase;
+    });
+    onCleanup(unsubscribe);
+  });
+  return computed(() => ({
+    state: isAuthenticated.value ? "signedIn" : "anonymous",
+    logIn: authMethod.value.logIn,
+    signUp: authMethod.value.signUp,
+    passphrase: passphrase.value
+  }));
+}
+function usePasskeyAuth({
+  appName,
+  appHostname
+}) {
+  const context = useJazzContext();
+  const authSecretStorage = useAuthSecretStorage();
+  const isAuthenticated = useIsAuthenticated();
+  if ("guest" in context.value) {
+    throw new Error("Passkey auth is not supported in guest mode");
+  }
+  const authMethod = computed(() => {
+    return new BrowserPasskeyAuth(
+      context.value.node.crypto,
+      context.value.authenticate,
+      authSecretStorage,
+      appName,
+      appHostname
+    );
+  });
+  return computed(() => ({
+    state: isAuthenticated.value ? "signedIn" : "anonymous",
+    logIn: authMethod.value.logIn,
+    signUp: authMethod.value.signUp
+  }));
 }
-const K = { key: 0 }, Q = {
+const _hoisted_1 = {
+  key: 1,
+  style: {
+    minHeight: "100%",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    width: "18rem",
+    maxWidth: "calc(100vw - 2rem)",
+    gap: "2rem",
+    margin: "0 auto"
+  }
+};
+const _hoisted_2 = {
   key: 0,
-  style: { display: "flex", "flex-direction": "column", gap: "0.5rem" }
-}, X = ["onClick", "aria-label"], ie = /* @__PURE__ */ D({
+  style: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.5rem"
+  }
+};
+const _hoisted_3 = ["onClick", "aria-label"];
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "DemoAuthBasicUI",
   props: {
-    appName: {},
-    state: {}
+    appName: {}
   },
-  setup(u) {
-    const t = u, r = y(""), e = l(
-      () => window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
-    ), o = l(() => ({
-      minHeight: "100vh",
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "center",
-      alignItems: "center",
-      width: "100%",
-      padding: "1rem",
-      maxWidth: "100vw",
-      gap: "2rem",
-      margin: "0",
-      ...e.value ? { background: "#000" } : {}
-    })), n = l(() => ({
-      border: e.value ? "2px solid #444" : "2px solid #ddd",
-      padding: "11px 8px",
-      borderRadius: "6px",
-      background: e.value ? "#000" : "#fff",
-      color: e.value ? "#fff" : "#000"
-    })), s = l(() => ({
-      padding: "13px 5px",
-      border: "none",
-      borderRadius: "6px",
-      cursor: "pointer",
-      background: e.value ? "#444" : "#ddd",
-      color: e.value ? "#fff" : "#000"
-    })), a = l(() => ({
-      background: e.value ? "#0d0d0d" : "#eee",
-      color: e.value ? "#fff" : "#000",
-      padding: "0.5rem",
-      border: "none",
-      borderRadius: "6px"
-    })), h = () => {
-      t.state.signUp(r.value), r.value = "";
-    }, f = (c) => {
-      t.state.logInAs(c);
+  setup(__props) {
+    const auth = useDemoAuth();
+    const username = ref("");
+    const darkMode = typeof window !== "undefined" ? window.matchMedia("(prefers-color-scheme: dark)").matches : false;
+    const handleSubmit = (e) => {
+      e.preventDefault();
+      auth.value.signUp(username.value);
     };
-    return (c, d) => (v(), m("div", {
-      style: g(o.value)
-    }, [
-      c.state.state === "loading" ? (v(), m("div", K, "Loading...")) : c.state.state === "ready" ? (v(), m(A, { key: 1 }, [
-        b("h1", {
-          style: g({ color: e.value ? "#fff" : "#000", textAlign: "center" })
-        }, I(c.appName), 5),
-        (v(!0), m(A, null, L(c.state.errors, (i) => (v(), m("div", {
-          key: i,
-          style: { color: "red" }
-        }, I(i), 1))), 128)),
-        b("form", {
-          onSubmit: $(h, ["prevent"]),
-          style: { display: "flex", "flex-direction": "column", gap: "0.5rem" }
+    return (_ctx, _cache) => {
+      return unref(auth).state === "signedIn" ? renderSlot(_ctx.$slots, "default", { key: 0 }) : (openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("h1", {
+          style: normalizeStyle({
+            color: unref(darkMode) ? "#fff" : "#000",
+            textAlign: "center",
+            fontSize: "1.5rem",
+            fontWeight: "bold"
+          })
+        }, toDisplayString(_ctx.appName), 5),
+        createElementVNode("form", {
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: "0.5rem"
+          },
+          onSubmit: handleSubmit
         }, [
-          j(b("input", {
-            "onUpdate:modelValue": d[0] || (d[0] = (i) => r.value = i),
+          withDirectives(createElementVNode("input", {
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => username.value = $event),
             placeholder: "Display name",
-            autoComplete: "webauthn",
-            style: g(n.value)
+            autocomplete: "webauthn",
+            style: normalizeStyle({
+              border: unref(darkMode) ? "1px solid #444" : "1px solid #ddd",
+              padding: "11px 8px",
+              borderRadius: "6px",
+              background: unref(darkMode) ? "#000" : "#fff",
+              color: unref(darkMode) ? "#fff" : "#000"
+            })
           }, null, 4), [
-            [H, r.value]
+            [vModelText, username.value]
           ]),
-          b("input", {
+          createElementVNode("input", {
             type: "submit",
             value: "Sign up",
-            style: g(s.value)
+            style: normalizeStyle({
+              padding: "13px 5px",
+              border: "none",
+              borderRadius: "6px",
+              cursor: "pointer",
+              background: unref(darkMode) ? "#444" : "#ddd",
+              color: unref(darkMode) ? "#fff" : "#000"
+            })
           }, null, 4)
         ], 32),
-        c.state.existingUsers.length > 0 ? (v(), m("div", Q, [
-          b("p", {
-            style: g({
-              color: e.value ? "#e2e2e2" : "#000",
+        unref(auth).existingUsers.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2, [
+          createElementVNode("p", {
+            style: normalizeStyle({
+              color: unref(darkMode) ? "#e2e2e2" : "#000",
               textAlign: "center",
               paddingTop: "0.5rem",
               borderTop: "1px solid",
-              borderColor: e.value ? "#111" : "#e2e2e2"
+              borderColor: unref(darkMode) ? "#111" : "#e2e2e2"
             })
           }, " Log in as ", 4),
-          (v(!0), m(A, null, L(c.state.existingUsers, (i) => (v(), m("button", {
-            key: i,
-            onClick: (z) => f(i),
-            type: "button",
-            "aria-label": `Log in as ${i}`,
-            style: g(a.value)
-          }, I(i), 13, X))), 128))
-        ])) : J("", !0)
-      ], 64)) : J("", !0)
-    ], 4));
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(auth).existingUsers, (user) => {
+            return openBlock(), createElementBlock("button", {
+              key: user,
+              onClick: ($event) => unref(auth).logIn(user),
+              type: "button",
+              "aria-label": `Log in as ${user}`,
+              style: normalizeStyle({
+                background: unref(darkMode) ? "#0d0d0d" : "#eee",
+                color: unref(darkMode) ? "#fff" : "#000",
+                padding: "0.5rem",
+                border: "none",
+                borderRadius: "6px"
+              })
+            }, toDisplayString(user), 13, _hoisted_3);
+          }), 128))
+        ])) : createCommentVNode("", true)
+      ]));
+    };
   }
-}), ae = /* @__PURE__ */ D({
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "ProgressiveImg",
   props: {
     image: {},
     maxWidth: {}
   },
-  setup(u) {
-    function t(o, n) {
-      const s = y({});
-      let a;
-      const h = S(
+  setup(__props) {
+    function useProgressiveImg(image, maxWidth) {
+      const current2 = ref({});
+      let cleanup;
+      const unsubscribe = watch(
         () => {
-          var f;
-          return [(f = o.value) == null ? void 0 : f.id, n];
+          var _a;
+          return [(_a = image.value) == null ? void 0 : _a.id, maxWidth];
         },
         () => {
-          let f;
-          return o.value ? o.value.subscribe({}, (d) => {
-            var z, U;
-            const i = d == null ? void 0 : d.highestResAvailable({ maxWidth: n });
-            if (i) {
-              if (i.res !== f) {
-                f = i.res;
-                const R = i.stream.toBlob();
-                if (R) {
-                  const C = URL.createObjectURL(R);
-                  s.value = {
-                    src: C,
-                    res: i.res,
-                    originalSize: (z = o.value) == null ? void 0 : z.originalSize
-                  }, a && a(), a = () => {
-                    setTimeout(() => URL.revokeObjectURL(C), 200);
+          let lastHighestRes;
+          if (!image.value) return;
+          const unsub = image.value.subscribe({}, (update) => {
+            var _a, _b;
+            const highestRes = update == null ? void 0 : update.highestResAvailable({ maxWidth });
+            if (highestRes) {
+              if (highestRes.res !== lastHighestRes) {
+                lastHighestRes = highestRes.res;
+                const blob = highestRes.stream.toBlob();
+                if (blob) {
+                  const blobURI = URL.createObjectURL(blob);
+                  current2.value = {
+                    src: blobURI,
+                    res: highestRes.res,
+                    originalSize: (_a = image.value) == null ? void 0 : _a.originalSize
+                  };
+                  if (cleanup) cleanup();
+                  cleanup = () => {
+                    setTimeout(() => URL.revokeObjectURL(blobURI), 200);
                   };
                 }
               }
-            } else
-              s.value = {
-                src: d == null ? void 0 : d.placeholderDataURL,
+            } else {
+              current2.value = {
+                src: update == null ? void 0 : update.placeholderDataURL,
                 res: "placeholder",
-                originalSize: (U = o.value) == null ? void 0 : U.originalSize
+                originalSize: (_b = image.value) == null ? void 0 : _b.originalSize
               };
-          }) : void 0;
+            }
+          });
+          return unsub;
         }
       );
-      return k(() => {
-        h(), a && a();
-      }), s;
+      onUnmounted(() => {
+        unsubscribe();
+        if (cleanup) cleanup();
+      });
+      return current2;
     }
-    const r = u, e = t(N(r, "image"), r.maxWidth);
-    return (o, n) => F(o.$slots, "default", {
-      src: w(e).src,
-      res: w(e).res,
-      originalSize: w(e).originalSize
-    });
+    const props = __props;
+    const current = useProgressiveImg(toRef(props, "image"), props.maxWidth);
+    return (_ctx, _cache) => {
+      return renderSlot(_ctx.$slots, "default", {
+        src: unref(current).src,
+        res: unref(current).res,
+        originalSize: unref(current).originalSize
+      });
+    };
   }
 });
 export {
-  ie as DemoAuthBasicUI,
-  fe as JazzProvider,
-  ae as ProgressiveImg,
-  de as createInviteLink,
-  q as createUseAccountComposables,
-  oe as logoutHandler,
-  ve as parseInviteLink,
-  se as useAcceptInvite,
-  ne as useAccount,
-  re as useAccountOrGuest,
-  P as useCoState,
-  ue as useDemoAuth
+  _sfc_main$1 as DemoAuthBasicUI,
+  b as JazzProvider,
+  _sfc_main as ProgressiveImg,
+  createInviteLink,
+  createUseAccountComposables,
+  logoutHandler,
+  parseInviteLink,
+  useAcceptInvite,
+  useAccount,
+  useAccountOrGuest,
+  useAuthSecretStorage,
+  useCoState,
+  useDemoAuth,
+  useJazzContext,
+  usePasskeyAuth,
+  usePassphraseAuth
 };
+//# sourceMappingURL=index.js.map