@shopify/hydrogen 0.22.1 → 0.23.0

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

@@ -0,0 +1,11 @@
+export declare type DevServerMessage = {
+    type: 'warn';
+    data: string;
+} | {
+    type: 'error';
+    data: {
+        message: string;
+        stack: string;
+    };
+};
+export declare function sendMessageToClient(message: DevServerMessage): void;

package/dist/node/utilities/devtools.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sendMessageToClient = void 0;
+function sendMessageToClient(message) {
+    // @ts-ignore
+    const devServer = globalThis.__viteDevServer;
+    if (devServer) {
+        devServer.ws.send({
+            type: 'custom',
+            event: 'hydrogen',
+            data: message,
+        });
+    }
+}
+exports.sendMessageToClient = sendMessageToClient;

package/dist/node/utilities/graphql-tag.d.ts

@@ -0,0 +1 @@
+export declare const gql: (s: TemplateStringsArray, ...args: any[]) => string;

package/dist/node/utilities/graphql-tag.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.gql = void 0;
+const gql = (s, ...args) => s
+    .map((ss, i) => `${ss}${args[i] || ''}`)
+    .join('')
+    .replace(/\s+#.*$/gm, '') // Remove GQL comments
+    .replace(/\s+/gm, ' ') // Minify spaces
+    .trim();
+exports.gql = gql;

package/dist/node/utilities/graphql-tracker.d.ts

@@ -0,0 +1,17 @@
+import type { ASTNode } from 'graphql';
+export declare const TIMEOUT_MS = 2000;
+declare type TrackerParams = {
+    query: ASTNode | string;
+    data: {
+        data: unknown;
+    };
+    onUnusedData?: (params: {
+        queryName: string;
+        properties: string[];
+    }) => void;
+};
+export declare function injectGraphQLTracker({ query, data, onUnusedData, }: TrackerParams): (check?: (params: {
+    queryName: string;
+    properties: string[];
+}) => void) => void;
+export {};

package/dist/node/utilities/graphql-tracker.js

@@ -0,0 +1,130 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.injectGraphQLTracker = exports.TIMEOUT_MS = void 0;
+const graphql_tag_1 = __importDefault(require("graphql-tag"));
+exports.TIMEOUT_MS = 2000;
+function injectGraphQLTracker({ query, data, onUnusedData, }) {
+    var _a;
+    if (__HYDROGEN_DEV__ && typeof query === 'string') {
+        query = (0, graphql_tag_1.default) `${query}`;
+    }
+    const info = convertQueryToResolveInfo(query);
+    // E.g. ['shop.stuff.myString']
+    const requestedFields = getFieldList(info.nodes, info.fragments);
+    // Remove the last key of each path to avoid proxying primitive
+    // values. Reverse order to avoid accessing already defined
+    // proxies (i.e. handle child properties before parent properties)
+    // E.g. `shop.stuff.myString` => `shop.stuff`
+    const uniqueFieldPaths = [
+        ...new Set(requestedFields.map((path) => path.split('.').slice(0, -1).join('.'))),
+    ].reverse();
+    const queryName = ((_a = findOperationDefinition(query).name) === null || _a === void 0 ? void 0 : _a.value) || '';
+    // Record fields that are read in the proxy to compare later.
+    const readFieldsMap = {};
+    let isCheckedOnce = false;
+    const checkFields = (check = onUnusedData) => {
+        isCheckedOnce = true;
+        const properties = requestedFields
+            .filter((prop) => !readFieldsMap[prop] && !prop.endsWith('.__typename'))
+            .map((prop) => prop.replace(/\.edges\./g, '.').replace(/\.node\./g, '.'));
+        if (properties.length > 0) {
+            return check({ queryName, properties });
+        }
+    };
+    let readTimeout;
+    uniqueFieldPaths.forEach((fieldPath) => deepTransform(data, 'data.' + fieldPath, (value) => {
+        if (typeof value !== 'object' || value === null)
+            return value;
+        return new Proxy(value, {
+            get(target, prop) {
+                if (typeof prop === 'string') {
+                    const fullPath = fieldPath + '.' + prop;
+                    if (!readFieldsMap[fullPath]) {
+                        readFieldsMap[fullPath] = true;
+                        if (onUnusedData && !isCheckedOnce) {
+                            clearTimeout(readTimeout);
+                            readTimeout = setTimeout(checkFields, exports.TIMEOUT_MS);
+                        }
+                    }
+                }
+                return target[prop];
+            },
+        });
+    }));
+    return checkFields;
+}
+exports.injectGraphQLTracker = injectGraphQLTracker;
+function findOperationDefinition(query) {
+    return query.definitions.find((def) => def.kind === 'OperationDefinition');
+}
+function convertQueryToResolveInfo(query) {
+    var _a;
+    return {
+        // Root of the selection nodes
+        nodes: (_a = findOperationDefinition(query)) === null || _a === void 0 ? void 0 : _a.selectionSet.selections,
+        // Collection of all the fragments in this query
+        fragments: query.definitions.reduce((acc, current) => {
+            if (current.kind === 'FragmentDefinition') {
+                acc[current.name.value] = current;
+            }
+            return acc;
+        }, {}),
+    };
+}
+/**
+ * Extracts the selection fields from a query AST as a list of dot-separated paths.
+ * @param selectionNodes - Selection nodes from the AST
+ * @param fragments - Fragments from the AST
+ * @param path - Accummulated path for recursion
+ * @returns A plain JS array representing the selection fields
+ */
+function getFieldList(nodes, fragments = {}, path = '') {
+    return nodes.reduce((acc, node) => {
+        var _a, _b, _c, _d, _e;
+        let nextPath = path;
+        let nextNodes;
+        if (node.kind === 'FragmentSpread') {
+            nextNodes = fragments[node.name.value].selectionSet.selections;
+        }
+        else if (node.kind === 'InlineFragment') {
+            nextNodes = (_a = node.selectionSet) === null || _a === void 0 ? void 0 : _a.selections;
+        }
+        else if (node.kind === 'Field') {
+            nextNodes = (_b = node.selectionSet) === null || _b === void 0 ? void 0 : _b.selections;
+            const name = (_d = (_c = node.alias) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : (_e = node.name) === null || _e === void 0 ? void 0 : _e.value;
+            nextPath = path ? `${path}.${name}` : name;
+            if (!nextNodes)
+                acc.push(nextPath); // This is a leaf
+        }
+        if (nextNodes)
+            acc.push(...getFieldList(nextNodes, fragments, nextPath));
+        return acc;
+    }, []);
+}
+/**
+ * Transform a nested property in a given object (in place).
+ * @param input - Object to transform
+ * @param path - Dot-separated path to the nested property
+ * @param valueTransform - Transformer function
+ */
+function deepTransform(input, path, valueTransform) {
+    const keys = Array.isArray(path) ? path : path.split('.');
+    let obj = input;
+    let key;
+    for (let index = 0; !!obj && index < keys.length; index++) {
+        key = keys[index];
+        if (index === keys.length - 1) {
+            // Last property, transform value
+            obj[key] = valueTransform(obj[key]);
+        }
+        else if (Array.isArray(obj[key])) {
+            // We've found an array in the middle, run this recursively
+            const subKeys = keys.slice(index + 1);
+            obj[key].forEach((v) => deepTransform(v, subKeys, valueTransform));
+        }
+        obj = obj[key];
+    }
+}

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

@@ -3,7 +3,7 @@ export { YouTube, Vimeo, addParametersToEmbeddedVideoUrl, useEmbeddedVideoUrl, }
 export { loadScript } from './load_script';
 export { wrapPromise } from './suspense';
 export { flattenConnection } from './flattenConnection';
-export { isClient } from './isClient';
+export { isBrowser } from './isBrowser';
 export { isServer } from './isServer';
 export { getMeasurementAsParts, getMeasurementAsString } from './measurement';
 export { parseMetafieldValue } from './parseMetafieldValue';

package/dist/node/utilities/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.htmlEncode = 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.addImageSizeParametersToUrl = void 0;
+exports.htmlEncode = exports.getTime = exports.decodeShopifyId = exports.graphqlRequestBody = exports.fetchBuilder = exports.parseMetafieldValue = exports.getMeasurementAsString = exports.getMeasurementAsParts = exports.isServer = exports.isBrowser = exports.flattenConnection = exports.wrapPromise = exports.loadScript = exports.useEmbeddedVideoUrl = exports.addParametersToEmbeddedVideoUrl = exports.shopifyImageLoader = exports.getShopifyImageDimensions = 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, "getShopifyImageDimensions", { enumerable: true, get: function () { return image_size_1.getShopifyImageDimensions; } });
@@ -14,8 +14,8 @@ var suspense_1 = require("./suspense");
 Object.defineProperty(exports, "wrapPromise", { enumerable: true, get: function () { return suspense_1.wrapPromise; } });
 var flattenConnection_1 = require("./flattenConnection");
 Object.defineProperty(exports, "flattenConnection", { enumerable: true, get: function () { return flattenConnection_1.flattenConnection; } });
-var isClient_1 = require("./isClient");
-Object.defineProperty(exports, "isClient", { enumerable: true, get: function () { return isClient_1.isClient; } });
+var isBrowser_1 = require("./isBrowser");
+Object.defineProperty(exports, "isBrowser", { enumerable: true, get: function () { return isBrowser_1.isBrowser; } });
 var isServer_1 = require("./isServer");
 Object.defineProperty(exports, "isServer", { enumerable: true, get: function () { return isServer_1.isServer; } });
 var measurement_1 = require("./measurement");

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

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

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

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

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

@@ -0,0 +1,4 @@
+/** The `isClient` utility is a function that returns a boolean indicating
+ * if the code was run in the browser.
+ */
+export declare function isBrowser(): boolean;

package/dist/node/utilities/isBrowser/isBrowser.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isBrowser = void 0;
+/** The `isClient` utility is a function that returns a boolean indicating
+ * if the code was run in the browser.
+ */
+function isBrowser() {
+    return typeof document !== 'undefined';
+}
+exports.isBrowser = isBrowser;

package/dist/node/utilities/isServer/isServer.js

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isServer = void 0;
-const isClient_1 = require("../isClient");
+const isBrowser_1 = require("../isBrowser");
 /** The `isServer` utility is a function that returns a `boolean` indicating
  * if the code was run on the server.
  */
 function isServer() {
-    return !(0, isClient_1.isClient)();
+    return !(0, isBrowser_1.isBrowser)();
 }
 exports.isServer = isServer;

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

@@ -1,4 +1,4 @@
-export { log, setLogger, setLoggerOptions, getLoggerWithContext, Logger, logServerResponse, resetLogger, } from './log';
+export { log, setLogger, getLoggerWithContext, Logger, logServerResponse, } 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

@@ -1,13 +1,11 @@
 "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;
+exports.logQueryTimings = exports.collectQueryTimings = exports.logCacheApiStatus = exports.logCacheControlHeaders = exports.collectQueryCacheControlHeaders = exports.logServerResponse = exports.getLoggerWithContext = 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; } });

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

