@brytdesigns/shopify-product-info-components 1.1.10 → 3.0.0

package/dist/main/components/index.js

@@ -1,12 +1,5 @@
-import * as productInfo_js from './product-info.js';
-export { productInfo_js as ProductInfo };
-import * as productVariantRender_js from './product-variant-render.js';
-export { productVariantRender_js as ProductVariantRender };
-import * as productOptions_js from './product-options.js';
-export { productOptions_js as ProductOptions };
-import * as productOptionGroup_js from './product-option-group.js';
-export { productOptionGroup_js as ProductOptionGroup };
-import * as productVariantInput_js from './product-variant-input.js';
-export { productVariantInput_js as ProductVariantInput };
-//# sourceMappingURL=index.js.map
-//# sourceMappingURL=index.js.map
+import "./product-info.js";
+import "./product-option-group.js";
+import "./product-options.js";
+import "./product-variant-input.js";
+import "./product-variant-render.js";

package/dist/main/components/product-info.js

@@ -1,39 +1,58 @@
-import { createMemo, createEffect, observable } from 'solid-js';
-import { provideProductContext } from '../hooks/index.js';
-
-const Name = `product-info`;
-const Component = (props, { element }) => {
-  if (!props.product)
-    return console.warn(`${Name}: product attribute is required`);
-  if (!props.product.variants)
-    return console.warn(`${Name}: product attribute needs variants array`);
-  if (!props.product.selected_or_first_available_variant)
-    return console.warn(
-      `${Name}: product attribute needs selected or first available variant object`
-    );
-  provideProductContext(props, element);
-  const url = createMemo(() => {
-    const url2 = new URL(window.location.href);
-    const variant = props?.product?.selected_or_first_available_variant;
-    if (props.product && variant && variant?.id) {
-      url2.searchParams.set("variant", variant.id.toString());
-    } else {
-      url2.searchParams.delete("variant");
-    }
-    return url2;
-  });
-  function subscribe(cb) {
-    return observable(() => props.product).subscribe(cb).unsubscribe;
-  }
-  Object.assign(element, {
-    subscribe
-  });
-  createEffect(() => {
-    if (!props.isProductPage) return;
-    window.history.replaceState(null, "", url());
-  });
+import { provideProductContext } from "../hooks/useProduct.js";
+import "../hooks/index.js";
+import { announce, createGuardedEffect } from "@brytdesigns/web-component-core/utils";
+import { createMemo, createRoot, untrack } from "solid-js";
+//#region src/components/product-info.ts
+var Name = `product-info`;
+var Component = (props, { element }) => {
+	const product = untrack(() => props.product);
+	if (!product) return console.warn(`${Name}: product attribute is required`);
+	if (!product.variants) return console.warn(`${Name}: product attribute needs variants array`);
+	if (!product.selected_or_first_available_variant) return console.warn(`${Name}: product attribute needs selected or first available variant object`);
+	provideProductContext(props, element);
+	const url = createMemo(() => {
+		const url = new URL(window.location.href);
+		const variant = props?.product?.selected_or_first_available_variant;
+		if (props.product && variant && variant?.id) url.searchParams.set("variant", variant.id.toString());
+		else url.searchParams.delete("variant");
+		return url;
+	});
+	function subscribe(cb) {
+		return createRoot((dispose) => {
+			createGuardedEffect(() => props.product, (product) => cb(product));
+			return dispose;
+		});
+	}
+	Object.assign(element, { subscribe });
+	/**
+	* Choosing a variant rewrites price, availability and whatever else the
+	* theme renders from it — silently, as far as assistive tech is concerned.
+	*
+	* The radio or select announces its own new value, because it is a native
+	* control doing its job. Nothing announces what that selection *did*, which
+	* is the part a shopper actually needs: an option that turned out to be
+	* sold out reads identically to one that did not.
+	*/
+	createGuardedEffect(() => props.product?.selected_or_first_available_variant, (variant, previous) => {
+		if (previous === void 0 || !variant) return;
+		if (previous && previous.id === variant.id) return;
+		const described = variant.title ?? variant.options.join(", ");
+		const { availableLabel, unavailableLabel } = untrack(() => ({
+			availableLabel: props.availableLabel,
+			unavailableLabel: props.unavailableLabel
+		}));
+		const availability = typeof variant.available === "boolean" ? variant.available ? availableLabel : unavailableLabel : "";
+		announce([described, availability].filter(Boolean).join(". "));
+	});
+	createGuardedEffect(() => ({
+		isProductPage: props.isProductPage,
+		url: url()
+	}), ({ isProductPage, url }) => {
+		if (!isProductPage) return;
+		window.history.replaceState(null, "", url);
+	});
 };
-
+//#endregion
 export { Component, Name };
-//# sourceMappingURL=product-info.js.map
+
 //# sourceMappingURL=product-info.js.map

package/dist/main/components/product-info.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/product-info.ts"],"names":["url"],"mappings":";;;AAaO,MAAM,IAAO,GAAA,CAAA,YAAA;AAEb,MAAM,SAAyC,GAAA,CAAC,KAAO,EAAA,EAAE,SAAc,KAAA;AAC5E,EAAA,IAAI,CAAC,KAAM,CAAA,OAAA;AACT,IAAA,OAAO,OAAQ,CAAA,IAAA,CAAK,CAAG,EAAA,IAAI,CAAiC,+BAAA,CAAA,CAAA;AAC9D,EAAI,IAAA,CAAC,MAAM,OAAQ,CAAA,QAAA;AACjB,IAAA,OAAO,OAAQ,CAAA,IAAA,CAAK,CAAG,EAAA,IAAI,CAA0C,wCAAA,CAAA,CAAA;AACvE,EAAI,IAAA,CAAC,MAAM,OAAQ,CAAA,mCAAA;AACjB,IAAA,OAAO,OAAQ,CAAA,IAAA;AAAA,MACb,GAAG,IAAI,CAAA,oEAAA;AAAA,KACT;AACF,EAAA,qBAAA,CAAsB,OAAc,OAAO,CAAA;AAE3C,EAAM,MAAA,GAAA,GAAM,WAAW,MAAM;AAC3B,IAAA,MAAMA,IAAM,GAAA,IAAI,GAAI,CAAA,MAAA,CAAO,SAAS,IAAI,CAAA;AACxC,IAAM,MAAA,OAAA,GAAU,OAAO,OAAS,EAAA,mCAAA;AAChC,IAAA,IAAI,KAAM,CAAA,OAAA,IAAW,OAAW,IAAA,OAAA,EAAS,EAAI,EAAA;AAC3C,MAAAA,KAAI,YAAa,CAAA,GAAA,CAAI,WAAW,OAAQ,CAAA,EAAA,CAAG,UAAU,CAAA;AAAA,KAChD,MAAA;AACL,MAAAA,IAAAA,CAAI,YAAa,CAAA,MAAA,CAAO,SAAS,CAAA;AAAA;AAEnC,IAAOA,OAAAA,IAAAA;AAAA,GACR,CAAA;AAED,EAAA,SAAS,UAAU,EAA4C,EAAA;AAC7D,IAAA,OAAO,WAAW,MAAM,KAAA,CAAM,OAAO,CAAE,CAAA,SAAA,CAAU,EAAE,CAAE,CAAA,WAAA;AAAA;AAGvD,EAAA,MAAA,CAAO,OAAO,OAAS,EAAA;AAAA,IACrB;AAAA,GACD,CAAA;AAED,EAAA,YAAA,CAAa,MAAM;AACjB,IAAI,IAAA,CAAC,MAAM,aAAe,EAAA;AAC1B,IAAA,MAAA,CAAO,OAAQ,CAAA,YAAA,CAAa,IAAM,EAAA,EAAA,EAAI,KAAK,CAAA;AAAA,GAC5C,CAAA;AACH","file":"product-info.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\n\nimport { createEffect, createMemo, observable } from \"solid-js\";\n\nimport { provideProductContext } from \"../hooks/index.js\";\n\nimport type { Product } from \"../types.js\";\n\nexport type Props = {\n  product?: Product;\n  isProductPage?: boolean;\n};\n\nexport const Name = `product-info`;\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n  if (!props.product)\n    return console.warn(`${Name}: product attribute is required`);\n  if (!props.product.variants)\n    return console.warn(`${Name}: product attribute needs variants array`);\n  if (!props.product.selected_or_first_available_variant)\n    return console.warn(\n      `${Name}: product attribute needs selected or first available variant object`,\n    );\n  provideProductContext(props as any, element);\n\n  const url = createMemo(() => {\n    const url = new URL(window.location.href);\n    const variant = props?.product?.selected_or_first_available_variant;\n    if (props.product && variant && variant?.id) {\n      url.searchParams.set(\"variant\", variant.id.toString());\n    } else {\n      url.searchParams.delete(\"variant\");\n    }\n    return url;\n  });\n\n  function subscribe(cb: (product: Product | undefined) => void) {\n    return observable(() => props.product).subscribe(cb).unsubscribe;\n  }\n\n  Object.assign(element, {\n    subscribe,\n  });\n\n  createEffect(() => {\n    if (!props.isProductPage) return;\n    window.history.replaceState(null, \"\", url());\n  });\n};\n"]}
+{"version":3,"file":"product-info.js","names":[],"sources":["../../../src/components/product-info.ts"],"sourcesContent":["import {\n\tannounce,\n\ttype CorrectComponentType,\n\tcreateGuardedEffect,\n} from \"@brytdesigns/web-component-core/utils\";\n\nimport { createMemo, createRoot, untrack } from \"solid-js\";\n\nimport { provideProductContext } from \"../hooks/index.js\";\n\nimport type { Product } from \"../types.js\";\n\nexport type Props = {\n\tproduct?: Product;\n\tisProductPage?: boolean;\n\t/** Appended to the announcement when the chosen variant is in stock. */\n\tavailableLabel: string;\n\t/** Appended when it is not. */\n\tunavailableLabel: string;\n};\n\nexport const Name = `product-info`;\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n\t// One-time validation of the mounting attributes. Read into a local so the\n\t// snapshot is explicit and TypeScript can narrow it — an `untrack` closure\n\t// around each check would defeat narrowing.\n\tconst product = untrack(() => props.product);\n\tif (!product) return console.warn(`${Name}: product attribute is required`);\n\tif (!product.variants)\n\t\treturn console.warn(`${Name}: product attribute needs variants array`);\n\tif (!product.selected_or_first_available_variant)\n\t\treturn console.warn(\n\t\t\t`${Name}: product attribute needs selected or first available variant object`,\n\t\t);\n\tprovideProductContext(props as any, element);\n\n\tconst url = createMemo(() => {\n\t\tconst url = new URL(window.location.href);\n\t\tconst variant = props?.product?.selected_or_first_available_variant;\n\t\tif (props.product && variant && variant?.id) {\n\t\t\turl.searchParams.set(\"variant\", variant.id.toString());\n\t\t} else {\n\t\t\turl.searchParams.delete(\"variant\");\n\t\t}\n\t\treturn url;\n\t});\n\n\tfunction subscribe(cb: (product: Product | undefined) => void) {\n\t\t// `observable` is gone in v2; pushing a signal out to an external\n\t\t// subscriber is an effect in its own root, with the disposer as the\n\t\t// unsubscribe. The public signature is unchanged.\n\t\treturn createRoot((dispose) => {\n\t\t\tcreateGuardedEffect(\n\t\t\t\t() => props.product,\n\t\t\t\t(product) => cb(product),\n\t\t\t);\n\t\t\treturn dispose;\n\t\t});\n\t}\n\n\tObject.assign(element, {\n\t\tsubscribe,\n\t});\n\n\t/**\n\t * Choosing a variant rewrites price, availability and whatever else the\n\t * theme renders from it — silently, as far as assistive tech is concerned.\n\t *\n\t * The radio or select announces its own new value, because it is a native\n\t * control doing its job. Nothing announces what that selection *did*, which\n\t * is the part a shopper actually needs: an option that turned out to be\n\t * sold out reads identically to one that did not.\n\t */\n\tcreateGuardedEffect(\n\t\t() => props.product?.selected_or_first_available_variant,\n\t\t(variant, previous) => {\n\t\t\t// Silent on the first run. The page has only just loaded and the\n\t\t\t// reader is about to encounter all of this in order anyway.\n\t\t\tif (previous === undefined || !variant) return;\n\t\t\tif (previous && previous.id === variant.id) return;\n\n\t\t\tconst described = variant.title ?? variant.options.join(\", \");\n\t\t\t// Read when the announcement is made, deliberately: the labels are\n\t\t\t// copy, and the current wording is the right wording. `untrack`\n\t\t\t// states that — the apply phase is not a tracking scope, so a bare\n\t\t\t// read here is one Solid reports and nobody has reviewed.\n\t\t\tconst { availableLabel, unavailableLabel } = untrack(() => ({\n\t\t\t\tavailableLabel: props.availableLabel,\n\t\t\t\tunavailableLabel: props.unavailableLabel,\n\t\t\t}));\n\t\t\tconst availability =\n\t\t\t\ttypeof variant.available === \"boolean\"\n\t\t\t\t\t? variant.available\n\t\t\t\t\t\t? availableLabel\n\t\t\t\t\t\t: unavailableLabel\n\t\t\t\t\t: \"\";\n\t\t\tannounce([described, availability].filter(Boolean).join(\". \"));\n\t\t},\n\t);\n\n\tcreateGuardedEffect(\n\t\t() => ({ isProductPage: props.isProductPage, url: url() }),\n\t\t({ isProductPage, url }) => {\n\t\t\tif (!isProductPage) return;\n\t\t\twindow.history.replaceState(null, \"\", url);\n\t\t},\n\t);\n};\n"],"mappings":";;;;;AAqBA,IAAa,OAAO;AAEpB,IAAa,aAA0C,OAAO,EAAE,cAAc;CAI7E,MAAM,UAAU,cAAc,MAAM,OAAO;CAC3C,IAAI,CAAC,SAAS,OAAO,QAAQ,KAAK,GAAG,KAAK,gCAAgC;CAC1E,IAAI,CAAC,QAAQ,UACZ,OAAO,QAAQ,KAAK,GAAG,KAAK,yCAAyC;CACtE,IAAI,CAAC,QAAQ,qCACZ,OAAO,QAAQ,KACd,GAAG,KAAK,qEACT;CACD,sBAAsB,OAAc,OAAO;CAE3C,MAAM,MAAM,iBAAiB;EAC5B,MAAM,MAAM,IAAI,IAAI,OAAO,SAAS,IAAI;EACxC,MAAM,UAAU,OAAO,SAAS;EAChC,IAAI,MAAM,WAAW,WAAW,SAAS,IACxC,IAAI,aAAa,IAAI,WAAW,QAAQ,GAAG,SAAS,CAAC;OAErD,IAAI,aAAa,OAAO,SAAS;EAElC,OAAO;CACR,CAAC;CAED,SAAS,UAAU,IAA4C;EAI9D,OAAO,YAAY,YAAY;GAC9B,0BACO,MAAM,UACX,YAAY,GAAG,OAAO,CACxB;GACA,OAAO;EACR,CAAC;CACF;CAEA,OAAO,OAAO,SAAS,EACtB,UACD,CAAC;;;;;;;;;;CAWD,0BACO,MAAM,SAAS,sCACpB,SAAS,aAAa;EAGtB,IAAI,aAAa,KAAA,KAAa,CAAC,SAAS;EACxC,IAAI,YAAY,SAAS,OAAO,QAAQ,IAAI;EAE5C,MAAM,YAAY,QAAQ,SAAS,QAAQ,QAAQ,KAAK,IAAI;EAK5D,MAAM,EAAE,gBAAgB,qBAAqB,eAAe;GAC3D,gBAAgB,MAAM;GACtB,kBAAkB,MAAM;EACzB,EAAE;EACF,MAAM,eACL,OAAO,QAAQ,cAAc,YAC1B,QAAQ,YACP,iBACA,mBACD;EACJ,SAAS,CAAC,WAAW,YAAY,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,IAAI,CAAC;CAC9D,CACD;CAEA,2BACQ;EAAE,eAAe,MAAM;EAAe,KAAK,IAAI;CAAE,KACvD,EAAE,eAAe,UAAU;EAC3B,IAAI,CAAC,eAAe;EACpB,OAAO,QAAQ,aAAa,MAAM,IAAI,GAAG;CAC1C,CACD;AACD"}

