@shopify/hydrogen 0.22.1 → 0.25.0

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

@@ -0,0 +1,133 @@
+import React, { useMemo, useState, useEffect, useCallback } from 'react';
+import { ProductOptionsContext } from './context';
+import { getSelectedVariant, getOptions, } from '../../hooks/useProductOptions/helpers';
+import { flattenConnection } from '../../utilities/flattenConnection';
+export function ProductOptionsProvider({ children, data: product, initialVariantId: explicitVariantId, }) {
+    // The flattened variants
+    const variants = useMemo(() => flattenConnection(product.variants ?? {}), [product.variants]);
+    if (!isProductVariantArray(variants)) {
+        throw new Error(`<ProductOptionsProvider/> requires 'product.variants.nodes' or 'product.variants.edges'`);
+    }
+    // All the options available for a product, based on all the variants
+    const options = useMemo(() => getOptions(variants), [variants]);
+    /**
+     * Track the selectedVariant within the provider.
+     */
+    const [selectedVariant, setSelectedVariant] = useState(() => getVariantBasedOnIdProp(explicitVariantId, variants));
+    /**
+     * Track the selectedOptions within the provider. If a `initialVariantId`
+     * is passed, use that to select initial options.
+     */
+    const [selectedOptions, setSelectedOptions] = useState(() => getSelectedOptions(selectedVariant));
+    /**
+     * When the initialVariantId changes, we need to make sure we
+     * update the selected variant and selected options. If not,
+     * then the selected variant and options will reference incorrect
+     * values.
+     */
+    useEffect(() => {
+        const newSelectedVariant = getVariantBasedOnIdProp(explicitVariantId, variants);
+        setSelectedVariant(newSelectedVariant);
+        setSelectedOptions(getSelectedOptions(newSelectedVariant));
+    }, [explicitVariantId, variants]);
+    /**
+     * Allow the developer to select an option.
+     */
+    const setSelectedOption = useCallback((name, value) => {
+        setSelectedOptions((selectedOptions) => {
+            const opts = { ...selectedOptions, [name]: value };
+            setSelectedVariant(getSelectedVariant(variants, opts));
+            return opts;
+        });
+    }, [setSelectedOptions, variants]);
+    const isOptionInStock = useCallback((option, value) => {
+        const proposedVariant = getSelectedVariant(variants, {
+            ...selectedOptions,
+            ...{ [option]: value },
+        });
+        return proposedVariant?.availableForSale ?? true;
+    }, [selectedOptions, variants]);
+    const sellingPlanGroups = useMemo(() => flattenConnection(product.sellingPlanGroups ?? {}).map((sellingPlanGroup) => ({
+        ...sellingPlanGroup,
+        sellingPlans: flattenConnection(sellingPlanGroup?.sellingPlans ?? {}),
+    })), [product.sellingPlanGroups]);
+    /**
+     * Track the selectedSellingPlan within the hook. If `initialSellingPlanId`
+     * is passed, use that as an initial value. Look it up from the `selectedVariant`, since
+     * that is also a requirement.
+     */
+    const [selectedSellingPlan, setSelectedSellingPlan] = useState(undefined);
+    const selectedSellingPlanAllocation = useMemo(() => {
+        if (!selectedVariant || !selectedSellingPlan) {
+            return;
+        }
+        if (!selectedVariant.sellingPlanAllocations?.nodes &&
+            !selectedVariant.sellingPlanAllocations?.edges) {
+            throw new Error(`<ProductOptionsProvider/>: You must include 'sellingPlanAllocations.nodes' or 'sellingPlanAllocations.edges' in your variants in order to calculate selectedSellingPlanAllocation`);
+        }
+        return flattenConnection(selectedVariant.sellingPlanAllocations).find((allocation) => allocation?.sellingPlan?.id === selectedSellingPlan.id);
+    }, [selectedVariant, selectedSellingPlan]);
+    const value = useMemo(() => ({
+        variants,
+        variantsConnection: product.variants,
+        options,
+        selectedVariant,
+        setSelectedVariant,
+        selectedOptions,
+        setSelectedOption,
+        setSelectedOptions,
+        isOptionInStock,
+        selectedSellingPlan,
+        setSelectedSellingPlan,
+        selectedSellingPlanAllocation,
+        sellingPlanGroups,
+        sellingPlanGroupsConnection: product.sellingPlanGroups,
+    }), [
+        isOptionInStock,
+        options,
+        product.sellingPlanGroups,
+        product.variants,
+        selectedOptions,
+        selectedSellingPlan,
+        selectedSellingPlanAllocation,
+        selectedVariant,
+        sellingPlanGroups,
+        setSelectedOption,
+        variants,
+    ]);
+    return (React.createElement(ProductOptionsContext.Provider, { value: value }, children));
+}
+function getVariantBasedOnIdProp(explicitVariantId, variants) {
+    // get the initial variant based on the logic outlined in the comments for 'initialVariantId' above
+    // * 1. If `initialVariantId` is provided, then it's used even if it's out of stock.
+    if (explicitVariantId) {
+        const foundVariant = variants.find((variant) => variant?.id === explicitVariantId);
+        if (!foundVariant) {
+            console.warn(`<ProductOptionsProvider/> received a 'initialVariantId' prop, but could not actually find a variant with that ID`);
+        }
+        return foundVariant;
+    }
+    // * 2. If `initialVariantId` is provided but is `null`, then no variant is used.
+    if (explicitVariantId === null) {
+        return null;
+    }
+    // * 3. If nothing is passed to `initialVariantId` then the first available / in-stock variant is used.
+    // * 4. If nothing is passed to `initialVariantId` and no variants are in stock, then the first variant is used.
+    if (explicitVariantId === undefined) {
+        return variants.find((variant) => variant?.availableForSale) || variants[0];
+    }
+}
+function getSelectedOptions(selectedVariant) {
+    return selectedVariant?.selectedOptions
+        ? selectedVariant.selectedOptions.reduce((memo, optionSet) => {
+            memo[optionSet?.name ?? ''] = optionSet?.value ?? '';
+            return memo;
+        }, {})
+        : {};
+}
+function isProductVariantArray(maybeVariantArray) {
+    if (!maybeVariantArray || !Array.isArray(maybeVariantArray)) {
+        return false;
+    }
+    return true;
+}

