@brytdesigns/shopify-ajax-cart-components 1.0.0

package/dist/main/components/cart-data-conditions.js

@@ -0,0 +1,98 @@
+import { createMemo, For, Show } from 'solid-js';
+import html from 'solid-js/html';
+import { useFullPropertyPath, useCartValue } from '../hooks/index.js';
+import { formatValue, getValueFromPath } from '../utils/index.js';
+
+function getValue(data, value) {
+  if (typeof value === "undefined" || !data) return void 0;
+  if (value.type === "primitive") {
+    return value.value;
+  }
+  if (value.type === "property" && value.name) {
+    return getValueFromPath(data, value.name);
+  }
+  return null;
+}
+function invertResult(result, invert = false) {
+  if (invert) return !result;
+  return result;
+}
+function validateConditions(conditions, data) {
+  if (!data) return false;
+  const result = conditions.every((condition) => {
+    let valueA = getValue(data, condition.valueA), valueB = getValue(data, condition.valueB), result2 = false;
+    if (typeof valueA === "undefined" && typeof valueB === "undefined")
+      return false;
+    if (condition.type === "typeof") {
+      result2 = typeof valueA === valueB;
+    }
+    if (condition.type === "includes_property") {
+      result2 = valueA.some(
+        (v) => v[condition.valueA?.property_name || ""] === valueB
+      );
+    }
+    if (condition.type === "equals") {
+      result2 = formatValue(condition.format || "", valueA) === formatValue(condition.format || "", valueB);
+    }
+    if (condition.type === "not_equals") {
+      result2 = formatValue(condition.format || "", valueA) !== formatValue(condition.format || "", valueB);
+    }
+    if (condition.type === "lt") {
+      result2 = formatValue(condition.format || "", valueA) < formatValue(condition.format || "", valueB);
+    }
+    if (condition.type === "lte") {
+      result2 = formatValue(condition.format || "", valueA) <= formatValue(condition.format || "", valueB);
+    }
+    if (condition.type === "gt") {
+      result2 = formatValue(condition.format || "", valueA) > formatValue(condition.format || "", valueB);
+    }
+    if (condition.type === "gte") {
+      result2 = formatValue(condition.format || "", valueA) >= formatValue(condition.format || "", valueB);
+    }
+    return invertResult(result2, condition.invert);
+  });
+  return result;
+}
+const CartDataConditions = (_, { element }) => {
+  const conditionTemplates = Array.from(element.children).filter(
+    (child) => child.tagName === "TEMPLATE" && child.hasAttribute("conditions")
+  );
+  if (!conditionTemplates.length)
+    return console.error(
+      "cart-data-conditions: no templates found with any conditions attribute!"
+    );
+  const allConditions = createMemo(
+    () => conditionTemplates.map((tmpl) => {
+      const conditions = tmpl.getAttribute("conditions");
+      if (!conditions)
+        console.warn("cart-data-conditions: conditions attribute is required!");
+      try {
+        return JSON.parse(conditions);
+      } catch (e) {
+        return [];
+      }
+    })
+  );
+  const fullPath = useFullPropertyPath({ element });
+  const data = useCartValue({
+    path: fullPath,
+    element
+  });
+  element.replaceChildren(...[]);
+  return html`
+    <${For} each=${() => conditionTemplates}>
+      ${(tmpl, idx) => {
+    const conditions = allConditions()[idx()];
+    return html`
+          <${Show} when=${() => validateConditions(conditions, data())}>
+            ${() => Array.from(tmpl.content.cloneNode(true).childNodes)}
+          <//>
+        `;
+  }}
+    <//>
+  `;
+};
+
+export { CartDataConditions };
+//# sourceMappingURL=cart-data-conditions.js.map
+//# sourceMappingURL=cart-data-conditions.js.map

