@shopify/hydrogen 0.7.1 → 0.8.3

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

@@ -7,7 +7,7 @@ export interface CartEstimatedCostProps {
     children?: React.ReactNode;
 }
 /**
- * The [CartEstimatedCost](/api/storefront/reference/cart/cartestimatedcost) component renders a `Money` component with the
+ * The `CartEstimatedCost` component renders a `Money` component with the
  * 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.
  */

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { useCart } from '../CartProvider';
 import { Money } from '../Money';
 /**
- * The [CartEstimatedCost](/api/storefront/reference/cart/cartestimatedcost) component renders a `Money` component with the
+ * The `CartEstimatedCost` component renders a `Money` component with the
  * 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.
  */

package/dist/esnext/components/CartLineQuantityAdjustButton/CartLineQuantityAdjustButton.js

@@ -17,6 +17,10 @@ export function CartLineQuantityAdjustButton(props) {
                 return;
             }
             const quantity = adjust === 'decrease' ? cartLine.quantity - 1 : cartLine.quantity + 1;
+            if (quantity <= 0) {
+                removeLines([cartLine.id]);
+                return;
+            }
             updateLines([{ id: cartLine.id, quantity }]);
         }, ...passthroughProps }, children));
 }

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

@@ -1,2 +1,3 @@
+export { LocalizationProvider } from './LocalizationProvider.server';
 export { useCountry } from '../../hooks/useCountry/useCountry';
 export { useAvailableCountries } from '../../hooks/useAvailableCountries/useAvailableCountries';

package/dist/esnext/components/LocalizationProvider/index.js

@@ -1,2 +1,3 @@
+export { LocalizationProvider } from './LocalizationProvider.server';
 export { useCountry } from '../../hooks/useCountry/useCountry';
 export { useAvailableCountries } from '../../hooks/useAvailableCountries/useAvailableCountries';

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

