@shopify/hydrogen 2026.4.5 → 2026.10.0-preview.2

package/dist/development/react/product.mjs

@@ -0,0 +1,127 @@
+"use client";
+
+import { getLogger } from "../core/logging/logging.mjs";
+import { createProductFormStore } from "../core/product/product-form.mjs";
+import { createProductFormRegister } from "../core/product/form.mjs";
+import { getCartEndpoint, useCartStore } from "./cart.mjs";
+import { createContext, createElement, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+
+//#region src/react/product.tsx
+const log = getLogger("product");
+/**
+* Subscribes to a {@link ProductFormStore} and returns form-ready state.
+*
+* This is a pure subscription hook — it does **not** manage store lifecycle.
+* Create the store with `createProductFormStore` and manage its lifecycle
+* (hydration, destruction) yourself, or use `createProductComponents` for a
+* provider-based approach.
+*/
+function useProductForm(store, options) {
+	const onSelectRef = useRef(options?.onSelect);
+	onSelectRef.current = options?.onSelect;
+	const state = useSyncExternalStore(store.subscribe, store.getState, store.getState);
+	const [pending, setPending] = useState(false);
+	const selectOption = useCallback((name, value) => {
+		const result = store.selectOption(name, value);
+		if (result.status !== "invalid") onSelectRef.current?.(result);
+		return result;
+	}, [store]);
+	const register = useMemo(() => createProductFormRegister(state.selectedVariant, selectOption), [state, selectOption]);
+	const formProps = useCallback((opts) => ({
+		onSubmit: (e) => {
+			opts?.beforeSubmit?.(e);
+			if (e.defaultPrevented) return;
+			e.preventDefault();
+			setPending(true);
+			store.handleFormSubmit(e.nativeEvent).then(() => opts?.afterSubmit?.(e), (error) => {
+				log.error("form submission error", { error });
+			}).finally(() => setPending(false));
+		},
+		method: "post",
+		action: getCartEndpoint()
+	}), [store]);
+	return {
+		options: state.options,
+		selectedVariant: state.selectedVariant,
+		register,
+		formProps,
+		errors: state.errors,
+		matchedLineItem: state.matchedLineItem,
+		pending,
+		selectOption
+	};
+}
+/**
+* Creates a typed set of product components bound to a specific product type.
+*
+* Returns `{ ProductProvider, useProduct, useProductForm }` where:
+* - `ProductProvider` manages store lifecycle (creation, hydration, cleanup)
+* - `useProduct` provides read-only state and variant selection
+* - `useProductForm` provides form-binding utilities (register, formProps, pending)
+*
+* Requires a `<CartProvider>` ancestor.
+*
+* @example
+* ```ts
+* const { ProductProvider, useProduct, useProductForm } =
+*   createProductComponents<MyProductType>();
+* ```
+*/
+function createProductComponents() {
+	const Context = createContext(null);
+	function useProductContext(hookName) {
+		const ctx = useContext(Context);
+		if (!ctx) throw new Error(`${hookName} must be used inside a <ProductProvider>. Wrap your component tree with the ProductProvider from createProductComponents(), or use the standalone useProductForm(store) hook instead.`);
+		return ctx;
+	}
+	function ProductProvider({ product, onSelect, children }) {
+		const cartStore = useCartStore();
+		const store = useMemo(() => createProductFormStore(product, cartStore), []);
+		useEffect(() => () => store.destroy(), [store]);
+		const productKey = `${product.id}:${product.selectedOrFirstAvailableVariant?.id ?? ""}`;
+		const mountedRef = useRef(false);
+		useEffect(() => {
+			if (!mountedRef.current) {
+				mountedRef.current = true;
+				return;
+			}
+			store.hydrate(product);
+		}, [productKey]);
+		const onSelectRef = useRef(onSelect);
+		onSelectRef.current = onSelect;
+		const value = useMemo(() => ({
+			store,
+			onSelectRef
+		}), [store]);
+		return createElement(Context.Provider, { value }, children);
+	}
+	function useProductHook() {
+		const { store, onSelectRef } = useProductContext("useProduct");
+		const state = useSyncExternalStore(store.subscribe, store.getState, store.getState);
+		const selectOption = useCallback((name, value) => {
+			const result = store.selectOption(name, value);
+			if (result.status !== "invalid") onSelectRef.current?.(result);
+			return result;
+		}, [store, onSelectRef]);
+		return {
+			options: state.options,
+			selectedVariant: state.selectedVariant,
+			selectOption,
+			errors: state.errors,
+			matchedLineItem: state.matchedLineItem
+		};
+	}
+	function useProductFormHook() {
+		const { store, onSelectRef } = useProductContext("useProductForm");
+		return useProductForm(store, { onSelect: onSelectRef.current });
+	}
+	return {
+		ProductProvider,
+		useProduct: useProductHook,
+		useProductForm: useProductFormHook
+	};
+}
+
+//#endregion
+export { createProductComponents, useProductForm };
+//# sourceMappingURL=product.mjs.map

package/dist/development/react/product.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"product.mjs","names":[],"sources":["../../../src/react/product.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  createContext,\n  createElement,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  useSyncExternalStore,\n  type FormHTMLAttributes,\n  type ReactNode,\n  type SubmitEvent,\n} from \"react\";\n\nimport type { CartLine } from \"../core/cart/state\";\nimport { getLogger } from \"../core/logging\";\nimport {\n  createProductFormRegister,\n  createProductFormStore,\n  type ProductFormErrors,\n  type ProductFormOptions,\n  type ProductFormRegister,\n  type ProductFormStore,\n  type ProductInput,\n  type ProductVariantFrom,\n  type ValidProductSelectionResult,\n  type VariantSelectionResult,\n} from \"../core/product\";\nimport { getCartEndpoint, useCartStore } from \"./cart\";\n\nconst log = getLogger(\"product\");\n\n// ---------------------------------------------------------------------------\n// Shared types\n// ---------------------------------------------------------------------------\n\nexport type { ValidProductSelectionResult } from \"../core/product\";\n\n/** Options for {@link useProductForm}. */\nexport interface UseProductFormOptions<TProduct extends ProductInput> {\n  onSelect?: (result: ValidProductSelectionResult<TProduct>) => void;\n}\n\n/** Return value of {@link useProductForm}. */\nexport interface UseProductFormResult<TProduct extends ProductInput> {\n  options: ProductFormOptions<TProduct>;\n  selectedVariant: ProductVariantFrom<TProduct> | null;\n  register: ProductFormRegister;\n  formProps: (opts?: {\n    beforeSubmit?: (e: SubmitEvent<HTMLFormElement>) => void;\n    afterSubmit?: (e: SubmitEvent<HTMLFormElement>) => void;\n  }) => FormHTMLAttributes<HTMLFormElement>;\n  errors: ProductFormErrors;\n  matchedLineItem: CartLine | null;\n  pending: boolean;\n  selectOption: (\n    name: string,\n    value: string,\n  ) => VariantSelectionResult<ProductVariantFrom<TProduct>>;\n}\n\n/** Props for the `ProductProvider` returned by {@link createProductComponents}. */\nexport interface ProductProviderProps<TProduct extends ProductInput> {\n  product: TProduct;\n  onSelect?: (result: ValidProductSelectionResult<TProduct>) => void;\n  children?: ReactNode;\n}\n\n/** Return value of the `useProduct` hook from {@link createProductComponents}. */\nexport interface UseProductResult<TProduct extends ProductInput> {\n  options: ProductFormOptions<TProduct>;\n  selectedVariant: ProductVariantFrom<TProduct> | null;\n  selectOption: (\n    name: string,\n    value: string,\n  ) => VariantSelectionResult<ProductVariantFrom<TProduct>>;\n  errors: ProductFormErrors;\n  matchedLineItem: CartLine | null;\n}\n\n// ---------------------------------------------------------------------------\n// Internal helpers\n// ---------------------------------------------------------------------------\n\n// ---------------------------------------------------------------------------\n// Standalone hook\n// ---------------------------------------------------------------------------\n\n/**\n * Subscribes to a {@link ProductFormStore} and returns form-ready state.\n *\n * This is a pure subscription hook — it does **not** manage store lifecycle.\n * Create the store with `createProductFormStore` and manage its lifecycle\n * (hydration, destruction) yourself, or use `createProductComponents` for a\n * provider-based approach.\n */\nexport function useProductForm<TProduct extends ProductInput>(\n  store: ProductFormStore<TProduct>,\n  options?: UseProductFormOptions<TProduct>,\n): UseProductFormResult<TProduct> {\n  const onSelectRef = useRef(options?.onSelect);\n  onSelectRef.current = options?.onSelect;\n\n  const state = useSyncExternalStore(store.subscribe, store.getState, store.getState);\n  const [pending, setPending] = useState(false);\n\n  const selectOption = useCallback(\n    (name: string, value: string) => {\n      const result = store.selectOption(name, value);\n      if (result.status !== \"invalid\") {\n        onSelectRef.current?.(result);\n      }\n      return result;\n    },\n    [store],\n  );\n\n  // oxlint-disable-next-line react-hooks/exhaustive-deps -- state is the full reactive snapshot; selectOption is stable\n  const register = useMemo(\n    () => createProductFormRegister(state.selectedVariant, selectOption),\n    [state, selectOption],\n  );\n\n  const formProps = useCallback(\n    (opts?: {\n      beforeSubmit?: (e: SubmitEvent<HTMLFormElement>) => void;\n      afterSubmit?: (e: SubmitEvent<HTMLFormElement>) => void;\n    }): FormHTMLAttributes<HTMLFormElement> => ({\n      onSubmit: (e: SubmitEvent<HTMLFormElement>) => {\n        opts?.beforeSubmit?.(e);\n        if (e.defaultPrevented) return;\n        e.preventDefault();\n        setPending(true);\n        store\n          .handleFormSubmit(e.nativeEvent)\n          .then(\n            () => opts?.afterSubmit?.(e),\n            (error: unknown) => {\n              // Cart user/network errors are surfaced via the reactive `errors`\n              // state. Thrown exceptions (missing Shopify script, invalid form\n              // target) are programming errors — log them for dev visibility.\n              log.error(\"form submission error\", { error });\n            },\n          )\n          .finally(() => setPending(false));\n      },\n      method: \"post\",\n      action: getCartEndpoint(),\n    }),\n    [store],\n  );\n\n  return {\n    options: state.options,\n    selectedVariant: state.selectedVariant,\n    register,\n    formProps,\n    errors: state.errors,\n    matchedLineItem: state.matchedLineItem,\n    pending,\n    selectOption,\n  };\n}\n\n// ---------------------------------------------------------------------------\n// Factory\n// ---------------------------------------------------------------------------\n\ninterface ProductContextValue<TProduct extends ProductInput> {\n  store: ProductFormStore<TProduct>;\n  onSelectRef: React.RefObject<\n    ((result: ValidProductSelectionResult<TProduct>) => void) | undefined\n  >;\n}\n\n/**\n * Creates a typed set of product components bound to a specific product type.\n *\n * Returns `{ ProductProvider, useProduct, useProductForm }` where:\n * - `ProductProvider` manages store lifecycle (creation, hydration, cleanup)\n * - `useProduct` provides read-only state and variant selection\n * - `useProductForm` provides form-binding utilities (register, formProps, pending)\n *\n * Requires a `<CartProvider>` ancestor.\n *\n * @example\n * ```ts\n * const { ProductProvider, useProduct, useProductForm } =\n *   createProductComponents<MyProductType>();\n * ```\n */\nexport function createProductComponents<TProduct extends ProductInput>(): {\n  ProductProvider: (props: ProductProviderProps<TProduct>) => ReactNode;\n  useProduct: () => UseProductResult<TProduct>;\n  useProductForm: () => UseProductFormResult<TProduct>;\n} {\n  const Context = createContext<ProductContextValue<TProduct> | null>(null);\n\n  function useProductContext(hookName: string): ProductContextValue<TProduct> {\n    const ctx = useContext(Context);\n    if (!ctx) {\n      throw new Error(\n        `${hookName} must be used inside a <ProductProvider>. ` +\n          \"Wrap your component tree with the ProductProvider from createProductComponents(), \" +\n          \"or use the standalone useProductForm(store) hook instead.\",\n      );\n    }\n    return ctx;\n  }\n\n  function ProductProvider({ product, onSelect, children }: ProductProviderProps<TProduct>) {\n    const cartStore = useCartStore();\n\n    // oxlint-disable-next-line react-hooks/exhaustive-deps -- store is intentionally created once\n    const store = useMemo(() => createProductFormStore<TProduct>(product, cartStore), []);\n\n    useEffect(() => () => store.destroy(), [store]);\n\n    const productKey = `${product.id}:${product.selectedOrFirstAvailableVariant?.id ?? \"\"}`;\n    const mountedRef = useRef(false);\n    useEffect(() => {\n      if (!mountedRef.current) {\n        mountedRef.current = true;\n        return;\n      }\n      store.hydrate(product);\n      // oxlint-disable-next-line react-hooks/exhaustive-deps -- productKey is the semantic dep\n    }, [productKey]);\n\n    const onSelectRef = useRef(onSelect);\n    onSelectRef.current = onSelect;\n\n    // oxlint-disable-next-line react-hooks/exhaustive-deps -- onSelectRef is a stable ref object\n    const value = useMemo<ProductContextValue<TProduct>>(() => ({ store, onSelectRef }), [store]);\n\n    return createElement(Context.Provider, { value }, children);\n  }\n\n  function useProductHook(): UseProductResult<TProduct> {\n    const { store, onSelectRef } = useProductContext(\"useProduct\");\n    const state = useSyncExternalStore(store.subscribe, store.getState, store.getState);\n\n    const selectOption = useCallback(\n      (name: string, value: string) => {\n        const result = store.selectOption(name, value);\n        if (result.status !== \"invalid\") {\n          onSelectRef.current?.(result);\n        }\n        return result;\n      },\n      [store, onSelectRef],\n    );\n\n    return {\n      options: state.options,\n      selectedVariant: state.selectedVariant,\n      selectOption,\n      errors: state.errors,\n      matchedLineItem: state.matchedLineItem,\n    };\n  }\n\n  function useProductFormHook(): UseProductFormResult<TProduct> {\n    const { store, onSelectRef } = useProductContext(\"useProductForm\");\n    return useProductForm<TProduct>(store, { onSelect: onSelectRef.current });\n  }\n\n  return {\n    ProductProvider,\n    useProduct: useProductHook,\n    useProductForm: useProductFormHook,\n  };\n}\n"],"mappings":";;;;;;;;;AAiCA,MAAM,MAAM,UAAU,UAAU;;;;;;;;;AAkEhC,SAAgB,eACd,OACA,SACgC;CAChC,MAAM,cAAc,OAAO,SAAS,SAAS;AAC7C,aAAY,UAAU,SAAS;CAE/B,MAAM,QAAQ,qBAAqB,MAAM,WAAW,MAAM,UAAU,MAAM,SAAS;CACnF,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAE7C,MAAM,eAAe,aAClB,MAAc,UAAkB;EAC/B,MAAM,SAAS,MAAM,aAAa,MAAM,MAAM;AAC9C,MAAI,OAAO,WAAW,UACpB,aAAY,UAAU,OAAO;AAE/B,SAAO;IAET,CAAC,MAAM,CACR;CAGD,MAAM,WAAW,cACT,0BAA0B,MAAM,iBAAiB,aAAa,EACpE,CAAC,OAAO,aAAa,CACtB;CAED,MAAM,YAAY,aACf,UAG2C;EAC1C,WAAW,MAAoC;AAC7C,SAAM,eAAe,EAAE;AACvB,OAAI,EAAE,iBAAkB;AACxB,KAAE,gBAAgB;AAClB,cAAW,KAAK;AAChB,SACG,iBAAiB,EAAE,YAAY,CAC/B,WACO,MAAM,cAAc,EAAE,GAC3B,UAAmB;AAIlB,QAAI,MAAM,yBAAyB,EAAE,OAAO,CAAC;KAEhD,CACA,cAAc,WAAW,MAAM,CAAC;;EAErC,QAAQ;EACR,QAAQ,iBAAiB;EAC1B,GACD,CAAC,MAAM,CACR;AAED,QAAO;EACL,SAAS,MAAM;EACf,iBAAiB,MAAM;EACvB;EACA;EACA,QAAQ,MAAM;EACd,iBAAiB,MAAM;EACvB;EACA;EACD;;;;;;;;;;;;;;;;;;AA8BH,SAAgB,0BAId;CACA,MAAM,UAAU,cAAoD,KAAK;CAEzE,SAAS,kBAAkB,UAAiD;EAC1E,MAAM,MAAM,WAAW,QAAQ;AAC/B,MAAI,CAAC,IACH,OAAM,IAAI,MACR,GAAG,SAAS,uLAGb;AAEH,SAAO;;CAGT,SAAS,gBAAgB,EAAE,SAAS,UAAU,YAA4C;EACxF,MAAM,YAAY,cAAc;EAGhC,MAAM,QAAQ,cAAc,uBAAiC,SAAS,UAAU,EAAE,EAAE,CAAC;AAErF,wBAAsB,MAAM,SAAS,EAAE,CAAC,MAAM,CAAC;EAE/C,MAAM,aAAa,GAAG,QAAQ,GAAG,GAAG,QAAQ,iCAAiC,MAAM;EACnF,MAAM,aAAa,OAAO,MAAM;AAChC,kBAAgB;AACd,OAAI,CAAC,WAAW,SAAS;AACvB,eAAW,UAAU;AACrB;;AAEF,SAAM,QAAQ,QAAQ;KAErB,CAAC,WAAW,CAAC;EAEhB,MAAM,cAAc,OAAO,SAAS;AACpC,cAAY,UAAU;EAGtB,MAAM,QAAQ,eAA8C;GAAE;GAAO;GAAa,GAAG,CAAC,MAAM,CAAC;AAE7F,SAAO,cAAc,QAAQ,UAAU,EAAE,OAAO,EAAE,SAAS;;CAG7D,SAAS,iBAA6C;EACpD,MAAM,EAAE,OAAO,gBAAgB,kBAAkB,aAAa;EAC9D,MAAM,QAAQ,qBAAqB,MAAM,WAAW,MAAM,UAAU,MAAM,SAAS;EAEnF,MAAM,eAAe,aAClB,MAAc,UAAkB;GAC/B,MAAM,SAAS,MAAM,aAAa,MAAM,MAAM;AAC9C,OAAI,OAAO,WAAW,UACpB,aAAY,UAAU,OAAO;AAE/B,UAAO;KAET,CAAC,OAAO,YAAY,CACrB;AAED,SAAO;GACL,SAAS,MAAM;GACf,iBAAiB,MAAM;GACvB;GACA,QAAQ,MAAM;GACd,iBAAiB,MAAM;GACxB;;CAGH,SAAS,qBAAqD;EAC5D,MAAM,EAAE,OAAO,gBAAgB,kBAAkB,iBAAiB;AAClE,SAAO,eAAyB,OAAO,EAAE,UAAU,YAAY,SAAS,CAAC;;AAG3E,QAAO;EACL;EACA,YAAY;EACZ,gBAAgB;EACjB"}