package/dist/main/components/product-option-group.js

@@ -1,69 +1,56 @@
-import { createEffect, on, onCleanup } from 'solid-js';
-import { useProductOptions } from '../hooks/index.js';
-
-const Name = `product-option-group`;
-const Component = (props, { element }) => {
-  const [context, methods] = useProductOptions(element);
-  createEffect(
-    on(
-      () => ({
-        selectedOption: context.selectedOptions[props.position - 1],
-        position: props.position,
-        name: props.name,
-        inputType: props.inputType
-      }),
-      ({ selectedOption, position, name, inputType }) => {
-        if (inputType !== "radio" && inputType !== "select") return;
-        const optionName = `${name}-${position}`;
-        if (inputType === "radio") {
-          const inputs = element.querySelectorAll(
-            `input[name="${optionName}"]`
-          );
-          inputs.forEach((input) => {
-            const prevValue = input.checked;
-            if (input.value === selectedOption) input.checked = true;
-            else input.checked = false;
-            if (prevValue !== input.checked) {
-              input.dispatchEvent(new Event("change", { bubbles: true }));
-            }
-          });
-          return;
-        }
-        const select = element.querySelector(
-          `select[name="${optionName}"]`
-        );
-        if (!select || !selectedOption) return;
-        select.value = selectedOption;
-        select.dispatchEvent(new Event("change", { bubbles: true }));
-      }
-    )
-  );
-  createEffect(() => {
-    const position = props.position;
-    function handleChange(event) {
-      const target = event.target;
-      if (!target) return;
-      const selectedOption = target.value;
-      if (context.selectedOptions[position - 1] === selectedOption) return;
-      element.dispatchEvent(
-        new CustomEvent("option-updated", {
-          detail: {
-            group: props.name,
-            position,
-            selectedOption
-          },
-          bubbles: true
-        })
-      );
-      methods.options.updateOption(selectedOption, position - 1);
-    }
-    element.addEventListener("change", handleChange);
-    return onCleanup(() => {
-      element.removeEventListener("change", handleChange);
-    });
-  });
+import { useProductOptions } from "../hooks/useProductOptions.js";
+import "../hooks/index.js";
+import { createGuardedEffect } from "@brytdesigns/web-component-core/utils";
+//#region src/components/product-option-group.ts
+var Name = `product-option-group`;
+var Component = (props, { element }) => {
+	const [context, methods] = useProductOptions(element);
+	createGuardedEffect(() => ({
+		selectedOption: context.selectedOptions[props.position - 1],
+		position: props.position,
+		name: props.name,
+		inputType: props.inputType
+	}), ({ selectedOption, position, name, inputType }) => {
+		if (inputType !== "radio" && inputType !== "select") return;
+		const optionName = `${name}-${position}`;
+		if (inputType === "radio") {
+			element.querySelectorAll(`input[name="${optionName}"]`).forEach((input) => {
+				const prevValue = input.checked;
+				if (input.value === selectedOption) input.checked = true;
+				else input.checked = false;
+				if (prevValue !== input.checked && input.checked) input.dispatchEvent(new Event("change", { bubbles: true }));
+			});
+			return;
+		}
+		const select = element.querySelector(`select[name="${optionName}"]`);
+		if (!select || !selectedOption) return;
+		select.value = selectedOption;
+		select.dispatchEvent(new Event("change", { bubbles: true }));
+	});
+	createGuardedEffect(() => props.position, (position) => {
+		function handleChange(event) {
+			const target = event.target;
+			if (!target) return;
+			if (target.type === "radio" && !target.checked) return;
+			const selectedOption = target.value;
+			if (context.selectedOptions[position - 1] === selectedOption) return;
+			element.dispatchEvent(new CustomEvent("option-updated", {
+				detail: {
+					group: props.name,
+					position,
+					selectedOption
+				},
+				bubbles: true
+			}));
+			methods.options.updateOption(selectedOption, position - 1);
+		}
+		element.addEventListener("change", handleChange);
+		return () => {
+			element.removeEventListener("change", handleChange);
+		};
+	});
 };
-
+//#endregion
 export { Component, Name };
-//# sourceMappingURL=product-option-group.js.map
+
 //# sourceMappingURL=product-option-group.js.map

package/dist/main/components/product-option-group.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/product-option-group.ts"],"names":[],"mappings":";;;AAYO,MAAM,IAAO,GAAA,CAAA,oBAAA;AAEb,MAAM,SAAyC,GAAA,CAAC,KAAO,EAAA,EAAE,SAAc,KAAA;AAC5E,EAAA,MAAM,CAAC,OAAA,EAAS,OAAO,CAAA,GAAI,kBAAkB,OAAO,CAAA;AAEpD,EAAA,YAAA;AAAA,IACE,EAAA;AAAA,MACE,OAAO;AAAA,QACL,cAAgB,EAAA,OAAA,CAAQ,eAAgB,CAAA,KAAA,CAAM,WAAW,CAAC,CAAA;AAAA,QAC1D,UAAU,KAAM,CAAA,QAAA;AAAA,QAChB,MAAM,KAAM,CAAA,IAAA;AAAA,QACZ,WAAW,KAAM,CAAA;AAAA,OACnB,CAAA;AAAA,MACA,CAAC,EAAE,cAAA,EAAgB,QAAU,EAAA,IAAA,EAAM,WAAgB,KAAA;AACjD,QAAI,IAAA,SAAA,KAAc,OAAW,IAAA,SAAA,KAAc,QAAU,EAAA;AAErD,QAAA,MAAM,UAAa,GAAA,CAAA,EAAG,IAAI,CAAA,CAAA,EAAI,QAAQ,CAAA,CAAA;AAEtC,QAAA,IAAI,cAAc,OAAS,EAAA;AACzB,UAAA,MAAM,SAAS,OAAQ,CAAA,gBAAA;AAAA,YACrB,eAAe,UAAU,CAAA,EAAA;AAAA,WAC3B;AACA,UAAO,MAAA,CAAA,OAAA,CAAQ,CAAC,KAAU,KAAA;AACxB,YAAA,MAAM,YAAY,KAAM,CAAA,OAAA;AACxB,YAAA,IAAI,KAAM,CAAA,KAAA,KAAU,cAAgB,EAAA,KAAA,CAAM,OAAU,GAAA,IAAA;AAAA,uBACzC,OAAU,GAAA,KAAA;AACrB,YAAI,IAAA,SAAA,KAAc,MAAM,OAAS,EAAA;AAC/B,cAAM,KAAA,CAAA,aAAA,CAAc,IAAI,KAAM,CAAA,QAAA,EAAU,EAAE,OAAS,EAAA,IAAA,EAAM,CAAC,CAAA;AAAA;AAC5D,WACD,CAAA;AACD,UAAA;AAAA;AAGF,QAAA,MAAM,SAAS,OAAQ,CAAA,aAAA;AAAA,UACrB,gBAAgB,UAAU,CAAA,EAAA;AAAA,SAC5B;AACA,QAAI,IAAA,CAAC,MAAU,IAAA,CAAC,cAAgB,EAAA;AAChC,QAAA,MAAA,CAAO,KAAQ,GAAA,cAAA;AACf,QAAO,MAAA,CAAA,aAAA,CAAc,IAAI,KAAM,CAAA,QAAA,EAAU,EAAE,OAAS,EAAA,IAAA,EAAM,CAAC,CAAA;AAAA;AAC7D;AACF,GACF;AAEA,EAAA,YAAA,CAAa,MAAM;AACjB,IAAA,MAAM,WAAW,KAAM,CAAA,QAAA;AAEvB,IAAA,SAAS,aAAa,KAAc,EAAA;AAClC,MAAA,MAAM,SAAS,KAAM,CAAA,MAAA;AACrB,MAAA,IAAI,CAAC,MAAQ,EAAA;AACb,MAAA,MAAM,iBAAiB,MAAO,CAAA,KAAA;AAC9B,MAAA,IAAI,OAAQ,CAAA,eAAA,CAAgB,QAAW,GAAA,CAAC,MAAM,cAAgB,EAAA;AAE9D,MAAQ,OAAA,CAAA,aAAA;AAAA,QACN,IAAI,YAAY,gBAAkB,EAAA;AAAA,UAChC,MAAQ,EAAA;AAAA,YACN,OAAO,KAAM,CAAA,IAAA;AAAA,YACb,QAAA;AAAA,YACA;AAAA,WACF;AAAA,UACA,OAAS,EAAA;AAAA,SACV;AAAA,OACH;AAEA,MAAA,OAAA,CAAQ,OAAQ,CAAA,YAAA,CAAa,cAAgB,EAAA,QAAA,GAAW,CAAC,CAAA;AAAA;AAG3D,IAAQ,OAAA,CAAA,gBAAA,CAAiB,UAAU,YAAY,CAAA;AAE/C,IAAA,OAAO,UAAU,MAAM;AACrB,MAAQ,OAAA,CAAA,mBAAA,CAAoB,UAAU,YAAY,CAAA;AAAA,KACnD,CAAA;AAAA,GACF,CAAA;AACH","file":"product-option-group.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\n\nimport { createEffect, on, onCleanup } from \"solid-js\";\n\nimport { useProductOptions } from \"../hooks/index.js\";\n\nexport type Props = {\n  position: number;\n  name: string;\n  inputType: \"radio\" | \"select\";\n};\n\nexport const Name = `product-option-group`;\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n  const [context, methods] = useProductOptions(element);\n\n  createEffect(\n    on(\n      () => ({\n        selectedOption: context.selectedOptions[props.position - 1],\n        position: props.position,\n        name: props.name,\n        inputType: props.inputType,\n      }),\n      ({ selectedOption, position, name, inputType }) => {\n        if (inputType !== \"radio\" && inputType !== \"select\") return;\n\n        const optionName = `${name}-${position}`;\n\n        if (inputType === \"radio\") {\n          const inputs = element.querySelectorAll<HTMLInputElement>(\n            `input[name=\"${optionName}\"]`,\n          );\n          inputs.forEach((input) => {\n            const prevValue = input.checked;\n            if (input.value === selectedOption) input.checked = true;\n            else input.checked = false;\n            if (prevValue !== input.checked) {\n              input.dispatchEvent(new Event(\"change\", { bubbles: true }));\n            }\n          });\n          return;\n        }\n\n        const select = element.querySelector<HTMLSelectElement>(\n          `select[name=\"${optionName}\"]`,\n        );\n        if (!select || !selectedOption) return;\n        select.value = selectedOption;\n        select.dispatchEvent(new Event(\"change\", { bubbles: true }));\n      },\n    ),\n  );\n\n  createEffect(() => {\n    const position = props.position;\n\n    function handleChange(event: Event) {\n      const target = event.target as HTMLInputElement;\n      if (!target) return;\n      const selectedOption = target.value;\n      if (context.selectedOptions[position - 1] === selectedOption) return;\n\n      element.dispatchEvent(\n        new CustomEvent(\"option-updated\", {\n          detail: {\n            group: props.name,\n            position: position,\n            selectedOption,\n          },\n          bubbles: true,\n        }),\n      );\n\n      methods.options.updateOption(selectedOption, position - 1);\n    }\n\n    element.addEventListener(\"change\", handleChange);\n\n    return onCleanup(() => {\n      element.removeEventListener(\"change\", handleChange);\n    });\n  });\n};\n"]}
+{"version":3,"file":"product-option-group.js","names":[],"sources":["../../../src/components/product-option-group.ts"],"sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\nimport { createGuardedEffect } from \"@brytdesigns/web-component-core/utils\";\n\nimport { useProductOptions } from \"../hooks/index.js\";\n\nexport type Props = {\n\tposition: number;\n\tname: string;\n\tinputType: \"radio\" | \"select\";\n};\n\nexport const Name = `product-option-group`;\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n\tconst [context, methods] = useProductOptions(element);\n\n\tcreateGuardedEffect(\n\t\t() => ({\n\t\t\tselectedOption: context.selectedOptions[props.position - 1],\n\t\t\tposition: props.position,\n\t\t\tname: props.name,\n\t\t\tinputType: props.inputType,\n\t\t}),\n\t\t({ selectedOption, position, name, inputType }) => {\n\t\t\tif (inputType !== \"radio\" && inputType !== \"select\") return;\n\n\t\t\tconst optionName = `${name}-${position}`;\n\n\t\t\tif (inputType === \"radio\") {\n\t\t\t\tconst inputs = element.querySelectorAll<HTMLInputElement>(\n\t\t\t\t\t`input[name=\"${optionName}\"]`,\n\t\t\t\t);\n\t\t\t\tinputs.forEach((input) => {\n\t\t\t\t\tconst prevValue = input.checked;\n\t\t\t\t\tif (input.value === selectedOption) input.checked = true;\n\t\t\t\t\telse input.checked = false;\n\t\t\t\t\t// Only the input that became CHECKED announces itself.\n\t\t\t\t\t//\n\t\t\t\t\t// This used to fire on any input whose state flipped, which\n\t\t\t\t\t// meant the radio being *de*selected dispatched `change` too.\n\t\t\t\t\t// The browser never does that - clicking B fires `change` on B\n\t\t\t\t\t// alone - and `handleChange` below reads `target.value` off\n\t\t\t\t\t// whatever fired, so the deselected option's value was fed\n\t\t\t\t\t// straight back into `updateOption` and the group could\n\t\t\t\t\t// oscillate between two options.\n\t\t\t\t\tif (prevValue !== input.checked && input.checked) {\n\t\t\t\t\t\tinput.dispatchEvent(new Event(\"change\", { bubbles: true }));\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst select = element.querySelector<HTMLSelectElement>(\n\t\t\t\t`select[name=\"${optionName}\"]`,\n\t\t\t);\n\t\t\tif (!select || !selectedOption) return;\n\t\t\tselect.value = selectedOption;\n\t\t\tselect.dispatchEvent(new Event(\"change\", { bubbles: true }));\n\t\t},\n\t);\n\n\tcreateGuardedEffect(\n\t\t() => props.position,\n\t\t(position) => {\n\t\t\tfunction handleChange(event: Event) {\n\t\t\t\tconst target = event.target as HTMLInputElement;\n\t\t\t\tif (!target) return;\n\t\t\t\t// A radio that is not checked is not a selection. Reading `value`\n\t\t\t\t// off one treats the option the shopper just moved *away* from as\n\t\t\t\t// the new choice - the other half of the oscillation guarded\n\t\t\t\t// against above, and the half that also covers a `change` this\n\t\t\t\t// component did not dispatch.\n\t\t\t\tif (target.type === \"radio\" && !target.checked) return;\n\t\t\t\tconst selectedOption = target.value;\n\t\t\t\tif (context.selectedOptions[position - 1] === selectedOption) return;\n\n\t\t\t\telement.dispatchEvent(\n\t\t\t\t\tnew CustomEvent(\"option-updated\", {\n\t\t\t\t\t\tdetail: {\n\t\t\t\t\t\t\tgroup: props.name,\n\t\t\t\t\t\t\tposition: position,\n\t\t\t\t\t\t\tselectedOption,\n\t\t\t\t\t\t},\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t}),\n\t\t\t\t);\n\n\t\t\t\tmethods.options.updateOption(selectedOption, position - 1);\n\t\t\t}\n\n\t\t\telement.addEventListener(\"change\", handleChange);\n\n\t\t\treturn () => {\n\t\t\t\telement.removeEventListener(\"change\", handleChange);\n\t\t\t};\n\t\t},\n\t);\n};\n"],"mappings":";;;;AAWA,IAAa,OAAO;AAEpB,IAAa,aAA0C,OAAO,EAAE,cAAc;CAC7E,MAAM,CAAC,SAAS,WAAW,kBAAkB,OAAO;CAEpD,2BACQ;EACN,gBAAgB,QAAQ,gBAAgB,MAAM,WAAW;EACzD,UAAU,MAAM;EAChB,MAAM,MAAM;EACZ,WAAW,MAAM;CAClB,KACC,EAAE,gBAAgB,UAAU,MAAM,gBAAgB;EAClD,IAAI,cAAc,WAAW,cAAc,UAAU;EAErD,MAAM,aAAa,GAAG,KAAK,GAAG;EAE9B,IAAI,cAAc,SAAS;GAI1B,QAHuB,iBACtB,eAAe,WAAW,GAE3B,CAAA,CAAO,SAAS,UAAU;IACzB,MAAM,YAAY,MAAM;IACxB,IAAI,MAAM,UAAU,gBAAgB,MAAM,UAAU;SAC/C,MAAM,UAAU;IAUrB,IAAI,cAAc,MAAM,WAAW,MAAM,SACxC,MAAM,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,KAAK,CAAC,CAAC;GAE5D,CAAC;GACD;EACD;EAEA,MAAM,SAAS,QAAQ,cACtB,gBAAgB,WAAW,GAC5B;EACA,IAAI,CAAC,UAAU,CAAC,gBAAgB;EAChC,OAAO,QAAQ;EACf,OAAO,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,KAAK,CAAC,CAAC;CAC5D,CACD;CAEA,0BACO,MAAM,WACX,aAAa;EACb,SAAS,aAAa,OAAc;GACnC,MAAM,SAAS,MAAM;GACrB,IAAI,CAAC,QAAQ;GAMb,IAAI,OAAO,SAAS,WAAW,CAAC,OAAO,SAAS;GAChD,MAAM,iBAAiB,OAAO;GAC9B,IAAI,QAAQ,gBAAgB,WAAW,OAAO,gBAAgB;GAE9D,QAAQ,cACP,IAAI,YAAY,kBAAkB;IACjC,QAAQ;KACP,OAAO,MAAM;KACH;KACV;IACD;IACA,SAAS;GACV,CAAC,CACF;GAEA,QAAQ,QAAQ,aAAa,gBAAgB,WAAW,CAAC;EAC1D;EAEA,QAAQ,iBAAiB,UAAU,YAAY;EAE/C,aAAa;GACZ,QAAQ,oBAAoB,UAAU,YAAY;EACnD;CACD,CACD;AACD"}

