@shopify/hydrogen 0.22.1 → 0.23.0

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

@@ -6,16 +6,12 @@ const ClientAnalytics_1 = require("./ClientAnalytics");
 function Analytics({ analyticsDataFromServer, }) {
     (0, react_1.useEffect)(() => {
         const urlParams = new URLSearchParams(window.location.search);
-        if (urlParams.has('utm_source')) {
-            ClientAnalytics_1.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_1.ClientAnalytics.pushToPageAnalyticsData(analyticsDataFromServer);
         ClientAnalytics_1.ClientAnalytics.publish(ClientAnalytics_1.ClientAnalytics.eventNames.PAGE_VIEW, true);
         if (analyticsDataFromServer.publishEventsOnNavigate) {
@@ -23,10 +19,16 @@ function Analytics({ analyticsDataFromServer, }) {
                 ClientAnalytics_1.ClientAnalytics.publish(eventName, true);
             });
         }
-        return function cleanup() {
-            ClientAnalytics_1.ClientAnalytics.resetPageAnalyticsData();
-        };
     }, [analyticsDataFromServer]);
     return null;
 }
 exports.Analytics = Analytics;
+function addUTMData(urlParams, key) {
+    if (urlParams.has(`utm_${key}`)) {
+        ClientAnalytics_1.ClientAnalytics.pushToPageAnalyticsData({
+            utm: {
+                [key]: urlParams.get(`utm_${key}`),
+            },
+        });
+    }
+}

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

@@ -32,29 +32,20 @@ const hook_1 = require("./hook");
 const Analytics_client_1 = require("./Analytics.client");
 const ServerRequestProvider_1 = require("../ServerRequestProvider");
 const AnalyticsErrorBoundary_client_1 = __importDefault(require("../AnalyticsErrorBoundary.client"));
-const DELAY_KEY = 'analytics-delay';
+const utilities_1 = require("../../utilities");
+const DELAY_KEY_1 = 'analytics-delay-1';
+const DELAY_KEY_2 = 'analytics-delay-2';
 function Analytics() {
     const cache = (0, ServerRequestProvider_1.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') {
@@ -63,8 +54,24 @@ function Analytics() {
                 throw result;
         }
     });
-    const analyticsData = (0, hook_1.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_client_1.default, null,
-        React.createElement(Analytics_client_1.Analytics, { analyticsDataFromServer: analyticsData })));
+        React.createElement(Analytics_client_1.Analytics, { analyticsDataFromServer: (0, hook_1.useServerAnalytics)() })));
 }
 exports.Analytics = Analytics;
+function analyticsDelay(cache, delayKey, delay) {
+    const delayPromise = (0, utilities_1.wrapPromise)(new Promise((resolve) => {
+        setTimeout(() => {
+            resolve(true);
+        }, delay);
+    }));
+    cache.set(delayKey, delayPromise);
+}

package/dist/node/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/node/foundation/Analytics/ClientAnalytics.js

