saloe 0.0.1 → 0.0.2

package/README.md

@@ -1,19 +1,19 @@
-# salo
+# saloe
 
-`salo` is a toolkit that makes building reactive web apps easy, with `0kb of initial JavaScript` and lightning-fast rendering.
+`saloe` is a toolkit that makes building reactive web apps easy, with `0kb of initial JavaScript` and lightning-fast rendering.
 
-It works seamlessly with Cloudflare Workers and Service Workers, and can also be used in Node or other server-side JavaScript environments.
+It works seamlessly with `Cloudflare Workers` and `Service Workers`, and can also be used in Node or other server-side JavaScript environments.
 
-**Note:** `salo` is still under development, and version 1.0 is not ready yet. Expect changes and improvements as we work towards the initial release.
+**Note:** `saloe` is still under development, and version 1.0 is not ready yet. Expect changes and improvements as we work towards the initial release.
 
 ## Packages
 
-- [`@jaimytacovega/salo/router`](./src/router.js) - Manage web requests using URLPattern for route matching.
+- [`saloe/router`](./src/router.js) - Manage web requests using URLPattern for route matching.
   
-- [`@jaimytacovega/salo/html`](./src/html.js) - Stream HTML templates and render temporary templates while waiting for asynchronous functions to finish processing the final template.
+- [`saloe/html`](./src/html.js) - Stream HTML templates and render temporary templates while waiting for asynchronous functions to finish processing the final template.
 
-- [`@jaimytacovega/salo/actions`](./src/actions.js) - Add reactivity to HTML nodes with 0kb of initial JavaScript.
+- [`saloe/actions`](./src/actions.js) - Add reactivity to HTML nodes with 0kb of initial JavaScript.
 
 ## Coming Soon
 
-- [`@jaimytacovega/salo/offline`](./src/offline.js) Manage browser cache resources to handle HTML template requests.
+- [`saloe/offline`](./src/offline.js) Manage browser cache resources to handle HTML template requests.

package/dist/actions.cjs.js

@@ -241,28 +241,9 @@ const LISTENER_SCRIPT = html.html(_a || (_a = __template([`
                         executeListeners({ e, srcElement, listeners })
                         addListener({ srcElement, event, listeners })
                         
-                        console.log('--- removeAttribute =', srcElement?.removeAttribute)
                         if (srcElement?.removeAttribute) srcElement.removeAttribute('on-' + event)
                     }
                 })
-
-                // ['mouseover', 'click', 'submit', 'input', 'blur', 'change']?.forEach((event) => {
-                //     document.body['on' + event] = async (e) => {
-                //         if (EVENTS_FIRE_DOCUMENT_BODY_LISTENERS.includes(event)) {
-                //             await addScripts()
-
-                //             fireLoadListener()
-                //             fireInvalidListener()
-                //             fireBlurListener()
-                //             fireFocusListener()
-
-                //             fireObserverListeners()
-                //         }
-
-                //         const srcElement = getSrcElement({ srcElement: e.srcElement, event })
-                //         fetchListeners({ srcElement, event, e })
-                //     }
-                // })
             }
 
             fireListeners()

package/dist/actions.es.js

@@ -239,28 +239,9 @@ const LISTENER_SCRIPT = html(_a || (_a = __template([`
                         executeListeners({ e, srcElement, listeners })
                         addListener({ srcElement, event, listeners })
                         
-                        console.log('--- removeAttribute =', srcElement?.removeAttribute)
                         if (srcElement?.removeAttribute) srcElement.removeAttribute('on-' + event)
                     }
                 })
-
-                // ['mouseover', 'click', 'submit', 'input', 'blur', 'change']?.forEach((event) => {
-                //     document.body['on' + event] = async (e) => {
-                //         if (EVENTS_FIRE_DOCUMENT_BODY_LISTENERS.includes(event)) {
-                //             await addScripts()
-
-                //             fireLoadListener()
-                //             fireInvalidListener()
-                //             fireBlurListener()
-                //             fireFocusListener()
-
-                //             fireObserverListeners()
-                //         }
-
-                //         const srcElement = getSrcElement({ srcElement: e.srcElement, event })
-                //         fetchListeners({ srcElement, event, e })
-                //     }
-                // })
             }
 
             fireListeners()

package/dist/listener.cjs.js

