olova 1.0.1 → 1.0.3

package/dist/olova.js

@@ -1,1000 +1 @@
-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;
+let createApp=({data:e,computed:t,methods:r,watch:o,mounted:n,beforeMount:a,beforeUpdate:l,template:c,plugins:i=[],components:s={}})=>{let u,d={},f={},m={},h={},p={},E=new Map,y=new Map,b=(e,t)=>{y.set(e,t)},g=(e,t)=>{p[e]=t},A=e=>new Proxy(e,{get:(e,t)=>"object"==typeof e[t]&&null!==e[t]?A(e[t]):e[t],set:(e,t,r)=>(e[t]!==r&&(e[t]=r,N(t)),!0)});Error;class $ extends Error{constructor(e){super(e),this.name="StateError"}}let w=(e,t,r=Error)=>function(...o){try{return e.apply(this,o)}catch(e){throw new r(`${t}: ${e.message}`)}};a&&w(a,"Error in beforeMount hook",$).call(M);let v=new Set,T=e=>{d[e]&&(v.add(e),requestAnimationFrame((()=>{v.forEach((e=>{d[e].forEach(w((t=>{t.node?t.node.textContent=t.originalText.replace(/\{(.*?)\}/g,((e,t)=>Function("state",`with(state) { return ${t} }`)(M))):t.element&&t.attrName?(t.element.setAttribute(t.attrName,M[e]),t.element.removeAttribute(`:${t.attrName}`)):t.update&&t.update()}),"Error updating bindings"))})),v.clear()})))},N=e=>{l&&w(l,"Error in beforeUpdate hook").call(M,e),T(e),x(),_(e),m.__updated__&&m.__updated__.forEach((e=>e.callback.call(M)))},x=()=>{Object.keys(f).forEach((e=>delete f[e]))},_=e=>{m[e]&&m[e].forEach((t=>{t.debounce?(clearTimeout(t.timeout),t.timeout=setTimeout((()=>t.callback.call(M,M[e])),t.debounce)):t.throttle?(!t.lastCalled||Date.now()-t.lastCalled>t.throttle)&&(t.callback.call(M,M[e]),t.lastCalled=Date.now()):t.callback.call(M,M[e])}))};o&&Object.keys(o).forEach((e=>{"function"==typeof o[e]?m[e]=[{callback:o[e]}]:"object"==typeof o[e]?m[e]=[{...o[e]}]:m[e]=Array.isArray(o[e])?o[e].map((e=>({callback:e}))):[{callback:o[e]}]}));let M=A({...e,$refs:new Proxy(h,{get:(e,t)=>e[t],set(){throw Error("$refs is read-only")}})}),L={},C={};t&&Object.keys(t).forEach((e=>{let r=t[e];L[e]=[],Object.defineProperty(M,e,{get:()=>"function"==typeof r&&"AsyncFunction"===r.constructor.name?(C[e]||(f[e]=new Proxy(M,{get:(t,r)=>(L[e].includes(r)||L[e].push(r),t[r])}),C[e]=r.call(M).then((t=>(f[e]=t,delete C[e],T(e),t))).catch((t=>{console.error(`Error in async computed property "${e}":`,t)}))),C[e]):(f.hasOwnProperty(e)||(f[e]=new Proxy(M,{get:(t,r)=>(L[e].includes(r)||L[e].push(r),t[r])}),f[e]=r.call(M)),f[e]),enumerable:!0})}));let O=()=>{let e=document.createElement("div");e.innerHTML=c.trim(),u.appendChild(e);let t=e=>{e.nodeType===Node.ELEMENT_NODE&&Array.from((e=(e=>{if(e.nodeType===Node.ELEMENT_NODE){let t=e.tagName.toLowerCase();if(y.has(t)){let r=y.get(t),o=Array.from(e.attributes).reduce(((e,t)=>(e[t.name]=t.value,e)),{}),n=r(o),a=document.createElement("div");a.innerHTML=n;let l=a.firstElementChild;return e.parentNode.replaceChild(l,e),l}}return e})(e)).childNodes).forEach(t)};Array.from(u.childNodes).forEach(t),u.querySelectorAll("*").forEach((e=>{if(e instanceof HTMLElement){(e=>{Array.from(e.attributes).forEach((t=>{let r=t.name.startsWith("$")?t.name.slice(1):null;if(r&&p[r]){let o=t.value;p[r](e,o,M),e.removeAttribute(t.name)}}))})(e),[...e.childNodes].filter((e=>e.nodeType===Node.TEXT_NODE&&/\{.*?\}/.test(e.textContent||""))).forEach((e=>{let t=e.textContent||"",r=t.match(/\{(.*?)\}/g);r&&r.forEach((r=>{let o=r.replace(/\{|\}/g,"").trim();d[o]||(d[o]=[]),d[o].push({node:e,originalText:t})}))})),Array.from(e.attributes).forEach((t=>{if(t.name.startsWith("$")){let r=t.value.trim(),o=t.name.slice(1);d[r]||(d[r]=[]),d[r].push({element:e,attrName:o})}}))}}))};Object.entries(s).forEach((([e,t])=>{b(e,t)}));let S={beforeCreate:[],created:[],beforeMount:[],mounted:[],beforeUpdate:[],updated:[],beforeUnmount:[],unmounted:[]},k=(e,t)=>{S[e]&&S[e].push(t)},j=e=>{S[e]&&S[e].forEach((e=>e.call(M)))};return window.addEventListener("error",(e=>{console.error("Global error:",e)})),{mount:w((function(e){if(!(u=document.querySelector(e)))throw Error(`Element with selector "${e}" not found.`);j("beforeCreate"),j("created"),a&&a.call(M),j("beforeMount"),i.forEach((e=>{"function"==typeof e&&e({createPlugin:g,state:M,bindings:d})})),O(),u.querySelectorAll("*").forEach((e=>{Array.from(e.attributes).forEach((t=>{if(t.name.startsWith("@")){let o=t.name.slice(1),n=t.value.trim();e.addEventListener(o,(e=>{if(r&&r[n])r[n].call(M,e);else try{Function("state","event",`with(state) { ${n} }`).call(M,M,e),N()}catch(e){console.error(`Error executing inline event expression: ${n}`,e)}}))}}))})),u.querySelectorAll("[\\$style]").forEach((e=>{if(!(e instanceof HTMLElement))return;let t=e.getAttribute("$style");t&&((()=>{try{let r=Function("state",`with(state) { return ${t} }`)(M);"object"==typeof r&&null!==r?Object.entries(r).forEach((([t,r])=>{e.style[t]=r})):"string"==typeof r&&e.setAttribute("style",r)}catch(e){console.error("Error applying style directive:",e)}})(),T(t))})),u.querySelectorAll("[\\$if]").forEach((e=>{if(!(e instanceof HTMLElement))return;let t=e.getAttribute("$if");if(!t)return;let r=e.parentNode,o=document.createComment("$if placeholder");r?.insertBefore(o,e);let n=e.nextElementSibling;for(;n&&!n.hasAttribute("$else");)n=n.nextElementSibling;(()=>{try{Function("state",`with(state) { return ${t} }`)(M)?(e.style.display="",e.parentNode!==r&&r?.insertBefore(e,o.nextSibling),n&&(n.style.display="none")):(e.style.display="none",n&&(n.style.display=""))}catch(e){console.error("Error evaluating :if directive:",e)}})(),T(t)})),u.querySelectorAll("[\\$for]").forEach((e=>{if(!(e instanceof HTMLElement))return;let t=e.getAttribute("$for");if(!t)return;let r=t.match(/^\s*(\w+)\s+(?:of|in)\s+(\w+)\s*$/);if(!r)return void console.error("Invalid :for expression:",t);let[,o,n]=r,a=e.parentNode,l=document.createComment("$for placeholder");a?.insertBefore(l,e),e.removeAttribute("$for");let c=e.cloneNode(!0);a?.removeChild(e);let i=()=>{let e=document.createDocumentFragment(),t=M[n];for((Array.isArray(t)&&t.forEach(((t,r)=>{let n=c.cloneNode(!0),a=new Proxy({[o]:t,index:r},{get:(e,t)=>t in e?e[t]:M[t]}),l=e=>{if(e.nodeType===Node.TEXT_NODE){let t=e.textContent;t.includes("{")&&t.includes("}")&&(e.textContent=t.replace(/\{(.*?)\}/g,((e,t)=>Function("state",`with(state) { return ${t} }`)(a))))}else e.nodeType===Node.ELEMENT_NODE&&Array.from(e.childNodes).forEach(l)};l(n),n.querySelectorAll("*").forEach((e=>{Array.from(e.attributes).forEach((t=>{if(t.value.includes("{")&&t.value.includes("}")){let r=t.value.replace(/\{(.*?)\}/g,((e,t)=>Function("state",`with(state) { return ${t} }`)(a)));e.setAttribute(t.name,r)}}))})),e.appendChild(n)})));l.nextSibling;)a?.removeChild(l.nextSibling);a?.insertBefore(e,l.nextSibling)};i(),d[n]||(d[n]=[]),d[n].push({updateFor:i})})),u.querySelectorAll("[\\$ref]").forEach((e=>{if(!(e instanceof HTMLElement))return;let t=e.getAttribute("$ref");t&&(h[t]=e,e.removeAttribute("$ref"))})),u.querySelectorAll("[\\$model]").forEach((e=>{if(!(e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement||e instanceof HTMLSelectElement))return;let t=e.getAttribute("$model");t&&(e.value=M[t]||"",e.addEventListener("input",(e=>{M[t]=e.target.value})),d[t]||(d[t]=[]),d[t].push({element:e,updateModel(){e.value=M[t]||""}}),e.removeAttribute("$model"))})),u.querySelectorAll("[\\$class]").forEach((e=>{if(!(e instanceof HTMLElement))return;let t=e.getAttribute("$class");if(!t)return;let r=()=>{try{let r=Function("state",`with(state) { return ${t} }`)(M);"object"==typeof r&&null!==r?Object.entries(r).forEach((([t,r])=>{r?e.classList.add(t):e.classList.remove(t)})):"string"==typeof r&&(e.className=r)}catch(e){console.error("Error applying class directive:",e)}e.removeAttribute("$class")};r(),d[t]||(d[t]=[]),d[t].push({updateClass:r})})),(e=>{Object.keys(L).forEach((t=>{L[t].includes(e)&&(delete f[t],T(t))}))})(),u.querySelectorAll("[\\$show]").forEach((e=>{e instanceof HTMLElement&&(e=>{if(!(e instanceof HTMLElement))return;let t=e.getAttribute("$show");if(!t)return;let r=()=>{try{let r=Function("state",`with(state) { return ${t} }`)(M);e.style.display=r?"":"none"}catch(e){console.error("Error evaluating $show directive:",e)}};r(),d[t]||(d[t]=[]),d[t].push({element:e,update:r})})(e)})),n&&n.call(M),j("mounted"),Object.keys(M).forEach((e=>T(e)))}),"Error mounting application"),onUpdated:e=>{if("function"==typeof e){let t=w(e,"Error in onUpdated callback");m.__updated__||(m.__updated__=[]),m.__updated__.push({callback:t})}},createPlugin:g,emit:(e,t)=>{E.has(e)||E.set(e,[]),E.get(e).forEach((e=>e(t)))},on:(e,t)=>(E.has(e)||E.set(e,[]),E.get(e).push(t),()=>{let r=E.get(e),o=r.indexOf(t);-1!==o&&r.splice(o,1)}),addLifecycleHook:k,applyMixin:e=>{e.data&&Object.assign(M,e.data()),e.methods&&Object.assign(r,e.methods),e.computed&&Object.assign(t,e.computed),e.watch&&Object.keys(e.watch).forEach((t=>{o[t]||(o[t]=[]),o[t].push(e.watch[t])})),e.mounted&&k("mounted",e.mounted)},component:b}};export{createApp};

package/package.json

@@ -1,14 +1,8 @@
 {
   "name": "olova",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "A lightweight JavaScript framework for building reactive applications.",
-  "main": "index.js",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview",
-    "test": "jest"
-  },
+  "main": "olova.js",
   "keywords": [
     "javascript",
     "framework",
@@ -17,9 +11,5 @@
   ],
   "author": "Nazmul Hossain",
   "license": "MIT",
-  "dependencies": {},
-  "devDependencies": {
-    "vite": "^4.0.0",
-    "jest": "^30.1.0"
-  }
+  "dependencies": {}
 }