@hkdigital/lib-sveltekit 0.1.95 → 0.1.97

package/dist/classes/cache/IndexedDbCache.js

@@ -38,16 +38,19 @@
 
 /** @typedef {import('./typedef').IDBVersionChangeEvent} IDBVersionChangeEvent */
 
-const DEFAULT_DB_NAME ='http-cache';
-const DEFAULT_STORE_NAME ='responses';
-const DEFAULT_MAX_SIZE = 50 * 1024 * 1024;         // 50 MB
-const DEFAULT_MAX_AGE = 90 * 24 * 60 * 60 * 1000;  // 90 days
+const DEFAULT_DB_NAME = 'http-cache';
+const DEFAULT_STORE_NAME = 'responses';
+const DEFAULT_MAX_SIZE = 50 * 1024 * 1024; // 50 MB
+const DEFAULT_MAX_AGE = 90 * 24 * 60 * 60 * 1000; // 90 days
 
 const DEFAULT_CLEANUP_BATCH_SIZE = 100;
 const DEFAULT_CLEANUP_INTERVAL = 5 * 60 * 1000; // 5 minutes;
 
 const DEFAULT_CLEANUP_POSTPONE_MS = 5000; // 5 seconds
 
+// Add logging to track concurrent access
+const concurrentReadsByKey = new Map();
+
 /**
  * IndexedDbCache with automatic background cleanup
  */