@@ -0,0 +1,179 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const listener = () => {
+  const EVENTS_PREVENT_DEFAULT_MANDATORY = [
+    "submit"
+  ];
+  const EVENTS_FIRE_DOCUMENT_BODY_LISTENERS = [
+    "mouseover",
+    "click"
+  ];
+  const EVENTS = [
+    "submit",
+    "input",
+    "blur",
+    "change",
+    "focus",
+    "invalid"
+  ];
+  const addListener = ({ srcElement, event, listeners }) => {
+    srcElement == null ? void 0 : srcElement.addEventListener(event, (e) => {
+      executeListeners({ e, srcElement, listeners });
+    });
+  };
+  const executeListeners = ({ e, srcElement, listeners }) => {
+    listeners == null ? void 0 : listeners.forEach((listener2) => {
+      if (listener2) listener2({ e, srcElement });
+    });
+  };
+  const getListenerFromScript = ({ script, event }) => {
+    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 (!prev) return null;
+    return script[prev][event];
+  };
+  const fetchListeners = async ({ srcElement, event, e }) => {
+    var _a;
+    if (!(srcElement == null ? void 0 : srcElement.getAttribute)) return;
+    const scriptNames = srcElement == null ? void 0 : srcElement.getAttribute("on-" + event);
+    if (!scriptNames) return;
+    if (scriptNames && EVENTS_PREVENT_DEFAULT_MANDATORY.includes(event)) e.preventDefault();
+    const scripts = await Promise.all(
+      (_a = scriptNames == null ? void 0 : scriptNames.split(",")) == null ? void 0 : _a.map((scriptName) => {
+        var _a2;
+        const scriptToImport = "/" + (scriptName == null ? void 0 : scriptName.trim()) + ".js";
+        return (_a2 = import(scriptToImport)) == null ? void 0 : _a2.catch((err) => {
+        });
+      })
+    );
+    const listeners = scripts == null ? void 0 : scripts.map((script) => getListenerFromScript({ script, event }));
+    return listeners;
+  };
+  const addScripts = () => {
+    const scriptsToLoad = [...document.querySelectorAll("script[data-script-to-load]")];
+    return Promise.all(
+      scriptsToLoad == null ? void 0 : scriptsToLoad.map((scriptToLoad) => {
+        var _a;
+        const id = scriptToLoad == null ? void 0 : scriptToLoad.getAttribute("data-script-to-load");
+        scriptToLoad.removeAttribute("data-script-to-load");
+        const attrs = (_a = scriptToLoad == null ? void 0 : scriptToLoad.getAttributeNames()) == null ? void 0 : _a.reduce((acc, attrName) => {
+          const attrValue = scriptToLoad.getAttribute(attrName);
+          if (attrValue !== "text/script-to-load") acc[attrName] = attrValue;
+          return acc;
+        }, {});
+        const content = scriptToLoad == null ? void 0 : scriptToLoad.textContent;
+        scriptToLoad == null ? void 0 : scriptToLoad.remove();
+        return loadScript({ id, attrs, content }).catch((err) => {
+          console.error(err);
+        });
+      })
+    );
+  };
+  const loadScript = ({ id, attrs, content }) => {
+    var _a;
+    const script = document == null ? void 0 : document.createElement("script");
+    (_a = Object.keys(attrs)) == null ? void 0 : _a.forEach((attrKey) => script == null ? void 0 : script.setAttribute(attrKey, attrs[attrKey]));
+    script.id = id;
+    if (content) script == null ? void 0 : script.insertAdjacentHTML("beforeend", content);
+    return new Promise((resolve, reject) => {
+      var _a2, _b;
+      if (!attrs.src) {
+        resolve();
+        (_a2 = document == null ? void 0 : document.body) == null ? void 0 : _a2.insertAdjacentElement("beforeend", script);
+        return;
+      }
+      script.onload = script.onreadystatechange = function() {
+        if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") {
+          resolve();
+          script.onload = script.onreadystatechange = null;
+        }
+      };
+      script.onerror = () => {
+        console.error("script failed to load");
+        reject(new Error("Failed to load script with src " + script.src));
+      };
+      (_b = document == null ? void 0 : document.body) == null ? void 0 : _b.insertAdjacentElement("beforeend", script);
+    });
+  };
+  const fireLoadListener = () => {
+    const event = "load";
+    const srcElements = document == null ? void 0 : document.querySelectorAll("[on-" + event + "]");
+    srcElements == null ? void 0 : srcElements.forEach(async (srcElement) => {
+      const listeners = await fetchListeners({ srcElement, event, e: null });
+      executeListeners({ e: null, srcElement, listeners });
+      srcElement == null ? void 0 : srcElement.removeAttribute("on-" + event);
+    });
+  };
+  const fireObserverListeners = () => {
+    var _a;
+    const srcElements = [...document.querySelectorAll("[on-observe]")];
+    const uniqueScriptNames = [...(_a = srcElements == null ? void 0 : srcElements.reduce((acc, srcElement) => {
+      const attribute = srcElement == null ? void 0 : srcElement.getAttribute("on-observe");
+      if (attribute === "undefined") return acc;
+      const scriptNames = attribute == null ? void 0 : attribute.split(",");
+      scriptNames == null ? void 0 : scriptNames.forEach((scriptName) => acc == null ? void 0 : acc.set(scriptName, 1));
+      return acc;
+    }, /* @__PURE__ */ new Map())) == null ? void 0 : _a.keys()];
+    uniqueScriptNames == null ? void 0 : uniqueScriptNames.forEach(async (scriptName) => {
+      var _a2;
+      const observedSrcElements = document.querySelectorAll('[on-observe*="' + scriptName + '"]');
+      const script = await ((_a2 = import("/" + (scriptName == null ? void 0 : scriptName.trim()) + ".js")) == null ? void 0 : _a2.catch((err) => {
+      }));
+      const listener2 = getListenerFromScript({ script, event: "observe" });
+      if (!listener2) return;
+      const observer = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => listener2({ entry, observer }));
+      });
+      observedSrcElements == null ? void 0 : observedSrcElements.forEach((observerSrcElement) => {
+        var _a3, _b;
+        observer.observe(observerSrcElement);
+        const observerAttr = observerSrcElement == null ? void 0 : observerSrcElement.getAttribute("on-observe");
+        const updatedObserverAttr = (_b = (_a3 = observerAttr == null ? void 0 : observerAttr.replaceAll(scriptName + ", ", "")) == null ? void 0 : _a3.replaceAll(", " + scriptName, "")) == null ? void 0 : _b.replaceAll(scriptName, "");
+        if (updatedObserverAttr === "") observerSrcElement.removeAttribute("on-observe");
+        else observerSrcElement.setAttribute("on-observe", updatedObserverAttr);
+      });
+    });
+  };
+  const getSrcElement = ({ srcElement, event }) => {
+    if (!(srcElement == null ? void 0 : srcElement.hasAttribute)) return srcElement;
+    const attribute = "on-" + event;
+    const hasScriptName = srcElement == null ? void 0 : srcElement.hasAttribute(attribute);
+    if (hasScriptName) return srcElement;
+    const query = ":is(a, button, li)[" + attribute + "]";
+    const closestButton = srcElement == null ? void 0 : srcElement.closest(query);
+    if (closestButton) return closestButton;
+    return srcElement;
+  };
+  const fireListeners = () => {
+    EVENTS_FIRE_DOCUMENT_BODY_LISTENERS == null ? void 0 : EVENTS_FIRE_DOCUMENT_BODY_LISTENERS.forEach((event) => {
+      document.body["on" + event] = async (e) => {
+        await addScripts();
+        fireLoadListener();
+        fireObserverListeners();
+      };
+    });
+    EVENTS == null ? void 0 : EVENTS.forEach((event) => {
+      document.body["on" + event] = async (e) => {
+        const srcElement = getSrcElement({ srcElement: e == null ? void 0 : e.srcElement, event });
+        const listeners = await fetchListeners({ srcElement, event, e });
+        executeListeners({ e, srcElement, listeners });
+        addListener({ srcElement, event, listeners });
+        if (srcElement == null ? void 0 : srcElement.removeAttribute) srcElement.removeAttribute("on-" + event);
+      };
+    });
+  };
+  fireListeners();
+  window.onload = () => {
+    setTimeout(() => {
+      var _a;
+      (_a = document == null ? void 0 : document.body) == null ? void 0 : _a.click();
+    }, 2500);
+  };
+};
+const getScriptListener = () => {
+  return `<script defer>(${listener.toString()})()<\/script>`;
+};
+exports.getScriptListener = getScriptListener;
+exports.listener = listener;

