olum 0.2.3 → 0.5.0

package/README.md

@@ -1,4 +1,4 @@
-<p align="center"><img width="100" src="https://olumjs.github.io/logo.png" alt="Olum logo"></p>
+<p align="center"><img width="100" src="https://github.com/olumjs.png" alt="Olum logo"></p>
 <p align="center">
  <a href="https://www.npmjs.com/package/olum" target="_blank"><img src="https://img.shields.io/npm/v/olum" alt="npm"></a>
  <img src="https://img.shields.io/npm/dm/olum" alt="npm">
@@ -8,21 +8,4 @@
 # Olumjs
 The VanillaJS developer’s platform.
 
-See [Documentation](https://olumjs.github.io/docs)
-
-Olum is a simple lightweight frontend library for providing spa experience, </br>
-You don't need to learn a new library or a framework if you already know vanilla js, and this is the reason behind Olumjs creation.
-
-### Pros
-* Reusable Components
-* State Management System
-* Routing SPA
-* A size of 14kb including router, state management, other helpers
-* Coding with Vanilla JS, the best feature
-
-### Ecosystem
-  * Routing (SPA)
-  * State Management system 
-  * Olum-CLI [npm](https://www.npmjs.com/package/olum-cli)
-  * Devtool that works anywhere [download](https://github.com/olumjs/olum-devtool)
-  * VSC extension [marketplace](https://marketplace.visualstudio.com/items?itemName=eissapk.olum)
+See [Documentation](https://olumjs.github.io/docs)

package/dist/olum.js

@@ -1,266 +1,547 @@
 /**
  * @name Olum.js
- * @version 0.2.3
- * @copyright 2021
+ * @version 0.5.0
+ * @copyright 2026
  * @author Eissa Saber
  * @license MIT
  */
-(function (root, factory) {
-  if (typeof module === "object" && module.exports) module.exports = factory();
-  else if (typeof define === "function" && define.amd) define(factory);
-  else root.Olum = factory();
-})(typeof self !== "undefined" ? self : this, function () {
-  "use strict";
-  /* helpers */
-  var global = typeof self !== "undefined" ? self : this;
-  var debugStr = "Olum [warn]:";
-  var isDebugging = false;
-
-  function isDef(val) {
-    return (val !== undefined && val !== null);
-  }
+export default (function () {
+  var olum = {
+    app: {}, // this is a must to access live changes
+    $emit(event, data) {
+      this.dispatchEvent(event, data);
+    },
+    dispatchEvent(event, data) {
+      window.dispatchEvent(new CustomEvent(event, { detail: data }));
+    },
+    mkElm(type, compName, compId) {
+      const el = document.createElement(type);
+      if (compName && compId) el.setAttribute("data-olum", JSON.stringify({ compName, compId }));
+      return el;
+    },
+    injectStyle(compName, cssContent) {
+      if (!cssContent || !cssContent.trim()) return;
+      const id = "olum-style-" + compName;
+      if (document.getElementById(id)) return;
+      const tag = document.createElement("style");
+      tag.id = id;
+      tag.textContent = cssContent;
+      document.head.appendChild(tag);
+    },
+    proxyHandler(obj, watcher, el) {
+      function mkHash(str) {
+        var hash = 0;
+        var i;
+        var char;
+        if (str.length === 0) return hash;
+        for (i = 0; i < str.length; i++) {
+          char = str.charCodeAt(i);
+          hash = (hash << 5) - hash + char;
+          hash |= 0; // Convert to 32bit integer
+        }
+        return hash;
+      }
+      var handler = {
+        get: function (obj, key) {
+          return obj[key];
+        },
+        set: function (obj, key, newVal) {
+          if (key === "__olum__") return false;
+          const oldVal = obj[key];
+          if (oldVal === newVal) return true;
+          obj[key] = newVal;
+          if (watcher && watcher[key] && typeof watcher[key] === "function") watcher[key](oldVal, newVal);
+          // todo prefix compName with instance e.g. you may have one component used twice so compName-1 & compName-2
+          const dataObj = { compName: obj.__olum__.compName, compId: obj.__olum__.compId };
+          const hash = mkHash(dataObj.compName + dataObj.compId);
+          dataObj.hash = hash;
 
-  function isDev() {
-    return ["localhost", "127.0.0.1"].indexOf(global.location.hostname) !== -1;
-  }
+          window.olum.$emit("updateOlumComp", dataObj);
+          return true;
+        },
+        deleteProperty: function (obj, key) {
+          if (key === "__olum__") return false;
+          delete obj[key];
+          // todo prefix compName with instance e.g. you may have one component used twice so compName-1 & compName-2
+          const dataObj = { compName: obj.__olum__.compName, compId: obj.__olum__.compId };
+          const hash = mkHash(dataObj.compName + dataObj.compId);
+          dataObj.hash = hash;
 
-  function isObj(obj) {
-    return (obj !== null && typeof obj === "object");
-  }
+          window.olum.$emit("updateOlumComp", dataObj);
+          return true;
+        },
+      };
+      return new Proxy(obj, handler);
+    },
+    proxyHandlerForStore(obj, originalProxy) {
+      const handler = {
+        get: function (obj, key) {
+          return originalProxy[key];
+        },
+        set: function (obj, key, val) {
+          obj[key] = val;
+          originalProxy[key] = val;
+          return true;
+        },
+        deleteProperty: function (obj, key) {
+          delete obj[key];
+          delete originalProxy[key];
+          return true;
+        },
+      };
+      return new Proxy(obj, handler);
+    },
+    clean(fragment) {
+      const str = String(fragment).trim();
+      if (str === "null") return null;
+      return str;
+    },
+    // #2 (escape-by-default): HTML-escape a value before it is interpolated into a template.
+    // The compiler wraps every text/attribute interpolation `{expr}` in `olum.esc(expr)` so a
+    // user-supplied string (a todo title, a comment, anything) can't inject markup/scripts (XSS)
+    // or visually break rendering when it contains <, >, &, or quotes.
+    //   - null/undefined render as "" (instead of the literal text "null"/"undefined").
+    //   - To render trusted HTML on purpose, opt out explicitly with `olum.raw(html)` (below);
+    //     esc() detects the marker it returns and passes the HTML through unescaped.
+    esc(value) {
+      if (value === null || value === undefined) return "";
+      if (value && value.__olumRaw === true) return value.html; // explicit raw-HTML opt-in
+      return String(value)
+        .replace(/&/g, "&amp;") // must run first so the entities below aren't double-escaped
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#39;");
+    },
+    // #2 opt-in escape hatch: mark a string as trusted raw HTML so `esc()` leaves it untouched.
+    // Usage in a template: {olum.raw(props.richText)}. Use it ONLY on HTML you control or have
+    // already sanitized — this is the deliberate, greppable way to bypass auto-escaping.
+    raw(html) {
+      return { __olumRaw: true, html: html == null ? "" : String(html) };
+    },
+    eventsHandler(el, nodes, compName, methodsRefObj) {
+      function event(item, str, modifiers) {
+        const eventName = str.split("|")[0];
+        str = str.split("|").slice(1).join();
 
-  function isFullArr(arr) {
-    return !!(isObj(arr) && Array.isArray(arr) && arr.length);
-  }
+        let methods = str.split("&");
+        const data = methods.map((chunk) => {
+          const chunks = chunk.split("=");
+          const name = chunks[0];
+          const args = JSON.parse(chunks.slice(1).join(""));
+          return { args, methodName: name };
+        });
 
-  function isFullObj(obj) {
-    return !!(isObj(obj) && Array.isArray(Object.keys(obj)) && Object.keys(obj).length);
-  }
+        const opts = {
+          once: false,
+          passive: false,
+          capture: false,
+        };
 
-  function addProp(obj, key, val) {
-    Object.defineProperty(obj, key, {
-      value: val,
-      writable: true,
-      configurable: true,
-    });
-  }
-  String.prototype.cap = function () {
-    return this.toLowerCase().split(" ").map(function (word) {
-      return word.charAt(0).toUpperCase() + word.slice(1);
-    }).join(" ");
-  };
+        if (modifiers && modifiers.length) {
+          if (modifiers.includes("once")) opts.once = true;
+          if (modifiers.includes("passive")) opts.passive = true;
+          if (modifiers.includes("capture")) opts.capture = true;
+        }
 
-  function debug(args, level) {
-    if (!isDef(level)) level = "log";
-    level = level == "err" ? "error" : level;
-    if (isDebugging) Array.isArray(args) ? console[level].apply(console, args) : console[level](args);
-  }
+        item.addEventListener(
+          eventName.slice(2),
+          (e) => {
+            if (modifiers && modifiers.length) {
+              if (modifiers.includes("prevent")) e.preventDefault();
+              if (modifiers.includes("stop")) e.stopPropagation();
+            }
 
-  function Olum(config) {
-    if (!(this instanceof Olum)) throw new Error("can't invoke 'Olum' without 'new' keyword");
-    var $this = this;
-    
-    // set defaults 
-    var rootElm = null;
-    var rootCompName = null;
-    var which = null;
-    var prefix = config && config.prefix ? config.prefix : null;
-
-    this.use = function (arg) {
-      if (arg) {
-        if (arg.name && typeof arg.name === "function" && arg.name() === "OlumRouter") which = { type: "router", cb: arg };
-        else which = { type: "component", cb: arg };
-        if (which) init();
-        else throw new Error(debugStr + " Root component or router are not defined!");
-      } else {
-        throw new Error(debugStr + " Missing component or router @use()");
-      }
-    }
+            function init() {
+              data.forEach((obj) => {
+                if (methodsRefObj[obj.methodName]) {
+                  if (obj.args.length) {
+                    const eventIndex = obj.args.indexOf("$event");
+                    if (eventIndex !== -1) obj.args.splice(eventIndex, 1, e);
+                    methodsRefObj[obj.methodName](...obj.args);
+                  } else {
+                    methodsRefObj[obj.methodName](e);
+                  }
+                } else {
+                  console.warn("olum: can't access the method");
+                }
+              });
+            }
+
+            if (modifiers && modifiers.length && modifiers.includes("self")) {
+              if (e.target === item) init();
+              return;
+            }
+            init();
+          },
+          opts
+        );
 
-    this.$ = function (selector) {
-      if (selector) {
-        var delimiter;
-        if (selector.indexOf(".") !== -1) delimiter = ".";
-        else if (selector.indexOf("#") !== -1) delimiter = "#";
-        selector = selector.replace(/\#|\./, "");
-        rootCompName = selector.cap();
-        rootElm =
-          delimiter === "." ? document.getElementsByClassName(selector)[0] :
-          delimiter === "#" ? document.getElementById(selector) :
-          document.getElementsByTagName(selector)[0];
-      } else {
-        throw new Error(debugStr + " Root Element is not found in DOM!");
+        item.removeAttribute("data-o-event");
+        item.removeAttribute("data-o-event-mode");
+        // item.removeAttribute("data-child-of");
       }
-      return this;
-    }
 
-    function buildTree(entry) {
-      var compsArr = [];
-
-      function recursive(comp) {
-        if (comp.hasOwnProperty("components") && isFullObj(comp.components)) {
-          for (var key in comp.components) {
-            var obj = {};
-            addProp(obj, "parent", comp.name);
-            addProp(obj, "child", {});
-            addProp(obj.child, "name", key);
-            var instance = new comp.components[key]();
-            addProp(obj.child, "olumCompData", instance.olumCompData());
-            compsArr.push(obj);
-
-            if (obj.hasOwnProperty("child") && obj.child.hasOwnProperty("olumCompData")) {
-              var nextEntry = obj.child.olumCompData;
-              recursive(nextEntry);
-            }
+      nodes.forEach((node) => {
+        const hasEvent = olum.clean(node.getAttribute("data-o-event"));
+        const hasMode = olum.clean(node.getAttribute("data-o-event-mode"));
+        const mode = hasMode && hasMode.trim() !== "" ? hasMode.split(".") : [];
+        if (hasEvent) event(node, hasEvent, mode);
+      });
+    },
+    stylesHandler(el, nodes, compName) {
+      function setStyles(item, obj, keys) {
+        let str = "";
+        keys.forEach((key) => {
+          const val = obj[key];
+          if (val) {
+            // console.log({ key, val });
+            str += key + ": " + val + "; ";
           }
+        });
+        str = str.trim();
+        // console.log(str);
+        if (str !== "") item.setAttribute("style", str);
+        item.removeAttribute("data-o-style");
+        // item.removeAttribute("data-child-of");
+      }
+
+      function style(item, str) {
+        const obj = JSON.parse(str);
+        const keys = Object.keys(obj);
+        if (keys.length) {
+          // console.log("directObj: ", obj);
+          setStyles(item, obj, keys);
+        }
+      }
+
+      nodes.forEach((node) => {
+        const hasStyle = olum.clean(node.getAttribute("data-o-style"));
+        if (hasStyle) style(node, hasStyle);
+      });
+    },
+    handleMarkup(compName, id, el, methods) {
+      el.setAttribute("data-child-of", compName);
+      el.setAttribute("data-o-" + id, "");
+      var nodes = el.querySelectorAll("*");
+      nodes.forEach((node) => {
+        node.setAttribute("data-child-of", compName);
+        node.setAttribute("data-o-" + id, "");
+      });
+      this.eventsHandler(el, nodes, compName, methods);
+      this.stylesHandler(el, nodes, compName);
+      return el;
+    },
+    isObj(obj) {
+      return obj !== null && typeof obj === "object";
+    },
+    isFullArr(arr) {
+      return !!(this.isObj(arr) && Array.isArray(arr) && arr.length);
+    },
+    isFullObj(obj) {
+      return !!(this.isObj(obj) && Array.isArray(Object.keys(obj)) && Object.keys(obj).length);
+    },
+    createStore(entry) {
+      const store = {};
+      const map = [];
+      store[entry.__OLUM__.compName] = entry; // bind root component
+
+      // bind children components
+      const recursive = (comp) => {
+        if (this.isFullArr(comp.__OLUM__.components)) {
+          comp.__OLUM__.components.forEach((item) => {
+            var key = Object.keys(item)[0];
+            var newComp = item[key]();
+            if (!store[key]) store[key] = newComp;
+
+            const obj = { name: key, children: newComp.__OLUM__.components.map((obj) => Object.keys(obj)[0]) };
+            map.push(obj);
+
+            if (this.isFullArr(obj.children)) recursive(newComp);
+          });
         }
       };
       recursive(entry);
-      return compsArr;
-    }
 
-    function buildStyles(css) {
-      var id = "olum_style_tag";
-      var styleTag = document.getElementById(id);
-      if (!styleTag) {
-        styleTag = document.createElement("style");
-        styleTag.id = id;
-        document.head.append(styleTag);
+      return { store, map };
+    },
+
+    // direct <olum> placeholders of a container: those with no <olum> ancestor inside the container.
+    // (deeper placeholders belong to a nested component and are handled when that component renders)
+    directOlums(container) {
+      return Array.prototype.slice.call(container.querySelectorAll("olum")).filter((p) => {
+        const anc = p.parentElement && p.parentElement.closest && p.parentElement.closest("olum");
+        return !anc || !container.contains(anc);
+      });
+    },
+    buildTree(comp, store, compKey) {
+      const rootElm = comp.__OLUM__.getElm;
+      if (!rootElm) return null;
+      const self = this;
+      // lazy global factory registry: name -> factory. Accumulated from every instance's components map
+      // as we descend, so slot-passed and cross-file components resolve regardless of where they were declared.
+      const registry = window.olum.app.registry || (window.olum.app.registry = {});
+
+      function renderChildren(containerComp, containerKey, containerElm) {
+        if (containerComp.__OLUM__.components) Object.assign(registry, containerComp.__OLUM__.components);
+        const placeholders = self.directOlums(containerElm);
+        const occ = {}; // per-name occurrence counter -> positional instance keys, stable across re-renders
+        placeholders.forEach((placeholder) => {
+          const name = placeholder.getAttribute("name");
+          const factory = registry[name] || (containerComp.__OLUM__.components && containerComp.__OLUM__.components[name]);
+          if (!factory) {
+            console.warn("olum: couldn't find " + name + " Component while building the tree!");
+            return;
+          }
+          // #3 (keyed reconciliation): a placeholder rendered inside a keyed <for> carries data-o-key
+          // (the evaluated `key={...}` value for that item). Keyed instances are stored under
+          // "...Name@<key>", so the SAME instance — and therefore its state and DOM — is reused for a
+          // given item no matter where it moves, is inserted, or is removed in the list. Without a key
+          // we fall back to positional "...Name#<i>" keys, where state follows position, not identity
+          // (delete the middle item of a list and the survivors inherit the wrong neighbour's state).
+          const keyVal = placeholder.getAttribute("data-o-key");
+          let instanceKey;
+          if (keyVal !== null && keyVal !== "") {
+            instanceKey = containerKey + ">" + name + "@" + keyVal;
+          } else {
+            occ[name] = occ[name] === undefined ? 0 : occ[name] + 1;
+            instanceKey = containerKey + ">" + name + "#" + occ[name];
+          }
+
+          // reuse the instance from a previous render (preserves its state) or mint a fresh one
+          let child = store[instanceKey];
+          if (!child) {
+            child = factory(instanceKey);
+            store[instanceKey] = child;
+          }
+
+          // handle props
+          child.parentCompName = containerKey;
+          const propsJson = placeholder.getAttribute("data-o-props");
+          child.incomingProps = propsJson ? JSON.parse(decodeURIComponent(propsJson)) : {};
+          const srcStr = placeholder.getAttribute("data-o-props-src") || "";
+          child.incomingPropSources = {};
+          if (srcStr)
+            srcStr.split("|").forEach((pair) => {
+              const parts = pair.split(":"); // propKey:kind:srcKey
+              const propKey = parts[0],
+                kind = parts[1],
+                srcKey = parts[2];
+              if (propKey && kind && srcKey) child.incomingPropSources[propKey] = { kind, key: srcKey };
+            });
+
+          // handle slot/children — must be set before getElm so ${children} resolves in the child's template
+          child.children = placeholder.innerHTML.trim();
+
+          const elm = child.__OLUM__.getElm;
+          if (elm) {
+            elm.setAttribute("data-o-if", placeholder.getAttribute("if") ? placeholder.getAttribute("if") : "olum-no-condition"); // display if condition value (truthy, falsy)
+            placeholder.replaceWith(elm);
+            renderChildren(child, instanceKey, elm); // recurse into this child's own subtree
+          }
+        });
       }
-      styleTag.innerHTML = css + "\n [to] * {pointer-events: none;}";
-    }
 
-    function merge(tree) {
-      var entry = tree.entry;
-      var compsArr = tree.compsArr;
-
-      // parent (view) 
-      var template = entry.template || "";
-      var style = entry.style || "";
-      var script = {};
-      !!(entry.render) ? (script[0] = entry.render) : null;
-
-      // children 
-      if (isFullArr(compsArr)) {
-        for(var i = 0; i < compsArr.length; i++) {
-          var olumCompData = compsArr[i].child.olumCompData;
-          var html = olumCompData.template || "";
-          var css = olumCompData.style || "";
-          var js = olumCompData.render || null;
-          var name = prefix ? prefix + "-" + olumCompData.name : olumCompData.name;
-          var regex = new RegExp("<(" + name + "\\s{0,})\\/>", "gi"); // detect components e.g. <App-AddTodo /> or <AddTodo />
-
-          template = template.replace(regex, html);
-          style += css;
-          if (js !== null) script[i + 1] = js;
-        }
+      renderChildren(comp, compKey, rootElm);
+      return rootElm;
+    },
+    getInnerNames(entry) {
+      const comps = [];
+      const map = window.olum.app.map;
+      if (map) {
+        map.find((obj) => {
+          if (obj.name == entry) obj.children.forEach((child) => comps.push(child));
+        });
       }
 
-      return {
-        template,
-        style,
-        script,
-      };
+      function recursive(num) {
+        const child = comps[num];
+        map.forEach((obj) => {
+          if (obj.name == child) obj.children.forEach((item) => comps.push(item));
+        });
+        if (num + 1 <= comps.length) recursive(num + 1);
+      }
+
+      if (comps.length) recursive(0);
+
+      // console.warn("innerComps: ", comps);
+      return comps;
+    },
+  };
+
+  if (typeof window !== "undefined") window.olum = olum;
+
+  class Olum {
+    root = null;
+    $(s) {
+      this.root = document.querySelector(s);
+      return this;
     }
-    
-    function labelView(root, arr) {
-      var compAttrRegex = /(olum-component=[\"\']([^\"|\']*)[\"\'])|(olum-component)/gi;
-      var openingSelfClosingTagRegex = /<[a-z]+(>|.*?[^?]>)/gi;
-      var greaterCharRegex = /\>/gi;
-      var compsArr = Array.from(arr);
-      var entry = root;
-
-      // children
-      for(var i = 0; i < compsArr.length; i++) {
-        var name = compsArr[i].child.olumCompData.name || "undefined";
-        if (compsArr[i].child && compsArr[i].child.olumCompData && compsArr[i].child.olumCompData.hasOwnProperty("template")) {
-          var olumCompData = compsArr[i].child.olumCompData;
-          // clean
-          olumCompData.template = olumCompData.template.replace(compAttrRegex, "");
-          // labeling
-          var compWrapper = olumCompData.template.match(openingSelfClosingTagRegex);
-          if (isFullArr(compWrapper)) {
-            olumCompData.template = olumCompData.template.replace(compWrapper[0], compWrapper[0].replace(greaterCharRegex, " olum-component='"+name+"'>"));
+
+    use(comp) {
+      const entry = comp();
+      const { store, rootKey } = this.share(entry);
+      const tree = window.olum.buildTree(entry, store, rootKey);
+      if (!tree) return console.warn("olum: couldn't build tree!");
+
+      this.setupListeners(store); // unmounted hook & state system
+
+      this.root.append(tree); // bind full comps tree
+      // handle mounted hook
+      if (entry.hooks.mounted) entry.hooks.mounted(); // force mounting parent component (entry point comp) regardless of the data-o-if value
+      entry.hooks.isMounted = true;
+      // mount every instance created during buildTree (keyed by runtime instance key)
+      Object.keys(store).forEach((key) => {
+        if (key === rootKey) return;
+        const c = store[key];
+        if (!c || !c.el) return;
+        const ifConValue = c.el.getAttribute("data-o-if");
+        if (!ifConValue) {
+          // don't render comp because it has falsy value
+        } else {
+          if (["olum-no-condition", "true"].includes(ifConValue)) {
+            if (c.hooks.mounted) c.hooks.mounted();
+            c.hooks.isMounted = true;
           }
         }
-      }
+      });
+    }
 
-      // parent (view)
-      if (entry.template) {
-        var name = entry.name || "undefined";
-        // clean
-        entry.template = entry.template.replace(compAttrRegex, "");
-        // labeling
-        var compWrapper = entry.template.match(openingSelfClosingTagRegex);
-        if (isFullArr(compWrapper)) {
-          entry.template = entry.template.replace(
-            compWrapper[0],
-            compWrapper[0].replace(greaterCharRegex, " olum-component='"+name+"' olum-view='"+name+"'>")
-          );
-        }
+    getPath(el, root) {
+      const path = [];
+      let cur = el;
+      while (cur && cur !== root) {
+        const parent = cur.parentElement;
+        if (!parent) break;
+        const siblings = Array.from(parent.children).filter((c) => c.tagName === cur.tagName);
+        path.unshift({ tag: cur.tagName, index: siblings.indexOf(cur) });
+        cur = parent;
       }
+      return path;
+    }
 
-      // root (placeholder)
-      rootElm.setAttribute("olum-component", rootCompName);
-  
-      return {
-        entry,
-        compsArr,
-      };
+    findByPath(root, path) {
+      let cur = root;
+      for (const step of path) {
+        const siblings = Array.from(cur.children).filter((c) => c.tagName === step.tag);
+        cur = siblings[step.index];
+        if (!cur) return null;
+      }
+      return cur;
     }
 
-    function useComponent() {
-      debug("use component");
-      var view = new which.cb();
-      var entry = view.olumCompData();
-      var compsArr = buildTree(entry);
-      // labeling components
-      var label = isDev() ? labelView(entry, compsArr) : { entry: entry, compsArr: compsArr };
-      // final component (View)      
-      var viewObj = merge(label);
-      // css
-      buildStyles(viewObj.style);
-      // html
-      rootElm.innerHTML = viewObj.template;
-      // js
-      setTimeout(function () {
-        for (var key in viewObj.script) {
-          viewObj.script[key]();
+    setupListeners(store) {
+      function mkHash(str) {
+        var hash = 0;
+        var i;
+        var char;
+        if (str.length === 0) return hash;
+        for (i = 0; i < str.length; i++) {
+          char = str.charCodeAt(i);
+          hash = (hash << 5) - hash + char;
+          hash |= 0;
         }
-      }, 0);
-    }
-    
-    function useRouter() {
-      debug("use OlumRouter");
-      var router = which.cb;
-      // share core functionalites with router
-      // props
-      router.__proto__.rootElm = rootElm;
-      // methods
-      router.__proto__.buildStyles = buildStyles;
-      router.__proto__.buildTree = buildTree;
-      router.__proto__.labelView = labelView;
-      router.__proto__.merge = merge;
-      
-      if (router.isReady) router.listen();
-    }
-    
-    function mount() {
-      debug({mount:"mount()",rootElm, which});
-      
-      if (which && which.type && which.cb) {
-        if (which.type === "router") useRouter();
-        else if (which.type === "component") useComponent();
-      } else {
-        throw new Error(debugStr + " Can't mount, Missing component or router @use()");
+        return hash;
       }
+
+      // const snapshots = {}; // persists across re-renders: { [compName]: Map<pathKey, entry> }
+
+      window.addEventListener("updateOlumComp", (e) => {
+        if (e && e.detail && e.detail.compName && e.detail.compId && e.detail.hash) {
+          if (e.detail.hash !== mkHash(e.detail.compName + e.detail.compId)) return;
+          const comp = store[e.detail.compName];
+          if (!comp || !comp.el) return;
+          if (!document.body.contains(comp.el)) return; // comp was unmounted; ignore stale state updates
+
+          const compName = e.detail.compName;
+
+          // snapshot input values of child components currently in DOM
+          // only child components (data-child-of !== compName) so we don't overwrite state inputs with stale values
+          // entries not updated here (hidden components) keep their previous snapshot value intact
+          // if (!snapshots[compName]) snapshots[compName] = new Map();
+          // comp.el.querySelectorAll("input, textarea, select").forEach(field => {
+          //   const childOf = field.getAttribute("data-child-of");
+          //   if (childOf && childOf !== compName) {
+          //     const path = this.getPath(field, comp.el);
+          //     const entry = { path };
+          //     if (field.type === "checkbox" || field.type === "radio") entry.checked = field.checked;
+          //     else entry.value = field.value;
+          //     snapshots[compName].set(JSON.stringify(path), entry);
+          //   }
+          // });
+
+          const innerNames = Object.keys(store).filter((name) => name !== compName);
+          const prevMounted = {};
+          innerNames.forEach((name) => {
+            const c = store[name];
+            if (c) prevMounted[name] = c.hooks.isMounted;
+          });
+
+          // get current active element location/path before re-render (buildTree)
+          const activeEl = document.activeElement;
+          const selStart = activeEl && activeEl.selectionStart != null ? activeEl.selectionStart : null;
+          const selEnd = activeEl && activeEl.selectionEnd != null ? activeEl.selectionEnd : null;
+          const activePath = activeEl && comp.el.contains(activeEl) ? this.getPath(activeEl, comp.el) : null;
+
+          const treeElm = window.olum.buildTree(comp, store, compName);
+          if (!treeElm) return console.warn("olum: couldn't build tree!");
+          comp.el.replaceWith(treeElm);
+
+          // restore child component input values after rebuild
+          // snapshots[compName].forEach(({ path, value, checked }) => {
+          //   const field = this.findByPath(treeElm, path);
+          //   if (!field) return; // component is hidden in this render, skip
+          //   if (checked !== undefined) field.checked = checked;
+          //   else if (value !== undefined) field.value = value;
+          // });
+
+          // load prev active element after re-render (buildTree) to focus (e.g. input) or restore its data (e.g. forms)
+          if (activePath && activePath.length) {
+            const toRestore = this.findByPath(treeElm, activePath);
+            if (toRestore) {
+              if (toRestore.focus && typeof toRestore.focus == "function") toRestore.focus();
+              if (selStart !== null && toRestore.setSelectionRange && typeof toRestore.setSelectionRange == "function")
+                toRestore.setSelectionRange(selStart, selEnd);
+            }
+          }
+
+          // after rebuild, call lifecycle hooks for any inner component that changed visibility.
+          // recompute keys here so instances created during this rebuild (e.g. a grown loop) are included.
+          const afterNames = Object.keys(store).filter((name) => name !== compName);
+          afterNames.forEach((name) => {
+            const c = store[name];
+            if (!c) return;
+            const isInDOM = document.body.contains(c.el);
+            if (prevMounted[name] && !isInDOM) {
+              // was mounted, now removed from DOM → unMounted
+              if (c.hooks.unMounted && !c.hooks.isUnMounted) {
+                c.hooks.unMounted();
+                c.hooks.isUnMounted = true;
+                c.hooks.isMounted = false;
+              }
+            } else if (!prevMounted[name] && isInDOM) {
+              // was not mounted, now in DOM → mounted
+              if (c.hooks.mounted && !c.hooks.isMounted) {
+                c.hooks.mounted();
+                c.hooks.isMounted = true;
+                c.hooks.isUnMounted = false;
+              }
+            }
+          });
+        }
+      });
     }
 
-    function init() {
-      if (!rootElm) throw new Error(debugStr + " Root Element is not found in DOM!");
-      else mount();
+    share(entry) {
+      // store now holds live instances keyed by runtime instance key; buildTree populates it lazily.
+      // registry holds name->factory and is accumulated as the tree is walked.
+      const store = {};
+      const rootKey = entry.__OLUM__.compName;
+      store[rootKey] = entry;
+      Object.assign(window.olum.app, { store, registry: {} }); // this is a must to access live changes
+      return { store, rootKey };
     }
-    
   }
 
   return Olum;
-});
+})();

package/dist/olum.min.js

@@ -1,8 +1,8 @@
 /**
-* @name Olum.js
-* @version 0.2.2
-* @copyright 2021
+* @name olum
+* @version 0.5.0
+* @copyright 2026
 * @author Eissa Saber
 * @license MIT
 */
-!function(e,t){"object"==typeof module&&module.exports?module.exports=t():"function"==typeof define&&define.amd?define(t):e.Olum=t()}("undefined"!=typeof self?self:this,function(){"use strict";var m="undefined"!=typeof self?self:this,n="Olum [warn]:",o=!1;function u(e){return null!==e&&"object"==typeof e}function f(e){return u(e)&&Array.isArray(e)&&e.length}function d(e,t,n){Object.defineProperty(e,t,{value:n,writable:!0,configurable:!0})}function h(e,t){t="err"==(t=null==t?"log":t)?"error":t,o&&(Array.isArray(e)?console[t].apply(console,e):console[t](e))}return String.prototype.cap=function(){return this.toLowerCase().split(" ").map(function(e){return e.charAt(0).toUpperCase()+e.slice(1)}).join(" ")},function e(t){if(!(this instanceof e))throw new Error("can't invoke 'Olum' without 'new' keyword");var c=null,p=null,o=null,s=t&&t.prefix?t.prefix:null;function r(e){var l=[];return function e(t){if(t.hasOwnProperty("components")&&u(r=t.components)&&Array.isArray(Object.keys(r))&&Object.keys(r).length)for(var n in t.components){var o={};d(o,"parent",t.name),d(o,"child",{}),d(o.child,"name",n),n=new t.components[n],d(o.child,"olumCompData",n.olumCompData()),l.push(o),o.hasOwnProperty("child")&&o.child.hasOwnProperty("olumCompData")&&e(o.child.olumCompData)}var r}(e),l}function l(e){var t="olum_style_tag",n=document.getElementById(t);n||((n=document.createElement("style")).id=t,document.head.append(n)),n.innerHTML=e+"\n [to] * {pointer-events: none;}"}function a(e){var t=e.entry,n=e.compsArr,o=t.template||"",r=t.style||"",l={};if(t.render&&(l[0]=t.render),f(n))for(var a=0;a<n.length;a++){var i=(c=n[a].child.olumCompData).template||"",m=c.style||"",u=c.render||null,c=s?s+"-"+c.name:c.name,c=new RegExp("<("+c+"\\s{0,})\\/>","gi"),o=o.replace(c,i);r+=m,null!==u&&(l[a+1]=u)}return{template:o,style:r,script:l}}function i(e,t){for(var n=/(olum-component=[\"\']([^\"|\']*)[\"\'])|(olum-component)/gi,o=/<[a-z]+(>|.*?[^?]>)/gi,r=/\>/gi,l=Array.from(t),e=e,a=0;a<l.length;a++){var i,m,u=l[a].child.olumCompData.name||"undefined";l[a].child&&l[a].child.olumCompData&&l[a].child.olumCompData.hasOwnProperty("template")&&((i=l[a].child.olumCompData).template=i.template.replace(n,""),f(m=i.template.match(o))&&(i.template=i.template.replace(m[0],m[0].replace(r," olum-component='"+u+"'>"))))}return e.template&&(u=e.name||"undefined",e.template=e.template.replace(n,""),f(m=e.template.match(o))&&(e.template=e.template.replace(m[0],m[0].replace(r," olum-component='"+u+"' olum-view='"+u+"'>")))),c.setAttribute("olum-component",p),{entry:e,compsArr:l}}this.use=function(e){if(!e)throw new Error(n+" Missing component or router @use()");if(!(o=e.name&&"function"==typeof e.name&&"OlumRouter"===e.name()?{type:"router",cb:e}:{type:"component",cb:e}))throw new Error(n+" Root component or router are not defined!");!function(){if(!c)throw new Error(n+" Root Element is not found in DOM!");!function(){if(h({mount:"mount()",rootElm:c,which:o}),!(o&&o.type&&o.cb))throw new Error(n+" Can't mount, Missing component or router @use()");"router"===o.type?function(){h("use OlumRouter");var e=o.cb;e.__proto__.rootElm=c,e.__proto__.buildStyles=l,e.__proto__.buildTree=r,e.__proto__.labelView=i,e.__proto__.merge=a,e.isReady&&e.listen()}():"component"===o.type&&function(){h("use component");var e=(new o.cb).olumCompData(),t=r(e),n=a(-1!==["localhost","127.0.0.1"].indexOf(m.location.hostname)?i(e,t):{entry:e,compsArr:t});l(n.style),c.innerHTML=n.template,setTimeout(function(){for(var e in n.script)n.script[e]()},0)}()}()}()},this.$=function(e){if(!e)throw new Error(n+" Root Element is not found in DOM!");var t;return-1!==e.indexOf(".")?t=".":-1!==e.indexOf("#")&&(t="#"),e=e.replace(/\#|\./,""),p=e.cap(),c="."===t?document.getElementsByClassName(e)[0]:"#"===t?document.getElementById(e):document.getElementsByTagName(e)[0],this}}});
+export default(()=>{var i={app:{},$emit(e,t){this.dispatchEvent(e,t)},dispatchEvent(e,t){window.dispatchEvent(new CustomEvent(e,{detail:t}))},mkElm(e,t,o){e=document.createElement(e);return t&&o&&e.setAttribute("data-olum",JSON.stringify({compName:t,compId:o})),e},injectStyle(e,t){var o;t&&t.trim()&&(e="olum-style-"+e,document.getElementById(e)||((o=document.createElement("style")).id=e,o.textContent=t,document.head.appendChild(o)))},proxyHandler(e,r,t){function l(e){var t,o=0;if(0!==e.length)for(t=0;t<e.length;t++)o=(o<<5)-o+e.charCodeAt(t),o|=0;return o}return new Proxy(e,{get:function(e,t){return e[t]},set:function(e,t,o){var n;return"__olum__"!==t&&((n=e[t])!==o&&(e[t]=o,r&&r[t]&&"function"==typeof r[t]&&r[t](n,o),n=l((t={compName:e.__olum__.compName,compId:e.__olum__.compId}).compName+t.compId),t.hash=n,window.olum.$emit("updateOlumComp",t)),!0)},deleteProperty:function(e,t){if("__olum__"===t)return!1;delete e[t];t={compName:e.__olum__.compName,compId:e.__olum__.compId},e=l(t.compName+t.compId);return t.hash=e,window.olum.$emit("updateOlumComp",t),!0}})},proxyHandlerForStore(e,n){return new Proxy(e,{get:function(e,t){return n[t]},set:function(e,t,o){return e[t]=o,n[t]=o,!0},deleteProperty:function(e,t){return delete e[t],delete n[t],!0}})},clean(e){e=String(e).trim();return"null"===e?null:e},esc(e){return null==e?"":e&&!0===e.__olumRaw?e.html:String(e).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")},raw(e){return{__olumRaw:!0,html:null==e?"":String(e)}},eventsHandler(e,t,o,a){t.forEach(e=>{var o=i.clean(e.getAttribute("data-o-event")),n=i.clean(e.getAttribute("data-o-event-mode")),n=n&&""!==n.trim()?n.split("."):[];if(o){var r=e,e=o,l=n,o=e.split("|")[0];let t=(e=e.split("|").slice(1).join()).split("&").map(e=>{var e=e.split("="),t=e[0];return{args:JSON.parse(e.slice(1).join("")),methodName:t}});e={once:!1,passive:!1,capture:!1},l&&l.length&&(l.includes("once")&&(e.once=!0),l.includes("passive")&&(e.passive=!0),l.includes("capture"))&&(e.capture=!0),r.addEventListener(o.slice(2),o=>{function e(){t.forEach(e=>{var t;a[e.methodName]?e.args.length?(-1!==(t=e.args.indexOf("$event"))&&e.args.splice(t,1,o),a[e.methodName](...e.args)):a[e.methodName](o):console.warn("olum: can't access the method")})}l&&l.length&&(l.includes("prevent")&&o.preventDefault(),l.includes("stop"))&&o.stopPropagation(),l&&l.length&&l.includes("self")&&o.target!==r||e()},e),r.removeAttribute("data-o-event"),r.removeAttribute("data-o-event-mode")}})},stylesHandler(e,t,o){t.forEach(e=>{var t=i.clean(e.getAttribute("data-o-style"));if(t){var t=JSON.parse(t),n=Object.keys(t);if(n.length){var r=t;t=n;let o="";t.forEach(e=>{var t=r[e];t&&(o+=e+": "+t+"; ")}),""!==(o=o.trim())&&e.setAttribute("style",o),e.removeAttribute("data-o-style")}}})},handleMarkup(t,o,e,n){e.setAttribute("data-child-of",t),e.setAttribute("data-o-"+o,"");var r=e.querySelectorAll("*");return r.forEach(e=>{e.setAttribute("data-child-of",t),e.setAttribute("data-o-"+o,"")}),this.eventsHandler(e,r,t,n),this.stylesHandler(e,r,t),e},isObj(e){return null!==e&&"object"==typeof e},isFullArr(e){return!!(this.isObj(e)&&Array.isArray(e)&&e.length)},isFullObj(e){return!!(this.isObj(e)&&Array.isArray(Object.keys(e))&&Object.keys(e).length)},createStore(e){let o={},n=[],r=(o[e.__OLUM__.compName]=e,e=>{this.isFullArr(e.__OLUM__.components)&&e.__OLUM__.components.forEach(e=>{var t=Object.keys(e)[0],e=e[t](),t=(o[t]||(o[t]=e),{name:t,children:e.__OLUM__.components.map(e=>Object.keys(e)[0])});n.push(t),this.isFullArr(t.children)&&r(e)})});return r(e),{store:o,map:n}},directOlums(t){return Array.prototype.slice.call(t.querySelectorAll("olum")).filter(e=>{e=e.parentElement&&e.parentElement.closest&&e.parentElement.closest("olum");return!e||!t.contains(e)})},buildTree(e,u,t){var o=e.__OLUM__.getElm;if(!o)return null;let n=this,c=window.olum.app.registry||(window.olum.app.registry={});return function a(e,i,t){e.__OLUM__.components&&Object.assign(c,e.__OLUM__.components);t=n.directOlums(t);let s={};t.forEach(t=>{var o=t.getAttribute("name"),r=c[o]||e.__OLUM__.components&&e.__OLUM__.components[o];if(r){var l=t.getAttribute("data-o-key");let e,n=(e=null!==l&&""!==l?i+">"+o+"@"+l:(s[o]=void 0===s[o]?0:s[o]+1,i+">"+o+"#"+s[o]),u[e]);n||(n=r(e),u[e]=n),n.parentCompName=i,l=t.getAttribute("data-o-props"),n.incomingProps=l?JSON.parse(decodeURIComponent(l)):{},r=t.getAttribute("data-o-props-src")||"",n.incomingPropSources={},r&&r.split("|").forEach(e=>{var t=(e=e.split(":"))[0],o=e[1],e=e[2];t&&o&&e&&(n.incomingPropSources[t]={kind:o,key:e})}),n.children=t.innerHTML.trim(),(l=n.__OLUM__.getElm)&&(l.setAttribute("data-o-if",t.getAttribute("if")?t.getAttribute("if"):"olum-no-condition"),t.replaceWith(l),a(n,e,l))}else console.warn("olum: couldn't find "+o+" Component while building the tree!")})}(e,t,o),o},getInnerNames(t){let n=[],r=window.olum.app.map;return r&&r.find(e=>{e.name==t&&e.children.forEach(e=>n.push(e))}),n.length&&function e(t){let o=n[t];r.forEach(e=>{e.name==o&&e.children.forEach(e=>n.push(e))}),t+1<=n.length&&e(t+1)}(0),n}};"undefined"!=typeof window&&(window.olum=i);class e{root=null;$(e){return this.root=document.querySelector(e),this}use(e){e=e();let{store:o,rootKey:n}=this.share(e);var t=window.olum.buildTree(e,o,n);if(!t)return console.warn("olum: couldn't build tree!");this.setupListeners(o),this.root.append(t),e.hooks.mounted&&e.hooks.mounted(),e.hooks.isMounted=!0,Object.keys(o).forEach(e=>{var t;e!==n&&(e=o[e])&&e.el&&(t=e.el.getAttribute("data-o-if"))&&["olum-no-condition","true"].includes(t)&&(e.hooks.mounted&&e.hooks.mounted(),e.hooks.isMounted=!0)})}getPath(e,t){var o=[];let n=e;for(;n&&n!==t;){var r=n.parentElement;if(!r)break;var l=Array.from(r.children).filter(e=>e.tagName===n.tagName);o.unshift({tag:n.tagName,index:l.indexOf(n)}),n=r}return o}findByPath(e,o){let n=e;for(let t of o){var r=Array.from(n.children).filter(e=>e.tagName===t.tag);if(!(n=r[t.index]))return null}return n}setupListeners(i){window.addEventListener("updateOlumComp",e=>{if(e&&e.detail&&e.detail.compName&&e.detail.compId&&e.detail.hash&&e.detail.hash===(e=>{var t,o=0;if(0!==e.length)for(t=0;t<e.length;t++)o=(o<<5)-o+e.charCodeAt(t),o|=0;return o})(e.detail.compName+e.detail.compId)){var o=i[e.detail.compName];if(o&&o.el&&document.body.contains(o.el)){let t=e.detail.compName;e=Object.keys(i).filter(e=>e!==t);let n={};e.forEach(e=>{var t=i[e];t&&(n[e]=t.hooks.isMounted)});var e=document.activeElement,r=e&&null!=e.selectionStart?e.selectionStart:null,l=e&&null!=e.selectionEnd?e.selectionEnd:null,e=e&&o.el.contains(e)?this.getPath(e,o.el):null,a=window.olum.buildTree(o,i,t);if(!a)return console.warn("olum: couldn't build tree!");o.el.replaceWith(a),e&&e.length&&(o=this.findByPath(a,e))&&(o.focus&&"function"==typeof o.focus&&o.focus(),null!==r)&&o.setSelectionRange&&"function"==typeof o.setSelectionRange&&o.setSelectionRange(r,l),Object.keys(i).filter(e=>e!==t).forEach(e=>{var t,o=i[e];o&&(t=document.body.contains(o.el),n[e]&&!t?o.hooks.unMounted&&!o.hooks.isUnMounted&&(o.hooks.unMounted(),o.hooks.isUnMounted=!0,o.hooks.isMounted=!1):!n[e]&&t&&o.hooks.mounted&&!o.hooks.isMounted&&(o.hooks.mounted(),o.hooks.isMounted=!0,o.hooks.isUnMounted=!1))})}}})}share(e){var t={},o=e.__OLUM__.compName;return t[o]=e,Object.assign(window.olum.app,{store:t,registry:{}}),{store:t,rootKey:o}}}return e})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "olum",
-  "version": "0.2.3",
+  "version": "0.5.0",
   "description": "The VanillaJS developer’s platform.",
   "main": "dist/olum.js",
   "directories": {