@shopify/hydrogen 0.8.0 → 0.9.0

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/ProductProvider/ProductProvider.client.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { useProductOptions } from '../../hooks';
 import { Product } from './types';
 /**
  * The `ProductProvider` component sets up a context with product details. Descendents of
@@ -9,8 +10,8 @@ export declare function ProductProvider({ children, product, initialVariantId, }
     children: ReactNode;
     /** A [Product object](/api/storefront/reference/products/product). */
     product: Product;
-    /** The initially selected variant. */
-    initialVariantId: string;
+    /** The initially selected variant. This is required only if you're using a `SelectedVariantX` hook in the `ProductProvider` component.*/
+    initialVariantId?: Parameters<typeof useProductOptions>['0']['initialVariantId'];
 }): JSX.Element;
 export declare namespace ProductProvider {
     var Fragment: string;

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/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, log, } from './utilities/log/log';
 import { renderToString } from 'react-dom/server';
 import { getErrorMarkup } from './utilities/error';
 import ssrPrepass from 'react-ssr-prepass';
@@ -14,6 +18,7 @@ import { HydrationWriter } from './framework/Hydration/writer.server';
 import { ServerComponentResponse } from './framework/Hydration/ServerComponentResponse.server';
 import { getCacheControlHeader } from './framework/cache';
 import { RenderCacheProvider } from './foundation/RenderCacheProvider';
+import { getApiRouteFromURL, getApiRoutesFromPages } from './utilities/apiRoutes';
 /**
  * react-dom/unstable-fizz provides different entrypoints based on runtime:
  * - `renderToReadableStream` for "browser" (aka worker)
@@ -26,14 +31,15 @@ const isWorker = Boolean(renderToReadableStream);
  * on the client to hydrate and build the React tree.
  */
 const STREAM_ABORT_TIMEOUT_MS = 3000;
