npm - @shopify/hydrogen - Versions diffs - 0.20.0 → 0.22.1 - Mend

@shopify/hydrogen 0.20.0 → 0.22.1

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

Files changed (156) hide show

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

@@ -18,20 +18,27 @@ 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';
-export const renderHydrogen = (App, hydrogenConfig) => {
+export const renderHydrogen = (App) => {
     const handleRequest = async function (rawRequest, options) {
         const { indexTemplate, streamableResponse, dev, cache, context, nonce, buyerIpHeader, } = options;
         const request = new ServerComponentRequest(rawRequest);
         const url = new URL(request.url);
-        if (!hydrogenConfig) {
-            // @ts-ignore
-            // eslint-disable-next-line node/no-missing-import
-            const configFile = await import('virtual:hydrogen-config');
-            hydrogenConfig = configFile.default;
-        }
+        const { default: inlineHydrogenConfig } = await import(
+        // @ts-ignore
+        // eslint-disable-next-line node/no-missing-import
+        'virtual__hydrogen.config.ts');
+        const { default: hydrogenRoutes } = await import(
+        // @ts-ignore
+        // eslint-disable-next-line node/no-missing-import
+        'virtual__hydrogen-routes.server.jsx');
+        const hydrogenConfig = {
+            ...inlineHydrogenConfig,
+            routes: hydrogenRoutes,
+        };
         request.ctx.hydrogenConfig = hydrogenConfig;
         request.ctx.buyerIpHeader = buyerIpHeader;
         const log = getLoggerWithContext(request);
@@ -51,7 +58,7 @@ export const renderHydrogen = (App, hydrogenConfig) => {
             return ServerAnalyticsRoute(request, hydrogenConfig.serverAnalyticsConnectors);
         }
         const isReactHydrationRequest = url.pathname === RSC_PATHNAME;
-        if (!isReactHydrationRequest && hydrogenConfig.routes) {
+        if (!isReactHydrationRequest) {
             const apiRoute = getApiRoute(url, hydrogenConfig.routes);
             // The API Route might have a default export, making it also a server component
             // If it does, only render the API route if the request method is GET
@@ -63,7 +70,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())
@@ -95,7 +105,9 @@ export const renderHydrogen = (App, hydrogenConfig) => {
         }
         return render(url, params);
     };
-    return handleRequest;
+    if (__WORKER__)
+        return handleRequest;
+    return ((rawRequest, options) => handleFetchResponseInNode(handleRequest(rawRequest, options), options.streamableResponse));
 };
 function getApiRoute(url, routes) {
     const apiRoutes = getApiRoutes(routes);
@@ -108,7 +120,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,24 +132,21 @@ 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
      * we want to shard our full-page cache for all Hydrogen storefronts.
      */
     headers.set('cache-control', componentResponse.cacheControlHeader);
-    if (componentResponse.customBody) {
-        // This can be used to return sitemap.xml or any other custom response.
-        postRequestTasks('ssr', status, request, componentResponse);
-        return new Response(await componentResponse.customBody, {
-            status,
-            statusText,
-            headers,
-        });
-    }
     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,
@@ -154,7 +163,7 @@ async function stream(url, { App, request, response, componentResponse, template
     const state = { pathname: url.pathname, search: url.search };
     log.trace('start stream');
     const { noScriptTemplate, bootstrapScripts, bootstrapModules } = stripScriptsFromTemplate(template);
-    const { AppSSR, rscReadable } = buildAppSSR({
+    const { AppSSR, rscReadable, rscDidError } = buildAppSSR({
         App,
         log,
         state,
@@ -164,13 +173,17 @@ 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();
             });
         },
     });
-    let didError;
+    let ssrDidError;
     if (__WORKER__) {
         const onCompleteAll = defer();
         const encoder = new TextEncoder();
@@ -184,7 +197,7 @@ async function stream(url, { App, request, response, componentResponse, template
                 bootstrapScripts,
                 bootstrapModules,
                 onError(error) {
-                    didError = error;
+                    ssrDidError = error;
                     if (dev && !writable.closed && !!responseOptions.status) {
                         writable.write(getErrorMarkup(error));
                     }
@@ -205,8 +218,8 @@ async function stream(url, { App, request, response, componentResponse, template
             onCompleteAll.resolve(true);
         });
         /* eslint-disable no-inner-declarations */
-        async function prepareForStreaming(flush) {
-            Object.assign(responseOptions, getResponseOptions(componentResponse, didError));
+        function prepareForStreaming(flush) {
+            Object.assign(responseOptions, getResponseOptions(componentResponse, rscDidError !== null && rscDidError !== void 0 ? rscDidError : ssrDidError));
             /**
              * TODO: This assumes `response.cache()` has been called _before_ any
              * queries which might be caught behind Suspense. Clarify this or add
@@ -217,21 +230,17 @@ async function stream(url, { App, request, response, componentResponse, template
                 return false;
             }
             if (flush) {
-                if (componentResponse.customBody) {
-                    writable.write(encoder.encode(await componentResponse.customBody));
-                    return false;
-                }
                 responseOptions.headers.set(CONTENT_TYPE, HTML_CONTENT_TYPE);
                 writable.write(encoder.encode(DOCTYPE));
-                if (didError) {
+                if (rscDidError !== null && rscDidError !== void 0 ? rscDidError : ssrDidError) {
                     // This error was delayed until the headers were properly sent.
-                    writable.write(encoder.encode(getErrorMarkup(didError)));
+                    writable.write(encoder.encode(getErrorMarkup((rscDidError !== null && rscDidError !== void 0 ? rscDidError : ssrDidError))));
                 }
                 return true;
             }
         }
         /* eslint-enable no-inner-declarations */
-        const shouldReturnApp = (_a = (await prepareForStreaming(componentResponse.canStream()))) !== null && _a !== void 0 ? _a : (await onCompleteAll.promise.then(prepareForStreaming));
+        const shouldReturnApp = (_a = prepareForStreaming(componentResponse.canStream())) !== null && _a !== void 0 ? _a : (await onCompleteAll.promise.then(prepareForStreaming));
         if (shouldReturnApp) {
             let bufferedSsr = '';
             let isPendingSsrWrite = false;
@@ -281,14 +290,14 @@ async function stream(url, { App, request, response, componentResponse, template
                  * additional checks downstream?
                  */
                 response.setHeader('cache-control', componentResponse.cacheControlHeader);
-                writeHeadToServerResponse(response, componentResponse, log, didError);
+                writeHeadToServerResponse(response, componentResponse, log, rscDidError !== null && rscDidError !== void 0 ? rscDidError : ssrDidError);
                 if (isRedirect(response)) {
                     // Return redirects early without further rendering/streaming
                     return response.end();
                 }
                 if (!componentResponse.canStream())
                     return;
-                startWritingHtmlToServerResponse(response, dev ? didError : undefined);
+                startWritingHtmlToServerResponse(response, dev ? rscDidError !== null && rscDidError !== void 0 ? rscDidError : ssrDidError : undefined);
                 setTimeout(() => {
                     log.trace('node pipe response');
                     pipe(response);
@@ -298,22 +307,19 @@ async function stream(url, { App, request, response, componentResponse, template
                     return response.write(chunk);
                 });
             },
-            async onAllReady() {
+            onAllReady() {
                 log.trace('node complete stream');
                 if (componentResponse.canStream() || response.writableEnded) {
                     postRequestTasks('str', response.statusCode, request, componentResponse);
                     return;
                 }
-                writeHeadToServerResponse(response, componentResponse, log, didError);
+                writeHeadToServerResponse(response, componentResponse, log, rscDidError !== null && rscDidError !== void 0 ? rscDidError : ssrDidError);
                 postRequestTasks('str', response.statusCode, request, componentResponse);
                 if (isRedirect(response)) {
                     // Redirects found after any async code
                     return response.end();
                 }
-                if (componentResponse.customBody) {
-                    return response.end(await componentResponse.customBody);
-                }
-                startWritingHtmlToServerResponse(response, dev ? didError : undefined);
+                startWritingHtmlToServerResponse(response, dev ? rscDidError !== null && rscDidError !== void 0 ? rscDidError : ssrDidError : undefined);
                 bufferReadableStream(rscToScriptTagReadable.getReader()).then((scriptTags) => {
                     // Piping ends the response so script tags
                     // must be written before that.
@@ -331,7 +337,7 @@ async function stream(url, { App, request, response, componentResponse, template
                 }
             },
             onError(error) {
-                didError = error;
+                ssrDidError = error;
                 if (dev && response.headersSent) {
                     // Calling write would flush headers automatically.
                     // Delay this error until headers are properly sent.
@@ -354,34 +360,18 @@ 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, {
+        onError(e) {
+            log.error(e);
+        },
+    });
+    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 };
@@ -405,7 +395,13 @@ function buildAppSSR({ App, state, request, response, log }, htmlOptions) {
         request,
         response,
     });
-    const [rscReadableForFizz, rscReadableForFlight] = rscRenderToReadableStream(AppRSC).tee();
+    let rscDidError;
+    const [rscReadableForFizz, rscReadableForFlight] = rscRenderToReadableStream(AppRSC, {
+        onError(e) {
+            rscDidError = e;
+            log.error(e);
+        },
+    }).tee();
     const rscResponse = createFromReadableStream(rscReadableForFizz);
     const RscConsumer = () => rscResponse.readRoot();
     const AppSSR = (React.createElement(Html, { ...htmlOptions },
@@ -416,7 +412,7 @@ function buildAppSSR({ App, state, request, response, log }, htmlOptions) {
                         React.createElement(RscConsumer, null)),
                     React.createElement(Suspense, { fallback: null },
                         React.createElement(Analytics, null)))))));
-    return { AppSSR, rscReadable: rscReadableForFlight };
+    return { AppSSR, rscReadable: rscReadableForFlight, rscDidError };
 }
 function PreloadQueries({ request, children, }) {
     const preloadQueries = request.getPreloadQueries();
@@ -496,7 +492,7 @@ function writeHeadToServerResponse(response, serverComponentResponse, log, error
     if (statusText) {
         response.statusMessage = statusText;
     }
-    Object.entries(headers.raw()).forEach(([key, value]) => response.setHeader(key, value));
+    setServerHeaders(headers, response);
 }
 function isRedirect(response) {
     var _a, _b;
@@ -512,9 +508,37 @@ 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);
     logQueryTimings(type, request);
     request.savePreloadQueries();
 }
+/**
+ * Ensure Node.js environments handle the fetch Response correctly.
+ */
+function handleFetchResponseInNode(fetchResponsePromise, nodeResponse) {
+    if (nodeResponse) {
+        fetchResponsePromise.then((response) => {
+            if (!response)
+                return;
+            setServerHeaders(response.headers, nodeResponse);
+            nodeResponse.statusCode = response.status;
+            if (response.body) {
+                nodeResponse.write(response.body);
+            }
+            nodeResponse.end();
+        });
+    }
+    return fetchResponsePromise;
+}
+// From fetch Headers to Node Response
+function setServerHeaders(headers, nodeResponse) {
+    // Headers.raw is only implemented in node-fetch, which is used by Hydrogen in dev and prod.
+    // It is the only way for now to access `set-cookie` header as an array.
+    // https://github.com/Shopify/hydrogen/issues/1228
+    Object.entries(headers.raw()).forEach(([key, value]) => nodeResponse.setHeader(key, value));
+}

package/dist/esnext/foundation/Analytics/Analytics.client.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { ClientAnalytics } from './index';
+import { ClientAnalytics } from './ClientAnalytics';
 export function Analytics({ analyticsDataFromServer, }) {
     useEffect(() => {
         const urlParams = new URLSearchParams(window.location.search);

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

@@ -1,13 +1,13 @@
 import { getNamedspacedEventname } from './utils';
-import { isServer } from '../../utilities';
 import { eventNames } from './const';
 import { EVENT_PATHNAME } from '../../constants';
+import { META_ENV_SSR } from '../ssr-interop';
 const subscribers = {};
 let pageAnalyticsData = {};
 const guardDupEvents = {};
 const USAGE_ERROR = 'ClientAnalytics should only be used within the useEffect callback or event handlers';
 function isInvokedFromServer() {
-    if (isServer()) {
+    if (META_ENV_SSR) {
         console.warn(USAGE_ERROR);
         return true;
     }

package/dist/esnext/foundation/Analytics/connectors/PerformanceMetrics/PerformanceMetrics.client.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
-import { loadScript } from '../../../../utilities';
-import { ClientAnalytics } from '../../index';
+import { loadScript } from '../../../../utilities/load_script';
+import { ClientAnalytics } from '../../ClientAnalytics';
 import { useShop } from '../../../useShop';
 const URL = 'https://cdn.shopify.com/shopifycloud/boomerang/shopify-boomerang-hydrogen.min.js';
 export function PerformanceMetrics() {

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

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

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

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

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

@@ -4,28 +4,24 @@ import { log } from '../../utilities/log';
 import { extractPathFromRoutesKey } from '../../utilities/apiRoutes';
 import { useServerRequest } from '../ServerRequestProvider';
 import { RouteParamsProvider } from '../useRouteParams/RouteParamsProvider.client';
-import { findRoutePrefix } from '../../utilities/findRoutePrefix';
 /**
  * The `FileRoutes` component builds a set of default Hydrogen routes based on the output provided by Vite's
  * [import.meta.globEager](https://vitejs.dev/guide/features.html#glob-import) method. You can have multiple
  * instances of this component to source file routes from multiple locations.
  */
 export function FileRoutes({ routes, basePath, dirPrefix }) {
-    var _a;
     const request = useServerRequest();
     const { routeRendered, serverProps } = request.ctx.router;
     if (routeRendered)
         return null;
     if (!routes) {
         const fileRoutes = request.ctx.hydrogenConfig.routes;
-        routes = (_a = fileRoutes === null || fileRoutes === void 0 ? void 0 : fileRoutes.files) !== null && _a !== void 0 ? _a : fileRoutes;
-        dirPrefix !== null && dirPrefix !== void 0 ? dirPrefix : (dirPrefix = fileRoutes === null || fileRoutes === void 0 ? void 0 : fileRoutes.dirPrefix);
-        basePath !== null && basePath !== void 0 ? basePath : (basePath = fileRoutes === null || fileRoutes === void 0 ? void 0 : fileRoutes.basePath);
+        routes = fileRoutes.files;
+        dirPrefix !== null && dirPrefix !== void 0 ? dirPrefix : (dirPrefix = fileRoutes.dirPrefix);
+        basePath !== null && basePath !== void 0 ? basePath : (basePath = fileRoutes.basePath);
     }
     basePath !== null && basePath !== void 0 ? basePath : (basePath = '/');
-    /* eslint-disable react-hooks/rules-of-hooks */
     const pageRoutes = useMemo(() => createPageRoutes(routes, basePath, dirPrefix), [routes, basePath, dirPrefix]);
-    /* eslint-enable react-hooks/rules-of-hooks */
     let foundRoute, foundRouteDetails;
     for (let i = 0; i < pageRoutes.length; i++) {
         foundRouteDetails = matchPath(serverProps.pathname, pageRoutes[i]);
@@ -42,13 +38,12 @@ export function FileRoutes({ routes, basePath, dirPrefix }) {
     }
     return null;
 }
-export function createPageRoutes(pages, topLevelPath = '*', dirPrefix) {
+export function createPageRoutes(pages, topLevelPath = '*', dirPrefix = '') {
     const topLevelPrefix = topLevelPath.replace('*', '').replace(/\/$/, '');
     const keys = Object.keys(pages);
-    const commonRoutePrefix = dirPrefix !== null && dirPrefix !== void 0 ? dirPrefix : findRoutePrefix(keys);
     const routes = keys
         .map((key) => {
-        const path = extractPathFromRoutesKey(key, commonRoutePrefix);
+        const path = extractPathFromRoutesKey(key, dirPrefix);
         /**
          * Catch-all routes [...handle].jsx don't need an exact match
          * https://reactrouter.com/core/api/Route/exact-bool

package/dist/esnext/foundation/Router/BrowserRouter.client.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { BrowserHistory, Location } from 'history';
-import React, { FC } from 'react';
+import React, { FC, ReactNode } from 'react';
 declare type RouterContextValue = {
     history: BrowserHistory;
     location: Location;
@@ -7,6 +7,7 @@ declare type RouterContextValue = {
 export declare const RouterContext: React.Context<{} | RouterContextValue>;
 export declare const BrowserRouter: FC<{
     history?: BrowserHistory;
+    children: ReactNode;
 }>;
 export declare function useRouter(): RouterContextValue;
 export declare function useLocation(): Location;

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

@@ -5,7 +5,7 @@ import { useInternalServerProps } from '../useServerProps/use-server-props';
 export const RouterContext = createContext({});
 let isFirstLoad = true;
 const positions = {};
-export const BrowserRouter = ({ history: pHistory, children, }) => {
+export const BrowserRouter = ({ history: pHistory, children }) => {
     if (META_ENV_SSR)
         return React.createElement(React.Fragment, null, children);
     /* eslint-disable react-hooks/rules-of-hooks */

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

@@ -1,4 +1,3 @@
-/* eslint-disable hydrogen/no-state-in-server-components */
 import React, { createContext, useMemo, useCallback,
 // @ts-ignore
 useTransition, useState, } from 'react';
@@ -64,4 +63,3 @@ export function ServerPropsProvider({ initialServerProps, setServerPropsForRsc,
     ]);
     return (React.createElement(ServerPropsContext.Provider, { value: value }, children));
 }
-/* eslint-enable hydrogen/no-state-in-server-components */

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

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

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

@@ -39,7 +39,6 @@ children, }) {
     }
     let actualShopifyConfig;
     if (typeof shopifyConfig === 'function') {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
         const result = useRequestCacheData(['hydrogen-shopify-config'], () => shopifyConfig(request));
         if (result.error) {
             if (result.error instanceof Error) {

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

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

package/dist/esnext/foundation/useRouteParams/RouteParamsProvider.client.d.ts CHANGED Viewed

@@ -1,9 +1,10 @@
-import React, { FC } from 'react';
+import React, { FC, ReactNode } from 'react';
 declare type RouteParamsContextValue = {
     routeParams: Record<string, string>;
 };
 export declare const RouteParamsContext: React.Context<RouteParamsContextValue>;
 export declare const RouteParamsProvider: FC<{
     routeParams: Record<string, string>;
+    children: ReactNode;
 }>;
 export {};

package/dist/esnext/foundation/useRouteParams/RouteParamsProvider.client.js CHANGED Viewed

@@ -2,6 +2,6 @@ import React, { createContext } from 'react';
 export const RouteParamsContext = createContext({
     routeParams: {},
 });
-export const RouteParamsProvider = ({ children, routeParams, }) => {
+export const RouteParamsProvider = ({ children, routeParams }) => {
     return (React.createElement(RouteParamsContext.Provider, { value: { routeParams } }, children));
 };

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

@@ -1,7 +1,7 @@
 import type { ShopifyContextValue } from '../../foundation/ShopifyProvider/types';
 import type { QueryCacheControlHeaders } from '../../utilities/log/log-cache-header';
 import type { QueryTiming } from '../../utilities/log/log-query-timeline';
-import type { HydrogenConfig, PreloadOptions, QueryKey } from '../../types';
+import type { ResolvedHydrogenConfig, PreloadOptions, QueryKey } from '../../types';
 import { HelmetData as HeadData } from 'react-helmet-async';
 import { SessionSyncApi } from '../../foundation/session/session';
 export declare type PreloadQueryEntry = {
@@ -31,7 +31,7 @@ export declare class ServerComponentRequest extends Request {
     ctx: {
         cache: Map<string, any>;
         head: HeadData;
-        hydrogenConfig?: HydrogenConfig;
+        hydrogenConfig?: ResolvedHydrogenConfig;
         shopifyConfig?: ShopifyContextValue;
         queryCacheControl: Array<QueryCacheControlHeaders>;
         queryTimings: Array<QueryTiming>;

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

@@ -2,15 +2,11 @@ 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;
     };
-    /**
-     * Allow custom body to be a string or a Promise.
-     */
-    customBody: string | Promise<string>;
     /**
      * Buffer the current response until all queries have resolved,
      * and prevent it from streaming back early.
@@ -27,9 +23,4 @@ export declare class ServerComponentResponse extends Response {
     redirect(location: string, status?: number): React.FunctionComponentElement<{
         to: string;
     }>;
-    /**
-     * Send the response from a Server Component. Renders React components to string,
-     * and returns `null` to make React happy.
-     */
-    send(body: any): null;
 }