jazz-vue 0.8.51 → 0.9.0

package/src/tests/useAccount.test.ts

@@ -0,0 +1,51 @@
+// @vitest-environment happy-dom
+
+import { Account, CoMap, co } from "jazz-tools";
+import { describe, expect, it } from "vitest";
+import { createUseAccountComposables, useAccount } from "../composables.js";
+import { createJazzTestAccount } from "../testing.js";
+import { withJazzTestSetup } from "./testUtils.js";
+
+describe("useAccount", () => {
+  it("should return the correct value", async () => {
+    const account = await createJazzTestAccount();
+
+    const [result] = withJazzTestSetup(() => useAccount(), {
+      account,
+    });
+
+    expect(result.me.value).toEqual(account);
+  });
+
+  it("should load nested values if requested", async () => {
+    class AccountRoot extends CoMap {
+      value = co.string;
+    }
+
+    class AccountSchema extends Account {
+      root = co.ref(AccountRoot);
+
+      migrate() {
+        if (!this._refs.root) {
+          this.root = AccountRoot.create({ value: "123" }, { owner: this });
+        }
+      }
+    }
+
+    const { useAccount } = createUseAccountComposables<AccountSchema>();
+
+    const account = await createJazzTestAccount({ AccountSchema });
+
+    const [result] = withJazzTestSetup(
+      () =>
+        useAccount({
+          root: {},
+        }),
+      {
+        account,
+      },
+    );
+
+    expect(result.me.value?.root?.value).toBe("123");
+  });
+});

package/src/tests/useAccountOrGuest.test.ts

@@ -0,0 +1,80 @@
+// @vitest-environment happy-dom
+
+import { Account, CoMap, co } from "jazz-tools";
+import { describe, expect, it } from "vitest";
+import {
+  createUseAccountComposables,
+  useAccountOrGuest,
+} from "../composables.js";
+import { createJazzTestAccount, createJazzTestGuest } from "../testing.js";
+import { withJazzTestSetup } from "./testUtils.js";
+
+describe("useAccountOrGuest", () => {
+  it("should return the correct me value", async () => {
+    const account = await createJazzTestAccount();
+
+    const [result] = withJazzTestSetup(() => useAccountOrGuest(), {
+      account,
+    });
+
+    expect(result.me.value).toEqual(account);
+  });
+
+  it("should return the guest agent if the account is a guest", async () => {
+    const account = await createJazzTestGuest();
+
+    const [result] = withJazzTestSetup(() => useAccountOrGuest(), {
+      account,
+    });
+
+    expect(result.me.value).toBe(account.guest);
+  });
+
+  it("should load nested values if requested", async () => {
+    class AccountRoot extends CoMap {
+      value = co.string;
+    }
+
+    class AccountSchema extends Account {
+      root = co.ref(AccountRoot);
+
+      migrate() {
+        if (!this._refs.root) {
+          this.root = AccountRoot.create({ value: "123" }, { owner: this });
+        }
+      }
+    }
+
+    const account = await createJazzTestAccount({ AccountSchema });
+    const { useAccountOrGuest } = createUseAccountComposables<AccountSchema>();
+
+    const [result] = withJazzTestSetup(
+      () =>
+        useAccountOrGuest({
+          root: {},
+        }),
+      {
+        account,
+      },
+    );
+
+    // @ts-expect-error
+    expect(result.me.value?.root?.value).toBe("123");
+  });
+
+  it("should not load nested values if the account is a guest", async () => {
+    const account = await createJazzTestGuest();
+
+    const [result] = withJazzTestSetup(
+      () =>
+        useAccountOrGuest({
+          root: {},
+        }),
+      {
+        account,
+      },
+    );
+
+    expect(result.me.value).toBe(account.guest);
+  });
+});

package/src/tests/useCoState.test.ts

