jazz-vue 0.11.8 → 0.12.1

package/dist/index.js

@@ -1,7 +1,7 @@
 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 { ref, inject, computed, toRaw, shallowRef, watch, unref, onUnmounted, 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();
@@ -19,64 +19,57 @@ function useAuthSecretStorage() {
   }
   return context;
 }
-function createUseAccountComposables() {
-  function useAccount2(depth) {
-    const context = useJazzContext();
-    if (!context.value) {
-      throw new Error("useAccount must be used within a JazzProvider");
-    }
-    if (!("me" in context.value)) {
-      throw new Error(
-        "useAccount can't be used in a JazzProvider with auth === 'guest' - consider using useAccountOrGuest()"
-      );
-    }
-    const contextMe = context.value.me;
-    const me = useCoState(
-      contextMe.constructor,
-      contextMe.id,
-      depth
-    );
-    return {
-      me: computed(() => {
-        const value = depth === void 0 ? me.value || toRaw(context.value.me) : me.value;
-        return value ? toRaw(value) : value;
-      }),
-      logOut: context.value.logOut
-    };
+function useAccount(options) {
+  const context = useJazzContext();
+  if (!context.value) {
+    throw new Error("useAccount must be used within a JazzProvider");
   }
-  function useAccountOrGuest2(depth) {
-    var _a, _b;
-    const context = useJazzContext();
-    if (!context.value) {
-      throw new Error("useAccountOrGuest must be used within a JazzProvider");
-    }
-    const contextMe = computed(
-      () => "me" in context.value ? context.value.me : void 0
-    );
-    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)) {
+    throw new Error(
+      "useAccount can't be used in a JazzProvider with auth === 'guest' - consider using useAccountOrGuest()"
     );
-    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))
-      };
-    }
   }
+  const contextMe = context.value.me;
+  const me = useCoState(
+    contextMe.constructor,
+    contextMe.id,
+    options
+  );
   return {
-    useAccount: useAccount2,
-    useAccountOrGuest: useAccountOrGuest2
+    me: computed(() => {
+      const value = (options == null ? void 0 : options.resolve) === void 0 ? me.value || toRaw(context.value.me) : me.value;
+      return value ? toRaw(value) : value;
+    }),
+    logOut: context.value.logOut
   };
 }
