olova 1.0.1 → 1.0.2

package/dist/index.js

@@ -0,0 +1 @@
+class olova{constructor(){this.$elements={},this.listeners={},this.components={},this.plugins={},this.refs={},this.$refs=new Proxy({},{get:(e,t)=>this.refs[t]}),this.data={},this.dependencies=new Map,this.subscribers=new Map,this.effects=[],this.cleanupEffects=[]}registerPlugin(e,t){this.plugins[e]=t}registerComponent(e,t){this.components[e]=t,this.defineCustomElement(e)}defineCustomElement(e){const t=this;class i extends HTMLElement{connectedCallback(){this.render()}render(){const i=this.getProps(),n=(0,t.components[e])(i),s=document.createElement("div");s.innerHTML=n.trim();const r=this.parentNode,o=s.firstChild;o&&(r.replaceChild(o,this),t.applyDirectivesToElement(o),t.initReactiveSystem(),t.runEffects())}getProps(){const e={};for(const t of this.attributes)e[t.name]=t.value;return e}static get observedAttributes(){return Object.keys(t.components[e]({})||{})}attributeChangedCallback(e,t,i){this.render()}}customElements.define(e,i)}applyDirectivesToElement(e){this.applyShowDirective(e),this.applyIfDirective(e),this.applyForDirective(e),this.applyModelDirective(e),this.applyAttrDirective(e),this.applyClassDirective(e),this.applyStyleDirective(e),this.applyBindDirective(e),this.applyRefDirective(e),e.querySelectorAll("*").forEach((e=>{this.applyShowDirective(e),this.applyIfDirective(e),this.applyForDirective(e),this.applyModelDirective(e),this.applyAttrDirective(e),this.applyClassDirective(e),this.applyStyleDirective(e),this.applyBindDirective(e),this.applyRefDirective(e)}))}applyShowDirective(e){if(!(e instanceof HTMLElement))return;const t=e.getAttribute("$show");t&&this.effect((()=>{const i=this.evaluateExpression(t);e.style.display=i?"":"none"}))}applyIfDirective(e){if(!(e instanceof HTMLElement))return;const t=e.getAttribute("$if");if(!t)return;const i=e.parentNode,n=document.createComment("$if placeholder");i?.insertBefore(n,e);let s=e.nextElementSibling;for(;s&&!s.hasAttribute("$else");)s=s.nextElementSibling;s&&i?.removeChild(s),this.effect((()=>{this.evaluateExpression(t)?(e.style.display="",e.parentNode!==i&&i?.insertBefore(e,n.nextSibling),s&&(s.style.display="none",s.parentNode===i&&i?.removeChild(s))):(e.style.display="none",e.parentNode===i&&i?.removeChild(e),s&&(s.style.display="",s.parentNode!==i&&i?.insertBefore(s,n.nextSibling)))}))}applyForDirective(e){if(!(e instanceof HTMLElement))return;const t=e.getAttribute("$for");if(!t)return;const[i,n]=t.split(" in "),s=e.parentNode,r=document.createComment("$for placeholder");s?.insertBefore(r,e),e.remove(),this.effect((()=>{const t=this.evaluateExpression(n),o=new Set;let c=r.nextSibling;for(;c&&c.nodeType===Node.ELEMENT_NODE;)o.add(c),c=c.nextSibling;t.forEach(((t,n)=>{let c=Array.from(o).find((e=>e.getAttribute("key")===String(n)));c?o.delete(c):(c=e.cloneNode(!0),c.setAttribute("key",String(n)),s?.insertBefore(c,r.nextSibling)),this.interpolateElement(c,{[i]:t,index:n})})),o.forEach((e=>e.remove()))}))}applyModelDirective(e){if(!(e instanceof HTMLInputElement))return;const t=e.getAttribute("$model");t&&(e.addEventListener("input",(e=>{this.setExpressionValue(t,e.target.value)})),this.effect((()=>{e.value=this.evaluateExpression(t)})))}applyAttrDirective(e){if(!(e instanceof HTMLElement))return;const t=e.getAttribute("$attr")?.split(",");t&&t.forEach((t=>{const[i,n]=t.split(":");this.effect((()=>{e.setAttribute(i,this.evaluateExpression(n))}))}))}applyClassDirective(e){if(!(e instanceof HTMLElement))return;const t=e.getAttribute("$class");t&&this.effect((()=>{const i=this.evaluateExpression(t);"object"==typeof i&&null!==i?Object.entries(i).forEach((([t,i])=>{i?e.classList.add(t):e.classList.remove(t)})):"string"==typeof i&&(e.className=i)}))}applyStyleDirective(e){if(!(e instanceof HTMLElement))return;const t=e.getAttribute("$style");t&&this.effect((()=>{const i=this.evaluateExpression(t);"object"==typeof i&&null!==i?Object.keys(i).forEach((t=>{e.style[t]=i[t]})):"string"==typeof i&&e.setAttribute("style",i)}))}applyBindDirective(e){if(!(e instanceof HTMLElement))return;const t=e.getAttribute("$bind");t&&(this.effect((()=>{const i=this.evaluateExpression(t);this.setElementValue(e,i)})),e.addEventListener("input",(e=>{const i=this.getElementValue(e.target);this.setExpressionValue(t,i)})),"checkbox"!==e.type&&"radio"!==e.type||e.addEventListener("change",(e=>{const i=this.getElementValue(e.target);this.setExpressionValue(t,i)})))}applyRefDirective(e){if(!(e instanceof HTMLElement))return;const t=e.getAttribute("$ref");t&&this.registerRef(t,e)}setElementValue(e,t){e instanceof HTMLInputElement?"checkbox"===e.type?e.checked=!!t:"radio"===e.type?e.checked=e.value===t:e.value=t:(e instanceof HTMLTextAreaElement||e instanceof HTMLSelectElement)&&(e.value=t)}getElementValue(e){return e instanceof HTMLInputElement?"checkbox"===e.type?e.checked:"radio"===e.type?e.checked?e.value:null:e.value:e instanceof HTMLTextAreaElement||e instanceof HTMLSelectElement?e.value:void 0}useEffect(e){this.effects.push(e)}runEffects(){this.effects.forEach((e=>{const t=e();"function"==typeof t&&this.cleanupEffects.push(t)})),this.effects=[]}cleanup(){this.cleanupEffects.forEach((e=>e())),this.cleanupEffects=[]}getRef(e){return void 0!==this.refs[e]?this.refs[e]:(console.warn(`Ref '${e}' not found.`),null)}registerRef(e,t){this.refs[e]=t}defineReactive(e,t,i){this.listeners[t]=[],Object.defineProperty(e,t,{get:()=>(this.track(t),i),set:e=>{i!==e&&(i=e,this.notify(t))}})}watch(e,t){this.listeners[e]||(this.listeners[e]=[]),this.listeners[e].push(t)}track(e){olova.activeEffect&&(this.dependencies.has(e)||this.dependencies.set(e,new Set),this.dependencies.get(e).add(olova.activeEffect))}notify(e){this.dependencies.has(e)&&this.dependencies.get(e).forEach((e=>e())),this.listeners[e]&&this.listeners[e].forEach((e=>e()))}effect(e){olova.activeEffect=e,e(),olova.activeEffect=null}makeReactive(e){for(const t in e)e.hasOwnProperty(t)&&this.defineReactive(e,t,e[t])}initReactiveSystem(){this.makeReactive(window.useSignal),this.initDirectives(),this.initEvents(),this.initDataBinding()}initDirectives(){this.initIfDirective(),this.initRefDirective(),this.initShowDirective(),this.initForDirective(),this.initModelDirective(),this.initAttrDirective(),this.initClassDirective(),this.initStyleDirective(),this.initBindDirective(),this.initHtmlDirective(),Object.keys(this.plugins).forEach((e=>{document.querySelectorAll(`[\\$${e}]`).forEach((t=>{const i=t.getAttribute(`$${e}`);this.effect((()=>{const n=this.evaluateExpression(i);this.plugins[e](t,n,this)}))}))}))}initHtmlDirective(){document.querySelectorAll("[\\$html]").forEach((e=>{if(!(e instanceof HTMLElement))return;const t=e.getAttribute("$html");t&&this.effect((()=>{const i=this.evaluateExpression(t);e.innerHTML=i,e.removeAttribute("$html")}))}))}initClassDirective(){document.querySelectorAll("[\\$class]").forEach((e=>{if(!(e instanceof HTMLElement))return;const t=e.getAttribute("$class");t&&this.effect((()=>{const i=this.evaluateExpression(t);"object"==typeof i&&null!==i?Object.entries(i).forEach((([t,i])=>{i?e.classList.add(t):e.classList.remove(t)})):"string"==typeof i&&(e.className=i)}))}))}initShowDirective(){document.querySelectorAll("[\\$show]").forEach((e=>{if(!(e instanceof HTMLElement))return;const t=e.getAttribute("$show");t&&this.effect((()=>{const i=this.evaluateExpression(t);e.style.display=i?"":"none"}))}))}initBindDirective(){document.querySelectorAll("[\\$bind]").forEach((e=>{if(!(e instanceof HTMLElement))return;const t=e.getAttribute("$bind");t&&(this.effect((()=>{const i=this.evaluateExpression(t);this.setElementValue(e,i)})),e.addEventListener("input",(e=>{const i=this.getElementValue(e.target);this.setExpressionValue(t,i)})),"checkbox"!==e.type&&"radio"!==e.type||e.addEventListener("change",(e=>{const i=this.getElementValue(e.target);this.setExpressionValue(t,i)})))}))}setElementValue(e,t){e instanceof HTMLInputElement?"checkbox"===e.type?e.checked=!!t:"radio"===e.type?e.checked=e.value===t:e.value=t:(e instanceof HTMLTextAreaElement||e instanceof HTMLSelectElement)&&(e.value=t)}getElementValue(e){return e instanceof HTMLInputElement?"checkbox"===e.type?e.checked:"radio"===e.type?e.checked?e.value:null:e.value:e instanceof HTMLTextAreaElement||e instanceof HTMLSelectElement?e.value:void 0}initStyleDirective(){document.querySelectorAll("[\\$style]").forEach((e=>{if(!(e instanceof HTMLElement))return;const t=e.getAttribute("$style");t&&this.effect((()=>{const i=this.evaluateExpression(t);"object"==typeof i&&null!==i?Object.keys(i).forEach((t=>{e.style[t]=i[t]})):"string"==typeof i&&e.setAttribute("style",i)}))}))}initIfDirective(){document.querySelectorAll("[\\$if]").forEach((e=>{if(!(e instanceof HTMLElement))return;const t=e.getAttribute("$if");if(!t)return;const i=e.parentNode,n=document.createComment("$if placeholder");i?.insertBefore(n,e);let s=e.nextElementSibling;for(;s&&!s.hasAttribute("$else");)s=s.nextElementSibling;s&&i?.removeChild(s),this.effect((()=>{this.evaluateExpression(t)?(e.style.display="",e.parentNode!==i&&i?.insertBefore(e,n.nextSibling),s&&(s.style.display="none",s.parentNode===i&&i?.removeChild(s))):(e.style.display="none",e.parentNode===i&&i?.removeChild(e),s&&(s.style.display="",s.parentNode!==i&&i?.insertBefore(s,n.nextSibling)))}))}))}initRefDirective(){document.querySelectorAll("[\\$ref]").forEach((e=>{if(!(e instanceof HTMLElement))return;const t=e.getAttribute("$ref");t&&this.registerRef(t,e),e.removeAttribute("$ref")}))}initForDirective(){document.querySelectorAll("[\\$for]").forEach((e=>{if(!(e instanceof HTMLElement))return;const t=e.getAttribute("$for");if(!t)return;const[i,n]=t.split(" in "),s=e.parentNode,r=document.createComment("$for placeholder");s?.insertBefore(r,e),e.removeAttribute("$for");const o=e.cloneNode(!0);e.remove(),this.effect((()=>{const e=this.evaluateExpression(n),t=new Set;let c=r.nextSibling;for(;c&&c.nodeType===Node.ELEMENT_NODE;)t.add(c),c=c.nextSibling;e.forEach(((e,n)=>{let c=Array.from(t).find((e=>e.getAttribute("key")===String(n)));c?t.delete(c):(c=o.cloneNode(!0),c.setAttribute("key",String(n)),s?.insertBefore(c,r.nextSibling)),this.interpolateElement(c,{[i]:e,index:n})})),t.forEach((e=>e.remove()))}))}))}initModelDirective(){document.querySelectorAll("[\\$model]").forEach((e=>{if(!(e instanceof HTMLInputElement))return;const t=e.getAttribute("$model");t&&(e.addEventListener("input",(e=>{this.setExpressionValue(t,e.target.value)})),this.effect((()=>{e.value=this.evaluateExpression(t)})))}))}initAttrDirective(){document.querySelectorAll("[\\$attr]").forEach((e=>{if(!(e instanceof HTMLElement))return;const t=e.getAttribute("$attr")?.split(",");t&&t.forEach((t=>{const[i,n]=t.split(":");this.effect((()=>{e.setAttribute(i,this.evaluateExpression(n))}))}))}))}initEvents(){["click","input","change","mouseover","mousemove","mouseout","keydown","keyup","mousedown","mouseup","dblclick","focus","blur","contextmenu","drag","drop","scroll","resize","touchstart","touchmove","touchend","paste","copy","cut","error","load","submit","animationstart","animationend","animationiteration","transitionend","hashchange","beforeunload","fullscreenchange","message","canplay","canplaythrough","durationchange","emptied","ended","invalid","progress","ratechange","waiting","volumechange","wheel","focusin","focusout","pointerenter","pointerleave","touchcancel"].forEach((e=>{document.querySelectorAll(`[\\@${e}]`).forEach((t=>{if(!(t instanceof HTMLElement))return;const i=t.getAttribute(`@${e}`);i&&t.addEventListener(e,(t=>{try{let e=i.trim();if(e in window.useSignal&&"function"==typeof window.useSignal[e])window.useSignal[e](t);else{new Function("event, $",`with($) { ${e} }`)(t,window.useSignal)}}catch(t){console.error(`Error executing handler '${i}' for event '${e}':`,t)}}))}))}))}initDataBinding(){this.compileTextNodes(document.body)}compileTextNodes(e){const t=document.createTreeWalker(e,NodeFilter.SHOW_TEXT);let i;const n=[];for(;i=t.nextNode();)i.textContent.includes("{")&&i.textContent.includes("}")&&n.push(i);n.forEach((e=>{const t=e.textContent.split(/(\{.*?\})/),i=document.createDocumentFragment();t.forEach((e=>{if(e.startsWith("{")&&e.endsWith("}")){const t=document.createTextNode(""),n=e.slice(2,-2).trim();this.effect((()=>{t.textContent=this.evaluateExpression(n)})),i.appendChild(t)}else i.appendChild(document.createTextNode(e))})),e.parentNode.replaceChild(i,e)}))}interpolateTextNodes(e,t){const i=document.createTreeWalker(e,NodeFilter.SHOW_TEXT);let n;const s=[];for(;n=i.nextNode();)n.textContent.includes("{")&&n.textContent.includes("}")&&s.push(n);s.forEach((e=>{const i=e.textContent.split(/(\{.*?\})/),n=document.createDocumentFragment();i.forEach((e=>{if(e.startsWith("{")&&e.endsWith("}")){const i=document.createTextNode(""),s=e.slice(2,-2).trim();this.effect((()=>{i.textContent=this.evaluateExpression(s,t)})),n.appendChild(i)}else n.appendChild(document.createTextNode(e))})),e.parentNode.replaceChild(n,e)}))}evaluateExpression(e,t={}){try{return new Function("useSignal","with(useSignal) { return "+e+" }")({...window.useSignal,...t})}catch(t){return console.error(`Error evaluating expression: ${e}`,t),""}}setExpressionValue(e,t){try{new Function("useSignal","value",`with(useSignal) { ${e} = value }`)(window.useSignal,t)}catch(t){console.error(`Error setting value for expression: ${e}`,t)}}interpolateElement(e,t){this.interpolateAttributes(e,t),this.interpolateTextNodes(e,t),Array.from(e.children).forEach((e=>this.interpolateElement(e,t)))}interpolateAttributes(e,t){Array.from(e.attributes).forEach((e=>{e.value.includes("{")&&e.value.includes("}")&&this.effect((()=>{e.value=this.interpolate(e.value,t)}))}))}interpolateTextNodes(e,t){const i=document.createTreeWalker(e,NodeFilter.SHOW_TEXT);let n;const s=[];for(;n=i.nextNode();)n.textContent.includes("{")&&n.textContent.includes("}")&&s.push(n);s.forEach((e=>{const i=document.createDocumentFragment();e.textContent.split(/(\{.*?\})/).forEach((e=>{if(e.startsWith("{")&&e.endsWith("}")){const n=document.createElement("span"),s=e.slice(2,-2).trim();this.effect((()=>{n.textContent=this.evaluateExpression(s,t)})),i.appendChild(n)}else i.appendChild(document.createTextNode(e))})),e.parentNode.replaceChild(i,e)}))}interpolate(e,t){return e.replace(/\{\{(.*?)\}\}/g,((e,i)=>this.evaluateExpression(i,t)))}static init(){const e=new olova;window.$refs=e.$refs,window.$=t=>e.$(t);return window.useSignal=new Proxy(((e={})=>{Object.assign(window.useSignal,e)}),{get:(t,i)=>("call"===i||"apply"===i||e.track(i),Reflect.get(t,i)),set:(t,i,n)=>(Reflect.get(t,i)!==n&&(Reflect.set(t,i,n),e.notify(i),e.runEffects()),!0)}),document.addEventListener("DOMContentLoaded",(()=>{e.renderTemplate()})),window.addEventListener("beforeunload",(()=>{e.cleanup()})),window.useEffect=t=>{e.useEffect(t)},window.component=(t,i)=>{e.registerComponent(t,i)},window.plugin=(t,i)=>e.registerPlugin(t,i),e}renderTemplate(){const e=document.getElementById("root"),t=document.querySelector("template");if(e&&t){let i=t.innerHTML;i=i.replace(/<([a-z-]+)><\/\1>/g,""),e.innerHTML=i,t.remove(),this.initReactiveSystem(),this.runEffects()}else console.error("Root element or app template not found")}}olova.activeEffect=null;export default olova;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "olova",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A lightweight JavaScript framework for building reactive applications.",
   "main": "index.js",
   "scripts": {

package/dist/olova.js

@@ -1,1000 +0,0 @@
-class olova {
-  constructor() {
-    this.$elements = {};
-    this.listeners = {};
-    this.components = {};
-    this.plugins = {};
-    this.refs = {};
-    this.$refs = new Proxy(
-      {},
-      {
-        get: (target, key) => {
-          return this.refs[key];
-        },
-      }
-    );
-    this.data = {};
-    this.dependencies = new Map();
-    this.subscribers = new Map();
-    this.effects = [];
-    this.cleanupEffects = [];
-  }
-
-  registerPlugin(name, handler) {
-    this.plugins[name] = handler;
-  }
-
-  registerComponent(name, componentFunction) {
-    this.components[name] = componentFunction;
-    this.defineCustomElement(name);
-  }
-
-  defineCustomElement(name) {
-    const deshi = this;
-    class CustomElement extends HTMLElement {
-      connectedCallback() {
-        this.render();
-      }
-
-      render() {
-        const props = this.getProps();
-        const componentFunction = deshi.components[name];
-        const renderedContent = componentFunction(props);
-
-        const tempContainer = document.createElement("div");
-        tempContainer.innerHTML = renderedContent.trim();
-
-        const parent = this.parentNode;
-        const renderedElement = tempContainer.firstChild;
-
-        if (renderedElement) {
-          parent.replaceChild(renderedElement, this);
-          deshi.applyDirectivesToElement(renderedElement);
-          deshi.initReactiveSystem();
-          deshi.runEffects();
-        }
-      }
-
-      getProps() {
-        const props = {};
-        for (const attr of this.attributes) {
-          props[attr.name] = attr.value;
-        }
-        return props;
-      }
-
-      static get observedAttributes() {
-        return Object.keys(deshi.components[name]({}) || {});
-      }
-
-      attributeChangedCallback(name, oldValue, newValue) {
-        this.render();
-      }
-    }
-
-    customElements.define(name, CustomElement);
-  }
-
-  applyDirectivesToElement(element) {
-    this.applyShowDirective(element);
-    this.applyIfDirective(element);
-    this.applyForDirective(element);
-    this.applyModelDirective(element);
-    this.applyAttrDirective(element);
-    this.applyClassDirective(element);
-    this.applyStyleDirective(element);
-    this.applyBindDirective(element);
-    this.applyRefDirective(element);
-
-    element.querySelectorAll("*").forEach((el) => {
-      this.applyShowDirective(el);
-      this.applyIfDirective(el);
-      this.applyForDirective(el);
-      this.applyModelDirective(el);
-      this.applyAttrDirective(el);
-      this.applyClassDirective(el);
-      this.applyStyleDirective(el);
-      this.applyBindDirective(el);
-      this.applyRefDirective(el);
-    });
-  }
-
-  applyShowDirective(el) {
-    if (!(el instanceof HTMLElement)) return;
-    const showExpression = el.getAttribute("$show");
-    if (!showExpression) return;
-
-    this.effect(() => {
-      const shouldShow = this.evaluateExpression(showExpression);
-      el.style.display = shouldShow ? "" : "none";
-    });
-  }
-
-  applyIfDirective(el) {
-    if (!(el instanceof HTMLElement)) return;
-    const key = el.getAttribute("$if");
-    if (!key) return;
-
-    const parent = el.parentNode;
-    const comment = document.createComment("$if placeholder");
-    parent?.insertBefore(comment, el);
-
-    let elseElement = el.nextElementSibling;
-    while (elseElement && !elseElement.hasAttribute("$else")) {
-      elseElement = elseElement.nextElementSibling;
-    }
-
-    if (elseElement) {
-      parent?.removeChild(elseElement);
-    }
-
-    this.effect(() => {
-      if (this.evaluateExpression(key)) {
-        el.style.display = "";
-        if (el.parentNode !== parent) {
-          parent?.insertBefore(el, comment.nextSibling);
-        }
-        if (elseElement) {
-          elseElement.style.display = "none";
-          if (elseElement.parentNode === parent) {
-            parent?.removeChild(elseElement);
-          }
-        }
-      } else {
-        el.style.display = "none";
-        if (el.parentNode === parent) {
-          parent?.removeChild(el);
-        }
-        if (elseElement) {
-          elseElement.style.display = "";
-          if (elseElement.parentNode !== parent) {
-            parent?.insertBefore(elseElement, comment.nextSibling);
-          }
-        }
-      }
-    });
-  }
-
-  applyForDirective(el) {
-    if (!(el instanceof HTMLElement)) return;
-    const expression = el.getAttribute("$for");
-    if (!expression) return;
-
-    const [item, arr] = expression.split(" in ");
-    const parent = el.parentNode;
-    const comment = document.createComment("$for placeholder");
-    parent?.insertBefore(comment, el);
-    el.remove();
-
-    this.effect(() => {
-      const items = this.evaluateExpression(arr);
-      const existingElements = new Set();
-      let currentElement = comment.nextSibling;
-      while (currentElement && currentElement.nodeType === Node.ELEMENT_NODE) {
-        existingElements.add(currentElement);
-        currentElement = currentElement.nextSibling;
-      }
-
-      items.forEach((value, index) => {
-        let element = Array.from(existingElements).find(
-          (el) => el.getAttribute("key") === String(index)
-        );
-        if (!element) {
-          element = el.cloneNode(true);
-          element.setAttribute("key", String(index));
-          parent?.insertBefore(element, comment.nextSibling);
-        } else {
-          existingElements.delete(element);
-        }
-        this.interpolateElement(element, { [item]: value, index });
-      });
-
-      existingElements.forEach((el) => el.remove());
-    });
-  }
-
-  applyModelDirective(el) {
-    if (!(el instanceof HTMLInputElement)) return;
-    const key = el.getAttribute("$model");
-    if (!key) return;
-
-    el.addEventListener("input", (e) => {
-      this.setExpressionValue(key, e.target.value);
-    });
-
-    this.effect(() => {
-      el.value = this.evaluateExpression(key);
-    });
-  }
-
-  applyAttrDirective(el) {
-    if (!(el instanceof HTMLElement)) return;
-    const bindings = el.getAttribute("$attr")?.split(",");
-    if (!bindings) return;
-
-    bindings.forEach((binding) => {
-      const [attr, expression] = binding.split(":");
-      this.effect(() => {
-        el.setAttribute(attr, this.evaluateExpression(expression));
-      });
-    });
-  }
-
-  applyClassDirective(el) {
-    if (!(el instanceof HTMLElement)) return;
-    const classBinding = el.getAttribute("$class");
-    if (!classBinding) return;
-
-    this.effect(() => {
-      const classObj = this.evaluateExpression(classBinding);
-      if (typeof classObj === "object" && classObj !== null) {
-        Object.entries(classObj).forEach(([className, condition]) => {
-          if (condition) {
-            el.classList.add(className);
-          } else {
-            el.classList.remove(className);
-          }
-        });
-      } else if (typeof classObj === "string") {
-        el.className = classObj;
-      }
-    });
-  }
-
-  applyStyleDirective(el) {
-    if (!(el instanceof HTMLElement)) return;
-    const styleBinding = el.getAttribute("$style");
-    if (!styleBinding) return;
-
-    this.effect(() => {
-      const styleObj = this.evaluateExpression(styleBinding);
-      if (typeof styleObj === "object" && styleObj !== null) {
-        Object.keys(styleObj).forEach((prop) => {
-          el.style[prop] = styleObj[prop];
-        });
-      } else if (typeof styleObj === "string") {
-        el.setAttribute("style", styleObj);
-      }
-    });
-  }
-
-  applyBindDirective(el) {
-    if (!(el instanceof HTMLElement)) return;
-    const bindExpression = el.getAttribute("$bind");
-    if (!bindExpression) return;
-
-    this.effect(() => {
-      const value = this.evaluateExpression(bindExpression);
-      this.setElementValue(el, value);
-    });
-
-    el.addEventListener("input", (event) => {
-      const value = this.getElementValue(event.target);
-      this.setExpressionValue(bindExpression, value);
-    });
-
-    if (el.type === "checkbox" || el.type === "radio") {
-      el.addEventListener("change", (event) => {
-        const value = this.getElementValue(event.target);
-        this.setExpressionValue(bindExpression, value);
-      });
-    }
-  }
-
-  applyRefDirective(el) {
-    if (!(el instanceof HTMLElement)) return;
-    const key = el.getAttribute("$ref");
-    if (key) {
-      this.registerRef(key, el);
-    }
-  }
-
-  setElementValue(el, value) {
-    if (el instanceof HTMLInputElement) {
-      if (el.type === "checkbox") {
-        el.checked = !!value;
-      } else if (el.type === "radio") {
-        el.checked = el.value === value;
-      } else {
-        el.value = value;
-      }
-    } else if (
-      el instanceof HTMLTextAreaElement ||
-      el instanceof HTMLSelectElement
-    ) {
-      el.value = value;
-    }
-  }
-
-  getElementValue(el) {
-    if (el instanceof HTMLInputElement) {
-      if (el.type === "checkbox") {
-        return el.checked;
-      } else if (el.type === "radio") {
-        return el.checked ? el.value : null;
-      } else {
-        return el.value;
-      }
-    } else if (
-      el instanceof HTMLTextAreaElement ||
-      el instanceof HTMLSelectElement
-    ) {
-      return el.value;
-    }
-  }
-
-  useEffect(callback) {
-    this.effects.push(callback);
-  }
-
-  runEffects() {
-    this.effects.forEach((effect) => {
-      const cleanup = effect();
-      if (typeof cleanup === "function") {
-        this.cleanupEffects.push(cleanup);
-      }
-    });
-    this.effects = [];
-  }
-
-  cleanup() {
-    this.cleanupEffects.forEach((cleanup) => cleanup());
-    this.cleanupEffects = [];
-  }
-
-  getRef(key) {
-    if (this.refs[key] !== undefined) {
-      return this.refs[key];
-    } else {
-      console.warn(`Ref '${key}' not found.`);
-      return null;
-    }
-  }
-
-  registerRef(key, ref) {
-    this.refs[key] = ref;
-  }
-
-  defineReactive(obj, key, val) {
-    this.listeners[key] = [];
-    Object.defineProperty(obj, key, {
-      get: () => {
-        this.track(key);
-        return val;
-      },
-      set: (newVal) => {
-        if (val !== newVal) {
-          val = newVal;
-          this.notify(key);
-        }
-      },
-    });
-  }
-
-  watch(key, listener) {
-    if (!this.listeners[key]) {
-      this.listeners[key] = [];
-    }
-    this.listeners[key].push(listener);
-  }
-
-  track(key) {
-    if (olova.activeEffect) {
-      if (!this.dependencies.has(key)) {
-        this.dependencies.set(key, new Set());
-      }
-      this.dependencies.get(key).add(olova.activeEffect);
-    }
-  }
-
-  notify(key) {
-    if (this.dependencies.has(key)) {
-      this.dependencies.get(key).forEach((effect) => effect());
-    }
-    if (this.listeners[key]) {
-      this.listeners[key].forEach((listener) => listener());
-    }
-  }
-
-  effect(fn) {
-    olova.activeEffect = fn;
-    fn();
-    olova.activeEffect = null;
-  }
-
-  makeReactive(obj) {
-    for (const key in obj) {
-      if (obj.hasOwnProperty(key)) {
-        this.defineReactive(obj, key, obj[key]);
-      }
-    }
-  }
-
-  initReactiveSystem() {
-    this.makeReactive(window.useSignal);
-    this.initDirectives();
-    this.initEvents();
-    this.initDataBinding();
-  }
-
-  initDirectives() {
-    this.initIfDirective();
-    this.initRefDirective();
-    this.initShowDirective();
-    this.initForDirective();
-    this.initModelDirective();
-    this.initAttrDirective();
-    this.initClassDirective();
-    this.initStyleDirective();
-    this.initBindDirective();
-    this.initHtmlDirective();
-    Object.keys(this.plugins).forEach((pluginName) => {
-      document.querySelectorAll(`[\\$${pluginName}]`).forEach((el) => {
-        const value = el.getAttribute(`$${pluginName}`);
-        this.effect(() => {
-          const result = this.evaluateExpression(value);
-          this.plugins[pluginName](el, result, this);
-        });
-      });
-    });
-  }
-  initHtmlDirective() {
-    document.querySelectorAll("[\\$html]").forEach((el) => {
-      if (!(el instanceof HTMLElement)) return;
-      const htmlExpression = el.getAttribute("$html");
-      if (!htmlExpression) return;
-
-      this.effect(() => {
-        const htmlContent = this.evaluateExpression(htmlExpression);
-        el.innerHTML = htmlContent;
-        el.removeAttribute("$html");
-      });
-    });
-  }
-  initClassDirective() {
-    document.querySelectorAll("[\\$class]").forEach((el) => {
-      if (!(el instanceof HTMLElement)) return;
-      const classBinding = el.getAttribute("$class");
-      if (!classBinding) return;
-
-      this.effect(() => {
-        const classObj = this.evaluateExpression(classBinding);
-        if (typeof classObj === "object" && classObj !== null) {
-          Object.entries(classObj).forEach(([className, condition]) => {
-            if (condition) {
-              el.classList.add(className);
-            } else {
-              el.classList.remove(className);
-            }
-          });
-        } else if (typeof classObj === "string") {
-          el.className = classObj;
-        }
-      });
-    });
-  }
-
-  initShowDirective() {
-    document.querySelectorAll("[\\$show]").forEach((el) => {
-      if (!(el instanceof HTMLElement)) return;
-      const showExpression = el.getAttribute("$show");
-      if (!showExpression) return;
-
-      this.effect(() => {
-        const shouldShow = this.evaluateExpression(showExpression);
-        el.style.display = shouldShow ? "" : "none";
-      });
-    });
-  }
-  initBindDirective() {
-    document.querySelectorAll("[\\$bind]").forEach((el) => {
-      if (!(el instanceof HTMLElement)) return;
-      const bindExpression = el.getAttribute("$bind");
-      if (!bindExpression) return;
-
-      this.effect(() => {
-        const value = this.evaluateExpression(bindExpression);
-        this.setElementValue(el, value);
-      });
-
-      el.addEventListener("input", (event) => {
-        const value = this.getElementValue(event.target);
-        this.setExpressionValue(bindExpression, value);
-      });
-
-      if (el.type === "checkbox" || el.type === "radio") {
-        el.addEventListener("change", (event) => {
-          const value = this.getElementValue(event.target);
-          this.setExpressionValue(bindExpression, value);
-        });
-      }
-    });
-  }
-
-  setElementValue(el, value) {
-    if (el instanceof HTMLInputElement) {
-      if (el.type === "checkbox") {
-        el.checked = !!value;
-      } else if (el.type === "radio") {
-        el.checked = el.value === value;
-      } else {
-        el.value = value;
-      }
-    } else if (
-      el instanceof HTMLTextAreaElement ||
-      el instanceof HTMLSelectElement
-    ) {
-      el.value = value;
-    }
-  }
-
-  getElementValue(el) {
-    if (el instanceof HTMLInputElement) {
-      if (el.type === "checkbox") {
-        return el.checked;
-      } else if (el.type === "radio") {
-        return el.checked ? el.value : null;
-      } else {
-        return el.value;
-      }
-    } else if (
-      el instanceof HTMLTextAreaElement ||
-      el instanceof HTMLSelectElement
-    ) {
-      return el.value;
-    }
-  }
-  initStyleDirective() {
-    document.querySelectorAll("[\\$style]").forEach((el) => {
-      if (!(el instanceof HTMLElement)) return;
-      const styleBinding = el.getAttribute("$style");
-      if (!styleBinding) return;
-
-      this.effect(() => {
-        const styleObj = this.evaluateExpression(styleBinding);
-        if (typeof styleObj === "object" && styleObj !== null) {
-          Object.keys(styleObj).forEach((prop) => {
-            el.style[prop] = styleObj[prop];
-          });
-        } else if (typeof styleObj === "string") {
-          el.setAttribute("style", styleObj);
-        }
-      });
-    });
-  }
-  initIfDirective() {
-    document.querySelectorAll("[\\$if]").forEach((el) => {
-      if (!(el instanceof HTMLElement)) return;
-      const key = el.getAttribute("$if");
-      if (!key) return;
-      const parent = el.parentNode;
-      const comment = document.createComment("$if placeholder");
-      parent?.insertBefore(comment, el);
-
-      let elseElement = el.nextElementSibling;
-      while (elseElement && !elseElement.hasAttribute("$else")) {
-        elseElement = elseElement.nextElementSibling;
-      }
-
-      if (elseElement) {
-        parent?.removeChild(elseElement);
-      }
-
-      this.effect(() => {
-        if (this.evaluateExpression(key)) {
-          el.style.display = "";
-          if (el.parentNode !== parent) {
-            parent?.insertBefore(el, comment.nextSibling);
-          }
-          if (elseElement) {
-            elseElement.style.display = "none";
-            if (elseElement.parentNode === parent) {
-              parent?.removeChild(elseElement);
-            }
-          }
-        } else {
-          el.style.display = "none";
-          if (el.parentNode === parent) {
-            parent?.removeChild(el);
-          }
-          if (elseElement) {
-            elseElement.style.display = "";
-            if (elseElement.parentNode !== parent) {
-              parent?.insertBefore(elseElement, comment.nextSibling);
-            }
-          }
-        }
-      });
-    });
-  }
-
-  initRefDirective() {
-    document.querySelectorAll("[\\$ref]").forEach((el) => {
-      if (!(el instanceof HTMLElement)) return;
-      const key = el.getAttribute("$ref");
-      if (key) {
-        this.registerRef(key, el);
-      }
-      el.removeAttribute("$ref");
-    });
-  }
-
-  initForDirective() {
-    document.querySelectorAll("[\\$for]").forEach((el) => {
-      if (!(el instanceof HTMLElement)) return;
-      const expression = el.getAttribute("$for");
-      if (!expression) return;
-      const [item, arr] = expression.split(" in ");
-      const parent = el.parentNode;
-      const comment = document.createComment("$for placeholder");
-      parent?.insertBefore(comment, el);
-
-      // Remove the $for attribute
-      el.removeAttribute("$for");
-
-      const template = el.cloneNode(true);
-      el.remove();
-
-      this.effect(() => {
-        const items = this.evaluateExpression(arr);
-        const existingElements = new Set();
-        let currentElement = comment.nextSibling;
-        while (
-          currentElement &&
-          currentElement.nodeType === Node.ELEMENT_NODE
-        ) {
-          existingElements.add(currentElement);
-          currentElement = currentElement.nextSibling;
-        }
-        items.forEach((value, index) => {
-          let element = Array.from(existingElements).find(
-            (el) => el.getAttribute("key") === String(index)
-          );
-          if (!element) {
-            element = template.cloneNode(true);
-            element.setAttribute("key", String(index));
-            parent?.insertBefore(element, comment.nextSibling);
-          } else {
-            existingElements.delete(element);
-          }
-          this.interpolateElement(element, { [item]: value, index });
-        });
-        existingElements.forEach((el) => el.remove());
-      });
-    });
-  }
-  initModelDirective() {
-    document.querySelectorAll("[\\$model]").forEach((el) => {
-      if (!(el instanceof HTMLInputElement)) return;
-      const key = el.getAttribute("$model");
-      if (!key) return;
-      el.addEventListener("input", (e) => {
-        this.setExpressionValue(key, e.target.value);
-      });
-      this.effect(() => {
-        el.value = this.evaluateExpression(key);
-      });
-    });
-  }
-
-  initAttrDirective() {
-    document.querySelectorAll("[\\$attr]").forEach((el) => {
-      if (!(el instanceof HTMLElement)) return;
-      const bindings = el.getAttribute("$attr")?.split(",");
-      if (!bindings) return;
-      bindings.forEach((binding) => {
-        const [attr, expression] = binding.split(":");
-        this.effect(() => {
-          el.setAttribute(attr, this.evaluateExpression(expression));
-        });
-      });
-    });
-  }
-
-  initEvents() {
-    const eventTypes = [
-      "click",
-      "input",
-      "change",
-      "mouseover",
-      "mousemove",
-      "mouseout",
-      "keydown",
-      "keyup",
-      "mousedown",
-      "mouseup",
-      "dblclick",
-      "focus",
-      "blur",
-      "contextmenu",
-      "drag",
-      "drop",
-      "scroll",
-      "resize",
-      "touchstart",
-      "touchmove",
-      "touchend",
-      "paste",
-      "copy",
-      "cut",
-      "error",
-      "load",
-      "submit",
-      "animationstart",
-      "animationend",
-      "animationiteration",
-      "transitionend",
-      "hashchange",
-      "beforeunload",
-      "fullscreenchange",
-      "message",
-      "canplay",
-      "canplaythrough",
-      "durationchange",
-      "emptied",
-      "ended",
-      "invalid",
-      "progress",
-      "ratechange",
-      "waiting",
-      "volumechange",
-      "wheel",
-      "focusin",
-      "focusout",
-      "pointerenter",
-      "pointerleave",
-      "touchcancel",
-    ];
-
-    eventTypes.forEach((eventType) => {
-      document.querySelectorAll(`[\\@${eventType}]`).forEach((el) => {
-        if (!(el instanceof HTMLElement)) return;
-
-        const handlerExpression = el.getAttribute(`@${eventType}`);
-        if (handlerExpression) {
-          el.addEventListener(eventType, (event) => {
-            try {
-              let cleanedExpression = handlerExpression.trim();
-
-              // If the expression is a function reference, invoke it
-              if (
-                cleanedExpression in window.useSignal &&
-                typeof window.useSignal[cleanedExpression] === "function"
-              ) {
-                window.useSignal[cleanedExpression](event);
-              } else {
-                // If it's not a direct function reference, treat it as inline JS
-                const func = new Function(
-                  "event, $",
-                  `with($) { ${cleanedExpression} }`
-                );
-                func(event, window.useSignal);
-              }
-            } catch (error) {
-              console.error(
-                `Error executing handler '${handlerExpression}' for event '${eventType}':`,
-                error
-              );
-            }
-          });
-        }
-      });
-    });
-  }
-
-  initDataBinding() {
-    this.compileTextNodes(document.body);
-  }
-
-  compileTextNodes(el) {
-    const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
-    let node;
-    const nodesToReplace = [];
-
-    while ((node = walker.nextNode())) {
-      if (node.textContent.includes("{") && node.textContent.includes("}")) {
-        nodesToReplace.push(node);
-      }
-    }
-
-    nodesToReplace.forEach((node) => {
-      const parts = node.textContent.split(/(\{.*?\})/);
-      const fragment = document.createDocumentFragment();
-
-      parts.forEach((part) => {
-        if (part.startsWith("{") && part.endsWith("}")) {
-          const textNode = document.createTextNode("");
-          const expression = part.slice(2, -2).trim();
-          this.effect(() => {
-            textNode.textContent = this.evaluateExpression(expression);
-          });
-          fragment.appendChild(textNode);
-        } else {
-          fragment.appendChild(document.createTextNode(part));
-        }
-      });
-
-      node.parentNode.replaceChild(fragment, node);
-    });
-  }
-
-  interpolateTextNodes(el, context) {
-    const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
-    let node;
-    const nodesToReplace = [];
-
-    while ((node = walker.nextNode())) {
-      if (node.textContent.includes("{") && node.textContent.includes("}")) {
-        nodesToReplace.push(node);
-      }
-    }
-
-    nodesToReplace.forEach((node) => {
-      const parts = node.textContent.split(/(\{.*?\})/);
-      const fragment = document.createDocumentFragment();
-
-      parts.forEach((part) => {
-        if (part.startsWith("{") && part.endsWith("}")) {
-          const textNode = document.createTextNode("");
-          const expression = part.slice(2, -2).trim();
-          this.effect(() => {
-            textNode.textContent = this.evaluateExpression(expression, context);
-          });
-          fragment.appendChild(textNode);
-        } else {
-          fragment.appendChild(document.createTextNode(part));
-        }
-      });
-
-      node.parentNode.replaceChild(fragment, node);
-    });
-  }
-
-  evaluateExpression(expression, context = {}) {
-    try {
-      const func = new Function(
-        "useSignal",
-        "with(useSignal) { return " + expression + " }"
-      );
-      return func({ ...window.useSignal, ...context });
-    } catch (error) {
-      console.error(`Error evaluating expression: ${expression}`, error);
-      return "";
-    }
-  }
-
-  setExpressionValue(expression, value) {
-    try {
-      const func = new Function(
-        "useSignal",
-        "value",
-        `with(useSignal) { ${expression} = value }`
-      );
-      func(window.useSignal, value);
-    } catch (error) {
-      console.error(`Error setting value for expression: ${expression}`, error);
-    }
-  }
-
-  interpolateElement(el, context) {
-    this.interpolateAttributes(el, context);
-    this.interpolateTextNodes(el, context);
-    Array.from(el.children).forEach((child) =>
-      this.interpolateElement(child, context)
-    );
-  }
-
-  interpolateAttributes(el, context) {
-    Array.from(el.attributes).forEach((attr) => {
-      if (attr.value.includes("{") && attr.value.includes("}")) {
-        this.effect(() => {
-          attr.value = this.interpolate(attr.value, context);
-        });
-      }
-    });
-  }
-
-  interpolateTextNodes(el, context) {
-    const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
-    let node;
-    const nodesToReplace = [];
-
-    while ((node = walker.nextNode())) {
-      if (node.textContent.includes("{") && node.textContent.includes("}")) {
-        nodesToReplace.push(node);
-      }
-    }
-
-    nodesToReplace.forEach((node) => {
-      const fragment = document.createDocumentFragment();
-      const parts = node.textContent.split(/(\{.*?\})/);
-
-      parts.forEach((part) => {
-        if (part.startsWith("{") && part.endsWith("}")) {
-          const span = document.createElement("span");
-          const expression = part.slice(2, -2).trim();
-          this.effect(() => {
-            span.textContent = this.evaluateExpression(expression, context);
-          });
-          fragment.appendChild(span);
-        } else {
-          fragment.appendChild(document.createTextNode(part));
-        }
-      });
-
-      node.parentNode.replaceChild(fragment, node);
-    });
-  }
-
-  interpolate(template, context) {
-    return template.replace(/\{\{(.*?)\}\}/g, (match, expression) => {
-      return this.evaluateExpression(expression, context);
-    });
-  }
-
-  static init() {
-    const deshi = new olova();
-    window.$refs = deshi.$refs;
-    window.$ = (selector) => deshi.$(selector);
-    // Create the useSignal function
-    const useSignalFunction = (obj = {}) => {
-      Object.assign(window.useSignal, obj);
-    };
-    // Create the useSignal object with the function
-    window.useSignal = new Proxy(useSignalFunction, {
-      get(target, key) {
-        if (key === "call" || key === "apply") {
-          return Reflect.get(target, key);
-        }
-        deshi.track(key);
-        return Reflect.get(target, key);
-      },
-      set(target, key, value) {
-        if (Reflect.get(target, key) !== value) {
-          Reflect.set(target, key, value);
-          deshi.notify(key);
-          deshi.runEffects();
-        }
-        return true;
-      },
-    });
-
-    document.addEventListener("DOMContentLoaded", () => {
-      deshi.renderTemplate();
-    });
-
-    window.addEventListener("beforeunload", () => {
-      deshi.cleanup();
-    });
-
-    window.useEffect = (callback) => {
-      deshi.useEffect(callback);
-    };
-    window.component = (name, componentFunction) => {
-      deshi.registerComponent(name, componentFunction);
-    };
-
-    window.plugin = (name, handler) => deshi.registerPlugin(name, handler);
-
-    return deshi;
-  }
-
-  renderTemplate() {
-    const root = document.getElementById("root");
-    const template = document.querySelector("template");
-    if (root && template) {
-      let content = template.innerHTML;
-      content = content.replace(/<([a-z-]+)><\/\1>/g, "");
-      root.innerHTML = content;
-      template.remove();
-      this.initReactiveSystem();
-      this.runEffects();
-    } else {
-      console.error("Root element or app template not found");
-    }
-  }
-}
-
-olova.activeEffect = null;
-
-export default olova;