@gem-sdk/pages 1.5.7 → 1.5.23

package/dist/esm/components/builder/Toolbox.js

@@ -1,196 +1,223 @@
-import { useMatchMutate, useShopStore, useBuilderPreviewStore, useSectionStore } from '@gem-sdk/core';
-import { memo, useCallback, useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { useMatchMutate, useShopStore, useBuilderPreviewStore, useSectionStore, cls } from '@gem-sdk/core';
+import { memo, useState, useCallback, useEffect } from 'react';
 import { createFontUrl } from '../../libs/google-fonts.js';
 import { genCSS } from '../../libs/helpers/gen-css.js';
 import { getStorefrontApi } from '../../libs/get-storefront-api.js';
 
-const globalStyleId = 'global-style';
-const globalFontId = 'google-font-builder';
-const Toolbox = () => {
-    const matchMutate = useMatchMutate();
-    const provider = useShopStore((s) => s.provider);
-    const changeStorefrontInfo = useShopStore((s) => s.changeStorefrontInfo);
-    const initState = useBuilderPreviewStore((s) => s.initState);
-    const initNormalizeState = useBuilderPreviewStore((s) => s.forceChangeState);
-    const changeItemPropByKey = useBuilderPreviewStore((s) => s.changeItemPropByKey);
-    const addItem = useBuilderPreviewStore((s) => s.addItem);
-    const moveItem = useBuilderPreviewStore((s) => s.moveItem);
-    const removeItem = useBuilderPreviewStore((s) => s.removeItem);
-    const addSection = useSectionStore((s) => s.addSection);
-    const changeSwatches = useShopStore((s) => s.changeSwatches);
-    // Revalidate all query with key match query/
-    const onRevalidateQuery = useCallback(() => {
-        matchMutate(/query\//);
-    }, [matchMutate]);
-    // Update shop info
-    const onChangeShopInfo = useCallback((e) => {
-        const detail = e.detail;
-        changeStorefrontInfo({
-            url: detail.shopHandle ? getStorefrontApi(detail.shopHandle, provider) : undefined,
-            token: detail.shopToken,
-        });
-    }, [changeStorefrontInfo, provider]);
-    const onChangeGlobalStyle = useCallback((e) => {
-        const detail = e.detail;
-        try {
-            if (detail.data) {
-                const themeStyle = genCSS(detail.data, detail.mobileOnly);
-                const font = Object.entries(detail.data?.font).map(([, value]) => {
-                    return value;
-                });
-                const fontUrl = createFontUrl(font);
-                const globalStyle = document.getElementById(globalStyleId);
-                const googleFont = document.getElementById(globalFontId);
-                if (googleFont) {
-                    googleFont.getAttribute('href') !== fontUrl && googleFont.setAttribute('href', fontUrl);
-                    //
-                }
-                else {
-                    const link = document.createElement('link');
-                    link.id = globalFontId;
-                    link.href = fontUrl;
-                    link.rel = 'stylesheet';
-                    document.head.appendChild(link);
-                }
-                if (globalStyle) {
-                    globalStyle.innerHTML = themeStyle;
-                }
-                else {
-                    const style = document.createElement('style');
-                    style.id = globalStyleId;
-                    style.innerHTML = themeStyle;
-                    document.head.appendChild(style);
-                }
-            }
-        }
-        catch {
-            //
-        }
-    }, []);
-    // Init builder data
-    const onInitBuilder = useCallback((e) => {
-        try {
-            const detail = e.detail;
-            if (detail.data) {
-                if (detail.type === 'flat') {
-                    initNormalizeState(detail.data);
-                }
-                else {
-                    initState(detail.data);
-                }
-            }
-        }
-        catch {
-            //
-        }
-    }, [initNormalizeState, initState]);
-    // Add new entity
-    const onAddEntity = useCallback((e) => {
-        try {
-            const detail = e.detail;
-            if (detail.entity) {
-                addItem({
-                    data: detail.entity,
-                    id: detail.id,
-                    position: detail.position,
-                    type: detail.type ?? 'component',
-                });
-                if (detail?.type === 'section' && !Array.isArray(detail.entity)) {
-                    addSection(detail.entity.uid, detail.entity);
-                }
-            }
-        }
-        catch {
-            //
-        }
-    }, [addItem, addSection]);
-    // Update props of entity
-    const onUpdateEntityProp = useCallback((e) => {
-        try {
-            const detail = e.detail;
-            if (detail.uid && detail.propName) {
-                changeItemPropByKey({
-                    id: detail.uid,
-                    key: detail.propName,
-                    data: detail.propValue,
-                    group: detail.group,
-                });
-            }
-        }
-        catch {
-            //
-        }
-    }, [changeItemPropByKey]);
-    // Move entity
-    const onMoveEntity = useCallback((e) => {
-        try {
-            const detail = e.detail;
-            if (detail.to && detail.uid) {
-                moveItem(detail.uid, detail.to, Number(detail.position) ?? 0);
-            }
-        }
-        catch {
-            //
-        }
-    }, [moveItem]);
-    // Remove entity
-    const onRemoveEntity = useCallback((e) => {
-        try {
-            const detail = e.detail;
-            if (detail.uid) {
-                removeItem(detail.uid);
-            }
-        }
-        catch {
-            //
-        }
-    }, [removeItem]);
-    // Change Swatches Data
-    const onChangeSwatchesData = useCallback((e) => {
-        const detail = e.detail;
-        try {
-            if (detail.data) {
-                changeSwatches(detail.data);
-            }
-        }
-        catch {
-            //
-        }
-    }, [changeSwatches]);
-    useEffect(() => {
-        window.addEventListener('update-shop-info', onChangeShopInfo);
-        window.addEventListener('revalidate-query', onRevalidateQuery);
-        window.addEventListener('init-builder', onInitBuilder);
-        window.addEventListener('add-entity', onAddEntity);
-        window.addEventListener('remove-entity', onRemoveEntity);
-        window.addEventListener('move-entity', onMoveEntity);
-        window.addEventListener('update-entity-prop', onUpdateEntityProp);
-        window.addEventListener('set-global-style', onChangeGlobalStyle);
-        window.addEventListener('update-global-swatches-data', onChangeSwatchesData);
-        return () => {
-            window.removeEventListener('update-shop-info', onChangeShopInfo);
-            window.removeEventListener('revalidate-query', onRevalidateQuery);
-            window.removeEventListener('init-builder', onInitBuilder);
-            window.removeEventListener('add-entity', onAddEntity);
-            window.removeEventListener('remove-entity', onRemoveEntity);
-            window.removeEventListener('move-entity', onMoveEntity);
-            window.removeEventListener('update-entity-prop', onUpdateEntityProp);
-            window.removeEventListener('set-global-style', onChangeGlobalStyle);
-            window.removeEventListener('update-global-swatches-data', onChangeSwatchesData);
-        };
-    }, [
-        onAddEntity,
-        onUpdateEntityProp,
-        onInitBuilder,
-        onMoveEntity,
-        onRemoveEntity,
-        onChangeGlobalStyle,
-        onChangeSwatchesData,
-        onRevalidateQuery,
-        onChangeShopInfo,
-    ]);
-    return null;
-};
-var Toolbox$1 = memo(Toolbox);
+const globalStyleId = 'global-style';
+const globalFontId = 'google-font-builder';
+const Toolbox = ()=>{
+    const matchMutate = useMatchMutate();
+    const provider = useShopStore((s)=>s.provider);
+    const changeStorefrontInfo = useShopStore((s)=>s.changeStorefrontInfo);
+    const initState = useBuilderPreviewStore((s)=>s.initState);
+    const initNormalizeState = useBuilderPreviewStore((s)=>s.forceChangeState);
+    const changeItemPropByKey = useBuilderPreviewStore((s)=>s.changeItemPropByKey);
+    const addItem = useBuilderPreviewStore((s)=>s.addItem);
+    const moveItem = useBuilderPreviewStore((s)=>s.moveItem);
+    const removeItem = useBuilderPreviewStore((s)=>s.removeItem);
+    const addSection = useSectionStore((s)=>s.addSection);
+    const changeSwatches = useShopStore((s)=>s.changeSwatches);
+    const changeLayoutSettings = useShopStore((s)=>s.changeLayoutSettings);
+    const [initEventSuccess, setInitEventSuccess] = useState(false);
+    // Revalidate all query with key match query/
+    const onRevalidateQuery = useCallback(()=>{
+        matchMutate(/query\//);
+    }, [
+        matchMutate
+    ]);
+    // Update shop info
+    const onChangeShopInfo = useCallback((e)=>{
+        const detail = e.detail;
+        changeStorefrontInfo({
+            url: detail.shopHandle ? getStorefrontApi(detail.shopHandle, provider) : undefined,
+            token: detail.shopToken
+        });
+    }, [
+        changeStorefrontInfo,
+        provider
+    ]);
+    const onChangeGlobalStyle = useCallback((e)=>{
+        const detail = e.detail;
+        try {
+            if (detail.data) {
+                const themeStyle = genCSS(detail.data, detail.mobileOnly);
+                const font = Object.entries(detail.data?.font).map(([, value])=>{
+                    return value;
+                });
+                const fontUrl = createFontUrl(font);
+                const globalStyle = document.getElementById(globalStyleId);
+                const googleFont = document.getElementById(globalFontId);
+                if (googleFont) {
+                    googleFont.getAttribute('href') !== fontUrl && googleFont.setAttribute('href', fontUrl);
+                //
+                } else {
+                    const link = document.createElement('link');
+                    link.id = globalFontId;
+                    link.href = fontUrl;
+                    link.rel = 'stylesheet';
+                    document.head.appendChild(link);
+                }
+                if (globalStyle) {
+                    globalStyle.innerHTML = themeStyle;
+                } else {
+                    const style = document.createElement('style');
+                    style.id = globalStyleId;
+                    style.innerHTML = themeStyle;
+                    document.head.appendChild(style);
+                }
+            }
+        } catch  {
+        //
+        }
+    }, []);
+    // Init builder data
+    const onInitBuilder = useCallback((e)=>{
+        try {
+            const detail = e.detail;
+            if (detail.data) {
+                if (detail.type === 'flat') {
+                    initNormalizeState(detail.data);
+                } else {
+                    initState(detail.data);
+                }
+            }
+        } catch  {
+        //
+        }
+    }, [
+        initNormalizeState,
+        initState
+    ]);
+    // Add new entity
+    const onAddEntity = useCallback((e)=>{
+        try {
+            const detail = e.detail;
+            if (detail.entity) {
+                addItem({
+                    data: detail.entity,
+                    id: detail.id,
+                    position: detail.position,
+                    type: detail.type ?? 'component'
+                });
+                if (detail?.type === 'section' && !Array.isArray(detail.entity)) {
+                    addSection(detail.entity.uid, detail.entity);
+                }
+            }
+        } catch  {
+        //
+        }
+    }, [
+        addItem,
+        addSection
+    ]);
+    // Update props of entity
+    const onUpdateEntityProp = useCallback((e)=>{
+        try {
+            const detail = e.detail;
+            if (detail.uid && detail.propName) {
+                changeItemPropByKey({
+                    id: detail.uid,
+                    key: detail.propName,
+                    data: detail.propValue,
+                    group: detail.group
+                });
+            }
+        } catch  {
+        //
+        }
+    }, [
+        changeItemPropByKey
+    ]);
+    // Move entity
+    const onMoveEntity = useCallback((e)=>{
+        try {
+            const detail = e.detail;
+            if (detail.to && detail.uid) {
+                moveItem(detail.uid, detail.to, Number(detail.position) ?? 0);
+            }
+        } catch  {
+        //
+        }
+    }, [
+        moveItem
+    ]);
+    // Remove entity
+    const onRemoveEntity = useCallback((e)=>{
+        try {
+            const detail = e.detail;
+            if (detail.uid) {
+                removeItem(detail.uid);
+            }
+        } catch  {
+        //
+        }
+    }, [
+        removeItem
+    ]);
+    // Change Swatches Data
+    const onChangeSwatchesData = useCallback((e)=>{
+        const detail = e.detail;
+        try {
+            if (detail.data) {
+                changeSwatches(detail.data);
+            }
+        } catch  {
+        //
+        }
+    }, [
+        changeSwatches
+    ]);
+    const onChangeLayoutSettingData = useCallback((e)=>{
+        const detail = e.detail;
+        if (!detail) return;
+        changeLayoutSettings(detail);
+    }, [
+        changeLayoutSettings
+    ]);
+    useEffect(()=>{
+        window.addEventListener('update-shop-info', onChangeShopInfo);
+        window.addEventListener('revalidate-query', onRevalidateQuery);
+        window.addEventListener('init-builder', onInitBuilder);
+        window.addEventListener('add-entity', onAddEntity);
+        window.addEventListener('remove-entity', onRemoveEntity);
+        window.addEventListener('move-entity', onMoveEntity);
+        window.addEventListener('update-entity-prop', onUpdateEntityProp);
+        window.addEventListener('set-global-style', onChangeGlobalStyle);
+        window.addEventListener('update-global-swatches-data', onChangeSwatchesData);
+        window.addEventListener('on-off-header-footer', onChangeLayoutSettingData);
+        setInitEventSuccess(true);
+        return ()=>{
+            window.removeEventListener('update-shop-info', onChangeShopInfo);
+            window.removeEventListener('revalidate-query', onRevalidateQuery);
+            window.removeEventListener('init-builder', onInitBuilder);
+            window.removeEventListener('add-entity', onAddEntity);
+            window.removeEventListener('remove-entity', onRemoveEntity);
+            window.removeEventListener('move-entity', onMoveEntity);
+            window.removeEventListener('update-entity-prop', onUpdateEntityProp);
+            window.removeEventListener('set-global-style', onChangeGlobalStyle);
+            window.removeEventListener('update-global-swatches-data', onChangeSwatchesData);
+            window.addEventListener('on-off-header-footer', onChangeLayoutSettingData);
+        };
+    }, [
+        onAddEntity,
+        onUpdateEntityProp,
+        onInitBuilder,
+        onMoveEntity,
+        onRemoveEntity,
+        onChangeGlobalStyle,
+        onChangeSwatchesData,
+        onRevalidateQuery,
+        onChangeShopInfo,
+        onChangeLayoutSettingData
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        className: cls({
+            "toolbox": initEventSuccess
+        })
+    });
+};
+var Toolbox$1 = /*#__PURE__*/ memo(Toolbox);
 
 export { Toolbox$1 as default };

package/dist/esm/layouts/main.js

@@ -2,11 +2,25 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useShopStore, cls, AddOn } from '@gem-sdk/core';
 import { parseHtml } from '../libs/parse-html.js';
 
-const MainLayout = ({ children, ...props }) => {
-    const mobileOnly = useShopStore((s) => s.mobileOnly);
-    return (jsxs(Fragment, { children: [parseHtml(props?.customCodeBody), jsx("div", { className: cls({
-                    'max-w-mobile mx-auto w-full': mobileOnly,
-                }), children: children }), jsx(AddOn, { name: "cookie-bar" }), jsx(AddOn, { name: "cart-drawer" })] }));
+const MainLayout = ({ children , ...props })=>{
+    const mobileOnly = useShopStore((s)=>s.mobileOnly);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            parseHtml(props?.customCodeBody),
+            /*#__PURE__*/ jsx("div", {
+                className: cls({
+                    'max-w-mobile mx-auto w-full': mobileOnly
+                }),
+                children: children
+            }),
+            /*#__PURE__*/ jsx(AddOn, {
+                name: "cookie-bar"
+            }),
+            /*#__PURE__*/ jsx(AddOn, {
+                name: "cart-drawer"
+            })
+        ]
+    });
 };
 
 export { MainLayout as default };

