@shopify/hydrogen 1.0.0-alpha.22 → 1.0.0

package/dist/esnext/components/index.js

@@ -1,87 +1,26 @@
-export { Link } from 'react-router-dom';
-export * from './MediaFile';
-export * from './Video';
-export * from './Image';
-export * from './ExternalVideo';
-export * from './RawHtml';
-export * from './AddToCartButton';
-export * from './Model3D';
-export * from './Money';
-export * from './CartUIProvider';
-export * from './CartToggle';
-export * from './CartLineProvider';
-export * from './CartLineImage';
-export * from './CartLinePrice';
-export * from './CartLineProductTitle';
-export * from './CartLineQuantity';
-export * from './CartLineQuantityAdjustButton';
-export * from './CartLineAttributes';
-export * from './CartLines';
-export * from './CartContainer';
-export * from './CartCheckoutButton';
-export * from './CartShopPayButton';
-export * from './CartTotal';
-export * from './Metafield';
-export * from './ProductProvider';
-export * from './ProductDescription';
-export * from './ProductTitle';
-export * from './ProductPrice';
-export * from './ProductMetafield';
-export * from './SelectedVariantPrice';
-export * from './SelectedVariantAddToCartButton';
-export * from './SelectedVariantBuyNowButton';
-export * from './SelectedVariantShopPayButton';
-export * from './SelectedVariantUnitPrice';
-export * from './SelectedVariantImage';
-export * from './SelectedVariantMetafield';
-export * from './BuyNowButton';
-export * from './ShopPayButton';
-export * from './CartProvider';
-/**
- * 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 { 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, useProductOptions, } from './ProductOptionsProvider';
+export { ProductPrice } from './ProductPrice';
+export { BuyNowButton } from './BuyNowButton';
+export { ShopPayButton } from './ShopPayButton';
+export { useLocalization } from '../hooks/useLocalization/useLocalization';
+export { Seo } from './Seo';

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

@@ -1,7 +1,7 @@
 import { ReactNode, ElementType, ComponentProps, ReactElement } from 'react';
 /**
  * Inspired by HeadlessUI
- * @see https://github.com/tailwindlabs/headlessui/blob/6a01c54b15bc0291af737dfc2a225dca88f3fa55/packages/@headlessui-react/src/types.ts#L11-L13
+ * @see https://github.com/tailwindlabs/headlessui/blob/6a01c54b15bc0291af737dfc2a225dca88f3fa55/packages/\@headlessui-react/src/types.ts#L11-L13
  */
 /**
  * Used as a default value for TOmitableProps. Actual values will be element props
@@ -19,13 +19,12 @@ declare type PropsOf<TTag = any> = TTag extends ElementType ? ComponentProps<TTa
  * This is a "global" list of props we are always going to control, meaning
  * we'll omit the original prop definition if it exists.
  */
-declare type PropsWeControl = 'as' | 'children';
+declare type PropsWeControl = keyof OurProps;
 /**
  * This is the "global" list of our props, similar to above. It is applied to
  * every component using `Props`.
  */