-const renderHydrogen = (App, hook) => {
+const renderHydrogen = (App, { pages } = {}, hook) => {
     /**
      * The render function is responsible for turning the provided `App` into an HTML string,
      * and returning any initial state that needs to be hydrated into the client version of the app.
      * 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 +49,11 @@ const renderHydrogen = (App, hook) => {
             context,
             request,
             dev,
+            log,
+            pages,
         });
-        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 +71,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 +79,37 @@ const renderHydrogen = (App, hook) => {
             context,
             request,
             dev,
+            log,
+            pages,
         });
         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 +123,7 @@ const renderHydrogen = (App, hook) => {
                     }
                 }
                 else {
-                    startWritingHtmlToServerResponse(response, startWriting, dev ? didError : undefined);
+                    startWritingHtmlToServerResponse(response, pipe, dev ? didError : undefined);
                 }
             },
             onError(error) {
@@ -120,15 +133,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,48 +153,65 @@ const renderHydrogen = (App, hook) => {
             context,
             request,
             dev,
+            log,
+            pages,
         });
         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);
     };
+    function getApiRoute(url) {
+        const routes = getApiRoutesFromPages(pages);
+        return getApiRouteFromURL(url, routes);
+    }
     return {
         render,
         stream,
         hydrate,
+        getApiRoute,
+        log,
     };
 };
-function buildReactApp({ App, state, context, request, dev, }) {
+function buildReactApp({ App, state, context, request, dev, log, pages, }) {
+    const renderCache = {};
     const helmetContext = {};
     const componentResponse = new ServerComponentResponse();
-    const renderCache = {};
+    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, request: request, response: componentResponse })))));
+                React.createElement(App, { ...props, ...hydrogenServerProps, pages: pages })))));
     return { helmetContext, ReactApp, componentResponse };
 }
 function extractHeadElements(helmetContext) {
@@ -203,27 +237,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);
                 },
             });
@@ -254,14 +292,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) {
@@ -272,7 +311,7 @@ function renderAppFromBufferedStream(app, isReactHydrationRequest) {
                     }
                 },
                 onError(error) {
-                    console.error(error);
+                    log.error(error);
                     reject(error);
                 },
             });
@@ -288,7 +327,7 @@ 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) {
+async function renderAppFromStringWithPrepass(ReactApp, state, log, isReactHydrationRequest) {
     const app = isReactHydrationRequest ? (React.createElement(HydrationContext.Provider, { value: true },
         React.createElement(ReactApp, { ...state }))) : (React.createElement(ReactApp, { ...state }));
     await ssrPrepass(app);
@@ -298,18 +337,18 @@ async function renderAppFromStringWithPrepass(ReactApp, state, isReactHydrationR
         : 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;
@@ -323,6 +362,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/hook.js

@@ -25,7 +25,7 @@ export function useRenderCacheData(key, fetcher) {
             if (data !== undefined)
                 return data;
             if (!promise) {
-                promise = fetcher().then((r) => (data = { data: r }), (e) => (data = { data: e }));
+                promise = fetcher().then((r) => (data = { data: r }), (e) => (data = { error: e }));
             }
             throw promise;
         };

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

@@ -6,6 +6,13 @@ export declare type RenderCacheProviderProps = {
     cache: RenderCache;
     children?: React.ReactNode;
 };
-export interface RenderCacheResult<T> {
+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/Router/DefaultRoutes.d.ts

@@ -1,15 +1,17 @@
 import { ReactElement } from 'react';
-export declare type ImportGlobEagerOutput = Record<string, Record<'default', any>>;
+import { Logger } from '../../utilities/log/log';
+import type { ImportGlobEagerOutput } from '../../types';
 /**
  * Build a set of default Hydrogen routes based on the output provided by Vite's
  * import.meta.globEager method.
  *
  * @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,17 +6,18 @@ 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 = '*') {
     const topLevelPrefix = topLevelPath.replace('*', '').replace(/\/$/, '');
-    const routes = Object.keys(pages).map((key) => {
+    const routes = Object.keys(pages)
+        .map((key) => {
         const path = key
             .replace('./pages', '')
             .replace(/\.server\.(t|j)sx?$/, '')
@@ -38,12 +39,15 @@ export function createRoutesFromPages(pages, topLevelPath = '*') {
          * https://reactrouter.com/core/api/Route/exact-bool
          */
         const exact = !/\[(?:[.]{3})(\w+?)\]/.test(key);
+        if (!pages[key].default && !pages[key].api)
+            throw new Error(`${key} doesn't export a default React component or an API function`);
         return {
             path: topLevelPrefix + path,
             component: pages[key].default,
             exact,
         };
-    });
+    })
+        .filter((route) => route.component);
     /**
      * Place static paths BEFORE dynamic paths to grant priority.
      */

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

@@ -1,3 +1,4 @@
+import { log } from '../../utilities/log';
 import { deleteItemFromCache, getItemFromCache, isStale, setItemInCache, } from '../../framework/cache';
 import { runDelayedFunction } from '../../framework/runtime';
 import { useRenderCacheData } from '../RenderCacheProvider/hook';
