@shopify/hydrogen 0.14.0 → 0.16.1

package/dist/esnext/foundation/Analytics/ClientAnalytics.js

@@ -0,0 +1,91 @@
+import { getNamedspacedEventname } from './utils';
+import { isServer } from '../../utilities';
+import { eventNames } from './const';
+import { EVENT_PATHNAME } from '../../constants';
+const subscribers = {};
+let pageAnalyticsData = {};
+const guardDupEvents = {};
+const USAGE_ERROR = 'ClientAnalytics should only be used within the useEffect callback or event handlers';
+function isInvokedFromServer() {
+    if (isServer()) {
+        console.warn(USAGE_ERROR);
+        return true;
+    }
+    return false;
+}
+function pushToPageAnalyticsData(data, namespace) {
+    if (isInvokedFromServer())
+        return;
+    if (namespace) {
+        pageAnalyticsData[namespace] = Object.assign({}, pageAnalyticsData[namespace] || {}, data);
+    }
+    else {
+        pageAnalyticsData = Object.assign({}, pageAnalyticsData, data);
+    }
+}
+function getPageAnalyticsData() {
+    if (isInvokedFromServer())
+        return;
+    return pageAnalyticsData;
+}
+function resetPageAnalyticsData() {
+    if (isInvokedFromServer())
+        return;
+    pageAnalyticsData = {};
+}
+function publish(eventname, guardDup = false, payload) {
+    if (isInvokedFromServer())
+        return;
+    const namedspacedEventname = getNamedspacedEventname(eventname);
+    const subs = subscribers[namedspacedEventname];
+    const combinedPayload = Object.assign({}, pageAnalyticsData, payload);
+    // De-dup events due to re-renders
+    if (guardDup) {
+        const eventGuardTimeout = guardDupEvents[namedspacedEventname];
+        if (eventGuardTimeout) {
+            clearTimeout(eventGuardTimeout);
+        }
+        const namespacedTimeout = setTimeout(() => {
+            publishEvent(subs, combinedPayload);
+        }, 100);
+        guardDupEvents[namedspacedEventname] = namespacedTimeout;
+    }
+    else {
+        publishEvent(subs, combinedPayload);
+    }
+}
+function publishEvent(subs, payload) {
+    if (subs) {
+        Object.keys(subs).forEach((key) => {
+            subs[key](payload);
+        });
+    }
+}
+function subscribe(eventname, callbackFunction) {
+    if (isInvokedFromServer())
+        return { unsubscribe: () => { } };
+    const namedspacedEventname = getNamedspacedEventname(eventname);
+    const subs = subscribers[namedspacedEventname];
+    if (!subs) {
+        subscribers[namedspacedEventname] = {};
+    }
+    const subscriberId = Date.now().toString();
+    subscribers[namedspacedEventname][subscriberId] = callbackFunction;
+    return {
+        unsubscribe: () => {
+            delete subscribers[namedspacedEventname][subscriberId];
+        },
+    };
+}
+function pushToServer(init, searchParam) {
+    return fetch(`${EVENT_PATHNAME}${searchParam ? `?${searchParam}` : ''}`, init);
+}
+export const ClientAnalytics = {
+    pushToPageAnalyticsData,
+    getPageAnalyticsData,
+    resetPageAnalyticsData,
+    publish,
+    subscribe,
+    pushToServer,
+    eventNames,
+};

package/dist/esnext/foundation/Analytics/ServerAnalyticsRoute.server.d.ts

@@ -0,0 +1,2 @@
+import type { ServerAnalyticsConnector } from '../../types';
+export declare function ServerAnalyticsRoute(request: Request, serverAnalyticsConnectors?: Array<ServerAnalyticsConnector>): Response;

package/dist/esnext/foundation/Analytics/ServerAnalyticsRoute.server.js

