@shopify/hydrogen 0.15.0 → 0.17.0

package/CHANGELOG.md

@@ -1,12 +1,124 @@
 # Changelog
 
+## 0.17.0
+
+### Minor Changes
+
+- [#1044](https://github.com/Shopify/hydrogen/pull/1044) [`c8f5934d`](https://github.com/Shopify/hydrogen/commit/c8f5934d85db63162a13256cfcf21098b390887b) Thanks [@blittle](https://github.com/blittle)! - Hydrogen now has a built in session and cookie implementation. Read more about [how sessions work in Hydrogen](https://shopify.dev/custom-storefronts/hydrogen/framework/sessions). The starter template also includes a cookie session storage implementation. To use the new session implementation within an existing Hydrogen app:
+
+  ```diff
+  import renderHydrogen from '@shopify/hydrogen/entry-server';
+  import {
+    Router,
+    Route,
+    FileRoutes,
+    ShopifyProvider,
+  +  CookieSessionStorage,
+  } from '@shopify/hydrogen';
+  import {Suspense} from 'react';
+  import shopifyConfig from '../shopify.config';
+  import DefaultSeo from './components/DefaultSeo.server';
+  import NotFound from './components/NotFound.server';
+  import LoadingFallback from './components/LoadingFallback';
+  import CartProvider from './components/CartProvider.client';
+
+  function App({routes}) {
+    return (
+      <Suspense fallback={<LoadingFallback />}>
+        <ShopifyProvider shopifyConfig={shopifyConfig}>
+          <CartProvider>
+            <DefaultSeo />
+            <Router>
+              <FileRoutes routes={routes} />
+              <Route path="*" page={<NotFound />} />
+            </Router>
+          </CartProvider>
+        </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,
+  +  }),
+  });
+
+  ```
+
+* [#881](https://github.com/Shopify/hydrogen/pull/881) [`a31babfb`](https://github.com/Shopify/hydrogen/commit/a31babfb9bf73b732a18487582cec129acbb8b5e) Thanks [@jplhomer](https://github.com/jplhomer)! - ## Change from serverState to serverProps
+
+  **Breaking changes:**
+
+  1. `useServerState()` is gone. Use `useServerProps()` instead
+  2. `useServerProps()` is reset on each page navigation. Previously `useServerState()` was not.
+  3. `useServerProps()` does not contain `pathname` and `search`. Use the [useNavigate](https://shopify.dev/api/hydrogen/hooks/framework/usenavigate) hook to programmatically navigate instead.
+
+  **Explanation:**
+
+  The current behavior of server state is to **persist indefinitely** (until a hard page reload). This works great for things like the CountrySelector, where the updated state is meant to persist across navigations. This breaks down for many other use cases. Consider a collection paginator: if you paginate through to the second page of a collection using server state, visit a product page, and then go to a different collection page, the new collection page will use that same pagination variable in server state. This will result in a wonky or errored experience.
+
+  Additionally, we have found that the term for `serverState` is confusing. The hook is used within client components, yet the state is passed as a prop to server components.
+
+  As a result, `serverState` is now gone. Instead communicating between client and server components is through `serverProps`. If a client component wants to re-render server content, it just calls `setServerProps('some', 'data')`. Those props will be serialized to the server, and the server component will re-render. Additionally, the server props are reset on page navigation. So that they will not bleed between pages (fixes #331).
+
+  If you previously relied on `serverState` for global state in your app, you shouldn't use `serverProps` anymore. Instead we'll introduce a new session based mechanism for global state (in the meantime you could manually manage a cookie).
+
+  Lastly, `serverProps` no longer include the `pathname` and `search` parameters. Programmatically navigate in hydrogen instead with the [useNavigate](https://shopify.dev/api/hydrogen/hooks/framework/usenavigate) hook.
+
+- [#1098](https://github.com/Shopify/hydrogen/pull/1098) [`f3dafec4`](https://github.com/Shopify/hydrogen/commit/f3dafec4b3113c85e33a15ee70b3f91c741e74f9) Thanks [@wizardlyhel](https://github.com/wizardlyhel)! - Obfuscate chunk filename on production build
+
+### Patch Changes
+
+- [#1131](https://github.com/Shopify/hydrogen/pull/1131) [`8199023b`](https://github.com/Shopify/hydrogen/commit/8199023b88924db156e2a687dd6dfce2665ab638) Thanks [@blittle](https://github.com/blittle)! - Fix hydration issue where strings with $ would get converted to a single $
+
+* [#1105](https://github.com/Shopify/hydrogen/pull/1105) [`57ececf8`](https://github.com/Shopify/hydrogen/commit/57ececf82ee0c264abc256df8b02555772cc2419) Thanks [@frehner](https://github.com/frehner)! - Regenerate the graphql.schema.json which should fix the sudden end-of-line termination, and makes the schema valid again.
+
+- [#1099](https://github.com/Shopify/hydrogen/pull/1099) [`6b50d371`](https://github.com/Shopify/hydrogen/commit/6b50d37158aab1a4a82626e09865d27e14adfbfb) Thanks [@blittle](https://github.com/blittle)! - Fix Hydrogen to not hard fail when client analytics doesn't load. Analytics might fail to load due to client-side adblockers.
+
+## 0.16.1
+
+### Patch Changes
+
+- [#1102](https://github.com/Shopify/hydrogen/pull/1102) [`59ee791a`](https://github.com/Shopify/hydrogen/commit/59ee791ac81f41764b4ab3e5dd667c0c72b672d3) Thanks [@frandiox](https://github.com/frandiox)! - Do not call client exported functions during RSC.
+
+## 0.16.0
+
+### Patch Changes
+
+- [#1082](https://github.com/Shopify/hydrogen/pull/1082) [`bd14340c`](https://github.com/Shopify/hydrogen/commit/bd14340c3099a0bf375a5879410cdf0697ed22f6) Thanks [@jplhomer](https://github.com/jplhomer)! - Update `useUrl()` to allow a developer to subscribe to a reactive version of the current router location.
+
+  Example:
+
+  ```jsx
+  import {useUrl} from '@shopify/hydrogen/client';
+
+  function MyClientComponent() {
+    const url = useUrl();
+
+    useEffect(() => {
+      // Record navigation, analytics, etc
+    }, [url]);
+  }
+  ```
+
+* [#1075](https://github.com/Shopify/hydrogen/pull/1075) [`05dea552`](https://github.com/Shopify/hydrogen/commit/05dea552c90862a125b5111993003355a019b556) Thanks [@jplhomer](https://github.com/jplhomer)! - Properly set buyer IP and secret token for API Route queryShop helper
+
 ## 0.15.0
 
 ### Minor Changes
 
 - [#983](https://github.com/Shopify/hydrogen/pull/983) [`52af261b`](https://github.com/Shopify/hydrogen/commit/52af261ba2bf6ed08e232b9fb2d75e69905f4cc6) Thanks [@jplhomer](https://github.com/jplhomer)! - Introduce Suspense-friendly `fetchSync` API for server and client components.
 
-  When using `fetchSync` in server components, you provide options for caching and preloading. This is similar to the [`useQuery` hook](<[/api/hydrogen/hooks/global/useQuery](https://shopify.dev/api/hydrogen/hooks/global/usequery)>):
+  When using `fetchSync` in server components, you provide options for caching and preloading. This is similar to the [`useQuery` hook](https://shopify.dev/api/hydrogen/hooks/global/usequery):
 
   ```jsx
   import {fetchSync, CacheMinutes} from '@shopify/hydrogen';

package/dist/esnext/FileSessionStorage.d.ts

@@ -0,0 +1 @@
+export { FileSessionStorage } from './foundation/FileSessionStorage/FileSessionStorage';

package/dist/esnext/FileSessionStorage.js

@@ -0,0 +1 @@
+export { FileSessionStorage } from './foundation/FileSessionStorage/FileSessionStorage';

package/dist/esnext/client.d.ts

@@ -1,8 +1,9 @@
 export * from './components';
 export * from './hooks';
-export * from './foundation/useServerState';
+export * from './foundation/useServerProps';
 export * from './foundation/useShop';
-export * from './foundation/ServerStateProvider';
+export * from './foundation/ServerPropsProvider';
+export * from './foundation/useUrl';
 export { Head } from './foundation/Head';
 export * from './utilities';
 export { ClientAnalytics } from './foundation/Analytics';

package/dist/esnext/client.js

@@ -1,8 +1,9 @@
 export * from './components';
 export * from './hooks';
-export * from './foundation/useServerState';
+export * from './foundation/useServerProps';
 export * from './foundation/useShop';
-export * from './foundation/ServerStateProvider';
+export * from './foundation/ServerPropsProvider';
+export * from './foundation/useUrl';
 export { Head } from './foundation/Head';
 export * from './utilities';
 export { ClientAnalytics } from './foundation/Analytics';

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

@@ -30,7 +30,7 @@ export declare function CartProvider({ children, numCartLines, onCreate, onLineA
     /** A callback that is invoked when the process to update the cart discount codes begins, but before the discount codes are updated in the Storefront API. */
     onDiscountCodesUpdate?: () => void;
     /**
-     * An object with fields that correspond to the Storefront API's [Cart object](/api/storefront/latest/objects/cart).
+     * An object with fields that correspond to the Storefront API's [Cart object](https://shopify.dev/api/storefront/latest/objects/cart).
      */
     data?: CartFragmentFragment;
 }): JSX.Element;

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

@@ -4,7 +4,7 @@ import { CartLineAdd, CartCreate, CartLineRemove, CartLineUpdate, CartNoteUpdate
 import { useCartFetch } from './hooks';
 import { CartContext } from './context';
 import { CART_ID_STORAGE_KEY } from './constants';
-import { useServerState } from '../../foundation/useServerState';
+import { useServerProps } from '../../foundation/useServerProps';
 import { ClientAnalytics } from '../../foundation/Analytics';
 function cartReducer(state, action) {
     switch (action.type) {
@@ -152,8 +152,8 @@ function cartReducer(state, action) {
  */
 export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLineRemove, onLineUpdate, onNoteUpdate, onBuyerIdentityUpdate, onAttributesUpdate, onDiscountCodesUpdate, data: cart, }) {
     var _a;
-    const { serverState } = useServerState();
-    const countryCode = (_a = serverState === null || serverState === void 0 ? void 0 : serverState.country) === null || _a === void 0 ? void 0 : _a.isoCode;
+    const { serverProps } = useServerProps();
+    const countryCode = (_a = serverProps === null || serverProps === void 0 ? void 0 : serverProps.country) === null || _a === void 0 ? void 0 : _a.isoCode;
     const initialStatus = cart
         ? { status: 'idle', cart: cartFromGraphQL(cart) }
         : { status: 'uninitialized' };

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

@@ -3,7 +3,7 @@ import type { ExternalVideo as ExternalVideoType } from '../../storefront-api-ty
 import type { PartialDeep } from 'type-fest';
 interface ExternalVideoProps {
     /**
-     * An object with fields that correspond to the Storefront API's [ExternalVideo object](/api/storefront/reference/products/externalvideo).
+     * An object with fields that correspond to the Storefront API's [ExternalVideo object](https://shopify.dev/api/storefront/reference/products/externalvideo).
      */
     data: PartialDeep<ExternalVideoType>;
     /** An object containing the options available for either
@@ -15,7 +15,7 @@ interface ExternalVideoProps {
 declare type PropsWeControl = 'src';
 /**
  * The `ExternalVideo` component renders an embedded video for the Storefront
- * API's [ExternalVideo object](/api/storefront/reference/products/externalvideo).
+ * API's [ExternalVideo object](https://shopify.dev/api/storefront/reference/products/externalvideo).
  */
 export declare function ExternalVideo(props: Omit<JSX.IntrinsicElements['iframe'], PropsWeControl> & ExternalVideoProps): JSX.Element;
 export {};

package/dist/esnext/components/ExternalVideo/ExternalVideo.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { useEmbeddedVideoUrl } from '../../utilities';
 /**
  * The `ExternalVideo` component renders an embedded video for the Storefront
- * API's [ExternalVideo object](/api/storefront/reference/products/externalvideo).
+ * API's [ExternalVideo object](https://shopify.dev/api/storefront/reference/products/externalvideo).
  */
 export function ExternalVideo(props) {
     const { data, options, id = data.id, frameBorder = '0', allow = 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture', allowFullScreen = true, ...passthroughProps } = props;

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

@@ -14,7 +14,7 @@ export interface BaseImageProps {
 }
 interface MediaImagePropsBase extends BaseImageProps {
     /** An object with fields that correspond to the Storefront API's
-     * [Image object](/api/storefront/reference/common-objects/image).
+     * [Image object](https://shopify.dev/api/storefront/reference/common-objects/image).
      */
     data: PartialDeep<ImageType>;
     /** An object of image size options for Shopify CDN images. */
@@ -34,7 +34,7 @@ declare type ExternalImageProps = Merge<BaseElementProps, ExternalImagePropsBase
 declare type ImageProps = MergeExclusive<MediaImageProps, ExternalImageProps>;
 /**
  * The `Image` component renders an image for the Storefront API's
- * [Image object](/api/storefront/reference/common-objects/image).
+ * [Image object](https://shopify.dev/api/storefront/reference/common-objects/image).
  */
 export declare function Image(props: ImageProps): JSX.Element;
 export {};

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { shopifyImageLoader, getShopifyImageDimensions, } from '../../utilities';
 /**
  * The `Image` component renders an image for the Storefront API's
- * [Image object](/api/storefront/reference/common-objects/image).
+ * [Image object](https://shopify.dev/api/storefront/reference/common-objects/image).
  */
 export function Image(props) {
     var _a, _b, _c, _d;

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

@@ -8,7 +8,7 @@ export interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorEle
     clientState?: any;
     /** Whether to reload the whole document on navigation. */
     reloadDocument?: boolean;
-    /** Whether to prefetch the link source when the user signals intent. Defaults to `true`. For more information, refer to [Prefetching a link source](/custom-storefronts/hydrogen/framework/routes#prefetching-a-link-source). */
+    /** Whether to prefetch the link source when the user signals intent. Defaults to `true`. For more information, refer to [Prefetching a link source](https://shopify.dev/custom-storefronts/hydrogen/framework/routes#prefetching-a-link-source). */
     prefetch?: boolean;
 }
 /**

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

@@ -2,8 +2,8 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { useRouter } from '../../foundation/Router/BrowserRouter.client';
 import { createPath } from 'history';
 import { useNavigate } from '../../foundation/useNavigate/useNavigate';
-import { useServerState } from '../../foundation/useServerState';
 import { RSC_PATHNAME } from '../../constants';
+import { useInternalServerProps } from '../../foundation/useServerProps/use-server-props';
 /**
  * The `Link` component is used to navigate between routes. Because it renders an underlying `<a>` element, all
  * properties available to the `<a>` element are also available to the `Link` component.
@@ -86,14 +86,14 @@ export const Link = React.forwardRef(function Link(props, ref) {
         shouldPrefetch && React.createElement(Prefetch, { pathname: to })));
 });
 function Prefetch({ pathname }) {
-    const { getProposedServerState } = useServerState();
+    const { getProposedLocationServerProps } = useInternalServerProps();
     const { location } = useRouter();
     const newPath = createPath({ pathname });
     if (pathname.startsWith('http') || newPath === createPath(location)) {
         return null;
     }
     const newLocation = new URL(newPath, window.location.href);
-    const proposedServerState = getProposedServerState({
+    const proposedServerState = getProposedLocationServerProps({
         pathname: newLocation.pathname,
         search: newLocation.search,
     });

package/dist/esnext/components/LocalizationProvider/LocalizationClientProvider.client.js

@@ -1,13 +1,13 @@
 import React, { useMemo, useState, useCallback } from 'react';
 import { LocalizationContext } from './LocalizationContext.client';
-import { useServerState } from '../../foundation/useServerState';
+import { useServerProps } from '../../foundation/useServerProps';
 export default function LocalizationClientProvider({ localization, children, }) {
-    const { setServerState } = useServerState();
+    const { setServerProps } = useServerProps();
     const [country, setCountry] = useState(localization.country);
     const setter = useCallback((country) => {
         setCountry(country);
-        setServerState('country', country);
-    }, [setServerState]);
+        setServerProps('country', country);
+    }, [setServerProps]);
     const contextValue = useMemo(() => {
         return {
             country,

package/dist/esnext/components/LocalizationProvider/LocalizationProvider.server.d.ts

@@ -5,14 +5,14 @@ export interface LocalizationProviderProps {
     /** A `ReactNode` element. */
     children: ReactNode;
     /** Whether to preload the query. Defaults to `false`. Specify `true` to
-     * [preload the query](/custom-storefronts/hydrogen/framework/preloaded-queries) for the URL
+     * [preload the query](https://shopify.dev/custom-storefronts/hydrogen/framework/preloaded-queries) for the URL
      * or `'*'` to preload the query for all requests.
      */
     preload: PreloadOptions;
 }
 /**
  * The `LocalizationProvider` component automatically queries the Storefront API's
- * [`localization`](/api/storefront/reference/common-objects/queryroot) field
+ * [`localization`](https://shopify.dev/api/storefront/reference/common-objects/queryroot) field
  * for the `isoCode` and `name` of the `country` and keeps this information in a context.
  *
  * Any descendents of this provider can use the `useCountry` hook.

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

@@ -5,7 +5,7 @@ import { useShopQuery } from '../../hooks/useShopQuery';
 import { CacheDays } from '../../framework/CachingStrategy';
 /**
  * The `LocalizationProvider` component automatically queries the Storefront API's
- * [`localization`](/api/storefront/reference/common-objects/queryroot) field
+ * [`localization`](https://shopify.dev/api/storefront/reference/common-objects/queryroot) field
  * for the `isoCode` and `name` of the `country` and keeps this information in a context.
  *
  * Any descendents of this provider can use the `useCountry` hook.
@@ -23,7 +23,7 @@ export function LocalizationProvider(props) {
     return (React.createElement(LocalizationClientProvider, { localization: localization }, props.children));
 }
 const query = `
-query Localization($language: LanguageCode) 
+query Localization($language: LanguageCode)
 @inContext(language: $language) {
    localization {
     country {

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

@@ -5,14 +5,14 @@ import { ExternalVideo } from '../ExternalVideo';
 import type { MediaEdge as MediaEdgeType } from '../../storefront-api-types';
 import type { PartialDeep } from 'type-fest';
 export interface MediaFileProps {
-    /** An object with fields that correspond to the Storefront API's [Media object](/api/storefront/reference/products/media). */
+    /** An object with fields that correspond to the Storefront API's [Media object](https://shopify.dev/api/storefront/reference/products/media). */
     data: PartialDeep<MediaEdgeType['node']>;
     /** The options for the `Image`, `Video`, or `ExternalVideo` components. */
     options?: React.ComponentProps<typeof Image>['options'] | React.ComponentProps<typeof Video>['options'] | React.ComponentProps<typeof ExternalVideo>['options'];
 }
 /**
  * The `MediaFile` component renders the media for the Storefront API's
- * [Media object](/api/storefront/reference/products/media). It renders an `Image`, a
+ * [Media object](https://shopify.dev/api/storefront/reference/products/media). It renders an `Image`, a
  * `Video`, an `ExternalVideo`, or a `ModelViewer` depending on the `mediaContentType` of the
  * `media` provided as a prop.
  */

package/dist/esnext/components/MediaFile/MediaFile.js

@@ -5,7 +5,7 @@ import { ExternalVideo } from '../ExternalVideo';
 import { ModelViewer } from '../ModelViewer';
 /**
  * The `MediaFile` component renders the media for the Storefront API's
- * [Media object](/api/storefront/reference/products/media). It renders an `Image`, a
+ * [Media object](https://shopify.dev/api/storefront/reference/products/media). It renders an `Image`, a
  * `Video`, an `ExternalVideo`, or a `ModelViewer` depending on the `mediaContentType` of the
  * `media` provided as a prop.
  */

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

@@ -2,16 +2,20 @@ import { ElementType } from 'react';
 import { Props } from '../types';
 import { ParsedMetafield } from '../../types';
 export interface MetafieldProps<TTag> {
-    /** An object with fields that correspond to the Storefront API's [Metafield object](/api/storefront/reference/common-objects/metafield). */
+    /** An object with fields that correspond to the Storefront API's [Metafield object](https://shopify.dev/api/storefront/reference/common-objects/metafield). */
     data: ParsedMetafield;
-    /** An HTML tag to be rendered as the base element wrapper. The default value varies depending on [metafield.type](/apps/metafields/types). */
+    /** An HTML tag to be rendered as the base element wrapper. The default value varies depending on [metafield.type](https://shopify.dev/apps/metafields/types). */
     as?: TTag;
 }
 /**
  * The `Metafield` component renders the value of a Storefront
- * API's [Metafield object](/api/storefront/reference/common-objects/metafield).
+ * API's [Metafield object](https://shopify.dev/api/storefront/reference/common-objects/metafield).
  *
- * Renders a smart default of the
+ * When a render function is provided, it passes the Metafield object with a value
+ * that was parsed according to the Metafield's `type` field. For more information,
+ * refer to the [Render props](#render-props) section.
+ *
+ * When no render function is provided, it renders a smart default of the
  * Metafield's `value`. For more information, refer to the [Default output](#default-output) section.
  */
 export declare function Metafield<TTag extends ElementType>(props: Props<TTag> & MetafieldProps<TTag>): JSX.Element | null;

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

@@ -4,9 +4,13 @@ import { getMeasurementAsString } from '../../utilities';
 import { Image } from '../Image';
 /**
  * The `Metafield` component renders the value of a Storefront
- * API's [Metafield object](/api/storefront/reference/common-objects/metafield).
+ * API's [Metafield object](https://shopify.dev/api/storefront/reference/common-objects/metafield).
  *
- * Renders a smart default of the
+ * When a render function is provided, it passes the Metafield object with a value
+ * that was parsed according to the Metafield's `type` field. For more information,
+ * refer to the [Render props](#render-props) section.
+ *
+ * When no render function is provided, it renders a smart default of the
  * Metafield's `value`. For more information, refer to the [Default output](#default-output) section.
  */
 export function Metafield(props) {

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

@@ -5,11 +5,11 @@ import type { PartialDeep } from 'type-fest';
 interface ModelViewerProps {
     /** Any ReactNode elements. */
     children?: ReactNode;
-    /** An object with fields that correspond to the Storefront API's [Model3D object](/api/storefront/latest/objects/model3d). */
+    /** An object with fields that correspond to the Storefront API's [Model3D object](https://shopify.dev/api/storefront/latest/objects/model3d). */
     data: PartialDeep<Model3d>;
     /** A string of either `auto`, `lazy`, or `eager` to indicate the conditions for preloading. Refer to [loading in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-attributes-loading). */
     loading?: 'auto' | 'lazy' | 'eager';
-    /** A URL to display an image instead of the model. This is useful for showing the user something before a model is loaded and ready to render. If no URL is provided, then [Model3d.previewImage](/api/storefront/latest/objects/model3d) is used. Refer to [poster in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-attributes-poster). */
+    /** A URL to display an image instead of the model. This is useful for showing the user something before a model is loaded and ready to render. If no URL is provided, then [Model3d.previewImage](https://shopify.dev/api/storefront/latest/objects/model3d) is used. Refer to [poster in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-attributes-poster). */
     poster?: string;
     /** A string of either `auto`, `interaction`, or `manual` to indicate when the model should be revealed. Refer to [reveal in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-attributes-reveal). */
     reveal?: 'auto' | 'interaction' | 'manual';
@@ -122,7 +122,7 @@ declare global {
 }
 /**
  * The `ModelViewer` component renders a 3D model (with the `model-viewer` tag) for
- * the Storefront API's [Model3d object](/api/storefront/reference/products/model3d).
+ * the Storefront API's [Model3d object](https://shopify.dev/api/storefront/reference/products/model3d).
  */
 export declare function ModelViewer<TTag extends ElementType>(props: Props<TTag, PropsWeControl> & ModelViewerProps): JSX.Element | null;
 export {};

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

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useCallback, } from 'react';
 import { useLoadScript } from '../../hooks/useLoadScript/useLoadScript';
 /**
  * The `ModelViewer` component renders a 3D model (with the `model-viewer` tag) for
- * the Storefront API's [Model3d object](/api/storefront/reference/products/model3d).
+ * the Storefront API's [Model3d object](https://shopify.dev/api/storefront/reference/products/model3d).
  */
 export function ModelViewer(props) {
     var _a, _b, _c, _d, _e, _f, _g, _h;

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

@@ -3,12 +3,12 @@ import type { PartialDeep } from 'type-fest';
 interface MoneyProps<TTag> {
     /** An HTML tag to be rendered as the base element wrapper. The default is `div`. */
     as?: TTag;
-    /** An object with fields that correspond to the Storefront API's [MoneyV2 object](/api/storefront/reference/common-objects/moneyv2). */
+    /** 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>;
 }
 /**
  * The `Money` component renders a string of the Storefront API's
- * [MoneyV2 object](/api/storefront/reference/common-objects/moneyv2) according to the
+ * [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) according to the
  * `defaultLocale` in the `shopify.config.js` file.
  */
 export declare function Money<TTag extends keyof JSX.IntrinsicElements = 'div'>(props: JSX.IntrinsicElements[TTag] & MoneyProps<TTag>): JSX.Element;

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { useMoney } from '../../hooks';
 /**
  * The `Money` component renders a string of the Storefront API's
- * [MoneyV2 object](/api/storefront/reference/common-objects/moneyv2) according to the
+ * [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) according to the
  * `defaultLocale` in the `shopify.config.js` file.
  */
 export function Money(props) {

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

@@ -2,7 +2,7 @@ import { ElementType } from 'react';
 import { Props } from '../types';
 /**
  * The `ProductDescription` component renders a `div` with
- * the product's [`descriptionHtml`](/api/storefront/reference/products/product).
+ * the product's [`descriptionHtml`](https://shopify.dev/api/storefront/reference/products/product).
  * It must be a descendent of the `ProductProvider` component.
  */
 export declare function ProductDescription<TTag extends ElementType = 'div'>(props: Props<TTag> & {

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { useProduct } from '../ProductProvider';
 /**
  * The `ProductDescription` component renders a `div` with
- * the product's [`descriptionHtml`](/api/storefront/reference/products/product).
+ * the product's [`descriptionHtml`](https://shopify.dev/api/storefront/reference/products/product).
  * It must be a descendent of the `ProductProvider` component.
  */
 export function ProductDescription(props) {

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

@@ -2,11 +2,11 @@ import { ElementType } from 'react';
 import { Props } from '../types';
 import { MetafieldProps } from '../Metafield/Metafield.client';
 export interface ProductMetafieldProps<TTag> extends Omit<MetafieldProps<TTag>, 'metafield'> {
-    /** A string corresponding to the [key](/api/storefront/reference/common-objects/metafield) of the product's
+    /** A string corresponding to the [key](https://shopify.dev/api/storefront/reference/common-objects/metafield) of the product's
      * metafield.
      */
     keyName: string;
-    /** A string corresponding to the [namespace](/api/storefront/reference/common-objects/metafield) of the
+    /** A string corresponding to the [namespace](https://shopify.dev/api/storefront/reference/common-objects/metafield) of the
      * product's metafield.
      */
     namespace: string;
@@ -15,7 +15,7 @@ export interface ProductMetafieldProps<TTag> extends Omit<MetafieldProps<TTag>,
 }
 /**
  * The `ProductMetafield` component renders a
- * [`Metafield`](/api/hydrogen/components/primitive/metafield) component with the product metafield.
+ * [`Metafield`](https://shopify.dev/api/hydrogen/components/primitive/metafield) component with the product metafield.
  * It must be a descendent of a `ProductProvider` component.
  */
 export declare function ProductMetafield<TTag extends ElementType>(props: Props<TTag> & Omit<ProductMetafieldProps<TTag>, 'data'>): JSX.Element | null;

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

@@ -4,7 +4,7 @@ import { useProduct } from '../../hooks/useProduct/useProduct';
 import { flattenConnection } from '../../utilities';
 /**
  * The `ProductMetafield` component renders a
- * [`Metafield`](/api/hydrogen/components/primitive/metafield) component with the product metafield.
+ * [`Metafield`](https://shopify.dev/api/hydrogen/components/primitive/metafield) component with the product metafield.
  * It must be a descendent of a `ProductProvider` component.
  */
 export function ProductMetafield(props) {

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

@@ -11,6 +11,6 @@ export interface ProductPriceProps {
 }
 /**
  * The `ProductPrice` component renders a `Money` component with the product
- * [`priceRange`](/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. It must be a descendent of the `ProductProvider` component.
  */
 export declare function ProductPrice<TTag extends keyof JSX.IntrinsicElements>(props: (Omit<React.ComponentProps<typeof UnitPrice>, 'data' | 'measurement'> | Omit<React.ComponentProps<typeof Money>, 'data'>) & ProductPriceProps): JSX.Element | null;

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

@@ -4,7 +4,7 @@ import { useProduct } from '../ProductProvider';
 import { UnitPrice } from '../UnitPrice';
 /**
  * The `ProductPrice` component renders a `Money` component with the product
- * [`priceRange`](/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. It must be a descendent of the `ProductProvider` component.
  */
 export function ProductPrice(props) {
     var _a, _b, _c, _d, _e, _f, _g;

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

@@ -5,7 +5,7 @@ import type { PartialDeep } from 'type-fest';
 export interface ProductProviderProps {
     /** A `ReactNode` element. */
     children: ReactNode;
-    /** A [Product object](/api/storefront/reference/products/product). */
+    /** 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

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

@@ -2,7 +2,7 @@ import { ElementType } from 'react';
 import { Props } from '../types';
 /**
  * The `ProductTitle` component renders a `span` element (or the type of
- * HTML element specified by the `as` prop) with the product's [`title`](/api/storefront/reference/products/product).
+ * HTML element specified by the `as` prop) with the product's [`title`](https://shopify.dev/api/storefront/reference/products/product).
  * It must be a descendent of the `ProductProvider` component.
  */
 export declare function ProductTitle<TTag extends ElementType = 'span'>(props: Props<TTag> & {

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { useProduct } from '../ProductProvider';
 /**
  * The `ProductTitle` component renders a `span` element (or the type of
- * HTML element specified by the `as` prop) with the product's [`title`](/api/storefront/reference/products/product).
+ * HTML element specified by the `as` prop) with the product's [`title`](https://shopify.dev/api/storefront/reference/products/product).
  * It must be a descendent of the `ProductProvider` component.
  */
 export function ProductTitle(props) {

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

@@ -1,15 +1,15 @@
 import type { UnitPriceMeasurement, MoneyV2 } from '../../storefront-api-types';
 import type { PartialDeep } from 'type-fest';
 export interface UnitPriceProps<TTag> {
-    /** An object with fields that correspond to the Storefront API's [MoneyV2 object](/api/storefront/reference/common-objects/moneyv2). */
+    /** 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>;
-    /** A [UnitPriceMeasurement object](/api/storefront/reference/products/unitpricemeasurement). */
+    /** A [UnitPriceMeasurement object](https://shopify.dev/api/storefront/reference/products/unitpricemeasurement). */
     measurement: PartialDeep<UnitPriceMeasurement>;
     /** An HTML tag to be rendered as the base element wrapper. The default is `div`. */
     as?: TTag;
 }
 /**
- * The `UnitPrice` component renders a string with a [UnitPrice](/themes/pricing-payments/unit-pricing) as the
- * Storefront API's [MoneyV2 object](/api/storefront/reference/common-objects/moneyv2) with a reference unit from the Storefront API's [UnitPriceMeasurement object](/api/storefront/reference/products/unitpricemeasurement).
+ * The `UnitPrice` component renders a string with a [UnitPrice](https://shopify.dev/themes/pricing-payments/unit-pricing) as the
+ * Storefront API's [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) with a reference unit from the Storefront API's [UnitPriceMeasurement object](/api/storefront/reference/products/unitpricemeasurement).
  */
 export declare function UnitPrice<TTag extends keyof JSX.IntrinsicElements = 'div'>(props: JSX.IntrinsicElements[TTag] & UnitPriceProps<TTag>): JSX.Element | null;