@scayle/storefront-product-listing 2.0.0 → 2.0.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @scayle/storefront-product-listing
 
+## 2.0.1
+
+### Patch Changes
+
+- Resolved an issue where the `appliedFilter` in `useAppliedFilters` was updated on every route change even if the query didn't change.
+
+  This caused unnecessary updates in places where there is a reactive dependency on the `appliedFilter`.
+  The `appliedFilter` is now only updated when the query actually changes.
+
 ## 2.0.0
 
 ### Major Changes
@@ -9,14 +18,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.)
@@ -24,19 +33,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.
@@ -44,12 +53,12 @@
   **Before**
 
   ```ts
-  const route = useRoute();
+  const route = useRoute()
   const { title, robots, canonicalLink, categoryBreadcrumbSchema } =
     useProductListingSeoData(breadcrumbs, route, {
       baseUrl: baseUrl,
       fullPath: fullPath,
-    });
+    })
   ```
 
   **After**
@@ -221,7 +230,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.d.mts

@@ -1,7 +1,6 @@
 export * from '../dist/runtime/types/sort.js';
-import { BreadcrumbItem } from '@scayle/storefront-nuxt';
+import { BreadcrumbItem, FilterItemWithValues } from '@scayle/storefront-nuxt';
 import { Factory } from 'fishery';
-import { FilterItemWithValues } from '@scayle/storefront-api';
 
 type RangeTuple = [start: number, end: number];
 

package/dist/index.mjs

@@ -1,6 +1,6 @@
 export * from '../dist/runtime/types/sort.js';
 import { Factory } from 'fishery';