@@ -0,0 +1,33 @@
+import { log } from '../../utilities/log';
+export function ServerAnalyticsRoute(request, serverAnalyticsConnectors) {
+    if (request.headers.get('Content-Length') === '0') {
+        serverAnalyticsConnectors === null || serverAnalyticsConnectors === void 0 ? void 0 : serverAnalyticsConnectors.forEach((connector) => {
+            connector.request(request);
+        });
+    }
+    else if (request.headers.get('Content-Type') === 'application/json') {
+        Promise.resolve(request.json())
+            .then((data) => {
+            serverAnalyticsConnectors === null || serverAnalyticsConnectors === void 0 ? void 0 : serverAnalyticsConnectors.forEach((connector) => {
+                connector.request(request, data, 'json');
+            });
+        })
+            .catch((error) => {
+            log.warn('Fail to resolve server analytics: ', error);
+        });
+    }
+    else {
+        Promise.resolve(request.text())
+            .then((data) => {
+            serverAnalyticsConnectors === null || serverAnalyticsConnectors === void 0 ? void 0 : serverAnalyticsConnectors.forEach((connector) => {
+                connector.request(request, data, 'text');
+            });
+        })
+            .catch((error) => {
+            log.warn('Fail to resolve server analytics: ', error);
+        });
+    }
+    return new Response(null, {
+        status: 200,
+    });
+}

package/dist/esnext/foundation/Analytics/const.d.ts

@@ -0,0 +1,8 @@
+export declare const eventNames: {
+    PAGE_VIEW: string;
+    VIEWED_PRODUCT: string;
+    ADD_TO_CART: string;
+    REMOVE_FROM_CART: string;
+    UPDATE_CART: string;
+    DISCOUNT_CODE_UPDATED: string;
+};

package/dist/esnext/foundation/Analytics/const.js

@@ -0,0 +1,8 @@
+export const eventNames = {
+    PAGE_VIEW: 'page-view',
+    VIEWED_PRODUCT: 'viewed-product',
+    ADD_TO_CART: 'add-to-cart',
+    REMOVE_FROM_CART: 'remove-from-cart',
+    UPDATE_CART: 'update-cart',
+    DISCOUNT_CODE_UPDATED: 'discount-code-updated',
+};

package/dist/esnext/foundation/Analytics/hook.d.ts

@@ -0,0 +1 @@
+export declare function useServerAnalytics(data?: any): any;

package/dist/esnext/foundation/Analytics/hook.js

@@ -0,0 +1,7 @@
+import { useServerRequest } from '../ServerRequestProvider';
+export function useServerAnalytics(data) {
+    const request = useServerRequest();
+    if (data)
+        request.ctx.analyticsData = Object.assign({}, request.ctx.analyticsData, data);
+    return request.ctx.analyticsData;
+}

package/dist/esnext/foundation/Analytics/index.d.ts

@@ -0,0 +1,2 @@
+export { useServerAnalytics } from './hook';
+export { ClientAnalytics } from './ClientAnalytics';

package/dist/esnext/foundation/Analytics/index.js

@@ -0,0 +1,2 @@
+export { useServerAnalytics } from './hook';
+export { ClientAnalytics } from './ClientAnalytics';

package/dist/esnext/foundation/Analytics/types.d.ts

@@ -0,0 +1,5 @@
+export declare type Subscriber = {
+    unsubscribe: () => void;
+};
+export declare type SubscriberFunction = (payload: any) => void;
+export declare type Subscribers = Record<string, Record<string, SubscriberFunction>>;

package/dist/esnext/foundation/Analytics/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esnext/foundation/Analytics/utils.d.ts

@@ -0,0 +1 @@
+export declare function getNamedspacedEventname(eventname: string): string;

package/dist/esnext/foundation/Analytics/utils.js

