@scayle/storefront-nuxt 7.60.1 → 7.61.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @scayle/storefront-nuxt
 
+## 7.61.1
+
+### Patch Changes
+
+- `useBasket` and `useWishlist` should no longer trigger duplicate requests when used in multiple components
+
+## 7.61.0
+
+### Minor Changes
+
+- Expose the `loginWithIDP` function from the `useSession` composable.
+- Add error logging to RPC handler
+
+### Patch Changes
+
+- Updated dependencies
+  - @scayle/storefront-core@7.44.0
+
 ## 7.60.1
 
 ### Patch Changes

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.9.0"
   },
-  "version": "7.60.0"
+  "version": "7.61.0"
 }

package/dist/runtime/api/rpcHandler.mjs

@@ -11,7 +11,7 @@ export default defineEventHandler(async (event) => {
   try {
     return await handler(method, body?.payload, event.context.$rpcContext);
   } catch (e) {
-    const data = resolveError(e);
-    return createError(data);
+    event.context.$rpcContext.log.space("sfc").error(`RPC Handler failed: ${method}`, e);
+    return createError(resolveError(e));
   }
 });

package/dist/runtime/composables/core/useIDP.d.ts

@@ -6,7 +6,9 @@ export declare const useIDP: () => Promise<{
     fetch: () => Promise<void>;
     error: import("vue").Ref<import("nuxt/app").NuxtError<unknown> | undefined>;
     status: import("vue").Ref<import("../core/useRpc").Status>;
-    handleIDPLoginCallback: (params: string) => Promise<{
+    handleIDPLoginCallback: (params: {
+        code: string;
+    }) => Promise<{
         message: string;
     }>;
 }>;

package/dist/runtime/composables/core/useIDP.mjs

@@ -21,6 +21,7 @@ export const useIDP = async () => {
     fetch,
     error,
     status,
+    // TODO: Deprecate the property here and remove it with the next major release
     handleIDPLoginCallback
   };
 };

package/dist/runtime/composables/core/useSession.d.ts

@@ -14,4 +14,9 @@ export declare function useSession(): {
         success: boolean;
     }>;
     resetPasswordByHash: (params: import("utility-types").Optional<import("@scayle/storefront-core").UpdatePasswordByHashRequest, "shop_id">) => Promise<void | undefined>;
+    loginWithIDP: (params: {
+        code: string;
+    }) => Promise<{
+        message: string;
+    }>;
 };

package/dist/runtime/composables/core/useSession.mjs

@@ -16,6 +16,7 @@ export function useSession() {
       nuxtApp,
       "updatePasswordByHash",
       toValue(shop)
-    )
+    ),
+    loginWithIDP: rpcCall(nuxtApp, "handleIDPLoginCallback", toValue(shop))
   };
 }

package/dist/runtime/composables/storefront/useBasket.d.ts

@@ -1,24 +1,22 @@
 import type { AddOrUpdateItemType, RpcMethodParameters } from '@scayle/storefront-core';
 import { ExistingItemHandling } from '@scayle/storefront-core';
-import type { RpcOptions } from '../core/useRpc';
 import { type MaybeRefOrGetter } from '#imports';
 type UseBasketOptions = Partial<{
     params: MaybeRefOrGetter<RpcMethodParameters<'getBasket'>>;
-    options: RpcOptions;
     key: string;
 }>;
-export declare function useBasket({ params, options, key, }?: UseBasketOptions): Promise<{
-    data: import("vue").Ref<import("@scayle/storefront-core").BasketResponseData<import("@scayle/storefront-core").Product, import("@scayle/storefront-core").Variant>>;
-    items: import("vue").ComputedRef<import("@scayle/storefront-core").BasketItem<import("@scayle/storefront-core").Product, import("@scayle/storefront-core").Variant>[]>;
-    cost: import("vue").ComputedRef<import("@scayle/storefront-core").BasketTotalPrice>;
-    key: import("vue").ComputedRef<import("@aboutyou/backbone").BasketKey>;
-    packages: import("vue").ComputedRef<import("@aboutyou/backbone").BasketPackageInformation[]>;
+export declare function useBasket({ params, key, }?: UseBasketOptions): Promise<{
+    data: any;
+    items: import("vue").ComputedRef<any>;
+    cost: import("vue").ComputedRef<any>;
+    key: import("vue").ComputedRef<any>;
+    packages: import("vue").ComputedRef<any>;
     shippingDates: import("vue").ComputedRef<(string | null)[] | undefined>;
     isEmpty: import("vue").ComputedRef<boolean>;
-    fetching: import("vue").Ref<boolean>;
-    fetch: () => Promise<void>;
-    count: import("vue").ComputedRef<number>;
-    countWithoutSoldOutItems: import("vue").ComputedRef<number>;
+    fetching: any;
+    fetch: any;
+    count: import("vue").ComputedRef<any>;
+    countWithoutSoldOutItems: import("vue").ComputedRef<any>;
     addItem: ({ variantId, promotionId, quantity, existingItemHandling, displayData, customData, itemGroup, }: AddOrUpdateItemType & {
         existingItemHandling?: 0 | 1 | 2 | 3 | undefined;
     }) => Promise<void>;
@@ -32,12 +30,12 @@ export declare function useBasket({ params, options, key, }?: UseBasketOptions):
     } | {
         productId: number;
     }) => boolean;