-const { useAccount, useAccountOrGuest } = createUseAccountComposables();
-function useCoState(Schema, id, depth = []) {
+function useAccountOrGuest(options) {
+  var _a, _b;
+  const context = useJazzContext();
+  if (!context.value) {
+    throw new Error("useAccountOrGuest must be used within a JazzProvider");
+  }
+  const contextMe = computed(
+    () => "me" in context.value ? context.value.me : void 0
+  );
+  const me = useCoState(
+    (_a = contextMe.value) == null ? void 0 : _a.constructor,
+    (_b = contextMe.value) == null ? void 0 : _b.id,
+    options
+  );
+  if ("me" in context.value) {
+    return {
+      me: computed(
+        () => (options == null ? void 0 : options.resolve) === void 0 ? me.value || toRaw(context.value.me) : me.value
+      )
+    };
+  } else {
+    return {
+      me: computed(() => toRaw(context.value.guest))
+    };
+  }
+}
+function useCoState(Schema, id, options) {
   const state = shallowRef(void 0);
   const context = useJazzContext();
   if (!context.value) {
@@ -84,7 +77,7 @@ function useCoState(Schema, id, depth = []) {
   }
   let unsubscribe;
   watch(
-    [() => unref(id), () => context, () => Schema, () => depth],
+    [() => unref(id), () => context, () => Schema, () => options],
     () => {
       if (unsubscribe) unsubscribe();
       const idValue = unref(id);
@@ -92,15 +85,20 @@ function useCoState(Schema, id, depth = []) {
       unsubscribe = subscribeToCoValue(
         Schema,
         idValue,
-        "me" in context.value ? toRaw(context.value.me) : toRaw(context.value.guest),
-        depth,
+        {
+          resolve: options == null ? void 0 : options.resolve,
+          loadAs: "me" in context.value ? toRaw(context.value.me) : toRaw(context.value.guest),
+          onUnavailable: () => {
+            state.value = null;
+          },
+          onUnauthorized: () => {
+            state.value = null;
+          },
+          syncResolution: true
+        },
         (value) => {
           state.value = value;
-        },
-        () => {
-          state.value = null;
-        },
-        true
+        }
       );
     },
     { deep: true, immediate: true }
@@ -430,7 +428,6 @@ export {
   b as JazzProvider,
   _sfc_main as ProgressiveImg,
   createInviteLink,
-  createUseAccountComposables,
   logoutHandler,
   parseInviteLink,
   useAcceptInvite,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/composables.ts","../src/auth/useIsAuthenticated.ts","../src/auth/useDemoAuth.ts","../src/auth/usePassphraseAuth.ts","../src/auth/usePasskeyAuth.ts","../src/auth/DemoAuthBasicUI.vue","../src/ProgressiveImg.vue"],"sourcesContent":["import { consumeInviteLinkFromWindowLocation } from \"jazz-browser\";\nimport {\n  Account,\n  AnonymousJazzAgent,\n  AuthSecretStorage,\n  CoValue,\n  CoValueClass,\n  DeeplyLoaded,\n  DepthsIn,\n  ID,\n  JazzAuthContext,\n  JazzContextType,\n  JazzGuestContext,\n  subscribeToCoValue,\n} from \"jazz-tools\";\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport {\n  ComputedRef,\n  MaybeRef,\n  Ref,\n  ShallowRef,\n  computed,\n  inject,\n  onMounted,\n  onUnmounted,\n  ref,\n  shallowRef,\n  toRaw,\n  unref,\n  watch,\n} from \"vue\";\nimport {\n  JazzAuthContextSymbol,\n  JazzContextSymbol,\n  RegisteredAccount,\n} from \"./provider.js\";\n\nexport const logoutHandler = ref<() => void>();\n\nexport function useJazzContext() {\n  const context =\n    inject<Ref<JazzContextType<RegisteredAccount>>>(JazzContextSymbol);\n  if (!context?.value) {\n    throw new Error(\"useJazzContext must be used within a JazzProvider\");\n  }\n  return context;\n}\n\nexport function useAuthSecretStorage() {\n  const context = inject<AuthSecretStorage>(JazzAuthContextSymbol);\n  if (!context) {\n    throw new Error(\"useAuthSecretStorage must be used within a JazzProvider\");\n  }\n  return context;\n}\n\nexport function createUseAccountComposables<Acc extends Account>() {\n  function useAccount(): {\n    me: ComputedRef<Acc>;\n    logOut: () => void;\n  };\n  function useAccount<D extends DepthsIn<Acc>>(\n    depth: D,\n  ): {\n    me: ComputedRef<DeeplyLoaded<Acc, D> | undefined | null>;\n    logOut: () => void;\n  };\n  function useAccount<D extends DepthsIn<Acc>>(\n    depth?: D,\n  ): {\n    me: ComputedRef<Acc | DeeplyLoaded<Acc, D> | undefined | null>;\n    logOut: () => void;\n  } {\n    const context = useJazzContext();\n\n    if (!context.value) {\n      throw new Error(\"useAccount must be used within a JazzProvider\");\n    }\n\n    if (!(\"me\" in context.value)) {\n      throw new Error(\n        \"useAccount can't be used in a JazzProvider with auth === 'guest' - consider using useAccountOrGuest()\",\n      );\n    }\n\n    const contextMe = context.value.me as Acc;\n\n    const me = useCoState<Acc, D>(\n      contextMe.constructor as CoValueClass<Acc>,\n      contextMe.id,\n      depth,\n    );\n\n    return {\n      me: computed(() => {\n        const value =\n          depth === undefined\n            ? me.value || toRaw((context.value as JazzAuthContext<Acc>).me)\n            : me.value;\n\n        return value ? toRaw(value) : value;\n      }),\n      logOut: context.value.logOut,\n    };\n  }\n\n  function useAccountOrGuest(): {\n    me: ComputedRef<Acc | AnonymousJazzAgent>;\n  };\n  function useAccountOrGuest<D extends DepthsIn<Acc>>(\n    depth: D,\n  ): {\n    me: ComputedRef<\n      DeeplyLoaded<Acc, D> | undefined | null | AnonymousJazzAgent\n    >;\n  };\n  function useAccountOrGuest<D extends DepthsIn<Acc>>(\n    depth?: D,\n  ): {\n    me: ComputedRef<\n      Acc | DeeplyLoaded<Acc, D> | undefined | null | AnonymousJazzAgent\n    >;\n  } {\n    const context = useJazzContext();\n\n    if (!context.value) {\n      throw new Error(\"useAccountOrGuest must be used within a JazzProvider\");\n    }\n\n    const contextMe = computed(() =>\n      \"me\" in context.value ? (context.value.me as Acc) : undefined,\n    );\n\n    const me = useCoState<Acc, D>(\n      contextMe.value?.constructor as CoValueClass<Acc>,\n      contextMe.value?.id,\n      depth,\n    );\n\n    if (\"me\" in context.value) {\n      return {\n        me: computed(() =>\n          depth === undefined\n            ? me.value || toRaw((context.value as JazzAuthContext<Acc>).me)\n            : me.value,\n        ),\n      };\n    } else {\n      return {\n        me: computed(() => toRaw((context.value as JazzGuestContext).guest)),\n      };\n    }\n  }\n\n  return {\n    useAccount,\n    useAccountOrGuest,\n  };\n}\n\nconst { useAccount, useAccountOrGuest } =\n  createUseAccountComposables<RegisteredAccount>();\n\nexport { useAccount, useAccountOrGuest };\n\nexport function useCoState<V extends CoValue, D>(\n  Schema: CoValueClass<V>,\n  id: MaybeRef<ID<CoValue> | undefined>,\n  depth: D & DepthsIn<V> = [] as D & DepthsIn<V>,\n): Ref<DeeplyLoaded<V, D> | undefined | null> {\n  const state: ShallowRef<DeeplyLoaded<V, D> | undefined | null> =\n    shallowRef(undefined);\n  const context = useJazzContext();\n\n  if (!context.value) {\n    throw new Error(\"useCoState must be used within a JazzProvider\");\n  }\n\n  let unsubscribe: (() => void) | undefined;\n\n  watch(\n    [() => unref(id), () => context, () => Schema, () => depth],\n    () => {\n      if (unsubscribe) unsubscribe();\n\n      const idValue = unref(id);\n      if (!idValue) return;\n\n      unsubscribe = subscribeToCoValue(\n        Schema,\n        idValue,\n        \"me\" in context.value\n          ? toRaw(context.value.me)\n          : toRaw(context.value.guest),\n        depth,\n        (value) => {\n          state.value = value;\n        },\n        () => {\n          state.value = null;\n        },\n        true,\n      );\n    },\n    { deep: true, immediate: true },\n  );\n\n  onUnmounted(() => {\n    if (unsubscribe) unsubscribe();\n  });\n\n  const computedState = computed(() => state.value);\n\n  return computedState;\n}\n\nexport function useAcceptInvite<V extends CoValue>({\n  invitedObjectSchema,\n  onAccept,\n  forValueHint,\n}: {\n  invitedObjectSchema: CoValueClass<V>;\n  onAccept: (projectID: ID<V>) => void;\n  forValueHint?: string;\n}): void {\n  const context = useJazzContext();\n\n  if (!context.value) {\n    throw new Error(\"useAcceptInvite must be used within a JazzProvider\");\n  }\n\n  if (!(\"me\" in context.value)) {\n    throw new Error(\n      \"useAcceptInvite can't be used in a JazzProvider with auth === 'guest'.\",\n    );\n  }\n\n  const runInviteAcceptance = () => {\n    const result = consumeInviteLinkFromWindowLocation({\n      as: toRaw((context.value as JazzAuthContext<RegisteredAccount>).me),\n      invitedObjectSchema,\n      forValueHint,\n    });\n\n    result\n      .then((res) => res && onAccept(res.valueID))\n      .catch((e) => {\n        console.error(\"Failed to accept invite\", e);\n      });\n  };\n\n  onMounted(() => {\n    runInviteAcceptance();\n  });\n\n  watch(\n    () => onAccept,\n    (newOnAccept, oldOnAccept) => {\n      if (newOnAccept !== oldOnAccept) {\n        runInviteAcceptance();\n      }\n    },\n  );\n}\n","import { onMounted, onUnmounted, ref } from \"vue\";\nimport { useAuthSecretStorage } from \"../composables.js\";\n\nexport function useIsAuthenticated() {\n  const authSecretStorage = useAuthSecretStorage();\n  const isAuthenticated = ref(authSecretStorage.isAuthenticated);\n\n  const handleUpdate = () => {\n    isAuthenticated.value = authSecretStorage.isAuthenticated;\n  };\n\n  onMounted(() => {\n    const cleanup = authSecretStorage.onUpdate(handleUpdate);\n    onUnmounted(cleanup);\n  });\n\n  return isAuthenticated;\n}\n","import { DemoAuth } from \"jazz-tools\";\nimport { computed, ref, watch } from \"vue\";\nimport { useAuthSecretStorage, useJazzContext } from \"../composables.js\";\nimport { useIsAuthenticated } from \"./useIsAuthenticated.js\";\n\nexport function useDemoAuth() {\n  const context = useJazzContext();\n  const authSecretStorage = useAuthSecretStorage();\n\n  if (\"guest\" in context.value) {\n    throw new Error(\"Demo auth is not supported in guest mode\");\n  }\n\n  const authMethod = computed(\n    () => new DemoAuth(context.value.authenticate, authSecretStorage),\n  );\n\n  const existingUsers = ref<string[]>([]);\n  const isAuthenticated = useIsAuthenticated();\n\n  watch(authMethod, () => {\n    authMethod.value.getExistingUsers().then((users) => {\n      existingUsers.value = users;\n    });\n  });\n\n  return computed(() => ({\n    state: isAuthenticated.value ? \"signedIn\" : \"anonymous\",\n    logIn(username: string) {\n      authMethod.value.logIn(username);\n    },\n    signUp(username: string) {\n      authMethod.value.signUp(username);\n    },\n    existingUsers: existingUsers.value,\n  }));\n}\n","import { PassphraseAuth } from \"jazz-tools\";\nimport { computed, ref, watchEffect } from \"vue\";\nimport { useAuthSecretStorage, useJazzContext } from \"../composables.js\";\nimport { useIsAuthenticated } from \"./useIsAuthenticated.js\";\n\n/**\n * `usePassphraseAuth` composable provides a `JazzAuth` object for passphrase authentication.\n *\n * @example\n * ```ts\n * const auth = usePassphraseAuth({ wordlist });\n * ```\n *\n * @category Auth Providers\n */\nexport function usePassphraseAuth({\n  wordlist,\n}: {\n  wordlist: string[];\n}) {\n  const context = useJazzContext();\n  const authSecretStorage = useAuthSecretStorage();\n  const isAuthenticated = useIsAuthenticated();\n\n  if (\"guest\" in context.value) {\n    throw new Error(\"Passphrase auth is not supported in guest mode\");\n  }\n\n  const authMethod = computed(() => {\n    return new PassphraseAuth(\n      context.value.node.crypto,\n      context.value.authenticate,\n      context.value.register,\n      authSecretStorage,\n      wordlist,\n    );\n  });\n\n  const passphrase = ref(authMethod.value.passphrase);\n\n  watchEffect((onCleanup) => {\n    authMethod.value.loadCurrentAccountPassphrase();\n\n    const unsubscribe = authMethod.value.subscribe(() => {\n      passphrase.value = authMethod.value.passphrase;\n    });\n\n    onCleanup(unsubscribe);\n  });\n\n  return computed(() => ({\n    state: isAuthenticated.value ? \"signedIn\" : \"anonymous\",\n    logIn: authMethod.value.logIn,\n    signUp: authMethod.value.signUp,\n    registerNewAccount: authMethod.value.registerNewAccount,\n    generateRandomPassphrase: authMethod.value.generateRandomPassphrase,\n    passphrase: passphrase.value,\n  }));\n}\n","import { BrowserPasskeyAuth } from \"jazz-browser\";\nimport { computed } from \"vue\";\nimport { useAuthSecretStorage, useJazzContext } from \"../composables.js\";\nimport { useIsAuthenticated } from \"./useIsAuthenticated.js\";\n\n/**\n * `usePasskeyAuth` composable provides a `JazzAuth` object for passkey authentication.\n *\n * @example\n * ```ts\n * const auth = usePasskeyAuth({ appName, appHostname });\n * ```\n *\n * @category Auth Providers\n */\nexport function usePasskeyAuth({\n  appName,\n  appHostname,\n}: {\n  appName: string;\n  appHostname?: string;\n}) {\n  const context = useJazzContext();\n  const authSecretStorage = useAuthSecretStorage();\n  const isAuthenticated = useIsAuthenticated();\n\n  if (\"guest\" in context.value) {\n    throw new Error(\"Passkey auth is not supported in guest mode\");\n  }\n\n  const authMethod = computed(() => {\n    return new BrowserPasskeyAuth(\n      context.value.node.crypto,\n      context.value.authenticate,\n      authSecretStorage,\n      appName,\n      appHostname,\n    );\n  });\n\n  return computed(() => ({\n    state: isAuthenticated.value ? \"signedIn\" : \"anonymous\",\n    logIn: authMethod.value.logIn,\n    signUp: authMethod.value.signUp,\n  }));\n}\n","<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { useDemoAuth } from \"./useDemoAuth.js\";\n\ninterface Props {\n  appName: string;\n}\n\ndefineProps<Props>();\ndefineSlots<{\n  default?: () => any;\n}>();\n\nconst auth = useDemoAuth();\nconst username = ref(\"\");\n\nconst darkMode =\n  typeof window !== \"undefined\"\n    ? window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n    : false;\n\nconst handleSubmit = (e: Event) => {\n  e.preventDefault();\n  auth.value.signUp(username.value);\n};\n</script>\n\n<template>\n  <slot v-if=\"auth.state === 'signedIn'\" />\n  <div\n    v-else\n    :style=\"{\n      minHeight: '100%',\n      display: 'flex',\n      flexDirection: 'column',\n      justifyContent: 'center',\n      width: '18rem',\n      maxWidth: 'calc(100vw - 2rem)',\n      gap: '2rem',\n      margin: '0 auto'\n    }\"\n  >\n    <h1\n      :style=\"{\n        color: darkMode ? '#fff' : '#000',\n        textAlign: 'center',\n        fontSize: '1.5rem',\n        fontWeight: 'bold'\n      }\"\n    >\n      {{ appName }}\n    </h1>\n\n    <form\n      :style=\"{\n        display: 'flex',\n        flexDirection: 'column',\n        gap: '0.5rem'\n      }\"\n      @submit=\"handleSubmit\"\n    >\n      <input\n        v-model=\"username\"\n        placeholder=\"Display name\"\n        autocomplete=\"webauthn\"\n        :style=\"{\n          border: darkMode ? '1px solid #444' : '1px solid #ddd',\n          padding: '11px 8px',\n          borderRadius: '6px',\n          background: darkMode ? '#000' : '#fff',\n          color: darkMode ? '#fff' : '#000'\n        }\"\n      >\n      <input\n        type=\"submit\"\n        value=\"Sign up\"\n        :style=\"{\n          padding: '13px 5px',\n          border: 'none',\n          borderRadius: '6px',\n          cursor: 'pointer',\n          background: darkMode ? '#444' : '#ddd',\n          color: darkMode ? '#fff' : '#000'\n        }\"\n      >\n    </form>\n\n    <div\n      v-if=\"auth.existingUsers.length > 0\"\n      :style=\"{\n        display: 'flex',\n        flexDirection: 'column',\n        gap: '0.5rem'\n      }\"\n    >\n      <p\n        :style=\"{\n          color: darkMode ? '#e2e2e2' : '#000',\n          textAlign: 'center',\n          paddingTop: '0.5rem',\n          borderTop: '1px solid',\n          borderColor: darkMode ? '#111' : '#e2e2e2'\n        }\"\n      >\n        Log in as\n      </p>\n      <button\n        v-for=\"user in auth.existingUsers\"\n        :key=\"user\"\n        @click=\"auth.logIn(user)\"\n        type=\"button\"\n        :aria-label=\"`Log in as ${user}`\"\n        :style=\"{\n          background: darkMode ? '#0d0d0d' : '#eee',\n          color: darkMode ? '#fff' : '#000',\n          padding: '0.5rem',\n          border: 'none',\n          borderRadius: '6px'\n        }\"\n      >\n        {{ user }}\n      </button>\n    </div>\n  </div>\n</template>","<script setup lang=\"ts\">\nimport type { ImageDefinition } from \"jazz-tools\";\nimport { type Ref, onUnmounted, ref, toRef, watch } from \"vue\";\n\ninterface ImageState {\n  src?: string;\n  res?: `${number}x${number}` | \"placeholder\";\n  originalSize?: readonly [number, number];\n}\n\nfunction useProgressiveImg(\n  image: Ref<ImageDefinition | null | undefined>,\n  maxWidth?: number,\n  targetWidth?: number,\n) {\n  const current = ref<ImageState>({});\n\n  let cleanup: (() => void) | undefined;\n  const unsubscribe = watch(\n    () => [image.value?.id, maxWidth],\n    () => {\n      let lastHighestRes: string | undefined;\n\n      if (!image.value) return;\n\n      const unsub = image.value.subscribe({}, (update) => {\n        const highestRes = update?.highestResAvailable({\n          maxWidth,\n          targetWidth,\n        });\n\n        if (highestRes) {\n          if (highestRes.res !== lastHighestRes) {\n            lastHighestRes = highestRes.res;\n            const blob = highestRes.stream.toBlob();\n\n            if (blob) {\n              const blobURI = URL.createObjectURL(blob);\n              current.value = {\n                src: blobURI,\n                res: highestRes.res,\n                originalSize: image.value?.originalSize,\n              };\n\n              if (cleanup) cleanup();\n              cleanup = () => {\n                setTimeout(() => URL.revokeObjectURL(blobURI), 200);\n              };\n            }\n          }\n        } else {\n          current.value = {\n            src: update?.placeholderDataURL,\n            res: \"placeholder\",\n            originalSize: image.value?.originalSize,\n          };\n        }\n      });\n\n      return unsub;\n    },\n  );\n\n  onUnmounted(() => {\n    unsubscribe();\n    if (cleanup) cleanup();\n  });\n\n  return current;\n}\n\nconst props = defineProps<{\n  image: ImageDefinition | null | undefined;\n  maxWidth?: number;\n}>();\n\nconst current = useProgressiveImg(toRef(props, \"image\"), props.maxWidth);\n</script>\n\n<template>\n  <slot\n    :src=\"current.src\"\n    :res=\"current.res\"\n    :original-size=\"current.originalSize\"\n  />\n</template>"],"names":["useAccount","useAccountOrGuest","current"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../src/composables.ts","../src/auth/useIsAuthenticated.ts","../src/auth/useDemoAuth.ts","../src/auth/usePassphraseAuth.ts","../src/auth/usePasskeyAuth.ts","../src/auth/DemoAuthBasicUI.vue","../src/ProgressiveImg.vue"],"sourcesContent":["import { consumeInviteLinkFromWindowLocation } from \"jazz-browser\";\nimport {\n  Account,\n  AnonymousJazzAgent,\n  AuthSecretStorage,\n  CoValue,\n  CoValueClass,\n  ID,\n  JazzAuthContext,\n  JazzContextType,\n  JazzGuestContext,\n  RefsToResolve,\n  RefsToResolveStrict,\n  Resolved,\n  subscribeToCoValue,\n} from \"jazz-tools\";\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport {\n  ComputedRef,\n  MaybeRef,\n  Ref,\n  ShallowRef,\n  computed,\n  inject,\n  onMounted,\n  onUnmounted,\n  ref,\n  shallowRef,\n  toRaw,\n  unref,\n  watch,\n} from \"vue\";\nimport {\n  JazzAuthContextSymbol,\n  JazzContextSymbol,\n  RegisteredAccount,\n} from \"./provider.js\";\n\nexport const logoutHandler = ref<() => void>();\n\nexport function useJazzContext(): Ref<\n  JazzContextType<RegisteredAccount>,\n  JazzContextType<RegisteredAccount>\n> {\n  const context =\n    inject<Ref<JazzContextType<RegisteredAccount>>>(JazzContextSymbol);\n  if (!context?.value) {\n    throw new Error(\"useJazzContext must be used within a JazzProvider\");\n  }\n  return context;\n}\n\nexport function useAuthSecretStorage() {\n  const context = inject<AuthSecretStorage>(JazzAuthContextSymbol);\n  if (!context) {\n    throw new Error(\"useAuthSecretStorage must be used within a JazzProvider\");\n  }\n  return context;\n}\n\nexport function useAccount(): {\n  me: ComputedRef<RegisteredAccount>;\n  logOut: () => void;\n};\nexport function useAccount<\n  const R extends RefsToResolve<RegisteredAccount>,\n>(options?: {\n  resolve?: RefsToResolveStrict<RegisteredAccount, R>;\n}): {\n  me: ComputedRef<Resolved<RegisteredAccount, R> | undefined | null>;\n  logOut: () => void;\n};\nexport function useAccount<\n  const R extends RefsToResolve<RegisteredAccount>,\n>(options?: {\n  resolve?: RefsToResolveStrict<RegisteredAccount, R>;\n}): {\n  me: ComputedRef<\n    RegisteredAccount | Resolved<RegisteredAccount, R> | undefined | null\n  >;\n  logOut: () => void;\n} {\n  const context = useJazzContext();\n\n  if (!context.value) {\n    throw new Error(\"useAccount must be used within a JazzProvider\");\n  }\n\n  if (!(\"me\" in context.value)) {\n    throw new Error(\n      \"useAccount can't be used in a JazzProvider with auth === 'guest' - consider using useAccountOrGuest()\",\n    );\n  }\n\n  const contextMe = context.value.me as RegisteredAccount;\n\n  const me = useCoState<RegisteredAccount, R>(\n    contextMe.constructor as CoValueClass<RegisteredAccount>,\n    contextMe.id,\n    options,\n  );\n\n  return {\n    me: computed(() => {\n      const value =\n        options?.resolve === undefined\n          ? me.value ||\n            toRaw((context.value as JazzAuthContext<RegisteredAccount>).me)\n          : me.value;\n\n      return value ? toRaw(value) : value;\n    }),\n    logOut: context.value.logOut,\n  };\n}\n\nexport function useAccountOrGuest(): {\n  me: ComputedRef<RegisteredAccount | AnonymousJazzAgent>;\n};\nexport function useAccountOrGuest<\n  const R extends RefsToResolve<RegisteredAccount>,\n>(options?: {\n  resolve?: RefsToResolveStrict<RegisteredAccount, R>;\n}): {\n  me: ComputedRef<\n    Resolved<RegisteredAccount, R> | undefined | null | AnonymousJazzAgent\n  >;\n};\nexport function useAccountOrGuest<\n  const R extends RefsToResolve<RegisteredAccount>,\n>(options?: {\n  resolve?: RefsToResolveStrict<RegisteredAccount, R>;\n}): {\n  me: ComputedRef<\n    | RegisteredAccount\n    | Resolved<RegisteredAccount, R>\n    | undefined\n    | null\n    | AnonymousJazzAgent\n  >;\n} {\n  const context = useJazzContext();\n\n  if (!context.value) {\n    throw new Error(\"useAccountOrGuest must be used within a JazzProvider\");\n  }\n\n  const contextMe = computed(() =>\n    \"me\" in context.value ? (context.value.me as RegisteredAccount) : undefined,\n  );\n\n  const me = useCoState<RegisteredAccount, R>(\n    contextMe.value?.constructor as CoValueClass<RegisteredAccount>,\n    contextMe.value?.id,\n    options,\n  );\n\n  if (\"me\" in context.value) {\n    return {\n      me: computed(() =>\n        options?.resolve === undefined\n          ? me.value ||\n            toRaw((context.value as JazzAuthContext<RegisteredAccount>).me)\n          : me.value,\n      ),\n    };\n  } else {\n    return {\n      me: computed(() => toRaw((context.value as JazzGuestContext).guest)),\n    };\n  }\n}\n\nexport function useCoState<V extends CoValue, const R extends RefsToResolve<V>>(\n  Schema: CoValueClass<V>,\n  id: MaybeRef<ID<CoValue> | undefined>,\n  options?: { resolve?: RefsToResolveStrict<V, R> },\n): Ref<Resolved<V, R> | undefined | null> {\n  const state: ShallowRef<Resolved<V, R> | undefined | null> =\n    shallowRef(undefined);\n  const context = useJazzContext();\n\n  if (!context.value) {\n    throw new Error(\"useCoState must be used within a JazzProvider\");\n  }\n\n  let unsubscribe: (() => void) | undefined;\n\n  watch(\n    [() => unref(id), () => context, () => Schema, () => options],\n    () => {\n      if (unsubscribe) unsubscribe();\n\n      const idValue = unref(id);\n      if (!idValue) return;\n\n      unsubscribe = subscribeToCoValue(\n        Schema,\n        idValue,\n        {\n          resolve: options?.resolve,\n          loadAs:\n            \"me\" in context.value\n              ? toRaw(context.value.me)\n              : toRaw(context.value.guest),\n          onUnavailable: () => {\n            state.value = null;\n          },\n          onUnauthorized: () => {\n            state.value = null;\n          },\n          syncResolution: true,\n        },\n        (value) => {\n          state.value = value;\n        },\n      );\n    },\n    { deep: true, immediate: true },\n  );\n\n  onUnmounted(() => {\n    if (unsubscribe) unsubscribe();\n  });\n\n  const computedState = computed(() => state.value);\n\n  return computedState;\n}\n\nexport function useAcceptInvite<V extends CoValue>({\n  invitedObjectSchema,\n  onAccept,\n  forValueHint,\n}: {\n  invitedObjectSchema: CoValueClass<V>;\n  onAccept: (projectID: ID<V>) => void;\n  forValueHint?: string;\n}): void {\n  const context = useJazzContext();\n\n  if (!context.value) {\n    throw new Error(\"useAcceptInvite must be used within a JazzProvider\");\n  }\n\n  if (!(\"me\" in context.value)) {\n    throw new Error(\n      \"useAcceptInvite can't be used in a JazzProvider with auth === 'guest'.\",\n    );\n  }\n\n  const runInviteAcceptance = () => {\n    const result = consumeInviteLinkFromWindowLocation({\n      as: toRaw((context.value as JazzAuthContext<RegisteredAccount>).me),\n      invitedObjectSchema,\n      forValueHint,\n    });\n\n    result\n      .then((res) => res && onAccept(res.valueID))\n      .catch((e) => {\n        console.error(\"Failed to accept invite\", e);\n      });\n  };\n\n  onMounted(() => {\n    runInviteAcceptance();\n  });\n\n  watch(\n    () => onAccept,\n    (newOnAccept, oldOnAccept) => {\n      if (newOnAccept !== oldOnAccept) {\n        runInviteAcceptance();\n      }\n    },\n  );\n}\n","import { onMounted, onUnmounted, ref } from \"vue\";\nimport { useAuthSecretStorage } from \"../composables.js\";\n\nexport function useIsAuthenticated() {\n  const authSecretStorage = useAuthSecretStorage();\n  const isAuthenticated = ref(authSecretStorage.isAuthenticated);\n\n  const handleUpdate = () => {\n    isAuthenticated.value = authSecretStorage.isAuthenticated;\n  };\n\n  onMounted(() => {\n    const cleanup = authSecretStorage.onUpdate(handleUpdate);\n    onUnmounted(cleanup);\n  });\n\n  return isAuthenticated;\n}\n","import { DemoAuth } from \"jazz-tools\";\nimport { computed, ref, watch } from \"vue\";\nimport { useAuthSecretStorage, useJazzContext } from \"../composables.js\";\nimport { useIsAuthenticated } from \"./useIsAuthenticated.js\";\n\nexport function useDemoAuth() {\n  const context = useJazzContext();\n  const authSecretStorage = useAuthSecretStorage();\n\n  if (\"guest\" in context.value) {\n    throw new Error(\"Demo auth is not supported in guest mode\");\n  }\n\n  const authMethod = computed(\n    () => new DemoAuth(context.value.authenticate, authSecretStorage),\n  );\n\n  const existingUsers = ref<string[]>([]);\n  const isAuthenticated = useIsAuthenticated();\n\n  watch(authMethod, () => {\n    authMethod.value.getExistingUsers().then((users) => {\n      existingUsers.value = users;\n    });\n  });\n\n  return computed(() => ({\n    state: isAuthenticated.value ? \"signedIn\" : \"anonymous\",\n    logIn(username: string) {\n      authMethod.value.logIn(username);\n    },\n    signUp(username: string) {\n      authMethod.value.signUp(username);\n    },\n    existingUsers: existingUsers.value,\n  }));\n}\n","import { PassphraseAuth } from \"jazz-tools\";\nimport { computed, ref, watchEffect } from \"vue\";\nimport { useAuthSecretStorage, useJazzContext } from \"../composables.js\";\nimport { useIsAuthenticated } from \"./useIsAuthenticated.js\";\n\n/**\n * `usePassphraseAuth` composable provides a `JazzAuth` object for passphrase authentication.\n *\n * @example\n * ```ts\n * const auth = usePassphraseAuth({ wordlist });\n * ```\n *\n * @category Auth Providers\n */\nexport function usePassphraseAuth({\n  wordlist,\n}: {\n  wordlist: string[];\n}) {\n  const context = useJazzContext();\n  const authSecretStorage = useAuthSecretStorage();\n  const isAuthenticated = useIsAuthenticated();\n\n  if (\"guest\" in context.value) {\n    throw new Error(\"Passphrase auth is not supported in guest mode\");\n  }\n\n  const authMethod = computed(() => {\n    return new PassphraseAuth(\n      context.value.node.crypto,\n      context.value.authenticate,\n      context.value.register,\n      authSecretStorage,\n      wordlist,\n    );\n  });\n\n  const passphrase = ref(authMethod.value.passphrase);\n\n  watchEffect((onCleanup) => {\n    authMethod.value.loadCurrentAccountPassphrase();\n\n    const unsubscribe = authMethod.value.subscribe(() => {\n      passphrase.value = authMethod.value.passphrase;\n    });\n\n    onCleanup(unsubscribe);\n  });\n\n  return computed(() => ({\n    state: isAuthenticated.value ? \"signedIn\" : \"anonymous\",\n    logIn: authMethod.value.logIn,\n    signUp: authMethod.value.signUp,\n    registerNewAccount: authMethod.value.registerNewAccount,\n    generateRandomPassphrase: authMethod.value.generateRandomPassphrase,\n    passphrase: passphrase.value,\n  }));\n}\n","import { BrowserPasskeyAuth } from \"jazz-browser\";\nimport { computed } from \"vue\";\nimport { useAuthSecretStorage, useJazzContext } from \"../composables.js\";\nimport { useIsAuthenticated } from \"./useIsAuthenticated.js\";\n\n/**\n * `usePasskeyAuth` composable provides a `JazzAuth` object for passkey authentication.\n *\n * @example\n * ```ts\n * const auth = usePasskeyAuth({ appName, appHostname });\n * ```\n *\n * @category Auth Providers\n */\nexport function usePasskeyAuth({\n  appName,\n  appHostname,\n}: {\n  appName: string;\n  appHostname?: string;\n}) {\n  const context = useJazzContext();\n  const authSecretStorage = useAuthSecretStorage();\n  const isAuthenticated = useIsAuthenticated();\n\n  if (\"guest\" in context.value) {\n    throw new Error(\"Passkey auth is not supported in guest mode\");\n  }\n\n  const authMethod = computed(() => {\n    return new BrowserPasskeyAuth(\n      context.value.node.crypto,\n      context.value.authenticate,\n      authSecretStorage,\n      appName,\n      appHostname,\n    );\n  });\n\n  return computed(() => ({\n    state: isAuthenticated.value ? \"signedIn\" : \"anonymous\",\n    logIn: authMethod.value.logIn,\n    signUp: authMethod.value.signUp,\n  }));\n}\n","<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { useDemoAuth } from \"./useDemoAuth.js\";\n\ninterface Props {\n  appName: string;\n}\n\ndefineProps<Props>();\ndefineSlots<{\n  default?: () => any;\n}>();\n\nconst auth = useDemoAuth();\nconst username = ref(\"\");\n\nconst darkMode =\n  typeof window !== \"undefined\"\n    ? window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n    : false;\n\nconst handleSubmit = (e: Event) => {\n  e.preventDefault();\n  auth.value.signUp(username.value);\n};\n</script>\n\n<template>\n  <slot v-if=\"auth.state === 'signedIn'\" />\n  <div\n    v-else\n    :style=\"{\n      minHeight: '100%',\n      display: 'flex',\n      flexDirection: 'column',\n      justifyContent: 'center',\n      width: '18rem',\n      maxWidth: 'calc(100vw - 2rem)',\n      gap: '2rem',\n      margin: '0 auto'\n    }\"\n  >\n    <h1\n      :style=\"{\n        color: darkMode ? '#fff' : '#000',\n        textAlign: 'center',\n        fontSize: '1.5rem',\n        fontWeight: 'bold'\n      }\"\n    >\n      {{ appName }}\n    </h1>\n\n    <form\n      :style=\"{\n        display: 'flex',\n        flexDirection: 'column',\n        gap: '0.5rem'\n      }\"\n      @submit=\"handleSubmit\"\n    >\n      <input\n        v-model=\"username\"\n        placeholder=\"Display name\"\n        autocomplete=\"webauthn\"\n        :style=\"{\n          border: darkMode ? '1px solid #444' : '1px solid #ddd',\n          padding: '11px 8px',\n          borderRadius: '6px',\n          background: darkMode ? '#000' : '#fff',\n          color: darkMode ? '#fff' : '#000'\n        }\"\n      >\n      <input\n        type=\"submit\"\n        value=\"Sign up\"\n        :style=\"{\n          padding: '13px 5px',\n          border: 'none',\n          borderRadius: '6px',\n          cursor: 'pointer',\n          background: darkMode ? '#444' : '#ddd',\n          color: darkMode ? '#fff' : '#000'\n        }\"\n      >\n    </form>\n\n    <div\n      v-if=\"auth.existingUsers.length > 0\"\n      :style=\"{\n        display: 'flex',\n        flexDirection: 'column',\n        gap: '0.5rem'\n      }\"\n    >\n      <p\n        :style=\"{\n          color: darkMode ? '#e2e2e2' : '#000',\n          textAlign: 'center',\n          paddingTop: '0.5rem',\n          borderTop: '1px solid',\n          borderColor: darkMode ? '#111' : '#e2e2e2'\n        }\"\n      >\n        Log in as\n      </p>\n      <button\n        v-for=\"user in auth.existingUsers\"\n        :key=\"user\"\n        @click=\"auth.logIn(user)\"\n        type=\"button\"\n        :aria-label=\"`Log in as ${user}`\"\n        :style=\"{\n          background: darkMode ? '#0d0d0d' : '#eee',\n          color: darkMode ? '#fff' : '#000',\n          padding: '0.5rem',\n          border: 'none',\n          borderRadius: '6px'\n        }\"\n      >\n        {{ user }}\n      </button>\n    </div>\n  </div>\n</template>","<script setup lang=\"ts\">\nimport type { ImageDefinition } from \"jazz-tools\";\nimport { type Ref, onUnmounted, ref, toRef, watch } from \"vue\";\n\ninterface ImageState {\n  src?: string;\n  res?: `${number}x${number}` | \"placeholder\";\n  originalSize?: readonly [number, number];\n}\n\nfunction useProgressiveImg(\n  image: Ref<ImageDefinition | null | undefined>,\n  maxWidth?: number,\n  targetWidth?: number,\n) {\n  const current = ref<ImageState>({});\n\n  let cleanup: (() => void) | undefined;\n  const unsubscribe = watch(\n    () => [image.value?.id, maxWidth],\n    () => {\n      let lastHighestRes: string | undefined;\n\n      if (!image.value) return;\n\n      const unsub = image.value.subscribe({}, (update) => {\n        const highestRes = update?.highestResAvailable({\n          maxWidth,\n          targetWidth,\n        });\n\n        if (highestRes) {\n          if (highestRes.res !== lastHighestRes) {\n            lastHighestRes = highestRes.res;\n            const blob = highestRes.stream.toBlob();\n\n            if (blob) {\n              const blobURI = URL.createObjectURL(blob);\n              current.value = {\n                src: blobURI,\n                res: highestRes.res,\n                originalSize: image.value?.originalSize,\n              };\n\n              if (cleanup) cleanup();\n              cleanup = () => {\n                setTimeout(() => URL.revokeObjectURL(blobURI), 200);\n              };\n            }\n          }\n        } else {\n          current.value = {\n            src: update?.placeholderDataURL,\n            res: \"placeholder\",\n            originalSize: image.value?.originalSize,\n          };\n        }\n      });\n\n      return unsub;\n    },\n  );\n\n  onUnmounted(() => {\n    unsubscribe();\n    if (cleanup) cleanup();\n  });\n\n  return current;\n}\n\nconst props = defineProps<{\n  image: ImageDefinition | null | undefined;\n  maxWidth?: number;\n}>();\n\nconst current = useProgressiveImg(toRef(props, \"image\"), props.maxWidth);\n</script>\n\n<template>\n  <slot\n    :src=\"current.src\"\n    :res=\"current.res\"\n    :original-size=\"current.originalSize\"\n  />\n</template>"],"names":["current"],"mappings":"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"}

package/dist/tests/useAccount.test.d.ts

@@ -1 +1,14 @@
+import { Account, CoMap, co } from 'jazz-tools';
+declare class AccountRoot extends CoMap {
+    value: co<string>;
+}
+declare class AccountSchema extends Account {
+    root: co<AccountRoot | null>;
+    migrate(): void;
+}
+declare module "../provider" {
+    interface Register {
+        Account: AccountSchema;
+    }
+}
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jazz-vue",
-  "version": "0.11.8",
+  "version": "0.12.1",
   "type": "module",
   "main": "dist/index.js",
   "types": "src/index.ts",
@@ -16,9 +16,9 @@
     }
   },
   "dependencies": {
-    "jazz-browser": "0.11.8",
-    "jazz-tools": "0.11.8",
-    "cojson": "0.11.8"
+    "cojson": "0.12.1",
+    "jazz-browser": "0.12.1",
+    "jazz-tools": "0.12.1"
   },
   "devDependencies": {
     "@scure/bip39": "^1.3.0",

package/src/composables.ts

@@ -5,12 +5,13 @@ import {
   AuthSecretStorage,
   CoValue,
   CoValueClass,
-  DeeplyLoaded,
-  DepthsIn,
   ID,
   JazzAuthContext,
   JazzContextType,
   JazzGuestContext,
+  RefsToResolve,
+  RefsToResolveStrict,
+  Resolved,
   subscribeToCoValue,
 } from "jazz-tools";
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -37,7 +38,10 @@ import {
 
 export const logoutHandler = ref<() => void>();
 
-export function useJazzContext() {
+export function useJazzContext(): Ref<
+  JazzContextType<RegisteredAccount>,
+  JazzContextType<RegisteredAccount>
+> {
   const context =
     inject<Ref<JazzContextType<RegisteredAccount>>>(JazzContextSymbol);
   if (!context?.value) {
@@ -54,121 +58,125 @@ export function useAuthSecretStorage() {
   return context;
 }
 
-export function createUseAccountComposables<Acc extends Account>() {
-  function useAccount(): {
-    me: ComputedRef<Acc>;
-    logOut: () => void;
-  };
-  function useAccount<D extends DepthsIn<Acc>>(
-    depth: D,
-  ): {
-    me: ComputedRef<DeeplyLoaded<Acc, D> | undefined | null>;
-    logOut: () => void;
-  };
-  function useAccount<D extends DepthsIn<Acc>>(
-    depth?: D,
-  ): {
-    me: ComputedRef<Acc | DeeplyLoaded<Acc, D> | undefined | null>;
-    logOut: () => void;
-  } {
-    const context = useJazzContext();
-
-    if (!context.value) {
-      throw new Error("useAccount must be used within a JazzProvider");
-    }
-
-    if (!("me" in context.value)) {
-      throw new Error(
-        "useAccount can't be used in a JazzProvider with auth === 'guest' - consider using useAccountOrGuest()",
-      );
-    }
+export function useAccount(): {
+  me: ComputedRef<RegisteredAccount>;
+  logOut: () => void;
+};
+export function useAccount<
+  const R extends RefsToResolve<RegisteredAccount>,
+>(options?: {
+  resolve?: RefsToResolveStrict<RegisteredAccount, R>;
+}): {
+  me: ComputedRef<Resolved<RegisteredAccount, R> | undefined | null>;
+  logOut: () => void;
+};
+export function useAccount<
+  const R extends RefsToResolve<RegisteredAccount>,
+>(options?: {
+  resolve?: RefsToResolveStrict<RegisteredAccount, R>;
+}): {
+  me: ComputedRef<
+    RegisteredAccount | Resolved<RegisteredAccount, R> | undefined | null
+  >;
+  logOut: () => void;
+} {
+  const context = useJazzContext();
 
-    const contextMe = context.value.me as Acc;
+  if (!context.value) {
+    throw new Error("useAccount must be used within a JazzProvider");
+  }
 
-    const me = useCoState<Acc, D>(
-      contextMe.constructor as CoValueClass<Acc>,
-      contextMe.id,
-      depth,
+  if (!("me" in context.value)) {
+    throw new Error(
+      "useAccount can't be used in a JazzProvider with auth === 'guest' - consider using useAccountOrGuest()",
     );
-
-    return {
-      me: computed(() => {
-        const value =
-          depth === undefined
-            ? me.value || toRaw((context.value as JazzAuthContext<Acc>).me)
-            : me.value;
-
-        return value ? toRaw(value) : value;
-      }),
-      logOut: context.value.logOut,
-    };
   }
 
-  function useAccountOrGuest(): {
-    me: ComputedRef<Acc | AnonymousJazzAgent>;
-  };
-  function useAccountOrGuest<D extends DepthsIn<Acc>>(
-    depth: D,
-  ): {
-    me: ComputedRef<
-      DeeplyLoaded<Acc, D> | undefined | null | AnonymousJazzAgent
-    >;
-  };
-  function useAccountOrGuest<D extends DepthsIn<Acc>>(
-    depth?: D,
-  ): {
-    me: ComputedRef<
-      Acc | DeeplyLoaded<Acc, D> | undefined | null | AnonymousJazzAgent
-    >;
-  } {
-    const context = useJazzContext();
+  const contextMe = context.value.me as RegisteredAccount;
 
-    if (!context.value) {
-      throw new Error("useAccountOrGuest must be used within a JazzProvider");
-    }
+  const me = useCoState<RegisteredAccount, R>(
+    contextMe.constructor as CoValueClass<RegisteredAccount>,
+    contextMe.id,
+    options,
+  );
 
-    const contextMe = computed(() =>
-      "me" in context.value ? (context.value.me as Acc) : undefined,
-    );
+  return {
+    me: computed(() => {
+      const value =
+        options?.resolve === undefined
+          ? me.value ||
+            toRaw((context.value as JazzAuthContext<RegisteredAccount>).me)
+          : me.value;
+
+      return value ? toRaw(value) : value;
+    }),
+    logOut: context.value.logOut,
+  };
+}
 
-    const me = useCoState<Acc, D>(
-      contextMe.value?.constructor as CoValueClass<Acc>,
-      contextMe.value?.id,
-      depth,
-    );
+export function useAccountOrGuest(): {
+  me: ComputedRef<RegisteredAccount | AnonymousJazzAgent>;
+};
+export function useAccountOrGuest<
+  const R extends RefsToResolve<RegisteredAccount>,
+>(options?: {
+  resolve?: RefsToResolveStrict<RegisteredAccount, R>;
+}): {
+  me: ComputedRef<
+    Resolved<RegisteredAccount, R> | undefined | null | AnonymousJazzAgent
+  >;
+};
+export function useAccountOrGuest<
+  const R extends RefsToResolve<RegisteredAccount>,
+>(options?: {
+  resolve?: RefsToResolveStrict<RegisteredAccount, R>;
+}): {
+  me: ComputedRef<
+    | RegisteredAccount
+    | Resolved<RegisteredAccount, R>
+    | undefined
+    | null
+    | AnonymousJazzAgent
+  >;
+} {
+  const context = useJazzContext();
 
-    if ("me" in context.value) {
-      return {
-        me: computed(() =>
-          depth === undefined
-            ? me.value || toRaw((context.value as JazzAuthContext<Acc>).me)
-            : me.value,
-        ),
-      };
-    } else {
-      return {
-        me: computed(() => toRaw((context.value as JazzGuestContext).guest)),
-      };
-    }
+  if (!context.value) {
+    throw new Error("useAccountOrGuest must be used within a JazzProvider");
   }
 
-  return {
-    useAccount,
-    useAccountOrGuest,
-  };
-}
+  const contextMe = computed(() =>
+    "me" in context.value ? (context.value.me as RegisteredAccount) : undefined,
+  );
 
-const { useAccount, useAccountOrGuest } =
-  createUseAccountComposables<RegisteredAccount>();
+  const me = useCoState<RegisteredAccount, R>(
+    contextMe.value?.constructor as CoValueClass<RegisteredAccount>,
+    contextMe.value?.id,
+    options,
+  );
 
-export { useAccount, useAccountOrGuest };
+  if ("me" in context.value) {
+    return {
+      me: computed(() =>
+        options?.resolve === undefined
+          ? me.value ||
+            toRaw((context.value as JazzAuthContext<RegisteredAccount>).me)
+          : me.value,
+      ),
+    };
+  } else {
+    return {
+      me: computed(() => toRaw((context.value as JazzGuestContext).guest)),
+    };
+  }
+}
 
-export function useCoState<V extends CoValue, D>(
+export function useCoState<V extends CoValue, const R extends RefsToResolve<V>>(
   Schema: CoValueClass<V>,
   id: MaybeRef<ID<CoValue> | undefined>,
-  depth: D & DepthsIn<V> = [] as D & DepthsIn<V>,
-): Ref<DeeplyLoaded<V, D> | undefined | null> {
-  const state: ShallowRef<DeeplyLoaded<V, D> | undefined | null> =
+  options?: { resolve?: RefsToResolveStrict<V, R> },
+): Ref<Resolved<V, R> | undefined | null> {
+  const state: ShallowRef<Resolved<V, R> | undefined | null> =
     shallowRef(undefined);
   const context = useJazzContext();
 
@@ -179,7 +187,7 @@ export function useCoState<V extends CoValue, D>(
   let unsubscribe: (() => void) | undefined;
 
   watch(
-    [() => unref(id), () => context, () => Schema, () => depth],
+    [() => unref(id), () => context, () => Schema, () => options],
     () => {
       if (unsubscribe) unsubscribe();
 
@@ -189,17 +197,23 @@ export function useCoState<V extends CoValue, D>(
       unsubscribe = subscribeToCoValue(
         Schema,
         idValue,
-        "me" in context.value
-          ? toRaw(context.value.me)
-          : toRaw(context.value.guest),
-        depth,
+        {
+          resolve: options?.resolve,
+          loadAs:
+            "me" in context.value
+              ? toRaw(context.value.me)
+              : toRaw(context.value.guest),
+          onUnavailable: () => {
+            state.value = null;
+          },
+          onUnauthorized: () => {
+            state.value = null;
+          },
+          syncResolution: true,
+        },
         (value) => {
           state.value = value;
         },
-        () => {
-          state.value = null;
-        },
-        true,
       );
     },
     { deep: true, immediate: true },

package/src/tests/useAcceptInvite.test.ts

@@ -15,7 +15,7 @@ describe("useAcceptInvite", () => {
     const account = await createJazzTestAccount();
     const inviteSender = await createJazzTestAccount();
 
-    linkAccounts(account, inviteSender);
+    await linkAccounts(account, inviteSender);
 
     let acceptedId: ID<TestMap> | undefined;
 
@@ -46,7 +46,9 @@ describe("useAcceptInvite", () => {
       expect(acceptedId).toBeDefined();
     });
 
-    const accepted = await TestMap.load(acceptedId!, account, {});
+    const accepted = await TestMap.load(acceptedId!, {
+      loadAs: account,
+    });
 
     expect(accepted?.value).toEqual("hello");
   });