@gem-sdk/core 1.5.17 → 1.5.22

package/dist/esm/hooks/shop/use-products-query.js

@@ -3,12 +3,20 @@ import { getProducts } from '../../helpers/queries/get-products.js';
 import { useIsSampleProduct } from '../shop.js';
 import { useFetchHandle } from '../useFetchHandle.js';
 
-const useProductsQuery = (ids, options) => {
-    const fetcher = useFetchHandle();
-    const isSample = useIsSampleProduct();
-    return useSWR(['query/products', { ids: [...(ids ?? [])]?.sort(), isSample }], async ([, arg]) => {
-        return getProducts(fetcher, arg);
-    }, options);
+const useProductsQuery = (ids, options)=>{
+    const fetcher = useFetchHandle();
+    const isSample = useIsSampleProduct();
+    return useSWR([
+        'query/products',
+        {
+            ids: [
+                ...ids ?? []
+            ]?.sort(),
+            isSample
+        }
+    ], async ([, arg])=>{
+        return getProducts(fetcher, arg);
+    }, options);
 };
 
 export { useProductsQuery };

package/dist/esm/hooks/shop.js

@@ -2,73 +2,92 @@ import { useMemo } from 'react';
 import { useSWRConfig } from 'swr';
 import { useShopStore } from '../contexts/ShopContext.js';
 
-const useLocale = () => {
-    const locale = useShopStore((state) => state.locale);
-    const changeLocale = useShopStore((state) => state.changeLocale);
-    return useMemo(() => ({ locale, changeLocale }), [locale, changeLocale]);
-};
-const useCurrency = () => {
-    const currency = useShopStore((state) => state.currency);
-    const changeCurrency = useShopStore((state) => state.changeCurrency);
-    return useMemo(() => ({ currency, changeCurrency }), [currency, changeCurrency]);
-};
-const useSwatches = () => {
-    const swatches = useShopStore((state) => state.swatches);
-    const changeSwatches = useShopStore((state) => state.changeSwatches);
-    return useMemo(() => ({ swatches, changeSwatches }), [swatches, changeSwatches]);
-};
-const usePageType = () => {
-    const pageType = useShopStore((state) => state.pageType);
-    return useMemo(() => pageType || 'STATIC', [pageType]);
-};
-const useStoreFront = () => {
-    const provider = useShopStore((state) => state.provider);
-    const storefrontToken = useShopStore((state) => state.storefrontToken);
-    const storefrontUrl = useShopStore((state) => state.storefrontUrl);
-    return {
-        provider,
-        storefrontToken,
-        storefrontUrl,
-    };
-};
-const usePluginEnable = () => {
-    return useShopStore((state) => state.plugins);
-};
-const useEditorMode = () => {
-    return useShopStore((state) => state.mode);
-};
-const useMobileOnly = () => {
-    return useShopStore((state) => state.mobileOnly);
-};
-const useMatchMutate = () => {
-    const { cache, mutate } = useSWRConfig();
-    return (matcher, ...args) => {
-        if (!(cache instanceof Map)) {
-            throw new Error('matchMutate requires the cache provider to be a Map instance');
-        }
-        const keys = [];
-        cache.forEach((_, key) => {
-            if (matcher.test(key)) {
-                keys.push(key);
-            }
-        });
-        const mutations = keys.map((key) => mutate(key, ...args));
-        return Promise.all(mutations);
-    };
-};
-function useConnectedShopify() {
-    const { storefrontToken } = useStoreFront();
-    return !!storefrontToken;
-}
-function useIsSampleProduct() {
-    const { storefrontToken } = useStoreFront();
-    return !storefrontToken;
-}
-function useCheckoutUrl(url) {
-    const { storefrontToken } = useStoreFront();
-    if (!url)
-        return undefined;
-    return storefrontToken ? `${url}?access_token=${storefrontToken}` : url;
+const useLocale = ()=>{
+    const locale = useShopStore((state)=>state.locale);
+    const changeLocale = useShopStore((state)=>state.changeLocale);
+    return useMemo(()=>({
+            locale,
+            changeLocale
+        }), [
+        locale,
+        changeLocale
+    ]);
+};
+const useCurrency = ()=>{
+    const currency = useShopStore((state)=>state.currency);
+    const changeCurrency = useShopStore((state)=>state.changeCurrency);
+    return useMemo(()=>({
+            currency,
+            changeCurrency
+        }), [
+        currency,
+        changeCurrency
+    ]);
+};
+const useSwatches = ()=>{
+    const swatches = useShopStore((state)=>state.swatches);
+    const changeSwatches = useShopStore((state)=>state.changeSwatches);
+    return useMemo(()=>({
+            swatches,
+            changeSwatches
+        }), [
+        swatches,
+        changeSwatches
+    ]);
+};
+const usePageType = ()=>{
+    const pageType = useShopStore((state)=>state.pageType);
+    return useMemo(()=>pageType || 'STATIC', [
+        pageType
+    ]);
+};
+const useStoreFront = ()=>{
+    const provider = useShopStore((state)=>state.provider);
+    const storefrontToken = useShopStore((state)=>state.storefrontToken);
+    const storefrontUrl = useShopStore((state)=>state.storefrontUrl);
+    return {
+        provider,
+        storefrontToken,
+        storefrontUrl
+    };
+};
+const usePluginEnable = ()=>{
+    return useShopStore((state)=>state.plugins);
+};
+const useEditorMode = ()=>{
+    return useShopStore((state)=>state.mode);
+};
+const useMobileOnly = ()=>{
+    return useShopStore((state)=>state.mobileOnly);
+};
+const useMatchMutate = ()=>{
+    const { cache , mutate  } = useSWRConfig();
+    return (matcher, ...args)=>{
+        if (!(cache instanceof Map)) {
+            throw new Error('matchMutate requires the cache provider to be a Map instance');
+        }
+        const keys = [];
+        cache.forEach((_, key)=>{
+            if (matcher.test(key)) {
+                keys.push(key);
+            }
+        });
+        const mutations = keys.map((key)=>mutate(key, ...args));
+        return Promise.all(mutations);
+    };
+};
+function useConnectedShopify() {
+    const { storefrontToken  } = useStoreFront();
+    return !!storefrontToken;
+}
+function useIsSampleProduct() {
+    const { storefrontToken  } = useStoreFront();
+    return !storefrontToken;
+}
+function useCheckoutUrl(url) {
+    const { storefrontToken  } = useStoreFront();
+    if (!url) return undefined;
+    return storefrontToken ? `${url}?access_token=${storefrontToken}` : url;
 }
 
 export { useCheckoutUrl, useConnectedShopify, useCurrency, useEditorMode, useIsSampleProduct, useLocale, useMatchMutate, useMobileOnly, usePageType, usePluginEnable, useStoreFront, useSwatches };

package/dist/esm/hooks/use-current-device.js

@@ -1,21 +1,19 @@
 import { useSyncExternalStore } from 'react';
 
-function subscribe(callback) {
-    window.addEventListener('resize', callback);
-    return () => window.removeEventListener('resize', callback);
-}
-const useCurrentDevice = () => {
-    return useSyncExternalStore(subscribe, () => {
-        if (window.innerWidth < 768) {
-            return 'mobile';
-        }
-        else if (window.innerWidth >= 768 && window.innerWidth < 1024) {
-            return 'tablet';
-        }
-        else {
-            return 'desktop';
-        }
-    }, () => 'desktop');
+function subscribe(callback) {
+    window.addEventListener('resize', callback);
+    return ()=>window.removeEventListener('resize', callback);
+}
+const useCurrentDevice = ()=>{
+    return useSyncExternalStore(subscribe, ()=>{
+        if (window.innerWidth < 768) {
+            return 'mobile';
+        } else if (window.innerWidth >= 768 && window.innerWidth < 1024) {
+            return 'tablet';
+        } else {
+            return 'desktop';
+        }
+    }, ()=>'desktop');
 };
 
 export { useCurrentDevice };

package/dist/esm/hooks/use-lazy-video.js

@@ -1,13 +1,13 @@
 import { useEffect } from 'react';
 import LazyLoad from 'vanilla-lazyload';
 
-const useLazyVideo = () => {
-    useEffect(() => {
-        const lazyLoadInstance = new LazyLoad({
-            use_native: true,
-        });
-        lazyLoadInstance.update();
-    }, []);
+const useLazyVideo = ()=>{
+    useEffect(()=>{
+        const lazyLoadInstance = new LazyLoad({
+            use_native: true
+        });
+        lazyLoadInstance.update();
+    }, []);
 };
 
 export { useLazyVideo };

package/dist/esm/hooks/useCartId.js

@@ -1,32 +1,40 @@
 import { useSyncExternalStore, useCallback, useMemo } from 'react';
 
-const cartKey = 'cart-id';
-const getCartId = () => {
-    return window.localStorage.getItem(cartKey);
-};
-const writeCartId = (value) => {
-    if (value) {
-        window.localStorage.setItem(cartKey, value);
-    }
-};
-const removeCartId = () => {
-    window.localStorage.removeItem(cartKey);
-};
-const subscribeStorage = (callback) => {
-    window.addEventListener('storage', callback);
-    return () => {
-        window.removeEventListener('storage', callback);
-    };
-};
-const useCartId = () => {
-    const cartId = useSyncExternalStore(subscribeStorage, getCartId, () => undefined);
-    const updateCartId = useCallback((val) => {
-        writeCartId(val);
-    }, []);
-    const clearCartId = useCallback(() => {
-        removeCartId();
-    }, []);
-    return useMemo(() => ({ cartId, updateCartId, clearCartId }), [cartId, clearCartId, updateCartId]);
+const cartKey = 'cart-id';
+const getCartId = ()=>{
+    return window.localStorage.getItem(cartKey);
+};
+const writeCartId = (value)=>{
+    if (value) {
+        window.localStorage.setItem(cartKey, value);
+    }
+};
+const removeCartId = ()=>{
+    window.localStorage.removeItem(cartKey);
+};
+const subscribeStorage = (callback)=>{
+    window.addEventListener('storage', callback);
+    return ()=>{
+        window.removeEventListener('storage', callback);
+    };
+};
+const useCartId = ()=>{
+    const cartId = useSyncExternalStore(subscribeStorage, getCartId, ()=>undefined);
+    const updateCartId = useCallback((val)=>{
+        writeCartId(val);
+    }, []);
+    const clearCartId = useCallback(()=>{
+        removeCartId();
+    }, []);
+    return useMemo(()=>({
+            cartId,
+            updateCartId,
+            clearCartId
+        }), [
+        cartId,
+        clearCartId,
+        updateCartId
+    ]);
 };
 
 export { useCartId as default };

package/dist/esm/hooks/useCartLine.js

@@ -1,7 +1,7 @@
 import { useCartLineStore } from '../contexts/CartLineContext.js';
 
-const useCartLine = () => {
-    return useCartLineStore((s) => s.line);
+const useCartLine = ()=>{
+    return useCartLineStore((s)=>s.line);
 };
 
 export { useCartLine as default };

package/dist/esm/hooks/useCartUI.js

@@ -2,37 +2,43 @@ import { useCallback } from 'react';
 import { create } from 'zustand';
 import { usePluginEnable } from './shop.js';
 
-const useStore = create((set) => ({
-    isCartOpen: false,
-    setOpen: (isCartOpen) => {
-        const scrollBarGap = window.innerWidth - document.documentElement.clientWidth;
-        const computedBodyPaddingRight = parseInt(window.getComputedStyle(document.body).getPropertyValue('padding-right'), 10);
-        if (isCartOpen) {
-            document.body.style.overflow = `hidden`;
-            document.body.style.paddingRight = `${computedBodyPaddingRight + scrollBarGap}px`;
-        }
-        else {
-            document.body.style.overflow = '';
-            document.body.style.paddingRight = '';
-        }
-        set({ isCartOpen });
-    },
-}));
-function useCartUI() {
-    const plugins = usePluginEnable();
-    const isCartOpen = useStore((s) => s.isCartOpen);
-    const setOpen = useStore((s) => s.setOpen);
-    const openCart = useCallback(() => {
-        if (plugins?.includes('cart-drawer')) {
-            setOpen(true);
-        }
-    }, [plugins, setOpen]);
-    const closeCart = useCallback(() => setOpen(false), [setOpen]);
-    return {
-        isCartOpen,
-        openCart,
-        closeCart,
-    };
+const useStore = create((set)=>({
+        isCartOpen: false,
+        setOpen: (isCartOpen)=>{
+            const scrollBarGap = window.innerWidth - document.documentElement.clientWidth;
+            const computedBodyPaddingRight = parseInt(window.getComputedStyle(document.body).getPropertyValue('padding-right'), 10);
+            if (isCartOpen) {
+                document.body.style.overflow = `hidden`;
+                document.body.style.paddingRight = `${computedBodyPaddingRight + scrollBarGap}px`;
+            } else {
+                document.body.style.overflow = '';
+                document.body.style.paddingRight = '';
+            }
+            set({
+                isCartOpen
+            });
+        }
+    }));
+function useCartUI() {
+    const plugins = usePluginEnable();
+    const isCartOpen = useStore((s)=>s.isCartOpen);
+    const setOpen = useStore((s)=>s.setOpen);
+    const openCart = useCallback(()=>{
+        if (plugins?.includes('cart-drawer')) {
+            setOpen(true);
+        }
+    }, [
+        plugins,
+        setOpen
+    ]);
+    const closeCart = useCallback(()=>setOpen(false), [
+        setOpen
+    ]);
+    return {
+        isCartOpen,
+        openCart,
+        closeCart
+    };
 }
 
 export { useCartUI as default };

package/dist/esm/hooks/useCollection.js

@@ -1,7 +1,7 @@
 import { useCollectionStore } from '../contexts/CollectionContext.js';
 
-const useCollection = () => {
-    return useCollectionStore((s) => s.collection);
+const useCollection = ()=>{
+    return useCollectionStore((s)=>s.collection);
 };
 
 export { useCollection };

package/dist/esm/hooks/useFetchHandle.js

@@ -1,11 +1,11 @@
 import { useSWRConfig } from 'swr';
 
-const useFetchHandle = () => {
-    const { fetcher } = useSWRConfig();
-    if (!fetcher) {
-        throw new Error('Application must be init within a fetcher');
-    }
-    return fetcher;
+const useFetchHandle = ()=>{
+    const { fetcher  } = useSWRConfig();
+    if (!fetcher) {
+        throw new Error('Application must be init within a fetcher');
+    }
+    return fetcher;
 };
 
 export { useFetchHandle };

package/dist/esm/hooks/useFormatMoney.js

@@ -1,13 +1,17 @@
 import { useCallback } from 'react';
 import { useLocale } from './shop.js';
 
-const useFormatMoney = () => {
-    const { locale } = useLocale();
-    const formatMoney = useCallback((value, options) => new Intl.NumberFormat(locale, {
-        style: 'currency',
-        ...options,
-    }).format(value), [locale]);
-    return { formatMoney };
+const useFormatMoney = ()=>{
+    const { locale  } = useLocale();
+    const formatMoney = useCallback((value, options)=>new Intl.NumberFormat(locale, {
+            style: 'currency',
+            ...options
+        }).format(value), [
+        locale
+    ]);
+    return {
+        formatMoney
+    };
 };
 
 export { useFormatMoney as default };

package/dist/esm/hooks/useIsomorphicLayoutEffect.js

@@ -1,6 +1,6 @@
 import { useLayoutEffect } from 'react';
 
-// const isBrowser = typeof window !== 'undefined';
+// const isBrowser = typeof window !== 'undefined';
 const useIsomorphicLayoutEffect = useLayoutEffect;
 
 export { useIsomorphicLayoutEffect as default };

package/dist/esm/hooks/useLoadScript.js

@@ -1,26 +1,28 @@
 import { useState, useEffect } from 'react';
 import { loadScript } from '../helpers/load-script.js';
 
-/**
- * The `useLoadScript` hook loads an external script tag on the client-side.
- */
-function useLoadScript(url, options) {
-    const [status, setStatus] = useState('loading');
-    const stringifiedOptions = JSON.stringify(options);
-    useEffect(() => {
-        async function loadScriptWrapper() {
-            try {
-                setStatus('loading');
-                await loadScript(url, options);
-                setStatus('done');
-            }
-            catch (error) {
-                setStatus('error');
-            }
-        }
-        loadScriptWrapper();
-    }, [url, stringifiedOptions, options]);
-    return status;
+/**
+ * The `useLoadScript` hook loads an external script tag on the client-side.
+ */ function useLoadScript(url, options) {
+    const [status, setStatus] = useState('loading');
+    const stringifiedOptions = JSON.stringify(options);
+    useEffect(()=>{
+        async function loadScriptWrapper() {
+            try {
+                setStatus('loading');
+                await loadScript(url, options);
+                setStatus('done');
+            } catch (error) {
+                setStatus('error');
+            }
+        }
+        loadScriptWrapper();
+    }, [
+        url,
+        stringifiedOptions,
+        options
+    ]);
+    return status;
 }
 
 export { useLoadScript as default };

package/dist/esm/hooks/useMoney.js

@@ -1,48 +1,65 @@
 import { useMemo } from 'react';
 import { useLocale, useCurrency } from './shop.js';
 
-const NARROW_SYMBOL_MAP = {
-    USD: '$',
-    AUD: '$',
-    CAD: '$',
-    NZD: '$',
-    EUR: '€',
-    GBP: '£',
-    INR: '₹',
-    RUB: '₽',
-    CNY: '¥',
-    JPY: '¥',
-    BRL: 'R$',
-};
-const useMoney = (money) => {
-    const { locale } = useLocale();
-    const { currency } = useCurrency();
-    const options = useMemo(() => ({ style: 'currency', currency: currency }), [currency]);
-    const value = useMemo(() => new Intl.NumberFormat(locale, options).format(money), [locale, options, money]);
-    const baseParts = new Intl.NumberFormat(locale, options).formatToParts(money);
-    const nameParts = new Intl.NumberFormat(locale, {
-        ...options,
-        currencyDisplay: 'name',
-    }).formatToParts(money);
-    const narrowParts = new Intl.NumberFormat(locale, {
-        ...options,
-        currencyDisplay: 'narrowSymbol',
-    }).formatToParts(money);
-    const moneyValue = useMemo(() => ({
-        currencyCode: currency,
-        currencyName: nameParts.find((part) => part.type === 'currency')?.value ?? // e.g. "US dollars"
-            currency,
-        currencyNarrowSymbol: narrowParts.find((part) => part.type === 'currency')?.value ?? // e.g. "$"
-            (currency ? NARROW_SYMBOL_MAP[currency] : '') ??
-            '',
-        parts: baseParts,
-        localizedString: value,
-        amount: baseParts
-            .filter((part) => ['decimal', 'fraction', 'group', 'integer', 'literal'].includes(part.type))
-            .map((part) => part.value)
-            .join(''),
-    }), [baseParts, nameParts, narrowParts, value, currency]);
-    return moneyValue;
+const NARROW_SYMBOL_MAP = {
+    USD: '$',
+    AUD: '$',
+    CAD: '$',
+    NZD: '$',
+    EUR: '€',
+    GBP: '£',
+    INR: '₹',
+    RUB: '₽',
+    CNY: '¥',
+    JPY: '¥',
+    BRL: 'R$'
+};
+const useMoney = (money)=>{
+    const { locale  } = useLocale();
+    const { currency  } = useCurrency();
+    const options = useMemo(()=>({
+            style: 'currency',
+            currency: currency
+        }), [
+        currency
+    ]);
+    const value = useMemo(()=>new Intl.NumberFormat(locale, options).format(money), [
+        locale,
+        options,
+        money
+    ]);
+    const baseParts = new Intl.NumberFormat(locale, options).formatToParts(money);
+    const nameParts = new Intl.NumberFormat(locale, {
+        ...options,
+        currencyDisplay: 'name'
+    }).formatToParts(money);
+    const narrowParts = new Intl.NumberFormat(locale, {
+        ...options,
+        currencyDisplay: 'narrowSymbol'
+    }).formatToParts(money);
+    const moneyValue = useMemo(()=>({
+            currencyCode: currency,
+            currencyName: nameParts.find((part)=>part.type === 'currency')?.value ?? // e.g. "US dollars"
+            currency,
+            currencyNarrowSymbol: narrowParts.find((part)=>part.type === 'currency')?.value ?? // e.g. "$"
+            (currency ? NARROW_SYMBOL_MAP[currency] : '') ?? '',
+            parts: baseParts,
+            localizedString: value,
+            amount: baseParts.filter((part)=>[
+                    'decimal',
+                    'fraction',
+                    'group',
+                    'integer',
+                    'literal'
+                ].includes(part.type)).map((part)=>part.value).join('')
+        }), [
+        baseParts,
+        nameParts,
+        narrowParts,
+        value,
+        currency
+    ]);
+    return moneyValue;
 };
 
 export { useMoney as default };

package/dist/esm/hooks/usePrevious.js

@@ -1,15 +1,17 @@
 import { useRef, useEffect } from 'react';
 
-const usePrevious = (value) => {
-    // The ref object is a generic container whose current property is mutable ...
-    // ... and can hold any value, similar to an instance property on a class
-    const ref = useRef();
-    // Store current value in ref
-    useEffect(() => {
-        ref.current = value;
-    }, [value]); // Only re-run if value changes
-    // Return previous value (happens before update in useEffect above)
-    return ref.current;
+const usePrevious = (value)=>{
+    // The ref object is a generic container whose current property is mutable ...
+    // ... and can hold any value, similar to an instance property on a class
+    const ref = useRef();
+    // Store current value in ref
+    useEffect(()=>{
+        ref.current = value;
+    }, [
+        value
+    ]); // Only re-run if value changes
+    // Return previous value (happens before update in useEffect above)
+    return ref.current;
 };
 
 export { usePrevious };