package/dist/main/components/product-options.js

@@ -1,12 +1,13 @@
-import { provideProductOptionsContext } from '../hooks/index.js';
-
-const Name = `product-options`;
-const Component = (props, { element }) => {
-  if (!props.selectedOptions)
-    return console.warn(`${Name}: selected-options attribute is required`);
-  provideProductOptionsContext(props, element);
+import { provideProductOptionsContext } from "../hooks/useProductOptions.js";
+import "../hooks/index.js";
+import { untrack } from "solid-js";
+//#region src/components/product-options.ts
+var Name = `product-options`;
+var Component = (props, { element }) => {
+	if (untrack(() => !props.selectedOptions)) return console.warn(`${Name}: selected-options attribute is required`);
+	provideProductOptionsContext(props, element);
 };
-
+//#endregion
 export { Component, Name };
-//# sourceMappingURL=product-options.js.map
+
 //# sourceMappingURL=product-options.js.map

package/dist/main/components/product-options.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/product-options.ts"],"names":[],"mappings":";;AAOO,MAAM,IAAO,GAAA,CAAA,eAAA;AAEb,MAAM,SAAyC,GAAA,CAAC,KAAO,EAAA,EAAE,SAAc,KAAA;AAC5E,EAAA,IAAI,CAAC,KAAM,CAAA,eAAA;AACT,IAAA,OAAO,OAAQ,CAAA,IAAA,CAAK,CAAG,EAAA,IAAI,CAA0C,wCAAA,CAAA,CAAA;AACvE,EAAA,4BAAA,CAA6B,OAAO,OAAO,CAAA;AAC7C","file":"product-options.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\nimport { provideProductOptionsContext } from \"../hooks/index.js\";\n\nexport type Props = {\n  selectedOptions: string[];\n};\n\nexport const Name = `product-options`;\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n  if (!props.selectedOptions)\n    return console.warn(`${Name}: selected-options attribute is required`);\n  provideProductOptionsContext(props, element);\n};\n"]}
+{"version":3,"file":"product-options.js","names":[],"sources":["../../../src/components/product-options.ts"],"sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\nimport { untrack } from \"solid-js\";\nimport { provideProductOptionsContext } from \"../hooks/index.js\";\n\nexport type Props = {\n\tselectedOptions: string[];\n};\n\nexport const Name = `product-options`;\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n\tif (untrack(() => !props.selectedOptions))\n\t\treturn console.warn(`${Name}: selected-options attribute is required`);\n\tprovideProductOptionsContext(props, element);\n};\n"],"mappings":";;;;AAQA,IAAa,OAAO;AAEpB,IAAa,aAA0C,OAAO,EAAE,cAAc;CAC7E,IAAI,cAAc,CAAC,MAAM,eAAe,GACvC,OAAO,QAAQ,KAAK,GAAG,KAAK,yCAAyC;CACtE,6BAA6B,OAAO,OAAO;AAC5C"}

