jazz-tools 0.18.16 → 0.18.17

package/.svelte-kit/__package__/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/.svelte-kit/__package__/media/image.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/media/image.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AA2HnD,QAAA,MAAM,KAAK,gDAAsC,CAAC;AAClD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
+{"version":3,"file":"image.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/media/image.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAiInD,QAAA,MAAM,KAAK,gDAAsC,CAAC;AAClD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/.svelte-kit/__package__/tests/media/image.svelte.test.js

@@ -10,7 +10,7 @@ describe("Image", async () => {
     });
     const renderWithAccount = (props) => 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",
@@ -20,7 +20,21 @@ 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 () => {
             const original = FileStream.create({ owner: account.$jazz.owner });

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> jazz-tools@0.18.16 build /home/runner/_work/jazz/jazz/packages/jazz-tools
+> jazz-tools@0.18.17 build /home/runner/_work/jazz/jazz/packages/jazz-tools
 > tsup && pnpm types && pnpm build:svelte
 
 CLI Building entry: {"index":"src/index.ts","testing":"src/testing.ts"}
@@ -114,24 +114,17 @@
 ESM Build start
 CLI Cleaning output folder
 ESM Build start
-ESM dist/tiptap/index.js     564.00 B
-ESM dist/tiptap/index.js.map 1.21 KB
-ESM ⚡️ Build success in 13ms
 ESM dist/react/ssr.js     688.00 B
 ESM dist/react/ssr.js.map 1.12 KB
+ESM ⚡️ Build success in 20ms
+ESM dist/tiptap/index.js     564.00 B
+ESM dist/tiptap/index.js.map 1.21 KB
 ESM ⚡️ Build success in 15ms
 ESM dist/worker/index.js         3.19 KB
 ESM dist/worker/edge-wasm.js     215.00 B
 ESM dist/worker/index.js.map     6.17 KB
 ESM dist/worker/edge-wasm.js.map 434.00 B
-ESM ⚡️ Build success in 20ms
-ESM dist/better-auth/auth/client.js     4.44 KB
-ESM dist/better-auth/auth/react.js      799.00 B
-ESM dist/better-auth/auth/server.js     8.36 KB
-ESM dist/better-auth/auth/client.js.map 8.24 KB
-ESM dist/better-auth/auth/react.js.map  2.04 KB
-ESM dist/better-auth/auth/server.js.map 15.29 KB
-ESM ⚡️ Build success in 18ms
+ESM ⚡️ Build success in 16ms
 ESM dist/media/index.js              236.00 B
 ESM dist/media/index.browser.js      2.79 KB
 ESM dist/media/index.native.js       2.90 KB
@@ -142,70 +135,77 @@
 ESM dist/media/index.native.js.map   6.09 KB
 ESM dist/media/index.server.js.map   6.37 KB
 ESM dist/media/chunk-W3S526L3.js.map 16.57 KB
-ESM ⚡️ Build success in 34ms
+ESM ⚡️ Build success in 31ms
+ESM dist/better-auth/auth/client.js     4.44 KB
+ESM dist/better-auth/auth/react.js      799.00 B
+ESM dist/better-auth/auth/server.js     8.36 KB
+ESM dist/better-auth/auth/client.js.map 8.24 KB
+ESM dist/better-auth/auth/react.js.map  2.04 KB
+ESM dist/better-auth/auth/server.js.map 15.29 KB
+ESM ⚡️ Build success in 27ms
+ESM dist/react-native/index.js       2.53 KB
+ESM dist/react-native/crypto.js      161.00 B
+ESM dist/react-native/testing.js     120.00 B
+ESM dist/react-native/index.js.map   5.68 KB
+ESM dist/react-native/crypto.js.map  197.00 B
+ESM dist/react-native/testing.js.map 176.00 B
+ESM ⚡️ Build success in 35ms
 ESM dist/react-core/index.js              10.72 KB
 ESM dist/react-core/testing.js            1.17 KB
 ESM dist/react-core/chunk-7DYMJ74I.js     279.00 B
 ESM dist/react-core/index.js.map          33.90 KB
 ESM dist/react-core/testing.js.map        1.82 KB
 ESM dist/react-core/chunk-7DYMJ74I.js.map 533.00 B
-ESM ⚡️ Build success in 36ms
+ESM ⚡️ Build success in 32ms
 ESM dist/expo/index.js       4.68 KB
 ESM dist/expo/testing.js     112.00 B
 ESM dist/expo/crypto.js      153.00 B
 ESM dist/expo/index.js.map   10.23 KB
 ESM dist/expo/testing.js.map 168.00 B
 ESM dist/expo/crypto.js.map  189.00 B
-ESM ⚡️ Build success in 42ms
-ESM dist/react-native/index.js       2.53 KB
-ESM dist/react-native/crypto.js      161.00 B
-ESM dist/react-native/testing.js     120.00 B
-ESM dist/react-native/index.js.map   5.68 KB
-ESM dist/react-native/crypto.js.map  197.00 B
-ESM dist/react-native/testing.js.map 176.00 B
-ESM ⚡️ Build success in 38ms
+ESM ⚡️ Build success in 44ms
 ESM dist/browser/index.js     13.64 KB
 ESM dist/browser/index.js.map 29.14 KB
-ESM ⚡️ Build success in 43ms
+ESM ⚡️ Build success in 46ms
 ESM dist/better-auth/database-adapter/index.js     26.34 KB
 ESM dist/better-auth/database-adapter/index.js.map 57.62 KB
-ESM ⚡️ Build success in 43ms
-ESM dist/react/testing.js     122.00 B
-ESM dist/react/index.js       24.76 KB
-ESM dist/react/testing.js.map 165.00 B
-ESM dist/react/index.js.map   53.56 KB
-ESM ⚡️ Build success in 49ms
-ESM dist/react-native-core/index.js       18.03 KB
-ESM dist/react-native-core/testing.js     119.00 B
+ESM ⚡️ Build success in 39ms
+ESM dist/react-native-core/index.js       18.13 KB
 ESM dist/react-native-core/crypto.js      2.10 KB
-ESM dist/react-native-core/index.js.map   36.85 KB
-ESM dist/react-native-core/testing.js.map 175.00 B
+ESM dist/react-native-core/testing.js     119.00 B
+ESM dist/react-native-core/index.js.map   36.96 KB
 ESM dist/react-native-core/crypto.js.map  4.25 KB
-ESM ⚡️ Build success in 49ms
+ESM dist/react-native-core/testing.js.map 175.00 B
+ESM ⚡️ Build success in 51ms
+ESM dist/react/index.js       24.88 KB
+ESM dist/react/testing.js     122.00 B
+ESM dist/react/testing.js.map 165.00 B
+ESM dist/react/index.js.map   53.71 KB
+ESM ⚡️ Build success in 52ms
 ESM dist/prosemirror/index.js     77.76 KB
 ESM dist/prosemirror/index.js.map 307.20 KB
-ESM ⚡️ Build success in 52ms
+ESM ⚡️ Build success in 54ms
 ESM dist/inspector/index.js     69.71 KB
 ESM dist/inspector/index.js.map 121.38 KB
-ESM ⚡️ Build success in 63ms
+ESM ⚡️ Build success in 64ms
+ESM dist/chunk-OTWWOZMB.js     176.08 KB
 ESM dist/testing.js            7.17 KB
 ESM dist/index.js              26.13 KB
-ESM dist/chunk-GRN6OAUX.js     174.37 KB
+ESM dist/chunk-OTWWOZMB.js.map 419.55 KB
 ESM dist/testing.js.map        14.10 KB
 ESM dist/index.js.map          52.92 KB
-ESM dist/chunk-GRN6OAUX.js.map 415.70 KB
-ESM ⚡️ Build success in 80ms
+ESM ⚡️ Build success in 82ms
 ESM dist/inspector/register-custom-element.js     218.00 B
 ESM dist/inspector/register-custom-element.js.map 314.00 B
 ESM dist/inspector/custom-element-G6SPZEBR.js     1.54 MB
 ESM dist/inspector/custom-element-G6SPZEBR.js.map 2.36 MB
-ESM ⚡️ Build success in 122ms
+ESM ⚡️ Build success in 123ms
 
-> jazz-tools@0.18.16 types /home/runner/_work/jazz/jazz/packages/jazz-tools
+> jazz-tools@0.18.17 types /home/runner/_work/jazz/jazz/packages/jazz-tools
 > tsc --outDir dist
 
 
-> jazz-tools@0.18.16 build:svelte /home/runner/_work/jazz/jazz/packages/jazz-tools
+> jazz-tools@0.18.17 build:svelte /home/runner/_work/jazz/jazz/packages/jazz-tools
 > rm -rf dist/svelte && svelte-package -i src/svelte -o dist/svelte --tsconfig tsconfig.svelte.json
 
 src/svelte -> dist/svelte

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # jazz-tools
 
+## 0.18.17
+
+### Patch Changes
+
+- 75d1afa: Fix an issue where a flash of alt text displays while an image definition is loading from storage
+- 8aa4acd: Optimized the inactive subscriptions, improving performance of updates on created and loaded values by 2.5x
+- Updated dependencies [925da72]
+  - cojson@0.18.17
+  - cojson-storage-indexeddb@0.18.17
+  - cojson-transport-ws@0.18.17
+
 ## 0.18.16
 
 ### Patch Changes

package/dist/{chunk-GRN6OAUX.js → chunk-OTWWOZMB.js}

@@ -3317,8 +3317,21 @@ var Ref = class {
   }
   async load() {
     const subscriptionScope = getSubscriptionScope(this.parent);
-    subscriptionScope.subscribeToId(this.id, this.schema);
-    const node = subscriptionScope.childNodes.get(this.id);
+    let node;
+    if (subscriptionScope.closed) {
+      node = new SubscriptionScope(
+        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;
     }
@@ -3338,6 +3351,9 @@ var Ref = class {
             unsubscribe();
             resolve(null);
           }
+          if (subscriptionScope.closed) {
+            node.destroy();
+          }
         });
       });
     }