-import { FilterTypes } from '@scayle/storefront-api';
+import { FilterTypes } from '@scayle/storefront-nuxt';
 
 const breadcrumbsFactory = Factory.define(() => [
   { to: "/de/c/women/clothing/shirts-2045", value: "shirts" },

package/dist/module.json

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

package/dist/runtime/composables/useAppliedFilters.js

@@ -1,9 +1,11 @@
-import { computed } from "vue";
+import { computed, ref, watch } from "vue";
 import { parseFilterDataFromRoute } from "../utils/filters.js";
 export function useAppliedFilters(route, { filtersPrefix } = { filtersPrefix: "filters" }) {
-  const appliedFilter = computed(() => {
-    return parseFilterDataFromRoute(route, filtersPrefix);
-  });
+  const appliedFilter = ref({ attributes: [] });
+  const routeQueryString = computed(() => JSON.stringify(route.query));
+  watch(routeQueryString, () => {
+    appliedFilter.value = parseFilterDataFromRoute(route.query, filtersPrefix);
+  }, { immediate: true });
   const appliedFiltersCount = computed(() => {
     let count = 0;
     count += appliedFilter.value.attributes?.length ?? 0;
@@ -39,7 +41,7 @@ export function useAppliedFilters(route, { filtersPrefix } = { filtersPrefix: "f
     return appliedFiltersCount.value > 0;
   });
   return {
-    appliedFilter,
+    appliedFilter: computed(() => appliedFilter.value),
     appliedFiltersCount,
     appliedAttributeValues,
     appliedBooleanValues,

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

@@ -1,7 +1,6 @@
-import type { FetchFiltersParams } from '@scayle/storefront-nuxt';
+import type { FetchFiltersParams, FilterItemWithValues } from '@scayle/storefront-nuxt';
 import { useFilters } from '@scayle/storefront-nuxt/composables';
 import type { ComputedRef, Ref } from 'vue';
-import type { FilterItemWithValues } from '@scayle/storefront-api';
 export type FiltersForListingOptions = Partial<{
     params: Ref<Omit<FetchFiltersParams, 'category'>>;
     fetchingOptions: Partial<{

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

@@ -1,7 +1,6 @@
-import type { FetchProductsByCategoryParams, Product } from '@scayle/storefront-nuxt';
+import type { FetchProductsByCategoryParams, Product, Pagination } from '@scayle/storefront-nuxt';
 import type { Ref, ComputedRef } from 'vue';
 import { useProducts } from '@scayle/storefront-nuxt/composables';
-import type { Pagination } from '@scayle/storefront-api';
 export type UseProductsForListingReturn = Pick<Awaited<ReturnType<typeof useProducts>>, 'error' | 'status'> & {
     /** A computed array of products in the specified category. */
     products: ComputedRef<Product[]>;

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

@@ -1,9 +1,10 @@
 import {
   ErrorResponse,
   HttpStatusCode,
-  HttpStatusMessage
+  HttpStatusMessage,
+  defineRpcHandler
 } from "@scayle/storefront-nuxt";
-export const getAllShopCategoriesForId = async function getAllShopCategoriesForId2({ id, properties }, context) {
+export const getAllShopCategoriesForId = defineRpcHandler(async ({ id, properties }, context) => {
   if (typeof id !== "number" || isNaN(id)) {
     return new ErrorResponse(
       HttpStatusCode.BAD_REQUEST,
@@ -43,4 +44,4 @@ export const getAllShopCategoriesForId = async function getAllShopCategoriesForI
     // 12 hours
   })();
   return result;
-};
+});

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

@@ -2,14 +2,14 @@ import type { LocationQuery, RouteLocationNormalizedLoadedGeneric } from 'vue-ro
 import type { CategoryFilter, ProductSearchQuery } from '@scayle/storefront-nuxt';
 import type { RangeTuple } from '../..//index.js';
 /**
- * Parses filter data from a Vue Router route object.
+ * Parses filter data from a Vue Router query object.
  *
- * @param route The Vue Router route object.
+ * @param query The query object.
  * @param filtersPrefix The prefix used for filter query parameters.
  *
  * @returns An object representing the parsed product search query.
  */
-export declare const parseFilterDataFromRoute: (route: RouteLocationNormalizedLoadedGeneric, filtersPrefix: string) => ProductSearchQuery;
+export declare const parseFilterDataFromRoute: (query: LocationQuery, filtersPrefix: string) => ProductSearchQuery;
 /**
  * Creates a new attribute filter query object.
  *

package/dist/runtime/utils/filters.js

@@ -1,11 +1,11 @@
 const getAttributeValues = (value) => {
   return value.split(",").filter((v) => v !== "").map(Number).filter((v) => !isNaN(v));
 };
-export const parseFilterDataFromRoute = (route, filtersPrefix) => {
-  const queryKeys = Object.keys(route.query);
+export const parseFilterDataFromRoute = (query, filtersPrefix) => {
+  const queryKeys = Object.keys(query);
   const productSearchQuery = { attributes: [] };
   queryKeys.forEach((queryKey) => {
-    const value = route.query[queryKey];
+    const value = query[queryKey];
     if (!queryKey.includes(filtersPrefix)) {
       return;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scayle/storefront-product-listing",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Collection of essential composables and utilities to work with product listing",
   "author": "SCAYLE Commerce Engine",
   "license": "MIT",
@@ -33,9 +33,7 @@
   },
   "peerDependencies": {
     "@nuxt/kit": ">=3.13.0",
-    "@scayle/storefront-core": "^8.0.0",
     "@scayle/storefront-nuxt": "^8.0.0",
-    "@vue/test-utils": "^2.4.6",
     "@vueuse/core": "^12.8.2 || ^13.0.0",
     "fishery": "^2.2.3",
     "vue-router": "^4.5.0",
@@ -43,31 +41,29 @@
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "0.18.2",
-    "@nuxt/kit": "3.16.2",
+    "@nuxt/kit": "3.17.7",
     "@nuxt/module-builder": "1.0.1",
-    "@nuxt/schema": "3.16.2",
+    "@nuxt/schema": "3.17.7",
     "@nuxt/test-utils": "3.19.2",
-    "@scayle/eslint-config-storefront": "4.5.12",
-    "@scayle/storefront-api": "18.9.0",
-    "@scayle/storefront-nuxt": "8.32.1",
-    "@types/node": "22.15.34",
+    "@types/node": "22.16.4",
     "@vitest/coverage-v8": "3.2.4",
-    "@vue/test-utils": "2.4.6",
-    "@vueuse/core": "13.4.0",
+    "@vueuse/core": "13.5.0",
     "dprint": "0.50.1",
     "eslint-formatter-gitlab": "6.0.1",
-    "eslint": "9.30.0",
+    "eslint": "9.31.0",
     "fishery": "2.3.1",
     "happy-dom": "18.0.1",
-    "nuxt": "3.16.2",
+    "nuxt": "3.17.7",
     "publint": "0.3.12",
     "schema-dts": "1.1.5",
     "typescript": "5.8.3",
     "unbuild": "3.5.0",
     "vitest": "3.2.4",
     "vue-router": "4.5.1",
-    "vue-tsc": "2.2.10",
-    "vue": "3.5.17"
+    "vue-tsc": "3.0.1",
+    "vue": "3.5.17",
+    "@scayle/eslint-config-storefront": "4.6.1",
+    "@scayle/storefront-nuxt": "8.34.1"
   },
   "scripts": {
     "build": "nuxt-module-build build",