@shopify/hydrogen 2026.10.0-preview.4 → 2026.10.0

package/dist/vue/cart.mjs

@@ -26,11 +26,9 @@ function useOptionalCartStore() {
 	return inject(CartStoreKey, null);
 }
 /**
-* Vue component that creates and manages a {@link CartStore} instance.
+* Creates a cart store and shares the store with the cart composables below the provider.
 *
-* Calls {@link CartStore.connect} on mount and {@link CartStore.destroy} on unmount.
-* All cart composables (`useCart`, `useCartForm`, `useCartActions`) must be
-* descendants of this component.
+* The provider connects the store on mount and destroys the store on unmount. Render every cart composable inside the provider. The provider creates its store once from the first initial data and ignores later changes.
 *
 * @example
 * ```vue
@@ -38,6 +36,7 @@ function useOptionalCartStore() {
 *   <App />
 * </CartProvider>
 * ```
+* @publicDocs
 */
 const CartProvider = defineComponent({
 	name: "CartProvider",
@@ -62,10 +61,11 @@ function useCart(selector, isEqual) {
 	return useCartSelector(useCartStore("useCart"), selector ?? ((state) => state), isEqual);
 }
 /**
-* Returns cart actions for reconciling state after out-of-band mutations.
+* Returns the cart action that syncs the cart after a mutation outside cart forms.
 *
-* Currently exposes {@link CartStore.refresh} — call it after server-side cart
-* mutations that bypass the form system.
+* Call `refresh` after a server-side cart mutation that bypasses cart forms, such as a server action that creates the cart.
+*
+* @returns The `refresh` action.
 *
 * @example
 * ```vue
@@ -78,15 +78,15 @@ function useCart(selector, isEqual) {
 * }
 * <\/script>
 * ```
+* @publicDocs
 */
 function useCartActions() {
 	return { refresh: useCartStore("useCartActions").refresh };
 }
 /**
-* Subscribes the {@link CartStore} to the analytics event dispatcher.
+* Publishes cart analytics events when the cart changes.
 *
-* Call once near the root of your app. Starts tracking on mount via `onMounted`
-* and cleans up via `onScopeDispose`.
+* Call the composable once near the root of your app. The composable starts tracking on mount and stops when the component's scope ends. The composable throws when you call it outside the cart provider.
 *
 * @example
 * ```vue
@@ -94,6 +94,7 @@ function useCartActions() {
 * useCartAnalytics();
 * <\/script>
 * ```
+* @publicDocs
 */
 function useCartAnalytics() {
 	const store = useCartStore("useCartAnalytics");
@@ -104,8 +105,22 @@ function useCartAnalytics() {
 	onScopeDispose(() => stopTracking?.());
 }
 /**
-* Like `useCart`, but returns `undefined` when rendered outside a `<CartProvider>`.
-* @internal
+* Returns the slice of cart state that the selector picks as a read-only shallow ref. Outside the cart provider, the ref holds `undefined`.
+*
+* Use the composable in a component that also renders above the provider, such as a header cart badge on an error page.
+* Wherever the provider always exists, use the cart composable that throws. A missing provider then fails with an error.
+*
+* @example
+* ```vue
+* <script setup>
+* const count = useOptionalCart((state) => state.data.totalQuantity);
+* <\/script>
+*
+* <template>
+*   <span v-if="count !== undefined">Cart ({{ count }})</span>
+* </template>
+* ```
+* @publicDocs
 */
 function useOptionalCart(selector, isEqual) {
 	const store = useOptionalCartStore();
@@ -122,16 +137,15 @@ function useCartSelector(store, selector, isEqual) {
 	return selected;
 }
 /**
-* Returns form props, a field register function, and reactive pending state
-* for building cart forms in Vue.
+* Returns form props, a register function, and pending state for cart forms.
 *
-* Unlike the React hook, the Vue variant includes `isPending` — a reactive
-* object with `initial` (`ComputedRef<boolean>`) for the initial cart load
-* and `lines(lineId?)` for checking per-line or any-line pending state.
+* The form props post to the cart endpoint and send each submission through the cart store. A `beforeSubmit` callback that prevents the event's default skips the cart submission.
 *
-* Note: `interactive: true` returns numeric input attributes but does **not**
-* auto-submit on change — that behavior requires `attachQuantityInput`, which
-* is only wired by the React adapter.
+* The pending state holds a computed ref that's `true` during a full cart load, and a function that checks whether one line or any line has a mutation in flight.
+*
+* Registering the quantity field with `interactive: true` returns numeric input attributes without auto-submit. Call attachQuantityInput on the input to submit the form when the quantity changes.
+*
+* @returns The form props function, the register function, and the pending state.
 *
 * @example
 * ```vue
@@ -150,6 +164,7 @@ function useCartSelector(store, selector, isEqual) {
 *   </form>
 * </template>
 * ```
+* @publicDocs
 */
 function useCartForm() {
 	const store = useCartStore("useCartForm");
@@ -177,11 +192,12 @@ function useCartForm() {
 	};
 }
 /**
-* Factory that returns typed cart components and composables matched to your
-* server handler's cart query shape.
+* Returns a cart provider and composables typed to the cart query in your cart server handlers.
+* Pass the type of your cart server handlers as the `THandlers` type argument. Every composable's cart state then includes your custom cart fields.
+*
+* On mount, the provider points cart requests at `/api/cart` and connects the store. Every composable except the optional cart composable throws when you call it outside the provider.
 *
-* The generic `THandlers` parameter is inferred from your `createCartServerHandlers`
-* call, so every composable's {@link CartState} carries your custom cart fields.
+* @returns The typed cart provider, the cart state composables, and the cart actions and form composables.
 *
 * @example
 * ```ts
@@ -195,6 +211,7 @@ function useCartForm() {
 *   useCartForm,
 * } = createCartComponents<typeof cartServerHandlers>();
 * ```
+* @publicDocs
 */
 function createCartComponents() {
 	const TypedCartProvider = createTypedCartProvider();
@@ -213,5 +230,5 @@ function createCartComponents() {
 }
 
 //#endregion
-export { createCartComponents, getCartEndpoint, useCartActions, useCartAnalytics, useCartStore };
+export { createCartComponents, getCartEndpoint, useCartAnalytics, useCartStore };
 //# sourceMappingURL=cart.mjs.map

package/dist/vue/cart.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"cart.mjs","names":[],"sources":["../../src/vue/cart.ts"],"sourcesContent":["import {\n  computed,\n  defineComponent,\n  h,\n  inject,\n  onMounted,\n  onScopeDispose,\n  onUnmounted,\n  provide,\n  shallowRef,\n  type ComputedRef,\n  type InjectionKey,\n  type PropType,\n  type ShallowRef,\n} from \"vue\";\n\nimport { trackCartAnalytics } from \"../core/analytics/cart-tracker\";\nimport {\n  configureCartEndpoint as configureCoreCartEndpoint,\n  createCartStore,\n  type CreateCartStoreOptions,\n  type CartActions,\n  type CartStore,\n} from \"../core/cart/cart\";\nimport { createCartFormRegister, type CartFormRegister } from \"../core/cart/form\";\nimport type { CartDataFromHandlers } from \"../core/cart/server-handlers\";\nimport type { CartData, CartState } from \"../core/cart/state\";\n\nconst DEFAULT_CART_ENDPOINT = \"/api/cart\";\n\nlet cartEndpoint = DEFAULT_CART_ENDPOINT;\n\nconst CartStoreKey: InjectionKey<CartStore> = Symbol(\"CartStore\");\n\nexport function configureCartEndpoint(endpoint: string): void {\n  cartEndpoint = endpoint;\n  configureCoreCartEndpoint(endpoint);\n}\n\nexport function getCartEndpoint(): string {\n  return cartEndpoint;\n}\n\ntype TypedUseCart<TData extends CartData> = {\n  (): Readonly<ShallowRef<CartState<TData>>>;\n  <S>(\n    selector: (state: CartState<TData>) => S,\n    isEqual?: (a: S, b: S) => boolean,\n  ): Readonly<ShallowRef<S>>;\n};\n\ntype TypedUseOptionalCart<TData extends CartData> = <S>(\n  selector: (state: CartState<TData>) => S,\n  isEqual?: (a: S, b: S) => boolean,\n) => Readonly<ShallowRef<S | undefined>>;\n\ntype CartInitialData<TData extends CartData = CartData> =\n  CreateCartStoreOptions<TData>[\"initialData\"];\n\ntype TypedCartProvider<TData extends CartData> = {\n  new (): { $props: { initialData?: CartInitialData<TData> } };\n};\n\nexport type { CartActions };\n\ntype TypedCartComponents<TData extends CartData> = {\n  CartProvider: TypedCartProvider<TData>;\n  useCart: TypedUseCart<TData>;\n  useOptionalCart: TypedUseOptionalCart<TData>;\n  useCartActions: typeof useCartActions;\n  useCartForm: typeof useCartForm;\n};\n\nfunction createTypedCartProvider<TData extends CartData>(): TypedCartProvider<TData> {\n  const TypedCartProvider = defineComponent(\n    (props: { initialData?: CartInitialData<TData> }, { slots }) => {\n      return () =>\n        h(\n          CartProvider,\n          { initialData: props.initialData as CartInitialData | undefined },\n          slots.default,\n        );\n    },\n    { name: \"CartProvider\", props: [\"initialData\"] },\n  );\n\n  return TypedCartProvider as unknown as TypedCartProvider<TData>;\n}\n\nexport function useCartStore(composableName = \"useCartStore\"): CartStore {\n  const store = inject(CartStoreKey, null);\n  if (!store) {\n    throw new Error(`${composableName} must be used inside a <CartProvider>.`);\n  }\n  return store;\n}\n\nfunction useOptionalCartStore(): CartStore | null {\n  return inject(CartStoreKey, null);\n}\n\n/**\n * Vue component that creates and manages a {@link CartStore} instance.\n *\n * Calls {@link CartStore.connect} on mount and {@link CartStore.destroy} on unmount.\n * All cart composables (`useCart`, `useCartForm`, `useCartActions`) must be\n * descendants of this component.\n *\n * @example\n * ```vue\n * <CartProvider :initialData=\"{ cart: loaderData.cart }\">\n *   <App />\n * </CartProvider>\n * ```\n */\nexport const CartProvider = defineComponent({\n  name: \"CartProvider\",\n  props: {\n    initialData: {\n      type: Object as PropType<CartInitialData>,\n      default: undefined,\n    },\n  },\n  setup(props, { slots }) {\n    const store = createCartStore({ initialData: props.initialData });\n    provide(CartStoreKey, store);\n\n    onMounted(() => {\n      configureCoreCartEndpoint(cartEndpoint);\n      store.connect();\n    });\n\n    onUnmounted(() => {\n      store.destroy();\n    });\n\n    return () => slots.default?.();\n  },\n});\n\n/**\n * Subscribes to {@link CartState} as a Vue `ShallowRef`.\n *\n * Without a selector, returns the full `CartState`. With a selector, returns\n * a `ShallowRef` of the selected slice — the ref updates only when the\n * selected value changes (by reference, or by custom `isEqual`).\n *\n * @example\n * ```vue\n * <script setup>\n * // Full state\n * const state = useCart();\n *\n * // Selected slice — re-renders only when lines change\n * const lines = useCart((s) => s.data.lines.nodes);\n *\n * // Check if a specific line is pending\n * const isPending = useCart((s) => s.pending.lines.has(lineId));\n * </script>\n * ```\n */\nexport function useCart(): Readonly<ShallowRef<CartState>>;\nexport function useCart<TData extends CartData = CartData, S = unknown>(\n  selector: (state: CartState<TData>) => S,\n  isEqual?: (a: S, b: S) => boolean,\n): Readonly<ShallowRef<S>>;\nexport function useCart<TData extends CartData = CartData, S = unknown>(\n  selector?: (state: CartState<TData>) => S,\n  isEqual?: (a: S, b: S) => boolean,\n): Readonly<ShallowRef<S | CartState>> {\n  const store = useCartStore(\"useCart\");\n  const resolve = selector ?? ((state: CartState<TData>) => state as unknown as S);\n  return useCartSelector(store, resolve, isEqual) as Readonly<ShallowRef<S>>;\n}\n\n/**\n * Returns cart actions for reconciling state after out-of-band mutations.\n *\n * Currently exposes {@link CartStore.refresh} — call it after server-side cart\n * mutations that bypass the form system.\n *\n * @example\n * ```vue\n * <script setup>\n * const { refresh } = useCartActions();\n *\n * async function handleServerAction() {\n *   await createCartOnServer();\n *   refresh();\n * }\n * </script>\n * ```\n */\nexport function useCartActions(): CartActions {\n  const store = useCartStore(\"useCartActions\");\n  return { refresh: store.refresh };\n}\n\n/**\n * Subscribes the {@link CartStore} to the analytics event dispatcher.\n *\n * Call once near the root of your app. Starts tracking on mount via `onMounted`\n * and cleans up via `onScopeDispose`.\n *\n * @example\n * ```vue\n * <script setup>\n * useCartAnalytics();\n * </script>\n * ```\n */\nexport function useCartAnalytics(): void {\n  const store = useCartStore(\"useCartAnalytics\");\n  let stopTracking: (() => void) | undefined;\n\n  onMounted(() => {\n    stopTracking = trackCartAnalytics(store);\n  });\n\n  onScopeDispose(() => stopTracking?.());\n}\n\n/**\n * Like `useCart`, but returns `undefined` when rendered outside a `<CartProvider>`.\n * @internal\n */\nexport function useOptionalCart<TData extends CartData = CartData, S = unknown>(\n  selector: (state: CartState<TData>) => S,\n  isEqual?: (a: S, b: S) => boolean,\n): Readonly<ShallowRef<S | undefined>> {\n  const store = useOptionalCartStore();\n  if (!store) return shallowRef<S | undefined>(undefined);\n  return useCartSelector(store, selector, isEqual);\n}\n\nfunction useCartSelector<TData extends CartData = CartData, S = unknown>(\n  store: CartStore,\n  selector: (state: CartState<TData>) => S,\n  isEqual?: (a: S, b: S) => boolean,\n): Readonly<ShallowRef<S>> {\n  const selected = shallowRef<S>(selector(store.getState() as CartState<TData>));\n\n  const unsubscribe = store.subscribe(() => {\n    const next = selector(store.getState() as CartState<TData>);\n    if (isEqual?.(selected.value, next)) return;\n    selected.value = next;\n  });\n\n  onScopeDispose(unsubscribe);\n\n  return selected as Readonly<ShallowRef<S>>;\n}\n\n/**\n * Returns form props, a field register function, and reactive pending state\n * for building cart forms in Vue.\n *\n * Unlike the React hook, the Vue variant includes `isPending` — a reactive\n * object with `initial` (`ComputedRef<boolean>`) for the initial cart load\n * and `lines(lineId?)` for checking per-line or any-line pending state.\n *\n * Note: `interactive: true` returns numeric input attributes but does **not**\n * auto-submit on change — that behavior requires `attachQuantityInput`, which\n * is only wired by the React adapter.\n *\n * @example\n * ```vue\n * <script setup>\n * const { formProps, register, isPending } = useCartForm();\n * </script>\n *\n * <template>\n *   <form v-bind=\"formProps()\">\n *     <input v-bind=\"register('lineId', { value: line.id })\" />\n *     <input v-bind=\"register('quantity', { value: line.quantity })\" />\n *     <button v-bind=\"register('set')\" />\n *     <button v-bind=\"register('increase')\">+</button>\n *     <button v-bind=\"register('decrease')\">−</button>\n *     <span v-if=\"isPending.lines(line.id)\">Updating…</span>\n *   </form>\n * </template>\n * ```\n */\nexport function useCartForm(): {\n  formProps: (opts?: {\n    beforeSubmit?: (e: SubmitEvent) => void;\n    afterSubmit?: (e: SubmitEvent) => void;\n  }) => Record<string, unknown>;\n  register: CartFormRegister;\n  isPending: {\n    initial: ComputedRef<boolean>;\n    lines: (lineId?: string) => boolean;\n  };\n} {\n  const store = useCartStore(\"useCartForm\");\n  const loading = useCart((s) => s.loading);\n  const pendingLines = useCart((s) => s.pending.lines);\n  const register = createCartFormRegister();\n\n  const formProps = (opts?: {\n    beforeSubmit?: (e: SubmitEvent) => void;\n    afterSubmit?: (e: SubmitEvent) => void;\n  }): Record<string, unknown> => ({\n    onSubmit: (e: SubmitEvent) => {\n      opts?.beforeSubmit?.(e);\n      if (e.defaultPrevented) return;\n      e.preventDefault();\n      store.handleFormSubmit(e).catch(() => {});\n      opts?.afterSubmit?.(e);\n    },\n    method: \"post\",\n    action: cartEndpoint,\n  });\n\n  const isPending = {\n    initial: computed(() => loading.value),\n    lines: (lineId?: string): boolean =>\n      lineId ? pendingLines.value.has(lineId) : pendingLines.value.size > 0,\n  };\n\n  return { formProps, register, isPending };\n}\n\n/**\n * Factory that returns typed cart components and composables matched to your\n * server handler's cart query shape.\n *\n * The generic `THandlers` parameter is inferred from your `createCartServerHandlers`\n * call, so every composable's {@link CartState} carries your custom cart fields.\n *\n * @example\n * ```ts\n * import type { cartServerHandlers } from \"./server/cart.server\";\n *\n * const {\n *   CartProvider,\n *   useCart,\n *   useOptionalCart,\n *   useCartActions,\n *   useCartForm,\n * } = createCartComponents<typeof cartServerHandlers>();\n * ```\n */\nexport function createCartComponents<THandlers>(): TypedCartComponents<\n  CartDataFromHandlers<THandlers>\n> {\n  type TData = CartDataFromHandlers<THandlers>;\n  const TypedCartProvider = createTypedCartProvider<TData>();\n\n  const useTypedCart = ((\n    selector?: (state: CartState<TData>) => unknown,\n    isEqual?: (a: unknown, b: unknown) => boolean,\n  ) => {\n    if (!selector) return useCart() as Readonly<ShallowRef<CartState<TData>>>;\n    return useCart<TData, unknown>(selector, isEqual);\n  }) as TypedUseCart<TData>;\n\n  const useTypedOptionalCart = (<S>(\n    selector: (state: CartState<TData>) => S,\n    isEqual?: (a: S, b: S) => boolean,\n  ) => useOptionalCart<TData, S>(selector, isEqual)) as TypedUseOptionalCart<TData>;\n\n  return {\n    CartProvider: TypedCartProvider,\n    useCart: useTypedCart,\n    useOptionalCart: useTypedOptionalCart,\n    useCartActions,\n    useCartForm,\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"cart.mjs","names":[],"sources":["../../src/vue/cart.ts"],"sourcesContent":["import {\n  computed,\n  defineComponent,\n  h,\n  inject,\n  onMounted,\n  onScopeDispose,\n  onUnmounted,\n  provide,\n  shallowRef,\n  type ComputedRef,\n  type InjectionKey,\n  type PropType,\n  type ShallowRef,\n} from \"vue\";\n\nimport { trackCartAnalytics } from \"../core/analytics/cart-tracker\";\nimport {\n  configureCartEndpoint as configureCoreCartEndpoint,\n  createCartStore,\n  type CreateCartStoreOptions,\n  type CartActions,\n  type CartStore,\n} from \"../core/cart/cart\";\nimport { createCartFormRegister, type CartFormRegister } from \"../core/cart/form\";\nimport type { CartDataFromHandlers } from \"../core/cart/server-handlers\";\nimport type { CartData, CartState } from \"../core/cart/state\";\n\nconst DEFAULT_CART_ENDPOINT = \"/api/cart\";\n\nlet cartEndpoint = DEFAULT_CART_ENDPOINT;\n\nconst CartStoreKey: InjectionKey<CartStore> = Symbol(\"CartStore\");\n\nexport function configureCartEndpoint(endpoint: string): void {\n  cartEndpoint = endpoint;\n  configureCoreCartEndpoint(endpoint);\n}\n\nexport function getCartEndpoint(): string {\n  return cartEndpoint;\n}\n\ntype TypedUseCart<TData extends CartData> = {\n  (): Readonly<ShallowRef<CartState<TData>>>;\n  <S>(\n    selector: (state: CartState<TData>) => S,\n    isEqual?: (a: S, b: S) => boolean,\n  ): Readonly<ShallowRef<S>>;\n};\n\ntype TypedUseOptionalCart<TData extends CartData> = <S>(\n  selector: (state: CartState<TData>) => S,\n  isEqual?: (a: S, b: S) => boolean,\n) => Readonly<ShallowRef<S | undefined>>;\n\ntype CartInitialData<TData extends CartData = CartData> =\n  CreateCartStoreOptions<TData>[\"initialData\"];\n\ntype TypedCartProvider<TData extends CartData> = {\n  new (): { $props: { initialData?: CartInitialData<TData> } };\n};\n\nexport type { CartActions };\n\n/** Cart provider and composables whose cart state carries the custom fields from your cart server handlers. */\ntype TypedCartComponents<TData extends CartData> = {\n  /** The provider that creates the cart store. The provider connects the store on mount and destroys the store on unmount. */\n  CartProvider: TypedCartProvider<TData>;\n  /** Returns cart state as a read-only shallow ref. The selector is optional. Without a selector, the ref holds the full cart state. */\n  useCart: TypedUseCart<TData>;\n  /** Returns the slice of cart state that the selector picks as a read-only shallow ref. Outside the provider, the ref holds `undefined`. */\n  useOptionalCart: TypedUseOptionalCart<TData>;\n  /** Returns the `refresh` action. Call `refresh` after a server-side cart mutation that bypasses cart forms. */\n  useCartActions: typeof useCartActions;\n  /** Returns form props, a register function, and pending state for cart forms. */\n  useCartForm: typeof useCartForm;\n};\n\nfunction createTypedCartProvider<TData extends CartData>(): TypedCartProvider<TData> {\n  const TypedCartProvider = defineComponent(\n    (props: { initialData?: CartInitialData<TData> }, { slots }) => {\n      return () =>\n        h(\n          CartProvider,\n          { initialData: props.initialData as CartInitialData | undefined },\n          slots.default,\n        );\n    },\n    { name: \"CartProvider\", props: [\"initialData\"] },\n  );\n\n  return TypedCartProvider as unknown as TypedCartProvider<TData>;\n}\n\nexport function useCartStore(composableName = \"useCartStore\"): CartStore {\n  const store = inject(CartStoreKey, null);\n  if (!store) {\n    throw new Error(`${composableName} must be used inside a <CartProvider>.`);\n  }\n  return store;\n}\n\nfunction useOptionalCartStore(): CartStore | null {\n  return inject(CartStoreKey, null);\n}\n\n/**\n * Creates a cart store and shares the store with the cart composables below the provider.\n *\n * The provider connects the store on mount and destroys the store on unmount. Render every cart composable inside the provider. The provider creates its store once from the first initial data and ignores later changes.\n *\n * @example\n * ```vue\n * <CartProvider :initialData=\"{ cart: loaderData.cart }\">\n *   <App />\n * </CartProvider>\n * ```\n * @publicDocs\n */\nexport const CartProvider = defineComponent({\n  name: \"CartProvider\",\n  props: {\n    initialData: {\n      type: Object as PropType<CartInitialData>,\n      default: undefined,\n    },\n  },\n  setup(props, { slots }) {\n    const store = createCartStore({ initialData: props.initialData });\n    provide(CartStoreKey, store);\n\n    onMounted(() => {\n      configureCoreCartEndpoint(cartEndpoint);\n      store.connect();\n    });\n\n    onUnmounted(() => {\n      store.destroy();\n    });\n\n    return () => slots.default?.();\n  },\n});\n\n/**\n * Returns cart state as a read-only shallow ref.\n *\n * Without a selector, the ref holds the full cart state. With a selector, the ref holds the selected value. The ref updates when the selected value changes by reference, or when your `isEqual` function reports a change.\n *\n * @example\n * ```vue\n * <script setup>\n * // Full state\n * const state = useCart();\n *\n * // Selected slice — re-renders only when lines change\n * const lines = useCart((s) => s.data.lines.nodes);\n *\n * // Check if a specific line is pending\n * const isPending = useCart((s) => s.pending.lines.has(lineId));\n * </script>\n * ```\n * @publicDocs\n */\nexport function useCart(): Readonly<ShallowRef<CartState>>;\nexport function useCart<TData extends CartData = CartData, S = unknown>(\n  selector: (state: CartState<TData>) => S,\n  isEqual?: (a: S, b: S) => boolean,\n): Readonly<ShallowRef<S>>;\nexport function useCart<TData extends CartData = CartData, S = unknown>(\n  selector?: (state: CartState<TData>) => S,\n  isEqual?: (a: S, b: S) => boolean,\n): Readonly<ShallowRef<S | CartState>> {\n  const store = useCartStore(\"useCart\");\n  const resolve = selector ?? ((state: CartState<TData>) => state as unknown as S);\n  return useCartSelector(store, resolve, isEqual) as Readonly<ShallowRef<S>>;\n}\n\n/**\n * Returns the cart action that syncs the cart after a mutation outside cart forms.\n *\n * Call `refresh` after a server-side cart mutation that bypasses cart forms, such as a server action that creates the cart.\n *\n * @returns The `refresh` action.\n *\n * @example\n * ```vue\n * <script setup>\n * const { refresh } = useCartActions();\n *\n * async function handleServerAction() {\n *   await createCartOnServer();\n *   refresh();\n * }\n * </script>\n * ```\n * @publicDocs\n */\nexport function useCartActions(): CartActions {\n  const store = useCartStore(\"useCartActions\");\n  return { refresh: store.refresh };\n}\n\n/**\n * Publishes cart analytics events when the cart changes.\n *\n * Call the composable once near the root of your app. The composable starts tracking on mount and stops when the component's scope ends. The composable throws when you call it outside the cart provider.\n *\n * @example\n * ```vue\n * <script setup>\n * useCartAnalytics();\n * </script>\n * ```\n * @publicDocs\n */\nexport function useCartAnalytics(): void {\n  const store = useCartStore(\"useCartAnalytics\");\n  let stopTracking: (() => void) | undefined;\n\n  onMounted(() => {\n    stopTracking = trackCartAnalytics(store);\n  });\n\n  onScopeDispose(() => stopTracking?.());\n}\n\n/**\n * Returns the slice of cart state that the selector picks as a read-only shallow ref. Outside the cart provider, the ref holds `undefined`.\n *\n * Use the composable in a component that also renders above the provider, such as a header cart badge on an error page.\n * Wherever the provider always exists, use the cart composable that throws. A missing provider then fails with an error.\n *\n * @example\n * ```vue\n * <script setup>\n * const count = useOptionalCart((state) => state.data.totalQuantity);\n * </script>\n *\n * <template>\n *   <span v-if=\"count !== undefined\">Cart ({{ count }})</span>\n * </template>\n * ```\n * @publicDocs\n */\nexport function useOptionalCart<TData extends CartData = CartData, S = unknown>(\n  selector: (state: CartState<TData>) => S,\n  isEqual?: (a: S, b: S) => boolean,\n): Readonly<ShallowRef<S | undefined>> {\n  const store = useOptionalCartStore();\n  if (!store) return shallowRef<S | undefined>(undefined);\n  return useCartSelector(store, selector, isEqual);\n}\n\nfunction useCartSelector<TData extends CartData = CartData, S = unknown>(\n  store: CartStore,\n  selector: (state: CartState<TData>) => S,\n  isEqual?: (a: S, b: S) => boolean,\n): Readonly<ShallowRef<S>> {\n  const selected = shallowRef<S>(selector(store.getState() as CartState<TData>));\n\n  const unsubscribe = store.subscribe(() => {\n    const next = selector(store.getState() as CartState<TData>);\n    if (isEqual?.(selected.value, next)) return;\n    selected.value = next;\n  });\n\n  onScopeDispose(unsubscribe);\n\n  return selected as Readonly<ShallowRef<S>>;\n}\n\n/**\n * Returns form props, a register function, and pending state for cart forms.\n *\n * The form props post to the cart endpoint and send each submission through the cart store. A `beforeSubmit` callback that prevents the event's default skips the cart submission.\n *\n * The pending state holds a computed ref that's `true` during a full cart load, and a function that checks whether one line or any line has a mutation in flight.\n *\n * Registering the quantity field with `interactive: true` returns numeric input attributes without auto-submit. Call attachQuantityInput on the input to submit the form when the quantity changes.\n *\n * @returns The form props function, the register function, and the pending state.\n *\n * @example\n * ```vue\n * <script setup>\n * const { formProps, register, isPending } = useCartForm();\n * </script>\n *\n * <template>\n *   <form v-bind=\"formProps()\">\n *     <input v-bind=\"register('lineId', { value: line.id })\" />\n *     <input v-bind=\"register('quantity', { value: line.quantity })\" />\n *     <button v-bind=\"register('set')\" />\n *     <button v-bind=\"register('increase')\">+</button>\n *     <button v-bind=\"register('decrease')\">−</button>\n *     <span v-if=\"isPending.lines(line.id)\">Updating…</span>\n *   </form>\n * </template>\n * ```\n * @publicDocs\n */\nexport function useCartForm(): {\n  formProps: (opts?: {\n    beforeSubmit?: (e: SubmitEvent) => void;\n    afterSubmit?: (e: SubmitEvent) => void;\n  }) => Record<string, unknown>;\n  register: CartFormRegister;\n  isPending: {\n    initial: ComputedRef<boolean>;\n    lines: (lineId?: string) => boolean;\n  };\n} {\n  const store = useCartStore(\"useCartForm\");\n  const loading = useCart((s) => s.loading);\n  const pendingLines = useCart((s) => s.pending.lines);\n  const register = createCartFormRegister();\n\n  const formProps = (opts?: {\n    beforeSubmit?: (e: SubmitEvent) => void;\n    afterSubmit?: (e: SubmitEvent) => void;\n  }): Record<string, unknown> => ({\n    onSubmit: (e: SubmitEvent) => {\n      opts?.beforeSubmit?.(e);\n      if (e.defaultPrevented) return;\n      e.preventDefault();\n      store.handleFormSubmit(e).catch(() => {});\n      opts?.afterSubmit?.(e);\n    },\n    method: \"post\",\n    action: cartEndpoint,\n  });\n\n  const isPending = {\n    initial: computed(() => loading.value),\n    lines: (lineId?: string): boolean =>\n      lineId ? pendingLines.value.has(lineId) : pendingLines.value.size > 0,\n  };\n\n  return { formProps, register, isPending };\n}\n\n/**\n * Returns a cart provider and composables typed to the cart query in your cart server handlers.\n * Pass the type of your cart server handlers as the `THandlers` type argument. Every composable's cart state then includes your custom cart fields.\n *\n * On mount, the provider points cart requests at `/api/cart` and connects the store. Every composable except the optional cart composable throws when you call it outside the provider.\n *\n * @returns The typed cart provider, the cart state composables, and the cart actions and form composables.\n *\n * @example\n * ```ts\n * import type { cartServerHandlers } from \"./server/cart.server\";\n *\n * const {\n *   CartProvider,\n *   useCart,\n *   useOptionalCart,\n *   useCartActions,\n *   useCartForm,\n * } = createCartComponents<typeof cartServerHandlers>();\n * ```\n * @publicDocs\n */\nexport function createCartComponents<THandlers>(): TypedCartComponents<\n  CartDataFromHandlers<THandlers>\n> {\n  type TData = CartDataFromHandlers<THandlers>;\n  const TypedCartProvider = createTypedCartProvider<TData>();\n\n  const useTypedCart = ((\n    selector?: (state: CartState<TData>) => unknown,\n    isEqual?: (a: unknown, b: unknown) => boolean,\n  ) => {\n    if (!selector) return useCart() as Readonly<ShallowRef<CartState<TData>>>;\n    return useCart<TData, unknown>(selector, isEqual);\n  }) as TypedUseCart<TData>;\n\n  const useTypedOptionalCart = (<S>(\n    selector: (state: CartState<TData>) => S,\n    isEqual?: (a: S, b: S) => boolean,\n  ) => useOptionalCart<TData, S>(selector, isEqual)) as TypedUseOptionalCart<TData>;\n\n  return {\n    CartProvider: TypedCartProvider,\n    useCart: useTypedCart,\n    useOptionalCart: useTypedOptionalCart,\n    useCartActions,\n    useCartForm,\n  };\n}\n"],"mappings":"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"}

package/dist/vue/collection.d.mts

@@ -5,9 +5,10 @@ import { PropType, ShallowRef } from "vue";
 
 //#region src/vue/collection.d.ts
 /**
- * Manages the lifecycle of a {@link CollectionStore}: creates on mount and syncs
- * with URL changes. Recreates the store when `data.handle` changes
- * (navigating to a different collection).
+ * Creates a collection store and keeps its filters and sort in sync with the URL.
+ * The provider creates a new store when the collection handle changes, such as on navigation to a different collection.
+ *
+ * The provider takes `data` and `url-search` props, emits a `change` event with the search string to navigate to, and renders its default slot.
  *
  * @example
  * ```vue
@@ -33,6 +34,7 @@ import { PropType, ShallowRef } from "vue";
  *   </CollectionProvider>
  * </template>
  * ```
+ * @publicDocs
  */
 declare const CollectionProvider: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
   data: {
@@ -62,8 +64,7 @@ declare const CollectionProvider: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
   urlSearch: string;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
 /**
- * Subscribes to the collection store and returns a reactive ref of the full
- * state snapshot.
+ * Returns a read-only shallow ref of the collection state. The ref follows the new store when the provider replaces the store.
  *
  * @example
  * ```vue
@@ -75,12 +76,12 @@ declare const CollectionProvider: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
  *   <p>{{ state.status }}</p>
  * </template>
  * ```
+ * @publicDocs
  */
 declare function useCollection(): Readonly<ShallowRef<CollectionState>>;
 /**
- * Subscribes to the collection store and returns a reactive ref of a derived
- * value via `selector`. Optionally accepts an `isEqual` comparator to skip
- * updates when the derived value is structurally unchanged.
+ * With a selector, the composable returns a ref of the selector's value.
+ * Pass an `isEqual` comparator to skip updates for equal values. The composable throws outside the collection provider.
  *
  * @example
  * ```vue
@@ -88,16 +89,22 @@ declare function useCollection(): Readonly<ShallowRef<CollectionState>>;
  * const status = useCollection(s => s.status);
  * </script>
  * ```
+ * @publicDocs
  */
 declare function useCollection<S>(selector: (state: CollectionState) => S, isEqual?: (a: S, b: S) => boolean): Readonly<ShallowRef<S>>;
 /**
- * Returns methods that change filters and sort. The store's `onBrowseChange`
- * callback (set by {@link CollectionProvider}) handles emitting `change` with a
- * serialized search string.
+ * Returns methods that change filters and sort. After each change, the collection provider emits a `change` event with the new search string.
+ *
+ * The composable throws outside the collection provider.
+ *
+ * @publicDocs
  */
 declare function useCollectionActions(): CollectionActions;
 /**
- * Returns form props for progressive-enhancement of collection filter forms.
+ * Returns form props that progressively enhance collection filter forms.
+ *
+ * Bind the result of `formProps()` on the form. Its submit handler cancels the native submission and applies the form's filter and sort fields to the store.
+ * The `beforeSubmit` and `afterSubmit` callbacks receive the native submit event. The composable throws outside the collection provider.
  *
  * @example
  * ```vue
@@ -112,6 +119,7 @@ declare function useCollectionActions(): CollectionActions;
  *   </form>
  * </template>
  * ```
+ * @publicDocs
  */
 declare function useCollectionForm(): {
   formProps: (opts?: {

package/dist/vue/collection.mjs

@@ -5,9 +5,10 @@ import { defineComponent, inject, onUnmounted, provide, shallowRef, toValue, wat
 //#region src/vue/collection.ts
 const CollectionStoreKey = Symbol("CollectionStore");
 /**
-* Manages the lifecycle of a {@link CollectionStore}: creates on mount and syncs
-* with URL changes. Recreates the store when `data.handle` changes
-* (navigating to a different collection).
+* Creates a collection store and keeps its filters and sort in sync with the URL.
+* The provider creates a new store when the collection handle changes, such as on navigation to a different collection.
+*
+* The provider takes `data` and `url-search` props, emits a `change` event with the search string to navigate to, and renders its default slot.
 *
 * @example
 * ```vue
@@ -33,6 +34,7 @@ const CollectionStoreKey = Symbol("CollectionStore");
 *   </CollectionProvider>
 * </template>
 * ```
+* @publicDocs
 */
 const CollectionProvider = defineComponent({
 	name: "CollectionProvider",
@@ -110,9 +112,11 @@ function useCollection(selector, isEqual) {
 	return selected;
 }
 /**
-* Returns methods that change filters and sort. The store's `onBrowseChange`
-* callback (set by {@link CollectionProvider}) handles emitting `change` with a
-* serialized search string.
+* Returns methods that change filters and sort. After each change, the collection provider emits a `change` event with the new search string.
+*
+* The composable throws outside the collection provider.
+*
+* @publicDocs
 */
 function useCollectionActions() {
 	const storeRef = useRequiredStoreRef("useCollectionActions");
@@ -127,7 +131,10 @@ function useCollectionActions() {
 	};
 }
 /**
-* Returns form props for progressive-enhancement of collection filter forms.
+* Returns form props that progressively enhance collection filter forms.
+*
+* Bind the result of `formProps()` on the form. Its submit handler cancels the native submission and applies the form's filter and sort fields to the store.
+* The `beforeSubmit` and `afterSubmit` callbacks receive the native submit event. The composable throws outside the collection provider.
 *
 * @example
 * ```vue
@@ -142,6 +149,7 @@ function useCollectionActions() {
 *   </form>
 * </template>
 * ```
+* @publicDocs
 */
 function useCollectionForm() {
 	const actions = useCollectionActions();

package/dist/vue/collection.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"collection.mjs","names":[],"sources":["../../src/vue/collection.ts"],"sourcesContent":["import {\n  defineComponent,\n  inject,\n  onUnmounted,\n  provide,\n  shallowRef,\n  toValue,\n  watch,\n  type InjectionKey,\n  type PropType,\n  type ShallowRef,\n} from \"vue\";\n\nimport {\n  createCollectionStore,\n  createCollectionReconciler,\n  type CollectionActions,\n  type CollectionData,\n  type CollectionReconciler,\n  type CollectionStore,\n} from \"../core/collection\";\nimport type { CollectionState } from \"../core/collection\";\n\nexport type { CollectionActions, CollectionData };\n\nconst CollectionStoreKey: InjectionKey<ShallowRef<CollectionStore>> = Symbol(\"CollectionStore\");\n\n/**\n * Manages the lifecycle of a {@link CollectionStore}: creates on mount and syncs\n * with URL changes. Recreates the store when `data.handle` changes\n * (navigating to a different collection).\n *\n * @example\n * ```vue\n * <script setup lang=\"ts\">\n * import { CollectionProvider, type CollectionData } from '@shopify/hydrogen/vue';\n * import { useRoute, useRouter } from 'vue-router';\n *\n * const props = defineProps<{ data: CollectionData; urlSearch: string }>();\n * const route = useRoute();\n * const router = useRouter();\n *\n * // `search` includes the leading `?`, so append it to the path as-is.\n * const onChange = (search: string) => router.replace(`${route.path}${search}`);\n * </script>\n *\n * <template>\n *   <CollectionProvider\n *     :data=\"props.data\"\n *     :url-search=\"props.urlSearch\"\n *     @change=\"onChange\"\n *   >\n *     <slot />\n *   </CollectionProvider>\n * </template>\n * ```\n */\nexport const CollectionProvider = defineComponent({\n  name: \"CollectionProvider\",\n  props: {\n    data: {\n      type: Object as PropType<CollectionData>,\n      required: true,\n    },\n    urlSearch: {\n      type: String,\n      default: \"\",\n    },\n  },\n  emits: {\n    change: (searchString: string) => typeof searchString === \"string\",\n  },\n  setup(props, { slots, emit }) {\n    const readUrlSearch = () => toValue(props.urlSearch);\n\n    const initialStore = createCollectionStore({\n      data: props.data,\n      urlSearch: readUrlSearch(),\n    });\n    const storeRef = shallowRef<CollectionStore>(initialStore);\n    provide(CollectionStoreKey, storeRef);\n\n    let reconciler: CollectionReconciler = createCollectionReconciler(\n      {\n        getStore: () => storeRef.value,\n        readUrlSearch,\n        emitChange: (s) => emit(\"change\", s),\n      },\n      readUrlSearch(),\n    );\n    initialStore.setOnBrowseChange(() => reconciler.handleBrowseChange());\n\n    function resetStore() {\n      storeRef.value.setOnBrowseChange(null);\n      const store = createCollectionStore({\n        data: props.data,\n        urlSearch: readUrlSearch(),\n      });\n      storeRef.value = store;\n      reconciler.reset(readUrlSearch());\n      store.setOnBrowseChange(() => reconciler.handleBrowseChange());\n    }\n\n    watch(\n      () => props.data.handle,\n      (newHandle, oldHandle) => {\n        if (newHandle === oldHandle) return;\n        resetStore();\n      },\n    );\n\n    watch(\n      () => [readUrlSearch(), props.data] as const,\n      () => {\n        reconciler.reconcile(readUrlSearch(), props.data.dataSearch);\n      },\n      { flush: \"sync\", immediate: true, deep: true },\n    );\n\n    onUnmounted(() => {\n      storeRef.value.setOnBrowseChange(null);\n    });\n\n    return () => slots.default?.();\n  },\n});\n\nfunction useRequiredStoreRef(composableName: string): ShallowRef<CollectionStore> {\n  const storeRef = inject(CollectionStoreKey, null);\n  if (!storeRef) {\n    throw new Error(`${composableName} must be used inside a <CollectionProvider>.`);\n  }\n  return storeRef;\n}\n\n/**\n * Subscribes to the collection store and returns a reactive ref of the full\n * state snapshot.\n *\n * @example\n * ```vue\n * <script setup lang=\"ts\">\n * const state = useCollection();\n * </script>\n *\n * <template>\n *   <p>{{ state.status }}</p>\n * </template>\n * ```\n */\nexport function useCollection(): Readonly<ShallowRef<CollectionState>>;\n/**\n * Subscribes to the collection store and returns a reactive ref of a derived\n * value via `selector`. Optionally accepts an `isEqual` comparator to skip\n * updates when the derived value is structurally unchanged.\n *\n * @example\n * ```vue\n * <script setup lang=\"ts\">\n * const status = useCollection(s => s.status);\n * </script>\n * ```\n */\nexport function useCollection<S>(\n  selector: (state: CollectionState) => S,\n  isEqual?: (a: S, b: S) => boolean,\n): Readonly<ShallowRef<S>>;\nexport function useCollection<S>(\n  selector?: (state: CollectionState) => S,\n  isEqual?: (a: S, b: S) => boolean,\n): Readonly<ShallowRef<CollectionState | S>> {\n  const storeRef = useRequiredStoreRef(\"useCollection\");\n  const resolve = selector ?? ((state: CollectionState) => state as unknown as S);\n  const selected = shallowRef<CollectionState | S>(resolve(storeRef.value.getState()));\n\n  watch(\n    () => storeRef.value,\n    (store, _, onCleanup) => {\n      selected.value = resolve(store.getState());\n\n      const unsubscribe = store.subscribe(() => {\n        const next = resolve(store.getState());\n        if (isEqual && selector) {\n          if (isEqual(selected.value as S, next)) return;\n        }\n        selected.value = next;\n      });\n\n      onCleanup(unsubscribe);\n    },\n    { immediate: true },\n  );\n\n  return selected as Readonly<ShallowRef<CollectionState | S>>;\n}\n\n/**\n * Returns methods that change filters and sort. The store's `onBrowseChange`\n * callback (set by {@link CollectionProvider}) handles emitting `change` with a\n * serialized search string.\n */\nexport function useCollectionActions(): CollectionActions {\n  const storeRef = useRequiredStoreRef(\"useCollectionActions\");\n\n  return {\n    setFilters: (...args) => storeRef.value.setFilters(...args),\n    toggleFilter: (...args) => storeRef.value.toggleFilter(...args),\n    toggleFilterInput: (...args) => storeRef.value.toggleFilterInput(...args),\n    setSortKey: (...args) => storeRef.value.setSortKey(...args),\n    setSortByValue: (...args) => storeRef.value.setSortByValue(...args),\n    reset: (...args) => storeRef.value.reset(...args),\n    handleFormSubmit: (...args) => storeRef.value.handleFormSubmit(...args),\n  };\n}\n\n/**\n * Returns form props for progressive-enhancement of collection filter forms.\n *\n * @example\n * ```vue\n * <script setup lang=\"ts\">\n * const { formProps } = useCollectionForm();\n * </script>\n *\n * <template>\n *   <form v-bind=\"formProps()\" action=\"/collections/shoes\">\n *     <input type=\"checkbox\" name=\"filter.p.tag\" value=\"sale\" />\n *     <button type=\"submit\">Apply</button>\n *   </form>\n * </template>\n * ```\n */\nexport function useCollectionForm(): {\n  formProps: (opts?: {\n    beforeSubmit?: (e: SubmitEvent) => void;\n    afterSubmit?: (e: SubmitEvent) => void;\n  }) => Record<string, unknown>;\n} {\n  const actions = useCollectionActions();\n\n  const formProps = (opts?: {\n    beforeSubmit?: (e: SubmitEvent) => void;\n    afterSubmit?: (e: SubmitEvent) => void;\n  }): Record<string, unknown> => ({\n    onSubmit: (e: SubmitEvent) => {\n      opts?.beforeSubmit?.(e);\n      if (e.defaultPrevented) return;\n      e.preventDefault();\n      actions.handleFormSubmit(e);\n      opts?.afterSubmit?.(e);\n    },\n  });\n\n  return { formProps };\n}\n"],"mappings":"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"}
+{"version":3,"file":"collection.mjs","names":[],"sources":["../../src/vue/collection.ts"],"sourcesContent":["import {\n  defineComponent,\n  inject,\n  onUnmounted,\n  provide,\n  shallowRef,\n  toValue,\n  watch,\n  type InjectionKey,\n  type PropType,\n  type ShallowRef,\n} from \"vue\";\n\nimport {\n  createCollectionStore,\n  createCollectionReconciler,\n  type CollectionActions,\n  type CollectionData,\n  type CollectionReconciler,\n  type CollectionStore,\n} from \"../core/collection\";\nimport type { CollectionState } from \"../core/collection\";\n\nexport type { CollectionActions, CollectionData };\n\nconst CollectionStoreKey: InjectionKey<ShallowRef<CollectionStore>> = Symbol(\"CollectionStore\");\n\n/**\n * Creates a collection store and keeps its filters and sort in sync with the URL.\n * The provider creates a new store when the collection handle changes, such as on navigation to a different collection.\n *\n * The provider takes `data` and `url-search` props, emits a `change` event with the search string to navigate to, and renders its default slot.\n *\n * @example\n * ```vue\n * <script setup lang=\"ts\">\n * import { CollectionProvider, type CollectionData } from '@shopify/hydrogen/vue';\n * import { useRoute, useRouter } from 'vue-router';\n *\n * const props = defineProps<{ data: CollectionData; urlSearch: string }>();\n * const route = useRoute();\n * const router = useRouter();\n *\n * // `search` includes the leading `?`, so append it to the path as-is.\n * const onChange = (search: string) => router.replace(`${route.path}${search}`);\n * </script>\n *\n * <template>\n *   <CollectionProvider\n *     :data=\"props.data\"\n *     :url-search=\"props.urlSearch\"\n *     @change=\"onChange\"\n *   >\n *     <slot />\n *   </CollectionProvider>\n * </template>\n * ```\n * @publicDocs\n */\nexport const CollectionProvider = defineComponent({\n  name: \"CollectionProvider\",\n  props: {\n    data: {\n      type: Object as PropType<CollectionData>,\n      required: true,\n    },\n    urlSearch: {\n      type: String,\n      default: \"\",\n    },\n  },\n  emits: {\n    change: (searchString: string) => typeof searchString === \"string\",\n  },\n  setup(props, { slots, emit }) {\n    const readUrlSearch = () => toValue(props.urlSearch);\n\n    const initialStore = createCollectionStore({\n      data: props.data,\n      urlSearch: readUrlSearch(),\n    });\n    const storeRef = shallowRef<CollectionStore>(initialStore);\n    provide(CollectionStoreKey, storeRef);\n\n    let reconciler: CollectionReconciler = createCollectionReconciler(\n      {\n        getStore: () => storeRef.value,\n        readUrlSearch,\n        emitChange: (s) => emit(\"change\", s),\n      },\n      readUrlSearch(),\n    );\n    initialStore.setOnBrowseChange(() => reconciler.handleBrowseChange());\n\n    function resetStore() {\n      storeRef.value.setOnBrowseChange(null);\n      const store = createCollectionStore({\n        data: props.data,\n        urlSearch: readUrlSearch(),\n      });\n      storeRef.value = store;\n      reconciler.reset(readUrlSearch());\n      store.setOnBrowseChange(() => reconciler.handleBrowseChange());\n    }\n\n    watch(\n      () => props.data.handle,\n      (newHandle, oldHandle) => {\n        if (newHandle === oldHandle) return;\n        resetStore();\n      },\n    );\n\n    watch(\n      () => [readUrlSearch(), props.data] as const,\n      () => {\n        reconciler.reconcile(readUrlSearch(), props.data.dataSearch);\n      },\n      { flush: \"sync\", immediate: true, deep: true },\n    );\n\n    onUnmounted(() => {\n      storeRef.value.setOnBrowseChange(null);\n    });\n\n    return () => slots.default?.();\n  },\n});\n\nfunction useRequiredStoreRef(composableName: string): ShallowRef<CollectionStore> {\n  const storeRef = inject(CollectionStoreKey, null);\n  if (!storeRef) {\n    throw new Error(`${composableName} must be used inside a <CollectionProvider>.`);\n  }\n  return storeRef;\n}\n\n/**\n * Returns a read-only shallow ref of the collection state. The ref follows the new store when the provider replaces the store.\n *\n * @example\n * ```vue\n * <script setup lang=\"ts\">\n * const state = useCollection();\n * </script>\n *\n * <template>\n *   <p>{{ state.status }}</p>\n * </template>\n * ```\n * @publicDocs\n */\nexport function useCollection(): Readonly<ShallowRef<CollectionState>>;\n/**\n * With a selector, the composable returns a ref of the selector's value.\n * Pass an `isEqual` comparator to skip updates for equal values. The composable throws outside the collection provider.\n *\n * @example\n * ```vue\n * <script setup lang=\"ts\">\n * const status = useCollection(s => s.status);\n * </script>\n * ```\n * @publicDocs\n */\nexport function useCollection<S>(\n  selector: (state: CollectionState) => S,\n  isEqual?: (a: S, b: S) => boolean,\n): Readonly<ShallowRef<S>>;\nexport function useCollection<S>(\n  selector?: (state: CollectionState) => S,\n  isEqual?: (a: S, b: S) => boolean,\n): Readonly<ShallowRef<CollectionState | S>> {\n  const storeRef = useRequiredStoreRef(\"useCollection\");\n  const resolve = selector ?? ((state: CollectionState) => state as unknown as S);\n  const selected = shallowRef<CollectionState | S>(resolve(storeRef.value.getState()));\n\n  watch(\n    () => storeRef.value,\n    (store, _, onCleanup) => {\n      selected.value = resolve(store.getState());\n\n      const unsubscribe = store.subscribe(() => {\n        const next = resolve(store.getState());\n        if (isEqual && selector) {\n          if (isEqual(selected.value as S, next)) return;\n        }\n        selected.value = next;\n      });\n\n      onCleanup(unsubscribe);\n    },\n    { immediate: true },\n  );\n\n  return selected as Readonly<ShallowRef<CollectionState | S>>;\n}\n\n/**\n * Returns methods that change filters and sort. After each change, the collection provider emits a `change` event with the new search string.\n *\n * The composable throws outside the collection provider.\n *\n * @publicDocs\n */\nexport function useCollectionActions(): CollectionActions {\n  const storeRef = useRequiredStoreRef(\"useCollectionActions\");\n\n  return {\n    setFilters: (...args) => storeRef.value.setFilters(...args),\n    toggleFilter: (...args) => storeRef.value.toggleFilter(...args),\n    toggleFilterInput: (...args) => storeRef.value.toggleFilterInput(...args),\n    setSortKey: (...args) => storeRef.value.setSortKey(...args),\n    setSortByValue: (...args) => storeRef.value.setSortByValue(...args),\n    reset: (...args) => storeRef.value.reset(...args),\n    handleFormSubmit: (...args) => storeRef.value.handleFormSubmit(...args),\n  };\n}\n\n/**\n * Returns form props that progressively enhance collection filter forms.\n *\n * Bind the result of `formProps()` on the form. Its submit handler cancels the native submission and applies the form's filter and sort fields to the store.\n * The `beforeSubmit` and `afterSubmit` callbacks receive the native submit event. The composable throws outside the collection provider.\n *\n * @example\n * ```vue\n * <script setup lang=\"ts\">\n * const { formProps } = useCollectionForm();\n * </script>\n *\n * <template>\n *   <form v-bind=\"formProps()\" action=\"/collections/shoes\">\n *     <input type=\"checkbox\" name=\"filter.p.tag\" value=\"sale\" />\n *     <button type=\"submit\">Apply</button>\n *   </form>\n * </template>\n * ```\n * @publicDocs\n */\nexport function useCollectionForm(): {\n  formProps: (opts?: {\n    beforeSubmit?: (e: SubmitEvent) => void;\n    afterSubmit?: (e: SubmitEvent) => void;\n  }) => Record<string, unknown>;\n} {\n  const actions = useCollectionActions();\n\n  const formProps = (opts?: {\n    beforeSubmit?: (e: SubmitEvent) => void;\n    afterSubmit?: (e: SubmitEvent) => void;\n  }): Record<string, unknown> => ({\n    onSubmit: (e: SubmitEvent) => {\n      opts?.beforeSubmit?.(e);\n      if (e.defaultPrevented) return;\n      e.preventDefault();\n      actions.handleFormSubmit(e);\n      opts?.afterSubmit?.(e);\n    },\n  });\n\n  return { formProps };\n}\n"],"mappings":"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"}

package/dist/vue/index.d.mts

@@ -4,10 +4,10 @@ import { CollectionActions, CollectionData } from "../core/collection/collection
 import { ValidProductSelectionResult } from "../core/product/product-form.mjs";
 import { ProductAddToCartProps, ProductFormRegister, ProductMerchandiseIdProps, ProductOptionValueProps, ProductQuantityDefaultProps, ProductQuantityProps } from "../core/product/form.mjs";
 import { PredictiveSearchActions } from "../core/predictive-search/store.mjs";
-import { createCartComponents, useCartActions, useCartAnalytics } from "./cart.mjs";
+import { createCartComponents, useCartAnalytics } from "./cart.mjs";
 import { CollectionProvider, useCollection, useCollectionActions, useCollectionForm } from "./collection.mjs";
 import { PredictiveSearchFormPropsOptions, PredictiveSearchFormResult, PredictiveSearchProvider, PredictiveSearchQueryInputPropsOptions, usePredictiveSearch, usePredictiveSearchActions, usePredictiveSearchForm } from "./predictive-search.mjs";
 import { UseProductFormOptions, UseProductFormResult, UseProductResult, createProductComponents, useProductForm } from "./product.mjs";
 import { ShopPayButton, ShopPayButtonProps } from "./shop-pay.mjs";
 import { ShopifyScripts, ShopifyScriptsProps } from "./shopify-scripts.mjs";
-export { type CartActions, type CollectionActions, type CollectionData, CollectionProvider, type PredictiveSearchActions, type PredictiveSearchFormPropsOptions, type PredictiveSearchFormResult, PredictiveSearchProvider, type PredictiveSearchQueryInputPropsOptions, type ProductAddToCartProps, type ProductFormRegister, type ProductMerchandiseIdProps, type ProductOptionValueProps, type ProductQuantityDefaultProps, type ProductQuantityProps, ShopPayButton, type ShopPayButtonProps, type ShopifyGlobal, ShopifyScripts, type ShopifyScriptsProps, type UseProductFormOptions, type UseProductFormResult, type UseProductResult, type ValidProductSelectionResult, createCartComponents, createProductComponents, useCartActions, useCartAnalytics, useCollection, useCollectionActions, useCollectionForm, usePredictiveSearch, usePredictiveSearchActions, usePredictiveSearchForm, useProductForm };
+export { type CartActions, type CollectionActions, type CollectionData, CollectionProvider, type PredictiveSearchActions, type PredictiveSearchFormPropsOptions, type PredictiveSearchFormResult, PredictiveSearchProvider, type PredictiveSearchQueryInputPropsOptions, type ProductAddToCartProps, type ProductFormRegister, type ProductMerchandiseIdProps, type ProductOptionValueProps, type ProductQuantityDefaultProps, type ProductQuantityProps, ShopPayButton, type ShopPayButtonProps, type ShopifyGlobal, ShopifyScripts, type ShopifyScriptsProps, type UseProductFormOptions, type UseProductFormResult, type UseProductResult, type ValidProductSelectionResult, createCartComponents, createProductComponents, useCartAnalytics, useCollection, useCollectionActions, useCollectionForm, usePredictiveSearch, usePredictiveSearchActions, usePredictiveSearchForm, useProductForm };

package/dist/vue/index.mjs

@@ -1,8 +1,8 @@
-import { createCartComponents, useCartActions, useCartAnalytics } from "./cart.mjs";
+import { createCartComponents, useCartAnalytics } from "./cart.mjs";
 import { CollectionProvider, useCollection, useCollectionActions, useCollectionForm } from "./collection.mjs";
 import { PredictiveSearchProvider, usePredictiveSearch, usePredictiveSearchActions, usePredictiveSearchForm } from "./predictive-search.mjs";
 import { createProductComponents, useProductForm } from "./product.mjs";
 import { ShopPayButton } from "./shop-pay.mjs";
 import { ShopifyScripts } from "./shopify-scripts.mjs";
 
-export { CollectionProvider, PredictiveSearchProvider, ShopPayButton, ShopifyScripts, createCartComponents, createProductComponents, useCartActions, useCartAnalytics, useCollection, useCollectionActions, useCollectionForm, usePredictiveSearch, usePredictiveSearchActions, usePredictiveSearchForm, useProductForm };
+export { CollectionProvider, PredictiveSearchProvider, ShopPayButton, ShopifyScripts, createCartComponents, createProductComponents, useCartAnalytics, useCollection, useCollectionActions, useCollectionForm, usePredictiveSearch, usePredictiveSearchActions, usePredictiveSearchForm, useProductForm };

package/dist/vue/predictive-search.d.mts

@@ -5,28 +5,35 @@ import * as _$vue from "vue";
 import { PropType, ShallowRef } from "vue";
 
 //#region src/vue/predictive-search.d.ts
-/** Options for the form props builder returned by {@link usePredictiveSearchForm}. */
+/**
+ * Options for the form props function of the predictive search form composable.
+ *
+ * Accepts any form attribute. Attributes that you pass override the default action, method, and role.
+ */
 type PredictiveSearchFormPropsOptions = {
-  /** When `true`, prevents the native form submission and triggers a client-side search instead. */preventDefault?: boolean; /** Called on submit with the submit event and the extracted search term. Calling `event.preventDefault()` cancels both the native submission and Hydrogen's client-side search. */
+  /** Set to `true` to cancel the native submission and run a client-side search with the submitted term. */preventDefault?: boolean; /** Runs on submit with the submit event and the search term. Calling preventDefault on the event cancels the native submission and the client-side search. */
   onSubmit?: (event: SubmitEvent, term: string) => void;
   [key: string]: unknown;
 };
-/** Options for the query input props builder returned by {@link usePredictiveSearchForm}'s `register` method. */
+/** Options for the query input attributes that the register function returns. */
 type PredictiveSearchQueryInputPropsOptions = {
-  /** Called on input with the input event and the current input value. Call `event.preventDefault()` to skip the automatic search trigger. */onInput?: (event: Event, term: string) => void;
+  /** Runs on input with the input event and the input value. Calling preventDefault on the event skips the automatic search. */onInput?: (event: Event, term: string) => void;
   [key: string]: unknown;
 };
-/** Return type of {@link usePredictiveSearchForm}, providing methods to build a progressively-enhanced search form. */
+/** Functions that build a predictive search form that works without JavaScript. */
 type PredictiveSearchFormResult = {
-  /** Generates form element attributes including the search action and submit handler. */formProps(options?: PredictiveSearchFormPropsOptions): Record<string, unknown>; /** Generates input element attributes for a named form field and wires up the search trigger. */
+  /** Returns the form attributes, including the search action and a submit handler. */formProps(options?: PredictiveSearchFormPropsOptions): Record<string, unknown>; /** Returns the query input attributes, including an input handler that searches on every input event. The function accepts only the `query` field and throws for any other field name. */
   register: (field: "query", options?: PredictiveSearchQueryInputPropsOptions) => Record<string, unknown>;
 };
 /**
- * Creates and manages a predictive search store, providing it to descendant
- * composables via Vue's provide/inject.
+ * Creates a predictive search store and shares the store with the predictive search composables in the default slot.
+ *
+ * The provider connects the store on mount and destroys the store on unmount. A change to a store option prop replaces the store with a new one. The provider compares the types and searchable fields arrays by their values.
  *
- * Recreates the store when configuration props change. Connects the store
- * on mount and destroys it on unmount.
+ * The provider throws when neither the fetch prop nor a global fetch function exists.
+ *
+ * @throws {Error} When neither the fetch prop nor a global fetch function exists.
+ * @publicDocs
  */
 declare const PredictiveSearchProvider: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
   predictiveSearchEndpoint: {
@@ -125,45 +132,33 @@ declare const PredictiveSearchProvider: _$vue.DefineComponent<_$vue.ExtractPropT
   unavailableProducts: SearchUnavailableProductsType;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
 /**
- * Subscribes to the predictive search store's state as a reactive ref.
- *
- * Without arguments, returns a `ShallowRef` of the full
- * {@link PredictiveSearchState}. With a `selector`, returns a ref of the
- * derived value that only updates when the selected value changes
- * (reference equality by default, or a custom `isEqual`).
+ * Returns the predictive search state as a read-only shallow ref that updates when the state changes.
  *
- * Must be used inside a {@link PredictiveSearchProvider}.
+ * With a selector, the ref holds the selected value and updates only when that value changes.
+ * The composable compares values by reference unless you pass an equality function.
  *
- * @throws {Error} When called outside a PredictiveSearchProvider.
+ * @throws {Error} When you call it outside a PredictiveSearchProvider.
+ * @publicDocs
  */
 declare function usePredictiveSearch<TData extends PredictiveSearchData = PredictiveSearchData>(): Readonly<ShallowRef<PredictiveSearchState<TData>>>;
 declare function usePredictiveSearch<TData extends PredictiveSearchData = PredictiveSearchData, S = PredictiveSearchState<TData>>(selector: (state: PredictiveSearchState<TData>) => S, isEqual?: (a: S, b: S) => boolean): Readonly<ShallowRef<S>>;
 /**
- * Returns `search` and `clear` methods that delegate to the current store.
+ * Returns methods that search and clear results in the provider's current store.
  *
- * These are thin wrappers that read from the reactive store ref on each call,
- * so they always target the active store even after a provider prop change
- * triggers store recreation.
+ * After a store option prop change replaces the store, the methods act on the new store.
  *
- * Must be used inside a {@link PredictiveSearchProvider}.
- *
- * @throws {Error} When called outside a PredictiveSearchProvider.
+ * @throws {Error} When you call it outside a PredictiveSearchProvider.
+ * @publicDocs
  */
 declare function usePredictiveSearchActions(): PredictiveSearchActions;
 /**
- * Returns `formProps` and `register` for building a progressively-enhanced
- * search form.
- *
- * `formProps()` generates form element attributes including the search
- * action URL. `register("query")` generates input attributes and calls the
- * store's search action on every `input` event. The store debounces requests
- * and resets state for terms shorter than `minTermLength`.
- * Both support an optional callback that receives the event and extracted
- * term, and respect `event.preventDefault()` to cancel the automatic behavior.
+ * Returns functions that build a predictive search form that works without JavaScript.
  *
- * Must be used inside a {@link PredictiveSearchProvider}.
+ * The form props function returns the form attributes. The register function returns the query input attributes and searches on every input event.
+ * Both functions accept a callback that receives the event and the search term. Calling preventDefault on the event cancels the automatic behavior.
  *
- * @throws {Error} When called outside a PredictiveSearchProvider.
+ * @throws {Error} When you call it outside a PredictiveSearchProvider.
+ * @publicDocs
  */
 declare function usePredictiveSearchForm(): PredictiveSearchFormResult;
 //#endregion

package/dist/vue/predictive-search.mjs

@@ -6,11 +6,14 @@ import { defineComponent, inject, onMounted, onUnmounted, provide, shallowRef, w
 const CONFIG_ARRAY_SEPARATOR = "\0";
 const PredictiveSearchKey = Symbol("PredictiveSearch");
 /**
-* Creates and manages a predictive search store, providing it to descendant
-* composables via Vue's provide/inject.
+* Creates a predictive search store and shares the store with the predictive search composables in the default slot.
 *
-* Recreates the store when configuration props change. Connects the store
-* on mount and destroys it on unmount.
+* The provider connects the store on mount and destroys the store on unmount. A change to a store option prop replaces the store with a new one. The provider compares the types and searchable fields arrays by their values.
+*
+* The provider throws when neither the fetch prop nor a global fetch function exists.
+*
+* @throws {Error} When neither the fetch prop nor a global fetch function exists.
+* @publicDocs
 */
 const PredictiveSearchProvider = defineComponent({
 	name: "PredictiveSearchProvider",
@@ -129,15 +132,12 @@ function usePredictiveSearch(selector, isEqual) {
 	return selected;
 }
 /**
-* Returns `search` and `clear` methods that delegate to the current store.
+* Returns methods that search and clear results in the provider's current store.
 *
-* These are thin wrappers that read from the reactive store ref on each call,
-* so they always target the active store even after a provider prop change
-* triggers store recreation.
+* After a store option prop change replaces the store, the methods act on the new store.
 *
-* Must be used inside a {@link PredictiveSearchProvider}.
-*
-* @throws {Error} When called outside a PredictiveSearchProvider.
+* @throws {Error} When you call it outside a PredictiveSearchProvider.
+* @publicDocs
 */
 function usePredictiveSearchActions() {
 	const { storeRef } = useRequiredContext("usePredictiveSearchActions");
@@ -147,19 +147,13 @@ function usePredictiveSearchActions() {
 	};
 }
 /**
-* Returns `formProps` and `register` for building a progressively-enhanced
-* search form.
-*
-* `formProps()` generates form element attributes including the search
-* action URL. `register("query")` generates input attributes and calls the
-* store's search action on every `input` event. The store debounces requests
-* and resets state for terms shorter than `minTermLength`.
-* Both support an optional callback that receives the event and extracted
-* term, and respect `event.preventDefault()` to cancel the automatic behavior.
+* Returns functions that build a predictive search form that works without JavaScript.
 *
-* Must be used inside a {@link PredictiveSearchProvider}.
+* The form props function returns the form attributes. The register function returns the query input attributes and searches on every input event.
+* Both functions accept a callback that receives the event and the search term. Calling preventDefault on the event cancels the automatic behavior.
 *
-* @throws {Error} When called outside a PredictiveSearchProvider.
+* @throws {Error} When you call it outside a PredictiveSearchProvider.
+* @publicDocs
 */
 function usePredictiveSearchForm() {
 	const { storeRef, searchActionRef } = useRequiredContext("usePredictiveSearchForm");