@@ -0,0 +1,127 @@
+// @vitest-environment happy-dom
+
+import { CoMap, co } from "jazz-tools";
+import { createJazzTestAccount } from "jazz-tools/testing";
+import { describe, expect, it } from "vitest";
+import { useCoState } from "../index.js";
+import { withJazzTestSetup } from "./testUtils.js";
+
+describe("useCoState", () => {
+  it("should return the correct value", async () => {
+    class TestMap extends CoMap {
+      content = co.string;
+    }
+
+    const account = await createJazzTestAccount();
+
+    const map = TestMap.create(
+      {
+        content: "123",
+      },
+      { owner: account },
+    );
+
+    const [result] = withJazzTestSetup(() => useCoState(TestMap, map.id, {}), {
+      account,
+    });
+
+    expect(result.value?.content).toBe("123");
+  });
+
+  it("should update the value when the coValue changes", async () => {
+    class TestMap extends CoMap {
+      content = co.string;
+    }
+
+    const account = await createJazzTestAccount();
+
+    const map = TestMap.create(
+      {
+        content: "123",
+      },
+      { owner: account },
+    );
+
+    const [result] = withJazzTestSetup(() => useCoState(TestMap, map.id, {}), {
+      account,
+    });
+
+    expect(result.value?.content).toBe("123");
+
+    map.content = "456";
+
+    expect(result.value?.content).toBe("456");
+  });
+
+  it("should load nested values if requested", async () => {
+    class TestNestedMap extends CoMap {
+      content = co.string;
+    }
+
+    class TestMap extends CoMap {
+      content = co.string;
+      nested = co.ref(TestNestedMap);
+    }
+
+    const account = await createJazzTestAccount();
+
+    const map = TestMap.create(
+      {
+        content: "123",
+        nested: TestNestedMap.create(
+          {
+            content: "456",
+          },
+          { owner: account },
+        ),
+      },
+      { owner: account },
+    );
+
+    const [result] = withJazzTestSetup(
+      () =>
+        useCoState(TestMap, map.id, {
+          nested: {},
+        }),
+      {
+        account,
+      },
+    );
+
+    expect(result.value?.content).toBe("123");
+    expect(result.value?.nested?.content).toBe("456");
+  });
+
+  it("should load nested values on access even if not requested", async () => {
+    class TestNestedMap extends CoMap {
+      content = co.string;
+    }
+
+    class TestMap extends CoMap {
+      content = co.string;
+      nested = co.ref(TestNestedMap);
+    }
+
+    const account = await createJazzTestAccount();
+
+    const map = TestMap.create(
+      {
+        content: "123",
+        nested: TestNestedMap.create(
+          {
+            content: "456",
+          },
+          { owner: account },
+        ),
+      },
+      { owner: account },
+    );
+
+    const [result] = withJazzTestSetup(() => useCoState(TestMap, map.id, {}), {
+      account,
+    });
+
+    expect(result.value?.content).toBe("123");
+    expect(result.value?.nested?.content).toBe("456");
+  });
+});

package/vite.config.ts

@@ -1,27 +1,27 @@
 import path from "path";
 import vue from "@vitejs/plugin-vue";
+import depsExternal from "rollup-plugin-node-externals";
 import { defineConfig } from "vite";
 import dts from "vite-plugin-dts";
 
 export default defineConfig({
-  // @ts-expect-error types
-  plugins: [vue(), dts({ include: ["src/**/*.ts"], outDir: "dist" })],
+  plugins: [
+    vue(),
+    dts({ include: ["src/**/*.ts"], outDir: "dist" }),
+    depsExternal(),
+  ],
   build: {
     lib: {
-      entry: path.resolve(__dirname, "src/index.ts"),
+      entry: {
+        index: path.resolve(__dirname, "src/index.ts"),
+        testing: path.resolve(__dirname, "src/testing.ts"),
+      },
       name: "JazzVue",
       formats: ["es"],
-      fileName: (format) => `index.js`,
+      fileName: (_, entryName) => `${entryName}.js`,
     },
     rollupOptions: {
-      external: ["vue", "jazz-browser", "jazz-tools"],
-      output: {
-        globals: {
-          vue: "Vue",
-          "jazz-browser": "JazzBrowser",
-          "jazz-tools": "JazzTools",
-        },
-      },
+      external: ["vue"],
     },
   },
 });

package/dist/createJazzVueApp.d.ts

@@ -1,29 +0,0 @@
-import { Account, AnonymousJazzAgent, CoValue, CoValueClass, DeeplyLoaded, DepthsIn, ID } from 'jazz-tools';
-import { Component, ComputedRef, MaybeRef, Ref } from 'vue';
-export declare const logoutHandler: Ref<(() => void) | undefined, (() => void) | undefined>;
-export interface JazzVueApp<Acc extends Account> {
-    JazzProvider: Component;
-    useAccount(): {
-        me: ComputedRef<Acc>;
-        logOut: () => void;
-    };
-    useAccount<D extends DepthsIn<Acc>>(depth: D): {
-        me: ComputedRef<DeeplyLoaded<Acc, D> | undefined>;
-        logOut: () => void;
-    };
-    useAccountOrGuest(): {
-        me: ComputedRef<Acc | AnonymousJazzAgent>;
-    };
-    useAccountOrGuest<D extends DepthsIn<Acc>>(depth: D): {
-        me: ComputedRef<DeeplyLoaded<Acc, D> | undefined | AnonymousJazzAgent>;
-    };
-    useCoState<V extends CoValue, D>(Schema: CoValueClass<V>, id: MaybeRef<ID<V> | undefined>, depth?: D & DepthsIn<V>): Ref<DeeplyLoaded<V, D> | undefined>;
-    useAcceptInvite<V extends CoValue>(args: {
-        invitedObjectSchema: CoValueClass<V>;
-        onAccept: (projectID: ID<V>) => void;
-        forValueHint?: string;
-    }): void;
-}
-export declare function createJazzVueApp<Acc extends Account>({ AccountSchema, }?: {
-    AccountSchema?: any;
-}): JazzVueApp<Acc>;

