@brytdesigns/shopify-ajax-cart-components 1.0.9 → 1.1.0

package/dist/esm/index.js

@@ -1,11 +1,22 @@
 import { customShadowlessElement, correctElementType } from '@brytdesigns/web-component-utils';
-import { splitProps, createEffect, on, Show, For, createMemo, onCleanup, createUniqueId } from 'solid-js';
+import { splitProps, createEffect, on, createMemo, Show, For, mapArray, onCleanup, createUniqueId } from 'solid-js';
 import AjaxCart from '@brytdesigns/shopify-ajax-cart';
 import { createContext, provide, consume } from 'component-register';
 import html2 from 'solid-js/html';
 import debounce from 'lodash.debounce';
 
-// src/index.ts
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/components/cart-context.ts
+var cart_context_exports = {};
+__export(cart_context_exports, {
+  Component: () => Component,
+  Name: () => Name
+});
 var AjaxCartContext = createContext(() => () => AjaxCart.data);
 var provideAjaxCartContext = (element) => {
   return provide(AjaxCartContext, {}, element);
@@ -23,23 +34,6 @@ var useAjaxCart = (element) => {
   return useAjaxCartContext(context);
 };
 
-// src/components/cart-context.ts
-var CartContext = (props, { element }) => {
-  const cart = provideAjaxCartContext(element);
-  createEffect(
-    on(
-      () => ({
-        cart: cart(),
-        debug: props.debug
-      }),
-      ({ cart: cart2, debug }) => {
-        if (!debug) return;
-        console.log("Cart updated:", cart2);
-      }
-    )
-  );
-};
-
 // src/utils/getValueFromPath.ts
 function getValueFromPath(obj, path) {
   return path.split(".").reduce((acc, key) => {
@@ -121,6 +115,51 @@ function parseNestedObject(data) {
   }
   return result;
 }
+
+// src/utils/traverseObject.ts
+function traverseObject(obj, callback, path = []) {
+  if (typeof obj !== "object" || obj === null) return;
+  if (Array.isArray(obj)) {
+    obj.forEach((item, index) => {
+      traverseObject(item, callback, [...path, index.toString()]);
+    });
+  } else {
+    for (const key of Object.keys(obj)) {
+      const value = obj[key];
+      const currentPath = [...path, key];
+      traverseObject(value, callback, currentPath);
+    }
+  }
+}
+
+// src/components/cart-context.ts
+var Name = "cart-context";
+var Component = (props, { element }) => {
+  const cart = provideAjaxCartContext(element);
+  createEffect(
+    on(
+      () => {
+        const c = cart();
+        traverseObject(c);
+        return {
+          cart: c,
+          debug: props.debug
+        };
+      },
+      ({ cart: cart2, debug }) => {
+        if (!debug) return;
+        console.log(`${Name}:updated!`, cart2);
+      }
+    )
+  );
+};
+
+// src/components/cart-data.ts
+var cart_data_exports = {};
+__export(cart_data_exports, {
+  Component: () => Component2,
+  Name: () => Name2
+});
 function createFullPathPropertyContext(options) {
   return options.path;
 }
@@ -204,11 +243,10 @@ var useListenerStatus = (element) => {
   }
   return useListenerStatusContext(context);
 };
-var CartData = (props, { element }) => {
+var Name2 = "cart-data";
+var Component2 = (props, { element }) => {
   if (!props.propertyName)
-    return console.warn(
-      "No property-name attribute provided for cart-data component."
-    );
+    return console.warn(`${Name2}: No property-name attribute provided.`);
   const fullPath = useFullPropertyPath({
     element,
     path: () => props.propertyName
@@ -224,6 +262,13 @@ var CartData = (props, { element }) => {
     <${Show} when=${() => formattedValue() !== null}> ${formattedValue} <//>
   `;
 };
+
+// src/components/cart-data-conditions.ts
+var cart_data_conditions_exports = {};
+__export(cart_data_conditions_exports, {
+  Component: () => Component3,
+  Name: () => Name3
+});
 function getValue(data, value) {
   if (typeof value === "undefined" || !data) return void 0;
   if (value.type === "primitive") {
@@ -247,6 +292,11 @@ function validateConditions(conditions, data) {
     if (condition.type === "typeof") {
       result2 = typeof valueA === valueB;
     }
+    if (condition.type === "includes") {
+      result2 = formatValue(condition.format || "", valueA).includes(
+        formatValue(condition.format || "", valueB)
+      );
+    }
     if (condition.type === "includes_property") {
       result2 = valueA.some(
         (v) => v[condition.valueA?.property_name || ""] === valueB
@@ -274,19 +324,20 @@ function validateConditions(conditions, data) {
   });
   return result;
 }
-var CartDataConditions = (_, { element }) => {
+var Name3 = "cart-data-conditions";
+var Component3 = (_, { 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!"
+      `${Name3}: 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!");
+        console.warn(`${Name3}: conditions attribute is required!`);
       try {
         return JSON.parse(conditions);
       } catch (e) {
@@ -313,14 +364,21 @@ var CartDataConditions = (_, { element }) => {
     <//>
   `;
 };
-var CartDataArray = (props, { element }) => {
+
+// src/components/cart-data-array.ts
+var cart_data_array_exports = {};
+__export(cart_data_array_exports, {
+  Component: () => Component4,
+  Name: () => Name4
+});
+var Name4 = "cart-data-array";
+var Component4 = (props, { element }) => {
   const itemTemplate = getTemplateContent(element, "item");
   if (!itemTemplate)
     return console.warn(
-      "cart-data-array: No template found with a property of 'item'."
+      `${Name4}: No template found with a property of 'item'.`
     );
-  if (!props.arrayPath)
-    return console.warn("cart-data-array: No array path provided.");
+  if (!props.arrayPath) return console.warn(`${Name4}: No array path provided.`);
   const mergedProps = {
     element,
     path: () => props.arrayPath
@@ -337,15 +395,11 @@ var CartDataArray = (props, { element }) => {
   const arrayValue = () => {
     const v = value();
     if (!v) {
-      console.warn(
-        `cart-data-array: value is null or undefined at path ${fullPath()}`
-      );
+      console.warn(`${Name4}: value is null or undefined at path ${fullPath()}`);
       return null;
     }
     if (!Array.isArray(v)) {
-      console.warn(
-        `cart-data-array: value is not an array at path ${fullPath()}`
-      );
+      console.warn(`${Name4}: value is not an array at path ${fullPath()}`);
       return null;
     }
     return v;
@@ -364,10 +418,98 @@ var CartDataArray = (props, { element }) => {
   `;
 };
 
+// src/components/cart-data-array-injection.ts
+var cart_data_array_injection_exports = {};
+__export(cart_data_array_injection_exports, {
+  Component: () => Component5,
+  Name: () => Name5
+});
+var Name5 = "cart-data-array-injection";
+var Component5 = (props, { element }) => {
+  const itemTemplate = getTemplateContent(element, "item");
+  if (!itemTemplate)
+    return console.warn(
+      `${Name5}: No template found with a property of 'item'.`
+    );
+  if (!props.arrayPath) return console.warn(`${Name5}: No array path provided.`);
+  const mergedProps = {
+    element,
+    path: () => props.arrayPath
+  };
+  const fullPath = useFullPropertyPath(mergedProps);
+  provideFullPropertyPathContext({
+    element,
+    path: fullPath
+  });
+  const value = useCartValue({
+    element,
+    path: fullPath
+  });
+  const arrayValue = () => {
+    const v = value();
+    if (!v) {
+      console.warn(`${Name5}: value is null or undefined at path ${fullPath()}`);
+      return null;
+    }
+    if (!Array.isArray(v)) {
+      console.warn(`${Name5}: value is not an array at path ${fullPath()}`);
+      return null;
+    }
+    return v;
+  };
+  const children = createMemo(
+    mapArray(arrayValue, (item, idx) => {
+      const itemNode = itemTemplate.cloneNode(true);
+      if (props.wrapInnerChild) {
+        const firstItem = itemNode.firstChild;
+        if (!firstItem) return null;
+        const children2 = Array.from(firstItem.childNodes);
+        const wrapper = html2`
+          <cart-data-array-item item-index=${() => `${idx()}`}>
+            ${() => Array.from(children2)}
+          </cart-data-array-item>
+        `;
+        for (const node of children2) {
+          firstItem.replaceChild(
+            node,
+            Array.isArray(wrapper) ? wrapper.at(0) : wrapper
+          );
+        }
+        return firstItem;
+      }
+    })
+  );
+  element.replaceChildren(...[]);
+  createEffect(
+    on(
+      () => {
+        const rootElement = element;
+        return {
+          target: getTargetElement(rootElement, props.target),
+          children: children()
+        };
+      },
+      ({ children: children2, target }) => {
+        if (!target) return;
+        const filteredChildren = children2.filter(
+          (v) => v !== null && v !== void 0
+        );
+        target.replaceChildren(...filteredChildren);
+      }
+    )
+  );
+};
+
 // src/components/cart-data-array-item.ts
-var CartDataArrayItem = (props, { element }) => {
+var cart_data_array_item_exports = {};
+__export(cart_data_array_item_exports, {
+  Component: () => Component6,
+  Name: () => Name6
+});
+var Name6 = "cart-data-array-item";
+var Component6 = (props, { element }) => {
   if (!props.itemIndex)
-    return console.warn("cart-data-array-item: No path attribute provided.");
+    return console.warn(`${Name6}: No path attribute provided.`);
   const mergedProps = {
     element,
     path: () => props.itemIndex
@@ -378,7 +520,15 @@ var CartDataArrayItem = (props, { element }) => {
     path: fullPath
   });
 };
-var CartDataListener = (props, { element }) => {
+
+// src/components/cart-data-listener.ts
+var cart_data_listener_exports = {};
+__export(cart_data_listener_exports, {
+  Component: () => Component7,
+  Name: () => Name7
+});
+var Name7 = "cart-data-listener";
+var Component7 = (props, { element }) => {
   const [_, setStatus] = provideListenerStatusContext({
     element,
     get status() {
@@ -406,7 +556,7 @@ var CartDataListener = (props, { element }) => {
       }),
       ({
         method,
-        on: on4,
+        on: on5,
         preventDefault,
         data: data2,
         debounceDelay,
@@ -414,11 +564,8 @@ var CartDataListener = (props, { element }) => {
         resetStatusDelay
       }) => {
         if (!method)
-          return console.error(
-            "cart-item-listener: method property is required!"
-          );
-        if (!on4)
-          return console.error("cart-item-listener: on property is required!");
+          return console.error(`${Name7}: method property is required!`);
+        if (!on5) return console.error(`${Name7}: on property is required!`);
         let resetStatusId = null, tempEventId = null;
         function onEvent(e) {
           const cart = AjaxCart;
@@ -443,7 +590,7 @@ var CartDataListener = (props, { element }) => {
               }
             });
           }
-          if (on4 === "submit") {
+          if (on5 === "submit") {
             let reset2 = function() {
               if (resetForm) form.reset();
             };
@@ -515,7 +662,7 @@ var CartDataListener = (props, { element }) => {
         }
         const handleEvent = debounce(onEvent, debounceDelay), controller = new AbortController();
         element.addEventListener(
-          on4,
+          on5,
           (e) => {
             if (preventDefault) e.preventDefault();
             handleEvent(e);
@@ -531,12 +678,17 @@ var CartDataListener = (props, { element }) => {
     )
   );
 };
-var CartDataListenerStatus = (_, { element }) => {
+
+// src/components/cart-data-listener-status.ts
+var cart_data_listener_status_exports = {};
+__export(cart_data_listener_status_exports, {
+  Component: () => Component8,
+  Name: () => Name8
+});
+var Name8 = "cart-data-listener-status";
+var Component8 = (_, { element }) => {
   const [status] = useListenerStatus(element);
-  if (!status)
-    return console.error(
-      "cart-data-listener-status: no listener context provided!"
-    );
+  if (!status) return console.error(`${Name8}: no listener context provided!`);
   const templates = {
     default: getTemplateContent(element, "default"),
     loading: getTemplateContent(element, "loading"),
@@ -559,20 +711,23 @@ var CartDataListenerStatus = (_, { element }) => {
     return Array.from(template.cloneNode(true).childNodes);
   });
 };
+
+// src/components/cart-data-injection.ts
+var cart_data_injection_exports = {};
+__export(cart_data_injection_exports, {
+  Component: () => Component9,
+  Name: () => Name9
+});
 var VALID_INJECTION_TYPES = ["attribute", "property", "template"];
-var CartDataInjection = (props, { element }) => {
+var Name9 = "cart-data-injection";
+var Component9 = (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!");
+    return console.warn(`${Name9}: No path attribute provided.`);
+  if (!props.target) return console.warn(`${Name9}: No target attribute found!`);
   if (!props.attributeName)
-    return console.warn(
-      "cart-data-injection: No attribute-name attribute found!"
-    );
+    return console.warn(`${Name9}: 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."
-    );
+    return console.warn(`${Name9}: Invalid injection-type attribute provided.`);
   const mergedProps = {
     element,
     path: () => props.propertyName
@@ -599,7 +754,7 @@ var CartDataInjection = (props, { element }) => {
       ({ target, value: value2, attributeName, injectionType, propertyName }) => {
         if (!target)
           return console.warn(
-            `cart-data-injection: Unable to find element with selector of: ${props.target}`
+            `${Name9}: Unable to find element with selector of: ${props.target}`
           );
         if (injectionType === "attribute" && value2 !== null && value2 !== void 0) {
           target.setAttribute(attributeName, value2);
@@ -625,7 +780,9 @@ var CartDataInjection = (props, { element }) => {
           }
           const tmpValue = target.getAttribute(attributeName);
           if (!tmpValue || !value2)
-            return console.warn("Unable to inject value into template");
+            return console.warn(
+              `${Name9}: Unable to inject value into template`
+            );
           setTimeout(() => {
             target.setAttribute(
               attributeName,
@@ -640,7 +797,15 @@ var CartDataInjection = (props, { element }) => {
     )
   );
 };
-var CartLoadingState = (props, { element }) => {
+
+// src/components/cart-loading-state.ts
+var cart_loading_state_exports = {};
+__export(cart_loading_state_exports, {
+  Component: () => Component10,
+  Name: () => Name10
+});
+var Name10 = "cart-loading-state";
+var Component10 = (props, { element }) => {
   const cart = AjaxCart;
   const templates = {
     pending: getTemplateContent(element, "pending"),
@@ -673,39 +838,49 @@ var CartLoadingState = (props, { element }) => {
 
 // src/index.ts
 customShadowlessElement(
-  "cart-context",
+  cart_context_exports.Name,
   { debug: false },
-  correctElementType(CartContext)
+  correctElementType(cart_context_exports.Component)
 );
 customShadowlessElement(
-  "cart-data-array-item",
+  cart_data_array_item_exports.Name,
   //@ts-ignore
   { itemIndex: "0" },
-  correctElementType(CartDataArrayItem)
+  correctElementType(cart_data_array_item_exports.Component)
 );
 customShadowlessElement(
-  "cart-data-array",
+  cart_data_array_exports.Name,
   {
     format: "",
     arrayPath: "items"
   },
-  correctElementType(CartDataArray)
+  correctElementType(cart_data_array_exports.Component)
+);
+customShadowlessElement(
+  cart_data_array_injection_exports.Name,
+  {
+    format: "",
+    arrayPath: "items",
+    target: "",
+    wrapInnerChild: true
+  },
+  correctElementType(cart_data_array_injection_exports.Component)
 );
 customShadowlessElement(
-  "cart-data",
+  cart_data_exports.Name,
   {
     format: "",
     propertyName: "item_count"
   },
-  correctElementType(CartData)
+  correctElementType(cart_data_exports.Component)
 );
 customShadowlessElement(
-  "cart-data-conditions",
+  cart_data_conditions_exports.Name,
   {},
-  correctElementType(CartDataConditions)
+  correctElementType(cart_data_conditions_exports.Component)
 );
 customShadowlessElement(
-  "cart-data-injection",
+  cart_data_injection_exports.Name,
   {
     propertyName: "item_count",
     attributeName: "data-item-count",
@@ -713,10 +888,10 @@ customShadowlessElement(
     target: "",
     format: ""
   },
-  correctElementType(CartDataInjection)
+  correctElementType(cart_data_injection_exports.Component)
 );
 customShadowlessElement(
-  "cart-data-listener",
+  cart_data_listener_exports.Name,
   {
     status: "default",
     on: "submit",
@@ -726,17 +901,17 @@ customShadowlessElement(
     resetStatusDelay: 0,
     preventDefault: true
   },
-  correctElementType(CartDataListener)
+  correctElementType(cart_data_listener_exports.Component)
 );
 customShadowlessElement(
-  "cart-data-listener-status",
+  cart_data_listener_status_exports.Name,
   {},
-  correctElementType(CartDataListenerStatus)
+  correctElementType(cart_data_listener_status_exports.Component)
 );
 customShadowlessElement(
-  "cart-loading-state",
+  cart_loading_state_exports.Name,
   { ignoredStates: [] },
-  correctElementType(CartLoadingState)
+  correctElementType(cart_loading_state_exports.Component)
 );
 
 export { provideAjaxCartContext, provideFullPropertyPathContext, provideListenerStatusContext, useAjaxCart, useAjaxCartContext, useCartValue, useFormattedValue, useFullPropertyPath, useFullPropertyPathContext, useListenerStatus, useListenerStatusContext };