npm - @shopify/hydrogen - Versions diffs - 0.18.0 → 0.21.0 - Mend

@shopify/hydrogen 0.18.0 → 0.21.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (145) hide show

package/dist/esnext/entry-server.js CHANGED Viewed

@@ -18,6 +18,7 @@ import { Analytics } from './foundation/Analytics/Analytics.server';
 import { ServerAnalyticsRoute } from './foundation/Analytics/ServerAnalyticsRoute.server';
 import { getSyncSessionApi } from './foundation/session/session';
 import { parseJSON } from './utilities/parse';
+import { htmlEncode } from './utilities';
 const DOCTYPE = '<!DOCTYPE html>';
 const CONTENT_TYPE = 'Content-Type';
 const HTML_CONTENT_TYPE = 'text/html; charset=UTF-8';
@@ -63,7 +64,10 @@ export const renderHydrogen = (App, hydrogenConfig) => {
                     : apiResponse;
             }
         }
-        const isStreamable = !isBotUA(url, request.headers.get('user-agent')) &&
+        const isStreamable = (hydrogenConfig.enableStreaming
+            ? hydrogenConfig.enableStreaming(request)
+            : true) &&
+            !isBotUA(url, request.headers.get('user-agent')) &&
             (!!streamableResponse || (await isStreamingSupported()));
         let template = typeof indexTemplate === 'function'
             ? await indexTemplate(url.toString())
