@scayle/storefront-product-listing 2.2.0 → 2.3.0

package/CHANGELOG.md

@@ -1,5 +1,120 @@
 # @scayle/storefront-product-listing
 
+## 2.3.0
+
+### Minor Changes
+
+- Deprecated the `sortLinks` property in `useProductListSort` to improve SEO by preventing sort links from appearing as crawlable URLs in the DOM.
+
+  The `sortLinks` property was a computed property that automatically added a `to` property to sorting options.
+  Search engines can crawl these links, potentially indexing duplicate content with different sort parameters.
+  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
+    const sortingOptions = computed<SelectedSort[]>(() => {
+      return [
+        {
+          ...createDefaultSortingOption(currentCategory.value ?? undefined),
+          label: i18n.t('sorting_select.top_seller'),
+        },
+        {
+          ...SORT_DATE_NEWEST,
+          label: i18n.t('sorting_select.date_newest'),
+        },
+        {
+          ...SORT_PRICE_DESC,
+          label: i18n.t('sorting_select.price_desc'),
+        },
+        {
+          ...SORT_PRICE_ASC,
+          label: i18n.t('sorting_select.price_asc'),
+        },
+        {
+          ...SORT_REDUCTION_DESC,
+          label: i18n.t('sorting_select.reduction_desc'),
+        },
+      ]
+    })
+
+    const { selectedSort, sortLinks } = useProductListSort(route, {
+      sortingOptions: sortingOptions,
+    })
+
+    // This created a href in the DOM to apply a sort.
+    <SFLocalizedLink :to="sortLinks[0].to" />
+    ```
+
+  - **After:**
+
+    ```ts
+    const sortingOptions = computed<SelectedSort[]>(() => {
+      return [
+        {
+          ...createDefaultSortingOption(currentCategory.value ?? undefined),
+          label: i18n.t('sorting_select.top_seller'),
+        },
+        {
+          ...SORT_DATE_NEWEST,
+          label: i18n.t('sorting_select.date_newest'),
+        },
+        {
+          ...SORT_PRICE_DESC,
+          label: i18n.t('sorting_select.price_desc'),
+        },
+        {
+          ...SORT_PRICE_ASC,
+          label: i18n.t('sorting_select.price_asc'),
+        },
+        {
+          ...SORT_REDUCTION_DESC,
+          label: i18n.t('sorting_select.reduction_desc'),
+        },
+      ]
+    })
+
+    const { selectedSort } = useProductListSort(route, {
+      sortingOptions: sortingOptions,
+    })
+
+    // No href in the DOM to apply a sort.
+    const applySort = (sort: SelectedSort) => {
+      router.push({ query: { ...route.query, sort: sort.key } })
+    }
+
+    <SFButton @click="applySort(sortingOptions[0])" />
+    ```
+
+### Patch Changes
+
+- 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', {
+    productId: 123,
+  })
+
+  // After
+  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',
+    () => `product-${productId.value}`,
+    { productId },
+  )
+  ```
+
 ## 2.2.0
 
 ### Minor Changes

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@scayle/storefront-product-listing",
   "configKey": "product-listing",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "compatibility": {
     "bridge": false,
     "nuxt": ">=3.13"

package/dist/module.mjs

@@ -1,8 +1,8 @@
 import { defineNuxtModule, createResolver, addImportsDir } from '@nuxt/kit';
 
 const PACKAGE_NAME = "@scayle/storefront-product-listing";
-const PACKAGE_VERSION = "2.2.0";
-const module = defineNuxtModule({
+const PACKAGE_VERSION = "2.3.0";
+const module$1 = defineNuxtModule({
   meta: {
     name: PACKAGE_NAME,
     configKey: "product-listing",
@@ -35,4 +35,4 @@ const module = defineNuxtModule({
   }
 });
 
-export { module as default };
+export { module$1 as default };

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

@@ -1,7 +1,7 @@
-import type { KeysOf, NormalizedRpcResponse, UseRpcOptions, UseRpcReturn } from '@scayle/storefront-nuxt/composables';
+import type { KeysOf, NormalizedRpcResponse, UseRpcOptions, UseRpcReturn, UseRpcCacheKey } from '@scayle/storefront-nuxt/composables';
 import type { MaybeRefOrGetter } from 'vue';
 import type { RpcMethodParameters } from '@scayle/storefront-nuxt';
 export declare function useAllShopCategoriesForId<DataT = NormalizedRpcResponse<'getAllShopCategoriesForId'>, PickKeys extends KeysOf<DataT> = KeysOf<DataT>, DefaultT = null>({ params, options, }?: Partial<{
     params: MaybeRefOrGetter<RpcMethodParameters<'getAllShopCategoriesForId'>>;
     options: UseRpcOptions<'getAllShopCategoriesForId', DataT, PickKeys, DefaultT>;
-}>, key?: string): UseRpcReturn<'getAllShopCategoriesForId', DataT, PickKeys, DefaultT>;
+}>, key?: UseRpcCacheKey): UseRpcReturn<'getAllShopCategoriesForId', DataT, PickKeys, DefaultT>;

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

@@ -1,5 +1,6 @@
 import type { FetchFiltersParams, FilterItemWithValues } from '@scayle/storefront-nuxt';
 import { useFilters } from '@scayle/storefront-nuxt/composables';
+import type { UseRpcCacheKey } from '@scayle/storefront-nuxt/composables';
 import type { ComputedRef, Ref } from 'vue';
 export type FiltersForListingOptions = Partial<{
     params: Ref<Omit<FetchFiltersParams, 'category'>>;
@@ -7,7 +8,7 @@ export type FiltersForListingOptions = Partial<{
         lazy: boolean;
         immediate: boolean;
     }>;
-    fetchingKey: string;
+    fetchingKey: UseRpcCacheKey;
 }>;
 export type UseFiltersForListingReturn = Pick<Awaited<ReturnType<typeof useFilters>>, 'error' | 'status' | 'refresh'> & {
     /** Returns computed available filters. */

package/dist/runtime/composables/useFiltersForListing.js

@@ -14,7 +14,7 @@ export function useFiltersForListing({
       params,
       options: fetchingOptions
     },
-    fetchingKey ?? params?.value.categoryId ? `${params?.value.categoryId}-filters` : "search-filters"
+    fetchingKey ?? params?.value.categoryId ? () => `${params?.value.categoryId}-filters` : "search-filters"
   );
   const {
     data,

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

@@ -4,7 +4,10 @@ import type { SelectedSort, SortLink } from '../types/sort.js';
 export interface UseProductListSortReturn {
     /** The currently selected sorting option. */
     selectedSort: ComputedRef<SelectedSort | undefined>;
-    /** Links with updated query parameters for each sorting option. */
+    /**
+     * @deprecated This property is deprecated. Use passed `sortingOptions` directly instead.
+     * Links with updated query parameters for each sorting option.
+     */
     sortLinks: ComputedRef<SortLink[]>;
     /** Indicating if the default sort is selected. */
     isDefaultSortSelected: ComputedRef<boolean>;

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

@@ -1,6 +1,7 @@
 import type { FetchProductsByCategoryParams, Product, Pagination } from '@scayle/storefront-nuxt';
 import type { Ref, ComputedRef } from 'vue';
 import { useProducts } from '@scayle/storefront-nuxt/composables';
+import type { UseRpcCacheKey } from '@scayle/storefront-nuxt/composables';
 export type UseProductsForListingReturn = Pick<Awaited<ReturnType<typeof useProducts>>, 'error' | 'status'> & {
     /** A computed array of products in the specified category. */
     products: ComputedRef<Product[]>;
@@ -16,7 +17,7 @@ export interface ProductsForListingOptions {
         lazy: boolean;
         immediate: boolean;
     }>;
-    fetchingKey: string;
+    fetchingKey: UseRpcCacheKey;
 }
 /**
  * Composable to fetch and manage products by category with configurable options.

package/dist/runtime/composables/useProductsForListing.js

@@ -21,7 +21,7 @@ export function useProductsForListing({
       ...params.value
     }),
     options: fetchingOptions
-  }, fetchingKey || `${params.value.categoryId ?? 0}-products`);
+  }, fetchingKey ?? (() => `${params?.value?.categoryId ?? 0}-products`));
   const products = computed(() => {
     return productsData.data.value?.products ?? [];
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scayle/storefront-product-listing",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "Collection of essential composables and utilities to work with product listing",
   "author": "SCAYLE Commerce Engine",
   "license": "MIT",
@@ -45,12 +45,12 @@
     "@nuxt/module-builder": "1.0.2",
     "@nuxt/schema": "3.20.0",
     "@nuxt/test-utils": "3.20.1",
-    "@types/node": "22.18.13",
-    "@vitest/coverage-v8": "3.2.4",
+    "@types/node": "22.19.1",
+    "@vitest/coverage-v8": "4.0.14",
     "@vueuse/core": "13.9.0",
     "dprint": "0.50.2",
     "eslint-formatter-gitlab": "6.0.1",
-    "eslint": "9.38.0",
+    "eslint": "9.39.1",
     "fishery": "2.3.1",
     "happy-dom": "20.0.10",
     "nuxt": "3.20.0",
@@ -58,12 +58,12 @@
     "schema-dts": "1.1.5",
     "typescript": "5.9.3",
     "unbuild": "3.6.1",
-    "vitest": "3.2.4",
+    "vitest": "4.0.14",
     "vue-router": "4.6.3",
-    "vue-tsc": "3.1.2",
-    "vue": "3.5.22",
-    "@scayle/eslint-config-storefront": "4.7.11",
-    "@scayle/storefront-nuxt": "8.47.0",
+    "vue-tsc": "3.1.5",
+    "vue": "3.5.25",
+    "@scayle/eslint-config-storefront": "4.7.14",
+    "@scayle/storefront-nuxt": "8.53.3",
     "@scayle/vitest-config-storefront": "1.0.0"
   },
   "scripts": {