jazz-tools 0.14.28 → 0.15.0

package/src/react-native-media-images/index.ts

@@ -0,0 +1,238 @@
+import ImageResizer from "@bam.tech/react-native-image-resizer";
+import * as FileSystem from "expo-file-system";
+import {
+  Account,
+  FileStream,
+  Group,
+  ImageDefinition,
+  Loaded,
+} from "jazz-tools";
+import { Image } from "react-native";
+
+function arrayBuffer(blob: Blob): Promise<ArrayBuffer> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      resolve(reader.result as ArrayBuffer);
+    };
+    reader.onerror = (error) => {
+      reject(error);
+    };
+    reader.readAsArrayBuffer(blob);
+  });
+}
+
+async function fileUriToBlob(uri: string): Promise<Blob> {
+  try {
+    const response = await fetch(uri);
+    const blob = await response.blob();
+    blob.arrayBuffer = () => arrayBuffer(blob);
+    return blob;
+  } catch (error) {
+    console.error("Failed to convert file URI to Blob:", error);
+    throw new Error("Failed to convert file URI to Blob");
+  }
+}
+
+async function convertFileContentsToBase64DataURI(
+  fileUri: string,
+  contentType: string,
+) {
+  try {
+    const base64 = await FileSystem.readAsStringAsync(fileUri, {
+      encoding: FileSystem.EncodingType.Base64,
+    });
+    return `data:${contentType};base64,${base64}`;
+  } catch (error) {
+    console.error("Failed to convert file to base64:", error);
+    return null;
+  }
+}
+
+function base64DataURIToParts(base64Data: string) {
+  const parts = base64Data.split(",");
+  const contentType = parts[0]?.split(":")?.[1]?.split(";")?.[0] || "";
+  const data = parts[1] || "";
+  return { contentType, data };
+}
+
+function contentTypeToFormat(contentType: string) {
+  if (contentType.includes("image/png")) return "PNG";
+  if (contentType.includes("image/jpeg")) return "JPEG";
+  if (contentType.includes("image/webp")) return "WEBP";
+  return "PNG";
+}
+
+async function base64DataURIToBlob(base64Data: string) {
+  const { contentType, data } = base64DataURIToParts(base64Data);
+  const byteCharacters = atob(data);
+
+  const byteNumbers = new Array(byteCharacters.length);
+  for (let i = 0; i < byteCharacters.length; i++) {
+    byteNumbers[i] = byteCharacters.charCodeAt(i);
+  }
+  const byteArray = new Uint8Array(byteNumbers);
+
+  // @ts-expect-error byteArray has data
+  const blob = new Blob(byteArray, { type: contentType });
+  blob.arrayBuffer = () => arrayBuffer(blob);
+  return blob;
+}
+
+async function getImageDimensions(
+  uri: string,
+): Promise<{ width: number; height: number }> {
+  return new Promise((resolve, reject) => {
+    Image.getSize(
+      uri,
+      (width, height) => resolve({ width, height }),
+      (error) => {
+        console.error("Failed to get image dimensions:", error);
+        reject(new Error("Failed to get image dimensions"));
+      },
+    );
+  });
+}
+
+/** @category Image creation */
+export async function createImageNative(
+  base64ImageDataURI: string,
+  options: {
+    owner?: Group | Account;
+    maxSize?: 256 | 1024 | 2048;
+  } = {},
+): Promise<Loaded<typeof ImageDefinition>> {
+  try {
+    const { contentType } = base64DataURIToParts(base64ImageDataURI);
+    const format = contentTypeToFormat(contentType);
+
+    let originalWidth, originalHeight;
+    try {
+      ({ width: originalWidth, height: originalHeight } =
+        await getImageDimensions(base64ImageDataURI));
+    } catch (error) {
+      console.error("Error getting image dimensions:", error);
+      throw new Error("Failed to get image dimensions");
+    }
+
+    let placeholderImage;
+    try {
+      placeholderImage = await ImageResizer.createResizedImage(
+        base64ImageDataURI,
+        8,
+        8,
+        format,
+        100,
+        0,
+      );
+    } catch (error) {
+      console.error("Error creating placeholder image:", error);
+      throw new Error("Failed to create placeholder image");
+    }
+
+    const placeholderDataURL = await convertFileContentsToBase64DataURI(
+      placeholderImage.uri,
+      contentType,
+    );
+
+    if (!placeholderDataURL) {
+      throw new Error("Failed to create placeholder data URL");
+    }
+
+    const imageDefinition = ImageDefinition.create(
+      {
+        originalSize: [originalWidth, originalHeight],
+        placeholderDataURL,
+      },
+      options.owner,
+    );
+
+    const addImageStream = async (
+      width: number,
+      height: number,
+      label: string,
+    ) => {
+      try {
+        const resizedImage = await ImageResizer.createResizedImage(
+          base64ImageDataURI,
+          width,
+          height,
+          format,
+          80,
+          0,
+        );
+
+        const binaryStream = await FileStream.createFromBlob(
+          await fileUriToBlob(resizedImage.uri),
+          imageDefinition._owner,
+        );
+
+        imageDefinition[label] = binaryStream;
+      } catch (error) {
+        console.error(`Error adding image stream for ${label}:`, error);
+        throw new Error(`Failed to add image stream for ${label}`);
+      }
+    };
+
+    if (originalWidth > 256 || originalHeight > 256) {
+      const width =
+        originalWidth > originalHeight
+          ? 256
+          : Math.round(256 * (originalWidth / originalHeight));
+      const height =
+        originalHeight > originalWidth
+          ? 256
+          : Math.round(256 * (originalHeight / originalWidth));
+      await addImageStream(width, height, `${width}x${height}`);
+    }
+
+    if (options.maxSize === 256) return imageDefinition;
+
+    if (originalWidth > 1024 || originalHeight > 1024) {
+      const width =
+        originalWidth > originalHeight
+          ? 1024
+          : Math.round(1024 * (originalWidth / originalHeight));
+      const height =
+        originalHeight > originalWidth
+          ? 1024
+          : Math.round(1024 * (originalHeight / originalWidth));
+      await addImageStream(width, height, `${width}x${height}`);
+    }
+
+    if (options.maxSize === 1024) return imageDefinition;
+
+    if (originalWidth > 2048 || originalHeight > 2048) {
+      const width =
+        originalWidth > originalHeight
+          ? 2048
+          : Math.round(2048 * (originalWidth / originalHeight));
+      const height =
+        originalHeight > originalWidth
+          ? 2048
+          : Math.round(2048 * (originalHeight / originalWidth));
+      await addImageStream(width, height, `${width}x${height}`);
+    }
+
+    if (options.maxSize === 2048) return imageDefinition;
+
+    if (options.maxSize === undefined || options.maxSize > 2048) {
+      try {
+        const originalBinaryStream = await FileStream.createFromBlob(
+          await base64DataURIToBlob(base64ImageDataURI),
+          imageDefinition._owner,
+        );
+        imageDefinition[`${originalWidth}x${originalHeight}`] =
+          originalBinaryStream;
+      } catch (error) {
+        console.error("Error adding original image stream:", error);
+        throw new Error("Failed to add original image stream");
+      }
+    }
+
+    return imageDefinition;
+  } catch (error) {
+    console.error("Error in createImage:", error);
+    throw error;
+  }
+}

