@scayle/storefront-product-listing 2.5.0 → 2.5.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @scayle/storefront-product-listing
 
+## 2.5.2
+
+### Patch Changes
+
+- Narrows the `rel` field on generated hreflang and canonical `<link>` objects to its literal value instead of `string`, and removes the non-standard `key` property from canonical link objects. Fixes type errors surfaced by a stricter `@unhead/vue` `Link` union type. No runtime behavior change.
+
+## 2.5.1
+
+### Patch Changes
+
+- **\[Security\]** Use the patched Nuxt for build — `nuxt@3.21.8` (3.x) / `nuxt@4.4.8` (4.x), with matching `@nuxt/kit` and `@nuxt/schema` — which includes the fix for [CVE-2026-53721](https://nvd.nist.gov/vuln/detail/CVE-2026-53721) ([GHSA-mm7m-92g8-7m47](https://github.com/nuxt/nuxt/security/advisories/GHSA-mm7m-92g8-7m47)), a route-rule middleware bypass.
+
+  Compatibility with previously-supported Nuxt versions is unchanged and remains specified via each package's `peerDependencies` and the Nuxt compatibility flag. `@scayle/storefront-core` is released in lockstep with `@scayle/storefront-nuxt`.
+
 ## 2.5.0
 
 ### Minor Changes
@@ -12,7 +26,6 @@
 
 - Introduced support for Nuxt 4 while maintaining full backward compatibility with Nuxt 3.
   This enables consumers to migrate to Nuxt 4 ahead of the Nuxt 3 end of support on 31 Jan 2026.
-
   - **Version Requirements:**
     - Nuxt 3: `v3.13.0+`
     - Nuxt 4: `v4.2.0+`
@@ -46,7 +59,6 @@
   By removing href attributes from sort controls and using click handlers with programmatic navigation instead, we ensure that sorting doesn't create separate indexable pages, improving SEO performance.
 
   **Migration Required:** Replace usage of `sortLinks` with direct handling of `sortingOptions` and implement click handlers that use `router.push()` to update query parameters.
-
   - **Before:**
 
     ```ts
@@ -128,26 +140,25 @@
 - Enhanced data fetching composables to support reactive keys, aligning with [Nuxt 3.17 data fetching improvements](https://nuxt.com/blog/v3-17#data-fetching-improvements).
 
   You can now pass a `ref`, `computed`, or getter function as the `key` parameter to `useRpc` and derived composables (like `useProducts`, `useBrand` etc.). When the reactive key changes, the data will automatically re-fetch.
-
   - **Before:** Keys were static strings.
   - **After:** Keys can be reactive, enabling dynamic caching and automatic updates.
 
   ```ts
   // Before
-  const { data } = await useRpc("getProduct", "my-static-product-key", {
+  const { data } = await useRpc('getProduct', 'my-static-product-key', {
     productId: 123,
-  });
+  })
 
   // After
-  const productId = ref(123);
+  const productId = ref(123)
 
   // The key is now reactive. If `productId` changes, the key updates
   // to 'product-456' (for example) and triggers a new fetch.
   const { data } = await useRpc(
-    "getProduct",
+    'getProduct',
     () => `product-${productId.value}`,
-    { productId }
-  );
+    { productId },
+  )
   ```
 
 ## 2.2.0
@@ -184,7 +195,6 @@
 - Added support for custom filter prefix for filter utility functions.
 
   Following functions now accept a `filterPrefix` parameter that can be used to customize the filter prefix.
-
   - `parseFilterDataFromRoute`
   - `createNewAttributeQuery`
   - `createNewPriceQuery`
@@ -227,14 +237,14 @@
   **Before**
 
   ```ts
-  import { defaultSortingOptions } from "#storefront-product-listing";
+  import { defaultSortingOptions } from '#storefront-product-listing'
   const { sortLinks } = useProductListSort(useRoute(), {
     sortingOptions: defaultSortingOptions,
-  });
+  })
   ```
 
   ```ts
-  const { sortLinks } = useProductListSort(useRoute());
+  const { sortLinks } = useProductListSort(useRoute())
   ```
 
   (Both before approaches are equivalent.)
@@ -242,19 +252,19 @@
   **After**
 
   ```ts