package/dist/development/react/shop-pay.d.mts

@@ -0,0 +1,9 @@
+import { ShopPayButtonOptions } from "../core/shop-pay/shop-pay.mjs";
+import { ReactElement } from "react";
+
+//#region src/react/shop-pay.d.ts
+type ShopPayButtonProps = ShopPayButtonOptions;
+declare function ShopPayButton(options: ShopPayButtonProps): ReactElement;
+//#endregion
+export { ShopPayButton, ShopPayButtonProps };
+//# sourceMappingURL=shop-pay.d.mts.map

package/dist/development/react/shop-pay.mjs

@@ -0,0 +1,16 @@
+import { SHOP_PAY_BUTTON_TAG_NAME, defineShopPayButton, getShopPayButtonDeclarativeShadowDomHtml, getShopPayButtonElementAttributes } from "../core/shop-pay/shop-pay.mjs";
+import { createElement } from "react";
+
+//#region src/react/shop-pay.tsx
+const canUseDom = typeof document !== "undefined";
+defineShopPayButton();
+function ShopPayButton(options) {
+	return createElement(SHOP_PAY_BUTTON_TAG_NAME, {
+		...getShopPayButtonElementAttributes(options),
+		...!canUseDom ? { dangerouslySetInnerHTML: { __html: getShopPayButtonDeclarativeShadowDomHtml(options) } } : {}
+	});
+}
+
+//#endregion
+export { ShopPayButton };
+//# sourceMappingURL=shop-pay.mjs.map

