@shopify/hydrogen 0.11.0-experimental.0 → 0.11.0-experimental.1

package/dist/esnext/foundation/ssr-interop.js

@@ -0,0 +1,35 @@
+/**
+ * This file is used for compatibility between browser and server environments.
+ * The browser loads this file as is, without leaking server logic.
+ * In the server, this file is transformed by Vite to inject server logic.
+ * NOTE: Do not remove SSR-prefixed comments in this file.
+ */
+import { useContext } from 'react';
+//@SSR import {useServerRequest} from './ServerRequestProvider';
+// This is replaced by Vite to import.meta.env.SSR
+export const META_ENV_SSR = false;
+const reactContextType = Symbol.for('react.context');
+/**
+ * Isomorphic hook to access context data. It gives access to the current request
+ * when running on the server, and returns the provided client fallback in the browser.
+ * This can be used in server components (RSC) as a Context/Provider replacement. In client
+ * components, it uses the server getter in SSR and the client fallback in the browser.
+ * @param serverGetter - A function that gets the current server request and returns any
+ * desired request property. It only runs in the server (both in RSC and SSR).
+ * @param clientFallback - An optional raw value or a React.Context to be consumed that will be
+ * returned if the current environment is not the server. Note that, if this is a React.Context,
+ * there must be a React.Provider parent in the app tree.
+ * @returns A value retrieved from the current server request or a fallback value in the client.
+ * The returned type depends on what the server getter returns.
+ * @example
+ * ```js
+ * import {MyClientContext} from './my-client-react-context-provider';
+ * useEnvContext(req => req.ctx.myServerContext, MyClientContext)
+ * ```
+ */
+export function useEnvContext(serverGetter, clientFallback) {
+    //@SSR if (META_ENV_SSR) return serverGetter(useServerRequest());
+    return clientFallback && clientFallback.$$typeof === reactContextType
+        ? useContext(clientFallback)
+        : clientFallback;
+}

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

