@shopify/hydrogen 1.4.4 → 1.6.0

package/dist/esnext/foundation/Analytics/connectors/Shopify/customer-events.client.js

@@ -0,0 +1,182 @@
+import { buildUUID, addDataIf, getNavigationType, stripGId, stripId, } from './utils.js';
+import { ShopifyAnalyticsConstants, PAGE_RENDERED_EVENT_NAME, COLLECTION_PAGE_RENDERED_EVENT_NAME, PRODUCT_PAGE_RENDERED_EVENT_NAME, PRODUCT_ADDED_TO_CART_EVENT_NAME, SEARCH_SUBMITTED_EVENT_NAME, } from './const.js';
+import { flattenConnection } from '../../../../utilities/flattenConnection/index.js';
+const DOC_URL = 'https://shopify.dev/api/hydrogen/components/framework/shopifyanalytics';
+const requiredProductFields = [
+    {
+        column: 'product_gid',
+        gqlField: 'product.id',
+    },
+    {
+        column: 'variant_gid',
+        gqlField: 'variant.id',
+    },
+    {
+        column: 'name',
+        gqlField: 'product.title',
+    },
+    {
+        column: 'variant',
+        gqlField: 'variant.title',
+    },
+    {
+        column: 'brand',
+        gqlField: 'product.vendor',
+    },
+    {
+        column: 'price',
+        gqlField: 'variant.priceV2.amount',
+    },
+];
+let customerId = '';
+export function trackCustomerPageView(payload, sendToServer) {
+    const shopify = payload.shopify;
+    const canonicalUrl = shopify.canonicalPath
+        ? `${location.origin}${shopify.canonicalPath}`
+        : location.href;
+    // Only the /account/index route sets the `customerId`, so we persist this value when it's available
+    // and append it to analytics events only when a customer is in the logged in state (provided by `CartProvider`).
+    if (payload.shopify.customerId) {
+        customerId = payload.shopify.customerId;
+    }
+    sendToServer(customerEventSchema(payload, PAGE_RENDERED_EVENT_NAME, {
+        canonical_url: canonicalUrl,
+    }));
+    if (shopify.pageType === ShopifyAnalyticsConstants.pageType.product) {
+        sendToServer(customerEventSchema(payload, PRODUCT_PAGE_RENDERED_EVENT_NAME, {
+            products: formatProductsJSON(shopify.products),
+            canonical_url: canonicalUrl,
+            total_value: parseFloat(shopify.products[0].price),
+        }));
+    }
+    if (shopify.pageType === ShopifyAnalyticsConstants.pageType.collection) {
+        sendToServer(customerEventSchema(payload, COLLECTION_PAGE_RENDERED_EVENT_NAME, {
+            collection_name: shopify.collectionHandle,
+            canonical_url: canonicalUrl,
+        }));
+    }
+    if (shopify.pageType === ShopifyAnalyticsConstants.pageType.search) {
+        sendToServer(customerEventSchema(payload, SEARCH_SUBMITTED_EVENT_NAME, {
+            search_string: shopify.searchTerm,
+        }));
+    }
+}
+export function trackCustomerAddToCart(payload, sendToServer) {
+    const { totalValue, addedProducts } = getAddedProducts(payload);
+    sendToServer(customerEventSchema(payload, PRODUCT_ADDED_TO_CART_EVENT_NAME, {
+        total_value: totalValue,
+        products: formatProductsJSON(addedProducts),
+        cart_token: stripId(payload.cart.id),
+    }));
+}
+function customerEventSchema(payload, eventName, extraData) {
+    return {
+        schema_id: 'custom_storefront_customer_tracking/1.0',
+        payload: {
+            ...buildCustomerPayload(payload, extraData),
+            event_name: eventName,
+        },
+        metadata: {
+            event_created_at_ms: Date.now(),
+        },
+    };
+}
+function buildCustomerPayload(payload, extraData = {}) {
+    const location = document.location;
+    const shopify = payload.shopify;
+    const [navigation_type, navigation_api] = getNavigationType();
+    let formattedData = {
+        source: 'hydrogen',
+        shop_id: stripGId(shopify.shopId),
+        hydrogenSubchannelId: shopify.storefrontId || '0',
+        event_time: Date.now(),
+        event_id: buildUUID(),
+        unique_token: shopify.userId,
+        referrer: document.referrer,
+        event_source_url: location.href,
+        user_agent: navigator.userAgent,
+        navigation_type,
+        navigation_api,
+        currency: shopify.currency,
+        /**
+         * For now, all cookie consent management is manage by developers
+         *
+         * TO-DO: When we have access to consent api, implement is_persistent_cookie
+         *        according to the definition below
+         *
+         * It references the state of consent for GDPR protected visitors.
+         * If persistent === FALSE, it means that the merchant has set
+         * “Partially collected before consent”,  and the visitor has not consented.
+         * Until a user consents, we downgrade _shopify_y to a session cookie instead of 1yr expiry.
+         * It denotes a partially stable identifier (stable only for the length of the session,
+         * which should be until they close the browser).
+         */
+        is_persistent_cookie: true,
+        ccpa_enforced: false,
+        gdpr_enforced: false,
+    };
+    formattedData = addDataIf({
+        customer_id: shopify.isLoggedIn && stripGId(customerId),
+    }, formattedData);
+    formattedData = addDataIf(extraData, formattedData);
+    return formattedData;
+}
+function formatProductsJSON(products) {
+    if (!products || products.length === 0) {
+        throw Error(`Make sure useServerAnalytics returns "products"\n More details at ${DOC_URL}#product\n`);
+    }
+    const formattedProducts = products.map((p) => {
+        validateProductData(p, 'useServerAnalytics', 'column', 'product-page');
+        return JSON.stringify({
+            ...p,
+            product_id: stripGId(p.product_gid),
+            variant_id: stripGId(p.variant_gid),
+            quantity: Number(p.quantity || 0),
+        });
+    });
+    return formattedProducts;
+}
+function getAddedProducts(payload) {
+    const addedLines = payload.addedCartLines;
+    const cartLines = formatCartLinesByProductVariant(payload.cart.lines);
+    let totalValue = 0;
+    const addedProducts = addedLines.map((line) => {
+        const item = cartLines[line.merchandiseId];
+        totalValue += parseFloat(item.price) * (line.quantity || 0);
+        return {
+            ...item,
+            quantity: line.quantity,
+        };
+    });
+    return {
+        totalValue,
+        addedProducts,
+    };
+}
+function formatCartLinesByProductVariant(lines) {
+    const cartLines = flattenConnection(lines);
+    const cartItems = {};
+    cartLines.forEach((line) => {
+        const product = line.merchandise.product;
+        const variant = line.merchandise;
+        cartItems[line.merchandise.id] = {
+            product_gid: product.id,
+            variant_gid: variant.id,
+            name: product.title,
+            variant: variant.title,
+            brand: product.vendor,
+            category: product.productType,
+            price: variant.priceV2.amount,
+            sku: variant.sku,
+        };
+        validateProductData(cartItems[line.merchandise.id], 'cart fragment', 'gqlField', 'cart-fragment');
+    });
+    return cartItems;
+}
+function validateProductData(product, source, requireKey, docAnchor) {
+    requiredProductFields.forEach((field) => {
+        if (!product[field.column] || product[field.column] === '') {
+            throw Error(`Make sure ${source} returns "${field[requireKey]}"\n More details at ${DOC_URL}#${docAnchor}\n`);
+        }
+    });
+}

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