package/dist/main/components/cart-data-conditions.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/cart-data-conditions.ts"],"names":["result"],"mappings":"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","file":"cart-data-conditions.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-utils\";\n\nimport { Show, createMemo, For, type Accessor, createEffect } from \"solid-js\";\nimport html from \"solid-js/html\";\n\nimport { useFullPropertyPath, useCartValue } from \"../hooks/index.js\";\nimport { getValueFromPath, formatValue, type Format } from \"../utils/index.js\";\n\ntype CartDataConditionsProps = {};\n\ntype ConditionValue = {\n  type: \"primitive\" | \"property\";\n  name?: string;\n  value?: string | number | boolean | null;\n  property_name?: string;\n};\n\ntype Condition = {\n  type:\n    | \"typeof\"\n    | \"includes_property\"\n    | \"equals\"\n    | \"not_equals\"\n    | \"lt\"\n    | \"lte\"\n    | \"gt\"\n    | \"gte\";\n  format?: Format;\n  invert?: boolean;\n  valueA: ConditionValue;\n  valueB: ConditionValue;\n};\n\nfunction getValue<T>(data: T, value: ConditionValue): any {\n  if (typeof value === \"undefined\" || !data) return undefined;\n\n  if (value.type === \"primitive\") {\n    return value.value;\n  }\n\n  if (value.type === \"property\" && value.name) {\n    //@ts-ignore\n    return getValueFromPath<T>(data, value.name);\n  }\n\n  return null;\n}\n\nfunction invertResult(result: boolean, invert = false) {\n  if (invert) return !result;\n  return result;\n}\n\nfunction validateConditions<T>(conditions: Condition[], data: T) {\n  if (!data) return false;\n  const result = conditions.every((condition) => {\n    let valueA = getValue(data, condition.valueA),\n      valueB = getValue(data, condition.valueB),\n      result = false;\n\n    if (typeof valueA === \"undefined\" && typeof valueB === \"undefined\")\n      return false;\n\n    if (condition.type === \"typeof\") {\n      result = typeof valueA === valueB;\n    }\n\n    if (condition.type === \"includes_property\") {\n      result = valueA.some(\n        (v: any) => v[condition.valueA?.property_name || \"\"] === valueB,\n      );\n    }\n\n    if (condition.type === \"equals\") {\n      result =\n        formatValue(condition.format || \"\", valueA) ===\n        formatValue(condition.format || \"\", valueB);\n    }\n\n    if (condition.type === \"not_equals\") {\n      result =\n        formatValue(condition.format || \"\", valueA) !==\n        formatValue(condition.format || \"\", valueB);\n    }\n\n    if (condition.type === \"lt\") {\n      result =\n        formatValue(condition.format || \"\", valueA) <\n        formatValue(condition.format || \"\", valueB);\n    }\n\n    if (condition.type === \"lte\") {\n      result =\n        formatValue(condition.format || \"\", valueA) <=\n        formatValue(condition.format || \"\", valueB);\n    }\n\n    if (condition.type === \"gt\") {\n      result =\n        formatValue(condition.format || \"\", valueA) >\n        formatValue(condition.format || \"\", valueB);\n    }\n\n    if (condition.type === \"gte\") {\n      result =\n        formatValue(condition.format || \"\", valueA) >=\n        formatValue(condition.format || \"\", valueB);\n    }\n\n    return invertResult(result, condition.invert);\n  });\n\n  return result;\n}\n\nexport const CartDataConditions: CorrectComponentType<\n  CartDataConditionsProps\n> = (_, { element }) => {\n  const conditionTemplates = Array.from(element.children).filter(\n    (child) => child.tagName === \"TEMPLATE\" && child.hasAttribute(\"conditions\"),\n  );\n  if (!conditionTemplates.length)\n    return console.error(\n      \"cart-data-conditions: no templates found with any conditions attribute!\",\n    );\n\n  const allConditions = createMemo(() =>\n    conditionTemplates.map((tmpl) => {\n      const conditions = tmpl.getAttribute(\"conditions\");\n      if (!conditions)\n        console.warn(\"cart-data-conditions: conditions attribute is required!\");\n\n      try {\n        return JSON.parse(conditions!);\n      } catch (e) {\n        return [];\n      }\n    }),\n  );\n\n  const fullPath = useFullPropertyPath({ element });\n  const data = useCartValue({\n    path: fullPath,\n    element,\n  });\n\n  element.replaceChildren(...[]);\n\n  return html`\n    <${For} each=${() => conditionTemplates}>\n      ${(tmpl: HTMLTemplateElement, idx: Accessor<number>) => {\n        const conditions = allConditions()[idx()];\n        return html`\n          <${Show} when=${() => validateConditions(conditions, data())}>\n            ${() => Array.from(tmpl.content.cloneNode(true).childNodes)}\n          <//>\n        `;\n      }}\n    <//>\n  `;\n};\n"]}

package/dist/main/components/cart-data-injection.js

@@ -0,0 +1,89 @@
+import { useFullPropertyPath, useFormattedValue } from '../hooks/index.js';
+import { getTargetElement } from '../utils/index.js';
+import { createEffect, on, onCleanup } from 'solid-js';
+
+const VALID_INJECTION_TYPES = ["attribute", "property", "template"];
+const CartDataInjection = (props, { element }) => {
+  if (!props.propertyName)
+    return console.warn("cart-data-injection: No path attribute provided.");
+  if (!props.target)
+    return console.warn("cart-data-injection: No target attribute found!");
+  if (!props.attributeName)
+    return console.warn(
+      "cart-data-injection: No attribute-name attribute found!"
+    );
+  if (!props.injectionType || props.injectionType && !VALID_INJECTION_TYPES.includes(props.injectionType))
+    return console.warn(
+      "cart-data-injection: Invalid injection-type attribute provided."
+    );
+  const mergedProps = {
+    element,
+    path: () => props.propertyName
+  };
+  const fullPath = useFullPropertyPath(mergedProps);
+  const value = useFormattedValue({
+    path: fullPath,
+    element,
+    get format() {
+      return props.format;
+    }
+  });
+  createEffect(
+    on(
+      () => {
+        return {
+          target: getTargetElement(element, props.target),
+          value: value(),
+          attributeName: props.attributeName,
+          injectionType: props.injectionType,
+          propertyName: props.propertyName
+        };
+      },
+      ({ target, value: value2, attributeName, injectionType, propertyName }) => {
+        if (!target)
+          return console.warn(
+            `cart-data-injection: Unable to find element with selector of: ${props.target}`
+          );
+        if (injectionType === "attribute" && value2) {
+          target.setAttribute(attributeName, value2);
+          return;
+        }
+        if (injectionType === "property" && value2) {
+          target[attributeName] = value2;
+          return;
+        }
+        if (injectionType === "template" && value2) {
+          if (attributeName === "style") {
+            const styleTmpl = target[attributeName].cssText;
+            setTimeout(() => {
+              target[attributeName].cssText = styleTmpl.replace(
+                //@ts-ignore
+                `{${propertyName}}`,
+                value2
+              );
+            });
+            return onCleanup(() => {
+              target[attributeName].cssText = styleTmpl;
+            });
+          }
+          const tmpValue = target.getAttribute(attributeName);
+          if (!tmpValue || !value2)
+            return console.warn("Unable to inject value into template");
+          setTimeout(() => {
+            target.setAttribute(
+              attributeName,
+              tmpValue.replace(`{${propertyName}}`, value2)
+            );
+          });
+          return onCleanup(() => {
+            target.setAttribute(attributeName, tmpValue);
+          });
+        }
+      }
+    )
+  );
+};
+
+export { CartDataInjection };
+//# sourceMappingURL=cart-data-injection.js.map
+//# sourceMappingURL=cart-data-injection.js.map