@@ -8,8 +8,6 @@ export interface ProductPriceProps {
 }
 /**
  * The `ProductPrice` component renders a `Money` component with the product
- * [`priceRange`](/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.
+ * [`priceRange`](/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 ElementType>(props: Props<TTag> & ProductPriceProps): JSX.Element | null;

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

@@ -3,9 +3,7 @@ import { Money } from '../Money';
 import { useProduct } from '../ProductProvider';
 /**
  * The `ProductPrice` component renders a `Money` component with the product
- * [`priceRange`](/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.
+ * [`priceRange`](/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 function ProductPrice(props) {
     var _a, _b, _c, _d;

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

@@ -11,7 +11,7 @@ export function ShopPayButton({ variantIds, className }) {
     const { storeDomain } = useShop();
     useEffect(() => {
         const ids = variantIds.reduce((accumulator, gid) => {
-            const id = atob(gid).split('/').pop();
+            const id = gid.split('/').pop();
             if (id) {
                 accumulator.push(id);
             }

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

@@ -13,8 +13,7 @@ export interface UnitPriceProps {
 }
 /**
  * The `UnitPrice` component renders a string with a [UnitPrice](/themes/pricing-payments/unit-pricing) as the
- * [Storefront API's `MoneyV2` object](/api/storefront/reference/common-objects/moneyv2) with a reference unit from
- * the [Storefront API's `UnitPriceMeasurement` object](/api/storefront/reference/products/unitpricemeasurement).
+ * [Storefront API's `MoneyV2` object](/api/storefront/reference/common-objects/moneyv2) with a reference unit from the [Storefront API's `UnitPriceMeasurement` object](/api/storefront/reference/products/unitpricemeasurement).
  *
  * If `children` is a function, then it will provide render props for the `children` corresponding to the object
  * returned by the `useMoney` hook and the `UnitPriceMeasurement` object.

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

@@ -4,8 +4,7 @@ import { Money } from '../Money';
 import { UnitPriceFragment as Fragment } from '../../graphql/graphql-constants';
 /**
  * The `UnitPrice` component renders a string with a [UnitPrice](/themes/pricing-payments/unit-pricing) as the
- * [Storefront API's `MoneyV2` object](/api/storefront/reference/common-objects/moneyv2) with a reference unit from
- * the [Storefront API's `UnitPriceMeasurement` object](/api/storefront/reference/products/unitpricemeasurement).
+ * [Storefront API's `MoneyV2` object](/api/storefront/reference/common-objects/moneyv2) with a reference unit from the [Storefront API's `UnitPriceMeasurement` object](/api/storefront/reference/products/unitpricemeasurement).
  *
  * If `children` is a function, then it will provide render props for the `children` corresponding to the object
  * returned by the `useMoney` hook and the `UnitPriceMeasurement` object.

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

@@ -28,6 +28,7 @@ export { CartLines } from './CartLines';
 export { CartCheckoutButton } from './CartCheckoutButton';
 export { CartShopPayButton } from './CartShopPayButton';
 export { CartEstimatedCost } from './CartEstimatedCost';
+export { CartLineSelectedOptions } from './CartLineSelectedOptions';
 export { CartProvider, useCart, useCartAttributesUpdateCallback, useCartBuyerIdentityUpdateCallback, useCartNoteUpdateCallback, useCartCheckoutUrl, useCartCreateCallback, useCartDiscountCodesUpdateCallback, useCartFetch, useCartLinesAddCallback, useCartLinesRemoveCallback, useCartLinesTotalQuantity, useCartLinesUpdateCallback, useInstantCheckout, } from './CartProvider';
 export type { State, Status, Cart, CartWithActions, CartAction, } from './CartProvider';
 export { ProductProvider, useProduct, ProductProviderFragment, } from './ProductProvider';

package/dist/esnext/components/index.js

@@ -19,6 +19,7 @@ export { CartLines } from './CartLines';
 export { CartCheckoutButton } from './CartCheckoutButton';
 export { CartShopPayButton } from './CartShopPayButton';
 export { CartEstimatedCost } from './CartEstimatedCost';
+export { CartLineSelectedOptions } from './CartLineSelectedOptions';
 export { CartProvider, useCart, useCartAttributesUpdateCallback, useCartBuyerIdentityUpdateCallback, useCartNoteUpdateCallback, useCartCheckoutUrl, useCartCreateCallback, useCartDiscountCodesUpdateCallback, useCartFetch, useCartLinesAddCallback, useCartLinesRemoveCallback, useCartLinesTotalQuantity, useCartLinesUpdateCallback, useInstantCheckout, } from './CartProvider';
 export { ProductProvider, useProduct, ProductProviderFragment, } from './ProductProvider';
 export { ProductDescription } from './ProductDescription';

package/dist/esnext/entry-client.js

@@ -6,7 +6,6 @@ import { ErrorBoundary } from 'react-error-boundary';
 import { HelmetProvider } from 'react-helmet-async';
 import { useServerResponse } from './framework/Hydration/Cache.client';
 import { ServerStateProvider, ServerStateRouter } from './client';
-import { QueryProvider } from './hooks';
 const renderHydrogen = async (ClientWrapper) => {
     const root = document.getElementById('root');
     if (!root) {
@@ -25,11 +24,10 @@ function Content({ clientWrapper: ClientWrapper }) {
     });
     const response = useServerResponse(serverState);
     return (React.createElement(ServerStateProvider, { serverState: serverState, setServerState: setServerState },
-        React.createElement(QueryProvider, null,
-            React.createElement(HelmetProvider, null,
-                React.createElement(BrowserRouter, null,
-                    React.createElement(ServerStateRouter, null),
-                    React.createElement(ClientWrapper, null, response.read()))))));
+        React.createElement(HelmetProvider, null,
+            React.createElement(BrowserRouter, null,
+                React.createElement(ServerStateRouter, null),
+                React.createElement(ClientWrapper, null, response.read())))));
 }
 function Error({ error }) {
     return (React.createElement("div", { style: { padding: '1em' } },

package/dist/esnext/entry-server.js

@@ -1,7 +1,11 @@
 import React from 'react';
-import { renderToReadableStream, pipeToNodeWritable,
+import { 
 // @ts-ignore
- } from 'react-dom/unstable-fizz';
+renderToPipeableStream, // Only available in Node context
+// @ts-ignore
+renderToReadableStream, // Only available in Browser/Worker context
+ } from 'react-dom/server';
+import { logServerResponse, getLoggerFromContext, } from './utilities/log/log';
 import { renderToString } from 'react-dom/server';
 import { getErrorMarkup } from './utilities/error';
 import ssrPrepass from 'react-ssr-prepass';
@@ -12,8 +16,8 @@ import { HelmetProvider } from 'react-helmet-async';
 import { Html } from './framework/Hydration/Html';
 import { HydrationWriter } from './framework/Hydration/writer.server';
 import { ServerComponentResponse } from './framework/Hydration/ServerComponentResponse.server';
-import { dehydrate } from 'react-query/hydration';
 import { getCacheControlHeader } from './framework/cache';
+import { RenderCacheProvider } from './foundation/RenderCacheProvider';
 /**
  * react-dom/unstable-fizz provides different entrypoints based on runtime:
  * - `renderToReadableStream` for "browser" (aka worker)
@@ -33,7 +37,8 @@ const renderHydrogen = (App, hook) => {
      * NOTE: This is currently only used for SEO bots or Worker runtime (where Stream is not yet supported).
      */
     const render = async function (url, { context, request, isReactHydrationRequest, dev }) {
-        var _a, _b;
+        var _a, _b, _c, _d, _f;
+        const log = getLoggerFromContext(request);
         const state = isReactHydrationRequest
             ? JSON.parse((_b = (_a = url.searchParams) === null || _a === void 0 ? void 0 : _a.get('state')) !== null && _b !== void 0 ? _b : '{}')
             : { pathname: url.pathname, search: url.search };
@@ -43,8 +48,10 @@ const renderHydrogen = (App, hook) => {
             context,
             request,
             dev,
+            log,
         });
