@shopify/hydrogen 0.26.0 → 0.26.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 0.26.1
+
+### Patch Changes
+
+- [#1663](https://github.com/Shopify/hydrogen/pull/1663) [`66200d6b`](https://github.com/Shopify/hydrogen/commit/66200d6b7d8e54b0746a048e950f067d4b8e0609) Thanks [@jplhomer](https://github.com/jplhomer)! - Default to 'US' CountryCode if locale cannot be parsed correctly
+
+* [#1690](https://github.com/Shopify/hydrogen/pull/1690) [`afde8989`](https://github.com/Shopify/hydrogen/commit/afde8989ae03e842de65ac698ab86033e56e7ee2) Thanks [@frehner](https://github.com/frehner)! - Add scale to the filename part of the url in `shopifyImageLoader()`
+
+- [#1676](https://github.com/Shopify/hydrogen/pull/1676) [`0149cbf6`](https://github.com/Shopify/hydrogen/commit/0149cbf60b331461ae0c97bb3e18d3f27e143d0a) Thanks [@frandiox](https://github.com/frandiox)! - Avoid writing to Node response if it has been closed early.
+
+* [#1674](https://github.com/Shopify/hydrogen/pull/1674) [`8068d3ce`](https://github.com/Shopify/hydrogen/commit/8068d3ce14f44ea83bde8f3729ae2a8cbbf8a52e) Thanks [@frandiox](https://github.com/frandiox)! - Throw error when `<Link>` component is used outside of `<Router>` component.
+
+- [#1680](https://github.com/Shopify/hydrogen/pull/1680) [`acf5223f`](https://github.com/Shopify/hydrogen/commit/acf5223fe34cfdd483ae9b0e714445c8cbf11a9d) Thanks [@blittle](https://github.com/blittle)! - Fix basepath to not apply to external URLs in the `<Link` component. Also default the attribute `rel="noreferrer noopener` for external URLs.
+
+* [#1670](https://github.com/Shopify/hydrogen/pull/1670) [`8b26f7a6`](https://github.com/Shopify/hydrogen/commit/8b26f7a6f034eaa36bb11974ff3dc5d992e2e97b) Thanks [@frandiox](https://github.com/frandiox)! - Optimize client boundaries only during build by default.
+
 ## 0.26.0
 
 ### Minor Changes

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { useRouter } from '../../foundation/Router/BrowserRouter.client';
+import { useLocation } from '../../foundation/Router/BrowserRouter.client';
 import { createPath } from 'history';
 import { buildPath, useNavigate } from '../../foundation/useNavigate/useNavigate';
 import { RSC_PATHNAME } from '../../constants';
@@ -12,7 +12,7 @@ import { useBasePath } from '../../foundation/useRouteParams/RouteParamsProvider
  */
 export const Link = React.forwardRef(function Link(props, ref) {
     const navigate = useNavigate();
-    const { location } = useRouter();
+    const location = useLocation();
     const [_, startTransition] = React.useTransition();
     const routeBasePath = useBasePath();
     /**
@@ -98,12 +98,15 @@ export const Link = React.forwardRef(function Link(props, ref) {
                 'reloadDocument',
                 'prefetch',
                 'scroll',
-            ]), ref: ref, onClick: internalClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur, onTouchStart: onTouchStart, href: to }, props.children),
+            ]), ref: ref, rel: props.rel ??
+                (to.startsWith('http') || to.startsWith('//')
+                    ? 'noreferrer noopener'
+                    : undefined), onClick: internalClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur, onTouchStart: onTouchStart, href: to }, props.children),
         shouldPrefetch && React.createElement(Prefetch, { pathname: to })));
 });
 function Prefetch({ pathname }) {
     const { getProposedLocationServerProps } = useInternalServerProps();
-    const { location } = useRouter();
+    const location = useLocation();
     const newPath = createPath({ pathname });
     if (pathname.startsWith('http') || newPath === createPath(location)) {
         return null;

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

@@ -2,6 +2,7 @@ import React from 'react';
 import LocalizationClientProvider from './LocalizationClientProvider.client';
 import { useShop } from '../../foundation/useShop';
 import { useServerRequest } from '../../foundation/ServerRequestProvider';
+import { CountryCode } from '../../storefront-api-types';
 /**
  * The `LocalizationProvider` component automatically queries the Storefront API's
  * [`localization`](https://shopify.dev/api/storefront/reference/common-objects/queryroot) field
@@ -11,7 +12,7 @@ import { useServerRequest } from '../../foundation/ServerRequestProvider';
  */
 export function LocalizationProvider(props) {
     const { languageCode: defaultLanguageCode, locale } = useShop();
-    const defaultCountryCode = locale.split(/[-_]/)[1] || '';
+    const defaultCountryCode = locale.split(/[-_]/)[1] || CountryCode.Us;
     const languageCode = (props.languageCode ?? defaultLanguageCode).toUpperCase();
     const countryCode = (props.countryCode ?? defaultCountryCode).toUpperCase();
     const request = useServerRequest();

package/dist/esnext/entry-server.js

@@ -337,11 +337,13 @@ async function runSSR({ rsc, state, request, response, nodeResponse, template, n
                 startWritingToNodeResponse(nodeResponse, dev ? didError() : undefined);
                 setTimeout(() => {
                     log.trace('node pipe response');
-                    pipe(nodeResponse);
+                    if (!nodeResponse.writableEnded)
+                        pipe(nodeResponse);
                 }, 0);
                 bufferReadableStream(rscReadable.getReader(), (chunk) => {
                     log.trace('rsc chunk');
-                    return nodeResponse.write(chunk);
+                    if (!nodeResponse.writableEnded)
+                        nodeResponse.write(chunk);
                 });
             },
             async onAllReady() {
@@ -370,8 +372,10 @@ async function runSSR({ rsc, state, request, response, nodeResponse, template, n
                         html = assembleHtml({ ssrHtml, rscPayload, request, template });
                         postRequestTasks('ssr', nodeResponse.statusCode, request, response);
                     }
-                    nodeResponse.write(html);
-                    nodeResponse.end();
+                    if (!nodeResponse.writableEnded) {
+                        nodeResponse.write(html);
+                        nodeResponse.end();
+                    }
                 });
                 pipe(bufferedResponse);
             },
@@ -385,8 +389,15 @@ async function runSSR({ rsc, state, request, response, nodeResponse, template, n
                 }
             },
             onError(error) {
+                if (error.message?.includes('stream closed early')) {
+                    // This seems to happen when Fizz is still streaming
+                    // but nodeResponse has been closed by the browser.
+                    // This is common in tests and during development
+                    // due to frequent page refresh.
+                    return;
+                }
                 ssrDidError = error;
-                if (dev && nodeResponse.headersSent) {
+                if (dev && nodeResponse.headersSent && !nodeResponse.writableEnded) {
                     // Calling write would flush headers automatically.
                     // Delay this error until headers are properly sent.
                     nodeResponse.write(getErrorMarkup(error));
@@ -420,6 +431,8 @@ function runRSC({ App, state, log, request, response }) {
 }
 export default renderHydrogen;
 function startWritingToNodeResponse(nodeResponse, error) {
+    if (nodeResponse.writableEnded)
+        return;
     if (!nodeResponse.headersSent) {
         nodeResponse.setHeader(CONTENT_TYPE, HTML_CONTENT_TYPE);
         nodeResponse.write(DOCTYPE);
@@ -483,7 +496,7 @@ function postRequestTasks(type, status, request, response) {
 function handleFetchResponseInNode(fetchResponsePromise, nodeResponse) {
     if (nodeResponse) {
         fetchResponsePromise.then((response) => {
-            if (!response)
+            if (!response || nodeResponse.writableEnded)
                 return;
             setNodeHeaders(response.headers, nodeResponse);
             nodeResponse.statusCode = response.status;

package/dist/esnext/foundation/Router/BrowserRouter.client.d.ts

@@ -4,7 +4,7 @@ declare type RouterContextValue = {
     history: BrowserHistory;
     location: Location;
 };
-export declare const RouterContext: React.Context<{} | RouterContextValue>;
+export declare const RouterContext: React.Context<RouterContextValue | undefined>;
 export declare const BrowserRouter: FC<{
     history?: BrowserHistory;
     children: ReactNode;

package/dist/esnext/foundation/Router/BrowserRouter.client.js

@@ -2,7 +2,7 @@ import { createBrowserHistory } from 'history';
 import React, { createContext, useContext, useMemo, useState, useEffect, useLayoutEffect, useCallback, } from 'react';
 import { META_ENV_SSR } from '../ssr-interop';
 import { useInternalServerProps } from '../useServerProps/use-server-props';
-export const RouterContext = createContext({});
+export const RouterContext = createContext(undefined);
 let isFirstLoad = true;
 const positions = {};
 export const BrowserRouter = ({ history: pHistory, children }) => {
@@ -51,11 +51,13 @@ export const BrowserRouter = ({ history: pHistory, children }) => {
         } }, children));
 };
 export function useRouter() {
+    if (META_ENV_SSR)
+        return { location: {}, history: {} };
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const router = useContext(RouterContext);
-    if (!router && META_ENV_SSR) {
-        throw new Error('useRouter must be used within a <Router> component');
-    }
-    return router;
+    if (router)
+        return router;
+    throw new Error('Router hooks and <Link> component must be used within a <Router> component');
 }
 export function useLocation() {
     return useRouter().location;

package/dist/esnext/foundation/useNavigate/useNavigate.js

@@ -22,12 +22,18 @@ export function useNavigate() {
     };
 }
 export function buildPath(basePath, path) {
+    if (path.startsWith('http') || path.startsWith('//'))
+        return path;
     let builtPath = path;
     if (basePath !== '/') {
+        const pathFirstChar = path.charAt(0);
+        const basePathLastChar = basePath.charAt(basePath.length - 1);
         builtPath =
-            path.charAt(0) === '/' && basePath.charAt(0) === '/'
+            pathFirstChar === '/' && basePathLastChar === '/'
                 ? basePath + path.substring(1)
-                : basePath + path;
+                : basePathLastChar !== '/' && pathFirstChar !== '/'
+                    ? basePath + '/' + path
+                    : basePath + path;
     }
     return builtPath;
 }

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

@@ -1,7 +1,7 @@
-import { useMemo } from 'react';
+import { useContext, useMemo } from 'react';
 import { RSC_PATHNAME } from '../../constants';
 import { parseJSON } from '../../utilities/parse';
-import { useLocation } from '../Router/BrowserRouter.client';
+import { RouterContext } from '../Router/BrowserRouter.client';
 import { useEnvContext, META_ENV_SSR } from '../ssr-interop';
 /**
  * The `useUrl` hook retrieves the current URL in a server or client component.
@@ -20,8 +20,10 @@ export function useUrl() {
     /**
      * We return a `URL` object instead of passing through `location` because
      * the URL object contains important info like hostname, etc.
+     * Note: do not call `useLocation` directly here to avoid throwing errors
+     * when `useUrl` is used outside of a Router component (e.g. in <Seo>).
      */
-    const location = useLocation(); // eslint-disable-line react-hooks/rules-of-hooks
+    const location = useContext(RouterContext); // eslint-disable-line react-hooks/rules-of-hooks
     // eslint-disable-next-line react-hooks/rules-of-hooks
     return useMemo(() => new URL(window.location.href), [location]); // eslint-disable-line react-hooks/exhaustive-deps
 }

package/dist/esnext/framework/load-config.d.ts

@@ -2,5 +2,4 @@ export declare function loadConfig(options?: {
     root: string;
 }): Promise<{
     configuration: any;
-    configurationPath: any;
 }>;

package/dist/esnext/framework/load-config.js

@@ -3,8 +3,5 @@ import { VIRTUAL_PROXY_HYDROGEN_CONFIG_ID } from './plugins/vite-plugin-hydrogen
 import { viteception } from './viteception';
 export async function loadConfig(options = { root: process.cwd() }) {
     const { loaded } = await viteception([VIRTUAL_PROXY_HYDROGEN_CONFIG_ID], options);
-    return {
-        configuration: loaded[0].default,
-        configurationPath: loaded[0].configPath,
-    };
+    return { configuration: loaded[0].default };
 }

package/dist/esnext/framework/plugin.js

@@ -24,7 +24,7 @@ const hydrogenPlugin = (pluginOptions = {}) => {
         hydrationAutoImport(),
         ssrInterop(),
         cssModulesRsc(),
-        rsc(),
+        rsc(pluginOptions),
         platformEntry(),
         suppressWarnings(),
         pluginOptions.purgeQueryCacheOnBuild && purgeQueryCache(),

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

@@ -12,7 +12,7 @@ export default () => {
             format: 'es',
         };
     }
-    if (process.env.NODE_ENV !== 'development') {
+    if (process.env.NODE_ENV !== 'development' && !process.env.LOCAL_DEV) {
         /**
          * Ofuscate production asset name - To prevent ad blocker logics that blocks
          * certain files due to how it is named.
@@ -32,7 +32,7 @@ export default () => {
                 },
             },
             build: {
-                minify: config.build?.minify ?? 'esbuild',
+                minify: config.build?.minify ?? (process.env.LOCAL_DEV ? false : 'esbuild'),
                 sourcemap: true,
                 rollupOptions: config.build?.rollupOptions
                     ? Object.assign(rollupOptions, config.build.rollupOptions)

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

@@ -1 +1,2 @@
-export default function (): any;
+import { HydrogenVitePluginOptions } from '../types';
+export default function (options?: HydrogenVitePluginOptions): any;

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

@@ -2,7 +2,7 @@
 import reactServerDomVite from '@shopify/hydrogen/vendor/react-server-dom-vite/plugin.js';
 import { HYDROGEN_DEFAULT_SERVER_ENTRY } from './vite-plugin-hydrogen-middleware';
 import { VIRTUAL_PROXY_HYDROGEN_ROUTES_ID } from './vite-plugin-hydrogen-virtual-files';
-export default function () {
+export default function (options) {
     return reactServerDomVite({
         serverBuildEntries: [
             HYDROGEN_DEFAULT_SERVER_ENTRY,
@@ -18,5 +18,6 @@ export default function () {
                 // TODO: revisit this when RSC splits into two bundles
                 /\.test\.[tj]sx?$/.test(importer));
         },
+        ...options,
     });
 }

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

@@ -15,25 +15,20 @@ export const VIRTUAL_PROXY_HYDROGEN_ROUTES_ID = VIRTUAL_PREFIX + PROXY_PREFIX +
 export default (pluginOptions) => {
     let config;
     let server;
-    let resolvedConfigPath;
     return {
         name: 'hydrogen:virtual-files',
         configResolved(_config) {
             config = _config;
-            // @ts-ignore
-            config.plugins.push(addPathToConfigProxy());
         },
         configureServer(_server) {
             server = _server;
         },
         resolveId(source, importer) {
             if (source === VIRTUAL_HYDROGEN_CONFIG_ID) {
-                return findHydrogenConfigPath(config.root, pluginOptions.configPath).then((hcPath) => {
-                    resolvedConfigPath = hcPath;
-                    // This direct dependency on a real file
-                    // makes HMR work for the virtual module.
-                    return this.resolve(hcPath, importer, { skipSelf: true });
-                });
+                return findHydrogenConfigPath(config.root, pluginOptions.configPath).then((hcPath) => 
+                // This direct dependency on a real file
+                // makes HMR work for the virtual module.
+                this.resolve(hcPath, importer, { skipSelf: true }));
             }
             if ([
                 VIRTUAL_PROXY_HYDROGEN_CONFIG_ID,
@@ -86,18 +81,6 @@ export default (pluginOptions) => {
         const { loaded } = await viteception([VIRTUAL_PROXY_HYDROGEN_CONFIG_ID]);
         return loaded[0].default;
     }
-    function addPathToConfigProxy() {
-        return {
-            name: 'hydrogen:virtual-files-post',
-            enforce: 'post',
-            transform(code, id) {
-                if (id === '\0' + VIRTUAL_PROXY_HYDROGEN_CONFIG_ID) {
-                    // The CLI needs to import the Hydrogen config path
-                    return (code + ` export const configPath = '${resolvedConfigPath || ''}';`);
-                }
-            },
-        };
-    }
 };
 async function findHydrogenConfigPath(root, userProvidedPath) {
     let configPath = userProvidedPath;

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

@@ -2,4 +2,5 @@ export interface HydrogenVitePluginOptions {
     devCache?: boolean;
     purgeQueryCacheOnBuild?: boolean;
     configPath?: string;
+    optimizeBoundaries?: boolean | 'build';
 }

package/dist/esnext/utilities/image_size.js

@@ -11,6 +11,17 @@ const ALL_CDN_HOSTNAMES = [...PRODUCTION_CDN_HOSTNAMES, ...LOCAL_CDN_HOSTNAMES];
  * Adds image size parameters to an image URL hosted by Shopify's CDN
  */
 export function addImageSizeParametersToUrl({ src, width, height, crop, scale, }) {
+    if (scale) {
+        // Have to do this specifically for 'scale' because it doesn't currently work otherwise.
+        // I'm also intentionally leaving 'scale' as a searchParam because that way it'll "just work" in the future and we can just delete this whole section of code
+        // We assume here that the last `.` is the delimiter between the file name and the file type
+        const baseUrl = new URL(src);
+        const fileDelimiterIndex = baseUrl.pathname.lastIndexOf('.');
+        const fileName = baseUrl.pathname.slice(0, fileDelimiterIndex);
+        const fileType = baseUrl.pathname.slice(fileDelimiterIndex);
+        baseUrl.pathname = `${fileName}${`@${scale.toString()}x`}${fileType}`;
+        src = baseUrl.toString();
+    }
     const newUrl = new URL(src);
     width && newUrl.searchParams.append('width', width.toString());
     height && newUrl.searchParams.append('height', height.toString());

package/dist/esnext/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "0.26.0";
+export declare const LIB_VERSION = "0.26.1";

package/dist/esnext/version.js

@@ -1 +1 @@
-export const LIB_VERSION = '0.26.0';
+export const LIB_VERSION = '0.26.1';

package/dist/node/framework/load-config.d.ts

@@ -2,5 +2,4 @@ export declare function loadConfig(options?: {
     root: string;
 }): Promise<{
     configuration: any;
-    configurationPath: any;
 }>;

package/dist/node/framework/load-config.js

@@ -6,9 +6,6 @@ const vite_plugin_hydrogen_virtual_files_1 = require("./plugins/vite-plugin-hydr
 const viteception_1 = require("./viteception");
 async function loadConfig(options = { root: process.cwd() }) {
     const { loaded } = await (0, viteception_1.viteception)([vite_plugin_hydrogen_virtual_files_1.VIRTUAL_PROXY_HYDROGEN_CONFIG_ID], options);
-    return {
-        configuration: loaded[0].default,
-        configurationPath: loaded[0].configPath,
-    };
+    return { configuration: loaded[0].default };
 }
 exports.loadConfig = loadConfig;

package/dist/node/framework/plugin.js

@@ -28,7 +28,7 @@ const hydrogenPlugin = (pluginOptions = {}) => {
         (0, vite_plugin_hydration_auto_import_1.default)(),
         (0, vite_plugin_ssr_interop_1.default)(),
         (0, vite_plugin_css_modules_rsc_1.default)(),
-        (0, vite_plugin_hydrogen_rsc_1.default)(),
+        (0, vite_plugin_hydrogen_rsc_1.default)(pluginOptions),
         (0, vite_plugin_platform_entry_1.default)(),
         (0, vite_plugin_hydrogen_suppress_warnings_1.default)(),
         pluginOptions.purgeQueryCacheOnBuild && (0, vite_plugin_purge_query_cache_1.default)(),

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

@@ -14,7 +14,7 @@ exports.default = () => {
             format: 'es',
         };
     }
-    if (process.env.NODE_ENV !== 'development') {
+    if (process.env.NODE_ENV !== 'development' && !process.env.LOCAL_DEV) {
         /**
          * Ofuscate production asset name - To prevent ad blocker logics that blocks
          * certain files due to how it is named.
@@ -34,7 +34,7 @@ exports.default = () => {
                 },
             },
             build: {
-                minify: config.build?.minify ?? 'esbuild',
+                minify: config.build?.minify ?? (process.env.LOCAL_DEV ? false : 'esbuild'),
                 sourcemap: true,
                 rollupOptions: config.build?.rollupOptions
                     ? Object.assign(rollupOptions, config.build.rollupOptions)

package/dist/node/framework/plugins/vite-plugin-hydrogen-rsc.d.ts

@@ -1 +1,2 @@
-export default function (): any;
+import { HydrogenVitePluginOptions } from '../types';
+export default function (options?: HydrogenVitePluginOptions): any;

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

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const plugin_js_1 = __importDefault(require("@shopify/hydrogen/vendor/react-server-dom-vite/plugin.js"));
 const vite_plugin_hydrogen_middleware_1 = require("./vite-plugin-hydrogen-middleware");
 const vite_plugin_hydrogen_virtual_files_1 = require("./vite-plugin-hydrogen-virtual-files");
-function default_1() {
+function default_1(options) {
     return (0, plugin_js_1.default)({
         serverBuildEntries: [
             vite_plugin_hydrogen_middleware_1.HYDROGEN_DEFAULT_SERVER_ENTRY,
@@ -23,6 +23,7 @@ function default_1() {
                 // TODO: revisit this when RSC splits into two bundles
                 /\.test\.[tj]sx?$/.test(importer));
         },
+        ...options,
     });
 }
 exports.default = default_1;

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

@@ -21,25 +21,20 @@ exports.VIRTUAL_PROXY_HYDROGEN_ROUTES_ID = VIRTUAL_PREFIX + PROXY_PREFIX + HYDRO
 exports.default = (pluginOptions) => {
     let config;
     let server;
-    let resolvedConfigPath;
     return {
         name: 'hydrogen:virtual-files',
         configResolved(_config) {
             config = _config;
-            // @ts-ignore
-            config.plugins.push(addPathToConfigProxy());
         },
         configureServer(_server) {
             server = _server;
         },
         resolveId(source, importer) {
             if (source === VIRTUAL_HYDROGEN_CONFIG_ID) {
-                return findHydrogenConfigPath(config.root, pluginOptions.configPath).then((hcPath) => {
-                    resolvedConfigPath = hcPath;
-                    // This direct dependency on a real file
-                    // makes HMR work for the virtual module.
-                    return this.resolve(hcPath, importer, { skipSelf: true });
-                });
+                return findHydrogenConfigPath(config.root, pluginOptions.configPath).then((hcPath) => 
+                // This direct dependency on a real file
+                // makes HMR work for the virtual module.
+                this.resolve(hcPath, importer, { skipSelf: true }));
             }
             if ([
                 exports.VIRTUAL_PROXY_HYDROGEN_CONFIG_ID,
@@ -92,18 +87,6 @@ exports.default = (pluginOptions) => {
         const { loaded } = await (0, viteception_1.viteception)([exports.VIRTUAL_PROXY_HYDROGEN_CONFIG_ID]);
         return loaded[0].default;
     }
-    function addPathToConfigProxy() {
-        return {
-            name: 'hydrogen:virtual-files-post',
-            enforce: 'post',
-            transform(code, id) {
-                if (id === '\0' + exports.VIRTUAL_PROXY_HYDROGEN_CONFIG_ID) {
-                    // The CLI needs to import the Hydrogen config path
-                    return (code + ` export const configPath = '${resolvedConfigPath || ''}';`);
-                }
-            },
-        };
-    }
 };
 async function findHydrogenConfigPath(root, userProvidedPath) {
     let configPath = userProvidedPath;

package/dist/node/framework/types.d.ts

@@ -2,4 +2,5 @@ export interface HydrogenVitePluginOptions {
     devCache?: boolean;
     purgeQueryCacheOnBuild?: boolean;
     configPath?: string;
+    optimizeBoundaries?: boolean | 'build';
 }

package/package.json

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

package/vendor/react-server-dom-vite/cjs/react-server-dom-vite-plugin.js

@@ -104,6 +104,8 @@ var isClientComponent = function (id) {
 function ReactFlightVitePlugin() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
       serverBuildEntries = _ref.serverBuildEntries,
+      _ref$optimizeBoundari = _ref.optimizeBoundaries,
+      optimizeBoundaries = _ref$optimizeBoundari === void 0 ? 'build' : _ref$optimizeBoundari,
       _ref$isServerComponen = _ref.isServerComponentImporterAllowed,
       isServerComponentImporterAllowed = _ref$isServerComponen === void 0 ? function (importer) {
     return false;
@@ -114,11 +116,25 @@ function ReactFlightVitePlugin() {
   var resolveAlias;
   var globImporterPath;
   var allClientBoundaries = new Set();
+
+  function invalidateGlobImporter() {
+    if (globImporterPath && server) {
+      server.watcher.emit('change', globImporterPath);
+    }
+  }
+
   return {
     name: 'vite-plugin-react-server-components',
     enforce: 'pre',
     configureServer: function (_server) {
       server = _server;
+      var seenModules = {};
+      server.ws.on('rsc:cc404', function (data) {
+        if (!seenModules[data.id]) {
+          seenModules[data.id] = true;
+          invalidateGlobImporter();
+        }
+      });
     },
     configResolved: async function (_config) {
       await esModuleLexer.init;
@@ -195,13 +211,10 @@ function ReactFlightVitePlugin() {
         if (!moduleNode.meta) moduleNode.meta = {};
 
         if (!moduleNode.meta.isClientComponent) {
-          moduleNode.meta.isClientComponent = true;
+          moduleNode.meta.isClientComponent = true; // Invalidate glob importer file to account for the
+          // newly discovered client component.
 
-          if (globImporterPath) {
-            // Invalidate glob importer file to account for the
-            // newly discovered client component.
-            server.watcher.emit('change', globImporterPath);
-          }
+          invalidateGlobImporter();
         }
       }
 
@@ -272,7 +285,7 @@ function ReactFlightVitePlugin() {
           // reuse the already discovered ones and simply add new ones
           // to the list without removing anything.
 
-          findClientBoundaries(server.moduleGraph).forEach(function (boundary) {
+          findClientBoundaries(server.moduleGraph, optimizeBoundaries === true).forEach(function (boundary) {
             return allClientBoundaries.add(boundary);
           });
           return injectGlobs(Array.from(allClientBoundaries));
@@ -282,7 +295,7 @@ function ReactFlightVitePlugin() {
           throw new Error('[react-server-dom-vite] Parameter serverBuildEntries is required for client build');
         }
 
-        return findClientBoundariesForClientBuild(serverBuildEntries).then(injectGlobs);
+        return findClientBoundariesForClientBuild(serverBuildEntries, optimizeBoundaries !== false).then(injectGlobs);
       }
     }
   };
@@ -346,6 +359,7 @@ async function proxyClientComponent(filepath, src) {
 }
 
 function findClientBoundaries(moduleGraph) {
+  var optimizeBoundaries = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   var clientBoundaries = []; // eslint-disable-next-line no-for-of-loops/no-for-of-loops
 
   var _iterator = _createForOfIteratorHelper(moduleGraph.fileToModulesMap.values()),
@@ -358,7 +372,7 @@ function findClientBoundaries(moduleGraph) {
         return moduleNode.meta && moduleNode.meta.isClientComponent;
       });
 
-      if (clientModule && isDirectImportInServer(clientModule)) {
+      if (clientModule && (!optimizeBoundaries || isDirectImportInServer(clientModule))) {
         clientBoundaries.push(clientModule.file);
       }
     }
@@ -371,7 +385,7 @@ function findClientBoundaries(moduleGraph) {
   return clientBoundaries;
 }
 
-async function findClientBoundariesForClientBuild(serverEntries) {
+async function findClientBoundariesForClientBuild(serverEntries, optimizeBoundaries) {
   // Viteception
   var server = await vite.createServer({
     clearScreen: false,
@@ -389,7 +403,7 @@ async function findClientBoundariesForClientBuild(serverEntries) {
   }
 
   await server.close();
-  return findClientBoundaries(server.moduleGraph);
+  return findClientBoundaries(server.moduleGraph, optimizeBoundaries);
 }
 
 var hashImportsPlugin = {
@@ -487,7 +501,7 @@ function isDirectImportInServer(originalMod, currentMod, accModInfo) {
   // the original module before marking it as client boundary.
 
   return currentMod.meta.imports.some(function (imp) {
-    return imp.action === 'import' && imp.from === accModInfo.file && (imp.variables || []).some(function (_ref3) {
+    return imp.from === accModInfo.file && (imp.variables || []).some(function (_ref3) {
       var name = _ref3[0];
       return accModInfo.exports.includes(name);
     });

package/vendor/react-server-dom-vite/cjs/react-server-dom-vite.development.js

@@ -33,7 +33,9 @@ function parseModel(response, json) {
   return JSON.parse(json, response._fromJSON);
 }
 
-// eslint-disable-next-line no-unused-vars
+var META_HOT = undefined;
+var META_ENV_DEV = undefined.DEV;
+
 function resolveModuleReference(bundlerConfig, moduleData) {
   return moduleData;
 } // Vite import globs will be injected here.
@@ -42,7 +44,7 @@ var allClientComponents = {
   __INJECTED_CLIENT_IMPORTERS__: null
 }; // Mock client component imports during testing
 
-if (typeof jest !== 'undefined') {
+if (META_ENV_DEV && typeof jest !== 'undefined') {
   global.allClientComponents = allClientComponents;
 }
 
@@ -50,7 +52,20 @@ function importClientComponent(moduleId) {
   var modImport = allClientComponents[moduleId];
 
   if (!modImport) {
-    return Promise.reject(new Error("Could not find client component " + moduleId));
+    var error = new Error("Could not find client component " + moduleId);
+
+    if (META_HOT) {
+      META_HOT.send('rsc:cc404', {
+        id: moduleId
+      });
+      return new Promise(function (_, reject) {
+        return setTimeout(function () {
+          return reject(error);
+        }, 200);
+      });
+    }
+
+    return Promise.reject(error);
   }
 
   return typeof modImport === 'function' ? modImport() : Promise.resolve(modImport);

package/vendor/react-server-dom-vite/cjs/react-server-dom-vite.production.min.js

@@ -7,8 +7,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-'use strict';var g=require("react"),h={stream:!0},l={__INJECTED_CLIENT_IMPORTERS__:null};"undefined"!==typeof jest&&(global.allClientComponents=l);function m(a){var b=l[a];return b?"function"===typeof b?b():Promise.resolve(b):Promise.reject(Error("Could not find client component "+a))}var n=new Map;function p(a){function b(a){n.set(c,a);return a}var c=a.id;n.has(c)||(a=m(c),b(a),a.then(b,b))}var q=Symbol.for("react.element"),r=Symbol.for("react.lazy"),t=Symbol.for("react.default_value"),v=g.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ContextRegistry;
-function w(a){v[a]||(v[a]=g.createServerContext(a,t));return v[a]}function x(a,b,c){this._status=a;this._value=b;this._response=c}x.prototype.then=function(a){0===this._status?(null===this._value&&(this._value=[]),this._value.push(a)):a()};
+'use strict';var g=require("react"),h={stream:!0},l={__INJECTED_CLIENT_IMPORTERS__:null};(void 0).DEV&&"undefined"!==typeof jest&&(global.allClientComponents=l);function m(a){var b=l[a];return b?"function"===typeof b?b():Promise.resolve(b):Promise.reject(Error("Could not find client component "+a))}var n=new Map;function p(a){function b(a){n.set(c,a);return a}var c=a.id;n.has(c)||(a=m(c),b(a),a.then(b,b))}
+var q=Symbol.for("react.element"),r=Symbol.for("react.lazy"),t=Symbol.for("react.default_value"),v=g.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ContextRegistry;function w(a){v[a]||(v[a]=g.createServerContext(a,t));return v[a]}function x(a,b,c){this._status=a;this._value=b;this._response=c}x.prototype.then=function(a){0===this._status?(null===this._value&&(this._value=[]),this._value.push(a)):a()};
 function y(a){switch(a._status){case 3:return a._value;case 1:var b=JSON.parse(a._value,a._response._fromJSON);a._status=3;return a._value=b;case 2:var c=a._value;b=c.name;c=n.get(c.id);if(!c||c instanceof Promise||c instanceof Error)throw c;b=c[b];a._status=3;return a._value=b;case 0:throw a;default:throw a._value;}}function z(){var a=A(this,0);return y(a)}function B(a,b){return new x(3,b,a)}function C(a){if(null!==a)for(var b=0;b<a.length;b++)(0,a[b])()}
 function D(a,b){if(0===a._status){var c=a._value;a._status=4;a._value=b;C(c)}}function E(a,b){a._chunks.forEach(function(a){D(a,b)})}function A(a,b){var c=a._chunks,d=c.get(b);d||(d=new x(0,null,a),c.set(b,d));return d}function F(a,b,c){switch(c[0]){case "$":if("$"===c)return q;if("$"===c[1]||"@"===c[1])return c.substring(1);b=parseInt(c.substring(1),16);a=A(a,b);return y(a);case "@":return b=parseInt(c.substring(1),16),a=A(a,b),{$$typeof:r,_payload:a,_init:y}}return c}
 function G(a){E(a,Error("Connection closed."))}

package/vendor/react-server-dom-vite/esm/react-server-dom-vite-plugin.js

@@ -100,6 +100,8 @@ var isClientComponent = function (id) {
 function ReactFlightVitePlugin() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
       serverBuildEntries = _ref.serverBuildEntries,
+      _ref$optimizeBoundari = _ref.optimizeBoundaries,
+      optimizeBoundaries = _ref$optimizeBoundari === void 0 ? 'build' : _ref$optimizeBoundari,
       _ref$isServerComponen = _ref.isServerComponentImporterAllowed,
       isServerComponentImporterAllowed = _ref$isServerComponen === void 0 ? function (importer) {
     return false;
@@ -110,11 +112,25 @@ function ReactFlightVitePlugin() {
   var resolveAlias;
   var globImporterPath;
   var allClientBoundaries = new Set();
+
+  function invalidateGlobImporter() {
+    if (globImporterPath && server) {
+      server.watcher.emit('change', globImporterPath);
+    }
+  }
+
   return {
     name: 'vite-plugin-react-server-components',
     enforce: 'pre',
     configureServer: function (_server) {
       server = _server;
+      var seenModules = {};
+      server.ws.on('rsc:cc404', function (data) {
+        if (!seenModules[data.id]) {
+          seenModules[data.id] = true;
+          invalidateGlobImporter();
+        }
+      });
     },
     configResolved: async function (_config) {
       await init;
@@ -191,13 +207,10 @@ function ReactFlightVitePlugin() {
         if (!moduleNode.meta) moduleNode.meta = {};
 
         if (!moduleNode.meta.isClientComponent) {
-          moduleNode.meta.isClientComponent = true;
+          moduleNode.meta.isClientComponent = true; // Invalidate glob importer file to account for the
+          // newly discovered client component.
 
-          if (globImporterPath) {
-            // Invalidate glob importer file to account for the
-            // newly discovered client component.
-            server.watcher.emit('change', globImporterPath);
-          }
+          invalidateGlobImporter();
         }
       }
 
@@ -268,7 +281,7 @@ function ReactFlightVitePlugin() {
           // reuse the already discovered ones and simply add new ones
           // to the list without removing anything.
 
-          findClientBoundaries(server.moduleGraph).forEach(function (boundary) {
+          findClientBoundaries(server.moduleGraph, optimizeBoundaries === true).forEach(function (boundary) {
             return allClientBoundaries.add(boundary);
           });
           return injectGlobs(Array.from(allClientBoundaries));
@@ -278,7 +291,7 @@ function ReactFlightVitePlugin() {
           throw new Error('[react-server-dom-vite] Parameter serverBuildEntries is required for client build');
         }
 
-        return findClientBoundariesForClientBuild(serverBuildEntries).then(injectGlobs);
+        return findClientBoundariesForClientBuild(serverBuildEntries, optimizeBoundaries !== false).then(injectGlobs);
       }
     }
   };
@@ -342,6 +355,7 @@ async function proxyClientComponent(filepath, src) {
 }
 
 function findClientBoundaries(moduleGraph) {
+  var optimizeBoundaries = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   var clientBoundaries = []; // eslint-disable-next-line no-for-of-loops/no-for-of-loops
 
   var _iterator = _createForOfIteratorHelper(moduleGraph.fileToModulesMap.values()),
@@ -354,7 +368,7 @@ function findClientBoundaries(moduleGraph) {
         return moduleNode.meta && moduleNode.meta.isClientComponent;
       });
 
-      if (clientModule && isDirectImportInServer(clientModule)) {
+      if (clientModule && (!optimizeBoundaries || isDirectImportInServer(clientModule))) {
         clientBoundaries.push(clientModule.file);
       }
     }
@@ -367,7 +381,7 @@ function findClientBoundaries(moduleGraph) {
   return clientBoundaries;
 }
 
-async function findClientBoundariesForClientBuild(serverEntries) {
+async function findClientBoundariesForClientBuild(serverEntries, optimizeBoundaries) {
   // Viteception
   var server = await createServer({
     clearScreen: false,
@@ -385,7 +399,7 @@ async function findClientBoundariesForClientBuild(serverEntries) {
   }
 
   await server.close();
-  return findClientBoundaries(server.moduleGraph);
+  return findClientBoundaries(server.moduleGraph, optimizeBoundaries);
 }
 
 var hashImportsPlugin = {
@@ -483,7 +497,7 @@ function isDirectImportInServer(originalMod, currentMod, accModInfo) {
   // the original module before marking it as client boundary.
 
   return currentMod.meta.imports.some(function (imp) {
-    return imp.action === 'import' && imp.from === accModInfo.file && (imp.variables || []).some(function (_ref3) {
+    return imp.from === accModInfo.file && (imp.variables || []).some(function (_ref3) {
       var name = _ref3[0];
       return accModInfo.exports.includes(name);
     });

package/vendor/react-server-dom-vite/esm/react-server-dom-vite.js

@@ -27,7 +27,9 @@ function parseModel(response, json) {
   return JSON.parse(json, response._fromJSON);
 }
 
-// eslint-disable-next-line no-unused-vars
+var META_HOT = import.meta.hot;
+var META_ENV_DEV = import.meta.env.DEV;
+
 function resolveModuleReference(bundlerConfig, moduleData) {
   return moduleData;
 } // Vite import globs will be injected here.
@@ -36,7 +38,7 @@ var allClientComponents = {
   __INJECTED_CLIENT_IMPORTERS__: null
 }; // Mock client component imports during testing
 
-if (typeof jest !== 'undefined') {
+if (META_ENV_DEV && typeof jest !== 'undefined') {
   global.allClientComponents = allClientComponents;
 }
 
@@ -44,7 +46,20 @@ function importClientComponent(moduleId) {
   var modImport = allClientComponents[moduleId];
 
   if (!modImport) {
-    return Promise.reject(new Error("Could not find client component " + moduleId));
+    var error = new Error("Could not find client component " + moduleId);
+
+    if (META_HOT) {
+      META_HOT.send('rsc:cc404', {
+        id: moduleId
+      });
+      return new Promise(function (_, reject) {
+        return setTimeout(function () {
+          return reject(error);
+        }, 200);
+      });
+    }
+
+    return Promise.reject(error);
   }
 
   return typeof modImport === 'function' ? modImport() : Promise.resolve(modImport);