package/dist/main/components/product-variant-input.js

@@ -1,49 +1,52 @@
-import { createEffect, onCleanup } from 'solid-js';
-import { useProduct, useProductOptions } from '../hooks/index.js';
-
-const Name = `product-variant-input`;
-const Component = (props, { element }) => {
-  const [productContext, productContextMethods] = useProduct(element);
-  const [_, optionsMethods] = useProductOptions(element);
-  createEffect(() => {
-    let target = null;
-    if (props.target) target = element.querySelector(props.target);
-    if (!target) target = element;
-    const preventDefault = props.preventDefault;
-    function handleChange(event) {
-      if (preventDefault) event.preventDefault();
-      const target2 = event.target;
-      if (!target2) return;
-      const value = target2.value;
-      if (value === productContext?.product?.selected_or_first_available_variant?.id)
-        return;
-      const variant = productContext?.product?.variants.find(
-        (variant2) => variant2.id.toString() === value.toString()
-      );
-      if (!variant) return;
-      if (optionsMethods) optionsMethods.options.update(variant.options);
-      else productContextMethods.variant.update(variant.id);
-    }
-    target.addEventListener("change", handleChange);
-    return onCleanup(() => {
-      target.removeEventListener("change", handleChange);
-    });
-  });
-  createEffect(() => {
-    let target = null;
-    if (props.target)
-      target = element.querySelector(props.target);
-    if (!target)
-      target = element.querySelector("input[name='id']");
-    if (!target) return console.warn(`${Name}: target input not found`);
-    const variantId = productContext?.product?.selected_or_first_available_variant?.id;
-    if (!variantId) return;
-    if (target.value === variantId.toString()) return;
-    target.value = variantId.toString();
-    target.dispatchEvent(new Event("change", { bubbles: true }));
-  });
+import { useProduct } from "../hooks/useProduct.js";
+import { useProductOptions } from "../hooks/useProductOptions.js";
+import "../hooks/index.js";
+import { createGuardedEffect } from "@brytdesigns/web-component-core/utils";
+import { untrack } from "solid-js";
+//#region src/components/product-variant-input.ts
+var Name = `product-variant-input`;
+var Component = (props, { element }) => {
+	const [productContext, productContextMethods] = useProduct(element);
+	const [_, optionsMethods] = useProductOptions(element);
+	createGuardedEffect(() => ({
+		target: props.target,
+		preventDefault: props.preventDefault
+	}), ({ target: selector, preventDefault }) => {
+		let target = null;
+		if (selector) target = element.querySelector(selector);
+		if (!target) target = element;
+		function handleChange(event) {
+			if (preventDefault) event.preventDefault();
+			const target = event.target;
+			if (!target) return;
+			const value = target.value;
+			const product = untrack(() => productContext?.product);
+			if (value === String(product?.selected_or_first_available_variant?.id ?? "")) return;
+			const variant = product?.variants.find((variant) => variant.id.toString() === value.toString());
+			if (!variant) return;
+			if (optionsMethods) optionsMethods.options.update(variant.options);
+			else productContextMethods.variant.update(variant.id);
+		}
+		target.addEventListener("change", handleChange);
+		return () => {
+			target.removeEventListener("change", handleChange);
+		};
+	});
+	createGuardedEffect(() => ({
+		target: props.target,
+		variantId: productContext?.product?.selected_or_first_available_variant?.id
+	}), ({ target: selector, variantId }) => {
+		let target = null;
+		if (selector) target = element.querySelector(selector);
+		if (!target) target = element.querySelector("input[name='id']");
+		if (!target) return console.warn(`${Name}: target input not found`);
+		if (!variantId) return;
+		if (target.value === variantId.toString()) return;
+		target.value = variantId.toString();
+		target.dispatchEvent(new Event("change", { bubbles: true }));
+	});
 };
-
+//#endregion
 export { Component, Name };
-//# sourceMappingURL=product-variant-input.js.map
+
 //# sourceMappingURL=product-variant-input.js.map

package/dist/main/components/product-variant-input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/product-variant-input.ts"],"names":["target","variant"],"mappings":";;;AAWO,MAAM,IAAO,GAAA,CAAA,qBAAA;AAEb,MAAM,SAAyC,GAAA,CAAC,KAAO,EAAA,EAAE,SAAc,KAAA;AAC5E,EAAA,MAAM,CAAC,cAAA,EAAgB,qBAAqB,CAAA,GAAI,WAAW,OAAO,CAAA;AAClE,EAAA,MAAM,CAAC,CAAA,EAAG,cAAc,CAAA,GAAI,kBAAkB,OAAO,CAAA;AAErD,EAAA,YAAA,CAAa,MAAM;AACjB,IAAA,IAAI,MAAS,GAAA,IAAA;AACb,IAAA,IAAI,MAAM,MAAQ,EAAA,MAAA,GAAS,OAAQ,CAAA,aAAA,CAAc,MAAM,MAAM,CAAA;AAC7D,IAAI,IAAA,CAAC,QAAiB,MAAA,GAAA,OAAA;AAEtB,IAAA,MAAM,iBAAiB,KAAM,CAAA,cAAA;AAE7B,IAAA,SAAS,aAAa,KAAc,EAAA;AAClC,MAAI,IAAA,cAAA,QAAsB,cAAe,EAAA;AACzC,MAAA,MAAMA,UAAS,KAAM,CAAA,MAAA;AACrB,MAAA,IAAI,CAACA,OAAQ,EAAA;AACb,MAAA,MAAM,QAAQA,OAAO,CAAA,KAAA;AACrB,MACE,IAAA,KAAA,KACA,cAAgB,EAAA,OAAA,EAAS,mCAAqC,EAAA,EAAA;AAE9D,QAAA;AACF,MAAM,MAAA,OAAA,GAAU,cAAgB,EAAA,OAAA,EAAS,QAAS,CAAA,IAAA;AAAA,QAChD,CAACC,QAAYA,KAAAA,QAAAA,CAAQ,GAAG,QAAS,EAAA,KAAM,MAAM,QAAS;AAAA,OACxD;AACA,MAAA,IAAI,CAAC,OAAS,EAAA;AACd,MAAA,IAAI,cAAgB,EAAA,cAAA,CAAe,OAAQ,CAAA,MAAA,CAAO,QAAQ,OAAO,CAAA;AAAA,WACtC,qBAAA,CAAA,OAAA,CAAQ,MAAO,CAAA,OAAA,CAAQ,EAAE,CAAA;AAAA;AAGtD,IAAO,MAAA,CAAA,gBAAA,CAAiB,UAAU,YAAY,CAAA;AAE9C,IAAA,OAAO,UAAU,MAAM;AACrB,MAAO,MAAA,CAAA,mBAAA,CAAoB,UAAU,YAAY,CAAA;AAAA,KAClD,CAAA;AAAA,GACF,CAAA;AAED,EAAA,YAAA,CAAa,MAAM;AACjB,IAAA,IAAI,MAAS,GAAA,IAAA;AACb,IAAA,IAAI,KAAM,CAAA,MAAA;AACR,MAAS,MAAA,GAAA,OAAA,CAAQ,aAAgC,CAAA,KAAA,CAAM,MAAM,CAAA;AAC/D,IAAA,IAAI,CAAC,MAAA;AACH,MAAS,MAAA,GAAA,OAAA,CAAQ,cAAgC,kBAAkB,CAAA;AACrE,IAAA,IAAI,CAAC,MAAQ,EAAA,OAAO,QAAQ,IAAK,CAAA,CAAA,EAAG,IAAI,CAA0B,wBAAA,CAAA,CAAA;AAElE,IAAM,MAAA,SAAA,GACJ,cAAgB,EAAA,OAAA,EAAS,mCAAqC,EAAA,EAAA;AAChE,IAAA,IAAI,CAAC,SAAW,EAAA;AAChB,IAAA,IAAI,MAAO,CAAA,KAAA,KAAU,SAAU,CAAA,QAAA,EAAY,EAAA;AAC3C,IAAO,MAAA,CAAA,KAAA,GAAQ,UAAU,QAAS,EAAA;AAClC,IAAO,MAAA,CAAA,aAAA,CAAc,IAAI,KAAM,CAAA,QAAA,EAAU,EAAE,OAAS,EAAA,IAAA,EAAM,CAAC,CAAA;AAAA,GAC5D,CAAA;AACH","file":"product-variant-input.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\n\nimport { createEffect, onCleanup } from \"solid-js\";\n\nimport { useProduct, useProductOptions } from \"../hooks/index.js\";\n\nexport type Props = {\n  target: string | null;\n  preventDefault?: boolean;\n};\n\nexport const Name = `product-variant-input`;\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n  const [productContext, productContextMethods] = useProduct(element);\n  const [_, optionsMethods] = useProductOptions(element);\n\n  createEffect(() => {\n    let target = null;\n    if (props.target) target = element.querySelector(props.target);\n    if (!target) target = element;\n\n    const preventDefault = props.preventDefault;\n\n    function handleChange(event: Event) {\n      if (preventDefault) event.preventDefault();\n      const target = event.target as HTMLInputElement;\n      if (!target) return;\n      const value = target.value;\n      if (\n        value ===\n        productContext?.product?.selected_or_first_available_variant?.id\n      )\n        return;\n      const variant = productContext?.product?.variants.find(\n        (variant) => variant.id.toString() === value.toString(),\n      );\n      if (!variant) return;\n      if (optionsMethods) optionsMethods.options.update(variant.options);\n      else productContextMethods.variant.update(variant.id);\n    }\n\n    target.addEventListener(\"change\", handleChange);\n\n    return onCleanup(() => {\n      target.removeEventListener(\"change\", handleChange);\n    });\n  });\n\n  createEffect(() => {\n    let target = null;\n    if (props.target)\n      target = element.querySelector<HTMLInputElement>(props.target);\n    if (!target)\n      target = element.querySelector<HTMLInputElement>(\"input[name='id']\");\n    if (!target) return console.warn(`${Name}: target input not found`);\n\n    const variantId =\n      productContext?.product?.selected_or_first_available_variant?.id;\n    if (!variantId) return;\n    if (target.value === variantId.toString()) return;\n    target.value = variantId.toString();\n    target.dispatchEvent(new Event(\"change\", { bubbles: true }));\n  });\n};\n"]}
+{"version":3,"file":"product-variant-input.js","names":[],"sources":["../../../src/components/product-variant-input.ts"],"sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\nimport { createGuardedEffect } from \"@brytdesigns/web-component-core/utils\";\nimport { untrack } from \"solid-js\";\n\nimport { useProduct, useProductOptions } from \"../hooks/index.js\";\n\nexport type Props = {\n\ttarget: string | null;\n\tpreventDefault?: boolean;\n};\n\nexport const Name = `product-variant-input`;\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n\tconst [productContext, productContextMethods] = useProduct(element);\n\tconst [_, optionsMethods] = useProductOptions(element);\n\n\tcreateGuardedEffect(\n\t\t() => ({\n\t\t\ttarget: props.target,\n\t\t\tpreventDefault: props.preventDefault,\n\t\t}),\n\t\t({ target: selector, preventDefault }) => {\n\t\t\tlet target: Element | null = null;\n\t\t\tif (selector) target = element.querySelector(selector);\n\t\t\tif (!target) target = element;\n\n\t\t\tfunction handleChange(event: Event) {\n\t\t\t\tif (preventDefault) event.preventDefault();\n\t\t\t\tconst target = event.target as HTMLInputElement;\n\t\t\t\tif (!target) return;\n\t\t\t\tconst value = target.value;\n\t\t\t\t// An event handler is not a tracking scope, and the product has\n\t\t\t\t// to be read as it stands when the shopper picks — not as it\n\t\t\t\t// stood when the listener was attached. Declared with `untrack`\n\t\t\t\t// so the read is reviewed rather than reported.\n\t\t\t\tconst product = untrack(() => productContext?.product);\n\t\t\t\t// Compared as strings. `value` is always a string and the id is a\n\t\t\t\t// number, so `===` was never true and this early return never\n\t\t\t\t// fired - every change ran the lookup and the update below, even\n\t\t\t\t// when nothing had actually changed.\n\t\t\t\tif (\n\t\t\t\t\tvalue ===\n\t\t\t\t\tString(product?.selected_or_first_available_variant?.id ?? \"\")\n\t\t\t\t)\n\t\t\t\t\treturn;\n\t\t\t\tconst variant = product?.variants.find(\n\t\t\t\t\t(variant) => variant.id.toString() === value.toString(),\n\t\t\t\t);\n\t\t\t\tif (!variant) return;\n\t\t\t\tif (optionsMethods) optionsMethods.options.update(variant.options);\n\t\t\t\telse productContextMethods.variant.update(variant.id);\n\t\t\t}\n\n\t\t\ttarget.addEventListener(\"change\", handleChange);\n\n\t\t\treturn () => {\n\t\t\t\ttarget.removeEventListener(\"change\", handleChange);\n\t\t\t};\n\t\t},\n\t);\n\n\tcreateGuardedEffect(\n\t\t// `variantId` is read HERE, in the compute phase, because only the\n\t\t// compute phase tracks. It used to be read in the apply phase below,\n\t\t// which meant this effect depended on `props.target` alone: the hidden\n\t\t// `input[name=\"id\"]` was written once at mount and never again, so\n\t\t// choosing a swatch left the form posting the *first* variant and the\n\t\t// shopper received the wrong one. A single-function Solid 1 effect\n\t\t// tracked its whole body; a split Solid 2 effect does not.\n\t\t() => ({\n\t\t\ttarget: props.target,\n\t\t\tvariantId:\n\t\t\t\tproductContext?.product?.selected_or_first_available_variant?.id,\n\t\t}),\n\t\t({ target: selector, variantId }) => {\n\t\t\tlet target: HTMLInputElement | null = null;\n\t\t\tif (selector) target = element.querySelector<HTMLInputElement>(selector);\n\t\t\tif (!target)\n\t\t\t\ttarget = element.querySelector<HTMLInputElement>(\"input[name='id']\");\n\t\t\tif (!target) return console.warn(`${Name}: target input not found`);\n\n\t\t\tif (!variantId) return;\n\t\t\tif (target.value === variantId.toString()) return;\n\t\t\ttarget.value = variantId.toString();\n\t\t\ttarget.dispatchEvent(new Event(\"change\", { bubbles: true }));\n\t\t},\n\t);\n};\n"],"mappings":";;;;;;AAWA,IAAa,OAAO;AAEpB,IAAa,aAA0C,OAAO,EAAE,cAAc;CAC7E,MAAM,CAAC,gBAAgB,yBAAyB,WAAW,OAAO;CAClE,MAAM,CAAC,GAAG,kBAAkB,kBAAkB,OAAO;CAErD,2BACQ;EACN,QAAQ,MAAM;EACd,gBAAgB,MAAM;CACvB,KACC,EAAE,QAAQ,UAAU,qBAAqB;EACzC,IAAI,SAAyB;EAC7B,IAAI,UAAU,SAAS,QAAQ,cAAc,QAAQ;EACrD,IAAI,CAAC,QAAQ,SAAS;EAEtB,SAAS,aAAa,OAAc;GACnC,IAAI,gBAAgB,MAAM,eAAe;GACzC,MAAM,SAAS,MAAM;GACrB,IAAI,CAAC,QAAQ;GACb,MAAM,QAAQ,OAAO;GAKrB,MAAM,UAAU,cAAc,gBAAgB,OAAO;GAKrD,IACC,UACA,OAAO,SAAS,qCAAqC,MAAM,EAAE,GAE7D;GACD,MAAM,UAAU,SAAS,SAAS,MAChC,YAAY,QAAQ,GAAG,SAAS,MAAM,MAAM,SAAS,CACvD;GACA,IAAI,CAAC,SAAS;GACd,IAAI,gBAAgB,eAAe,QAAQ,OAAO,QAAQ,OAAO;QAC5D,sBAAsB,QAAQ,OAAO,QAAQ,EAAE;EACrD;EAEA,OAAO,iBAAiB,UAAU,YAAY;EAE9C,aAAa;GACZ,OAAO,oBAAoB,UAAU,YAAY;EAClD;CACD,CACD;CAEA,2BAQQ;EACN,QAAQ,MAAM;EACd,WACC,gBAAgB,SAAS,qCAAqC;CAChE,KACC,EAAE,QAAQ,UAAU,gBAAgB;EACpC,IAAI,SAAkC;EACtC,IAAI,UAAU,SAAS,QAAQ,cAAgC,QAAQ;EACvE,IAAI,CAAC,QACJ,SAAS,QAAQ,cAAgC,kBAAkB;EACpE,IAAI,CAAC,QAAQ,OAAO,QAAQ,KAAK,GAAG,KAAK,yBAAyB;EAElE,IAAI,CAAC,WAAW;EAChB,IAAI,OAAO,UAAU,UAAU,SAAS,GAAG;EAC3C,OAAO,QAAQ,UAAU,SAAS;EAClC,OAAO,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,KAAK,CAAC,CAAC;CAC5D,CACD;AACD"}