-        const body = await renderApp(ReactApp, state, isReactHydrationRequest);
+        const body = await renderApp(ReactApp, state, log, isReactHydrationRequest);
+        logServerResponse('ssr', log, request, (_f = (_d = (_c = componentResponse.customStatus) === null || _c === void 0 ? void 0 : _c.code) !== null && _d !== void 0 ? _d : componentResponse.status) !== null && _f !== void 0 ? _f : 200);
         if (componentResponse.customBody) {
             return { body: await componentResponse.customBody, url, componentResponse };
         }
@@ -62,6 +69,7 @@ const renderHydrogen = (App, hook) => {
      * information, so this method should not be used by crawlers.
      */
     const stream = function (url, { context, request, response, template, dev }) {
+        const log = getLoggerFromContext(request);
         const state = { pathname: url.pathname, search: url.search };
         const { ReactApp, componentResponse } = buildReactApp({
             App,
@@ -69,34 +77,36 @@ const renderHydrogen = (App, hook) => {
             context,
             request,
             dev,
+            log,
         });
         response.socket.on('error', (error) => {
-            console.error('Fatal', error);
+            log.fatal(error);
         });
         let didError;
         const head = template.match(/<head>(.+?)<\/head>/s)[1];
-        const { startWriting, abort } = pipeToNodeWritable(React.createElement(Html, { head: head },
-            React.createElement(ReactApp, { ...state })), response, {
-            onReadyToStream() {
+        const { pipe } = renderToPipeableStream(React.createElement(Html, { head: head },
+            React.createElement(ReactApp, { ...state })), {
+            onCompleteShell() {
                 /**
                  * TODO: This assumes `response.cache()` has been called _before_ any
                  * queries which might be caught behind Suspense. Clarify this or add
                  * additional checks downstream?
                  */
                 response.setHeader(getCacheControlHeader({ dev }), componentResponse.cacheControlHeader);
-                writeHeadToServerResponse(response, componentResponse, didError);
+                writeHeadToServerResponse(request, response, componentResponse, log, didError);
                 if (isRedirect(response)) {
                     // Return redirects early without further rendering/streaming
                     return response.end();
                 }
                 if (!componentResponse.canStream())
                     return;
-                startWritingHtmlToServerResponse(response, startWriting, dev ? didError : undefined);
+                startWritingHtmlToServerResponse(response, pipe, dev ? didError : undefined);
             },
             onCompleteAll() {
+                clearTimeout(streamTimeout);
                 if (componentResponse.canStream() || response.writableEnded)
                     return;
-                writeHeadToServerResponse(response, componentResponse, didError);
+                writeHeadToServerResponse(request, response, componentResponse, log, didError);
                 if (isRedirect(response)) {
                     // Redirects found after any async code
                     return response.end();
@@ -110,7 +120,7 @@ const renderHydrogen = (App, hook) => {
                     }
                 }
                 else {
-                    startWritingHtmlToServerResponse(response, startWriting, dev ? didError : undefined);
+                    startWritingHtmlToServerResponse(response, pipe, dev ? didError : undefined);
                 }
             },
             onError(error) {
@@ -120,15 +130,19 @@ const renderHydrogen = (App, hook) => {
                     // Delay this error until headers are properly sent.
                     response.write(getErrorMarkup(error));
                 }
-                console.error(error);
+                log.error(error);
             },
         });
-        setTimeout(abort, STREAM_ABORT_TIMEOUT_MS);
+        const streamTimeout = setTimeout(() => {
+            const errorMessage = `The app failed to stream after ${STREAM_ABORT_TIMEOUT_MS} ms`;
+            log.warn(errorMessage);
+        }, STREAM_ABORT_TIMEOUT_MS);
     };
     /**
      * Stream a hydration response to the client.
      */
     const hydrate = function (url, { context, request, response, dev }) {
+        const log = getLoggerFromContext(request);
         const state = JSON.parse(url.searchParams.get('state') || '{}');
         const { ReactApp, componentResponse } = buildReactApp({
             App,
@@ -136,33 +150,38 @@ const renderHydrogen = (App, hook) => {
             context,
             request,
             dev,
+            log,
         });
         response.socket.on('error', (error) => {
-            console.error('Fatal', error);
+            log.fatal(error);
         });
         let didError;
         const writer = new HydrationWriter();
-        const { startWriting, abort } = pipeToNodeWritable(React.createElement(HydrationContext.Provider, { value: true },
-            React.createElement(ReactApp, { ...state })), writer, {
+        const { pipe } = renderToPipeableStream(React.createElement(HydrationContext.Provider, { value: true },
+            React.createElement(ReactApp, { ...state })), {
             /**
              * When hydrating, we have to wait until `onCompleteAll` to avoid having
              * `template` and `script` tags inserted and rendered as part of the hydration response.
              */
             onCompleteAll() {
+                clearTimeout(renderTimeout);
                 // Tell React to start writing to the writer
-                startWriting();
+                pipe(writer);
                 // Tell React that the writer is ready to drain, which sometimes results in a last "chunk" being written.
                 writer.drain();
                 response.statusCode = didError ? 500 : 200;
                 response.setHeader(getCacheControlHeader({ dev }), componentResponse.cacheControlHeader);
                 response.end(generateWireSyntaxFromRenderedHtml(writer.toString()));
+                logServerResponse('rsc', log, request, response.statusCode);
             },
             onError(error) {
                 didError = error;
-                console.error(error);
+                log.error(error);
             },
         });
-        setTimeout(abort, STREAM_ABORT_TIMEOUT_MS);
+        const renderTimeout = setTimeout(() => {
+            log.error(`The app failed to render RSC after ${STREAM_ABORT_TIMEOUT_MS} ms`);
+        }, STREAM_ABORT_TIMEOUT_MS);
     };
     return {
         render,
@@ -170,12 +189,19 @@ const renderHydrogen = (App, hook) => {
         hydrate,
     };
 };
-function buildReactApp({ App, state, context, request, dev, }) {
+function buildReactApp({ App, state, context, request, dev, log, }) {
+    const renderCache = {};
     const helmetContext = {};
     const componentResponse = new ServerComponentResponse();
-    const ReactApp = (props) => (React.createElement(StaticRouter, { location: { pathname: state.pathname, search: state.search }, context: context },
-        React.createElement(HelmetProvider, { context: helmetContext },
-            React.createElement(App, { ...props, request: request, response: componentResponse }))));
+    const hydrogenServerProps = {
+        request,
+        response: componentResponse,
+        log,
+    };
+    const ReactApp = (props) => (React.createElement(RenderCacheProvider, { cache: renderCache },
+        React.createElement(StaticRouter, { location: { pathname: state.pathname, search: state.search }, context: context },
+            React.createElement(HelmetProvider, { context: helmetContext },
+                React.createElement(App, { ...props, ...hydrogenServerProps })))));
     return { helmetContext, ReactApp, componentResponse };
 }
 function extractHeadElements(helmetContext) {
@@ -201,27 +227,31 @@ function supportsReadableStream() {
         return false;
     }
 }
-async function renderApp(ReactApp, state, isReactHydrationRequest) {
+async function renderApp(ReactApp, state, log, isReactHydrationRequest) {
     /**
      * Temporary workaround until all Worker runtimes support ReadableStream
      */
     if (isWorker && !supportsReadableStream()) {
-        return renderAppFromStringWithPrepass(ReactApp, state, isReactHydrationRequest);
+        return renderAppFromStringWithPrepass(ReactApp, state, log, isReactHydrationRequest);
     }
     const app = isReactHydrationRequest ? (React.createElement(HydrationContext.Provider, { value: true },
         React.createElement(ReactApp, { ...state }))) : (React.createElement(ReactApp, { ...state }));
-    return renderAppFromBufferedStream(app, isReactHydrationRequest);
+    return renderAppFromBufferedStream(app, log, isReactHydrationRequest);
 }
-function renderAppFromBufferedStream(app, isReactHydrationRequest) {
+function renderAppFromBufferedStream(app, log, isReactHydrationRequest) {
     return new Promise((resolve, reject) => {
+        const errorTimeout = setTimeout(() => {
+            log.warn(`The app failed to SSR after ${STREAM_ABORT_TIMEOUT_MS} ms`);
+        }, STREAM_ABORT_TIMEOUT_MS);
         if (isWorker) {
             let isComplete = false;
             const stream = renderToReadableStream(app, {
                 onCompleteAll() {
+                    clearTimeout(errorTimeout);
                     isComplete = true;
                 },
                 onError(error) {
-                    console.error(error);
+                    log.error(error);
                     reject(error);
                 },
             });
@@ -252,14 +282,15 @@ function renderAppFromBufferedStream(app, isReactHydrationRequest) {
         }
         else {
             const writer = new HydrationWriter();
-            const { startWriting } = pipeToNodeWritable(app, writer, {
+            const { pipe } = renderToPipeableStream(app, {
                 /**
                  * When hydrating, we have to wait until `onCompleteAll` to avoid having
                  * `template` and `script` tags inserted and rendered as part of the hydration response.
                  */
                 onCompleteAll() {
+                    clearTimeout(errorTimeout);
                     // Tell React to start writing to the writer
-                    startWriting();
+                    pipe(writer);
                     // Tell React that the writer is ready to drain, which sometimes results in a last "chunk" being written.
                     writer.drain();
                     if (isReactHydrationRequest) {
@@ -270,7 +301,7 @@ function renderAppFromBufferedStream(app, isReactHydrationRequest) {
                     }
                 },
                 onError(error) {
-                    console.error(error);
+                    log.error(error);
                     reject(error);
                 },
             });
@@ -286,37 +317,28 @@ function renderAppFromBufferedStream(app, isReactHydrationRequest) {
  * use ssr-prepass to fetch all the queries once, store
  * the results in a context object, and re-render.
  */
-async function renderAppFromStringWithPrepass(ReactApp, state, isReactHydrationRequest) {
-    const hydrationContext = {};
+async function renderAppFromStringWithPrepass(ReactApp, state, log, isReactHydrationRequest) {
     const app = isReactHydrationRequest ? (React.createElement(HydrationContext.Provider, { value: true },
-        React.createElement(ReactApp, { hydrationContext: hydrationContext, ...state }))) : (React.createElement(ReactApp, { hydrationContext: hydrationContext, ...state }));
+        React.createElement(ReactApp, { ...state }))) : (React.createElement(ReactApp, { ...state }));
     await ssrPrepass(app);
-    /**
-     * Dehydrate all the queries made during the prepass above and store
-     * them in the context object to be used for the next render pass.
-     * This prevents rendering the Suspense fallback in `renderToString`.
-     */
-    if (hydrationContext.queryClient) {
-        hydrationContext.dehydratedState = dehydrate(hydrationContext.queryClient);
-    }
     const body = renderToString(app);
     return isReactHydrationRequest
         ? generateWireSyntaxFromRenderedHtml(body)
         : body;
 }
 export default renderHydrogen;
-function startWritingHtmlToServerResponse(response, startWriting, error) {
+function startWritingHtmlToServerResponse(response, pipe, error) {
     if (!response.headersSent) {
         response.setHeader('Content-type', 'text/html');
         response.write('<!DOCTYPE html>');
     }
-    startWriting();
+    pipe(response);
     if (error) {
         // This error was delayed until the headers were properly sent.
         response.write(getErrorMarkup(error));
     }
 }
-function writeHeadToServerResponse(response, { headers, status, customStatus }, error) {
+function writeHeadToServerResponse(request, response, { headers, status, customStatus }, log, error) {
     var _a, _b;
     if (response.headersSent)
         return;
@@ -330,6 +352,7 @@ function writeHeadToServerResponse(response, { headers, status, customStatus },
             response.statusMessage = customStatus.text;
         }
     }
+    logServerResponse('str', log, request, response.statusCode);
 }
 function isRedirect(response) {
     return response.statusCode >= 300 && response.statusCode < 400;

package/dist/esnext/foundation/RenderCacheProvider/RenderCacheContext.d.ts

@@ -0,0 +1,2 @@
+import type { RenderCacheProviderProps } from './types';
+export declare const RenderCacheContext: import("react").Context<RenderCacheProviderProps>;

package/dist/esnext/foundation/RenderCacheProvider/RenderCacheContext.js

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+export const RenderCacheContext = createContext({
+    cache: {},
+});

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

@@ -0,0 +1,2 @@
+import type { RenderCacheProviderProps } from './types';
+export declare function RenderCacheProvider({ cache, children, }: RenderCacheProviderProps): JSX.Element;

package/dist/esnext/foundation/RenderCacheProvider/RenderCacheProvider.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import { RenderCacheContext } from './RenderCacheContext';
+export function RenderCacheProvider({ cache, children, }) {
+    return (React.createElement(RenderCacheContext.Provider, { value: { cache } }, children));
+}

package/dist/esnext/foundation/RenderCacheProvider/hook.d.ts

@@ -0,0 +1,11 @@
+import type { QueryKey } from '../../types';
+import type { RenderCacheProviderProps, RenderCacheResult } from './types';
+/**
+ * Returns the unique identifier for the current rendering request
+ */
+export declare function useRenderCache(): RenderCacheProviderProps;
+/**
+ * Returns data stored in the render cache
+ * It will throw the promise if data is not ready
+ */
+export declare function useRenderCacheData<T>(key: QueryKey, fetcher: () => Promise<T>): RenderCacheResult<T>;

package/dist/esnext/foundation/RenderCacheProvider/hook.js

@@ -0,0 +1,34 @@
+import { useContext } from 'react';
+import { RenderCacheContext } from './RenderCacheContext';
+import { hashKey } from '../../framework/cache';
+/**
+ * Returns the unique identifier for the current rendering request
+ */
+export function useRenderCache() {
+    const context = useContext(RenderCacheContext);
+    if (!context) {
+        throw new Error('No RenderCache Context found');
+    }
+    return context;
+}
+/**
+ * Returns data stored in the render cache
+ * It will throw the promise if data is not ready
+ */
+export function useRenderCacheData(key, fetcher) {
+    const cacheKey = hashKey(key);
+    const { cache } = useRenderCache();
+    if (!cache[cacheKey]) {
+        let data;
+        let promise;
+        cache[cacheKey] = () => {
+            if (data !== undefined)
+                return data;
+            if (!promise) {
+                promise = fetcher().then((r) => (data = { data: r }), (e) => (data = { error: e }));
+            }
+            throw promise;
+        };
+    }
+    return cache[cacheKey]();
+}

package/dist/esnext/foundation/RenderCacheProvider/index.d.ts

@@ -0,0 +1 @@
+export { RenderCacheProvider } from './RenderCacheProvider';

package/dist/esnext/foundation/RenderCacheProvider/index.js

@@ -0,0 +1 @@
+export { RenderCacheProvider } from './RenderCacheProvider';

package/dist/esnext/foundation/RenderCacheProvider/types.d.ts

@@ -0,0 +1,18 @@
+export declare type RenderCache = {
+    [key: string]: () => unknown;
+};
+export declare type RenderCacheProviderProps = {
+    /** A cache to hold all queries performed within a render request */
+    cache: RenderCache;
+    children?: React.ReactNode;
+};
+export declare type RenderCacheResult<T> = RenderCacheResultSuccess<T> | RenderCacheResultError;
+declare type RenderCacheResultSuccess<T> = {
+    data: T;
+    error?: never;
+};
+declare type RenderCacheResultError = {
+    data?: never;
+    error: Response;
+};
+export {};

package/dist/esnext/foundation/RenderCacheProvider/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esnext/foundation/Router/DefaultRoutes.d.ts

@@ -1,4 +1,5 @@
 import { ReactElement } from 'react';
+import type { Logger } from '../../utilities/log/log';
 export declare type ImportGlobEagerOutput = Record<string, Record<'default', any>>;
 /**
  * Build a set of default Hydrogen routes based on the output provided by Vite's
@@ -6,10 +7,11 @@ export declare type ImportGlobEagerOutput = Record<string, Record<'default', any
  *
  * @see https://vitejs.dev/guide/features.html#glob-import
  */
-export declare function DefaultRoutes({ pages, serverState, fallback, }: {
+export declare function DefaultRoutes({ pages, serverState, fallback, log, }: {
     pages: ImportGlobEagerOutput;
     serverState: Record<string, any>;
     fallback?: ReactElement;
+    log: Logger;
 }): JSX.Element;
 interface HydrogenRoute {
     component: any;

package/dist/esnext/foundation/Router/DefaultRoutes.js

@@ -6,12 +6,12 @@ import { Route, Switch, useRouteMatch } from 'react-router-dom';
  *
  * @see https://vitejs.dev/guide/features.html#glob-import
  */
-export function DefaultRoutes({ pages, serverState, fallback, }) {
+export function DefaultRoutes({ pages, serverState, fallback, log, }) {
     const { path } = useRouteMatch();
     const routes = useMemo(() => createRoutesFromPages(pages, path), [pages, path]);
     return (React.createElement(Switch, null,
         routes.map((route) => (React.createElement(Route, { key: route.path, exact: route.exact, path: route.path },
-            React.createElement(route.component, { ...serverState })))),
+            React.createElement(route.component, { ...serverState, log: log })))),
         fallback && React.createElement(Route, { path: "*" }, fallback)));
 }
 export function createRoutesFromPages(pages, topLevelPath = '*') {

package/dist/esnext/foundation/ServerStateProvider/ServerStateProvider.client.js

@@ -1,6 +1,7 @@
 import React, { createContext, useMemo, useCallback, 
 // @ts-ignore
 useTransition, } from 'react';
+const PRIVATE_PROPS = ['request', 'response'];
 export const ServerStateContext = createContext(null);
 export function ServerStateProvider({ serverState, setServerState, children, }) {
     const [pending, startTransition] = useTransition();
@@ -25,8 +26,9 @@ export function ServerStateProvider({ serverState, setServerState, children, })
                     newValue = input;
                 }
                 if (__DEV__) {
-                    if ('request' in newValue || 'response' in newValue) {
-                        console.warn(`Custom "request" and "response" properties in server state are ignored. Use a different name.`);
+                    const privateProp = PRIVATE_PROPS.find((prop) => prop in newValue);
+                    if (privateProp) {
+                        console.warn(`Custom "${privateProp}" property in server state is ignored. Use a different name.`);
                     }
                 }
                 return {

package/dist/esnext/foundation/ShopifyProvider/ShopifyServerProvider.server.d.ts

@@ -1,8 +1,6 @@
 import { ReactElement } from 'react';
 import { ShopifyConfig } from '../../types';
-import { ReactQueryHydrationContext } from './types';
-export declare function ShopifyServerProvider({ children, shopifyConfig, hydrationContext, }: {
+export declare function ShopifyServerProvider({ children, shopifyConfig, }: {
     children: ReactElement;
     shopifyConfig: ShopifyConfig;
-    hydrationContext: ReactQueryHydrationContext;
 }): JSX.Element;

package/dist/esnext/foundation/ShopifyProvider/ShopifyServerProvider.server.js

@@ -1,7 +1,5 @@
 import React from 'react';
 import { ShopifyProvider } from './ShopifyProvider';
-import { QueryProvider } from '../../foundation/useQuery';
-export function ShopifyServerProvider({ children, shopifyConfig, hydrationContext, }) {
-    return (React.createElement(ShopifyProvider, { shopifyConfig: shopifyConfig },
-        React.createElement(QueryProvider, { hydrationContext: hydrationContext }, children)));
+export function ShopifyServerProvider({ children, shopifyConfig, }) {
+    return (React.createElement(ShopifyProvider, { shopifyConfig: shopifyConfig }, children));
 }