@shopify/hydrogen 2026.4.5 → 2026.10.0-preview.2

package/dist/development/vue/cart.d.mts

@@ -0,0 +1,46 @@
+import { CartData, CartState } from "../core/cart/state.mjs";
+import { CartStore, CreateCartStoreOptions } from "../core/cart/cart.mjs";
+import { CartFormRegister } from "../core/cart/form.mjs";
+import { CartDataFromHandlers } from "../core/cart/server-handlers.mjs";
+import { ComputedRef, PropType, ShallowRef } from "vue";
+
+//#region src/vue/cart.d.ts
+type TypedUseCart<TData extends CartData> = {
+  (): Readonly<ShallowRef<CartState<TData>>>;
+  <S>(selector: (state: CartState<TData>) => S, isEqual?: (a: S, b: S) => boolean): Readonly<ShallowRef<S>>;
+};
+type TypedUseOptionalCart<TData extends CartData> = <S>(selector: (state: CartState<TData>) => S, isEqual?: (a: S, b: S) => boolean) => Readonly<ShallowRef<S | undefined>>;
+type CartInitialData<TData extends CartData = CartData> = CreateCartStoreOptions<TData>["initialData"];
+type TypedCartProvider<TData extends CartData> = {
+  new (): {
+    $props: {
+      initialData?: CartInitialData<TData>;
+    };
+  };
+};
+/** Actions for reconciling cart state after updates outside Standard Actions. */
+type CartActions = Pick<CartStore, "refresh">;
+type TypedCartComponents<TData extends CartData> = {
+  CartProvider: TypedCartProvider<TData>;
+  useCart: TypedUseCart<TData>;
+  useOptionalCart: TypedUseOptionalCart<TData>;
+  useCartActions: typeof useCartActions;
+  useCartForm: typeof useCartForm;
+};
+declare function useCartActions(): CartActions;
+declare function useCartAnalytics(): void;
+declare function useCartForm(): {
+  formProps: (opts?: {
+    beforeSubmit?: (e: Event) => void;
+    afterSubmit?: (e: Event) => void;
+  }) => Record<string, unknown>;
+  register: CartFormRegister;
+  isPending: {
+    initial: ComputedRef<boolean>;
+    lines: (lineId?: string) => boolean;
+  };
+};
+declare function createCartComponents<THandlers>(): TypedCartComponents<CartDataFromHandlers<THandlers>>;
+//#endregion
+export { CartActions, createCartComponents, useCartActions, useCartAnalytics };
+//# sourceMappingURL=cart.d.mts.map

package/dist/development/vue/cart.mjs

