@shopify/hydrogen 0.17.1 → 0.18.0

package/CHANGELOG.md

@@ -1,5 +1,140 @@
 # Changelog
 
+## 0.18.0
+
+### Minor Changes
+
+- [#1065](https://github.com/Shopify/hydrogen/pull/1065) [`81ae47fd`](https://github.com/Shopify/hydrogen/commit/81ae47fdb01be06af155a61e574d43c73122c414) Thanks [@frandiox](https://github.com/frandiox)! - A new config file `hydrogen.config.js` replaces the existing `shopify.config.js` in your Hydrogen app.
+
+  ## Introducing `hydrogen.config.js`
+
+  Hydrogen apps now expect a `hydrogen.config.js` in the root folder. This config file accepts Shopify storefront credentials, routes, session configuration, and more.
+
+  To migrate existing apps, you should create a `hydrogen.config.js` (or `hydrogen.config.ts`) file in your Hydrogen app:
+
+  ```js
+  import {defineConfig} from '@shopify/hydrogen/config';
+  import {
+    CookieSessionStorage,
+    PerformanceMetricsServerAnalyticsConnector,
+  } from '@shopify/hydrogen';
+
+  export default defineConfig({
+    routes: import.meta.globEager('./src/routes/**/*.server.[jt](s|sx)'),
+    shopify: {
+      storeDomain: 'YOUR_STORE.myshopify.com',
+      storefrontToken: 'YOUR_STOREFRONT_TOKEN',
+      storefrontApiVersion: '2022-07',
+    },
+    session: CookieSessionStorage('__session', {
+      path: '/',
+      httpOnly: true,
+      secure: process.env.NODE_ENV === 'production',
+      sameSite: 'strict',
+      maxAge: 60 * 60 * 24 * 30,
+    }),
+    serverAnalyticsConnectors: [PerformanceMetricsServerAnalyticsConnector],
+  });
+  ```
+
+  Then, update your `App.server.jsx` to remove previous arguments from `renderHydrogen()`:
+
+  ```diff
+  import renderHydrogen from '@shopify/hydrogen/entry-server';
+
+  -function App({routes}) {
+  +function App() {
+    return (
+      <Suspense fallback={<LoadingFallback />}>
+  -      <ShopifyProvider shopifyConfig={shopifyConfig}>
+  +      <ShopifyProvider>
+          <CartProvider>
+            <DefaultSeo />
+            <Router>
+  -            <FileRoutes routes={routes} />
+  +            <FileRoutes />
+              <Route path="*" page={<NotFound />} />
+            </Router>
+          </CartProvider>
+          <PerformanceMetrics />
+          {process.env.LOCAL_DEV && <PerformanceMetricsDebug />}
+        </ShopifyProvider>
+      </Suspense>
+    );
+  }
+
+  -const routes = import.meta.globEager('./routes/**/*.server.[jt](s|sx)');
+  -
+  -export default renderHydrogen(App, {
+  -  routes,
+  -  shopifyConfig,
+  -  session: CookieSessionStorage('__session', {
+  -    path: '/',
+  -    httpOnly: true,
+  -    secure: process.env.NODE_ENV === 'production',
+  -    sameSite: 'strict',
+  -    maxAge: 60 * 60 * 24 * 30,
+  -  }),
+  -  serverAnalyticsConnectors: [PerformanceMetricsServerAnalyticsConnector],
+  -});
+  +export default renderHydrogen(App);
+  ```
+
+  Next, update `vite.config.js` in your app to remove references to `shopifyConfig`:
+
+  ```diff
+  import {defineConfig} from 'vite';
+  import hydrogen from '@shopify/hydrogen/plugin';
+  -import shopifyConfig from './shopify.config';
+
+  // https://vitejs.dev/config/
+  export default defineConfig({
+  -  plugins: [hydrogen(shopifyConfig)],
+  +  plugins: [hydrogen()],
+  ```
+
+  Finally, delete `shopify.config.js` from your app.
+
+  [Read more about the `hydrogen.config.js` file](https://shopify.dev/custom-storefronts/hydrogen/framework/hydrogen-config)
+
+* [#1214](https://github.com/Shopify/hydrogen/pull/1214) [`58ef6d69`](https://github.com/Shopify/hydrogen/commit/58ef6d69f1148e7bc8452fa77e7e8f54396c6105) Thanks [@frehner](https://github.com/frehner)! - Upgraded SFAPI version to 2022-07
+
+- [#1232](https://github.com/Shopify/hydrogen/pull/1232) [`d3956d62`](https://github.com/Shopify/hydrogen/commit/d3956d623adb86371ab214b102b53c62ea9ce26c) Thanks [@arlyxiao](https://github.com/arlyxiao)! - Upgrade body-parser in hydrogen package
+
+### Patch Changes
+
+- [#1211](https://github.com/Shopify/hydrogen/pull/1211) [`f3d26511`](https://github.com/Shopify/hydrogen/commit/f3d26511b1b0b94de1a43f76a0be9d99b5f2a8f7) Thanks [@wizardlyhel](https://github.com/wizardlyhel)! - Build chunks are inside assets folder
+
+* [#1215](https://github.com/Shopify/hydrogen/pull/1215) [`a0ed7c06`](https://github.com/Shopify/hydrogen/commit/a0ed7c06d045a0063a356097dafcc25e5361aad1) Thanks [@frehner](https://github.com/frehner)! - `useMoney` now returns two additional properties: `withoutTrailingZeros` and `withoutTrailingZerosAndCurrency`
+
+  `<Money />` now has two additional and optional props: `withoutMoney` and `withoutCurrency`.
+
+- [#1242](https://github.com/Shopify/hydrogen/pull/1242) [`c277c688`](https://github.com/Shopify/hydrogen/commit/c277c68836d6d75d509cc68c74e3ccd33706a0c7) Thanks [@blittle](https://github.com/blittle)! - Prevent JSON parsing from prototype poisoning vulnerabilities
+
+* [#1210](https://github.com/Shopify/hydrogen/pull/1210) [`a844d26e`](https://github.com/Shopify/hydrogen/commit/a844d26ef258c28fded5293054389b719f0b86f4) Thanks [@blittle](https://github.com/blittle)! - Add eslint back and fix stale product options
+
+## 0.17.3
+
+### Patch Changes
+
+- [#1096](https://github.com/Shopify/hydrogen/pull/1096) [`0a15376e`](https://github.com/Shopify/hydrogen/commit/0a15376ec806054ddd5848d9dbfa6e50a85beb49) Thanks [@wizardlyhel](https://github.com/wizardlyhel)! - Make performance data available with ClientAnalytics and optional for developers to include
+
+* [#1209](https://github.com/Shopify/hydrogen/pull/1209) [`d0dada0a`](https://github.com/Shopify/hydrogen/commit/d0dada0a0b3170d2cb885d2f29bbbef0c6d9e9e4) Thanks [@blittle](https://github.com/blittle)! - Make metafields optional within the ProductProvider. Fixes #1127
+
+## 0.17.2
+
+### Patch Changes
+
+- [#1161](https://github.com/Shopify/hydrogen/pull/1161) [`6b963fb1`](https://github.com/Shopify/hydrogen/commit/6b963fb1fdd2824683870c8ff3258447bf7fedea) Thanks [@merwan7](https://github.com/merwan7)! - Adds ability to add multiple cookies in one response
+
+* [#1162](https://github.com/Shopify/hydrogen/pull/1162) [`5446d544`](https://github.com/Shopify/hydrogen/commit/5446d544f151e233e909e6a6f002e87863ae6151) Thanks [@arlyxiao](https://github.com/arlyxiao)! - Upgrade body-parser
+
+- [#1200](https://github.com/Shopify/hydrogen/pull/1200) [`7fb7ee49`](https://github.com/Shopify/hydrogen/commit/7fb7ee497091df3177d53e8745edcae6ba99a87d) Thanks [@blittle](https://github.com/blittle)! - Add bot user agents for Seoradar and Adresults, resolves #1199
+
+* [#1167](https://github.com/Shopify/hydrogen/pull/1167) [`0a5ac1cb`](https://github.com/Shopify/hydrogen/commit/0a5ac1cbec449eefe48041ed6aceaac375dfa601) Thanks [@benjaminsehl](https://github.com/benjaminsehl)! - Only warn in console on missing Model3D alt tag, do not throw error
+
+- [#1152](https://github.com/Shopify/hydrogen/pull/1152) [`d3e3e695`](https://github.com/Shopify/hydrogen/commit/d3e3e695457e6eb2a3ebf9767e0f10cc3570e880) Thanks [@jplhomer](https://github.com/jplhomer)! - Fix scroll restoration when server props are changed
+
 ## 0.17.1
 
 ### Patch Changes
@@ -343,7 +478,7 @@
   }, []);
   ```
 
-  See an example on how this could be done inside the Demo Store template [country selector](https://github.com/Shopify/hydrogen/blob/v1.x-2022-07/examples/template-hydrogen-default/src/components/CountrySelector.client.jsx)
+  See an example on how this could be done inside the Demo Store template [country selector](https://github.com/Shopify/hydrogen/blob/v1.x-2022-07/templates/template-hydrogen-default/src/components/CountrySelector.client.jsx)
 
 - [#698](https://github.com/Shopify/hydrogen/pull/698) [`6f30b9a1`](https://github.com/Shopify/hydrogen/commit/6f30b9a1327f06d648a01dd94d539c7dcb3061e0) Thanks [@jplhomer](https://github.com/jplhomer)! - Basic end-to-end tests have been added to the default Hydrogen template. You can run tests in development:
 

package/config.js

@@ -0,0 +1 @@
+export * from './dist/esnext/config';

package/dist/esnext/client.d.ts

@@ -11,3 +11,5 @@ export { useRouteParams } from './foundation/useRouteParams/useRouteParams';
 export { useNavigate } from './foundation/useNavigate/useNavigate';
 export { fetchSync } from './foundation/fetchSync/client/fetchSync';
 export { suspendFunction, preloadFunction } from './utilities/suspense';
+export { PerformanceMetrics } from './foundation/Analytics/connectors/PerformanceMetrics/PerformanceMetrics.client';
+export { PerformanceMetricsDebug } from './foundation/Analytics/connectors/PerformanceMetrics/PerformanceMetricsDebug.client';

package/dist/esnext/client.js

@@ -11,3 +11,5 @@ export { useRouteParams } from './foundation/useRouteParams/useRouteParams';
 export { useNavigate } from './foundation/useNavigate/useNavigate';
 export { fetchSync } from './foundation/fetchSync/client/fetchSync';
 export { suspendFunction, preloadFunction } from './utilities/suspense';
+export { PerformanceMetrics } from './foundation/Analytics/connectors/PerformanceMetrics/PerformanceMetrics.client';
+export { PerformanceMetricsDebug } from './foundation/Analytics/connectors/PerformanceMetrics/PerformanceMetricsDebug.client';

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

@@ -27,9 +27,9 @@ export function AddToCartButton(props) {
                 setAddingItem(true);
                 linesAdd([
                     {
-                        quantity: quantity,
+                        quantity,
                         merchandiseId: variantId,
-                        attributes: attributes,
+                        attributes,
                     },
                 ]);
             } }, children),

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useCallback, useReducer, useMemo, useRef, } from 'react';
 import { flattenConnection } from '../../utilities';
 import { CartLineAdd, CartCreate, CartLineRemove, CartLineUpdate, CartNoteUpdate, CartBuyerIdentityUpdate, CartAttributesUpdate, CartDiscountCodesUpdate, CartQuery, } from './cart-queries';
-import { useCartFetch } from './hooks';
+import { useCartFetch } from './hooks.client';
 import { CartContext } from './context';
 import { CART_ID_STORAGE_KEY } from './constants';
 import { useServerProps } from '../../foundation/useServerProps';
@@ -197,7 +197,7 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
         if (error) {
             dispatch({
                 type: 'reject',
-                error: error,
+                error,
             });
         }
         if ((_b = data === null || data === void 0 ? void 0 : data.cartCreate) === null || _b === void 0 ? void 0 : _b.cart) {
@@ -223,7 +223,7 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
                 query: CartLineAdd,
                 variables: {
                     cartId: state.cart.id,
-                    lines: lines,
+                    lines,
                     numCartLines,
                     country: countryCode,
                 },
@@ -231,7 +231,7 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
             if (error) {
                 dispatch({
                     type: 'reject',
-                    error: error,
+                    error,
                 });
             }
             if ((_a = data === null || data === void 0 ? void 0 : data.cartLinesAdd) === null || _a === void 0 ? void 0 : _a.cart) {
@@ -255,7 +255,7 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
                 query: CartLineRemove,
                 variables: {
                     cartId: state.cart.id,
-                    lines: lines,
+                    lines,
                     numCartLines,
                     country: countryCode,
                 },
@@ -287,7 +287,7 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
                 query: CartLineUpdate,
                 variables: {
                     cartId: state.cart.id,
-                    lines: lines,
+                    lines,
                     numCartLines,
                     country: countryCode,
                 },
@@ -295,7 +295,7 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
             if (error) {
                 dispatch({
                     type: 'reject',
-                    error: error,
+                    error,
                 });
             }
             if ((_a = data === null || data === void 0 ? void 0 : data.cartLinesUpdate) === null || _a === void 0 ? void 0 : _a.cart) {
@@ -319,7 +319,7 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
                 query: CartNoteUpdate,
                 variables: {
                     cartId: state.cart.id,
-                    note: note,
+                    note,
                     numCartLines,
                     country: countryCode,
                 },
@@ -327,7 +327,7 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
             if (error) {
                 dispatch({
                     type: 'reject',
-                    error: error,
+                    error,
                 });
             }
             if ((_a = data === null || data === void 0 ? void 0 : data.cartNoteUpdate) === null || _a === void 0 ? void 0 : _a.cart) {
@@ -355,7 +355,7 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
             if (error) {
                 dispatch({
                     type: 'reject',
-                    error: error,
+                    error,
                 });
             }
             if ((_a = data === null || data === void 0 ? void 0 : data.cartBuyerIdentityUpdate) === null || _a === void 0 ? void 0 : _a.cart) {
@@ -375,7 +375,7 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
                 query: CartAttributesUpdate,
                 variables: {
                     cartId: state.cart.id,
-                    attributes: attributes,
+                    attributes,
                     numCartLines,
                     country: countryCode,
                 },
@@ -383,7 +383,7 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
             if (error) {
                 dispatch({
                     type: 'reject',
-                    error: error,
+                    error,
                 });
             }
             if ((_a = data === null || data === void 0 ? void 0 : data.cartAttributesUpdate) === null || _a === void 0 ? void 0 : _a.cart) {
@@ -403,7 +403,7 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
                 query: CartDiscountCodesUpdate,
                 variables: {
                     cartId: state.cart.id,
-                    discountCodes: discountCodes,
+                    discountCodes,
                     numCartLines,
                     country: countryCode,
                 },
@@ -411,7 +411,7 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
             if (error) {
                 dispatch({
                     type: 'reject',
-                    error: error,
+                    error,
                 });
             }
             if ((_a = data === null || data === void 0 ? void 0 : data.cartDiscountCodesUpdate) === null || _a === void 0 ? void 0 : _a.cart) {
@@ -440,6 +440,7 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
             return;
         }
         buyerIdentityUpdate({ countryCode }, state);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [countryCode]);
     const cartContextValue = useMemo(() => {
         return {

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

@@ -1,4 +1,4 @@
 export { CartProvider } from './CartProvider.client';
-export { useCartFetch, useInstantCheckout } from './hooks';
+export { useCartFetch, useInstantCheckout } from './hooks.client';
 export { useCart } from '../../hooks/useCart';
 export type { State, Status, Cart, CartWithActions, CartAction } from './types';

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

@@ -1,3 +1,3 @@
 export { CartProvider } from './CartProvider.client';
-export { useCartFetch, useInstantCheckout } from './hooks';
+export { useCartFetch, useInstantCheckout } from './hooks.client';
 export { useCart } from '../../hooks/useCart';

package/dist/esnext/components/{DevTools.js → DevTools.client.js}

@@ -19,9 +19,9 @@ export default function DevTools() {
     const entry = perfData[0];
     let activePanelContent = null;
     switch (activePanel) {
-        case 'warnings':
+        case 'warnings': {
             const warningsMarkup = warnings
-                ? warnings.map((war, i) => React.createElement("li", { key: war + i }, war))
+                ? warnings.map((war, i) => React.createElement("li", { key: war + i }, war)) // eslint-disable-line react/no-array-index-key
                 : null;
             activePanelContent = (React.createElement(React.Fragment, null,
                 React.createElement(PanelHeading, null, "Overfetched graphQL fields"),
@@ -31,6 +31,7 @@ export default function DevTools() {
                         fontSize: '0.9em',
                     } }, warningsMarkup)));
             break;
+        }
         case 'network':
             activePanelContent = (React.createElement(React.Fragment, null,
                 React.createElement(PanelHeading, null, "Metrics"),

package/dist/esnext/components/Image/Image.js

@@ -34,7 +34,9 @@ export function Image(props) {
     const srcPath = imgProps.loader
         ? imgProps.loader({ src: imgProps.src, options: imgProps.loaderOptions })
         : imgProps.src;
+    /* eslint-disable hydrogen/prefer-image-component */
     return (React.createElement("img", { id: (_a = imgProps.id) !== null && _a !== void 0 ? _a : '', loading: "lazy", alt: (_b = imgProps.alt) !== null && _b !== void 0 ? _b : '', ...passthroughProps, src: srcPath, width: (_c = imgProps.width) !== null && _c !== void 0 ? _c : undefined, height: (_d = imgProps.height) !== null && _d !== void 0 ? _d : undefined }));
+    /* eslint-enable hydrogen/prefer-image-component */
 }
 function convertShopifyImageData({ data, options, loader, loaderOptions, id: propId, alt, }) {
     const { url: src, altText, id } = data;

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

@@ -30,12 +30,21 @@ export const Link = React.forwardRef(function Link(props, ref) {
             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, {
+            navigate(to, {
                 replace,
                 clientState,
             });
         }
-    }, [reloadDocument, target, _replace, to, clientState, onClick, location]);
+    }, [
+        reloadDocument,
+        target,
+        _replace,
+        to,
+        clientState,
+        onClick,
+        location,
+        navigate,
+    ]);
     const signalPrefetchIntent = () => {
         /**
          * startTransition to yield to more important updates

package/dist/esnext/components/LocalizationProvider/LocalizationProvider.server.js

@@ -15,7 +15,7 @@ import { CacheDays } from '../../framework/CachingStrategy';
 export function LocalizationProvider(props) {
     const { languageCode } = useShop();
     const { data: { localization }, } = useShopQuery({
-        query: query,
+        query,
         variables: { language: languageCode },
         cache: CacheDays(),
         preload: props.preload,

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

@@ -52,18 +52,17 @@ export function Metafield(props) {
         }
         case 'url':
             return (React.createElement("a", { href: data.value, ...passthroughProps }, data.value));
-        case 'json':
+        case 'json': {
             const Wrapper = as !== null && as !== void 0 ? as : 'span';
             return (React.createElement(Wrapper, { ...passthroughProps }, JSON.stringify(data.value)));
+        }
         case 'file_reference': {
             if (((_a = data.reference) === null || _a === void 0 ? void 0 : _a.__typename) === 'MediaImage') {
                 const ref = data.reference;
                 return ref.image ? (React.createElement(Image, { data: ref.image, ...passthroughProps })) : null;
             }
         }
-        default: {
-            const Wrapper = as !== null && as !== void 0 ? as : 'span';
-            return React.createElement(Wrapper, { ...passthroughProps }, data.value.toString());
-        }
     }
+    const Wrapper = as !== null && as !== void 0 ? as : 'span';
+    return React.createElement(Wrapper, { ...passthroughProps }, data.value.toString());
 }

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

@@ -112,7 +112,7 @@ interface ModelViewerProps {
     /** The callback to invoke when the 'scene-graph-ready' event is triggered. Refer to [scene-graph-ready in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-scenegraph-events-sceneGraphReady). */
     onSceneGraphReady?: (event: Event) => void;
 }
-declare type PropsWeControl = 'src' | 'alt' | 'poster';
+declare type PropsWeControl = 'src' | 'poster';
 declare global {
     namespace JSX {
         interface IntrinsicElements {

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback, } from 'react';
-import { useLoadScript } from '../../hooks/useLoadScript/useLoadScript';
+import { useLoadScript } from '../../hooks/useLoadScript/useLoadScript.client';
 /**
  * The `ModelViewer` component renders a 3D model (with the `model-viewer` tag) for
  * the Storefront API's [Model3d object](https://shopify.dev/api/storefront/reference/products/model3d).
@@ -99,7 +99,7 @@ export function ModelViewer(props) {
         throw new Error(`<ModelViewer/> requires 'data.sources' prop to be an array, with an object that has a property 'url' on it`);
     }
     if (!data.alt) {
-        throw new Error(`<ModelViewer/> requires the 'data.alt' prop`);
+        console.warn(`<ModelViewer/> requires the 'data.alt' prop for accessibility`);
     }
     return (React.createElement("model-viewer", { ref: callbackRef, ...passthroughProps, class: className, id: id, src: data.sources[0].url, alt: data.alt, "camera-controls": (_c = passthroughProps.cameraControls) !== null && _c !== void 0 ? _c : true, poster: passthroughProps.poster || ((_d = data.previewImage) === null || _d === void 0 ? void 0 : _d.url), autoplay: (_e = passthroughProps.autoplay) !== null && _e !== void 0 ? _e : true, loading: passthroughProps.loading, reveal: passthroughProps.reveal, ar: passthroughProps.ar, "ar-modes": passthroughProps.arModes, "ar-scale": passthroughProps.arScale, "ar-placement": passthroughProps.arPlacement, "ios-src": passthroughProps.iosSrc, "touch-action": passthroughProps.touchAction, "disable-zoom": passthroughProps.disableZoom, "orbit-sensitivity": passthroughProps.orbitSensitivity, "auto-rotate": passthroughProps.autoRotate, "auto-rotate-delay": passthroughProps.autoRotateDelay, "rotation-per-second": passthroughProps.rotationPerSecond, "interaction-policy": passthroughProps.interactionPolicy, "interaction-prompt": passthroughProps.interactionPrompt, "interaction-prompt-style": passthroughProps.interactionPromptStyle, "interaction-prompt-threshold": passthroughProps.interactionPromptThreshold, "camera-orbit": passthroughProps.cameraOrbit, "camera-target": passthroughProps.cameraTarget, "field-of-view": passthroughProps.fieldOfView, "max-camera-orbit": passthroughProps.maxCameraOrbit, "min-camera-orbit": passthroughProps.minCameraOrbit, "max-field-of-view": passthroughProps.maxFieldOfView, "min-field-of-view": passthroughProps.minFieldOfView, bounds: passthroughProps.bounds, "interpolation-decay": (_f = passthroughProps.interpolationDecay) !== null && _f !== void 0 ? _f : 100, "skybox-image": passthroughProps.skyboxImage, "environment-image": passthroughProps.environmentImage, exposure: passthroughProps.exposure, "shadow-intensity": (_g = passthroughProps.shadowIntensity) !== null && _g !== void 0 ? _g : 0, "shadow-softness": (_h = passthroughProps.shadowSoftness) !== null && _h !== void 0 ? _h : 0, "animation-name": passthroughProps.animationName, "animation-crossfade-duration": passthroughProps.animationCrossfadeDuration, "variant-name": passthroughProps.variantName, orientation: passthroughProps.orientation, scale: passthroughProps.scale }, children));
 }

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

@@ -5,11 +5,15 @@ interface MoneyProps<TTag> {
     as?: TTag;
     /** An object with fields that correspond to the Storefront API's [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2). */
     data: PartialDeep<MoneyV2>;
+    /** Whether to remove the currency symbol from the output. */
+    withoutCurrency?: boolean;
+    /** Whether to remove trailing zeros (fractional money) from the output. */
+    withoutTrailingZeros?: boolean;
 }
 /**
  * The `Money` component renders a string of the Storefront API's
  * [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) according to the
- * `defaultLocale` in the `shopify.config.js` file.
+ * `defaultLocale` in [the `hydrogen.config.js` file](https://shopify.dev/custom-storefronts/hydrogen/framework/hydrogen-config).
  */
 export declare function Money<TTag extends keyof JSX.IntrinsicElements = 'div'>(props: JSX.IntrinsicElements[TTag] & MoneyProps<TTag>): JSX.Element;
 export {};

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

@@ -3,11 +3,24 @@ import { useMoney } from '../../hooks';
 /**
  * The `Money` component renders a string of the Storefront API's
  * [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) according to the
- * `defaultLocale` in the `shopify.config.js` file.
+ * `defaultLocale` in [the `hydrogen.config.js` file](https://shopify.dev/custom-storefronts/hydrogen/framework/hydrogen-config).
  */
 export function Money(props) {
-    const { data, as, ...passthroughProps } = props;
+    const { data, as, withoutCurrency, withoutTrailingZeros, ...passthroughProps } = props;
     const moneyObject = useMoney(data);
     const Wrapper = as !== null && as !== void 0 ? as : 'div';
-    return React.createElement(Wrapper, { ...passthroughProps }, moneyObject.localizedString);
+    let output = moneyObject.localizedString;
+    if (withoutCurrency || withoutTrailingZeros) {
+        if (withoutCurrency && !withoutTrailingZeros) {
+            output = moneyObject.amount;
+        }
+        else if (!withoutCurrency && withoutTrailingZeros) {
+            output = moneyObject.withoutTrailingZeros;
+        }
+        else {
+            // both
+            output = moneyObject.withoutTrailingZerosAndCurrency;
+        }
+    }
+    return React.createElement(Wrapper, { ...passthroughProps }, output);
 }

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

@@ -26,7 +26,7 @@ export function ProductMetafield(props) {
         const message = 'does not have a value for metafield.';
         const productOrVariant = variantId ? `Variant` : 'Product';
         const logItems = {
-            variantId: variantId,
+            variantId,
             ProductId: product.id,
             namespace,
             keyName,

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

@@ -6,7 +6,7 @@ export function ProductOptionsProvider({ children, initialVariantId, }) {
     const product = useProduct();
     const productOptions = useProductOptions({
         variants: product.variantsConnection,
-        initialVariantId: initialVariantId,
+        initialVariantId,
     });
     return (React.createElement(ProductOptionsContext.Provider, { value: productOptions }, children));
 }

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

@@ -7,9 +7,13 @@ export interface ProductProviderProps {
     children: ReactNode;
     /** A [Product object](https://shopify.dev/api/storefront/reference/products/product). */
     data: PartialDeep<ProductType>;
-    /** The initially selected variant. If this is missing, then `selectedVariantId`
-     * in the returned `object` from the `useProduct` hook uses the first available variant
-     * or the first variant (if none are available).
+    /** The initially selected variant.
+     * The following logic applies to `initialVariantId`:
+     * If `initialVariantId` is provided, then it's used, even if it's out of stock.
+     * If `initialVariantId` is provided, but is `null`, then no variant is used.
+     * If nothing is passed to `initialVariantId`, and you're in a `ProductProvider`, then `selectedVariant.id` is used.
+     * If nothing is passed to `initialVariantId` and you're not in a `ProductProvider`, then the first available or in-stock variant is used.
+     * If nothing is passed to `initialVariantId`, you're not in a `ProductProvider`, and no variants are in stock, then the first variant is used.
      */
     initialVariantId?: Parameters<typeof useProductOptions>['0']['initialVariantId'];
 }

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

@@ -8,7 +8,7 @@ import { ProductOptionsProvider } from './ProductOptionsProvider.client';
  * this component can use the `useProduct` hook.
  */
 export function ProductProvider({ children, data: product, initialVariantId, }) {
-    const metafields = useParsedMetafields(product.metafields);
+    const metafields = useParsedMetafields(product.metafields || {});
     // @ts-expect-error The types here are broken on main, need to come back and fix them sometime
     const providerValue = useMemo(() => {
         return {

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';
+import { useLoadScript } from '../../hooks/useLoadScript/useLoadScript.client';
 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.
@@ -34,7 +34,11 @@ export function ShopPayButton({ variantIds, className, variantIdsAndQuantities,
     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(',') }))));
+    return (
+    /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
+    React.createElement("div", { className: className, tabIndex: 0 }, shopPayLoadedStatus === 'done' && (React.createElement("shop-pay-button", { "store-url": `https://${storeDomain}`, variants: ids.join(',') })))
+    /* eslint-enable jsx-a11y/no-noninteractive-tabindex */
+    );
 }
 /**
  * Takes a string in the format of "gid://shopify/ProductVariant/41007289630776" and returns a string of the ID part at the end: "41007289630776"

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

@@ -10,7 +10,9 @@ export function Video(props) {
     if (!data.sources) {
         throw new Error(`<Video/> requires a 'data.sources' array`);
     }
-    return (React.createElement("video", { ...passthroughProps, id: id, playsInline: playsInline, controls: controls, poster: posterUrl }, data.sources.map((source) => {
+    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))) {
             throw new Error(`<Video/> needs 'source.url' and 'source.mimeType'`);
         }

package/dist/esnext/config.d.ts

@@ -0,0 +1,3 @@
+import type { HydrogenConfig } from './types';
+export declare const defineConfig: (params: HydrogenConfig) => HydrogenConfig;
+export type { HydrogenConfig };

package/dist/esnext/config.js

@@ -0,0 +1 @@
+export const defineConfig = (params) => params;

package/dist/esnext/constants.js

@@ -1,6 +1,6 @@
 export const RSC_PATHNAME = '/__rsc';
 export const EVENT_PATHNAME = '/__event';
-export const EVENT_PATHNAME_REGEX = new RegExp(`^${EVENT_PATHNAME}\/`);
+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';

package/dist/esnext/entry-client.js

@@ -1,10 +1,11 @@
+/* eslint-disable hydrogen/no-state-in-server-components */
 import React, { Suspense, useState, StrictMode, Fragment, } from 'react';
 // @ts-expect-error hydrateRoot isn't on the TS types yet, but we're using React 18 so it exists
 import { hydrateRoot } from 'react-dom/client';
 import { ErrorBoundary } from 'react-error-boundary';
 import { useServerResponse } from './framework/Hydration/rsc';
 import { ServerPropsProvider } from './foundation/ServerPropsProvider';
-const DevTools = React.lazy(() => import('./components/DevTools'));
+const DevTools = React.lazy(() => import('./components/DevTools.client'));
 const renderHydrogen = async (ClientWrapper, config) => {
     const root = document.getElementById('root');
     if (!root) {
@@ -69,3 +70,4 @@ function Error({ error }) {
                 React.createElement("a", { href: "/", style: { textDecoration: 'underline' } }, "home page"),
                 "."))));
 }
+/* eslint-enable hydrogen/no-state-in-server-components */

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

@@ -1,5 +1,5 @@
 /// <reference types="node" />
-import type { ServerHandlerConfig } from './types';
+import type { HydrogenConfig } from './types';
 import type { ServerResponse, IncomingMessage } from 'http';
 import { RuntimeContext } from './framework/runtime';
 declare global {
@@ -19,5 +19,5 @@ interface RequestHandlerOptions {
 export interface RequestHandler {
     (request: Request | IncomingMessage, options: RequestHandlerOptions): Promise<Response | undefined>;
 }
-export declare const renderHydrogen: (App: any, { shopifyConfig, routes, serverAnalyticsConnectors, session, }: ServerHandlerConfig) => RequestHandler;
+export declare const renderHydrogen: (App: any, hydrogenConfig?: HydrogenConfig | undefined) => RequestHandler;
 export default renderHydrogen;