@brytdesigns/shopify-ajax-cart-components 1.2.18 → 1.3.0

package/dist/esm/index.js

@@ -1,9 +1,9 @@
 import { createWithElementContext, customShadowlessElement, correctElementType } from '@brytdesigns/web-component-core/utils';
-import { splitProps, createEffect, on, createMemo, Show, For, mapArray, onCleanup } from 'solid-js';
+import { splitProps, createEffect, Show, createMemo, For, mapArray, on, onCleanup } from 'solid-js';
 import AjaxCart from '@brytdesigns/shopify-ajax-cart';
 import { createContext, provide, consume } from 'component-register';
+import { makeFullPropertyPathContext } from '@brytdesigns/web-component-core';
 import html2 from 'solid-js/html';
-import 'solid-js/store';
 import debounce from 'lodash.debounce';
 
 var __defProp = Object.defineProperty;
@@ -137,22 +137,12 @@ function traverseObject(obj, callback, path = []) {
 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);
-      }
-    )
-  );
+  createEffect(() => {
+    if (!props.debug) return;
+    const c = cart();
+    traverseObject(c);
+    console.log(`${Name}:updated!`, c);
+  });
 };
 
 // src/components/cart-data.ts
@@ -161,63 +151,6 @@ __export(cart_data_exports, {
   Component: () => Component2,
   Name: () => Name2
 });
