@gem-sdk/pages 1.0.0

package/dist/esm/components/FacebookPixel.js

@@ -0,0 +1,39 @@
+import { jsx } from 'react/jsx-runtime';
+import { fpixel } from '@gem-sdk/core';
+import { useRouter } from 'next/router';
+import Script from 'next/script';
+import { useEffect } from 'react';
+
+const FacebookPixel = ({ pixelId }) => {
+    const router = useRouter();
+    useEffect(() => {
+        // This pageview only triggers the first time (it's important for Pixel to have real information)
+        fpixel.pageview();
+        const handleRouteChange = () => {
+            fpixel.pageview();
+        };
+        router.events.on('routeChangeComplete', handleRouteChange);
+        router.events.on('hashChangeComplete', handleRouteChange);
+        return () => {
+            router.events.off('routeChangeComplete', handleRouteChange);
+            router.events.off('hashChangeComplete', handleRouteChange);
+        };
+    }, [router.events]);
+    if (!pixelId)
+        return null;
+    return (jsx(Script, { id: "fb-pixel", strategy: "afterInteractive", dangerouslySetInnerHTML: {
+            __html: `
+            !function(f,b,e,v,n,t,s)
+            {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
+            n.callMethod.apply(n,arguments):n.queue.push(arguments)};
+            if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
+            n.queue=[];t=b.createElement(e);t.async=!0;
+            t.src=v;s=b.getElementsByTagName(e)[0];
+            s.parentNode.insertBefore(t,s)}(window, document,'script',
+            'https://connect.facebook.net/en_US/fbevents.js');
+            fbq('init', ${pixelId});
+          `,
+        } }));
+};
+
+export { FacebookPixel };

package/dist/esm/components/GoogleAnalytic.js

@@ -0,0 +1,41 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { gtag } from '@gem-sdk/core';
+import { useRouter } from 'next/router';
+import Script from 'next/script';
+import { useEffect } from 'react';
+
+const GoogleAnalytic = ({ trackingId }) => {
+    const router = useRouter();
+    useEffect(() => {
+        const handleRouteChange = (url) => {
+            gtag.pageview(url, trackingId);
+        };
+        router.events.on('routeChangeComplete', handleRouteChange);
+        router.events.on('hashChangeComplete', handleRouteChange);
+        return () => {
+            router.events.off('routeChangeComplete', handleRouteChange);
+            router.events.off('hashChangeComplete', handleRouteChange);
+        };
+    }, [trackingId, router.events]);
+    if (!trackingId)
+        return null;
+    if (trackingId.startsWith('UA-'))
+        return (jsxs(Fragment, { children: [jsx(Script, { src: "https://www.google-analytics.com/analytics.js", async: true, strategy: "afterInteractive" }), jsx(Script, { strategy: "afterInteractive", id: "google-analytics", dangerouslySetInnerHTML: {
+                        __html: `window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
+          ga('create', '${trackingId}', 'auto');
+          ga('send', 'pageview');
+            `,
+                    } })] }));
+    return (jsxs(Fragment, { children: [jsx(Script, { strategy: "afterInteractive", src: `https://www.googletagmanager.com/gtag/js?id=${trackingId}` }), jsx(Script, { id: "gtag-init", strategy: "afterInteractive", dangerouslySetInnerHTML: {
+                    __html: `
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+            gtag('config', '${trackingId}', {
+              page_path: window.location.pathname,
+            });
+          `,
+                } })] }));
+};
+
+export { GoogleAnalytic };

package/dist/esm/components/TikTokPixel.js

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import Script from 'next/script';
+
+const TikTokPixel = ({ pixelId }) => {
+    if (!pixelId)
+        return null;
+    return (jsx(Script, { id: "tiktok-pixel", strategy: "afterInteractive", dangerouslySetInnerHTML: {
+            __html: `
+        !function (w, d, t) {
+          w.TiktokAnalyticsObject=t;var ttq=w[t]=w[t]||[];ttq.methods=["page","track","identify","instances","debug","on","off","once","ready","alias","group","enableCookie","disableCookie"],ttq.setAndDefer=function(t,e){t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}};for(var i=0;i<ttq.methods.length;i++)ttq.setAndDefer(ttq,ttq.methods[i]);ttq.instance=function(t){for(var e=ttq._i[t]||[],n=0;n<ttq.methods.length;n++)ttq.setAndDefer(e,ttq.methods[n]);return e},ttq.load=function(e,n){var i="https://analytics.tiktok.com/i18n/pixel/events.js";ttq._i=ttq._i||{},ttq._i[e]=[],ttq._i[e]._u=i,ttq._t=ttq._t||{},ttq._t[e]=+new Date,ttq._o=ttq._o||{},ttq._o[e]=n||{};var o=document.createElement("script");o.type="text/javascript",o.async=!0,o.src=i+"?sdkid="+e+"&lib="+t;var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(o,a)};
+          ttq.load('${pixelId}');
+          ttq.page();
+        }(window, document, 'ttq');
+          `,
+        } }));
+};
+
+export { TikTokPixel };

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

