@shopify/hydrogen 0.22.1 → 0.25.0

package/dist/esnext/foundation/Analytics/Analytics.client.js

@@ -3,16 +3,12 @@ import { ClientAnalytics } from './ClientAnalytics';
 export function Analytics({ analyticsDataFromServer, }) {
     useEffect(() => {
         const urlParams = new URLSearchParams(window.location.search);
-        if (urlParams.has('utm_source')) {
-            ClientAnalytics.pushToPageAnalyticsData({
-                id: urlParams.get('utm_id'),
-                source: urlParams.get('utm_source'),
-                campaign: urlParams.get('utm_campaign'),
-                medium: urlParams.get('utm_medium'),
-                content: urlParams.get('utm_content'),
-                term: urlParams.get('utm_term'),
-            }, 'utm');
-        }
+        addUTMData(urlParams, 'id');
+        addUTMData(urlParams, 'source');
+        addUTMData(urlParams, 'campaign');
+        addUTMData(urlParams, 'medium');
+        addUTMData(urlParams, 'content');
+        addUTMData(urlParams, 'term');
         ClientAnalytics.pushToPageAnalyticsData(analyticsDataFromServer);
         ClientAnalytics.publish(ClientAnalytics.eventNames.PAGE_VIEW, true);
         if (analyticsDataFromServer.publishEventsOnNavigate) {
@@ -20,9 +16,15 @@ export function Analytics({ analyticsDataFromServer, }) {
                 ClientAnalytics.publish(eventName, true);
             });
         }
-        return function cleanup() {
-            ClientAnalytics.resetPageAnalyticsData();
-        };
     }, [analyticsDataFromServer]);
     return null;
 }
+function addUTMData(urlParams, key) {
+    if (urlParams.has(`utm_${key}`)) {
+        ClientAnalytics.pushToPageAnalyticsData({
+            utm: {
+                [key]: urlParams.get(`utm_${key}`),
+            },
+        });
+    }
+}

package/dist/esnext/foundation/Analytics/Analytics.server.js

@@ -3,29 +3,20 @@ import { useServerAnalytics } from './hook';
 import { Analytics as AnalyticsClient } from './Analytics.client';
 import { useServerRequest } from '../ServerRequestProvider';
 import AnalyticsErrorBoundary from '../AnalyticsErrorBoundary.client';
-const DELAY_KEY = 'analytics-delay';
+import { wrapPromise } from '../../utilities';
+const DELAY_KEY_1 = 'analytics-delay-1';
+const DELAY_KEY_2 = 'analytics-delay-2';
 export function Analytics() {
     const cache = useServerRequest().ctx.cache;
     // If render cache is empty, create a 50 ms delay so that React doesn't resolve this
     // component too early and potentially cause a mismatch in hydration
-    if (cache.size === 0 && !cache.has(DELAY_KEY)) {
-        let result;
-        let promise;
-        cache.set(DELAY_KEY, () => {
-            if (result !== undefined) {
-                return result;
-            }
-            if (!promise) {
-                promise = new Promise((resolve) => {
-                    setTimeout(() => {
-                        result = true;
-                        resolve(true);
-                    }, 50);
-                });
-            }
-            throw promise;
-        });
+    if (cache.size === 0 && !cache.has(DELAY_KEY_1)) {
+        analyticsDelay(cache, DELAY_KEY_1, 50);
     }
+    // If this delay is created, execute it
+    cache.has(DELAY_KEY_1) && cache.get(DELAY_KEY_1).read();
+    // clean up this key so that it won't be saved to the preload cache
+    cache.delete(DELAY_KEY_1);
     // Make sure all queries have returned before rendering the Analytics server component
     cache.forEach((cacheFn) => {
         if (cacheFn && typeof cacheFn === 'function') {
@@ -34,7 +25,23 @@ export function Analytics() {
                 throw result;
         }
     });
-    const analyticsData = useServerAnalytics();
+    // If all queries has returned (could be from cached queries),
+    // delay Analytic component by another 1ms (put this component
+    // to the end of the render queue) so that other scheduled
+    // render work can be processed by React's concurrent render first
+    if (cache.size > 1 && !cache.has(DELAY_KEY_2)) {
+        analyticsDelay(cache, DELAY_KEY_2, 1);
+    }
+    cache.has(DELAY_KEY_2) && cache.get(DELAY_KEY_2).read();
+    cache.delete(DELAY_KEY_2);
     return (React.createElement(AnalyticsErrorBoundary, null,
-        React.createElement(AnalyticsClient, { analyticsDataFromServer: analyticsData })));
+        React.createElement(AnalyticsClient, { analyticsDataFromServer: useServerAnalytics() })));
+}
+function analyticsDelay(cache, delayKey, delay) {
+    const delayPromise = wrapPromise(new Promise((resolve) => {
+        setTimeout(() => {
+            resolve(true);
+        }, delay);
+    }));
+    cache.set(delayKey, delayPromise);
 }