-    products: import("vue").ComputedRef<import("@scayle/storefront-core").Product[]>;
+    products: import("vue").ComputedRef<any>;
     findItem: (item: {
         variantId: number;
     } | {
         productId: number;
-    }) => import("@scayle/storefront-core").BasketItem<import("@scayle/storefront-core").Product, import("@scayle/storefront-core").Variant> | undefined;
+    }) => any;
     generateBasketKey: ({ keyTemplate, hashAlgorithm, shopId, userId, log, }: {
         keyTemplate: string;
         hashAlgorithm: import("@scayle/storefront-core").HashAlgorithm;
@@ -49,7 +47,7 @@ export declare function useBasket({ params, options, key, }?: UseBasketOptions):
         fromBasketKey: string;
         toBasketKey: string;
     }) => Promise<any>;
-    error: import("vue").Ref<import("nuxt/app").NuxtError<unknown> | undefined>;
-    status: import("vue").Ref<import("../core/useRpc").Status>;
+    error: any;
+    status: any;
 }>;
 export {};

package/dist/runtime/composables/storefront/useBasket.mjs

@@ -10,9 +10,8 @@ import { useNuxtApp } from "nuxt/app";
 import { computed } from "vue";
 import { useEventListener } from "@vueuse/core";
 import { rpcCall } from "../../rpc/rpcCall.mjs";
-import { useRpc } from "../core/useRpc.mjs";
 import { useCurrentShop } from "../core/useCurrentShop.mjs";