package/dist/main/components/cart-data-injection.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/cart-data-injection.ts"],"names":["value"],"mappings":"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","file":"cart-data-injection.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-utils\";\n\nimport {\n  type ValidAjaxPath,\n  useFormattedValue,\n  useFullPropertyPath,\n} from \"../hooks/index.js\";\nimport { type Format, getTargetElement } from \"../utils/index.js\";\nimport { createEffect, on, onCleanup } from \"solid-js\";\n\ntype CartDataInjectionProps = {\n  propertyName: ValidAjaxPath;\n  format?: Format;\n  target: string;\n  attributeName: string;\n  injectionType: \"attribute\" | \"property\" | \"template\";\n};\n\nconst VALID_INJECTION_TYPES = [\"attribute\", \"property\", \"template\"];\n\nexport const CartDataInjection: CorrectComponentType<CartDataInjectionProps> = (\n  props,\n  { element },\n) => {\n  if (!props.propertyName)\n    return console.warn(\"cart-data-injection: No path attribute provided.\");\n  if (!props.target)\n    return console.warn(\"cart-data-injection: No target attribute found!\");\n  if (!props.attributeName)\n    return console.warn(\n      \"cart-data-injection: No attribute-name attribute found!\",\n    );\n\n  if (\n    !props.injectionType ||\n    (props.injectionType &&\n      !VALID_INJECTION_TYPES.includes(props.injectionType))\n  )\n    return console.warn(\n      \"cart-data-injection: Invalid injection-type attribute provided.\",\n    );\n\n  const mergedProps = {\n    element,\n    path: () => props.propertyName,\n  };\n  const fullPath = useFullPropertyPath(mergedProps);\n  const value = useFormattedValue({\n    path: fullPath,\n    element,\n    get format() {\n      return props.format;\n    },\n  });\n\n  createEffect(\n    on(\n      () => {\n        return {\n          target: getTargetElement(element, props.target),\n          value: value(),\n          attributeName: props.attributeName,\n          injectionType: props.injectionType,\n          propertyName: props.propertyName,\n        };\n      },\n      ({ target, value, attributeName, injectionType, propertyName }) => {\n        if (!target)\n          return console.warn(\n            `cart-data-injection: Unable to find element with selector of: ${props.target}`,\n          );\n\n        if (injectionType === \"attribute\" && value) {\n          target.setAttribute(attributeName, value);\n          return;\n        }\n\n        if (injectionType === \"property\" && value) {\n          //@ts-ignore\n          target[attributeName] = value;\n          return;\n        }\n\n        if (injectionType === \"template\" && value) {\n          if (attributeName === \"style\") {\n            //@ts-ignore\n            const styleTmpl = target[attributeName].cssText;\n            setTimeout(() => {\n              //@ts-ignore\n              target[attributeName].cssText = styleTmpl.replace(\n                //@ts-ignore\n                `{${propertyName}}`,\n                value,\n              );\n            });\n            return onCleanup(() => {\n              //@ts-ignore\n              target[attributeName].cssText = styleTmpl;\n            });\n          }\n          const tmpValue = target.getAttribute(attributeName);\n          if (!tmpValue || !value)\n            return console.warn(\"Unable to inject value into template\");\n          setTimeout(() => {\n            target.setAttribute(\n              attributeName,\n\n              tmpValue.replace(`{${propertyName}}`, value),\n            );\n          });\n          return onCleanup(() => {\n            target.setAttribute(attributeName, tmpValue);\n          });\n        }\n      },\n    ),\n  );\n};\n"]}

package/dist/main/components/cart-data-listener-status.js

@@ -0,0 +1,36 @@
+import { createMemo } from 'solid-js';
+import { useListenerStatus } from '../hooks/index.js';
+import { getTemplateContent } from '../utils/index.js';
+
+const CartDataListenerStatus = (_, { element }) => {
+  const [status] = useListenerStatus(element);
+  if (!status)
+    return console.error(
+      "cart-data-listener-status: no listener context provided!"
+    );
+  const templates = {
+    default: getTemplateContent(element, "default"),
+    loading: getTemplateContent(element, "loading"),
+    success: getTemplateContent(element, "success"),
+    error: getTemplateContent(element, "error")
+  };
+  let previousState = null;
+  const currentStatus = () => {
+    const s = status();
+    if (!templates[s]) return previousState;
+    previousState = s;
+    return s;
+  };
+  element.replaceChildren(...[]);
+  return createMemo(() => {
+    const state = currentStatus();
+    if (!state) return null;
+    const template = templates[state];
+    if (!template) return null;
+    return Array.from(template.cloneNode(true).childNodes);
+  });
+};
+
+export { CartDataListenerStatus };
+//# sourceMappingURL=cart-data-listener-status.js.map
+//# sourceMappingURL=cart-data-listener-status.js.map

