@brytdesigns/shopify-product-info-components 3.3.2 → 3.4.0

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

@@ -1,5 +1,6 @@
 import { useProduct } from "../hooks/useProduct.js";
 import "../hooks/index.js";
+import { cloneTemplate } from "@brytdesigns/web-component-core/utils";
 import { createMemo } from "solid-js";
 import { Show, createComponent } from "@solidjs/web";
 //#region src/components/product-variant-render.tsx
@@ -21,7 +22,10 @@ var Component = (_, { element }) => {
 		},
 		fallback: fallbackChildren,
 		get children() {
-			return Array.from(activeVariantTemplate()?.content.cloneNode(true).childNodes || []);
+			return (() => {
+				const template = activeVariantTemplate();
+				return template ? cloneTemplate(template) : [];
+			})();
 		}
 	});
 };

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"product-variant-render.js","names":["<Show when={!!activeVariantTemplate()} fallback={fallbackChildren}>\n\t\t\t{(() => {\n\t\t\t\tconst template = activeVariantTemplate();\n\t\t\t\treturn template ? cloneTemplate(template) : [];\n\t\t\t})()}\n\t\t</Show>","fallback={fallbackChildren}"],"sources":["../../../src/components/product-variant-render.tsx"],"sourcesContent":["import {\n\ttype CorrectComponentType,\n\tcloneTemplate,\n} 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{(() => {\n\t\t\t\tconst template = activeVariantTemplate();\n\t\t\t\treturn template ? cloneTemplate(template) : [];\n\t\t\t})()}\n\t\t</Show>\n\t);\n};\n"],"mappings":";;;;;;AAYA,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;GACS,cAAA;IACP,MAAM,WAAW,sBAAsB;IACvC,OAAO,WAAW,cAAc,QAAQ,IAAI,CAAC;GAC9C,EAAA,CAAG;EACE;;AAER"}

package/dist/main/hooks/useProduct.js

@@ -1,6 +1,6 @@
-import { createRemoteContext, getContextFromProvider } from "@brytdesigns/web-component-core/utils";
+import { consumeContext, createRemoteContext, getContextFromProvider } from "@brytdesigns/web-component-core/utils";
 import { merge, omit, untrack } from "solid-js";
