@shopify/hydrogen 0.20.0 → 0.21.0

package/CHANGELOG.md

@@ -1,5 +1,59 @@
 # Changelog
 
+## 0.21.0
+
+### Minor Changes
+
+- [#1327](https://github.com/Shopify/hydrogen/pull/1327) [`ce56311f`](https://github.com/Shopify/hydrogen/commit/ce56311fc1b63df22f77b199980439548f76997a) Thanks [@frehner](https://github.com/frehner)! - **Breaking Change**: `<Money />` updates and `<UnitPrice />` Removed.
+
+  - `<UnitPrice/>` has been removed
+  - `<Money/>` has two new props: `measurement` and `measurementSeparator` which do the work that `UnitPrice` used to do
+  - The TypeScript types for `<Money/>` have been improved and should provide a better typed experience now
+
+* [#1216](https://github.com/Shopify/hydrogen/pull/1216) [`771786a6`](https://github.com/Shopify/hydrogen/commit/771786a6475c4caadb1abe5f6644e2b5c2abc021) Thanks [@wizardlyhel](https://github.com/wizardlyhel)! - Fixes an issue where cached sub-requests were not revalidating properly.
+
+- [#1304](https://github.com/Shopify/hydrogen/pull/1304) [`aa196150`](https://github.com/Shopify/hydrogen/commit/aa19615024de4fe16d548429665a863e9aae0248) Thanks [@frehner](https://github.com/frehner)! - Removed `<ProductTitle/>` and `<ProductDescription/>` components. To migrate, use `{product.title}` and `{product.description}` instead.
+
+* [#1335](https://github.com/Shopify/hydrogen/pull/1335) [`0d90f92b`](https://github.com/Shopify/hydrogen/commit/0d90f92b448b0c4d99be3e5f5fa25d0b70a8315e) Thanks [@blittle](https://github.com/blittle)! - **Breaking Change**
+
+  The `<ProductMetafield />` component has been removed. Instead, directly use the `<Metafield>` component.
+
+### Patch Changes
+
+- [#1311](https://github.com/Shopify/hydrogen/pull/1311) [`3e3fd72f`](https://github.com/Shopify/hydrogen/commit/3e3fd72f7016c0993deceefc121306cf957ef564) Thanks [@jplhomer](https://github.com/jplhomer)! - Client components no longer need to use `@shopify/hydrogen/client` as the import path. All Hydrogen components can now be imported from `@shopify/hydrogen` regardless of their context.
+
+* [#1259](https://github.com/Shopify/hydrogen/pull/1259) [`110e9aca`](https://github.com/Shopify/hydrogen/commit/110e9aca385d553e3a87fea406f8bd8a43a0788f) Thanks [@blittle](https://github.com/blittle)! - You can now easily disable streaming on any page conditionally with the `enableStreaming` option inside `hydrogen.config.js`:
+
+  ```ts
+  import {CookieSessionStorage} from '@shopify/hydrogen';
+  import {defineConfig} from '@shopify/hydrogen/config';
+
+  export default defineConfig({
+    routes: import.meta.globEager('./src/routes/**/*.server.[jt](s|sx)'),
+    shopify: {
+      defaultLocale: 'en-us',
+      storeDomain: 'hydrogen-preview.myshopify.com',
+      storefrontToken: '3b580e70970c4528da70c98e097c2fa0',
+      storefrontApiVersion: '2022-07',
+    },
+    enableStreaming: (req) => req.headers.get('user-agent') !== 'custom bot',
+  });
+  ```
+
+  By default all pages are stream rendered except for SEO bots. There shouldn't be many reasons to disable streaming, unless there is a custom bot not covered by Hydrogen's bot detection.
+
+- [#1318](https://github.com/Shopify/hydrogen/pull/1318) [`668a24da`](https://github.com/Shopify/hydrogen/commit/668a24daebf180747a002c8020c2e712f5d9a458) Thanks [@blittle](https://github.com/blittle)! - Buffer RSC flight responses. There isn't any benefit to streaming them, because we start a transition on page navigation. Buffering also fixes caching problems on the flight response.
+
+* [#1293](https://github.com/Shopify/hydrogen/pull/1293) [`e378ed61`](https://github.com/Shopify/hydrogen/commit/e378ed6199553f64d9e73ad27f9409ef501aa724) Thanks [@jplhomer](https://github.com/jplhomer)! - Reverts [#1272](https://github.com/Shopify/hydrogen/pull/1272) and properly escapes terminating script sequences
+
+- [#1283](https://github.com/Shopify/hydrogen/pull/1283) [`eea82cb0`](https://github.com/Shopify/hydrogen/commit/eea82cb02064471d274e534c557caa5d3527bc93) Thanks [@jplhomer](https://github.com/jplhomer)! - Hydrogen has been updated to use the latest stable version of React.
+
+  To update an existing Hydrogen app:
+
+  ```bash
+  yarn add react@latest react-dom@latest
+  ```
+
 ## 0.20.0
 
 ### Minor Changes

package/dist/esnext/components/CartEstimatedCost/CartEstimatedCost.client.d.ts

@@ -11,4 +11,4 @@ export interface CartEstimatedCostProps {
  * cost associated with the `amountType` prop. If no `amountType` prop is specified, then it defaults to `totalAmount`.
  * If `children` is a function, then it will pass down the render props provided by the parent component.
  */
-export declare function CartEstimatedCost<TTag extends keyof JSX.IntrinsicElements>(props: Omit<React.ComponentProps<typeof Money>, 'data'> & CartEstimatedCostProps): JSX.Element | null;
+export declare function CartEstimatedCost(props: Omit<React.ComponentProps<typeof Money>, 'data'> & CartEstimatedCostProps): JSX.Element | null;

package/dist/esnext/components/CartLinePrice/CartLinePrice.client.d.ts

@@ -8,5 +8,5 @@ interface CartLinePriceProps {
  * The `CartLinePrice` component renders a `Money` component for the cart line merchandise's price or
  * compare at price. It must be a descendent of a `CartLineProvider` component.
  */
-export declare function CartLinePrice<TTag extends keyof JSX.IntrinsicElements>(props: Omit<React.ComponentProps<typeof Money>, 'data'> & CartLinePriceProps): JSX.Element | null;
+export declare function CartLinePrice(props: Omit<React.ComponentProps<typeof Money>, 'data'> & CartLinePriceProps): JSX.Element | null;
 export {};

package/dist/esnext/components/Money/Money.client.d.ts

@@ -1,19 +1,25 @@
-import type { MoneyV2 } from '../../storefront-api-types';
+import React, { type ReactNode } from 'react';
+import type { MoneyV2, UnitPriceMeasurement } from '../../storefront-api-types';
 import type { PartialDeep } from 'type-fest';
-interface MoneyProps<TTag> {
-    /** An HTML tag to be rendered as the base element wrapper. The default is `div`. */
-    as?: TTag;
+interface CustomProps<ComponentGeneric extends React.ElementType> {
+    /** An HTML tag or React Component to be rendered as the base element wrapper. The default is `div`. */
+    as?: ComponentGeneric;
     /** An object with fields that correspond to the Storefront API's [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2). */
     data: PartialDeep<MoneyV2>;
     /** Whether to remove the currency symbol from the output. */
     withoutCurrency?: boolean;
     /** Whether to remove trailing zeros (fractional money) from the output. */
     withoutTrailingZeros?: boolean;
+    /** A [UnitPriceMeasurement object](https://shopify.dev/api/storefront/latest/objects/unitpricemeasurement). */
+    measurement?: PartialDeep<UnitPriceMeasurement>;
+    /** Customizes the separator between the money output and the measurement output. Used with the `measurement` prop. Defaults to `'/'`. */
+    measurementSeparator?: ReactNode;
 }
+declare type MoneyProps<ComponentGeneric extends React.ElementType> = CustomProps<ComponentGeneric> & Omit<React.ComponentPropsWithoutRef<ComponentGeneric>, keyof CustomProps<ComponentGeneric>>;
 /**
  * The `Money` component renders a string of the Storefront API's
  * [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) according to the
  * `defaultLocale` in [the `hydrogen.config.js` file](https://shopify.dev/custom-storefronts/hydrogen/framework/hydrogen-config).
  */
-export declare function Money<TTag extends keyof JSX.IntrinsicElements = 'div'>(props: JSX.IntrinsicElements[TTag] & MoneyProps<TTag>): JSX.Element;
+export declare function Money<TTag extends React.ElementType>({ data, as, withoutCurrency, withoutTrailingZeros, measurement, measurementSeparator, ...passthroughProps }: MoneyProps<TTag>): JSX.Element;
 export {};

package/dist/esnext/components/Money/Money.client.js

@@ -5,8 +5,10 @@ import { useMoney } from '../../hooks';
  * [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) according to the
  * `defaultLocale` in [the `hydrogen.config.js` file](https://shopify.dev/custom-storefronts/hydrogen/framework/hydrogen-config).
  */
-export function Money(props) {
-    const { data, as, withoutCurrency, withoutTrailingZeros, ...passthroughProps } = props;
+export function Money({ data, as, withoutCurrency, withoutTrailingZeros, measurement, measurementSeparator = '/', ...passthroughProps }) {
+    if (!isMoney(data)) {
+        throw new Error(`<Money/> needs a valid 'data' prop that has 'amount' and 'currencyCode'`);
+    }
     const moneyObject = useMoney(data);
     const Wrapper = as !== null && as !== void 0 ? as : 'div';
     let output = moneyObject.localizedString;
@@ -22,5 +24,16 @@ export function Money(props) {
             output = moneyObject.withoutTrailingZerosAndCurrency;
         }
     }
-    return React.createElement(Wrapper, { ...passthroughProps }, output);
+    return (React.createElement(Wrapper, { ...passthroughProps },
+        output,
+        measurement && measurement.referenceUnit && (React.createElement(React.Fragment, null,
+            measurementSeparator,
+            measurement.referenceUnit))));
+}
+// required in order to narrow the money object down and make TS happy
+function isMoney(maybeMoney) {
+    return (typeof maybeMoney.amount === 'string' &&
+        !!maybeMoney.amount &&
+        typeof maybeMoney.currencyCode === 'string' &&
+        !!maybeMoney.currencyCode);
 }

package/dist/esnext/components/ProductPrice/ProductPrice.client.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Money } from '../Money';
-import { UnitPrice } from '../UnitPrice';
 export interface ProductPriceProps {
     /** The type of price. Valid values: `regular` (default) or `compareAt`. */
     priceType?: 'regular' | 'compareAt';
@@ -13,4 +12,4 @@ export interface ProductPriceProps {
  * The `ProductPrice` component renders a `Money` component with the product
  * [`priceRange`](https://shopify.dev/api/storefront/reference/products/productpricerange)'s `maxVariantPrice` or `minVariantPrice`, for either the regular price or compare at price range. It must be a descendent of the `ProductProvider` component.
  */
-export declare function ProductPrice<TTag extends keyof JSX.IntrinsicElements>(props: (Omit<React.ComponentProps<typeof UnitPrice>, 'data' | 'measurement'> | Omit<React.ComponentProps<typeof Money>, 'data'>) & ProductPriceProps): JSX.Element | null;
+export declare function ProductPrice<TTag extends keyof JSX.IntrinsicElements>(props: Omit<React.ComponentProps<typeof Money>, 'data' | 'measurement'> & ProductPriceProps): JSX.Element | null;

package/dist/esnext/components/ProductPrice/ProductPrice.client.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Money } from '../Money';
 import { useProduct } from '../ProductProvider';
-import { UnitPrice } from '../UnitPrice';
 /**
  * The `ProductPrice` component renders a `Money` component with the product
  * [`priceRange`](https://shopify.dev/api/storefront/reference/products/productpricerange)'s `maxVariantPrice` or `minVariantPrice`, for either the regular price or compare at price range. It must be a descendent of the `ProductProvider` component.
@@ -51,7 +50,7 @@ export function ProductPrice(props) {
         return null;
     }
     if (measurement) {
-        return (React.createElement(UnitPrice, { ...passthroughProps, data: price, measurement: measurement }));
+        return (React.createElement(Money, { ...passthroughProps, data: price, measurement: measurement }));
     }
     return React.createElement(Money, { ...passthroughProps, data: price });
 }

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

@@ -21,10 +21,7 @@ export { CartEstimatedCost } from './CartEstimatedCost';
 export { CartProvider, useCart, useInstantCheckout } from './CartProvider';
 export type { State, Status, Cart, CartWithActions, CartAction, } from './CartProvider';
 export { ProductProvider, useProduct } from './ProductProvider';
-export { ProductDescription } from './ProductDescription';
-export { ProductTitle } from './ProductTitle';
 export { ProductPrice } from './ProductPrice';
-export { ProductMetafield } from './ProductMetafield';
 export { BuyNowButton } from './BuyNowButton';
 export { ShopPayButton } from './ShopPayButton';
 export { useCountry } from '../hooks/useCountry';

package/dist/esnext/components/index.js

@@ -19,10 +19,7 @@ export { CartShopPayButton } from './CartShopPayButton';
 export { CartEstimatedCost } from './CartEstimatedCost';
 export { CartProvider, useCart, useInstantCheckout } from './CartProvider';
 export { ProductProvider, useProduct } from './ProductProvider';
-export { ProductDescription } from './ProductDescription';
-export { ProductTitle } from './ProductTitle';
 export { ProductPrice } from './ProductPrice';
-export { ProductMetafield } from './ProductMetafield';
 export { BuyNowButton } from './BuyNowButton';
 export { ShopPayButton } from './ShopPayButton';
 export { useCountry } from '../hooks/useCountry';

package/dist/esnext/entry-server.js

@@ -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())
@@ -108,7 +112,7 @@ function getApiRoute(url, routes) {
  */
 async function render(url, { App, request, template, componentResponse, nonce, log }) {
     const state = { pathname: url.pathname, search: url.search };
-    const { AppSSR } = buildAppSSR({
+    const { AppSSR, rscReadable } = buildAppSSR({
         App,
         log,
         state,
@@ -120,7 +124,10 @@ async function render(url, { App, request, template, componentResponse, nonce, l
         componentResponse.writeHead({ status: 500 });
         return template;
     }
-    let html = await renderToBufferedString(AppSSR, { log, nonce }).catch(onErrorShell);
+    let [html, flight] = await Promise.all([
+        renderToBufferedString(AppSSR, { log, nonce }).catch(onErrorShell),
+        bufferReadableStream(rscReadable.getReader()).catch(() => null),
+    ]);
     const { headers, status, statusText } = getResponseOptions(componentResponse);
     /**
      * TODO: Also add `Vary` headers for `accept-language` and any other keys
@@ -138,6 +145,9 @@ 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(flight) + '</body>');
+    }
     postRequestTasks('ssr', status, request, componentResponse);
     return new Response(html, {
         status,
@@ -164,7 +174,11 @@ async function stream(url, { App, request, response, componentResponse, template
     const rscToScriptTagReadable = new ReadableStream({
         start(controller) {
             log.trace('rsc start chunks');
-            bufferReadableStream(rscReadable.getReader()).then(() => {
+            const encoder = new TextEncoder();
+            bufferReadableStream(rscReadable.getReader(), (chunk) => {
+                const metaTag = flightContainer(chunk);
+                controller.enqueue(encoder.encode(metaTag));
+            }).then(() => {
                 log.trace('rsc finish chunks');
                 return controller.close();
             });
@@ -354,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 };
@@ -512,6 +507,9 @@ async function createNodeWriter() {
     const { PassThrough } = await import(streamImport);
     return new PassThrough();
 }
+function flightContainer(chunk) {
+    return `<meta data-flight="${htmlEncode(chunk)}" />`;
+}
 function postRequestTasks(type, status, request, componentResponse) {
     logServerResponse(type, request, status);
     logCacheControlHeaders(type, request, componentResponse);

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

@@ -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/useQuery/hooks.js

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

@@ -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.js

@@ -1,15 +1,65 @@
 // 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;
-function createResponseCache() {
-    return new Map();
+// 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({
+            start(controller) {
+                const encoder = new TextEncoder();
+                const write = (chunk) => {
+                    controller.enqueue(encoder.encode(chunk));
+                    return 0;
+                };
+                flightChunks.forEach(write);
+                flightChunks.push = write;
+                contentLoaded.then(() => {
+                    controller.close();
+                    observer.disconnect();
+                });
+            },
+        });
+    }
+    catch (_) {
+        // Old browser, will try a new hydration request later
+    }
 }
+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
@@ -18,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;
@@ -47,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

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

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

@@ -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);
+}