package/dist/listener.es.js

@@ -0,0 +1,179 @@
+const listener = () => {
+  const EVENTS_PREVENT_DEFAULT_MANDATORY = [
+    "submit"
+  ];
+  const EVENTS_FIRE_DOCUMENT_BODY_LISTENERS = [
+    "mouseover",
+    "click"
+  ];
+  const EVENTS = [
+    "submit",
+    "input",
+    "blur",
+    "change",
+    "focus",
+    "invalid"
+  ];
+  const addListener = ({ srcElement, event, listeners }) => {
+    srcElement == null ? void 0 : srcElement.addEventListener(event, (e) => {
+      executeListeners({ e, srcElement, listeners });
+    });
+  };
+  const executeListeners = ({ e, srcElement, listeners }) => {
+    listeners == null ? void 0 : listeners.forEach((listener2) => {
+      if (listener2) listener2({ e, srcElement });
+    });
+  };
+  const getListenerFromScript = ({ script, event }) => {
+    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 (!prev) return null;
+    return script[prev][event];
+  };
+  const fetchListeners = async ({ srcElement, event, e }) => {
+    var _a;
+    if (!(srcElement == null ? void 0 : srcElement.getAttribute)) return;
+    const scriptNames = srcElement == null ? void 0 : srcElement.getAttribute("on-" + event);
+    if (!scriptNames) return;
+    if (scriptNames && EVENTS_PREVENT_DEFAULT_MANDATORY.includes(event)) e.preventDefault();
+    const scripts = await Promise.all(
+      (_a = scriptNames == null ? void 0 : scriptNames.split(",")) == null ? void 0 : _a.map((scriptName) => {
+        var _a2;
+        const scriptToImport = "/" + (scriptName == null ? void 0 : scriptName.trim()) + ".js";
+        return (_a2 = import(scriptToImport)) == null ? void 0 : _a2.catch((err) => {
+        });
+      })
+    );
+    const listeners = scripts == null ? void 0 : scripts.map((script) => getListenerFromScript({ script, event }));
+    return listeners;
+  };
+  const addScripts = () => {
+    const scriptsToLoad = [...document.querySelectorAll("script[data-script-to-load]")];
+    return Promise.all(
+      scriptsToLoad == null ? void 0 : scriptsToLoad.map((scriptToLoad) => {
+        var _a;
+        const id = scriptToLoad == null ? void 0 : scriptToLoad.getAttribute("data-script-to-load");
+        scriptToLoad.removeAttribute("data-script-to-load");
+        const attrs = (_a = scriptToLoad == null ? void 0 : scriptToLoad.getAttributeNames()) == null ? void 0 : _a.reduce((acc, attrName) => {
+          const attrValue = scriptToLoad.getAttribute(attrName);
+          if (attrValue !== "text/script-to-load") acc[attrName] = attrValue;
+          return acc;
+        }, {});
+        const content = scriptToLoad == null ? void 0 : scriptToLoad.textContent;
+        scriptToLoad == null ? void 0 : scriptToLoad.remove();
+        return loadScript({ id, attrs, content }).catch((err) => {
+          console.error(err);
+        });
+      })
+    );
+  };
+  const loadScript = ({ id, attrs, content }) => {
+    var _a;
+    const script = document == null ? void 0 : document.createElement("script");
+    (_a = Object.keys(attrs)) == null ? void 0 : _a.forEach((attrKey) => script == null ? void 0 : script.setAttribute(attrKey, attrs[attrKey]));
+    script.id = id;
+    if (content) script == null ? void 0 : script.insertAdjacentHTML("beforeend", content);
+    return new Promise((resolve, reject) => {
+      var _a2, _b;
+      if (!attrs.src) {
+        resolve();
+        (_a2 = document == null ? void 0 : document.body) == null ? void 0 : _a2.insertAdjacentElement("beforeend", script);
+        return;
+      }
+      script.onload = script.onreadystatechange = function() {
+        if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") {
+          resolve();
+          script.onload = script.onreadystatechange = null;
+        }
+      };
+      script.onerror = () => {
+        console.error("script failed to load");
+        reject(new Error("Failed to load script with src " + script.src));
+      };
+      (_b = document == null ? void 0 : document.body) == null ? void 0 : _b.insertAdjacentElement("beforeend", script);
+    });
+  };
+  const fireLoadListener = () => {
+    const event = "load";
+    const srcElements = document == null ? void 0 : document.querySelectorAll("[on-" + event + "]");
+    srcElements == null ? void 0 : srcElements.forEach(async (srcElement) => {
+      const listeners = await fetchListeners({ srcElement, event, e: null });
+      executeListeners({ e: null, srcElement, listeners });
+      srcElement == null ? void 0 : srcElement.removeAttribute("on-" + event);
+    });
+  };
+  const fireObserverListeners = () => {
+    var _a;
+    const srcElements = [...document.querySelectorAll("[on-observe]")];
+    const uniqueScriptNames = [...(_a = srcElements == null ? void 0 : srcElements.reduce((acc, srcElement) => {
+      const attribute = srcElement == null ? void 0 : srcElement.getAttribute("on-observe");
+      if (attribute === "undefined") return acc;
+      const scriptNames = attribute == null ? void 0 : attribute.split(",");
+      scriptNames == null ? void 0 : scriptNames.forEach((scriptName) => acc == null ? void 0 : acc.set(scriptName, 1));
+      return acc;
+    }, /* @__PURE__ */ new Map())) == null ? void 0 : _a.keys()];
+    uniqueScriptNames == null ? void 0 : uniqueScriptNames.forEach(async (scriptName) => {
+      var _a2;
+      const observedSrcElements = document.querySelectorAll('[on-observe*="' + scriptName + '"]');
+      const script = await ((_a2 = import("/" + (scriptName == null ? void 0 : scriptName.trim()) + ".js")) == null ? void 0 : _a2.catch((err) => {
+      }));
+      const listener2 = getListenerFromScript({ script, event: "observe" });
+      if (!listener2) return;
+      const observer = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => listener2({ entry, observer }));
+      });
+      observedSrcElements == null ? void 0 : observedSrcElements.forEach((observerSrcElement) => {
+        var _a3, _b;
+        observer.observe(observerSrcElement);
+        const observerAttr = observerSrcElement == null ? void 0 : observerSrcElement.getAttribute("on-observe");
+        const updatedObserverAttr = (_b = (_a3 = observerAttr == null ? void 0 : observerAttr.replaceAll(scriptName + ", ", "")) == null ? void 0 : _a3.replaceAll(", " + scriptName, "")) == null ? void 0 : _b.replaceAll(scriptName, "");
+        if (updatedObserverAttr === "") observerSrcElement.removeAttribute("on-observe");
+        else observerSrcElement.setAttribute("on-observe", updatedObserverAttr);
+      });
+    });
+  };
+  const getSrcElement = ({ srcElement, event }) => {
+    if (!(srcElement == null ? void 0 : srcElement.hasAttribute)) return srcElement;
+    const attribute = "on-" + event;
+    const hasScriptName = srcElement == null ? void 0 : srcElement.hasAttribute(attribute);
+    if (hasScriptName) return srcElement;
+    const query = ":is(a, button, li)[" + attribute + "]";
+    const closestButton = srcElement == null ? void 0 : srcElement.closest(query);
+    if (closestButton) return closestButton;
+    return srcElement;
+  };
+  const fireListeners = () => {
+    EVENTS_FIRE_DOCUMENT_BODY_LISTENERS == null ? void 0 : EVENTS_FIRE_DOCUMENT_BODY_LISTENERS.forEach((event) => {
+      document.body["on" + event] = async (e) => {
+        await addScripts();
+        fireLoadListener();
+        fireObserverListeners();
+      };
+    });
+    EVENTS == null ? void 0 : EVENTS.forEach((event) => {
+      document.body["on" + event] = async (e) => {
+        const srcElement = getSrcElement({ srcElement: e == null ? void 0 : e.srcElement, event });
+        const listeners = await fetchListeners({ srcElement, event, e });
+        executeListeners({ e, srcElement, listeners });
+        addListener({ srcElement, event, listeners });
+        if (srcElement == null ? void 0 : srcElement.removeAttribute) srcElement.removeAttribute("on-" + event);
+      };
+    });
+  };
+  fireListeners();
+  window.onload = () => {
+    setTimeout(() => {
+      var _a;
+      (_a = document == null ? void 0 : document.body) == null ? void 0 : _a.click();
+    }, 2500);
+  };
+};
+const getScriptListener = () => {
+  return `<script defer>(${listener.toString()})()<\/script>`;
+};
+export {
+  getScriptListener,
+  listener
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "saloe",
-    "version": "0.0.1",
+    "version": "0.0.2",
     "description": "Tools for making web development easy and efficient",
     "scripts": {
         "build": "vite build",
@@ -8,7 +8,7 @@
     },
     "repository": {
         "type": "git",
-        "url": "git+https://github.com/jaimytacovega/salo.git"
+        "url": "git+https://github.com/jaimytacovega/saloe.git"
     },
     "author": "Jaimy Taco",
     "license": "ISC",
@@ -33,6 +33,10 @@
             "import": "./dist/html.es.js",
             "require": "./dist/html.cjs.js"
         },
