community-jazz-vue 0.15.4

package/src/composables.ts

@@ -0,0 +1,323 @@
+import {
+  Account,
+  AccountClass,
+  AnonymousJazzAgent,
+  AnyAccountSchema,
+  type AuthSecretStorage,
+  type CoValue,
+  CoValueClassOrSchema,
+  InboxSender,
+  InstanceOfSchema,
+  type JazzAuthContext,
+  JazzContextManager,
+  type JazzContextType,
+  type Loaded,
+  type RefsToResolve,
+  ResolveQuery,
+  ResolveQueryStrict,
+  coValueClassFromCoValueClassOrSchema,
+  subscribeToCoValue,
+} from "jazz-tools";
+import { consumeInviteLinkFromWindowLocation } from "jazz-tools/browser";
+import {
+  type ComputedRef,
+  type Ref,
+  type ShallowRef,
+  computed,
+  inject,
+  markRaw,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  ref,
+  shallowRef,
+  toRaw,
+  watch,
+} from "vue";
+
+import {
+  JazzAuthContextSymbol,
+  JazzContextManagerSymbol,
+  JazzContextSymbol,
+} from "./provider.js";
+
+export const logoutHandler = ref<() => void>();
+
+function getCurrentAccountFromContextManager<Acc extends Account>(
+  contextManager: JazzContextManager<Acc, any>,
+) {
+  const context = contextManager.getCurrentValue();
+
+  if (!context) {
+    throw new Error("No context found");
+  }
+
+  return "me" in context ? context.me : context.guest;
+}
+
+export function useJazzContext<Acc extends Account>(): Ref<
+  JazzContextType<Acc>,
+  JazzContextType<Acc>
+> {
+  const context = inject<Ref<JazzContextType<Acc>>>(JazzContextSymbol);
+  if (!context) {
+    throw new Error("useJazzContext must be used within a JazzProvider");
+  }
+  return context;
+}
+
+export function useJazzContextManager<Acc extends Account>() {
+  const context = inject<Ref<JazzContextManager<Acc, {}>>>(
+    JazzContextManagerSymbol,
+  );
+
+  if (!context?.value) {
+    throw new Error(
+      "You need to set up a JazzProvider on top of your app to use this hook.",
+    );
+  }
+
+  return context;
+}
+
+export function useAuthSecretStorage() {
+  const context = inject<AuthSecretStorage>(JazzAuthContextSymbol);
+  if (!context) {
+    throw new Error("useAuthSecretStorage must be used within a JazzProvider");
+  }
+  return context;
+}
+
+export function useAccount<
+  A extends AccountClass<Account> | AnyAccountSchema = typeof Account,
+  R extends ResolveQuery<A> = true,
+>(
+  AccountSchema: A = Account as unknown as A,
+  options?: {
+    resolve?: ResolveQueryStrict<A, R>;
+  },
+): {
+  me: ComputedRef<Loaded<A, R> | undefined | null>;
+  agent: AnonymousJazzAgent | Loaded<A, true>;
+  logOut: () => void;
+} {
+  const context = useJazzContext();
+  const contextManager = useJazzContextManager<InstanceOfSchema<A>>();
+
+  if (!context.value) {
+    throw new Error("useAccount must be used within a JazzProvider");
+  }
+
+  const agent = getCurrentAccountFromContextManager(contextManager.value);
+
+  // Handle guest mode - return null for me and the guest agent
+  if (!("me" in context.value)) {
+    return {
+      me: computed(() => null) as any,
+      agent: agent,
+      logOut: context.value.logOut,
+    };
+  }
+
+  const contextMe = context.value.me as InstanceOfSchema<A>;
+
+  const me = useCoState(AccountSchema as any, contextMe.id, options as any);
+
+  return {
+    me: computed(() => {
+      const value =
+        options?.resolve === undefined ? me.value || contextMe : me.value;
+      return value ? markRaw(value) : value;
+    }) as any,
+    agent: agent,
+    logOut: context.value.logOut,
+  };
+}
+
+export function useCoState<
+  S extends CoValueClassOrSchema,
+  const R extends RefsToResolve<S> = true,
+>(
+  Schema: S,
+  id: string | undefined,
+  options?: { resolve?: ResolveQueryStrict<S, R> },
+): Ref<Loaded<S, R> | undefined | null> {
+  const state: ShallowRef<Loaded<S, R> | undefined | null> =
+    shallowRef(undefined);
+  const context = useJazzContext();
+
+  if (!context.value) {
+    throw new Error("useCoState must be used within a JazzProvider");
+  }
+
+  let unsubscribe: (() => void) | undefined;
+
+  watch(
+    [() => id, context],
+    ([currentId, currentContext]) => {
+      if (unsubscribe) {
+        unsubscribe();
+        unsubscribe = undefined;
+      }
+
+      if (!currentId || !currentContext) {
+        state.value = undefined;
+        return;
+      }
+
+      const loadAsAgent =
+        "me" in currentContext ? currentContext.me : currentContext.guest;
+      if (!loadAsAgent) {
+        state.value = undefined;
+        return;
+      }
+
+      const safeLoadAsAgent = toRaw(loadAsAgent);
+
+      try {
+        unsubscribe = subscribeToCoValue(
+          coValueClassFromCoValueClassOrSchema(Schema),
+          currentId as any,
+          {
+            resolve: options?.resolve as any,
+            loadAs: safeLoadAsAgent,
+            onUnavailable: () => {
+              state.value = null;
+            },
+            onUnauthorized: () => {
+              state.value = null;
+            },
+            syncResolution: true,
+          },
+          (value: any) => {
+            // Use markRaw to prevent Vue from making Jazz objects reactive
+            // but still allow property access and mutations
+            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 = undefined;
+    }
+  });
+
+  return state;
+}
+
+export function useAcceptInvite<S extends CoValueClassOrSchema>({
+  invitedObjectSchema,
+  onAccept,
+  forValueHint,
+}: {
+  invitedObjectSchema: S;
+  onAccept: (projectID: string) => void;
+  forValueHint?: string;
+}): void {
+  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 as JazzAuthContext<Account>).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();
+      }
+    },
+  );
+}
+
+export function experimental_useInboxSender<
+  I extends CoValue,
+  O extends CoValue | undefined,
+>(inboxOwnerID: string | undefined) {
+  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 as JazzAuthContext<Account>).me);
+  const inboxRef = ref<Promise<InboxSender<I, O>> | undefined>(undefined);
+
+  const sendMessage = async (message: I) => {
+    if (!inboxOwnerID) throw new Error("Inbox owner ID is required");
+
+    if (!inboxRef.value) {
+      const inbox = InboxSender.load<I, O>(inboxOwnerID, toRaw(me.value));
+      inboxRef.value = inbox;
+    }
+
+    let inbox = await inboxRef.value;
+
+    if (inbox.owner.id !== inboxOwnerID) {
+      const req = InboxSender.load<I, O>(inboxOwnerID, toRaw(me.value));
+      inboxRef.value = req;
+      inbox = await req;
+    }
+
+    return inbox.sendMessage(message);
+  };
+
+  watch(
+    () => inboxOwnerID,
+    () => {
+      inboxRef.value = undefined;
+    },
+  );
+
+  return sendMessage;
+}
+
+// useAccountOrGuest has been removed in v0.15.4 to match React library.
+// It has been merged into useAccount which now handles both authenticated and guest scenarios.
+// This change maintains 1:1 API compatibility with the React Jazz library.
+// If you were using useAccountOrGuest, please migrate to useAccount.

