jazz-vue 0.8.6

package/src/auth/DemoAuthBasicUI.vue

@@ -0,0 +1,123 @@
+<template>
+    <div
+      :style="containerStyle"
+    >
+      <div v-if="state.state === 'loading'">Loading...</div>
+      <template v-else-if="state.state === 'ready'">
+        <h1 :style="{ color: darkMode ? '#fff' : '#000', textAlign: 'center' }">
+          {{ appName }}
+        </h1>
+        <div v-for="error in state.errors" :key="error" style="color: red">
+          {{ error }}
+        </div>
+        <form
+          @submit.prevent="signUp"
+          style="display: flex; flex-direction: column; gap: 0.5rem;"
+        >
+          <input
+            v-model="username"
+            placeholder="Display name"
+            autoComplete="webauthn"
+            :style="inputStyle"
+          />
+          <input
+            type="submit"
+            value="Sign up"
+            :style="buttonStyle"
+          />
+        </form>
+        <div
+          v-if="state.existingUsers.length > 0"
+          style="display: flex; flex-direction: column; gap: 0.5rem;"
+        >
+          <p
+            :style="{
+              color: darkMode ? '#e2e2e2' : '#000',
+              textAlign: 'center',
+              paddingTop: '0.5rem',
+              borderTop: '1px solid',
+              borderColor: darkMode ? '#111' : '#e2e2e2',
+            }"
+          >
+            Log in as
+          </p>
+          <button
+            v-for="user in state.existingUsers"
+            :key="user"
+            @click="logInAs(user)"
+            type="button"
+            :aria-label="`Log in as ${user}`"
+            :style="loginButtonStyle"
+          >
+            {{ user }}
+          </button>
+        </div>
+      </template>
+    </div>
+  </template>
+  
+  <script setup lang="ts">
+import { computed, ref } from "vue";
+import { DemoAuthState } from "./useDemoAuth.js";
+
+const props = defineProps<{
+  appName: string;
+  state: DemoAuthState;
+}>();
+
+const username = ref("");
+const darkMode = computed(
+  () =>
+    window.matchMedia &&
+    window.matchMedia("(prefers-color-scheme: dark)").matches,
+);
+
+const containerStyle = computed(() => ({
+  minHeight: "100vh",
+  display: "flex",
+  flexDirection: "column" as const,
+  justifyContent: "center",
+  alignItems: "center",
+  width: "100%",
+  padding: "1rem",
+  maxWidth: "100vw",
+  gap: "2rem",
+  margin: "0",
+  ...(darkMode.value ? { background: "#000" } : {}),
+}));
+
+const inputStyle = computed(() => ({
+  border: darkMode.value ? "2px solid #444" : "2px solid #ddd",
+  padding: "11px 8px",
+  borderRadius: "6px",
+  background: darkMode.value ? "#000" : "#fff",
+  color: darkMode.value ? "#fff" : "#000",
+}));
+
+const buttonStyle = computed(() => ({
+  padding: "13px 5px",
+  border: "none",
+  borderRadius: "6px",
+  cursor: "pointer",
+  background: darkMode.value ? "#444" : "#ddd",
+  color: darkMode.value ? "#fff" : "#000",
+}));
+
+const loginButtonStyle = computed(() => ({
+  background: darkMode.value ? "#0d0d0d" : "#eee",
+  color: darkMode.value ? "#fff" : "#000",
+  padding: "0.5rem",
+  border: "none",
+  borderRadius: "6px",
+}));
+
+const signUp = () => {
+  (props.state as DemoAuthState & { state: "ready" }).signUp(username.value);
+  username.value = "";
+};
+
+const logInAs = (user: string) => {
+  (props.state as DemoAuthState & { state: "ready" }).logInAs(user);
+};
+</script>
+  

package/src/auth/useDemoAuth.ts