-function createFullPathPropertyContext(options) {
-  return options.path;
-}
-var FullPropertyPathContext = createContext(createFullPathPropertyContext);
-function provideFullPropertyPathContext({
-  element,
-  path
-}) {
-  return provide(FullPropertyPathContext, { path }, element);
-}
-function useFullPropertyPathContext(context) {
-  return context;
-}
-function useFullPropertyPath(props) {
-  const context = consume(FullPropertyPathContext, props.element);
-  const basePath = useFullPropertyPathContext(context);
-  return createMemo(() => {
-    if (typeof basePath !== "function" && typeof props.path === "function") {
-      return props.path();
-    } else if (typeof basePath === "function" && typeof props.path !== "function") {
-      return basePath();
-    } else if (typeof basePath === "function" && typeof props.path === "function") {
-      return `${basePath()}.${props.path()}`;
-    }
-    return "";
-  });
-}
-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;
-}
-function useFormattedValue(options) {
-  const value = useCartValue({ path: options.path, element: options.element });
-  const formattedValue = createMemo(() => {
-    const v = value();
-    if (v === null) return null;
-    if (typeof v === "string" || typeof v === "number" || typeof v === "boolean") {
-      return formatValue(options.format || "", v);
-    }
-    console.warn(
-      options.element,
-      `useFormattedValue: Unsupported value type. Expected string, number, or boolean. Received: ${typeof v}.`,
-      v
-    );
-    return null;
-  });
-  return formattedValue;
-}
 function createListenerStatusContext(options) {
   const [privateProps, publicProps] = splitProps(options, ["element"]);
   function setStatus(status) {
@@ -245,15 +178,24 @@ var useListenerStatus = (element) => {
   return useListenerStatusContext(context);
 };
 var withListenerElementStatus = createWithElementContext(ListenerStatusContext);
+
+// src/hooks/index.ts
+var hooks = makeFullPropertyPathContext();
+var useCartValue = hooks.usePathValue;
+var useCartPath = hooks.usePath;
+var useCartFormattedValue = hooks.useFormattedValue;
+var provideCartPathContext = hooks.provide;
 var Name2 = "cart-data";
 var Component2 = (props, { element }) => {
   if (!props.propertyName)
     return console.warn(`${Name2}: No property-name attribute provided.`);
-  const fullPath = useFullPropertyPath({
+  const data = useAjaxCart(element);
+  const fullPath = useCartPath({
     element,
     path: () => props.propertyName
   });
-  const formattedValue = useFormattedValue({
+  const formattedValue = useCartFormattedValue({
+    data,
     get format() {
       return props.format;
     },
@@ -352,10 +294,11 @@ var Component3 = (_, { element }) => {
       }
     })
   );
-  const fullPath = useFullPropertyPath({ element });
+  const cart = useAjaxCart(element);
+  const fullPath = useCartPath({ element });
   const data = useCartValue({
     path: fullPath,
-    element
+    data: cart
   });
   element.replaceChildren(...[]);
   return html2`
@@ -386,17 +329,18 @@ var Component4 = (props, { element }) => {
       `${Name4}: No template found with a property of 'item'.`
     );
   if (!props.arrayPath) return console.warn(`${Name4}: No array path provided.`);
+  const data = useAjaxCart(element);
   const mergedProps = {
     element,
     path: () => props.arrayPath
   };
-  const fullPath = useFullPropertyPath(mergedProps);
-  provideFullPropertyPathContext({
+  const fullPath = useCartPath(mergedProps);
+  provideCartPathContext({
     element,
     path: fullPath
   });
   const value = useCartValue({
-    element,
+    data,
     path: fullPath
   });
   const arrayValue = createMemo(() => {
@@ -442,17 +386,18 @@ var Component5 = (props, { element }) => {
       `${Name5}: No template found with a property of 'item'.`
     );
   if (!props.arrayPath) return console.warn(`${Name5}: No array path provided.`);
+  const data = useAjaxCart(element);
   const mergedProps = {
     element,
     path: () => props.arrayPath
   };
-  const fullPath = useFullPropertyPath(mergedProps);
-  provideFullPropertyPathContext({
+  const fullPath = useCartPath(mergedProps);
+  provideCartPathContext({
     element,
     path: fullPath
   });
   const value = useCartValue({
-    element,
+    data,
     path: fullPath
   });
   const arrayValue = createMemo(() => {
@@ -524,8 +469,8 @@ var Component6 = (props, { element }) => {
     element,
     path: () => props.itemIndex
   };
-  const fullPath = useFullPropertyPath(mergedProps);
-  provideFullPropertyPathContext({
+  const fullPath = useCartPath(mergedProps);
+  provideCartPathContext({
     element,
     path: fullPath
   });
@@ -545,11 +490,12 @@ var Component7 = (props, { element }) => {
       return props.status;
     }
   });
-  const path = useFullPropertyPath({
+  const cart = useAjaxCart(element);
+  const path = useCartPath({
     element
   });
   const data = useCartValue({
-    element,
+    data: cart,
     path
   });
   createEffect(
@@ -577,7 +523,7 @@ var Component7 = (props, { element }) => {
         if (!on5) return console.error(`${Name7}: on property is required!`);
         let resetStatusId = null;
         function onEvent(e) {
-          const cart = AjaxCart;
+          const cart2 = AjaxCart;
           if (preventDefault) e.preventDefault();
           async function handleStatus(promise) {
             setStatus("loading");
@@ -610,7 +556,7 @@ var Component7 = (props, { element }) => {
             );
             if (method === "replaceItem") {
               return handleStatus(
-                cart.replaceItem({
+                cart2.replaceItem({
                   key: formObj.key,
                   id: formObj.id
                 })
@@ -618,7 +564,7 @@ var Component7 = (props, { element }) => {
             }
             if (method === "updateItem") {
               return handleStatus(
-                cart.updateItem({
+                cart2.updateItem({
                   id: formObj.id,
                   quantity: formObj?.quantity || void 0,
                   properties: formObj?.properties || {},
@@ -627,30 +573,30 @@ var Component7 = (props, { element }) => {
               ).finally(reset2);
             }
             if (method === "removeItem") {
-              return handleStatus(cart.removeItem(formObj.key)).finally(reset2);
+              return handleStatus(cart2.removeItem(formObj.key)).finally(reset2);
             }
             if (method === "addDiscount") {
-              return handleStatus(cart.addDiscount(formObj.code)).finally(
+              return handleStatus(cart2.addDiscount(formObj.code)).finally(
                 reset2
               );
             }
             if (method === "removeDiscount") {
-              return handleStatus(cart.removeDiscount(formObj.code)).finally(
+              return handleStatus(cart2.removeDiscount(formObj.code)).finally(
                 reset2
               );
             }
             if (method === "updateNote") {
-              return handleStatus(cart.updateNote(formObj.note)).finally(reset2);
+              return handleStatus(cart2.updateNote(formObj.note)).finally(reset2);
             }
             return;
           }
           const input = e.target;
           if (method === "removeItem") {
-            return handleStatus(cart.removeItem(data2.key));
+            return handleStatus(cart2.removeItem(data2.key));
           }
           if (method === "updateQuantity") {
             return handleStatus(
-              cart.updateItem({
+              cart2.updateItem({
                 id: data2.key,
                 quantity: input.valueAsNumber
               })
@@ -658,14 +604,14 @@ var Component7 = (props, { element }) => {
           }
           if (method === "updateItemVariant") {
             return handleStatus(
-              cart.replaceItem({
+              cart2.replaceItem({
                 key: data2.key,
                 id: input.value
               })
             );
           }
           if (method === "updateNote") {
-            return handleStatus(cart.updateNote(input.value));
+            return handleStatus(cart2.updateNote(input.value));
           }
         }
         const handleEvent = debounce(onEvent, debounceDelay), controller = new AbortController();
@@ -739,10 +685,12 @@ var Component9 = (props, { element }) => {
     element,
     path: () => props.propertyName
   };
-  const fullPath = useFullPropertyPath(mergedProps);
-  const value = useFormattedValue({
-    path: fullPath,
+  const data = useAjaxCart(element);
+  const fullPath = useCartPath(mergedProps);
+  const value = useCartFormattedValue({
     element,
+    path: fullPath,
+    data,
     get format() {
       return props.format;
     }
@@ -764,7 +712,7 @@ var Component9 = (props, { element }) => {
             `${Name9}: Unable to find element with selector of: ${props.target}`
           );
         if (injectionType === "attribute" && value2 !== null && value2 !== void 0) {
-          target.setAttribute(attributeName, value2);
+          target.setAttribute(attributeName, `${value2}`);
           return;
         }
         if (injectionType === "property" && value2 !== null && value2 !== void 0) {
@@ -793,7 +741,7 @@ var Component9 = (props, { element }) => {
           setTimeout(() => {
             target.setAttribute(
               attributeName,
-              tmpValue.replace(`{${propertyName}}`, value2)
+              tmpValue.replace(`{${propertyName}}`, `${value2}`)
             );
           });
           return onCleanup(() => {
@@ -923,6 +871,6 @@ customShadowlessElement(
   correctElementType(cart_loading_state_exports.Component)
 );
 
-export { provideAjaxCartContext, provideFullPropertyPathContext, provideListenerStatusContext, useAjaxCart, useAjaxCartContext, useCartValue, useFormattedValue, useFullPropertyPath, useFullPropertyPathContext, useListenerStatus, useListenerStatusContext, withListenerElementStatus };
+export { provideAjaxCartContext, provideCartPathContext, provideListenerStatusContext, useAjaxCart, useAjaxCartContext, useCartFormattedValue, useCartPath, useCartValue, useListenerStatus, useListenerStatusContext, withListenerElementStatus };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map