package/dist/esnext/foundation/Analytics/ClientAnalytics.d.ts

@@ -1,10 +1,11 @@
 import type { Subscriber, SubscriberFunction } from './types';
-declare function pushToPageAnalyticsData(data: any, namespace?: string): void;
+declare function pushToPageAnalyticsData(data: any): void;
 declare function getPageAnalyticsData(): any;
 declare function resetPageAnalyticsData(): void;
-declare function publish(eventname: string, guardDup?: boolean, payload?: any): void;
+declare function publish(eventname: string, guardDup?: boolean, payload?: {}): void;
 declare function subscribe(eventname: string, callbackFunction: SubscriberFunction): Subscriber;
 declare function pushToServer(init?: RequestInit, searchParam?: string): Promise<Response>;
+declare function hasSentFirstPageView(): Boolean;
 export declare const ClientAnalytics: {
     pushToPageAnalyticsData: typeof pushToPageAnalyticsData;
     getPageAnalyticsData: typeof getPageAnalyticsData;
@@ -21,5 +22,6 @@ export declare const ClientAnalytics: {
         DISCOUNT_CODE_UPDATED: string;
         PERFORMANCE: string;
     };
+    hasSentFirstPageView: typeof hasSentFirstPageView;
 };
 export {};

package/dist/esnext/foundation/Analytics/ClientAnalytics.js

@@ -1,9 +1,10 @@
-import { getNamedspacedEventname } from './utils';
+import { getNamedspacedEventname, mergeDeep } from './utils';
 import { eventNames } from './const';
 import { EVENT_PATHNAME } from '../../constants';
 import { META_ENV_SSR } from '../ssr-interop';
 const subscribers = {};
 let pageAnalyticsData = {};
+let isFirstPageViewSent = false;
 const guardDupEvents = {};
 const USAGE_ERROR = 'ClientAnalytics should only be used within the useEffect callback or event handlers';
 function isInvokedFromServer() {
@@ -13,15 +14,10 @@ function isInvokedFromServer() {
     }
     return false;
 }