package/src/index.ts

@@ -0,0 +1,14 @@
+export * from "./composables.js";
+export { JazzProvider, JazzVueProvider } from "./provider.js";
+
+export * from "./auth/usePassphraseAuth.js";
+export * from "./auth/useIsAuthenticated.js";
+export * from "./auth/usePasskeyAuth.js";
+export * from "./auth/useClerkAuth.js";
+export { JazzVueProviderWithClerk } from "./auth/JazzVueProviderWithClerk.js";
+export { default as PasskeyAuthBasicUI } from "./auth/PasskeyAuthBasicUI.vue";
+
+export { default as Image } from "./Image.vue";
+
+export { createInviteLink, parseInviteLink } from "jazz-tools/browser";
+export { createImage } from "jazz-tools/media";

package/src/provider.ts

@@ -0,0 +1,192 @@
+import type {
+  Account,
+  AccountClass,
+  AnyAccountSchema,
+  CoValueFromRaw,
+  JazzContextType,
+  SyncConfig,
+} from "jazz-tools";
+import { JazzBrowserContextManager } from "jazz-tools/browser";
+import {
+  type PropType,
+  defineComponent,
+  markRaw,
+  nextTick,
+  onUnmounted,
+  provide,
+  ref,
+  shallowRef,
+  toRaw,
+  watch,
+} from "vue";
+
+export const logoutHandler = ref<() => void>();
+
+export const JazzContextSymbol = Symbol("JazzContext");
+export const JazzContextManagerSymbol = Symbol("JazzContextManager");
+export const JazzAuthContextSymbol = Symbol("JazzAuthContext");
+
+export const JazzVueProvider = defineComponent({
+  name: "JazzProvider",
+  props: {
+    AccountSchema: {
+      type: [Function, Object] 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,
+    },
+    logOutReplacement: {
+      type: Function as PropType<() => void>,
+      required: false,
+    },
+    onAnonymousAccountDiscarded: {
+      type: Function as PropType<(anonymousAccount: Account) => Promise<void>>,
+      required: false,
+    },
+    enableSSR: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props, { slots }) {
+    const contextManager = markRaw(
+      new JazzBrowserContextManager<
+        (AccountClass<Account> & CoValueFromRaw<Account>) | AnyAccountSchema
+      >({
+        useAnonymousFallback: props.enableSSR,
+      }),
+    );
+
+    // Use shallowRef to avoid deep reactivity on Jazz objects
+    const ctx = shallowRef<JazzContextType<any>>();
+
+    provide(JazzContextSymbol, ctx);
+    provide(JazzContextManagerSymbol, ref(contextManager));
+    provide(
+      JazzAuthContextSymbol,
+      markRaw(contextManager.getAuthSecretStorage()),
+    );
+
+    // Simple context creation flag to prevent rapid recreation
+    let contextCreationInProgress = false;
+
+    // Watch for prop changes and recreate context when needed
+    watch(
+      [
+        () => props.sync.peer,
+        () => props.sync.when,
+        () => props.storage,
+        () => props.guestMode,
+        () => props.AccountSchema,
+      ],
+      async (newValues, oldValues) => {
+        // Prevent rapid re-creation during initialization
+        if (contextCreationInProgress) return;
+
+        // Efficient O(1) change detection - skip if no actual changes
+        if (
+          oldValues &&
+          newValues[0] === oldValues[0] && // sync.peer
+          newValues[1] === oldValues[1] && // sync.when
+          newValues[2] === oldValues[2] && // storage
+          newValues[3] === oldValues[3] && // guestMode
+          newValues[4] === oldValues[4] // AccountSchema
+        ) {
+          return;
+        }
+
+        contextCreationInProgress = true;
+
+        try {
+          await contextManager.createContext({
+            AccountSchema: props.AccountSchema,
+            guestMode: props.guestMode,
+            sync: props.sync,
+            storage: props.storage,
+            defaultProfileName: props.defaultProfileName,
+            onLogOut: props.onLogOut,
+            logOutReplacement: props.logOutReplacement,
+            onAnonymousAccountDiscarded: props.onAnonymousAccountDiscarded,
+          });
+        } catch (error) {
+          console.error("Error creating Jazz browser context:", error);
+        } finally {
+          contextCreationInProgress = false;
+        }
+      },
+      { immediate: true },
+    );
+
+    // Set up context manager subscription with complete isolation
+    let lastValue: any = undefined;
+    let isUpdating = false;
+
+    const cleanup = contextManager.subscribe(() => {
+      if (isUpdating) return;
+
+      isUpdating = true;
+      try {
+        const rawContextManager = toRaw(contextManager);
+        let currentValue = rawContextManager.getCurrentValue();
+
+        if (currentValue === lastValue) return;
+
+        // Use markRaw to prevent Vue reactivity
+        if (currentValue && typeof currentValue === "object") {
+          currentValue = markRaw(toRaw(currentValue));
+        }
+
+        lastValue = currentValue;
+
+        ctx.value = currentValue;
+      } catch (error) {
+        console.error("Error in context manager subscription:", error);
+        ctx.value = undefined;
+      } finally {
+        isUpdating = false;
+      }
+    });
+
+    onUnmounted(() => {
+      cleanup();
+    });
+
+    onUnmounted(() => {
+      if (ctx.value) ctx.value.done?.();
+
+      // Only call done() in production, not in development (for HMR)
+      if (process.env.NODE_ENV !== "development") {
+        contextManager.done();
+      }
+    });
+
+    // Simple render function - render children when context exists
+    return () => (ctx.value ? slots.default?.() : null);
+  },
+});
+
+/**
+ * Alias to JazzVueProvider for backward compatibility
+ * @deprecated Use JazzVueProvider instead
+ */
+export const JazzProvider = JazzVueProvider;