package/dist/development/react/shop-pay.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"shop-pay.mjs","names":[],"sources":["../../../src/react/shop-pay.tsx"],"sourcesContent":["import { createElement, type ReactElement } from \"react\";\n\nimport {\n  defineShopPayButton,\n  getShopPayButtonDeclarativeShadowDomHtml,\n  getShopPayButtonElementAttributes,\n  SHOP_PAY_BUTTON_TAG_NAME,\n  type ShopPayButtonOptions,\n} from \"../core/shop-pay/shop-pay\";\n\nexport type ShopPayButtonProps = ShopPayButtonOptions;\n\nconst canUseDom = typeof document !== \"undefined\";\ndefineShopPayButton();\n\nexport function ShopPayButton(options: ShopPayButtonProps): ReactElement {\n  return createElement(SHOP_PAY_BUTTON_TAG_NAME, {\n    ...getShopPayButtonElementAttributes(options),\n    ...(!canUseDom\n      ? {\n          dangerouslySetInnerHTML: {\n            __html: getShopPayButtonDeclarativeShadowDomHtml(options),\n          },\n        }\n      : {}),\n  });\n}\n"],"mappings":";;;;AAYA,MAAM,YAAY,OAAO,aAAa;AACtC,qBAAqB;AAErB,SAAgB,cAAc,SAA2C;AACvE,QAAO,cAAc,0BAA0B;EAC7C,GAAG,kCAAkC,QAAQ;EAC7C,GAAI,CAAC,YACD,EACE,yBAAyB,EACvB,QAAQ,yCAAyC,QAAQ,EAC1D,EACF,GACD,EAAE;EACP,CAAC"}

