@shopify/hydrogen 0.6.1 → 0.7.0

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

@@ -7,7 +7,7 @@ export interface AddToCartButtonProps {
         value: string;
     }[];
     /** The ID of the variant. */
-    variantID: string;
+    variantId: string;
     /** The item quantity. */
     quantity?: number;
     /** Any ReactNode elements. */

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

@@ -6,7 +6,7 @@ import { useCartLinesAddCallback, useCart, useCartCreateCallback, } from '../Car
  */
 export function AddToCartButton(props) {
     const [addingItem, setAddingItem] = useState(false);
-    const { variantID, quantity = 1, attributes, children, onAdd, accessibleAddingToCartLabel, ...passthroughProps } = props;
+    const { variantId, quantity = 1, attributes, children, onAdd, accessibleAddingToCartLabel, ...passthroughProps } = props;
     const { status, id } = useCart();
     const createCart = useCartCreateCallback();
     const addLines = useCartLinesAddCallback();
@@ -23,7 +23,7 @@ export function AddToCartButton(props) {
                         lines: [
                             {
                                 quantity: quantity,
-                                merchandiseId: variantID,
+                                merchandiseId: variantId,
                                 attributes: attributes,
                             },
                         ],
@@ -33,7 +33,7 @@ export function AddToCartButton(props) {
                     addLines([
                         {
                             quantity: quantity,
-                            merchandiseId: variantID,
+                            merchandiseId: variantId,
                             attributes: attributes,
                         },
                     ]);

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

@@ -1,11 +1,7 @@
 import React, { useEffect, useState, useCallback } from 'react';
-import { CartProvider, useInstantCheckout } from '../CartProvider';
+import { useInstantCheckout } from '../CartProvider';
 /** The `BuyNowButton` component renders a button that adds an item to the cart and redirects the customer to checkout. */
 export function BuyNowButton(props) {
-    return (React.createElement(CartProvider, null,
-        React.createElement(Button, { ...props })));
-}
-function Button(props) {
     const { createInstantCheckout, checkoutUrl } = useInstantCheckout();
     const [loading, setLoading] = useState(false);
     const { quantity, variantId, attributes, children, ...passthroughProps } = props;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useShop } from '../../foundation';
 import { flattenConnection } from '../../utilities';
 import { CartCreate } from '../../graphql/graphql-constants';
@@ -26,9 +26,9 @@ export function useCartFetch() {
     }, [storeDomain, graphqlApiVersion, storefrontToken]);
 }
 export function useInstantCheckout() {
-    const [cart, updateCart] = React.useState();
-    const [checkoutUrl, updateCheckoutUrl] = React.useState();
-    const [error, updateError] = React.useState();
+    const [cart, updateCart] = useState();
+    const [checkoutUrl, updateCheckoutUrl] = useState();
+    const [error, updateError] = useState();
     const fetch = useCartFetch();
     const createInstantCheckout = React.useCallback(async (cartInput) => {
         var _a, _b;

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

@@ -0,0 +1 @@
+export { Link } from 'react-router-dom';

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

@@ -0,0 +1 @@
+export { Link } from 'react-router-dom';

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

@@ -0,0 +1 @@
+export { Link } from './Link.client';

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

@@ -0,0 +1 @@
+export { Link } from './Link.client';

package/dist/esnext/components/LocalizationProvider/LocalizationContext.client.d.ts

@@ -5,11 +5,4 @@ export interface LocalizationContextValue {
     availableCountries: Localization['availableCountries'];
     setCountry(country: Localization['country']): void;
 }
-/**
- * This is a workaround to support exposing context from within a server component
- * exported from Hydrogen.
- */
-declare global {
-    var __localizationContext: any;
-}
-export declare const LocalizationContext: any;
+export declare const LocalizationContext: import("react").Context<LocalizationContextValue | null>;

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

@@ -1,4 +1,2 @@
 import { createContext } from 'react';
-export const LocalizationContext = globalThis.__localizationContext ||
-    createContext(null);
-globalThis.__localizationContext = LocalizationContext;
+export const LocalizationContext = createContext(null);

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

@@ -4,6 +4,7 @@ import { getMeasurementAsString } from '../../utilities';
 import { StarRating } from './components/StarRating';
 import { RawHtml } from '../RawHtml';
 import { MetafieldFragment as Fragment } from '../../graphql/graphql-constants';
+import { Image } from '../Image';
 /**
  * The `Metafield` component renders the value of a Storefront
  * API's [Metafield object](/api/storefront/reference/common-objects/metafield).
@@ -16,6 +17,7 @@ import { MetafieldFragment as Fragment } from '../../graphql/graphql-constants';
  * Metafield's `value`. For more information, refer to the [Default Output](#default-output) section.
  */
 export function Metafield(props) {
+    var _a;
     const { metafield, children, as, ...passthroughProps } = props;
     const { locale } = useShop();
     if (metafield.value == null) {
@@ -54,6 +56,12 @@ export function Metafield(props) {
         case 'json':
             const Wrapper = as !== null && as !== void 0 ? as : 'span';
             return (React.createElement(Wrapper, { ...passthroughProps }, JSON.stringify(metafield.value)));
+        case 'file_reference': {
+            if (((_a = metafield.reference) === null || _a === void 0 ? void 0 : _a.__typename) === 'MediaImage') {
+                const ref = metafield.reference;
+                return ref.image ? (React.createElement(Image, { image: ref.image, ...passthroughProps })) : null;
+            }
+        }
         default: {
             const Wrapper = as !== null && as !== void 0 ? as : 'span';
             return (React.createElement(Wrapper, { ...passthroughProps }, metafield.value.toString()));

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

@@ -1,4 +1,19 @@
 import * as Types from '../../graphql/types/types';
+import { ImageFragmentFragment } from '../Image/ImageFragment';
 export declare type MetafieldFragmentFragment = {
     __typename?: 'Metafield';
-} & Pick<Types.Metafield, 'id' | 'type' | 'namespace' | 'key' | 'value' | 'createdAt' | 'updatedAt' | 'description'>;
+} & Pick<Types.Metafield, 'id' | 'type' | 'namespace' | 'key' | 'value' | 'createdAt' | 'updatedAt' | 'description'> & {
+    reference?: Types.Maybe<({
+        __typename: 'MediaImage';
+    } & Pick<Types.MediaImage, 'id' | 'mediaContentType'> & {
+        image?: Types.Maybe<{
+            __typename?: 'Image';
+        } & ImageFragmentFragment>;
+    }) | {
+        __typename: 'Page';
+    } | {
+        __typename: 'Product';
+    } | {
+        __typename: 'ProductVariant';
+    }>;
+};

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

@@ -15,6 +15,8 @@ export interface Model3DProps {
     };
     /** 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, useful for showing the user something before a model is loaded and ready to render. If none is provided, [Model3d.previewImage](https://shopify.dev/api/storefront/reference/products/model3d#previewimage-2021-10) 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';
     /** A boolean to enable an AR experience. Refer to [`ar` in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-attributes-ar). */

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

@@ -109,7 +109,7 @@ export function Model3D(props) {
         // TODO: What do we want to display while the model-viewer library loads?
         return null;
     }
-    return (React.createElement("model-viewer", { ref: callbackRef, ...passthroughProps, class: className, id: id, src: model.sources[0].url, alt: model.alt, "camera-controls": (_a = passthroughProps.cameraControls) !== null && _a !== void 0 ? _a : true, poster: (_b = model.previewImage) === null || _b === void 0 ? void 0 : _b.url, autoplay: (_c = passthroughProps.autoplay) !== null && _c !== void 0 ? _c : 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": (_d = passthroughProps.interpolationDecay) !== null && _d !== void 0 ? _d : 100, "skybox-image": passthroughProps.skyboxImage, "environment-image": passthroughProps.environmentImage, exposure: passthroughProps.exposure, "shadow-intensity": (_e = passthroughProps.shadowIntensity) !== null && _e !== void 0 ? _e : 0, "shadow-softness": (_f = passthroughProps.shadowSoftness) !== null && _f !== void 0 ? _f : 0, "animation-name": passthroughProps.animationName, "animation-crossfade-duration": passthroughProps.animationCrossfadeDuration, "variant-name": passthroughProps.variantName, orientation: passthroughProps.orientation, scale: passthroughProps.scale }, children));
+    return (React.createElement("model-viewer", { ref: callbackRef, ...passthroughProps, class: className, id: id, src: model.sources[0].url, alt: model.alt, "camera-controls": (_a = passthroughProps.cameraControls) !== null && _a !== void 0 ? _a : true, poster: passthroughProps.poster || ((_b = model.previewImage) === null || _b === void 0 ? void 0 : _b.url), autoplay: (_c = passthroughProps.autoplay) !== null && _c !== void 0 ? _c : 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": (_d = passthroughProps.interpolationDecay) !== null && _d !== void 0 ? _d : 100, "skybox-image": passthroughProps.skyboxImage, "environment-image": passthroughProps.environmentImage, exposure: passthroughProps.exposure, "shadow-intensity": (_e = passthroughProps.shadowIntensity) !== null && _e !== void 0 ? _e : 0, "shadow-softness": (_f = passthroughProps.shadowSoftness) !== null && _f !== void 0 ? _f : 0, "animation-name": passthroughProps.animationName, "animation-crossfade-duration": passthroughProps.animationCrossfadeDuration, "variant-name": passthroughProps.variantName, orientation: passthroughProps.orientation, scale: passthroughProps.scale }, children));
 }
 Model3D.Fragment = Fragment;
 export const Model3DFragment = Fragment;

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

@@ -1,5 +1,5 @@
 import { ProductOptionsHookValue } from '../../hooks';
-import { GraphQLConnection, ParsedMetafield } from '../../types';
+import { GraphQLConnection, ParsedMetafield, RawMetafield } from '../../types';
 import { ProductProviderFragmentFragment } from './ProductProviderFragment';
 import { Product } from './types';
 import { Collection, Image } from '../../graphql/types/types';
@@ -8,7 +8,7 @@ export declare type ProductContextType = Omit<Product, 'media' | 'metafields' |
     media?: ProductProviderFragmentFragment['media']['edges'][0]['node'][];
     mediaConnection?: ProductProviderFragmentFragment['media'];
     metafields?: ParsedMetafield[];
-    metafieldsConnection?: ProductProviderFragmentFragment['metafields'];
+    metafieldsConnection?: GraphQLConnection<RawMetafield>;
     images?: Partial<Image>[];
     imagesConnection?: GraphQLConnection<Partial<Image>>;
     collections?: Partial<Collection>[];

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

@@ -1,5 +1,5 @@
 import { SellingPlanGroup, Variant } from '../../hooks/useProductOptions';
-import { GraphQLConnection } from '../../types';
+import { GraphQLConnection, RawMetafield } from '../../types';
 import { ProductProviderFragmentFragment } from './ProductProviderFragment';
 import { ImageFragmentFragment } from '../Image/ImageFragment';
 import { Collection } from '../../graphql/types/types';
@@ -9,7 +9,7 @@ export interface Product {
     handle?: ProductProviderFragmentFragment['descriptionHtml'];
     id?: ProductProviderFragmentFragment['id'];
     media?: ProductProviderFragmentFragment['media'];
-    metafields?: ProductProviderFragmentFragment['metafields'];
+    metafields?: GraphQLConnection<RawMetafield>;
     priceRange?: Partial<ProductProviderFragmentFragment['priceRange']>;
     title?: ProductProviderFragmentFragment['title'];
     variants?: GraphQLConnection<Variant>;

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

@@ -7,5 +7,5 @@ declare type PropsWeControl = 'disabled';
  * selected variant. Clicking this button automatically adds the selected variant to the cart.
  * It must be a descendent of a `ProductProvider` and `CartProvider` component.
  */
-export declare function SelectedVariantAddToCartButton<TTag extends React.ElementType = 'button'>(props: Props<TTag, PropsWeControl> & Omit<AddToCartButtonProps, 'variantID'>): JSX.Element;
+export declare function SelectedVariantAddToCartButton<TTag extends React.ElementType = 'button'>(props: Props<TTag, PropsWeControl> & Omit<AddToCartButtonProps, 'variantId'>): JSX.Element;
 export {};

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

@@ -13,5 +13,5 @@ export function SelectedVariantAddToCartButton(props) {
         throw new Error('Expected a Product context, but none was found');
     }
     const { children, quantity, attributes, ...passthroughProps } = props;
-    return (React.createElement(CartButton, { ...passthroughProps, variantID: (_b = (_a = product.selectedVariant) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '', quantity: quantity !== null && quantity !== void 0 ? quantity : 1, disabled: !product.selectedVariant || passthroughProps.disabled, attributes: attributes }, children));
+    return (React.createElement(CartButton, { ...passthroughProps, variantId: (_b = (_a = product.selectedVariant) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '', quantity: quantity !== null && quantity !== void 0 ? quantity : 1, disabled: !product.selectedVariant || passthroughProps.disabled, attributes: attributes }, children));
 }

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

@@ -1,4 +1,4 @@
-export { Link } from 'react-router-dom';
+export { Link } from './Link';
 export type { MediaFileProps } from './MediaFile';
 export { MediaFile, MediaFileFragment } from './MediaFile';
 export type { VideoProps } from './Video';

package/dist/esnext/components/index.js

@@ -1,4 +1,4 @@
-export { Link } from 'react-router-dom';
+export { Link } from './Link';
 export { MediaFile, MediaFileFragment } from './MediaFile';
 export { Video } from './Video';
 export { Image } from './Image';

package/dist/esnext/entry-server.js

@@ -73,7 +73,7 @@ const renderHydrogen = (App, hook) => {
         response.socket.on('error', (error) => {
             console.error('Fatal', error);
         });
-        let didError = false;
+        let didError;
         const head = template.match(/<head>(.+?)<\/head>/s)[1];
         const { startWriting, abort } = pipeToNodeWritable(React.createElement(Html, { head: head },
             React.createElement(ReactApp, { ...state })), response, {
@@ -84,22 +84,23 @@ const renderHydrogen = (App, hook) => {
                  * additional checks downstream?
                  */
                 response.setHeader(getCacheControlHeader({ dev }), componentResponse.cacheControlHeader);
+                writeHeadToServerResponse(response, componentResponse, didError);
+                if (isRedirect(response)) {
+                    // Return redirects early without further rendering/streaming
+                    return response.end();
+                }
                 if (!componentResponse.canStream())
                     return;
-                response.statusCode = didError ? 500 : 200;
-                response.setHeader('Content-type', 'text/html');
-                response.write('<!DOCTYPE html>');
-                startWriting();
+                startWritingHtmlToServerResponse(response, startWriting, dev ? didError : undefined);
             },
             onCompleteAll() {
-                var _a;
-                if (componentResponse.canStream())
+                if (componentResponse.canStream() || response.writableEnded)
                     return;
-                response.statusCode =
-                    (_a = componentResponse.status) !== null && _a !== void 0 ? _a : (didError ? 500 : 200);
-                componentResponse.headers.forEach((value, header) => {
-                    response.setHeader(header, value);
-                });
+                writeHeadToServerResponse(response, componentResponse, didError);
+                if (isRedirect(response)) {
+                    // Redirects found after any async code
+                    return response.end();
+                }
                 if (componentResponse.customBody) {
                     if (componentResponse.customBody instanceof Promise) {
                         componentResponse.customBody.then((body) => response.end(body));
@@ -109,14 +110,14 @@ const renderHydrogen = (App, hook) => {
                     }
                 }
                 else {
-                    response.setHeader('Content-type', 'text/html');
-                    response.write('<!DOCTYPE html>');
-                    startWriting();
+                    startWritingHtmlToServerResponse(response, startWriting, dev ? didError : undefined);
                 }
             },
             onError(error) {
-                didError = true;
-                if (dev) {
+                didError = error;
+                if (dev && response.headersSent) {
+                    // Calling write would flush headers automatically.
+                    // Delay this error until headers are properly sent.
                     response.write(getErrorMarkup(error));
                 }
                 console.error(error);
@@ -139,7 +140,7 @@ const renderHydrogen = (App, hook) => {
         response.socket.on('error', (error) => {
             console.error('Fatal', error);
         });
-        let didError = false;
+        let didError;
         const writer = new HydrationWriter();
         const { startWriting, abort } = pipeToNodeWritable(React.createElement(HydrationContext.Provider, { value: true },
             React.createElement(ReactApp, { ...state })), writer, {
@@ -157,7 +158,7 @@ const renderHydrogen = (App, hook) => {
                 response.end(generateWireSyntaxFromRenderedHtml(writer.toString()));
             },
             onError(error) {
-                didError = true;
+                didError = error;
                 console.error(error);
             },
         });
@@ -174,7 +175,7 @@ function buildReactApp({ App, state, context, request, dev, }) {
     const componentResponse = new ServerComponentResponse();
     const ReactApp = (props) => (React.createElement(StaticRouter, { location: { pathname: state.pathname, search: state.search }, context: context },
         React.createElement(HelmetProvider, { context: helmetContext },
-            React.createElement(App, { request: request, response: componentResponse, ...props }))));
+            React.createElement(App, { ...props, request: request, response: componentResponse }))));
     return { helmetContext, ReactApp, componentResponse };
 }
 function extractHeadElements(helmetContext) {
@@ -304,3 +305,32 @@ async function renderAppFromStringWithPrepass(ReactApp, state, isReactHydrationR
         : body;
 }
 export default renderHydrogen;
+function startWritingHtmlToServerResponse(response, startWriting, error) {
+    if (!response.headersSent) {
+        response.setHeader('Content-type', 'text/html');
+        response.write('<!DOCTYPE html>');
+    }
+    startWriting();
+    if (error) {
+        // This error was delayed until the headers were properly sent.
+        response.write(getErrorMarkup(error));
+    }
+}
+function writeHeadToServerResponse(response, { headers, status, customStatus }, error) {
+    var _a, _b;
+    if (response.headersSent)
+        return;
+    headers.forEach((value, key) => response.setHeader(key, value));
+    if (error) {
+        response.statusCode = 500;
+    }
+    else {
+        response.statusCode = (_b = (_a = customStatus === null || customStatus === void 0 ? void 0 : customStatus.code) !== null && _a !== void 0 ? _a : status) !== null && _b !== void 0 ? _b : 200;
+        if (customStatus === null || customStatus === void 0 ? void 0 : customStatus.text) {
+            response.statusMessage = customStatus.text;
+        }
+    }
+}
+function isRedirect(response) {
+    return response.statusCode >= 300 && response.statusCode < 400;
+}

package/dist/esnext/foundation/Router/ServerStateRouter.client.js

@@ -7,12 +7,14 @@ import { useServerState } from '../useServerState';
  * server state, which in turn fetches the correct server component.
  */
 export function ServerStateRouter() {
-    const { setServerState, pending } = useServerState();
+    const { setServerState, pending, serverState } = useServerState();
     const [isNavigating, setIsNavigating] = useState(false);
     const location = useLocation();
     useEffect(() => {
-        setIsNavigating(true);
-        setServerState('pathname', location.pathname);
+        if (serverState.pathname !== location.pathname) {
+            setIsNavigating(true);
+            setServerState('pathname', location.pathname);
+        }
     }, [location.pathname, setServerState]);
     useEffect(() => {
         /**

package/dist/esnext/foundation/ServerStateProvider/ServerStateProvider.client.d.ts

@@ -1,24 +1,25 @@
 import React, { ReactNode } from 'react';
-export interface ServerStateContextValue {
-    serverState: Record<string, any>;
-    setServerState(input: (() => void) | Record<string, any> | string, value?: string | Record<string, any>): void;
-    pending: any;
-}
-/**
- * This is a workaround to support exposing context from within a server component
- * exported from Hydrogen.
- */
 declare global {
-    var __serverStateContext: any;
+    var __DEV__: boolean;
+}
+export interface ServerState {
+    pathname: string;
+    search: string;
+    [key: string]: any;
+}
+export interface ServerStateSetter {
+    (input: ((prev: ServerState) => Partial<ServerState>) | Partial<ServerState> | string, propValue?: any): void;
+}
+export interface ServerStateContextValue {
+    pending: boolean;
+    serverState: ServerState;
+    setServerState: ServerStateSetter;
 }
-export declare const ServerStateContext: any;
-interface Props {
-    serverState: Record<string, any>;
-    setServerState: React.Dispatch<React.SetStateAction<{
-        pathname: string;
-        search: string;
-    }>>;
+export declare const ServerStateContext: React.Context<ServerStateContextValue>;
+interface ServerStateProviderProps {
+    serverState: ServerState;
+    setServerState: React.Dispatch<React.SetStateAction<ServerState>>;
     children: ReactNode;
 }
-export declare function ServerStateProvider({ serverState, setServerState, children, }: Props): JSX.Element;
+export declare function ServerStateProvider({ serverState, setServerState, children, }: ServerStateProviderProps): JSX.Element;
 export {};

package/dist/esnext/foundation/ServerStateProvider/ServerStateProvider.client.js

@@ -1,11 +1,10 @@
 import React, { createContext, useMemo, useCallback, 
 // @ts-ignore
 useTransition, } from 'react';
-export const ServerStateContext = globalThis.__serverStateContext || createContext(null);
-globalThis.__serverStateContext = ServerStateContext;
+export const ServerStateContext = createContext(null);
 export function ServerStateProvider({ serverState, setServerState, children, }) {
     const [pending, startTransition] = useTransition();
-    const setServerStateCallback = useCallback((input, value) => {
+    const setServerStateCallback = useCallback((input, propValue) => {
         /**
          * By wrapping this state change in a transition, React renders the new state
          * concurrently in a new "tree" instead of Suspending and showing the (blank)
@@ -14,26 +13,27 @@ export function ServerStateProvider({ serverState, setServerState, children, })
          * the `pending` flag also provided by the hook to display in the UI.
          */
         startTransition(() => {
-            // Support callback-style setState
-            if (typeof input === 'function') {
-                // @ts-ignore
-                return setServerState(input);
-            }
-            // Support a simple object, and spread it into the existing object.
-            if (typeof input === 'object') {
-                return setServerState((prev) => ({
+            return setServerState((prev) => {
+                let newValue;
+                if (typeof input === 'function') {
+                    newValue = input(prev);
+                }
+                else if (typeof input === 'string') {
+                    newValue = { [input]: propValue };
+                }
+                else {
+                    newValue = input;
+                }
+                if (__DEV__) {
+                    if ('request' in newValue || 'response' in newValue) {
+                        console.warn(`Custom "request" and "response" properties in server state are ignored. Use a different name.`);
+                    }
+                }
+                return {
                     ...prev,
-                    // @ts-ignore
-                    ...input,
-                }));
-            }
-            // Support a key, value as well.
-            if (typeof input === 'string') {
-                return setServerState((prev) => ({
-                    ...prev,
-                    [input]: value,
-                }));
-            }
+                    ...newValue,
+                };
+            });
         });
     }, [setServerState, startTransition]);
     const value = useMemo(() => ({

package/dist/esnext/foundation/ServerStateProvider/index.d.ts

@@ -1 +1 @@
-export { ServerStateProvider, ServerStateContext, ServerStateContextValue, } from './ServerStateProvider.client';
+export { ServerStateProvider, ServerStateContext, ServerStateContextValue, ServerState, } from './ServerStateProvider.client';

package/dist/esnext/foundation/ShopifyProvider/ShopifyProvider.d.ts

@@ -1,5 +1,5 @@
 import { ShopifyProviderProps } from './types';
-export declare const DEFAULT_API_VERSION = "unstable";
+export { DEFAULT_API_VERSION } from './consts';
 /**
  * The `ShopifyProvider` component wraps your entire app and provides support for hooks.
  * You should place it in your app's entry point component. For example, `<App>`.

package/dist/esnext/foundation/ShopifyProvider/ShopifyProvider.js

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import { ShopifyContext } from './ShopifyContext';
-export const DEFAULT_API_VERSION = 'unstable';
+import { DEFAULT_API_VERSION } from './consts';
+export { DEFAULT_API_VERSION } from './consts';
 /**
  * The `ShopifyProvider` component wraps your entire app and provides support for hooks.
  * You should place it in your app's entry point component. For example, `<App>`.

package/dist/esnext/foundation/ShopifyProvider/ShopifyServerProvider.server.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ShopifyProvider } from './ShopifyProvider';
-import { QueryProvider } from '../../hooks/useQuery';
+import { QueryProvider } from '../../foundation/useQuery';
 export function ShopifyServerProvider({ children, shopifyConfig, hydrationContext, }) {
     return (React.createElement(ShopifyProvider, { shopifyConfig: shopifyConfig },
         React.createElement(QueryProvider, { hydrationContext: hydrationContext }, children)));

package/dist/esnext/foundation/ShopifyProvider/consts.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_API_VERSION = "unstable";

package/dist/esnext/foundation/ShopifyProvider/consts.js

@@ -0,0 +1 @@
+export const DEFAULT_API_VERSION = 'unstable';

package/dist/esnext/{hooks → foundation}/useQuery/hooks.js

@@ -11,6 +11,16 @@ key,
 queryFn, 
 /** Options including `cache` to manage the cache behavior of the sub-request. */
 queryOptions) {
+    const resolvedQueryOptions = {
+        /**
+         * Prevent react-query from from retrying request failures. This sometimes bites developers
+         * because they will get back a 200 GraphQL response with errors, but not properly check
+         * for errors. This leads to a failed `queryFn` and react-query keeps running it, leading
+         * to a much slower response time and a poor developer experience.
+         */
+        retry: false,
+        ...(queryOptions !== null && queryOptions !== void 0 ? queryOptions : {}),
+    };
     /**
      * Attempt to read the query from cache. If it doesn't exist or if it's stale, regenerate it.
      */
@@ -32,21 +42,16 @@ queryOptions) {
                     const lockExists = await getItemFromCache(lockKey);
                     if (lockExists)
                         return;
-                    console.log(`[stale regen] no cache lock`);
                     await setItemInCache(lockKey, true);
-                    console.log(`[stale regen] set cache lock`);
                     try {
                         const output = await generateNewOutput();
-                        console.log(`[stale regen] got new output`);
-                        await setItemInCache(key, output, queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.cache);
-                        console.log(`[stale regen] set new output`);
+                        await setItemInCache(key, output, resolvedQueryOptions === null || resolvedQueryOptions === void 0 ? void 0 : resolvedQueryOptions.cache);
                     }
                     catch (e) {
                         console.error(`Error generating async response: ${e.message}`);
                     }
                     finally {
                         await deleteItemFromCache(lockKey);
-                        console.log(`[stale regen] deleted lock`);
                     }
                 });
             }
@@ -56,8 +61,8 @@ queryOptions) {
         /**
          * Important: Do this async
          */
-        runDelayedFunction(async () => await setItemInCache(key, newOutput, queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.cache));
+        runDelayedFunction(async () => await setItemInCache(key, newOutput, resolvedQueryOptions === null || resolvedQueryOptions === void 0 ? void 0 : resolvedQueryOptions.cache));
         return newOutput;
     }
-    return useReactQuery(key, cachedQueryFn, queryOptions);
+    return useReactQuery(key, cachedQueryFn, resolvedQueryOptions);
 }

package/dist/esnext/foundation/useServerState/use-server-state.d.ts

@@ -12,4 +12,4 @@
  * | `pending`        | Whether a [transition is pending](https://github.com/reactwg/react-18/discussions/41). |
  *
  */
-export declare function useServerState(): unknown;
+export declare function useServerState(): import("../ServerStateProvider").ServerStateContextValue;

package/dist/esnext/framework/ClientMarker/ClientMarker.d.ts

@@ -1,10 +1,9 @@
 import { FunctionComponent } from 'react';
-interface Props {
+interface ClientMarkerMeta {
     name: string;
     id: string;
-    props: any;
     component: FunctionComponent;
     named: boolean;
 }
-export declare function ClientMarker({ name, id, props: allProps, component: Component, named, }: Props): JSX.Element;
+export declare function wrapInClientMarker(meta: ClientMarkerMeta): (props: any) => JSX.Element;
 export {};