@gem-sdk/pages 1.0.0

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

@@ -0,0 +1,135 @@
+'use strict';
+
+var core = require('@gem-sdk/core');
+var adapterShopify = require('@gem-sdk/adapter-shopify');
+var googleFonts = require('../google-fonts.js');
+var genCss = require('../helpers/gen-css.js');
+var generateManifres = require('../helpers/generate-manifres.js');
+var normalize = require('../helpers/normalize.js');
+var parseJson = require('../helpers/parse-json.js');
+
+const getHomePageProps = (fetcher, shopifyFetcher) => async () => {
+    const pageType = 'STATIC';
+    const variables = {
+        slugType: pageType,
+    };
+    // const theme = await fetcher<PublishedThemePagesQueryResponse, PublishedThemePagesQueryVariables>([
+    //   PublishedThemePagesDocument,
+    //   variables,
+    // ]);
+    const [theme, storeProperty, shopifyMeta] = await Promise.allSettled([
+        fetcher([
+            core.PublishedThemePagesDocument,
+            variables,
+        ]),
+        fetcher([core.StorePropertyDocument]),
+        shopifyFetcher([adapterShopify.ShopMetaDocument]),
+    ]);
+    if (theme.status === 'rejected') {
+        return {
+            pageType,
+        };
+    }
+    const dataBuilder = theme.value.publishedThemePages?.[0];
+    const homeTemplate = normalize.parseBuilderTemplate(dataBuilder);
+    const fontStyle = await googleFonts.getFontFromGlobalStyle(dataBuilder?.pageStyle?.data);
+    const queries = core.prefetchQueries(homeTemplate);
+    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;
+    }, {});
+    const description = dataBuilder?.themePageDataSEO?.find((item) => item?.key === 'global-meta-description')?.value;
+    const thumbnail = parseJson.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: generateManifres.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 parseJson.serializableJson({
+        themeStyle: genCss.genCSS(dataBuilder?.pageStyle?.data),
+        fontStyle,
+        builderData: homeTemplate,
+        pageType,
+        swr: { fallback },
+        currency: shopMeta?.localization.country.currency.isoCode ?? null,
+        locale: shopMeta?.localization.country.isoCode ?? null,
+        swatches: parseJson.parseJson(shopData?.storeProperty?.swatchesConfig),
+        seo,
+    });
+};
+
+exports.getHomePageProps = getHomePageProps;

package/dist/cjs/libs/api/get-preview-props.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var getCollectionProps = require('./get-collection-props.js');
+var getProductProps = require('./get-product-props.js');
+var getStaticPageProps = require('./get-static-page-props.js');
+
+const getPreviewProps = (fetcher, shopifyFetcher) => async (pageType, slug) => {
+    switch (pageType) {
+        case 'COLLECTION':
+            return getCollectionProps.getCollectionProps(fetcher)(slug);
+        case 'PRODUCT':
+            return getProductProps.getProductProps(fetcher)(slug);
+        default:
+            return getStaticPageProps.getStaticPageProps(fetcher, shopifyFetcher)(slug);
+    }
+};
+
+exports.getPreviewProps = getPreviewProps;

package/dist/cjs/libs/api/get-product-props.js

@@ -0,0 +1,71 @@
+'use strict';
+
+var core = require('@gem-sdk/core');
+var genCss = require('../helpers/gen-css.js');
+var normalize = require('../helpers/normalize.js');
+var parseJson = require('../helpers/parse-json.js');
+
+const getProductProps = (fetcher) => async (handle) => {
+    const pageType = 'PRODUCT';
+    const variables = {
+        slug: handle,
+        slugType: pageType,
+    };
+    const [product, theme] = await Promise.all([
+        core.getProductBySlug(fetcher, handle),
+        fetcher([
+            core.PublishedThemePagesDocument,
+            variables,
+        ]),
+    ]);
+    const dataBuilder = theme.publishedThemePages?.[0];
+    if (!product || !dataBuilder) {
+        throw new Error('Product not found');
+    }
+    const productTemplate = normalize.parseBuilderTemplate(dataBuilder);
+    const queries = core.prefetchQueries(productTemplate);
+    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 parseJson.serializableJson({
+        builderData: productTemplate,
+        themeStyle: genCss.genCSS(dataBuilder.pageStyle?.data),
+        pageType,
+        swr: { fallback },
+        seo: {
+            title: product.title,
+            description: product.description,
+            openGraph: {
+                images: product.featuredImage?.src
+                    ? [
+                        {
+                            url: product.featuredImage.src,
+                            alt: product.featuredImage?.alt,
+                            height: product.featuredImage?.height,
+                            width: product.featuredImage?.width,
+                            type: product.featuredImage?.contentType,
+                        },
+                    ]
+                    : [],
+            },
+        },
+        product,
+    });
+};
+
+exports.getProductProps = getProductProps;