package/dist/esm/libs/api/get-builder-props.js

@@ -2,30 +2,32 @@ import { StorePropertyDocument } from '@gem-sdk/core';
 import { ShopMetaDocument } from '@gem-sdk/adapter-shopify';
 import { serializableJson, parseJson } from '../helpers/parse-json.js';
 
-const getBuilderProps = async (fetcher, shopifyFetcher) => {
-    const [storeProperty, shopifyMeta] = await Promise.allSettled([
-        fetcher([StorePropertyDocument]),
-        shopifyFetcher([ShopMetaDocument]),
-    ]);
-    const shopMeta = shopifyMeta.status === 'fulfilled' ? shopifyMeta.value : undefined;
-    const shopData = storeProperty.status === 'fulfilled' ? storeProperty.value : undefined;
-    const seo = shopMeta
-        ? {
-            titleTemplate: `%s | ${shopMeta.shop.name}`,
-            defaultTitle: shopMeta?.shop.name,
-            title: 'Preview',
-            description: shopMeta?.shop.description,
-        }
-        : {};
-    return serializableJson({
-        currency: shopMeta?.localization.country.currency.isoCode ?? null,
-        locale: shopMeta?.localization.country.isoCode ?? null,
-        swatches: parseJson(shopData?.storeProperty?.swatchesConfig),
-        swr: {
-            revalidateOnMount: true,
-        },
-        seo,
-    });
+const getBuilderProps = async (fetcher, shopifyFetcher)=>{
+    const [storeProperty, shopifyMeta] = await Promise.allSettled([
+        fetcher([
+            StorePropertyDocument
+        ]),
+        shopifyFetcher([
+            ShopMetaDocument
+        ])
+    ]);
+    const shopMeta = shopifyMeta.status === 'fulfilled' ? shopifyMeta.value : undefined;
+    const shopData = storeProperty.status === 'fulfilled' ? storeProperty.value : undefined;
+    const seo = shopMeta ? {
+        titleTemplate: `%s | ${shopMeta.shop.name}`,
+        defaultTitle: shopMeta?.shop.name,
+        title: 'Preview',
+        description: shopMeta?.shop.description
+    } : {};
+    return serializableJson({
+        currency: shopMeta?.localization.country.currency.isoCode ?? null,
+        locale: shopMeta?.localization.country.isoCode ?? null,
+        swatches: parseJson(shopData?.storeProperty?.swatchesConfig),
+        swr: {
+            revalidateOnMount: true
+        },
+        seo
+    });
 };
 
 export { getBuilderProps };

package/dist/esm/libs/api/get-collection-props.js

@@ -3,60 +3,64 @@ import { genCSS } from '../helpers/gen-css.js';
 import { parseBuilderTemplate } from '../helpers/normalize.js';
 import { serializableJson } from '../helpers/parse-json.js';
 
-const getCollectionProps = (fetcher) => async (handle) => {
-    const pageType = 'COLLECTION';
-    const variables = {
-        slug: handle,
-        slugType: pageType,
-    };
-    const [collectionData, theme] = await Promise.all([
-        fetcher([
-            CollectionDocument,
-            {
-                handle,
-            },
-        ]),
-        fetcher([
-            PublishedThemePagesDocument,
-            variables,
-        ]),
-    ]);
-    const dataBuilder = theme.publishedThemePages?.[0];
-    const collectionTemplate = parseBuilderTemplate(dataBuilder);
-    if (!collectionData || !collectionData?.collection || !dataBuilder) {
-        throw new Error('Collection not found');
-    }
-    const { collection } = collectionData;
-    const queries = prefetchQueries(collectionTemplate);
-    const datas = await Promise.allSettled(queries.map(({ query, variables, func }) => {
-        if (func) {
-            return func(fetcher, variables);
-        }
-        if (query)
-            return fetcher([query, variables]);
-        return {};
-    }));
-    const fallback = queries.reduce((acc, { key }, index) => {
-        const res = datas[index];
-        if (res?.status === 'fulfilled') {
-            return {
-                ...acc,
-                [key]: res.value,
-            };
-        }
-        return acc;
-    }, {});
-    return serializableJson({
-        builderData: collectionTemplate,
-        collection,
-        pageType,
-        themeStyle: genCSS(dataBuilder.pageStyle?.data),
-        swr: { fallback },
-        seo: {
-            title: collection.title,
-            description: collection.description,
-        },
-    });
-};
+const getCollectionProps = (fetcher)=>async (handle)=>{
+        const pageType = 'COLLECTION';
+        const variables = {
+            slug: handle,
+            slugType: pageType
+        };
+        const [collectionData, theme] = await Promise.all([
+            fetcher([
+                CollectionDocument,
+                {
+                    handle
+                }
+            ]),
+            fetcher([
+                PublishedThemePagesDocument,
+                variables
+            ])
+        ]);
+        const dataBuilder = theme.publishedThemePages?.[0];
+        const collectionTemplate = parseBuilderTemplate(dataBuilder);
+        if (!collectionData || !collectionData?.collection || !dataBuilder) {
+            throw new Error('Collection not found');
+        }
+        const { collection  } = collectionData;
+        const queries = prefetchQueries(collectionTemplate);
+        const datas = await Promise.allSettled(queries.map(({ query , variables , func  })=>{
+            if (func) {
+                return func(fetcher, variables);
+            }
+            if (query) return fetcher([
+                query,
+                variables
+            ]);
+            return {};
+        }));
+        const fallback = queries.reduce((acc, { key  }, index)=>{
+            const res = datas[index];
+            if (res?.status === 'fulfilled') {
+                return {
+                    ...acc,
+                    [key]: res.value
+                };
+            }
+            return acc;
+        }, {});
+        return serializableJson({
+            builderData: collectionTemplate,
+            collection,
+            pageType,
+            themeStyle: genCSS(dataBuilder.pageStyle?.data),
+            swr: {
+                fallback
+            },
+            seo: {
+                title: collection.title,
+                description: collection.description
+            }
+        });
+    };
 
 export { getCollectionProps };