package/dist/development/react/shopify-scripts.d.mts

@@ -0,0 +1,20 @@
+import { ShopifyRoutesOptions, ShopifyScriptTagsOptions } from "../core/shopify-scripts/types.mjs";
+import * as React from "react";
+
+//#region src/react/shopify-scripts.d.ts
+type ShopifyScriptsProps = ShopifyScriptTagsOptions & {
+  navigate?: ShopifyRoutesOptions["navigate"];
+  routes?: ShopifyRoutesOptions["routes"];
+  webMcp?: boolean;
+};
+declare module "react" {
+  namespace JSX {
+    interface IntrinsicElements {
+      "shopify-chat": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    }
+  }
+}
+declare function ShopifyScripts(options: ShopifyScriptsProps): React.FunctionComponentElement<React.FragmentProps>;
+//#endregion
+export { ShopifyScripts, ShopifyScriptsProps };
+//# sourceMappingURL=shopify-scripts.d.mts.map

package/dist/development/react/shopify-scripts.mjs

@@ -0,0 +1,39 @@
+"use client";
+
+import { initializeShopifyScripts } from "../core/shopify-scripts/initialize.mjs";
+import { getShopifyScriptTags } from "../core/shopify-scripts/index.mjs";
+import { Fragment, createElement, useEffect } from "react";
+
+//#region src/react/shopify-scripts.tsx
+function ShopifyScripts(options) {
+	const { consent, navigate, routes, webMcp = true, ...scriptOptions } = options;
+	useEffect(() => {
+		initializeShopifyScripts({
+			navigate,
+			routes,
+			webMcp
+		});
+	}, []);
+	return createElement(Fragment, null, getShopifyScriptTags({
+		...scriptOptions,
+		consent
+	}).tags.map(({ tagName, attributes, innerHTML }, index) => createElement(tagName, {
+		key: index,
+		...getReactAttributes(attributes),
+		...innerHTML ? { dangerouslySetInnerHTML: { __html: innerHTML } } : {}
+	})));
+}
+function getReactAttributes(attributes = {}) {
+	const reactAttributes = Object.fromEntries(Object.entries(attributes).map(([name, value]) => [name === "crossorigin" ? "crossOrigin" : name, value]));
+	if (attributes.nonce !== void 0) reactAttributes.suppressHydrationWarning = true;
+	if (attributes.async === true && typeof attributes.src === "string") return {
+		...reactAttributes,
+		onLoad: disableReactScriptHoisting
+	};
+	return reactAttributes;
+}
+const disableReactScriptHoisting = () => {};
+
+//#endregion
+export { ShopifyScripts };
+//# sourceMappingURL=shopify-scripts.mjs.map

