community-jazz-vue 0.15.4

package/src/Image.vue

@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import { ImageDefinition } from "jazz-tools";
+import { highestResAvailable } from "jazz-tools/media";
+import { onUnmounted, ref, watch, computed } from "vue";
+import { useCoState } from "./composables.js";
+
+export interface ImageProps {
+  /** The ID of the ImageDefinition to display */
+  imageId: string;
+  /**
+   * The desired width of the image. Can be a number in pixels or "original" to use the image's original width.
+   * When set to a number, the component will select the best available resolution and maintain aspect ratio.
+   */
+  width?: number | "original";
+  /**
+   * The desired height of the image. Can be a number in pixels or "original" to use the image's original height.
+   * When set to a number, the component will select the best available resolution and maintain aspect ratio.
+   */
+  height?: number | "original";
+  /** Alt text for the image */
+  alt?: string;
+  /** CSS classes to apply to the image */
+  classNames?: string;
+  /** CSS styles to apply to the image */
+  style?: string | Record<string, string>;
+  /** Loading strategy for the image */
+  loading?: "lazy" | "eager";
+}
+
+const props = withDefaults(defineProps<ImageProps>(), {
+  loading: "eager",
+});
+
+const image = useCoState(ImageDefinition, props.imageId, {});
+let lastBestImage: [string, string] | null = null;
+
+/**
+ * For lazy loading, we use the browser's strategy for images with loading="lazy".
+ * We use an empty image, and when the browser triggers the load event, we load the best available image.
+ */
+const waitingLazyLoading = ref(props.loading === "lazy");
+const lazyPlaceholder = computed(() =>
+  waitingLazyLoading.value ? URL.createObjectURL(emptyPixelBlob) : undefined,
+);
+
+const dimensions = computed(() => {
+  const originalWidth = image.value?.originalSize?.[0];
+  const originalHeight = image.value?.originalSize?.[1];
+
+  // Both width and height are "original"
+  if (props.width === "original" && props.height === "original") {
+    return { width: originalWidth, height: originalHeight };
+  }
+
+  // Width is "original", height is a number
+  if (props.width === "original" && typeof props.height === "number") {
+    if (originalWidth && originalHeight) {
+      return {
+        width: Math.round((props.height * originalWidth) / originalHeight),
+        height: props.height,
+      };
+    }
+    return { width: undefined, height: props.height };
+  }
+
+  // Height is "original", width is a number
+  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: undefined };
+  }
+
+  // In all other cases, use the property value:
+  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 undefined;
+
+  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?.[0] === bestImage.image.id) return lastBestImage?.[1];
+
+  const blob = bestImage.image.toBlob();
+
+  if (blob) {
+    const url = URL.createObjectURL(blob);
+    revokeObjectURL(lastBestImage?.[1]);
+    lastBestImage = [bestImage.image.id, url];
+    return url;
+  }
+
+  return image.value.placeholderDataURL;
+});
+
+const onThresholdReached = () => {
+  waitingLazyLoading.value = false;
+};
+
+// Cleanup object URL on component destroy
+onUnmounted(() => {
+  revokeObjectURL(lastBestImage?.[1]);
+});
+
+function revokeObjectURL(url: string | undefined) {
+  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" },
+);
+</script>
+
+<template>
+  <img
+    :src="src"
+    :width="dimensions.width"
+    :height="dimensions.height"
+    :alt="alt"
+    :class="classNames"
+    :style="style"
+    :loading="loading"
+    @load="waitingLazyLoading ? onThresholdReached() : undefined"
+  />
+</template>

package/src/auth/JazzVueProviderWithClerk.ts