@@ -0,0 +1,196 @@
+import { useMatchMutate, useShopStore, useBuilderPreviewStore, useSectionStore } from '@gem-sdk/core';
+import { memo, 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);
+
+export { Toolbox$1 as default };

package/dist/esm/index.js

@@ -0,0 +1,28 @@
+export { getCollectionProps } from './libs/api/get-collection-props.js';
+export { getHomePageProps } from './libs/api/get-home-page-props.js';
+export { getHomePagePropsV2 } from './libs/api/get-home-page-props-v2.js';
+export { getPreviewProps } from './libs/api/get-preview-props.js';
+export { getBuilderProps } from './libs/api/get-builder-props.js';
+export { getProductProps } from './libs/api/get-product-props.js';
+export { getStaticPageProps } from './libs/api/get-static-page-props.js';
+export { getStaticPagePropsV2 } from './libs/api/get-static-page-props-v2.js';
+export { getStaticPagePropsPreview } from './libs/api/get-static-page-props-preview.js';
+export { createFetcher, createShopifyFetcher } from './libs/fetcher.js';
+export { getLayout } from './libs/get-layout.js';
+export { genCSS } from './libs/helpers/gen-css.js';
+export { default as CollectionDetailPage } from './pages/collection-detail.js';
+export { PreviewPage } from './pages/preview.js';
+export { default as ProductDetailPage } from './pages/product-detail.js';
+export { default as StaticPage } from './pages/static.js';
+export { BuilderPage } from './pages/builder.js';
+export { StaticPageV2 } from './pages/static-v2.js';
+export { getStaticPaths } from './libs/getStaticPaths.js';
+export { getFonts } from './libs/google-fonts.js';
+export { getStorefrontApi } from './libs/get-storefront-api.js';
+export { ErrorBoundary } from './components/ErrorBoundary.js';
+export { ErrorFallback } from './components/ErrorFallback.js';
+export { Page404 } from './pages/404.js';
+export { Page500 } from './pages/500.js';
+export { GoogleAnalytic } from './components/GoogleAnalytic.js';
+export { FacebookPixel } from './components/FacebookPixel.js';
+export { TikTokPixel } from './components/TikTokPixel.js';

package/dist/esm/layouts/main.js

@@ -0,0 +1,11 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useShopStore, cls, AddOn } from '@gem-sdk/core';
+
+const MainLayout = ({ children }) => {
+    const mobileOnly = useShopStore((s) => s.mobileOnly);
+    return (jsxs(Fragment, { children: [jsx("div", { className: cls({
+                    'max-w-mobile mx-auto w-full': mobileOnly,
+                }), children: children }), jsx(AddOn, { name: "cookie-bar" }), jsx(AddOn, { name: "cart-drawer" })] }));
+};
+
+export { MainLayout as default };

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

@@ -0,0 +1,31 @@
+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,
+    });
+};
+
+export { getBuilderProps };

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

@@ -0,0 +1,62 @@
+import { CollectionDocument, PublishedThemePagesDocument, prefetchQueries } from '@gem-sdk/core';
+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,
+        },
+    });
+};
+
+export { getCollectionProps };

package/dist/esm/libs/api/get-home-page-props-v2.js

