@shopify/hydrogen 0.24.0 → 0.26.0

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

@@ -1,130 +0,0 @@
-"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/hash.d.ts

@@ -1,2 +0,0 @@
-import { QueryKey } from '../types';
-export declare function hashKey(key: QueryKey): string;

package/dist/node/utilities/hash.js

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.hashKey = void 0;
-function hashKey(key) {
-    const rawKey = key instanceof Array ? key : [key];
-    /**
-     * TODO: Smarter hash
-     */
-    return rawKey.map((k) => JSON.stringify(k)).join('');
-}
-exports.hashKey = hashKey;

package/dist/node/utilities/html-encoding.d.ts

@@ -1 +0,0 @@
-export declare function htmlEncode(html: string): string;

package/dist/node/utilities/html-encoding.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.htmlEncode = void 0;
-function htmlEncode(html) {
-    return html
-        .replace(/&/g, '&')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;')
-        .replace(/'/g, '&#39;');
-}
-exports.htmlEncode = htmlEncode;

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

@@ -1,12 +0,0 @@
-import type { Image as ImageType } from '../storefront-api-types';
-import type { PartialDeep } from 'type-fest';
-import type { ShopifyLoaderOptions, ShopifyLoaderParams } from '../components/Image';
-/**
- * Adds image size parameters to an image URL hosted by Shopify's CDN
- */
-export declare function addImageSizeParametersToUrl({ src, width, height, crop, scale, }: ShopifyLoaderParams): string;
-export declare function shopifyImageLoader(params: ShopifyLoaderParams): string;
-export declare function getShopifyImageDimensions(image: Pick<PartialDeep<ImageType>, 'altText' | 'url' | 'id' | 'width' | 'height'>, options?: ShopifyLoaderOptions): {
-    width: import("../storefront-api-types").Maybe<number> | undefined;
-    height: import("../storefront-api-types").Maybe<number> | undefined;
-};

package/dist/node/utilities/image_size.js

@@ -1,68 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getShopifyImageDimensions = exports.shopifyImageLoader = exports.addImageSizeParametersToUrl = void 0;
-// TODO: Are there other CDNs missing from here?
-const PRODUCTION_CDN_HOSTNAMES = [
-    'cdn.shopify.com',
-    'cdn.shopifycdn.net',
-    'shopify-assets.shopifycdn.com',
-    'shopify-assets.shopifycdn.net',
-];
-const LOCAL_CDN_HOSTNAMES = ['spin.dev'];
-const ALL_CDN_HOSTNAMES = [...PRODUCTION_CDN_HOSTNAMES, ...LOCAL_CDN_HOSTNAMES];
-/**
- * Adds image size parameters to an image URL hosted by Shopify's CDN
- */
-function addImageSizeParametersToUrl({ src, width, height, crop, scale, }) {
-    const newUrl = new URL(src);
-    width && newUrl.searchParams.append('width', width.toString());
-    height && newUrl.searchParams.append('height', height.toString());
-    crop && newUrl.searchParams.append('crop', crop);
-    scale && newUrl.searchParams.append('scale', scale.toString());
-    return newUrl.toString();
-}
-exports.addImageSizeParametersToUrl = addImageSizeParametersToUrl;
-function shopifyImageLoader(params) {
-    const newSrc = new URL(params.src);
-    const isShopifyServedImage = ALL_CDN_HOSTNAMES.some((allowedHostname) => newSrc.hostname.endsWith(allowedHostname));
-    if (!isShopifyServedImage ||
-        (!params.width && !params.height && !params.crop && !params.scale)) {
-        return params.src;
-    }
-    return addImageSizeParametersToUrl(params);
-}
-exports.shopifyImageLoader = shopifyImageLoader;
-function getShopifyImageDimensions(image, options) {
-    // Storefront API could return null dimension values for images that are not hosted on Shopify CDN
-    // The API dimensions references the image's intrinstic/natural dimensions and provides image aspect ratio information
-    const apiWidth = image.width;
-    const apiHeight = image.height;
-    if (apiWidth && apiHeight && ((options === null || options === void 0 ? void 0 : options.width) || (options === null || options === void 0 ? void 0 : options.height))) {
-        const optionWidth = (options === null || options === void 0 ? void 0 : options.width)
-            ? parseInt(options.width.toString(), 10)
-            : undefined;
-        const optionHeight = (options === null || options === void 0 ? void 0 : options.height)
-            ? parseInt(options.height.toString(), 10)
-            : undefined;
-        // Use option defined width & height
-        if (optionWidth && optionHeight) {
-            return { width: optionWidth, height: optionHeight };
-        }
-        // Calculate width from aspect ratio
-        if (!optionWidth && optionHeight) {
-            return {
-                width: Math.round((apiWidth / apiHeight) * optionHeight),
-                height: optionHeight,
-            };
-        }
-        // Calculate height from aspect ratio
-        if (optionWidth && !optionHeight) {
-            return {
-                width: optionWidth,
-                height: Math.round((apiHeight / apiWidth) * optionWidth),
-            };
-        }
-    }
-    return { width: apiWidth, height: apiHeight };
-}
-exports.getShopifyImageDimensions = getShopifyImageDimensions;

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

@@ -1,12 +0,0 @@
-export { addImageSizeParametersToUrl, getShopifyImageDimensions, shopifyImageLoader, } from './image_size';
-export { YouTube, Vimeo, addParametersToEmbeddedVideoUrl, useEmbeddedVideoUrl, } from './video_parameters';
-export { loadScript } from './load_script';
-export { wrapPromise } from './suspense';
-export { flattenConnection } from './flattenConnection';
-export { isBrowser } from './isBrowser';
-export { isServer } from './isServer';
-export { getMeasurementAsParts, getMeasurementAsString } from './measurement';
-export { parseMetafieldValue } from './parseMetafieldValue';
-export { fetchBuilder, graphqlRequestBody, decodeShopifyId } from './fetch';
-export { getTime } from './timing';
-export { htmlEncode } from './html-encoding';

package/dist/node/utilities/index.js

@@ -1,33 +0,0 @@
-"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.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; } });
-Object.defineProperty(exports, "shopifyImageLoader", { enumerable: true, get: function () { return image_size_1.shopifyImageLoader; } });
-var video_parameters_1 = require("./video_parameters");
-Object.defineProperty(exports, "addParametersToEmbeddedVideoUrl", { enumerable: true, get: function () { return video_parameters_1.addParametersToEmbeddedVideoUrl; } });
-Object.defineProperty(exports, "useEmbeddedVideoUrl", { enumerable: true, get: function () { return video_parameters_1.useEmbeddedVideoUrl; } });
-var load_script_1 = require("./load_script");
-Object.defineProperty(exports, "loadScript", { enumerable: true, get: function () { return load_script_1.loadScript; } });
-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 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");
-Object.defineProperty(exports, "getMeasurementAsParts", { enumerable: true, get: function () { return measurement_1.getMeasurementAsParts; } });
-Object.defineProperty(exports, "getMeasurementAsString", { enumerable: true, get: function () { return measurement_1.getMeasurementAsString; } });
-var parseMetafieldValue_1 = require("./parseMetafieldValue");
-Object.defineProperty(exports, "parseMetafieldValue", { enumerable: true, get: function () { return parseMetafieldValue_1.parseMetafieldValue; } });
-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; } });
-var html_encoding_1 = require("./html-encoding");
-Object.defineProperty(exports, "htmlEncode", { enumerable: true, get: function () { return html_encoding_1.htmlEncode; } });

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

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

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