package/dist/main/components/cart-data-listener-status.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/cart-data-listener-status.ts"],"names":[],"mappings":";;;;AAOO,MAAM,sBAAmD,GAAA,CAC9D,CACA,EAAA,EAAE,SACC,KAAA;AACH,EAAA,MAAM,CAAC,MAAM,CAAI,GAAA,iBAAA,CAAkB,OAAO,CAAA;AAC1C,EAAA,IAAI,CAAC,MAAA;AACH,IAAA,OAAO,OAAQ,CAAA,KAAA;AAAA,MACb;AAAA,KACF;AAEF,EAAA,MAAM,SAAY,GAAA;AAAA,IAChB,OAAA,EAAS,kBAAmB,CAAA,OAAA,EAAS,SAAS,CAAA;AAAA,IAC9C,OAAA,EAAS,kBAAmB,CAAA,OAAA,EAAS,SAAS,CAAA;AAAA,IAC9C,OAAA,EAAS,kBAAmB,CAAA,OAAA,EAAS,SAAS,CAAA;AAAA,IAC9C,KAAA,EAAO,kBAAmB,CAAA,OAAA,EAAS,OAAO;AAAA,GAC5C;AAEA,EAAA,IAAI,aAA+B,GAAA,IAAA;AAEnC,EAAA,MAAM,gBAAgB,MAAM;AAC1B,IAAA,MAAM,IAAI,MAAO,EAAA;AACjB,IAAA,IAAI,CAAC,SAAA,CAAU,CAAC,CAAA,EAAU,OAAA,aAAA;AAC1B,IAAgB,aAAA,GAAA,CAAA;AAChB,IAAO,OAAA,CAAA;AAAA,GACT;AAEA,EAAQ,OAAA,CAAA,eAAA,CAAgB,GAAG,EAAE,CAAA;AAE7B,EAAA,OAAO,WAAW,MAAM;AACtB,IAAA,MAAM,QAAQ,aAAc,EAAA;AAC5B,IAAI,IAAA,CAAC,OAAc,OAAA,IAAA;AACnB,IAAM,MAAA,QAAA,GAAW,UAAU,KAAK,CAAA;AAChC,IAAI,IAAA,CAAC,UAAiB,OAAA,IAAA;AACtB,IAAA,OAAO,MAAM,IAAK,CAAA,QAAA,CAAS,SAAU,CAAA,IAAI,EAAE,UAAU,CAAA;AAAA,GACtD,CAAA;AACH","file":"cart-data-listener-status.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-utils\";\n\nimport { createMemo } from \"solid-js\";\n\nimport { type Status, useListenerStatus } from \"../hooks/index.js\";\nimport { getTemplateContent } from \"../utils/index.js\";\n\nexport const CartDataListenerStatus: CorrectComponentType<{}> = (\n  _,\n  { element },\n) => {\n  const [status] = useListenerStatus(element);\n  if (!status)\n    return console.error(\n      \"cart-data-listener-status: no listener context provided!\",\n    );\n\n  const templates = {\n    default: getTemplateContent(element, \"default\"),\n    loading: getTemplateContent(element, \"loading\"),\n    success: getTemplateContent(element, \"success\"),\n    error: getTemplateContent(element, \"error\"),\n  };\n\n  let previousState: Status | null = null;\n\n  const currentStatus = () => {\n    const s = status();\n    if (!templates[s]) return previousState;\n    previousState = s;\n    return s;\n  };\n\n  element.replaceChildren(...[]);\n\n  return createMemo(() => {\n    const state = currentStatus();\n    if (!state) return null;\n    const template = templates[state];\n    if (!template) return null;\n    return Array.from(template.cloneNode(true).childNodes);\n  });\n};\n"]}

package/dist/main/components/cart-data-listener.js

@@ -0,0 +1,163 @@
+import { createEffect, on, onCleanup, createUniqueId } from 'solid-js';
+import debounce from 'lodash.debounce';
+import { provideListenerStatusContext, useFullPropertyPath, useCartValue } from '../hooks/index.js';
+import AjaxCart from '@brytdesigns/shopify-ajax-cart';
+import { parseNestedObject } from '../utils/index.js';
+
+const CartDataListener = (props, { element }) => {
+  const [_, setStatus] = provideListenerStatusContext({
+    element,
+    get status() {
+      return props.status;
+    }
+  });
+  const path = useFullPropertyPath({
+    element
+  });
+  const data = useCartValue({
+    element,
+    path
+  });
+  let currentEventId = null;
+  createEffect(
+    on(
+      () => ({
+        method: props.method,
+        on: props.on,
+        preventDefault: props.preventDefault,
+        data: data(),
+        debounceDelay: props.debounceDelay,
+        resetForm: props.resetForm,
+        resetStatusDelay: props.resetStatusDelay
+      }),
+      ({
+        method,
+        on: on2,
+        preventDefault,
+        data: data2,
+        debounceDelay,
+        resetForm,
+        resetStatusDelay
+      }) => {
+        if (!method)
+          return console.error(
+            "cart-item-listener: method property is required!"
+          );
+        if (!on2)
+          return console.error("cart-item-listener: on property is required!");
+        let resetStatusId = null, tempEventId = null;
+        function onEvent(e) {
+          const cart = AjaxCart;
+          currentEventId = createUniqueId(), tempEventId = currentEventId;
+          if (preventDefault) e.preventDefault();
+          async function handleStatus(promise) {
+            setStatus("loading");
+            return promise.then((data3) => {
+              setStatus("success");
+              return data3;
+            }).catch((error) => {
+              setStatus("error");
+              return error;
+            }).finally(() => {
+              if (resetStatusDelay > 0) {
+                resetStatusId = setTimeout(() => {
+                  setStatus("default");
+                  resetStatusId = null;
+                }, resetStatusDelay);
+              } else {
+                setStatus("default");
+              }
+            });
+          }
+          if (on2 === "submit") {
+            let reset2 = function() {
+              if (resetForm) form.reset();
+            };
+            const form = e.target;
+            const formData = new FormData(form);
+            const formObj = parseNestedObject(
+              //@ts-ignore
+              Object.fromEntries(formData.entries())
+            );
+            if (method === "replaceItem") {
+              return handleStatus(
+                cart.replaceItem({
+                  key: formObj.key,
+                  id: formObj.id
+                })
+              ).finally(reset2);
+            }
+            if (method === "updateItem") {
+              return handleStatus(
+                cart.updateItem({
+                  id: formObj.id,
+                  quantity: formObj?.quantity || void 0,
+                  properties: formObj?.properties || {},
+                  selling_plan: formObj?.selling_plan || void 0
+                })
+              ).finally(reset2);
+            }
+            if (method === "removeItem") {
+              return handleStatus(cart.removeItem(formObj.key)).finally(reset2);
+            }
+            if (method === "addDiscount") {
+              return handleStatus(cart.addDiscount(formObj.code)).finally(
+                reset2
+              );
+            }
+            if (method === "removeDiscount") {
+              return handleStatus(cart.removeDiscount(formObj.code)).finally(
+                reset2
+              );
+            }
+            if (method === "updateNote") {
+              return handleStatus(cart.updateNote(formObj.note)).finally(reset2);
+            }
+            return;
+          }
+          const input = e.target;
+          if (method === "removeItem") {
+            return handleStatus(cart.removeItem(data2.key));
+          }
+          if (method === "updateQuantity") {
+            return handleStatus(
+              cart.updateItem({
+                id: data2.key,
+                quantity: input.valueAsNumber
+              })
+            );
+          }
+          if (method === "updateItemVariant") {
+            return handleStatus(
+              cart.replaceItem({
+                key: data2.key,
+                id: input.value
+              })
+            );
+          }
+          if (method === "updateNote") {
+            return handleStatus(cart.updateNote(input.value));
+          }
+        }
+        const handleEvent = debounce(onEvent, debounceDelay), controller = new AbortController();
+        element.addEventListener(
+          on2,
+          (e) => {
+            if (preventDefault) e.preventDefault();
+            handleEvent(e);
+          },
+          { signal: controller.signal }
+        );
+        return onCleanup(() => {
+          controller.abort();
+          if (resetStatusId && currentEventId !== tempEventId)
+            clearTimeout(resetStatusId);
+        });
+      }
+    )
+  );
+};
+
+export { CartDataListener };
+//# sourceMappingURL=cart-data-listener.js.map
+//# sourceMappingURL=cart-data-listener.js.map