@@ -0,0 +1,122 @@
+import { trackCartAnalytics } from "../core/analytics/cart-tracker.mjs";
+import { createCartFormRegister } from "../core/cart/form.mjs";
+import { configureCartEndpoint, createCartStore } from "../core/cart/cart.mjs";
+import { computed, defineComponent, h, inject, onMounted, onScopeDispose, onUnmounted, provide, shallowRef } from "vue";
+
+//#region src/vue/cart.ts
+let cartEndpoint = "/api/cart";
+const CartStoreKey = Symbol("CartStore");
+function getCartEndpoint() {
+	return cartEndpoint;
+}
+function createTypedCartProvider() {
+	return defineComponent((props, { slots }) => {
+		return () => h(CartProvider, { initialData: props.initialData }, slots.default);
+	}, {
+		name: "CartProvider",
+		props: ["initialData"]
+	});
+}
+function useCartStore(composableName = "useCartStore") {
+	const store = inject(CartStoreKey, null);
+	if (!store) throw new Error(`${composableName} must be used inside a <CartProvider>.`);
+	return store;
+}
+function useOptionalCartStore() {
+	return inject(CartStoreKey, null);
+}
+const CartProvider = defineComponent({
+	name: "CartProvider",
+	props: { initialData: {
+		type: Object,
+		default: void 0
+	} },
+	setup(props, { slots }) {
+		const store = createCartStore({ initialData: props.initialData });
+		provide(CartStoreKey, store);
+		onMounted(() => {
+			configureCartEndpoint(cartEndpoint);
+			store.connect();
+		});
+		onUnmounted(() => {
+			store.destroy();
+		});
+		return () => slots.default?.();
+	}
+});
+function useCart(selector, isEqual) {
+	return useCartSelector(useCartStore("useCart"), selector ?? ((state) => state), isEqual);
+}
+function useCartActions() {
+	return { refresh: useCartStore("useCartActions").refresh };
+}
+function useCartAnalytics() {
+	const store = useCartStore("useCartAnalytics");
+	let stopTracking;
+	onMounted(() => {
+		stopTracking = trackCartAnalytics(store);
+	});
+	onScopeDispose(() => stopTracking?.());
+}
+/**
+* Like `useCart`, but returns `undefined` when rendered outside a `<CartProvider>`.
+* @internal
+*/
+function useOptionalCart(selector, isEqual) {
+	const store = useOptionalCartStore();
+	if (!store) return shallowRef(void 0);
+	return useCartSelector(store, selector, isEqual);
+}
+function useCartSelector(store, selector, isEqual) {
+	const selected = shallowRef(selector(store.getState()));
+	onScopeDispose(store.subscribe(() => {
+		const next = selector(store.getState());
+		if (isEqual?.(selected.value, next)) return;
+		selected.value = next;
+	}));
+	return selected;
+}
+function useCartForm() {
+	const store = useCartStore("useCartForm");
+	const loading = useCart((s) => s.loading);
+	const pendingLines = useCart((s) => s.pending.lines);
+	const register = createCartFormRegister();
+	const formProps = (opts) => ({
+		onSubmit: (e) => {
+			opts?.beforeSubmit?.(e);
+			if (e.defaultPrevented) return;
+			e.preventDefault();
+			store.handleFormSubmit(e).catch(() => {});
+			opts?.afterSubmit?.(e);
+		},
+		method: "post",
+		action: cartEndpoint
+	});
+	return {
+		formProps,
+		register,
+		isPending: {
+			initial: computed(() => loading.value),
+			lines: (lineId) => lineId ? pendingLines.value.has(lineId) : pendingLines.value.size > 0
+		}
+	};
+}
+function createCartComponents() {
+	const TypedCartProvider = createTypedCartProvider();
+	const useTypedCart = ((selector, isEqual) => {
+		if (!selector) return useCart();
+		return useCart(selector, isEqual);
+	});
+	const useTypedOptionalCart = ((selector, isEqual) => useOptionalCart(selector, isEqual));
+	return {
+		CartProvider: TypedCartProvider,
+		useCart: useTypedCart,
+		useOptionalCart: useTypedOptionalCart,
+		useCartActions,
+		useCartForm
+	};
+}
+
+//#endregion
+export { createCartComponents, getCartEndpoint, useCartActions, useCartAnalytics, useCartStore };
+//# sourceMappingURL=cart.mjs.map

package/dist/development/vue/cart.mjs.map