@@ -0,0 +1,123 @@
+import type {
+  Account,
+  AccountClass,
+  AnyAccountSchema,
+  CoValueFromRaw,
+  SyncConfig,
+} from "jazz-tools";
+import {
+  InMemoryKVStore,
+  JazzClerkAuth,
+  KvStoreContext,
+  type MinimalClerkClient,
+} from "jazz-tools";
+import { LocalStorageKVStore } from "jazz-tools/browser";
+import { type PropType, defineComponent, h, onMounted, ref } from "vue";
+import { JazzVueProvider } from "../provider.js";
+import { useClerkAuth } from "./useClerkAuth.js";
+
+function setupKvStore() {
+  KvStoreContext.getInstance().initialize(
+    typeof window === "undefined"
+      ? new InMemoryKVStore()
+      : new LocalStorageKVStore(),
+  );
+}
+
+const RegisterClerkAuth = defineComponent({
+  name: "RegisterClerkAuth",
+  props: {
+    clerk: {
+      type: Object as PropType<MinimalClerkClient>,
+      required: true,
+    },
+  },
+  setup(props, { slots }) {
+    useClerkAuth(props.clerk);
+    return () => slots.default?.();
+  },
+});
+
+export const JazzVueProviderWithClerk = defineComponent({
+  name: "JazzVueProviderWithClerk",
+  props: {
+    clerk: {
+      type: Object as PropType<MinimalClerkClient>,
+      required: true,
+    },
+    AccountSchema: {
+      type: Function as unknown as PropType<
+        (AccountClass<Account> & CoValueFromRaw<Account>) | AnyAccountSchema
+      >,
+      required: false,
+    },
+    guestMode: {
+      type: Boolean,
+      default: false,
+    },
+    sync: {
+      type: Object as PropType<SyncConfig>,
+      required: true,
+    },
+    storage: {
+      type: String as PropType<"indexedDB">,
+      default: undefined,
+    },
+    defaultProfileName: {
+      type: String,
+      required: false,
+    },
+    onLogOut: {
+      type: Function as PropType<() => void>,
+      required: false,
+    },
+    onAnonymousAccountDiscarded: {
+      type: Function as PropType<(anonymousAccount: any) => Promise<void>>,
+      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);
+        // Still render even if auth init fails
+        isLoaded.value = true;
+      }
+    });
+
+    return () => {
+      if (!isLoaded.value) {
+        return null;
+      }
+
+      // Destructure props to exclude 'clerk' which JazzVueProvider doesn't accept
+      const { clerk, ...jazzProviderProps } = props;
+
+      return h(
+        JazzVueProvider,
+        {
+          ...jazzProviderProps,
+          logOutReplacement: clerk.signOut,
+        },
+        {
+          default: () =>
+            h(
+              RegisterClerkAuth,
+              { clerk },
+              { default: () => slots.default?.() },
+            ),
+        },
+      );
+    };
+  },
+});

package/src/auth/PasskeyAuthBasicUI.vue

@@ -0,0 +1,153 @@
+<template>
+  <div v-if="auth.state === 'signedIn'">
+    <slot />
+  </div>
+  <div v-else :style="containerStyle">
+    <div :style="cardStyle">
+      <h1 :style="headingStyle">{{ appName }}</h1>
+      
+      <div v-if="error" :style="errorStyle">
+        {{ error }}
+      </div>
+
+      <form @submit.prevent="handleSignUp" :style="formStyle">
+        <input
+          v-model="username"
+          type="text"
+          placeholder="Display name"
+          autocomplete="name"
+          :style="inputStyle"
+        />
+        <button type="submit" :style="primaryButtonStyle">
+          Sign up
+        </button>
+      </form>
+
+      <button @click="handleLogIn" :style="secondaryButtonStyle">
+        Log in with existing account
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { usePasskeyAuth } from "./usePasskeyAuth.js";
+
+interface Props {
+  appName: string;
+  appHostname?: string;
+}
+
+const props = defineProps<Props>();
+
+const username = ref("");
+const error = ref<string | null>(null);
+
+const auth = usePasskeyAuth({
+  appName: props.appName,
+  appHostname: props.appHostname,
+});
+
+function handleError(err: Error) {
+  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 as Error);
+  }
+};
+
+const handleLogIn = async () => {
+  error.value = null;
+  try {
+    await auth.value.logIn();
+  } catch (err) {
+    handleError(err as Error);
+  }
+};
+
+// Styles (matching React version)
+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" as const,
+  gap: "2rem",
+};
+
+const headingStyle = {
+  fontSize: "1.5rem",
+  fontWeight: "bold",
+  textAlign: "center" as const,
+  margin: "0",
+};
+
+const errorStyle = {
+  color: "red",
+  fontSize: "0.875rem",
+  textAlign: "center" as const,
+};
+
+const formStyle = {
+  display: "flex",
+  flexDirection: "column" as const,
+  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",
+};
+</script>