package/src/testing.ts

@@ -0,0 +1,45 @@
+import type { Account, AnonymousJazzAgent } from "jazz-tools";
+import { TestJazzContextManager } from "jazz-tools/testing";
+import { provide } from "vue";
+import { type PropType, defineComponent, ref } from "vue";
+import {
+  JazzAuthContextSymbol,
+  JazzContextManagerSymbol,
+  JazzContextSymbol,
+} from "./provider.js";
+
+export const JazzTestProvider = defineComponent({
+  name: "JazzTestProvider",
+  props: {
+    account: {
+      type: Object as PropType<Account | { guest: AnonymousJazzAgent }>,
+      required: false,
+    },
+    isAuthenticated: {
+      type: Boolean,
+      required: false,
+    },
+  },
+  setup(props, { slots }) {
+    const contextManager = TestJazzContextManager.fromAccountOrGuest(
+      props.account,
+      {
+        isAuthenticated: props.isAuthenticated,
+      },
+    );
+
+    provide(JazzContextSymbol, ref(contextManager.getCurrentValue()));
+    provide(JazzContextManagerSymbol, ref(contextManager));
+    provide(JazzAuthContextSymbol, contextManager.getAuthSecretStorage());
+
+    return () => slots.default?.();
+  },
+});
+
+export {
+  createJazzTestAccount,
+  createJazzTestGuest,
+  linkAccounts,
+  setActiveAccount,
+  setupJazzTestSync,
+} from "jazz-tools/testing";