-  import { SORT_PRICE_ASC, SORT_PRICE_DESC } from "#storefront-product-listing";
+  import { SORT_PRICE_ASC, SORT_PRICE_DESC } from '#storefront-product-listing'
   const { sortLinks } = useProductListSort(useRoute(), {
     sortingOptions: [
       {
         ...SORT_PRICE_ASC,
-        label: "Price Ascending",
+        label: 'Price Ascending',
       },
       {
         ...SORT_PRICE_DESC,
-        label: "Price Descending",
+        label: 'Price Descending',
       },
     ],
-  });
+  })
   ```
 
 - **BREAKING**: `useProductListingSeoData` now expects `isDefaultSortSelected` to be passed as the final parameter. This removes the internal dependency on `useProductListSort`. It is typed as `MaybeRefOrGetter<Boolean>` to support reactive usage.
@@ -262,12 +272,12 @@
   **Before**
 
   ```ts
-  const route = useRoute();
+  const route = useRoute()
   const { title, robots, canonicalLink, categoryBreadcrumbSchema } =
     useProductListingSeoData(breadcrumbs, route, {
       baseUrl: baseUrl,
       fullPath: fullPath,
-    });
+    })
   ```
 
   **After**
@@ -410,7 +420,6 @@
 
 - This release introduces the `@scayle/storefront-product-listing` package, decoupling composables and utilities of the Product Listing Page (PLP) functionality from the SCAYLE Storefront Boilerplate for enhanced modularity and integration.
   This separation empowers developers with greater control over PLP updates and simplifies its integration into existing Storefront-based projects.
-
   - [Discover more about the Product Listing Page for SCAYLE Storefront in our SCAYLE Resource Center.](https://scayle.dev/en/core-documentation/storefront-guide/storefront-application/features/product-listing-page)
 
 - This release requires `@scayle/storefront-nuxt@8.x` or higher. Support for `@scayle/storefront-nuxt@7.x` has been discontinued. Please update your dependencies accordingly. The `peerDependency` range has been updated to `^8.0.0`.
@@ -418,7 +427,6 @@
 ### Minor Changes
 
 - Compared to the original implementation within the SCAYLE Storefront Boilerplate, the `@scayle/storefront-product-detail` package has received some improvements and refactoring:
-
   - The `useAppliedFilters` composable has been added to the `storefront-product-listing` package.
     It now accepts a `filtersPrefix` parameter, allowing you to specify a custom prefix for filter-related query parameters.
   - The `useProductListSort` composable has been added to the `storefront-product-listing` package.
@@ -439,7 +447,7 @@
     They can be used as follows:
 
     ```ts