@@ -1,10 +1,10 @@
-import { ServerComponentRequest } from '../../framework/Hydration/ServerComponentRequest.server';
-import { ServerComponentResponse } from '../../framework/Hydration/ServerComponentResponse.server';
+import { HydrogenRequest } from '../../foundation/HydrogenRequest/HydrogenRequest.server';
+import { HydrogenResponse } from '../../foundation/HydrogenResponse/HydrogenResponse.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;
+export declare function collectQueryCacheControlHeaders(request: HydrogenRequest, queryKey: QueryKey, cacheControlHeader: string | null): void;
+export declare function logCacheControlHeaders(type: RenderType, request: HydrogenRequest, response?: HydrogenResponse): void;

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

@@ -1,4 +1,4 @@
-import { ServerComponentRequest } from '../../framework/Hydration/ServerComponentRequest.server';
+import { HydrogenRequest } from '../../foundation/HydrogenRequest/HydrogenRequest.server';
 import { QueryKey } from '../../types';
 import type { RenderType } from './log';
 export declare type TimingType = 'requested' | 'resolved' | 'rendered' | 'preload';
@@ -8,5 +8,5 @@ export declare type QueryTiming = {
     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;
+export declare function collectQueryTimings(request: HydrogenRequest, queryKey: QueryKey, timingType: TimingType, duration?: number): void;
+export declare function logQueryTimings(type: RenderType, request: HydrogenRequest): void;

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

@@ -1,10 +1,16 @@
-import { ServerComponentRequest } from '../../framework/Hydration/ServerComponentRequest.server';
+import { HydrogenRequest } from '../../foundation/HydrogenRequest/HydrogenRequest.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.
+ */
+declare type LoggerMethod = (...args: Array<any>) => void | Promise<any>;
 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;
+    trace: LoggerMethod;
+    debug: LoggerMethod;
+    warn: LoggerMethod;
+    error: LoggerMethod;
+    fatal: LoggerMethod;
     options: () => LoggerOptions;
 }
 export declare type LoggerOptions = {
@@ -13,10 +19,10 @@ export declare type LoggerOptions = {
     showQueryTiming?: boolean;
     showUnusedQueryProperties?: boolean;
 };
+export declare type LoggerConfig = Partial<Exclude<Logger, 'options'>> & LoggerOptions;
 export declare type RenderType = 'str' | 'rsc' | 'ssr' | 'api';
+export declare function getLoggerWithContext(context: Partial<HydrogenRequest>): Logger;
 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 function logServerResponse(type: RenderType, request: ServerComponentRequest, responseStatus: number): void;
+export declare function setLogger(config?: LoggerConfig): void;
+export declare function logServerResponse(type: RenderType, request: HydrogenRequest, responseStatus: number): void;
+export {};

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.logServerResponse = exports.resetLogger = exports.setLoggerOptions = exports.setLogger = exports.getLoggerWithContext = exports.log = void 0;
+exports.logServerResponse = exports.setLogger = exports.log = exports.getLoggerWithContext = void 0;
 const kolorist_1 = require("kolorist");
 const timing_1 = require("../timing");
 const utils_1 = require("./utils");
@@ -23,34 +23,41 @@ const defaultLogger = {
     },
     options: () => ({}),
 };