package/dist/main/components/cart-data-listener.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/cart-data-listener.ts"],"names":["on","data","reset"],"mappings":"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","file":"cart-data-listener.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-utils\";\n\nimport { createEffect, createUniqueId, on, onCleanup } from \"solid-js\";\nimport debounce from \"lodash.debounce\";\n\nimport {\n  type Status,\n  provideListenerStatusContext,\n  useCartValue,\n  useFullPropertyPath,\n} from \"../hooks/index.js\";\nimport AjaxCart from \"@brytdesigns/shopify-ajax-cart\";\nimport { parseNestedObject } from \"../utils/index.js\";\n\ntype CartDataListenerProps = {\n  status: Status;\n  on: string;\n  method: string;\n  debounceDelay: number;\n  resetForm: boolean;\n  resetStatusDelay: number;\n  preventDefault: boolean;\n};\n\nexport const CartDataListener: CorrectComponentType<CartDataListenerProps> = (\n  props,\n  { element },\n) => {\n  const [_, setStatus] = provideListenerStatusContext({\n    element,\n    get status() {\n      return props.status;\n    },\n  });\n\n  const path = useFullPropertyPath({\n    element,\n  });\n  const data = useCartValue({\n    element,\n    path,\n  });\n\n  let currentEventId: string | null = null;\n\n  createEffect(\n    on(\n      () => ({\n        method: props.method,\n        on: props.on,\n        preventDefault: props.preventDefault,\n        data: data() as any,\n        debounceDelay: props.debounceDelay,\n        resetForm: props.resetForm,\n        resetStatusDelay: props.resetStatusDelay,\n      }),\n      ({\n        method,\n        on,\n        preventDefault,\n        data,\n        debounceDelay,\n        resetForm,\n        resetStatusDelay,\n      }) => {\n        if (!method)\n          return console.error(\n            \"cart-item-listener: method property is required!\",\n          );\n        if (!on)\n          return console.error(\"cart-item-listener: on property is required!\");\n\n        let resetStatusId: number | null = null,\n          tempEventId: string | null = null;\n\n        function onEvent(e: Event) {\n          const cart = AjaxCart;\n\n          (currentEventId = createUniqueId()), (tempEventId = currentEventId);\n\n          if (preventDefault) e.preventDefault();\n\n          async function handleStatus<T>(promise: Promise<T>) {\n            setStatus(\"loading\");\n            return promise\n              .then((data) => {\n                setStatus(\"success\");\n                return data;\n              })\n              .catch((error) => {\n                setStatus(\"error\");\n                return error;\n              })\n              .finally(() => {\n                if (resetStatusDelay > 0) {\n                  //@ts-ignore\n                  resetStatusId = setTimeout(() => {\n                    setStatus(\"default\");\n                    resetStatusId = null;\n                  }, resetStatusDelay);\n                } else {\n                  setStatus(\"default\");\n                }\n              });\n          }\n\n          if (on === \"submit\") {\n            const form = e.target as HTMLFormElement;\n            const formData = new FormData(form);\n            const formObj = parseNestedObject(\n              //@ts-ignore\n              Object.fromEntries(formData.entries()),\n            );\n\n            function reset() {\n              if (resetForm) form.reset();\n            }\n\n            if (method === \"replaceItem\") {\n              return handleStatus(\n                cart.replaceItem({\n                  key: formObj.key,\n                  id: formObj.id,\n                }),\n              ).finally(reset);\n            }\n\n            if (method === \"updateItem\") {\n              return handleStatus(\n                cart.updateItem({\n                  id: formObj.id,\n                  quantity: formObj?.quantity || undefined,\n                  properties: formObj?.properties || {},\n                  selling_plan: formObj?.selling_plan || undefined,\n                }),\n              ).finally(reset);\n            }\n\n            if (method === \"removeItem\") {\n              return handleStatus(cart.removeItem(formObj.key)).finally(reset);\n            }\n\n            if (method === \"addDiscount\") {\n              return handleStatus(cart.addDiscount(formObj.code)).finally(\n                reset,\n              );\n            }\n\n            if (method === \"removeDiscount\") {\n              return handleStatus(cart.removeDiscount(formObj.code)).finally(\n                reset,\n              );\n            }\n\n            if (method === \"updateNote\") {\n              return handleStatus(cart.updateNote(formObj.note)).finally(reset);\n            }\n\n            return;\n          }\n\n          const input = e.target as HTMLInputElement;\n\n          if (method === \"removeItem\") {\n            return handleStatus(cart.removeItem(data.key));\n          }\n\n          if (method === \"updateQuantity\") {\n            return handleStatus(\n              cart.updateItem({\n                id: data.key,\n                quantity: input.valueAsNumber,\n              }),\n            );\n          }\n\n          if (method === \"updateItemVariant\") {\n            return handleStatus(\n              cart.replaceItem({\n                key: data.key,\n                id: input.value,\n              }),\n            );\n          }\n\n          if (method === \"updateNote\") {\n            return handleStatus(cart.updateNote(input.value));\n          }\n        }\n        const handleEvent = debounce(onEvent, debounceDelay),\n          controller = new AbortController();\n\n        element.addEventListener(\n          on,\n          (e) => {\n            if (preventDefault) e.preventDefault();\n            handleEvent(e);\n          },\n          { signal: controller.signal },\n        );\n\n        return onCleanup(() => {\n          controller.abort();\n          if (resetStatusId && currentEventId !== tempEventId)\n            clearTimeout(resetStatusId);\n        });\n      },\n    ),\n  );\n};\n"]}

