@shopify/hydrogen 0.12.0 → 0.13.2

package/dist/esnext/components/Seo/seo-types.d.ts

@@ -0,0 +1,17 @@
+import type { Scalars, Shop as ShopType, Seo as SeoType } from '../../storefront-api-types';
+export interface Twitter {
+    site: string;
+    title: SeoType['title'];
+    description: SeoType['description'];
+}
+export interface HomePage {
+    description: ShopType['description'];
+    title: ShopType['name'];
+    url: Scalars['URL'];
+}
+export interface DefaultPage extends ShopType {
+    title: ShopType['name'];
+    url: Scalars['URL'];
+    titleTemplate?: string;
+    lang?: string;
+}

package/dist/esnext/components/UnitPrice/UnitPrice.client.d.ts

@@ -1,14 +1,15 @@
-import type { UnitPriceFragmentFragment } from './UnitPriceFragment';
+import type { UnitPriceMeasurement, MoneyV2 } from '../../storefront-api-types';
+import type { PartialDeep } from 'type-fest';
 export interface UnitPriceProps<TTag> {
-    /** A [`MoneyV2` object](/api/storefront/reference/common-objects/moneyv2). */
-    data: UnitPriceFragmentFragment['unitPrice'];
-    /** A [`UnitPriceMeasurement` object](/api/storefront/reference/products/unitpricemeasurement). */
-    measurement: UnitPriceFragmentFragment['unitPriceMeasurement'];
+    /** An object with fields that correspond to the Storefront API's [MoneyV2 object](/api/storefront/reference/common-objects/moneyv2). */
+    data: PartialDeep<MoneyV2>;
+    /** A [UnitPriceMeasurement object](/api/storefront/reference/products/unitpricemeasurement). */
+    measurement: PartialDeep<UnitPriceMeasurement>;
     /** An HTML tag to be rendered as the base element wrapper. The default is `div`. */
     as?: TTag;
 }
 /**
  * The `UnitPrice` component renders a string with a [UnitPrice](/themes/pricing-payments/unit-pricing) as the
- * [Storefront API's `MoneyV2` object](/api/storefront/reference/common-objects/moneyv2) with a reference unit from the [Storefront API's `UnitPriceMeasurement` object](/api/storefront/reference/products/unitpricemeasurement).
+ * Storefront API's [MoneyV2 object](/api/storefront/reference/common-objects/moneyv2) with a reference unit from the Storefront API's [UnitPriceMeasurement object](/api/storefront/reference/products/unitpricemeasurement).
  */
 export declare function UnitPrice<TTag extends keyof JSX.IntrinsicElements = 'div'>(props: JSX.IntrinsicElements[TTag] & UnitPriceProps<TTag>): JSX.Element | null;

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { Money } from '../Money';
 /**
  * The `UnitPrice` component renders a string with a [UnitPrice](/themes/pricing-payments/unit-pricing) as the
- * [Storefront API's `MoneyV2` object](/api/storefront/reference/common-objects/moneyv2) with a reference unit from the [Storefront API's `UnitPriceMeasurement` object](/api/storefront/reference/products/unitpricemeasurement).
+ * Storefront API's [MoneyV2 object](/api/storefront/reference/common-objects/moneyv2) with a reference unit from the Storefront API's [UnitPriceMeasurement object](/api/storefront/reference/products/unitpricemeasurement).
  */
 export function UnitPrice(props) {
     const { data, measurement, as, ...passthroughProps } = props;

package/dist/esnext/components/Video/Video.d.ts

@@ -1,13 +1,14 @@
 import { ImageSizeOptions } from '../../utilities';
-import type { VideoFragmentFragment } from './VideoFragment';
+import type { Video as VideoType } from '../../storefront-api-types';
+import type { PartialDeep } from 'type-fest';
 interface VideoProps {
-    /** An object corresponding to the [GraphQL fragment](#graphql-fragment). */
-    data: VideoFragmentFragment;
+    /** An object with fields that correspond to the Storefront API's [Video object](/api/storefront/latest/objects/video). */
+    data: PartialDeep<VideoType>;
     /** An object of image size options for the video's `previewImage`. */
     options?: ImageSizeOptions;
 }
 /**
- * The `Video` component renders a `video` for the Storefront API's [`Video` object](/api/storefront/reference/products/video).
+ * The `Video` component renders a `video` for the Storefront API's [Video object](/api/storefront/reference/products/video).
  */
 export declare function Video(props: JSX.IntrinsicElements['video'] & VideoProps): JSX.Element;
 export {};

package/dist/esnext/components/Video/Video.js

@@ -1,11 +1,19 @@
 import React from 'react';
 import { useImageUrl } from '../../utilities';
 /**
- * The `Video` component renders a `video` for the Storefront API's [`Video` object](/api/storefront/reference/products/video).
+ * The `Video` component renders a `video` for the Storefront API's [Video object](/api/storefront/reference/products/video).
  */
 export function Video(props) {
     var _a;
     const { data, options, id = data.id, playsInline = true, controls = true, ...passthroughProps } = props;
     const posterUrl = useImageUrl((_a = data.previewImage) === null || _a === void 0 ? void 0 : _a.url, options);
-    return (React.createElement("video", { ...passthroughProps, id: id, playsInline: playsInline, controls: controls, poster: posterUrl }, data.sources.map((source) => (React.createElement("source", { key: source.url, src: source.url, type: source.mimeType })))));
+    if (!data.sources) {
+        throw new Error(`<Video/> requires a 'data.sources' array`);
+    }
+    return (React.createElement("video", { ...passthroughProps, id: id, playsInline: playsInline, controls: controls, poster: posterUrl }, data.sources.map((source) => {
+        if (!((source === null || source === void 0 ? void 0 : source.url) && (source === null || source === void 0 ? void 0 : source.mimeType))) {
+            throw new Error(`<Video/> needs 'source.url' and 'source.mimeType'`);
+        }
+        return (React.createElement("source", { key: source.url, src: source.url, type: source.mimeType }));
+    })));
 }

package/dist/esnext/components/index.d.ts

@@ -3,7 +3,6 @@ export { MediaFile } from './MediaFile';
 export { Video } from './Video';
 export { Image } from './Image';
 export { ExternalVideo } from './ExternalVideo';
-export { RawHtml } from './RawHtml';
 export { AddToCartButton } from './AddToCartButton';
 export { ModelViewer } from './ModelViewer';
 export { Money } from './Money';
@@ -28,7 +27,5 @@ export { ProductPrice } from './ProductPrice';
 export { ProductMetafield } from './ProductMetafield';
 export { BuyNowButton } from './BuyNowButton';
 export { ShopPayButton } from './ShopPayButton';
-export { useAvailableCountries } from '../hooks/useAvailableCountries';
 export { useCountry } from '../hooks/useCountry';
 export { Seo } from './Seo';
-export { useNavigate } from '../hooks/useNavigate';

package/dist/esnext/components/index.js

@@ -3,7 +3,6 @@ export { MediaFile } from './MediaFile';
 export { Video } from './Video';
 export { Image } from './Image';
 export { ExternalVideo } from './ExternalVideo';
-export { RawHtml } from './RawHtml';
 export { AddToCartButton } from './AddToCartButton';
 export { ModelViewer } from './ModelViewer';
 export { Money } from './Money';
@@ -26,7 +25,5 @@ export { ProductPrice } from './ProductPrice';
 export { ProductMetafield } from './ProductMetafield';
 export { BuyNowButton } from './BuyNowButton';
 export { ShopPayButton } from './ShopPayButton';
-export { useAvailableCountries } from '../hooks/useAvailableCountries';
 export { useCountry } from '../hooks/useCountry';
 export { Seo } from './Seo';
-export { useNavigate } from '../hooks/useNavigate';

package/dist/esnext/entry-client.js

@@ -1,16 +1,22 @@
 import React, { Suspense, useState, StrictMode, Fragment, } from 'react';
 // @ts-expect-error hydrateRoot isn't on the TS types yet, but we're using React 18 so it exists
-import { hydrateRoot } from 'react-dom';
+import { hydrateRoot } from 'react-dom/client';
 import { ErrorBoundary } from 'react-error-boundary';
 import { useServerResponse } from './framework/Hydration/rsc';
 import { ServerStateProvider } from './foundation/ServerStateProvider';
-import { Router } from './foundation/Router/Router';
 const renderHydrogen = async (ClientWrapper, config) => {
     const root = document.getElementById('root');
     if (!root) {
         console.error(`Could not find a root element <div id="root"></div> to render.`);
         return;
     }
+    if (import.meta.hot) {
+        import.meta.hot.on('hydrogen', ({ type, data }) => {
+            if (type === 'warn') {
+                console.warn(data);
+            }
+        });
+    }
     // default to StrictMode on, unless explicitly turned off
     const RootComponent = (config === null || config === void 0 ? void 0 : config.strictMode) !== false ? StrictMode : Fragment;
     hydrateRoot(root, React.createElement(RootComponent, null,
@@ -26,8 +32,7 @@ function Content({ clientWrapper: ClientWrapper = ({ children }) => children, })
     });
     const response = useServerResponse(serverState);
     return (React.createElement(ServerStateProvider, { serverState: serverState, setServerState: setServerState },
-        React.createElement(Router, null,
-            React.createElement(ClientWrapper, null, response.readRoot()))));
+        React.createElement(ClientWrapper, null, response.readRoot())));
 }
 function Error({ error }) {
     if (import.meta.env.DEV) {

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

@@ -15,10 +15,13 @@ import { setConfig } from './framework/config';
 import { ssrRenderToPipeableStream, ssrRenderToReadableStream, rscRenderToReadableStream, createFromReadableStream, isStreamingSupported, bufferReadableStream, } from './streaming.server';
 import { RSC_PATHNAME } from './constants';
 import { stripScriptsFromTemplate } from './utilities/template';
+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();
@@ -92,9 +95,14 @@ async function render(url, { App, routes, request, componentResponse, log, templ
         routes,
         log,
     }, { template });
+    function onErrorShell(error) {
+        log.error(error);
+        componentResponse.writeHead({ status: 500 });
+        return template;
+    }
     let [html, flight] = await Promise.all([
-        renderToBufferedString(AppSSR, { log, nonce }),
-        bufferReadableStream(rscReadable.getReader()),
+        renderToBufferedString(AppSSR, { log, nonce }).catch(onErrorShell),
+        bufferReadableStream(rscReadable.getReader()).catch(() => null),
     ]);
     const { headers, status, statusText } = getResponseOptions(componentResponse);
     /**
@@ -111,7 +119,7 @@ async function render(url, { App, routes, request, componentResponse, log, templ
             headers,
         });
     }
-    headers['Content-type'] = HTML_CONTENT_TYPE;
+    headers[CONTENT_TYPE] = HTML_CONTENT_TYPE;
     html = applyHtmlHead(html, request.ctx.head, template);
     if (flight) {
         html = html.replace('</body>', `${flightContainer({ init: true, nonce, chunk: flight })}</body>`);
@@ -128,6 +136,7 @@ async function render(url, { App, routes, request, componentResponse, log, templ
  * information, so this method should not be used by crawlers.
  */
 async function stream(url, { App, routes, request, response, componentResponse, log, template, nonce, dev, }) {
+    var _a;
     const state = { pathname: url.pathname, search: url.search };
     log.trace('start stream');
     const { noScriptTemplate, bootstrapScripts, bootstrapModules } = stripScriptsFromTemplate(template);
@@ -156,59 +165,66 @@ async function stream(url, { App, routes, request, response, componentResponse,
     });
     let didError;
     if (__WORKER__) {
-        const deferredShouldReturnApp = defer();
+        const onCompleteAll = defer();
         const encoder = new TextEncoder();
         const transform = new TransformStream();
         const writable = transform.writable.getWriter();
         const responseOptions = {};
-        const ssrReadable = ssrRenderToReadableStream(AppSSR, {
-            nonce,
-            bootstrapScripts,
-            bootstrapModules,
-            onCompleteShell() {
-                log.trace('worker ready to stream');
-                Object.assign(responseOptions, getResponseOptions(componentResponse, didError));
-                /**
-                 * TODO: This assumes `response.cache()` has been called _before_ any
-                 * queries which might be caught behind Suspense. Clarify this or add
-                 * additional checks downstream?
-                 */
-                responseOptions.headers[getCacheControlHeader({ dev })] =
-                    componentResponse.cacheControlHeader;
-                if (isRedirect(responseOptions)) {
-                    // Return redirects early without further rendering/streaming
-                    return deferredShouldReturnApp.resolve(false);
-                }
-                if (!componentResponse.canStream())
-                    return;
-                startWritingHtmlToStream(responseOptions, writable, encoder, dev ? didError : undefined);
-                deferredShouldReturnApp.resolve(true);
-            },
-            async onCompleteAll() {
-                log.trace('worker complete stream');
-                if (componentResponse.canStream())
-                    return;
-                Object.assign(responseOptions, getResponseOptions(componentResponse, didError));
-                if (isRedirect(responseOptions)) {
-                    // Redirects found after any async code
-                    return deferredShouldReturnApp.resolve(false);
-                }
+        let ssrReadable;
+        try {
+            ssrReadable = await ssrRenderToReadableStream(AppSSR, {
+                nonce,
+                bootstrapScripts,
+                bootstrapModules,
+                onError(error) {
+                    didError = error;
+                    if (dev && !writable.closed && !!responseOptions.status) {
+                        writable.write(getErrorMarkup(error));
+                    }
+                    log.error(error);
+                },
+            });
+        }
+        catch (error) {
+            log.error(error);
+            return new Response(template + (dev ? getErrorMarkup(error) : ''), {
+                status: 500,
+                headers: { [CONTENT_TYPE]: HTML_CONTENT_TYPE },
+            });
+        }
+        log.trace('worker ready to stream');
+        ssrReadable.allReady.then(() => {
+            log.trace('worker complete stream');
+            onCompleteAll.resolve(true);
+        });
+        async function prepareForStreaming(flush) {
+            Object.assign(responseOptions, getResponseOptions(componentResponse, didError));
+            /**
+             * TODO: This assumes `response.cache()` has been called _before_ any
+             * queries which might be caught behind Suspense. Clarify this or add
+             * additional checks downstream?
+             */
+            responseOptions.headers[getCacheControlHeader({ dev })] =
+                componentResponse.cacheControlHeader;
+            if (isRedirect(responseOptions)) {
+                return false;
+            }
+            if (flush) {
                 if (componentResponse.customBody) {
                     writable.write(encoder.encode(await componentResponse.customBody));
-                    return deferredShouldReturnApp.resolve(false);
+                    return false;
                 }
-                startWritingHtmlToStream(responseOptions, writable, encoder, dev ? didError : undefined);
-                deferredShouldReturnApp.resolve(true);
-            },
-            onError(error) {
-                didError = error;
-                if (dev && deferredShouldReturnApp.status === 'pending') {
-                    writable.write(getErrorMarkup(error));
+                responseOptions.headers[CONTENT_TYPE] = HTML_CONTENT_TYPE;
+                writable.write(encoder.encode(DOCTYPE));
+                if (didError) {
+                    // This error was delayed until the headers were properly sent.
+                    writable.write(encoder.encode(getErrorMarkup(didError)));
                 }
-                log.error(error);
-            },
-        });
-        if (await deferredShouldReturnApp.promise) {
+                return true;
+            }
+        }
+        const shouldReturnApp = (_a = (await prepareForStreaming(componentResponse.canStream()))) !== null && _a !== void 0 ? _a : (await onCompleteAll.promise.then(prepareForStreaming));
+        if (shouldReturnApp) {
             let bufferedSsr = '';
             let isPendingSsrWrite = false;
             const writingSSR = bufferReadableStream(ssrReadable.getReader(), (chunk) => {
@@ -245,12 +261,11 @@ async function stream(url, { App, routes, request, response, componentResponse,
         return new Response(bufferedBody, responseOptions);
     }
     else if (response) {
-        response.socket.on('error', log.fatal);
         const { pipe } = ssrRenderToPipeableStream(AppSSR, {
             nonce,
             bootstrapScripts,
             bootstrapModules,
-            onCompleteShell() {
+            onShellReady() {
                 log.trace('node ready to stream');
                 /**
                  * TODO: This assumes `response.cache()` has been called _before_ any
@@ -275,7 +290,7 @@ async function stream(url, { App, routes, request, response, componentResponse,
                     return response.write(chunk);
                 });
             },
-            async onCompleteAll() {
+            async onAllReady() {
                 log.trace('node complete stream');
                 if (componentResponse.canStream() || response.writableEnded) {
                     postRequestTasks('str', response.statusCode, request, componentResponse);
@@ -298,6 +313,15 @@ async function stream(url, { App, routes, request, response, componentResponse,
                     pipe(response);
                 });
             },
+            onShellError(error) {
+                log.error(error);
+                if (!response.writableEnded) {
+                    writeHeadToServerResponse(response, componentResponse, log, error);
+                    startWritingHtmlToServerResponse(response, dev ? error : undefined);
+                    response.write(template);
+                    response.end();
+                }
+            },
             onError(error) {
                 didError = error;
                 if (dev && response.headersSent) {
@@ -335,7 +359,6 @@ async function hydrate(url, { App, routes, request, response, componentResponse,
         return new Response(bufferedBody);
     }
     else if (response) {
-        response.socket.on('error', log.fatal);
         const rscWriter = await import(
         // @ts-ignore
         '@shopify/hydrogen/vendor/react-server-dom-vite/writer.node.server');
@@ -349,9 +372,11 @@ async function hydrate(url, { App, routes, request, response, componentResponse,
 }
 function buildAppRSC({ App, state, request, response, log, routes, }) {
     const hydrogenServerProps = { request, response, log };
+    const serverProps = { ...state, ...hydrogenServerProps, routes };
+    request.ctx.router.serverProps = serverProps;
     const AppRSC = (React.createElement(ServerRequestProvider, { request: request, isRSC: true },
         React.createElement(PreloadQueries, { request: request },
-            React.createElement(App, { ...state, ...hydrogenServerProps, routes: routes }))));
+            React.createElement(App, { ...serverProps }))));
     return { AppRSC };
 }
 function buildAppSSR({ App, state, request, response, log, routes }, htmlOptions) {
@@ -382,25 +407,23 @@ function PreloadQueries({ request, children, }) {
 async function renderToBufferedString(ReactApp, { log, nonce }) {
     return new Promise(async (resolve, reject) => {
         if (__WORKER__) {
-            const deferred = defer();
-            const readable = ssrRenderToReadableStream(ReactApp, {
-                nonce,
-                onCompleteAll() {
-                    /**
-                     * We want to wait until `onCompleteAll` has been called before fetching the
-                     * stream body. Otherwise, React 18's streaming JS script/template tags
-                     * will be included in the output and cause issues when loading
-                     * the Client Components in the browser.
-                     */
-                    deferred.resolve(null);
-                },
-                onError(error) {
-                    log.error(error);
-                    deferred.reject(error);
-                },
-            });
-            await deferred.promise.catch(reject);
-            resolve(await bufferReadableStream(readable.getReader()));
+            try {
+                const ssrReadable = await ssrRenderToReadableStream(ReactApp, {
+                    nonce,
+                    onError: (error) => log.error(error),
+                });
+                /**
+                 * We want to wait until `allReady` resolves before fetching the
+                 * stream body. Otherwise, React 18's streaming JS script/template tags
+                 * will be included in the output and cause issues when loading
+                 * the Client Components in the browser.
+                 */
+                await ssrReadable.allReady;
+                resolve(bufferReadableStream(ssrReadable.getReader()));
+            }
+            catch (error) {
+                reject(error);
+            }
         }
         else {
             const writer = await createNodeWriter();
@@ -410,7 +433,7 @@ async function renderToBufferedString(ReactApp, { log, nonce }) {
                  * When hydrating, we have to wait until `onCompleteAll` to avoid having
                  * `template` and `script` tags inserted and rendered as part of the hydration response.
                  */
-                onCompleteAll() {
+                onAllReady() {
                     let data = '';
                     writer.on('data', (chunk) => (data += chunk.toString()));
                     writer.once('error', reject);
@@ -418,10 +441,8 @@ async function renderToBufferedString(ReactApp, { log, nonce }) {
                     // Tell React to start writing to the writer
                     pipe(writer);
                 },
-                onError(error) {
-                    log.error(error);
-                    reject(error);
-                },
+                onShellError: reject,
+                onError: (error) => log.error(error),
             });
         }
     });
@@ -429,22 +450,14 @@ async function renderToBufferedString(ReactApp, { log, nonce }) {
 export default renderHydrogen;
 function startWritingHtmlToServerResponse(response, error) {
     if (!response.headersSent) {
-        response.setHeader('Content-type', HTML_CONTENT_TYPE);
-        response.write('<!DOCTYPE html>');
+        response.setHeader(CONTENT_TYPE, HTML_CONTENT_TYPE);
+        response.write(DOCTYPE);
     }
     if (error) {
         // This error was delayed until the headers were properly sent.
         response.write(getErrorMarkup(error));
     }
 }
-function startWritingHtmlToStream(responseOptions, writable, encoder, error) {
-    responseOptions.headers['Content-type'] = HTML_CONTENT_TYPE;
-    writable.write(encoder.encode('<!DOCTYPE html>'));
-    if (error) {
-        // This error was delayed until the headers were properly sent.
-        writable.write(encoder.encode(getErrorMarkup(error)));
-    }
-}
 function getResponseOptions({ headers, status, customStatus }, error) {
     var _a, _b;
     const responseInit = {};

package/dist/esnext/foundation/FileRoutes/FileRoutes.server.d.ts

@@ -0,0 +1,22 @@
+import type { ImportGlobEagerOutput } from '../../types';
+interface FileRoutesProps {
+    /** The routes defined by Vite's [import.meta.globEager](https://vitejs.dev/guide/features.html#glob-import) method. */
+    routes: ImportGlobEagerOutput;
+    /** A path that's prepended to all file routes. You can modify `basePath` if you want to prefix all file routes. For example, you can prefix all file routes with a locale. */
+    basePath?: string;
+    /** The portion of the file route path that shouldn't be a part of the URL. You need to modify this if you want to import routes from a location other than the default `src/routes`. */
+    dirPrefix?: string;
+}
+/**
+ * The `FileRoutes` component builds a set of default Hydrogen routes based on the output provided by Vite's
+ * [import.meta.globEager](https://vitejs.dev/guide/features.html#glob-import) method. You can have multiple
+ * instances of this component to source file routes from multiple locations.
+ */
+export declare function FileRoutes({ routes, basePath, dirPrefix, }: FileRoutesProps): JSX.Element | null;
+interface HydrogenRoute {
+    component: any;
+    path: string;
+    exact: boolean;
+}
+export declare function createPageRoutes(pages: ImportGlobEagerOutput, topLevelPath: string | undefined, dirPrefix: string): HydrogenRoute[];
+export {};

package/dist/esnext/foundation/{Router/FileRoutes.js → FileRoutes/FileRoutes.server.js}

@@ -1,15 +1,19 @@
 import React, { useMemo } from 'react';
 import { matchPath } from '../../utilities/matchPath';
 import { log } from '../../utilities/log';
+import { useServerRequest } from '../ServerRequestProvider';
+import { RouteParamsProvider } from '../useRouteParams/RouteParamsProvider.client';
 /**
- * Build a set of default Hydrogen routes based on the output provided by Vite's
- * import.meta.globEager method.
- *
- * @see https://vitejs.dev/guide/features.html#glob-import
+ * The `FileRoutes` component builds a set of default Hydrogen routes based on the output provided by Vite's
+ * [import.meta.globEager](https://vitejs.dev/guide/features.html#glob-import) method. You can have multiple
+ * instances of this component to source file routes from multiple locations.
  */
-export function FileRoutes({ routes, serverProps, }) {
-    const basePath = '/';
-    const pageRoutes = useMemo(() => createPageRoutes(routes, basePath), [routes, basePath]);
+export function FileRoutes({ routes, basePath = '/', dirPrefix = './routes', }) {
+    const request = useServerRequest();
+    const { routeRendered, serverProps } = request.ctx.router;
+    if (routeRendered)
+        return null;
+    const pageRoutes = useMemo(() => createPageRoutes(routes, basePath, dirPrefix), [routes, basePath]);
     let foundRoute, foundRouteDetails;
     for (let i = 0; i < pageRoutes.length; i++) {
         foundRouteDetails = matchPath(serverProps.pathname, pageRoutes[i]);
@@ -18,14 +22,20 @@ export function FileRoutes({ routes, serverProps, }) {
             break;
         }
     }
-    return foundRoute ? (React.createElement(foundRoute.component, { params: foundRouteDetails.params, ...serverProps })) : null;
+    if (foundRoute) {
+        request.ctx.router.routeRendered = true;
+        request.ctx.router.routeParams = foundRouteDetails.params;
+        return (React.createElement(RouteParamsProvider, { routeParams: foundRouteDetails.params },
+            React.createElement(foundRoute.component, { params: foundRouteDetails.params, ...serverProps })));
+    }
+    return null;
 }
-export function createPageRoutes(pages, topLevelPath = '*') {
+export function createPageRoutes(pages, topLevelPath = '*', dirPrefix) {
     const topLevelPrefix = topLevelPath.replace('*', '').replace(/\/$/, '');
     const routes = Object.keys(pages)
         .map((key) => {
         let path = key
-            .replace('./routes', '')
+            .replace(dirPrefix, '')
             .replace(/\.server\.(t|j)sx?$/, '')
             /**
              * Replace /index with /

package/dist/esnext/foundation/Redirect/Redirect.client.d.ts

@@ -0,0 +1,5 @@
+declare type RedirectProps = {
+    to: string;
+};
+export default function Redirect({ to }: RedirectProps): null;
+export {};

package/dist/esnext/foundation/Redirect/Redirect.client.js

@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+import { useNavigate } from '../../foundation/useNavigate/useNavigate';
+export default function Redirect({ to }) {
+    const navigate = useNavigate();
+    useEffect(() => {
+        if (to.startsWith('http')) {
+            window.location.href = to;
+        }
+        else {
+            navigate(to);
+        }
+    }, []);
+    return null;
+}

package/dist/esnext/foundation/Route/Route.server.d.ts

@@ -0,0 +1,12 @@
+import { ReactElement } from 'react';
+export declare type RouteProps = {
+    /** The URL path where the route exists. The path can contain variables. For example, `/products/:handle`. */
+    path: string;
+    /** A reference to a React Server Component that's rendered when the route is active. */
+    page: ReactElement;
+};
+/**
+ * The `Route` component is used to set up a route in Hydrogen that's independent of the file system. Routes are
+ * matched in the order that they're defined.
+ */
+export declare function Route({ path, page }: RouteProps): ReactElement | null;

package/dist/esnext/foundation/Route/Route.server.js

@@ -0,0 +1,33 @@
+import React, { cloneElement } from 'react';
+import { useServerRequest } from '../ServerRequestProvider';
+import { matchPath } from '../../utilities/matchPath';
+import { Boomerang } from '../Boomerang/Boomerang.client';
+import { RouteParamsProvider } from '../useRouteParams/RouteParamsProvider.client';
+/**
+ * The `Route` component is used to set up a route in Hydrogen that's independent of the file system. Routes are
+ * matched in the order that they're defined.
+ */
+export function Route({ path, page }) {
+    var _a;
+    const request = useServerRequest();
+    const { routeRendered, serverProps } = request.ctx.router;
+    if (routeRendered)
+        return null;
+    if (path === '*') {
+        request.ctx.router.routeRendered = true;
+        return cloneElement(page, serverProps);
+    }
+    const match = matchPath(serverProps.pathname, {
+        path,
+        exact: true,
+    });
+    if (match) {
+        request.ctx.router.routeRendered = true;
+        request.ctx.router.routeParams = match.params;
+        const name = (_a = page === null || page === void 0 ? void 0 : page.type) === null || _a === void 0 ? void 0 : _a.name;
+        return (React.createElement(RouteParamsProvider, { routeParams: match.params },
+            cloneElement(page, { params: match.params || {}, ...serverProps }),
+            name ? React.createElement(Boomerang, { pageTemplate: name }) : null));
+    }
+    return null;
+}