@shopify/hydrogen 0.11.0-experimental.1 → 0.11.1-experimental.0

package/dist/node/utilities/apiRoutes.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderApiRoute = exports.getApiRouteFromURL = exports.getApiRoutesFromPages = void 0;
 const matchPath_1 = require("./matchPath");
-const log_1 = require("../utilities/log/log");
+const log_1 = require("../utilities/log/");
 let memoizedRoutes = [];
 let memoizedPages = {};
 function getApiRoutesFromPages(pages, topLevelPath = '*') {
@@ -66,8 +66,9 @@ function getApiRouteFromURL(url, routes) {
     };
 }
 exports.getApiRouteFromURL = getApiRouteFromURL;
-async function renderApiRoute(request, route, log) {
+async function renderApiRoute(request, route) {
     let response;
+    const log = (0, log_1.getLoggerWithContext)(request);
     try {
         response = await route.resource(request, { params: route.params });
         if (!(response instanceof Response)) {
@@ -87,7 +88,7 @@ async function renderApiRoute(request, route, log) {
         log.error(e);
         response = new Response('Error processing: ' + request.url, { status: 500 });
     }
-    (0, log_1.logServerResponse)('api', log, request, response.status);
+    (0, log_1.logServerResponse)('api', request, response.status);
     return response;
 }
 exports.renderApiRoute = renderApiRoute;

package/dist/node/utilities/bot-ua.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Determines if the request is from a bot, using the URL and User Agent
+ */
+export declare function isBotUA(url: URL, userAgent: string | null): boolean;

package/dist/node/utilities/bot-ua.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isBotUA = void 0;
+/**
+ * An alphabetized list of User Agents of known bots, combined from lists found at:
+ * https://github.com/vercel/next.js/blob/d87dc2b5a0b3fdbc0f6806a47be72bad59564bd0/packages/next/server/utils.ts#L18-L22
+ * https://github.com/GoogleChrome/rendertron/blob/6f681688737846b28754fbfdf5db173846a826df/middleware/src/middleware.ts#L24-L41
+ */
+const botUserAgents = [
+    'AdsBot-Google',
+    'applebot',
+    'Baiduspider',
+    'baiduspider',
+    'bingbot',
+    'Bingbot',
+    'BingPreview',
+    'bitlybot',
+    'Discordbot',
+    'DuckDuckBot',
+    'Embedly',
+    'facebookcatalog',
+    'facebookexternalhit',
+    'Google-PageRenderer',
+    'Googlebot',
+    'googleweblight',
+    'ia_archive',
+    'LinkedInBot',
+    'Mediapartners-Google',
+    'outbrain',
+    'pinterest',
+    'quora link preview',
+    'redditbot',
+    'rogerbot',
+    'showyoubot',
+    'SkypeUriPreview',
+    'Slackbot',
+    'Slurp',
+    'sogou',
+    'Storebot-Google',
+    'TelegramBot',
+    'tumblr',
+    'Twitterbot',
+    'vkShare',
+    'W3C_Validator',
+    'WhatsApp',
+    'yandex',
+];
+/**
+ * Creates a regex based on the botUserAgents array
+ */
+const botUARegex = new RegExp(botUserAgents.join('|'), 'i');
+/**
+ * Determines if the request is from a bot, using the URL and User Agent
+ */
+function isBotUA(url, userAgent) {
+    return (url.searchParams.has('_bot') || (!!userAgent && botUARegex.test(userAgent)));
+}
+exports.isBotUA = isBotUA;

package/dist/node/utilities/defer.d.ts

@@ -0,0 +1,6 @@
+export declare function defer<T = unknown | undefined>(): {
+    promise: Promise<T>;
+    status: 'pending' | 'resolved' | 'rejected';
+    resolve: (value: T) => void;
+    reject: (reason?: any) => void;
+};

package/dist/node/utilities/defer.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defer = void 0;
+function defer() {
+    const deferred = { status: 'pending' };
+    deferred.promise = new Promise((resolve, reject) => {
+        deferred.resolve = (value) => {
+            deferred.status = 'resolved';
+            return resolve(value);
+        };
+        deferred.reject = (error) => {
+            deferred.status = 'rejected';
+            return reject(error);
+        };
+    });
+    return deferred;
+}
+exports.defer = defer;

package/dist/node/utilities/error.d.ts

@@ -0,0 +1 @@
+export declare function getErrorMarkup(error: Error): string;

package/dist/node/utilities/error.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getErrorMarkup = void 0;
+function getErrorMarkup(error) {
+    return `<script type="module">
+    import {ErrorOverlay} from '/@vite/client';
+    document.body.appendChild(new ErrorOverlay(${JSON.stringify(error, Object.getOwnPropertyNames(error)).replace(/</g, '\\u003c')}));
+</script>`;
+}
+exports.getErrorMarkup = getErrorMarkup;

package/dist/node/utilities/log/index.d.ts

@@ -0,0 +1,4 @@
+export { log, setLogger, setLoggerOptions, getLoggerWithContext, Logger, logServerResponse, resetLogger, } from './log';
+export { collectQueryCacheControlHeaders, logCacheControlHeaders, } from './log-cache-header';
+export { logCacheApiStatus } from './log-cache-api-status';
+export { collectQueryTimings, logQueryTimings } from './log-query-timeline';

package/dist/node/utilities/log/index.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.logQueryTimings = exports.collectQueryTimings = exports.logCacheApiStatus = exports.logCacheControlHeaders = exports.collectQueryCacheControlHeaders = exports.resetLogger = exports.logServerResponse = exports.getLoggerWithContext = exports.setLoggerOptions = exports.setLogger = exports.log = void 0;
+var log_1 = require("./log");
+Object.defineProperty(exports, "log", { enumerable: true, get: function () { return log_1.log; } });
+Object.defineProperty(exports, "setLogger", { enumerable: true, get: function () { return log_1.setLogger; } });
+Object.defineProperty(exports, "setLoggerOptions", { enumerable: true, get: function () { return log_1.setLoggerOptions; } });
+Object.defineProperty(exports, "getLoggerWithContext", { enumerable: true, get: function () { return log_1.getLoggerWithContext; } });
+Object.defineProperty(exports, "logServerResponse", { enumerable: true, get: function () { return log_1.logServerResponse; } });
+Object.defineProperty(exports, "resetLogger", { enumerable: true, get: function () { return log_1.resetLogger; } });
+var log_cache_header_1 = require("./log-cache-header");
+Object.defineProperty(exports, "collectQueryCacheControlHeaders", { enumerable: true, get: function () { return log_cache_header_1.collectQueryCacheControlHeaders; } });
+Object.defineProperty(exports, "logCacheControlHeaders", { enumerable: true, get: function () { return log_cache_header_1.logCacheControlHeaders; } });
+var log_cache_api_status_1 = require("./log-cache-api-status");
+Object.defineProperty(exports, "logCacheApiStatus", { enumerable: true, get: function () { return log_cache_api_status_1.logCacheApiStatus; } });
+var log_query_timeline_1 = require("./log-query-timeline");
+Object.defineProperty(exports, "collectQueryTimings", { enumerable: true, get: function () { return log_query_timeline_1.collectQueryTimings; } });
+Object.defineProperty(exports, "logQueryTimings", { enumerable: true, get: function () { return log_query_timeline_1.logQueryTimings; } });

package/dist/node/utilities/log/log-cache-api-status.d.ts

@@ -0,0 +1 @@
+export declare function logCacheApiStatus(status: string | null, url: string): void;

package/dist/node/utilities/log/log-cache-api-status.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.logCacheApiStatus = void 0;
+const utils_1 = require("./utils");
+const kolorist_1 = require("kolorist");
+const _1 = require(".");
+function logCacheApiStatus(status, url) {
+    if (!_1.log.options().showCacheApiStatus) {
+        return;
+    }
+    _1.log.debug((0, kolorist_1.gray)(`[Cache] ${status === null || status === void 0 ? void 0 : status.padEnd(6)} query ${(0, utils_1.findQueryName)(url)}`));
+}
+exports.logCacheApiStatus = logCacheApiStatus;

package/dist/node/utilities/log/log-cache-header.d.ts

@@ -0,0 +1,10 @@
+import { ServerComponentRequest } from '../../framework/Hydration/ServerComponentRequest.server';
+import { ServerComponentResponse } from '../../framework/Hydration/ServerComponentResponse.server';
+import { QueryKey } from '../../types';
+import type { RenderType } from './log';
+export declare type QueryCacheControlHeaders = {
+    name: string;
+    header: string | null;
+};
+export declare function collectQueryCacheControlHeaders(request: ServerComponentRequest, queryKey: QueryKey, cacheControlHeader: string | null): void;
+export declare function logCacheControlHeaders(type: RenderType, request: ServerComponentRequest, response?: ServerComponentResponse): void;

package/dist/node/utilities/log/log-cache-header.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.logCacheControlHeaders = exports.collectQueryCacheControlHeaders = void 0;
+const cache_1 = require("../../framework/cache");
+const utils_1 = require("./utils");
+const kolorist_1 = require("kolorist");
+const log_1 = require("./log");
+const color = kolorist_1.gray;
+function collectQueryCacheControlHeaders(request, queryKey, cacheControlHeader) {
+    request.ctx.queryCacheControl.push({
+        name: (0, utils_1.findQueryName)((0, cache_1.hashKey)(queryKey)),
+        header: cacheControlHeader,
+    });
+}
+exports.collectQueryCacheControlHeaders = collectQueryCacheControlHeaders;
+function logCacheControlHeaders(type, request, response) {
+    const log = (0, log_1.getLoggerWithContext)(request);
+    if (!log.options().showCacheControlHeader) {
+        return;
+    }
+    log.debug(color(`┌── Cache control header for ${(0, utils_1.parseUrl)(type, request.url)}`));
+    if (response) {
+        log.debug(color(`│ ${response.cacheControlHeader}`));
+    }
+    const queryList = request.ctx.queryCacheControl;
+    const longestQueryNameLength = queryList.reduce((max, query) => Math.max(max, query.name.length), 0);
+    if (queryList.length > 0) {
+        log.debug(color('│'));
+        queryList.forEach((query) => {
+            log.debug(color(`│ query ${query.name.padEnd(longestQueryNameLength + 1)}${query.header}`));
+        });
+    }
+    log.debug(color('└──'));
+}
+exports.logCacheControlHeaders = logCacheControlHeaders;

package/dist/node/utilities/log/log-query-timeline.d.ts

@@ -0,0 +1,12 @@
+import { ServerComponentRequest } from '../../framework/Hydration/ServerComponentRequest.server';
+import { QueryKey } from '../../types';
+import type { RenderType } from './log';
+export declare type TimingType = 'requested' | 'resolved' | 'rendered' | 'preload';
+export declare type QueryTiming = {
+    name: string;
+    timingType: TimingType;
+    timestamp: number;
+    duration?: number;
+};
+export declare function collectQueryTimings(request: ServerComponentRequest, queryKey: QueryKey, timingType: TimingType, duration?: number): void;
+export declare function logQueryTimings(type: RenderType, request: ServerComponentRequest): void;

package/dist/node/utilities/log/log-query-timeline.js

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.logQueryTimings = exports.collectQueryTimings = void 0;
+const cache_1 = require("../../framework/cache");
+const utils_1 = require("./utils");
+const kolorist_1 = require("kolorist");
+const log_1 = require("./log");
+const timing_1 = require("../timing");
+const color = kolorist_1.gray;
+const TIMING_MAPPING = {
+    requested: 'Requested',
+    rendered: 'Rendered',
+    resolved: 'Resolved',
+    preload: 'Preload',
+};
+function collectQueryTimings(request, queryKey, timingType, duration) {
+    request.ctx.queryTimings.push({
+        name: (0, utils_1.findQueryName)((0, cache_1.hashKey)(queryKey)),
+        timingType,
+        timestamp: (0, timing_1.getTime)(),
+        duration,
+    });
+}
+exports.collectQueryTimings = collectQueryTimings;
+function logQueryTimings(type, request) {
+    const log = (0, log_1.getLoggerWithContext)(request);
+    if (!log.options().showQueryTiming) {
+        return;
+    }
+    log.debug(color(`┌── Query timings for ${(0, utils_1.parseUrl)(type, request.url)}`));
+    const queryList = request.ctx.queryTimings;
+    if (queryList.length > 0) {
+        const requestStartTime = request.time;
+        const detectSuspenseWaterfall = {};
+        const detectMultipleDataLoad = {};
+        let suspenseWaterfallDetectedCount = 0;
+        queryList.forEach((query, index) => {
+            var _a;
+            if (query.timingType === 'requested' || query.timingType === 'preload') {
+                detectSuspenseWaterfall[query.name] = true;
+            }
+            else if (query.timingType === 'rendered') {
+                delete detectSuspenseWaterfall[query.name];
+            }
+            else if (query.timingType === 'resolved') {
+                detectMultipleDataLoad[query.name] = detectMultipleDataLoad[query.name]
+                    ? detectMultipleDataLoad[query.name] + 1
+                    : 1;
+            }
+            const loadColor = query.timingType === 'preload' ? kolorist_1.green : color;
+            log.debug(color(`│ ${`${(query.timestamp - requestStartTime).toFixed(2)}ms`.padEnd(10)} ${loadColor(TIMING_MAPPING[query.timingType].padEnd(10))} ${query.name}${query.timingType === 'resolved'
+                ? ` (Took ${(_a = query.duration) === null || _a === void 0 ? void 0 : _a.toFixed(2)}ms)`
+                : ''}`));
+            // SSR + RSC render path generates 2 `load` and `render` for each query
+            // We want to avoid falsely identifying a suspense waterfall near the end
+            // of the query list
+            //
+            // The (index + 4) is detecting that near the end of list.
+            // A complete set of events for a given query is 4 entries
+            // │ (639.62ms)  Requested  Localization
+            // │ (993.33ms)  Resolved   Localization (Took 353.66ms)
+            // │ (993.96ms)  Requested  Localization      <-- second time React tries to load
+            // │ (994.03ms)  Rendered   Localization
+            //
+            // so the end of list index range is 3 (one less from a set entry) + 1 (zero index)
+            if (queryList.length >= index + 4 &&
+                Object.keys(detectSuspenseWaterfall).length === 0) {
+                suspenseWaterfallDetectedCount++;
+                const warningColor = suspenseWaterfallDetectedCount === 1 ? kolorist_1.yellow : kolorist_1.red;
+                log.debug(`${color(`│ `)}${warningColor(`Suspense waterfall detected`)}`);
+            }
+        });
+        const unusedQueries = Object.keys(detectSuspenseWaterfall);
+        if (unusedQueries.length > 0) {
+            unusedQueries.forEach((queryName) => {
+                log.debug(`${color(`│ `)}${(0, kolorist_1.yellow)(`Unused query detected: ${queryName}`)}`);
+            });
+        }
+        Object.keys(detectMultipleDataLoad).forEach((queryName) => {
+            const count = detectMultipleDataLoad[queryName];
+            if (count > 1) {
+                log.debug(`${color(`│ `)}${(0, kolorist_1.yellow)(`Multiple data loads detected: ${queryName}`)}`);
+            }
+        });
+    }
+    log.debug(color('└──'));
+}
+exports.logQueryTimings = logQueryTimings;

package/dist/node/utilities/log/log.d.ts

@@ -1,18 +1,21 @@
 import { ServerComponentRequest } from '../../framework/Hydration/ServerComponentRequest.server';
-/** The `log` utility is a function that's used for logging debugging, warning, and error information about the application.
- * Use this utility by importing `log` from `@shopify/hydrogen`, or by using a `log` prop passed to each page
- * component. We recommend using the `log` prop passed to each page because it will associated your log to the
- * current request in progress.
- */
 export interface Logger {
     trace: (...args: Array<any>) => void;
     debug: (...args: Array<any>) => void;
     warn: (...args: Array<any>) => void;
     error: (...args: Array<any>) => void;
     fatal: (...args: Array<any>) => void;
+    options: () => LoggerOptions;
 }
-export declare function getLoggerFromContext(context: any): Logger;
+export declare type LoggerOptions = {
+    showCacheControlHeader?: boolean;
+    showCacheApiStatus?: boolean;
+    showQueryTiming?: boolean;
+};
+export declare type RenderType = 'str' | 'rsc' | 'ssr' | 'api';
+export declare const log: Logger;
+export declare function getLoggerWithContext(context?: any): Logger;
 export declare function setLogger(newLogger: Logger): void;
+export declare function setLoggerOptions(options: LoggerOptions): void;
 export declare function resetLogger(): void;
-export declare const log: Logger;
-export declare function logServerResponse(type: 'str' | 'rsc' | 'ssr' | 'api', log: Logger, request: ServerComponentRequest, responseStatus: number): void;
+export declare function logServerResponse(type: RenderType, request: ServerComponentRequest, responseStatus: number): void;

package/dist/node/utilities/log/log.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.logServerResponse = exports.log = exports.resetLogger = exports.setLogger = exports.getLoggerFromContext = void 0;
+exports.logServerResponse = exports.resetLogger = exports.setLoggerOptions = exports.setLogger = exports.getLoggerWithContext = exports.log = void 0;
 const kolorist_1 = require("kolorist");
 const timing_1 = require("../timing");
+const utils_1 = require("./utils");
 const defaultLogger = {
     trace(context, ...args) {
         // Re-enable following line to show trace debugging information
@@ -20,49 +21,43 @@ const defaultLogger = {
     fatal(context, ...args) {
         console.error((0, kolorist_1.red)('FATAL: '), ...args);
     },
+    options: () => ({}),
 };
-let logger = defaultLogger;
-function getLoggerFromContext(context) {
+globalThis.__logger = defaultLogger;
+function buildLogger() {
     return {
-        trace: (...args) => logger.trace(context, ...args),
-        debug: (...args) => logger.debug(context, ...args),
-        warn: (...args) => logger.warn(context, ...args),
-        error: (...args) => logger.error(context, ...args),
-        fatal: (...args) => logger.fatal(context, ...args),
+        trace: (...args) => globalThis.__logger.trace(this, ...args),
+        debug: (...args) => globalThis.__logger.debug(this, ...args),
+        warn: (...args) => globalThis.__logger.warn(this, ...args),
+        error: (...args) => globalThis.__logger.error(this, ...args),
+        fatal: (...args) => globalThis.__logger.fatal(this, ...args),
+        options: () => globalThis.__logger.options(),
     };
 }
-exports.getLoggerFromContext = getLoggerFromContext;
+exports.log = buildLogger.call({});
+function getLoggerWithContext(context = {}) {
+    return buildLogger.call(context);
+}
+exports.getLoggerWithContext = getLoggerWithContext;
 function setLogger(newLogger) {
-    logger = newLogger;
+    globalThis.__logger = newLogger;
 }
 exports.setLogger = setLogger;
+function setLoggerOptions(options) {
+    globalThis.__logger.options = () => options;
+}
+exports.setLoggerOptions = setLoggerOptions;
 function resetLogger() {
-    logger = defaultLogger;
+    globalThis.__logger = defaultLogger;
 }
 exports.resetLogger = resetLogger;
-exports.log = {
-    trace(...args) {
-        return logger.trace({}, ...args);
-    },
-    debug(...args) {
-        return logger.debug({}, ...args);
-    },
-    warn(...args) {
-        return logger.warn({}, ...args);
-    },
-    error(...args) {
-        return logger.error({}, ...args);
-    },
-    fatal(...args) {
-        return logger.fatal({}, ...args);
-    },
-};
 const SERVER_RESPONSE_MAP = {
     str: 'streaming SSR',
     rsc: 'Server Components',
     ssr: 'buffered SSR',
 };
-function logServerResponse(type, log, request, responseStatus) {
+function logServerResponse(type, request, responseStatus) {
+    const log = getLoggerWithContext(request);
     const coloredResponseStatus = responseStatus >= 500
         ? (0, kolorist_1.red)(responseStatus)
         : responseStatus >= 400
@@ -71,14 +66,9 @@ function logServerResponse(type, log, request, responseStatus) {
                 ? (0, kolorist_1.lightBlue)(responseStatus)
                 : (0, kolorist_1.green)(responseStatus);
     const fullType = SERVER_RESPONSE_MAP[type] || type;
-    const styledType = (0, kolorist_1.italic)(pad(fullType, '                 '));
-    const paddedTiming = pad(((0, timing_1.getTime)() - request.time).toFixed(2) + ' ms', '          ');
-    const url = type === 'rsc'
-        ? decodeURIComponent(request.url.substring(request.url.indexOf('=') + 1))
-        : request.url;
+    const styledType = (0, kolorist_1.italic)(fullType.padEnd(17));
+    const paddedTiming = (((0, timing_1.getTime)() - request.time).toFixed(2) + ' ms').padEnd(10);
+    const url = (0, utils_1.parseUrl)(type, request.url);
     log.debug(`${request.method} ${styledType} ${coloredResponseStatus} ${paddedTiming} ${url}`);
 }
 exports.logServerResponse = logServerResponse;
-function pad(str, _pad) {
-    return (str + _pad).substring(0, _pad.length);
-}

package/dist/node/utilities/log/utils.d.ts

@@ -0,0 +1,3 @@
+import type { RenderType } from './log';
+export declare function findQueryName(key: string): string;
+export declare function parseUrl(type: RenderType, url: string): string;

package/dist/node/utilities/log/utils.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseUrl = exports.findQueryName = void 0;
+function findQueryName(key) {
+    const decodeKey = decodeURIComponent(key);
+    const match = decodeKey.match(/query ([^\s\()]*)\s?(|\(\{)/);
+    if (match && match.length > 1) {
+        return match[1];
+    }
+    return '<unknown>';
+}
+exports.findQueryName = findQueryName;
+function parseUrl(type, url) {
+    return type === 'rsc'
+        ? decodeURIComponent(url.substring(url.indexOf('=') + 1))
+        : url;
+}
+exports.parseUrl = parseUrl;

package/dist/node/utilities/template.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Strip out script `src` values from <script> tags in a given HTML template.
+ * Returns two lists of scripts, split based on whether they are `type="module"`.
+ */
+export declare function stripScriptsFromTemplate(template: string): {
+    noScriptTemplate: string;
+    bootstrapScripts: string[];
+    bootstrapModules: string[];
+};

package/dist/node/utilities/template.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stripScriptsFromTemplate = void 0;
+/**
+ * Strip out script `src` values from <script> tags in a given HTML template.
+ * Returns two lists of scripts, split based on whether they are `type="module"`.
+ */
+function stripScriptsFromTemplate(template) {
+    var _a;
+    const bootstrapScripts = [];
+    const bootstrapModules = [];
+    const scripts = template.matchAll(/<script.+?src="(?<script>([^"]+?))".*?><\/script>/g);
+    for (const match of scripts) {
+        const scriptName = (_a = match.groups) === null || _a === void 0 ? void 0 : _a.script;
+        if (!scriptName)
+            continue;
+        if (match[0].includes(`type="module"`)) {
+            bootstrapModules.push(scriptName);
+        }
+        else {
+            bootstrapScripts.push(scriptName);
+        }
+        template = template.replace(match[0], '');
+    }
+    return { noScriptTemplate: template, bootstrapScripts, bootstrapModules };
+}
+exports.stripScriptsFromTemplate = stripScriptsFromTemplate;

package/dist/node/utilities/web-api-polyfill.js

@@ -0,0 +1,43 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const node_fetch_1 = __importStar(require("node-fetch"));
+const abort_controller_1 = __importDefault(require("abort-controller"));
+const ponyfill_1 = require("web-streams-polyfill/ponyfill");
+if (!globalThis.fetch) {
+    Object.assign(globalThis, {
+        fetch: node_fetch_1.default,
+        Request: node_fetch_1.Request,
+        Response: node_fetch_1.Response,
+        Headers: node_fetch_1.Headers,
+        AbortController: abort_controller_1.default,
+    });
+}
+if (!globalThis.ReadableStream) {
+    Object.assign(globalThis, {
+        ReadableStream: ponyfill_1.ReadableStream,
+        WritableStream: ponyfill_1.WritableStream,
+        TransformStream: ponyfill_1.TransformStream,
+    });
+}

package/package.json

@@ -7,7 +7,7 @@
   "engines": {
     "node": ">=14"
   },
-  "version": "0.11.0-experimental.1",
+  "version": "0.11.1-experimental.0",
   "description": "Modern custom Shopify storefronts",
   "license": "MIT",
   "main": "dist/esnext/index.js",
@@ -26,20 +26,17 @@
     "marker.js",
     "middleware.js",
     "middleware.d.ts",
-    "worker.js"
+    "web-polyfills.js"
   ],
   "scripts": {
-    "predev": "rimraf ./dist ../../examples/template-hydrogen-default/node_modules/@shopify/hydrogen ../../node_modules/@shopify/hydrogen && mkdirp ../../node_modules/@shopify/hydrogen",
-    "dev": "run-p dev-copy \"dev-esnext {@}/esnext\" \"dev-node {@}/node\" \"dev-worker {@}/worker\" -- --outDir ../../node_modules/@shopify/hydrogen/dist",
+    "dev": "run-p dev-copy \"dev-esnext {@}/esnext\" \"dev-node {@}/node\" -- --outDir ../../node_modules/@shopify/hydrogen/dist",
     "dev-esnext": "tsc -w --incremental --p tsconfig.build.json",
     "dev-node": "tsc -w --incremental --p tsconfig.cjs.json",
-    "dev-worker": "tsc -w --incremental --p tsconfig.worker.json",
     "dev-copy": "cpy --parents *.[jt]s *.json vendor ../../node_modules/@shopify/hydrogen",
     "prebuild": "rimraf dist ../../node_modules/@shopify/hydrogen && mkdirp ../../node_modules/@shopify/hydrogen",
-    "build": "run-p build-esnext build-node build-worker && yarn build-copy",
+    "build": "run-p build-esnext build-node && yarn build-copy",
     "build-esnext": "tsc --p tsconfig.build.json",
     "build-node": "tsc --p tsconfig.cjs.json",
-    "build-worker": "tsc --p tsconfig.worker.json",
     "build-copy": "cpy --parents *.[jt]s *.json dist vendor ../../node_modules/@shopify/hydrogen",
     "lint": "eslint --ext .ts src/** --no-error-on-unmatched-pattern",
     "format": "prettier --write --parser typescript \"src/**/*.ts\"",
@@ -82,10 +79,24 @@
     "rimraf": "^3.0.2"
   },
   "peerDependencies": {
+    "body-parser": "^1.19.1",
+    "compression": "^1.7.4",
     "react": "0.0.0-experimental-529dc3ce8-20220124",
     "react-dom": "0.0.0-experimental-529dc3ce8-20220124",
+    "serve-static": "^1.14.1",
     "vite": "^2.8.0"
   },
+  "peerDependenciesMeta": {
+    "body-parser": {
+      "optional": true
+    },
+    "compression": {
+      "optional": true
+    },
+    "serve-static": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "@vitejs/plugin-react": "^1.1.1",
     "abort-controller": "^3.0.0",
@@ -101,9 +112,8 @@
     "node-fetch": "^2.6.7",
     "path-to-regexp": "^6.2.0",
     "react-error-boundary": "^3.1.3",
-    "react-helmet-async": "^1.2.2",
+    "react-helmet-async": "^1.2.3",
     "vite-plugin-inspect": "^0.3.6",
     "web-streams-polyfill": "^3.2.0"
-  },
-  "gitHead": "8ea40b5e119883ca380406edc123d9cb10ca8650"
+  }
 }

package/web-polyfills.js

@@ -0,0 +1 @@
+require('./dist/node/utilities/web-api-polyfill');