-declare type OurProps<TTag> = {
-    as?: TTag;
+declare type OurProps = {
     children?: ReactNode;
 };
 declare type CleanProps<TTag, TOmitableProps extends keyof any = __> = TOmitableProps extends __ ? Omit<PropsOf<TTag>, PropsWeControl> : Omit<PropsOf<TTag>, TOmitableProps | PropsWeControl>;
@@ -61,13 +60,12 @@ declare type CleanProps<TTag, TOmitableProps extends keyof any = __> = TOmitable
  * ```
  *
  */
-export declare type Props<TTag, TOmitableProps extends keyof any = __> = CleanProps<TTag, TOmitableProps> & OurProps<TTag>;
+export declare type Props<TTag, TOmitableProps extends keyof any = __> = CleanProps<TTag, TOmitableProps> & OurProps;
 /**
  * While similar to `Props`, this props an additional second argument `TSlot` which represents the interface
  * of the object passed to the callback via render props. Useful for headless components that expect render props.
  */
 export declare type PropsWithSlot<TTag, TSlot = any, TOmitableProps extends keyof any = __> = CleanProps<TTag, TOmitableProps> & {
     children?: ReactNode | ((props: TSlot) => ReactElement);
-    as?: TTag;
 };
 export {};

package/dist/esnext/components/types.js

@@ -1,6 +1,6 @@
 /**
  * Inspired by HeadlessUI
- * @see https://github.com/tailwindlabs/headlessui/blob/6a01c54b15bc0291af737dfc2a225dca88f3fa55/packages/@headlessui-react/src/types.ts#L11-L13
+ * @see https://github.com/tailwindlabs/headlessui/blob/6a01c54b15bc0291af737dfc2a225dca88f3fa55/packages/\@headlessui-react/src/types.ts#L11-L13
  */
 /**
  * Used as a default value for TOmitableProps. Actual values will be element props

package/dist/esnext/config.d.ts

@@ -0,0 +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

@@ -0,0 +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

@@ -0,0 +1,9 @@
+export declare const RSC_PATHNAME = "/__rsc";
+export declare const EVENT_PATHNAME = "/__event";
+export declare const EVENT_PATHNAME_REGEX: RegExp;
+export declare const OXYGEN_SECRET_TOKEN_ENVIRONMENT_VARIABLE = "SHOPIFY_STOREFRONT_API_SECRET_TOKEN";
+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 = "Shopify-Storefront-Id";

package/dist/esnext/constants.js

@@ -0,0 +1,9 @@
+export const RSC_PATHNAME = '/__rsc';
+export const EVENT_PATHNAME = '/__event';
+export const EVENT_PATHNAME_REGEX = new RegExp(`^${EVENT_PATHNAME}/`);
+export const OXYGEN_SECRET_TOKEN_ENVIRONMENT_VARIABLE = 'SHOPIFY_STOREFRONT_API_SECRET_TOKEN';
+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 = 'Shopify-Storefront-Id';

package/dist/esnext/entry-client.js

@@ -1,36 +1,158 @@
-import React, { Suspense, useState } from 'react';
-// @ts-ignore
-import { createRoot } from 'react-dom';
-import { BrowserRouter } from 'react-router-dom';
+import React, { Suspense, useState, StrictMode, Fragment, } from 'react';
+import { hydrateRoot } from 'react-dom/client';
 import { ErrorBoundary } from 'react-error-boundary';
-import { HelmetProvider } from 'react-helmet-async';
-import { useServerResponse, ServerStateProvider, ServerStateRouter, } from './client';
-import { QueryProvider } from './hooks';
+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/';
+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;
     }
-    createRoot(root, { hydrate: true }).render(React.createElement(ErrorBoundary, { FallbackComponent: Error },
-        React.createElement(Suspense, { fallback: null },
-            React.createElement(Content, { clientWrapper: ClientWrapper }))));
+    if (import.meta.hot) {
+        import.meta.hot.on('hydrogen-browser-console', ({ type, data }) => {
+            if (type === 'warn') {
+                console.warn(data);
+            }
+        });
+    }
+    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;
+    // Fixes hydration in `useId`: https://github.com/Shopify/hydrogen/issues/1589
+    const ServerRequestProviderMock = () => null;
+    hydrateRoot(root, React.createElement(RootComponent, null,
+        React.createElement(ServerRequestProviderMock, null),
+        React.createElement(ErrorBoundary, { FallbackComponent: Error },
+            React.createElement(Suspense, { fallback: null },
+                React.createElement(Content, { clientWrapper: ClientWrapper })))));
 };
 export default renderHydrogen;
-function Content({ clientWrapper: ClientWrapper }) {
-    const [serverState, setServerState] = useState({
-        page: window.location.pathname,
+function Content({ clientWrapper: ClientWrapper = ({ children }) => children, }) {
+    const [serverProps, setServerProps] = useState({
+        pathname: window.location.pathname,
+        search: window.location.search,
     });
-    const response = useServerResponse(serverState);
-    return (React.createElement(ServerStateProvider, { serverState: serverState, setServerState: setServerState },
-        React.createElement(QueryProvider, null,
-            React.createElement(HelmetProvider, null,
-                React.createElement(BrowserRouter, null,
-                    React.createElement(ServerStateRouter, null),
-                    React.createElement(ClientWrapper, null, response.read()))))));
+    const response = useServerResponse(serverProps);
+    return (React.createElement(ServerPropsProvider, { initialServerProps: serverProps, setServerPropsForRsc: setServerProps },
+        React.createElement(ClientWrapper, null, response.readRoot())));
 }
 function Error({ error }) {
-    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)));
+    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)));
+    }
+    return (React.createElement("div", { style: {
+            padding: '2em',
+            textAlign: 'center',
+        } },
+        React.createElement("h1", { style: { fontSize: '2em', marginBottom: '1em', fontWeight: 'bold' } }, "Something's wrong here..."),
+        React.createElement("div", { style: { fontSize: '1.1em' } },
+            React.createElement("p", null, "We found an error while loading this page."),
+            React.createElement("p", null,
+                "Please, refresh or go back to the",
+                ' ',
+                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,3 +1,6 @@
-import type { ServerHandler } from './types';
-declare const renderHydrogen: ServerHandler;
+import type { RequestHandler } from './types';
+declare global {
+    var __HYDROGEN_WORKER__: boolean;
+}
+export declare const renderHydrogen: (App: any) => RequestHandler;
 export default renderHydrogen;