+        "./listener": {
+            "import": "./dist/listener.es.js",
+            "require": "./dist/listener.cjs.js"
+        },
         "./router": {
             "import": "./dist/router.es.js",
             "require": "./dist/router.cjs.js"

package/src/listener.js

@@ -0,0 +1,250 @@
+const listener = () => {
+    const EVENTS_PREVENT_DEFAULT_MANDATORY = [
+        'submit'
+    ]
+
+    const EVENTS_FIRE_DOCUMENT_BODY_LISTENERS = [
+        'mouseover',
+        'click',
+    ]
+
+    const EVENTS = [
+        'submit',
+        'input',
+        'blur',
+        'change',
+        'focus',
+        'invalid',
+    ]
+
+    const addListener = ({ srcElement, event, listeners }) => {
+        srcElement?.addEventListener(event, (e) => {
+            executeListeners({ e, srcElement, listeners })
+        })
+    }
+
+    const executeListeners = ({ e, srcElement, listeners }) => {
+        listeners?.forEach((listener) => {
+            if (listener) listener({ e, srcElement })
+        })
+    }
+
+    const getListenerFromScript = ({ script, event }) => {
+        if (!script) return null
+        if (script[event]) return script[event]
+        const prev = Object.keys(script)?.find((key) => script[key][event])
+        if (!prev) return null
+        return script[prev][event]
+    }
+
+    const fetchListeners = async ({ srcElement, event, e }) => {
+        if (!srcElement?.getAttribute) return
+
+        const scriptNames = srcElement?.getAttribute('on-' + event)
+        if (!scriptNames) return
+
+        if (scriptNames && EVENTS_PREVENT_DEFAULT_MANDATORY.includes(event)) e.preventDefault()
+
+        const scripts = await Promise.all(
+            scriptNames?.split(',')?.map((scriptName) => {
+                const scriptToImport = '/' + scriptName?.trim() + '.js'
+                return import(scriptToImport)?.catch((err) => { })
+            })
+        )
+
+        const listeners = scripts?.map((script) => getListenerFromScript({ script, event }))
+
+        return listeners
+    }
+
+    const addScripts = () => {
+        const scriptsToLoad = [...document.querySelectorAll('script[data-script-to-load]')]
+        return Promise.all(
+            scriptsToLoad?.map((scriptToLoad) => {
+                const id = scriptToLoad?.getAttribute('data-script-to-load')
+                scriptToLoad.removeAttribute('data-script-to-load')
+
+                const attrs = scriptToLoad?.getAttributeNames()?.reduce((acc, attrName) => {
+                    const attrValue = scriptToLoad.getAttribute(attrName)
+                    if (attrValue !== 'text/script-to-load') acc[attrName] = attrValue
+                    return acc
+                }, {})
+
+                const content = scriptToLoad?.textContent
+
+                scriptToLoad?.remove()
+
+                return loadScript({ id, attrs, content }).catch((err) => {
+                    console.error(err)
+                })
+            })
+        )
+    }
+
+    const loadScript = ({ id, attrs, content }) => {
+        const script = document?.createElement('script')
+
+        Object.keys(attrs)?.forEach((attrKey) => script?.setAttribute(attrKey, attrs[attrKey]))
+        script.id = id
+
+        if (content) script?.insertAdjacentHTML('beforeend', content)
+
+        return new Promise((resolve, reject) => {
+            if (!attrs.src) {
+                resolve()
+                document?.body?.insertAdjacentElement('beforeend', script)
+                return
+            }
+
+            script.onload = script.onreadystatechange = function () {
+                if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') {
+                    resolve()
+                    script.onload = script.onreadystatechange = null
+                }
+            }
+
+            script.onerror = () => {
+                console.error('script failed to load')
+                reject(new Error('Failed to load script with src ' + script.src))
+            }
+
+            document?.body?.insertAdjacentElement('beforeend', script)
+        })
+    }
+
+    // load
+    const fireLoadListener = () => {
+        const event = 'load'
+        const srcElements = document?.querySelectorAll('[on-' + event + ']')
+
+        srcElements?.forEach(async (srcElement) => {
+            const listeners = await fetchListeners({ srcElement, event, e: null })
+            executeListeners({ e: null, srcElement, listeners })
+
+            srcElement?.removeAttribute('on-' + event)
+        })
+    }
+
+    // invalid
+    const fireInvalidListener = () => {
+        const event = 'invalid'
+        const srcElements = document?.querySelectorAll('[on-' + event + ']')
+
+        srcElements?.forEach(async (srcElement) => {
+            const listeners = await fetchListeners({ srcElement, event, e: null })
+            addListener({ srcElement, event, listeners })
+        })
+    }
+
+    // blur
+    const fireBlurListener = () => {
+        const event = 'blur'
+        const srcElements = document?.querySelectorAll('[on-' + event + ']')
+
+        srcElements?.forEach(async (srcElement) => {
+            const listeners = await fetchListeners({ srcElement, event, e: null })
+            addListener({ srcElement, event, listeners })
+        })
+    }
+
+    // focus
+    const fireFocusListener = () => {
+        const event = 'focus'
+        const srcElements = document?.querySelectorAll('[on-' + event + ']')
+
+        srcElements?.forEach(async (srcElement) => {
+            const listeners = await fetchListeners({ srcElement, event, e: null })
+            addListener({ srcElement, event, listeners })
+        })
+    }
+
+    // observers
+    const fireObserverListeners = () => {
+        const srcElements = [...document.querySelectorAll('[on-observe]')]
+
+        const uniqueScriptNames = [...srcElements?.reduce((acc, srcElement) => {
+            const attribute = srcElement?.getAttribute('on-observe')
+            if (attribute === 'undefined') return acc
+
+            const scriptNames = attribute?.split(',')
+            scriptNames?.forEach((scriptName) => acc?.set(scriptName, 1))
+
+            return acc
+        }, new Map())?.keys()]
+
+        uniqueScriptNames?.forEach(async (scriptName) => {
+            const observedSrcElements = document.querySelectorAll('[on-observe*="' + scriptName + '"]')
+
+            const script = await import('/' + scriptName?.trim() + '.js')?.catch((err) => { })
+            const listener = getListenerFromScript({ script, event: 'observe' })
+            if (!listener) return
+
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach((entry) => listener({ entry, observer }))
+            })
+
+            observedSrcElements?.forEach((observerSrcElement) => {
+                observer.observe(observerSrcElement)
+
+                const observerAttr = observerSrcElement?.getAttribute('on-observe')
+                const updatedObserverAttr = observerAttr?.replaceAll(scriptName + ', ', '')?.replaceAll(', ' + scriptName, '')?.replaceAll(scriptName, '')
+
+                if (updatedObserverAttr === '') observerSrcElement.removeAttribute('on-observe')
+                else observerSrcElement.setAttribute('on-observe', updatedObserverAttr)
+            })
+        })
+    }
+
+    const getSrcElement = ({ srcElement, event }) => {
+        if (!srcElement?.hasAttribute) return srcElement
+        const attribute = 'on-' + event
+        const hasScriptName = srcElement?.hasAttribute(attribute)
+        if (hasScriptName) return srcElement
+
+        const query = ':is(a, button, li)[' + attribute + ']'
+        const closestButton = srcElement?.closest(query)
+        if (closestButton) return closestButton
+
+        return srcElement
+    }
+
+    const fireListeners = () => {
+        EVENTS_FIRE_DOCUMENT_BODY_LISTENERS?.forEach((event) => {
+            document.body['on' + event] = async (e) => {
+                await addScripts()
+
+                fireLoadListener()
+                fireObserverListeners()
+            }
+        })
+
+        EVENTS?.forEach((event) => {
+            document.body['on' + event] = async (e) => {
+                const srcElement = getSrcElement({ srcElement: e?.srcElement, event })
+                const listeners = await fetchListeners({ srcElement, event, e })
+                
+                executeListeners({ e, srcElement, listeners })
+                addListener({ srcElement, event, listeners })
+                
+                if (srcElement?.removeAttribute) srcElement.removeAttribute('on-' + event)
+            }
+        })
+    }
+
+    fireListeners()
+
+    window.onload = () => {
+        setTimeout(() => {
+            document?.body?.click()
+        }, 2_500)
+    }
+}
+
+const getScriptListener = () => {
+    return `<script defer>(${listener.toString()})()</script>`
+}
+
+export {
+    listener,
+    getScriptListener,
+}