@@ -0,0 +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 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\n/** Actions for reconciling cart state after updates outside Standard Actions. */\nexport type CartActions = Pick<CartStore, \"refresh\">;\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\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\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\nexport function useCartActions(): CartActions {\n  const store = useCartStore(\"useCartActions\");\n  return { refresh: store.refresh };\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\nexport function useCartForm(): {\n  formProps: (opts?: {\n    beforeSubmit?: (e: Event) => void;\n    afterSubmit?: (e: Event) => 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: Event) => void;\n    afterSubmit?: (e: Event) => void;\n  }): Record<string, unknown> => ({\n    onSubmit: (e: Event) => {\n      opts?.beforeSubmit?.(e);\n      if (e.defaultPrevented) return;\n      e.preventDefault();\n      store.handleFormSubmit(e as SubmitEvent).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\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":";;;;;;AA6BA,IAAI,eAAe;AAEnB,MAAM,eAAwC,OAAO,YAAY;AAOjE,SAAgB,kBAA0B;AACxC,QAAO;;AAkCT,SAAS,0BAA4E;AAanF,QAZ0B,iBACvB,OAAiD,EAAE,YAAY;AAC9D,eACE,EACE,cACA,EAAE,aAAa,MAAM,aAA4C,EACjE,MAAM,QACP;IAEL;EAAE,MAAM;EAAgB,OAAO,CAAC,cAAc;EAAE,CAG1B;;AAG1B,SAAgB,aAAa,iBAAiB,gBAA2B;CACvE,MAAM,QAAQ,OAAO,cAAc,KAAK;AACxC,KAAI,CAAC,MACH,OAAM,IAAI,MAAM,GAAG,eAAe,wCAAwC;AAE5E,QAAO;;AAGT,SAAS,uBAAyC;AAChD,QAAO,OAAO,cAAc,KAAK;;AAGnC,MAAa,eAAe,gBAAgB;CAC1C,MAAM;CACN,OAAO,EACL,aAAa;EACX,MAAM;EACN,SAAS;EACV,EACF;CACD,MAAM,OAAO,EAAE,SAAS;EACtB,MAAM,QAAQ,gBAAgB,EAAE,aAAa,MAAM,aAAa,CAAC;AACjE,UAAQ,cAAc,MAAM;AAE5B,kBAAgB;AACd,yBAA0B,aAAa;AACvC,SAAM,SAAS;IACf;AAEF,oBAAkB;AAChB,SAAM,SAAS;IACf;AAEF,eAAa,MAAM,WAAW;;CAEjC,CAAC;AAOF,SAAgB,QACd,UACA,SACqC;AAGrC,QAAO,gBAFO,aAAa,UAEC,EADZ,cAAc,UAA4B,QACnB,QAAQ;;AAGjD,SAAgB,iBAA8B;AAE5C,QAAO,EAAE,SADK,aAAa,iBACJ,CAAC,SAAS;;AAGnC,SAAgB,mBAAyB;CACvC,MAAM,QAAQ,aAAa,mBAAmB;CAC9C,IAAI;AAEJ,iBAAgB;AACd,iBAAe,mBAAmB,MAAM;GACxC;AAEF,sBAAqB,gBAAgB,CAAC;;;;;;AAOxC,SAAgB,gBACd,UACA,SACqC;CACrC,MAAM,QAAQ,sBAAsB;AACpC,KAAI,CAAC,MAAO,QAAO,WAA0B,OAAU;AACvD,QAAO,gBAAgB,OAAO,UAAU,QAAQ;;AAGlD,SAAS,gBACP,OACA,UACA,SACyB;CACzB,MAAM,WAAW,WAAc,SAAS,MAAM,UAAU,CAAqB,CAAC;AAQ9E,gBANoB,MAAM,gBAAgB;EACxC,MAAM,OAAO,SAAS,MAAM,UAAU,CAAqB;AAC3D,MAAI,UAAU,SAAS,OAAO,KAAK,CAAE;AACrC,WAAS,QAAQ;GAGO,CAAC;AAE3B,QAAO;;AAGT,SAAgB,cAUd;CACA,MAAM,QAAQ,aAAa,cAAc;CACzC,MAAM,UAAU,SAAS,MAAM,EAAE,QAAQ;CACzC,MAAM,eAAe,SAAS,MAAM,EAAE,QAAQ,MAAM;CACpD,MAAM,WAAW,wBAAwB;CAEzC,MAAM,aAAa,UAGa;EAC9B,WAAW,MAAa;AACtB,SAAM,eAAe,EAAE;AACvB,OAAI,EAAE,iBAAkB;AACxB,KAAE,gBAAgB;AAClB,SAAM,iBAAiB,EAAiB,CAAC,YAAY,GAAG;AACxD,SAAM,cAAc,EAAE;;EAExB,QAAQ;EACR,QAAQ;EACT;AAQD,QAAO;EAAE;EAAW;EAAU;GAL5B,SAAS,eAAe,QAAQ,MAAM;GACtC,QAAQ,WACN,SAAS,aAAa,MAAM,IAAI,OAAO,GAAG,aAAa,MAAM,OAAO;GAGjC;EAAE;;AAG3C,SAAgB,uBAEd;CAEA,MAAM,oBAAoB,yBAAgC;CAE1D,MAAM,iBACJ,UACA,YACG;AACH,MAAI,CAAC,SAAU,QAAO,SAAS;AAC/B,SAAO,QAAwB,UAAU,QAAQ;;CAGnD,MAAM,yBACJ,UACA,YACG,gBAA0B,UAAU,QAAQ;AAEjD,QAAO;EACL,cAAc;EACd,SAAS;EACT,iBAAiB;EACjB;EACA;EACD"}

package/dist/development/vue/collection.d.mts