@@ -72,10 +75,12 @@ export default class IndexedDbCache {
     this.maxSize = options.maxSize || DEFAULT_MAX_SIZE;
     this.maxAge = options.maxAge || DEFAULT_MAX_AGE;
 
-    this.cleanupBatchSize = options.cleanupBatchSize || DEFAULT_CLEANUP_BATCH_SIZE;
+    this.cleanupBatchSize =
+      options.cleanupBatchSize || DEFAULT_CLEANUP_BATCH_SIZE;
     this.cleanupInterval = options.cleanupInterval || DEFAULT_CLEANUP_INTERVAL;
 
-    this.cleanupPostponeTimeout = options.cleanupPostponeTimeout || DEFAULT_CLEANUP_POSTPONE_MS;
+    this.cleanupPostponeTimeout =
+      options.cleanupPostponeTimeout || DEFAULT_CLEANUP_POSTPONE_MS;
     this.cacheVersion = options.cacheVersion || '1.0.0';
 
     // Define index names as constants to ensure consistency
@@ -318,10 +323,15 @@ export default class IndexedDbCache {
    * @returns {Promise<CacheEntry|null>} Cache entry or null if not found/expired
    */
   async get(key) {
+    // Track concurrent reads per key
+    const current = concurrentReadsByKey.get(key) || 0;
+    concurrentReadsByKey.set(key, current + 1);
+    console.log(`Concurrent reads for ${key}: ${current + 1}`);
+
     try {
       const db = await this.dbPromise;
 
-      return new Promise((resolve, reject) => {
+      const result = new Promise((resolve, reject) => {
         try {
           const transaction = db.transaction(this.storeName, 'readonly');
           const store = transaction.objectStore(this.storeName);
@@ -421,9 +431,22 @@ export default class IndexedDbCache {
           resolve(null);
         }
       });
+
+      return result;
     } catch (err) {
       console.error('Cache get error:', err);
       return null;
+    } finally {
+      // Always decrement
+      const current = concurrentReadsByKey.get(key) || 1;
+      if (current <= 1) {
+        concurrentReadsByKey.delete(key);
+      } else {
+        concurrentReadsByKey.set(key, current - 1);
+      }
+      console.log(
+        `Concurrent reads for ${key} after decrement: ${current - 1}`
+      );
     }
   }
 
@@ -490,7 +513,7 @@ export default class IndexedDbCache {
       // Calculate rough size estimate
       const headerSize = JSON.stringify(headers).length * 2;
       const size =
-        /** @type {Blob} */ ((body).size || 0) + headerSize + key.length * 2;
+        /** @type {Blob} */ (body.size || 0) + headerSize + key.length * 2;
 
       const entry = {
         key,

package/dist/classes/svelte/image/ImageVariantsLoader.svelte.d.ts

@@ -1,3 +1,4 @@
+/** @typedef {import('../../../typedef/image.js').ImageMeta} ImageMeta */
 export default class ImageVariantsLoader {
     /**
      * @param {ImageMeta[]} imagesMeta
@@ -19,7 +20,7 @@ export default class ImageVariantsLoader {
         fit?: "cover" | "contain" | "fill";
     }): void;
     get loaded(): boolean;
-    get variant(): import("./typedef.js").ImageMeta;
+    get variant(): import("../../../typedef/image.js").ImageMeta;
     /**
      * Get object URL that can be used as src parameter of an HTML image
      *
@@ -39,4 +40,4 @@ export default class ImageVariantsLoader {
     getOptimalImageMeta(containerWidth: number): ImageMeta | null;
     #private;
 }
-export type ImageMeta = import("./typedef.js").ImageMeta;
+export type ImageMeta = import("../../../typedef/image.js").ImageMeta;

package/dist/classes/svelte/image/ImageVariantsLoader.svelte.js

@@ -1,13 +1,9 @@
-/** @typedef {import('./typedef.js').ImageMeta} ImageMeta */
-
-// import * as expect from '../../../util/expect/index.js';
-
 import { calculateEffectiveWidth } from '../../../util/image/index.js';
 
-import { untrack } from 'svelte';
-
 import ImageLoader from './ImageLoader.svelte.js';
 
+/** @typedef {import('../../../typedef/image.js').ImageMeta} ImageMeta */
+
 export default class ImageVariantsLoader {
   /** @type {number} */
   #devicePixelRatio;
@@ -37,6 +33,7 @@ export default class ImageVariantsLoader {
   constructor(imagesMeta, { devicePixelRatio = 1 } = {}) {
     this.#devicePixelRatio = devicePixelRatio ?? 1;
     this.#imagesMeta = [...imagesMeta].sort((a, b) => a.width - b.width);
+    // console.debug("imagesMeta",imagesMeta);
   }
 
   /**
@@ -60,6 +57,8 @@ export default class ImageVariantsLoader {
 
     const newVariant = this.getOptimalImageMeta(effectiveWidth);
 
+    // console.debug("updateOptimalImageMeta", effectiveWidth, newVariant );
+
     if (
       !newVariant ||
       !this.#imageVariant ||
@@ -76,6 +75,7 @@ export default class ImageVariantsLoader {
         imageMeta: newVariant
       });
 
+
       this.#imageLoader.load();
     }
   }

package/dist/classes/svelte/network-loader/NetworkLoader.svelte.js

@@ -87,6 +87,7 @@ export default class NetworkLoader {
     this._url = url;
 
     const state = this._state;
+    const progress = this.progress;
 
     //
     // ISSUE: $effect is not triggered by  this._state changes,
@@ -110,10 +111,15 @@ export default class NetworkLoader {
 
         case STATE_LOADED:
           {
-            // console.error(
-            //   'NetworkLoader:loaded',
-            //   $state.snapshot({ bytes: this.size })
-            // );
+            // console.debug('NetworkLoader:loaded', $state.snapshot(state));
+
+            // setTimeout(() => {
+            //   console.debug(
+            //     'NetworkLoader:loaded',
+            //     $state.snapshot(state),
+            //     progress
+            //   );
+            // }, 500);
 
             // Abort function is no longer needed
             this._abortLoading = null;
@@ -140,7 +146,7 @@ export default class NetworkLoader {
    * Start loading all network data
    */
   load() {
-    // console.log('NetworkLoader: load() called');
+    // console.debug('NetworkLoader: load() called');
     this._state.send(LOAD);
   }
 
@@ -301,6 +307,8 @@ export default class NetworkLoader {
 
       this._buffer = await bufferPromise;
 
+      // console.debug('#load', this._buffer, this._bytesLoaded);
+
       this._state.send(LOADED);
     } catch (e) {
       this._state.send(ERROR, e);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hkdigital/lib-sveltekit",
-	"version": "0.1.95",
+	"version": "0.1.97",
 	"author": {
 		"name": "HKdigital",
 		"url": "https://hkdigital.nl"
@@ -105,7 +105,7 @@
 		"tailwindcss": "^3.4.17",
 		"typescript": "^5.8.2",
 		"vite": "^6.2.0",
-		"vite-imagetools": "^7.0.5",
+		"vite-imagetools": "^7.1.0",
 		"vitest": "^3.0.7",
 		"zod": "^3.24.2"
 	}