package/dist/development/react/shopify-scripts.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"shopify-scripts.mjs","names":[],"sources":["../../../src/react/shopify-scripts.tsx"],"sourcesContent":["\"use client\";\n\nimport { createElement, Fragment, useEffect } from \"react\";\nimport type * as React from \"react\";\n\nimport {\n  getShopifyScriptTags,\n  initializeShopifyScripts,\n  type ShopifyRoutesOptions,\n  type ShopifyScriptTagsOptions,\n} from \"../core/shopify-scripts\";\n\nexport type ShopifyScriptsProps = ShopifyScriptTagsOptions & {\n  navigate?: ShopifyRoutesOptions[\"navigate\"];\n  routes?: ShopifyRoutesOptions[\"routes\"];\n  webMcp?: boolean;\n};\n\ndeclare module \"react\" {\n  namespace JSX {\n    interface IntrinsicElements {\n      \"shopify-chat\": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;\n    }\n  }\n}\n\nexport function ShopifyScripts(options: ShopifyScriptsProps) {\n  const { consent, navigate, routes, webMcp = true, ...scriptOptions } = options;\n\n  useEffect(() => {\n    void initializeShopifyScripts({ navigate, routes, webMcp });\n    // oxlint-disable-next-line react-hooks/exhaustive-deps -- ShopifyScripts browser startup is initialized once from initial props.\n  }, []);\n\n  return createElement(\n    Fragment,\n    null,\n    getShopifyScriptTags({ ...scriptOptions, consent }).tags.map(\n      ({ tagName, attributes, innerHTML }, index) =>\n        createElement(tagName, {\n          key: index,\n          ...getReactAttributes(attributes),\n          ...(innerHTML ? { dangerouslySetInnerHTML: { __html: innerHTML } } : {}),\n        }),\n    ),\n  );\n}\n\nfunction getReactAttributes(attributes: Record<string, string | boolean> = {}) {\n  const reactAttributes = Object.fromEntries(\n    Object.entries(attributes).map(([name, value]) => [\n      name === \"crossorigin\" ? \"crossOrigin\" : name,\n      value,\n    ]),\n  );\n\n  if (attributes.nonce !== undefined) {\n    // Browsers intentionally hide nonce content attributes from getAttribute(),\n    // which can make React report a false hydration mismatch for SSR scripts.\n    reactAttributes.suppressHydrationWarning = true;\n  }\n\n  if (attributes.async === true && typeof attributes.src === \"string\") {\n    // React hoists async scripts without handlers, which can let them execute before\n    // the inline Shopify bootstrap scripts that configure their globals.\n    return { ...reactAttributes, onLoad: disableReactScriptHoisting };\n  }\n\n  return reactAttributes;\n}\n\nconst disableReactScriptHoisting = () => {};\n"],"mappings":";;;;;;;AA0BA,SAAgB,eAAe,SAA8B;CAC3D,MAAM,EAAE,SAAS,UAAU,QAAQ,SAAS,MAAM,GAAG,kBAAkB;AAEvE,iBAAgB;AACd,EAAK,yBAAyB;GAAE;GAAU;GAAQ;GAAQ,CAAC;IAE1D,EAAE,CAAC;AAEN,QAAO,cACL,UACA,MACA,qBAAqB;EAAE,GAAG;EAAe;EAAS,CAAC,CAAC,KAAK,KACtD,EAAE,SAAS,YAAY,aAAa,UACnC,cAAc,SAAS;EACrB,KAAK;EACL,GAAG,mBAAmB,WAAW;EACjC,GAAI,YAAY,EAAE,yBAAyB,EAAE,QAAQ,WAAW,EAAE,GAAG,EAAE;EACxE,CAAC,CACL,CACF;;AAGH,SAAS,mBAAmB,aAA+C,EAAE,EAAE;CAC7E,MAAM,kBAAkB,OAAO,YAC7B,OAAO,QAAQ,WAAW,CAAC,KAAK,CAAC,MAAM,WAAW,CAChD,SAAS,gBAAgB,gBAAgB,MACzC,MACD,CAAC,CACH;AAED,KAAI,WAAW,UAAU,OAGvB,iBAAgB,2BAA2B;AAG7C,KAAI,WAAW,UAAU,QAAQ,OAAO,WAAW,QAAQ,SAGzD,QAAO;EAAE,GAAG;EAAiB,QAAQ;EAA4B;AAGnE,QAAO;;AAGT,MAAM,mCAAmC"}

