community-jazz-vue 0.15.4

package/dist/index.js

@@ -0,0 +1,667 @@
+import { Account, subscribeToCoValue, coValueClassFromCoValueClassOrSchema, InboxSender, PassphraseAuth, JazzClerkAuth, KvStoreContext, InMemoryKVStore, ImageDefinition } from "jazz-tools";
+import { consumeInviteLinkFromWindowLocation, BrowserPasskeyAuth, LocalStorageKVStore } from "jazz-tools/browser";
+import { createInviteLink, parseInviteLink } from "jazz-tools/browser";
+import { ref, inject, shallowRef, watch, toRaw, markRaw, onUnmounted, computed, onMounted, watchEffect, defineComponent, h, createElementBlock, unref, openBlock, renderSlot, createElementVNode, createCommentVNode, toDisplayString, withModifiers, withDirectives, vModelText, normalizeStyle, normalizeClass } from "vue";
+import { J as JazzContextSymbol, a as JazzAuthContextSymbol, b as JazzContextManagerSymbol, c as JazzVueProvider } from "./provider-CCZVJj45.js";
+import { d } from "./provider-CCZVJj45.js";
+import { highestResAvailable } from "jazz-tools/media";
+import { createImage } from "jazz-tools/media";
+const logoutHandler = ref();
+function getCurrentAccountFromContextManager(contextManager) {
+  const context = contextManager.getCurrentValue();
+  if (!context) {
+    throw new Error("No context found");
+  }
+  return "me" in context ? context.me : context.guest;
+}
+function useJazzContext() {
+  const context = inject(JazzContextSymbol);
+  if (!context) {
+    throw new Error("useJazzContext must be used within a JazzProvider");
+  }
+  return context;
+}
+function useJazzContextManager() {
+  const context = inject(
+    JazzContextManagerSymbol
+  );
+  if (!(context == null ? void 0 : context.value)) {
+    throw new Error(
+      "You need to set up a JazzProvider on top of your app to use this hook."
+    );
+  }
+  return context;
+}
+function useAuthSecretStorage() {
+  const context = inject(JazzAuthContextSymbol);
+  if (!context) {
+    throw new Error("useAuthSecretStorage must be used within a JazzProvider");
+  }
+  return context;
+}
+function useAccount(AccountSchema = Account, options) {
+  const context = useJazzContext();
+  const contextManager = useJazzContextManager();
+  if (!context.value) {
+    throw new Error("useAccount must be used within a JazzProvider");
+  }
+  const agent = getCurrentAccountFromContextManager(contextManager.value);
+  if (!("me" in context.value)) {
+    return {
+      me: computed(() => null),
+      agent,
+      logOut: context.value.logOut
+    };
+  }
+  const contextMe = context.value.me;
+  const me = useCoState(AccountSchema, contextMe.id, options);
+  return {
+    me: computed(() => {
+      const value = (options == null ? void 0 : options.resolve) === void 0 ? me.value || contextMe : me.value;
+      return value ? markRaw(value) : value;
+    }),
+    agent,
+    logOut: context.value.logOut
+  };
+}
+function useCoState(Schema, id, options) {
+  const state = shallowRef(void 0);
+  const context = useJazzContext();
+  if (!context.value) {
+    throw new Error("useCoState must be used within a JazzProvider");
+  }
+  let unsubscribe;
+  watch(
+    [() => id, context],
+    ([currentId, currentContext]) => {
+      if (unsubscribe) {
+        unsubscribe();
+        unsubscribe = void 0;
+      }
+      if (!currentId || !currentContext) {
+        state.value = void 0;
+        return;
+      }
+      const loadAsAgent = "me" in currentContext ? currentContext.me : currentContext.guest;
+      if (!loadAsAgent) {
+        state.value = void 0;
+        return;
+      }
+      const safeLoadAsAgent = toRaw(loadAsAgent);
+      try {
+        unsubscribe = subscribeToCoValue(
+          coValueClassFromCoValueClassOrSchema(Schema),
+          currentId,
+          {
+            resolve: options == null ? void 0 : options.resolve,
+            loadAs: safeLoadAsAgent,
+            onUnavailable: () => {
+              state.value = null;
+            },
+            onUnauthorized: () => {
+              state.value = null;
+            },
+            syncResolution: true
+          },
+          (value) => {
+            state.value = value ? markRaw(value) : value;
+          }
+        );
+      } catch (error) {
+        console.error("Error in useCoState subscription:", error);
+        state.value = null;
+      }
+    },
+    { immediate: true }
+  );
+  onUnmounted(() => {
+    if (unsubscribe) {
+      unsubscribe();
+      unsubscribe = void 0;
+    }
+  });
+  return state;
+}
+function useAcceptInvite({
+  invitedObjectSchema,
+  onAccept,
+  forValueHint
+}) {
+  const context = useJazzContext();
+  if (!context.value) {
+    throw new Error("useAcceptInvite must be used within a JazzProvider");
+  }
+  if (!("me" in context.value)) {
+    throw new Error(
+      "useAcceptInvite can't be used in a JazzProvider with auth === 'guest'."
+    );
+  }
+  const handleInvite = () => {
+    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);
+    });
+  };
+  onMounted(() => {
+    handleInvite();
+    window.addEventListener("hashchange", handleInvite);
+  });
+  onUnmounted(() => {
+    window.removeEventListener("hashchange", handleInvite);
+  });
+  watch(
+    () => onAccept,
+    (newOnAccept, oldOnAccept) => {
+      if (newOnAccept !== oldOnAccept) {
+        handleInvite();
+      }
+    }
+  );
+}
+function experimental_useInboxSender(inboxOwnerID) {
+  const context = useJazzContext();
+  if (!context.value) {
+    throw new Error(
+      "experimental_useInboxSender must be used within a JazzProvider"
+    );
+  }
+  if (!("me" in context.value)) {
+    throw new Error(
+      "experimental_useInboxSender can't be used in a JazzProvider with auth === 'guest'."
+    );
+  }
+  const me = computed(() => context.value.me);
+  const inboxRef = ref(void 0);
+  const sendMessage = async (message) => {
+    if (!inboxOwnerID) throw new Error("Inbox owner ID is required");
+    if (!inboxRef.value) {
+      const inbox2 = InboxSender.load(inboxOwnerID, toRaw(me.value));
+      inboxRef.value = inbox2;
+    }
+    let inbox = await inboxRef.value;
+    if (inbox.owner.id !== inboxOwnerID) {
+      const req = InboxSender.load(inboxOwnerID, toRaw(me.value));
+      inboxRef.value = req;
+      inbox = await req;
+    }
+    return inbox.sendMessage(message);
+  };
+  watch(
+    () => inboxOwnerID,
+    () => {
+      inboxRef.value = void 0;
+    }
+  );
+  return sendMessage;
+}
+function useIsAuthenticated() {
+  const authSecretStorage = useAuthSecretStorage();
+  const isAuthenticated = ref(authSecretStorage.isAuthenticated);
+  const handleUpdate = (newIsAuthenticated) => {
+    isAuthenticated.value = newIsAuthenticated;
+  };
+  const cleanup = authSecretStorage.onUpdate(handleUpdate);
+  onUnmounted(() => {
+    cleanup();
+  });
+  return isAuthenticated;
+}
+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 markRaw(
+      new PassphraseAuth(
+        context.value.node.crypto,
+        context.value.authenticate,
+        context.value.register,
+        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,
+    registerNewAccount: authMethod.value.registerNewAccount,
+    generateRandomPassphrase: authMethod.value.generateRandomPassphrase,
+    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 markRaw(
+      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
+  }));
+}
+function useClerkAuth(clerk) {
+  const context = useJazzContext();
+  const authSecretStorage = useAuthSecretStorage();
+  if ("guest" in context.value) {
+    throw new Error("Clerk auth is not supported in guest mode");
+  }
+  const authMethod = computed(() => {
+    return markRaw(
+      new JazzClerkAuth(context.value.authenticate, authSecretStorage)
+    );
+  });
+  onMounted(() => {
+    const cleanup = authMethod.value.registerListener(clerk);
+    onUnmounted(() => {
+      if (typeof cleanup === "function") {
+        cleanup();
+      }
+    });
+  });
+  return authMethod.value;
+}
+function setupKvStore() {
+  KvStoreContext.getInstance().initialize(
+    typeof window === "undefined" ? new InMemoryKVStore() : new LocalStorageKVStore()
+  );
+}
+const RegisterClerkAuth = defineComponent({
+  name: "RegisterClerkAuth",
+  props: {
+    clerk: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props, { slots }) {
+    useClerkAuth(props.clerk);
+    return () => {
+      var _a;
+      return (_a = slots.default) == null ? void 0 : _a.call(slots);
+    };
+  }
+});
+const JazzVueProviderWithClerk = defineComponent({
+  name: "JazzVueProviderWithClerk",
+  props: {
+    clerk: {
+      type: Object,
+      required: true
+    },
+    AccountSchema: {
+      type: Function,
+      required: false
+    },
+    guestMode: {
+      type: Boolean,
+      default: false
+    },
+    sync: {
+      type: Object,
+      required: true
+    },
+    storage: {
+      type: String,
+      default: void 0
+    },
+    defaultProfileName: {
+      type: String,
+      required: false
+    },
+    onLogOut: {
+      type: Function,
+      required: false
+    },
+    onAnonymousAccountDiscarded: {
+      type: Function,
+      required: false
+    },
+    enableSSR: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props, { slots }) {
+    const isLoaded = ref(false);
+    onMounted(async () => {
+      try {
+        setupKvStore();
+        await JazzClerkAuth.initializeAuth(props.clerk);
+        isLoaded.value = true;
+      } catch (error) {
+        console.error("Jazz + Clerk initialization error:", error);
+        isLoaded.value = true;
+      }
+    });
+    return () => {
+      if (!isLoaded.value) {
+        return null;
+      }
+      const { clerk, ...jazzProviderProps } = props;
+      return h(
+        JazzVueProvider,
+        {
+          ...jazzProviderProps,
+          logOutReplacement: clerk.signOut
+        },
+        {
+          default: () => h(
+            RegisterClerkAuth,
+            { clerk },
+            { default: () => {
+              var _a;
+              return (_a = slots.default) == null ? void 0 : _a.call(slots);
+            } }
+          )
+        }
+      );
+    };
+  }
+});
+const _hoisted_1$1 = { key: 0 };
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "PasskeyAuthBasicUI",
+  props: {
+    appName: {},
+    appHostname: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const username = ref("");
+    const error = ref(null);
+    const auth = usePasskeyAuth({
+      appName: props.appName,
+      appHostname: props.appHostname
+    });
+    function handleError(err) {
+      if (err.cause instanceof Error) {
+        error.value = err.cause.message;
+      } else {
+        error.value = err.message;
+      }
+    }
+    const handleSignUp = async () => {
+      if (!username.value.trim()) {
+        error.value = "Name is required";
+        return;
+      }
+      error.value = null;
+      try {
+        await auth.value.signUp(username.value.trim());
+      } catch (err) {
+        handleError(err);
+      }
+    };
+    const handleLogIn = async () => {
+      error.value = null;
+      try {
+        await auth.value.logIn();
+      } catch (err) {
+        handleError(err);
+      }
+    };
+    const containerStyle = {
+      width: "100vw",
+      height: "100vh",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      backgroundColor: "#f3f4f6",
+      padding: "1rem"
+    };
+    const cardStyle = {
+      backgroundColor: "white",
+      padding: "2rem",
+      borderRadius: "0.5rem",
+      boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1)",
+      width: "100%",
+      maxWidth: "18rem",
+      display: "flex",
+      flexDirection: "column",
+      gap: "2rem"
+    };
+    const headingStyle = {
+      fontSize: "1.5rem",
+      fontWeight: "bold",
+      textAlign: "center",
+      margin: "0"
+    };
+    const errorStyle = {
+      color: "red",
+      fontSize: "0.875rem",
+      textAlign: "center"
+    };
+    const formStyle = {
+      display: "flex",
+      flexDirection: "column",
+      gap: "0.5rem"
+    };
+    const inputStyle = {
+      padding: "0.75rem",
+      border: "1px solid #d1d5db",
+      borderRadius: "0.375rem",
+      fontSize: "1rem"
+    };
+    const primaryButtonStyle = {
+      backgroundColor: "#3b82f6",
+      color: "white",
+      padding: "0.75rem 1rem",
+      border: "none",
+      borderRadius: "0.375rem",
+      cursor: "pointer",
+      fontSize: "1rem",
+      fontWeight: "500"
+    };
+    const secondaryButtonStyle = {
+      backgroundColor: "#e5e7eb",
+      color: "#374151",
+      padding: "0.75rem 1rem",
+      border: "none",
+      borderRadius: "0.375rem",
+      cursor: "pointer",
+      fontSize: "1rem",
+      fontWeight: "500"
+    };
+    return (_ctx, _cache) => {
+      return unref(auth).state === "signedIn" ? (openBlock(), createElementBlock("div", _hoisted_1$1, [
+        renderSlot(_ctx.$slots, "default")
+      ])) : (openBlock(), createElementBlock("div", {
+        key: 1,
+        style: containerStyle
+      }, [
+        createElementVNode("div", { style: cardStyle }, [
+          createElementVNode("h1", { style: headingStyle }, toDisplayString(_ctx.appName), 1),
+          error.value ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            style: errorStyle
+          }, toDisplayString(error.value), 1)) : createCommentVNode("", true),
+          createElementVNode("form", {
+            onSubmit: withModifiers(handleSignUp, ["prevent"]),
+            style: formStyle
+          }, [
+            withDirectives(createElementVNode("input", {
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => username.value = $event),
+              type: "text",
+              placeholder: "Display name",
+              autocomplete: "name",
+              style: inputStyle
+            }, null, 512), [
+              [vModelText, username.value]
+            ]),
+            createElementVNode("button", {
+              type: "submit",
+              style: primaryButtonStyle
+            }, " Sign up ")
+          ], 32),
+          createElementVNode("button", {
+            onClick: handleLogIn,
+            style: secondaryButtonStyle
+          }, " Log in with existing account ")
+        ])
+      ]));
+    };
+  }
+});
+const _hoisted_1 = ["src", "width", "height", "alt", "loading"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "Image",
+  props: {
+    imageId: {},
+    width: {},
+    height: {},
+    alt: {},
+    classNames: {},
+    style: {},
+    loading: { default: "eager" }
+  },
+  setup(__props) {
+    const props = __props;
+    const image = useCoState(ImageDefinition, props.imageId, {});
+    let lastBestImage = null;
+    const waitingLazyLoading = ref(props.loading === "lazy");
+    const lazyPlaceholder = computed(
+      () => waitingLazyLoading.value ? URL.createObjectURL(emptyPixelBlob) : void 0
+    );
+    const dimensions = computed(() => {
+      var _a, _b, _c, _d;
+      const originalWidth = (_b = (_a = image.value) == null ? void 0 : _a.originalSize) == null ? void 0 : _b[0];
+      const originalHeight = (_d = (_c = image.value) == null ? void 0 : _c.originalSize) == null ? void 0 : _d[1];
+      if (props.width === "original" && props.height === "original") {
+        return { width: originalWidth, height: originalHeight };
+      }
+      if (props.width === "original" && typeof props.height === "number") {
+        if (originalWidth && originalHeight) {
+          return {
+            width: Math.round(props.height * originalWidth / originalHeight),
+            height: props.height
+          };
+        }
+        return { width: void 0, height: props.height };
+      }
+      if (props.height === "original" && typeof props.width === "number") {
+        if (originalWidth && originalHeight) {
+          return {
+            width: props.width,
+            height: Math.round(props.width * originalHeight / originalWidth)
+          };
+        }
+        return { width: props.width, height: void 0 };
+      }
+      return {
+        width: props.width === "original" ? originalWidth : props.width,
+        height: props.height === "original" ? originalHeight : props.height
+      };
+    });
+    const src = computed(() => {
+      if (waitingLazyLoading.value) {
+        return lazyPlaceholder.value;
+      }
+      if (!image.value) return void 0;
+      const bestImage = highestResAvailable(
+        image.value,
+        dimensions.value.width || dimensions.value.height || 9999,
+        dimensions.value.height || dimensions.value.width || 9999
+      );
+      if (!bestImage) return image.value.placeholderDataURL;
+      if ((lastBestImage == null ? void 0 : lastBestImage[0]) === bestImage.image.id) return lastBestImage == null ? void 0 : lastBestImage[1];
+      const blob = bestImage.image.toBlob();
+      if (blob) {
+        const url = URL.createObjectURL(blob);
+        revokeObjectURL(lastBestImage == null ? void 0 : lastBestImage[1]);
+        lastBestImage = [bestImage.image.id, url];
+        return url;
+      }
+      return image.value.placeholderDataURL;
+    });
+    const onThresholdReached = () => {
+      waitingLazyLoading.value = false;
+    };
+    onUnmounted(() => {
+      revokeObjectURL(lastBestImage == null ? void 0 : lastBestImage[1]);
+    });
+    function revokeObjectURL(url) {
+      if (url && url.startsWith("blob:")) {
+        URL.revokeObjectURL(url);
+      }
+    }
+    const emptyPixelBlob = new Blob(
+      [
+        Uint8Array.from(
+          atob(
+            "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg=="
+          ),
+          (c) => c.charCodeAt(0)
+        )
+      ],
+      { type: "image/png" }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("img", {
+        src: src.value,
+        width: dimensions.value.width,
+        height: dimensions.value.height,
+        alt: _ctx.alt,
+        class: normalizeClass(_ctx.classNames),
+        style: normalizeStyle(_ctx.style),
+        loading: _ctx.loading,
+        onLoad: _cache[0] || (_cache[0] = ($event) => waitingLazyLoading.value ? onThresholdReached() : void 0)
+      }, null, 46, _hoisted_1);
+    };
+  }
+});
+export {
+  _sfc_main as Image,
+  d as JazzProvider,
+  JazzVueProvider,
+  JazzVueProviderWithClerk,
+  _sfc_main$1 as PasskeyAuthBasicUI,
+  createImage,
+  createInviteLink,
+  experimental_useInboxSender,
+  logoutHandler,
+  parseInviteLink,
+  useAcceptInvite,
+  useAccount,
+  useAuthSecretStorage,
+  useClerkAuth,
+  useCoState,
+  useIsAuthenticated,
+  useJazzContext,
+  useJazzContextManager,
+  usePasskeyAuth,
+  usePassphraseAuth
+};
+//# sourceMappingURL=index.js.map