package/dist/main/components/cart-data.js

@@ -0,0 +1,29 @@
+import '../utils/index.js';
+import { Show } from 'solid-js';
+import { useFullPropertyPath, useFormattedValue } from '../hooks/index.js';
+import html from 'solid-js/html';
+
+const CartData = (props, { element }) => {
+  if (!props.propertyName)
+    return console.warn(
+      "No property-name attribute provided for cart-data component."
+    );
+  const fullPath = useFullPropertyPath({
+    element,
+    path: () => props.propertyName
+  });
+  const formattedValue = useFormattedValue({
+    get format() {
+      return props.format;
+    },
+    path: fullPath,
+    element
+  });
+  return html`
+    <${Show} when=${() => formattedValue() !== null}> ${formattedValue} <//>
+  `;
+};
+
+export { CartData };
+//# sourceMappingURL=cart-data.js.map
+//# sourceMappingURL=cart-data.js.map

package/dist/main/components/cart-data.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/cart-data.ts"],"names":[],"mappings":";;;;;AAiBO,MAAM,QAAgD,GAAA,CAC3D,KACA,EAAA,EAAE,SACC,KAAA;AACH,EAAA,IAAI,CAAC,KAAM,CAAA,YAAA;AACT,IAAA,OAAO,OAAQ,CAAA,IAAA;AAAA,MACb;AAAA,KACF;AACF,EAAA,MAAM,WAAW,mBAAoB,CAAA;AAAA,IACnC,OAAA;AAAA,IACA,IAAA,EAAM,MAAM,KAAM,CAAA;AAAA,GACnB,CAAA;AACD,EAAA,MAAM,iBAAiB,iBAAkB,CAAA;AAAA,IACvC,IAAI,MAAS,GAAA;AACX,MAAA,OAAO,KAAM,CAAA,MAAA;AAAA,KACf;AAAA,IACA,IAAM,EAAA,QAAA;AAAA,IACN;AAAA,GACD,CAAA;AAED,EAAO,OAAA,IAAA;AAAA,KAAA,EACF,IAAI,CAAS,MAAA,EAAA,MAAM,gBAAqB,KAAA,IAAI,KAAK,cAAc,CAAA;AAAA,EAAA,CAAA;AAEtE","file":"cart-data.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-utils\";\nimport { type Format } from \"../utils/index.js\";\n\nimport { Show } from \"solid-js\";\n\nimport {\n  type ValidAjaxPath,\n  useFullPropertyPath,\n  useFormattedValue,\n} from \"../hooks/index.js\";\nimport html from \"solid-js/html\";\n\ntype CartDataProps = {\n  propertyName: ValidAjaxPath;\n  format?: Format;\n};\n\nexport const CartData: CorrectComponentType<CartDataProps> = (\n  props,\n  { element },\n) => {\n  if (!props.propertyName)\n    return console.warn(\n      \"No property-name attribute provided for cart-data component.\",\n    );\n  const fullPath = useFullPropertyPath({\n    element,\n    path: () => props.propertyName,\n  });\n  const formattedValue = useFormattedValue({\n    get format() {\n      return props.format;\n    },\n    path: fullPath,\n    element,\n  });\n\n  return html`\n    <${Show} when=${() => formattedValue() !== null}> ${formattedValue} <//>\n  `;\n};\n"]}

package/dist/main/components/cart-loading-state.js

@@ -0,0 +1,39 @@
+import { createMemo, Show } from 'solid-js';
+import { getTemplateContent } from '../utils/index.js';
+import html from 'solid-js/html';
+import AjaxCart from '@brytdesigns/shopify-ajax-cart';
+
+const CartLoadingState = (props, { element }) => {
+  const cart = AjaxCart;
+  const templates = {
+    pending: getTemplateContent(element, "pending"),
+    error: getTemplateContent(element, "error"),
+    success: getTemplateContent(element, "success")
+  };
+  let previousState = null;
+  const cartState = createMemo(() => {
+    const state = cart?.status;
+    if (!templates[state] || props.ignoredStates.includes(state))
+      return previousState;
+    previousState = state;
+    return state;
+  });
+  element.replaceChildren(...[]);
+  return html`
+    <${Show} when=${() => cart}>
+      ${() => {
+    const state = cartState();
+    if (!state) return null;
+    if (!templates[state]) return null;
+    const children = Array.from(
+      templates[state].cloneNode(true).childNodes
+    );
+    return children;
+  }}
+    <//>
+  `;
+};
+
+export { CartLoadingState };
+//# sourceMappingURL=cart-loading-state.js.map
+//# sourceMappingURL=cart-loading-state.js.map

