@scayle/storefront-product-detail 1.5.2 → 1.5.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @scayle/storefront-product-detail
 
+## 1.5.3
+
+### Patch Changes
+
+- **\[FIX\]** Added logic to prevent simultaneously loading the same products when `loadMissingProducts` from `useRecentlyViewedProducts` is called multiple times concurrently. This ensures that products are not added to the recently viewed list more than once.
+
 ## 1.5.2
 
 ### Patch Changes

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@scayle/storefront-product-detail",
   "configKey": "product-detail",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "compatibility": {
     "bridge": false,
     "nuxt": ">=3.13"

package/dist/module.mjs

@@ -1,7 +1,7 @@
 import { defineNuxtModule, createResolver, addImportsDir } from '@nuxt/kit';
 
 const PACKAGE_NAME = "@scayle/storefront-product-detail";
-const PACKAGE_VERSION = "1.5.2";
+const PACKAGE_VERSION = "1.5.3";
 const module = defineNuxtModule({
   meta: {
     name: PACKAGE_NAME,

package/dist/runtime/composables/useRecentlyViewedProducts.js

@@ -16,6 +16,10 @@ export function useRecentlyViewedProducts(options) {
     () => "idle"
   );
   const products = useState("recently-viewed-products", () => []);
+  const loadingPromise = useState(
+    "recently-viewed-products-loading-promise",
+    () => /* @__PURE__ */ new Map()
+  );
   const addProductId = (productId) => {
     if (import.meta.server) {
       throw new Error(
@@ -38,46 +42,56 @@ export function useRecentlyViewedProducts(options) {
         "useRecentlyViewedProducts uses local storage. fetchProducts is therefore not available on the server."
       );
     }
-    loading.value = true;
-    status.value = "pending";
-    try {
-      const loadedProductIds = new Set(
-        products.value.map((product) => product.id)
-      );
-      const missingProductIds = recentlyViewedProductsIds.value.filter(
-        (id) => !loadedProductIds.has(id)
-      );
-      if (missingProductIds.length > 0) {
-        const result = await fetchProductsRpc({
-          ids: missingProductIds,
-          with: options?.with,
-          pricePromotionKey: options?.pricePromotionKey
-        });
-        products.value.push(...result);
-      }
-      const sortOrderMap = new Map(
-        recentlyViewedProductsIds.value.map(
-          (id, index) => [id, index]
-        )
-      );
-      products.value = products.value.sort((a, b) => {
-        const aIndex = sortOrderMap.get(a.id);
-        const bIndex = sortOrderMap.get(b.id);
-        if (aIndex === void 0) {
-          return 1;
-        }
-        if (bIndex === void 0) {
-          return -1;
-        }
-        return aIndex - bIndex;
-      }).slice(0, maxRecentlyViewedProducts);
-      status.value = "success";
-    } catch (e) {
-      error.value = e;
-      status.value = "error";
-    } finally {
-      loading.value = false;
+    const loadedProductIds = new Set(
+      products.value.map((product) => product.id)
+    );
+    const missingProductIds = recentlyViewedProductsIds.value.filter(
+      (id) => !loadedProductIds.has(id)
+    );
+    const promiseKey = missingProductIds.join(",");
+    if (loadingPromise.value.has(promiseKey)) {
+      return loadingPromise.value.get(promiseKey);
     }
+    const load = async () => {
+      loading.value = true;
+      status.value = "pending";
+      try {
+        if (missingProductIds.length > 0) {
+          const result = await fetchProductsRpc({
+            ids: missingProductIds,
+            with: options?.with,
+            pricePromotionKey: options?.pricePromotionKey
+          });
+          products.value.push(...result);
+        }
+        const sortOrderMap = new Map(
+          recentlyViewedProductsIds.value.map(
+            (id, index) => [id, index]
+          )
+        );
+        products.value = products.value.sort((a, b) => {
+          const aIndex = sortOrderMap.get(a.id);
+          const bIndex = sortOrderMap.get(b.id);
+          if (aIndex === void 0) {
+            return 1;
+          }
+          if (bIndex === void 0) {
+            return -1;
+          }
+          return aIndex - bIndex;
+        }).slice(0, maxRecentlyViewedProducts);
+        status.value = "success";
+      } catch (e) {
+        error.value = e;
+        status.value = "error";
+      } finally {
+        loading.value = false;
+        loadingPromise.value.delete(promiseKey);
+      }
+    };
+    const promise = load();
+    loadingPromise.value.set(promiseKey, promise);
+    return promise;
   };
   return {
     addProductId,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scayle/storefront-product-detail",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "description": "Collection of essential composables and utilities to work with product detail",
   "author": "SCAYLE Commerce Engine",
   "license": "MIT",
@@ -41,23 +41,23 @@
     "@nuxt/module-builder": "1.0.2",
     "@nuxt/schema": "3.19.2",
     "@nuxt/test-utils": "3.19.2",
-    "@types/node": "22.18.3",
+    "@types/node": "22.18.6",
     "@vitest/coverage-v8": "3.2.4",
     "@vueuse/core": "13.9.0",
     "dprint": "0.50.2",
     "eslint-formatter-gitlab": "6.0.1",
-    "eslint": "9.35.0",
+    "eslint": "9.36.0",
     "happy-dom": "18.0.1",
     "nuxt": "3.19.2",
-    "publint": "0.3.12",
+    "publint": "0.3.13",
     "schema-dts": "1.1.5",
     "typescript": "5.9.2",
     "unbuild": "3.6.1",
     "vitest": "3.2.4",
     "vue-router": "4.5.1",
-    "vue-tsc": "3.0.7",
+    "vue-tsc": "3.1.0",
     "vue": "3.5.21",
-    "@scayle/eslint-config-storefront": "4.7.8",
+    "@scayle/eslint-config-storefront": "4.7.9",
     "@scayle/storefront-nuxt": "8.44.1",
     "@scayle/vitest-config-storefront": "1.0.0"
   },