@@ -1,5 +0,0 @@
-"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

@@ -1,4 +0,0 @@
-/** 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

@@ -1,10 +0,0 @@
-"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/index.d.ts

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

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

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

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

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

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

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.isServer = void 0;
-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, isBrowser_1.isBrowser)();
-}
-exports.isServer = isServer;

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

@@ -1,3 +0,0 @@
-export declare function loadScript(src: string, options?: {
-    module?: boolean;
-}): Promise<boolean>;

package/dist/node/utilities/load_script.js

@@ -1,27 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.loadScript = void 0;
-const SCRIPTS_LOADED = {};
-function loadScript(src, options) {
-    const isScriptLoaded = SCRIPTS_LOADED[src];
-    if (isScriptLoaded) {
-        return isScriptLoaded;
-    }
-    const promise = new Promise((resolve, reject) => {
-        const script = document.createElement('script');
-        if (options === null || options === void 0 ? void 0 : options.module) {
-            script.type = 'module';
-        }
-        script.src = src;
-        script.onload = () => {
-            resolve(true);
-        };
-        script.onerror = () => {
-            reject(false);
-        };
-        document.body.appendChild(script);
-    });
-    SCRIPTS_LOADED[src] = promise;
-    return promise;
-}
-exports.loadScript = loadScript;

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

@@ -1,4 +0,0 @@
-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,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-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, "getLoggerWithContext", { enumerable: true, get: function () { return log_1.getLoggerWithContext; } });
-Object.defineProperty(exports, "logServerResponse", { enumerable: true, get: function () { return log_1.logServerResponse; } });
-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

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

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

@@ -1,17 +0,0 @@
-"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;
-    }
-    let queryName;
-    if (/shopify\.dev/.test(url)) {
-        queryName = (0, utils_1.findQueryName)(url);
-    }
-    _1.log.debug((0, kolorist_1.gray)(`[Cache] ${status === null || status === void 0 ? void 0 : status.padEnd(8)} ${queryName ? `query ${queryName}` : decodeURIComponent(url)}`));
-}
-exports.logCacheApiStatus = logCacheApiStatus;

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

@@ -1,10 +0,0 @@
-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: HydrogenRequest, queryKey: QueryKey, cacheControlHeader: string | null): void;
-export declare function logCacheControlHeaders(type: RenderType, request: HydrogenRequest, response?: HydrogenResponse): void;

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

@@ -1,35 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.logCacheControlHeaders = exports.collectQueryCacheControlHeaders = void 0;
-const hash_1 = require("../hash");
-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, hash_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

@@ -1,12 +0,0 @@
-import { HydrogenRequest } from '../../foundation/HydrogenRequest/HydrogenRequest.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: HydrogenRequest, queryKey: QueryKey, timingType: TimingType, duration?: number): void;
-export declare function logQueryTimings(type: RenderType, request: HydrogenRequest): void;

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

@@ -1,88 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.logQueryTimings = exports.collectQueryTimings = void 0;
-const hash_1 = require("../hash");
-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, hash_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) => {
-            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;
-            const duration = query.duration;
-            log.debug(color(`│ ${`${(query.timestamp - requestStartTime).toFixed(2)}ms`.padEnd(10)} ${loadColor(TIMING_MAPPING[query.timingType].padEnd(10))} ${query.name}${query.timingType === 'resolved'
-                ? ` (Took ${duration === null || duration === void 0 ? void 0 : duration.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,28 +0,0 @@
-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: LoggerMethod;
-    debug: LoggerMethod;
-    warn: LoggerMethod;
-    error: LoggerMethod;
-    fatal: LoggerMethod;
-    options: () => LoggerOptions;
-}
-export declare type LoggerOptions = {
-    showCacheControlHeader?: boolean;
-    showCacheApiStatus?: boolean;
-    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 setLogger(config?: LoggerConfig): void;
-export declare function logServerResponse(type: RenderType, request: HydrogenRequest, responseStatus: number): void;
-export {};