package/dist/main/components/cart-loading-state.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/cart-loading-state.ts"],"names":[],"mappings":";;;;;AAcO,MAAM,gBAAgE,GAAA,CAC3E,KACA,EAAA,EAAE,SACC,KAAA;AACH,EAAA,MAAM,IAAO,GAAA,QAAA;AAEb,EAAA,MAAM,SAAY,GAAA;AAAA,IAChB,OAAA,EAAS,kBAAmB,CAAA,OAAA,EAAS,SAAS,CAAA;AAAA,IAC9C,KAAA,EAAO,kBAAmB,CAAA,OAAA,EAAS,OAAO,CAAA;AAAA,IAC1C,OAAA,EAAS,kBAAmB,CAAA,OAAA,EAAS,SAAS;AAAA,GAChD;AAEA,EAAA,IAAI,aAA+B,GAAA,IAAA;AAEnC,EAAM,MAAA,SAAA,GAAY,WAAW,MAAM;AACjC,IAAA,MAAM,QAAQ,IAAM,EAAA,MAAA;AACpB,IAAA,IAAI,CAAC,SAAU,CAAA,KAAK,KAAK,KAAM,CAAA,aAAA,CAAc,SAAS,KAAK,CAAA;AACzD,MAAO,OAAA,aAAA;AACT,IAAgB,aAAA,GAAA,KAAA;AAChB,IAAO,OAAA,KAAA;AAAA,GACR,CAAA;AAED,EAAQ,OAAA,CAAA,eAAA,CAAgB,GAAG,EAAE,CAAA;AAE7B,EAAO,OAAA,IAAA;AAAA,KACF,EAAA,IAAI,CAAS,MAAA,EAAA,MAAM,IAAI,CAAA;AAAA,MAAA,EACtB,MAAM;AACR,IAAA,MAAM,QAAQ,SAAU,EAAA;AACxB,IAAI,IAAA,CAAC,OAAc,OAAA,IAAA;AACnB,IAAA,IAAI,CAAC,SAAA,CAAU,KAAK,CAAA,EAAU,OAAA,IAAA;AAC9B,IAAA,MAAM,WAAW,KAAM,CAAA,IAAA;AAAA,MACrB,SAAU,CAAA,KAAK,CAAE,CAAA,SAAA,CAAU,IAAI,CAAE,CAAA;AAAA,KACnC;AACA,IAAO,OAAA,QAAA;AAAA,GACR;AAAA;AAAA,EAAA,CAAA;AAGL","file":"cart-loading-state.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-utils\";\n\nimport { Show, createMemo } from \"solid-js\";\n\nimport { getTemplateContent } from \"../utils/index.js\";\nimport html from \"solid-js/html\";\nimport AjaxCart from \"@brytdesigns/shopify-ajax-cart\";\n\ntype Status = (typeof AjaxCart)[\"status\"];\n\ntype CartLoadingStateProps = {\n  ignoredStates: Array<Status>;\n};\n\nexport const CartLoadingState: CorrectComponentType<CartLoadingStateProps> = (\n  props,\n  { element },\n) => {\n  const cart = AjaxCart;\n\n  const templates = {\n    pending: getTemplateContent(element, \"pending\"),\n    error: getTemplateContent(element, \"error\"),\n    success: getTemplateContent(element, \"success\"),\n  };\n\n  let previousState: Status | null = null;\n\n  const cartState = createMemo(() => {\n    const state = cart?.status;\n    if (!templates[state] || props.ignoredStates.includes(state))\n      return previousState;\n    previousState = state;\n    return state;\n  });\n\n  element.replaceChildren(...[]);\n\n  return html`\n    <${Show} when=${() => cart}>\n      ${() => {\n      const state = cartState();\n      if (!state) return null;\n      if (!templates[state]) return null;\n      const children = Array.from(\n        templates[state].cloneNode(true).childNodes,\n      );\n      return children;\n    }}\n    <//>\n  `;\n};\n"]}

package/dist/main/components/index.js

@@ -0,0 +1,11 @@
+export * from './cart-context.js';
+export * from './cart-data.js';
+export * from './cart-data-conditions.js';
+export * from './cart-data-array.js';
+export * from './cart-data-array-item.js';
+export * from './cart-data-listener.js';
+export * from './cart-data-listener-status.js';
+export * from './cart-data-injection.js';
+export * from './cart-loading-state.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/main/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}

package/dist/main/hooks/index.js

@@ -0,0 +1,7 @@
+export * from './useAjaxCart.js';
+export * from './useFullPropertyPath.js';
+export * from './useCartValue.js';
+export * from './useFormattedValue.js';
+export * from './useListenerStatus.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}

package/dist/main/hooks/useAjaxCart.js

