@shopify/hydrogen 0.7.1 → 0.8.3

package/dist/esnext/utilities/log/log.js

@@ -0,0 +1,75 @@
+import { yellow, red, green, italic, lightBlue } from 'kolorist';
+import { getTime } from '../timing';
+const defaultLogger = {
+    trace(context, ...args) {
+        console.log(...args);
+    },
+    debug(context, ...args) {
+        console.log(...args);
+    },
+    warn(context, ...args) {
+        console.warn(yellow('WARN: '), ...args);
+    },
+    error(context, ...args) {
+        console.error(red('ERROR: '), ...args);
+    },
+    fatal(context, ...args) {
+        console.error(red('FATAL: '), ...args);
+    },
+};
+let logger = defaultLogger;
+export function getLoggerFromContext(context) {
+    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),
+    };
+}
+export function setLogger(newLogger) {
+    logger = newLogger;
+}
+export function resetLogger() {
+    logger = defaultLogger;
+}
+export const 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);
+    },
+};
+export function logServerResponse(type, log, request, responseStatus) {
+    const coloredResponseStatus = responseStatus >= 500
+        ? red(responseStatus)
+        : responseStatus >= 400
+            ? yellow(responseStatus)
+            : responseStatus >= 300
+                ? lightBlue(responseStatus)
+                : green(responseStatus);
+    const fullType = type === 'str'
+        ? 'streaming SSR'
+        : type === 'rsc'
+            ? 'server components'
+            : 'buffered SSR';
+    const styledType = italic(pad(fullType, '                 '));
+    const paddedTiming = pad((getTime() - request.time).toFixed(2) + ' ms', '          ');
+    const url = type === 'rsc'
+        ? decodeURIComponent(request.url.substring(request.url.indexOf('=') + 1))
+        : request.url;
+    log.debug(`${request.method} ${styledType} ${coloredResponseStatus} ${paddedTiming} ${url}`);
+}
+function pad(str, _pad) {
+    return (str + _pad).substring(0, _pad.length);
+}

package/dist/esnext/utilities/suspense.d.ts

@@ -2,6 +2,6 @@
  * Wrap the fetch promise in a way that React Suspense understands.
  * Essentially, keep throwing something until you have legit data.
  */