@@ -0,0 +1,46 @@
+import { CollectionState } from "../core/collection/state.mjs";
+import { CollectionData, CollectionStore } from "../core/collection/collection.mjs";
+import * as _$vue from "vue";
+import { PropType, ShallowRef } from "vue";
+
+//#region src/vue/collection.d.ts
+type CollectionActions = Pick<CollectionStore, "setFilters" | "toggleFilter" | "toggleFilterInput" | "setSortKey" | "setSortByValue" | "reset" | "handleFormSubmit">;
+declare const CollectionProvider: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
+  data: {
+    type: PropType<CollectionData>;
+    required: true;
+  };
+  urlSearch: {
+    type: StringConstructor;
+    default: string;
+  };
+}>, () => _$vue.VNode<_$vue.RendererNode, _$vue.RendererElement, {
+  [key: string]: any;
+}>[] | undefined, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
+  change: (searchString: string) => boolean;
+}, string, _$vue.PublicProps, Readonly<_$vue.ExtractPropTypes<{
+  data: {
+    type: PropType<CollectionData>;
+    required: true;
+  };
+  urlSearch: {
+    type: StringConstructor;
+    default: string;
+  };
+}>> & Readonly<{
+  onChange?: ((searchString: string) => any) | undefined;
+}>, {
+  urlSearch: string;
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
+declare function useCollection(): Readonly<ShallowRef<CollectionState>>;
+declare function useCollection<S>(selector: (state: CollectionState) => S, isEqual?: (a: S, b: S) => boolean): Readonly<ShallowRef<S>>;
+declare function useCollectionActions(): CollectionActions;
+declare function useCollectionForm(): {
+  formProps: (opts?: {
+    beforeSubmit?: (e: Event) => void;
+    afterSubmit?: (e: Event) => void;
+  }) => Record<string, unknown>;
+};
+//#endregion
+export { CollectionActions, CollectionProvider, useCollection, useCollectionActions, useCollectionForm };
+//# sourceMappingURL=collection.d.mts.map

package/dist/development/vue/collection.mjs

@@ -0,0 +1,108 @@
+import { createCollectionStore } from "../core/collection/collection.mjs";
+import { createCollectionReconciler } from "../core/collection/reconciler.mjs";
+import { defineComponent, inject, onUnmounted, provide, shallowRef, toValue, watch } from "vue";
+
+//#region src/vue/collection.ts
+const CollectionStoreKey = Symbol("CollectionStore");
+const CollectionProvider = defineComponent({
+	name: "CollectionProvider",
+	props: {
+		data: {
+			type: Object,
+			required: true
+		},
+		urlSearch: {
+			type: String,
+			default: ""
+		}
+	},
+	emits: { change: (searchString) => typeof searchString === "string" },
+	setup(props, { slots, emit }) {
+		const readUrlSearch = () => toValue(props.urlSearch);
+		const initialStore = createCollectionStore({
+			data: props.data,
+			urlSearch: readUrlSearch()
+		});
+		const storeRef = shallowRef(initialStore);
+		provide(CollectionStoreKey, storeRef);
+		let reconciler = createCollectionReconciler({
+			getStore: () => storeRef.value,
+			readUrlSearch,
+			emitChange: (s) => emit("change", s)
+		}, readUrlSearch());
+		initialStore.setOnBrowseChange(() => reconciler.handleBrowseChange());
+		function resetStore() {
+			storeRef.value.setOnBrowseChange(null);
+			const store = createCollectionStore({
+				data: props.data,
+				urlSearch: readUrlSearch()
+			});
+			storeRef.value = store;
+			reconciler.reset(readUrlSearch());
+			store.setOnBrowseChange(() => reconciler.handleBrowseChange());
+		}
+		watch(() => props.data.handle, (newHandle, oldHandle) => {
+			if (newHandle === oldHandle) return;
+			resetStore();
+		});
+		watch(() => [readUrlSearch(), props.data], () => {
+			reconciler.reconcile(readUrlSearch(), props.data.dataSearch);
+		}, {
+			flush: "sync",
+			immediate: true,
+			deep: true
+		});
+		onUnmounted(() => {
+			storeRef.value.setOnBrowseChange(null);
+		});
+		return () => slots.default?.();
+	}
+});
+function useRequiredStoreRef(composableName) {
+	const storeRef = inject(CollectionStoreKey, null);
+	if (!storeRef) throw new Error(`${composableName} must be used inside a <CollectionProvider>.`);
+	return storeRef;
+}
+function useCollection(selector, isEqual) {
+	const storeRef = useRequiredStoreRef("useCollection");
+	const resolve = selector ?? ((state) => state);
+	const selected = shallowRef(resolve(storeRef.value.getState()));
+	watch(() => storeRef.value, (store, _, onCleanup) => {
+		selected.value = resolve(store.getState());
+		onCleanup(store.subscribe(() => {
+			const next = resolve(store.getState());
+			if (isEqual && selector) {
+				if (isEqual(selected.value, next)) return;
+			}
+			selected.value = next;
+		}));
+	}, { immediate: true });
+	return selected;
+}
+function useCollectionActions() {
+	const storeRef = useRequiredStoreRef("useCollectionActions");
+	return {
+		setFilters: (...args) => storeRef.value.setFilters(...args),
+		toggleFilter: (...args) => storeRef.value.toggleFilter(...args),
+		toggleFilterInput: (...args) => storeRef.value.toggleFilterInput(...args),
+		setSortKey: (...args) => storeRef.value.setSortKey(...args),
+		setSortByValue: (...args) => storeRef.value.setSortByValue(...args),
+		reset: (...args) => storeRef.value.reset(...args),
+		handleFormSubmit: (...args) => storeRef.value.handleFormSubmit(...args)
+	};
+}
+function useCollectionForm() {
+	const actions = useCollectionActions();
+	const formProps = (opts) => ({ onSubmit: (e) => {
+		opts?.beforeSubmit?.(e);
+		if (e.defaultPrevented) return;
+		e.preventDefault();
+		actions.handleFormSubmit(e);
+		opts?.afterSubmit?.(e);
+	} });
+	return { formProps };
+}
+
+//#endregion
+export { CollectionProvider, useCollection, useCollectionActions, useCollectionForm };
+//# sourceMappingURL=collection.mjs.map

package/dist/development/vue/collection.mjs.map

@@ -0,0 +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 CollectionData,\n  type CollectionReconciler,\n  type CollectionStore,\n} from \"../core/collection\";\nimport type { CollectionState } from \"../core/collection\";\n\nexport type { CollectionData };\n\nconst CollectionStoreKey: InjectionKey<ShallowRef<CollectionStore>> = Symbol(\"CollectionStore\");\n\nexport type CollectionActions = Pick<\n  CollectionStore,\n  | \"setFilters\"\n  | \"toggleFilter\"\n  | \"toggleFilterInput\"\n  | \"setSortKey\"\n  | \"setSortByValue\"\n  | \"reset\"\n  | \"handleFormSubmit\"\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\nexport function useCollection(): Readonly<ShallowRef<CollectionState>>;\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\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\nexport function useCollectionForm(): {\n  formProps: (opts?: {\n    beforeSubmit?: (e: Event) => void;\n    afterSubmit?: (e: Event) => void;\n  }) => Record<string, unknown>;\n} {\n  const actions = useCollectionActions();\n\n  const formProps = (opts?: {\n    beforeSubmit?: (e: Event) => void;\n    afterSubmit?: (e: Event) => void;\n  }): Record<string, unknown> => ({\n    onSubmit: (e: Event) => {\n      opts?.beforeSubmit?.(e);\n      if (e.defaultPrevented) return;\n      e.preventDefault();\n      actions.handleFormSubmit(e as SubmitEvent);\n      opts?.afterSubmit?.(e);\n    },\n  });\n\n  return { formProps };\n}\n"],"mappings":"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"}