package/dist/esnext/components/ProductOptionsProvider/context.d.ts

@@ -0,0 +1,2 @@
+import { ProductOptionsHookValue } from '../../hooks';
+export declare const ProductOptionsContext: import("react").Context<ProductOptionsHookValue | null>;

package/dist/esnext/components/{ProductProvider → ProductOptionsProvider}/context.js

@@ -1,3 +1,2 @@
 import { createContext } from 'react';
-export const ProductContext = createContext(null);
 export const ProductOptionsContext = createContext(null);

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

@@ -0,0 +1,2 @@
+export { ProductOptionsProvider } from './ProductOptionsProvider.client';
+export { useProductOptions } from '../../hooks/useProductOptions/useProductOptions.client';

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

@@ -0,0 +1,2 @@
+export { ProductOptionsProvider } from './ProductOptionsProvider.client';
+export { useProductOptions } from '../../hooks/useProductOptions/useProductOptions.client';

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

@@ -1,6 +1,9 @@
 import React from 'react';
+import type { Product } from '../../storefront-api-types';
 import { Money } from '../Money';
+import type { PartialDeep } from 'type-fest';
 export interface ProductPriceProps {
+    data: PartialDeep<Product>;
     /** The type of price. Valid values: `regular` (default) or `compareAt`. */
     priceType?: 'regular' | 'compareAt';
     /** The type of value. Valid values: `min` (default), `max` or `unit`. */
@@ -10,6 +13,6 @@ export interface ProductPriceProps {
 }
 /**
  * The `ProductPrice` component renders a `Money` component with the product
- * [`priceRange`](https://shopify.dev/api/storefront/reference/products/productpricerange)'s `maxVariantPrice` or `minVariantPrice`, for either the regular price or compare at price range. It must be a descendent of the `ProductProvider` component.
+ * [`priceRange`](https://shopify.dev/api/storefront/reference/products/productpricerange)'s `maxVariantPrice` or `minVariantPrice`, for either the regular price or compare at price range.
  */
-export declare function ProductPrice<TTag extends keyof JSX.IntrinsicElements>(props: Omit<React.ComponentProps<typeof Money>, 'data' | 'measurement'> & ProductPriceProps): JSX.Element | null;
+export declare function ProductPrice(props: Omit<React.ComponentProps<typeof Money>, 'data' | 'measurement'> & ProductPriceProps): JSX.Element | null;

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

@@ -1,34 +1,32 @@
 import React from 'react';
 import { Money } from '../Money';
-import { useProduct } from '../ProductProvider';
+import { flattenConnection } from '../../utilities/flattenConnection';
 /**
  * The `ProductPrice` component renders a `Money` component with the product
- * [`priceRange`](https://shopify.dev/api/storefront/reference/products/productpricerange)'s `maxVariantPrice` or `minVariantPrice`, for either the regular price or compare at price range. It must be a descendent of the `ProductProvider` component.
+ * [`priceRange`](https://shopify.dev/api/storefront/reference/products/productpricerange)'s `maxVariantPrice` or `minVariantPrice`, for either the regular price or compare at price range.
  */
 export function ProductPrice(props) {
-    var _a, _b, _c, _d, _e, _f, _g;
-    const product = useProduct();
-    const { priceType = 'regular', variantId, valueType = 'min', ...passthroughProps } = props;
+    const { priceType = 'regular', variantId, valueType = 'min', data: product, ...passthroughProps } = props;
     if (product == null) {
-        throw new Error('Expected a ProductProvider context, but none was found');
+        throw new Error(`<ProductPrice/> requires a product as the 'data' prop`);
     }
     let price;
     let measurement;
     const variant = variantId
-        ? (_a = product === null || product === void 0 ? void 0 : product.variants) === null || _a === void 0 ? void 0 : _a.find((variant) => (variant === null || variant === void 0 ? void 0 : variant.id) === variantId)
+        ? flattenConnection(product?.variants ?? {}).find((variant) => variant?.id === variantId) ?? null
         : null;
     if (priceType === 'compareAt') {
         if (variantId && variant) {
-            if (((_b = variant.compareAtPriceV2) === null || _b === void 0 ? void 0 : _b.amount) === ((_c = variant.priceV2) === null || _c === void 0 ? void 0 : _c.amount)) {
+            if (variant.compareAtPriceV2?.amount === variant.priceV2?.amount) {
                 return null;
             }
             price = variant.compareAtPriceV2;
         }
         else if (valueType === 'max') {
-            price = (_d = product === null || product === void 0 ? void 0 : product.compareAtPriceRange) === null || _d === void 0 ? void 0 : _d.maxVariantPrice;
+            price = product?.compareAtPriceRange?.maxVariantPrice;
         }
         else {
-            price = (_e = product === null || product === void 0 ? void 0 : product.compareAtPriceRange) === null || _e === void 0 ? void 0 : _e.minVariantPrice;
+            price = product?.compareAtPriceRange?.minVariantPrice;
         }
     }
     else {
@@ -40,10 +38,10 @@ export function ProductPrice(props) {
             }
         }
         else if (valueType === 'max') {
-            price = (_f = product.priceRange) === null || _f === void 0 ? void 0 : _f.maxVariantPrice;
+            price = product.priceRange?.maxVariantPrice;
         }
         else {
-            price = (_g = product.priceRange) === null || _g === void 0 ? void 0 : _g.minVariantPrice;
+            price = product.priceRange?.minVariantPrice;
         }
     }
     if (!price) {

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

@@ -4,9 +4,8 @@ import { DescriptionSeo } from './DescriptionSeo.client';
 import { TwitterSeo } from './TwitterSeo.client';
 import { ImageSeo } from './ImageSeo.client';
 export function CollectionSeo({ title, description, seo, image, }) {
-    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;
+    const seoTitle = seo?.title ?? title;
+    const seoDescription = seo?.description ?? description;
     return (React.createElement(React.Fragment, null,
         React.createElement(TitleSeo, { title: seoTitle }),
         React.createElement(DescriptionSeo, { description: seoDescription }),

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

@@ -7,10 +7,10 @@ import { TwitterSeo } from './TwitterSeo.client';
 export function DefaultPageSeo({ title, description, url, titleTemplate, lang, }) {
     const { languageCode: fallBacklang } = useShop();
     return (React.createElement(React.Fragment, null,
-        React.createElement(Head, { defaultTitle: title !== null && title !== void 0 ? title : '', titleTemplate: titleTemplate !== null && titleTemplate !== void 0 ? titleTemplate : `%s - ${title}` },
-            React.createElement("html", { lang: lang !== null && lang !== void 0 ? lang : fallBacklang }),
+        React.createElement(Head, { defaultTitle: title ?? '', titleTemplate: titleTemplate ?? `%s - ${title}` },
+            React.createElement("html", { lang: lang ?? fallBacklang }),
             React.createElement("meta", { property: "og:type", content: "website" }),
-            React.createElement("meta", { property: "og:site_name", content: title !== null && title !== void 0 ? title : '' }),
+            React.createElement("meta", { property: "og:site_name", content: title ?? '' }),
             React.createElement("meta", { property: "og:url", content: url })),
         React.createElement(TitleSeo, { title: title }),
         React.createElement(DescriptionSeo, { description: description }),

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

@@ -4,7 +4,7 @@ import { Head } from '../../client';
 export function NoIndexPageSeo({ title, titleTemplate, lang, }) {
     const { languageCode: fallBacklang } = useShop();
     return (React.createElement(React.Fragment, null,
-        React.createElement(Head, { defaultTitle: title !== null && title !== void 0 ? title : '', titleTemplate: titleTemplate !== null && titleTemplate !== void 0 ? titleTemplate : `%s - ${title}` },
-            React.createElement("html", { lang: lang !== null && lang !== void 0 ? lang : fallBacklang }),
+        React.createElement(Head, { defaultTitle: title ?? '', titleTemplate: titleTemplate ?? `%s - ${title}` },
+            React.createElement("html", { lang: lang ?? fallBacklang }),
             React.createElement("meta", { name: "robots", content: "noindex" }))));
 }

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

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

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

@@ -4,10 +4,10 @@ import { TitleSeo } from './TitleSeo.client';
 import { DescriptionSeo } from './DescriptionSeo.client';
 import { TwitterSeo } from './TwitterSeo.client';
 import { ImageSeo } from './ImageSeo.client';
+import { flattenConnection } from '../../utilities';
 export function ProductSeo({ url, title, description, seo, vendor, featuredImage, variants, }) {
-    var _a, _b, _c;
-    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;
+    const seoTitle = seo?.title ?? title;
+    const seoDescription = seo?.description ?? description;
     let firstVariantPrice;
     const productSchema = {
         '@context': 'http://schema.org/',
@@ -23,16 +23,15 @@ export function ProductSeo({ url, title, description, seo, vendor, featuredImage
     if (featuredImage) {
         productSchema.image = featuredImage.url;
     }
-    if ((variants === null || variants === void 0 ? void 0 : variants.edges) && variants.edges.length > 0) {
-        const firstVariant = (_c = variants.edges[0]) === null || _c === void 0 ? void 0 : _c.node;
-        firstVariantPrice = firstVariant === null || firstVariant === void 0 ? void 0 : firstVariant.priceV2;
+    const flattenedVariants = flattenConnection(variants ?? {});
+    if (flattenedVariants.length) {
+        const firstVariant = flattenedVariants[0];
+        firstVariantPrice = firstVariant?.priceV2;
         if (firstVariant && firstVariant.sku) {
             productSchema.sku = firstVariant.sku;
         }
-        productSchema.offers = variants.edges.map((edge) => {
-            var _a;
-            const node = edge === null || edge === void 0 ? void 0 : edge.node;
-            if (!node || !((_a = node.priceV2) === null || _a === void 0 ? void 0 : _a.amount) || !node.priceV2.currencyCode) {
+        productSchema.offers = flattenedVariants.map((node) => {
+            if (!node || !node.priceV2?.amount || !node.priceV2.currencyCode) {
                 throw new Error(`<ProductSeo/> requires variant.PriceV2 'amount' and 'currency`);
             }
             const offerSchema = {

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

@@ -23,10 +23,9 @@ export function ShopPayButton({ variantIds, className, variantIdsAndQuantities,
     }
     else if (variantIdsAndQuantities) {
         ids = variantIdsAndQuantities.reduce((prev, curr) => {
-            var _a;
-            const bareId = getIdFromGid(curr === null || curr === void 0 ? void 0 : curr.id);
+            const bareId = getIdFromGid(curr?.id);
             if (bareId) {
-                prev.push(`${bareId}:${(_a = curr === null || curr === void 0 ? void 0 : curr.quantity) !== null && _a !== void 0 ? _a : 1}`);
+                prev.push(`${bareId}:${curr?.quantity ?? 1}`);
             }
             return prev;
         }, []);

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

@@ -4,10 +4,9 @@ import { shopifyImageLoader } from '../../utilities';
  * The `Video` component renders a `video` for the Storefront API's [Video object](https://shopify.dev/api/storefront/reference/products/video).
  */
 export function Video(props) {
-    var _a, _b;
     const { data, previewImageOptions, id = data.id, playsInline = true, controls = true, ...passthroughProps } = props;
     const posterUrl = shopifyImageLoader({
-        src: (_b = (_a = data.previewImage) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : '',
+        src: data.previewImage?.url ?? '',
         ...previewImageOptions,
     });
     if (!data.sources) {
@@ -16,7 +15,7 @@ export function Video(props) {
     return (
     // eslint-disable-next-line jsx-a11y/media-has-caption
     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))) {
+        if (!(source?.url && 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

@@ -20,7 +20,7 @@ export { CartShopPayButton } from './CartShopPayButton';
 export { CartEstimatedCost } from './CartEstimatedCost';
 export { CartProvider, useCart, useInstantCheckout } from './CartProvider';
 export type { State, Status, Cart, CartWithActions, CartAction, } from './CartProvider';
-export { ProductProvider, useProduct } from './ProductProvider';
+export { ProductOptionsProvider, useProductOptions, } from './ProductOptionsProvider';
 export { ProductPrice } from './ProductPrice';
 export { BuyNowButton } from './BuyNowButton';
 export { ShopPayButton } from './ShopPayButton';

package/dist/esnext/components/index.js

@@ -18,7 +18,7 @@ export { CartCheckoutButton } from './CartCheckoutButton';
 export { CartShopPayButton } from './CartShopPayButton';
 export { CartEstimatedCost } from './CartEstimatedCost';
 export { CartProvider, useCart, useInstantCheckout } from './CartProvider';
-export { ProductProvider, useProduct } from './ProductProvider';
+export { ProductOptionsProvider, useProductOptions, } from './ProductOptionsProvider';
 export { ProductPrice } from './ProductPrice';
 export { BuyNowButton } from './BuyNowButton';
 export { ShopPayButton } from './ShopPayButton';

package/dist/esnext/config.d.ts

@@ -1,3 +1,7 @@
 import type { InlineHydrogenConfig } from './types';
 export declare const defineConfig: (params: InlineHydrogenConfig) => InlineHydrogenConfig;
 export type { InlineHydrogenConfig as HydrogenConfig };
+export { ShopifyServerAnalyticsConnector } from './foundation/Analytics/connectors/Shopify/ServerAnalyticsConnector';
+export { PerformanceMetricsServerAnalyticsConnector } from './foundation/Analytics/connectors/PerformanceMetrics/ServerAnalyticsConnector';
+export { CookieSessionStorage } from './foundation/CookieSessionStorage/CookieSessionStorage';
+export { MemorySessionStorage } from './foundation/MemorySessionStorage/MemorySessionStorage';

package/dist/esnext/config.js

@@ -1 +1,5 @@
 export const defineConfig = (params) => params;
+export { ShopifyServerAnalyticsConnector } from './foundation/Analytics/connectors/Shopify/ServerAnalyticsConnector';
+export { PerformanceMetricsServerAnalyticsConnector } from './foundation/Analytics/connectors/PerformanceMetrics/ServerAnalyticsConnector';
+export { CookieSessionStorage } from './foundation/CookieSessionStorage/CookieSessionStorage';
+export { MemorySessionStorage } from './foundation/MemorySessionStorage/MemorySessionStorage';

package/dist/esnext/constants.d.ts

@@ -5,3 +5,5 @@ export declare const OXYGEN_SECRET_TOKEN_ENVIRONMENT_VARIABLE = "SHOPIFY_STOREFR
 export declare const STOREFRONT_API_SECRET_TOKEN_HEADER = "Shopify-Storefront-Private-Token";
 export declare const STOREFRONT_API_PUBLIC_TOKEN_HEADER = "X-Shopify-Storefront-Access-Token";
 export declare const STOREFRONT_API_BUYER_IP_HEADER = "Shopify-Storefront-Buyer-IP";
+export declare const SHOPIFY_STOREFRONT_ID_VARIABLE = "SHOPIFY_STOREFRONT_ID";
+export declare const SHOPIFY_STOREFRONT_ID_HEADER = "X-Shopify-Storefront-Id";

package/dist/esnext/constants.js

@@ -5,3 +5,5 @@ export const OXYGEN_SECRET_TOKEN_ENVIRONMENT_VARIABLE = 'SHOPIFY_STOREFRONT_API_
 export const STOREFRONT_API_SECRET_TOKEN_HEADER = 'Shopify-Storefront-Private-Token';
 export const STOREFRONT_API_PUBLIC_TOKEN_HEADER = 'X-Shopify-Storefront-Access-Token';
 export const STOREFRONT_API_BUYER_IP_HEADER = 'Shopify-Storefront-Buyer-IP';
+export const SHOPIFY_STOREFRONT_ID_VARIABLE = 'SHOPIFY_STOREFRONT_ID';
+export const SHOPIFY_STOREFRONT_ID_HEADER = 'X-Shopify-Storefront-Id';

package/dist/esnext/entry-client.js

@@ -1,43 +1,99 @@
 import React, { Suspense, useState, StrictMode, Fragment, } from 'react';
 import { hydrateRoot } from 'react-dom/client';
 import { ErrorBoundary } from 'react-error-boundary';
-import { useServerResponse } from './framework/Hydration/rsc';
+import { createFromFetch, createFromReadableStream,
+// @ts-ignore
+ } from '@shopify/hydrogen/vendor/react-server-dom-vite';
+import { RSC_PATHNAME } from './constants';
 import { ServerPropsProvider } from './foundation/ServerPropsProvider';
-const DevTools = React.lazy(() => import('./components/DevTools.client'));
-const renderHydrogen = async (ClientWrapper, config) => {
+import { ClientAnalytics } from './foundation/Analytics/';
+let rscReader;
+const cache = new Map();
+// Hydrate an SSR response from <meta> tags placed in the DOM.
+const flightChunks = [];
+const FLIGHT_ATTRIBUTE = 'data-flight';
+function addElementToFlightChunks(el) {
+    // We don't need to decode, because `.getAttribute` already decodes
+    const chunk = el.getAttribute(FLIGHT_ATTRIBUTE);
+    if (chunk) {
+        flightChunks.push(chunk);
+    }
+}
+// Get initial payload
+document
+    .querySelectorAll('[' + FLIGHT_ATTRIBUTE + ']')
+    .forEach(addElementToFlightChunks);
+// Create a mutation observer on the document to detect when new
+// <meta data-flight> tags are added, and add them to the array.
+const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+        mutation.addedNodes.forEach((node) => {
+            if (node instanceof HTMLElement &&
+                node.tagName === 'META' &&
+                node.hasAttribute(FLIGHT_ATTRIBUTE)) {
+                addElementToFlightChunks(node);
+            }
+        });
+    });
+});
+observer.observe(document.documentElement, {
+    childList: true,
+    subtree: true,
+});
+if (flightChunks.length > 0) {
+    const contentLoaded = new Promise((resolve) => document.addEventListener('DOMContentLoaded', resolve));
+    try {
+        rscReader = new ReadableStream({
+            start(controller) {
+                const encoder = new TextEncoder();
+                const write = (chunk) => {
+                    controller.enqueue(encoder.encode(chunk));
+                    return 0;
+                };
+                flightChunks.forEach(write);
+                flightChunks.push = write;
+                contentLoaded.then(() => {
+                    controller.close();
+                    observer.disconnect();
+                });
+            },
+        });
+    }
+    catch (_) {
+        // Old browser, will try a new hydration request later
+    }
+}
+const renderHydrogen = async (ClientWrapper) => {
     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 }) => {
+        import.meta.hot.on('hydrogen-browser-console', ({ 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;
-    let hasCaughtError = false;
+    let config;
+    try {
+        config = JSON.parse(root.dataset.clientConfig ?? '{}');
+    }
+    catch (error) {
+        config = {};
+        if (__HYDROGEN_DEV__) {
+            console.warn('Could not parse client configuration in browser', error.message);
+        }
+    }
+    const RootComponent = 
+    // Default to StrictMode on, unless explicitly turned off
+    config.strictMode !== false ? StrictMode : Fragment;
     hydrateRoot(root, React.createElement(React.Fragment, null,
         React.createElement(RootComponent, null,
             React.createElement(ErrorBoundary, { FallbackComponent: Error },
                 React.createElement(Suspense, { fallback: null },
-                    React.createElement(Content, { clientWrapper: ClientWrapper })))),
-        typeof DevTools !== 'undefined' && (config === null || config === void 0 ? void 0 : config.showDevTools) ? (React.createElement(DevTools, null)) : null), {
-        onRecoverableError(e) {
-            if (__DEV__ && !hasCaughtError) {
-                hasCaughtError = true;
-                console.log(`React encountered an error while attempting to hydrate the application. ` +
-                    `This is likely due to a bug in React's Suspense behavior related to experimental server components, ` +
-                    `and it is safe to ignore this error.\n` +
-                    `Visit this issue to learn more: https://github.com/Shopify/hydrogen/issues/920.\n\n` +
-                    `The original error is printed below:`);
-                console.log(e);
-            }
-        },
-    });
+                    React.createElement(Content, { clientWrapper: ClientWrapper }))))));
 };
 export default renderHydrogen;
 function Content({ clientWrapper: ClientWrapper = ({ children }) => children, }) {
@@ -68,3 +124,33 @@ function Error({ error }) {
                 React.createElement("a", { href: "/", style: { textDecoration: 'underline' } }, "home page"),
                 "."))));
 }
+function useServerResponse(state) {
+    const key = JSON.stringify(state);
+    let response = cache.get(key);
+    if (response) {
+        return response;
+    }
+    if (rscReader) {
+        // The flight response was inlined during SSR, use it directly.
+        response = createFromReadableStream(rscReader);
+        rscReader = null;
+    }
+    else {
+        if (
+        /* @ts-ignore */
+        window.BOOMR &&
+            /* @ts-ignore */
+            window.BOOMR.plugins &&
+            /* @ts-ignore */
+            window.BOOMR.plugins.Hydrogen) {
+            /* @ts-ignore */
+            window.BOOMR.plugins.Hydrogen.trackSubPageLoadPerformance();
+        }
+        ClientAnalytics.resetPageAnalyticsData();
+        // Request a new flight response.
+        response = createFromFetch(fetch(`${RSC_PATHNAME}?state=` + encodeURIComponent(key)));
+    }
+    cache.clear();
+    cache.set(key, response);
+    return response;
+}

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

@@ -1,35 +1,6 @@
-/// <reference types="node" />
-import { Logger } from './utilities/log';
-import type { ImportGlobEagerOutput } from './types';
-import { ServerComponentResponse } from './framework/Hydration/ServerComponentResponse.server';
-import { ServerComponentRequest } from './framework/Hydration/ServerComponentRequest.server';
-import type { ServerResponse, IncomingMessage } from 'http';
-import { RuntimeContext } from './framework/runtime';
+import type { RequestHandler } from './types';
 declare global {
-    var __WORKER__: boolean;
-}
-interface RequestHandlerOptions {
-    indexTemplate: string | ((url: string) => Promise<string | {
-        default: string;
-    }>);
-    cache?: Cache;
-    streamableResponse?: ServerResponse;
-    dev?: boolean;
-    context?: RuntimeContext;
-    nonce?: string;
-    buyerIpHeader?: string;
-}
-export interface RequestHandler {
-    (request: Request | IncomingMessage, options: RequestHandlerOptions): Promise<Response | undefined>;
+    var __HYDROGEN_WORKER__: boolean;
 }
 export declare const renderHydrogen: (App: any) => RequestHandler;
-declare type SharedServerProps = {
-    state?: object | null;
-    request: ServerComponentRequest;
-    response: ServerComponentResponse;
-    log: Logger;
-};
-export declare type AppProps = SharedServerProps & {
-    routes?: ImportGlobEagerOutput;
-};
 export default renderHydrogen;