@shopify/hydrogen 1.1.0 → 1.2.0

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

@@ -1,3 +1,3 @@
-import type { DefaultPage } from './seo-types';
+import type { DefaultPage } from './seo-types.js';
 import type { PartialDeep } from 'type-fest';
 export declare function NoIndexPageSeo({ title, titleTemplate, lang, }: PartialDeep<DefaultPage>): JSX.Element;

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { useLocalization } from '../../hooks/useLocalization/useLocalization';
-import { Head } from '../../foundation/Head/Head.client';
+import { useLocalization } from '../../hooks/useLocalization/useLocalization.js';
+import { Head } from '../../foundation/Head/Head.client.js';
 export function NoIndexPageSeo({ title, titleTemplate, lang, }) {
     const { language: { isoCode: fallBacklang }, } = useLocalization();
     return (React.createElement(React.Fragment, null,

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

@@ -1,3 +1,3 @@
-import type { Page as PageType } from '../../storefront-api-types';
+import type { Page as PageType } from '../../storefront-api-types.js';
 import type { PartialDeep } from 'type-fest';
 export declare function PageSeo({ title, seo }: PartialDeep<PageType>): JSX.Element;

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import { TitleSeo } from './TitleSeo.client';
-import { DescriptionSeo } from './DescriptionSeo.client';
-import { TwitterSeo } from './TwitterSeo.client';
+import { TitleSeo } from './TitleSeo.client.js';
+import { DescriptionSeo } from './DescriptionSeo.client.js';
+import { TwitterSeo } from './TwitterSeo.client.js';
 export function PageSeo({ title, seo }) {
     const seoTitle = seo?.title ?? title;
     const seoDescription = seo?.description;

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

@@ -1,4 +1,4 @@
-import type { Scalars, Product as ProductType } from '../../storefront-api-types';
+import type { Scalars, Product as ProductType } from '../../storefront-api-types.js';
 import type { PartialDeep } from 'type-fest';
 export declare function ProductSeo({ url, title, description, seo, vendor, featuredImage, variants, }: PartialDeep<ProductType> & {
     url: Scalars['URL'];

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

@@ -1,10 +1,10 @@
 import React from 'react';
-import { Head } from '../../foundation/Head';
-import { TitleSeo } from './TitleSeo.client';
-import { DescriptionSeo } from './DescriptionSeo.client';
-import { TwitterSeo } from './TwitterSeo.client';
-import { ImageSeo } from './ImageSeo.client';
-import { flattenConnection } from '../../utilities/flattenConnection';
+import { Head } from '../../foundation/Head/index.js';
+import { TitleSeo } from './TitleSeo.client.js';
+import { DescriptionSeo } from './DescriptionSeo.client.js';
+import { TwitterSeo } from './TwitterSeo.client.js';
+import { ImageSeo } from './ImageSeo.client.js';
+import { flattenConnection } from '../../utilities/flattenConnection/index.js';
 export function ProductSeo({ url, title, description, seo, vendor, featuredImage, variants, }) {
     const seoTitle = seo?.title ?? title;
     const seoDescription = seo?.description ?? description;

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

@@ -1,8 +1,8 @@
 import { type ComponentProps } from 'react';
-import { ProductSeo } from './ProductSeo.client';
-import { CollectionSeo } from './CollectionSeo.client';
-import { PageSeo } from './PageSeo.client';
-import { NoIndexPageSeo } from './NoIndexSeo.client';
+import { ProductSeo } from './ProductSeo.client.js';
+import { CollectionSeo } from './CollectionSeo.client.js';
+import { PageSeo } from './PageSeo.client.js';
+import { NoIndexPageSeo } from './NoIndexSeo.client.js';
 import type { DefaultPage as DefaultPageType, HomePage as HomePageType } from './seo-types';
 declare type Props = {
     type: 'defaultSeo';

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

@@ -1,11 +1,11 @@
 import React from 'react';
-import { useUrl } from '../../foundation/useUrl';
-import { DefaultPageSeo } from './DefaultPageSeo.client';
-import { HomePageSeo } from './HomePageSeo.client';
-import { ProductSeo } from './ProductSeo.client';
-import { CollectionSeo } from './CollectionSeo.client';
-import { PageSeo } from './PageSeo.client';
-import { NoIndexPageSeo } from './NoIndexSeo.client';
+import { useUrl } from '../../foundation/useUrl/index.js';
+import { DefaultPageSeo } from './DefaultPageSeo.client.js';
+import { HomePageSeo } from './HomePageSeo.client.js';
+import { ProductSeo } from './ProductSeo.client.js';
+import { CollectionSeo } from './CollectionSeo.client.js';
+import { PageSeo } from './PageSeo.client.js';
+import { NoIndexPageSeo } from './NoIndexSeo.client.js';
 /**
  * The `Seo` component renders SEO information on a webpage.
  */

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

@@ -1,3 +1,3 @@
-import type { Seo as SeoType } from '../../storefront-api-types';
+import type { Seo as SeoType } from '../../storefront-api-types.js';
 import type { PartialDeep } from 'type-fest';
 export declare function TitleSeo({ title }: PartialDeep<SeoType>): JSX.Element | null;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Head } from '../../foundation/Head';
+import { Head } from '../../foundation/Head/index.js';
 export function TitleSeo({ title }) {
     if (!title) {
         return null;

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

@@ -1,2 +1,2 @@
-import type { Twitter } from './seo-types';
+import type { Twitter } from './seo-types.js';
 export declare function TwitterSeo({ site, title, description }: Partial<Twitter>): JSX.Element;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Head } from '../../foundation/Head';
+import { Head } from '../../foundation/Head/index.js';
 export function TwitterSeo({ site, title, description }) {
     return (React.createElement(Head, null,
         React.createElement("meta", { name: "twitter:card", content: "summary_large_image" }),

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

@@ -1 +1 @@
-export { Seo } from './Seo.client';
+export { Seo } from './Seo.client.js';

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

@@ -1 +1 @@
-export { Seo } from './Seo.client';
+export { Seo } from './Seo.client.js';

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

@@ -1,4 +1,4 @@
-import type { Scalars, Shop as ShopType, Seo as SeoType } from '../../storefront-api-types';
+import type { Scalars, Shop as ShopType, Seo as SeoType } from '../../storefront-api-types.js';
 export interface Twitter {
     site: string;
     title: SeoType['title'];

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { useShop } from '../../foundation/useShop';
-import { useLoadScript } from '../../hooks/useLoadScript/useLoadScript.client';
+import { useShop } from '../../foundation/useShop/index.js';
+import { useLoadScript } from '../../hooks/useLoadScript/useLoadScript.client.js';
 const URL = 'https://cdn.shopify.com/shopifycloud/shop-js/v1.0/client.js';
 /**
  * The `ShopPayButton` component renders a button that redirects to the Shop Pay checkout.

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

@@ -1 +1 @@
-export { ShopPayButton } from './ShopPayButton.client';
+export { ShopPayButton } from './ShopPayButton.client.js';

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

@@ -1 +1 @@
-export { ShopPayButton } from './ShopPayButton.client';
+export { ShopPayButton } from './ShopPayButton.client.js';

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

@@ -1,11 +1,16 @@
-import { shopifyImageLoader } from '../../utilities';
-import type { Video as VideoType } from '../../storefront-api-types';
+import { type HTMLAttributes } from 'react';
+import { shopifyImageLoader } from '../../utilities/index.js';
+import type { Video as VideoType } from '../../storefront-api-types.js';
 import type { PartialDeep } from 'type-fest';
 interface VideoProps {
     /** An object with fields that correspond to the Storefront API's [Video object](https://shopify.dev/api/storefront/latest/objects/video). */
     data: PartialDeep<VideoType>;
     /** An object of image size options for the video's `previewImage`. Uses `shopifyImageLoader` to generate the `poster` URL. */
     previewImageOptions?: Parameters<typeof shopifyImageLoader>[0];
+    /** Props that will be passed to the `video` element's `source` children elements. */
+    sourceProps?: HTMLAttributes<HTMLSourceElement> & {
+        'data-testid'?: string;
+    };
 }
 /**
  * The `Video` component renders a `video` for the Storefront API's [Video object](https://shopify.dev/api/storefront/reference/products/video).

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

@@ -1,10 +1,10 @@
 import React from 'react';
-import { shopifyImageLoader } from '../../utilities';
+import { shopifyImageLoader } from '../../utilities/index.js';
 /**
  * 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) {
-    const { data, previewImageOptions, id = data.id, playsInline = true, controls = true, ...passthroughProps } = props;
+    const { data, previewImageOptions, id = data.id, playsInline = true, controls = true, sourceProps = {}, ...passthroughProps } = props;
     const posterUrl = shopifyImageLoader({
         src: data.previewImage?.url ?? '',
         ...previewImageOptions,
@@ -18,6 +18,6 @@ export function Video(props) {
         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 }));
+        return (React.createElement("source", { ...sourceProps, key: source.url, src: source.url, type: source.mimeType }));
     })));
 }

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

@@ -1 +1 @@
-export { Video } from './Video';
+export { Video } from './Video.js';

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

@@ -1 +1 @@
-export { Video } from './Video';
+export { Video } from './Video.js';

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

@@ -1,27 +1,27 @@
-export { Link } from './Link';
-export { MediaFile } from './MediaFile';
-export { Video } from './Video';
-export { Image } from './Image';
-export { ExternalVideo } from './ExternalVideo';
-export { AddToCartButton } from './AddToCartButton';
-export { ModelViewer } from './ModelViewer';
-export { Money } from './Money';
-export { Metafield } from './Metafield';
-export type { MetafieldType } from './Metafield';
-export { CartLineProvider, useCartLine } from './CartLineProvider';
-export { CartLineImage } from './CartLineImage';
-export { CartLinePrice } from './CartLinePrice';
-export { CartLineProductTitle } from './CartLineProductTitle';
-export { CartLineQuantity } from './CartLineQuantity';
-export { CartLineQuantityAdjustButton } from './CartLineQuantityAdjustButton';
-export { CartLines } from './CartLines';
-export { CartCheckoutButton } from './CartCheckoutButton';
-export { CartShopPayButton } from './CartShopPayButton';
-export { CartCost } from './CartCost';
-export { CartProvider, useCart, useInstantCheckout } from './CartProvider';
-export type { State, Status, Cart, CartWithActions, CartAction, } from './CartProvider';
-export { ProductOptionsProvider } from './ProductOptionsProvider';
-export { ProductPrice } from './ProductPrice';
-export { BuyNowButton } from './BuyNowButton';
-export { ShopPayButton } from './ShopPayButton';
-export { Seo } from './Seo';
+export { Link } from './Link/index.js';
+export { MediaFile } from './MediaFile/index.js';
+export { Video } from './Video/index.js';
+export { Image } from './Image/index.js';
+export { ExternalVideo } from './ExternalVideo/index.js';
+export { AddToCartButton } from './AddToCartButton/index.js';
+export { ModelViewer } from './ModelViewer/index.js';
+export { Money } from './Money/index.js';
+export { Metafield } from './Metafield/index.js';
+export type { MetafieldType } from './Metafield/index.js';
+export { CartLineProvider, useCartLine } from './CartLineProvider/index.js';
+export { CartLineImage } from './CartLineImage/index.js';
+export { CartLinePrice } from './CartLinePrice/index.js';
+export { CartLineProductTitle } from './CartLineProductTitle/index.js';
+export { CartLineQuantity } from './CartLineQuantity/index.js';
+export { CartLineQuantityAdjustButton } from './CartLineQuantityAdjustButton/index.js';
+export { CartLines } from './CartLines/index.js';
+export { CartCheckoutButton } from './CartCheckoutButton/index.js';
+export { CartShopPayButton } from './CartShopPayButton/index.js';
+export { CartCost } from './CartCost/index.js';
+export { CartProvider, useCart, useInstantCheckout, } from './CartProvider/index.js';
+export type { State, Status, Cart, CartWithActions, CartAction, } from './CartProvider/index.js';
+export { ProductOptionsProvider } from './ProductOptionsProvider/index.js';
+export { ProductPrice } from './ProductPrice/index.js';
+export { BuyNowButton } from './BuyNowButton/index.js';
+export { ShopPayButton } from './ShopPayButton/index.js';
+export { Seo } from './Seo/index.js';

package/dist/esnext/components/index.js

@@ -1,25 +1,25 @@
-export { Link } from './Link';
-export { MediaFile } from './MediaFile';
-export { Video } from './Video';
-export { Image } from './Image';
-export { ExternalVideo } from './ExternalVideo';
-export { AddToCartButton } from './AddToCartButton';
-export { ModelViewer } from './ModelViewer';
-export { Money } from './Money';
-export { Metafield } from './Metafield';
-export { CartLineProvider, useCartLine } from './CartLineProvider';
-export { CartLineImage } from './CartLineImage';
-export { CartLinePrice } from './CartLinePrice';
-export { CartLineProductTitle } from './CartLineProductTitle';
-export { CartLineQuantity } from './CartLineQuantity';
-export { CartLineQuantityAdjustButton } from './CartLineQuantityAdjustButton';
-export { CartLines } from './CartLines';
-export { CartCheckoutButton } from './CartCheckoutButton';
-export { CartShopPayButton } from './CartShopPayButton';
-export { CartCost } from './CartCost';
-export { CartProvider, useCart, useInstantCheckout } from './CartProvider';
-export { ProductOptionsProvider } from './ProductOptionsProvider';
-export { ProductPrice } from './ProductPrice';
-export { BuyNowButton } from './BuyNowButton';
-export { ShopPayButton } from './ShopPayButton';
-export { Seo } from './Seo';
+export { Link } from './Link/index.js';
+export { MediaFile } from './MediaFile/index.js';
+export { Video } from './Video/index.js';
+export { Image } from './Image/index.js';
+export { ExternalVideo } from './ExternalVideo/index.js';
+export { AddToCartButton } from './AddToCartButton/index.js';
+export { ModelViewer } from './ModelViewer/index.js';
+export { Money } from './Money/index.js';
+export { Metafield } from './Metafield/index.js';
+export { CartLineProvider, useCartLine } from './CartLineProvider/index.js';
+export { CartLineImage } from './CartLineImage/index.js';
+export { CartLinePrice } from './CartLinePrice/index.js';
+export { CartLineProductTitle } from './CartLineProductTitle/index.js';
+export { CartLineQuantity } from './CartLineQuantity/index.js';
+export { CartLineQuantityAdjustButton } from './CartLineQuantityAdjustButton/index.js';
+export { CartLines } from './CartLines/index.js';
+export { CartCheckoutButton } from './CartCheckoutButton/index.js';
+export { CartShopPayButton } from './CartShopPayButton/index.js';
+export { CartCost } from './CartCost/index.js';
+export { CartProvider, useCart, useInstantCheckout, } from './CartProvider/index.js';
+export { ProductOptionsProvider } from './ProductOptionsProvider/index.js';
+export { ProductPrice } from './ProductPrice/index.js';
+export { BuyNowButton } from './BuyNowButton/index.js';
+export { ShopPayButton } from './ShopPayButton/index.js';
+export { Seo } from './Seo/index.js';

package/dist/esnext/config.d.ts

@@ -1,7 +1,7 @@
-import type { InlineHydrogenConfig } from './types';
+import type { InlineHydrogenConfig } from './types.js';
 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';
+export { ShopifyServerAnalyticsConnector } from './foundation/Analytics/connectors/Shopify/ServerAnalyticsConnector.js';
+export { PerformanceMetricsServerAnalyticsConnector } from './foundation/Analytics/connectors/PerformanceMetrics/ServerAnalyticsConnector.js';
+export { CookieSessionStorage } from './foundation/CookieSessionStorage/CookieSessionStorage.js';
+export { MemorySessionStorage } from './foundation/MemorySessionStorage/MemorySessionStorage.js';

package/dist/esnext/config.js

@@ -1,5 +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';
+export { ShopifyServerAnalyticsConnector } from './foundation/Analytics/connectors/Shopify/ServerAnalyticsConnector.js';
+export { PerformanceMetricsServerAnalyticsConnector } from './foundation/Analytics/connectors/PerformanceMetrics/ServerAnalyticsConnector.js';
+export { CookieSessionStorage } from './foundation/CookieSessionStorage/CookieSessionStorage.js';
+export { MemorySessionStorage } from './foundation/MemorySessionStorage/MemorySessionStorage.js';

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

@@ -1,3 +1,3 @@
-import type { ClientHandler } from './types';
+import type { ClientHandler } from './types.js';
 declare const renderHydrogen: ClientHandler;
 export default renderHydrogen;

package/dist/esnext/entry-client.js

@@ -1,12 +1,14 @@
-import React, { Suspense, useState, StrictMode, Fragment, } from 'react';
+import React, { Suspense, useState, StrictMode, Fragment, useEffect, } from 'react';
 import { hydrateRoot } from 'react-dom/client';
 import { ErrorBoundary } from 'react-error-boundary';
 import { createFromFetch, createFromReadableStream,
 // @ts-ignore
  } from '@shopify/hydrogen/vendor/react-server-dom-vite';
-import { RSC_PATHNAME } from './constants';
-import { ServerPropsProvider } from './foundation/ServerPropsProvider';
-import { ClientAnalytics } from './foundation/Analytics/';
+import { RSC_PATHNAME } from './constants.js';
+import { ServerPropsProvider } from './foundation/ServerPropsProvider/index.js';
+import { ClientAnalytics } from './foundation/Analytics/index.js';
+// @ts-expect-error
+import CustomErrorPage from 'virtual__error.jsx';
 let rscReader;
 const cache = new Map();
 // Hydrate an SSR response from <meta> tags placed in the DOM.
@@ -93,7 +95,9 @@ const renderHydrogen = async (ClientWrapper) => {
     const ServerRequestProviderMock = () => null;
     hydrateRoot(root, React.createElement(RootComponent, null,
         React.createElement(ServerRequestProviderMock, null),
-        React.createElement(ErrorBoundary, { FallbackComponent: Error },
+        React.createElement(ErrorBoundary, { FallbackComponent: CustomErrorPage
+                ? ({ error }) => (React.createElement(CustomErrorWrapper, { error: error, errorPage: CustomErrorPage }))
+                : DefaultError },
             React.createElement(Suspense, { fallback: null },
                 React.createElement(Content, { clientWrapper: ClientWrapper })))));
 };
@@ -103,16 +107,28 @@ function Content({ clientWrapper: ClientWrapper = ({ children }) => children, })
         pathname: window.location.pathname,
         search: window.location.search,
     });
-    const response = useServerResponse(serverProps);
-    return (React.createElement(ServerPropsProvider, { initialServerProps: serverProps, setServerPropsForRsc: setServerProps },
+    const [rscResponseFromApiRoute, setRscResponseFromApiRoute] = useState(null);
+    const response = useServerResponse(serverProps, rscResponseFromApiRoute);
+    useEffect(() => {
+        // If server props ever change, then use a fresh
+        // _rsc request and ignore any response from API routes.
+        setRscResponseFromApiRoute(null);
+    }, [serverProps]);
+    return (React.createElement(ServerPropsProvider, { initialServerProps: serverProps, setServerPropsForRsc: setServerProps, setRscResponseFromApiRoute: setRscResponseFromApiRoute },
         React.createElement(ClientWrapper, null, response.readRoot())));
 }
-function Error({ error }) {
-    if (import.meta.env.DEV) {
-        return (React.createElement("div", { style: { padding: '1em' } },
-            React.createElement("h1", { style: { fontSize: '2em', marginBottom: '1em', fontWeight: 'bold' } }, "Error"),
-            React.createElement("pre", { style: { whiteSpace: 'pre-wrap' } }, error.stack)));
-    }
+function CustomErrorWrapper({ error, errorPage, }) {
+    const Error = React.lazy(errorPage);
+    return (React.createElement(ErrorBoundary, { FallbackComponent: ({ error: errorRenderingCustomPage }) => {
+            if (import.meta.env.DEV) {
+                console.error('Error rendering custom error page:\n' + errorRenderingCustomPage);
+            }
+            return React.createElement(DefaultError, { error: error });
+        } },
+        React.createElement(Suspense, { fallback: null },
+            React.createElement(Error, { error: error }))));
+}
+function DefaultError({ error }) {
     return (React.createElement("div", { style: {
             padding: '2em',
             textAlign: 'center',
@@ -126,8 +142,13 @@ function Error({ error }) {
                 React.createElement("a", { href: "/", style: { textDecoration: 'underline' } }, "home page"),
                 "."))));
 }
-function useServerResponse(state) {
+function useServerResponse(state, apiRouteRscResponse) {
     const key = JSON.stringify(state);
+    if (apiRouteRscResponse) {
+        cache.clear();
+        cache.set(apiRouteRscResponse.url, apiRouteRscResponse.response);
+        return apiRouteRscResponse.response;
+    }
     let response = cache.get(key);
     if (response) {
         return response;

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

@@ -1,4 +1,4 @@
-import type { RequestHandler } from './types';
+import type { RequestHandler } from './types.js';
 declare global {
     var __HYDROGEN_WORKER__: boolean;
 }