Merge pull request #5 from shopwareLabs/chore/update-main-from-origin

Update main branch with changes from vercel

.github/workflows/test.yml

@@ -5,7 +5,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Cancel running workflows
-        uses: styfle/cancel-workflow-action@0.11.0
+        uses: styfle/cancel-workflow-action@0.12.0
         with:
           access_token: ${{ github.token }}
       - name: Checkout repo

app/search/(collection)/[...collection]/page.tsx

@@ -20,7 +20,7 @@ export async function generateMetadata({
 }): Promise<Metadata> {
   // see https://github.com/facebook/react/issues/25994
   const collectionName = decodeURIComponent(transformHandle(params?.collection ?? ''));
-  if (collectionName === 'react_devtools_backend_compact.js.map') {
+  if (collectionName.includes('.js.map')) {
     return {};
   }
 
@@ -47,7 +47,7 @@ export default async function CategoryPage({
 
   // see https://github.com/facebook/react/issues/25994
   const collectionName = decodeURIComponent(transformHandle(params?.collection ?? ''));
-  if (collectionName === 'react_devtools_backend_compact.js.map') {
+  if (collectionName.includes('.js.map')) {
     return null;
   }
 

components/cart/actions.ts

@@ -1,11 +1,13 @@
 'use server';
 
+import { TAGS } from 'lib/constants';
 import { ApiClientError } from '@shopware/api-client';
 import { getApiClient } from 'lib/shopware/api';
 import { ExtendedCart, ExtendedLineItem, messageKeys } from 'lib/shopware/api-extended';
+import { revalidateTag } from 'next/cache';
 import { cookies } from 'next/headers';
 
-export const fetchCart = async function (cartId?: string): Promise<ExtendedCart | undefined> {
+async function fetchCart(cartId?: string): Promise<ExtendedCart | undefined> {
   try {
     const apiClient = getApiClient(cartId);
     const cart = await apiClient.invoke('readCart get /checkout/cart?name', {});
@@ -19,26 +21,17 @@ export const fetchCart = async function (cartId?: string): Promise<ExtendedCart
       console.error('==>', error);
     }
   }
-};
+}
 
-export const addItem = async (variantId: string | undefined): Promise<Error | undefined> => {
+export async function addItem(prevState: any, selectedVariantId: string | undefined) {
-  let cartId = cookies().get('sw-context-token')?.value;
+  const cart = await getCart();
-  let cart;
+  if (!cart) {
-
+    return 'Could not get cart';
-  if (cartId) {
-    cart = await fetchCart(cartId);
   }
+  const cartId = updateCartCookie(cart);
 
-  if (!cartId || !cart) {
+  if (!selectedVariantId) {
-    cart = await fetchCart();
+    return 'Missing product variant ID';
-    if (cart && cart.token) {
-      cartId = cart.token;
-      cookies().set('sw-context-token', cartId);
-    }
-  }
-
-  if (!variantId) {
-    return { message: 'Missing product variant ID' } as Error;
   }
 
   try {
@@ -46,7 +39,7 @@ export const addItem = async (variantId: string | undefined): Promise<Error | un
     const apiClient = getApiClient(cartId);
 
     // this part allows us to click multiple times on addToCart and increase the qty with that
-    const itemInCart = cart?.lineItems?.filter((item) => item.id === variantId) as
+    const itemInCart = cart?.lineItems?.filter((item) => item.id === selectedVariantId) as
       | ExtendedLineItem
       | undefined;
     if (itemInCart && itemInCart.quantity) {
@@ -56,9 +49,9 @@ export const addItem = async (variantId: string | undefined): Promise<Error | un
     const response = await apiClient.invoke('addLineItem post /checkout/cart/line-item', {
       items: [
         {
-          id: variantId,
+          id: selectedVariantId,
           quantity: quantity,
-          referencedId: variantId,
+          referencedId: selectedVariantId,
           type: 'product'
         }
       ]
@@ -66,8 +59,9 @@ export const addItem = async (variantId: string | undefined): Promise<Error | un
 
     const errorMessage = alertErrorMessages(response);
     if (errorMessage !== '') {
-      return { message: errorMessage } as Error;
+      return errorMessage;
     }
+    revalidateTag(TAGS.cart);
   } catch (error) {
     if (error instanceof ApiClientError) {
       console.error(error);
@@ -76,7 +70,33 @@ export const addItem = async (variantId: string | undefined): Promise<Error | un
       console.error('==>', error);
     }
   }
-};
+}
+
+export async function getCart() {
+  const cartId = cookies().get('sw-context-token')?.value;
+
+  if (cartId) {
+    return await fetchCart(cartId);
+  }
+
+  return await fetchCart();
+}
+
+function updateCartCookie(cart: ExtendedCart): string | undefined {
+  const cartId = cookies().get('sw-context-token')?.value;
+  // cartId is set, but not valid anymore, update the cookie
+  if (cartId && cart && cart.token && cart.token !== cartId) {
+    cookies().set('sw-context-token', cart.token);
+    return cart.token;
+  }
+  // cartId is not set (undefined), case for new cart, set the cookie
+  if (!cartId && cart && cart.token) {
+    cookies().set('sw-context-token', cart.token);
+    return cart.token;
+  }
+  // cartId is set and the same like cart.token, return it
+  return cartId;
+}
 
 function alertErrorMessages(response: ExtendedCart): string {
   let errorMessages: string = '';
@@ -92,11 +112,46 @@ function alertErrorMessages(response: ExtendedCart): string {
   return errorMessages;
 }
 
-export const removeItem = async (lineId: string): Promise<Error | undefined> => {
+export async function updateItemQuantity(
+  prevState: any,
+  payload: {
+    lineId: string;
+    variantId: string;
+    quantity: number;
+  }
+) {
   const cartId = cookies().get('sw-context-token')?.value;
 
   if (!cartId) {
-    return { message: 'Missing cart ID' } as Error;
+    return 'Missing cart ID';
+  }
+
+  const { lineId, variantId, quantity } = payload;
+
+  try {
+    if (quantity === 0) {
+      await removeItem(null, lineId);
+      revalidateTag(TAGS.cart);
+      return;
+    }
+
+    await updateLineItem(lineId, variantId, quantity);
+    revalidateTag(TAGS.cart);
+  } catch (error) {
+    if (error instanceof ApiClientError) {
+      console.error(error);
+      console.error('Details:', error.details);
+    } else {
+      return 'Error updating item quantity';
+    }
+  }
+}
+
+export async function removeItem(prevState: any, lineId: string) {
+  const cartId = cookies().get('sw-context-token')?.value;
+
+  if (!cartId) {
+    return 'Missing cart ID';
   }
 
   try {
@@ -104,6 +159,7 @@ export const removeItem = async (lineId: string): Promise<Error | undefined> =>
     await apiClient.invoke('deleteLineItem delete /checkout/cart/line-item?id[]={ids}', {
       ids: [lineId]
     });
+    revalidateTag(TAGS.cart);
   } catch (error) {
     if (error instanceof ApiClientError) {
       console.error(error);
@@ -112,17 +168,9 @@ export const removeItem = async (lineId: string): Promise<Error | undefined> =>
       console.error('==>', error);
     }
   }
-};
+}
 
-export const updateItemQuantity = async ({
+async function updateLineItem(lineId: string, variantId: string, quantity: number) {
-  lineId,
-  variantId,
-  quantity
-}: {
-  lineId: string;
-  variantId: string;
-  quantity: number;
-}): Promise<Error | undefined> => {
   const cartId = cookies().get('sw-context-token')?.value;
 
   if (!cartId) {
@@ -148,4 +196,4 @@ export const updateItemQuantity = async ({
       console.error('==>', error);
     }
   }
-};
+}

components/cart/add-to-cart.tsx

@@ -5,21 +5,79 @@ import clsx from 'clsx';
 import { addItem } from 'components/cart/actions';
 import LoadingDots from 'components/loading-dots';
 import { ProductVariant, Product } from 'lib/shopware/types';
-import { useRouter, useSearchParams } from 'next/navigation';
+import { useSearchParams } from 'next/navigation';
-import { useTransition } from 'react';
+import {
+  // @ts-ignore
+  experimental_useFormState as useFormState,
+  experimental_useFormStatus as useFormStatus
+} from 'react-dom';
+
+function SubmitButton({
+  availableForSale,
+  selectedVariantId
+}: {
+  availableForSale: boolean;
+  selectedVariantId: string | undefined;
+}) {
+  const { pending } = useFormStatus();
+  const buttonClasses =
+    'relative flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white';
+  const disabledClasses = 'cursor-not-allowed opacity-60 hover:opacity-60';
+
+  if (!availableForSale) {
+    return (
+      <button aria-disabled className={clsx(buttonClasses, disabledClasses)}>
+        Out Of Stock
+      </button>
+    );
+  }
+
+  if (!selectedVariantId) {
+    return (
+      <button
+        aria-label="Please select an option"
+        aria-disabled
+        className={clsx(buttonClasses, disabledClasses)}
+      >
+        <div className="absolute left-0 ml-4">
+          <PlusIcon className="h-5" />
+        </div>
+        Add To Cart
+      </button>
+    );
+  }
+
+  return (
+    <button
+      onClick={(e: React.FormEvent<HTMLButtonElement>) => {
+        if (pending) e.preventDefault();
+      }}
+      aria-label="Add to cart"
+      aria-disabled={pending}
+      className={clsx(buttonClasses, {
+        'hover:opacity-90': true,
+        disabledClasses: pending
+      })}
+    >
+      <div className="absolute left-0 ml-4">
+        {pending ? <LoadingDots className="mb-3 bg-white" /> : <PlusIcon className="h-5" />}
+      </div>
+      Add To Cart
+    </button>
+  );
+}
 
 export function AddToCart({
   product,
   variants,
   availableForSale
 }: {
+  product: Product;
   variants: ProductVariant[];
   availableForSale: boolean;
-  product: Product;
 }) {
-  const router = useRouter();
+  const [message, formAction] = useFormState(addItem, null);
   const searchParams = useSearchParams();
-  const [isPending, startTransition] = useTransition();
   const defaultVariantId = variants.length === 1 ? variants[0]?.id : product.id;
   const variant = variants.find((variant: ProductVariant) =>
     variant.selectedOptions.every(
@@ -27,46 +85,16 @@ export function AddToCart({
     )
   );
   const selectedVariantId = variant?.id || defaultVariantId;
-  const title = !availableForSale
+  const actionWithVariant = formAction.bind(null, selectedVariantId);
-    ? 'Out of stock'
-    : !selectedVariantId
-    ? 'Please select options'
-    : undefined;
 
   return (
-    <button
+    <form action={actionWithVariant}>
-      aria-label="Add item to cart"
+      <SubmitButton availableForSale={availableForSale} selectedVariantId={selectedVariantId} />
-      disabled={isPending || !availableForSale || !selectedVariantId}
+      <div className="flex items-center px-4 py-3 text-sm font-bold text-black">
-      title={title}
+        <p aria-live="polite" className="h-6" role="status">
-      onClick={() => {
+          {message}
-        // Safeguard in case someone messes with `disabled` in devtools.
+        </p>
-        if (!availableForSale || !selectedVariantId) return;
-
-        startTransition(async () => {
-          const error = await addItem(selectedVariantId);
-
-          if (error) {
-            alert(error.message); // this is not a real error, this can be also out of stock message for the user
-
-            // Example to trigger the error boundary in the root error.js
-            // throw new Error(error.toString());
-          }
-
-          router.refresh();
-        });
-      }}
-      className={clsx(
-        'relative flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white hover:opacity-90',
-        {
-          'cursor-not-allowed opacity-60 hover:opacity-60': !availableForSale || !selectedVariantId,
-          'cursor-not-allowed': isPending
-        }
-      )}
-    >
-      <div className="absolute left-0 ml-4">
-        {!isPending ? <PlusIcon className="h-5" /> : <LoadingDots className="mb-3 bg-white" />}
       </div>
-      <span>{availableForSale ? 'Add To Cart' : 'Out Of Stock'}</span>
+    </form>
-    </button>
   );
 }

components/cart/delete-item-button.tsx

@@ -1,40 +1,35 @@
-import { XMarkIcon } from '@heroicons/react/24/outline';
+'use client';
-import LoadingDots from 'components/loading-dots';
-import { useRouter } from 'next/navigation';
 
+import { XMarkIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
 import { removeItem } from 'components/cart/actions';
+import LoadingDots from 'components/loading-dots';
 import type { CartItem } from 'lib/shopware/types';
-import { useTransition } from 'react';
+import {
+  // @ts-ignore
+  experimental_useFormState as useFormState,
+  experimental_useFormStatus as useFormStatus
+} from 'react-dom';
 
-export default function DeleteItemButton({ item }: { item: CartItem }) {
+function SubmitButton() {
-  const router = useRouter();
+  const { pending } = useFormStatus();
-  const [isPending, startTransition] = useTransition();
 
   return (
     <button
-      aria-label="Remove cart item"
+      type="submit"
-      onClick={() => {
+      onClick={(e: React.FormEvent<HTMLButtonElement>) => {
-        startTransition(async () => {
+        if (pending) e.preventDefault();
-          const error = await removeItem(item.id);
-
-          if (error) {
-            // Trigger the error boundary in the root error.js
-            throw new Error(error.toString());
-          }
-
-          router.refresh();
-        });
       }}
-      disabled={isPending}
+      aria-label="Remove cart item"
+      aria-disabled={pending}
       className={clsx(
         'ease flex h-[17px] w-[17px] items-center justify-center rounded-full bg-neutral-500 transition-all duration-200',
         {
-          'cursor-not-allowed px-0': isPending
+          'cursor-not-allowed px-0': pending
         }
       )}
     >
-      {isPending ? (
+      {pending ? (
         <LoadingDots className="bg-white" />
       ) : (
         <XMarkIcon className="hover:text-accent-3 mx-[1px] h-4 w-4 text-white dark:text-black" />
@@ -42,3 +37,18 @@ export default function DeleteItemButton({ item }: { item: CartItem }) {
     </button>
   );
 }
+
+export function DeleteItemButton({ item }: { item: CartItem }) {
+  const [message, formAction] = useFormState(removeItem, null);
+  const itemId = item.id;
+  const actionWithVariant = formAction.bind(null, itemId);
+
+  return (
+    <form action={actionWithVariant}>
+      <SubmitButton />
+      <p aria-live="polite" className="sr-only" role="status">
+        {message}
+      </p>
+    </form>
+  );
+}

components/cart/edit-item-quantity-button.tsx

@@ -1,54 +1,34 @@
-import { useRouter } from 'next/navigation';
-import { useTransition } from 'react';
-
 import { MinusIcon, PlusIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
-import { removeItem, updateItemQuantity } from 'components/cart/actions';
+import { updateItemQuantity } from 'components/cart/actions';
 import LoadingDots from 'components/loading-dots';
 import type { CartItem } from 'lib/shopware/types';
+import {
+  // @ts-ignore
+  experimental_useFormState as useFormState,
+  experimental_useFormStatus as useFormStatus
+} from 'react-dom';
 
-export default function EditItemQuantityButton({
+function SubmitButton({ type }: { type: 'plus' | 'minus' }) {
-  item,
+  const { pending } = useFormStatus();
-  type
-}: {
-  item: CartItem;
-  type: 'plus' | 'minus';
-}) {
-  const router = useRouter();
-  const [isPending, startTransition] = useTransition();
 
   return (
     <button
-      aria-label={type === 'plus' ? 'Increase item quantity' : 'Reduce item quantity'}
+      type="submit"
-      onClick={() => {
+      onClick={(e: React.FormEvent<HTMLButtonElement>) => {
-        startTransition(async () => {
+        if (pending) e.preventDefault();
-          const error =
-            type === 'minus' && item.quantity - 1 === 0
-              ? await removeItem(item.id)
-              : await updateItemQuantity({
-                  lineId: item.id,
-                  variantId: item.merchandise.id,
-                  quantity: type === 'plus' ? item.quantity + 1 : item.quantity - 1
-                });
-
-          if (error) {
-            // Trigger the error boundary in the root error.js
-            throw new Error(error.toString());
-          }
-
-          router.refresh();
-        });
       }}
-      disabled={isPending}
+      aria-label={type === 'plus' ? 'Increase item quantity' : 'Reduce item quantity'}
+      aria-disabled={pending}
       className={clsx(
         'ease flex h-full min-w-[36px] max-w-[36px] flex-none items-center justify-center rounded-full px-2 transition-all duration-200 hover:border-neutral-800 hover:opacity-80',
         {
-          'cursor-not-allowed': isPending,
+          'cursor-not-allowed': pending,
           'ml-auto': type === 'minus'
         }
       )}
     >
-      {isPending ? (
+      {pending ? (
         <LoadingDots className="bg-black dark:bg-white" />
       ) : type === 'plus' ? (
         <PlusIcon className="h-4 w-4 dark:text-neutral-500" />
@@ -58,3 +38,22 @@ export default function EditItemQuantityButton({
     </button>
   );
 }
+
+export function EditItemQuantityButton({ item, type }: { item: CartItem; type: 'plus' | 'minus' }) {
+  const [message, formAction] = useFormState(updateItemQuantity, null);
+  const payload = {
+    lineId: item.id,
+    variantId: item.merchandise.id,
+    quantity: type === 'plus' ? item.quantity + 1 : item.quantity - 1
+  };
+  const actionWithVariant = formAction.bind(null, payload);
+
+  return (
+    <form action={actionWithVariant}>
+      <SubmitButton type={type} />
+      <p aria-live="polite" className="sr-only" role="status">
+        {message}
+      </p>
+    </form>
+  );
+}

components/cart/index.tsx

@@ -1,17 +1,11 @@
-import { fetchCart } from 'components/cart/actions';
+import { getCart } from 'components/cart/actions';
-import { cookies } from 'next/headers';
 import CartModal from './modal';
 import { transformCart } from 'lib/shopware/transform';
 
 export default async function Cart() {
-  let resCart;
-  const cartId = cookies().get('sw-context-token')?.value;
-
-  if (cartId) {
-    resCart = await fetchCart(cartId);
-  }
-
   let cart;
+  const resCart = await getCart();
+
   if (resCart) {
     cart = transformCart(resCart);
   }

components/cart/modal.tsx

@@ -11,8 +11,8 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { Fragment, useEffect, useRef, useState } from 'react';
 import CloseCart from './close-cart';
-import DeleteItemButton from './delete-item-button';
+import { DeleteItemButton } from './delete-item-button';
-import EditItemQuantityButton from './edit-item-quantity-button';
+import { EditItemQuantityButton } from './edit-item-quantity-button';
 import OpenCart from './open-cart';
 
 type MerchandiseSearchParams = {

components/collection/pagination.tsx

@@ -50,7 +50,7 @@ export default function Pagination({
         <li
           key={currentPage + '-prev'}
           onClick={() => handlePageClick(currentPage - 1)}
-          className="m-2 rounded-lg border border-gray-300 bg-white text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white sm:m-0 sm:mx-2"
+          className="m-2 cursor-pointer rounded-lg border border-gray-300 bg-white text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white sm:m-0 sm:mx-2"
         >
           <a
             className="ml-0 flex h-10 items-center justify-center px-4 leading-tight"
@@ -65,7 +65,7 @@ export default function Pagination({
         <li
           key={i}
           onClick={() => handlePageClick(i)}
-          className={`m-2 rounded-lg border border-gray-300 bg-white text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white sm:m-0 sm:mx-2 [&.active]:bg-gray-100${
+          className={`m-2 rounded-lg border border-gray-300 bg-white text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white sm:m-0 sm:mx-2 [&.active]:bg-gray-100 cursor-pointer${
             i === currentPage ? ' active ' : ''
           }`}
         >
@@ -85,7 +85,7 @@ export default function Pagination({
         <li
           key={currentPage + '-next'}
           onClick={() => handlePageClick(currentPage + 1)}
-          className="m-2 rounded-lg border border-gray-300 bg-white text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white sm:m-0 sm:mx-2"
+          className="m-2 cursor-pointer rounded-lg border border-gray-300 bg-white text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white sm:m-0 sm:mx-2"
         >
           <a
             className="ml-0 flex h-10 items-center justify-center px-4 leading-tight"

components/layout/navbar/search.tsx

@@ -27,6 +27,7 @@ export default function Search() {
   return (
     <form onSubmit={onSubmit} className="w-max-[550px] relative w-full lg:w-80 xl:w-full">
       <input
+        key={searchParams?.get('q')}
         type="text"
         name="search"
         placeholder="Search for products..."

components/layout/search/filter/index.tsx

@@ -19,7 +19,11 @@ export default function FilterList({ list, title }: { list: ListItem[]; title?:
   return (
     <>
       <nav>
-        {title ? <h3 className="hidden text-xs text-neutral-500 md:block">{title}</h3> : null}
+        {title ? (
+          <h3 className="hidden text-xs text-neutral-500 dark:text-neutral-400 md:block">
+            {title}
+          </h3>
+        ) : null}
         <ul className="hidden md:block">
           <FilterItemList list={list} />
         </ul>

components/product/product-description.tsx

@@ -26,7 +26,7 @@ export function ProductDescription({ product }: { product: Product }) {
 
       {product.descriptionHtml ? (
         <Prose
-          className="m-6 max-h-96 overflow-y-auto text-sm leading-tight dark:text-white/[60%]"
+          className="m-6 mt-3 max-h-96 overflow-y-auto text-sm leading-tight dark:text-white/[60%]"
           html={product.descriptionHtml}
         />
       ) : null}

lib/constants.ts

@@ -22,8 +22,10 @@ export const sorting: SortFilterItem[] = [
 
 export const TAGS = {
   collections: 'collections',
-  products: 'products'
+  products: 'products',
+  cart: 'cart'
 };
 
+// ToDo: Should work with visability from product data
 export const HIDDEN_PRODUCT_TAG = 'nextjs-frontend-hidden';
 export const DEFAULT_OPTION = 'Default Title';

package.json

@@ -21,7 +21,7 @@
   "dependencies": {
     "@headlessui/react": "^1.7.17",
     "@heroicons/react": "^2.0.18",
-    "@shopware/api-client": "0.0.0-canary-20230904132316",
+    "@shopware/api-client": "0.0.0-canary-20231024141318",
     "clsx": "^2.0.0",
     "next": "13.5.4",
     "react": "18.2.0",

pnpm-lock.yaml

@@ -12,8 +12,8 @@ dependencies:
     specifier: ^2.0.18
     version: 2.0.18(react@18.2.0)
   '@shopware/api-client':
-    specifier: 0.0.0-canary-20230904132316
+    specifier: 0.0.0-canary-20231024141318
-    version: 0.0.0-canary-20230904132316
+    version: 0.0.0-canary-20231024141318
   clsx:
     specifier: ^2.0.0
     version: 2.0.0
@@ -365,8 +365,8 @@ packages:
     resolution: {integrity: sha512-6i/8UoL0P5y4leBIGzvkZdS85RDMG9y1ihZzmTZQ5LdHUYmZ7pKFoj8X0236s3lusPs1Fa5HTQUpwI+UfTcmeA==}
     dev: true
 
-  /@shopware/api-client@0.0.0-canary-20230904132316:
+  /@shopware/api-client@0.0.0-canary-20231024141318:
-    resolution: {integrity: sha512-vE3RSoYhGkgSLozRy93aVOyUjQPrqUMliyo7zdJULJfcOYrtA4sNRq5gEINWo2GoJLkSMDirl3ZYJR//DqswFw==}
+    resolution: {integrity: sha512-zZVIvp0flHkPNRd96Orxy6RIctgCBsEOpiZMknM26W96wZDr5mWLySzJa2q0qte3zgmUEBdtDKkQSZGCKEDzMA==}
     dependencies:
       ofetch: 1.3.3
     dev: false
@@ -1096,8 +1096,8 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
-  /destr@2.0.1:
+  /destr@2.0.2:
-    resolution: {integrity: sha512-M1Ob1zPSIvlARiJUkKqvAZ3VAqQY6Jcuth/pBKQ2b1dX/Qx0OnJ8Vux6J2H5PTMQeRzWrrbTu70VxBfv/OPDJA==}
+    resolution: {integrity: sha512-65AlobnZMiCET00KaFFjUefxDX0khFA/E4myqZ7a6Sq1yZtR8+FVIvilVX66vF2uobSumxooYZChiRPCKNqhmg==}
     dev: false
 
   /detect-libc@2.0.2:
@@ -2582,8 +2582,8 @@ packages:
     resolution: {integrity: sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA==}
     dev: false
 
-  /node-fetch-native@1.4.0:
+  /node-fetch-native@1.4.1:
-    resolution: {integrity: sha512-F5kfEj95kX8tkDhUCYdV8dg3/8Olx/94zB8+ZNthFs6Bz31UpUi8Xh40TN3thLwXgrwXry1pEg9lJ++tLWTcqA==}
+    resolution: {integrity: sha512-NsXBU0UgBxo2rQLOeWNZqS3fvflWePMECr8CoSWoSTqCqGbVVsvl9vZu1HfQicYN0g5piV9Gh8RTEvo/uP752w==}
     dev: false
 
   /node-releases@2.0.13:
@@ -2716,9 +2716,9 @@ packages:
   /ofetch@1.3.3:
     resolution: {integrity: sha512-s1ZCMmQWXy4b5K/TW9i/DtiN8Ku+xCiHcjQ6/J/nDdssirrQNOoB165Zu8EqLMA2lln1JUth9a0aW9Ap2ctrUg==}
     dependencies:
-      destr: 2.0.1
+      destr: 2.0.2
-      node-fetch-native: 1.4.0
+      node-fetch-native: 1.4.1
-      ufo: 1.3.0
+      ufo: 1.3.1
     dev: false
 
   /once@1.4.0:
@@ -3798,8 +3798,8 @@ packages:
     hasBin: true
     dev: true
 
-  /ufo@1.3.0:
+  /ufo@1.3.1:
-    resolution: {integrity: sha512-bRn3CsoojyNStCZe0BG0Mt4Nr/4KF+rhFlnNXybgqt5pXHNFRlqinSoQaTrGyzE4X8aHplSb+TorH+COin9Yxw==}
+    resolution: {integrity: sha512-uY/99gMLIOlJPwATcMVYfqDSxUR9//AUcgZMzwfSTJPDKzA1S8mX4VLqa+fiAtveraQUBCz4FFcwVZBGbwBXIw==}
     dev: false
 
   /unbox-primitive@1.0.2: