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

package/dist/main/hooks/useProduct.js

@@ -1,69 +1,48 @@
-import { createContext, provide, consume } from 'component-register';
-import { splitProps, mergeProps, untrack } from 'solid-js';
-import { createWithElementContext, getContextFromProvider } from '@brytdesigns/web-component-core/utils';
-
+import { createRemoteContext, getContextFromProvider } from "@brytdesigns/web-component-core/utils";
+import { merge, omit, untrack } from "solid-js";
+import { consume, createContext, provide } from "component-register";
+//#region src/hooks/useProduct.ts
 function initializeProductContext(props) {
-  const [privateProps, publicProps] = splitProps(props, ["root"]);
-  const state = mergeProps(publicProps, {});
-  function updateSelectedVariant(variantId) {
-    const product = untrack(() => state?.product);
-    if (typeof product?.selected_or_first_available_variant === "undefined" || typeof product === "undefined" || typeof product?.variants === "undefined")
-      return;
-    const newVariant = product.variants.find(
-      (variant) => variant?.id?.toString() === variantId.toString()
-    );
-    if (newVariant?.id?.toString() === product.selected_or_first_available_variant?.id?.toString())
-      return;
-    const newState = {
-      ...product,
-      selected_or_first_available_variant: newVariant
-    };
-    privateProps.root.setAttribute("product", JSON.stringify(newState));
-    privateProps.root.dispatchEvent(
-      new CustomEvent("variant-updated", {
-        detail: {
-          variant: newVariant,
-          product: newState
-        },
-        bubbles: true
-      })
-    );
-  }
-  return [
-    state,
-    {
-      variant: {
-        update: updateSelectedVariant
-      }
-    }
-  ];
+	const publicProps = omit(props, "root");
+	const state = merge(publicProps, {});
+	function updateSelectedVariant(variantId) {
+		const product = untrack(() => state?.product);
+		if (typeof product?.selected_or_first_available_variant === "undefined" || typeof product === "undefined" || typeof product?.variants === "undefined") return;
+		const newVariant = product.variants.find((variant) => variant?.id?.toString() === variantId.toString());
+		if (newVariant?.id?.toString() === product.selected_or_first_available_variant?.id?.toString()) return;
+		const newState = {
+			...product,
+			selected_or_first_available_variant: newVariant
+		};
+		props.root.setAttribute("product", JSON.stringify(newState));
+		props.root.dispatchEvent(new CustomEvent("variant-updated", {
+			detail: {
+				variant: newVariant,
+				product: newState
+			},
+			bubbles: true
+		}));
+	}
+	return [state, { variant: { update: updateSelectedVariant } }];
 }
