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

package/dist/esnext/client.d.ts

@@ -3,6 +3,5 @@ export * from './hooks';
 export * from './foundation/useServerState';
 export * from './foundation/useShop';
 export * from './foundation/ServerStateProvider';
-export { ServerStateRouter } from './foundation/Router/ServerStateRouter.client';
 export { Helmet } from './foundation/Helmet';
 export * from './utilities';

package/dist/esnext/client.js

@@ -3,6 +3,5 @@ export * from './hooks';
 export * from './foundation/useServerState';
 export * from './foundation/useShop';
 export * from './foundation/ServerStateProvider';
-export { ServerStateRouter } from './foundation/Router/ServerStateRouter.client';
 export { Helmet } from './foundation/Helmet';
 export * from './utilities';

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

@@ -1,16 +1,15 @@
 import { ReactNode, ElementType } from 'react';
-import { Cart } from '../CartProvider';
 import { Props } from '../types';
 export interface CartLinesProps {
     /** A `ReactNode` element. Valid values: `ul` or `undefined`. If `ul`, then each child will
      * be wrapped with a `li` element.
      */
     as?: 'ul';
-    /** A `ReactNode` element or a function that takes a cart line as an argument and returns a `ReactNode`. */
-    children: ReactNode | ((line: Cart['lines'][1]) => ReactNode);
+    /** A `ReactNode` element */
+    children: ReactNode;
 }
 /**
  * The `CartLines` component iterates over each cart line and renders its `children` within
- * a `CartLineProvider` for each cart line. It also provides render props in the case where `children` is a function.
+ * a `CartLineProvider` for each cart line.
  */
 export declare function CartLines<TTag extends ElementType>(props: Props<TTag> & CartLinesProps): JSX.Element;

package/dist/esnext/components/CartLines/CartLines.js

@@ -1,9 +1,9 @@
-import React, { cloneElement, Fragment } from 'react';
+import React, { Fragment } from 'react';
 import { useCart } from '../CartProvider';
 import { CartLineProvider } from '../CartLineProvider';
 /**
  * The `CartLines` component iterates over each cart line and renders its `children` within
- * a `CartLineProvider` for each cart line. It also provides render props in the case where `children` is a function.
+ * a `CartLineProvider` for each cart line.
  */
 export function CartLines(props) {
     const { lines } = useCart();
@@ -12,8 +12,6 @@ export function CartLines(props) {
     const ChildWrapper = Wrapper === 'ul' ? 'li' : Fragment;
     return (React.createElement(Wrapper, { ...passthroughProps }, lines.map((line) => {
         return (React.createElement(ChildWrapper, { key: line.id },
-            React.createElement(CartLineProvider, { line: line }, typeof children === 'function'
-                ? cloneElement(children(line))
-                : children)));
+            React.createElement(CartLineProvider, { line: line }, children)));
     })));
 }

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

