saloe 0.0.64 → 0.0.67

package/dist/listener.cjs.js

@@ -16,8 +16,8 @@ const listener = ({
     "focus",
     "invalid"
   ];
-  const addListener = ({ srcElement, event, listeners }) => {
-    srcElement == null ? void 0 : srcElement.addEventListener(event, (e) => {
+  const addListener = ({ srcElement, eventName, listeners }) => {
+    srcElement == null ? void 0 : srcElement.addEventListener(eventName, (e) => {
       executeListeners({ e, srcElement, listeners });
     });
   };
@@ -26,27 +26,27 @@ const listener = ({
       if (listener2) listener2({ e, srcElement });
     });
   };
-  const getListenerFromScript = ({ script, event }) => {
+  const getListenerFromScript = ({ script, eventName }) => {
     var _a;
     if (!script) return null;
-    if (script[event]) return script[event];
-    const prev = (_a = Object.keys(script)) == null ? void 0 : _a.find((key) => script[key][event]);
+    if (script[eventName]) return script[eventName];
+    const prev = (_a = Object.keys(script)) == null ? void 0 : _a.find((key) => script[key][eventName]);
     if (!prev) return null;
-    return script[prev][event];
+    return script[prev][eventName];
   };
-  const fetchListeners = async ({ srcElement, event, e }) => {
+  const fetchListeners = async ({ srcElement, eventName, e }) => {
     var _a;
     if (!(srcElement == null ? void 0 : srcElement.getAttribute)) return;
-    const scriptNames = srcElement == null ? void 0 : srcElement.getAttribute(`on-${event}`);
+    const scriptNames = srcElement == null ? void 0 : srcElement.getAttribute(`on-${eventName}`);
     if (!scriptNames) return;
-    if (scriptNames && EVENTS_PREVENT_DEFAULT_MANDATORY.includes(event)) e.preventDefault();
+    if (scriptNames && EVENTS_PREVENT_DEFAULT_MANDATORY.includes(eventName)) e.preventDefault();
     const scripts = await Promise.all(
       (_a = scriptNames == null ? void 0 : scriptNames.split(",")) == null ? void 0 : _a.map((scriptName) => {
         const scriptToImport = `/${scriptName == null ? void 0 : scriptName.trim()}.js`;
         return importScriptDynamically({ path: scriptToImport });
       })
     );
-    const listeners = scripts == null ? void 0 : scripts.map((script) => getListenerFromScript({ script, event }));
+    const listeners = scripts == null ? void 0 : scripts.map((script) => getListenerFromScript({ script, eventName }));
     return listeners;
   };
   const addScripts = () => {
@@ -101,12 +101,12 @@ const listener = ({
     });
   };
   const fireLoadListener = () => {
-    const event = "load";
-    const srcElements = document == null ? void 0 : document.querySelectorAll(`[on-${event}]`);
+    const eventName = "load";
+    const srcElements = document == null ? void 0 : document.querySelectorAll(`[on-${eventName}]`);
     srcElements == null ? void 0 : srcElements.forEach(async (srcElement) => {
-      const listeners = await fetchListeners({ srcElement, event, e: null });
+      const listeners = await fetchListeners({ srcElement, eventName, e: null });
       executeListeners({ e: null, srcElement, listeners });
-      srcElement == null ? void 0 : srcElement.removeAttribute(`on-${event}`);
+      srcElement == null ? void 0 : srcElement.removeAttribute(`on-${eventName}`);
     });
   };
   const fireObserverListeners = () => {
@@ -122,7 +122,7 @@ const listener = ({
     uniqueScriptNames == null ? void 0 : uniqueScriptNames.forEach(async (scriptName) => {
       const observedSrcElements = document.querySelectorAll(`[on-observe*="${scriptName}"]`);
       const script = await importScriptDynamically({ path: `/${scriptName == null ? void 0 : scriptName.trim()}.js` });
-      const listener2 = getListenerFromScript({ script, event: "observe" });
+      const listener2 = getListenerFromScript({ script, eventName: "observe" });
       if (!listener2) return;
       const observer = new IntersectionObserver((entries) => {
         entries.forEach((entry) => listener2({ entry, observer }));
@@ -139,9 +139,9 @@ const listener = ({
       });
     });
   };
-  const getSrcElement = ({ srcElement, event }) => {
+  const getSrcElement = ({ srcElement, eventName }) => {
     if (!(srcElement == null ? void 0 : srcElement.hasAttribute)) return srcElement;
-    const attribute = `on-${event}`;
+    const attribute = `on-${eventName}`;
     const hasScriptName = srcElement == null ? void 0 : srcElement.hasAttribute(attribute);
     if (hasScriptName) return srcElement;
     const query = `:is(${["a", "button", ...SRC_ELEMEMENTS_QUERY].join(",")})[${attribute}]`;
@@ -149,44 +149,35 @@ const listener = ({
     if (closestButton) return closestButton;
     return srcElement;
   };
-  const cloneSrcElement = ({ srcElement }) => {
-    const newSrcElement = document.createElement(srcElement == null ? void 0 : srcElement.tagName);
-    Array.from(srcElement == null ? void 0 : srcElement.attributes).forEach((attr) => {
-      if (attr.name.startsWith("on-")) return;
-      newSrcElement.setAttribute(attr.name, attr.value);
-    });
-    return newSrcElement;
-  };
   const fireAnchorClickListener = () => {
     const anchors = document.querySelectorAll("a[on-click]");
     anchors == null ? void 0 : anchors.forEach((anchor) => {
       const srcElement = anchor;
-      const event = "click";
-      anchor.addEventListener(event, async (e) => {
+      const eventName = "click";
+      anchor.addEventListener(eventName, async (e) => {
         e.preventDefault();
-        const listeners = await fetchListeners({ srcElement, event, e });
+        const listeners = await fetchListeners({ srcElement, eventName, e });
         executeListeners({ e, srcElement, listeners });
-        const newAnchor = cloneSrcElement({ srcElement });
-        newAnchor.click();
+        console.log("--- eventName =", eventName);
       });
-      if (srcElement == null ? void 0 : srcElement.removeAttribute) srcElement.removeAttribute(`on-${event}`);
+      if (srcElement == null ? void 0 : srcElement.removeAttribute) srcElement.removeAttribute(`on-${eventName}`);
     });
   };
   const fireListeners = () => {
-    EVENTS.forEach((event) => {
-      document.body[`on${event}`] = async (e) => {
-        const srcElement = getSrcElement({ srcElement: e == null ? void 0 : e.srcElement, event });
-        if ((srcElement == null ? void 0 : srcElement.tagName) === "A" && event === "click") return;
-        const listeners = await fetchListeners({ srcElement, event, e });
+    EVENTS.forEach((eventName) => {
+      document.body[`on${eventName}`] = async (e) => {
+        const srcElement = getSrcElement({ srcElement: e == null ? void 0 : e.srcElement, eventName });
+        if ((srcElement == null ? void 0 : srcElement.tagName) === "A" && eventName === "click") return;
+        const listeners = await fetchListeners({ srcElement, eventName, e });
         executeListeners({ e, srcElement, listeners });
-        addListener({ srcElement, event, listeners });
-        if (srcElement == null ? void 0 : srcElement.removeAttribute) srcElement.removeAttribute(`on-${event}`);
+        addListener({ srcElement, eventName, listeners });
+        if (srcElement == null ? void 0 : srcElement.removeAttribute) srcElement.removeAttribute(`on-${eventName}`);
       };
     });
     const saloeListenEvent = new CustomEvent("saloeListen", {
-      detail: { message: "This is a custom event!" }
+      detail: { message: "This is a custom eventName!" }
     });
-    document.body.addEventListener("saloeListen", async (event) => {
+    document.body.addEventListener("saloeListen", async (e) => {
       await addScripts();
       fireLoadListener();
       fireObserverListeners();

package/dist/listener.es.js

@@ -14,8 +14,8 @@ const listener = ({
     "focus",
     "invalid"
   ];
-  const addListener = ({ srcElement, event, listeners }) => {
-    srcElement == null ? void 0 : srcElement.addEventListener(event, (e) => {
+  const addListener = ({ srcElement, eventName, listeners }) => {
+    srcElement == null ? void 0 : srcElement.addEventListener(eventName, (e) => {
       executeListeners({ e, srcElement, listeners });
     });
   };
@@ -24,27 +24,27 @@ const listener = ({
       if (listener2) listener2({ e, srcElement });
     });
   };
-  const getListenerFromScript = ({ script, event }) => {
+  const getListenerFromScript = ({ script, eventName }) => {
     var _a;
     if (!script) return null;
-    if (script[event]) return script[event];
-    const prev = (_a = Object.keys(script)) == null ? void 0 : _a.find((key) => script[key][event]);
+    if (script[eventName]) return script[eventName];
+    const prev = (_a = Object.keys(script)) == null ? void 0 : _a.find((key) => script[key][eventName]);
     if (!prev) return null;
-    return script[prev][event];
+    return script[prev][eventName];
   };
-  const fetchListeners = async ({ srcElement, event, e }) => {
+  const fetchListeners = async ({ srcElement, eventName, e }) => {
     var _a;
     if (!(srcElement == null ? void 0 : srcElement.getAttribute)) return;
-    const scriptNames = srcElement == null ? void 0 : srcElement.getAttribute(`on-${event}`);
+    const scriptNames = srcElement == null ? void 0 : srcElement.getAttribute(`on-${eventName}`);
     if (!scriptNames) return;
-    if (scriptNames && EVENTS_PREVENT_DEFAULT_MANDATORY.includes(event)) e.preventDefault();
+    if (scriptNames && EVENTS_PREVENT_DEFAULT_MANDATORY.includes(eventName)) e.preventDefault();
     const scripts = await Promise.all(
       (_a = scriptNames == null ? void 0 : scriptNames.split(",")) == null ? void 0 : _a.map((scriptName) => {
         const scriptToImport = `/${scriptName == null ? void 0 : scriptName.trim()}.js`;
         return importScriptDynamically({ path: scriptToImport });
       })
     );
-    const listeners = scripts == null ? void 0 : scripts.map((script) => getListenerFromScript({ script, event }));
+    const listeners = scripts == null ? void 0 : scripts.map((script) => getListenerFromScript({ script, eventName }));
     return listeners;
   };
   const addScripts = () => {
@@ -99,12 +99,12 @@ const listener = ({
     });
   };
   const fireLoadListener = () => {
-    const event = "load";
-    const srcElements = document == null ? void 0 : document.querySelectorAll(`[on-${event}]`);
+    const eventName = "load";
+    const srcElements = document == null ? void 0 : document.querySelectorAll(`[on-${eventName}]`);
     srcElements == null ? void 0 : srcElements.forEach(async (srcElement) => {
-      const listeners = await fetchListeners({ srcElement, event, e: null });
+      const listeners = await fetchListeners({ srcElement, eventName, e: null });
       executeListeners({ e: null, srcElement, listeners });
-      srcElement == null ? void 0 : srcElement.removeAttribute(`on-${event}`);
+      srcElement == null ? void 0 : srcElement.removeAttribute(`on-${eventName}`);
     });
   };
   const fireObserverListeners = () => {
@@ -120,7 +120,7 @@ const listener = ({
     uniqueScriptNames == null ? void 0 : uniqueScriptNames.forEach(async (scriptName) => {
       const observedSrcElements = document.querySelectorAll(`[on-observe*="${scriptName}"]`);
       const script = await importScriptDynamically({ path: `/${scriptName == null ? void 0 : scriptName.trim()}.js` });
-      const listener2 = getListenerFromScript({ script, event: "observe" });
+      const listener2 = getListenerFromScript({ script, eventName: "observe" });
       if (!listener2) return;
       const observer = new IntersectionObserver((entries) => {
         entries.forEach((entry) => listener2({ entry, observer }));
@@ -137,9 +137,9 @@ const listener = ({
       });
     });
   };
-  const getSrcElement = ({ srcElement, event }) => {
+  const getSrcElement = ({ srcElement, eventName }) => {
     if (!(srcElement == null ? void 0 : srcElement.hasAttribute)) return srcElement;
-    const attribute = `on-${event}`;
+    const attribute = `on-${eventName}`;
     const hasScriptName = srcElement == null ? void 0 : srcElement.hasAttribute(attribute);
     if (hasScriptName) return srcElement;
     const query = `:is(${["a", "button", ...SRC_ELEMEMENTS_QUERY].join(",")})[${attribute}]`;
@@ -147,44 +147,35 @@ const listener = ({
     if (closestButton) return closestButton;
     return srcElement;
   };
-  const cloneSrcElement = ({ srcElement }) => {
-    const newSrcElement = document.createElement(srcElement == null ? void 0 : srcElement.tagName);
-    Array.from(srcElement == null ? void 0 : srcElement.attributes).forEach((attr) => {
-      if (attr.name.startsWith("on-")) return;
-      newSrcElement.setAttribute(attr.name, attr.value);
-    });
-    return newSrcElement;
-  };
   const fireAnchorClickListener = () => {
     const anchors = document.querySelectorAll("a[on-click]");
     anchors == null ? void 0 : anchors.forEach((anchor) => {
       const srcElement = anchor;
-      const event = "click";
-      anchor.addEventListener(event, async (e) => {
+      const eventName = "click";
+      anchor.addEventListener(eventName, async (e) => {
         e.preventDefault();
-        const listeners = await fetchListeners({ srcElement, event, e });
+        const listeners = await fetchListeners({ srcElement, eventName, e });
         executeListeners({ e, srcElement, listeners });
-        const newAnchor = cloneSrcElement({ srcElement });
-        newAnchor.click();
+        console.log("--- eventName =", eventName);
       });
-      if (srcElement == null ? void 0 : srcElement.removeAttribute) srcElement.removeAttribute(`on-${event}`);
+      if (srcElement == null ? void 0 : srcElement.removeAttribute) srcElement.removeAttribute(`on-${eventName}`);
     });
   };
   const fireListeners = () => {
-    EVENTS.forEach((event) => {
-      document.body[`on${event}`] = async (e) => {
-        const srcElement = getSrcElement({ srcElement: e == null ? void 0 : e.srcElement, event });
-        if ((srcElement == null ? void 0 : srcElement.tagName) === "A" && event === "click") return;
-        const listeners = await fetchListeners({ srcElement, event, e });
+    EVENTS.forEach((eventName) => {
+      document.body[`on${eventName}`] = async (e) => {
+        const srcElement = getSrcElement({ srcElement: e == null ? void 0 : e.srcElement, eventName });
+        if ((srcElement == null ? void 0 : srcElement.tagName) === "A" && eventName === "click") return;
+        const listeners = await fetchListeners({ srcElement, eventName, e });
         executeListeners({ e, srcElement, listeners });
-        addListener({ srcElement, event, listeners });
-        if (srcElement == null ? void 0 : srcElement.removeAttribute) srcElement.removeAttribute(`on-${event}`);
+        addListener({ srcElement, eventName, listeners });
+        if (srcElement == null ? void 0 : srcElement.removeAttribute) srcElement.removeAttribute(`on-${eventName}`);
       };
     });
     const saloeListenEvent = new CustomEvent("saloeListen", {
-      detail: { message: "This is a custom event!" }
+      detail: { message: "This is a custom eventName!" }
     });
-    document.body.addEventListener("saloeListen", async (event) => {
+    document.body.addEventListener("saloeListen", async (e) => {
       await addScripts();
       fireLoadListener();
       fireObserverListeners();

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "saloe",
-    "version": "0.0.64",
+    "version": "0.0.67",
     "description": "Tools for making web development easy and efficient",
     "type": "module",
     "scripts": {

package/src/listener.js

@@ -16,8 +16,8 @@ const listener = ({
         'invalid',
     ]
 
-    const addListener = ({ srcElement, event, listeners }) => {
-        srcElement?.addEventListener(event, (e) => {
+    const addListener = ({ srcElement, eventName, listeners }) => {
+        srcElement?.addEventListener(eventName, (e) => {
             executeListeners({ e, srcElement, listeners })
         })
     }
@@ -28,21 +28,21 @@ const listener = ({
         })
     }
 
-    const getListenerFromScript = ({ script, event }) => {
+    const getListenerFromScript = ({ script, eventName }) => {
         if (!script) return null
-        if (script[event]) return script[event]
-        const prev = Object.keys(script)?.find((key) => script[key][event])
+        if (script[eventName]) return script[eventName]
+        const prev = Object.keys(script)?.find((key) => script[key][eventName])
         if (!prev) return null
-        return script[prev][event]
+        return script[prev][eventName]
     }
 
-    const fetchListeners = async ({ srcElement, event, e }) => {
+    const fetchListeners = async ({ srcElement, eventName, e }) => {
         if (!srcElement?.getAttribute) return
 
-        const scriptNames = srcElement?.getAttribute(`on-${event}`)
+        const scriptNames = srcElement?.getAttribute(`on-${eventName}`)
         if (!scriptNames) return
 
-        if (scriptNames && EVENTS_PREVENT_DEFAULT_MANDATORY.includes(event)) e.preventDefault()
+        if (scriptNames && EVENTS_PREVENT_DEFAULT_MANDATORY.includes(eventName)) e.preventDefault()
 
         const scripts = await Promise.all(
             scriptNames?.split(',')?.map((scriptName) => {
@@ -51,7 +51,7 @@ const listener = ({
             })
         )
 
-        const listeners = scripts?.map((script) => getListenerFromScript({ script, event }))
+        const listeners = scripts?.map((script) => getListenerFromScript({ script, eventName }))
 
         return listeners
     }
@@ -118,47 +118,47 @@ const listener = ({
 
     // load
     const fireLoadListener = () => {
-        const event = 'load'
-        const srcElements = document?.querySelectorAll(`[on-${event}]`)
+        const eventName = 'load'
+        const srcElements = document?.querySelectorAll(`[on-${eventName}]`)
 
         srcElements?.forEach(async (srcElement) => {
-            const listeners = await fetchListeners({ srcElement, event, e: null })
+            const listeners = await fetchListeners({ srcElement, eventName, e: null })
             executeListeners({ e: null, srcElement, listeners })
 
-            srcElement?.removeAttribute(`on-${event}`)
+            srcElement?.removeAttribute(`on-${eventName}`)
         })
     }
 
     // invalid
     const fireInvalidListener = () => {
-        const event = 'invalid'
-        const srcElements = document?.querySelectorAll(`[on-${event}]`)
+        const eventName = 'invalid'
+        const srcElements = document?.querySelectorAll(`[on-${eventName}]`)
 
         srcElements?.forEach(async (srcElement) => {
-            const listeners = await fetchListeners({ srcElement, event, e: null })
-            addListener({ srcElement, event, listeners })
+            const listeners = await fetchListeners({ srcElement, eventName, e: null })
+            addListener({ srcElement, eventName, listeners })
         })
     }
 
     // blur
     const fireBlurListener = () => {
-        const event = 'blur'
-        const srcElements = document?.querySelectorAll(`[on-${event}]`)
+        const eventName = 'blur'
+        const srcElements = document?.querySelectorAll(`[on-${eventName}]`)
 
         srcElements?.forEach(async (srcElement) => {
-            const listeners = await fetchListeners({ srcElement, event, e: null })
-            addListener({ srcElement, event, listeners })
+            const listeners = await fetchListeners({ srcElement, eventName, e: null })
+            addListener({ srcElement, eventName, listeners })
         })
     }
 
     // focus
     const fireFocusListener = () => {
-        const event = 'focus'
-        const srcElements = document?.querySelectorAll(`[on-${event}]`)
+        const eventName = 'focus'
+        const srcElements = document?.querySelectorAll(`[on-${eventName}]`)
 
         srcElements?.forEach(async (srcElement) => {
-            const listeners = await fetchListeners({ srcElement, event, e: null })
-            addListener({ srcElement, event, listeners })
+            const listeners = await fetchListeners({ srcElement, eventName, e: null })
+            addListener({ srcElement, eventName, listeners })
         })
     }
 
@@ -180,7 +180,7 @@ const listener = ({
             const observedSrcElements = document.querySelectorAll(`[on-observe*="${scriptName}"]`)
 
             const script = await importScriptDynamically({ path: `/${scriptName?.trim()}.js` })
-            const listener = getListenerFromScript({ script, event: 'observe' })
+            const listener = getListenerFromScript({ script, eventName: 'observe' })
             if (!listener) return
 
             const observer = new IntersectionObserver((entries) => {
@@ -201,9 +201,9 @@ const listener = ({
         })
     }
 
-    const getSrcElement = ({ srcElement, event }) => {
+    const getSrcElement = ({ srcElement, eventName }) => {
         if (!srcElement?.hasAttribute) return srcElement
-        const attribute = `on-${event}`
+        const attribute = `on-${eventName}`
         const hasScriptName = srcElement?.hasAttribute(attribute)
         if (hasScriptName) return srcElement
 
@@ -229,42 +229,44 @@ const listener = ({
         const anchors = document.querySelectorAll('a[on-click]')
         anchors?.forEach((anchor) => {
             const srcElement = anchor
-            const event = 'click'
+            const eventName = 'click'
 
-            anchor.addEventListener(event, async (e) => {
+            anchor.addEventListener(eventName, async (e) => {
                 e.preventDefault()
                 
-                const listeners = await fetchListeners({ srcElement, event, e })
+                const listeners = await fetchListeners({ srcElement, eventName, e })
                 executeListeners({ e, srcElement, listeners })
 
-                const newAnchor = cloneSrcElement({ srcElement })
-                newAnchor.click()
+                console.log('--- eventName =', eventName)
+
+                // const newAnchor = cloneSrcElement({ srcElement })
+                // newAnchor.click()
             })
 
-            if (srcElement?.removeAttribute) srcElement.removeAttribute(`on-${event}`)
+            if (srcElement?.removeAttribute) srcElement.removeAttribute(`on-${eventName}`)
         })
     }
 
     const fireListeners = () => {
-        EVENTS.forEach((event) => {
-            document.body[`on${event}`] = async (e) => {
-                const srcElement = getSrcElement({ srcElement: e?.srcElement, event })
-                if (srcElement?.tagName === 'A' && event === 'click') return
+        EVENTS.forEach((eventName) => {
+            document.body[`on${eventName}`] = async (e) => {
+                const srcElement = getSrcElement({ srcElement: e?.srcElement, eventName })
+                if (srcElement?.tagName === 'A' && eventName === 'click') return
 
-                const listeners = await fetchListeners({ srcElement, event, e })
+                const listeners = await fetchListeners({ srcElement, eventName, e })
                 
                 executeListeners({ e, srcElement, listeners })
-                addListener({ srcElement, event, listeners })
+                addListener({ srcElement, eventName, listeners })
                 
-                if (srcElement?.removeAttribute) srcElement.removeAttribute(`on-${event}`)
+                if (srcElement?.removeAttribute) srcElement.removeAttribute(`on-${eventName}`)
             }
         })
 
         const saloeListenEvent = new CustomEvent('saloeListen', {
-            detail: { message: 'This is a custom event!' }
+            detail: { message: 'This is a custom eventName!' }
         })
 
-        document.body.addEventListener('saloeListen', async (event) => {
+        document.body.addEventListener('saloeListen', async (e) => {
             await addScripts()
             fireLoadListener()
             fireObserverListeners()