package/src/svelte/Provider.svelte

@@ -0,0 +1,61 @@
+<script lang="ts" generics="S extends (AccountClass<Account> & CoValueFromRaw<Account>) | AnyAccountSchema">
+import type { AuthSecretStorage, InstanceOfSchema } from "jazz-tools";
+import {
+  Account,
+  type AccountClass,
+  type AnyAccountSchema,
+  type CoValueFromRaw,
+} from "jazz-tools";
+import {
+  JazzBrowserContextManager,
+  type JazzContextManagerProps,
+} from "jazz-tools/browser";
+import { type Snippet, setContext, untrack } from "svelte";
+import { JAZZ_AUTH_CTX, JAZZ_CTX, type JazzContext } from "./jazz.svelte.js";
+
+let props: JazzContextManagerProps<S> & { children?: Snippet } = $props();
+
+const contextManager = new JazzBrowserContextManager<S>();
+
+const ctx = $state<JazzContext<InstanceOfSchema<S>>>({ current: undefined });
+
+setContext<JazzContext<InstanceOfSchema<S>>>(JAZZ_CTX, ctx);
+setContext<AuthSecretStorage>(
+  JAZZ_AUTH_CTX,
+  contextManager.getAuthSecretStorage(),
+);
+
+$effect(() => {
+  props.sync.when;
+  props.sync.peer;
+  props.storage;
+  props.guestMode;
+  return untrack(() => {
+    if (!props.sync) return;
+
+    contextManager
+      .createContext({
+        sync: props.sync,
+        storage: props.storage,
+        guestMode: props.guestMode,
+        AccountSchema: props.AccountSchema,
+        defaultProfileName: props.defaultProfileName,
+        onAnonymousAccountDiscarded: props.onAnonymousAccountDiscarded,
+        onLogOut: props.onLogOut,
+      })
+      .catch((error) => {
+        console.error("Error creating Jazz browser context:", error);
+      });
+  });
+});
+
+$effect(() => {
+  return contextManager.subscribe(() => {
+    ctx.current = contextManager.getCurrentValue();
+  });
+});
+</script>
+
+{#if ctx.current}
+  {@render props.children?.()}
+{/if}

package/src/svelte/auth/PasskeyAuth.svelte.ts

@@ -0,0 +1,42 @@
+import { BrowserPasskeyAuth } from "jazz-tools/browser";
+import { getAuthSecretStorage, getJazzContext } from "../jazz.svelte.js";
+import { useIsAuthenticated } from "./useIsAuthenticated.svelte.js";
+
+export type PasskeyAuth = {
+  current: BrowserPasskeyAuth;
+  state: "anonymous" | "signedIn";
+};
+
+/** @category Auth Providers */
+export function usePasskeyAuth({
+  appName,
+  appHostname,
+}: {
+  appName: string;
+  appHostname?: string;
+}): PasskeyAuth {
+  const context = getJazzContext();
+  const authSecretStorage = getAuthSecretStorage();
+  const auth = new BrowserPasskeyAuth(
+    context.current.node.crypto,
+    context.current.authenticate,
+    authSecretStorage,
+    appName,
+    appHostname,
+  );
+
+  if ("guest" in context.current) {
+    throw new Error("Passkey auth is not supported in guest mode");
+  }
+
+  const isAuthenticated = useIsAuthenticated();
+
+  const state = $derived(isAuthenticated.current ? "signedIn" : "anonymous");
+
+  return {
+    current: auth,
+    get state() {
+      return state;
+    },
+  };
+}

package/src/svelte/auth/PasskeyAuthBasicUI.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+import type { Snippet } from "svelte";
+import { usePasskeyAuth } from "./PasskeyAuth.svelte.js";
+
+let { appName, children }: { appName: string; children?: Snippet } = $props();
+
+const auth = usePasskeyAuth({ appName });
+
+let error = $state<string | undefined>(undefined);
+
+function signUp(e: Event) {
+  const formData = new FormData(e.currentTarget as HTMLFormElement);
+  const name = formData.get("name") as string;
+
+  if (!name) {
+    error = "Name is required";
+    return;
+  }
+  e.preventDefault();
+  error = undefined;
+  auth.current.signUp(name).catch((e) => {
+    error = e.message;
+  });
+}
+
+function logIn(e: Event) {
+  error = undefined;
+  e.preventDefault();
+  e.stopPropagation();
+  auth.current.logIn().catch((e) => {
+    error = e.message;
+  });
+}
+</script>
+
+{#if auth.state === 'anonymous'}
+  <div
+    style="width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center;"
+  >
+    <div style="max-width: 18rem; display: flex; flex-direction: column; gap: 2rem;">
+      {#if error}
+        <div style="color: red;">
+          {error}
+        </div>
+      {/if}
+      <form onsubmit={signUp}>
+        <input type="text" name="name" placeholder="Display name" autocomplete="name" />
+        <input type="submit" value="Sign up" />
+      </form>
+      <button onclick={logIn}> Log in with existing account </button>
+    </div>
+  </div>
+{:else}
+  {@render children?.()}
+{/if}
+
+<style>
+  form {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  button,
+  input[type='submit'] {
+    background: #000;
+    color: #fff;
+    padding: 6px 12px;
+    border: none;
+    border-radius: 6px;
+    min-height: 38px;
+    cursor: pointer;
+  }
+
+  input[type='text'] {
+    border: 2px solid #000;
+    padding: 6px 12px;
+    border-radius: 6px;
+    min-height: 24px;
+  }
+</style>

package/src/svelte/auth/PassphraseAuth.svelte.ts

@@ -0,0 +1,49 @@
+import { PassphraseAuth } from "jazz-tools";
+import { untrack } from "svelte";
+import { createSubscriber } from "svelte/reactivity";
+import { getAuthSecretStorage, getJazzContext } from "../jazz.svelte.js";
+import { useIsAuthenticated } from "./useIsAuthenticated.svelte.js";
+
+/** @category Auth Providers */
+export function usePassphraseAuth({
+  wordlist,
+}: {
+  wordlist: string[];
+}) {
+  const context = getJazzContext();
+  const authSecretStorage = getAuthSecretStorage();
+  const auth = new PassphraseAuth(
+    context.current.node.crypto,
+    context.current.authenticate,
+    context.current.register,
+    authSecretStorage,
+    wordlist,
+  );
+
+  auth.loadCurrentAccountPassphrase();
+
+  const subscribe = createSubscriber((update) => {
+    const off = auth.subscribe(update);
+
+    return () => off();
+  });
+
+  const isAuthenticated = useIsAuthenticated();
+
+  const state = $derived(isAuthenticated.current ? "signedIn" : "anonymous");
+
+  return {
+    logIn: auth.logIn,
+    signUp: auth.signUp,
+    registerNewAccount: auth.registerNewAccount,
+    generateRandomPassphrase: auth.generateRandomPassphrase,
+    get passphrase() {
+      subscribe();
+
+      return auth.passphrase;
+    },
+    get state() {
+      return state;
+    },
+  };
+}

package/src/svelte/auth/index.ts

@@ -0,0 +1,3 @@
+export * from "./PasskeyAuth.svelte.js";
+export * from "./PassphraseAuth.svelte.js";
+export { default as PasskeyAuthBasicUI } from "./PasskeyAuthBasicUI.svelte";

package/src/svelte/auth/useIsAuthenticated.svelte.ts

@@ -0,0 +1,28 @@
+import { createSubscriber } from "svelte/reactivity";
+import { getAuthSecretStorage } from "../jazz.svelte.js";
+
+export function useIsAuthenticated() {
+  const authSecretStorage = getAuthSecretStorage();
+
+  const subscribe = createSubscriber((update) => {
+    const off = authSecretStorage.onUpdate(update);
+
+    return () => off();
+  });
+
+  function getCurrent() {
+    subscribe();
+
+    return authSecretStorage.isAuthenticated;
+  }
+
+  return {
+    /** @deprecated Use `current` instead */
+    get value() {
+      return getCurrent();
+    },
+    get current() {
+      return getCurrent();
+    },
+  };
+}

package/src/svelte/index.ts

@@ -0,0 +1,5 @@
+export { createInviteLink, parseInviteLink } from "jazz-tools/browser";
+export * from "./auth/index.js";
+export * from "./jazz.svelte.js";
+export * from "./jazz.class.svelte.js";
+export { useIsAuthenticated } from "./auth/useIsAuthenticated.svelte.js";

package/src/svelte/jazz.class.svelte.ts

@@ -0,0 +1,172 @@
+import type {
+  Account,
+  AccountClass,
+  AnyAccountSchema,
+  CoValueFromRaw,
+  CoValueOrZodSchema,
+  InstanceOfSchema,
+  Loaded,
+  ResolveQuery,
+  ResolveQueryStrict,
+} from "jazz-tools";
+import { anySchemaToCoSchema, subscribeToCoValue } from "jazz-tools";
+import { untrack } from "svelte";
+import { createSubscriber } from "svelte/reactivity";
+import { useIsAuthenticated } from "./auth/useIsAuthenticated.svelte.js";
+import { getJazzContext } from "./jazz.svelte";
+
+export class CoState<
+  V extends CoValueOrZodSchema,
+  R extends ResolveQuery<V> = true,
+> {
+  #value: Loaded<V, R> | undefined | null = undefined;
+  #ctx = getJazzContext<InstanceOfSchema<AccountClass<Account>>>();
+  #id: string | undefined | null;
+  #subscribe: () => void;
+  #update = () => {};
+
+  constructor(
+    Schema: V,
+    id: string | undefined | null | (() => string | undefined | null),
+    options?: { resolve?: ResolveQueryStrict<V, R> },
+  ) {
+    this.#id = $derived.by(typeof id === "function" ? id : () => id);
+
+    this.#subscribe = createSubscriber((update) => {
+      this.#update = update;
+    });
+
+    $effect.pre(() => {
+      const ctx = this.#ctx.current;
+      const id = this.#id;
+
+      return untrack(() => {
+        if (!ctx || !id) {
+          return this.update(undefined);
+        }
+        const agent = "me" in ctx ? ctx.me : ctx.guest;
+
+        const unsubscribe = subscribeToCoValue(
+          anySchemaToCoSchema(Schema),
+          id,
+          {
+            // @ts-expect-error The resolve query type isn't compatible with the anySchemaToCoSchema conversion
+            resolve: options?.resolve,
+            loadAs: agent,
+            onUnavailable: () => {
+              this.update(null);
+            },
+            onUnauthorized: () => {
+              this.update(null);
+            },
+            syncResolution: true,
+          },
+          (value) => {
+            this.update(value as Loaded<V, R>);
+          },
+        );
+
+        return () => {
+          unsubscribe();
+        };
+      });
+    });
+  }
+
+  update(value: Loaded<V, R> | undefined | null) {
+    if (this.#value === value) return;
+    this.#value = value;
+    this.#update();
+  }
+
+  get current() {
+    this.#subscribe();
+    return this.#value;
+  }
+}
+
+export class AccountCoState<
+  A extends
+    | (AccountClass<Account> & CoValueFromRaw<Account>)
+    | AnyAccountSchema,
+  R extends ResolveQuery<A> = true,
+> {
+  #value: Loaded<A, R> | undefined | null = undefined;
+  #ctx = getJazzContext<InstanceOfSchema<A>>();
+  #subscribe: () => void;
+  #update = () => {};
+
+  constructor(Schema: A, options?: { resolve?: ResolveQueryStrict<A, R> }) {
+    this.#subscribe = createSubscriber((update) => {
+      this.#update = update;
+    });
+
+    $effect.pre(() => {
+      const ctx = this.#ctx.current;
+
+      return untrack(() => {
+        if (!ctx || !("me" in ctx)) {
+          return this.update(undefined);
+        }
+
+        const me = ctx.me;
+
+        const unsubscribe = subscribeToCoValue(
+          anySchemaToCoSchema(Schema),
+          me.id,
+          {
+            // @ts-expect-error The resolve query type isn't compatible with the anySchemaToCoSchema conversion
+            resolve: options?.resolve,
+            loadAs: me,
+            onUnavailable: () => {
+              this.update(null);
+            },
+            onUnauthorized: () => {
+              this.update(null);
+            },
+            syncResolution: true,
+          },
+          (value) => {
+            this.update(value as Loaded<A, R>);
+          },
+        );
+
+        return () => {
+          unsubscribe();
+        };
+      });
+    });
+  }
+
+  update(value: Loaded<A, R> | undefined | null) {
+    if (this.#value === value) return;
+    this.#value = value;
+    this.#update();
+  }
+
+  logOut = () => {
+    this.#ctx.current?.logOut();
+  };
+
+  get current() {
+    this.#subscribe();
+
+    return this.#value;
+  }
+
+  get agent() {
+    if (!this.#ctx.current) {
+      throw new Error("No context found");
+    }
+
+    return "me" in this.#ctx.current
+      ? this.#ctx.current.me
+      : this.#ctx.current.guest;
+  }
+
+  #isAuthenticated = useIsAuthenticated();
+
+  get isAuthenticated() {
+    return this.#isAuthenticated.current;
+  }
+}