@shopify/hydrogen 0.18.0 → 0.21.0

package/dist/esnext/utilities/index.js

@@ -1,4 +1,4 @@
-export { addImageSizeParametersToUrl, useImageUrl, getShopifyImageDimensions, shopifyImageLoader, } from './image_size';
+export { addImageSizeParametersToUrl, getShopifyImageDimensions, shopifyImageLoader, } from './image_size';
 export { addParametersToEmbeddedVideoUrl, useEmbeddedVideoUrl, } from './video_parameters';
 export { loadScript } from './load_script';
 export { wrapPromise } from './suspense';
@@ -9,3 +9,4 @@ 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/log/log-cache-api-status.js

@@ -5,5 +5,9 @@ export function logCacheApiStatus(status, url) {
     if (!log.options().showCacheApiStatus) {
         return;
     }
-    log.debug(gray(`[Cache] ${status === null || status === void 0 ? void 0 : status.padEnd(8)} query ${findQueryName(url)}`));
+    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/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "0.18.0";
+export declare const LIB_VERSION = "0.21.0";

package/dist/esnext/version.js

@@ -1 +1 @@
-export const LIB_VERSION = '0.18.0';
+export const LIB_VERSION = '0.21.0';

package/dist/node/components/Image/Image.d.ts

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import type { Image as ImageType } from '../../storefront-api-types';
+import type { PartialDeep, Simplify, SetRequired } from 'type-fest';
+declare type HtmlImageProps = React.ImgHTMLAttributes<HTMLImageElement>;
+declare type ImageProps<GenericLoaderOpts> = Simplify<ShopifyImageProps | ExternalImageProps<GenericLoaderOpts>>;
+export declare function Image<GenericLoaderOpts>(props: ImageProps<GenericLoaderOpts>): JSX.Element;
+export declare type ShopifyLoaderOptions = {
+    crop?: 'top' | 'bottom' | 'left' | 'right' | 'center';
+    scale?: 2 | 3;
+    width?: HtmlImageProps['width'] | ImageType['width'];
+    height?: HtmlImageProps['height'] | ImageType['height'];
+};
+export declare type ShopifyLoaderParams = Simplify<ShopifyLoaderOptions & {
+    src: ImageType['url'];
+}>;
+export declare type ShopifyImageProps = Omit<HtmlImageProps, 'src'> & {
+    /** An object with fields that correspond to the Storefront API's
+     * [Image object](https://shopify.dev/api/storefront/reference/common-objects/image).
+     * The `data` prop is required if `src` isn't used, but both props shouldn't be used
+     * at the same time. If both `src` and `data` are passed, then `data` takes priority.
+     */
+    data: PartialDeep<ImageType>;
+    /** A custom function that generates the image URL. Parameters passed in
+     * are either `ShopifyLoaderParams` if using the `data` prop, or the
+     * `LoaderOptions` object that you pass to `loaderOptions`.
+     */
+    loader?: (params: ShopifyLoaderParams) => string;
+    /** An object of `loader` function options. For example, if the `loader` function
+     * requires a `scale` option, then the value can be a property of the
+     * `loaderOptions` object (for example, `{scale: 2}`). When the `data` prop
+     * is used, the object shape will be `ShopifyLoaderOptions`. When the `src`
+     * prop is used, the data shape is whatever you define it to be, and this shape
+     * will be passed to `loader`.
+     */
+    loaderOptions?: ShopifyLoaderOptions;
+    /**
+     * 'src' shouldn't be passed when 'data' is used.
+     */
+    src?: never;
+};
+declare type LoaderProps<GenericLoaderOpts> = {
+    /** A URL string. This string can be an absolute path or a relative path depending
+     * on the `loader`. The `src` prop is required if `data` isn't used, but both
+     * props shouldn't be used at the same time. If both `src` and `data` are passed,
+     * then `data` takes priority.
+     */
+    src: HtmlImageProps['src'];
+    /** The integer or string value for the width of the image. This is a required prop
+     * when `src` is present.
+     */
+    width: HtmlImageProps['width'];
+    /** The integer or string value for the height of the image. This is a required prop
+     * when `src` is present.
+     */
+    height: HtmlImageProps['height'];
+    /** An object of `loader` function options. For example, if the `loader` function
+     * requires a `scale` option, then the value can be a property of the
+     * `loaderOptions` object (for example, `{scale: 2}`). When the `data` prop
+     * is used, the object shape will be `ShopifyLoaderOptions`. When the `src`
+     * prop is used, the data shape is whatever you define it to be, and this shape
+     * will be passed to `loader`.
+     */
+    loaderOptions?: GenericLoaderOpts;
+};
+declare type ExternalImageProps<GenericLoaderOpts> = SetRequired<HtmlImageProps, 'src' | 'width' | 'height'> & {
+    /** A custom function that generates the image URL. Parameters passed in
+     * are either `ShopifyLoaderParams` if using the `data` prop, or the
+     * `LoaderOptions` object that you pass to `loaderOptions`.
+     */
+    loader?: (params: LoaderProps<GenericLoaderOpts>) => string;
+    /** An object of `loader` function options. For example, if the `loader` function
+     * requires a `scale` option, then the value can be a property of the
+     * `loaderOptions` object (for example, `{scale: 2}`). When the `data` prop
+     * is used, the object shape will be `ShopifyLoaderOptions`. When the `src`
+     * prop is used, the data shape is whatever you define it to be, and this shape
+     * will be passed to `loader`.
+     */
+    loaderOptions?: GenericLoaderOpts;
+    /**
+     * 'data' shouldn't be passed when 'src' is used.
+     */
+    data?: never;
+};
+export {};

package/dist/node/components/Image/Image.js

@@ -0,0 +1,86 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Image = void 0;
+const React = __importStar(require("react"));
+const utilities_1 = require("../../utilities");
+function Image(props) {
+    if (!props.data && !props.src) {
+        throw new Error(`<Image/>: requires either a 'data' or 'src' prop.`);
+    }
+    if (props.data && props.src) {
+        console.warn(`<Image/>: using both 'data' and 'src' props is not supported; using the 'data' prop by default`);
+    }
+    if (props.data) {
+        return React.createElement(ShopifyImage, { ...props });
+    }
+    else {
+        return React.createElement(ExternalImage, { ...props });
+    }
+}
+exports.Image = Image;
+function ShopifyImage({ data, width, height, loading, loader = utilities_1.shopifyImageLoader, loaderOptions, ...rest }) {
+    var _a, _b, _c;
+    if (!data.url) {
+        throw new Error(`<Image/>: the 'data' prop requires the 'url' property`);
+    }
+    if (!data.altText && !rest.alt) {
+        console.warn(`<Image/>: the 'data' prop should have the 'altText' property, or the 'alt' prop, and one of them should not be empty. ${data.id ? `Image ID: ${data.id}` : ''}`);
+    }
+    const { width: finalWidth, height: finalHeight } = (0, utilities_1.getShopifyImageDimensions)(data, loaderOptions);
+    if (!finalWidth || !finalHeight) {
+        console.warn(`<Image/>: the 'data' prop requires either 'width' or 'data.width', and 'height' or 'data.height' properties`);
+    }
+    let finalSrc = data.url;
+    if (loader) {
+        finalSrc = loader({
+            ...loaderOptions,
+            src: data.url,
+            width: finalWidth,
+            height: finalHeight,
+        });
+    }
+    /* eslint-disable hydrogen/prefer-image-component */
+    return (React.createElement("img", { id: (_a = data.id) !== null && _a !== void 0 ? _a : '', alt: (_c = (_b = data.altText) !== null && _b !== void 0 ? _b : rest.alt) !== null && _c !== void 0 ? _c : '', loading: loading !== null && loading !== void 0 ? loading : 'lazy', ...rest, src: finalSrc, width: finalWidth !== null && finalWidth !== void 0 ? finalWidth : undefined, height: finalHeight !== null && finalHeight !== void 0 ? finalHeight : undefined }));
+    /* eslint-enable hydrogen/prefer-image-component */
+}
+function ExternalImage({ src, width, height, alt, loader, loaderOptions, loading, ...rest }) {
+    if (!width || !height) {
+        throw new Error(`<Image/>: when 'src' is provided, 'width' and 'height' are required and need to be valid values (i.e. greater than zero). Provided values: 'src': ${src}, 'width': ${width}, 'height': ${height}`);
+    }
+    if (!alt) {
+        console.warn(`<Image/>: when 'src' is provided, 'alt' should also be provided`);
+    }
+    let finalSrc = src;
+    if (loader) {
+        finalSrc = loader({ src, width, height, ...loaderOptions });
+        if (typeof finalSrc !== 'string' || !finalSrc) {
+            throw new Error(`<Image/>: 'loader' did not return a valid string`);
+        }
+    }
+    /* eslint-disable hydrogen/prefer-image-component */
+    return (React.createElement("img", { ...rest, src: finalSrc, width: width, height: height, alt: alt !== null && alt !== void 0 ? alt : '', loading: loading !== null && loading !== void 0 ? loading : 'lazy' }));
+    /* eslint-enable hydrogen/prefer-image-component */
+}

package/dist/node/components/Image/index.d.ts

@@ -0,0 +1,2 @@
+export { Image } from './Image';
+export type { ShopifyLoaderParams, ShopifyLoaderOptions, ShopifyImageProps, } from './Image';

package/dist/node/components/Image/index.js

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

package/dist/node/entry-server.d.ts

@@ -1,5 +1,8 @@
 /// <reference types="node" />
-import type { HydrogenConfig } from './types';
+import { Logger } from './utilities/log';
+import type { HydrogenConfig, ImportGlobEagerOutput } from './types';
+import { ServerComponentResponse } from './framework/Hydration/ServerComponentResponse.server';
+import { ServerComponentRequest } from './framework/Hydration/ServerComponentRequest.server';
 import type { ServerResponse, IncomingMessage } from 'http';
 import { RuntimeContext } from './framework/runtime';
 declare global {
@@ -20,4 +23,13 @@ export interface RequestHandler {
     (request: Request | IncomingMessage, options: RequestHandlerOptions): Promise<Response | undefined>;
 }
 export declare const renderHydrogen: (App: any, hydrogenConfig?: HydrogenConfig | undefined) => RequestHandler;
+declare type SharedServerProps = {
+    state?: object | null;
+    request: ServerComponentRequest;
+    response: ServerComponentResponse;
+    log: Logger;
+};
+export declare type AppProps = SharedServerProps & {
+    routes?: ImportGlobEagerOutput;
+};
 export default renderHydrogen;

package/dist/node/entry-server.js

@@ -44,6 +44,7 @@ const Analytics_server_1 = require("./foundation/Analytics/Analytics.server");
 const ServerAnalyticsRoute_server_1 = require("./foundation/Analytics/ServerAnalyticsRoute.server");
 const session_1 = require("./foundation/session/session");
 const parse_1 = require("./utilities/parse");
+const utilities_1 = require("./utilities");
 const DOCTYPE = '<!DOCTYPE html>';
 const CONTENT_TYPE = 'Content-Type';
 const HTML_CONTENT_TYPE = 'text/html; charset=UTF-8';
@@ -89,7 +90,10 @@ const renderHydrogen = (App, hydrogenConfig) => {
                     : apiResponse;
             }
         }
-        const isStreamable = !(0, bot_ua_1.isBotUA)(url, request.headers.get('user-agent')) &&
+        const isStreamable = (hydrogenConfig.enableStreaming
+            ? hydrogenConfig.enableStreaming(request)
+            : true) &&
+            !(0, bot_ua_1.isBotUA)(url, request.headers.get('user-agent')) &&
             (!!streamableResponse || (await (0, streaming_server_1.isStreamingSupported)()));
         let template = typeof indexTemplate === 'function'
             ? await indexTemplate(url.toString())
@@ -169,11 +173,7 @@ async function render(url, { App, request, template, componentResponse, nonce, l
     headers.set(CONTENT_TYPE, HTML_CONTENT_TYPE);
     html = (0, Html_1.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, {
@@ -201,12 +201,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();
             (0, streaming_server_1.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();
@@ -397,34 +395,15 @@ async function hydrate(url, { App, log, request, response, isStreamable, compone
         request,
         response: componentResponse,
     });
-    if (__WORKER__) {
-        const rscReadable = (0, streaming_server_1.rscRenderToReadableStream)(AppRSC);
-        if (isStreamable && (await (0, streaming_server_1.isStreamingSupported)())) {
-            postRequestTasks('rsc', 200, request, componentResponse);
-            return new Response(rscReadable);
-        }
-        // Note: CFW does not support reader.piteTo nor iterable syntax
-        const bufferedBody = await (0, streaming_server_1.bufferReadableStream)(rscReadable.getReader());
-        postRequestTasks('rsc', 200, request, componentResponse);
-        return new Response(bufferedBody, {
-            headers: {
-                'cache-control': componentResponse.cacheControlHeader,
-            },
-        });
-    }
-    else if (response) {
-        const rscWriter = await Promise.resolve().then(() => __importStar(require(
-        // @ts-ignore
-        '@shopify/hydrogen/vendor/react-server-dom-vite/writer.node.server')));
-        const streamer = rscWriter.renderToPipeableStream(AppRSC);
-        response.writeHead(200, 'ok', {
+    const rscReadable = (0, streaming_server_1.rscRenderToReadableStream)(AppRSC);
+    // Note: CFW does not support reader.piteTo nor iterable syntax
+    const bufferedBody = await (0, streaming_server_1.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 };
@@ -555,20 +534,8 @@ async function createNodeWriter() {
     const { PassThrough } = await Promise.resolve().then(() => __importStar(require(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="${(0, utilities_1.htmlEncode)(chunk)}" />`;
 }
 function postRequestTasks(type, status, request, componentResponse) {
     (0, log_1.logServerResponse)(type, request, status);

package/dist/node/foundation/ServerRequestProvider/ServerRequestProvider.js

@@ -35,12 +35,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_1.default.__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);
+}
 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_1.default.unstable_getCacheForType(requestCacheRSC);
+        const requestCache = getCacheForType(requestCacheRSC);
         requestCache.set(requestCacheRSC.key, request);
         return children;
     }
@@ -54,7 +69,7 @@ function useServerRequest() {
     try {
         // This cache only works during RSC rendering:
         // @ts-ignore
-        const cache = react_1.default.unstable_getCacheForType(requestCacheRSC);
+        const cache = getCacheForType(requestCacheRSC);
         request = cache ? cache.get(requestCacheRSC.key) : null;
     }
     catch (_a) {

package/dist/node/framework/Hydration/Html.js

@@ -33,7 +33,9 @@ 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_1.default.createElement("html", { ...attrsToProps(getHtmlAttrs(template)), ...htmlAttrs },
         react_1.default.createElement("head", { dangerouslySetInnerHTML: { __html: head } }),

package/dist/node/framework/Hydration/ServerComponentResponse.server.d.ts

@@ -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/node/framework/Hydration/ServerComponentResponse.server.js

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

package/dist/node/framework/Hydration/rsc.d.ts

@@ -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/node/framework/Hydration/rsc.js

@@ -3,12 +3,41 @@
 // so it is considered ESM instead of CJS?
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRefresh = exports.useServerResponse = void 0;
-// @ts-ignore
-const react_1 = require("react");
 const react_server_dom_vite_1 = require("@shopify/hydrogen/vendor/react-server-dom-vite");
 const constants_1 = require("../../constants");
+const utilities_1 = require("../../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((0, utilities_1.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({
@@ -18,9 +47,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();
+                });
             },
         });
     }
@@ -28,9 +60,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
@@ -39,7 +69,6 @@ function createResponseCache() {
  */
 function useServerResponse(state) {
     const key = JSON.stringify(state);
-    const cache = (0, react_1.unstable_getCacheForType)(createResponseCache);
     let response = cache.get(key);
     if (response) {
         return response;
@@ -69,7 +98,6 @@ function useServerResponse(state) {
 }
 exports.useServerResponse = useServerResponse;
 function useRefresh() {
-    const refreshCache = (0, react_1.unstable_useCacheRefresh)();
-    refreshCache();
+    cache.clear();
 }
 exports.useRefresh = useRefresh;

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

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InMemoryCache = void 0;
-const log_1 = require("../../utilities/log");
 /**
  * This is an in-memory implementation of `Cache` that *barely*
  * works and is only meant to be used during development.
@@ -11,7 +10,6 @@ class InMemoryCache {
         this.store = new Map();
     }
     put(request, response) {
-        (0, log_1.logCacheApiStatus)('PUT-dev', request.url);
         this.store.set(request.url, {
             value: response,
             date: new Date(),
@@ -21,7 +19,6 @@ class InMemoryCache {
         var _a, _b;
         const match = this.store.get(request.url);
         if (!match) {
-            (0, log_1.logCacheApiStatus)('MISS-dev', request.url);
             return;
         }
         const { value, date } = match;
@@ -31,7 +28,6 @@ class InMemoryCache {
         const age = (new Date().valueOf() - date.valueOf()) / 1000;
         const isMiss = age > maxAge + swr;
         if (isMiss) {
-            (0, log_1.logCacheApiStatus)('MISS-dev', request.url);
             this.store.delete(request.url);
             return;
         }
@@ -39,7 +35,6 @@ class InMemoryCache {
         const headers = new Headers(value.headers);
         headers.set('cache', isStale ? 'STALE' : 'HIT');
         headers.set('date', date.toUTCString());
-        (0, log_1.logCacheApiStatus)(`${headers.get('cache')}-dev`, request.url);
         const response = new Response(value.body, {
             headers,
         });
@@ -47,7 +42,6 @@ class InMemoryCache {
     }
     delete(request) {
         this.store.delete(request.url);
-        (0, log_1.logCacheApiStatus)('DELETE-dev', request.url);
     }
     keys(request) {
         const cacheKeys = [];

package/dist/node/framework/cache-sub-request.d.ts

@@ -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;