@@ -4,7 +4,7 @@ export interface HydrogenUseQueryOptions {
 }
 /**
  * The `useQuery` hook is a wrapper around Suspense calls and
- * global runtime's Cache if it exist.
+ * global runtime's Cache if it exists.
  * It supports Suspense calls on the server and on the client.
  */
 export declare function useQuery<T>(

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

@@ -4,7 +4,7 @@ import { runDelayedFunction } from '../../framework/runtime';
 import { useRequestCacheData } from '../ServerRequestProvider';
 /**
  * The `useQuery` hook is a wrapper around Suspense calls and
- * global runtime's Cache if it exist.
+ * global runtime's Cache if it exists.
  * It supports Suspense calls on the server and on the client.
  */
 export function useQuery(

package/dist/esnext/foundation/useServerState/use-server-state.d.ts

@@ -1,3 +1,4 @@
+import { ServerStateContextValue } from '../ServerStateProvider';
 /**
  * The `useServerState` hook allows you to [manage server state](/custom-storefronts/hydrogen/framework/server-state) when using Hydrogen as a React Server Component framework.
  *
@@ -12,4 +13,4 @@
  * | `pending`        | Whether a [transition is pending](https://github.com/reactwg/react-18/discussions/41). |
  *
  */
-export declare function useServerState(): import("../ServerStateProvider").ServerStateContextValue;
+export declare function useServerState(): ServerStateContextValue;

package/dist/esnext/foundation/useServerState/use-server-state.js

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { ServerStateContext } from '../ServerStateProvider';
+import { ServerStateContext, } from '../ServerStateProvider';
 /**
  * The `useServerState` hook allows you to [manage server state](/custom-storefronts/hydrogen/framework/server-state) when using Hydrogen as a React Server Component framework.
  *
@@ -16,5 +16,5 @@ import { ServerStateContext } from '../ServerStateProvider';
  */
 export function useServerState() {
     var _a;
-    return (_a = useContext(ServerStateContext)) !== null && _a !== void 0 ? _a : {};
+    return ((_a = useContext(ServerStateContext)) !== null && _a !== void 0 ? _a : {});
 }

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

@@ -1,14 +1,10 @@
-import { useContext } from 'react';
 import { ShopifyContext } from '../ShopifyProvider';
-import { useServerRequest } from '../ServerRequestProvider';
-import { META_ENV_SSR } from '../../utilities/meta-env-ssr';
+import { useEnvContext } from '../ssr-interop';
 /**
  * The `useShop` hook provides access to values within `shopify.config.js`. It must be a descendent of a `ShopifyProvider` component.
  */
 export function useShop() {
-    const config = META_ENV_SSR
-        ? useServerRequest().ctx.shopifyConfig
-        : useContext(ShopifyContext);
+    const config = useEnvContext((req) => req.ctx.shopifyConfig, ShopifyContext);
     if (!config) {
         throw new Error('No Shopify Context found');
     }

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

@@ -1,4 +1,4 @@
 /**
- * Use to get current url in server or client component.
+ * The `useUrl` hook retrieves the current URL in a server or client component.
  */
 export declare function useUrl(): URL;

package/dist/esnext/foundation/useUrl/useUrl.js

@@ -1,13 +1,13 @@
-import { META_ENV_SSR } from '../../utilities/meta-env-ssr';
-import { useServerRequest } from '../ServerRequestProvider';
+import { RSC_PATHNAME } from '../../constants';
+import { useEnvContext, META_ENV_SSR } from '../ssr-interop';
 /**
- * Use to get current url in server or client component.
+ * The `useUrl` hook retrieves the current URL in a server or client component.
  */
 export function useUrl() {
     var _a, _b;
     if (META_ENV_SSR) {
-        const serverUrl = new URL(useServerRequest().url);
-        if (serverUrl.pathname === '/react') {
+        const serverUrl = new URL(useEnvContext((req) => req.url));
+        if (serverUrl.pathname === RSC_PATHNAME) {
             const state = JSON.parse(serverUrl.searchParams.get('state') || '{}');
             const parsedUrl = `${serverUrl.origin}/${(_a = state.pathname) !== null && _a !== void 0 ? _a : ''}${(_b = state.search) !== null && _b !== void 0 ? _b : ''}`;
             return new URL(parsedUrl);

package/dist/esnext/framework/Hydration/Html.js

@@ -1,10 +1,22 @@
 /// <reference types="vite/client" />
 import React from 'react';
 export function Html({ children, template, htmlAttrs, bodyAttrs }) {
+    var _a;
     const head = template.match(/<head>(.+?)<\/head>/s)[1] || '';
+    let devEntryPoint = '';
+    // @ts-ignore
+    if (import.meta.env.DEV) {
+        devEntryPoint =
+            ((_a = template
+                .substring(template.lastIndexOf('<script type="module"'))
+                .match(/src="(.*?)">/i)) === null || _a === void 0 ? void 0 : _a[1]) || '';
+        if (!devEntryPoint) {
+            throw new Error('Could not find entry-client module in index.html');
+        }
+    }
     return (React.createElement("html", { ...htmlAttrs },
         React.createElement("head", { dangerouslySetInnerHTML: { __html: head } }),
         React.createElement("body", { ...bodyAttrs },
             React.createElement("div", { id: "root" }, children),
-            import.meta.env.DEV && (React.createElement("script", { type: "module", src: "/src/entry-client.jsx" })))));
+            import.meta.env.DEV && (React.createElement("script", { type: "module", src: devEntryPoint })))));
 }

package/dist/esnext/framework/Hydration/rsc.d.ts

@@ -8,4 +8,4 @@ declare global {
  * Note that we'd want to add some other constraints and controls around caching here.
  */
 export declare function useServerResponse(state: any): any;
-export declare function useRefresh(): (key: string, seededResponse: any) => void;
+export declare function useRefresh(): void;

package/dist/esnext/framework/Hydration/rsc.js

@@ -5,6 +5,7 @@ import { unstable_getCacheForType, unstable_useCacheRefresh } from 'react';
 import { createFromFetch, createFromReadableStream,
 // @ts-ignore
  } from '@shopify/hydrogen/vendor/react-server-dom-vite';
+import { RSC_PATHNAME } from '../../constants';
 let rscReader;
 if (__flight && __flight.length > 0) {
     const contentLoaded = new Promise((resolve) => document.addEventListener('DOMContentLoaded', resolve));
@@ -59,14 +60,13 @@ export function useServerResponse(state) {
             window.BOOMR.plugins.Hydrogen.trackSubPageLoadPerformance();
         }
         // Request a new flight response.
-        response = createFromFetch(fetch('/react?state=' + encodeURIComponent(key)));
+        response = createFromFetch(fetch(`${RSC_PATHNAME}?state=` + encodeURIComponent(key)));
     }
+    cache.clear();
     cache.set(key, response);
     return response;
 }
 export function useRefresh() {
     const refreshCache = unstable_useCacheRefresh();
-    return function refresh(key, seededResponse) {
-        refreshCache(createResponseCache, new Map([[key, seededResponse]]));
-    };
+    refreshCache();
 }

package/dist/esnext/framework/plugin.js

@@ -2,6 +2,7 @@ import hydrogenConfig from './plugins/vite-plugin-hydrogen-config';
 import hydrogenMiddleware from './plugins/vite-plugin-hydrogen-middleware';
 // @ts-ignore
 import rsc from '@shopify/hydrogen/vendor/react-server-dom-vite/plugin';
+import ssrInterop from './plugins/vite-plugin-ssr-interop';
 import purgeQueryCache from './plugins/vite-plugin-purge-query-cache';
 import inspect from 'vite-plugin-inspect';
 import react from '@vitejs/plugin-react';
@@ -12,6 +13,7 @@ export default (shopifyConfig, pluginOptions = {}) => {
         hydrogenConfig(),
         hydrogenMiddleware(shopifyConfig, pluginOptions),
         react(),
+        ssrInterop(),
         rsc({
             clientComponentPaths: [
                 path.join(path.dirname(require.resolve('@shopify/hydrogen/package.json'))),

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

@@ -53,7 +53,6 @@ export default () => {
                      */
                     'react',
                     'react-dom',
-                    'react-router-dom',
                     'react-server-dom-vite/client-proxy',
                 ],
             },
@@ -62,6 +61,7 @@ export default () => {
                 __WORKER__: !!process.env.WORKER,
             },
             envPrefix: ['VITE_', 'PUBLIC_'],
+            base: process.env.HYDROGEN_ASSET_BASE_URL,
         }),
         // TODO: Remove when react-dom/fizz is fixed
         generateBundle: process.env.WORKER

package/dist/esnext/framework/plugins/vite-plugin-hydrogen-middleware.js

@@ -31,7 +31,7 @@ export default (shopifyConfig, pluginOptions) => {
                 dev: true,
                 shopifyConfig,
                 indexTemplate: getIndexTemplate,
-                getServerEntrypoint: async () => await server.ssrLoadModule('/src/entry-server'),
+                getServerEntrypoint: async () => await server.ssrLoadModule(process.env.HYDROGEN_SERVER_ENTRY || '/src/entry-server'),
                 devServer: server,
                 cache: (pluginOptions === null || pluginOptions === void 0 ? void 0 : pluginOptions.devCache)
                     ? new InMemoryCache()

package/dist/esnext/framework/plugins/vite-plugin-ssr-interop.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-ssr-interop.js

@@ -0,0 +1,13 @@
+export default () => {
+    return {
+        name: 'vite-plugin-ssr-interop',
+        enforce: 'pre',
+        transform(code, id, options = {}) {
+            if (options.ssr && id.includes('foundation/ssr-interop')) {
+                return code
+                    .replace(/(\s*META_ENV_SSR\s*=\s*)false/, '$1import.meta.env.SSR')
+                    .replace(/\/\/@SSR\s*/g, '');
+            }
+        },
+    };
+};

package/dist/esnext/handle-event.js

@@ -1,6 +1,7 @@
 import { setContext, setCache } from './framework/runtime';
 import { setConfig } from './framework/config';
 import { renderApiRoute } from './utilities/apiRoutes';
+import { RSC_PATHNAME } from './constants';
 export default async function handleEvent(event, { request, entrypoint, indexTemplate, assetHandler, streamableResponse, dev, cache, context, nonce, }) {
     const url = new URL(request.url);
     /**
@@ -9,7 +10,7 @@ export default async function handleEvent(event, { request, entrypoint, indexTem
     setCache(cache);
     setContext(context);
     setConfig({ dev });
-    const isReactHydrationRequest = url.pathname === '/react';
+    const isReactHydrationRequest = url.pathname === RSC_PATHNAME;
     const template = typeof indexTemplate === 'function'
         ? await indexTemplate(url.toString())
         : indexTemplate;

package/dist/esnext/hooks/useNavigate/index.d.ts

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

package/dist/esnext/hooks/useNavigate/index.js

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

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

@@ -0,0 +1,10 @@
+declare type NavigationOptions = {
+    /** Whether to update the state object or URL of the current history entry. Default to false */
+    replace?: boolean;
+    /** Whether to reload the whole document on navigation */
+    reloadDocument?: boolean;
+    /** The custom client state with the navigation */
+    clientState?: any;
+};
+export declare function useNavigate(): (path: string, options?: NavigationOptions) => void;
+export {};

package/dist/esnext/hooks/useNavigate/useNavigate.js

@@ -0,0 +1,11 @@
+import { useRouter } from '../../foundation/Router/Router.client';
+export function useNavigate() {
+    const router = useRouter();
+    return (path, options = { replace: false, reloadDocument: false }) => {
+        // @todo wait for RSC and then change focus for a11y?
+        if (options === null || options === void 0 ? void 0 : options.replace)
+            router.history.replace(path, (options === null || options === void 0 ? void 0 : options.clientState) || {});
+        else
+            router.history.push(path, (options === null || options === void 0 ? void 0 : options.clientState) || {});
+    };
+}

package/dist/esnext/utilities/error.js

@@ -1,15 +1,6 @@
 export function getErrorMarkup(error) {
-    return `<script>
-    import('/@vite/client')
-        .then(() => {
-            const err = new Error(\`${error.message}\`);
-            err.stack = \`${error.stack}\`;
-            const ErrorOverlay = customElements.get('vite-error-overlay')
-            // don't open outside vite environment
-            if (!ErrorOverlay) {return}
-            console.log(err)
-            const overlay = new ErrorOverlay(err)
-            document.body.appendChild(overlay)
-        })
+    return `<script type="module">
+    import {ErrorOverlay} from '/@vite/client';
+    document.body.appendChild(new ErrorOverlay(${JSON.stringify(error, Object.getOwnPropertyNames(error)).replace(/</g, '\\u003c')}));
 </script>`;
 }

package/dist/esnext/utilities/fetch.js

@@ -52,6 +52,14 @@ export function graphqlRequestBody(query, variables) {
     });
 }
 export function decodeShopifyId(id) {
+    // Start fix: for SFAPI 2022-01. Remove when upgrading to 2022-04
+    if (!id.startsWith('gid://')) {
+        id =
+            typeof btoa !== 'undefined'
+                ? btoa(id)
+                : Buffer.from(id, 'base64').toString('ascii');
+    }
+    // End fix
     if (!id.startsWith('gid://')) {
         throw new Error('invalid Shopify ID');
     }

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

@@ -1,7 +1,8 @@
 import { ServerComponentRequest } from '../../framework/Hydration/ServerComponentRequest.server';
-/** A utility for logging debugging, warning, and error information about the application.
- * Use by importing `log` `@shopify/hydrogen` or by using a `log` prop passed to each page
- * component. Using the latter is ideal, because it will ty your log to the current request in progress.
+/** The `log` utility is a function that's used for logging debugging, warning, and error information about the application.
+ * Use this utility by importing `log` from `@shopify/hydrogen`, or by using a `log` prop passed to each page
+ * component. We recommend using the `log` prop passed to each page because it will associated your log to the
+ * current request in progress.
  */
 export interface Logger {
     trace: (...args: Array<any>) => void;

package/dist/esnext/utilities/video_parameters.js

@@ -13,6 +13,10 @@ export function addParametersToEmbeddedVideoUrl(url, parameters) {
     return `${url}?${params}`;
 }
 export function useEmbeddedVideoUrl(url, parameters) {
+    // Ensure a youtube shortened url is changed to an iFrame compatible embed link.
+    // TODO: Fix is needed for SFAPI version 2022-01. Starting 2022-04 embeddedUrl has been marked as deprecated and replaced with
+    // embedUrl. When the pinned SFAPI version is 2022-04 line can be removed in favor of changes on PR #455
+    url = url.replace(/youtu\.be/, 'www.youtube.com/embed');
     return useMemo(() => {
         if (!parameters) {
             return url;

package/dist/esnext/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "0.11.0-experimental.0";
+export declare const LIB_VERSION = "0.11.0-experimental.1";

package/dist/esnext/version.js

@@ -1 +1 @@
-export const LIB_VERSION = '0.11.0-experimental.0';
+export const LIB_VERSION = '0.11.0-experimental.1';

package/dist/node/constants.d.ts

@@ -0,0 +1 @@
+export declare const RSC_PATHNAME = "/__rsc";

package/dist/node/constants.js

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

package/dist/node/foundation/Helmet/Helmet.client.js

@@ -6,14 +6,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Helmet = void 0;
 const react_1 = __importDefault(require("react"));
 const react_helmet_async_1 = require("react-helmet-async");
-const ServerRequestProvider_1 = require("../ServerRequestProvider");
-const meta_env_ssr_1 = require("../../utilities/meta-env-ssr");
+const ssr_interop_1 = require("../ssr-interop");
 const clientHelmetData = new react_helmet_async_1.HelmetData({});
 function Helmet({ children, ...props }) {
-    // @ts-ignore
-    const helmetData = meta_env_ssr_1.META_ENV_SSR
-        ? (0, ServerRequestProvider_1.useServerRequest)().ctx.helmet
-        : clientHelmetData;
+    const helmetData = (0, ssr_interop_1.useEnvContext)((req) => req.ctx.helmet, clientHelmetData);
     return (
     // @ts-ignore
     react_1.default.createElement(react_helmet_async_1.Helmet, { ...props, helmetData: helmetData }, children));

package/dist/node/foundation/ssr-interop.d.ts

@@ -0,0 +1,29 @@
+/**
+ * This file is used for compatibility between browser and server environments.
+ * The browser loads this file as is, without leaking server logic.
+ * In the server, this file is transformed by Vite to inject server logic.
+ * NOTE: Do not remove SSR-prefixed comments in this file.
+ */
+import type { ServerComponentRequest } from '../framework/Hydration/ServerComponentRequest.server';
+export declare const META_ENV_SSR = false;
+declare type ServerGetter<T> = (request: ServerComponentRequest) => T;
+/**
+ * Isomorphic hook to access context data. It gives access to the current request
+ * when running on the server, and returns the provided client fallback in the browser.
+ * This can be used in server components (RSC) as a Context/Provider replacement. In client
+ * components, it uses the server getter in SSR and the client fallback in the browser.
+ * @param serverGetter - A function that gets the current server request and returns any
+ * desired request property. It only runs in the server (both in RSC and SSR).
+ * @param clientFallback - An optional raw value or a React.Context to be consumed that will be
+ * returned if the current environment is not the server. Note that, if this is a React.Context,
+ * there must be a React.Provider parent in the app tree.
+ * @returns A value retrieved from the current server request or a fallback value in the client.
+ * The returned type depends on what the server getter returns.
+ * @example
+ * ```js
+ * import {MyClientContext} from './my-client-react-context-provider';
+ * useEnvContext(req => req.ctx.myServerContext, MyClientContext)
+ * ```
+ */
+export declare function useEnvContext<T>(serverGetter: ServerGetter<T>, clientFallback?: any): T;
+export {};

package/dist/node/foundation/ssr-interop.js

@@ -0,0 +1,39 @@
+"use strict";
+/**
+ * This file is used for compatibility between browser and server environments.
+ * The browser loads this file as is, without leaking server logic.
+ * In the server, this file is transformed by Vite to inject server logic.
+ * NOTE: Do not remove SSR-prefixed comments in this file.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useEnvContext = exports.META_ENV_SSR = void 0;
+const react_1 = require("react");
+//@SSR import {useServerRequest} from './ServerRequestProvider';
+// This is replaced by Vite to import.meta.env.SSR
+exports.META_ENV_SSR = false;
+const reactContextType = Symbol.for('react.context');
+/**
+ * Isomorphic hook to access context data. It gives access to the current request
+ * when running on the server, and returns the provided client fallback in the browser.
+ * This can be used in server components (RSC) as a Context/Provider replacement. In client
+ * components, it uses the server getter in SSR and the client fallback in the browser.
+ * @param serverGetter - A function that gets the current server request and returns any
+ * desired request property. It only runs in the server (both in RSC and SSR).
+ * @param clientFallback - An optional raw value or a React.Context to be consumed that will be
+ * returned if the current environment is not the server. Note that, if this is a React.Context,
+ * there must be a React.Provider parent in the app tree.
+ * @returns A value retrieved from the current server request or a fallback value in the client.
+ * The returned type depends on what the server getter returns.
+ * @example
+ * ```js
+ * import {MyClientContext} from './my-client-react-context-provider';
+ * useEnvContext(req => req.ctx.myServerContext, MyClientContext)
+ * ```
+ */
+function useEnvContext(serverGetter, clientFallback) {
+    //@SSR if (META_ENV_SSR) return serverGetter(useServerRequest());
+    return clientFallback && clientFallback.$$typeof === reactContextType
+        ? (0, react_1.useContext)(clientFallback)
+        : clientFallback;
+}
+exports.useEnvContext = useEnvContext;

package/dist/node/framework/Hydration/Html.js

@@ -7,11 +7,23 @@ exports.Html = void 0;
 /// <reference types="vite/client" />
 const react_1 = __importDefault(require("react"));
 function Html({ children, template, htmlAttrs, bodyAttrs }) {
+    var _a;
     const head = template.match(/<head>(.+?)<\/head>/s)[1] || '';
+    let devEntryPoint = '';
+    // @ts-ignore
+    if (import.meta.env.DEV) {
+        devEntryPoint =
+            ((_a = template
+                .substring(template.lastIndexOf('<script type="module"'))
+                .match(/src="(.*?)">/i)) === null || _a === void 0 ? void 0 : _a[1]) || '';
+        if (!devEntryPoint) {
+            throw new Error('Could not find entry-client module in index.html');
+        }
+    }
     return (react_1.default.createElement("html", { ...htmlAttrs },
         react_1.default.createElement("head", { dangerouslySetInnerHTML: { __html: head } }),
         react_1.default.createElement("body", { ...bodyAttrs },
             react_1.default.createElement("div", { id: "root" }, children),
-            import.meta.env.DEV && (react_1.default.createElement("script", { type: "module", src: "/src/entry-client.jsx" })))));
+            import.meta.env.DEV && (react_1.default.createElement("script", { type: "module", src: devEntryPoint })))));
 }
 exports.Html = Html;

package/dist/node/framework/Hydration/rsc.d.ts

@@ -8,4 +8,4 @@ declare global {
  * Note that we'd want to add some other constraints and controls around caching here.
  */
 export declare function useServerResponse(state: any): any;
-export declare function useRefresh(): (key: string, seededResponse: any) => void;
+export declare function useRefresh(): void;

package/dist/node/framework/Hydration/rsc.js

@@ -6,6 +6,7 @@ exports.useRefresh = exports.useServerResponse = void 0;
 // @ts-ignore
 const react_1 = require("react");
 const react_server_dom_vite_1 = require("@shopify/hydrogen/vendor/react-server-dom-vite");
+const constants_1 = require("../../constants");
 let rscReader;
 if (__flight && __flight.length > 0) {
     const contentLoaded = new Promise((resolve) => document.addEventListener('DOMContentLoaded', resolve));
@@ -60,16 +61,15 @@ function useServerResponse(state) {
             window.BOOMR.plugins.Hydrogen.trackSubPageLoadPerformance();
         }
         // Request a new flight response.
-        response = (0, react_server_dom_vite_1.createFromFetch)(fetch('/react?state=' + encodeURIComponent(key)));
+        response = (0, react_server_dom_vite_1.createFromFetch)(fetch(`${constants_1.RSC_PATHNAME}?state=` + encodeURIComponent(key)));
     }
+    cache.clear();
     cache.set(key, response);
     return response;
 }
 exports.useServerResponse = useServerResponse;
 function useRefresh() {
     const refreshCache = (0, react_1.unstable_useCacheRefresh)();
-    return function refresh(key, seededResponse) {
-        refreshCache(createResponseCache, new Map([[key, seededResponse]]));
-    };
+    refreshCache();
 }
 exports.useRefresh = useRefresh;

package/dist/node/framework/plugin.js

@@ -7,6 +7,7 @@ const vite_plugin_hydrogen_config_1 = __importDefault(require("./plugins/vite-pl
 const vite_plugin_hydrogen_middleware_1 = __importDefault(require("./plugins/vite-plugin-hydrogen-middleware"));
 // @ts-ignore
 const plugin_1 = __importDefault(require("@shopify/hydrogen/vendor/react-server-dom-vite/plugin"));
+const vite_plugin_ssr_interop_1 = __importDefault(require("./plugins/vite-plugin-ssr-interop"));
 const vite_plugin_purge_query_cache_1 = __importDefault(require("./plugins/vite-plugin-purge-query-cache"));
 const vite_plugin_inspect_1 = __importDefault(require("vite-plugin-inspect"));
 const plugin_react_1 = __importDefault(require("@vitejs/plugin-react"));
@@ -17,6 +18,7 @@ exports.default = (shopifyConfig, pluginOptions = {}) => {
         (0, vite_plugin_hydrogen_config_1.default)(),
         (0, vite_plugin_hydrogen_middleware_1.default)(shopifyConfig, pluginOptions),
         (0, plugin_react_1.default)(),
+        (0, vite_plugin_ssr_interop_1.default)(),
         (0, plugin_1.default)({
             clientComponentPaths: [
                 path_1.default.join(path_1.default.dirname(require.resolve('@shopify/hydrogen/package.json'))),

package/dist/node/framework/plugins/vite-plugin-hydrogen-config.js

@@ -55,7 +55,6 @@ exports.default = () => {
                      */
                     'react',
                     'react-dom',
-                    'react-router-dom',
                     'react-server-dom-vite/client-proxy',
                 ],
             },
@@ -64,6 +63,7 @@ exports.default = () => {
                 __WORKER__: !!process.env.WORKER,
             },
             envPrefix: ['VITE_', 'PUBLIC_'],
+            base: process.env.HYDROGEN_ASSET_BASE_URL,
         }),
         // TODO: Remove when react-dom/fizz is fixed
         generateBundle: process.env.WORKER

package/dist/node/framework/plugins/vite-plugin-hydrogen-middleware.js

@@ -36,7 +36,7 @@ exports.default = (shopifyConfig, pluginOptions) => {
                 dev: true,
                 shopifyConfig,
                 indexTemplate: getIndexTemplate,
-                getServerEntrypoint: async () => await server.ssrLoadModule('/src/entry-server'),
+                getServerEntrypoint: async () => await server.ssrLoadModule(process.env.HYDROGEN_SERVER_ENTRY || '/src/entry-server'),
                 devServer: server,
                 cache: (pluginOptions === null || pluginOptions === void 0 ? void 0 : pluginOptions.devCache)
                     ? new in_memory_1.InMemoryCache()

package/dist/node/framework/plugins/vite-plugin-ssr-interop.d.ts

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

package/dist/node/framework/plugins/vite-plugin-ssr-interop.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = () => {
+    return {
+        name: 'vite-plugin-ssr-interop',
+        enforce: 'pre',
+        transform(code, id, options = {}) {
+            if (options.ssr && id.includes('foundation/ssr-interop')) {
+                return code
+                    .replace(/(\s*META_ENV_SSR\s*=\s*)false/, '$1import.meta.env.SSR')
+                    .replace(/\/\/@SSR\s*/g, '');
+            }
+        },
+    };
+};

package/dist/node/handle-event.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const runtime_1 = require("./framework/runtime");
 const config_1 = require("./framework/config");
 const apiRoutes_1 = require("./utilities/apiRoutes");
+const constants_1 = require("./constants");
 async function handleEvent(event, { request, entrypoint, indexTemplate, assetHandler, streamableResponse, dev, cache, context, nonce, }) {
     const url = new URL(request.url);
     /**
@@ -11,7 +12,7 @@ async function handleEvent(event, { request, entrypoint, indexTemplate, assetHan
     (0, runtime_1.setCache)(cache);
     (0, runtime_1.setContext)(context);
     (0, config_1.setConfig)({ dev });
-    const isReactHydrationRequest = url.pathname === '/react';
+    const isReactHydrationRequest = url.pathname === constants_1.RSC_PATHNAME;
     const template = typeof indexTemplate === 'function'
         ? await indexTemplate(url.toString())
         : indexTemplate;

package/dist/node/utilities/log/log.d.ts

@@ -1,7 +1,8 @@
 import { ServerComponentRequest } from '../../framework/Hydration/ServerComponentRequest.server';
-/** A utility for logging debugging, warning, and error information about the application.
- * Use by importing `log` `@shopify/hydrogen` or by using a `log` prop passed to each page
- * component. Using the latter is ideal, because it will ty your log to the current request in progress.
+/** The `log` utility is a function that's used for logging debugging, warning, and error information about the application.
+ * Use this utility by importing `log` from `@shopify/hydrogen`, or by using a `log` prop passed to each page
+ * component. We recommend using the `log` prop passed to each page because it will associated your log to the
+ * current request in progress.
  */
 export interface Logger {
     trace: (...args: Array<any>) => void;