@@ -0,0 +1,23 @@
+import AjaxCart from '@brytdesigns/shopify-ajax-cart';
+import { createContext, provide, consume } from 'component-register';
+
+const AjaxCartContext = createContext(() => () => AjaxCart.data);
+const provideAjaxCartContext = (element) => {
+  return provide(AjaxCartContext, {}, element);
+};
+const useAjaxCartContext = (context) => {
+  return context;
+};
+const useAjaxCart = (element) => {
+  const context = consume(AjaxCartContext, element);
+  if (!context) {
+    throw console.error(
+      "CartContext not found! Please ensure to wrap your custom element with cart-context element."
+    );
+  }
+  return useAjaxCartContext(context);
+};
+
+export { provideAjaxCartContext, useAjaxCart, useAjaxCartContext };
+//# sourceMappingURL=useAjaxCart.js.map
+//# sourceMappingURL=useAjaxCart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/useAjaxCart.ts"],"names":[],"mappings":";;;AAYA,MAAM,eAAkB,GAAA,aAAA,CAAc,MAAM,MAAM,SAAS,IAAI,CAAA;AAElD,MAAA,sBAAA,GAAyB,CACpC,OACwB,KAAA;AACxB,EAAA,OAAO,OAAQ,CAAA,eAAA,EAAiB,EAAC,EAAG,OAAO,CAAA;AAC7C;AAEa,MAAA,kBAAA,GAAqB,CAAC,OAAiC,KAAA;AAClE,EAAO,OAAA,OAAA;AACT;AAEa,MAAA,WAAA,GAAc,CAAC,OAA0C,KAAA;AACpE,EAAM,MAAA,OAAA,GAAU,OAAQ,CAAA,eAAA,EAAiB,OAAO,CAAA;AAEhD,EAAA,IAAI,CAAC,OAAS,EAAA;AACZ,IAAA,MAAM,OAAQ,CAAA,KAAA;AAAA,MACZ;AAAA,KACF;AAAA;AAGF,EAAA,OAAO,mBAAmB,OAAO,CAAA;AACnC","file":"useAjaxCart.js","sourcesContent":["import AjaxCart from \"@brytdesigns/shopify-ajax-cart\";\nimport {\n  createContext,\n  consume,\n  provide,\n  type ICustomElement,\n} from \"component-register\";\n\ntype WalkableNode = Parameters<typeof provide>[2];\n\ntype AjaxCartContextType = () => (typeof AjaxCart)[\"data\"];\n\nconst AjaxCartContext = createContext(() => () => AjaxCart.data);\n\nexport const provideAjaxCartContext = (\n  element: WalkableNode,\n): AjaxCartContextType => {\n  return provide(AjaxCartContext, {}, element);\n};\n\nexport const useAjaxCartContext = (context: AjaxCartContextType) => {\n  return context;\n};\n\nexport const useAjaxCart = (element: HTMLElement & ICustomElement) => {\n  const context = consume(AjaxCartContext, element);\n\n  if (!context) {\n    throw console.error(\n      \"CartContext not found! Please ensure to wrap your custom element with cart-context element.\",\n    );\n  }\n\n  return useAjaxCartContext(context);\n};\n"]}

package/dist/main/hooks/useCartValue.js

@@ -0,0 +1,23 @@
+import { createMemo } from 'solid-js';
+import 'component-register';
+import './useFullPropertyPath.js';
+import { useAjaxCart } from './useAjaxCart.js';
+import { getValueFromPath } from '../utils/index.js';
+
+function useCartValue(options) {
+  const cart = useAjaxCart(options.element);
+  const value = createMemo(() => {
+    const c = cart();
+    if (typeof options.path !== "function") return c;
+    const path = options.path();
+    if (!path) return c;
+    const v = getValueFromPath(c, path);
+    if (v === void 0 || v === null) return null;
+    return v;
+  });
+  return value;
+}
+
+export { useCartValue };
+//# sourceMappingURL=useCartValue.js.map
+//# sourceMappingURL=useCartValue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/useCartValue.ts"],"names":[],"mappings":";;;;;;AAYO,SAAS,aAAa,OAAkB,EAAA;AAC7C,EAAM,MAAA,IAAA,GAAO,WAAY,CAAA,OAAA,CAAQ,OAAO,CAAA;AAExC,EAAM,MAAA,KAAA,GAAQ,WAAW,MAAM;AAC7B,IAAA,MAAM,IAAI,IAAK,EAAA;AACf,IAAA,IAAI,OAAO,OAAA,CAAQ,IAAS,KAAA,UAAA,EAAmB,OAAA,CAAA;AAC/C,IAAM,MAAA,IAAA,GAAO,QAAQ,IAAK,EAAA;AAC1B,IAAI,IAAA,CAAC,MAAa,OAAA,CAAA;AAClB,IAAM,MAAA,CAAA,GAAI,gBAAiB,CAAA,CAAA,EAAG,IAAI,CAAA;AAClC,IAAA,IAAI,CAAM,KAAA,MAAA,IAAa,CAAM,KAAA,IAAA,EAAa,OAAA,IAAA;AAC1C,IAAO,OAAA,CAAA;AAAA,GACR,CAAA;AAED,EAAO,OAAA,KAAA;AACT","file":"useCartValue.js","sourcesContent":["import { type Accessor, createMemo } from \"solid-js\";\nimport { type ICustomElement } from \"component-register\";\n\nimport { type ValidAjaxPath } from \"./useFullPropertyPath.js\";\nimport { useAjaxCart } from \"./useAjaxCart.js\";\nimport { getValueFromPath } from \"../utils/index.js\";\n\ntype Options = {\n  path: Accessor<ValidAjaxPath>;\n  element: HTMLElement & ICustomElement;\n};\n\nexport function useCartValue(options: Options) {\n  const cart = useAjaxCart(options.element);\n\n  const value = createMemo(() => {\n    const c = cart();\n    if (typeof options.path !== \"function\") return c;\n    const path = options.path();\n    if (!path) return c;\n    const v = getValueFromPath(c, path);\n    if (v === undefined || v === null) return null;\n    return v;\n  });\n\n  return value;\n}\n"]}