@@ -7,6 +7,7 @@ const constants_1 = require("../../constants");
 const ssr_interop_1 = require("../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() {
@@ -16,15 +17,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 = (0, utils_1.mergeDeep)(pageAnalyticsData, data);
 }
 function getPageAnalyticsData() {
     if (isInvokedFromServer())
@@ -36,12 +32,11 @@ function resetPageAnalyticsData() {
         return;
     pageAnalyticsData = {};
 }
-function publish(eventname, guardDup = false, payload) {
+function publish(eventname, guardDup = false, payload = {}) {
     if (isInvokedFromServer())
         return;
     const namedspacedEventname = (0, utils_1.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];
@@ -49,15 +44,18 @@ function publish(eventname, guardDup = false, payload) {
             clearTimeout(eventGuardTimeout);
         }
         const namespacedTimeout = setTimeout(() => {
-            publishEvent(subs, combinedPayload);
+            publishEvent(namedspacedEventname, subs, (0, utils_1.mergeDeep)(pageAnalyticsData, payload));
         }, 100);
         guardDupEvents[namedspacedEventname] = namespacedTimeout;
     }
     else {
-        publishEvent(subs, combinedPayload);
+        publishEvent(namedspacedEventname, subs, (0, utils_1.mergeDeep)(pageAnalyticsData, payload));
     }
 }
-function publishEvent(subs, payload) {
+function publishEvent(eventname, subs, payload) {
+    if (!isFirstPageViewSent && eventname === const_1.eventNames.PAGE_VIEW) {
+        isFirstPageViewSent = true;
+    }
     if (subs) {
         Object.keys(subs).forEach((key) => {
             subs[key](payload);
@@ -89,6 +87,9 @@ function pushToServer(init, searchParam) {
         },
     }, init));
 }
+function hasSentFirstPageView() {
+    return isFirstPageViewSent;
+}
 exports.ClientAnalytics = {
     pushToPageAnalyticsData,
     getPageAnalyticsData,
@@ -97,4 +98,5 @@ exports.ClientAnalytics = {
     subscribe,
     pushToServer,
     eventNames: const_1.eventNames,
+    hasSentFirstPageView,
 };

package/dist/node/foundation/Analytics/ServerAnalyticsRoute.server.js

@@ -3,16 +3,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ServerAnalyticsRoute = void 0;
 const log_1 = require("../../utilities/log");
 function ServerAnalyticsRoute(request, serverAnalyticsConnectors) {
-    if (request.headers.get('Content-Length') === '0') {
+    const requestHeader = request.headers;
+    const requestUrl = request.url;
+    if (requestHeader.get('Content-Length') === '0') {
         serverAnalyticsConnectors === null || serverAnalyticsConnectors === void 0 ? void 0 : serverAnalyticsConnectors.forEach((connector) => {
-            connector.request(request);
+            connector.request(requestUrl, request.headers);
         });
     }
-    else if (request.headers.get('Content-Type') === 'application/json') {
+    else if (requestHeader.get('Content-Type') === 'application/json') {
         Promise.resolve(request.json())
             .then((data) => {
             serverAnalyticsConnectors === null || serverAnalyticsConnectors === void 0 ? void 0 : serverAnalyticsConnectors.forEach((connector) => {
-                connector.request(request, data, 'json');
+                connector.request(requestUrl, requestHeader, data, 'json');
             });
         })
             .catch((error) => {
@@ -23,7 +25,7 @@ function ServerAnalyticsRoute(request, serverAnalyticsConnectors) {
         Promise.resolve(request.text())
             .then((data) => {
             serverAnalyticsConnectors === null || serverAnalyticsConnectors === void 0 ? void 0 : serverAnalyticsConnectors.forEach((connector) => {
-                connector.request(request, data, 'text');
+                connector.request(requestUrl, requestHeader, data, 'text');
             });
         })
             .catch((error) => {

package/dist/node/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/node/foundation/Analytics/connectors/PerformanceMetrics/PerformanceMetrics.client.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PerformanceMetrics = void 0;
+const react_1 = require("react");
+const load_script_1 = require("../../../../utilities/load_script");
+const ClientAnalytics_1 = require("../../ClientAnalytics");
+const useShop_1 = require("../../../useShop");
+const URL = 'https://cdn.shopify.com/shopifycloud/boomerang/shopify-boomerang-hydrogen.min.js';
+function PerformanceMetrics() {
+    const { storeDomain } = (0, useShop_1.useShop)();
+    (0, react_1.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_1.ClientAnalytics.publish(ClientAnalytics_1.ClientAnalytics.eventNames.PERFORMANCE, true, data);
+                    ClientAnalytics_1.ClientAnalytics.pushToServer({
+                        body: JSON.stringify(data),
+                    }, ClientAnalytics_1.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);
+                    });
+                }
+            })();
+            (0, load_script_1.loadScript)(URL).catch(() => {
+                // ignore if boomerang doesn't load
+                // most likely because of an ad blocker
+            });
+        }
+        catch (err) {
+            // Do nothing
+        }
+    }, [storeDomain]);
+    return null;
+}
+exports.PerformanceMetrics = PerformanceMetrics;

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

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

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PerformanceMetricsDebug = void 0;
+const react_1 = require("react");
+const index_1 = require("../../index");
+const PAD = 10;
+let isInit = false;
+function PerformanceMetricsDebug() {
+    (0, react_1.useEffect)(() => {
+        if (!isInit) {
+            isInit = true;
+            index_1.ClientAnalytics.subscribe(index_1.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;
+}
+exports.PerformanceMetricsDebug = PerformanceMetricsDebug;
+function logMetricIf(lable, data) {
+    data && console.log(`${lable.padEnd(PAD)}${Math.round(data)} ms`);
+}

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

@@ -2,10 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useServerAnalytics = void 0;
 const ServerRequestProvider_1 = require("../ServerRequestProvider");
+const utils_1 = require("./utils");
 function useServerAnalytics(data) {
     const request = (0, ServerRequestProvider_1.useServerRequest)();
-    if (data)
-        request.ctx.analyticsData = Object.assign({}, request.ctx.analyticsData, data);
+    if (data) {
+        request.ctx.analyticsData = (0, utils_1.mergeDeep)(request.ctx.analyticsData, data);
+    }
     return request.ctx.analyticsData;
 }
 exports.useServerAnalytics = useServerAnalytics;

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

@@ -0,0 +1 @@
+export { ClientAnalytics } from './ClientAnalytics';

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClientAnalytics = void 0;
+var ClientAnalytics_1 = require("./ClientAnalytics");
+Object.defineProperty(exports, "ClientAnalytics", { enumerable: true, get: function () { return ClientAnalytics_1.ClientAnalytics; } });

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

@@ -1 +1,3 @@
 export declare function getNamedspacedEventname(eventname: string): string;
+export declare function isObject(item: any): any;
+export declare function mergeDeep(target: any, ...sources: any[]): any;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getNamedspacedEventname = void 0;
+exports.mergeDeep = exports.isObject = exports.getNamedspacedEventname = void 0;
 const const_1 = require("./const");
 const RESERVED_EVENT_NAMES = Object.values(const_1.eventNames);
 function getNamedspacedEventname(eventname) {
@@ -10,3 +10,26 @@ function getNamedspacedEventname(eventname) {
         : eventname;
 }
 exports.getNamedspacedEventname = getNamedspacedEventname;
+function isObject(item) {
+    return item && typeof item === 'object' && !Array.isArray(item);
+}
+exports.isObject = isObject;
+function mergeDeep(target, ...sources) {
+    if (!sources.length)
+        return target;
+    const source = sources.shift();
+    if (isObject(target) && isObject(source)) {
+        for (const key in source) {
+            if (isObject(source[key])) {
+                if (!target[key])
+                    Object.assign(target, { [key]: {} });
+                mergeDeep(target[key], source[key]);
+            }
+            else {
+                Object.assign(target, { [key]: source[key] });
+            }
+        }
+    }
+    return mergeDeep(target, ...sources);
+}
+exports.mergeDeep = mergeDeep;

package/dist/{esnext/framework → node/foundation/Cache}/cache-sub-request.d.ts

@@ -1,4 +1,4 @@
-import type { QueryKey, CachingStrategy } from '../types';
+import type { QueryKey, CachingStrategy } from '../../types';
 export declare function generateSubRequestCacheControlHeader(userCacheOptions?: CachingStrategy): string;
 /**
  * Get an item from the cache. If a match is found, returns a tuple

package/dist/node/{framework → foundation/Cache}/cache-sub-request.js

@@ -24,10 +24,10 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isStale = exports.deleteItemFromCache = exports.setItemInCache = exports.getItemFromCache = exports.generateSubRequestCacheControlHeader = void 0;
-const runtime_1 = require("./runtime");
-const hash_1 = require("../utilities/hash");
+const runtime_1 = require("../runtime");
+const hash_1 = require("../../utilities/hash");
 const CacheApi = __importStar(require("./cache"));
-const CachingStrategy_1 = require("./CachingStrategy");
+const strategies_1 = require("./strategies");
 /**
  * Wrapper Cache functions for sub queries
  */
@@ -38,7 +38,7 @@ function getKeyUrl(key) {
     return `https://shopify.dev/?${key}`;
 }
 function getCacheOption(userCacheOptions) {
-    return userCacheOptions || (0, CachingStrategy_1.CacheSeconds)();
+    return userCacheOptions || (0, strategies_1.CacheSeconds)();
 }
 function generateSubRequestCacheControlHeader(userCacheOptions) {
     return CacheApi.generateDefaultCacheControlHeader(getCacheOption(userCacheOptions));

package/dist/node/{framework → foundation/Cache}/cache.d.ts

@@ -1,4 +1,4 @@
-import type { CachingStrategy } from '../types';
+import type { CachingStrategy } from '../../types';
 export declare function generateDefaultCacheControlHeader(userCacheOptions?: CachingStrategy): string;
 /**
  * Get an item from the cache. If a match is found, returns a tuple

package/dist/node/{framework → foundation/Cache}/cache.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isStale = exports.deleteItemFromCache = exports.setItemInCache = exports.getItemFromCache = exports.generateDefaultCacheControlHeader = void 0;
-const runtime_1 = require("./runtime");
-const CachingStrategy_1 = require("../framework/CachingStrategy");
-const log_1 = require("../utilities/log");
+const runtime_1 = require("../runtime");
+const strategies_1 = require("./strategies");
+const log_1 = require("../../utilities/log");
 function getCacheControlSetting(userCacheOptions, options) {
     if (userCacheOptions && options) {
         return {
@@ -12,11 +12,11 @@ function getCacheControlSetting(userCacheOptions, options) {
         };
     }
     else {
-        return userCacheOptions || (0, CachingStrategy_1.CacheSeconds)();
+        return userCacheOptions || (0, strategies_1.CacheSeconds)();
     }
 }
 function generateDefaultCacheControlHeader(userCacheOptions) {
-    return (0, CachingStrategy_1.generateCacheControlHeader)(getCacheControlSetting(userCacheOptions));
+    return (0, strategies_1.generateCacheControlHeader)(getCacheControlSetting(userCacheOptions));
 }
 exports.generateDefaultCacheControlHeader = generateDefaultCacheControlHeader;
 /**

package/dist/{esnext/framework/CachingStrategy → node/foundation/Cache/strategies}/index.d.ts

@@ -1,4 +1,4 @@
-import type { CachingStrategy, AllCacheOptions, NoStoreStrategy } from '../../types';
+import type { CachingStrategy, AllCacheOptions, NoStoreStrategy } from '../../../types';
 export declare function generateCacheControlHeader(cacheOptions: CachingStrategy): string;
 export declare function NoStore(): NoStoreStrategy;
 export declare function CacheSeconds(overrideOptions?: CachingStrategy): AllCacheOptions;

package/dist/node/foundation/Head/Head.client.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { HelmetProps as HeadProps } from 'react-helmet-async';
+export declare function Head({ children, ...props }: HeadProps & {
+    children: React.ReactNode;
+}): JSX.Element;

package/dist/node/foundation/Head/Head.client.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Head = void 0;
+const react_1 = __importDefault(require("react"));
+const react_helmet_async_1 = require("react-helmet-async");
+const ssr_interop_1 = require("../ssr-interop");
+const clientHeadData = new react_helmet_async_1.HelmetData({});
+function Head({ children, ...props }) {
+    const headData = (0, ssr_interop_1.useEnvContext)((req) => req.ctx.head, clientHeadData);
+    return (
+    // @ts-ignore
+    react_1.default.createElement(react_helmet_async_1.Helmet, { ...props, helmetData: headData }, children));
+}
+exports.Head = Head;

package/dist/node/foundation/Head/index.d.ts

@@ -0,0 +1 @@
+export { Head } from './Head.client';

package/dist/node/foundation/Head/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Head = void 0;
+var Head_client_1 = require("./Head.client");
+Object.defineProperty(exports, "Head", { enumerable: true, get: function () { return Head_client_1.Head; } });

package/dist/{esnext/framework/Hydration → node/foundation/Html}/Html.d.ts

@@ -1,11 +1,13 @@
 import { ReactNode } from 'react';
 import type { HelmetData as HeadData } from 'react-helmet-async';
+import { ResolvedHydrogenConfig } from '../../types';
 declare type HtmlOptions = {
     children: ReactNode;
     template: string;
     htmlAttrs?: Record<string, string>;
     bodyAttrs?: Record<string, string>;
+    hydrogenConfig: ResolvedHydrogenConfig;
 };
-export declare function Html({ children, template, htmlAttrs, bodyAttrs }: HtmlOptions): JSX.Element;
+export declare function Html({ children, template, htmlAttrs, bodyAttrs, hydrogenConfig, }: HtmlOptions): JSX.Element;
 export declare function applyHtmlHead(html: string, head: HeadData, template: string): string;
 export {};

package/dist/node/{framework/Hydration → foundation/Html}/Html.js

@@ -27,7 +27,11 @@ function propsToAttrs(props) {
         .map(([key, value]) => `${key === REACT_ATTR_MAP.class ? 'class' : key}="${value}"`)
         .join(' ');
 }
-function Html({ children, template, htmlAttrs, bodyAttrs }) {
+const clientConfigOptions = [
+    'strictMode',
+    'showDevTools',
+];
+function Html({ children, template, htmlAttrs, bodyAttrs, hydrogenConfig, }) {
     let head = template.match(/<head>(.+?)<\/head>/s)[1] || '';
     // @ts-ignore
     if (import.meta.env.DEV) {
@@ -37,10 +41,19 @@ function Html({ children, template, htmlAttrs, bodyAttrs }) {
             '<script></script>' + // Fix for Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1737882
                 head.replace(/>(\s*?import[\s\w]+?['"]\/@react-refresh)/, ' async="">$1');
     }
+    const clientConfig = {};
+    for (const key of clientConfigOptions) {
+        if (hydrogenConfig[key] != null) {
+            clientConfig[key] = hydrogenConfig[key];
+        }
+    }
+    const clientConfigAttr = Object.keys(clientConfig).length > 0
+        ? JSON.stringify(clientConfig)
+        : undefined;
     return (react_1.default.createElement("html", { ...attrsToProps(getHtmlAttrs(template)), ...htmlAttrs },
         react_1.default.createElement("head", { dangerouslySetInnerHTML: { __html: head } }),
         react_1.default.createElement("body", { ...attrsToProps(getBodyAttrs(template)), ...bodyAttrs },
-            react_1.default.createElement("div", { id: "root" }, children))));
+            react_1.default.createElement("div", { id: "root", "data-client-config": clientConfigAttr }, children))));
 }
 exports.Html = Html;
 function applyHtmlHead(html, head, template) {

package/dist/{esnext/framework/Hydration/ServerComponentRequest.server.d.ts → node/foundation/HydrogenRequest/HydrogenRequest.server.d.ts}

@@ -1,9 +1,12 @@
-import type { ShopifyContextValue } from '../../foundation/ShopifyProvider/types';
+import type { ShopifyContextValue } from '../ShopifyProvider/types';
 import type { QueryCacheControlHeaders } from '../../utilities/log/log-cache-header';
 import type { QueryTiming } from '../../utilities/log/log-query-timeline';
 import type { ResolvedHydrogenConfig, PreloadOptions, QueryKey } from '../../types';
 import { HelmetData as HeadData } from 'react-helmet-async';
-import { SessionSyncApi } from '../../foundation/session/session';
+import { SessionSyncApi } from '../session/session';
+export interface RuntimeContext {
+    waitUntil: (fn: Promise<any>) => void;
+}
 export declare type PreloadQueryEntry = {
     key: QueryKey;
     fetcher: () => Promise<unknown>;
@@ -23,7 +26,7 @@ export declare type RouterContextData = {
  * - Adds a `cookies` map for easy access
  * - Adds a static constructor to convert a Node.js `IncomingMessage` to a Request.
  */
-export declare class ServerComponentRequest extends Request {
+export declare class HydrogenRequest extends Request {
     cookies: Map<string, string>;
     id: string;
     time: number;
@@ -40,6 +43,7 @@ export declare class ServerComponentRequest extends Request {
         router: RouterContextData;
         buyerIpHeader?: string;
         session?: SessionSyncApi;
+        runtime?: RuntimeContext;
         [key: string]: any;
     };
     constructor(input: any);

package/dist/node/{framework/Hydration/ServerComponentRequest.server.js → foundation/HydrogenRequest/HydrogenRequest.server.js}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ServerComponentRequest = void 0;
+exports.HydrogenRequest = void 0;
 const timing_1 = require("../../utilities/timing");
 const hash_1 = require("../../utilities/hash");
 const react_helmet_async_1 = require("react-helmet-async");
@@ -23,7 +23,7 @@ const PRELOAD_ALL = '*';
  * - Adds a `cookies` map for easy access
  * - Adds a static constructor to convert a Node.js `IncomingMessage` to a Request.
  */
-class ServerComponentRequest extends Request {
+class HydrogenRequest extends Request {
     constructor(input, init) {
         if (input instanceof Request) {
             super(input, init);
@@ -99,7 +99,7 @@ class ServerComponentRequest extends Request {
         return this.headers.get((_a = this.ctx.buyerIpHeader) !== null && _a !== void 0 ? _a : 'x-forwarded-for');
     }
 }
-exports.ServerComponentRequest = ServerComponentRequest;
+exports.HydrogenRequest = HydrogenRequest;
 function mergeMapEntries(map1, map2) {
     map2 && map2.forEach((v, k) => map1.set(k, v));
 }