-function pushToPageAnalyticsData(data, namespace) {
+function pushToPageAnalyticsData(data) {
     if (isInvokedFromServer())
         return;
-    if (namespace) {
-        pageAnalyticsData[namespace] = Object.assign({}, pageAnalyticsData[namespace] || {}, data);
-    }
-    else {
-        pageAnalyticsData = Object.assign({}, pageAnalyticsData, data);
-    }
+    pageAnalyticsData = mergeDeep(pageAnalyticsData, data);
 }
 function getPageAnalyticsData() {
     if (isInvokedFromServer())
@@ -33,12 +29,10 @@ function resetPageAnalyticsData() {
         return;
     pageAnalyticsData = {};
 }
-function publish(eventname, guardDup = false, payload) {
+function publish(eventname, guardDup = false, payload = {}) {
     if (isInvokedFromServer())
         return;
     const namedspacedEventname = getNamedspacedEventname(eventname);
-    const subs = subscribers[namedspacedEventname];
-    const combinedPayload = Object.assign({}, pageAnalyticsData, payload);
     // De-dup events due to re-renders
     if (guardDup) {
         const eventGuardTimeout = guardDupEvents[namedspacedEventname];
@@ -46,15 +40,19 @@ function publish(eventname, guardDup = false, payload) {
             clearTimeout(eventGuardTimeout);
         }
         const namespacedTimeout = setTimeout(() => {
-            publishEvent(subs, combinedPayload);
+            publishEvent(namedspacedEventname, mergeDeep(pageAnalyticsData, payload));
         }, 100);
         guardDupEvents[namedspacedEventname] = namespacedTimeout;
     }
     else {
-        publishEvent(subs, combinedPayload);
+        publishEvent(namedspacedEventname, mergeDeep(pageAnalyticsData, payload));
     }
 }
-function publishEvent(subs, payload) {
+function publishEvent(eventname, payload) {
+    const subs = subscribers[eventname];
+    if (!isFirstPageViewSent && eventname === eventNames.PAGE_VIEW) {
+        isFirstPageViewSent = true;
+    }
     if (subs) {
         Object.keys(subs).forEach((key) => {
             subs[key](payload);
@@ -86,6 +84,9 @@ function pushToServer(init, searchParam) {
         },
     }, init));
 }
+function hasSentFirstPageView() {
+    return isFirstPageViewSent;
+}
 export const ClientAnalytics = {
     pushToPageAnalyticsData,
     getPageAnalyticsData,
@@ -94,4 +95,5 @@ export const ClientAnalytics = {
     subscribe,
     pushToServer,
     eventNames,
+    hasSentFirstPageView,
 };

package/dist/esnext/foundation/Analytics/ServerAnalyticsRoute.d.ts

@@ -0,0 +1,4 @@
+import type { ResolvedHydrogenConfig } from '../../types';
+export declare function ServerAnalyticsRoute(request: Request, { hydrogenConfig }: {
+    hydrogenConfig: ResolvedHydrogenConfig;
+}): Promise<Response>;

package/dist/esnext/foundation/Analytics/ServerAnalyticsRoute.js

@@ -0,0 +1,36 @@
+import { log } from '../../utilities/log';
+export async function ServerAnalyticsRoute(request, { hydrogenConfig }) {
+    const requestHeader = request.headers;
+    const requestUrl = request.url;
+    const serverAnalyticsConnectors = hydrogenConfig.serverAnalyticsConnectors;
+    if (requestHeader.get('Content-Length') === '0') {
+        serverAnalyticsConnectors?.forEach((connector) => {
+            connector.request(requestUrl, request.headers);
+        });
+    }
+    else if (requestHeader.get('Content-Type') === 'application/json') {
+        Promise.resolve(request.json())
+            .then((data) => {
+            serverAnalyticsConnectors?.forEach((connector) => {
+                connector.request(requestUrl, requestHeader, data, 'json');
+            });
+        })
+            .catch((error) => {
+            log.warn('Fail to resolve server analytics: ', error);
+        });
+    }
+    else {
+        Promise.resolve(request.text())
+            .then((data) => {
+            serverAnalyticsConnectors?.forEach((connector) => {
+                connector.request(requestUrl, requestHeader, data, 'text');
+            });
+        })
+            .catch((error) => {
+            log.warn('Fail to resolve server analytics: ', error);
+        });
+    }
+    return new Response(null, {
+        status: 200,
+    });
+}

package/dist/esnext/foundation/Analytics/connectors/PerformanceMetrics/ServerAnalyticsConnector.d.ts

@@ -0,0 +1,3 @@
+export declare const PerformanceMetricsServerAnalyticsConnector: {
+    request(requestUrl: string, requestHeader: Headers, data?: any, contentType?: string): void;
+};

package/dist/esnext/foundation/Analytics/connectors/PerformanceMetrics/ServerAnalyticsConnector.js

@@ -0,0 +1,27 @@
+import { log } from '../../../../utilities/log';
+export const PerformanceMetricsServerAnalyticsConnector = {
+    request(requestUrl, requestHeader, data, contentType) {
+        const url = new URL(requestUrl);
+        if (url.search === '?performance' && contentType === 'json') {
+            const initTime = new Date().getTime();
+            fetch('https://monorail-edge.shopifysvc.com/v1/produce', {
+                method: 'post',
+                headers: {
+                    'content-type': 'text/plain',
+                    'x-forwarded-for': requestHeader.get('x-forwarded-for') || '',
+                    'user-agent': requestHeader.get('user-agent') || '',
+                },
+                body: JSON.stringify({
+                    schema_id: 'hydrogen_buyer_performance/2.0',
+                    payload: data,
+                    metadata: {
+                        event_created_at_ms: initTime,
+                        event_sent_at_ms: new Date().getTime(),
+                    },
+                }),
+            }).catch((err) => {
+                log.error(err);
+            });
+        }
+    },
+};

package/dist/esnext/foundation/Analytics/connectors/Shopify/ServerAnalyticsConnector.d.ts

@@ -0,0 +1,3 @@
+export declare const ShopifyServerAnalyticsConnector: {
+    request(requestUrl: string, requestHeader: Headers, data?: any, contentType?: string): void;
+};

package/dist/esnext/foundation/Analytics/connectors/Shopify/ServerAnalyticsConnector.js

@@ -0,0 +1,21 @@
+import { log } from '../../../../utilities/log';
+export const ShopifyServerAnalyticsConnector = {
+    request(requestUrl, requestHeader, data, contentType) {
+        const url = new URL(requestUrl);
+        if (url.search === '?shopify' && contentType === 'json') {
+            data.events.forEach((event) => {
+                event.payload.client_ip_address = requestHeader.get('x-forwarded-for');
+                event.payload.client_user_agent = requestHeader.get('user-agent');
+            });
+            fetch('https://monorail-edge.shopifysvc.com/unstable/produce_batch', {
+                method: 'post',
+                headers: {
+                    'content-type': 'text/plain',
+                },
+                body: JSON.stringify(data),
+            }).catch((err) => {
+                log.error(err);
+            });
+        }
+    },
+};

package/dist/esnext/foundation/Analytics/connectors/Shopify/ShopifyAnalytics.client.d.ts

@@ -0,0 +1,3 @@
+export declare function ShopifyAnalyticsClient({ cookieDomain }: {
+    cookieDomain: string;
+}): null;

package/dist/esnext/foundation/Analytics/connectors/Shopify/ShopifyAnalytics.client.js

@@ -0,0 +1,190 @@
+import { useEffect } from 'react';
+import { parse, stringify } from 'worktop/cookie';
+import { ClientAnalytics } from '../../index';
+import { buildUUID, addDataIf } from './utils';
+import { SHOPIFY_S, SHOPIFY_Y } from './const';
+const longTermLength = 60 * 60 * 24 * 360 * 2; // ~2 year expiry
+const shortTermLength = 60 * 30; // 30 mins
+const myShopifyDomain = 'myshopify.com';
+const oxygenDomain = 'myshopify.dev';
+let isInit = false;
+let microSessionCount = 0;
+export function ShopifyAnalyticsClient({ cookieDomain }) {
+    useEffect(() => {
+        try {
+            // Find Shopify cookies
+            const cookieData = parse(document.cookie);
+            const shopifyYCookie = cookieData[SHOPIFY_Y] || buildUUID();
+            const shopifySCookie = cookieData[SHOPIFY_S] || buildUUID();
+            /**
+             * Set user and session cookies and refresh the expiry time
+             */
+            updateCookie(SHOPIFY_Y, shopifyYCookie, longTermLength, cookieDomain);
+            updateCookie(SHOPIFY_S, shopifySCookie, shortTermLength, cookieDomain);
+            ClientAnalytics.pushToPageAnalyticsData({
+                shopify: {
+                    pageId: buildUUID(),
+                    userId: shopifyYCookie,
+                    sessionId: shopifySCookie,
+                },
+            });
+            microSessionCount = 0;
+            // TODO: Fix with useEvent when ready
+            // RFC: https://github.com/reactjs/rfcs/blob/useevent/text/0000-useevent.md
+            if (!isInit) {
+                isInit = true;
+                const eventNames = ClientAnalytics.eventNames;
+                ClientAnalytics.subscribe(eventNames.PAGE_VIEW, trackPageView);
+                // On a slow network, the pageview event could be already fired before
+                // we subscribed to the pageview event
+                if (ClientAnalytics.hasSentFirstPageView()) {
+                    trackPageView(ClientAnalytics.getPageAnalyticsData());
+                }
+            }
+        }
+        catch (err) {
+            // Do nothing
+        }
+    });
+    return null;
+}
+function updateCookie(cookieName, value, maxage, cookieDomain) {
+    const cookieString = stringify(cookieName, value, {
+        maxage,
+        domain: getCookieDomain(cookieDomain),
+        secure: process.env.NODE_ENV === 'production',
+        samesite: 'Lax',
+        path: '/',
+    });
+    document.cookie = cookieString;
+    return cookieString;
+}
+function getCookieDomain(cookieDomain) {
+    const hostname = location.hostname;
+    if (hostname.indexOf(myShopifyDomain) !== -1) {
+        return `.${hostname.split('.').slice(-3).join('.')}`;
+    }
+    else if (hostname.indexOf(cookieDomain) !== -1) {
+        return `.${cookieDomain}`;
+    }
+    else {
+        return '';
+    }
+}
+function trackPageView(payload) {
+    microSessionCount += 1;
+    try {
+        sendToServer(storefrontPageViewSchema(payload));
+    }
+    catch (error) {
+        console.error(`Error Shopify analytics: ${ClientAnalytics.eventNames.PAGE_VIEW}`, error);
+    }
+}
+function storefrontPageViewSchema(payload) {
+    return {
+        schema_id: 'trekkie_storefront_page_view/1.4',
+        payload: buildStorefrontPageViewPayload(payload),
+        metadata: {
+            event_created_at_ms: Date.now(),
+        },
+    };
+}
+function buildStorefrontPageViewPayload(payload) {
+    const location = document.location;
+    const shopify = payload.shopify;
+    let formattedData = {
+        appClientId: '6167201',
+        hydrogenSubchannelId: shopify.storefrontId,
+        isPersistentCookie: shopify.isPersistentCookie,
+        uniqToken: shopify.userId,
+        visitToken: shopify.sessionId,
+        microSessionId: shopify.pageId,
+        microSessionCount,
+        url: location.href,
+        path: location.pathname,
+        search: location.search,
+        referrer: document.referrer,
+        title: document.title,
+        shopId: stripGId(shopify.shopId),
+        currency: shopify.currency,
+        contentLanguage: shopify.acceptedLanguage,
+    };
+    formattedData = addDataIf({
+        isMerchantRequest: isMerchantRequest(),
+    }, formattedData);
+    formattedData = addDataIf({
+        pageType: shopify.pageType,
+    }, formattedData);
+    if (shopify.resourceId) {
+        try {
+            formattedData = addDataIf({
+                resourceType: getResourceType(shopify.resourceId),
+                resourceId: stripGId(shopify.resourceId),
+            }, formattedData);
+        }
+        catch (err) {
+            // do nothing
+        }
+    }
+    formattedData = addDataIf({
+        customerId: shopify.customerId,
+    }, formattedData);
+    return formattedData;
+}
+function isMerchantRequest() {
+    const hostname = location.hostname;
+    if (hostname.indexOf(oxygenDomain) !== -1 || hostname === 'localhost') {
+        return true;
+    }
+    return false;
+}
+function stripGId(text) {
+    return parseInt(text.substring(text.lastIndexOf('/') + 1));
+}
+function getResourceType(text) {
+    return text
+        .substring(0, text.lastIndexOf('/'))
+        .replace(/.*shopify\//, '')
+        .toLowerCase();
+}
+const BATCH_SENT_TIMEOUT = 500;
+let batchedData = [];
+let batchedTimeout;
+function sendToServer(data) {
+    batchedData.push(data);
+    if (batchedTimeout) {
+        clearTimeout(batchedTimeout);
+        batchedTimeout = null;
+    }
+    batchedTimeout = setTimeout(() => {
+        const batchedDataToBeSent = {
+            events: batchedData,
+            metadata: {
+                event_sent_at_ms: Date.now(),
+            },
+        };
+        batchedData = [];
+        batchedTimeout = null;
+        // Send to server
+        try {
+            fetch('/__event?shopify', {
+                method: 'post',
+                headers: {
+                    'cache-control': 'no-cache',
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(batchedDataToBeSent),
+            });
+        }
+        catch (error) {
+            // Fallback to client-side
+            fetch('https://monorail-edge.shopifysvc.com/unstable/produce_batch', {
+                method: 'post',
+                headers: {
+                    'content-type': 'text/plain',
+                },
+                body: JSON.stringify(batchedDataToBeSent),
+            });
+        }
+    }, BATCH_SENT_TIMEOUT);
+}

package/dist/esnext/foundation/Analytics/connectors/Shopify/ShopifyAnalytics.server.d.ts

@@ -0,0 +1,3 @@
+export declare function ShopifyAnalytics({ cookieDomain }: {
+    cookieDomain?: string;
+}): JSX.Element;

package/dist/esnext/foundation/Analytics/connectors/Shopify/ShopifyAnalytics.server.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { parse } from 'worktop/cookie';
+import AnalyticsErrorBoundary from '../../../AnalyticsErrorBoundary.client';
+import { useServerRequest } from '../../../ServerRequestProvider';
+import { useServerAnalytics } from '../../hook';
+import { useShop } from '../../../useShop';
+import { SHOPIFY_S, SHOPIFY_Y } from './const';
+import { ShopifyAnalyticsClient } from './ShopifyAnalytics.client';
+export function ShopifyAnalytics({ cookieDomain }) {
+    const { storeDomain } = useShop();
+    const request = useServerRequest();
+    const cookies = parse(request.headers.get('Cookie') || '');
+    const domain = cookieDomain || storeDomain;
+    useServerAnalytics({
+        shopify: {
+            storefrontId: globalThis.Oxygen?.env?.SHOPIFY_STOREFRONT_ID || '0',
+            acceptedLanguage: request.headers.get('Accept-Language')?.replace(/-.*/, '') || 'en',
+            isPersistentCookie: !!cookies[SHOPIFY_S] || !!cookies[SHOPIFY_Y],
+        },
+    });
+    return (React.createElement(AnalyticsErrorBoundary, null,
+        React.createElement(ShopifyAnalyticsClient, { cookieDomain: domain })));
+}

package/dist/esnext/foundation/Analytics/connectors/Shopify/const.d.ts

@@ -0,0 +1,28 @@
+export declare const SHOPIFY_Y = "_shopify_y";
+export declare const SHOPIFY_S = "_shopify_s";
+export declare const ShopifyAnalyticsConstants: {
+    pageType: {
+        article: string;
+        blog: string;
+        captcha: string;
+        cart: string;
+        collection: string;
+        customersAccount: string;
+        customersActivateAccount: string;
+        customersAddresses: string;
+        customersLogin: string;
+        customersOrder: string;
+        customersRegister: string;
+        customersResetPassword: string;
+        giftCard: string;
+        home: string;
+        listCollections: string;
+        forbidden: string;
+        notFound: string;
+        page: string;
+        password: string;
+        product: string;
+        policy: string;
+        search: string;
+    };
+};

package/dist/esnext/foundation/Analytics/connectors/Shopify/const.js

@@ -0,0 +1,51 @@
+export const SHOPIFY_Y = '_shopify_y';
+export const SHOPIFY_S = '_shopify_s';
+// Shopify analytics constants
+const article = 'article';
+const blog = 'blog';
+const captcha = 'captcha';
+const cart = 'cart';
+const collection = 'collection';
+const customersAccount = 'customers/account';
+const customersActivateAccount = 'customers/activate_account';
+const customersAddresses = 'customers/addresses';
+const customersLogin = 'customers/login';
+const customersOrder = 'customers/order';
+const customersRegister = 'customers/register';
+const customersResetPassword = 'customers/reset_password';
+const giftCard = 'gift_card';
+const home = 'index';
+const listCollections = 'list-collections';
+const forbidden = '403';
+const notFound = '404';
+const page = 'page';
+const password = 'password';
+const product = 'product';
+const policy = 'policy';
+const search = 'search';
+export const ShopifyAnalyticsConstants = {
+    pageType: {
+        article,
+        blog,
+        captcha,
+        cart,
+        collection,
+        customersAccount,
+        customersActivateAccount,
+        customersAddresses,
+        customersLogin,
+        customersOrder,
+        customersRegister,
+        customersResetPassword,
+        giftCard,
+        home,
+        listCollections,
+        forbidden,
+        notFound,
+        page,
+        password,
+        product,
+        policy,
+        search,
+    },
+};

package/dist/esnext/foundation/Analytics/connectors/Shopify/utils.d.ts

@@ -0,0 +1,3 @@
+export declare function buildUUID(): string;
+export declare function hexTime(): string;
+export declare function addDataIf(keyValuePairs: Record<string, string | number | Boolean>, formattedData: any): any;