jazz-tools 0.18.15 → 0.18.17

package/src/better-auth/database-adapter/utils.ts

@@ -0,0 +1,178 @@
+import { CleanedWhere } from "better-auth/adapters";
+
+export function filterListByWhere<T>(
+  data: T[],
+  where: CleanedWhere[] | undefined,
+): T[] {
+  if (!Array.isArray(data)) {
+    throw new Error("Expected data to be an array");
+  }
+
+  if (where === undefined) {
+    return data;
+  }
+
+  if (!Array.isArray(where)) {
+    throw new Error("Expected where to be an array");
+  }
+
+  // Helper to evaluate a single condition
+  function evaluateCondition(item: any, condition: CleanedWhere): boolean {
+    const { field, operator, value } = condition;
+    const itemValue = field === "id" ? item.$jazz.id : item[field];
+
+    switch (operator) {
+      case "eq":
+        return itemValue === value;
+      case "ne":
+        return itemValue !== value;
+      case "lt":
+        return value !== null && itemValue < value;
+      case "lte":
+        return value !== null && itemValue <= value;
+      case "gt":
+        return value !== null && itemValue > value;
+      case "gte":
+        return value !== null && itemValue >= value;
+      case "in":
+        return Array.isArray(value)
+          ? (value as (string | number | boolean | Date)[]).includes(itemValue)
+          : false;
+      case "contains":
+        return typeof itemValue === "string" && typeof value === "string"
+          ? itemValue.includes(value)
+          : false;
+      case "starts_with":
+        return typeof itemValue === "string" && typeof value === "string"
+          ? itemValue.startsWith(value)
+          : false;
+      case "ends_with":
+        return typeof itemValue === "string" && typeof value === "string"
+          ? itemValue.endsWith(value)
+          : false;
+      default:
+        throw new Error(`Unsupported operator: ${operator}`);
+    }
+  }
+
+  // Group conditions by connector (AND/OR)
+  // If no connector, default to AND between all
+  return data.filter((item) => {
+    let result: boolean = true;
+    for (let i = 0; i < where.length; i++) {
+      const condition = where[i]!;
+      const matches = evaluateCondition(item, condition);
+      if (i === 0) {
+        result = matches;
+      } else {
+        const connector = condition.connector || "AND";
+        if (connector === "AND") {
+          result = result && matches;
+        } else if (connector === "OR") {
+          result = result || matches;
+        } else {
+          throw new Error(`Unsupported connector: ${connector}`);
+        }
+      }
+    }
+    return result;
+  });
+}
+
+export function sortListByField<T extends Record<string, any> | null>(
+  data: T[],
+  sort?: { field: string; direction: "asc" | "desc" },
+): T[] {
+  if (!sort) {
+    return data;
+  }
+
+  const { field, direction } = sort;
+
+  data.sort((a, b) => {
+    if (a === null || b === null) {
+      return 0;
+    }
+
+    if (typeof a[field] === "string" && typeof b[field] === "string") {
+      return direction === "asc"
+        ? a[field].localeCompare(b[field])
+        : b[field].localeCompare(a[field]);
+    }
+
+    return direction === "asc" ? a[field] - b[field] : b[field] - a[field];
+  });
+
+  return data;
+}
+
+export function paginateList<T>(
+  data: T[],
+  limit: number | undefined,
+  offset: number | undefined,
+): T[] {
+  if (offset === undefined && limit === undefined) {
+    return data;
+  }
+
+  if (limit === 0) {
+    return [];
+  }
+
+  let start = offset ?? 0;
+  if (start < 0) {
+    start = 0;
+  }
+
+  const end = limit ? start + limit : undefined;
+  return data.slice(start, end);
+}
+
+function isWhereByField(field: string, where: CleanedWhere): boolean {
+  return (
+    where.field === field &&
+    where.operator === "eq" &&
+    where.connector === "AND"
+  );
+}
+
+export function isWhereBySingleField<T extends string>(
+  field: T,
+  where: CleanedWhere[] | undefined,
+): where is [{ field: T; operator: "eq"; value: string; connector: "AND" }] {
+  if (where === undefined || where.length !== 1) {
+    return false;
+  }
+
+  const [cond] = where;
+  if (!cond) {
+    return false;
+  }
+
+  return isWhereByField(field, cond);
+}
+
+export function containWhereByField<T extends string>(
+  field: T,
+  where: CleanedWhere[] | undefined,
+): boolean {
+  if (where === undefined) {
+    return false;
+  }
+
+  return where.some((cond) => isWhereByField(field, cond));
+}
+
+export function extractWhereByField<T extends string>(
+  field: T,
+  where: CleanedWhere[] | undefined,
+): [CleanedWhere | undefined, CleanedWhere[]] {
+  if (where === undefined) {
+    return [undefined, []];
+  }
+
+  return [
+    where.find((cond) => isWhereByField(field, cond)),
+    where.filter((cond) => !isWhereByField(field, cond)),
+  ];
+}