package/dist/cjs/libs/api/get-static-page-props-preview.js

@@ -0,0 +1,133 @@
+'use strict';
+
+var core = require('@gem-sdk/core');
+var adapterShopify = require('@gem-sdk/adapter-shopify');
+var nextjs = require('@sentry/nextjs');
+var googleFonts = require('../google-fonts.js');
+var genCss = require('../helpers/gen-css.js');
+var generateManifres = require('../helpers/generate-manifres.js');
+var getFallback = require('../helpers/get-fallback.js');
+var normalize = require('../helpers/normalize.js');
+var parseJson = require('../helpers/parse-json.js');
+
+const getStaticPagePropsPreview = (fetcher, shopifyFetcher) => async (slug) => {
+    try {
+        const pageType = 'STATIC';
+        const variables = {
+            handleURL: slug,
+            pageType,
+        };
+        const [theme, storeProperty, shopifyMeta] = await Promise.allSettled([
+            fetcher([
+                core.PreviewPageDocument,
+                variables,
+                'previewPage',
+            ]),
+            fetcher([core.StorePropertyDocument]),
+            shopifyFetcher([adapterShopify.ShopMetaDocument]),
+        ]);
+        if (theme.status === 'rejected') {
+            throw new Error(theme.reason?.[0]);
+        }
+        const dataBuilder = theme.value.previewPage;
+        if (!dataBuilder) {
+            throw new Error(`No data builder found for slug: /preview/${slug}`);
+        }
+        const pageTemplate = normalize.parseBuilderTemplateV2(dataBuilder);
+        const [fontStyle, fallback] = await Promise.all([
+            googleFonts.getFontFromGlobalStyle(dataBuilder?.pageStyle?.data),
+            getFallback.getFallbackV2(fetcher, pageTemplate),
+        ]);
+        const mobileOnly = dataBuilder.isMobile ?? false;
+        const description = dataBuilder?.themePageDataSEO?.find((item) => item?.key === 'global-meta-description')?.value;
+        const thumbnail = parseJson.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,
+            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] : [],
+            },
+            nofollow: true,
+            noindex: true,
+            canonical: `/preview/${slug}`,
+            additionalMetaTags: [
+                {
+                    name: 'theme-color',
+                    content: '#000000',
+                },
+            ],
+            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: generateManifres.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 parseJson.serializableJson({
+            themeStyle: genCss.genCSS(dataBuilder?.pageStyle?.data, mobileOnly),
+            fontStyle,
+            builderData: pageTemplate,
+            pageType,
+            currency: shopMeta?.localization.country.currency.isoCode ?? null,
+            locale: shopMeta?.localization.country.isoCode ?? null,
+            swr: { fallback },
+            swatches: parseJson.parseJson(shopData?.storeProperty?.swatchesConfig),
+            seo,
+            mobileOnly,
+            gaTrackingId: dataBuilder.themePageAnalytic?.gaTrackingID ?? null,
+            facebookPixelId: dataBuilder.themePageAnalytic?.fbPixelID ?? null,
+            tiktokPixelId: dataBuilder.themePageAnalytic?.tiktokPixelID ?? null,
+        });
+    }
+    catch (err) {
+        nextjs.captureException(err);
+        throw err;
+    }
+};
+
+exports.getStaticPagePropsPreview = getStaticPagePropsPreview;

package/dist/cjs/libs/api/get-static-page-props-v2.js