package/src/createJazzVueApp.ts

@@ -1,356 +0,0 @@
-import {
-  BrowserContext,
-  BrowserGuestContext,
-  consumeInviteLinkFromWindowLocation,
-  createJazzBrowserContext,
-} from "jazz-browser";
-import {
-  Account,
-  AnonymousJazzAgent,
-  AuthMethod,
-  CoValue,
-  CoValueClass,
-  DeeplyLoaded,
-  DepthsIn,
-  ID,
-  subscribeToCoValue,
-} from "jazz-tools";
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import {
-  Component,
-  ComputedRef,
-  MaybeRef,
-  PropType,
-  Ref,
-  ShallowRef,
-  computed,
-  defineComponent,
-  inject,
-  onMounted,
-  onUnmounted,
-  provide,
-  ref,
-  shallowRef,
-  toRaw,
-  unref,
-  watch,
-} from "vue";
-
-export const logoutHandler = ref<() => void>();
-
-export interface JazzVueApp<Acc extends Account> {
-  JazzProvider: Component;
-
-  useAccount(): { me: ComputedRef<Acc>; logOut: () => void };
-  useAccount<D extends DepthsIn<Acc>>(
-    depth: D,
-  ): {
-    me: ComputedRef<DeeplyLoaded<Acc, D> | undefined>;
-    logOut: () => void;
-  };
-
-  useAccountOrGuest(): { me: ComputedRef<Acc | AnonymousJazzAgent> };
-  useAccountOrGuest<D extends DepthsIn<Acc>>(
-    depth: D,
-  ): {
-    me: ComputedRef<DeeplyLoaded<Acc, D> | undefined | AnonymousJazzAgent>;
-  };
-
-  useCoState<V extends CoValue, D>(
-    Schema: CoValueClass<V>,
-    id: MaybeRef<ID<V> | undefined>,
-    depth?: D & DepthsIn<V>,
-  ): Ref<DeeplyLoaded<V, D> | undefined>;
-
-  useAcceptInvite<V extends CoValue>(args: {
-    invitedObjectSchema: CoValueClass<V>;
-    onAccept: (projectID: ID<V>) => void;
-    forValueHint?: string;
-  }): void;
-}
-
-const JazzContextSymbol = Symbol("JazzContext");
-
-export function createJazzVueApp<Acc extends Account>({
-  AccountSchema = Account as any,
-} = {}): JazzVueApp<Acc> {
-  const JazzProvider = defineComponent({
-    name: "JazzProvider",
-    props: {
-      auth: {
-        type: [String, Object] as PropType<AuthMethod | "guest">,
-        required: true,
-      },
-      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<Acc> | 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<Acc>(
-            props.auth === "guest"
-              ? { peer: props.peer, storage: props.storage }
-              : {
-                  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);
-    },
-  });
-
-  function useJazzContext() {
-    const context =
-      inject<Ref<BrowserContext<Acc> | BrowserGuestContext>>(JazzContextSymbol);
-    if (!context) {
-      throw new Error("useJazzContext must be used within a JazzProvider");
-    }
-    return context;
-  }
-
-  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 = computed(() =>
-      "me" in context.value ? context.value.me : undefined,
-    );
-
-    const me = useCoState<Acc, D>(
-      contextMe.value?.constructor as CoValueClass<Acc>,
-      contextMe.value?.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 : 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)),
-      };
-    }
-  }
-
-  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;
-          },
-        );
-      },
-      { deep: true, immediate: true },
-    );
-
-    onUnmounted(() => {
-      if (unsubscribe) unsubscribe();
-    });
-
-    const computedState = computed(() => state.value);
-
-    return computedState;
-  }
-
-  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<Acc>).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();
-        }
-      },
-    );
-  }
-
-  return {
-    JazzProvider,
-    useAccount,
-    useAccountOrGuest,
-    useCoState,
-    useAcceptInvite,
-  };
-}