@@ -1,3 +1,6 @@
 export declare function buildUUID(): string;
 export declare function hexTime(): string;
+export declare function stripGId(text?: string): number;
+export declare function stripId(text?: string): string;
 export declare function addDataIf(keyValuePairs: Record<string, string | number | Boolean>, formattedData: any): any;
+export declare function getNavigationType(): any[];

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

@@ -46,6 +46,12 @@ export function hexTime() {
         .toLowerCase();
     return zeros.substr(0, 8 - output.length) + output;
 }
+export function stripGId(text = '') {
+    return parseInt(stripId(text));
+}
+export function stripId(text = '') {
+    return text.substring(text.lastIndexOf('/') + 1);
+}
 export function addDataIf(keyValuePairs, formattedData) {
     Object.entries(keyValuePairs).forEach(([key, value]) => {
         if (value) {
@@ -54,3 +60,66 @@ export function addDataIf(keyValuePairs, formattedData) {
     });
     return formattedData;
 }
+function getNavigationTypeExperimental() {
+    try {
+        const navigationEntries = performance?.getEntriesByType &&
+            performance?.getEntriesByType('navigation');
+        if (navigationEntries && navigationEntries[0]) {
+            //  https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming
+            const rawType = window.performance.getEntriesByType('navigation')[0]['type'];
+            const navType = rawType && rawType.toString();
+            return navType;
+        }
+    }
+    catch (err) {
+        // Do nothing
+    }
+    return undefined;
+}
+function getNavigationTypeLegacy() {
+    try {
+        if (PerformanceNavigation &&
+            performance?.navigation?.type !== null &&
+            performance?.navigation?.type !== undefined) {
+            //  https://developer.mozilla.org/en-US/docs/Web/API/Performance/navigation
+            const rawType = performance.navigation.type;
+            switch (rawType) {
+                case PerformanceNavigation.TYPE_NAVIGATE:
+                    return 'navigate';
+                    break;
+                case PerformanceNavigation.TYPE_RELOAD:
+                    return 'reload';
+                    break;
+                case PerformanceNavigation.TYPE_BACK_FORWARD:
+                    return 'back_forward';
+                    break;
+                default:
+                    return `unknown: ${rawType}`;
+            }
+        }
+    }
+    catch (err) {
+        // do nothing
+    }
+    return undefined;
+}
+export function getNavigationType() {
+    try {
+        let navApi = 'PerformanceNavigationTiming';
+        let navType = getNavigationTypeExperimental();
+        if (!navType) {
+            navType = getNavigationTypeLegacy();
+            navApi = 'performance.navigation';
+        }
+        if (navType) {
+            return [navType, navApi];
+        }
+        else {
+            return ['unknown', 'unknown'];
+        }
+    }
+    catch (err) {
+        // do nothing
+    }
+    return ['error', 'error'];
+}

package/dist/esnext/foundation/HydrogenRequest/HydrogenRequest.server.d.ts

@@ -50,6 +50,7 @@ export declare class HydrogenRequest extends Request {
         runtime?: RuntimeContext;
         scopes: Map<string, Record<string, any>>;
         localization?: LocalizationContextValue;
+        requestGroupID?: string;
         [key: string]: any;
         throttledRequests: Record<string, any>;
     };

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

@@ -3,13 +3,7 @@ import { hashKey } from '../../utilities/hash.js';
 import { HelmetData as HeadData } from 'react-helmet-async';
 import { RSC_PATHNAME } from '../../constants.js';
 import { parseJSON } from '../../utilities/parse.js';
-let reqCounter = 0; // For debugging
-const generateId = typeof crypto !== 'undefined' &&
-    // @ts-ignore
-    !!crypto.randomUUID
-    ? // @ts-ignore
-        () => crypto.randomUUID()
-    : () => `req${++reqCounter}`;
+import { generateUUID } from '../../utilities/random.js';
 // Stores queries by url or '*'
 const preloadCache = new Map();
 const previouslyLoadedUrls = {};
@@ -42,7 +36,7 @@ export class HydrogenRequest extends Request {
             super(getUrlFromNodeRequest(input), getInitFromNodeRequest(input));
         }
         this.time = getTime();
-        this.id = generateId();
+        this.id = generateUUID();
         this.normalizedUrl = decodeURIComponent(this.isRscRequest() ? normalizeUrl(this.url) : this.url);
         this.ctx = {
             cache: new Map(),

package/dist/esnext/framework/plugins/vite-plugin-hydrogen-rsc.js

@@ -13,10 +13,10 @@ export default function (options) {
             // Always allow the entry server (e.g. App.server.jsx) to be imported
             // in other files such as worker.js or server.js.
             source.includes(HYDROGEN_DEFAULT_SERVER_ENTRY) ||
-                /(index|entry-server|hydrogen\.config)\.[jt]s/.test(importer) ||
+                /(index|provider-helpers|entry-server|testing|hydrogen\.config)\.[jt]s/.test(importer) ||
                 // Support importing server components for testing
                 // TODO: revisit this when RSC splits into two bundles
-                /\.test\.[tj]sx?$/.test(importer));
+                /\.(test|vitest|spec)\.[tj]sx?$/.test(importer));
         },
         ...options,
     });