package/dist/development/vue/index.d.mts

@@ -0,0 +1,11 @@
+import { ShopifyGlobal } from "../globals.mjs";
+import { CollectionData } from "../core/collection/collection.mjs";
+import { ValidProductSelectionResult } from "../core/product/product-form.mjs";
+import { ProductAddToCartProps, ProductFormRegister, ProductMerchandiseIdProps, ProductOptionValueProps, ProductQuantityDefaultProps, ProductQuantityProps } from "../core/product/form.mjs";
+import { CartActions, createCartComponents, useCartActions, useCartAnalytics } from "./cart.mjs";
+import { CollectionActions, CollectionProvider, useCollection, useCollectionActions, useCollectionForm } from "./collection.mjs";
+import { PredictiveSearchActions, 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 };

package/dist/development/vue/index.mjs

@@ -0,0 +1,8 @@
+import { createCartComponents, useCartActions, 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 };

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

@@ -0,0 +1,124 @@
+import { PredictiveSearchLimitScope, PredictiveSearchType, SearchUnavailableProductsType, SearchableField } from "../graphql/generated/storefront-api-types.mjs";
+import { PredictiveSearchData } from "../core/predictive-search/search.mjs";
+import { PredictiveSearchState, PredictiveSearchStore } from "../core/predictive-search/store.mjs";
+import * as _$vue from "vue";
+import { PropType, ShallowRef } from "vue";
+
+//#region src/vue/predictive-search.d.ts
+type PredictiveSearchActions = Pick<PredictiveSearchStore, "search" | "clear">;
+type PredictiveSearchFormPropsOptions = {
+  preventDefault?: boolean;
+  onSubmit?: (event: SubmitEvent, term: string) => void;
+  [key: string]: unknown;
+};
+type PredictiveSearchQueryInputPropsOptions = {
+  onInput?: (event: Event, term: string) => void;
+  [key: string]: unknown;
+};
+type PredictiveSearchFormResult = {
+  formProps(options?: PredictiveSearchFormPropsOptions): Record<string, unknown>;
+  register: (field: "query", options?: PredictiveSearchQueryInputPropsOptions) => Record<string, unknown>;
+};
+declare const PredictiveSearchProvider: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
+  predictiveSearchEndpoint: {
+    type: StringConstructor;
+    default: undefined;
+  };
+  searchAction: {
+    type: StringConstructor;
+    default: undefined;
+  };
+  debounceInMs: {
+    type: NumberConstructor;
+    default: undefined;
+  };
+  minTermLength: {
+    type: NumberConstructor;
+    default: undefined;
+  };
+  fetch: {
+    type: PropType<typeof globalThis.fetch>;
+    default: undefined;
+  };
+  limit: {
+    type: NumberConstructor;
+    default: undefined;
+  };
+  limitScope: {
+    type: PropType<PredictiveSearchLimitScope>;
+    default: undefined;
+  };
+  types: {
+    type: PropType<PredictiveSearchType[]>;
+    default: undefined;
+  };
+  searchableFields: {
+    type: PropType<SearchableField[]>;
+    default: undefined;
+  };
+  unavailableProducts: {
+    type: PropType<SearchUnavailableProductsType>;
+    default: undefined;
+  };
+}>, () => _$vue.VNode<_$vue.RendererNode, _$vue.RendererElement, {
+  [key: string]: any;
+}>[] | undefined, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<_$vue.ExtractPropTypes<{
+  predictiveSearchEndpoint: {
+    type: StringConstructor;
+    default: undefined;
+  };
+  searchAction: {
+    type: StringConstructor;
+    default: undefined;
+  };
+  debounceInMs: {
+    type: NumberConstructor;
+    default: undefined;
+  };
+  minTermLength: {
+    type: NumberConstructor;
+    default: undefined;
+  };
+  fetch: {
+    type: PropType<typeof globalThis.fetch>;
+    default: undefined;
+  };
+  limit: {
+    type: NumberConstructor;
+    default: undefined;
+  };
+  limitScope: {
+    type: PropType<PredictiveSearchLimitScope>;
+    default: undefined;
+  };
+  types: {
+    type: PropType<PredictiveSearchType[]>;
+    default: undefined;
+  };
+  searchableFields: {
+    type: PropType<SearchableField[]>;
+    default: undefined;
+  };
+  unavailableProducts: {
+    type: PropType<SearchUnavailableProductsType>;
+    default: undefined;
+  };
+}>> & Readonly<{}>, {
+  predictiveSearchEndpoint: string;
+  searchAction: string;
+  debounceInMs: number;
+  minTermLength: number;
+  fetch: typeof fetch;
+  limit: number;
+  limitScope: PredictiveSearchLimitScope;
+  types: PredictiveSearchType[];
+  searchableFields: SearchableField[];
+  unavailableProducts: SearchUnavailableProductsType;
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
+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>>;
+declare function usePredictiveSearchActions(): PredictiveSearchActions;
+declare function usePredictiveSearchForm(): PredictiveSearchFormResult;
+//#endregion
+export { PredictiveSearchActions, PredictiveSearchFormPropsOptions, PredictiveSearchFormResult, PredictiveSearchProvider, PredictiveSearchQueryInputPropsOptions, usePredictiveSearch, usePredictiveSearchActions, usePredictiveSearchForm };
+//# sourceMappingURL=predictive-search.d.mts.map