@@ -13,7 +14,8 @@ key,
 queryFn, 
 /** Options including `cache` to manage the cache behavior of the sub-request. */
 queryOptions) {
-    return useRenderCacheData(key, cachedQueryFnBuilder(key, queryFn, queryOptions));
+    const withCacheIdKey = ['__QUERY_CACHE_ID__', ...key];
+    return useRenderCacheData(withCacheIdKey, cachedQueryFnBuilder(withCacheIdKey, queryFn, queryOptions));
 }
 function cachedQueryFnBuilder(key, queryFn, queryOptions) {
     const resolvedQueryOptions = {
@@ -33,10 +35,10 @@ function cachedQueryFnBuilder(key, queryFn, queryOptions) {
              * Important: Do this async
              */
             if (isStale(response)) {
-                console.log('[useQuery] cache stale; generating new response in background');
+                log.debug('[useQuery] cache stale; generating new response in background');
                 const lockKey = `lock-${key}`;
                 runDelayedFunction(async () => {
-                    console.log(`[stale regen] fetching cache lock`);
+                    log.debug(`[stale regen] fetching cache lock`);
                     const lockExists = await getItemFromCache(lockKey);
                     if (lockExists)
                         return;
@@ -46,7 +48,7 @@ function cachedQueryFnBuilder(key, queryFn, queryOptions) {
                         await setItemInCache(key, output, resolvedQueryOptions === null || resolvedQueryOptions === void 0 ? void 0 : resolvedQueryOptions.cache);
                     }
                     catch (e) {
-                        console.error(`Error generating async response: ${e.message}`);
+                        log.error(`Error generating async response: ${e.message}`);
                     }
                     finally {
                         await deleteItemFromCache(lockKey);

package/dist/esnext/foundation/useShop/use-shop.d.ts

@@ -1,5 +1,5 @@
 import { ShopifyProviderValue } from '../ShopifyProvider/types';
 /**
- * The `useShop` hook provides access to values within `shopify.config.js`.The `useShop` hook provides access to values within `shopify.config.js`. It must be a descendent of a `ShopifyProvider` component.
+ * The `useShop` hook provides access to values within `shopify.config.js`. It must be a descendent of a `ShopifyProvider` component.
  */
 export declare function useShop(): ShopifyProviderValue;

package/dist/esnext/foundation/useShop/use-shop.js

@@ -1,7 +1,7 @@
 import { useContext } from 'react';
 import { ShopifyContext } from '../ShopifyProvider/ShopifyContext';
 /**
- * The `useShop` hook provides access to values within `shopify.config.js`.The `useShop` hook provides access to values within `shopify.config.js`. It must be a descendent of a `ShopifyProvider` component.
+ * The `useShop` hook provides access to values within `shopify.config.js`. It must be a descendent of a `ShopifyProvider` component.
  */
 export function useShop() {
     const context = useContext(ShopifyContext);

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

@@ -7,6 +7,7 @@
  */
 export declare class ServerComponentRequest extends Request {
     cookies: Map<string, string>;
+    time: number;
     constructor(input: any);
     constructor(input: RequestInfo, init?: RequestInit);
     private parseCookies;

package/dist/esnext/framework/Hydration/ServerComponentRequest.server.js

@@ -1,3 +1,4 @@
+import { getTime } from '../../utilities/timing';
 /**
  * This augments the `Request` object from the Fetch API:
  * @see https://developer.mozilla.org/en-US/docs/Web/API/Request
@@ -14,8 +15,12 @@ export class ServerComponentRequest extends Request {
             super(getUrlFromNodeRequest(input), {
                 headers: new Headers(input.headers),
                 method: input.method,
+                body: input.method !== 'GET' && input.method !== 'HEAD'
+                    ? input.body
+                    : undefined,
             });
         }
+        this.time = getTime();
         this.cookies = this.parseCookies();
     }
     parseCookies() {

package/dist/esnext/framework/middleware.js

@@ -16,32 +16,24 @@ export function graphiqlMiddleware({ shopifyConfig, dev, }) {
 export function hydrogenMiddleware({ dev, cache, indexTemplate, getServerEntrypoint, devServer, }) {
     return async function (request, response, next) {
         const url = new URL('http://' + request.headers.host + request.originalUrl);
-        const isReactHydrationRequest = url.pathname === '/react';
-        /**
-         * If it's a dev environment, it's assumed that Vite's dev server is handling
-         * any static or JS requests, so we need to ensure that we don't try to handle them.
-         *
-         * If it's a product environment, it's assumed that the developer is handling
-         * static requests with e.g. static middleware.
-         */
-        if (dev && !shouldInterceptRequest(request, isReactHydrationRequest)) {
-            return next();
-        }
         try {
             /**
              * We're running in the Node.js runtime without access to `fetch`,
              * which is needed for proxy requests and server-side API requests.
              */
             if (!globalThis.fetch) {
-                const fetch = await import('node-fetch');
+                const { fetch, Request, Response, Headers } = await import('undici');
+                const { default: AbortController } = await import('abort-controller');
+                // @ts-ignore
+                globalThis.fetch = fetch;
                 // @ts-ignore
-                globalThis.fetch = fetch.default;
+                globalThis.Request = Request;
                 // @ts-ignore
-                globalThis.Request = fetch.Request;
+                globalThis.Response = Response;
                 // @ts-ignore
-                globalThis.Response = fetch.Response;
+                globalThis.Headers = Headers;
                 // @ts-ignore
-                globalThis.Headers = fetch.Headers;
+                globalThis.AbortController = AbortController;
             }
             /**
              * Dynamically import ServerComponentResponse after the `fetch`
@@ -69,7 +61,18 @@ export function hydrogenMiddleware({ dev, cache, indexTemplate, getServerEntrypo
                     response.setHeader(key, value);
                 });
                 response.statusCode = eventResponse.status;
-                response.end(eventResponse.body);
+                if (eventResponse.body) {
+                    const reader = eventResponse.body.getReader();
+                    while (true) {
+                        const { done, value } = await reader.read();
+                        if (done)
+                            return response.end();
+                        response.write(value);
+                    }
+                }
+                else {
+                    response.end();
+                }
             }
         }
         catch (e) {
@@ -99,11 +102,6 @@ export function hydrogenMiddleware({ dev, cache, indexTemplate, getServerEntrypo
         }
     };
 }
-function shouldInterceptRequest(request, isReactHydrationRequest) {
-    var _a;
-    return (/text\/html|application\/hydrogen/.test((_a = request.headers['accept']) !== null && _a !== void 0 ? _a : '') ||
-        isReactHydrationRequest);
-}
 /**
  * /graphiql and /___graphql are supported
  */

package/dist/esnext/framework/plugin.d.ts

@@ -1,3 +1,3 @@
 import type { HydrogenVitePluginOptions, ShopifyConfig } from '../types';
-declare const _default: (shopifyConfig: ShopifyConfig, pluginOptions: HydrogenVitePluginOptions) => ("" | import("vite").Plugin | import("vite").PluginOption[] | undefined)[];
+declare const _default: (shopifyConfig: ShopifyConfig, pluginOptions?: HydrogenVitePluginOptions) => (false | "" | import("vite").Plugin | import("vite").PluginOption[] | undefined)[];
 export default _default;

package/dist/esnext/framework/plugin.js

@@ -1,14 +1,16 @@
 import hydrogenConfig from './plugins/vite-plugin-hydrogen-config';
 import hydrogenMiddleware from './plugins/vite-plugin-hydrogen-middleware';
 import reactServerComponentShim from './plugins/vite-plugin-react-server-components-shim';
+import purgeQueryCache from './plugins/vite-plugin-purge-query-cache';
 import inspect from 'vite-plugin-inspect';
 import react from '@vitejs/plugin-react';
-export default (shopifyConfig, pluginOptions) => {
+export default (shopifyConfig, pluginOptions = {}) => {
     return [
         process.env.VITE_INSPECT && inspect(),
         hydrogenConfig(),
         hydrogenMiddleware(shopifyConfig, pluginOptions),
         reactServerComponentShim(),
         react(),
+        pluginOptions.purgeQueryCacheOnBuild && purgeQueryCache(),
     ];
 };

package/dist/esnext/framework/plugins/vite-plugin-hydrogen-config.d.ts

@@ -1,3 +1,3 @@
-import type { Plugin } from 'vite';
+import { Plugin } from 'vite';
 declare const _default: () => Plugin;
 export default _default;