@@ -142,11 +146,7 @@ async function render(url, { App, request, template, componentResponse, nonce, l
     headers.set(CONTENT_TYPE, HTML_CONTENT_TYPE);
     html = applyHtmlHead(html, request.ctx.head, template);
     if (flight) {
-        html = html.replace('</body>', () => `${flightContainer({
-            init: true,
-            nonce,
-            chunk: flight,
-        })}</body>`);
+        html = html.replace('</body>', () => flightContainer(flight) + '</body>');
     }
     postRequestTasks('ssr', status, request, componentResponse);
     return new Response(html, {
@@ -174,12 +174,10 @@ async function stream(url, { App, request, response, componentResponse, template
     const rscToScriptTagReadable = new ReadableStream({
         start(controller) {
             log.trace('rsc start chunks');
-            let init = true;
             const encoder = new TextEncoder();
             bufferReadableStream(rscReadable.getReader(), (chunk) => {
-                const scriptTag = flightContainer({ init, chunk, nonce });
-                controller.enqueue(encoder.encode(scriptTag));
-                init = false;
+                const metaTag = flightContainer(chunk);
+                controller.enqueue(encoder.encode(metaTag));
             }).then(() => {
                 log.trace('rsc finish chunks');
                 return controller.close();
@@ -370,34 +368,15 @@ async function hydrate(url, { App, log, request, response, isStreamable, compone
         request,
         response: componentResponse,
     });
-    if (__WORKER__) {
-        const rscReadable = rscRenderToReadableStream(AppRSC);
-        if (isStreamable && (await isStreamingSupported())) {
-            postRequestTasks('rsc', 200, request, componentResponse);
-            return new Response(rscReadable);
-        }
-        // Note: CFW does not support reader.piteTo nor iterable syntax
-        const bufferedBody = await bufferReadableStream(rscReadable.getReader());
-        postRequestTasks('rsc', 200, request, componentResponse);
-        return new Response(bufferedBody, {
-            headers: {
-                'cache-control': componentResponse.cacheControlHeader,
-            },
-        });
-    }
-    else if (response) {
-        const rscWriter = await import(
-        // @ts-ignore
-        '@shopify/hydrogen/vendor/react-server-dom-vite/writer.node.server');
-        const streamer = rscWriter.renderToPipeableStream(AppRSC);
-        response.writeHead(200, 'ok', {
+    const rscReadable = rscRenderToReadableStream(AppRSC);
+    // Note: CFW does not support reader.piteTo nor iterable syntax
+    const bufferedBody = await bufferReadableStream(rscReadable.getReader());
+    postRequestTasks('rsc', 200, request, componentResponse);
+    return new Response(bufferedBody, {
+        headers: {
             'cache-control': componentResponse.cacheControlHeader,
-        });
-        const stream = streamer.pipe(response);
-        stream.on('finish', function () {
-            postRequestTasks('rsc', response.statusCode, request, componentResponse);
-        });
-    }
+        },
+    });
 }
 function buildAppRSC({ App, log, state, request, response }) {
     const hydrogenServerProps = { request, response, log };
@@ -528,20 +507,8 @@ async function createNodeWriter() {
     const { PassThrough } = await import(streamImport);
     return new PassThrough();
 }
-function flightContainer({ init, chunk, nonce, }) {
-    let script = `<script${nonce ? ` nonce="${nonce}"` : ''}>`;
-    if (init) {
-        script += 'var __flight=[];';
-    }
-    if (chunk) {
-        const normalizedChunk = chunk
-            // 1. Duplicate the escape char (\) for already escaped characters (e.g. \n or \").
-            .replace(/\\/g, String.raw `\\`)
-            // 2. Escape existing backticks to allow wrapping the whole thing in `...`.
-            .replace(/`/g, String.raw `\``);
-        script += `__flight.push(\`${normalizedChunk}\`)`;
-    }
-    return script + '</script>';
+function flightContainer(chunk) {
+    return `<meta data-flight="${htmlEncode(chunk)}" />`;
 }
 function postRequestTasks(type, status, request, componentResponse) {
     logServerResponse(type, request, status);

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

@@ -9,12 +9,27 @@ function requestCacheRSC() {
     return new Map();
 }
 requestCacheRSC.key = Symbol.for('HYDROGEN_REQUEST');
+// Note: use this only during RSC/Flight rendering. The React dispatcher
+// for SSR/Fizz rendering does not implement getCacheForType.
+function getCacheForType(resource) {
+    var _a;
+    const dispatcher =
+    // @ts-ignore
+    React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
+        .ReactCurrentDispatcher.current;
+    // @ts-ignore
+    if (__DEV__ && typeof jest !== 'undefined' && !dispatcher.getCacheForType) {
+        // Jest does not have access to the RSC runtime, mock it here:
+        // @ts-ignore
+        return ((_a = globalThis.__jestRscCache) !== null && _a !== void 0 ? _a : (globalThis.__jestRscCache = resource()));
+    }
+    return dispatcher.getCacheForType(resource);
+}
 export function ServerRequestProvider({ isRSC, request, children, }) {
     if (isRSC) {
         // Save the request object in a React cache that is
         // scoped to this current rendering.
-        // @ts-ignore
-        const requestCache = React.unstable_getCacheForType(requestCacheRSC);
+        const requestCache = getCacheForType(requestCacheRSC);
         requestCache.set(requestCacheRSC.key, request);
         return children;
     }
@@ -27,7 +42,7 @@ export function useServerRequest() {
     try {
         // This cache only works during RSC rendering:
         // @ts-ignore
-        const cache = React.unstable_getCacheForType(requestCacheRSC);
+        const cache = getCacheForType(requestCacheRSC);
         request = cache ? cache.get(requestCacheRSC.key) : null;
     }
     catch (_a) {

package/dist/esnext/foundation/ServerStateProvider/ServerStateProvider.js CHANGED Viewed

@@ -31,6 +31,8 @@ export function ServerStateProvider({ serverState, setServerState, children, })
         else {
             newValue = input;
         }
+        if (!newValue)
+            return { ...prev };
         if (__DEV__) {
             const privateProp = PRIVATE_PROPS.find((prop) => prop in newValue);
             if (privateProp) {

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

@@ -1,7 +1,7 @@
 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.
+ * The `fetchSync` hook makes API requests and is the recommended way to make simple fetch calls on the server and the client.
  * 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).
  */

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

@@ -1,7 +1,7 @@
 import { parseJSON } from '../../../utilities/parse';
 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.
+ * The `fetchSync` hook makes API requests and is the recommended way to make simple fetch calls on the server and the client.
  * 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).
  */

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

@@ -1,8 +1,8 @@
-import { getLoggerWithContext, collectQueryCacheControlHeaders, collectQueryTimings, logCacheApiStatus, } from '../../utilities/log';
-import { deleteItemFromCache, generateSubRequestCacheControlHeader, getItemFromCache, isStale, setItemInCache, } from '../../framework/cache';
-import { hashKey } from '../../utilities/hash';
+import { getLoggerWithContext, collectQueryCacheControlHeaders, collectQueryTimings, } from '../../utilities/log';
+import { deleteItemFromCache, generateSubRequestCacheControlHeader, getItemFromCache, isStale, setItemInCache, } from '../../framework/cache-sub-request';
 import { runDelayedFunction } from '../../framework/runtime';
 import { useRequestCacheData, useServerRequest } from '../ServerRequestProvider';
+import { CacheSeconds } from '../../framework/CachingStrategy';
 /**
  * The `useQuery` hook executes an asynchronous operation like `fetch` in a way that
  * supports [Suspense](https://reactjs.org/docs/concurrent-mode-suspense.html). You can use this
@@ -48,7 +48,6 @@ 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();
@@ -59,15 +58,15 @@ function cachedQueryFnBuilder(key, queryFn, queryOptions) {
             /**
              * Important: Do this async
              */
-            if (isStale(response, resolvedQueryOptions === null || resolvedQueryOptions === void 0 ? void 0 : resolvedQueryOptions.cache)) {
-                logCacheApiStatus('STALE', hashedKey);
-                const lockKey = `lock-${key}`;
+            if (isStale(key, response)) {
+                const lockKey = ['lock', ...(typeof key === 'string' ? [key] : key)];
                 runDelayedFunction(async () => {
-                    logCacheApiStatus('UPDATING', hashedKey);
                     const lockExists = await getItemFromCache(lockKey);
                     if (lockExists)
                         return;
-                    await setItemInCache(lockKey, true);
+                    await setItemInCache(lockKey, true, CacheSeconds({
+                        maxAge: 10,
+                    }));
                     try {
                         const output = await generateNewOutput();
                         if (shouldCacheResponse(output)) {

package/dist/esnext/foundation/useSession/useSession.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
 /** The `useSession` hook reads session data in server components. */
-export declare const useSession: () => Record<string, string> | undefined;
+export declare const useSession: () => Record<string, string>;

package/dist/esnext/foundation/useSession/useSession.js CHANGED Viewed

@@ -3,6 +3,6 @@ import { useServerRequest } from '../ServerRequestProvider';
 export const useSession = function () {
     var _a;
     const request = useServerRequest();
-    const session = (_a = request.ctx.session) === null || _a === void 0 ? void 0 : _a.get();
+    const session = ((_a = request.ctx.session) === null || _a === void 0 ? void 0 : _a.get()) || {};
     return session;
 };

package/dist/esnext/framework/Hydration/Html.js CHANGED Viewed

@@ -27,7 +27,9 @@ export function Html({ children, template, htmlAttrs, bodyAttrs }) {
     if (import.meta.env.DEV) {
         // Fix React Refresh for async scripts.
         // https://github.com/vitejs/vite/issues/6759
-        head = head.replace(/>(\s*?import[\s\w]+?['"]\/@react-refresh)/, ' async="">$1');
+        head =
+            '<script></script>' + // Fix for Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1737882
+                head.replace(/>(\s*?import[\s\w]+?['"]\/@react-refresh)/, ' async="">$1');
     }
     return (React.createElement("html", { ...attrsToProps(getHtmlAttrs(template)), ...htmlAttrs },
         React.createElement("head", { dangerouslySetInnerHTML: { __html: head } }),

package/dist/esnext/framework/Hydration/ServerComponentResponse.server.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import type { CachingStrategy } from '../../types';
 import React from 'react';
 export declare class ServerComponentResponse extends Response {
     private wait;
-    private cacheOptions?;
+    private cacheOptions;
     customStatus?: {
         code?: number;
         text?: string;

package/dist/esnext/framework/Hydration/ServerComponentResponse.server.js CHANGED Viewed

@@ -6,6 +6,7 @@ export class ServerComponentResponse extends Response {
     constructor() {
         super(...arguments);
         this.wait = false;
+        this.cacheOptions = CacheSeconds();
         /**
          * Allow custom body to be a string or a Promise.
          */
@@ -25,7 +26,7 @@ export class ServerComponentResponse extends Response {
         this.cacheOptions = options;
     }
     get cacheControlHeader() {
-        return generateCacheControlHeader(this.cacheOptions || CacheSeconds());
+        return generateCacheControlHeader(this.cacheOptions);
     }
     writeHead({ status, statusText, headers, } = {}) {
         if (status || statusText) {

package/dist/esnext/framework/Hydration/rsc.d.ts CHANGED Viewed

@@ -1,6 +1,3 @@
-declare global {
-    var __flight: Array<string>;
-}
 /**
  * Much of this is borrowed from React's demo implementation:
  * @see https://github.com/reactjs/server-components-demo/blob/main/src/Cache.client.js

package/dist/esnext/framework/Hydration/rsc.js CHANGED Viewed

@@ -1,13 +1,42 @@
 // TODO should we move this file to src/foundation
 // so it is considered ESM instead of CJS?
-// @ts-ignore
-import { unstable_getCacheForType, unstable_useCacheRefresh } from 'react';
 import { createFromFetch, createFromReadableStream,
 // @ts-ignore
  } from '@shopify/hydrogen/vendor/react-server-dom-vite';
 import { RSC_PATHNAME } from '../../constants';
+import { htmlDecode } from '../../utilities';
 let rscReader;
-if (globalThis.__flight && __flight.length > 0) {
+// Hydrate an SSR response from <meta> tags placed in the DOM.
+const flightChunks = [];
+const FLIGHT_ATTRIBUTE = 'data-flight';
+function addElementToFlightChunks(el) {
+    const chunk = el.getAttribute(FLIGHT_ATTRIBUTE);
+    if (chunk) {
+        flightChunks.push(htmlDecode(chunk));
+    }
+}
+// Get initial payload
+document
+    .querySelectorAll('[' + FLIGHT_ATTRIBUTE + ']')
+    .forEach(addElementToFlightChunks);
+// Create a mutation observer on the document to detect when new
+// <meta data-flight> tags are added, and add them to the array.
+const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+        mutation.addedNodes.forEach((node) => {
+            if (node instanceof HTMLElement &&
+                node.tagName === 'META' &&
+                node.hasAttribute(FLIGHT_ATTRIBUTE)) {
+                addElementToFlightChunks(node);
+            }
+        });
+    });
+});
+observer.observe(document.documentElement, {
+    childList: true,
+    subtree: true,
+});
+if (flightChunks.length > 0) {
     const contentLoaded = new Promise((resolve) => document.addEventListener('DOMContentLoaded', resolve));
     try {
         rscReader = new ReadableStream({
@@ -17,9 +46,12 @@ if (globalThis.__flight && __flight.length > 0) {
                     controller.enqueue(encoder.encode(chunk));
                     return 0;
                 };
-                __flight.forEach(write);
-                __flight.push = write;
-                contentLoaded.then(() => controller.close());
+                flightChunks.forEach(write);
+                flightChunks.push = write;
+                contentLoaded.then(() => {
+                    controller.close();
+                    observer.disconnect();
+                });
             },
         });
     }
@@ -27,9 +59,7 @@ if (globalThis.__flight && __flight.length > 0) {
         // Old browser, will try a new hydration request later
     }
 }
-function createResponseCache() {
-    return new Map();
-}
+const cache = new Map();
 /**
  * Much of this is borrowed from React's demo implementation:
  * @see https://github.com/reactjs/server-components-demo/blob/main/src/Cache.client.js
@@ -38,7 +68,6 @@ function createResponseCache() {
  */
 export function useServerResponse(state) {
     const key = JSON.stringify(state);
-    const cache = unstable_getCacheForType(createResponseCache);
     let response = cache.get(key);
     if (response) {
         return response;
@@ -67,6 +96,5 @@ export function useServerResponse(state) {
     return response;
 }
 export function useRefresh() {
-    const refreshCache = unstable_useCacheRefresh();
-    refreshCache();
+    cache.clear();
 }

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

@@ -1,4 +1,3 @@
-import { logCacheApiStatus } from '../../utilities/log';
 /**
  * This is an in-memory implementation of `Cache` that *barely*
  * works and is only meant to be used during development.
@@ -8,7 +7,6 @@ export class InMemoryCache {
         this.store = new Map();
     }
     put(request, response) {
-        logCacheApiStatus('PUT-dev', request.url);
         this.store.set(request.url, {
             value: response,
             date: new Date(),
@@ -18,7 +16,6 @@ export class InMemoryCache {
         var _a, _b;
         const match = this.store.get(request.url);
         if (!match) {
-            logCacheApiStatus('MISS-dev', request.url);
             return;
         }
         const { value, date } = match;
@@ -28,7 +25,6 @@ export class InMemoryCache {
         const age = (new Date().valueOf() - date.valueOf()) / 1000;
         const isMiss = age > maxAge + swr;
         if (isMiss) {
-            logCacheApiStatus('MISS-dev', request.url);
             this.store.delete(request.url);
             return;
         }
@@ -36,7 +32,6 @@ export class InMemoryCache {
         const headers = new Headers(value.headers);
         headers.set('cache', isStale ? 'STALE' : 'HIT');
         headers.set('date', date.toUTCString());
-        logCacheApiStatus(`${headers.get('cache')}-dev`, request.url);
         const response = new Response(value.body, {
             headers,
         });
@@ -44,7 +39,6 @@ export class InMemoryCache {
     }
     delete(request) {
         this.store.delete(request.url);
-        logCacheApiStatus('DELETE-dev', request.url);
     }
     keys(request) {
         const cacheKeys = [];

package/dist/esnext/framework/cache-sub-request.d.ts ADDED Viewed

@@ -0,0 +1,17 @@
+import type { QueryKey, CachingStrategy } from '../types';
+export declare function generateSubRequestCacheControlHeader(userCacheOptions?: CachingStrategy): 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
+ * as the response itself so it can be checked for staleness.
+ */
+export declare function getItemFromCache(key: QueryKey): Promise<undefined | [any, Response]>;
+/**
+ * Put an item into the cache.
+ */
+export declare function setItemInCache(key: QueryKey, value: any, userCacheOptions?: CachingStrategy): Promise<void>;
+export declare function deleteItemFromCache(key: QueryKey): Promise<void>;
+/**
+ * Manually check the response to see if it's stale.
+ */
+export declare function isStale(key: QueryKey, response: Response): boolean;

package/dist/esnext/framework/cache-sub-request.js ADDED Viewed

@@ -0,0 +1,64 @@
+import { getCache } from './runtime';
+import { hashKey } from '../utilities/hash';
+import * as CacheApi from './cache';
+import { CacheSeconds } from './CachingStrategy';
+/**
+ * Wrapper Cache functions for sub queries
+ */
+/**
+ * Cache API is weird. We just need a full URL, so we make one up.
+ */
+function getKeyUrl(key) {
+    return `https://shopify.dev/?${key}`;
+}
+function getCacheOption(userCacheOptions) {
+    return userCacheOptions || CacheSeconds();
+}
+export function generateSubRequestCacheControlHeader(userCacheOptions) {
+    return CacheApi.generateDefaultCacheControlHeader(getCacheOption(userCacheOptions));
+}
+/**
+ * Get an item from the cache. If a match is found, returns a tuple
+ * containing the `JSON.parse` version of the response as well
+ * as the response itself so it can be checked for staleness.
+ */
+export async function getItemFromCache(key) {
+    const cache = getCache();
+    if (!cache) {
+        return;
+    }
+    const url = getKeyUrl(hashKey(key));
+    const request = new Request(url);
+    const response = await CacheApi.getItemFromCache(request);
+    if (!response) {
+        return;
+    }
+    return [await response.json(), response];
+}
+/**
+ * Put an item into the cache.
+ */
+export async function setItemInCache(key, value, userCacheOptions) {
+    const cache = getCache();
+    if (!cache) {
+        return;
+    }
+    const url = getKeyUrl(hashKey(key));
+    const request = new Request(url);
+    const response = new Response(JSON.stringify(value));
+    await CacheApi.setItemInCache(request, response, getCacheOption(userCacheOptions));
+}
+export async function deleteItemFromCache(key) {
+    const cache = getCache();
+    if (!cache)
+        return;
+    const url = getKeyUrl(hashKey(key));
+    const request = new Request(url);
+    await CacheApi.deleteItemFromCache(request);
+}
+/**
+ * Manually check the response to see if it's stale.
+ */
+export function isStale(key, response) {
+    return CacheApi.isStale(new Request(getKeyUrl(hashKey(key))), response);
+}

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

@@ -1,17 +1,17 @@
-import type { QueryKey, CachingStrategy } from '../types';
-export declare function generateSubRequestCacheControlHeader(userCacheOptions?: CachingStrategy): string;
+import type { CachingStrategy } from '../types';
+export declare function generateDefaultCacheControlHeader(userCacheOptions?: CachingStrategy): 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
  * as the response itself so it can be checked for staleness.
  */
-export declare function getItemFromCache(key: QueryKey): Promise<undefined | [any, Response]>;
+export declare function getItemFromCache(request: Request): Promise<Response | undefined>;
 /**
  * Put an item into the cache.
  */
-export declare function setItemInCache(key: QueryKey, value: any, userCacheOptions?: CachingStrategy): Promise<void>;
-export declare function deleteItemFromCache(key: QueryKey): Promise<void>;
+export declare function setItemInCache(request: Request, response: Response, userCacheOptions: CachingStrategy): Promise<void>;
+export declare function deleteItemFromCache(request: Request): Promise<void>;
 /**
  * Manually check the response to see if it's stale.
  */
-export declare function isStale(response: Response, userCacheOptions?: CachingStrategy): boolean;
+export declare function isStale(request: Request, response: Response): boolean;

package/dist/esnext/framework/cache.js CHANGED Viewed

@@ -1,6 +1,5 @@
 import { getCache } from './runtime';
 import { CacheSeconds, generateCacheControlHeader, } from '../framework/CachingStrategy';
-import { hashKey } from '../utilities/hash';
 import { logCacheApiStatus } from '../utilities/log';
 function getCacheControlSetting(userCacheOptions, options) {
     if (userCacheOptions && options) {
@@ -13,45 +12,35 @@ function getCacheControlSetting(userCacheOptions, options) {
         return userCacheOptions || CacheSeconds();
     }
 }
-export function generateSubRequestCacheControlHeader(userCacheOptions) {
+export function generateDefaultCacheControlHeader(userCacheOptions) {
     return generateCacheControlHeader(getCacheControlSetting(userCacheOptions));
 }
-/**
- * Cache API is weird. We just need a full URL, so we make one up.
- */
-function getKeyUrl(key) {
-    return `https://shopify.dev/?${key}`;
-}
 /**
  * Get an item from the cache. If a match is found, returns a tuple
  * containing the `JSON.parse` version of the response as well
  * as the response itself so it can be checked for staleness.
  */
-export async function getItemFromCache(key) {
+export async function getItemFromCache(request) {
     const cache = getCache();
     if (!cache) {
         return;
     }
-    const url = getKeyUrl(hashKey(key));
-    const request = new Request(url);
     const response = await cache.match(request);
     if (!response) {
-        logCacheApiStatus('MISS', url);
+        logCacheApiStatus('MISS', request.url);
         return;
     }
-    logCacheApiStatus('HIT', url);
-    return [await response.json(), response];
+    logCacheApiStatus('HIT', request.url);
+    return response;
 }
 /**
  * Put an item into the cache.
  */
-export async function setItemInCache(key, value, userCacheOptions) {
+export async function setItemInCache(request, response, userCacheOptions) {
     const cache = getCache();
     if (!cache) {
         return;
     }
-    const url = getKeyUrl(hashKey(key));
-    const request = new Request(url);
     /**
      * We are manually managing staled request by adding this workaround.
      * Why? cache control header support is dependent on hosting platform
@@ -91,34 +80,48 @@ export async function setItemInCache(key, value, userCacheOptions) {
      * `isStale` function will use the above information to test for stale-ness of a cached response
      */
     const cacheControl = getCacheControlSetting(userCacheOptions);
-    const headers = new Headers({
-        'cache-control': generateSubRequestCacheControlHeader(getCacheControlSetting(cacheControl, {
-            maxAge: (cacheControl.maxAge || 0) + (cacheControl.staleWhileRevalidate || 0),
-        })),
-        'cache-put-date': new Date().toUTCString(),
-    });
-    const response = new Response(JSON.stringify(value), { headers });
-    logCacheApiStatus('PUT', url);
+    // The padded cache-control to mimic stale-while-revalidate
+    request.headers.set('cache-control', generateDefaultCacheControlHeader(getCacheControlSetting(cacheControl, {
+        maxAge: (cacheControl.maxAge || 0) + (cacheControl.staleWhileRevalidate || 0),
+    })));
+    // The cache-control we want to set on response
+    const cacheControlString = generateDefaultCacheControlHeader(getCacheControlSetting(cacheControl));
+    // CF will override cache-control, so we need to keep a
+    // non-modified real-cache-control
+    response.headers.set('cache-control', cacheControlString);
+    response.headers.set('real-cache-control', cacheControlString);
+    response.headers.set('cache-put-date', new Date().toUTCString());
+    logCacheApiStatus('PUT', request.url);
     await cache.put(request, response);
 }
-export async function deleteItemFromCache(key) {
+export async function deleteItemFromCache(request) {
     const cache = getCache();
     if (!cache)
         return;
-    const url = getKeyUrl(hashKey(key));
-    const request = new Request(url);
-    logCacheApiStatus('DELETE', url);
+    logCacheApiStatus('DELETE', request.url);
     await cache.delete(request);
 }
 /**
  * Manually check the response to see if it's stale.
  */
-export function isStale(response, userCacheOptions) {
-    const responseMaxAge = getCacheControlSetting(userCacheOptions).maxAge || 0;
+export function isStale(request, response) {
     const responseDate = response.headers.get('cache-put-date');
-    if (!responseDate)
+    const cacheControl = response.headers.get('real-cache-control');
+    let responseMaxAge = 0;
+    if (cacheControl) {
+        const maxAgeMatch = cacheControl.match(/max-age=(\d*)/);
+        if (maxAgeMatch && maxAgeMatch.length > 1) {
+            responseMaxAge = parseFloat(maxAgeMatch[1]);
+        }
+    }
+    if (!responseDate) {
         return false;
+    }
     const ageInMs = new Date().valueOf() - new Date(responseDate).valueOf();
     const age = ageInMs / 1000;
-    return age > responseMaxAge;
+    const result = age > responseMaxAge;
+    if (result) {
+        logCacheApiStatus('STALE', request.url);
+    }
+    return result;
 }