-export declare function wrapPromise(promise: Promise<any>): {
-    read: () => any;
+export declare function wrapPromise<T>(promise: Promise<T>): {
+    read: () => T;
 };

package/dist/esnext/utilities/suspense.js

@@ -11,14 +11,8 @@ export function wrapPromise(promise) {
     }, (err) => {
         status = 'error';
         response = err;
-        throw err;
     });
     const read = () => {
-        /**
-         * TODO: This logic doesn't hold up when an error is thrown. For some reason.
-         * We instead throw the exception above in the suspender. We should revisit
-         * this and add a better server fetch implementation.
-         */
         switch (status) {
             case 'pending':
                 throw suspender;

package/dist/esnext/utilities/timing.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Not all environments have access to Performance.now(). This is to prevent
+ * timing side channel attacks.
+ *
+ * See: https://community.cloudflare.com/t/cloudflare-workers-how-do-i-measure-execution-time-of-my-method/69672
+ */
+export declare function getTime(): number;

package/dist/esnext/utilities/timing.js

@@ -0,0 +1,14 @@
+/**
+ * Not all environments have access to Performance.now(). This is to prevent
+ * timing side channel attacks.
+ *
+ * See: https://community.cloudflare.com/t/cloudflare-workers-how-do-i-measure-execution-time-of-my-method/69672
+ */
+export function getTime() {
+    if (typeof performance !== 'undefined' && performance.now) {
+        return performance.now();
+    }
+    else {
+        return Date.now();
+    }
+}

package/dist/esnext/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "0.7.1";
+export declare const LIB_VERSION = "0.8.3";

package/dist/esnext/version.js

@@ -1 +1 @@
-export const LIB_VERSION = '0.7.1';
+export const LIB_VERSION = '0.8.3';

package/dist/node/framework/Hydration/ServerComponentRequest.server.d.ts

@@ -7,6 +7,7 @@
  */
 export declare class ServerComponentRequest extends Request {
     cookies: Map<string, string>;
+    time: number;
     constructor(input: any);
     constructor(input: RequestInfo, init?: RequestInit);
     private parseCookies;

package/dist/node/framework/Hydration/ServerComponentRequest.server.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ServerComponentRequest = void 0;
+const timing_1 = require("../../utilities/timing");
 /**
  * This augments the `Request` object from the Fetch API:
  * @see https://developer.mozilla.org/en-US/docs/Web/API/Request
@@ -19,6 +20,7 @@ class ServerComponentRequest extends Request {
                 method: input.method,
             });
         }
+        this.time = (0, timing_1.getTime)();
         this.cookies = this.parseCookies();
     }
     parseCookies() {

package/dist/node/framework/cache.d.ts

@@ -1,5 +1,4 @@
-import type { QueryKey } from 'react-query';
-import type { CacheOptions } from '../types';
+import type { CacheOptions, QueryKey } from '../types';
 export declare function generateCacheControlHeader(options: CacheOptions): string;
 /**
  * Use a preview header during development.
@@ -9,6 +8,7 @@ export declare function generateCacheControlHeader(options: CacheOptions): strin
 export declare function getCacheControlHeader({ dev }: {
     dev?: boolean;
 }): "cache-control-preview" | "cache-control";
+export declare function hashKey(key: QueryKey): string;
 /**
  * Get an item from the cache. If a match is found, returns a tuple
  * containing the `JSON.parse` version of the response as well

package/dist/node/framework/cache.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isStale = exports.deleteItemFromCache = exports.setItemInCache = exports.getItemFromCache = exports.getCacheControlHeader = exports.generateCacheControlHeader = void 0;
+exports.isStale = exports.deleteItemFromCache = exports.setItemInCache = exports.getItemFromCache = exports.hashKey = exports.getCacheControlHeader = exports.generateCacheControlHeader = void 0;
 const runtime_1 = require("./runtime");
 const DEFAULT_SUBREQUEST_CACHE_OPTIONS = {
     maxAge: 1,
@@ -33,6 +33,7 @@ function hashKey(key) {
      */
     return rawKey.map((k) => JSON.stringify(k)).join('');
 }
+exports.hashKey = hashKey;
 /**
  * Cache API is weird. We just need a full URL, so we make one up.
  */

package/dist/node/framework/plugins/vite-plugin-hydrogen-config.d.ts

@@ -1,3 +1,3 @@
-import type { Plugin } from 'vite';
+import { Plugin } from 'vite';
 declare const _default: () => Plugin;
 export default _default;

package/dist/node/framework/plugins/vite-plugin-hydrogen-config.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = () => {
     return {
         name: 'vite-plugin-hydrogen-config',
-        config: (_, env) => ({
+        config: async (config, env) => ({
             resolve: {
                 alias: {
                     /**
@@ -18,6 +18,17 @@ exports.default = () => {
             },
             build: {
                 sourcemap: true,
+                /**
+                 * By default, SSR dedupe logic gets bundled which runs `require('module')`.
+                 * We don't want this in our workers runtime, because `require` is not supported.
+                 */
+                rollupOptions: process.env.WORKER
+                    ? {
+                        output: {
+                            format: 'es',
+                        },
+                    }
+                    : {},
             },
             ssr: {
                 external: ['isomorphic-dompurify'],
@@ -57,6 +68,7 @@ exports.default = () => {
             define: {
                 __DEV__: env.mode !== 'production',
             },
+            envPrefix: ['VITE_', 'PUBLIC_'],
         }),
     };
 };

package/dist/node/framework/plugins/vite-plugin-hydrogen-middleware.d.ts

@@ -1,4 +1,10 @@
-import type { Plugin } from 'vite';
+import { Plugin } from 'vite';
 import type { HydrogenVitePluginOptions, ShopifyConfig } from '../../types';
 declare const _default: (shopifyConfig: ShopifyConfig, pluginOptions: HydrogenVitePluginOptions) => Plugin;
 export default _default;
+declare global {
+    var Oxygen: {
+        env: Record<string, string | undefined>;
+        [key: string]: any;
+    };
+}

package/dist/node/framework/plugins/vite-plugin-hydrogen-middleware.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const vite_1 = require("vite");
 const path_1 = __importDefault(require("path"));
 const fs_1 = require("fs");
 const middleware_1 = require("../middleware");
@@ -16,12 +17,13 @@ exports.default = (shopifyConfig, pluginOptions) => {
          * loading them in an SSR context, rendering them using the `entry-server` endpoint in the
          * user's project, and injecting the static HTML into the template.
          */
-        configureServer(server) {
+        async configureServer(server) {
             const resolve = (p) => path_1.default.resolve(server.config.root, p);
             async function getIndexTemplate(url) {
                 const indexHtml = await fs_1.promises.readFile(resolve('index.html'), 'utf-8');
                 return await server.transformIndexHtml(url, indexHtml);
             }
+            await polyfillOxygenEnv(server.config);
             // The default vite middleware rewrites the URL `/graphqil` to `/index.html`
             // By running this middleware first, we avoid that.
             server.middlewares.use((0, middleware_1.graphiqlMiddleware)({
@@ -41,3 +43,15 @@ exports.default = (shopifyConfig, pluginOptions) => {
         },
     };
 };
+async function polyfillOxygenEnv(config) {
+    const env = await (0, vite_1.loadEnv)(config.mode, config.root, '');
+    const publicPrefixes = Array.isArray(config.envPrefix)
+        ? config.envPrefix
+        : [config.envPrefix || ''];
+    for (const key of Object.keys(env)) {
+        if (publicPrefixes.some((prefix) => key.startsWith(prefix))) {
+            delete env[key];
+        }
+    }
+    globalThis.Oxygen = { env };
+}

package/dist/node/framework/plugins/vite-plugin-react-server-components-shim.js

@@ -77,19 +77,7 @@ exports.default = () => {
             }
         },
     };
-    // Mitigation for upcoming minor Vite update
-    // https://github.com/vitejs/vite/pull/5253
-    // TO-DO: When the vite package is updated with the above Vite PR,
-    // clean up this function and treat `options` param as objects
-    // from this point forward
-    // Timeline: Targetting for Vite 2.7
     function isSSR(options) {
-        if (typeof options === 'boolean') {
-            return options;
-        }
-        if (typeof options === 'object') {
-            return !!options.ssr;
-        }
-        return false;
+        return !!(options === null || options === void 0 ? void 0 : options.ssr);
     }
 };

package/dist/node/handle-event.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="node" />
-import type { ServerResponse } from 'http';
+import { ServerResponse } from 'http';
 import type { ServerComponentRequest } from './framework/Hydration/ServerComponentRequest.server';
 import { RuntimeContext } from './framework/runtime';
 interface HydrogenFetchEvent {

package/dist/node/handle-event.js

@@ -29,7 +29,8 @@ async function handleEvent(event, { request, entrypoint, indexTemplate, assetHan
         throw new Error(`entry-server.jsx could not be loaded. This likely occurred because of a Vite compilation error.\n` +
             `Please check your server logs for more information.`);
     }
-    const isStreamable = streamableResponse && isStreamableRequest(url);
+    const userAgent = request.headers.get('user-agent');
+    const isStreamable = streamableResponse && !isBotUA(url, userAgent);
     /**
      * Stream back real-user responses, but for bots/etc,
      * use `render` instead. This is because we need to inject <head>
@@ -37,7 +38,12 @@ async function handleEvent(event, { request, entrypoint, indexTemplate, assetHan
      */
     if (isStreamable) {
         if (isReactHydrationRequest) {
-            hydrate(url, { context: {}, request, response: streamableResponse, dev });
+            hydrate(url, {
+                context: {},
+                request,
+                response: streamableResponse,
+                dev,
+            });
         }
         else {
             stream(url, {
@@ -50,7 +56,12 @@ async function handleEvent(event, { request, entrypoint, indexTemplate, assetHan
         }
         return;
     }
-    const { body, bodyAttributes, htmlAttributes, componentResponse, ...head } = await render(url, { request, context: {}, isReactHydrationRequest, dev });
+    const { body, bodyAttributes, htmlAttributes, componentResponse, ...head } = await render(url, {
+        request,
+        context: {},
+        isReactHydrationRequest,
+        dev,
+    });
     const headers = componentResponse.headers;
     /**
      * TODO: Also add `Vary` headers for `accept-language` and any other keys
@@ -89,13 +100,6 @@ async function handleEvent(event, { request, entrypoint, indexTemplate, assetHan
     return response;
 }
 exports.default = handleEvent;
-function isStreamableRequest(url) {
-    /**
-     * TODO: Add UA detection.
-     */
-    const isBot = url.searchParams.has('_bot');
-    return !isBot;
-}
 /**
  * Generate the contents of the `head` tag, and update the existing `<title>` tag
  * if one exists, and if a title is passed.
@@ -120,3 +124,57 @@ function generateHeadTag(head) {
         return `<head>${headHtml}</head>`;
     };
 }
+/**
+ * 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)));
+}
+/**
+ * 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');

package/dist/node/types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="node" />
-import type { ServerResponse } from 'http';
+import { ServerResponse } from 'http';
 import type { ServerComponentResponse } from './framework/Hydration/ServerComponentResponse.server';
 import type { ServerComponentRequest } from './framework/Hydration/ServerComponentRequest.server';
 import type { Metafield, Image, MediaContentType } from './graphql/types/types';
@@ -78,6 +78,7 @@ export interface Measurement {
     unit: string;
     value: number;
 }
+export declare type QueryKey = string | readonly unknown[];
 export interface CacheOptions {
     private?: boolean;
     maxAge?: number;

package/dist/node/utilities/fetch.js

@@ -41,6 +41,9 @@ function fetchBuilder(request) {
             headers,
             method: clonedRequest.method,
         });
+        if (!response.ok) {
+            throw response;
+        }
         const data = await response.json();
         return data;
     };
@@ -55,12 +58,6 @@ function graphqlRequestBody(query, variables) {
 }
 exports.graphqlRequestBody = graphqlRequestBody;
 function decodeShopifyId(id) {
-    if (!id.startsWith('gid://')) {
-        id =
-            typeof btoa !== 'undefined'
-                ? btoa(id)
-                : Buffer.from(id, 'base64').toString('ascii');
-    }
     if (!id.startsWith('gid://')) {
         throw new Error('invalid Shopify ID');
     }

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

@@ -8,3 +8,4 @@ export { isServer } from './isServer';
 export { getMeasurementAsParts, getMeasurementAsString } from './measurement';
 export { parseMetafieldValue } from './parseMetafieldValue';
 export { fetchBuilder, graphqlRequestBody, decodeShopifyId } from './fetch';
+export { getTime } from './timing';

package/dist/node/utilities/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.decodeShopifyId = exports.graphqlRequestBody = exports.fetchBuilder = exports.parseMetafieldValue = exports.getMeasurementAsString = exports.getMeasurementAsParts = exports.isServer = exports.isClient = exports.flattenConnection = exports.wrapPromise = exports.loadScript = exports.useEmbeddedVideoUrl = exports.addParametersToEmbeddedVideoUrl = exports.shopifyImageLoader = exports.getShopifyImageDimensions = exports.useImageUrl = exports.addImageSizeParametersToUrl = void 0;
+exports.getTime = exports.decodeShopifyId = exports.graphqlRequestBody = exports.fetchBuilder = exports.parseMetafieldValue = exports.getMeasurementAsString = exports.getMeasurementAsParts = exports.isServer = exports.isClient = exports.flattenConnection = exports.wrapPromise = exports.loadScript = exports.useEmbeddedVideoUrl = exports.addParametersToEmbeddedVideoUrl = exports.shopifyImageLoader = exports.getShopifyImageDimensions = exports.useImageUrl = exports.addImageSizeParametersToUrl = void 0;
 var image_size_1 = require("./image_size");
 Object.defineProperty(exports, "addImageSizeParametersToUrl", { enumerable: true, get: function () { return image_size_1.addImageSizeParametersToUrl; } });
 Object.defineProperty(exports, "useImageUrl", { enumerable: true, get: function () { return image_size_1.useImageUrl; } });
@@ -28,3 +28,5 @@ var fetch_1 = require("./fetch");
 Object.defineProperty(exports, "fetchBuilder", { enumerable: true, get: function () { return fetch_1.fetchBuilder; } });
 Object.defineProperty(exports, "graphqlRequestBody", { enumerable: true, get: function () { return fetch_1.graphqlRequestBody; } });
 Object.defineProperty(exports, "decodeShopifyId", { enumerable: true, get: function () { return fetch_1.decodeShopifyId; } });
+var timing_1 = require("./timing");
+Object.defineProperty(exports, "getTime", { enumerable: true, get: function () { return timing_1.getTime; } });

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

@@ -2,6 +2,6 @@
  * Wrap the fetch promise in a way that React Suspense understands.
  * Essentially, keep throwing something until you have legit data.
  */
-export declare function wrapPromise(promise: Promise<any>): {
-    read: () => any;
+export declare function wrapPromise<T>(promise: Promise<T>): {
+    read: () => T;
 };

package/dist/node/utilities/suspense.js

@@ -14,14 +14,8 @@ function wrapPromise(promise) {
     }, (err) => {
         status = 'error';
         response = err;
-        throw err;
     });
     const read = () => {
-        /**
-         * TODO: This logic doesn't hold up when an error is thrown. For some reason.
-         * We instead throw the exception above in the suspender. We should revisit
-         * this and add a better server fetch implementation.
-         */
         switch (status) {
             case 'pending':
                 throw suspender;

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

@@ -0,0 +1,7 @@
+/**
+ * Not all environments have access to Performance.now(). This is to prevent
+ * timing side channel attacks.
+ *
+ * See: https://community.cloudflare.com/t/cloudflare-workers-how-do-i-measure-execution-time-of-my-method/69672
+ */
+export declare function getTime(): number;

package/dist/node/utilities/timing.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTime = void 0;
+/**
+ * Not all environments have access to Performance.now(). This is to prevent
+ * timing side channel attacks.
+ *
+ * See: https://community.cloudflare.com/t/cloudflare-workers-how-do-i-measure-execution-time-of-my-method/69672
+ */
+function getTime() {
+    if (typeof performance !== 'undefined' && performance.now) {
+        return performance.now();
+    }
+    else {
+        return Date.now();
+    }
+}
+exports.getTime = getTime;

package/dist/node/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "0.7.1";
+export declare const LIB_VERSION = "0.8.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.7.1';
+exports.LIB_VERSION = '0.8.3';

package/dist/worker/framework/Hydration/ServerComponentRequest.server.d.ts

@@ -7,6 +7,7 @@
  */
 export declare class ServerComponentRequest extends Request {
     cookies: Map<string, string>;
+    time: number;
     constructor(input: any);
     constructor(input: RequestInfo, init?: RequestInit);
     private parseCookies;

package/dist/worker/framework/Hydration/ServerComponentRequest.server.js

@@ -1,3 +1,4 @@
+import { getTime } from '../../utilities/timing';
 /**
  * This augments the `Request` object from the Fetch API:
  * @see https://developer.mozilla.org/en-US/docs/Web/API/Request
@@ -16,6 +17,7 @@ export class ServerComponentRequest extends Request {
                 method: input.method,
             });
         }
+        this.time = getTime();
         this.cookies = this.parseCookies();
     }
     parseCookies() {

package/dist/worker/framework/cache.d.ts

@@ -1,5 +1,4 @@
-import type { QueryKey } from 'react-query';
-import type { CacheOptions } from '../types';
+import type { CacheOptions, QueryKey } from '../types';
 export declare function generateCacheControlHeader(options: CacheOptions): string;
 /**
  * Use a preview header during development.
@@ -9,6 +8,7 @@ export declare function generateCacheControlHeader(options: CacheOptions): strin
 export declare function getCacheControlHeader({ dev }: {
     dev?: boolean;
 }): "cache-control-preview" | "cache-control";
+export declare function hashKey(key: QueryKey): string;
 /**
  * Get an item from the cache. If a match is found, returns a tuple
  * containing the `JSON.parse` version of the response as well

package/dist/worker/framework/cache.js

@@ -21,7 +21,7 @@ export function generateCacheControlHeader(options) {
 export function getCacheControlHeader({ dev }) {
     return dev ? 'cache-control-preview' : 'cache-control';
 }
-function hashKey(key) {
+export function hashKey(key) {
     const rawKey = key instanceof Array ? key : [key];
     /**
      * TODO: Smarter hash

package/dist/worker/handle-event.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="@types/node" />
-import type { ServerResponse } from 'http';
+import { ServerResponse } from 'http';
 import type { ServerComponentRequest } from './framework/Hydration/ServerComponentRequest.server';
 import { RuntimeContext } from './framework/runtime';
 interface HydrogenFetchEvent {