@shopify/hydrogen 0.13.0 → 0.13.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 0.13.1
+
+### Patch Changes
+
+- [#1008](https://github.com/Shopify/hydrogen/pull/1008) [`ca1de82b`](https://github.com/Shopify/hydrogen/commit/ca1de82bc38c1c02caa451fb52065da499555e6f) Thanks [@frandiox](https://github.com/frandiox)! - Allow passing `cache` parameter to `createServer` in Node entry.
+
+* [#997](https://github.com/Shopify/hydrogen/pull/997) [`fffdc08f`](https://github.com/Shopify/hydrogen/commit/fffdc08f87f71592352a2eb67a63e80704054db2) Thanks [@frandiox](https://github.com/frandiox)! - Allow empty array values in flattenConnection utility.
+
+- [#1007](https://github.com/Shopify/hydrogen/pull/1007) [`7cfca7b0`](https://github.com/Shopify/hydrogen/commit/7cfca7b09289e028a463ababb51e69b4e3943d94) Thanks [@scottdixon](https://github.com/scottdixon)! - Fix API index routes https://github.com/Shopify/hydrogen/issues/562
+
+* [#1000](https://github.com/Shopify/hydrogen/pull/1000) [`6d0d5068`](https://github.com/Shopify/hydrogen/commit/6d0d50686029c3d66d9dc0ceb0b5f71456c7b19e) Thanks [@frandiox](https://github.com/frandiox)! - Do not cache Storefront API responses that contain GraphQL errors.
+
+- [#1003](https://github.com/Shopify/hydrogen/pull/1003) [`d8a9c929`](https://github.com/Shopify/hydrogen/commit/d8a9c9290aaf7c9d058b2c08567294822bea5396) Thanks [@jplhomer](https://github.com/jplhomer)! - Update useShopQuery to accept a custom Storefront API secret token, and forward the Buyer IP.
+
 ## 0.13.0
 
 ### Minor Changes
@@ -29,7 +43,7 @@
 
   These fragments have been removed to reduce the chances of over-fetching (in other words, querying for fields you don't use) in your GraphQL queries. Please refer to the [Storefront API documentation](https://shopify.dev/api/storefront) for information and guides.
 
-* [#912](https://github.com/Shopify/hydrogen/pull/912) [`de0e0d6a`](https://github.com/Shopify/hydrogen/commit/de0e0d6a6652463243ee09013cd30830ce2a246a) Thanks [@blittle](https://github.com/blittle)! - Change the country selector to lazy load available countries. The motivation to do so is that a _lot_ of countries come with the starter template. The problem is 1) the graphql query to fetch them all is relatively slow and 2) all of them get serialized to the browser in each RSC response.
+* [#912](https://github.com/Shopify/hydrogen/pull/912) [`de0e0d6a`](https://github.com/Shopify/hydrogen/commit/de0e0d6a6652463243ee09013cd30830ce2a246a) Thanks [@blittle](https://github.com/blittle)! - Change the country selector to lazy load available countries. The motivation to do so is that a _lot_ of countries come with the Demo Store template. The problem is 1) the graphql query to fetch them all is relatively slow and 2) all of them get serialized to the browser in each RSC response.
 
   This change removes `availableCountries` from the `LocalizationProvider`. As a result, the `useAvailableCountries` hook is also gone. Instead, the available countries are loaded on demand from an API route.
 
@@ -79,7 +93,7 @@
   }, []);
   ```
 
-  See an example on how this could be done inside the Hydrogen Example Template [country selector](https://github.com/Shopify/hydrogen/blob/v1.x-2022-07/examples/template-hydrogen-default/src/components/CountrySelector.client.jsx)
+  See an example on how this could be done inside the Demo Store template [country selector](https://github.com/Shopify/hydrogen/blob/v1.x-2022-07/examples/template-hydrogen-default/src/components/CountrySelector.client.jsx)
 
 - [#698](https://github.com/Shopify/hydrogen/pull/698) [`6f30b9a1`](https://github.com/Shopify/hydrogen/commit/6f30b9a1327f06d648a01dd94d539c7dcb3061e0) Thanks [@jplhomer](https://github.com/jplhomer)! - Basic end-to-end tests have been added to the default Hydrogen template. You can run tests in development:
 
@@ -239,7 +253,7 @@
 
 - [#981](https://github.com/Shopify/hydrogen/pull/981) [`8dda8a86`](https://github.com/Shopify/hydrogen/commit/8dda8a860bc1cf58511756b6fff999fb7caa6081) Thanks [@michenly](https://github.com/michenly)! - Fix useUrl() when it is in RSC mode
 
-* [#965](https://github.com/Shopify/hydrogen/pull/965) [`cdad13ed`](https://github.com/Shopify/hydrogen/commit/cdad13ed85ff17b84981367f39c7d2fe45e72dcf) Thanks [@blittle](https://github.com/blittle)! - Fix server redirects to work properly with RSC responses. For example, the redirect component within the starter template needs to change:
+* [#965](https://github.com/Shopify/hydrogen/pull/965) [`cdad13ed`](https://github.com/Shopify/hydrogen/commit/cdad13ed85ff17b84981367f39c7d2fe45e72dcf) Thanks [@blittle](https://github.com/blittle)! - Fix server redirects to work properly with RSC responses. For example, the redirect component within the Demo Store template needs to change:
 
   ```diff
   export default function Redirect({response}) {
@@ -289,7 +303,7 @@
 
 ### Minor Changes
 
-- [`8271be8`](https://github.com/Shopify/hydrogen/commit/8271be83331c99f27a258e6532983da4fe4f0b5b) Thanks [@michenly](https://github.com/michenly)! - Export Seo components Fragement and use them in the starter template.
+- [`8271be8`](https://github.com/Shopify/hydrogen/commit/8271be83331c99f27a258e6532983da4fe4f0b5b) Thanks [@michenly](https://github.com/michenly)! - Export Seo components Fragement and use them in the Demo Store template.
 
 * [#827](https://github.com/Shopify/hydrogen/pull/827) [`745e8c0`](https://github.com/Shopify/hydrogen/commit/745e8c0a87a7c41803934565e5a756295ff629c2) Thanks [@michenly](https://github.com/michenly)! - Move any static `Fragment` properties on components to the entry point `@shopify/hydrogen/fragments`.
   The migration diff are as follows:
@@ -925,7 +939,7 @@ function SomeComponent() {
 
 ### Fixed
 
-- Starter template GalleryPreview unique key warning
+- Demo Store template GalleryPreview unique key warning
 - Mitigation for upcoming breaking minor Vite update
 
 ## 0.2.0 - 2021-10-08

package/dist/esnext/entry-server.d.ts

@@ -14,6 +14,7 @@ interface RequestHandlerOptions {
     dev?: boolean;
     context?: RuntimeContext;
     nonce?: string;
+    buyerIpHeader?: string;
 }
 export interface RequestHandler {
     (request: Request | IncomingMessage, options: RequestHandlerOptions): Promise<Response | undefined>;

package/dist/esnext/entry-server.js

@@ -19,8 +19,9 @@ const DOCTYPE = '<!DOCTYPE html>';
 const CONTENT_TYPE = 'Content-Type';
 const HTML_CONTENT_TYPE = 'text/html; charset=UTF-8';
 export const renderHydrogen = (App, { shopifyConfig, routes }) => {
-    const handleRequest = async function (rawRequest, { indexTemplate, streamableResponse, dev, cache, context, nonce }) {
+    const handleRequest = async function (rawRequest, { indexTemplate, streamableResponse, dev, cache, context, nonce, buyerIpHeader, }) {
         const request = new ServerComponentRequest(rawRequest);
+        request.ctx.buyerIpHeader = buyerIpHeader;
         const url = new URL(request.url);
         const log = getLoggerWithContext(request);
         const componentResponse = new ServerComponentResponse();

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

@@ -30,7 +30,7 @@ export function useServerRequest() {
         const cache = React.unstable_getCacheForType(requestCacheRSC);
         request = cache ? cache.get(requestCacheRSC.key) : null;
     }
-    catch (error) {
+    catch (_a) {
         // If RSC cache failed it means this is not an RSC request.
         // Try getting SSR context instead:
         request = useContext(RequestContextSSR);

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

@@ -9,6 +9,9 @@ export interface HydrogenUseQueryOptions {
      * to preload the query for all requests.
      */
     preload?: PreloadOptions;
+    /** A function that inspects the response body to determine if it should be cached.
+     */
+    shouldCacheResponse?: (body: any) => boolean;
 }
 /**
  * The `useQuery` hook executes an asynchronous operation like `fetch` in a way that

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

@@ -32,9 +32,11 @@ queryOptions) {
     return useRequestCacheData(withCacheIdKey, fetcher);
 }
 function cachedQueryFnBuilder(key, queryFn, queryOptions) {
+    var _a;
     const resolvedQueryOptions = {
         ...(queryOptions !== null && queryOptions !== void 0 ? queryOptions : {}),
     };
+    const shouldCacheResponse = (_a = queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.shouldCacheResponse) !== null && _a !== void 0 ? _a : (() => true);
     /**
      * Attempt to read the query from cache. If it doesn't exist or if it's stale, regenerate it.
      */
@@ -64,7 +66,9 @@ function cachedQueryFnBuilder(key, queryFn, queryOptions) {
                     await setItemInCache(lockKey, true);
                     try {
                         const output = await generateNewOutput();
-                        await setItemInCache(key, output, resolvedQueryOptions === null || resolvedQueryOptions === void 0 ? void 0 : resolvedQueryOptions.cache);
+                        if (shouldCacheResponse(output)) {
+                            await setItemInCache(key, output, resolvedQueryOptions === null || resolvedQueryOptions === void 0 ? void 0 : resolvedQueryOptions.cache);
+                        }
                     }
                     catch (e) {
                         log.error(`Error generating async response: ${e.message}`);
@@ -80,7 +84,9 @@ function cachedQueryFnBuilder(key, queryFn, queryOptions) {
         /**
          * Important: Do this async
          */
-        runDelayedFunction(async () => await setItemInCache(key, newOutput, resolvedQueryOptions === null || resolvedQueryOptions === void 0 ? void 0 : resolvedQueryOptions.cache));
+        if (shouldCacheResponse(newOutput)) {
+            runDelayedFunction(() => setItemInCache(key, newOutput, resolvedQueryOptions === null || resolvedQueryOptions === void 0 ? void 0 : resolvedQueryOptions.cache));
+        }
         collectQueryCacheControlHeaders(request, key, generateSubRequestCacheControlHeader(resolvedQueryOptions === null || resolvedQueryOptions === void 0 ? void 0 : resolvedQueryOptions.cache));
         return newOutput;
     }

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

@@ -35,6 +35,7 @@ export declare class ServerComponentRequest extends Request {
         queryTimings: Array<QueryTiming>;
         preloadQueries: PreloadQueriesByURL;
         router: RouterContextData;
+        buyerIpHeader?: string;
         [key: string]: any;
     };
     constructor(input: any);
@@ -44,4 +45,10 @@ export declare class ServerComponentRequest extends Request {
     savePreloadQuery(query: PreloadQueryEntry): void;
     getPreloadQueries(): PreloadQueriesByURL | undefined;
     savePreloadQueries(): void;
+    /**
+     * Buyer IP varies by hosting provider and runtime. The developer should provide this
+     * as an argument to the `handleRequest` function for their runtime.
+     * Defaults to `x-forwarded-for` header value.
+     */
+    getBuyerIp(): string | null;
 }

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

@@ -25,13 +25,7 @@ export class ServerComponentRequest extends Request {
             super(input, init);
         }
         else {
-            super(getUrlFromNodeRequest(input), {
-                headers: new Headers(input.headers),
-                method: input.method,
-                body: input.method !== 'GET' && input.method !== 'HEAD'
-                    ? input.body
-                    : undefined,
-            });
+            super(getUrlFromNodeRequest(input), getInitFromNodeRequest(input));
         }
         this.time = getTime();
         this.id = generateId();
@@ -85,6 +79,15 @@ export class ServerComponentRequest extends Request {
     savePreloadQueries() {
         preloadCache.set(this.preloadURL, this.ctx.preloadQueries);
     }
+    /**
+     * Buyer IP varies by hosting provider and runtime. The developer should provide this
+     * as an argument to the `handleRequest` function for their runtime.
+     * Defaults to `x-forwarded-for` header value.
+     */
+    getBuyerIp() {
+        var _a;
+        return this.headers.get((_a = this.ctx.buyerIpHeader) !== null && _a !== void 0 ? _a : 'x-forwarded-for');
+    }
 }
 function mergeMapEntries(map1, map2) {
     map2 && map2.forEach((v, k) => map1.set(k, v));
@@ -112,3 +115,16 @@ function getUrlFromNodeRequest(request) {
     const secure = request.headers['x-forwarded-proto'] === 'https';
     return new URL(`${secure ? 'https' : 'http'}://${request.headers.host + url}`).toString();
 }
+function getInitFromNodeRequest(request) {
+    const init = {
+        headers: new Headers(request.headers),
+        method: request.method,
+        body: request.method !== 'GET' && request.method !== 'HEAD'
+            ? request.body
+            : undefined,
+    };
+    if (!init.headers.has('x-forwarded-for')) {
+        init.headers.set('x-forwarded-for', request.socket.remoteAddress);
+    }
+    return init;
+}

package/dist/esnext/framework/cache/in-memory.d.ts

@@ -8,4 +8,5 @@ export declare class InMemoryCache {
     put(request: Request, response: Response): void;
     match(request: Request): Response | undefined;
     delete(request: Request): void;
+    keys(request?: Request): Promise<Request[]>;
 }

package/dist/esnext/framework/cache/in-memory.js

@@ -15,16 +15,17 @@ export class InMemoryCache {
         });
     }
     match(request) {
+        var _a, _b;
         const match = this.store.get(request.url);
         if (!match) {
             logCacheApiStatus('MISS', request.url);
             return;
         }
         const { value, date } = match;
-        const cacheControl = value.headers.get('cache-control');
-        const maxAge = parseInt(cacheControl.match(/max-age=(\d+)/)[1], 10);
-        const swr = parseInt(cacheControl.match(/stale-while-revalidate=(\d+)/)[1], 10);
-        const age = (new Date().valueOf() - date) / 1000;
+        const cacheControl = value.headers.get('cache-control') || '';
+        const maxAge = parseInt(((_a = cacheControl.match(/max-age=(\d+)/)) === null || _a === void 0 ? void 0 : _a[1]) || '0', 10);
+        const swr = parseInt(((_b = cacheControl.match(/stale-while-revalidate=(\d+)/)) === null || _b === void 0 ? void 0 : _b[1]) || '0', 10);
+        const age = (new Date().valueOf() - date.valueOf()) / 1000;
         const isMiss = age > maxAge + swr;
         if (isMiss) {
             logCacheApiStatus('MISS', request.url);
@@ -34,7 +35,7 @@ export class InMemoryCache {
         const isStale = age > maxAge;
         const headers = new Headers(value.headers);
         headers.set('cache', isStale ? 'STALE' : 'HIT');
-        headers.set('date', date.toGMTString());
+        headers.set('date', date.toUTCString());
         logCacheApiStatus(headers.get('cache'), request.url);
         const response = new Response(value.body, {
             headers,
@@ -45,4 +46,13 @@ export class InMemoryCache {
         this.store.delete(request.url);
         logCacheApiStatus('DELETE', request.url);
     }
+    keys(request) {
+        const cacheKeys = [];
+        for (const url of this.store.keys()) {
+            if (!request || request.url === url) {
+                cacheKeys.push(new Request(url));
+            }
+        }
+        return Promise.resolve(cacheKeys);
+    }
 }

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

@@ -6,22 +6,25 @@ import { getConfig } from '../../framework/config';
 import { useServerRequest } from '../../foundation/ServerRequestProvider';
 import { injectGraphQLTracker } from '../../utilities/graphql-tracker';
 import { sendMessageToClient } from '../../utilities/devtools';
+import { META_ENV_SSR } from '../../foundation/ssr-interop';
+// Check if the response body has GraphQL errors
+const shouldCacheResponse = (body) => { var _a; return !((body === null || body === void 0 ? void 0 : body.error) || ((_a = body === null || body === void 0 ? void 0 : body.data) === null || _a === void 0 ? void 0 : _a.errors)); };
 /**
  * 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, locale = '', preload = false, }) {
     var _a;
-    if (!import.meta.env.SSR) {
+    if (!META_ENV_SSR) {
         throw new Error('Shopify Storefront API requests should only be made from the server.');
     }
     const serverRequest = useServerRequest();
     const log = getLoggerWithContext(serverRequest);
     const body = query ? graphqlRequestBody(query, variables) : '';
-    const { key, url, requestInit } = createShopRequest(body, locale);
+    const { key, url, requestInit } = useCreateShopRequest(body, locale);
     const { data, error: useQueryError } = useQuery(key, query
         ? fetchBuilder(url, requestInit)
         : // If no query, avoid calling SFAPI & return nothing
-            async () => ({ data: undefined, errors: undefined }), { cache, preload });
+            async () => ({ data: undefined, errors: undefined }), { cache, shouldCacheResponse, preload });
     /**
      * The fetch request itself failed, so we handle that differently than a GraphQL error
      */
@@ -42,7 +45,7 @@ export function useShopQuery({ query, variables = {}, cache, locale = '', preloa
      * get returned to the consumer.
      */
     if (data === null || data === void 0 ? void 0 : data.errors) {
-        const errors = data.errors instanceof Array ? data.errors : [data.errors];
+        const errors = Array.isArray(data.errors) ? data.errors : [data.errors];
         for (const error of errors) {
             if (getConfig().dev) {
                 throw new Error(error.message);
@@ -53,7 +56,7 @@ export function useShopQuery({ query, variables = {}, cache, locale = '', preloa
         }
         log.error(`GraphQL errors: ${errors.length}`);
     }
-    if (import.meta.env.DEV &&
+    if (__DEV__ &&
         log.options().showUnusedQueryProperties &&
         query &&
         typeof query !== 'string' &&
@@ -90,9 +93,14 @@ export function useShopQuery({ query, variables = {}, cache, locale = '', preloa
     }
     return data;
 }
-function createShopRequest(body, locale) {
-    var _a;
+function useCreateShopRequest(body, locale) {
+    var _a, _b;
     const { storeDomain, storefrontToken, storefrontApiVersion, locale: defaultLocale, } = useShop();
+    const request = useServerRequest();
+    const secretToken = typeof Oxygen !== 'undefined'
+        ? (_a = Oxygen === null || Oxygen === void 0 ? void 0 : Oxygen.env) === null || _a === void 0 ? void 0 : _a.SHOPIFY_STOREFRONT_API_SECRET_TOKEN
+        : null;
+    const buyerIp = request.getBuyerIp();
     return {
         key: [storeDomain, storefrontApiVersion, body, locale],
         url: `https://${storeDomain}/api/${storefrontApiVersion}/graphql.json`,
@@ -100,18 +108,19 @@ function createShopRequest(body, locale) {
             body,
             method: 'POST',
             headers: {
-                'X-Shopify-Storefront-Access-Token': storefrontToken,
+                'X-Shopify-Storefront-Access-Token': secretToken !== null && secretToken !== void 0 ? secretToken : storefrontToken,
+                'Shopify-Storefront-Buyer-IP': buyerIp !== null && buyerIp !== void 0 ? buyerIp : '',
                 'X-SDK-Variant': 'hydrogen',
                 'X-SDK-Version': storefrontApiVersion,
                 'content-type': 'application/json',
-                'Accept-Language': (_a = locale) !== null && _a !== void 0 ? _a : defaultLocale,
+                'Accept-Language': (_b = locale) !== null && _b !== void 0 ? _b : defaultLocale,
             },
         },
     };
 }
 function createErrorMessage(fetchError) {
     if (fetchError instanceof Response) {
-        `An error occurred while fetching from the Storefront API. ${
+        return `An error occurred while fetching from 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'`

package/dist/esnext/platforms/node.d.ts

@@ -1,10 +1,9 @@
 import '../utilities/web-api-polyfill';
 import connect from 'connect';
 declare type CreateServerOptions = {
-    port?: number | string;
+    cache?: Cache;
 };
-export declare function createServer({ port, }?: CreateServerOptions): Promise<{
+export declare function createServer({ cache }?: CreateServerOptions): Promise<{
     app: connect.Server;
-    port: string | number;
 }>;
 export {};

package/dist/esnext/platforms/node.js

@@ -14,7 +14,7 @@ import compression from 'compression';
 import bodyParser from 'body-parser';
 import connect from 'connect';
 const handleRequest = entrypoint;
-export async function createServer({ port = process.env.PORT || 8080, } = {}) {
+export async function createServer({ cache } = {}) {
     // @ts-ignore
     globalThis.Oxygen = { env: process.env };
     const app = connect();
@@ -26,11 +26,13 @@ export async function createServer({ port = process.env.PORT || 8080, } = {}) {
     app.use(hydrogenMiddleware({
         getServerEntrypoint: () => handleRequest,
         indexTemplate,
+        cache,
     }));
-    return { app, port };
+    return { app };
 }
 if (require.main === module) {
-    createServer().then(({ app, port }) => {
+    createServer().then(({ app }) => {
+        const port = process.env.PORT || 8080;
         app.listen(port, () => {
             console.log(`Hydrogen server running at http://localhost:${port}`);
         });

package/dist/esnext/platforms/worker.js

@@ -13,8 +13,9 @@ export default {
         try {
             return (await handleRequest(request, {
                 indexTemplate,
-                cache: caches.default,
+                cache: await caches.open('oxygen'),
                 context,
+                buyerIpHeader: 'oxygen-buyer-ip',
             }));
         }
         catch (error) {

package/dist/esnext/utilities/apiRoutes.js

@@ -10,7 +10,7 @@ export function getApiRoutes(pages, topLevelPath = '*') {
     const routes = Object.keys(pages)
         .filter((key) => pages[key].api)
         .map((key) => {
-        const path = key
+        let path = key
             .replace('./routes', '')
             .replace(/\.server\.(t|j)sx?$/, '')
             /**
@@ -26,6 +26,8 @@ export function getApiRoutes(pages, topLevelPath = '*') {
              * Convert /[handle].jsx and /[...handle].jsx to /:handle.jsx for react-router-dom
              */
             .replace(/\[(?:[.]{3})?(\w+?)\]/g, (_match, param) => `:${param}`);
+        if (path.endsWith('/') && path !== '/')
+            path = path.substring(0, path.length - 1);
         /**
          * Catch-all routes [...handle].jsx don't need an exact match
          * https://reactrouter.com/core/api/Route/exact-bool

package/dist/esnext/utilities/flattenConnection/flattenConnection.js

@@ -2,12 +2,9 @@
  * The `flattenConnection` utility transforms a connection object from the Storefront API (for example, [Product-related connections](/api/storefront/reference/products/product)) into a flat array of nodes.
  */
 export function flattenConnection(connection) {
-    if (!connection.edges || connection.edges.length < 1) {
-        throw new Error('must have edges');
-    }
-    return connection.edges.map((edge) => {
+    return (connection.edges || []).map((edge) => {
         if (!(edge === null || edge === void 0 ? void 0 : edge.node)) {
-            throw new Error('must have node');
+            throw new Error('Connection edges must contain nodes');
         }
         return edge.node;
     });

package/dist/esnext/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "0.13.0";
+export declare const LIB_VERSION = "0.13.1";

package/dist/esnext/version.js

@@ -1 +1 @@
-export const LIB_VERSION = '0.13.0';
+export const LIB_VERSION = '0.13.1';

package/dist/node/entry-server.d.ts

@@ -14,6 +14,7 @@ interface RequestHandlerOptions {
     dev?: boolean;
     context?: RuntimeContext;
     nonce?: string;
+    buyerIpHeader?: string;
 }
 export interface RequestHandler {
     (request: Request | IncomingMessage, options: RequestHandlerOptions): Promise<Response | undefined>;

package/dist/node/entry-server.js

@@ -48,8 +48,9 @@ const DOCTYPE = '<!DOCTYPE html>';
 const CONTENT_TYPE = 'Content-Type';
 const HTML_CONTENT_TYPE = 'text/html; charset=UTF-8';
 const renderHydrogen = (App, { shopifyConfig, routes }) => {
-    const handleRequest = async function (rawRequest, { indexTemplate, streamableResponse, dev, cache, context, nonce }) {
+    const handleRequest = async function (rawRequest, { indexTemplate, streamableResponse, dev, cache, context, nonce, buyerIpHeader, }) {
         const request = new ServerComponentRequest_server_1.ServerComponentRequest(rawRequest);
+        request.ctx.buyerIpHeader = buyerIpHeader;
         const url = new URL(request.url);
         const log = (0, log_1.getLoggerWithContext)(request);
         const componentResponse = new ServerComponentResponse_server_1.ServerComponentResponse();

package/dist/node/foundation/ServerRequestProvider/ServerRequestProvider.js

@@ -57,7 +57,7 @@ function useServerRequest() {
         const cache = react_1.default.unstable_getCacheForType(requestCacheRSC);
         request = cache ? cache.get(requestCacheRSC.key) : null;
     }
-    catch (error) {
+    catch (_a) {
         // If RSC cache failed it means this is not an RSC request.
         // Try getting SSR context instead:
         request = (0, react_1.useContext)(RequestContextSSR);

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

@@ -35,6 +35,7 @@ export declare class ServerComponentRequest extends Request {
         queryTimings: Array<QueryTiming>;
         preloadQueries: PreloadQueriesByURL;
         router: RouterContextData;
+        buyerIpHeader?: string;
         [key: string]: any;
     };
     constructor(input: any);
@@ -44,4 +45,10 @@ export declare class ServerComponentRequest extends Request {
     savePreloadQuery(query: PreloadQueryEntry): void;
     getPreloadQueries(): PreloadQueriesByURL | undefined;
     savePreloadQueries(): void;
+    /**
+     * Buyer IP varies by hosting provider and runtime. The developer should provide this
+     * as an argument to the `handleRequest` function for their runtime.
+     * Defaults to `x-forwarded-for` header value.
+     */
+    getBuyerIp(): string | null;
 }

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

@@ -28,13 +28,7 @@ class ServerComponentRequest extends Request {
             super(input, init);
         }
         else {
-            super(getUrlFromNodeRequest(input), {
-                headers: new Headers(input.headers),
-                method: input.method,
-                body: input.method !== 'GET' && input.method !== 'HEAD'
-                    ? input.body
-                    : undefined,
-            });
+            super(getUrlFromNodeRequest(input), getInitFromNodeRequest(input));
         }
         this.time = (0, timing_1.getTime)();
         this.id = generateId();
@@ -88,6 +82,15 @@ class ServerComponentRequest extends Request {
     savePreloadQueries() {
         preloadCache.set(this.preloadURL, this.ctx.preloadQueries);
     }
+    /**
+     * Buyer IP varies by hosting provider and runtime. The developer should provide this
+     * as an argument to the `handleRequest` function for their runtime.
+     * Defaults to `x-forwarded-for` header value.
+     */
+    getBuyerIp() {
+        var _a;
+        return this.headers.get((_a = this.ctx.buyerIpHeader) !== null && _a !== void 0 ? _a : 'x-forwarded-for');
+    }
 }
 exports.ServerComponentRequest = ServerComponentRequest;
 function mergeMapEntries(map1, map2) {
@@ -116,3 +119,16 @@ function getUrlFromNodeRequest(request) {
     const secure = request.headers['x-forwarded-proto'] === 'https';
     return new URL(`${secure ? 'https' : 'http'}://${request.headers.host + url}`).toString();
 }
+function getInitFromNodeRequest(request) {
+    const init = {
+        headers: new Headers(request.headers),
+        method: request.method,
+        body: request.method !== 'GET' && request.method !== 'HEAD'
+            ? request.body
+            : undefined,
+    };
+    if (!init.headers.has('x-forwarded-for')) {
+        init.headers.set('x-forwarded-for', request.socket.remoteAddress);
+    }
+    return init;
+}

package/dist/node/framework/cache/in-memory.d.ts

@@ -8,4 +8,5 @@ export declare class InMemoryCache {
     put(request: Request, response: Response): void;
     match(request: Request): Response | undefined;
     delete(request: Request): void;
+    keys(request?: Request): Promise<Request[]>;
 }

package/dist/node/framework/cache/in-memory.js

@@ -18,16 +18,17 @@ class InMemoryCache {
         });
     }
     match(request) {
+        var _a, _b;
         const match = this.store.get(request.url);
         if (!match) {
             (0, log_1.logCacheApiStatus)('MISS', request.url);
             return;
         }
         const { value, date } = match;
-        const cacheControl = value.headers.get('cache-control');
-        const maxAge = parseInt(cacheControl.match(/max-age=(\d+)/)[1], 10);
-        const swr = parseInt(cacheControl.match(/stale-while-revalidate=(\d+)/)[1], 10);
-        const age = (new Date().valueOf() - date) / 1000;
+        const cacheControl = value.headers.get('cache-control') || '';
+        const maxAge = parseInt(((_a = cacheControl.match(/max-age=(\d+)/)) === null || _a === void 0 ? void 0 : _a[1]) || '0', 10);
+        const swr = parseInt(((_b = cacheControl.match(/stale-while-revalidate=(\d+)/)) === null || _b === void 0 ? void 0 : _b[1]) || '0', 10);
+        const age = (new Date().valueOf() - date.valueOf()) / 1000;
         const isMiss = age > maxAge + swr;
         if (isMiss) {
             (0, log_1.logCacheApiStatus)('MISS', request.url);
@@ -37,7 +38,7 @@ class InMemoryCache {
         const isStale = age > maxAge;
         const headers = new Headers(value.headers);
         headers.set('cache', isStale ? 'STALE' : 'HIT');
-        headers.set('date', date.toGMTString());
+        headers.set('date', date.toUTCString());
         (0, log_1.logCacheApiStatus)(headers.get('cache'), request.url);
         const response = new Response(value.body, {
             headers,
@@ -48,5 +49,14 @@ class InMemoryCache {
         this.store.delete(request.url);
         (0, log_1.logCacheApiStatus)('DELETE', request.url);
     }
+    keys(request) {
+        const cacheKeys = [];
+        for (const url of this.store.keys()) {
+            if (!request || request.url === url) {
+                cacheKeys.push(new Request(url));
+            }
+        }
+        return Promise.resolve(cacheKeys);
+    }
 }
 exports.InMemoryCache = InMemoryCache;

package/dist/node/utilities/apiRoutes.js

@@ -13,7 +13,7 @@ function getApiRoutes(pages, topLevelPath = '*') {
     const routes = Object.keys(pages)
         .filter((key) => pages[key].api)
         .map((key) => {
-        const path = key
+        let path = key
             .replace('./routes', '')
             .replace(/\.server\.(t|j)sx?$/, '')
             /**
@@ -29,6 +29,8 @@ function getApiRoutes(pages, topLevelPath = '*') {
              * Convert /[handle].jsx and /[...handle].jsx to /:handle.jsx for react-router-dom
              */
             .replace(/\[(?:[.]{3})?(\w+?)\]/g, (_match, param) => `:${param}`);
+        if (path.endsWith('/') && path !== '/')
+            path = path.substring(0, path.length - 1);
         /**
          * Catch-all routes [...handle].jsx don't need an exact match
          * https://reactrouter.com/core/api/Route/exact-bool

package/dist/node/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "0.13.0";
+export declare const LIB_VERSION = "0.13.1";

package/dist/node/version.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LIB_VERSION = void 0;
-exports.LIB_VERSION = '0.13.0';
+exports.LIB_VERSION = '0.13.1';

package/package.json

@@ -7,7 +7,7 @@
   "engines": {
     "node": ">=14"
   },
-  "version": "0.13.0",
+  "version": "0.13.1",
   "description": "Modern custom Shopify storefronts",
   "license": "MIT",
   "main": "dist/esnext/index.js",