-import { consume, createContext, provide } from "component-register";
+import { createContext, provide } from "component-register";
 //#region src/hooks/useProduct.ts
 function initializeProductContext(props) {
 	const publicProps = omit(props, "root");
@@ -34,7 +34,7 @@ var useProductContext = (context) => {
 	return context;
 };
 var useProduct = (element) => {
-	const context = consume(ProductContextState, element);
+	const context = consumeContext(ProductContextState, element);
 	if (!context) throw new Error("ProductInfoContext not found! Please ensure to wrap your custom element with product-info element.");
 	return useProductContext(context);
 };

package/dist/main/hooks/useProduct.js.map

@@ -1 +1 @@
-{"version":3,"file":"useProduct.js","names":[],"sources":["../../../src/hooks/useProduct.ts"],"sourcesContent":["import {\n\tcreateRemoteContext,\n\tgetContextFromProvider,\n} from \"@brytdesigns/web-component-core/utils\";\nimport {\n\tconsume,\n\tcreateContext,\n\ttype ICustomElement,\n\tprovide,\n} from \"component-register\";\nimport { merge, omit, untrack } from \"solid-js\";\n\nimport type { Product } from \"../types\";\n\ntype CreateContextOptions = {\n\troot: HTMLElement & ICustomElement;\n\tproduct: Product;\n};\n\ntype WalkableNode = Parameters<typeof provide>[2];\n\ntype ProductContext = ReturnType<typeof initializeProductContext>;\n\nfunction initializeProductContext(props: CreateContextOptions) {\n\t// `omit` returns only the rest; `root` is read straight off `props`.\n\tconst publicProps = omit(props, \"root\");\n\tconst state = merge(publicProps, {});\n\n\tfunction updateSelectedVariant(variantId: string | number) {\n\t\tconst product = untrack(() => state?.product);\n\t\tif (\n\t\t\ttypeof product?.selected_or_first_available_variant === \"undefined\" ||\n\t\t\ttypeof product === \"undefined\" ||\n\t\t\ttypeof product?.variants === \"undefined\"\n\t\t)\n\t\t\treturn;\n\t\tconst newVariant = product.variants.find(\n\t\t\t(variant) => variant?.id?.toString() === variantId.toString(),\n\t\t);\n\n\t\tif (\n\t\t\tnewVariant?.id?.toString() ===\n\t\t\tproduct.selected_or_first_available_variant?.id?.toString()\n\t\t)\n\t\t\treturn;\n\n\t\tconst newState = {\n\t\t\t...product,\n\t\t\tselected_or_first_available_variant: newVariant,\n\t\t};\n\n\t\tprops.root.setAttribute(\"product\", JSON.stringify(newState));\n\n\t\tprops.root.dispatchEvent(\n\t\t\tnew CustomEvent(\"variant-updated\", {\n\t\t\t\tdetail: {\n\t\t\t\t\tvariant: newVariant,\n\t\t\t\t\tproduct: newState,\n\t\t\t\t},\n\t\t\t\tbubbles: true,\n\t\t\t}),\n\t\t);\n\t}\n\n\treturn [\n\t\tstate,\n\t\t{\n\t\t\tvariant: {\n\t\t\t\tupdate: updateSelectedVariant,\n\t\t\t},\n\t\t},\n\t] as const;\n}\n\nconst ProductContextState = createContext(initializeProductContext);\n\nexport const provideProductContext = (\n\tinitialState: Omit<CreateContextOptions, \"root\">,\n\telement: WalkableNode,\n): ProductContext => {\n\tconst props = merge(initialState, { root: element });\n\treturn provide(ProductContextState, props, element);\n};\n\nexport const useProductContext = (context: ProductContext) => {\n\treturn context;\n};\n\nexport const useProduct = (element: HTMLElement & ICustomElement) => {\n\tconst context: ProductContext = consume(ProductContextState, element);\n\n\tif (!context) {\n\t\tthrow new Error(\n\t\t\t\"ProductInfoContext not found! Please ensure to wrap your custom element with product-info element.\",\n\t\t);\n\t}\n\n\treturn useProductContext(context);\n};\n\nexport const getProductContext = (element: Element) => {\n\tconst context = getContextFromProvider<ProductContext>(\n\t\tProductContextState,\n\t\telement,\n\t);\n\treturn useProductContext(context);\n};\n\nexport const useProductAt =\n\tcreateRemoteContext<ProductContext>(ProductContextState);\n"],"mappings":";;;;AAuBA,SAAS,yBAAyB,OAA6B;CAE9D,MAAM,cAAc,KAAK,OAAO,MAAM;CACtC,MAAM,QAAQ,MAAM,aAAa,CAAC,CAAC;CAEnC,SAAS,sBAAsB,WAA4B;EAC1D,MAAM,UAAU,cAAc,OAAO,OAAO;EAC5C,IACC,OAAO,SAAS,wCAAwC,eACxD,OAAO,YAAY,eACnB,OAAO,SAAS,aAAa,aAE7B;EACD,MAAM,aAAa,QAAQ,SAAS,MAClC,YAAY,SAAS,IAAI,SAAS,MAAM,UAAU,SAAS,CAC7D;EAEA,IACC,YAAY,IAAI,SAAS,MACzB,QAAQ,qCAAqC,IAAI,SAAS,GAE1D;EAED,MAAM,WAAW;GAChB,GAAG;GACH,qCAAqC;EACtC;EAEA,MAAM,KAAK,aAAa,WAAW,KAAK,UAAU,QAAQ,CAAC;EAE3D,MAAM,KAAK,cACV,IAAI,YAAY,mBAAmB;GAClC,QAAQ;IACP,SAAS;IACT,SAAS;GACV;GACA,SAAS;EACV,CAAC,CACF;CACD;CAEA,OAAO,CACN,OACA,EACC,SAAS,EACR,QAAQ,sBACT,EACD,CACD;AACD;AAEA,IAAM,sBAAsB,cAAc,wBAAwB;AAElE,IAAa,yBACZ,cACA,YACoB;CACpB,MAAM,QAAQ,MAAM,cAAc,EAAE,MAAM,QAAQ,CAAC;CACnD,OAAO,QAAQ,qBAAqB,OAAO,OAAO;AACnD;AAEA,IAAa,qBAAqB,YAA4B;CAC7D,OAAO;AACR;AAEA,IAAa,cAAc,YAA0C;CACpE,MAAM,UAA0B,QAAQ,qBAAqB,OAAO;CAEpE,IAAI,CAAC,SACJ,MAAM,IAAI,MACT,oGACD;CAGD,OAAO,kBAAkB,OAAO;AACjC;AAEA,IAAa,qBAAqB,YAAqB;CAKtD,OAAO,kBAJS,uBACf,qBACA,OAEwB,CAAO;AACjC;AAEA,IAAa,eACZ,oBAAoC,mBAAmB"}
+{"version":3,"file":"useProduct.js","names":[],"sources":["../../../src/hooks/useProduct.ts"],"sourcesContent":["import {\n\tconsumeContext,\n\tcreateRemoteContext,\n\tgetContextFromProvider,\n} from \"@brytdesigns/web-component-core/utils\";\nimport {\n\tcreateContext,\n\ttype ICustomElement,\n\tprovide,\n} from \"component-register\";\nimport { merge, omit, untrack } from \"solid-js\";\n\nimport type { Product } from \"../types\";\n\ntype CreateContextOptions = {\n\troot: HTMLElement & ICustomElement;\n\tproduct: Product;\n};\n\ntype WalkableNode = Parameters<typeof provide>[2];\n\ntype ProductContext = ReturnType<typeof initializeProductContext>;\n\nfunction initializeProductContext(props: CreateContextOptions) {\n\t// `omit` returns only the rest; `root` is read straight off `props`.\n\tconst publicProps = omit(props, \"root\");\n\tconst state = merge(publicProps, {});\n\n\tfunction updateSelectedVariant(variantId: string | number) {\n\t\tconst product = untrack(() => state?.product);\n\t\tif (\n\t\t\ttypeof product?.selected_or_first_available_variant === \"undefined\" ||\n\t\t\ttypeof product === \"undefined\" ||\n\t\t\ttypeof product?.variants === \"undefined\"\n\t\t)\n\t\t\treturn;\n\t\tconst newVariant = product.variants.find(\n\t\t\t(variant) => variant?.id?.toString() === variantId.toString(),\n\t\t);\n\n\t\tif (\n\t\t\tnewVariant?.id?.toString() ===\n\t\t\tproduct.selected_or_first_available_variant?.id?.toString()\n\t\t)\n\t\t\treturn;\n\n\t\tconst newState = {\n\t\t\t...product,\n\t\t\tselected_or_first_available_variant: newVariant,\n\t\t};\n\n\t\tprops.root.setAttribute(\"product\", JSON.stringify(newState));\n\n\t\tprops.root.dispatchEvent(\n\t\t\tnew CustomEvent(\"variant-updated\", {\n\t\t\t\tdetail: {\n\t\t\t\t\tvariant: newVariant,\n\t\t\t\t\tproduct: newState,\n\t\t\t\t},\n\t\t\t\tbubbles: true,\n\t\t\t}),\n\t\t);\n\t}\n\n\treturn [\n\t\tstate,\n\t\t{\n\t\t\tvariant: {\n\t\t\t\tupdate: updateSelectedVariant,\n\t\t\t},\n\t\t},\n\t] as const;\n}\n\nconst ProductContextState = createContext(initializeProductContext);\n\nexport const provideProductContext = (\n\tinitialState: Omit<CreateContextOptions, \"root\">,\n\telement: WalkableNode,\n): ProductContext => {\n\tconst props = merge(initialState, { root: element });\n\treturn provide(ProductContextState, props, element);\n};\n\nexport const useProductContext = (context: ProductContext) => {\n\treturn context;\n};\n\nexport const useProduct = (element: HTMLElement & ICustomElement) => {\n\tconst context = consumeContext<ProductContext>(ProductContextState, element);\n\n\tif (!context) {\n\t\tthrow new Error(\n\t\t\t\"ProductInfoContext not found! Please ensure to wrap your custom element with product-info element.\",\n\t\t);\n\t}\n\n\treturn useProductContext(context);\n};\n\nexport const getProductContext = (element: Element) => {\n\tconst context = getContextFromProvider<ProductContext>(\n\t\tProductContextState,\n\t\telement,\n\t);\n\treturn useProductContext(context);\n};\n\nexport const useProductAt =\n\tcreateRemoteContext<ProductContext>(ProductContextState);\n"],"mappings":";;;;AAuBA,SAAS,yBAAyB,OAA6B;CAE9D,MAAM,cAAc,KAAK,OAAO,MAAM;CACtC,MAAM,QAAQ,MAAM,aAAa,CAAC,CAAC;CAEnC,SAAS,sBAAsB,WAA4B;EAC1D,MAAM,UAAU,cAAc,OAAO,OAAO;EAC5C,IACC,OAAO,SAAS,wCAAwC,eACxD,OAAO,YAAY,eACnB,OAAO,SAAS,aAAa,aAE7B;EACD,MAAM,aAAa,QAAQ,SAAS,MAClC,YAAY,SAAS,IAAI,SAAS,MAAM,UAAU,SAAS,CAC7D;EAEA,IACC,YAAY,IAAI,SAAS,MACzB,QAAQ,qCAAqC,IAAI,SAAS,GAE1D;EAED,MAAM,WAAW;GAChB,GAAG;GACH,qCAAqC;EACtC;EAEA,MAAM,KAAK,aAAa,WAAW,KAAK,UAAU,QAAQ,CAAC;EAE3D,MAAM,KAAK,cACV,IAAI,YAAY,mBAAmB;GAClC,QAAQ;IACP,SAAS;IACT,SAAS;GACV;GACA,SAAS;EACV,CAAC,CACF;CACD;CAEA,OAAO,CACN,OACA,EACC,SAAS,EACR,QAAQ,sBACT,EACD,CACD;AACD;AAEA,IAAM,sBAAsB,cAAc,wBAAwB;AAElE,IAAa,yBACZ,cACA,YACoB;CACpB,MAAM,QAAQ,MAAM,cAAc,EAAE,MAAM,QAAQ,CAAC;CACnD,OAAO,QAAQ,qBAAqB,OAAO,OAAO;AACnD;AAEA,IAAa,qBAAqB,YAA4B;CAC7D,OAAO;AACR;AAEA,IAAa,cAAc,YAA0C;CACpE,MAAM,UAAU,eAA+B,qBAAqB,OAAO;CAE3E,IAAI,CAAC,SACJ,MAAM,IAAI,MACT,oGACD;CAGD,OAAO,kBAAkB,OAAO;AACjC;AAEA,IAAa,qBAAqB,YAAqB;CAKtD,OAAO,kBAJS,uBACf,qBACA,OAEwB,CAAO;AACjC;AAEA,IAAa,eACZ,oBAAoC,mBAAmB"}

package/dist/main/hooks/useProductOptions.js

@@ -1,7 +1,7 @@
 import { useProduct } from "./useProduct.js";
-import { createGuardedEffect, createRemoteContext, getContextFromProvider } from "@brytdesigns/web-component-core/utils";
+import { consumeContext, createGuardedEffect, createRemoteContext, getContextFromProvider } from "@brytdesigns/web-component-core/utils";
 import { merge, omit, untrack } from "solid-js";
-import { consume, createContext, provide } from "component-register";
+import { createContext, provide } from "component-register";
 import { Events } from "@brytdesigns/shopify-utils";
 //#region src/hooks/useProductOptions.ts
 /** A variant in the shape Shopify's converter takes. */
@@ -68,7 +68,7 @@ var useProductOptionsContext = (context) => {
 	return context;
 };
 var useProductOptions = (element) => {
-	const context = consume(ProductOptionsContextState, element);
+	const context = consumeContext(ProductOptionsContextState, element);
 	if (!context) throw new Error("ProductOptionsContext not found! Please ensure to wrap your custom element with product-options element.");
 	return useProductOptionsContext(context);
 };

package/dist/main/hooks/useProductOptions.js.map

@@ -1 +1 @@
-{"version":3,"file":"useProductOptions.js","names":[],"sources":["../../../src/hooks/useProductOptions.ts"],"sourcesContent":["import { Events } from \"@brytdesigns/shopify-utils\";\nimport {\n\tcreateGuardedEffect,\n\tcreateRemoteContext,\n\tgetContextFromProvider,\n} from \"@brytdesigns/web-component-core/utils\";\nimport {\n\tconsume,\n\tcreateContext,\n\ttype ICustomElement,\n\tprovide,\n} from \"component-register\";\nimport { merge, omit, untrack } from \"solid-js\";\n\nimport type { Product, Variant } from \"../types.js\";\nimport { useProduct } from \"./useProduct.js\";\n\n/** A variant in the shape Shopify's converter takes. */\nconst liquidVariant = (variant: Variant): Events.LiquidVariant => {\n\tif (variant.price === undefined)\n\t\tthrow new Error(\n\t\t\t`Variant ${variant.id} has no price, so shopify:product:select cannot report one.`,\n\t\t);\n\treturn {\n\t\tid: variant.id,\n\t\ttitle: variant.title ?? variant.options.join(\" / \"),\n\t\tavailable: variant.available ?? false,\n\t\tprice: variant.price,\n\t\toptions: variant.options,\n\t};\n};\n\n/**\n * `shopify:product:select` for options a shopper has just chosen, resolving\n * with the variant they point at, or `null` when no variant matches.\n */\nconst announceSelection = (\n\ttarget: HTMLElement,\n\tproduct: Product,\n\toptions: string[],\n) => {\n\tconst names = product.options ?? [];\n\tEvents.productSelect(\n\t\t{\n\t\t\ttarget,\n\t\t\tproduct: {\n\t\t\t\tid: Events.gid(\"Product\", product.id),\n\t\t\t\ttitle: product.title ?? \"\",\n\t\t\t\thandle: product.handle ?? \"\",\n\t\t\t},\n\t\t\tselectedOptions: Events.selectedOptions(names, options),\n\t\t},\n\t\t() =>\n\t\t\tproduct.variants.find((variant) =>\n\t\t\t\toptions.every((option) => variant.options.includes(option)),\n\t\t\t) ?? null,\n\t\t{\n\t\t\ttoResult: (variant) => ({\n\t\t\t\tvariant:\n\t\t\t\t\tvariant === null\n\t\t\t\t\t\t? null\n\t\t\t\t\t\t: Events.variantFromJson(liquidVariant(variant), names),\n\t\t\t}),\n\t\t},\n\t).catch(() => {});\n};\n\ntype CreateContextOptions = {\n\troot: HTMLElement & ICustomElement;\n\tselectedOptions: string[];\n};\n\ntype WalkableNode = Parameters<typeof provide>[2];\n\ntype ProductOptionsContext = ReturnType<typeof initializeProductOptionsContext>;\n\nfunction initializeProductOptionsContext(props: CreateContextOptions) {\n\t// `omit` returns only the rest; `root` is read straight off `props`.\n\tconst publicProps = omit(props, \"root\");\n\tconst [context, methods] = useProduct(props.root);\n\n\tEvents.preload();\n\n\tfunction updateSelectedOptions(options: string[]) {\n\t\tconst previous = untrack(() => publicProps.selectedOptions);\n\t\tprops.root.setAttribute(\"selected-options\", JSON.stringify(options));\n\t\tif (JSON.stringify(previous) !== JSON.stringify(options))\n\t\t\tannounceSelection(\n\t\t\t\tprops.root,\n\t\t\t\tuntrack(() => context.product),\n\t\t\t\toptions,\n\t\t\t);\n\t}\n\n\tfunction updateSelectedOption(option: string, index: number) {\n\t\tconst current = untrack(() => publicProps.selectedOptions);\n\t\tconst options = [...current];\n\t\toptions[index] = option;\n\t\treturn updateSelectedOptions(options);\n\t}\n\n\tcreateGuardedEffect(\n\t\t() => {\n\t\t\tconst selectedOptions = publicProps.selectedOptions;\n\t\t\t// Resolved in the COMPUTE phase. `.find` walks the store's variant\n\t\t\t// array, and walking it here is what subscribes to it — so swapping\n\t\t\t// the product re-resolves the variant. Done from the apply phase, as\n\t\t\t// it was, those reads are untracked: the options were a dependency\n\t\t\t// but the variants were not, and a product replaced underneath this\n\t\t\t// context kept resolving against the previous one's list.\n\t\t\treturn context.product.variants.find((variant) =>\n\t\t\t\tselectedOptions.every((option) => variant.options.includes(option)),\n\t\t\t);\n\t\t},\n\t\t(variant) => {\n\t\t\tif (!variant) return;\n\t\t\t// The currently-selected id is read as a snapshot, deliberately, and\n\t\t\t// must NOT join the dependency list: `methods.variant.update` below\n\t\t\t// is what changes it, so tracking it would re-run this effect on its\n\t\t\t// own result.\n\t\t\tconst current = untrack(\n\t\t\t\t() => context.product.selected_or_first_available_variant.id,\n\t\t\t);\n\t\t\tif (variant.id === current) return;\n\t\t\tmethods.variant.update(variant.id);\n\t\t},\n\t);\n\n\treturn [\n\t\tpublicProps,\n\t\t{\n\t\t\toptions: {\n\t\t\t\tupdate: updateSelectedOptions,\n\t\t\t\tupdateOption: updateSelectedOption,\n\t\t\t},\n\t\t},\n\t] as const;\n}\n\nconst ProductOptionsContextState = createContext(\n\tinitializeProductOptionsContext,\n);\n\nexport const provideProductOptionsContext = (\n\tinitialState: Omit<CreateContextOptions, \"root\">,\n\telement: WalkableNode,\n): ProductOptionsContext => {\n\tconst props = merge(initialState, { root: element });\n\treturn provide(ProductOptionsContextState, props, element);\n};\n\nexport const useProductOptionsContext = (context: ProductOptionsContext) => {\n\treturn context;\n};\n\nexport const useProductOptions = (element: HTMLElement & ICustomElement) => {\n\tconst context: ProductOptionsContext = consume(\n\t\tProductOptionsContextState,\n\t\telement,\n\t);\n\n\tif (!context) {\n\t\tthrow new Error(\n\t\t\t\"ProductOptionsContext not found! Please ensure to wrap your custom element with product-options element.\",\n\t\t);\n\t}\n\n\treturn useProductOptionsContext(context);\n};\n\nexport const getProductOptionsContext = (element: Element) => {\n\tconst context = getContextFromProvider<ProductOptionsContext>(\n\t\tProductOptionsContextState,\n\t\telement,\n\t);\n\treturn useProductOptionsContext(context);\n};\n\nexport const useProductOptionsAt = createRemoteContext<ProductOptionsContext>(\n\tProductOptionsContextState,\n);\n"],"mappings":";;;;;;;AAkBA,IAAM,iBAAiB,YAA2C;CACjE,IAAI,QAAQ,UAAU,KAAA,GACrB,MAAM,IAAI,MACT,WAAW,QAAQ,GAAG,4DACvB;CACD,OAAO;EACN,IAAI,QAAQ;EACZ,OAAO,QAAQ,SAAS,QAAQ,QAAQ,KAAK,KAAK;EAClD,WAAW,QAAQ,aAAa;EAChC,OAAO,QAAQ;EACf,SAAS,QAAQ;CAClB;AACD;;;;;AAMA,IAAM,qBACL,QACA,SACA,YACI;CACJ,MAAM,QAAQ,QAAQ,WAAW,CAAC;CAClC,OAAO,cACN;EACC;EACA,SAAS;GACR,IAAI,OAAO,IAAI,WAAW,QAAQ,EAAE;GACpC,OAAO,QAAQ,SAAS;GACxB,QAAQ,QAAQ,UAAU;EAC3B;EACA,iBAAiB,OAAO,gBAAgB,OAAO,OAAO;CACvD,SAEC,QAAQ,SAAS,MAAM,YACtB,QAAQ,OAAO,WAAW,QAAQ,QAAQ,SAAS,MAAM,CAAC,CAC3D,KAAK,MACN,EACC,WAAW,aAAa,EACvB,SACC,YAAY,OACT,OACA,OAAO,gBAAgB,cAAc,OAAO,GAAG,KAAK,EACzD,GACD,CACD,CAAC,CAAC,YAAY,CAAC,CAAC;AACjB;AAWA,SAAS,gCAAgC,OAA6B;CAErE,MAAM,cAAc,KAAK,OAAO,MAAM;CACtC,MAAM,CAAC,SAAS,WAAW,WAAW,MAAM,IAAI;CAEhD,OAAO,QAAQ;CAEf,SAAS,sBAAsB,SAAmB;EACjD,MAAM,WAAW,cAAc,YAAY,eAAe;EAC1D,MAAM,KAAK,aAAa,oBAAoB,KAAK,UAAU,OAAO,CAAC;EACnE,IAAI,KAAK,UAAU,QAAQ,MAAM,KAAK,UAAU,OAAO,GACtD,kBACC,MAAM,MACN,cAAc,QAAQ,OAAO,GAC7B,OACD;CACF;CAEA,SAAS,qBAAqB,QAAgB,OAAe;EAE5D,MAAM,UAAU,CAAC,GADD,cAAc,YAAY,eACtB,CAAO;EAC3B,QAAQ,SAAS;EACjB,OAAO,sBAAsB,OAAO;CACrC;CAEA,0BACO;EACL,MAAM,kBAAkB,YAAY;EAOpC,OAAO,QAAQ,QAAQ,SAAS,MAAM,YACrC,gBAAgB,OAAO,WAAW,QAAQ,QAAQ,SAAS,MAAM,CAAC,CACnE;CACD,IACC,YAAY;EACZ,IAAI,CAAC,SAAS;EAKd,MAAM,UAAU,cACT,QAAQ,QAAQ,oCAAoC,EAC3D;EACA,IAAI,QAAQ,OAAO,SAAS;EAC5B,QAAQ,QAAQ,OAAO,QAAQ,EAAE;CAClC,CACD;CAEA,OAAO,CACN,aACA,EACC,SAAS;EACR,QAAQ;EACR,cAAc;CACf,EACD,CACD;AACD;AAEA,IAAM,6BAA6B,cAClC,+BACD;AAEA,IAAa,gCACZ,cACA,YAC2B;CAC3B,MAAM,QAAQ,MAAM,cAAc,EAAE,MAAM,QAAQ,CAAC;CACnD,OAAO,QAAQ,4BAA4B,OAAO,OAAO;AAC1D;AAEA,IAAa,4BAA4B,YAAmC;CAC3E,OAAO;AACR;AAEA,IAAa,qBAAqB,YAA0C;CAC3E,MAAM,UAAiC,QACtC,4BACA,OACD;CAEA,IAAI,CAAC,SACJ,MAAM,IAAI,MACT,0GACD;CAGD,OAAO,yBAAyB,OAAO;AACxC;AAEA,IAAa,4BAA4B,YAAqB;CAK7D,OAAO,yBAJS,uBACf,4BACA,OAE+B,CAAO;AACxC;AAEA,IAAa,sBAAsB,oBAClC,0BACD"}
+{"version":3,"file":"useProductOptions.js","names":[],"sources":["../../../src/hooks/useProductOptions.ts"],"sourcesContent":["import { Events } from \"@brytdesigns/shopify-utils\";\nimport {\n\tconsumeContext,\n\tcreateGuardedEffect,\n\tcreateRemoteContext,\n\tgetContextFromProvider,\n} from \"@brytdesigns/web-component-core/utils\";\nimport {\n\tcreateContext,\n\ttype ICustomElement,\n\tprovide,\n} from \"component-register\";\nimport { merge, omit, untrack } from \"solid-js\";\n\nimport type { Product, Variant } from \"../types.js\";\nimport { useProduct } from \"./useProduct.js\";\n\n/** A variant in the shape Shopify's converter takes. */\nconst liquidVariant = (variant: Variant): Events.LiquidVariant => {\n\tif (variant.price === undefined)\n\t\tthrow new Error(\n\t\t\t`Variant ${variant.id} has no price, so shopify:product:select cannot report one.`,\n\t\t);\n\treturn {\n\t\tid: variant.id,\n\t\ttitle: variant.title ?? variant.options.join(\" / \"),\n\t\tavailable: variant.available ?? false,\n\t\tprice: variant.price,\n\t\toptions: variant.options,\n\t};\n};\n\n/**\n * `shopify:product:select` for options a shopper has just chosen, resolving\n * with the variant they point at, or `null` when no variant matches.\n */\nconst announceSelection = (\n\ttarget: HTMLElement,\n\tproduct: Product,\n\toptions: string[],\n) => {\n\tconst names = product.options ?? [];\n\tEvents.productSelect(\n\t\t{\n\t\t\ttarget,\n\t\t\tproduct: {\n\t\t\t\tid: Events.gid(\"Product\", product.id),\n\t\t\t\ttitle: product.title ?? \"\",\n\t\t\t\thandle: product.handle ?? \"\",\n\t\t\t},\n\t\t\tselectedOptions: Events.selectedOptions(names, options),\n\t\t},\n\t\t() =>\n\t\t\tproduct.variants.find((variant) =>\n\t\t\t\toptions.every((option) => variant.options.includes(option)),\n\t\t\t) ?? null,\n\t\t{\n\t\t\ttoResult: (variant) => ({\n\t\t\t\tvariant:\n\t\t\t\t\tvariant === null\n\t\t\t\t\t\t? null\n\t\t\t\t\t\t: Events.variantFromJson(liquidVariant(variant), names),\n\t\t\t}),\n\t\t},\n\t).catch(() => {});\n};\n\ntype CreateContextOptions = {\n\troot: HTMLElement & ICustomElement;\n\tselectedOptions: string[];\n};\n\ntype WalkableNode = Parameters<typeof provide>[2];\n\ntype ProductOptionsContext = ReturnType<typeof initializeProductOptionsContext>;\n\nfunction initializeProductOptionsContext(props: CreateContextOptions) {\n\t// `omit` returns only the rest; `root` is read straight off `props`.\n\tconst publicProps = omit(props, \"root\");\n\tconst [context, methods] = useProduct(props.root);\n\n\tEvents.preload();\n\n\tfunction updateSelectedOptions(options: string[]) {\n\t\tconst previous = untrack(() => publicProps.selectedOptions);\n\t\tprops.root.setAttribute(\"selected-options\", JSON.stringify(options));\n\t\tif (JSON.stringify(previous) !== JSON.stringify(options))\n\t\t\tannounceSelection(\n\t\t\t\tprops.root,\n\t\t\t\tuntrack(() => context.product),\n\t\t\t\toptions,\n\t\t\t);\n\t}\n\n\tfunction updateSelectedOption(option: string, index: number) {\n\t\tconst current = untrack(() => publicProps.selectedOptions);\n\t\tconst options = [...current];\n\t\toptions[index] = option;\n\t\treturn updateSelectedOptions(options);\n\t}\n\n\tcreateGuardedEffect(\n\t\t() => {\n\t\t\tconst selectedOptions = publicProps.selectedOptions;\n\t\t\t// Resolved in the COMPUTE phase. `.find` walks the store's variant\n\t\t\t// array, and walking it here is what subscribes to it — so swapping\n\t\t\t// the product re-resolves the variant. Done from the apply phase, as\n\t\t\t// it was, those reads are untracked: the options were a dependency\n\t\t\t// but the variants were not, and a product replaced underneath this\n\t\t\t// context kept resolving against the previous one's list.\n\t\t\treturn context.product.variants.find((variant) =>\n\t\t\t\tselectedOptions.every((option) => variant.options.includes(option)),\n\t\t\t);\n\t\t},\n\t\t(variant) => {\n\t\t\tif (!variant) return;\n\t\t\t// The currently-selected id is read as a snapshot, deliberately, and\n\t\t\t// must NOT join the dependency list: `methods.variant.update` below\n\t\t\t// is what changes it, so tracking it would re-run this effect on its\n\t\t\t// own result.\n\t\t\tconst current = untrack(\n\t\t\t\t() => context.product.selected_or_first_available_variant.id,\n\t\t\t);\n\t\t\tif (variant.id === current) return;\n\t\t\tmethods.variant.update(variant.id);\n\t\t},\n\t);\n\n\treturn [\n\t\tpublicProps,\n\t\t{\n\t\t\toptions: {\n\t\t\t\tupdate: updateSelectedOptions,\n\t\t\t\tupdateOption: updateSelectedOption,\n\t\t\t},\n\t\t},\n\t] as const;\n}\n\nconst ProductOptionsContextState = createContext(\n\tinitializeProductOptionsContext,\n);\n\nexport const provideProductOptionsContext = (\n\tinitialState: Omit<CreateContextOptions, \"root\">,\n\telement: WalkableNode,\n): ProductOptionsContext => {\n\tconst props = merge(initialState, { root: element });\n\treturn provide(ProductOptionsContextState, props, element);\n};\n\nexport const useProductOptionsContext = (context: ProductOptionsContext) => {\n\treturn context;\n};\n\nexport const useProductOptions = (element: HTMLElement & ICustomElement) => {\n\tconst context = consumeContext<ProductOptionsContext>(\n\t\tProductOptionsContextState,\n\t\telement,\n\t);\n\n\tif (!context) {\n\t\tthrow new Error(\n\t\t\t\"ProductOptionsContext not found! Please ensure to wrap your custom element with product-options element.\",\n\t\t);\n\t}\n\n\treturn useProductOptionsContext(context);\n};\n\nexport const getProductOptionsContext = (element: Element) => {\n\tconst context = getContextFromProvider<ProductOptionsContext>(\n\t\tProductOptionsContextState,\n\t\telement,\n\t);\n\treturn useProductOptionsContext(context);\n};\n\nexport const useProductOptionsAt = createRemoteContext<ProductOptionsContext>(\n\tProductOptionsContextState,\n);\n"],"mappings":";;;;;;;AAkBA,IAAM,iBAAiB,YAA2C;CACjE,IAAI,QAAQ,UAAU,KAAA,GACrB,MAAM,IAAI,MACT,WAAW,QAAQ,GAAG,4DACvB;CACD,OAAO;EACN,IAAI,QAAQ;EACZ,OAAO,QAAQ,SAAS,QAAQ,QAAQ,KAAK,KAAK;EAClD,WAAW,QAAQ,aAAa;EAChC,OAAO,QAAQ;EACf,SAAS,QAAQ;CAClB;AACD;;;;;AAMA,IAAM,qBACL,QACA,SACA,YACI;CACJ,MAAM,QAAQ,QAAQ,WAAW,CAAC;CAClC,OAAO,cACN;EACC;EACA,SAAS;GACR,IAAI,OAAO,IAAI,WAAW,QAAQ,EAAE;GACpC,OAAO,QAAQ,SAAS;GACxB,QAAQ,QAAQ,UAAU;EAC3B;EACA,iBAAiB,OAAO,gBAAgB,OAAO,OAAO;CACvD,SAEC,QAAQ,SAAS,MAAM,YACtB,QAAQ,OAAO,WAAW,QAAQ,QAAQ,SAAS,MAAM,CAAC,CAC3D,KAAK,MACN,EACC,WAAW,aAAa,EACvB,SACC,YAAY,OACT,OACA,OAAO,gBAAgB,cAAc,OAAO,GAAG,KAAK,EACzD,GACD,CACD,CAAC,CAAC,YAAY,CAAC,CAAC;AACjB;AAWA,SAAS,gCAAgC,OAA6B;CAErE,MAAM,cAAc,KAAK,OAAO,MAAM;CACtC,MAAM,CAAC,SAAS,WAAW,WAAW,MAAM,IAAI;CAEhD,OAAO,QAAQ;CAEf,SAAS,sBAAsB,SAAmB;EACjD,MAAM,WAAW,cAAc,YAAY,eAAe;EAC1D,MAAM,KAAK,aAAa,oBAAoB,KAAK,UAAU,OAAO,CAAC;EACnE,IAAI,KAAK,UAAU,QAAQ,MAAM,KAAK,UAAU,OAAO,GACtD,kBACC,MAAM,MACN,cAAc,QAAQ,OAAO,GAC7B,OACD;CACF;CAEA,SAAS,qBAAqB,QAAgB,OAAe;EAE5D,MAAM,UAAU,CAAC,GADD,cAAc,YAAY,eACtB,CAAO;EAC3B,QAAQ,SAAS;EACjB,OAAO,sBAAsB,OAAO;CACrC;CAEA,0BACO;EACL,MAAM,kBAAkB,YAAY;EAOpC,OAAO,QAAQ,QAAQ,SAAS,MAAM,YACrC,gBAAgB,OAAO,WAAW,QAAQ,QAAQ,SAAS,MAAM,CAAC,CACnE;CACD,IACC,YAAY;EACZ,IAAI,CAAC,SAAS;EAKd,MAAM,UAAU,cACT,QAAQ,QAAQ,oCAAoC,EAC3D;EACA,IAAI,QAAQ,OAAO,SAAS;EAC5B,QAAQ,QAAQ,OAAO,QAAQ,EAAE;CAClC,CACD;CAEA,OAAO,CACN,aACA,EACC,SAAS;EACR,QAAQ;EACR,cAAc;CACf,EACD,CACD;AACD;AAEA,IAAM,6BAA6B,cAClC,+BACD;AAEA,IAAa,gCACZ,cACA,YAC2B;CAC3B,MAAM,QAAQ,MAAM,cAAc,EAAE,MAAM,QAAQ,CAAC;CACnD,OAAO,QAAQ,4BAA4B,OAAO,OAAO;AAC1D;AAEA,IAAa,4BAA4B,YAAmC;CAC3E,OAAO;AACR;AAEA,IAAa,qBAAqB,YAA0C;CAC3E,MAAM,UAAU,eACf,4BACA,OACD;CAEA,IAAI,CAAC,SACJ,MAAM,IAAI,MACT,0GACD;CAGD,OAAO,yBAAyB,OAAO;AACxC;AAEA,IAAa,4BAA4B,YAAqB;CAK7D,OAAO,yBAJS,uBACf,4BACA,OAE+B,CAAO;AACxC;AAEA,IAAa,sBAAsB,oBAClC,0BACD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brytdesigns/shopify-product-info-components",
-  "version": "3.3.2",
+  "version": "3.4.0",
   "description": "Headless web components used to render product information based on active product variants",
   "main": "./dist/main/index.js",
   "module": "./dist/main/index.js",
@@ -19,8 +19,8 @@
   "author": "Bryt Designs",
   "license": "ISC",
   "dependencies": {
-    "@brytdesigns/shopify-utils": "3.3.2",
-    "@brytdesigns/web-component-core": "3.3.2",
+    "@brytdesigns/shopify-utils": "3.4.0",
+    "@brytdesigns/web-component-core": "3.4.0",
     "@solidjs/web": "2.0.0-rc.14",
     "component-register": "0.8.7",
     "solid-js": "2.0.0-rc.14"