@shopify/hydrogen 1.2.0 → 1.3.2

package/README.md

@@ -8,7 +8,7 @@ Hydrogen is a React framework and SDK that you can use to build fast and dynamic
 
 **Requirements:**
 
-- Node.js version 16.5.0 or higher
+- Node.js version 16.14.0 or higher
 - Yarn
 
 ```bash

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

@@ -219,6 +219,7 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
                 ClientAnalytics.publish(ClientAnalytics.eventNames.ADD_TO_CART, true, {
                     addedCartLines: cart.lines,
                     cart: data.cartCreate.cart,
+                    prevCart: null,
                 });
             }
             dispatch({
@@ -258,6 +259,7 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
                 ClientAnalytics.publish(ClientAnalytics.eventNames.ADD_TO_CART, true, {
                     addedCartLines: lines,
                     cart: data.cartLinesAdd.cart,
+                    prevCart: state.cart,
                 });
                 dispatch({
                     type: 'resolve',
@@ -289,6 +291,7 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
                 ClientAnalytics.publish(ClientAnalytics.eventNames.REMOVE_FROM_CART, true, {
                     removedCartLines: lines,
                     cart: data.cartLinesRemove.cart,
+                    prevCart: state.cart,
                 });
                 dispatch({
                     type: 'resolve',
@@ -320,6 +323,8 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
                 ClientAnalytics.publish(ClientAnalytics.eventNames.UPDATE_CART, true, {
                     updatedCartLines: lines,
                     oldCart: state.cart,
+                    cart: data.cartLinesUpdate.cart,
+                    prevCart: state.cart,
                 });
                 dispatch({
                     type: 'resolve',
@@ -432,6 +437,7 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
                 ClientAnalytics.publish(ClientAnalytics.eventNames.DISCOUNT_CODE_UPDATED, true, {
                     updatedDiscountCodes: discountCodes,
                     cart: data.cartDiscountCodesUpdate.cart,
+                    prevCart: state.cart,
                 });
                 dispatch({
                     type: 'resolve',

package/dist/esnext/components/CartProvider/cart-queries.d.ts

@@ -7,4 +7,4 @@ export declare const CartBuyerIdentityUpdate: (cartFragment: string) => string;
 export declare const CartAttributesUpdate: (cartFragment: string) => string;
 export declare const CartDiscountCodesUpdate: (cartFragment: string) => string;
 export declare const CartQuery: (cartFragment: string) => string;
-export declare const defaultCartFragment = "\nfragment CartFragment on Cart {\n  id\n  checkoutUrl\n  totalQuantity\n  buyerIdentity {\n    countryCode\n    customer {\n      id\n      email\n      firstName\n      lastName\n      displayName\n    }\n    email\n    phone\n  }\n  lines(first: $numCartLines) {\n    edges {\n      node {\n        id\n        quantity\n        attributes {\n          key\n          value\n        }\n        cost {\n          totalAmount {\n            amount\n            currencyCode\n          }\n          compareAtAmountPerQuantity {\n            amount\n            currencyCode\n          }\n        }\n        merchandise {\n          ... on ProductVariant {\n            id\n            availableForSale\n            compareAtPriceV2 {\n              ...MoneyFragment\n            }\n            priceV2 {\n              ...MoneyFragment\n            }\n            requiresShipping\n            title\n            image {\n              ...ImageFragment\n            }\n            product {\n              handle\n              title\n            }\n            selectedOptions {\n              name\n              value\n            }\n          }\n        }\n      }\n    }\n  }\n  cost {\n    subtotalAmount {\n      ...MoneyFragment\n    }\n    totalAmount {\n      ...MoneyFragment\n    }\n    totalDutyAmount {\n      ...MoneyFragment\n    }\n    totalTaxAmount {\n      ...MoneyFragment\n    }\n  }\n  note\n  attributes {\n    key\n    value\n  }\n  discountCodes {\n    code\n  }\n}\n\nfragment MoneyFragment on MoneyV2 {\n  currencyCode\n  amount\n}\nfragment ImageFragment on Image {\n  id\n  url\n  altText\n  width\n  height\n}\n";
+export declare const defaultCartFragment = "\nfragment CartFragment on Cart {\n  id\n  checkoutUrl\n  totalQuantity\n  buyerIdentity {\n    countryCode\n    customer {\n      id\n      email\n      firstName\n      lastName\n      displayName\n    }\n    email\n    phone\n  }\n  lines(first: $numCartLines) {\n    edges {\n      node {\n        id\n        quantity\n        attributes {\n          key\n          value\n        }\n        cost {\n          totalAmount {\n            amount\n            currencyCode\n          }\n          compareAtAmountPerQuantity {\n            amount\n            currencyCode\n          }\n        }\n        merchandise {\n          ... on ProductVariant {\n            id\n            availableForSale\n            compareAtPriceV2 {\n              ...MoneyFragment\n            }\n            priceV2 {\n              ...MoneyFragment\n            }\n            requiresShipping\n            title\n            image {\n              ...ImageFragment\n            }\n            product {\n              handle\n              title\n              id\n            }\n            selectedOptions {\n              name\n              value\n            }\n          }\n        }\n      }\n    }\n  }\n  cost {\n    subtotalAmount {\n      ...MoneyFragment\n    }\n    totalAmount {\n      ...MoneyFragment\n    }\n    totalDutyAmount {\n      ...MoneyFragment\n    }\n    totalTaxAmount {\n      ...MoneyFragment\n    }\n  }\n  note\n  attributes {\n    key\n    value\n  }\n  discountCodes {\n    code\n  }\n}\n\nfragment MoneyFragment on MoneyV2 {\n  currencyCode\n  amount\n}\nfragment ImageFragment on Image {\n  id\n  url\n  altText\n  width\n  height\n}\n";

package/dist/esnext/components/CartProvider/cart-queries.js

@@ -154,6 +154,7 @@ fragment CartFragment on Cart {
             product {
               handle
               title
+              id
             }
             selectedOptions {
               name

package/dist/esnext/components/ExternalVideo/ExternalVideo.js

@@ -5,10 +5,10 @@ import { useEmbeddedVideoUrl } from '../../utilities/index.js';
  * API's [ExternalVideo object](https://shopify.dev/api/storefront/reference/products/externalvideo).
  */
 export function ExternalVideo(props) {
-    const { data, options, id = data.id, frameBorder = '0', allow = 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture', allowFullScreen = true, ...passthroughProps } = props;
+    const { data, options, id = data.id, frameBorder = '0', allow = 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture', allowFullScreen = true, loading = 'lazy', ...passthroughProps } = props;
     if (!data.embedUrl) {
         throw new Error(`<ExternalVideo/> requires the 'embedUrl' property`);
     }
     const url = useEmbeddedVideoUrl(data.embedUrl, options);
-    return (React.createElement("iframe", { ...passthroughProps, id: id ?? data.embedUrl, frameBorder: frameBorder, allow: allow, allowFullScreen: allowFullScreen, src: url }));
+    return (React.createElement("iframe", { ...passthroughProps, id: id ?? data.embedUrl, frameBorder: frameBorder, allow: allow, allowFullScreen: allowFullScreen, src: url, loading: loading }));
 }

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

@@ -79,7 +79,7 @@ declare type LoaderProps<GenericLoaderOpts> = {
      */
     loaderOptions?: GenericLoaderOpts;
 };
-declare type ExternalImageProps<GenericLoaderOpts> = SetRequired<HtmlImageProps, 'src' | 'width' | 'height' | 'alt'> & {
+export declare type ExternalImageProps<GenericLoaderOpts> = SetRequired<HtmlImageProps, 'src' | 'width' | 'height' | 'alt'> & {
     /** 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`.