@@ -9,8 +9,11 @@ export function CartShopPayButton({
 /** A string of classes to apply to the `div` that wraps the `shop-pay-button` web component. */
 className, }) {
     const { lines } = useCart();
-    const ids = useMemo(() => {
-        return lines.map((line) => line.merchandise.id);
+    const idsAndQuantities = useMemo(() => {
+        return lines.map((line) => ({
+            id: line.merchandise.id,
+            quantity: line.quantity,
+        }));
     }, [lines]);
-    return React.createElement(ShopPayButton, { className: className, variantIds: ids });
+    return (React.createElement(ShopPayButton, { className: className, variantIdsAndQuantities: idsAndQuantities }));
 }

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

@@ -1 +1,18 @@
-export declare function Link(props: any): JSX.Element;
+import React from 'react';
+export interface LinkProps
+/** All properties available to an `<a>` element are available. See [anchor element documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes).*/
+ extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
+    /** The destination URL that the link points to. This is the `href` attribute of the underlying `<a>` element. */
+    to: string;
+    /** Whether to update the state object or URL of the current history entry. Refer to the [history.replaceState documentation](https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState). */
+    replace?: boolean;
+    /** The custom client state with the navigation. */
+    clientState?: any;
+    /** Whether to reload the whole document on navigation. */
+    reloadDocument?: boolean;
+}
+/**
+ * The `Link` component lets users navigate from one page to another.
+ * It renders an accessible `<a>` element.
+ */
+export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;

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

@@ -1,5 +1,43 @@
-import React from 'react';
-import { Link as RRLink } from 'react-router-dom';
-export function Link(props) {
-    return import.meta.env.SSR ? (React.createElement("a", { href: props.to, ...props, to: null })) : (React.createElement(RRLink, { ...props }));
+import React, { useCallback } from 'react';
+import { useRouter } from '../Router';
+import { createPath } from 'history';
+import { useNavigate } from '../../hooks/useNavigate';
+/**
+ * The `Link` component lets users navigate from one page to another.
+ * It renders an accessible `<a>` element.
+ */
+export const Link = React.forwardRef(function Link(props, ref) {
+    const navigate = useNavigate();
+    const { location } = useRouter();
+    const { reloadDocument, target, replace: _replace, to, onClick, clientState, } = props;
+    const internalClick = useCallback((e) => {
+        if (onClick)
+            onClick(e);
+        if (!reloadDocument && // do regular browser stuff
+            e.button === 0 && // Ignore everything but left clicks
+            (!target || target === '_self') && // Let browser handle "target=_blank"
+            !isModifiedEvent(e) // Ignore modifier key clicks
+        ) {
+            e.preventDefault();
+            // If the URL hasn't changed, the regular <a> will do a replace
+            const replace = !!_replace || createPath(location) === createPath({ pathname: to });
+            navigate(props.to, {
+                replace,
+                clientState,
+            });
+        }
+    }, [reloadDocument, target, _replace, to, clientState, onClick, location]);
+    return (React.createElement("a", { ...without(props, ['to', 'replace', 'clientState', 'reloadDocument']), ref: ref, onClick: internalClick, href: props.to }, props.children));
+});
+function isModifiedEvent(event) {
+    return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
+}
+function without(obj, props) {
+    const newObj = {};
+    for (const key of Object.keys(obj)) {
+        if (!props.includes(key)) {
+            newObj[key] = obj[key];
+        }
+    }
+    return newObj;
 }

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

@@ -4,7 +4,7 @@ import { ParsedMetafield } from '../../types';
 export interface MetafieldProps {
     /** A [Metafield object](/api/storefront/reference/common-objects/metafield) from the Storefront API. */
     metafield: ParsedMetafield;
-    /** An HTML tag to be rendered as the base element wrapper. The default value varies depending on [`metafield.type`](/apps/metafields/definitions/types). */
+    /** An HTML tag to be rendered as the base element wrapper. The default value varies depending on [metafield.type](/apps/metafields/types). */
     as?: ElementType;
 }
 /**

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

@@ -0,0 +1 @@
+export { Router, useRouter, useLocation, } from '../../foundation/Router/Router.client';

package/dist/esnext/components/Router/index.js

@@ -0,0 +1 @@
+export { Router, useRouter, useLocation, } from '../../foundation/Router/Router.client';

package/dist/esnext/components/Seo/CollectionSeo.client.js

@@ -5,8 +5,8 @@ import { TwitterSeo } from './TwitterSeo.client';
 import { ImageSeo } from './ImageSeo.client';
 export function CollectionSeo({ title, description, seo, image }) {
     var _a, _b;
-    const seoTitle = (_a = (seo && seo.title)) !== null && _a !== void 0 ? _a : title;
-    const seoDescription = (_b = (seo && seo.description)) !== null && _b !== void 0 ? _b : description;
+    const seoTitle = (_a = seo.title) !== null && _a !== void 0 ? _a : title;
+    const seoDescription = (_b = seo.description) !== null && _b !== void 0 ? _b : description;
     return (React.createElement(React.Fragment, null,
         React.createElement(TitleSeo, { title: seoTitle }),
         React.createElement(DescriptionSeo, { description: seoDescription }),

package/dist/esnext/components/Seo/ProductSeo.client.d.ts

@@ -1,2 +1,2 @@
 import { Product } from './types';
-export declare function ProductSeo({ url, title, description, seo, vendor, images, variants, }: Product): JSX.Element;
+export declare function ProductSeo({ url, title, description, seo, vendor, featuredImage, variants, }: Product): JSX.Element;

package/dist/esnext/components/Seo/ProductSeo.client.js

@@ -4,12 +4,11 @@ import { TitleSeo } from './TitleSeo.client';
 import { DescriptionSeo } from './DescriptionSeo.client';
 import { TwitterSeo } from './TwitterSeo.client';
 import { ImageSeo } from './ImageSeo.client';
-export function ProductSeo({ url, title, description, seo, vendor, images, variants, }) {
-    var _a, _b, _c;
+export function ProductSeo({ url, title, description, seo, vendor, featuredImage, variants, }) {
+    var _a, _b;
     const seoTitle = (_a = seo === null || seo === void 0 ? void 0 : seo.title) !== null && _a !== void 0 ? _a : title;
     const seoDescription = (_b = seo === null || seo === void 0 ? void 0 : seo.description) !== null && _b !== void 0 ? _b : description;
     let firstVariantPrice;
-    let firstImage;
     const productSchema = {
         '@context': 'http://schema.org/',
         '@type': 'Product',
@@ -21,10 +20,7 @@ export function ProductSeo({ url, title, description, seo, vendor, images, varia
         },
         url,
     };
-    if (images.edges.length > 0) {
-        firstImage = (_c = images.edges[0]) === null || _c === void 0 ? void 0 : _c.node;
-        productSchema.image = firstImage.url;
-    }
+    productSchema.image = featuredImage.url;
     if (variants.edges.length > 0) {
         const firstVariant = variants.edges[0].node;
         firstVariantPrice = firstVariant.priceV2;
@@ -56,5 +52,5 @@ export function ProductSeo({ url, title, description, seo, vendor, images, varia
         React.createElement(TitleSeo, { title: seoTitle }),
         React.createElement(DescriptionSeo, { description: seoDescription }),
         React.createElement(TwitterSeo, { title: seoTitle, description: seoDescription }),
-        firstImage && React.createElement(ImageSeo, { ...firstImage })));
+        featuredImage && React.createElement(ImageSeo, { ...featuredImage })));
 }

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

@@ -32,11 +32,7 @@ export interface Product {
         description?: Description;
     };
     vendor: string;
-    images: {
-        edges: {
-            node: Image;
-        }[];
-    };
+    featuredImage: Image;
     variants: {
         edges: {
             node: {
@@ -56,7 +52,7 @@ export interface Product {
 export interface Collection {
     title: Title;
     description: Description;
-    seo?: {
+    seo: {
         title?: Title;
         description?: Description;
     };

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

@@ -1,9 +1,20 @@
-export interface ShopPayButtonProps {
-    /** An array of IDs of the variants to purchase with Shop Pay. */
-    variantIds: string[];
+export declare type ShopPayButtonProps = {
     /** A string of classes to apply to the `div` that wraps the Shop Pay button. */
     className?: string;
-}
+} & ({
+    /** An array of IDs of the variants to purchase with Shop Pay. This will only ever have a quantity of 1 for each variant. If you want to use other quantities, then use 'variantIdsAndQuantities'. */
+    variantIds: string[];
+    /** An array of variant IDs and quantities to purchase with Shop Pay. */
+    variantIdsAndQuantities?: never;
+} | {
+    /** An array of IDs of the variants to purchase with Shop Pay. This will only ever have a quantity of 1 for each variant. If you want to use other quantities, then use 'variantIdsAndQuantities'. */
+    variantIds?: never;
+    /** An array of variant IDs and quantities to purchase with Shop Pay. */
+    variantIdsAndQuantities: Array<{
+        id: string;
+        quantity: number;
+    }>;
+});
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -17,4 +28,10 @@ declare global {
 /**
  * The `ShopPayButton` component renders a button that redirects to the Shop Pay checkout.
  */
-export declare function ShopPayButton({ variantIds, className }: ShopPayButtonProps): JSX.Element;
+export declare function ShopPayButton({ variantIds, className, variantIdsAndQuantities, }: ShopPayButtonProps): JSX.Element;
+/**
+ * Takes a string in the format of "gid://shopify/ProductVariant/41007289630776" and returns a string of the ID part at the end: "41007289630776"
+ */
+export declare function getIdFromGid(id?: string): string | undefined;
+export declare const MissingPropsErrorMessage = "You must pass in either \"variantIds\" or \"variantIdsAndQuantities\" to ShopPayButton";
+export declare const DoublePropsErrorMessage = "You must provide either a variantIds or variantIdsAndQuantities prop, but not both in the ShopPayButton component";

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

@@ -1,23 +1,56 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { useShop } from '../../foundation/useShop';
 import { useLoadScript } from '../../hooks/useLoadScript/useLoadScript';
-const URL = 'https://cdn.shopify.com/shopifycloud/shop-js/v0.1/client.js';
+const URL = 'https://cdn.shopify.com/shopifycloud/shop-js/v0.8/client.js';
 /**
  * The `ShopPayButton` component renders a button that redirects to the Shop Pay checkout.
  */
-export function ShopPayButton({ variantIds, className }) {
-    const [ids, setIds] = useState([]);
+export function ShopPayButton({ variantIds, className, variantIdsAndQuantities, }) {
     const { storeDomain } = useShop();
     const shopPayLoadedStatus = useLoadScript(URL);
-    useEffect(() => {
-        const ids = variantIds.reduce((accumulator, gid) => {
-            const id = gid.split('/').pop();
-            if (id) {
-                accumulator.push(id);
+    let ids;
+    if (variantIds && variantIdsAndQuantities) {
+        throw new Error(DoublePropsErrorMessage);
+    }
+    if (variantIds) {
+        ids = variantIds.reduce((prev, curr) => {
+            const bareId = getIdFromGid(curr);
+            if (bareId) {
+                prev.push(bareId);
             }
-            return accumulator;
+            return prev;
         }, []);
-        setIds(ids);
-    }, [variantIds]);
+    }
+    else if (variantIdsAndQuantities) {
+        ids = variantIdsAndQuantities.reduce((prev, curr) => {
+            var _a;
+            const bareId = getIdFromGid(curr === null || curr === void 0 ? void 0 : curr.id);
+            if (bareId) {
+                prev.push(`${bareId}:${(_a = curr === null || curr === void 0 ? void 0 : curr.quantity) !== null && _a !== void 0 ? _a : 1}`);
+            }
+            return prev;
+        }, []);
+    }
+    else {
+        throw new Error(MissingPropsErrorMessage);
+    }
     return (React.createElement("div", { className: className, tabIndex: 1 }, shopPayLoadedStatus === 'done' && (React.createElement("shop-pay-button", { "store-url": `https://${storeDomain}`, variants: ids.join(',') }))));
 }
+/**
+ * Takes a string in the format of "gid://shopify/ProductVariant/41007289630776" and returns a string of the ID part at the end: "41007289630776"
+ */
+export function getIdFromGid(id) {
+    if (!id)
+        return;
+    let gid;
+    // atob() / Buffer required for SFAPI 2022-01. Remove atob() when upgrading to 2022-04
+    if (typeof (window === null || window === void 0 ? void 0 : window.atob) !== 'undefined') {
+        gid = window.atob(id);
+    }
+    else {
+        gid = Buffer.from(id, 'base64').toString('ascii');
+    }
+    return gid.split('/').pop();
+}
+export const MissingPropsErrorMessage = `You must pass in either "variantIds" or "variantIdsAndQuantities" to ShopPayButton`;
+export const DoublePropsErrorMessage = `You must provide either a variantIds or variantIdsAndQuantities prop, but not both in the ShopPayButton component`;

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

@@ -1,4 +1,4 @@
-import { ElementType, ReactNode } from 'react';
+import { ElementType } from 'react';
 import { Props } from '../types';
 import { UnitPriceMeasurement, MoneyV2 } from '../../graphql/types/types';
 export interface UnitPriceProps {
@@ -6,17 +6,12 @@ export interface UnitPriceProps {
     unitPrice: MoneyV2;
     /** A [`UnitPriceMeasurement` object](/api/storefront/reference/products/unitpricemeasurement). */
     unitPriceMeasurement: UnitPriceMeasurement;
-    /** A function that takes an object returned by the `UnitPrice` component and returns a `ReactNode`. */
-    children?: ReactNode;
     /** An HTML tag to be rendered as the base element wrapper. The default is `div`. */
     as?: ElementType;
 }
 /**
  * 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).
- *
- * If `children` is a function, then it will provide render props for the `children` corresponding to the object
- * returned by the `useMoney` hook and the `UnitPriceMeasurement` object.
  */
 export declare function UnitPrice<TTag extends ElementType>(props: Props<TTag> & UnitPriceProps): JSX.Element;
 export declare namespace UnitPrice {

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

@@ -1,26 +1,17 @@
 import React from 'react';
-import { useMoney } from '../../hooks';
 import { Money } from '../Money';
 import { UnitPriceFragment as Fragment } from '../../graphql/graphql-constants';
 /**
  * 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).
- *
- * If `children` is a function, then it will provide render props for the `children` corresponding to the object
- * returned by the `useMoney` hook and the `UnitPriceMeasurement` object.
  */
 export function UnitPrice(props) {
-    const { unitPrice, unitPriceMeasurement, children, as, ...passthroughProps } = props;
+    const { unitPrice, unitPriceMeasurement, as, ...passthroughProps } = props;
     const Wrapper = as !== null && as !== void 0 ? as : 'div';
-    const unitPriceMoneyObject = useMoney(unitPrice);
-    const unitPriceAndMeasurementObject = {
-        ...unitPriceMoneyObject,
-        ...unitPriceMeasurement,
-    };
-    return (React.createElement(Wrapper, { ...passthroughProps }, typeof children === 'function' ? (children(unitPriceAndMeasurementObject)) : (React.createElement(React.Fragment, null,
+    return (React.createElement(Wrapper, { ...passthroughProps },
         React.createElement(Money, { money: unitPrice }),
         "/",
-        unitPriceMeasurement.referenceUnit))));
+        unitPriceMeasurement.referenceUnit));
 }
 UnitPrice.Fragment = Fragment;
 export const UnitPriceFragment = Fragment;

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

@@ -41,12 +41,12 @@ export { SelectedVariantAddToCartButton } from './SelectedVariantAddToCartButton
 export { SelectedVariantBuyNowButton } from './SelectedVariantBuyNowButton';
 export { SelectedVariantShopPayButton } from './SelectedVariantShopPayButton';
 export { SelectedVariantImage } from './SelectedVariantImage';
+export { SelectedVariantUnitPrice } from './SelectedVariantUnitPrice';
 export type { BuyNowButtonProps, BuyNowButtonPropsWeControl, } from './BuyNowButton';
 export { BuyNowButton } from './BuyNowButton';
 export type { ShopPayButtonProps } from './ShopPayButton';
 export { ShopPayButton } from './ShopPayButton';
 export { useAvailableCountries } from '../hooks/useAvailableCountries';
 export { useCountry } from '../hooks/useCountry';
-export declare const Product: Function & Record<string, any>;
-export declare const CartLine: Function & Record<string, any>;
 export { Seo } from './Seo';
+export { useNavigate } from '../hooks/useNavigate';

package/dist/esnext/components/index.js

@@ -31,56 +31,10 @@ export { SelectedVariantAddToCartButton } from './SelectedVariantAddToCartButton
 export { SelectedVariantBuyNowButton } from './SelectedVariantBuyNowButton';
 export { SelectedVariantShopPayButton } from './SelectedVariantShopPayButton';
 export { SelectedVariantImage } from './SelectedVariantImage';
+export { SelectedVariantUnitPrice } from './SelectedVariantUnitPrice';
 export { BuyNowButton } from './BuyNowButton';
 export { ShopPayButton } from './ShopPayButton';
 export { useAvailableCountries } from '../hooks/useAvailableCountries';
 export { useCountry } from '../hooks/useCountry';
-/**
- * Provide namespaced aliases for the `Product` group.
- */
-import { ProductProvider } from './ProductProvider';
-import { ProductPrice } from './ProductPrice';
-import { ProductDescription } from './ProductDescription';
-import { ProductTitle } from './ProductTitle';
-import { ProductMetafield } from './ProductMetafield';
-import { SelectedVariantAddToCartButton } from './SelectedVariantAddToCartButton';
-import { SelectedVariantBuyNowButton } from './SelectedVariantBuyNowButton';
-import { SelectedVariantShopPayButton } from './SelectedVariantShopPayButton';
-import { SelectedVariantImage } from './SelectedVariantImage';
-import { SelectedVariantPrice } from './SelectedVariantPrice';
-import { SelectedVariantUnitPrice } from './SelectedVariantUnitPrice';
-import { SelectedVariantMetafield } from './SelectedVariantMetafield';
-export const Product = ProductProvider;
-Product.Description = ProductDescription;
-Product.Price = ProductPrice;
-Product.Title = ProductTitle;
-Product.Metafield = ProductMetafield;
-Product.SelectedVariant = {
-    AddToCartButton: SelectedVariantAddToCartButton,
-    BuyNowButton: SelectedVariantBuyNowButton,
-    ShopPayButton: SelectedVariantShopPayButton,
-    Price: SelectedVariantPrice,
-    Image: SelectedVariantImage,
-    UnitPrice: SelectedVariantUnitPrice,
-    Metafield: SelectedVariantMetafield,
-};
-/**
- * Provide namespaced aliases for the `CartLine` group.
- */
-import { CartLineProvider } from './CartLineProvider';
-import { CartLineImage } from './CartLineImage';
-import { CartLinePrice } from './CartLinePrice';
-import { CartLineProductTitle } from './CartLineProductTitle';
-import { CartLineQuantity } from './CartLineQuantity';
-import { CartLineQuantityAdjustButton } from './CartLineQuantityAdjustButton';
-import { CartLineSelectedOptions } from './CartLineSelectedOptions';
-import { CartLineAttributes } from './CartLineAttributes';
-export const CartLine = CartLineProvider;
-CartLine.Image = CartLineImage;
-CartLine.Price = CartLinePrice;
-CartLine.ProductTitle = CartLineProductTitle;
-CartLine.Quantity = CartLineQuantity;
-CartLine.QuantityAdjustButton = CartLineQuantityAdjustButton;
-CartLine.SelectedOptions = CartLineSelectedOptions;
-CartLine.Attributes = CartLineAttributes;
 export { Seo } from './Seo';
+export { useNavigate } from '../hooks/useNavigate';

package/dist/esnext/constants.d.ts

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

package/dist/esnext/constants.js

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

package/dist/esnext/entry-client.js

@@ -1,10 +1,10 @@
 import React, { Suspense, useState } from 'react';
 // @ts-ignore
 import { hydrateRoot } from 'react-dom';
-import { BrowserRouter } from 'react-router-dom';
 import { ErrorBoundary } from 'react-error-boundary';
 import { useServerResponse } from './framework/Hydration/rsc';
-import { ServerStateProvider, ServerStateRouter } from './client';
+import { ServerStateProvider } from './client';
+import { Router } from './foundation/Router/Router.client';
 const renderHydrogen = async (ClientWrapper) => {
     const root = document.getElementById('root');
     if (!root) {
@@ -23,8 +23,7 @@ function Content({ clientWrapper: ClientWrapper }) {
     });
     const response = useServerResponse(serverState);
     return (React.createElement(ServerStateProvider, { serverState: serverState, setServerState: setServerState },
-        React.createElement(BrowserRouter, null,
-            React.createElement(ServerStateRouter, null),
+        React.createElement(Router, null,
             React.createElement(ClientWrapper, null, response.readRoot()))));
 }
 function Error({ error }) {

package/dist/esnext/entry-server.js

@@ -9,6 +9,7 @@ import { ServerRequestProvider } from './foundation/ServerRequestProvider';
 import { getApiRouteFromURL, getApiRoutesFromPages } from './utilities/apiRoutes';
 import { ServerStateProvider } from './foundation/ServerStateProvider';
 import { ssrRenderToPipeableStream, ssrRenderToReadableStream, rscRenderToReadableStream, createFromReadableStream, } from './streaming.server';
+import { RSC_PATHNAME } from './constants';
 /**
  * If a query is taking too long, or something else went wrong,
  * send back a response containing the Suspense fallback and rely
@@ -528,7 +529,7 @@ async function isStreamingSupported() {
 }
 function setupCurrentRequest(url, request) {
     const log = getLoggerFromContext(request);
-    const state = url.pathname === '/react'
+    const state = url.pathname === RSC_PATHNAME
         ? JSON.parse(url.searchParams.get('state') || '{}')
         : { pathname: url.pathname, search: url.search };
     const componentResponse = new ServerComponentResponse();

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

@@ -1,13 +1,9 @@
 import React from 'react';
 import { Helmet as ActualHelmet, HelmetData, } from 'react-helmet-async';
-import { useServerRequest } from '../ServerRequestProvider';
-import { META_ENV_SSR } from '../../utilities/meta-env-ssr';
+import { useEnvContext } from '../ssr-interop';
 const clientHelmetData = new HelmetData({});
 export function Helmet({ children, ...props }) {
-    // @ts-ignore
-    const helmetData = META_ENV_SSR
-        ? useServerRequest().ctx.helmet
-        : clientHelmetData;
+    const helmetData = useEnvContext((req) => req.ctx.helmet, clientHelmetData);
     return (
     // @ts-ignore
     React.createElement(ActualHelmet, { ...props, helmetData: helmetData }, children));

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

@@ -0,0 +1,12 @@
+import { BrowserHistory, Location } from 'history';
+import { FC } from 'react';
+declare type RouterContextValue = {
+    history: BrowserHistory;
+    location: Location;
+};
+export declare const Router: FC<{
+    history?: BrowserHistory;
+}>;
+export declare function useRouter(): RouterContextValue;
+export declare function useLocation(): Location;
+export {};

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

@@ -0,0 +1,44 @@
+import { createBrowserHistory } from 'history';
+import React, { createContext, useContext, useMemo, useState, useEffect, } from 'react';
+import { META_ENV_SSR } from '../ssr-interop';
+import { useServerState } from '../useServerState';
+const RouterContext = createContext({});
+export const Router = ({ history: pHistory, children, }) => {
+    const history = useMemo(() => pHistory || createBrowserHistory(), [pHistory]);
+    const [firstLoad, setFirstLoad] = useState(true);
+    const [location, setLocation] = useState(history.location);
+    const { pending, setServerState } = useServerState();
+    useEffect(() => {
+        // The app has just loaded
+        if (firstLoad)
+            setFirstLoad(false);
+        // A navigation event has just happened
+        else if (!pending) {
+            window.scrollTo(0, 0);
+        }
+    }, [pending]);
+    useEffect(() => {
+        const unlisten = history.listen(({ location: newLocation }) => {
+            setServerState({
+                pathname: newLocation.pathname,
+                search: location.search || undefined,
+            });
+            setLocation(newLocation);
+        });
+        return () => unlisten();
+    }, [history]);
+    return (React.createElement(RouterContext.Provider, { value: {
+            history,
+            location,
+        } }, children));
+};
+export function useRouter() {
+    const router = useContext(RouterContext);
+    if (!router && META_ENV_SSR) {
+        throw new Error('useRouter must be used within a <Router> component');
+    }
+    return router;
+}
+export function useLocation() {
+    return useRouter().location;
+}

package/dist/esnext/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 {};