@@ -0,0 +1,77 @@
+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";
+
+export type DemoAuthState = (
+  | {
+      state: "uninitialized";
+    }
+  | {
+      state: "loading";
+    }
+  | {
+      state: "ready";
+      existingUsers: string[];
+      signUp: (username: string) => void;
+      logInAs: (existingUser: string) => void;
+    }
+  | {
+      state: "signedIn";
+      logOut: () => void;
+    }
+) & {
+  errors: string[];
+};
+
+/** @category Auth Providers */
+export function useDemoAuth({
+  seedAccounts,
+}: {
+  seedAccounts?: {
+    [name: string]: { accountID: ID<Account>; accountSecret: AgentSecret };
+  };
+} = {}) {
+  const state = reactive<DemoAuthState>({
+    state: "loading",
+    errors: [],
+  });
+
+  const authMethod = ref(
+    new BrowserDemoAuth(
+      {
+        onReady: ({ signUp, existingUsers, logInAs }) => {
+          state.state = "ready";
+          (state as DemoAuthState & { state: "ready" }).signUp = signUp;
+          (state as DemoAuthState & { state: "ready" }).existingUsers =
+            existingUsers;
+          (state as DemoAuthState & { state: "ready" }).logInAs = logInAs;
+          state.errors = [];
+        },
+        onSignedIn: ({ logOut }) => {
+          state.state = "signedIn";
+          (state as DemoAuthState & { state: "signedIn" }).logOut = () => {
+            logOut();
+            state.state = "ready";
+            state.errors = [];
+          };
+          state.errors = [];
+          logoutHandler.value = (
+            state as DemoAuthState & { state: "signedIn" }
+          ).logOut;
+        },
+        onError: (error) => {
+          state.errors.push(error.toString());
+        },
+      },
+      seedAccounts,
+    ),
+  );
+  onUnmounted(() => {
+    if (state.state === "signedIn") {
+      logoutHandler.value = undefined;
+    }
+  });
+  return { authMethod, state };
+}

package/src/createJazzVueApp.ts

@@ -0,0 +1,347 @@
+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,
+  PropType,
+  Ref,
+  ShallowRef,
+  computed,
+  defineComponent,
+  inject,
+  onMounted,
+  onUnmounted,
+  provide,
+  ref,
+  shallowRef,
+  toRaw,
+  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: 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 me = useCoState<Acc, D>(
+      context.value.me.constructor as CoValueClass<Acc>,
+      context.value.me.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 = "me" in context.value ? context.value.me : undefined;
+
+    const me = useCoState<Acc, D>(
+      contextMe?.constructor as CoValueClass<Acc>,
+      contextMe?.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: 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(
+      [() => id, () => context, () => Schema, () => depth],
+      () => {
+        if (unsubscribe) unsubscribe();
+
+        if (!id) return;
+
+        unsubscribe = subscribeToCoValue(
+          Schema,
+          id,
+          "me" in context.value
+            ? toRaw(context.value.me)
+            : toRaw(context.value.guest),
+          depth,
+          (value) => {
+            state.value = value;
+          },
+        );
+      },
+      { 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,
+  };
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from "./createJazzVueApp.js";
+export * from "./auth/useDemoAuth.js";
+export { default as DemoAuthBasicUI } from "./auth/DemoAuthBasicUI.vue";
+export { default as ProgressiveImg } from "./ProgressiveImg.vue";

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "moduleDetection": "force",
+    "jsx": "preserve",
+    "jsxImportSource": "vue",
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noUncheckedIndexedAccess": true,
+    "esModuleInterop": true,
+    "declaration": true,
+    "isolatedModules": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.vue"],
+  "exclude": ["node_modules", "dist", "vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,27 @@
+import path from "path";
+import vue from "@vitejs/plugin-vue";
+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" })],
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, "src/index.ts"),
+      name: "JazzVue",
+      formats: ["es"],
+      fileName: (format) => `index.js`,
+    },
+    rollupOptions: {
+      external: ["vue", "jazz-browser", "jazz-tools"],
+      output: {
+        globals: {
+          vue: "Vue",
+          "jazz-browser": "JazzBrowser",
+          "jazz-tools": "JazzTools",
+        },
+      },
+    },
+  },
+});