package/dist/main/components/product-variant-render.js

@@ -1,37 +1,31 @@
-import { createMemo, Show } from 'solid-js';
-import html from 'solid-js/html';
-import { useProduct } from '../hooks/index.js';
-
-const Name = `product-variant-render`;
-const Component = (_, { element }) => {
-  const templates = Array.from(
-    element.querySelectorAll("template[variant-id]")
-  );
-  if (!templates.length)
-    return console.warn(`${Name}: No variant templates found`);
-  const [state] = useProduct(element);
-  const fallbackChildren = Array.from(element.children);
-  const activeVariantTemplate = createMemo(() => {
-    const variantId = state.product?.selected_or_first_available_variant?.id;
-    if (!variantId) return null;
-    const template = templates.find(
-      (t) => t.getAttribute("variant-id") === `${variantId}`
-    );
-    return template || null;
-  });
-  element.replaceChildren(...[]);
-  return html`
-    <${Show}
-      when=${() => !!activeVariantTemplate()}
-      fallback=${fallbackChildren}
-    >
-      ${() => Array.from(
-    activeVariantTemplate()?.content.cloneNode(true).childNodes || []
-  )}
-    <//>
-  `;
+import { useProduct } from "../hooks/useProduct.js";
+import "../hooks/index.js";
+import { createMemo } from "solid-js";
+import { Show, createComponent } from "@solidjs/web";
+//#region src/components/product-variant-render.tsx
+var Name = `product-variant-render`;
+var Component = (_, { element }) => {
+	const templates = Array.from(element.querySelectorAll("template[variant-id]"));
+	if (!templates.length) return console.warn(`${Name}: No variant templates found`);
+	const [state] = useProduct(element);
+	const fallbackChildren = Array.from(element.children);
+	const activeVariantTemplate = createMemo(() => {
+		const variantId = state.product?.selected_or_first_available_variant?.id;
+		if (!variantId) return null;
+		return templates.find((t) => t.getAttribute("variant-id") === `${variantId}`) || null;
+	});
+	element.replaceChildren(...[]);
+	return createComponent(Show, {
+		get when() {
+			return !!activeVariantTemplate();
+		},
+		fallback: fallbackChildren,
+		get children() {
+			return Array.from(activeVariantTemplate()?.content.cloneNode(true).childNodes || []);
+		}
+	});
 };
-
+//#endregion
 export { Component, Name };
-//# sourceMappingURL=product-variant-render.js.map
+
 //# sourceMappingURL=product-variant-render.js.map

package/dist/main/components/product-variant-render.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/product-variant-render.ts"],"names":[],"mappings":";;;;AASO,MAAM,IAAO,GAAA,CAAA,sBAAA;AAEb,MAAM,SAAyC,GAAA,CAAC,CAAG,EAAA,EAAE,SAAc,KAAA;AACxE,EAAA,MAAM,YAAY,KAAM,CAAA,IAAA;AAAA,IACtB,OAAA,CAAQ,iBAAsC,sBAAsB;AAAA,GACtE;AACA,EAAA,IAAI,CAAC,SAAU,CAAA,MAAA;AACb,IAAA,OAAO,OAAQ,CAAA,IAAA,CAAK,CAAG,EAAA,IAAI,CAA8B,4BAAA,CAAA,CAAA;AAC3D,EAAA,MAAM,CAAC,KAAK,CAAI,GAAA,UAAA,CAAW,OAAO,CAAA;AAElC,EAAA,MAAM,gBAAmB,GAAA,KAAA,CAAM,IAAK,CAAA,OAAA,CAAQ,QAAQ,CAAA;AAEpD,EAAM,MAAA,qBAAA,GAAwB,WAAW,MAAM;AAC7C,IAAM,MAAA,SAAA,GAAY,KAAM,CAAA,OAAA,EAAS,mCAAqC,EAAA,EAAA;AACtE,IAAI,IAAA,CAAC,WAAkB,OAAA,IAAA;AACvB,IAAA,MAAM,WAAW,SAAU,CAAA,IAAA;AAAA,MACzB,CAAC,CAAM,KAAA,CAAA,CAAE,aAAa,YAAY,CAAA,KAAM,GAAG,SAAS,CAAA;AAAA,KACtD;AACA,IAAA,OAAO,QAAY,IAAA,IAAA;AAAA,GACpB,CAAA;AAED,EAAQ,OAAA,CAAA,eAAA,CAAgB,GAAG,EAAE,CAAA;AAE7B,EAAO,OAAA,IAAA;AAAA,KAAA,EACF,IAAI;AAAA,WAAA,EACE,MAAM,CAAC,CAAC,qBAAA,EAAuB;AAAA,eAAA,EAC3B,gBAAgB;AAAA;AAAA,MAAA,EAEzB,MACF,KAAM,CAAA,IAAA;AAAA,IACJ,uBAAyB,EAAA,OAAA,CAAQ,UAAU,IAAI,CAAA,CAAE,cAAc;AAAC,GACjE;AAAA;AAAA,EAAA,CAAA;AAGP","file":"product-variant-render.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\n\nimport { createMemo, Show } from \"solid-js\";\nimport html from \"solid-js/html\";\n\nimport { useProduct } from \"../hooks/index.js\";\n\nexport type Props = {};\n\nexport const Name = `product-variant-render`;\n\nexport const Component: CorrectComponentType<Props> = (_, { element }) => {\n  const templates = Array.from(\n    element.querySelectorAll<HTMLTemplateElement>(\"template[variant-id]\"),\n  );\n  if (!templates.length)\n    return console.warn(`${Name}: No variant templates found`);\n  const [state] = useProduct(element);\n\n  const fallbackChildren = Array.from(element.children);\n\n  const activeVariantTemplate = createMemo(() => {\n    const variantId = state.product?.selected_or_first_available_variant?.id;\n    if (!variantId) return null;\n    const template = templates.find(\n      (t) => t.getAttribute(\"variant-id\") === `${variantId}`,\n    );\n    return template || null;\n  });\n\n  element.replaceChildren(...[]);\n\n  return html`\n    <${Show}\n      when=${() => !!activeVariantTemplate()}\n      fallback=${fallbackChildren}\n    >\n      ${() =>\n      Array.from(\n        activeVariantTemplate()?.content.cloneNode(true).childNodes || [],\n      )}\n    <//>\n  `;\n};\n"]}
+{"version":3,"file":"product-variant-render.js","names":["<Show when={!!activeVariantTemplate()} fallback={fallbackChildren}>\n\t\t\t{Array.from(\n\t\t\t\tactiveVariantTemplate()?.content.cloneNode(true).childNodes || [],\n\t\t\t)}\n\t\t</Show>","fallback={fallbackChildren}"],"sources":["../../../src/components/product-variant-render.tsx"],"sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\n\nimport { Show } from \"@solidjs/web\";\nimport { createMemo } from \"solid-js\";\n\nimport { useProduct } from \"../hooks/index.js\";\n\nexport type Props = {};\n\nexport const Name = `product-variant-render`;\n\nexport const Component: CorrectComponentType<Props> = (_, { element }) => {\n\tconst templates = Array.from(\n\t\telement.querySelectorAll<HTMLTemplateElement>(\"template[variant-id]\"),\n\t);\n\tif (!templates.length)\n\t\treturn console.warn(`${Name}: No variant templates found`);\n\tconst [state] = useProduct(element);\n\n\tconst fallbackChildren = Array.from(element.children);\n\n\tconst activeVariantTemplate = createMemo(() => {\n\t\tconst variantId = state.product?.selected_or_first_available_variant?.id;\n\t\tif (!variantId) return null;\n\t\tconst template = templates.find(\n\t\t\t(t) => t.getAttribute(\"variant-id\") === `${variantId}`,\n\t\t);\n\t\treturn template || null;\n\t});\n\n\telement.replaceChildren(...[]);\n\n\treturn (\n\t\t<Show when={!!activeVariantTemplate()} fallback={fallbackChildren}>\n\t\t\t{Array.from(\n\t\t\t\tactiveVariantTemplate()?.content.cloneNode(true).childNodes || [],\n\t\t\t)}\n\t\t</Show>\n\t);\n};\n"],"mappings":";;;;;AASA,IAAa,OAAO;AAEpB,IAAa,aAA0C,GAAG,EAAE,cAAc;CACzE,MAAM,YAAY,MAAM,KACvB,QAAQ,iBAAsC,sBAAsB,CACrE;CACA,IAAI,CAAC,UAAU,QACd,OAAO,QAAQ,KAAK,GAAG,KAAK,6BAA6B;CAC1D,MAAM,CAAC,SAAS,WAAW,OAAO;CAElC,MAAM,mBAAmB,MAAM,KAAK,QAAQ,QAAQ;CAEpD,MAAM,wBAAwB,iBAAiB;EAC9C,MAAM,YAAY,MAAM,SAAS,qCAAqC;EACtE,IAAI,CAAC,WAAW,OAAO;EAIvB,OAHiB,UAAU,MACzB,MAAM,EAAE,aAAa,YAAY,MAAM,GAAG,WAErC,KAAY;CACpB,CAAC;CAED,QAAQ,gBAAgB,GAAG,CAAC,CAAC;CAE7B,OACCA,gBAAAA,MAAAA;EAAM,IAAA,OAAA;GAAM,OAAA,CAAC,CAAC,sBAAsB;EAAC;EAAEC,UAAU;EAAjD,IAAA,WAAA;GACE,OAAA,MAAM,KACN,sBAAsB,CAAC,EAAE,QAAQ,UAAU,IAAI,CAAC,CAAC,cAAc,CAAC,CACjE;EACK;;AAER"}

package/dist/main/hooks/index.js

@@ -1,4 +1,3 @@
-export * from './useProduct.js';
-export * from './useProductOptions.js';
-//# sourceMappingURL=index.js.map
-//# sourceMappingURL=index.js.map
+import { getProductContext, provideProductContext, useProduct, useProductAt, useProductContext } from "./useProduct.js";
+import { getProductOptionsContext, provideProductOptionsContext, useProductOptions, useProductOptionsAt, useProductOptionsContext } from "./useProductOptions.js";
+export { getProductContext, getProductOptionsContext, provideProductContext, provideProductOptionsContext, useProduct, useProductAt, useProductContext, useProductOptions, useProductOptionsAt, useProductOptionsContext };