-const ProductContextState = createContext(initializeProductContext);
-const provideProductContext = (initialState, element) => {
-  const props = mergeProps(initialState, { root: element });
-  return provide(ProductContextState, props, element);
+var ProductContextState = createContext(initializeProductContext);
+var provideProductContext = (initialState, element) => {
+	const props = merge(initialState, { root: element });
+	return provide(ProductContextState, props, element);
 };
-const useProductContext = (context) => {
-  return context;
+var useProductContext = (context) => {
+	return context;
 };
-const useProduct = (element) => {
-  const context = consume(ProductContextState, element);
-  if (!context) {
-    throw console.error(
-      "ProductInfoContext not found! Please ensure to wrap your custom element with product-info element."
-    );
-  }
-  return useProductContext(context);
+var useProduct = (element) => {
+	const context = consume(ProductContextState, element);
+	if (!context) throw new Error("ProductInfoContext not found! Please ensure to wrap your custom element with product-info element.");
+	return useProductContext(context);
 };
-const getProductContext = (element) => {
-  const context = getContextFromProvider(
-    ProductContextState,
-    element
-  );
-  return useProductContext(context);
+var getProductContext = (element) => {
+	return useProductContext(getContextFromProvider(ProductContextState, element));
 };
-const withProductElementContext = createWithElementContext(ProductContextState);
+var useProductAt = createRemoteContext(ProductContextState);
+//#endregion
+export { getProductContext, provideProductContext, useProduct, useProductAt, useProductContext };
 
-export { getProductContext, provideProductContext, useProduct, useProductContext, withProductElementContext };
-//# sourceMappingURL=useProduct.js.map
 //# sourceMappingURL=useProduct.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/useProduct.ts"],"names":[],"mappings":";;;;AAuBA,SAAS,yBAAyB,KAA6B,EAAA;AAC7D,EAAM,MAAA,CAAC,cAAc,WAAW,CAAA,GAAI,WAAW,KAAO,EAAA,CAAC,MAAM,CAAC,CAAA;AAC9D,EAAA,MAAM,KAAQ,GAAA,UAAA,CAAW,WAAa,EAAA,EAAE,CAAA;AAExC,EAAA,SAAS,sBAAsB,SAA4B,EAAA;AACzD,IAAA,MAAM,OAAU,GAAA,OAAA,CAAQ,MAAM,KAAA,EAAO,OAAO,CAAA;AAC5C,IACE,IAAA,OAAO,SAAS,mCAAwC,KAAA,WAAA,IACxD,OAAO,OAAY,KAAA,WAAA,IACnB,OAAO,OAAA,EAAS,QAAa,KAAA,WAAA;AAE7B,MAAA;AACF,IAAM,MAAA,UAAA,GAAa,QAAQ,QAAS,CAAA,IAAA;AAAA,MAClC,CAAC,OAAY,KAAA,OAAA,EAAS,IAAI,QAAS,EAAA,KAAM,UAAU,QAAS;AAAA,KAC9D;AAEA,IAAA,IACE,YAAY,EAAI,EAAA,QAAA,OAChB,OAAQ,CAAA,mCAAA,EAAqC,IAAI,QAAS,EAAA;AAE1D,MAAA;AAEF,IAAA,MAAM,QAAW,GAAA;AAAA,MACf,GAAG,OAAA;AAAA,MACH,mCAAqC,EAAA;AAAA,KACvC;AAEA,IAAA,YAAA,CAAa,KAAK,YAAa,CAAA,SAAA,EAAW,IAAK,CAAA,SAAA,CAAU,QAAQ,CAAC,CAAA;AAElE,IAAA,YAAA,CAAa,IAAK,CAAA,aAAA;AAAA,MAChB,IAAI,YAAY,iBAAmB,EAAA;AAAA,QACjC,MAAQ,EAAA;AAAA,UACN,OAAS,EAAA,UAAA;AAAA,UACT,OAAS,EAAA;AAAA,SACX;AAAA,QACA,OAAS,EAAA;AAAA,OACV;AAAA,KACH;AAAA;AAGF,EAAO,OAAA;AAAA,IACL,KAAA;AAAA,IACA;AAAA,MACE,OAAS,EAAA;AAAA,QACP,MAAQ,EAAA;AAAA;AACV;AACF,GACF;AACF;AAEA,MAAM,mBAAA,GAAsB,cAAc,wBAAwB,CAAA;AAErD,MAAA,qBAAA,GAAwB,CACnC,YAAA,EACA,OACmB,KAAA;AACnB,EAAA,MAAM,QAAQ,UAAW,CAAA,YAAA,EAAc,EAAE,IAAA,EAAM,SAAS,CAAA;AACxD,EAAO,OAAA,OAAA,CAAQ,mBAAqB,EAAA,KAAA,EAAO,OAAO,CAAA;AACpD;AAEa,MAAA,iBAAA,GAAoB,CAAC,OAA4B,KAAA;AAC5D,EAAO,OAAA,OAAA;AACT;AAEa,MAAA,UAAA,GAAa,CAAC,OAA0C,KAAA;AACnE,EAAM,MAAA,OAAA,GAA0B,OAAQ,CAAA,mBAAA,EAAqB,OAAO,CAAA;AAEpE,EAAA,IAAI,CAAC,OAAS,EAAA;AACZ,IAAA,MAAM,OAAQ,CAAA,KAAA;AAAA,MACZ;AAAA,KACF;AAAA;AAGF,EAAA,OAAO,kBAAkB,OAAO,CAAA;AAClC;AAEa,MAAA,iBAAA,GAAoB,CAAC,OAAqB,KAAA;AACrD,EAAA,MAAM,OAAU,GAAA,sBAAA;AAAA,IACd,mBAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,OAAO,kBAAkB,OAAO,CAAA;AAClC;AAEa,MAAA,yBAAA,GAA4B,yBAGvC,mBAAmB","file":"useProduct.js","sourcesContent":["import {\n  type ICustomElement,\n  createContext,\n  provide,\n  consume,\n} from \"component-register\";\nimport { mergeProps, splitProps, untrack } from \"solid-js\";\nimport {\n  getContextFromProvider,\n  createWithElementContext,\n} from \"@brytdesigns/web-component-core/utils\";\n\nimport type { Product } from \"../types\";\n\ntype CreateContextOptions = {\n  root: HTMLElement & ICustomElement;\n  product: Product;\n};\n\ntype WalkableNode = Parameters<typeof provide>[2];\n\ntype ProductContext = ReturnType<typeof initializeProductContext>;\n\nfunction initializeProductContext(props: CreateContextOptions) {\n  const [privateProps, publicProps] = splitProps(props, [\"root\"]);\n  const state = mergeProps(publicProps, {});\n\n  function updateSelectedVariant(variantId: string | number) {\n    const product = untrack(() => state?.product);\n    if (\n      typeof product?.selected_or_first_available_variant === \"undefined\" ||\n      typeof product === \"undefined\" ||\n      typeof product?.variants === \"undefined\"\n    )\n      return;\n    const newVariant = product.variants.find(\n      (variant) => variant?.id?.toString() === variantId.toString(),\n    );\n\n    if (\n      newVariant?.id?.toString() ===\n      product.selected_or_first_available_variant?.id?.toString()\n    )\n      return;\n\n    const newState = {\n      ...product,\n      selected_or_first_available_variant: newVariant,\n    };\n\n    privateProps.root.setAttribute(\"product\", JSON.stringify(newState));\n\n    privateProps.root.dispatchEvent(\n      new CustomEvent(\"variant-updated\", {\n        detail: {\n          variant: newVariant,\n          product: newState,\n        },\n        bubbles: true,\n      }),\n    );\n  }\n\n  return [\n    state,\n    {\n      variant: {\n        update: updateSelectedVariant,\n      },\n    },\n  ] as const;\n}\n\nconst ProductContextState = createContext(initializeProductContext);\n\nexport const provideProductContext = (\n  initialState: Omit<CreateContextOptions, \"root\">,\n  element: WalkableNode,\n): ProductContext => {\n  const props = mergeProps(initialState, { root: element });\n  return provide(ProductContextState, props, element);\n};\n\nexport const useProductContext = (context: ProductContext) => {\n  return context;\n};\n\nexport const useProduct = (element: HTMLElement & ICustomElement) => {\n  const context: ProductContext = consume(ProductContextState, element);\n\n  if (!context) {\n    throw console.error(\n      \"ProductInfoContext not found! Please ensure to wrap your custom element with product-info element.\",\n    );\n  }\n\n  return useProductContext(context);\n};\n\nexport const getProductContext = (element: Element) => {\n  const context = getContextFromProvider<ProductContext>(\n    ProductContextState,\n    element,\n  );\n  return useProductContext(context);\n};\n\nexport const withProductElementContext = createWithElementContext<\n  typeof ProductContextState,\n  ProductContext\n>(ProductContextState);\n"]}
+{"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"}

package/dist/main/hooks/useProductOptions.js

@@ -1,72 +1,51 @@
-import { createContext, provide, consume } from 'component-register';
-import { splitProps, createEffect, untrack, mergeProps } from 'solid-js';
-import { createWithElementContext, getContextFromProvider } from '@brytdesigns/web-component-core/utils';
-import { useProduct } from './useProduct.js';
-
+import { useProduct } from "./useProduct.js";
+import { createGuardedEffect, createRemoteContext, getContextFromProvider } from "@brytdesigns/web-component-core/utils";
+import { merge, omit, untrack } from "solid-js";
+import { consume, createContext, provide } from "component-register";
+//#region src/hooks/useProductOptions.ts
 function initializeProductOptionsContext(props) {
-  const [privateProps, publicProps] = splitProps(props, ["root"]);
-  const [context, methods] = useProduct(privateProps.root);
-  function updateSelectedOptions(options) {
-    privateProps.root.setAttribute("selected-options", JSON.stringify(options));
-  }
-  function updateSelectedOption(option, index) {
-    const current = untrack(() => publicProps.selectedOptions);
-    const options = [...current];
-    options[index] = option;
-    return updateSelectedOptions(options);
-  }
-  createEffect(() => {
-    const variant = context.product.variants.find((variant2) => {
-      return publicProps.selectedOptions.every(
-        (option) => variant2.options.includes(option)
-      );
-    });
-    if (!variant) return;
-    if (variant.id === context.product.selected_or_first_available_variant.id)
-      return;
-    methods.variant.update(variant.id);
-  });
-  return [
-    publicProps,
-    {
-      options: {
-        update: updateSelectedOptions,
-        updateOption: updateSelectedOption
-      }
-    }
-  ];
+	const publicProps = omit(props, "root");
+	const [context, methods] = useProduct(props.root);
+	function updateSelectedOptions(options) {
+		props.root.setAttribute("selected-options", JSON.stringify(options));
+	}
+	function updateSelectedOption(option, index) {
+		const options = [...untrack(() => publicProps.selectedOptions)];
+		options[index] = option;
+		return updateSelectedOptions(options);
+	}
+	createGuardedEffect(() => {
+		const selectedOptions = publicProps.selectedOptions;
+		return context.product.variants.find((variant) => selectedOptions.every((option) => variant.options.includes(option)));
+	}, (variant) => {
+		if (!variant) return;
+		const current = untrack(() => context.product.selected_or_first_available_variant.id);
+		if (variant.id === current) return;
+		methods.variant.update(variant.id);
+	});
+	return [publicProps, { options: {
+		update: updateSelectedOptions,
+		updateOption: updateSelectedOption
+	} }];
 }
-const ProductOptionsContextState = createContext(
-  initializeProductOptionsContext
-);
-const provideProductOptionsContext = (initialState, element) => {
-  const props = mergeProps(initialState, { root: element });
-  return provide(ProductOptionsContextState, props, element);
+var ProductOptionsContextState = createContext(initializeProductOptionsContext);
+var provideProductOptionsContext = (initialState, element) => {
+	const props = merge(initialState, { root: element });
+	return provide(ProductOptionsContextState, props, element);
 };
-const useProductOptionsContext = (context) => {
-  return context;
+var useProductOptionsContext = (context) => {
+	return context;
 };
-const useProductOptions = (element) => {
-  const context = consume(
-    ProductOptionsContextState,
-    element
-  );
-  if (!context) {
-    throw console.error(
-      "ProductOptionsContext not found! Please ensure to wrap your custom element with product-options element."
-    );
-  }
-  return useProductOptionsContext(context);
+var useProductOptions = (element) => {
+	const context = consume(ProductOptionsContextState, element);
+	if (!context) throw new Error("ProductOptionsContext not found! Please ensure to wrap your custom element with product-options element.");
+	return useProductOptionsContext(context);
 };
-const getProductOptionsContext = (element) => {
-  const context = getContextFromProvider(
-    ProductOptionsContextState,
-    element
-  );
-  return useProductOptionsContext(context);
+var getProductOptionsContext = (element) => {
+	return useProductOptionsContext(getContextFromProvider(ProductOptionsContextState, element));
 };
-const withProductOptionsElementContext = createWithElementContext(ProductOptionsContextState);
+var useProductOptionsAt = createRemoteContext(ProductOptionsContextState);
+//#endregion
+export { getProductOptionsContext, provideProductOptionsContext, useProductOptions, useProductOptionsAt, useProductOptionsContext };
 
-export { getProductOptionsContext, provideProductOptionsContext, useProductOptions, useProductOptionsContext, withProductOptionsElementContext };
-//# sourceMappingURL=useProductOptions.js.map
 //# sourceMappingURL=useProductOptions.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/useProductOptions.ts"],"names":["variant"],"mappings":";;;;;AAuBA,SAAS,gCAAgC,KAA6B,EAAA;AACpE,EAAM,MAAA,CAAC,cAAc,WAAW,CAAA,GAAI,WAAW,KAAO,EAAA,CAAC,MAAM,CAAC,CAAA;AAC9D,EAAA,MAAM,CAAC,OAAS,EAAA,OAAO,CAAI,GAAA,UAAA,CAAW,aAAa,IAAI,CAAA;AAEvD,EAAA,SAAS,sBAAsB,OAAmB,EAAA;AAChD,IAAA,YAAA,CAAa,KAAK,YAAa,CAAA,kBAAA,EAAoB,IAAK,CAAA,SAAA,CAAU,OAAO,CAAC,CAAA;AAAA;AAG5E,EAAS,SAAA,oBAAA,CAAqB,QAAgB,KAAe,EAAA;AAC3D,IAAA,MAAM,OAAU,GAAA,OAAA,CAAQ,MAAM,WAAA,CAAY,eAAe,CAAA;AACzD,IAAM,MAAA,OAAA,GAAU,CAAC,GAAG,OAAO,CAAA;AAC3B,IAAA,OAAA,CAAQ,KAAK,CAAI,GAAA,MAAA;AACjB,IAAA,OAAO,sBAAsB,OAAO,CAAA;AAAA;AAGtC,EAAA,YAAA,CAAa,MAAM;AACjB,IAAA,MAAM,UAAU,OAAQ,CAAA,OAAA,CAAQ,QAAS,CAAA,IAAA,CAAK,CAACA,QAAY,KAAA;AACzD,MAAA,OAAO,YAAY,eAAgB,CAAA,KAAA;AAAA,QAAM,CAAC,MAAA,KACxCA,QAAQ,CAAA,OAAA,CAAQ,SAAS,MAAM;AAAA,OACjC;AAAA,KACD,CAAA;AACD,IAAA,IAAI,CAAC,OAAS,EAAA;AACd,IAAA,IAAI,OAAQ,CAAA,EAAA,KAAO,OAAQ,CAAA,OAAA,CAAQ,mCAAoC,CAAA,EAAA;AACrE,MAAA;AACF,IAAQ,OAAA,CAAA,OAAA,CAAQ,MAAO,CAAA,OAAA,CAAQ,EAAE,CAAA;AAAA,GAClC,CAAA;AAED,EAAO,OAAA;AAAA,IACL,WAAA;AAAA,IACA;AAAA,MACE,OAAS,EAAA;AAAA,QACP,MAAQ,EAAA,qBAAA;AAAA,QACR,YAAc,EAAA;AAAA;AAChB;AACF,GACF;AACF;AAEA,MAAM,0BAA6B,GAAA,aAAA;AAAA,EACjC;AACF,CAAA;AAEa,MAAA,4BAAA,GAA+B,CAC1C,YAAA,EACA,OAC0B,KAAA;AAC1B,EAAA,MAAM,QAAQ,UAAW,CAAA,YAAA,EAAc,EAAE,IAAA,EAAM,SAAS,CAAA;AACxD,EAAO,OAAA,OAAA,CAAQ,0BAA4B,EAAA,KAAA,EAAO,OAAO,CAAA;AAC3D;AAEa,MAAA,wBAAA,GAA2B,CAAC,OAAmC,KAAA;AAC1E,EAAO,OAAA,OAAA;AACT;AAEa,MAAA,iBAAA,GAAoB,CAAC,OAA0C,KAAA;AAC1E,EAAA,MAAM,OAAiC,GAAA,OAAA;AAAA,IACrC,0BAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,IAAI,CAAC,OAAS,EAAA;AACZ,IAAA,MAAM,OAAQ,CAAA,KAAA;AAAA,MACZ;AAAA,KACF;AAAA;AAGF,EAAA,OAAO,yBAAyB,OAAO,CAAA;AACzC;AAEa,MAAA,wBAAA,GAA2B,CAAC,OAAqB,KAAA;AAC5D,EAAA,MAAM,OAAU,GAAA,sBAAA;AAAA,IACd,0BAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,OAAO,yBAAyB,OAAO,CAAA;AACzC;AAEa,MAAA,gCAAA,GAAmC,yBAG9C,0BAA0B","file":"useProductOptions.js","sourcesContent":["import {\n  type ICustomElement,\n  createContext,\n  provide,\n  consume,\n} from \"component-register\";\nimport { createEffect, mergeProps, splitProps, untrack } from \"solid-js\";\nimport {\n  getContextFromProvider,\n  createWithElementContext,\n} from \"@brytdesigns/web-component-core/utils\";\n\nimport { useProduct } from \"./useProduct.js\";\n\ntype CreateContextOptions = {\n  root: HTMLElement & ICustomElement;\n  selectedOptions: string[];\n};\n\ntype WalkableNode = Parameters<typeof provide>[2];\n\ntype ProductOptionsContext = ReturnType<typeof initializeProductOptionsContext>;\n\nfunction initializeProductOptionsContext(props: CreateContextOptions) {\n  const [privateProps, publicProps] = splitProps(props, [\"root\"]);\n  const [context, methods] = useProduct(privateProps.root);\n\n  function updateSelectedOptions(options: string[]) {\n    privateProps.root.setAttribute(\"selected-options\", JSON.stringify(options));\n  }\n\n  function updateSelectedOption(option: string, index: number) {\n    const current = untrack(() => publicProps.selectedOptions);\n    const options = [...current];\n    options[index] = option;\n    return updateSelectedOptions(options);\n  }\n\n  createEffect(() => {\n    const variant = context.product.variants.find((variant) => {\n      return publicProps.selectedOptions.every((option) =>\n        variant.options.includes(option),\n      );\n    });\n    if (!variant) return;\n    if (variant.id === context.product.selected_or_first_available_variant.id)\n      return;\n    methods.variant.update(variant.id);\n  });\n\n  return [\n    publicProps,\n    {\n      options: {\n        update: updateSelectedOptions,\n        updateOption: updateSelectedOption,\n      },\n    },\n  ] as const;\n}\n\nconst ProductOptionsContextState = createContext(\n  initializeProductOptionsContext,\n);\n\nexport const provideProductOptionsContext = (\n  initialState: Omit<CreateContextOptions, \"root\">,\n  element: WalkableNode,\n): ProductOptionsContext => {\n  const props = mergeProps(initialState, { root: element });\n  return provide(ProductOptionsContextState, props, element);\n};\n\nexport const useProductOptionsContext = (context: ProductOptionsContext) => {\n  return context;\n};\n\nexport const useProductOptions = (element: HTMLElement & ICustomElement) => {\n  const context: ProductOptionsContext = consume(\n    ProductOptionsContextState,\n    element,\n  );\n\n  if (!context) {\n    throw console.error(\n      \"ProductOptionsContext not found! Please ensure to wrap your custom element with product-options element.\",\n    );\n  }\n\n  return useProductOptionsContext(context);\n};\n\nexport const getProductOptionsContext = (element: Element) => {\n  const context = getContextFromProvider<ProductOptionsContext>(\n    ProductOptionsContextState,\n    element,\n  );\n  return useProductOptionsContext(context);\n};\n\nexport const withProductOptionsElementContext = createWithElementContext<\n  typeof ProductOptionsContextState,\n  ProductOptionsContext\n>(ProductOptionsContextState);\n"]}
+{"version":3,"file":"useProductOptions.js","names":[],"sources":["../../../src/hooks/useProductOptions.ts"],"sourcesContent":["import {\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 { useProduct } from \"./useProduct.js\";\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\tfunction updateSelectedOptions(options: string[]) {\n\t\tprops.root.setAttribute(\"selected-options\", JSON.stringify(options));\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":";;;;;AAwBA,SAAS,gCAAgC,OAA6B;CAErE,MAAM,cAAc,KAAK,OAAO,MAAM;CACtC,MAAM,CAAC,SAAS,WAAW,WAAW,MAAM,IAAI;CAEhD,SAAS,sBAAsB,SAAmB;EACjD,MAAM,KAAK,aAAa,oBAAoB,KAAK,UAAU,OAAO,CAAC;CACpE;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"}

package/dist/main/index.d.ts

@@ -2,6 +2,11 @@
 
 import { ICustomElement } from 'component-register';
 
+/**
+ * `component-register` types `options.element` as a bare `ICustomElement`, but
+ * at runtime it is always also an `HTMLElement`. Every component in this repo
+ * needs the DOM half.
+ */
 export type CorrectComponentOptions = {
 	element: HTMLElement & ICustomElement;
 };
@@ -9,6 +14,13 @@ export type CorrectComponentType<T> = (props: T, options: CorrectComponentOption
 export type Variant = {
 	id: string | number;
 	options: string[];
+	/**
+	 * Shopify sends both of these; this type has only ever modelled the part
+	 * the components needed. They are optional because a theme may hand over a
+	 * trimmed object, and the announcement degrades to the option list.
+	 */
+	title?: string;
+	available?: boolean;
 };
 export type Product = {
 	id: string | number;
@@ -18,11 +30,19 @@ export type Product = {
 export type Props = {
 	product?: Product;
 	isProductPage?: boolean;
+	/** Appended to the announcement when the chosen variant is in stock. */
+	availableLabel: string;
+	/** Appended when it is not. */
+	unavailableLabel: string;
 };
 declare const Name = "product-info";
 declare const Component: CorrectComponentType<Props>;
-type Props$1 = {};
-declare const Name$1 = "product-variant-render";
+type Props$1 = {
+	position: number;
+	name: string;
+	inputType: "radio" | "select";
+};
+declare const Name$1 = "product-option-group";
 declare const Component$1: CorrectComponentType<Props$1>;
 type Props$2 = {
 	selectedOptions: string[];
@@ -30,17 +50,13 @@ type Props$2 = {
 declare const Name$2 = "product-options";
 declare const Component$2: CorrectComponentType<Props$2>;
 type Props$3 = {
-	position: number;
-	name: string;
-	inputType: "radio" | "select";
-};
-declare const Name$3 = "product-option-group";
-declare const Component$3: CorrectComponentType<Props$3>;
-type Props$4 = {
 	target: string | null;
 	preventDefault?: boolean;
 };
-declare const Name$4 = "product-variant-input";
+declare const Name$3 = "product-variant-input";
+declare const Component$3: CorrectComponentType<Props$3>;
+type Props$4 = {};
+declare const Name$4 = "product-variant-render";
 declare const Component$4: CorrectComponentType<Props$4>;
 export declare const useProduct: (element: HTMLElement & ICustomElement) => readonly [
 	{
@@ -62,7 +78,7 @@ export declare const getProductContext: (element: Element) => readonly [
 		};
 	}
 ];
-export declare const withProductElementContext: <D extends unknown>(target: string | import("solid-js").Accessor<string> | import("solid-js").Accessor<() => Element>, dependencies: import("solid-js").Accessor<D> | undefined, cb: (context: readonly [
+export declare const useProductAt: (target: () => string | undefined, host: HTMLElement) => import("solid-js").SourceAccessor<readonly [
 	{
 		product: Product;
 	},
@@ -71,11 +87,15 @@ export declare const withProductElementContext: <D extends unknown>(target: stri
 			readonly update: (variantId: string | number) => void;
 		};
 	}
-], dependencies: D) => void | (() => void)) => void;
+]>;
+export type CreateContextOptions = {
+	root: HTMLElement & ICustomElement;
+	selectedOptions: string[];
+};
 export declare const useProductOptions: (element: HTMLElement & ICustomElement) => readonly [
-	{
-		selectedOptions: string[];
-	},
+	import("solid-js").Omit<CreateContextOptions, [
+		"root"
+	]>,
 	{
 		readonly options: {
 			readonly update: (options: string[]) => void;
@@ -84,9 +104,9 @@ export declare const useProductOptions: (element: HTMLElement & ICustomElement)
 	}
 ];
 export declare const getProductOptionsContext: (element: Element) => readonly [
-	{
-		selectedOptions: string[];
-	},
+	import("solid-js").Omit<CreateContextOptions, [
+		"root"
+	]>,
 	{
 		readonly options: {
 			readonly update: (options: string[]) => void;
@@ -94,24 +114,24 @@ export declare const getProductOptionsContext: (element: Element) => readonly [
 		};
 	}
 ];
-export declare const withProductOptionsElementContext: <D extends unknown>(target: string | import("solid-js").Accessor<string> | import("solid-js").Accessor<() => Element>, dependencies: import("solid-js").Accessor<D> | undefined, cb: (context: readonly [
-	{
-		selectedOptions: string[];
-	},
+export declare const useProductOptionsAt: (target: () => string | undefined, host: HTMLElement) => import("solid-js").SourceAccessor<readonly [
+	import("solid-js").Omit<CreateContextOptions, [
+		"root"
+	]>,
 	{
 		readonly options: {
 			readonly update: (options: string[]) => void;
 			readonly updateOption: (option: string, index: number) => void;
 		};
 	}
-], dependencies: D) => void | (() => void)) => void;
+]>;
 export type ProductInfoProps = Props;
 export type ProductOptionsProps = Props$2;
-export type ProductOptionGroupProps = Props$3;
-export type ProductVariantInputProps = ProductVariantInput.Props;
-export type ProductVariantRenderProps = Props$1;
+export type ProductOptionGroupProps = Props$1;
+export type ProductVariantInputProps = Props$3;
+export type ProductVariantRenderProps = ProductVariantRender.Props;
 
-declare namespace ProductVariantInput {
+declare namespace ProductVariantRender {
 	export { Component$4 as Component, Name$4 as Name, Props$4 as Props };
 }
 

package/dist/main/index.js

@@ -1,43 +1,32 @@
-import { customShadowlessElement, correctElementType } from '@brytdesigns/web-component-core/utils';
-import { ProductInfo, ProductOptions, ProductOptionGroup, ProductVariantInput, ProductVariantRender } from './components/index.js';
-export { getProductContext, getProductOptionsContext, useProduct, useProductOptions, withProductElementContext, withProductOptionsElementContext } from './hooks/index.js';
+import { getProductContext, useProduct, useProductAt } from "./hooks/useProduct.js";
+import { getProductOptionsContext, useProductOptions, useProductOptionsAt } from "./hooks/useProductOptions.js";
+import "./hooks/index.js";
+import { Component, Name } from "./components/product-info.js";
+import { Component as Component$1, Name as Name$1 } from "./components/product-option-group.js";
+import { Component as Component$2, Name as Name$2 } from "./components/product-options.js";
+import { Component as Component$3, Name as Name$3 } from "./components/product-variant-input.js";
+import { Component as Component$4, Name as Name$4 } from "./components/product-variant-render.js";
+import "./components/index.js";
+import { customShadowlessElement } from "@brytdesigns/web-component-core/utils";
+//#region src/index.ts
+customShadowlessElement(Name, {
+	product: void 0,
+	isProductPage: false,
+	availableLabel: "In stock",
+	unavailableLabel: "Out of stock"
+}, Component);
+customShadowlessElement(Name$2, { selectedOptions: [] }, Component$2);
+customShadowlessElement(Name$1, {
+	position: 0,
+	name: "",
+	inputType: "radio"
+}, Component$1);
+customShadowlessElement(Name$3, {
+	target: "",
+	preventDefault: true
+}, Component$3);
+customShadowlessElement(Name$4, {}, Component$4);
+//#endregion
+export { getProductContext, getProductOptionsContext, useProduct, useProductAt, useProductOptions, useProductOptionsAt };
 
-customShadowlessElement(
-  ProductInfo.Name,
-  {
-    product: void 0,
-    isProductPage: false
-  },
-  correctElementType(ProductInfo.Component)
-);
-customShadowlessElement(
-  ProductOptions.Name,
-  {
-    selectedOptions: []
-  },
-  correctElementType(ProductOptions.Component)
-);
-customShadowlessElement(
-  ProductOptionGroup.Name,
-  {
-    position: 0,
-    name: "",
-    inputType: "radio"
-  },
-  correctElementType(ProductOptionGroup.Component)
-);
-customShadowlessElement(
-  ProductVariantInput.Name,
-  {
-    target: "",
-    preventDefault: true
-  },
-  correctElementType(ProductVariantInput.Component)
-);
-customShadowlessElement(
-  ProductVariantRender.Name,
-  {},
-  correctElementType(ProductVariantRender.Component)
-);
-//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/main/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"names":[],"mappings":";;;;AAmBA,uBAAA;AAAA,EACE,WAAY,CAAA,IAAA;AAAA,EACZ;AAAA,IACE,OAAS,EAAA,MAAA;AAAA,IACT,aAAe,EAAA;AAAA,GACjB;AAAA,EACA,kBAAA,CAAmB,YAAY,SAAS;AAC1C,CAAA;AAEA,uBAAA;AAAA,EACE,cAAe,CAAA,IAAA;AAAA,EACf;AAAA,IACE,iBAAiB;AAAC,GACpB;AAAA,EACA,kBAAA,CAAmB,eAAe,SAAS;AAC7C,CAAA;AAEA,uBAAA;AAAA,EACE,kBAAmB,CAAA,IAAA;AAAA,EACnB;AAAA,IACE,QAAU,EAAA,CAAA;AAAA,IACV,IAAM,EAAA,EAAA;AAAA,IACN,SAAW,EAAA;AAAA,GACb;AAAA,EACA,kBAAA,CAAmB,mBAAmB,SAAS;AACjD,CAAA;AAEA,uBAAA;AAAA,EACE,mBAAoB,CAAA,IAAA;AAAA,EACpB;AAAA,IACE,MAAQ,EAAA,EAAA;AAAA,IACR,cAAgB,EAAA;AAAA,GAClB;AAAA,EACA,kBAAA,CAAmB,oBAAoB,SAAS;AAClD,CAAA;AAEA,uBAAA;AAAA,EACE,oBAAqB,CAAA,IAAA;AAAA,EACrB,EAAC;AAAA,EACD,kBAAA,CAAmB,qBAAqB,SAAS;AACnD,CAAA","file":"index.js","sourcesContent":["import {\n  customShadowlessElement,\n  correctElementType,\n} from \"@brytdesigns/web-component-core/utils\";\n\nimport {\n  ProductInfo,\n  ProductOptions,\n  ProductOptionGroup,\n  ProductVariantInput,\n  ProductVariantRender,\n} from \"./components/index.js\";\n\nexport type ProductInfoProps = ProductInfo.Props;\nexport type ProductOptionsProps = ProductOptions.Props;\nexport type ProductOptionGroupProps = ProductOptionGroup.Props;\nexport type ProductVariantInputProps = ProductVariantInput.Props;\nexport type ProductVariantRenderProps = ProductVariantRender.Props;\n\ncustomShadowlessElement(\n  ProductInfo.Name,\n  {\n    product: undefined,\n    isProductPage: false,\n  },\n  correctElementType(ProductInfo.Component),\n);\n\ncustomShadowlessElement(\n  ProductOptions.Name,\n  {\n    selectedOptions: [],\n  },\n  correctElementType(ProductOptions.Component),\n);\n\ncustomShadowlessElement(\n  ProductOptionGroup.Name,\n  {\n    position: 0,\n    name: \"\",\n    inputType: \"radio\",\n  },\n  correctElementType(ProductOptionGroup.Component),\n);\n\ncustomShadowlessElement(\n  ProductVariantInput.Name,\n  {\n    target: \"\",\n    preventDefault: true,\n  },\n  correctElementType(ProductVariantInput.Component),\n);\n\ncustomShadowlessElement(\n  ProductVariantRender.Name,\n  {},\n  correctElementType(ProductVariantRender.Component),\n);\n\nexport {\n  useProduct,\n  useProductOptions,\n  getProductContext,\n  getProductOptionsContext,\n  withProductElementContext,\n  withProductOptionsElementContext,\n} from \"./hooks/index.js\";\n"]}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/index.ts"],"sourcesContent":["import { customShadowlessElement } from \"@brytdesigns/web-component-core/utils\";\n\nimport {\n\tProductInfo,\n\tProductOptionGroup,\n\tProductOptions,\n\tProductVariantInput,\n\tProductVariantRender,\n} from \"./components/index.js\";\n\nexport type ProductInfoProps = ProductInfo.Props;\nexport type ProductOptionsProps = ProductOptions.Props;\nexport type ProductOptionGroupProps = ProductOptionGroup.Props;\nexport type ProductVariantInputProps = ProductVariantInput.Props;\nexport type ProductVariantRenderProps = ProductVariantRender.Props;\n\ncustomShadowlessElement(\n\tProductInfo.Name,\n\t{\n\t\tproduct: undefined,\n\t\tisProductPage: false,\n\t\tavailableLabel: \"In stock\",\n\t\tunavailableLabel: \"Out of stock\",\n\t},\n\tProductInfo.Component,\n);\n\ncustomShadowlessElement(\n\tProductOptions.Name,\n\t{\n\t\tselectedOptions: [],\n\t},\n\tProductOptions.Component,\n);\n\ncustomShadowlessElement(\n\tProductOptionGroup.Name,\n\t{\n\t\tposition: 0,\n\t\tname: \"\",\n\t\tinputType: \"radio\",\n\t},\n\tProductOptionGroup.Component,\n);\n\ncustomShadowlessElement(\n\tProductVariantInput.Name,\n\t{\n\t\ttarget: \"\",\n\t\tpreventDefault: true,\n\t},\n\tProductVariantInput.Component,\n);\n\ncustomShadowlessElement(\n\tProductVariantRender.Name,\n\t{},\n\tProductVariantRender.Component,\n);\n\nexport {\n\tgetProductContext,\n\tgetProductOptionsContext,\n\tuseProduct,\n\tuseProductAt,\n\tuseProductOptions,\n\tuseProductOptionsAt,\n} from \"./hooks/index.js\";\n"],"mappings":";;;;;;;;;;;AAgBA,wBACC,MACA;CACC,SAAS,KAAA;CACT,eAAe;CACf,gBAAgB;CAChB,kBAAkB;AACnB,GACA,SACD;AAEA,wBACC,QACA,EACC,iBAAiB,CAAC,EACnB,GACA,WACD;AAEA,wBACC,QACA;CACC,UAAU;CACV,MAAM;CACN,WAAW;AACZ,GACA,WACD;AAEA,wBACC,QACA;CACC,QAAQ;CACR,gBAAgB;AACjB,GACA,WACD;AAEA,wBACC,QACA,CAAC,GACD,WACD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brytdesigns/shopify-product-info-components",
-  "version": "1.1.9",
+  "version": "3.0.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",
@@ -9,7 +9,7 @@
   "exports": {
     ".": {
       "types": "./dist/main/index.d.ts",
-      "module": "./dist/main/index.js"
+      "default": "./dist/main/index.js"
     }
   },
   "files": [
@@ -19,17 +19,17 @@
   "author": "Bryt Designs",
   "license": "ISC",
   "dependencies": {
+    "@brytdesigns/web-component-core": "3.0.0",
+    "@solidjs/web": "2.0.0-rc.14",
     "component-register": "0.8.7",
-    "solid-element": "^1.9.1",
-    "solid-js": "^1.9.9",
-    "@brytdesigns/web-component-core": "1.1.6"
+    "solid-js": "2.0.0-rc.14"
   },
   "devDependencies": {
-    "dts-bundle-generator": "^9.5.1",
-    "tsup": "^8.4.0"
+    "@repo/vite-config": "0.0.0",
+    "vite": "^8.2.2"
   },
   "scripts": {
-    "build": "tsup --clean",
+    "build": "vite build",
     "typecheck": "tsc --noEmit"
   }
 }