@shopify/hydrogen 0.17.2 → 0.17.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 0.17.3
+
+### Patch Changes
+
+- [#1096](https://github.com/Shopify/hydrogen/pull/1096) [`0a15376e`](https://github.com/Shopify/hydrogen/commit/0a15376ec806054ddd5848d9dbfa6e50a85beb49) Thanks [@wizardlyhel](https://github.com/wizardlyhel)! - Make performance data available with ClientAnalytics and optional for developers to include
+
+* [#1209](https://github.com/Shopify/hydrogen/pull/1209) [`d0dada0a`](https://github.com/Shopify/hydrogen/commit/d0dada0a0b3170d2cb885d2f29bbbef0c6d9e9e4) Thanks [@blittle](https://github.com/blittle)! - Make metafields optional within the ProductProvider. Fixes #1127
+
 ## 0.17.2
 
 ### Patch Changes

package/dist/esnext/client.d.ts

@@ -11,3 +11,5 @@ export { useRouteParams } from './foundation/useRouteParams/useRouteParams';
 export { useNavigate } from './foundation/useNavigate/useNavigate';
 export { fetchSync } from './foundation/fetchSync/client/fetchSync';
 export { suspendFunction, preloadFunction } from './utilities/suspense';
+export { PerformanceMetrics } from './foundation/Analytics/connectors/PerformanceMetrics/PerformanceMetrics.client';
+export { PerformanceMetricsDebug } from './foundation/Analytics/connectors/PerformanceMetrics/PerformanceMetricsDebug.client';

package/dist/esnext/client.js

@@ -11,3 +11,5 @@ export { useRouteParams } from './foundation/useRouteParams/useRouteParams';
 export { useNavigate } from './foundation/useNavigate/useNavigate';
 export { fetchSync } from './foundation/fetchSync/client/fetchSync';
 export { suspendFunction, preloadFunction } from './utilities/suspense';
+export { PerformanceMetrics } from './foundation/Analytics/connectors/PerformanceMetrics/PerformanceMetrics.client';
+export { PerformanceMetricsDebug } from './foundation/Analytics/connectors/PerformanceMetrics/PerformanceMetricsDebug.client';

package/dist/esnext/components/ProductProvider/ProductProvider.client.js

@@ -8,7 +8,7 @@ import { ProductOptionsProvider } from './ProductOptionsProvider.client';
  * this component can use the `useProduct` hook.
  */
 export function ProductProvider({ children, data: product, initialVariantId, }) {
-    const metafields = useParsedMetafields(product.metafields);
+    const metafields = useParsedMetafields(product.metafields || {});
     // @ts-expect-error The types here are broken on main, need to come back and fix them sometime
     const providerValue = useMemo(() => {
         return {

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

@@ -19,6 +19,7 @@ export declare const ClientAnalytics: {
         REMOVE_FROM_CART: string;
         UPDATE_CART: string;
         DISCOUNT_CODE_UPDATED: string;
+        PERFORMANCE: string;
     };
 };
 export {};

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

@@ -78,7 +78,13 @@ function subscribe(eventname, callbackFunction) {
     };
 }
 function pushToServer(init, searchParam) {
-    return fetch(`${EVENT_PATHNAME}${searchParam ? `?${searchParam}` : ''}`, init);
+    return fetch(`${EVENT_PATHNAME}${searchParam ? `?${searchParam}` : ''}`, Object.assign({
+        method: 'post',
+        headers: {
+            'cache-control': 'no-cache',
+            'Content-Type': 'application/json',
+        },
+    }, init));
 }
 export const ClientAnalytics = {
     pushToPageAnalyticsData,

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

@@ -0,0 +1,7 @@
+declare global {
+    interface Window {
+        BOOMR: any;
+        BOOMR_onload: any;
+    }
+}
+export declare function PerformanceMetrics(): null;

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

@@ -0,0 +1,64 @@
+import { useEffect } from 'react';
+import { loadScript } from '../../../../utilities';
+import { ClientAnalytics } from '../../index';
+import { useShop } from '../../../useShop';
+const URL = 'https://cdn.shopify.com/shopifycloud/boomerang/shopify-boomerang-hydrogen.min.js';
+export function PerformanceMetrics() {
+    const { storeDomain } = useShop();
+    useEffect(() => {
+        try {
+            (function () {
+                if (window.BOOMR &&
+                    (window.BOOMR.version || window.BOOMR.snippetExecuted)) {
+                    return;
+                }
+                // Executes only on first mount
+                window.BOOMR = window.BOOMR || {};
+                window.BOOMR.hydrogenPerformanceEvent = (data) => {
+                    ClientAnalytics.publish(ClientAnalytics.eventNames.PERFORMANCE, true, data);
+                    ClientAnalytics.pushToServer({
+                        body: JSON.stringify(data),
+                    }, ClientAnalytics.eventNames.PERFORMANCE);
+                };
+                window.BOOMR.storeDomain = storeDomain;
+                function boomerangSaveLoadTime(e) {
+                    window.BOOMR_onload = (e && e.timeStamp) || Date.now();
+                }
+                // @ts-ignore
+                function boomerangInit(e) {
+                    e.detail.BOOMR.init();
+                    e.detail.BOOMR.t_end = Date.now();
+                }
+                if (window.addEventListener) {
+                    window.addEventListener('load', boomerangSaveLoadTime, false);
+                    // @ts-ignore
+                }
+                else if (window.attachEvent) {
+                    // @ts-ignore
+                    window.attachEvent('onload', boomerangSaveLoadTime);
+                }
+                if (document.addEventListener) {
+                    document.addEventListener('onBoomerangLoaded', boomerangInit);
+                    // @ts-ignore
+                }
+                else if (document.attachEvent) {
+                    // @ts-ignore
+                    document.attachEvent('onpropertychange', function (e) {
+                        if (!e)
+                            e = event;
+                        if (e.propertyName === 'onBoomerangLoaded')
+                            boomerangInit(e);
+                    });
+                }
+            })();
+            loadScript(URL).catch(() => {
+                // ignore if boomerang doesn't load
+                // most likely because of an ad blocker
+            });
+        }
+        catch (err) {
+            // Do nothing
+        }
+    }, [storeDomain]);
+    return null;
+}

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

@@ -0,0 +1 @@
+export declare function request(request: Request, data?: any, contentType?: string): void;

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

@@ -0,0 +1,24 @@
+export function request(request, data, contentType) {
+    const url = new URL(request.url);
+    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': request.headers.get('x-forwarded-for') || '',
+                'user-agent': request.headers.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((error) => {
+            // send to bugsnag? oxygen?
+        });
+    }
+}

package/dist/esnext/foundation/Analytics/connectors/PerformanceMetrics/PerformanceMetricsDebug.client.d.ts

@@ -0,0 +1 @@
+export declare function PerformanceMetricsDebug(): null;

package/dist/esnext/foundation/Analytics/connectors/PerformanceMetrics/PerformanceMetricsDebug.client.js

@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+import { ClientAnalytics } from '../../index';
+const PAD = 10;
+let isInit = false;
+export function PerformanceMetricsDebug() {
+    useEffect(() => {
+        if (!isInit) {
+            isInit = true;
+            ClientAnalytics.subscribe(ClientAnalytics.eventNames.PERFORMANCE, (data) => {
+                console.group(`Performance - ${data.page_load_type} load`);
+                logMetricIf('TTFB:', data.response_start - data.navigation_start);
+                logMetricIf('FCP:', data.first_contentful_paint);
+                logMetricIf('LCP:', data.largest_contentful_paint);
+                logMetricIf('Duration:', data.response_end - data.navigation_start);
+                console.groupEnd();
+            });
+        }
+    });
+    return null;
+}
+function logMetricIf(lable, data) {
+    data && console.log(`${lable.padEnd(PAD)}${Math.round(data)} ms`);
+}

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

@@ -5,4 +5,5 @@ export declare const eventNames: {
     REMOVE_FROM_CART: string;
     UPDATE_CART: string;
     DISCOUNT_CODE_UPDATED: string;
+    PERFORMANCE: string;
 };

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

@@ -5,4 +5,5 @@ export const eventNames = {
     REMOVE_FROM_CART: 'remove-from-cart',
     UPDATE_CART: 'update-cart',
     DISCOUNT_CODE_UPDATED: 'discount-code-updated',
+    PERFORMANCE: 'performance',
 };

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

@@ -1,15 +1,12 @@
 import React, { cloneElement } from 'react';
 import { useServerRequest } from '../ServerRequestProvider';
 import { matchPath } from '../../utilities/matchPath';
-import { Boomerang } from '../Boomerang/Boomerang.client';
 import { RouteParamsProvider } from '../useRouteParams/RouteParamsProvider.client';
-import { useServerAnalytics } from '../Analytics';
 /**
  * The `Route` component is used to set up a route in Hydrogen that's independent of the file system. Routes are
  * matched in the order that they're defined.
  */
 export function Route({ path, page }) {
-    var _a;
     const request = useServerRequest();
     const { routeRendered, serverProps } = request.ctx.router;
     if (routeRendered)
@@ -25,13 +22,7 @@ export function Route({ path, page }) {
     if (match) {
         request.ctx.router.routeRendered = true;
         request.ctx.router.routeParams = match.params;
-        const name = (_a = page === null || page === void 0 ? void 0 : page.type) === null || _a === void 0 ? void 0 : _a.name;
-        useServerAnalytics({
-            templateName: name,
-        });
-        return (React.createElement(RouteParamsProvider, { routeParams: match.params },
-            cloneElement(page, { params: match.params || {}, ...serverProps }),
-            name ? React.createElement(Boomerang, { pageTemplate: name }) : null));
+        return (React.createElement(RouteParamsProvider, { routeParams: match.params }, cloneElement(page, { params: match.params || {}, ...serverProps })));
     }
     return null;
 }

package/dist/esnext/hooks/useParsedMetafields/useParsedMetafields.js

@@ -7,8 +7,6 @@ import { flattenConnection, parseMetafieldValue } from '../../utilities';
 export function useParsedMetafields(
 /** A [MetafieldConnection](https://shopify.dev/api/storefront/reference/common-objects/metafieldconnection). */
 metafields) {
-    var _a, _b;
-    (_b = (_a = metafields === null || metafields === void 0 ? void 0 : metafields.edges) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.node;
     return useMemo(() => {
         if (!metafields) {
             throw new Error(`'useParsedMetafields' needs metafields`);

package/dist/esnext/index.d.ts

@@ -15,6 +15,7 @@ export { CartQuery } from './components/CartProvider/cart-queries';
 export { generateCacheControlHeader, NoStore, CacheSeconds, CacheMinutes, CacheHours, CacheDays, CacheWeeks, CacheMonths, CacheCustom, } from './framework/CachingStrategy';
 export { fetchSync } from './foundation/fetchSync/server/fetchSync';
 export { useServerAnalytics } from './foundation/Analytics';
+export * as PerformanceMetricsServerAnalyticsConnector from './foundation/Analytics/connectors/PerformanceMetrics/PerformanceMetrics.server';
 export { useSession } from './foundation/useSession/useSession';
 export { CookieSessionStorage } from './foundation/CookieSessionStorage/CookieSessionStorage';
 export { MemorySessionStorage } from './foundation/MemorySessionStorage/MemorySessionStorage';

package/dist/esnext/index.js

@@ -19,6 +19,7 @@ export { CartQuery } from './components/CartProvider/cart-queries';
 export { generateCacheControlHeader, NoStore, CacheSeconds, CacheMinutes, CacheHours, CacheDays, CacheWeeks, CacheMonths, CacheCustom, } from './framework/CachingStrategy';
 export { fetchSync } from './foundation/fetchSync/server/fetchSync';
 export { useServerAnalytics } from './foundation/Analytics';
+export * as PerformanceMetricsServerAnalyticsConnector from './foundation/Analytics/connectors/PerformanceMetrics/PerformanceMetrics.server';
 export { useSession } from './foundation/useSession/useSession';
 export { CookieSessionStorage } from './foundation/CookieSessionStorage/CookieSessionStorage';
 export { MemorySessionStorage } from './foundation/MemorySessionStorage/MemorySessionStorage';

package/dist/esnext/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "0.17.2";
+export declare const LIB_VERSION = "0.17.3";

package/dist/esnext/version.js

@@ -1 +1 @@
-export const LIB_VERSION = '0.17.2';
+export const LIB_VERSION = '0.17.3';

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

@@ -19,6 +19,7 @@ export declare const ClientAnalytics: {
         REMOVE_FROM_CART: string;
         UPDATE_CART: string;
         DISCOUNT_CODE_UPDATED: string;
+        PERFORMANCE: string;
     };
 };
 export {};

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

@@ -81,7 +81,13 @@ function subscribe(eventname, callbackFunction) {
     };
 }
 function pushToServer(init, searchParam) {
-    return fetch(`${constants_1.EVENT_PATHNAME}${searchParam ? `?${searchParam}` : ''}`, init);
+    return fetch(`${constants_1.EVENT_PATHNAME}${searchParam ? `?${searchParam}` : ''}`, Object.assign({
+        method: 'post',
+        headers: {
+            'cache-control': 'no-cache',
+            'Content-Type': 'application/json',
+        },
+    }, init));
 }
 exports.ClientAnalytics = {
     pushToPageAnalyticsData,

package/dist/node/foundation/Analytics/const.d.ts

@@ -5,4 +5,5 @@ export declare const eventNames: {
     REMOVE_FROM_CART: string;
     UPDATE_CART: string;
     DISCOUNT_CODE_UPDATED: string;
+    PERFORMANCE: string;
 };

package/dist/node/foundation/Analytics/const.js

@@ -8,4 +8,5 @@ exports.eventNames = {
     REMOVE_FROM_CART: 'remove-from-cart',
     UPDATE_CART: 'update-cart',
     DISCOUNT_CODE_UPDATED: 'discount-code-updated',
+    PERFORMANCE: 'performance',
 };

package/dist/node/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "0.17.2";
+export declare const LIB_VERSION = "0.17.3";

package/dist/node/version.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LIB_VERSION = void 0;
-exports.LIB_VERSION = '0.17.2';
+exports.LIB_VERSION = '0.17.3';

package/package.json

@@ -7,7 +7,7 @@
   "engines": {
     "node": ">=14"
   },
-  "version": "0.17.2",
+  "version": "0.17.3",
   "description": "Modern custom Shopify storefronts",
   "license": "MIT",
   "main": "dist/esnext/index.js",

package/dist/esnext/foundation/Boomerang/Boomerang.client.d.ts

@@ -1,9 +0,0 @@
-declare global {
-    interface Window {
-        BOOMR: any;
-        BOOMR_onload: any;
-    }
-}
-export declare function Boomerang({ pageTemplate }: {
-    pageTemplate: string | null;
-}): null;

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

@@ -1,66 +0,0 @@
-import { useEffect } from 'react';
-import { loadScript } from '../../utilities';
-import { useShop } from '../useShop';
-const URL = 'https://cdn.shopify.com/shopifycloud/boomerang/shopify-boomerang-hydrogen.min.js';
-export function Boomerang({ pageTemplate }) {
-    const { storeDomain } = useShop();
-    const templateName = pageTemplate && pageTemplate !== null
-        ? pageTemplate.toLowerCase()
-        : 'not-set';
-    useEffect(() => {
-        (function () {
-            function boomerangAddVar() {
-                if (window.BOOMR && window.BOOMR.addVar) {
-                    window.BOOMR.addVar('page_template', templateName);
-                }
-            }
-            // Executes on every mount
-            boomerangAddVar();
-            if (window.BOOMR &&
-                (window.BOOMR.version || window.BOOMR.snippetExecuted)) {
-                return;
-            }
-            // Executes only on first mount
-            window.BOOMR = window.BOOMR || {};
-            window.BOOMR.storeDomain = storeDomain;
-            window.BOOMR.pageTemplate = templateName;
-            function boomerangSaveLoadTime(e) {
-                window.BOOMR_onload = (e && e.timeStamp) || Date.now();
-            }
-            // @ts-ignore
-            function boomerangInit(e) {
-                e.detail.BOOMR.init({
-                    producer_url: 'https://monorail-edge.shopifysvc.com/v1/produce',
-                });
-                e.detail.BOOMR.t_end = Date.now();
-                boomerangAddVar();
-            }
-            if (window.addEventListener) {
-                window.addEventListener('load', boomerangSaveLoadTime, false);
-                // @ts-ignore
-            }
-            else if (window.attachEvent) {
-                // @ts-ignore
-                window.attachEvent('onload', boomerangSaveLoadTime);
-            }
-            if (document.addEventListener) {
-                document.addEventListener('onBoomerangLoaded', boomerangInit);
-                // @ts-ignore
-            }
-            else if (document.attachEvent) {
-                // @ts-ignore
-                document.attachEvent('onpropertychange', function (e) {
-                    if (!e)
-                        e = event;
-                    if (e.propertyName === 'onBoomerangLoaded')
-                        boomerangInit(e);
-                });
-            }
-        })();
-        loadScript(URL).catch(() => {
-            // ignore if boomerang doesn't load
-            // most likely because of a ad blocker
-        });
-    }, [storeDomain, pageTemplate]);
-    return null;
-}