package/src/auth/useClerkAuth.ts

@@ -0,0 +1,35 @@
+import { JazzClerkAuth, type MinimalClerkClient } from "jazz-tools";
+import { computed, markRaw, onMounted, onUnmounted } from "vue";
+import { useAuthSecretStorage, useJazzContext } from "../composables.js";
+
+export function useClerkAuth(clerk: MinimalClerkClient) {
+  const context = useJazzContext();
+  const authSecretStorage = useAuthSecretStorage();
+
+  if ("guest" in context.value) {
+    throw new Error("Clerk auth is not supported in guest mode");
+  }
+
+  // Create auth method similar to React's useMemo pattern
+  const authMethod = computed(() => {
+    return markRaw(
+      new JazzClerkAuth(context.value.authenticate, authSecretStorage),
+    );
+  });
+
+  onMounted(() => {
+    const cleanup = authMethod.value.registerListener(clerk) as
+      | (() => void)
+      | void;
+
+    onUnmounted(() => {
+      // Clerk's addListener returns a cleanup function, but the type says void
+      // Handle both cases for type safety
+      if (typeof cleanup === "function") {
+        cleanup();
+      }
+    });
+  });
+
+  return authMethod.value;
+}

package/src/auth/useIsAuthenticated.ts

@@ -0,0 +1,21 @@
+import { onUnmounted, ref } from "vue";
+import { useAuthSecretStorage } from "../composables.js";
+
+export function useIsAuthenticated() {
+  const authSecretStorage = useAuthSecretStorage();
+  const isAuthenticated = ref(authSecretStorage.isAuthenticated);
+
+  const handleUpdate = (newIsAuthenticated: boolean) => {
+    isAuthenticated.value = newIsAuthenticated;
+  };
+
+  // Set up the listener immediately, not waiting for onMounted
+  // This ensures we catch auth state changes that happen before mounting
+  const cleanup = authSecretStorage.onUpdate(handleUpdate);
+
+  onUnmounted(() => {
+    cleanup();
+  });
+
+  return isAuthenticated;
+}

package/src/auth/usePasskeyAuth.ts

@@ -0,0 +1,48 @@
+import { BrowserPasskeyAuth } from "jazz-tools/browser";
+import { computed, markRaw } from "vue";
+import { useAuthSecretStorage, useJazzContext } from "../composables.js";
+import { useIsAuthenticated } from "./useIsAuthenticated.js";
+
+/**
+ * `usePasskeyAuth` composable provides a `JazzAuth` object for passkey authentication.
+ *
+ * @example
+ * ```ts
+ * const auth = usePasskeyAuth({ appName, appHostname });
+ * ```
+ *
+ * @category Auth Providers
+ */
+export function usePasskeyAuth({
+  appName,
+  appHostname,
+}: {
+  appName: string;
+  appHostname?: string;
+}) {
+  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,
+  }));
+}

package/src/auth/usePassphraseAuth.ts

@@ -0,0 +1,57 @@
+import { PassphraseAuth } from "jazz-tools";
+import { computed, markRaw, ref, watchEffect } from "vue";
+import { useAuthSecretStorage, useJazzContext } from "../composables.js";
+import { useIsAuthenticated } from "./useIsAuthenticated.js";
+
+/**
+ * `usePassphraseAuth` composable provides a `JazzAuth` object for passphrase authentication.
+ *
+ * @example
+ * ```ts
+ * const auth = usePassphraseAuth({ wordlist });
+ * ```
+ *
+ * @category Auth Providers
+ */
+export function usePassphraseAuth({ wordlist }: { wordlist: string[] }) {
+  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,
+  }));
+}