jazz-vue 0.8.51 → 0.9.0

package/dist/provider.d.ts

@@ -0,0 +1,48 @@
+import { Account, AccountClass, AuthMethod } from 'jazz-tools';
+import { PropType } from 'vue';
+export declare const logoutHandler: import('vue').Ref<(() => void) | undefined, (() => void) | undefined>;
+export interface Register {
+}
+export type RegisteredAccount = Register extends {
+    Account: infer Acc;
+} ? Acc : Account;
+export declare const JazzContextSymbol: unique symbol;
+export declare const JazzProvider: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    auth: {
+        type: PropType<AuthMethod | "guest">;
+        required: true;
+    };
+    AccountSchema: {
+        type: PropType<AccountClass<RegisteredAccount>>;
+        required: false;
+    };
+    peer: {
+        type: PropType<`wss://${string}` | `ws://${string}`>;
+        required: true;
+    };
+    storage: {
+        type: PropType<"indexedDB" | "singleTabOPFS">;
+        default: undefined;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>[] | null | undefined, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    auth: {
+        type: PropType<AuthMethod | "guest">;
+        required: true;
+    };
+    AccountSchema: {
+        type: PropType<AccountClass<RegisteredAccount>>;
+        required: false;
+    };
+    peer: {
+        type: PropType<`wss://${string}` | `ws://${string}`>;
+        required: true;
+    };
+    storage: {
+        type: PropType<"indexedDB" | "singleTabOPFS">;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    storage: "indexedDB" | "singleTabOPFS";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/testing.d.ts

@@ -0,0 +1,20 @@
+import { Account, AnonymousJazzAgent } from 'jazz-tools';
+import { PropType } from 'vue';
+export declare const JazzTestProvider: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    account: {
+        type: PropType<Account | {
+            guest: AnonymousJazzAgent;
+        }>;
+        required: true;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>[] | undefined, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    account: {
+        type: PropType<Account | {
+            guest: AnonymousJazzAgent;
+        }>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export { createJazzTestAccount, createJazzTestGuest, linkAccounts, } from 'jazz-tools/testing';

package/dist/testing.js

@@ -0,0 +1,26 @@
+import { getJazzContextShape as a } from "jazz-tools/testing";
+import { createJazzTestAccount as x, createJazzTestGuest as T, linkAccounts as s } from "jazz-tools/testing";
+import { defineComponent as c, ref as n, provide as p } from "vue";
+import { J as z } from "./provider-BZnz6FpX.js";
+const f = c({
+  name: "JazzTestProvider",
+  props: {
+    account: {
+      type: Object,
+      required: !0
+    }
+  },
+  setup(r, { slots: e }) {
+    const o = n(a(r.account));
+    return p(z, o), () => {
+      var t;
+      return (t = e.default) == null ? void 0 : t.call(e);
+    };
+  }
+});
+export {
+  f as JazzTestProvider,
+  x as createJazzTestAccount,
+  T as createJazzTestGuest,
+  s as linkAccounts
+};

package/dist/tests/testUtils.d.ts

@@ -0,0 +1,8 @@
+import { Account, AnonymousJazzAgent } from 'jazz-tools';
+import { createApp } from 'vue';
+export declare const withJazzTestSetup: <C extends (...args: any[]) => any>(composable: C, { account }: {
+    account: Account | {
+        guest: AnonymousJazzAgent;
+    };
+}) => [ReturnType<C>, ReturnType<typeof createApp>];
+export declare function waitFor(callback: () => boolean | void): Promise<void>;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,18 +1,28 @@
 {
   "name": "jazz-vue",
-  "version": "0.8.51",
+  "version": "0.9.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "src/index.ts",
   "license": "MIT",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./testing": {
+      "types": "./dist/testing.d.ts",
+      "default": "./dist/testing.js"
+    }
+  },
   "dependencies": {
-    "@scure/bip39": "^1.3.0",
-    "cojson": "0.8.50",
-    "jazz-browser": "0.8.51",
-    "jazz-tools": "0.8.51"
+    "jazz-tools": "0.9.0",
+    "jazz-browser": "0.9.0",
+    "cojson": "0.9.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.1.4",
+    "rollup-plugin-node-externals": "^8.0.0",
     "typescript": "~5.6.2",
     "vite": "^5.4.10",
     "vite-plugin-dts": "^4.2.4",

package/src/auth/useDemoAuth.ts

@@ -2,7 +2,7 @@ import { AgentSecret } from "cojson";
 import { BrowserDemoAuth } from "jazz-browser";
 import { Account, ID } from "jazz-tools";
 import { onUnmounted, reactive, ref } from "vue";
-import { logoutHandler } from "../createJazzVueApp.js";
+import { logoutHandler } from "../provider.js";
 
 export type DemoAuthState = (
   | {

package/src/composables.ts

@@ -0,0 +1,250 @@
+import {
+  BrowserContext,
+  BrowserGuestContext,
+  consumeInviteLinkFromWindowLocation,
+} from "jazz-browser";
+import {
+  Account,
+  AnonymousJazzAgent,
+  CoValue,
+  CoValueClass,
+  DeeplyLoaded,
+  DepthsIn,
+  ID,
+  subscribeToCoValue,
+} from "jazz-tools";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {
+  ComputedRef,
+  MaybeRef,
+  Ref,
+  ShallowRef,
+  computed,
+  inject,
+  onMounted,
+  onUnmounted,
+  ref,
+  shallowRef,
+  toRaw,
+  unref,
+  watch,
+} from "vue";
+import { JazzContextSymbol, RegisteredAccount } from "./provider.js";
+
+export const logoutHandler = ref<() => void>();
+
+function useJazzContext() {
+  const context =
+    inject<Ref<BrowserContext<RegisteredAccount> | BrowserGuestContext>>(
+      JazzContextSymbol,
+    );
+  if (!context) {
+    throw new Error("useJazzContext must be used within a JazzProvider");
+  }
+  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>;
+    logOut: () => void;
+  };
+  function useAccount<D extends DepthsIn<Acc>>(
+    depth?: D,
+  ): {
+    me: ComputedRef<Acc | DeeplyLoaded<Acc, D> | undefined>;
+    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()",
+      );
+    }
+
+    const contextMe = context.value.me as Acc;
+
+    const me = useCoState<Acc, D>(
+      contextMe.constructor as CoValueClass<Acc>,
+      contextMe.id,
+      depth,
+    );
+
+    return {
+      me: computed(() => {
+        const value =
+          depth === undefined
+            ? me.value || toRaw((context.value as BrowserContext<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 | AnonymousJazzAgent>;
+  };
+  function useAccountOrGuest<D extends DepthsIn<Acc>>(
+    depth?: D,
+  ): {
+    me: ComputedRef<
+      Acc | DeeplyLoaded<Acc, D> | undefined | AnonymousJazzAgent
+    >;
+  } {
+    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 as Acc) : undefined,
+    );
+
+    const me = useCoState<Acc, D>(
+      contextMe.value?.constructor as CoValueClass<Acc>,
+      contextMe.value?.id,
+      depth,
+    );
+
+    if ("me" in context.value) {
+      return {
+        me: computed(() =>
+          depth === undefined
+            ? me.value || toRaw((context.value as BrowserContext<Acc>).me)
+            : me.value,
+        ),
+      };
+    } else {
+      return {
+        me: computed(() => toRaw((context.value as BrowserGuestContext).guest)),
+      };
+    }
+  }
+
+  return {
+    useAccount,
+    useAccountOrGuest,
+  };
+}
+
+const { useAccount, useAccountOrGuest } =
+  createUseAccountComposables<RegisteredAccount>();
+
+export { useAccount, useAccountOrGuest };
+
+export function useCoState<V extends CoValue, D>(
+  Schema: CoValueClass<V>,
+  id: MaybeRef<ID<V> | undefined>,
+  depth: D & DepthsIn<V> = [] as D & DepthsIn<V>,
+): Ref<DeeplyLoaded<V, D> | undefined> {
+  const state: ShallowRef<DeeplyLoaded<V, D> | undefined> =
+    shallowRef(undefined);
+  const context = useJazzContext();
+
+  if (!context.value) {
+    throw new Error("useCoState must be used within a JazzProvider");
+  }
+
+  let unsubscribe: (() => void) | undefined;
+
+  watch(
+    [() => unref(id), () => context, () => Schema, () => depth],
+    () => {
+      if (unsubscribe) unsubscribe();
+
+      const idValue = unref(id);
+      if (!idValue) return;
+
+      unsubscribe = subscribeToCoValue(
+        Schema,
+        idValue,
+        "me" in context.value
+          ? toRaw(context.value.me)
+          : toRaw(context.value.guest),
+        depth,
+        (value) => {
+          state.value = value;
+        },
+        undefined,
+        true,
+      );
+    },
+    { deep: true, immediate: true },
+  );
+
+  onUnmounted(() => {
+    if (unsubscribe) unsubscribe();
+  });
+
+  const computedState = computed(() => state.value);
+
+  return computedState;
+}
+
+export function useAcceptInvite<V extends CoValue>({
+  invitedObjectSchema,
+  onAccept,
+  forValueHint,
+}: {
+  invitedObjectSchema: CoValueClass<V>;
+  onAccept: (projectID: ID<V>) => 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 runInviteAcceptance = () => {
+    const result = consumeInviteLinkFromWindowLocation({
+      as: toRaw((context.value as BrowserContext<RegisteredAccount>).me),
+      invitedObjectSchema,
+      forValueHint,
+    });
+
+    result
+      .then((res) => res && onAccept(res.valueID))
+      .catch((e) => {
+        console.error("Failed to accept invite", e);
+      });
+  };
+
+  onMounted(() => {
+    runInviteAcceptance();
+  });
+
+  watch(
+    () => onAccept,
+    (newOnAccept, oldOnAccept) => {
+      if (newOnAccept !== oldOnAccept) {
+        runInviteAcceptance();
+      }
+    },
+  );
+}

package/src/index.ts

@@ -1,4 +1,7 @@
-export * from "./createJazzVueApp.js";
+export * from "./composables.js";
+export { JazzProvider } from "./provider.js";
 export * from "./auth/useDemoAuth.js";
 export { default as DemoAuthBasicUI } from "./auth/DemoAuthBasicUI.vue";
 export { default as ProgressiveImg } from "./ProgressiveImg.vue";
+
+export { createInviteLink, parseInviteLink } from "jazz-browser";

package/src/provider.ts

@@ -0,0 +1,106 @@
+import {
+  BrowserContext,
+  BrowserGuestContext,
+  createJazzBrowserContext,
+} from "jazz-browser";
+import { Account, AccountClass, AuthMethod } from "jazz-tools";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {
+  PropType,
+  defineComponent,
+  onMounted,
+  onUnmounted,
+  provide,
+  ref,
+  watch,
+} from "vue";
+
+export const logoutHandler = ref<() => void>();
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface Register {}
+
+export type RegisteredAccount = Register extends { Account: infer Acc }
+  ? Acc
+  : Account;
+
+export const JazzContextSymbol = Symbol("JazzContext");
+
+export const JazzProvider = defineComponent({
+  name: "JazzProvider",
+  props: {
+    auth: {
+      type: [String, Object] as PropType<AuthMethod | "guest">,
+      required: true,
+    },
+    AccountSchema: {
+      type: Object as PropType<AccountClass<RegisteredAccount>>,
+      required: false,
+    },
+    peer: {
+      type: String as PropType<`wss://${string}` | `ws://${string}`>,
+      required: true,
+    },
+    storage: {
+      type: String as PropType<"indexedDB" | "singleTabOPFS">,
+      default: undefined,
+    },
+  },
+  setup(props, { slots }) {
+    const ctx = ref<
+      BrowserContext<RegisteredAccount> | BrowserGuestContext | undefined
+    >(undefined);
+
+    const key = ref(0);
+
+    provide(JazzContextSymbol, ctx);
+
+    const initializeContext = async () => {
+      if (ctx.value) {
+        ctx.value.done?.();
+        ctx.value = undefined;
+      }
+
+      try {
+        const context = await createJazzBrowserContext<RegisteredAccount>(
+          props.auth === "guest"
+            ? { peer: props.peer, storage: props.storage }
+            : {
+                AccountSchema: props.AccountSchema,
+                auth: props.auth,
+                peer: props.peer,
+                storage: props.storage,
+              },
+        );
+
+        ctx.value = {
+          ...context,
+          logOut: () => {
+            logoutHandler.value?.();
+            // context.logOut();
+            key.value += 1;
+          },
+        };
+      } catch (e) {
+        console.error("Error creating Jazz browser context:", e);
+      }
+    };
+
+    onMounted(() => {
+      void initializeContext();
+    });
+
+    watch(
+      () => key.value,
+      async () => {
+        await initializeContext();
+      },
+    );
+
+    onUnmounted(() => {
+      if (ctx.value) ctx.value.done?.();
+    });
+
+    return () => (ctx.value ? slots.default?.() : null);
+  },
+});

package/src/testing.ts

@@ -0,0 +1,27 @@
+import { Account, AnonymousJazzAgent } from "jazz-tools";
+import { getJazzContextShape } from "jazz-tools/testing";
+import { provide } from "vue";
+import { PropType, defineComponent, ref } from "vue";
+import { JazzContextSymbol } from "./provider.js";
+
+export const JazzTestProvider = defineComponent({
+  name: "JazzTestProvider",
+  props: {
+    account: {
+      type: Object as PropType<Account | { guest: AnonymousJazzAgent }>,
+      required: true,
+    },
+  },
+  setup(props, { slots }) {
+    const ctx = ref(getJazzContextShape(props.account));
+    provide(JazzContextSymbol, ctx);
+
+    return () => slots.default?.();
+  },
+});
+
+export {
+  createJazzTestAccount,
+  createJazzTestGuest,
+  linkAccounts,
+} from "jazz-tools/testing";

package/src/tests/testUtils.ts

@@ -0,0 +1,66 @@
+import { Account, AnonymousJazzAgent } from "jazz-tools";
+import { createApp, defineComponent, h } from "vue";
+import { JazzTestProvider } from "../testing";
+
+export const withJazzTestSetup = <C extends (...args: any[]) => any>(
+  composable: C,
+  { account }: { account: Account | { guest: AnonymousJazzAgent } },
+) => {
+  let result;
+
+  const wrapper = defineComponent({
+    setup() {
+      result = composable();
+      // suppress missing template warning
+      return () => {};
+    },
+  });
+
+  const app = createApp({
+    setup() {
+      return () =>
+        h(
+          JazzTestProvider,
+          {
+            account,
+          },
+          {
+            default: () => h(wrapper),
+          },
+        );
+    },
+  });
+
+  app.mount(document.createElement("div"));
+  // return the result and the app instance
+  // for testing provide/unmount
+  return [result, app] as [ReturnType<C>, ReturnType<typeof createApp>];
+};
+
+export function waitFor(callback: () => boolean | void) {
+  return new Promise<void>((resolve, reject) => {
+    const checkPassed = () => {
+      try {
+        return { ok: callback(), error: null };
+      } catch (error) {
+        return { ok: false, error };
+      }
+    };
+
+    let retries = 0;
+
+    const interval = setInterval(() => {
+      const { ok, error } = checkPassed();
+
+      if (ok !== false) {
+        clearInterval(interval);
+        resolve();
+      }
+
+      if (++retries > 10) {
+        clearInterval(interval);
+        reject(error);
+      }
+    }, 100);
+  });
+}

package/src/tests/useAcceptInvite.test.ts

@@ -0,0 +1,53 @@
+// @vitest-environment happy-dom
+
+import { CoMap, Group, ID, co } from "jazz-tools";
+import { describe, expect, it } from "vitest";
+import { createInviteLink, useAcceptInvite } from "../index.js";
+import { createJazzTestAccount, linkAccounts } from "../testing.js";
+import { waitFor, withJazzTestSetup } from "./testUtils.js";
+
+describe("useAcceptInvite", () => {
+  it("should accept the invite", async () => {
+    class TestMap extends CoMap {
+      value = co.string;
+    }
+
+    const account = await createJazzTestAccount();
+    const inviteSender = await createJazzTestAccount();
+
+    linkAccounts(account, inviteSender);
+
+    let acceptedId: ID<TestMap> | undefined;
+
+    const invitelink = createInviteLink(
+      TestMap.create(
+        { value: "hello" },
+        { owner: Group.create({ owner: inviteSender }) },
+      ),
+      "reader",
+    );
+
+    location.href = invitelink;
+
+    withJazzTestSetup(
+      () =>
+        useAcceptInvite({
+          invitedObjectSchema: TestMap,
+          onAccept: (id) => {
+            acceptedId = id;
+          },
+        }),
+      {
+        account,
+      },
+    );
+
+    await waitFor(() => {
+      expect(acceptedId).toBeDefined();
+    });
+
+    const accepted = await TestMap.load(acceptedId!, account, {});
+
+    expect(accepted?.value).toEqual("hello");
+  });
+});