@@ -0,0 +1,130 @@
+'use strict';
+
+var core = require('@gem-sdk/core');
+var adapterShopify = require('@gem-sdk/adapter-shopify');
+var googleFonts = require('../google-fonts.js');
+var genCss = require('../helpers/gen-css.js');
+var generateManifres = require('../helpers/generate-manifres.js');
+var getFallback = require('../helpers/get-fallback.js');
+var normalize = require('../helpers/normalize.js');
+var parseJson = require('../helpers/parse-json.js');
+var nextjs = require('@sentry/nextjs');
+
+const getStaticPagePropsV2 = (fetcher, shopifyFetcher) => async (slug) => {
+    try {
+        const pageType = 'STATIC';
+        const variables = {
+            slug,
+            slugType: pageType,
+        };
+        const [theme, storeProperty, shopifyMeta] = await Promise.allSettled([
+            fetcher([
+                core.PublishedThemePagesDocument,
+                variables,
+            ]),
+            fetcher([core.StorePropertyDocument]),
+            shopifyFetcher([adapterShopify.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 slug: /${slug}`);
+        }
+        const pageTemplate = normalize.parseBuilderTemplateV2(dataBuilder);
+        const [fontStyle, fallback] = await Promise.all([
+            googleFonts.getFontFromGlobalStyle(dataBuilder?.pageStyle?.data),
+            getFallback.getFallbackV2(fetcher, pageTemplate),
+        ]);
+        const mobileOnly = dataBuilder.isMobile ?? false;
+        const description = dataBuilder?.themePageDataSEO?.find((item) => item?.key === 'global-meta-description')?.value;
+        const thumbnail = parseJson.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,
+            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] : [],
+            },
+            canonical: `/${slug}`,
+            additionalMetaTags: [
+                {
+                    name: 'theme-color',
+                    content: '#000000',
+                },
+            ],
+            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: generateManifres.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 parseJson.serializableJson({
+            themeStyle: genCss.genCSS(dataBuilder?.pageStyle?.data, mobileOnly),
+            fontStyle,
+            builderData: pageTemplate,
+            pageType,
+            currency: shopMeta?.localization.country.currency.isoCode ?? null,
+            locale: shopMeta?.localization.country.isoCode ?? null,
+            swr: { fallback },
+            swatches: parseJson.parseJson(shopData?.storeProperty?.swatchesConfig),
+            seo,
+            mobileOnly,
+            gaTrackingId: dataBuilder.themePageAnalytic?.gaTrackingID ?? null,
+            facebookPixelId: dataBuilder.themePageAnalytic?.fbPixelID ?? null,
+            tiktokPixelId: dataBuilder.themePageAnalytic?.tiktokPixelID ?? null,
+        });
+    }
+    catch (err) {
+        nextjs.captureException(err);
+        throw err;
+    }
+};
+
+exports.getStaticPagePropsV2 = getStaticPagePropsV2;

package/dist/cjs/libs/api/get-static-page-props.js

@@ -0,0 +1,132 @@
+'use strict';
+
+var core = require('@gem-sdk/core');
+var adapterShopify = require('@gem-sdk/adapter-shopify');
+var googleFonts = require('../google-fonts.js');
+var genCss = require('../helpers/gen-css.js');
+var generateManifres = require('../helpers/generate-manifres.js');
+var normalize = require('../helpers/normalize.js');
+var parseJson = require('../helpers/parse-json.js');
+
+const getStaticPageProps = (fetcher, shopifyFetcher) => async (slug) => {
+    const pageType = 'STATIC';
+    const variables = {
+        slug,
+        slugType: pageType,
+    };
+    const [theme, storeProperty, shopifyMeta] = await Promise.allSettled([
+        fetcher([
+            core.PublishedThemePagesDocument,
+            variables,
+        ]),
+        fetcher([core.StorePropertyDocument]),
+        shopifyFetcher([adapterShopify.ShopMetaDocument]),
+    ]);
+    if (theme.status === 'rejected') {
+        return {
+            pageType,
+        };
+    }
+    const dataBuilder = theme.value.publishedThemePages?.[0];
+    const pageTemplate = normalize.parseBuilderTemplate(dataBuilder);
+    const fontStyle = await googleFonts.getFontFromGlobalStyle(dataBuilder?.pageStyle?.data);
+    const queries = core.prefetchQueries(pageTemplate);
+    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;
+    }, {});
+    const description = dataBuilder?.themePageDataSEO?.find((item) => item?.key === 'global-meta-description')?.value;
+    const thumbnail = parseJson.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 ?? '',
+        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: `/${slug}`,
+        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: generateManifres.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 parseJson.serializableJson({
+        themeStyle: genCss.genCSS(dataBuilder?.pageStyle?.data),
+        fontStyle,
+        builderData: pageTemplate,
+        pageType,
+        currency: shopMeta?.localization.country.currency.isoCode ?? null,
+        locale: shopMeta?.localization.country.isoCode ?? null,
+        swr: { fallback },
+        swatches: parseJson.parseJson(shopData?.storeProperty?.swatchesConfig),
+        seo,
+    });
+};
+
+exports.getStaticPageProps = getStaticPageProps;