-globalThis.__logger = defaultLogger;
-function buildLogger() {
+let currentLogger = defaultLogger;
+function doLog(method, request, ...args) {
+    var _a, _b, _c;
+    const maybePromise = currentLogger[method](request, ...args);
+    if (maybePromise instanceof Promise) {
+        (_c = (_b = (_a = request === null || request === void 0 ? void 0 : request.ctx) === null || _a === void 0 ? void 0 : _a.runtime) === null || _b === void 0 ? void 0 : _b.waitUntil) === null || _c === void 0 ? void 0 : _c.call(_b, maybePromise);
+    }
+}
+function getLoggerWithContext(context) {
     return {
-        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(),
+        trace: (...args) => doLog('trace', context, ...args),
+        debug: (...args) => doLog('debug', context, ...args),
+        warn: (...args) => doLog('warn', context, ...args),
+        error: (...args) => doLog('error', context, ...args),
+        fatal: (...args) => doLog('fatal', context, ...args),
+        options: () => currentLogger.options(),
     };
 }
-exports.log = buildLogger.call({});
-function getLoggerWithContext(context = {}) {
-    return buildLogger.call(context);
-}
 exports.getLoggerWithContext = getLoggerWithContext;
-function setLogger(newLogger) {
-    globalThis.__logger = newLogger;
+exports.log = getLoggerWithContext({});
+function setLogger(config) {
+    if (!config) {
+        currentLogger = defaultLogger;
+        return;
+    }
+    const options = {};
+    currentLogger = { ...defaultLogger, ...config, options: () => options };
+    for (const key of Object.keys(config)) {
+        if (!(key in defaultLogger)) {
+            delete currentLogger[key];
+            options[key] = config[key];
+        }
+    }
 }
 exports.setLogger = setLogger;
-function setLoggerOptions(options) {
-    globalThis.__logger.options = () => options;
-}
-exports.setLoggerOptions = setLoggerOptions;
-function resetLogger() {
-    globalThis.__logger = defaultLogger;
-}
-exports.resetLogger = resetLogger;
 const SERVER_RESPONSE_MAP = {
     str: 'streaming SSR',
     rsc: 'Server Components',

package/dist/node/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "0.22.1";
+export declare const LIB_VERSION = "0.23.0";

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.22.1';
+exports.LIB_VERSION = '0.23.0';

package/package.json

@@ -7,7 +7,7 @@
   "engines": {
     "node": ">=14"
   },
-  "version": "0.22.1",
+  "version": "0.23.0",
   "description": "Modern custom Shopify storefronts",
   "license": "MIT",
   "main": "dist/esnext/index.js",
@@ -72,6 +72,7 @@
     "@types/node-fetch": "^2.5.9",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.5",
+    "@types/set-cookie-parser": "^2.4.2",
     "@types/uuid": "^8.3.4",
     "@types/ws": "^8.2.0",
     "babel-loader": "^8.2.2",
@@ -117,6 +118,7 @@
     "path-to-regexp": "^6.2.0",
     "react-error-boundary": "^3.1.3",
     "react-helmet-async": "^1.2.3",
+    "set-cookie-parser": "^2.5.0",
     "uuid": "^8.3.2",
     "vite-plugin-inspect": "^0.3.6",
     "web-streams-polyfill": "^3.2.0",