package/dist/development/vendor/standard-actions.d.mts

@@ -0,0 +1,134 @@
+//#region vendor/standard-actions.d.ts
+// version: 977e4f914dd2b3eca85ad01dee81c2c96eb1b2e5
+interface Price {
+  amount: string;
+  currencyCode: string;
+}
+interface CartDiscountCode {
+  applicable: boolean;
+  code: string;
+}
+interface CartCost {
+  totalAmount: Price;
+}
+interface CartLine {
+  id: string;
+  quantity: number;
+  cost: CartCost;
+}
+interface CartMutationUserError {
+  code?: string;
+  field?: string[];
+  message: string;
+}
+interface CartMutationWarning {
+  code?: string;
+  message: string;
+  target?: string;
+}
+declare const CART_UPDATE_CONTEXTS: readonly ["product", "cart", "dialog", "standard-action"];
+type CartUpdateContext = (typeof CART_UPDATE_CONTEXTS)[number];
+declare const CART_UPDATE_ACTIONS: readonly ["add", "remove", "update"];
+type CartUpdateAction = (typeof CART_UPDATE_ACTIONS)[number];
+type ActionArgs<P, O = void> = [P] extends [void] ? [options?: O] : [Extract<P, void>] extends [never] ? [payload: P, options?: O] : [payload?: Exclude<P, void>, options?: O];
+type DefaultActionHandler<R> = () => Promise<R>;
+type ActionConfiguration<P, R, Meta extends object = {}, O = void> = Meta & {
+  handler?: (defaultHandler: DefaultActionHandler<R>, ...args: ActionArgs<P, O>) => Promise<R>;
+};
+interface ActionFunction<P, R, Meta extends object = {}, O = void> {
+  (...args: ActionArgs<P, O>): Promise<R>;
+  configure(options: ActionConfiguration<P, R, Meta, O>): boolean;
+  isDefault(): boolean;
+}
+type UpdateCartUserError = CartMutationUserError;
+type UpdateCartWarning = CartMutationWarning;
+interface CartAttributeInput {
+  key: string;
+  value: string;
+}
+interface StorefrontCartLinesConnection {
+  nodes: CartLine[];
+}
+interface StorefrontCartSummary {
+  id: string;
+  totalQuantity: number;
+  cost: CartCost;
+  lines: StorefrontCartLinesConnection;
+  discountCodes: CartDiscountCode[];
+}
+type UpdateCartEventTargetMeta = {
+  type: "shopify:cart:lines-update";
+  action: CartUpdateAction;
+} | {
+  type: "shopify:cart:note-update" | "shopify:cart:attributes-update" | "shopify:cart:discount-update" | "shopify:cart:error";
+};
+interface EventTargetConfigurationMeta {
+  /**
+   * Required: return the element to emit updateCart-generated events from.
+   * Receives metadata for the specific event so themes can route events to
+   * different UI roots if needed. `shopify:cart:lines-update` includes the
+   * mutation action (`'add' | 'remove' | 'update'`).
+   */
+  eventTarget: (meta: UpdateCartEventTargetMeta) => EventTarget | null;
+}
+interface CartLineInput {
+  /**
+   * Existing-line id from SFAPI or the AJAX cart API.
+   * CartLine GIDs keep or receive a `?cart=` suffix automatically when the cart id is known.
+   * Present = update/remove; absent = add.
+   */
+  id?: string;
+  /** ProductVariant GID or raw variant id. Required for add. */
+  merchandiseId?: string;
+  /** Set to 0 to remove. */
+  quantity: number;
+  /** Line item-level custom attributes */
+  attributes?: CartAttributeInput[];
+  /** Selling plan GID or raw selling plan id. */
+  sellingPlanId?: string;
+}
+interface UpdateCartPayload {
+  /** Cart GID or raw cart token. If omitted, discovered from the cart cookie. */
+  cartId?: string;
+  lines?: CartLineInput[];
+  note?: string;
+  discountCodes?: string[];
+  /** Cart-level custom attributes */
+  attributes?: CartAttributeInput[];
+}
+interface UpdateCartResult {
+  cart: StorefrontCartSummary;
+  userErrors?: UpdateCartUserError[];
+  warnings?: UpdateCartWarning[];
+  detail?: Record<string, any>;
+}
+interface UpdateCartOptions {
+  signal?: AbortSignal;
+  event?: {
+    detail?: Record<string, any>;
+    context?: CartUpdateContext;
+  };
+}
+interface GetCartPayload {
+  /** Cart GID or raw cart token. If omitted, discovered from the browser cookie. */
+  cartId?: string;
+}
+interface GetCartResult {
+  cart: StorefrontCartSummary | null;
+  detail?: Record<string, any>;
+}
+interface GetCartOptions {
+  signal?: AbortSignal;
+}
+interface GetCartAction {
+  (payload?: GetCartPayload, options?: GetCartOptions): Promise<GetCartResult>;
+}
+declare const actions: Readonly<{
+  getCart: GetCartAction;
+  updateCart: ActionFunction<UpdateCartPayload, UpdateCartResult, EventTargetConfigurationMeta, UpdateCartOptions>;
+  openCart: ActionFunction<void, void, {}, void>;
+}>;
+type ShopifyStandardActions = typeof actions;
+//#endregion
+export { ShopifyStandardActions };
+//# sourceMappingURL=standard-actions.d.mts.map