package/src/react/media/image.tsx

@@ -140,6 +140,8 @@ export const Image = forwardRef<HTMLImageElement, ImageProps>(function Image(
       return lazyPlaceholder;
     }
 
+    if (image === undefined)
+      return "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
     if (!image) return undefined;
 
     const bestImage = highestResAvailable(

package/src/react/tests/media/image.test.tsx

@@ -13,17 +13,35 @@ describe("Image", async () => {
   vi.spyOn(Account, "getMe").mockReturnValue(account);
 
   describe("initial rendering", () => {
-    it("should render nothing if coValue is not found", async () => {
+    it("should render a blank placeholder while waiting for the coValue to load", async () => {
       const { container } = render(
         <Image imageId="co_zMTubMby3QiKDYnW9e2BEXW7Xaq" alt="test" />,
         { account },
       );
+
       const img = container.querySelector("img");
       expect(img).toBeDefined();
       expect(img!.getAttribute("width")).toBe(null);
       expect(img!.getAttribute("height")).toBe(null);
       expect(img!.alt).toBe("test");
-      expect(img!.src).toBe("");
+      expect(img!.src).toBe(
+        "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==",
+      );
+    });
+
+    it("should render nothing if coValue is not found", async () => {
+      const { container } = render(
+        <Image imageId="co_zMTubMby3QiKDYnW9e2BEXW7Xaq" alt="test" />,
+        { account },
+      );
+      await waitFor(() => {
+        const img = container.querySelector("img");
+        expect(img).toBeDefined();
+        expect(img!.getAttribute("width")).toBe(null);
+        expect(img!.getAttribute("height")).toBe(null);
+        expect(img!.alt).toBe("test");
+        expect(img!.src).toBe("");
+      });
     });
 
     it("should render an empty image if the image is not loaded yet", async () => {

package/src/react-native-core/media/image.tsx

@@ -69,7 +69,10 @@ export const Image = forwardRef<RNImage, ImageProps>(function Image(
   ref,
 ) {
   const image = useCoState(ImageDefinition, imageId);
-  const [src, setSrc] = useState<string | undefined>(image?.placeholderDataURL);
+  const [src, setSrc] = useState<string | undefined>(
+    image?.placeholderDataURL ??
+      "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==",
+  );
 
   const dimensions: { width: number | undefined; height: number | undefined } =
     useMemo(() => {

package/src/svelte/media/image.svelte

@@ -1,118 +1,122 @@
 <script lang="ts">
-import { ImageDefinition } from "jazz-tools";
-import { highestResAvailable } from "jazz-tools/media";
-import { onDestroy } from "svelte";
-import { CoState } from "../jazz.class.svelte";
-import type { ImageProps } from "./image.types.js";
-
-const { imageId, width, height, ...rest }: ImageProps = $props();
-
-const imageState = new CoState(ImageDefinition, () => imageId);
-let lastBestImage: [string, string] | null = null;
-
-/**
- * For lazy loading, we use the browser's strategy for images with loading="lazy".
- * We use an empty image, and when the browser triggers the load event, we load the best available image.
- * On page loading, if the image url is already in browser's cache, the load event is triggered immediately.
- * This is why we need to use a different blob url for every image.
- */
-let waitingLazyLoading = $state(rest.loading === "lazy");
-const lazyPlaceholder = $derived.by(() =>
-  waitingLazyLoading ? URL.createObjectURL(emptyPixelBlob) : undefined,
-);
-
-const dimensions = $derived.by<{
-  width: number | undefined;
-  height: number | undefined;
-}>(() => {
-  const originalWidth = imageState.current?.originalSize?.[0];
-  const originalHeight = imageState.current?.originalSize?.[1];
-
-  // Both width and height are "original"
-  if (width === "original" && height === "original") {
-    return { width: originalWidth, height: originalHeight };
-  }
+  import { ImageDefinition } from "jazz-tools";
+  import { highestResAvailable } from "jazz-tools/media";
+  import { onDestroy } from "svelte";
+  import { CoState } from "../jazz.class.svelte";
+  import type { ImageProps } from "./image.types.js";
+
+  const { imageId, width, height, ...rest }: ImageProps = $props();
+
+  const imageState = new CoState(ImageDefinition, () => imageId);
+  let lastBestImage: [string, string] | null = null;
+
+  /**
+   * For lazy loading, we use the browser's strategy for images with loading="lazy".
+   * We use an empty image, and when the browser triggers the load event, we load the best available image.
+   * On page loading, if the image url is already in browser's cache, the load event is triggered immediately.
+   * This is why we need to use a different blob url for every image.
+   */
+  let waitingLazyLoading = $state(rest.loading === "lazy");
+  const lazyPlaceholder = $derived.by(() =>
+    waitingLazyLoading ? URL.createObjectURL(emptyPixelBlob) : undefined,
+  );
+
+  const dimensions = $derived.by<{
+    width: number | undefined;
+    height: number | undefined;
+  }>(() => {
+    const originalWidth = imageState.current?.originalSize?.[0];
+    const originalHeight = imageState.current?.originalSize?.[1];
 
-  // Width is "original", height is a number
-  if (width === "original" && typeof height === "number") {
-    if (originalWidth && originalHeight) {
-      return {
-        width: Math.round((height * originalWidth) / originalHeight),
-        height,
-      };
+    // Both width and height are "original"
+    if (width === "original" && height === "original") {
+      return { width: originalWidth, height: originalHeight };
     }
-    return { width: undefined, height };
-  }
 
-  // Height is "original", width is a number
-  if (height === "original" && typeof width === "number") {
-    if (originalWidth && originalHeight) {
-      return {
-        width,
-        height: Math.round((width * originalHeight) / originalWidth),
-      };
+    // Width is "original", height is a number
+    if (width === "original" && typeof height === "number") {
+      if (originalWidth && originalHeight) {
+        return {
+          width: Math.round((height * originalWidth) / originalHeight),
+          height,
+        };
+      }
+      return { width: undefined, height };
     }
-    return { width, height: undefined };
-  }
 
-  // In all other cases, use the property value:
-  return {
-    width: width === "original" ? originalWidth : width,
-    height: height === "original" ? originalHeight : height,
-  };
-});
+    // Height is "original", width is a number
+    if (height === "original" && typeof width === "number") {
+      if (originalWidth && originalHeight) {
+        return {
+          width,
+          height: Math.round((width * originalHeight) / originalWidth),
+        };
+      }
+      return { width, height: undefined };
+    }
 
-const src = $derived.by(() => {
-  if (waitingLazyLoading) {
-    return lazyPlaceholder;
-  }
+    // In all other cases, use the property value:
+    return {
+      width: width === "original" ? originalWidth : width,
+      height: height === "original" ? originalHeight : height,
+    };
+  });
 
-  const image = imageState.current;
-  if (!image) return undefined;
+  const src = $derived.by(() => {
+    if (waitingLazyLoading) {
+      return lazyPlaceholder;
+    }
 
-  const bestImage = highestResAvailable(
-    image,
-    dimensions.width || dimensions.height || 9999,
-    dimensions.height || dimensions.width || 9999,
-  );
+    const image = imageState.current;
+    if (image === undefined)
+      return "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
 
-  if (!bestImage) return image.placeholderDataURL;
-  if (lastBestImage?.[0] === bestImage.image.$jazz.id) return lastBestImage?.[1];
+    if (!image) return undefined;
 
-  const blob = bestImage.image.toBlob();
+    const bestImage = highestResAvailable(
+      image,
+      dimensions.width || dimensions.height || 9999,
+      dimensions.height || dimensions.width || 9999,
+    );
 
-  if (blob) {
-    const url = URL.createObjectURL(blob);
-    revokeObjectURL(lastBestImage?.[1]);
-    lastBestImage = [bestImage.image.$jazz.id, url];
-    return url;
-  }
+    if (!bestImage) return image.placeholderDataURL;
+    if (lastBestImage?.[0] === bestImage.image.$jazz.id)
+      return lastBestImage?.[1];
+
+    const blob = bestImage.image.toBlob();
+
+    if (blob) {
+      const url = URL.createObjectURL(blob);
+      revokeObjectURL(lastBestImage?.[1]);
+      lastBestImage = [bestImage.image.$jazz.id, url];
+      return url;
+    }
 
-  return image.placeholderDataURL;
-});
+    return image.placeholderDataURL;
+  });
 
-// Cleanup object URL on component destroy
-onDestroy(() => {
-  revokeObjectURL(lastBestImage?.[1]);
-});
+  // Cleanup object URL on component destroy
+  onDestroy(() => {
+    revokeObjectURL(lastBestImage?.[1]);
+  });
 
-function revokeObjectURL(url: string | undefined) {
-  if (url && url.startsWith("blob:")) {
-    URL.revokeObjectURL(url);
+  function revokeObjectURL(url: string | undefined) {
+    if (url && url.startsWith("blob:")) {
+      URL.revokeObjectURL(url);
+    }
   }
-}
 
-const emptyPixelBlob = new Blob(
-  [
-    Uint8Array.from(
-      atob(
-        "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==",
+  const emptyPixelBlob = new Blob(
+    [
+      Uint8Array.from(
+        atob(
+          "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==",
+        ),
+        (c) => c.charCodeAt(0),
       ),
-      (c) => c.charCodeAt(0),
-    ),
-  ],
-  { type: "image/png" },
-);
+    ],
+    { type: "image/png" },
+  );
 </script>
 
 <img
@@ -120,6 +124,8 @@ const emptyPixelBlob = new Blob(
   width={dimensions.width}
   height={dimensions.height}
   alt={rest.alt}
-  onload={() => {waitingLazyLoading = false}}
+  onload={() => {
+    waitingLazyLoading = false;
+  }}
   {...rest}
 />

package/src/svelte/tests/media/image.svelte.test.ts

@@ -15,7 +15,7 @@ describe("Image", async () => {
     render(Image, props, { account });
 
   describe("initial rendering", () => {
-    it("should render nothing if coValue is not found", async () => {
+    it("should render a blank placeholder while waiting for the coValue to load", async () => {
       const { container } = renderWithAccount({
         imageId: "co_zMTubMby3QiKDYnW9e2BEXW7Xaq",
         alt: "test",
@@ -26,7 +26,23 @@ describe("Image", async () => {
       expect(img!.getAttribute("width")).toBe(null);
       expect(img!.getAttribute("height")).toBe(null);
       expect(img!.alt).toBe("test");
-      expect(img!.src).toBe("");
+      expect(img!.src).toBe("data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==");
+    });
+
+    it("should render nothing if coValue is not found", async () => {
+      const { container } = renderWithAccount({
+        imageId: "co_zMTubMby3QiKDYnW9e2BEXW7Xaq",
+        alt: "test",
+      });
+
+      await waitFor(() => {
+        const img = container.querySelector("img");
+        expect(img).toBeDefined();
+        expect(img!.getAttribute("width")).toBe(null);
+        expect(img!.getAttribute("height")).toBe(null);
+        expect(img!.alt).toBe("test");
+        expect(img!.src).toBe("");
+      });
     });
 
     it("should render an empty image if the image is not loaded yet", async () => {

package/src/tools/implementation/refs.ts

@@ -1,9 +1,10 @@
 import { type Account } from "../coValues/account.js";
-import type {
+import {
   AnonymousJazzAgent,
   CoValue,
   ID,
   RefEncoded,
+  SubscriptionScope,
 } from "../internal.js";
 import {
   accessChildById,
@@ -26,9 +27,28 @@ export class Ref<out V extends CoValue> {
   async load(): Promise<V | null> {
     const subscriptionScope = getSubscriptionScope(this.parent);
 
-    subscriptionScope.subscribeToId(this.id, this.schema);
+    let node: SubscriptionScope<CoValue> | undefined | null;
 
-    const node = subscriptionScope.childNodes.get(this.id);
+    /**
+     * If the parent subscription scope is closed, we can't use it
+     * to subscribe to the child id, so we create a detached subscription scope
+     * that is going to be destroyed immediately after the load
+     */
+    if (subscriptionScope.closed) {
+      node = new SubscriptionScope<CoValue>(
+        subscriptionScope.node,
+        true,
+        this.id,
+        this.schema,
+        subscriptionScope.skipRetry,
+        subscriptionScope.bestEffortResolution,
+        subscriptionScope.unstable_branch,
+      );
+    } else {
+      subscriptionScope.subscribeToId(this.id, this.schema);
+
+      node = subscriptionScope.childNodes.get(this.id);
+    }
 
     if (!node) {
       return null;
@@ -51,6 +71,10 @@ export class Ref<out V extends CoValue> {
             unsubscribe();
             resolve(null);
           }
+
+          if (subscriptionScope.closed) {
+            node.destroy();
+          }
         });
       });
     }

package/src/tools/subscribe/CoValueCoreSubscription.ts

@@ -41,6 +41,20 @@ export class CoValueCoreSubscription {
     this.initializeSubscription();
   }
 
+  /**
+   * Rehydrates the subscription by resetting the unsubscribed flag and initializing the subscription again
+   */
+  pullValue() {
+    if (!this.unsubscribed) {
+      return;
+    }
+
+    // Reset the unsubscribed flag so we can initialize the subscription again
+    this.unsubscribed = false;
+    this.initializeSubscription();
+    this.unsubscribe();
+  }
+
   /**
    * Main entry point for subscription initialization.
    * Determines the subscription strategy based on current availability and branch requirements.

package/src/tools/subscribe/SubscriptionScope.ts

@@ -45,6 +45,7 @@ export class SubscriptionScope<D extends CoValue> {
   totalValidTransactions = 0;
   migrated = false;
   migrating = false;
+  closed = false;
 
   silenceUpdates = false;
 
@@ -69,7 +70,6 @@ export class SubscriptionScope<D extends CoValue> {
 
         if (skipRetry && value === "unavailable") {
           this.handleUpdate(value);
-          this.destroy();
           return;
         }
 
@@ -398,8 +398,51 @@ export class SubscriptionScope<D extends CoValue> {
     );
   }
 
+  /**
+   * Checks if the currently unloaded value has got some updates
+   *
+   * Used to make the autoload work on closed subscription scopes
+   */
+  pullValue(listener: (value: SubscriptionValue<D, any>) => void) {
+    if (!this.closed) {
+      throw new Error("Cannot pull a non-closed subscription scope");
+    }
+
+    if (this.value.type === "loaded") {
+      return;
+    }
+
+    // Try to pull the value from the subscription
+    // into the SubscriptionScope update flow
+    this.subscription.pullValue();
+
+    // Check if the value is now available
+    const value = this.getCurrentValue();
+
+    // If the value is available, trigger the listener
+    if (value) {
+      listener({
+        type: "loaded",
+        value,
+        id: this.id,
+      });
+    }
+  }
+
   subscribeToId(id: string, descriptor: RefEncoded<any>) {
     if (this.isSubscribedToId(id)) {
+      if (!this.closed) {
+        return;
+      }
+
+      const child = this.childNodes.get(id);
+
+      // If the subscription is closed, check if we missed the value
+      // load event
+      if (child) {
+        child.pullValue((value) => this.handleChildUpdate(id, value));
+      }
+
       return;
     }
 
@@ -426,6 +469,14 @@ export class SubscriptionScope<D extends CoValue> {
     this.childNodes.set(id, child);
     child.setListener((value) => this.handleChildUpdate(id, value));
 
+    /**
+     * If the current subscription scope is closed, spawn
+     * child nodes only to load in-memory values
+     */
+    if (this.closed) {
+      child.destroy();
+    }
+
     this.silenceUpdates = false;
   }
 
@@ -676,9 +727,19 @@ export class SubscriptionScope<D extends CoValue> {
     );
     this.childNodes.set(id, child);
     child.setListener((value) => this.handleChildUpdate(id, value, key));
+
+    /**
+     * If the current subscription scope is closed, spawn
+     * child nodes only to load in-memory values
+     */
+    if (this.closed) {
+      child.destroy();
+    }
   }
 
   destroy() {
+    this.closed = true;
+
     this.subscription.unsubscribe();
     this.subscribers.clear();
     this.childNodes.forEach((child) => child.destroy());