jazz-tools 0.18.16 → 0.18.17

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());

package/src/tools/subscribe/index.ts

@@ -24,6 +24,8 @@ export function getSubscriptionScope<D extends CoValue>(value: D) {
     configurable: false,
   });
 
+  newSubscriptionScope.destroy();
+
   return newSubscriptionScope;
 }
 
@@ -42,8 +44,14 @@ export function accessChildByKey<D extends CoValue>(
 ) {
   const subscriptionScope = getSubscriptionScope(parent);
 
+  const node = subscriptionScope.childNodes.get(childId);
+
   if (!subscriptionScope.isSubscribedToId(childId)) {
     subscriptionScope.subscribeToKey(key);
+  } else if (node && node.closed) {
+    node.pullValue((value) =>
+      subscriptionScope.handleChildUpdate(childId, value),
+    );
   }
 
   const value = subscriptionScope.childValues.get(childId);