-    import { filtersFactory } from "@scayle/storefront-product-listing";
+    import { filtersFactory } from '@scayle/storefront-product-listing'
     ```
 
   - Upgrade the `storefront-core` and `storefront-nuxt` packages to version 8 and update your implementation to reflect the changes in RPC composables:

package/dist/index.mjs

@@ -7,8 +7,8 @@ const breadcrumbsFactory = Factory.define(() => [
   { to: "/de/c/women/clothing-2048", value: "clothing" }
 ]);
 
-const filtersFactory = Factory.define(
-  () => [{
+const filtersFactory = Factory.define(() => [
+  {
     id: 1,
     slug: "brand",
     name: "Brand",
@@ -22,7 +22,8 @@ const filtersFactory = Factory.define(
     ],
     type: FilterTypes.ATTRIBUTES,
     attributeGroupType: "group-type"
-  }, {
+  },
+  {
     id: null,
     slug: "sale",
     name: "Sale",
@@ -37,7 +38,8 @@ const filtersFactory = Factory.define(
       }
     ],
     type: FilterTypes.BOOLEAN
-  }, {
+  },
+  {
     id: null,
     slug: "prices",
     name: "Prices",
@@ -49,7 +51,7 @@ const filtersFactory = Factory.define(
       }
     ],
     type: FilterTypes.RANGE
-  }]
-);
+  }
+]);
 
 export { breadcrumbsFactory, filtersFactory };

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@scayle/storefront-product-listing",
   "configKey": "product-listing",
-  "version": "2.5.0",
+  "version": "2.5.2",
   "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-listing";
-const PACKAGE_VERSION = "2.5.0";
+const PACKAGE_VERSION = "2.5.2";
 const module$1 = defineNuxtModule({
   meta: {
     name: PACKAGE_NAME,

package/dist/runtime/composables/useAllShopCategoriesForId.js

@@ -3,10 +3,5 @@ export function useAllShopCategoriesForId({
   params,
   options
 } = {}, key = "useAllShopCategoriesForId") {
-  return useRpc(
-    "getAllShopCategoriesForId",
-    key,
-    params,
-    options
-  );
+  return useRpc("getAllShopCategoriesForId", key, params, options);
 }

package/dist/runtime/composables/useAppliedFilters.js

@@ -5,9 +5,13 @@ export function useAppliedFilters(route, { filtersPrefix } = { filtersPrefix: "f
   const parsedFilterQuery = computed(
     () => parseFilterDataFromRoute(route.query, filtersPrefix)
   );
-  watch(() => JSON.stringify(parsedFilterQuery.value), () => {
-    appliedFilter.value = parsedFilterQuery.value;
-  }, { immediate: true });
+  watch(
+    () => JSON.stringify(parsedFilterQuery.value),
+    () => {
+      appliedFilter.value = parsedFilterQuery.value;
+    },
+    { immediate: true }
+  );
   const appliedFiltersCount = computed(() => {
     let count = 0;
     count += appliedFilter.value.attributes?.length ?? 0;
@@ -19,17 +23,15 @@ export function useAppliedFilters(route, { filtersPrefix } = { filtersPrefix: "f
     }
     return count;
   });
-  const appliedAttributeValues = computed(
-    () => {
-      const attributes = appliedFilter.value?.attributes ?? [];
-      return attributes.reduce((values, attribute) => {
-        if (attribute.type === "attributes" && attribute.key) {
-          values[attribute.key] = attribute.values;
-        }
-        return values;
-      }, {});
-    }
-  );
+  const appliedAttributeValues = computed(() => {
+    const attributes = appliedFilter.value?.attributes ?? [];
+    return attributes.reduce((values, attribute) => {
+      if (attribute.type === "attributes" && attribute.key) {
+        values[attribute.key] = attribute.values;
+      }
+      return values;
+    }, {});
+  });
   const appliedBooleanValues = computed(() => {
     const attributes = appliedFilter.value?.attributes ?? [];
     return attributes.reduce((values, attribute) => {

package/dist/runtime/composables/useFiltersForListing.js

@@ -16,12 +16,7 @@ export function useFiltersForListing({
     },
     fetchingKey ?? params?.value.categoryId ? `${params?.value.categoryId}-filters` : "search-filters"
   );
-  const {
-    data,
-    refresh,
-    status,
-    error
-  } = filterData;
+  const { data, refresh, status, error } = filterData;
   const availableFilters = computed(() => {
     return data.value?.filters.filter((filter) => {
       if (filter.type !== "boolean") {
@@ -39,11 +34,14 @@ export function useFiltersForListing({
   const filteredProductCount = computed(() => {
     return data.value?.unfilteredCount ?? 0;
   });
-  return extendPromise(filterData.then(() => ({})), {
-    refresh,
-    status,
-    error,
-    availableFilters,
-    filteredProductCount
-  });
+  return extendPromise(
+    filterData.then(() => ({})),
+    {
+      refresh,
+      status,
+      error,
+      availableFilters,
+      filteredProductCount
+    }
+  );
 }

package/dist/runtime/composables/useProductListingSeoData.d.ts

@@ -2,7 +2,10 @@ import type { ComputedRef, MaybeRefOrGetter } from 'vue';
 import type { BreadcrumbItem } from '@scayle/storefront-nuxt';
 import type { BreadcrumbList, WithContext } from 'schema-dts';
 import type { RouteLocationNormalizedLoadedGeneric } from 'vue-router';
-type CanonicalLink = Record<'rel' | 'key' | 'href', string>;
+interface CanonicalLink {
+    rel: 'canonical';
+    href: string;
+}
 type UrlParams = Record<'baseUrl' | 'fullPath', string>;
 export interface UseProductListingSeoDataReturn {
     /** A computed string that is constructed from breadcrumb values. */

package/dist/runtime/composables/useProductListingSeoData.js

@@ -11,11 +11,12 @@ export function useProductListingSeoData(breadcrumbs, route, { baseUrl, fullPath
     return !areFiltersApplied.value && toValue(isDefaultSortSelected) && pageNumber === 1 ? "index,follow" : "noindex,follow";
   });
   const canonicalLink = computed(
-    () => robots.value.includes("noindex") ? [] : [{
-      rel: "canonical",
-      key: "canonical",
-      href: sanitizeCanonicalURL(`${baseUrl}${fullPath}`)
-    }]
+    () => robots.value.includes("noindex") ? [] : [
+      {
+        rel: "canonical",
+        href: sanitizeCanonicalURL(`${baseUrl}${fullPath}`)
+      }
+    ]
   );
   const title = computed(() => {
     return toValue(breadcrumbs).map(({ value }) => value).join(" - ");

package/dist/runtime/composables/useProductsForListing.js

@@ -11,17 +11,20 @@ export function useProductsForListing({
   fetchingKey,
   fetchingOptions
 } = {}) {
-  const productsData = useProducts({
-    params: () => ({
-      // NOTE: We don't want to include trackSearchAnalyticsEvent parameter when paginating,
-      // as this logs the search term on every page request.
-      // Instead, we log the term only once, when the search is first performed.
-      // See: https://scayle.dev/en/core-documentation/the-basics/shops/search#scayle-search-analytics
-      trackSearchAnalyticsEvent: !!(params.value.page === 1 && params.value?.where?.term),
-      ...params.value
-    }),
-    options: fetchingOptions
-  }, fetchingKey ?? `${params?.value?.categoryId ?? 0}-products`);
+  const productsData = useProducts(
+    {
+      params: () => ({
+        // NOTE: We don't want to include trackSearchAnalyticsEvent parameter when paginating,
+        // as this logs the search term on every page request.
+        // Instead, we log the term only once, when the search is first performed.
+        // See: https://scayle.dev/en/core-documentation/the-basics/shops/search#scayle-search-analytics
+        trackSearchAnalyticsEvent: !!(params.value.page === 1 && params.value?.where?.term),
+        ...params.value
+      }),
+      options: fetchingOptions
+    },
+    fetchingKey ?? `${params?.value?.categoryId ?? 0}-products`
+  );
   const products = computed(() => {
     return productsData.data.value?.products ?? [];
   });

package/dist/runtime/rpc/methods/categories.js

@@ -4,44 +4,47 @@ import {
   HttpStatusMessage,
   defineRpcHandler
 } from "@scayle/storefront-nuxt";
-export const getAllShopCategoriesForId = defineRpcHandler(async ({ id, properties }, context) => {
-  if (typeof id !== "number" || isNaN(id)) {
-    return new ErrorResponse(
-      HttpStatusCode.BAD_REQUEST,
-      HttpStatusMessage.BAD_REQUEST,
-      "Invalid category id"
-    );
-  }
-  const { runtimeConfiguration, sapiClient, log, cached } = context;
-  const fetchAllCategories = async () => {
-    const categories = [];
-    const shops = Object.values(
-      runtimeConfiguration.storefront.shops
-    );
-    await Promise.all(
-      shops.map(async (shop) => {
-        try {
-          const category = await sapiClient.clone({ shopId: shop.shopId }).categories.getById(id, {
-            with: {
-              properties
-            }
-          });
-          categories.push({
-            locale: shop.locale,
-            path: Array.isArray(shop.path) ? shop.path[0] : shop.path,
-            category
-          });
-        } catch (error) {
-          log.error(error instanceof Error ? error : String(error));
-        }
-      })
-    );
-    return categories;
-  };
-  const result = await cached(fetchAllCategories, {
-    cacheKeyPrefix: `getAllShopCategoriesForId-${id}`,
-    ttl: 12 * 60 * 60
-    // 12 hours
-  })();
-  return result;
-}, { method: "GET" });
+export const getAllShopCategoriesForId = defineRpcHandler(
+  async ({ id, properties }, context) => {
+    if (typeof id !== "number" || isNaN(id)) {
+      return new ErrorResponse(
+        HttpStatusCode.BAD_REQUEST,
+        HttpStatusMessage.BAD_REQUEST,
+        "Invalid category id"
+      );
+    }
+    const { runtimeConfiguration, sapiClient, log, cached } = context;
+    const fetchAllCategories = async () => {
+      const categories = [];
+      const shops = Object.values(
+        runtimeConfiguration.storefront.shops
+      );
+      await Promise.all(
+        shops.map(async (shop) => {
+          try {
+            const category = await sapiClient.clone({ shopId: shop.shopId }).categories.getById(id, {
+              with: {
+                properties
+              }
+            });
+            categories.push({
+              locale: shop.locale,
+              path: Array.isArray(shop.path) ? shop.path[0] : shop.path,
+              category
+            });
+          } catch (error) {
+            log.error(error instanceof Error ? error : String(error));
+          }
+        })
+      );
+      return categories;
+    };
+    const result = await cached(fetchAllCategories, {
+      cacheKeyPrefix: `getAllShopCategoriesForId-${id}`,
+      ttl: 12 * 60 * 60
+      // 12 hours
+    })();
+    return result;
+  },
+  { method: "GET" }
+);

package/dist/runtime/utils/filters.js

@@ -9,10 +9,7 @@ export const parseFilterDataFromRoute = (query, filtersPrefix) => {
     if (!queryKey.includes(filtersPrefix)) {
       return;
     }
-    const filterName = queryKey.replace(filtersPrefix, "").replace(
-      /[\[\]]/g,
-      ""
-    );
+    const filterName = queryKey.replace(filtersPrefix, "").replace(/[\[\]]/g, "");
     switch (filterName) {
       case "minPrice":
       case "maxPrice":

package/dist/runtime/utils/seo.d.ts

@@ -12,7 +12,7 @@ type ShopCategoryHref = Pick<ShopConfig, 'locale' | 'path'> & {
  * @returns An array of hreflang links.
  */
 export declare const generateProductListingHreflangLinks: (_categoriesForAllShops: MaybeRefOrGetter<ShopCategoryHref[]>, defaultLocale: string) => {
-    rel: string;
+    rel: "alternate";
     hreflang: string;
     href: string;
 }[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scayle/storefront-product-listing",
-  "version": "2.5.0",
+  "version": "2.5.2",
   "description": "Collection of essential composables and utilities to work with product listing",
   "author": "SCAYLE Commerce Engine",
   "license": "MIT",
@@ -44,29 +44,29 @@
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "0.18.2",
-    "@nuxt/kit": "^3.20.2",
+    "@nuxt/kit": "^3.21.7",
     "@nuxt/module-builder": "1.0.2",
-    "@nuxt/schema": "^3.20.2",
-    "@nuxt/test-utils": "4.0.0",
+    "@nuxt/schema": "^3.21.7",
+    "@nuxt/test-utils": "4.0.3",
     "@scayle/eslint-config-storefront": "^4.8.0",
-    "@types/node": "22.19.17",
-    "@vitest/coverage-v8": "4.1.5",
-    "@vueuse/core": "14.2.1",
-    "eslint-formatter-gitlab": "7.1.0",
-    "eslint": "10.2.1",
+    "@types/node": "24.12.2",
+    "@vitest/coverage-v8": "4.1.9",
+    "@vueuse/core": "14.3.0",
+    "eslint-formatter-gitlab": "7.2.0",
+    "eslint": "10.7.0",
     "fishery": "2.4.0",
     "h3": "1.15.11",
-    "happy-dom": "20.9.0",
-    "nuxt": "^3.20.2",
-    "publint": "0.3.18",
+    "happy-dom": "20.10.6",
+    "nuxt": "^3.21.7",
+    "publint": "0.3.21",
     "schema-dts": "1.1.5",
-    "typescript": "5.9.3",
+    "typescript": "6.0.3",
     "unbuild": "3.6.1",
-    "vitest": "4.1.5",
+    "vitest": "4.1.10",
     "vue-router": "4.6.4",
-    "vue-tsc": "3.2.6",
-    "vue": "3.5.32",
-    "@scayle/storefront-nuxt": "8.61.0",
+    "vue-tsc": "3.3.7",
+    "vue": "3.5.39",
+    "@scayle/storefront-nuxt": "8.62.4",
     "@scayle/vitest-config-storefront": "1.0.0"
   },
   "scripts": {