-import { toValue } from "#imports";
+import { toValue, toRef, useAsyncData } from "#imports";
 const onCheckoutUpdate = async (event, fetching, fetchCallback) => {
   if (fetching) {
     return;
@@ -26,16 +25,28 @@ const onCheckoutUpdate = async (event, fetching, fetchCallback) => {
 };
 export async function useBasket({
   params,
-  options,
   key = "useBasket"
 } = {}) {
   const nuxtApp = useNuxtApp();
   const shop = useCurrentShop();
-  const { data, fetch, fetching, error, status } = await useRpc(
-    "getBasket",
+  const {
+    data,
+    pending: fetching,
+    error,
+    refresh: fetch,
+    status
+  } = await useAsyncData(
     key,
-    params,
-    options
+    () => rpcCall(nuxtApp, "getBasket", toValue(shop))(toValue(params)),
+    {
+      server: false,
+      // TODO: In some cases it might be ok to fetch on server
+      watch: [toRef(params)],
+      dedupe: "defer",
+      getCachedData: (key2) => {
+        return toValue(nuxtApp._asyncData[key2]?.data);
+      }
+    }
   );
   useEventListener(
     "message",

package/dist/runtime/composables/storefront/useWishlist.d.ts

@@ -1,16 +1,14 @@
-import type { Product, WishlistItem, RpcMethodParameters } from '@scayle/storefront-core';
-import type { RpcOptions } from '../core/useRpc';
+import type { RpcMethodParameters } from '@scayle/storefront-core';
 import type { MaybeRefOrGetter } from '#imports';
 type Options = Partial<{
     params: MaybeRefOrGetter<RpcMethodParameters<'getWishlist'>>;
-    options: RpcOptions;
     key: string;
 }>;
-export declare function useWishlist({ params, options, key, }?: Options): Promise<{
-    data: import("vue").Ref<import("@scayle/storefront-core").WishlistResponseData>;
-    count: import("vue").ComputedRef<number>;
-    items: import("vue").ComputedRef<WishlistItem[]>;
-    products: import("vue").ComputedRef<Product[]>;
+export declare function useWishlist({ params, key, }?: Options): Promise<{
+    data: any;
+    count: import("vue").ComputedRef<any>;
+    items: import("vue").ComputedRef<any>;
+    products: import("vue").ComputedRef<any>;
     addItem: (item: {
         variantId?: number;
         productId?: number;
@@ -27,8 +25,8 @@ export declare function useWishlist({ params, options, key, }?: Options): Promis
         productId?: number;
     }) => Promise<void>;
     clear: () => Promise<void>;
-    fetching: import("vue").Ref<boolean>;
-    fetch: () => Promise<void>;
+    fetching: any;
+    fetch: any;
     toggleItem: (item: {
         variantId?: number;
         productId?: number;
@@ -36,13 +34,13 @@ export declare function useWishlist({ params, options, key, }?: Options): Promis
     findItem: (item: {
         variantId?: number;
         productId?: number;
-    }) => WishlistItem | undefined;
+    }) => any;
     contains: (item: {
         variantId: number;
     } | {
         productId: number;
     }) => boolean;
-    error: import("vue").Ref<import("nuxt/app").NuxtError<unknown> | undefined>;
-    status: import("vue").Ref<import("../core/useRpc").Status>;
+    error: any;
+    status: any;
 }>;
 export {};

package/dist/runtime/composables/storefront/useWishlist.mjs

@@ -7,20 +7,31 @@ import { useNuxtApp } from "nuxt/app";
 import { computed } from "vue";
 import { rpcCall } from "../../rpc/rpcCall.mjs";
 import { useCurrentShop } from "../core/useCurrentShop.mjs";
-import { useRpc } from "../core/useRpc.mjs";
-import { toValue } from "#imports";
+import { toValue, toRef, useAsyncData } from "#imports";
 export async function useWishlist({
   params,
-  options,
   key = "useWishlist"
 } = {}) {
   const nuxtApp = useNuxtApp();
   const shop = useCurrentShop();
-  const { data, fetching, fetch, error, status } = await useRpc(
-    "getWishlist",
+  const {
+    data,
+    pending: fetching,
+    error,
+    refresh: fetch,
+    status
+  } = await useAsyncData(
     key,
-    params,
-    options
+    () => rpcCall(nuxtApp, "getWishlist", toValue(shop))(toValue(params)),
+    {
+      server: false,
+      // TODO: In some cases it might be ok to fetch on server
+      watch: [toRef(params)],
+      dedupe: "defer",
+      getCachedData: (key2) => {
+        return toValue(nuxtApp._asyncData[key2]?.data);
+      }
+    }
   );
   const addItem = async (item) => {
     data.value = await rpcCall(

package/dist/runtime/error/handler.d.ts

@@ -1,5 +1,5 @@
 declare const resolveError: (error: Error | unknown) => {
-    statusCode: 500 | 401 | 400 | 100 | 101 | 102 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 226 | 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 402 | 403 | 404 | 405 | 406 | 407 | 408 | 409 | 410 | 411 | 412 | 413 | 414 | 415 | 416 | 417 | 418 | 421 | 422 | 423 | 424 | 426 | 428 | 429 | 431 | 451 | 501 | 502 | 503 | 504 | 505 | 506 | 507 | 508 | 510 | 511;
+    statusCode: 401 | 500 | 400 | 100 | 101 | 102 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 226 | 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 402 | 403 | 404 | 405 | 406 | 407 | 408 | 409 | 410 | 411 | 412 | 413 | 414 | 415 | 416 | 417 | 418 | 421 | 422 | 423 | 424 | 426 | 428 | 429 | 431 | 451 | 501 | 502 | 503 | 504 | 505 | 506 | 507 | 508 | 510 | 511;
     statusMessage: string;
     name: string;
 };

package/dist/runtime/handler.mjs

@@ -11,24 +11,14 @@ export const handler = async (method, payload, rpcContext) => {
   const log = rpcContext.log.space("sfc").space("rpc");
   return await log.time(`Calling RPC method: ${method}`, async () => {
     const fun = rpcMethods[method];
-    try {
-      if (fun.length === 1) {
-        return await fun(
-          rpcContext
-        );
-      }
+    if (fun.length === 1) {
       return await fun(
-        payload,
         rpcContext
       );
-    } catch (e) {
-      if (e instanceof Error) {
-        return new Response(JSON.stringify({ message: e.message }), {
-          status: 500
-        });
-      } else {
-        return new Response(null, { status: 500 });
-      }
     }
+    return await fun(
+      payload,
+      rpcContext
+    );
   });
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@scayle/storefront-nuxt",
   "type": "module",
-  "version": "7.60.1",
+  "version": "7.61.1",
   "description": "Nuxt integration for the SCAYLE Commerce Engine and Storefront API",
   "author": "SCAYLE Commerce Engine",
   "license": "MIT",
@@ -62,7 +62,7 @@
   "dependencies": {
     "@nuxt/kit": "3.10.2",
     "@scayle/h3-session": "0.3.5",
-    "@scayle/storefront-core": "7.43.0",
+    "@scayle/storefront-core": "7.44.0",
     "@scayle/unstorage-compression-driver": "0.1.2",
     "@vueuse/core": "10.9.0",
     "consola": "3.2.3",
@@ -84,7 +84,7 @@
     "@nuxt/test-utils": "3.11.0",
     "@scayle/eslint-config-storefront": "3.2.6",
     "@scayle/prettier-config-storefront": "2.0.2",
-    "@types/node": "20.11.24",
+    "@types/node": "20.11.25",
     "eslint": "8.57.0",
     "eslint-formatter-gitlab": "5.1.0",
     "h3": "1.11.1",
@@ -93,7 +93,7 @@
     "prettier": "3.0.0",
     "publint": "0.2.7",
     "vitest": "1.3.1",
-    "vue-tsc": "1.8.27"
+    "vue-tsc": "2.0.6"
   },
   "peerDependencies": {
     "h3": "^1.10.0",