@@ -0,0 +1,125 @@
+import { PublishedThemePagesDocument, StorePropertyDocument } from '@gem-sdk/core';
+import { ShopMetaDocument } from '@gem-sdk/adapter-shopify';
+import { getFontFromGlobalStyle } from '../google-fonts.js';
+import { genCSS } from '../helpers/gen-css.js';
+import { generateManifest } from '../helpers/generate-manifres.js';
+import { getFallbackV2 } from '../helpers/get-fallback.js';
+import { parseBuilderTemplateV2 } from '../helpers/normalize.js';
+import { parseJson, serializableJson } from '../helpers/parse-json.js';
+import { captureException } from '@sentry/nextjs';
+
+const getHomePagePropsV2 = (fetcher, shopifyFetcher) => async () => {
+    try {
+        const variables = {
+            slugType: 'STATIC',
+        };
+        const [theme, storeProperty, shopifyMeta] = await Promise.allSettled([
+            fetcher([
+                PublishedThemePagesDocument,
+                variables,
+            ]),
+            fetcher([StorePropertyDocument]),
+            shopifyFetcher([ShopMetaDocument]),
+        ]);
+        if (theme.status === 'rejected') {
+            throw new Error(theme.reason?.[0]);
+        }
+        const dataBuilder = theme.value?.publishedThemePages?.[0];
+        if (!dataBuilder) {
+            throw new Error(`No data builder found for Home page`);
+        }
+        const homeTemplate = parseBuilderTemplateV2(dataBuilder);
+        const [fontStyle, fallback] = await Promise.all([
+            getFontFromGlobalStyle(dataBuilder?.pageStyle?.data),
+            getFallbackV2(fetcher, homeTemplate),
+        ]);
+        const mobileOnly = dataBuilder.isMobile ?? false;
+        const description = dataBuilder?.themePageDataSEO?.find((item) => item?.key === 'global-meta-description')?.value;
+        const thumbnail = parseJson(dataBuilder?.themePageDataSEO?.find((item) => item?.key === 'global-meta-thumbnail')?.value);
+        const shopMeta = shopifyMeta.status === 'fulfilled' ? shopifyMeta.value : undefined;
+        const shopData = storeProperty.status === 'fulfilled' ? storeProperty.value : undefined;
+        const favicon = shopData?.storeProperty?.favicon ?? '/favicon/favicon-32x32.png';
+        const seo = {
+            defaultTitle: shopMeta?.shop.name,
+            title: dataBuilder?.name ?? 'Home',
+            description: description ?? shopMeta?.shop.description,
+            openGraph: {
+                site_name: shopMeta?.shop.name,
+                locale: shopMeta?.localization.country.isoCode,
+                title: dataBuilder?.name ?? shopMeta?.shop.name,
+                description: description ?? shopMeta?.shop.description,
+                images: thumbnail ? [thumbnail] : [],
+            },
+            additionalMetaTags: [
+                {
+                    name: 'theme-color',
+                    content: '#000000',
+                },
+            ],
+            canonical: '/',
+            additionalLinkTags: [
+                {
+                    rel: 'icon',
+                    sizes: '32x32',
+                    href: `${favicon}-/crop/1:1/center/-/smart_resize/32x32/`,
+                },
+                {
+                    rel: 'icon',
+                    sizes: '16x16',
+                    href: `${favicon}-/crop/1:1/center/-/smart_resize/16x16/`,
+                },
+                {
+                    rel: 'apple-touch-icon',
+                    sizes: '180x180',
+                    href: `${favicon}-/crop/1:1/center/-/smart_resize/180x180/`,
+                },
+                {
+                    rel: 'manifest',
+                    href: generateManifest({
+                        theme_color: '#000000',
+                        background_color: '#ffffff',
+                        display: 'standalone',
+                        scope: '/',
+                        start_url: '/',
+                        name: shopMeta?.shop.name,
+                        short_name: shopMeta?.shop.name,
+                        description: shopMeta?.shop.description,
+                        icons: [
+                            {
+                                src: `${favicon}-/crop/1:1/center/-/smart_resize/192x192/`,
+                                sizes: '192x192',
+                                type: 'image/png',
+                                purpose: 'any maskable',
+                            },
+                            {
+                                src: `${favicon}-/crop/1:1/center/-/smart_resize/512x512/`,
+                                sizes: '512x512',
+                                type: 'image/png',
+                            },
+                        ],
+                    }),
+                },
+            ],
+        };
+        return serializableJson({
+            themeStyle: genCSS(dataBuilder?.pageStyle?.data, mobileOnly),
+            fontStyle,
+            builderData: homeTemplate,
+            swr: { fallback },
+            currency: shopMeta?.localization.country.currency.isoCode ?? null,
+            locale: shopMeta?.localization.country.isoCode ?? null,
+            swatches: parseJson(shopData?.storeProperty?.swatchesConfig),
+            seo,
+            mobileOnly,
+            gaTrackingId: dataBuilder.themePageAnalytic?.gaTrackingID ?? null,
+            facebookPixelId: dataBuilder.themePageAnalytic?.fbPixelID ?? null,
+            tiktokPixelId: dataBuilder.themePageAnalytic?.tiktokPixelID ?? null,
+        });
+    }
+    catch (err) {
+        captureException(err);
+        throw err;
+    }
+};
+
+export { getHomePagePropsV2 };