package/src/vite.js

@@ -1,5 +1,5 @@
-import { promises as fsPromises, stat as fsStat, unlinkSync, existsSync, renameSync } from 'fs'
-import { join, resolve } from 'path'
+import { promises as fsPromises, unlinkSync, existsSync } from 'fs'
+import { join } from 'path'
 
 
 const listFiles = async ({ path }) => {

package/vite.config.js

@@ -12,6 +12,7 @@ export default defineConfig({
                 'cloudflare-worker': resolve(__dirname, 'src/cloudflare-worker.js'),
                 cookie: resolve(__dirname, 'src/cookie.js'),
                 html: resolve(__dirname, 'src/html.js'),
+                listener: resolve(__dirname, 'src/listener.js'),
                 router: resolve(__dirname, 'src/router.js'),
                 'urlpattern': resolve(__dirname, 'src/urlpattern.js'),
                 util: resolve(__dirname, 'src/util.js'),

package/demos/cloudflare-worker-actions/package.json

@@ -1,29 +0,0 @@
-{
-    "name": "cloudflare-worker-server",
-    "version": "1.0.0",
-    "description": "",
-    "main": "server.js",
-    "scripts": {
-        "watch:dev": "ENV=dev vite build --watch",
-        "watch:qa": "ENV=qa vite build --watch",
-        "watch:prod": "ENV=prod vite build --watch",
-        "build:dev": "ENV=dev vite build",
-        "build:qa": "ENV=qa vite build",
-        "build:prod": "ENV=prod vite build",
-        "local:dev": "wrangler dev --env=dev",
-        "local:qa": "wrangler dev --env=qa",
-        "local:prod": "wrangler dev --env=prod",
-        "deploy:dev": "npm run build:dev && wrangler deploy --env=dev",
-        "deploy:qa": "npm run build:qa && wrangler deploy --env=qa",
-        "deploy:prod": "npm run build:prod && wrangler deploy --env=prod",
-        "build-worker:dev": "wrangler deploy --dry-run --outdir=dist-worker"
-    },
-    "keywords": [],
-    "author": "",
-    "license": "ISC",
-    "devDependencies": {
-        "@cloudflare/kv-asset-handler": "^0.3.4",
-        "@jaimytacovega/salo": "^0.0.28",
-        "vite": "^5.4.2"
-    }
-}

package/demos/cloudflare-worker-actions/public/input.js

@@ -1,5 +0,0 @@
-const input = ({ e, srcElement }) => {
-    console.log('--- value =', srcElement?.value)
-}
-
-export { input }

package/demos/cloudflare-worker-actions/public/load.js

@@ -1,5 +0,0 @@
-const load = ({ e, srcElement }) => {
-    console.log('--- load')
-}
-
-export { load }

package/demos/cloudflare-worker-actions/public/submit.js

@@ -1,6 +0,0 @@
-const submit = ({ e, srcElement }) => {
-    e.preventDefault()
-    console.log('--- submit 2')
-}
-
-export { submit }

package/demos/cloudflare-worker-actions/server.js

@@ -1,93 +0,0 @@
-import { findPatternFromUrl, getRedirectResponse, getForbiddenResponse, getRoute, getNotFoundResponse, getServerOnlyResponse } from '@jaimytacovega/salo/router'
-import { getStaticResponse } from '@jaimytacovega/salo/cloudflare-worker'
-import { addRoute } from '@jaimytacovega/salo/router'
-import { html, stream } from '@jaimytacovega/salo/html'
-import { LISTENER_SCRIPT } from '@jaimytacovega/salo/actions'
-
-import manifestJSON from '__STATIC_CONTENT_MANIFEST'
-
-
-const isRedirectableCallback = ({ pathname }) => {
-    return pathname !== '/' && pathname.endsWith('/')
-}
-
-const isForbiddenCallback = ({ request }) => {
-    const forbiddenURLs = []   
-    return forbiddenURLs.find((filename) => request?.url?.endsWith(filename))    
-}
-
-const isServerOnlyCallback = ({ request }) => {
-    const serverOnlyURLs = []
-    return serverOnlyURLs?.find((filename) => request?.url?.endsWith(filename))
-}
-
-
-(() => {
-    addRoute({
-        pathname: '/',
-        route: ({ request, env }) => {
-            return stream({
-                head: () => html`
-                    <meta charset="UTF-8">
-                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-                    <title>Cloudflare Worker Server</title>
-                `,
-                body: () => html`
-                    
-                    <form 
-                        on-submit="submit"
-                    >
-                        <h1
-                            on-load="load"
-                        >
-                            Hello world!
-                        </h1>
-                        <input 
-                            type="text"
-                            on-input="input"
-                        />
-                        <button type="submit">Submit!</button>     
-                    </form>
-                `,
-                scripts: () => html`
-                    ${LISTENER_SCRIPT}
-                    <script>
-                        console.log('Hello world!')
-                    </script>
-                `,
-                env,
-            })
-        }
-    })
-
-})()
-
-const handleFetch = async ({ request, env, ctx }) => {
-    const url = new URL(request.url)
-    const { origin, pathname } = url
-
-    const pattern = findPatternFromUrl({ url })
-
-    const redirectResult = getRedirectResponse({ origin, pathname, isRedirectableCallback })
-    if (redirectResult?.response) return redirectResult.response
-
-    const forbiddenResult = getForbiddenResponse({ origin, request, isForbiddenCallback })
-    if (forbiddenResult?.response) return forbiddenResult.response
-
-    const serverOnlyResult = getServerOnlyResponse({ origin, request, isServerOnlyCallback })
-    if (serverOnlyResult?.response) return serverOnlyResult.response
-
-    const route = getRoute({ pathname: pattern?.pathname })
-    const routeResult = route ? await route({ request, pattern, env }) : null
-    if (routeResult?.response) return routeResult.response
-
-    const staticResult = await getStaticResponse({ request, waitUntil: ctx.waitUntil.bind(ctx), manifestJSON, env })
-    if (staticResult?.response) return staticResult?.response
-
-    const notFoundResult = await getNotFoundResponse({ request })
-    return notFoundResult?.response
-}
-
-export default {
-    fetch: (request, env, ctx) => handleFetch({ request, env, ctx })
-}

package/demos/cloudflare-worker-actions/vite.config.js

@@ -1,25 +0,0 @@
-import { defineConfig } from 'vite'
-
-
-export default defineConfig({
-    define: {
-        __ENV__: `'${process.env.ENV}'`,
-        __BUILD_TIME__: `'${new Date().toISOString()}'`,
-        __APP_NAME__: `'cloudflare-worker-server'`,
-    },
-    plugins: [],
-    build: {
-        outDir: './dist',
-        manifest: true,
-        emptyOutDir: true,
-        minify: false,
-        rollupOptions: {
-            input: {},
-            output: {
-                entryFileNames: `[name].js`,
-                chunkFileNames: `[name].js`,
-                assetFileNames: `[name].[ext]`,
-            },
-        },
-    },
-})

package/demos/cloudflare-worker-actions/wrangler.toml

@@ -1,35 +0,0 @@
-name = "cloudflare-worker-actions"
-main = "server.js"
-compatibility_date = "2022-11-01"
-compatibility_flags = ["transformstream_enable_standard_constructor", "streams_enable_constructors"]
-minify = false
-#node_compat = true
-
-[site]
-bucket = "./public"
-
-[env]
-
-  [env.prod]
-  experimental-local = true
-
-    [env.prod.vars]
-    IS_CLOUDFLARE_WORKER = true
-    ENV = "prod"
-    APP_NAME = "cloudflare-worker-actions"
-
-  [env.qa]
-  experimental-local = true
-
-    [env.qa.vars]
-    IS_CLOUDFLARE_WORKER = true
-    ENV = "qa"
-    APP_NAME = "cloudflare-worker-actions"
-
-  [env.dev]  
-  experimental-local = true
-
-    [env.dev.vars]
-    IS_CLOUDFLARE_WORKER = true
-    ENV = "dev"
-    APP_NAME = "cloudflare-worker-actions"

package/demos/cloudflare-worker-server/package.json

@@ -1,29 +0,0 @@
-{
-    "name": "cloudflare-worker-server",
-    "version": "1.0.0",
-    "description": "",
-    "main": "server.js",
-    "scripts": {
-        "watch:dev": "ENV=dev vite build --watch",
-        "watch:qa": "ENV=qa vite build --watch",
-        "watch:prod": "ENV=prod vite build --watch",
-        "build:dev": "ENV=dev vite build",
-        "build:qa": "ENV=qa vite build",
-        "build:prod": "ENV=prod vite build",
-        "local:dev": "wrangler dev --env=dev",
-        "local:qa": "wrangler dev --env=qa",
-        "local:prod": "wrangler dev --env=prod",
-        "deploy:dev": "npm run build:dev && wrangler deploy --env=dev",
-        "deploy:qa": "npm run build:qa && wrangler deploy --env=qa",
-        "deploy:prod": "npm run build:prod && wrangler deploy --env=prod",
-        "build-worker:dev": "wrangler deploy --dry-run --outdir=dist-worker"
-    },
-    "keywords": [],
-    "author": "",
-    "license": "ISC",
-    "devDependencies": {
-        "@cloudflare/kv-asset-handler": "^0.3.4",
-        "@jaimytacovega/salo": "^0.0.16",
-        "vite": "^5.4.2"
-    }
-}

package/demos/cloudflare-worker-server/server.js

@@ -1,75 +0,0 @@
-import { findPatternFromUrl, getRedirectResponse, getForbiddenResponse, getRoute, getNotFoundResponse, getServerOnlyResponse } from '@jaimytacovega/salo/router'
-import { getStaticResponse } from '@jaimytacovega/salo/cloudflare-worker'
-import { addRoute } from '@jaimytacovega/salo/router'
-import { html, stream } from '@jaimytacovega/salo/html'
-
-
-const isRedirectableCallback = ({ pathname }) => {
-    return pathname !== '/' && pathname.endsWith('/')
-}
-
-const isForbiddenCallback = ({ request }) => {
-    const forbiddenURLs = []   
-    return forbiddenURLs.find((filename) => request?.url?.endsWith(filename))    
-}
-
-const isServerOnlyCallback = ({ request }) => {
-    const serverOnlyURLs = []
-    return serverOnlyURLs?.find((filename) => request?.url?.endsWith(filename))
-}
-
-
-(() => {
-    addRoute({
-        pathname: '/',
-        route: ({ request, env }) => {
-            return stream({
-                head: () => html`
-                    <meta charset="UTF-8">
-                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-                    <title>Cloudflare Worker Server</title>
-                `,
-                body: () => html`
-                    <h1>Hello world!</h1>
-                `,
-                scripts: () => html`
-                    <script>
-                        console.log('Hello world!')
-                    </script>
-                `,
-                env,
-            })
-        }
-    })
-
-})()
-
-const handleFetch = async ({ request, env, ctx }) => {
-    const url = new URL(request.url)
-    const { origin, pathname } = url
-
-    const pattern = findPatternFromUrl({ url })
-
-    const redirectResult = getRedirectResponse({ origin, pathname, isRedirectableCallback })
-    if (redirectResult?.response) return redirectResult.response
-
-    const forbiddenResult = getForbiddenResponse({ origin, request, isForbiddenCallback })
-    if (forbiddenResult?.response) return forbiddenResult.response
-
-    const serverOnlyResult = getServerOnlyResponse({ origin, request, isServerOnlyCallback })
-    if (serverOnlyResult?.response) return serverOnlyResult.response
-
-    const route = getRoute({ pathname: pattern?.pathname })
-    const routeResult = route ? await route({ request, pattern, env }) : null
-    if (routeResult?.response) return routeResult.response
-
-    const staticResult = await getStaticResponse({ request, waitUntil: ctx.waitUntil.bind(ctx), env })
-    if (staticResult?.response) return staticResult?.response
-
-    const notFoundResult = await getNotFoundResponse({ request })
-    return notFoundResult?.response
-}
-
-export default {
-    fetch: (request, env, ctx) => handleFetch({ request, env, ctx })
-}

package/demos/cloudflare-worker-server/vite.config.js

@@ -1,25 +0,0 @@
-import { defineConfig } from 'vite'
-
-
-export default defineConfig({
-    define: {
-        __ENV__: `'${process.env.ENV}'`,
-        __BUILD_TIME__: `'${new Date().toISOString()}'`,
-        __APP_NAME__: `'cloudflare-worker-server'`,
-    },
-    plugins: [],
-    build: {
-        outDir: './dist',
-        manifest: true,
-        emptyOutDir: true,
-        minify: false,
-        rollupOptions: {
-            input: {},
-            output: {
-                entryFileNames: `[name].js`,
-                chunkFileNames: `[name].js`,
-                assetFileNames: `[name].[ext]`,
-            },
-        },
-    },
-})

package/demos/cloudflare-worker-server/wrangler.toml

@@ -1,32 +0,0 @@
-name = "cloudflare-worker-server"
-main = "server.js"
-compatibility_date = "2022-11-01"
-compatibility_flags = ["transformstream_enable_standard_constructor", "streams_enable_constructors"]
-minify = false
-#node_compat = true
-
-[env]
-
-  [env.prod]
-  experimental-local = true
-
-    [env.prod.vars]
-    IS_CLOUDFLARE_WORKER = true
-    ENV = "prod"
-    APP_NAME = "cloudflare-worker-server"
-
-  [env.qa]
-  experimental-local = true
-
-    [env.qa.vars]
-    IS_CLOUDFLARE_WORKER = true
-    ENV = "qa"
-    APP_NAME = "cloudflare-worker-server"
-
-  [env.dev]  
-  experimental-local = true
-
-    [env.dev.vars]
-    IS_CLOUDFLARE_WORKER = true
-    ENV = "dev"
-    APP_NAME = "cloudflare-worker-server"