package/dist/esnext/hooks/useShopQuery/hooks.js

@@ -148,24 +148,28 @@ function useCreateShopRequest(body) {
     const { storeDomain, storefrontToken, storefrontApiVersion, storefrontId, privateStorefrontToken, } = useShop();
     const request = useServerRequest();
     const buyerIp = request.getBuyerIp();
+    let headers = {
+        'X-SDK-Variant': 'hydrogen',
+        'X-SDK-Version': storefrontApiVersion,
+        'content-type': 'application/json',
+    };
+    if (request.ctx.requestGroupID) {
+        headers['Custom-Storefront-Request-Group-ID'] = request.ctx.requestGroupID;
+    }
     const extraHeaders = getStorefrontApiRequestHeaders({
         buyerIp,
         publicStorefrontToken: storefrontToken,
         privateStorefrontToken,
         storefrontId,
     });
+    headers = { ...headers, ...extraHeaders };
     return {
         key: [storeDomain, storefrontApiVersion, body],
         url: `https://${storeDomain}/api/${storefrontApiVersion}/graphql.json`,
         requestInit: {
             body,
             method: 'POST',
-            headers: {
-                'X-SDK-Variant': 'hydrogen',
-                'X-SDK-Version': storefrontApiVersion,
-                'content-type': 'application/json',
-                ...extraHeaders,
-            },
+            headers,
         },
     };
 }