@@ -3523,6 +3539,17 @@ var CoValueCoreSubscription = class {
     this.source = localNode.getCoValue(id);
     this.initializeSubscription();
   }
+  /**
+   * Rehydrates the subscription by resetting the unsubscribed flag and initializing the subscription again
+   */
+  pullValue() {
+    if (!this.unsubscribed) {
+      return;
+    }
+    this.unsubscribed = false;
+    this.initializeSubscription();
+    this.unsubscribe();
+  }
   /**
    * Main entry point for subscription initialization.
    * Determines the subscription strategy based on current availability and branch requirements.
@@ -3753,6 +3780,7 @@ var SubscriptionScope = class _SubscriptionScope {
     this.totalValidTransactions = 0;
     this.migrated = false;
     this.migrating = false;
+    this.closed = false;
     this.silenceUpdates = false;
     this.handleChildUpdate = (id, value, key) => {
       if (value.type === "unloaded") {
@@ -3788,7 +3816,6 @@ var SubscriptionScope = class _SubscriptionScope {
         lastUpdate = value;
         if (skipRetry && value === "unavailable") {
           this.handleUpdate(value);
-          this.destroy();
           return;
         }
         if (!this.migrated && value !== "unavailable") {
@@ -3992,8 +4019,37 @@ var SubscriptionScope = class _SubscriptionScope {
   isSubscribedToId(id) {
     return this.idsSubscribed.has(id) || this.childValues.has(id) || this.pendingAutoloadedChildren.has(id) || this.pendingLoadedChildren.has(id);
   }
+  /**
+   * Checks if the currently unloaded value has got some updates
+   *
+   * Used to make the autoload work on closed subscription scopes
+   */
+  pullValue(listener) {
+    if (!this.closed) {
+      throw new Error("Cannot pull a non-closed subscription scope");
+    }
+    if (this.value.type === "loaded") {
+      return;
+    }
+    this.subscription.pullValue();
+    const value = this.getCurrentValue();
+    if (value) {
+      listener({
+        type: "loaded",
+        value,
+        id: this.id
+      });
+    }
+  }
   subscribeToId(id, descriptor) {
     if (this.isSubscribedToId(id)) {
+      if (!this.closed) {
+        return;
+      }
+      const child2 = this.childNodes.get(id);
+      if (child2) {
+        child2.pullValue((value) => this.handleChildUpdate(id, value));
+      }
       return;
     }
     this.idsSubscribed.add(id);
@@ -4011,6 +4067,9 @@ var SubscriptionScope = class _SubscriptionScope {
     );
     this.childNodes.set(id, child);
     child.setListener((value) => this.handleChildUpdate(id, value));
+    if (this.closed) {
+      child.destroy();
+    }
     this.silenceUpdates = false;
   }
   loadChildren() {
@@ -4200,8 +4259,12 @@ var SubscriptionScope = class _SubscriptionScope {
     );
     this.childNodes.set(id, child);
     child.setListener((value) => this.handleChildUpdate(id, value, key));
+    if (this.closed) {
+      child.destroy();
+    }
   }
   destroy() {
+    this.closed = true;
     this.subscription.unsubscribe();
     this.subscribers.clear();
     this.childNodes.forEach((child) => child.destroy());
@@ -4227,12 +4290,18 @@ function getSubscriptionScope(value) {
     enumerable: false,
     configurable: false
   });
+  newSubscriptionScope.destroy();
   return newSubscriptionScope;
 }
 function accessChildByKey(parent, childId, key) {
   const subscriptionScope = getSubscriptionScope(parent);
+  const node = subscriptionScope.childNodes.get(childId);
   if (!subscriptionScope.isSubscribedToId(childId)) {
     subscriptionScope.subscribeToKey(key);
+  } else if (node && node.closed) {
+    node.pullValue(
+      (value2) => subscriptionScope.handleChildUpdate(childId, value2)
+    );
   }
   const value = subscriptionScope.childValues.get(childId);
   if (value?.type === "loaded") {
@@ -6078,4 +6147,4 @@ export {
   JazzContextManager
 };
 /* istanbul ignore file -- @preserve */
-//# sourceMappingURL=chunk-GRN6OAUX.js.map
+//# sourceMappingURL=chunk-OTWWOZMB.js.map