@shopify/hydrogen 0.8.1 → 0.9.1

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

@@ -5,7 +5,7 @@ renderToPipeableStream, // Only available in Node context
 // @ts-ignore
 renderToReadableStream, // Only available in Browser/Worker context
  } from 'react-dom/server';
-import { logServerResponse } from './utilities/log/log';
+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';
@@ -18,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)
@@ -30,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, log }) {
-        var _a, _b;
+    const render = async function (url, { context, request, isReactHydrationRequest, dev }) {
+        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 };
@@ -48,8 +50,10 @@ const renderHydrogen = (App, hook) => {
             request,
             dev,
             log,
+            pages,
         });
         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 };
         }
@@ -66,7 +70,8 @@ const renderHydrogen = (App, hook) => {
      * Stream a response to the client. NOTE: This omits custom `<head>`
      * information, so this method should not be used by crawlers.
      */
-    const stream = function (url, { context, request, response, template, dev, log }) {
+    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,
@@ -75,13 +80,14 @@ const renderHydrogen = (App, hook) => {
             request,
             dev,
             log,
+            pages,
         });
         response.socket.on('error', (error) => {
             log.fatal(error);
         });
         let didError;
         const head = template.match(/<head>(.+?)<\/head>/s)[1];
-        const { pipe, abort } = renderToPipeableStream(React.createElement(Html, { head: head },
+        const { pipe } = renderToPipeableStream(React.createElement(Html, { head: head },
             React.createElement(ReactApp, { ...state })), {
             onCompleteShell() {
                 /**
@@ -132,17 +138,14 @@ const renderHydrogen = (App, hook) => {
         });
         const streamTimeout = setTimeout(() => {
             const errorMessage = `The app failed to stream after ${STREAM_ABORT_TIMEOUT_MS} ms`;
-            log.error(errorMessage);
-            if (dev && response.headersSent) {
-                response.write(getErrorMarkup(new Error(errorMessage)));
-            }
-            abort();
+            log.warn(errorMessage);
         }, STREAM_ABORT_TIMEOUT_MS);
     };
     /**
      * Stream a hydration response to the client.
      */
-    const hydrate = function (url, { context, request, response, dev, log }) {
+    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,
@@ -151,13 +154,14 @@ const renderHydrogen = (App, hook) => {
             request,
             dev,
             log,
+            pages,
         });
         response.socket.on('error', (error) => {
             log.fatal(error);
         });
         let didError;
         const writer = new HydrationWriter();
-        const { pipe, abort } = renderToPipeableStream(React.createElement(HydrationContext.Provider, { value: true },
+        const { pipe } = renderToPipeableStream(React.createElement(HydrationContext.Provider, { value: true },
             React.createElement(ReactApp, { ...state })), {
             /**
              * When hydrating, we have to wait until `onCompleteAll` to avoid having
@@ -180,19 +184,22 @@ const renderHydrogen = (App, hook) => {
             },
         });
         const renderTimeout = setTimeout(() => {
-            const errorMessage = `The app failed to render RSC after ${STREAM_ABORT_TIMEOUT_MS} ms`;
-            didError = new Error(errorMessage);
-            log.error(errorMessage);
-            abort();
+            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, log, }) {
+function buildReactApp({ App, state, context, request, dev, log, pages, }) {
     const renderCache = {};
     const helmetContext = {};
     const componentResponse = new ServerComponentResponse();
@@ -204,7 +211,7 @@ function buildReactApp({ App, state, context, request, dev, 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 })))));
+                React.createElement(App, { ...props, ...hydrogenServerProps, pages: pages })))));
     return { helmetContext, ReactApp, componentResponse };
 }
 function extractHeadElements(helmetContext) {
@@ -244,7 +251,7 @@ async function renderApp(ReactApp, state, log, isReactHydrationRequest) {
 function renderAppFromBufferedStream(app, log, isReactHydrationRequest) {
     return new Promise((resolve, reject) => {
         const errorTimeout = setTimeout(() => {
-            reject(new Error(`The app failed to SSR after ${STREAM_ABORT_TIMEOUT_MS} ms`));
+            log.warn(`The app failed to SSR after ${STREAM_ABORT_TIMEOUT_MS} ms`);
         }, STREAM_ABORT_TIMEOUT_MS);
         if (isWorker) {
             let isComplete = false;

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,6 +1,6 @@
 import { ReactElement } from 'react';
 import { Logger } from '../../utilities/log/log';
-export declare type ImportGlobEagerOutput = Record<string, Record<'default', any>>;
+import type { ImportGlobEagerOutput } from '../../types';
 /**
  * Build a set of default Hydrogen routes based on the output provided by Vite's
  * import.meta.globEager method.

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

@@ -16,7 +16,8 @@ export function DefaultRoutes({ pages, serverState, fallback, log, }) {
 }
 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/useQuery/hooks.js

@@ -1,4 +1,4 @@
-import { log } from '../../utilities';
+import { log } from '../../utilities/log';
 import { deleteItemFromCache, getItemFromCache, isStale, setItemInCache, } from '../../framework/cache';
 import { runDelayedFunction } from '../../framework/runtime';
 import { useRenderCacheData } from '../RenderCacheProvider/hook';
@@ -14,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 = {

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

@@ -15,6 +15,9 @@ 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();

package/dist/esnext/framework/middleware.js

@@ -16,17 +16,6 @@ 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`,
@@ -34,14 +23,17 @@ export function hydrogenMiddleware({ dev, cache, indexTemplate, getServerEntrypo
              */
             if (!globalThis.fetch) {
                 const fetch = await import('node-fetch');
+                const { default: AbortController } = await import('abort-controller');
                 // @ts-ignore
-                globalThis.fetch = fetch.default;
+                globalThis.fetch = fetch;
                 // @ts-ignore
                 globalThis.Request = fetch.Request;
                 // @ts-ignore
                 globalThis.Response = fetch.Response;
                 // @ts-ignore
                 globalThis.Headers = fetch.Headers;
+                // @ts-ignore
+                globalThis.AbortController = AbortController;
             }
             /**
              * Dynamically import ServerComponentResponse after the `fetch`
@@ -69,7 +61,10 @@ export function hydrogenMiddleware({ dev, cache, indexTemplate, getServerEntrypo
                     response.setHeader(key, value);
                 });
                 response.statusCode = eventResponse.status;
-                response.end(eventResponse.body);
+                if (eventResponse.body) {
+                    response.write(eventResponse.body);
+                }
+                response.end();
             }
         }
         catch (e) {
@@ -99,11 +94,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-middleware.js

@@ -1,4 +1,5 @@
 import { loadEnv } from 'vite';
+import bodyParser from 'body-parser';
 import path from 'path';
 import { promises as fs } from 'fs';
 import { hydrogenMiddleware, graphiqlMiddleware } from '../middleware';
@@ -25,6 +26,7 @@ export default (shopifyConfig, pluginOptions) => {
                 shopifyConfig,
                 dev: true,
             }));
+            server.middlewares.use(bodyParser.raw({ type: '*/*' }));
             return () => server.middlewares.use(hydrogenMiddleware({
                 dev: true,
                 shopifyConfig,

package/dist/esnext/framework/plugins/vite-plugin-purge-query-cache.d.ts

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

package/dist/esnext/framework/plugins/vite-plugin-purge-query-cache.js

@@ -0,0 +1,11 @@
+import Crypto from 'crypto';
+export default () => {
+    const buildCacheId = Crypto.randomBytes(8).toString('hex').slice(0, 8);
+    return {
+        name: 'vite-plugin-purge-query-cache',
+        enforce: 'pre',
+        transform(code) {
+            return code.replace('__QUERY_CACHE_ID__', buildCacheId);
+        },
+    };
+};

package/dist/esnext/handle-event.js

@@ -1,7 +1,7 @@
 import { getCacheControlHeader } from './framework/cache';
 import { setContext, setCache } from './framework/runtime';
 import { setConfig } from './framework/config';
-import { getLoggerFromContext, logServerResponse } from './utilities/log';
+import { renderApiRoute } from './utilities/apiRoutes';
 export default async function handleEvent(event, { request, entrypoint, indexTemplate, assetHandler, streamableResponse, dev, cache, context, }) {
     var _a, _b, _c, _d, _e;
     const url = new URL(request.url);
@@ -22,15 +22,23 @@ export default async function handleEvent(event, { request, entrypoint, indexTem
         assetHandler) {
         return assetHandler(event, url);
     }
-    const { render, hydrate, stream } = entrypoint.default || entrypoint;
+    const { render, hydrate, stream, getApiRoute, log } = entrypoint.default || entrypoint;
     // @ts-ignore
-    if (dev && !(render && hydrate && stream)) {
+    if (dev && !(render && hydrate && stream && getApiRoute)) {
         throw new Error(`entry-server.jsx could not be loaded. This likely occurred because of a Vite compilation error.\n` +
             `Please check your server logs for more information.`);
     }
+    if (!isReactHydrationRequest) {
+        const apiRoute = getApiRoute(url);
+        // 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
+        if (apiRoute &&
+            (!apiRoute.hasServerComponent || request.method !== 'GET')) {
+            return renderApiRoute(request, apiRoute, log);
+        }
+    }
     const userAgent = request.headers.get('user-agent');
     const isStreamable = streamableResponse && !isBotUA(url, userAgent);
-    const logger = getLoggerFromContext(request);
     /**
      * Stream back real-user responses, but for bots/etc,
      * use `render` instead. This is because we need to inject <head>
@@ -43,7 +51,6 @@ export default async function handleEvent(event, { request, entrypoint, indexTem
                 request,
                 response: streamableResponse,
                 dev,
-                log: logger,
             });
         }
         else {
@@ -53,7 +60,6 @@ export default async function handleEvent(event, { request, entrypoint, indexTem
                 response: streamableResponse,
                 template,
                 dev,
-                log: logger,
             });
         }
         return;
@@ -63,7 +69,6 @@ export default async function handleEvent(event, { request, entrypoint, indexTem
         context: {},
         isReactHydrationRequest,
         dev,
-        log: logger,
     });
     const headers = componentResponse.headers;
     /**
@@ -100,7 +105,6 @@ export default async function handleEvent(event, { request, entrypoint, indexTem
             headers,
         });
     }
-    logServerResponse('ssr', logger, request, response.status);
     return response;
 }
 /**

package/dist/esnext/hooks/useShopQuery/hooks.d.ts

@@ -8,7 +8,7 @@ export interface UseShopQueryResponse<T> {
 /**
  * The `useShopQuery` hook allows you to make server-only GraphQL queries to the Storefront API. It must be a descendent of a `ShopifyProvider` component.
  */
-export declare function useShopQuery<T>({ query, variables, cache, }: {
+export declare function useShopQuery<T>({ query, variables, cache, locale, }: {
     /** A string of the GraphQL query.
      * If no query is provided, useShopQuery will make no calls to the Storefront API.
      */
@@ -17,4 +17,6 @@ export declare function useShopQuery<T>({ query, variables, cache, }: {
     variables?: Record<string, any>;
     /** An object containing cache-control options for the sub-request. */
     cache?: CacheOptions;
+    /** A string corresponding to a valid locale identifier like `en-us` used to make the request. */
+    locale?: string;
 }): UseShopQueryResponse<T>;

package/dist/esnext/hooks/useShopQuery/hooks.js

@@ -1,21 +1,39 @@
 import { useShop } from '../../foundation/useShop';
-import { log } from '../../utilities';
+import { log } from '../../utilities/log';
 import { useQuery } from '../../foundation/useQuery';
 import { isClient, fetchBuilder, graphqlRequestBody } from '../../utilities';
 import { getConfig } from '../../framework/config';
 /**
  * The `useShopQuery` hook allows you to make server-only GraphQL queries to the Storefront API. It must be a descendent of a `ShopifyProvider` component.
  */
-export function useShopQuery({ query, variables = {}, cache = {}, }) {
+export function useShopQuery({ query, variables = {}, cache = {}, locale = '', }) {
     if (isClient()) {
         throw new Error('Shopify Storefront API requests should only be made from the server.');
     }
     const body = query ? graphqlRequestBody(query, variables) : '';
-    const { request, key } = createShopRequest(body);
-    const { data } = useQuery(key, query
+    const { request, key } = createShopRequest(body, locale);
+    const { data, error: fetchError } = useQuery(key, query
         ? fetchBuilder(request)
         : // If no query, avoid calling SFAPI & return nothing
             async () => ({ data: undefined, errors: undefined }), { cache });
+    /**
+     * The fetch request itself failed, so we handle that differently than a GraphQL error
+     */
+    if (fetchError) {
+        const errorMessage = `Failed to fetch the Storefront API. ${
+        // 403s to the SF API (almost?) always mean that your Shopify credentials are bad/wrong
+        fetchError.status === 403
+            ? `You may have a bad value in 'shopify.config.js'`
+            : `${fetchError.statusText}`}`;
+        log.error(errorMessage);
+        if (getConfig().dev) {
+            throw new Error(errorMessage);
+        }
+        else {
+            // in non-dev environments, we probably don't want super-detailed error messages for the user
+            throw new Error(`The fetch attempt failed; there was an issue connecting to the data source.`);
+        }
+    }
     /**
      * GraphQL errors get printed to the console but ultimately
      * get returned to the consumer.
@@ -34,8 +52,9 @@ export function useShopQuery({ query, variables = {}, cache = {}, }) {
     }
     return data;
 }
-function createShopRequest(body) {
-    const { storeDomain, storefrontToken, graphqlApiVersion } = useShop();
+function createShopRequest(body, locale) {
+    var _a;
+    const { storeDomain, storefrontToken, graphqlApiVersion, locale: defaultLocale, } = useShop();
     const url = `https://${storeDomain}/api/${graphqlApiVersion}/graphql.json`;
     return {
         request: new Request(url, {
@@ -43,9 +62,10 @@ function createShopRequest(body) {
             headers: {
                 'X-Shopify-Storefront-Access-Token': storefrontToken,
                 'content-type': 'application/json',
+                'Accept-Language': (_a = locale) !== null && _a !== void 0 ? _a : defaultLocale,
             },
             body,
         }),
-        key: [storeDomain, graphqlApiVersion, body],
+        key: [storeDomain, graphqlApiVersion, body, locale],
     };
 }

package/dist/esnext/index.d.ts

@@ -1,7 +1,8 @@
 export * from './foundation/';
 export * from './components/';
 export * from './hooks/';
-export { flattenConnection, fetchBuilder, graphqlRequestBody, decodeShopifyId, isClient, log, setLogger, getTime, Logger, } from './utilities';
+export { flattenConnection, fetchBuilder, graphqlRequestBody, decodeShopifyId, isClient, getTime, } from './utilities';
+export { log, setLogger, Logger } from './utilities/log';
 export { Helmet } from 'react-helmet-async';
 export { LocalizationProvider } from './components/LocalizationProvider/LocalizationProvider.server';
 export * from './hooks/useShopQuery';

package/dist/esnext/index.js

@@ -1,7 +1,8 @@
 export * from './foundation/';
 export * from './components/';
 export * from './hooks/';
-export { flattenConnection, fetchBuilder, graphqlRequestBody, decodeShopifyId, isClient, log, setLogger, getTime, } from './utilities';
+export { flattenConnection, fetchBuilder, graphqlRequestBody, decodeShopifyId, isClient, getTime, } from './utilities';
+export { log, setLogger } from './utilities/log';
 export { Helmet } from 'react-helmet-async';
 // This is exported here because it contains a Server Component
 export { LocalizationProvider } from './components/LocalizationProvider/LocalizationProvider.server';

package/dist/esnext/types.d.ts

@@ -1,15 +1,15 @@
 /// <reference types="node" />
 import { ServerResponse } from 'http';
-import type { Logger } from './utilities/log/log';
 import type { ServerComponentResponse } from './framework/Hydration/ServerComponentResponse.server';
 import type { ServerComponentRequest } from './framework/Hydration/ServerComponentRequest.server';
 import type { Metafield, Image, MediaContentType } from './graphql/types/types';
+import { ApiRouteMatch } from './utilities/apiRoutes';
+import { Logger } from './utilities/log/log';
 export declare type Renderer = (url: URL, options: {
     request: ServerComponentRequest;
     context?: Record<string, any>;
     isReactHydrationRequest?: boolean;
     dev?: boolean;
-    log: Logger;
 }) => Promise<{
     body: string;
     componentResponse: ServerComponentResponse;
@@ -19,20 +19,20 @@ export declare type Streamer = (url: URL, options: {
     request: ServerComponentRequest;
     response: ServerResponse;
     template: string;
-    log: Logger;
     dev?: boolean;
 }) => void;
 export declare type Hydrator = (url: URL, options: {
     context: any;
     request: ServerComponentRequest;
     response: ServerResponse;
-    log: Logger;
     dev?: boolean;
 }) => void;
 export declare type EntryServerHandler = {
     render: Renderer;
     stream: Streamer;
     hydrate: Hydrator;
+    getApiRoute: (url: URL) => ApiRouteMatch | null;
+    log: Logger;
 };
 export declare type ShopifyConfig = {
     locale?: string;
@@ -43,11 +43,11 @@ export declare type ShopifyConfig = {
 export declare type Hook = (params: {
     url: URL;
 } & Record<string, any>) => any | Promise<any>;
-export declare type ServerHandler = (App: any, hook?: Hook) => {
-    render: Renderer;
-    stream: Streamer;
-    hydrate: Hydrator;
+export declare type ImportGlobEagerOutput = Record<string, Record<'default' | 'api', any>>;
+export declare type ServerHandlerConfig = {
+    pages?: ImportGlobEagerOutput;
 };
+export declare type ServerHandler = (App: any, config?: ServerHandlerConfig, hook?: Hook) => EntryServerHandler;
 export declare type ClientHandler = (App: any, hook?: Hook) => Promise<void>;
 export interface GraphQLConnection<T> {
     edges?: {
@@ -91,5 +91,6 @@ export interface CacheOptions {
 }
 export interface HydrogenVitePluginOptions {
     devCache?: boolean;
+    purgeQueryCacheOnBuild?: boolean;
 }
 export {};

package/dist/esnext/utilities/apiRoutes.d.ts

@@ -0,0 +1,21 @@
+import { ImportGlobEagerOutput } from '../types';
+import { Logger } from '../utilities/log/log';
+declare type RouteParams = Record<string, string>;
+declare type RequestOptions = {
+    params: RouteParams;
+};
+declare type ResourceGetter = (request: Request, requestOptions: RequestOptions) => Promise<Response>;
+interface HydrogenApiRoute {
+    path: string;
+    resource: ResourceGetter;
+    hasServerComponent: boolean;
+}
+export declare type ApiRouteMatch = {
+    resource: ResourceGetter;
+    hasServerComponent: boolean;
+    params: RouteParams;
+};
+export declare function getApiRoutesFromPages(pages: ImportGlobEagerOutput | undefined, topLevelPath?: string): Array<HydrogenApiRoute>;
+export declare function getApiRouteFromURL(url: URL, routes: Array<HydrogenApiRoute>): ApiRouteMatch | null;
+export declare function renderApiRoute(request: Request, route: ApiRouteMatch, log: Logger): Promise<Response>;
+export {};