@shopify/hydrogen 0.0.0-experimental-20220526194818

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

@@ -0,0 +1,123 @@
+import gqlDev from 'graphql-tag';
+export const TIMEOUT_MS = 2000;
+export function injectGraphQLTracker({ query, data, onUnusedData, }) {
+    var _a;
+    if (__DEV__ && typeof query === 'string') {
+        query = gqlDev `${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, TIMEOUT_MS);
+                        }
+                    }
+                }
+                return target[prop];
+            },
+        });
+    }));
+    return checkFields;
+}
+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/esnext/utilities/hash.d.ts

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

package/dist/esnext/utilities/hash.js

@@ -0,0 +1,7 @@
+export function hashKey(key) {
+    const rawKey = key instanceof Array ? key : [key];
+    /**
+     * TODO: Smarter hash
+     */
+    return rawKey.map((k) => JSON.stringify(k)).join('');
+}

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

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

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

@@ -0,0 +1,16 @@
+export function htmlEncode(html) {
+    return html
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+export function htmlDecode(text) {
+    return text
+        .replace(/&lt;/g, '<')
+        .replace(/&gt;/g, '>')
+        .replace(/&quot;/g, '"')
+        .replace(/&#39;/g, "'")
+        .replace(/&amp;/g, '&');
+}

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

@@ -0,0 +1,12 @@
+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/esnext/utilities/image_size.js

@@ -0,0 +1,62 @@
+// 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
+ */
+export 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();
+}
+export 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);
+}
+export 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 };
+}

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

@@ -0,0 +1,12 @@
+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 { isClient } from './isClient';
+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, htmlDecode } from './html-encoding';

package/dist/esnext/utilities/index.js

@@ -0,0 +1,12 @@
+export { addImageSizeParametersToUrl, getShopifyImageDimensions, shopifyImageLoader, } from './image_size';
+export { addParametersToEmbeddedVideoUrl, useEmbeddedVideoUrl, } from './video_parameters';
+export { loadScript } from './load_script';
+export { wrapPromise } from './suspense';
+export { flattenConnection } from './flattenConnection';
+export { isClient } from './isClient';
+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, htmlDecode } from './html-encoding';

package/dist/esnext/utilities/isClient/index.d.ts

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

package/dist/esnext/utilities/isClient/index.js

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

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

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

package/dist/esnext/utilities/isClient/isClient.js

@@ -0,0 +1,6 @@
+/** The `isClient` utility is a function that returns a boolean indicating
+ * if the code was run on the client.
+ */
+export function isClient() {
+    return typeof window !== 'undefined';
+}

package/dist/esnext/utilities/isServer/index.d.ts

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

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

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

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

@@ -0,0 +1,4 @@
+/** 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/esnext/utilities/isServer/isServer.js

@@ -0,0 +1,7 @@
+import { isClient } from '../isClient';
+/** The `isServer` utility is a function that returns a `boolean` indicating
+ * if the code was run on the server.
+ */
+export function isServer() {
+    return !isClient();
+}

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

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

package/dist/esnext/utilities/load_script.js

@@ -0,0 +1,23 @@
+const SCRIPTS_LOADED = {};
+export 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;
+}

package/dist/esnext/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/esnext/utilities/log/index.js

@@ -0,0 +1,4 @@
+export { log, setLogger, setLoggerOptions, getLoggerWithContext, 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/esnext/utilities/log/log-cache-api-status.d.ts

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

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

@@ -0,0 +1,13 @@
+import { findQueryName } from './utils';
+import { gray } from 'kolorist';
+import { log } from '.';
+export function logCacheApiStatus(status, url) {
+    if (!log.options().showCacheApiStatus) {
+        return;
+    }
+    let queryName;
+    if (/shopify\.dev/.test(url)) {
+        queryName = findQueryName(url);
+    }
+    log.debug(gray(`[Cache] ${status === null || status === void 0 ? void 0 : status.padEnd(8)} ${queryName ? `query ${queryName}` : decodeURIComponent(url)}`));
+}

package/dist/esnext/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/esnext/utilities/log/log-cache-header.js

@@ -0,0 +1,30 @@
+import { hashKey } from '../hash';
+import { findQueryName, parseUrl } from './utils';
+import { gray } from 'kolorist';
+import { getLoggerWithContext } from './log';
+const color = gray;
+export function collectQueryCacheControlHeaders(request, queryKey, cacheControlHeader) {
+    request.ctx.queryCacheControl.push({
+        name: findQueryName(hashKey(queryKey)),
+        header: cacheControlHeader,
+    });
+}
+export function logCacheControlHeaders(type, request, response) {
+    const log = getLoggerWithContext(request);
+    if (!log.options().showCacheControlHeader) {
+        return;
+    }
+    log.debug(color(`┌── Cache control header for ${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('└──'));
+}

package/dist/esnext/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/esnext/utilities/log/log-query-timeline.js

@@ -0,0 +1,83 @@
+import { hashKey } from '../hash';
+import { findQueryName, parseUrl } from './utils';
+import { gray, red, yellow, green } from 'kolorist';
+import { getLoggerWithContext } from './log';
+import { getTime } from '../timing';
+const color = gray;
+const TIMING_MAPPING = {
+    requested: 'Requested',
+    rendered: 'Rendered',
+    resolved: 'Resolved',
+    preload: 'Preload',
+};
+export function collectQueryTimings(request, queryKey, timingType, duration) {
+    request.ctx.queryTimings.push({
+        name: findQueryName(hashKey(queryKey)),
+        timingType,
+        timestamp: getTime(),
+        duration,
+    });
+}
+export function logQueryTimings(type, request) {
+    const log = getLoggerWithContext(request);
+    if (!log.options().showQueryTiming) {
+        return;
+    }
+    log.debug(color(`┌── Query timings for ${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' ? 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 ? yellow : red;
+                log.debug(`${color(`│ `)}${warningColor(`Suspense waterfall detected`)}`);
+            }
+        });
+        const unusedQueries = Object.keys(detectSuspenseWaterfall);
+        if (unusedQueries.length > 0) {
+            unusedQueries.forEach((queryName) => {
+                log.debug(`${color(`│ `)}${yellow(`Unused query detected: ${queryName}`)}`);
+            });
+        }
+        Object.keys(detectMultipleDataLoad).forEach((queryName) => {
+            const count = detectMultipleDataLoad[queryName];
+            if (count > 1) {
+                log.debug(`${color(`│ `)}${yellow(`Multiple data loads detected: ${queryName}`)}`);
+            }
+        });
+    }
+    log.debug(color('└──'));
+}

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

@@ -0,0 +1,22 @@
+import { ServerComponentRequest } from '../../framework/Hydration/ServerComponentRequest.server';
+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 type LoggerOptions = {
+    showCacheControlHeader?: boolean;
+    showCacheApiStatus?: boolean;
+    showQueryTiming?: boolean;
+    showUnusedQueryProperties?: 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 function logServerResponse(type: RenderType, request: ServerComponentRequest, responseStatus: number): void;

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

@@ -0,0 +1,66 @@
+import { yellow, red, green, italic, lightBlue } from 'kolorist';
+import { getTime } from '../timing';
+import { parseUrl } from './utils';
+const defaultLogger = {
+    trace(context, ...args) {
+        // Re-enable following line to show trace debugging information
+        // console.log(context.id, ...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);
+    },
+    options: () => ({}),
+};
+globalThis.__logger = defaultLogger;
+function buildLogger() {
+    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(),
+    };
+}
+export const log = buildLogger.call({});
+export function getLoggerWithContext(context = {}) {
+    return buildLogger.call(context);
+}
+export function setLogger(newLogger) {
+    globalThis.__logger = newLogger;
+}
+export function setLoggerOptions(options) {
+    globalThis.__logger.options = () => options;
+}
+export function resetLogger() {
+    globalThis.__logger = defaultLogger;
+}
+const SERVER_RESPONSE_MAP = {
+    str: 'streaming SSR',
+    rsc: 'Server Components',
+    ssr: 'buffered SSR',
+};
+export function logServerResponse(type, request, responseStatus) {
+    const log = getLoggerWithContext(request);
+    const coloredResponseStatus = responseStatus >= 500
+        ? red(responseStatus)
+        : responseStatus >= 400
+            ? yellow(responseStatus)
+            : responseStatus >= 300
+                ? lightBlue(responseStatus)
+                : green(responseStatus);
+    const fullType = SERVER_RESPONSE_MAP[type] || type;
+    const styledType = italic(fullType.padEnd(17));
+    const paddedTiming = ((getTime() - request.time).toFixed(2) + ' ms').padEnd(10);
+    const url = parseUrl(type, request.url);
+    log.debug(`${request.method} ${styledType} ${coloredResponseStatus} ${paddedTiming} ${url}`);
+}

package/dist/esnext/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/esnext/utilities/log/utils.js

@@ -0,0 +1,16 @@
+export function findQueryName(key) {
+    const decodeKey = decodeURIComponent(key);
+    if (key.length < 100) {
+        return key.replace('"__QUERY_CACHE_ID__"', '').replace(/"/g, '');
+    }
+    const match = decodeKey.match(/query ([^\s()]*)\s?(|\(\{)/);
+    if (match && match.length > 1) {
+        return match[1];
+    }
+    return '<unknown>';
+}
+export function parseUrl(type, url) {
+    return type === 'rsc'
+        ? decodeURIComponent(url.substring(url.indexOf('=') + 1))
+        : url;
+}

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

@@ -0,0 +1,10 @@
+import { TokensToRegexpOptions } from 'path-to-regexp';
+interface MatchPathOptions extends TokensToRegexpOptions {
+    path?: string;
+    exact?: boolean;
+}
+/**
+ * Public API for matching a URL pathname to a path.
+ */
+export declare function matchPath(pathname: string, options?: MatchPathOptions): any;
+export {};