package/dist/esnext/components/Image/Image.js

@@ -27,7 +27,7 @@ export function Image(props) {
         return React.createElement(ExternalImage, { ...props });
     }
 }
-function ShopifyImage({ data, width, height, loading, loader = shopifyImageLoader, loaderOptions, widths, ...rest }) {
+function ShopifyImage({ data, width, height, loading, loader = shopifyImageLoader, loaderOptions, widths, decoding = 'async', ...rest }) {
     if (!data.url) {
         throw new Error(`<Image/>: the 'data' prop requires the 'url' property`);
     }
@@ -72,10 +72,10 @@ function ShopifyImage({ data, width, height, loading, loader = shopifyImageLoade
             loader,
         });
     /* eslint-disable hydrogen/prefer-image-component */
-    return (React.createElement("img", { id: data.id ?? '', alt: data.altText ?? rest.alt ?? '', loading: loading ?? 'lazy', ...rest, src: finalSrc, width: imgElementWidth ?? undefined, height: imgElementHeight ?? undefined, srcSet: finalSrcset }));
+    return (React.createElement("img", { id: data.id ?? '', alt: data.altText ?? rest.alt ?? '', loading: loading ?? 'lazy', ...rest, src: finalSrc, width: imgElementWidth ?? undefined, height: imgElementHeight ?? undefined, srcSet: finalSrcset, decoding: decoding }));
     /* eslint-enable hydrogen/prefer-image-component */
 }
-function ExternalImage({ src, width, height, alt, loader, loaderOptions, widths, loading, ...rest }) {
+function ExternalImage({ src, width, height, alt, loader, loaderOptions, widths, loading, decoding = 'async', ...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}`);
     }
@@ -112,7 +112,7 @@ function ExternalImage({ src, width, height, alt, loader, loaderOptions, widths,
         // @ts-expect-error TS doesn't understand that it could exist
         width: loaderOptions?.width ?? width, 
         // @ts-expect-error TS doesn't understand that it could exist
-        height: loaderOptions?.height ?? height, alt: alt ?? '', loading: loading ?? 'lazy', srcSet: finalSrcset }));
+        height: loaderOptions?.height ?? height, alt: alt ?? '', loading: loading ?? 'lazy', srcSet: finalSrcset, decoding: decoding }));
     /* eslint-enable hydrogen/prefer-image-component */
 }
 function internalImageSrcSet({ src, width, crop, scale, widths, loader, height, }) {

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

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

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

@@ -1,7 +1,7 @@
 export { Link } from './Link/index.js';
 export { MediaFile } from './MediaFile/index.js';
 export { Video } from './Video/index.js';
-export { Image } from './Image/index.js';
+export { Image, type ExternalImageProps, type ShopifyImageProps, } from './Image/index.js';
 export { ExternalVideo } from './ExternalVideo/index.js';
 export { AddToCartButton } from './AddToCartButton/index.js';
 export { ModelViewer } from './ModelViewer/index.js';

package/dist/esnext/components/index.js

@@ -1,7 +1,7 @@
 export { Link } from './Link/index.js';
 export { MediaFile } from './MediaFile/index.js';
 export { Video } from './Video/index.js';
-export { Image } from './Image/index.js';
+export { Image, } from './Image/index.js';
 export { ExternalVideo } from './ExternalVideo/index.js';
 export { AddToCartButton } from './AddToCartButton/index.js';
 export { ModelViewer } from './ModelViewer/index.js';

package/dist/esnext/constants.d.ts

@@ -4,6 +4,7 @@ export declare const EVENT_PATHNAME_REGEX: RegExp;
 export declare const OXYGEN_SECRET_TOKEN_ENVIRONMENT_VARIABLE = "SHOPIFY_STOREFRONT_API_SECRET_TOKEN";
 export declare const STOREFRONT_API_SECRET_TOKEN_HEADER = "Shopify-Storefront-Private-Token";
 export declare const STOREFRONT_API_PUBLIC_TOKEN_HEADER = "X-Shopify-Storefront-Access-Token";
+export declare const FORM_REDIRECT_COOKIE = "Hydrogen-Redirect";
 export declare const STOREFRONT_API_BUYER_IP_HEADER = "Shopify-Storefront-Buyer-IP";
 export declare const SHOPIFY_STOREFRONT_ID_VARIABLE = "SHOPIFY_STOREFRONT_ID";
 export declare const SHOPIFY_STOREFRONT_ID_HEADER = "Shopify-Storefront-Id";

package/dist/esnext/constants.js

@@ -4,6 +4,7 @@ export const EVENT_PATHNAME_REGEX = new RegExp(`^${EVENT_PATHNAME}/`);
 export const OXYGEN_SECRET_TOKEN_ENVIRONMENT_VARIABLE = 'SHOPIFY_STOREFRONT_API_SECRET_TOKEN';
 export const STOREFRONT_API_SECRET_TOKEN_HEADER = 'Shopify-Storefront-Private-Token';
 export const STOREFRONT_API_PUBLIC_TOKEN_HEADER = 'X-Shopify-Storefront-Access-Token';
+export const FORM_REDIRECT_COOKIE = 'Hydrogen-Redirect';
 export const STOREFRONT_API_BUYER_IP_HEADER = 'Shopify-Storefront-Buyer-IP';
 export const SHOPIFY_STOREFRONT_ID_VARIABLE = 'SHOPIFY_STOREFRONT_ID';
 export const SHOPIFY_STOREFRONT_ID_HEADER = 'Shopify-Storefront-Id';

package/dist/esnext/entry-client.js

@@ -1,6 +1,6 @@
 import React, { Suspense, useState, StrictMode, Fragment, useEffect, } from 'react';
 import { hydrateRoot } from 'react-dom/client';
-import { ErrorBoundary } from 'react-error-boundary';
+import { ErrorBoundary } from 'react-error-boundary/dist/react-error-boundary.esm';
 import { createFromFetch, createFromReadableStream,
 // @ts-ignore
  } from '@shopify/hydrogen/vendor/react-server-dom-vite';

package/dist/esnext/entry-server.js

@@ -10,7 +10,7 @@ import { ServerPropsProvider } from './foundation/ServerPropsProvider/index.js';
 import { isBotUA } from './utilities/bot-ua.js';
 import { getCache, setCache } from './foundation/runtime.js';
 import { ssrRenderToPipeableStream, ssrRenderToReadableStream, rscRenderToReadableStream, createFromReadableStream, bufferReadableStream, } from './streaming.server.js';
-import { stripScriptsFromTemplate } from './utilities/template.js';
+import { getTemplate } from './utilities/template.js';
 import { Analytics } from './foundation/Analytics/Analytics.server.js';
 import { DevTools } from './foundation/DevTools/DevTools.server.js';
 import { getSyncSessionApi } from './foundation/session/session.js';
@@ -20,6 +20,14 @@ import { splitCookiesString } from 'set-cookie-parser';
 import { deleteItemFromCache, getItemFromCache, isStale, setItemInCache, } from './foundation/Cache/cache.js';
 import { CacheShort, NO_STORE } from './foundation/Cache/strategies/index.js';
 import { getBuiltInRoute } from './foundation/BuiltInRoutes/BuiltInRoutes.js';
+import { FORM_REDIRECT_COOKIE } from './constants.js';
+// Importing 'stream' directly breaks Vite resolve
+// when building for workers, even though this code
+// does not run in a worker. Looks like tree-shaking
+// kicks in after the import analysis/bundle.
+// @ts-ignore
+import stream from 'virtual__stream';
+const PassThrough = stream.PassThrough;
 const DOCTYPE = '<!DOCTYPE html>';
 const CONTENT_TYPE = 'Content-Type';
 const HTML_CONTENT_TYPE = 'text/html; charset=UTF-8';
@@ -29,9 +37,10 @@ export const renderHydrogen = (App) => {
         const request = new HydrogenRequest(rawRequest);
         const url = new URL(request.url);
         let sessionApi = options.sessionApi;
-        const { default: inlineHydrogenConfig } = await import(
+        const { default: importedConfig } = await import(
         // @ts-ignore
         'virtual__hydrogen.config.ts');
+        const inlineHydrogenConfig = typeof importedConfig === 'function' ? importedConfig() : importedConfig;
         const { default: hydrogenRoutes } = await import(
         // @ts-ignore
         'virtual__hydrogen-routes.server.jsx');
@@ -43,9 +52,13 @@ export const renderHydrogen = (App) => {
         request.ctx.buyerIpHeader = buyerIpHeader;
         setLogger(hydrogenConfig.logger);
         const log = getLoggerWithContext(request);
-        const response = new HydrogenResponse(null, {
+        const response = new HydrogenResponse(request.url, null, {
             headers: headers || {},
         });
+        if (request.cookies.get(FORM_REDIRECT_COOKIE)) {
+            response.headers.set('SET-COOKIE', `${FORM_REDIRECT_COOKIE}=`);
+            response.doNotStream();
+        }
         if (hydrogenConfig.poweredByHeader ?? true) {
             // If undefined in the config, then always show the header
             response.headers.set('powered-by', 'Shopify-Hydrogen');
@@ -91,18 +104,21 @@ export const renderHydrogen = (App) => {
                                 maxAge: 10,
                             }));
                             await processRequest(handleRequest, App, url, request, sessionApi, options, response, hydrogenConfig, true);
+                            response.markAsSent();
                         }
                         catch (e) {
                             log.error('Cache revalidate error', e);
                         }
                     });
                     // Asynchronously wait for it in workers
-                    request.ctx.runtime?.waitUntil(staleWhileRevalidatePromise);
+                    request.ctx.runtime?.waitUntil?.(staleWhileRevalidatePromise);
                 }
                 return cachedResponse;
             }
         }
-        return processRequest(handleRequest, App, url, request, sessionApi, options, response, hydrogenConfig);
+        const result = await processRequest(handleRequest, App, url, request, sessionApi, options, response, hydrogenConfig);
+        response.markAsSent();
+        return result;
     };
     if (__HYDROGEN_WORKER__)
         return handleRequest;
@@ -137,6 +153,7 @@ async function processRequest(handleRequest, App, url, request, sessionApi, opti
     if (isRSCRequest) {
         const buffered = await bufferReadableStream(rsc.readable.getReader());
         postRequestTasks('rsc', 200, request, response);
+        response.headers.set('cache-control', response.cacheControlHeader);
         cacheResponse(response, request, [buffered], revalidate);
         return new Response(buffered, {
             headers: response.headers,
@@ -154,19 +171,10 @@ async function processRequest(handleRequest, App, url, request, sessionApi, opti
         request,
         response,
         nodeResponse,
-        template: await getTemplate(indexTemplate, url),
         revalidate,
+        template: await getTemplate(indexTemplate, url),
     });
 }
-async function getTemplate(indexTemplate, url) {
-    let template = typeof indexTemplate === 'function'
-        ? await indexTemplate(url.toString())
-        : indexTemplate;
-    if (template && typeof template !== 'string') {
-        template = template.default;
-    }
-    return template;
-}
 function getApiRoute(url, routes) {
     const apiRoutes = getApiRoutes(routes);
     return getApiRouteFromURL(url, apiRoutes);
@@ -185,18 +193,21 @@ function assembleHtml({ ssrHtml, rscPayload, request, template, }) {
  * Run the SSR/Fizz part of the App. If streaming is disabled,
  * this buffers the output and applies SEO enhancements.
  */
-async function runSSR({ rsc, state, request, response, nodeResponse, template, nonce, dev, log, revalidate, }) {
+async function runSSR({ rsc, state, request, response, nodeResponse, nonce, dev, log, revalidate, template: { raw: template, noScriptTemplate, bootstrapModules, bootstrapScripts, linkHeader, }, }) {
     let ssrDidError;
     const didError = () => rsc.didError() ?? ssrDidError;
     const [rscReadableForFizz, rscReadableForFlight] = rsc.readable.tee();
     const rscResponse = createFromReadableStream(rscReadableForFizz);
     const RscConsumer = () => rscResponse.readRoot();
-    const { noScriptTemplate, bootstrapScripts, bootstrapModules } = stripScriptsFromTemplate(template);
     const AppSSR = (React.createElement(Html, { template: response.canStream() ? noScriptTemplate : template, hydrogenConfig: request.ctx.hydrogenConfig },
         React.createElement(ServerRequestProvider, { request: request },
             React.createElement(ServerPropsProvider, { initialServerProps: state, setServerPropsForRsc: () => { }, setRscResponseFromApiRoute: () => { } },
                 React.createElement(Suspense, { fallback: null },
                     React.createElement(RscConsumer, null))))));
+    if (linkHeader) {
+        const existingLinkHeader = response.headers.get('Link');
+        response.headers.set('Link', existingLinkHeader ? existingLinkHeader + ', ' + linkHeader : linkHeader);
+    }
     log.trace('start ssr');
     const rscReadable = response.canStream()
         ? new ReadableStream({
@@ -373,7 +384,7 @@ async function runSSR({ rsc, state, request, response, nodeResponse, template, n
                     // Redirects found after any async code
                     return nodeResponse.end();
                 }
-                const bufferedResponse = await createNodeWriter();
+                const bufferedResponse = new PassThrough();
                 const bufferedRscPromise = bufferReadableStream(rscReadable.getReader());
                 let ssrHtml = '';
                 bufferedResponse.on('data', (chunk) => (ssrHtml += chunk.toString()));
@@ -492,15 +503,6 @@ function isRedirect(response) {
     const status = response.status ?? response.statusCode ?? 0;
     return status >= 300 && status < 400;
 }
-async function createNodeWriter() {
-    // Importing 'stream' directly breaks Vite resolve
-    // when building for workers, even though this code
-    // does not run in a worker. Looks like tree-shaking
-    // kicks in after the import analysis/bundle.
-    const streamImport = __HYDROGEN_WORKER__ ? '' : 'stream';
-    const { PassThrough } = await import(streamImport);
-    return new PassThrough();
-}
 function flightContainer(chunk) {
     return `<meta data-flight="${htmlEncode(chunk)}" />`;
 }
@@ -593,7 +595,7 @@ async function cacheResponse(response, request, chunks, revalidate) {
         }
         else {
             const cachePutPromise = Promise.resolve(true).then(() => saveCacheResponse(response, request, chunks));
-            request.ctx.runtime?.waitUntil(cachePutPromise);
+            request.ctx.runtime?.waitUntil?.(cachePutPromise);
         }
     }
 }

package/dist/esnext/experimental.d.ts

@@ -1 +1,2 @@
 export { Form } from './foundation/Form/Form.client.js';
+export { useFlashSession } from './foundation/useSession/useSession.js';

package/dist/esnext/experimental.js

@@ -1 +1,2 @@
 export { Form } from './foundation/Form/Form.client.js';
+export { useFlashSession } from './foundation/useSession/useSession.js';

package/dist/esnext/foundation/Cache/cache.js

@@ -88,7 +88,6 @@ export async function setItemInCache(request, response, userCacheOptions) {
     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);

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

@@ -46,6 +46,7 @@ export declare class HydrogenRequest extends Request {
         router: RouterContextData;
         buyerIpHeader?: string;
         session?: SessionSyncApi;
+        flashSession: Record<string, any>;
         runtime?: RuntimeContext;
         scopes: Map<string, Record<string, any>>;
         localization?: LocalizationContextValue;

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

@@ -60,6 +60,7 @@ export class HydrogenRequest extends Request {
             },
             preloadQueries: new Map(),
             scopes: new Map(),
+            flashSession: {},
         };
         this.cookies = this.parseCookies();
     }

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

@@ -2,11 +2,13 @@ import type { CachingStrategy } from '../../types.js';
 import React from 'react';
 export declare class HydrogenResponse extends Response {
     private wait;
+    private sent;
     private cacheOptions;
-    private proxy;
     status: number;
     statusText: string;
-    constructor(...args: ConstructorParameters<typeof Response>);
+    url: string;
+    constructor(url: string, body: any, init: any);
+    markAsSent(): void;
     /**
      * Buffer the current response until all queries have resolved,
      * and prevent it from streaming back early.

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

@@ -1,31 +1,32 @@
 import { CacheShort, generateCacheControlHeader, } from '../Cache/strategies/index.js';
 import Redirect from '../Redirect/Redirect.client.js';
 import React from 'react';
+import { log } from '../../utilities/log/log.js';
 export class HydrogenResponse extends Response {
     wait = false;
+    sent = false;
     cacheOptions = CacheShort();
-    proxy = Object.defineProperties(Object.create(null), {
-        // Default values:
-        status: { value: 200, writable: true },
-        statusText: { value: '', writable: true },
-    });
-    // @ts-ignore
-    status;
-    // @ts-ignore
-    statusText;
-    constructor(...args) {
-        super(...args);
-        return new Proxy(this, {
-            get: (target, key) => target.proxy[key] ?? Reflect.get(target, key),
-            set: (target, key, value) => Reflect.set(key in target.proxy ? target.proxy : target, key, value),
-        });
+    status = 200;
+    statusText = '';
+    url;
+    constructor(url, body, init) {
+        super(body, init);
+        this.url = url;
+    }
+    markAsSent() {
+        this.sent = true;
     }
     /**
      * Buffer the current response until all queries have resolved,
      * and prevent it from streaming back early.
      */
     doNotStream() {
-        this.wait = true;
+        if (!this.sent) {
+            this.wait = true;
+        }
+        else {
+            log.warn(`response.doNotStream() failed, the stream has already started on: ${this.url}\nDisabling streaming should always be the first thing in your route server component.`);
+        }
     }
     canStream() {
         return !this.wait;

package/dist/esnext/foundation/ServerPropsProvider/ServerPropsProvider.js

@@ -1,6 +1,4 @@
-import React, { createContext, useMemo, useCallback, 
-// @ts-ignore
-useTransition, useState, } from 'react';
+import React, { createContext, useMemo, useCallback, useTransition, useState, } from 'react';
 const PRIVATE_PROPS = ['request', 'response'];
 export const ServerPropsContext = createContext(null);
 export function ServerPropsProvider({ initialServerProps, setServerPropsForRsc, setRscResponseFromApiRoute, children, }) {

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

@@ -1,7 +1,8 @@
-declare type ResponseSyncInit = [string, ResponseInit];
+declare type ResponseSyncInit = [string, ResponseInit, string];
 export declare class ResponseSync extends Response {
     #private;
     bodyUsed: boolean;
+    url: string;
     constructor(init: ResponseSyncInit);
     text(): string;
     json(): any;

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

@@ -4,16 +4,27 @@ export class ResponseSync extends Response {
     bodyUsed = true;
     #text;
     #json;
+    url;
     constructor(init) {
-        super(...init);
+        super(init[0], init[1]);
         this.#text = init[0];
+        this.url = init[2];
     }
     // @ts-expect-error Changing inherited types
     text() {
         return this.#text;
     }
     json() {
-        return (this.#json ??= parseJSON(this.#text));
+        try {
+            return (this.#json ??= parseJSON(this.#text));
+        }
+        catch (e) {
+            if (!this.ok) {
+                throw new Error(`Request to ${this.url} failed with ${this.status} and the response body is not parseable.\nMake sure to handle the error state when using fetchSync.`);
+            }
+            else
+                throw e;
+        }
     }
     /**
      * @deprecated Access response properties at the top level instead.
@@ -33,6 +44,7 @@ export class ResponseSync extends Response {
                 statusText: response.statusText,
                 headers: Array.from(response.headers.entries()),
             },
+            response.url,
         ];
     }
 }

package/dist/esnext/foundation/session/session-types.d.ts

@@ -1,10 +1,12 @@
 export declare type SessionSyncApi = {
     get: () => Record<string, string>;
+    set: (data: Record<string, any>) => any;
 };
 export declare type SessionApi = {
     get: () => Promise<Record<string, string>>;
     set: (key: string, value: string) => Promise<void>;
     destroy: () => Promise<void>;
+    getFlash: (key: string) => any;
 };
 export declare type SessionStorageAdapter = {
     get: (request: Request) => Promise<Record<string, string>>;

package/dist/esnext/foundation/session/session.d.ts

@@ -4,12 +4,15 @@ import type { HydrogenRequest } from '../HydrogenRequest/HydrogenRequest.server.
 import type { SessionStorageAdapter } from './session-types.js';
 export declare function getSyncSessionApi(request: HydrogenRequest, componentResponse: HydrogenResponse, log: Logger, session?: SessionStorageAdapter): {
     get(): any;
+    set(data: Record<string, any>): any;
 };
 export declare const emptySessionImplementation: (log: Logger) => {
+    getFlash(key: string): Promise<null>;
     get(): Promise<{}>;
     set(key: string, value: string): Promise<void>;
     destroy(): Promise<void>;
 };
 export declare const emptySyncSessionImplementation: (log: Logger) => {
     get(): {};
+    set(data: Record<string, any>): null;
 };

package/dist/esnext/foundation/session/session.js

@@ -9,11 +9,23 @@ export function getSyncSessionApi(request, componentResponse, log, session) {
                 }
                 return sessionPromises.getPromise.read();
             },
+            set(data) {
+                if (!sessionPromises.setPromise) {
+                    sessionPromises.setPromise = wrapPromise(session.set(request, data));
+                }
+                const cookie = sessionPromises.setPromise.read();
+                componentResponse.headers.set('Set-Cookie', cookie);
+                return cookie;
+            },
         }
         : emptySyncSessionImplementation(log);
 }
 export const emptySessionImplementation = function (log) {
     return {
+        async getFlash(key) {
+            log.warn('No session adapter has been configured!');
+            return null;
+        },
         async get() {
             log.warn('No session adapter has been configured!');
             return {};
@@ -33,5 +45,9 @@ export const emptySyncSessionImplementation = function (log) {
             log.warn('No session adapter has been configured!');
             return {};
         },
+        set(data) {
+            log.warn('No session adapter has been configured!');
+            return null;
+        },
     };
 };

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

@@ -13,6 +13,9 @@ export interface HydrogenUseQueryOptions {
      */
     shouldCacheResponse?: (body: any) => boolean;
 }
+declare global {
+    var __HYDROGEN_CACHE_ID__: string;
+}
 /**
  * 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

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

@@ -19,7 +19,7 @@ queryFn,
 queryOptions) {
     const request = useServerRequest();
     const withCacheIdKey = [
-        '__QUERY_CACHE_ID__',
+        __HYDROGEN_CACHE_ID__,
         ...(typeof key === 'string' ? [key] : key),
     ];
     const fetcher = cachedQueryFnBuilder(withCacheIdKey, queryFn, queryOptions);

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

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

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

@@ -5,3 +5,16 @@ export const useSession = function () {
     const session = request.ctx.session?.get() || {};
     return session;
 };
+export const useFlashSession = function (key) {
+    const request = useServerRequest();
+    const data = request.ctx.session?.get() || {};
+    let value = data[key];
+    if (value) {
+        delete data[key];
+        request.ctx.flashSession[key] = value;
+    }
+    request.ctx.session?.set(data);
+    value = request.ctx.flashSession[key];
+    delete request.ctx.flashSession[key];
+    return value;
+};