@@ -0,0 +1,8 @@
+import { eventNames } from './const';
+const RESERVED_EVENT_NAMES = Object.values(eventNames);
+export function getNamedspacedEventname(eventname) {
+    // Any event name that is not in the reserved space will be prefix with `c-`
+    return RESERVED_EVENT_NAMES.indexOf(eventname) === -1
+        ? `c-${eventname}`
+        : eventname;
+}

package/dist/esnext/foundation/Boomerang/Boomerang.client.js

@@ -4,7 +4,9 @@ import { useShop } from '../useShop';
 const URL = 'https://cdn.shopify.com/shopifycloud/boomerang/shopify-boomerang-hydrogen.min.js';
 export function Boomerang({ pageTemplate }) {
     const { storeDomain } = useShop();
-    const templateName = pageTemplate !== null ? pageTemplate.toLowerCase() : 'not-set';
+    const templateName = pageTemplate && pageTemplate !== null
+        ? pageTemplate.toLowerCase()
+        : 'not-set';
     useEffect(() => {
         (function () {
             function boomerangAddVar() {

package/dist/esnext/foundation/Route/Route.server.js

@@ -3,6 +3,7 @@ import { useServerRequest } from '../ServerRequestProvider';
 import { matchPath } from '../../utilities/matchPath';
 import { Boomerang } from '../Boomerang/Boomerang.client';
 import { RouteParamsProvider } from '../useRouteParams/RouteParamsProvider.client';
+import { useServerAnalytics } from '../Analytics';
 /**
  * The `Route` component is used to set up a route in Hydrogen that's independent of the file system. Routes are
  * matched in the order that they're defined.
@@ -25,6 +26,9 @@ export function Route({ path, page }) {
         request.ctx.router.routeRendered = true;
         request.ctx.router.routeParams = match.params;
         const name = (_a = page === null || page === void 0 ? void 0 : page.type) === null || _a === void 0 ? void 0 : _a.name;
+        useServerAnalytics({
+            templateName: name,
+        });
         return (React.createElement(RouteParamsProvider, { routeParams: match.params },
             cloneElement(page, { params: match.params || {}, ...serverProps }),
             name ? React.createElement(Boomerang, { pageTemplate: name }) : null));

package/dist/esnext/foundation/Router/BrowserRouter.client.js

@@ -1,36 +1,28 @@
 import { createBrowserHistory } from 'history';
-import React, { createContext, useContext, useMemo, useState, useEffect, } from 'react';
+import React, { createContext, useContext, useMemo, useState, useEffect, useLayoutEffect, useCallback, } from 'react';
 import { META_ENV_SSR } from '../ssr-interop';
 import { useServerState } from '../useServerState';
 export const RouterContext = createContext({});
-let currentPath = '';
 let isFirstLoad = true;
+const positions = {};
 export const BrowserRouter = ({ history: pHistory, children, }) => {
     if (META_ENV_SSR)
         return React.createElement(React.Fragment, null, children);
     const history = useMemo(() => pHistory || createBrowserHistory(), [pHistory]);
     const [location, setLocation] = useState(history.location);
     const { pending, serverState, setServerState } = useServerState();
-    useEffect(() => {
-        // The app has just loaded
-        if (isFirstLoad)
-            isFirstLoad = false;
-        // A navigation event has just happened
-        else if (!pending && currentPath !== serverState.pathname) {
-            window.scrollTo(0, 0);
-        }
-        currentPath = serverState.pathname;
-    }, [pending]);
-    useEffect(() => {
+    useScrollRestoration(location, pending, serverState);
+    useLayoutEffect(() => {
         const unlisten = history.listen(({ location: newLocation }) => {
+            positions[location.key] = window.scrollY;
             setServerState({
                 pathname: newLocation.pathname,
-                search: location.search || undefined,
+                search: location.search,
             });
             setLocation(newLocation);
         });
         return () => unlisten();
-    }, [history]);
+    }, [history, location]);
     return (React.createElement(RouterContext.Provider, { value: {
             history,
             location,
@@ -46,3 +38,64 @@ export function useRouter() {
 export function useLocation() {
     return useRouter().location;
 }
+/**
+ * Run a callback before browser unload.
+ */
+function useBeforeUnload(callback) {
+    React.useEffect(() => {
+        window.addEventListener('beforeunload', callback);
+        return () => {
+            window.removeEventListener('beforeunload', callback);
+        };
+    }, [callback]);
+}
+function useScrollRestoration(location, pending, serverState) {
+    /**
+     * Browsers have an API for scroll restoration. We wait for the page to load first,
+     * in case the browser is able to restore scroll position automatically, and then
+     * set it to manual mode.
+     */
+    useEffect(() => {
+        window.history.scrollRestoration = 'manual';
+    }, []);
+    /**
+     * If the page is reloading, allow the browser to handle its own scroll restoration.
+     */
+    useBeforeUnload(useCallback(() => {
+        window.history.scrollRestoration = 'auto';
+    }, []));
+    useLayoutEffect(() => {
+        // The app has just loaded
+        if (isFirstLoad) {
+            isFirstLoad = false;
+            return;
+        }
+        const position = positions[location.key];
+        /**
+         * When serverState gets updated, `pending` is true while the fetch is in progress.
+         * When that resolves, the serverState is updated. We should wait until the internal
+         * location pointer and serverState match, and pending is false, to do any scrolling.
+         */
+        const finishedNavigating = !pending &&
+            location.pathname === serverState.pathname &&
+            location.search === serverState.search;
+        if (!finishedNavigating) {
+            return;
+        }
+        // If there is a location hash, scroll to it
+        if (location.hash) {
+            const element = document.querySelector(location.hash);
+            if (element) {
+                element.scrollIntoView();
+                return;
+            }
+        }
+        // If we have a matching position, scroll to it
+        if (position) {
+            window.scrollTo(0, position);
+            return;
+        }
+        // Scroll to the top of new pages
+        window.scrollTo(0, 0);
+    }, [location, pending, serverState]);
+}

package/dist/esnext/foundation/ServerRequestProvider/ServerRequestProvider.js

@@ -1,6 +1,6 @@
 import React, { createContext, useContext } from 'react';
 import { getTime } from '../../utilities/timing';
-import { hashKey } from '../../framework/cache';
+import { hashKey } from '../../utilities/hash';
 import { collectQueryTimings } from '../../utilities/log';
 // Context to inject current request in SSR
 const RequestContextSSR = createContext(null);

package/dist/esnext/foundation/ShopifyProvider/types.d.ts

@@ -1,13 +1,10 @@
 import type { CountryCode, LanguageCode } from '../../storefront-api-types';
 import type { ReactNode } from 'react';
 import type { ShopifyConfig } from '../../types';
-export declare type ShopifyContextValue = {
+export interface ShopifyContextValue extends Omit<ShopifyConfig, 'defaultLocale'> {
     locale: `${LanguageCode}-${CountryCode}`;
     languageCode: `${LanguageCode}`;
-    storeDomain: ShopifyConfig['storeDomain'];
-    storefrontToken: ShopifyConfig['storefrontToken'];
-    storefrontApiVersion: string;
-};
+}
 export declare type ShopifyProviderProps = {
     /** The contents of the `shopify.config.js` file. */
     shopifyConfig: ShopifyConfig;

package/dist/esnext/foundation/fetchSync/client/fetchSync.d.ts

@@ -0,0 +1,10 @@
+import type { FetchResponse } from '../types';
+/**
+ * Fetch a URL for use in a client component Suspense boundary.
+ */
+export declare function fetchSync(url: string, options?: RequestInit): FetchResponse;
+/**
+ * Preload a URL for use in  a client component Suspense boundary.
+ * Useful for placing higher in the tree to avoid waterfalls.
+ */
+export declare function preload(url: string, options?: RequestInit): void;

package/dist/esnext/foundation/fetchSync/client/fetchSync.js

@@ -0,0 +1,27 @@
+import { suspendFunction, preloadFunction } from '../../../utilities/suspense';
+/**
+ * Fetch a URL for use in a client component Suspense boundary.
+ */
+export function fetchSync(url, options) {
+    const [text, response] = suspendFunction([url, options], async () => {
+        const response = await globalThis.fetch(url, options);
+        const text = await response.text();
+        return [text, response];
+    });
+    return {
+        response,
+        json: () => JSON.parse(text),
+        text: () => text,
+    };
+}
+/**
+ * Preload a URL for use in  a client component Suspense boundary.
+ * Useful for placing higher in the tree to avoid waterfalls.
+ */
+export function preload(url, options) {
+    preloadFunction([url, options], async () => {
+        const response = await globalThis.fetch(url, options);
+        const text = await response.text();
+        return [text, response];
+    });
+}

package/dist/esnext/foundation/fetchSync/server/fetchSync.d.ts

@@ -0,0 +1,8 @@
+import { type HydrogenUseQueryOptions } from '../../useQuery/hooks';
+import type { FetchResponse } from '../types';
+/**
+ * The `fetchSync` hook makes third-party API requests and is the recommended way to make simple fetch calls on the server.
+ * It's designed similar to the [Web API's `fetch`](https://developer.mozilla.org/en-US/docs/Web/API/fetch), only in a way
+ * that supports [Suspense](https://reactjs.org/docs/concurrent-mode-suspense.html).
+ */
+export declare function fetchSync(url: string, options?: Omit<RequestInit, 'cache'> & HydrogenUseQueryOptions): FetchResponse;

package/dist/esnext/foundation/fetchSync/server/fetchSync.js

@@ -0,0 +1,27 @@
+import { useQuery } from '../../useQuery/hooks';
+/**
+ * The `fetchSync` hook makes third-party API requests and is the recommended way to make simple fetch calls on the server.
+ * It's designed similar to the [Web API's `fetch`](https://developer.mozilla.org/en-US/docs/Web/API/fetch), only in a way
+ * that supports [Suspense](https://reactjs.org/docs/concurrent-mode-suspense.html).
+ */
+export function fetchSync(url, options) {
+    const { cache, preload, shouldCacheResponse, ...requestInit } = options !== null && options !== void 0 ? options : {};
+    const { data: useQueryResponse, error } = useQuery([url, requestInit], async () => {
+        const response = await globalThis.fetch(url, requestInit);
+        const text = await response.text();
+        return [text, response];
+    }, {
+        cache,
+        preload,
+        shouldCacheResponse,
+    });
+    if (error) {
+        throw error;
+    }
+    const [data, response] = useQueryResponse;
+    return {
+        response,
+        json: () => JSON.parse(data),
+        text: () => data,
+    };
+}

package/dist/esnext/foundation/fetchSync/types.d.ts

@@ -0,0 +1,5 @@
+export interface FetchResponse {
+    response: Response;
+    json: () => any;
+    text: () => any;
+}

package/dist/esnext/foundation/fetchSync/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esnext/foundation/useQuery/hooks.d.ts

@@ -15,9 +15,11 @@ export interface HydrogenUseQueryOptions {
 }
 /**
  * The `useQuery` hook executes an asynchronous operation like `fetch` in a way that
- * supports [Suspense](https://reactjs.org/docs/concurrent-mode-suspense.html). It's based
- * on [react-query](https://react-query.tanstack.com/reference/useQuery). You can use this
+ * supports [Suspense](https://reactjs.org/docs/concurrent-mode-suspense.html). You can use this
  * hook to call any third-party APIs from a server component.
+ *
+ * \> Note:
+ * \> If you're making a simple fetch call on the server, then we recommend using the [`fetchSync`](/api/hydrogen/hooks/global/fetchsync) hook instead.
  */
 export declare function useQuery<T>(
 /** A string or array to uniquely identify the current query. */

package/dist/esnext/foundation/useQuery/hooks.js

@@ -1,12 +1,15 @@
-import { getLoggerWithContext, collectQueryCacheControlHeaders, collectQueryTimings, } from '../../utilities/log';
+import { getLoggerWithContext, collectQueryCacheControlHeaders, collectQueryTimings, logCacheApiStatus, } from '../../utilities/log';
 import { deleteItemFromCache, generateSubRequestCacheControlHeader, getItemFromCache, isStale, setItemInCache, } from '../../framework/cache';
+import { hashKey } from '../../utilities/hash';
 import { runDelayedFunction } from '../../framework/runtime';
 import { useRequestCacheData, useServerRequest } from '../ServerRequestProvider';
 /**
  * The `useQuery` hook executes an asynchronous operation like `fetch` in a way that
- * supports [Suspense](https://reactjs.org/docs/concurrent-mode-suspense.html). It's based
- * on [react-query](https://react-query.tanstack.com/reference/useQuery). You can use this
+ * supports [Suspense](https://reactjs.org/docs/concurrent-mode-suspense.html). You can use this
  * hook to call any third-party APIs from a server component.
+ *
+ * \> Note:
+ * \> If you're making a simple fetch call on the server, then we recommend using the [`fetchSync`](/api/hydrogen/hooks/global/fetchsync) hook instead.
  */
 export function useQuery(
 /** A string or array to uniquely identify the current query. */
@@ -45,6 +48,7 @@ function cachedQueryFnBuilder(key, queryFn, queryOptions) {
         // to prevent losing the current React cycle.
         const request = useServerRequest();
         const log = getLoggerWithContext(request);
+        const hashedKey = hashKey(key);
         const cacheResponse = await getItemFromCache(key);
         async function generateNewOutput() {
             return await queryFn();
@@ -55,11 +59,11 @@ function cachedQueryFnBuilder(key, queryFn, queryOptions) {
             /**
              * Important: Do this async
              */
-            if (isStale(response)) {
-                log.debug('[useQuery] cache stale; generating new response in background');
+            if (isStale(response, resolvedQueryOptions === null || resolvedQueryOptions === void 0 ? void 0 : resolvedQueryOptions.cache)) {
+                logCacheApiStatus('STALE', hashedKey);
                 const lockKey = `lock-${key}`;
                 runDelayedFunction(async () => {
-                    log.debug(`[stale regen] fetching cache lock`);
+                    logCacheApiStatus('UPDATING', hashedKey);
                     const lockExists = await getItemFromCache(lockKey);
                     if (lockExists)
                         return;

package/dist/esnext/foundation/useUrl/useUrl.js

@@ -1,4 +1,6 @@
+import { useMemo } from 'react';
 import { RSC_PATHNAME } from '../../constants';
+import { useLocation } from '../Router/BrowserRouter.client';
 import { useEnvContext, META_ENV_SSR } from '../ssr-interop';
 /**
  * The `useUrl` hook retrieves the current URL in a server or client component.
@@ -14,5 +16,10 @@ export function useUrl() {
         }
         return new URL(serverUrl);
     }
-    return new URL(window.location.href);
+    /**
+     * We return a `URL` object instead of passing through `location` because
+     * the URL object contains important info like hostname, etc.
+     */
+    const location = useLocation();
+    return useMemo(() => new URL(window.location.href), [location]);
 }

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

@@ -34,6 +34,7 @@ export declare class ServerComponentRequest extends Request {
         queryCacheControl: Array<QueryCacheControlHeaders>;
         queryTimings: Array<QueryTiming>;
         preloadQueries: PreloadQueriesByURL;
+        analyticsData: any;
         router: RouterContextData;
         buyerIpHeader?: string;
         [key: string]: any;

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

@@ -1,5 +1,5 @@
 import { getTime } from '../../utilities/timing';
-import { hashKey } from '../cache';
+import { hashKey } from '../../utilities/hash';
 import { HelmetData as HeadData } from 'react-helmet-async';
 import { RSC_PATHNAME } from '../../constants';
 let reqCounter = 0; // For debugging
@@ -27,8 +27,11 @@ export class ServerComponentRequest extends Request {
         else {
             super(getUrlFromNodeRequest(input), getInitFromNodeRequest(input));
         }
+        const referer = this.headers.get('referer');
         this.time = getTime();
         this.id = generateId();
+        this.preloadURL =
+            this.isRscRequest() && referer && referer !== '' ? referer : this.url;
         this.ctx = {
             cache: new Map(),
             head: new HeadData({}),
@@ -39,18 +42,21 @@ export class ServerComponentRequest extends Request {
             },
             queryCacheControl: [],
             queryTimings: [],
+            analyticsData: {
+                url: this.url,
+                normalizedRscUrl: this.preloadURL,
+            },
             preloadQueries: new Map(),
         };
         this.cookies = this.parseCookies();
-        const referer = this.headers.get('referer');
-        this.preloadURL =
-            this.isRscRequest() && referer && referer !== '' ? referer : this.url;
     }
     parseCookies() {
         const cookieString = this.headers.get('cookie') || '';
         return new Map(cookieString
             .split(';')
-            .map((chunk) => chunk.trim().split(/=(.+)/)));
+            .map((chunk) => chunk.trim())
+            .filter((chunk) => chunk !== '')
+            .map((chunk) => chunk.split(/=(.+)/)));
     }
     isRscRequest() {
         const url = new URL(this.url);

package/dist/esnext/framework/cache/in-memory.js

@@ -8,7 +8,7 @@ export class InMemoryCache {
         this.store = new Map();
     }
     put(request, response) {
-        logCacheApiStatus('PUT', request.url);
+        logCacheApiStatus('PUT-dev', request.url);
         this.store.set(request.url, {
             value: response,
             date: new Date(),
@@ -18,7 +18,7 @@ export class InMemoryCache {
         var _a, _b;
         const match = this.store.get(request.url);
         if (!match) {
-            logCacheApiStatus('MISS', request.url);
+            logCacheApiStatus('MISS-dev', request.url);
             return;
         }
         const { value, date } = match;
@@ -28,7 +28,7 @@ export class InMemoryCache {
         const age = (new Date().valueOf() - date.valueOf()) / 1000;
         const isMiss = age > maxAge + swr;
         if (isMiss) {
-            logCacheApiStatus('MISS', request.url);
+            logCacheApiStatus('MISS-dev', request.url);
             this.store.delete(request.url);
             return;
         }
@@ -36,7 +36,7 @@ export class InMemoryCache {
         const headers = new Headers(value.headers);
         headers.set('cache', isStale ? 'STALE' : 'HIT');
         headers.set('date', date.toUTCString());
-        logCacheApiStatus(headers.get('cache'), request.url);
+        logCacheApiStatus(`${headers.get('cache')}-dev`, request.url);
         const response = new Response(value.body, {
             headers,
         });
@@ -44,7 +44,7 @@ export class InMemoryCache {
     }
     delete(request) {
         this.store.delete(request.url);
-        logCacheApiStatus('DELETE', request.url);
+        logCacheApiStatus('DELETE-dev', request.url);
     }
     keys(request) {
         const cacheKeys = [];

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

@@ -1,6 +1,5 @@
 import type { QueryKey, CachingStrategy } from '../types';
 export declare function generateSubRequestCacheControlHeader(userCacheOptions?: CachingStrategy): string;
-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
@@ -15,4 +14,4 @@ export declare function deleteItemFromCache(key: QueryKey): Promise<void>;
 /**
  * Manually check the response to see if it's stale.
  */
-export declare function isStale(response: Response): boolean;
+export declare function isStale(response: Response, userCacheOptions?: CachingStrategy): boolean;