olova 2.0.0 → 2.0.2

package/README.md

@@ -19,16 +19,18 @@ applications with ease.
 
 To get started with Olova, first install the core library via npm or yarn.
 
-````bash
+```bash
 npm install olova
 ```
+
 or
+
 ```bash
 yarn add olova
 ```
 
-
 ## Example Usage
+
 Here is an example of a basic component in Olova:
 
 ```js
@@ -49,5 +51,4 @@ export default function Home() {
     </>
   );
 }
-
 ```

package/dist/olova.js

@@ -1,1139 +1,226 @@
-/**
- * @license
- * Olova Framework v2.0.0
- * (c) 2025 Olova
- * This source code is licensed under the MIT license
- *
- * Author: Nazmul Hossain
- * Made in Bangladesh
- */
-
-/** @jsx Olova.createElement */
-
-const Olova = {};
-let currentComponent = null,
-  currentHook = 0;
-const states = new WeakMap(),
-  effects = new WeakMap(),
-  memos = new WeakMap(),
-  refs = new WeakMap();
-let isBatchingUpdates = !1;
-const effectComponentIds = new Set(),
-  customHookComponentIds = new Set();
-Olova.createHook = (e) => {
-  if ("function" != typeof e)
-    throw new Error("createHook: Hook implementation must be a function");
-  return (...t) => {
-    if (!currentComponent)
-      throw new Error(
-        "Custom hooks can only be called inside component render"
-      );
-    const o = currentHook++,
-      r = currentComponent;
-    customHooks.has(r) ||
-      (customHooks.set(r, new Map()), customHookComponentIds.add(r));
-    const n = customHooks.get(r);
-    n.has(o) || n.set(o, { state: void 0, cleanup: void 0 });
-    const a = {
-      useState: Olova.State,
-      useEffect: Olova.Effect,
-      useMemo: Olova.Memo,
-      useRef: Olova.Ref,
-      getHookState: () => n.get(o).state,
-      setHookState: (e) => {
-        n.get(o).state = e;
-      },
-      setCleanup: (e) => {
-        "function" == typeof e && (n.get(o).cleanup = e);
-      },
-    };
-    return e(a, ...t);
-  };
-};
-const customHooks = new WeakMap();
-Olova.State = (e) => {
-  const t = currentComponent,
-    o = currentHook++;
-  states.has(t) || states.set(t, []);
-  const r = states.get(t);
-  void 0 === r[o] && (r[o] = e);
-  return [
-    r[o],
-    (e) => {
-      const t = "function" == typeof e ? e(r[o]) : e;
-      queueUpdate(() => {
-        (r[o] = t), rerender();
-      });
-    },
-  ];
-};
-const flattenChildren = (e) =>
-  e.reduce(
-    (e, t) =>
-      null == t || "boolean" == typeof t
-        ? e
-        : Array.isArray(t)
-        ? e.concat(flattenChildren(t))
-        : e.concat("object" == typeof t ? t : createTextElement(t)),
-    []
-  );
-Olova.createElement = (e, t, ...o) =>
-  e === Olova.Fragment
-    ? { type: "FRAGMENT", props: { children: flattenChildren(o) } }
-    : { type: e, props: { ...t, children: flattenChildren(o) } };
-const createTextElement = (e) => ({
-    type: "TEXT_ELEMENT",
-    props: { nodeValue: e, children: [] },
-  }),
-  createDom = (e) => {
-    const t =
-        "TEXT_ELEMENT" === e.type
-          ? document.createTextNode("")
-          : document.createElement(e.type),
-      o = sanitizeProps(e.props);
-    return updateDom(t, {}, o), t;
-  },
-  updateDom = (e, t, o) => {
-    t.style &&
-      Object.keys(t.style).forEach((r) => {
-        (o.style && t.style[r] === o.style[r]) || (e.style[r] = "");
-      });
-    const r = new Map();
-    Object.keys(t || {}).forEach((e) => {
-      "children" === e || e in o || r.set(e, null);
-    }),
-      Object.keys(o || {}).forEach((e) => {
-        "children" !== e && t[e] !== o[e] && r.set(e, o[e]);
-      }),
-      r.forEach((o, r) => {
-        if (r.startsWith("on")) {
-          const n = r.slice(2).toLowerCase();
-          t[r] && e.removeEventListener(n, t[r]), o && e.addEventListener(n, o);
-        } else
-          "style" === r && "object" == typeof o
-            ? Object.assign(e.style, o)
-            : "className" === r
-            ? e.setAttribute("class", o || "")
-            : "boolean" == typeof o
-            ? o
-              ? e.setAttribute(r, "")
-              : e.removeAttribute(r)
-            : (e[r] = o ?? "");
-      });
-  };
-let rootElement = null,
-  currentRoot = null;
-Olova.render = (e, t) => {
-  (rootElement = t),
-    (currentRoot = { dom: t, props: { children: [e] } }),
-    rerender();
-};
-const rerender = () => {
-    if (rootElement && currentRoot) {
-      for (
-        effectComponentIds.forEach((e) => {
-          const t = effects.get(e);
-          t &&
-            t.forEach((e) => {
-              e && e.cleanup && e.cleanup();
-            });
-        }),
-          customHookComponentIds.forEach((e) => {
-            const t = customHooks.get(e);
-            t &&
-              t.forEach((e) => {
-                e.cleanup && e.cleanup();
-              });
-          });
-        rootElement.firstChild;
-
-      )
-        rootElement.removeChild(rootElement.firstChild);
-      renderElement(currentRoot.props.children[0], rootElement);
-    }
-  },
-  cleanupEffects = () => {
-    effects.forEach((e, t) => {
-      e.forEach((e) => {
-        e && e.cleanup && e.cleanup();
-      });
-    });
-  },
-  cleanupCustomHooks = () => {
-    customHooks.forEach((e, t) => {
-      e.forEach((e) => {
-        e.cleanup && e.cleanup();
-      });
-    });
-  },
-  contexts = new Map();
-let contextIndex = 0;
-(Olova.createContext = (e) => {
-  const t = contextIndex++;
-  return (
-    contexts.set(t, { defaultValue: e, value: e }),
-    {
-      Provider: ({ value: e, children: o }) => (
-        (contexts.get(t).value = e), o[0]
-      ),
-      Consumer: ({ children: e }) => e[0](contexts.get(t).value),
-      _contextId: t,
-    }
-  );
-}),
-  (Olova.Context = (e) => {
-    if (!e || "number" != typeof e._contextId)
-      throw new Error(
-        "Context: Invalid context object. Make sure you're passing a context created by createContext()"
-      );
-    return currentHook++, contexts.get(e._contextId).value;
-  });
-const renderElement = (e, t) => {
-  if (!t || !(t instanceof Element || t instanceof DocumentFragment))
-    throw new Error("Invalid container element provided to render");
-  if (!e && 0 !== e && "" !== e) return;
-  if ("FRAGMENT" === e.type) {
-    const o = document.createDocumentFragment();
+let currentObserver = null;
+function diffProps(e = {}, t = {}, r) {
+  for (const [n, o] of Object.entries(e))
+    n in t ||
+      (n.startsWith("on")
+        ? r.removeEventListener(n.slice(2).toLowerCase(), o)
+        : "style" === n
+        ? (r.style.cssText = "")
+        : r.removeAttribute(n));
+  for (const [n, o] of Object.entries(t))
+    if (null != o && e[n] !== o)
+      if (n.startsWith("on")) {
+        const t = n.slice(2).toLowerCase();
+        e[n] && r.removeEventListener(t, e[n]), r.addEventListener(t, o);
+      } else if ("ref" === n)
+        o && "object" == typeof o && "current" in o
+          ? (o.current = r)
+          : "function" == typeof o && o(r);
+      else if ("style" === n) {
+        const e = r.style;
+        "object" == typeof o ? Object.assign(e, o) : (e.cssText = o);
+      } else r.setAttribute(n, o);
+}
+function diffChildren(e, t, r) {
+  const n = Array.isArray(e) ? e.flat() : [e],
+    o = Array.isArray(t) ? t.flat() : [t],
+    s = Math.max(n.length, o.length);
+  for (let e = 0; e < s; e++) {
+    const t = n[e],
+      s = o[e];
+    if (!t || s)
+      if (t || !s) {
+        if (t instanceof Node && s instanceof Node)
+          t.nodeType !== s.nodeType || t.nodeName !== s.nodeName
+            ? r.replaceChild(s, t)
+            : (diffProps(t.attributes, s.attributes, t),
+              diffChildren(
+                Array.from(t.childNodes),
+                Array.from(s.childNodes),
+                t
+              ));
+        else if (t !== s) {
+          const t = r.childNodes[e];
+          t && (t.textContent = String(s));
+        }
+      } else {
+        const e = s instanceof Node ? s : document.createTextNode(String(s));
+        r.appendChild(e);
+      }
+    else t instanceof Node && r.removeChild(t);
+  }
+}
+class Signal {
+  constructor(e) {
+    (this._value = e), (this.observers = new Map());
+  }
+  get value() {
     return (
-      e.props.children.forEach((e) => renderElement(e, o)),
-      void t.appendChild(o)
+      currentObserver &&
+        (this.observers.has("_root") || this.observers.set("_root", new Set()),
+        this.observers.get("_root").add(currentObserver)),
+      this._value
     );
   }
-  if ("object" == typeof e.type && e.type.Consumer) {
-    const o = contexts.get(e.type._contextId).value,
-      r = e.props.children[0](o);
-    return void renderElement(r, t);
-  }
-  if ("object" == typeof e.type && e.type.Provider) {
-    const o = e.props.children[0];
-    return void renderElement(o, t);
+  set value(e) {
+    if (this._value === e) return;
+    const t = this._value;
+    if (((this._value = e), this.observers.has("_root")))
+      for (const e of this.observers.get("_root")) e();
+    if ("object" == typeof t && "object" == typeof e) {
+      const r = new Set([...Object.keys(t), ...Object.keys(e)]);
+      for (const n of r)
+        if (t[n] !== e[n] && this.observers.has(n))
+          for (const e of this.observers.get(n)) e();
+    }
   }
-  if ("function" == typeof e.type) {
-    (currentComponent = e.type), (currentHook = 0);
-    const o = e.type(e.props);
-    return void renderElement(o, t);
+  observe(e, t) {
+    this.observers.has(e) || this.observers.set(e, new Set()),
+      this.observers.get(e).add(t);
   }
-  const o = createDom(e);
-  e.props.children.forEach((e) => renderElement(e, o)), t.appendChild(o);
-};
-(Olova.Effect = (e, t) => {
-  if ("function" != typeof e)
-    throw new Error("Effect: First argument must be a function");
-  if (void 0 !== t && !Array.isArray(t))
-    throw new Error("Effect: Second argument must be an array or undefined");
-  const o = currentComponent,
-    r = currentHook++;
-  effects.has(o) || (effects.set(o, []), effectComponentIds.add(o));
-  const n = effects.get(o),
-    a = n[r];
-  if (!a || !t || t.some((e, t) => !Object.is(e, a.deps[t]))) {
-    a && a.cleanup && a.cleanup();
-    const o = e();
-    n[r] = { deps: t, cleanup: "function" == typeof o ? o : void 0 };
+  unobserve(e, t) {
+    this.observers.has(e) && this.observers.get(e).delete(t);
   }
-}),
-  (Olova.Reducer = (e, t, o) => {
-    const r = currentComponent,
-      n = currentHook++;
-    states.has(r) || states.set(r, []);
-    const a = states.get(r);
-    void 0 === a[n] && (a[n] = o ? o(t) : t);
-    return [
-      a[n],
-      (t) => {
-        (a[n] = e(a[n], t)), rerender();
+}
+function State(e) {
+  const t = new Signal(e),
+    r = () => t.value;
+  return (
+    (r.toString = () => t.value),
+    (r.observe = (e, r) => t.observe(e, r)),
+    (r.unobserve = (e, r) => t.unobserve(e, r)),
+    [
+      r,
+      (e) => {
+        t.value = "function" == typeof e ? e(t.value) : e;
       },
-    ];
-  }),
-  (Olova.Callback = (e, t) => Olova.Memo(() => e, t)),
-  (Olova.Memo = (e, t) => {
-    const o = currentComponent,
-      r = currentHook++;
-    memos.has(o) || memos.set(o, []);
-    const n = memos.get(o),
-      a = n[r];
-    if (
-      !a ||
-      !t ||
-      t.length !== a.deps.length ||
-      t.some(
-        (e, t) =>
-          !Object.is(e, a.deps[t]) &&
-          ("object" != typeof e ||
-            null === e ||
-            JSON.stringify(e) !== JSON.stringify(a.deps[t]))
-      )
-    ) {
-      const o = e();
-      return (n[r] = { value: o, deps: t }), o;
-    }
-    return a.value;
-  }),
-  (Olova.Ref = (e) => {
-    const t = currentComponent,
-      o = currentHook++;
-    refs.has(t) || refs.set(t, []);
-    const r = refs.get(t);
-    return void 0 === r[o] && (r[o] = { current: e }), r[o];
-  }),
-  (Olova.LayoutEffect = (e, t) => {
-    Olova.Effect(e, t);
-  }),
-  (Olova.ImperativeHandle = (e, t, o) => {
-    Olova.LayoutEffect(() => {
-      e && (e.current = t());
-    }, o);
-  }),
-  (Olova.Fragment = Symbol("Fragment"));
-let nextUnitOfWork = null,
-  wipRoot = null;
-function createFiber(e, t, o = null) {
-  return {
-    type: e,
-    props: t,
-    key: o,
-    dom: null,
-    parent: null,
-    child: null,
-    sibling: null,
-    alternate: null,
-    effectTag: null,
-    lastProps: null,
-    shouldUpdate: !0,
-    dependencies: new Set(),
-    memoizedState: null,
-  };
+    ]
+  );
 }
-const schedulerPriorities = {
-    ImmediatePriority: 1,
-    UserBlockingPriority: 2,
-    NormalPriority: 3,
-    LowPriority: 4,
-    IdlePriority: 5,
-  },
-  objectPool = {
-    fibers: [],
-    effects: [],
-    acquireFiber() {
-      return this.fibers.pop() || createFiber();
-    },
-    releaseFiber(e) {
-      Object.keys(e).forEach((t) => {
-        e[t] = null;
-      }),
-        this.fibers.push(e);
-    },
-  },
-  workLoop = (e) => {
-    let t = !1;
-    for (; nextUnitOfWork && !t; ) {
-      const o = nextUnitOfWork;
-      if (
-        (o.priorityLevel || schedulerPriorities.NormalPriority) >
-          schedulerPriorities.ImmediatePriority &&
-        e.timeRemaining() < 500
-      ) {
-        t = !0;
-        break;
-      }
-      nextUnitOfWork = performUnitOfWork(o);
-    }
-    !nextUnitOfWork && wipRoot && commitRoot(), requestIdleCallback(workLoop);
+function Effect(e) {
+  const t = () => {
+    (currentObserver = t), e(), (currentObserver = null);
   };
-function performUnitOfWork(e) {
-  if (
-    ("function" == typeof e.type
-      ? updateFunctionComponent(e)
-      : updateHostComponent(e),
-    e.child)
-  )
-    return e.child;
-  let t = e;
-  for (; t; ) {
-    if (t.sibling) return t.sibling;
-    t = t.parent;
-  }
+  t();
 }
-function updateFunctionComponent(e) {
-  (currentComponent = e), (currentHook = 0), (e.hooks = []);
-  try {
-    const t = [e.type(e.props)];
-    reconcileChildren(e, t);
-  } catch (t) {
-    handleWorkInProgressError(e, t);
-  }
+function Memo(e) {
+  const [t, r] = State(e());
+  return Effect(() => r(e())), t;
 }
-function updateHostComponent(e) {
-  e.dom || (e.dom = createDom(e)), reconcileChildren(e, e.props.children);
-}
-function reconcileChildren(e, t, o) {
-  let r = null,
-    n = null;
-  const a = new Map();
-  let s = t;
-  for (; s; ) {
-    const e = s.key || s.index;
-    a.set(e, s), (s = s.sibling);
-  }
-  for (let t = 0; t < o.length; t++) {
-    const s = o[t],
-      c = s.key || t,
-      l = a.get(c);
-    l && l.type === s.type
-      ? (n = {
-          ...l,
-          props: s.props,
-          alternate: l,
-          effectTag: "UPDATE",
-          shouldUpdate: !shallowEqual(l.props, s.props),
-        })
-      : ((n = createFiber(s.type, s.props, c)),
-        (n.effectTag = "PLACEMENT"),
-        (n.shouldUpdate = !0),
-        l && ((l.effectTag = "DELETION"), deletions.push(l))),
-      null === r ? (e.child = n) : (r.sibling = n),
-      (r = n),
-      a.delete(c);
-  }
-  a.forEach((e) => {
-    (e.effectTag = "DELETION"), deletions.push(e);
+function Ref(e) {
+  const [t, r] = State({
+    current: e,
+    toString() {
+      return this.current;
+    },
+    valueOf() {
+      return this.current;
+    },
   });
+  return {
+    get current() {
+      return t().current;
+    },
+    set current(e) {
+      r((t) => (t.current === e ? t : { ...t, current: e }));
+    },
+    toString() {
+      return this.current.toString();
+    },
+    valueOf() {
+      return this.current;
+    },
+  };
 }
-function shallowEqual(e, t) {
-  if (Object.is(e, t)) return !0;
-  if (!e || !t) return !1;
-  const o = Object.keys(e),
-    r = Object.keys(t);
-  if (o.length !== r.length) return !1;
-  for (let r = 0; r < o.length; r++) {
-    const n = o[r];
-    if ("children" !== n && !Object.is(e[n], t[n])) return !1;
-  }
-  return !0;
-}
-function handleWorkInProgressError(e, t) {
-  let o = null,
-    r = e;
-  for (; r; ) {
-    if (r.type?.prototype instanceof Olova.ErrorBoundary) {
-      o = r;
-      break;
+function h(e, t, ...r) {
+  if (e === Fragment || Array.isArray(e)) {
+    const n = document.createDocumentFragment(),
+      o = e === Fragment ? t?.children || r : e;
+    if (Array.isArray(o)) {
+      const e = document.createTextNode.bind(document);
+      o.forEach((t) => {
+        n.appendChild(t instanceof Node ? t : null != t ? e(String(t)) : null);
+      });
     }
-    r = r.parent;
-  }
-  if (!o) throw t;
-  {
-    const r = {
-      componentStack: getComponentStack(e),
-      error: t,
-      errorBoundary: o,
-    };
-    (o.updateQueue = o.updateQueue || []),
-      o.updateQueue.push({ action: "ERROR", error: r }),
-      scheduleWork(o, schedulerPriorities.ImmediatePriority);
-  }
+    return n;
+  }
+  if (!e) return null;
+  const n = "function" == typeof e ? e(t) : document.createElement(e);
+  if (("string" == typeof e && n && t && diffProps({}, t, n), r.length)) {
+    const e = document.createDocumentFragment(),
+      t = (r) => {
+        if (null != r)
+          if ("function" == typeof r) {
+            const t = document.createTextNode("");
+            Effect(() => (t.textContent = r())), e.appendChild(t);
+          } else
+            r instanceof Node
+              ? e.appendChild(r)
+              : Array.isArray(r)
+              ? r.flat().forEach(t)
+              : e.appendChild(document.createTextNode(String(r)));
+      };
+    r.forEach(t), n.appendChild(e);
+  }
+  return n;
 }
-function commitRoot() {
-  deletions.forEach(commitWork),
-    commitWork(wipRoot.child),
-    (currentRoot = wipRoot),
-    (wipRoot = null);
-}
-const commitWork = (e) => {
-  if (e) {
-    if (e.shouldUpdate)
-      switch (e.effectTag) {
-        case "PLACEMENT":
-          if (e.dom) {
-            const t = getParentFiber(e);
-            t && t.dom.appendChild(e.dom);
-          }
-          break;
-        case "UPDATE":
-          e.dom && updateDom(e.dom, e.alternate.props, e.props);
-          break;
-        case "DELETION":
-          commitDeletion(e);
-      }
-    commitWork(e.child), commitWork(e.sibling);
-  }
-};
-function getParentFiber(e) {
-  let t = e.parent;
-  for (; t && !t.dom; ) t = t.parent;
-  return t;
-}
-(Olova.createStore = (e, t) => {
-  if ("function" != typeof e)
-    throw new Error("createStore: Reducer must be a function");
-  let o = t,
-    r = new Set();
-  const n = (t) => {
-    (o = e(o, t)), r.forEach((e) => e());
-  };
-  return (
-    n({ type: "@@INIT" }),
-    {
-      getState: () => o,
-      dispatch: n,
-      subscribe: (e) => (r.add(e), () => r.delete(e)),
-    }
-  );
-}),
-  (Olova.Provider = ({ store: e, children: t }) => {
-    if (
-      !e ||
-      "function" != typeof e.getState ||
-      "function" != typeof e.dispatch
-    )
-      throw new Error(
-        "Provider: Invalid store object. Make sure you're passing a store created by createStore()"
-      );
-    if (!t) throw new Error("Provider: Must include children elements");
-    const o = Olova.createContext(null),
-      r = () => o.Provider({ value: e, children: [t] });
-    return (r.Context = o), r();
-  }),
-  (Olova.Selector = (e) => {
+const Component = (e, t) => {
     if ("function" != typeof e)
-      throw new Error("Selector: Selector must be a function");
-    const t = Olova.Context(Olova.Provider.Context);
-    if (!t) throw new Error("Selector must be used within a Provider");
-    const [, o] = Olova.State({});
-    Olova.Effect(
-      () =>
-        t.subscribe(() => {
-          const n = e(t.getState());
-          r !== n && o({});
-        }),
-      [t, e]
-    );
-    const r = e(t.getState());
-    return r;
-  }),
-  (Olova.Dispatch = () => {
-    const e = Olova.Context(Olova.Provider.Context);
-    if (!e) throw new Error("Dispatch must be used within a Provider");
-    return e.dispatch;
-  }),
-  (Olova.combineReducers =
-    (e) =>
-    (t = {}, o) => {
-      const r = {};
-      let n = !1;
+      throw new Error("Invalid Component: must be a function");
+    return e(t);
+  },
+  Fragment = (e) => e.children;
+window.Fragment = Fragment;
+const Olova = {
+    render(e, t) {
+      const r = "function" == typeof e ? e() : e;
       return (
-        Object.entries(e).forEach(([e, a]) => {
-          const s = t[e],
-            c = a(s, o);
-          (r[e] = c), (n = n || c !== s);
-        }),
-        n ? r : t
-      );
-    }),
-  (Olova.createAction = (e) => {
-    const t = (t) => ({ type: e, payload: t });
-    return (t.toString = () => e), t;
-  }),
-  (Olova.applyMiddleware =
-    (...e) =>
-    (t) =>
-    (o, r) => {
-      const n = t(o, r);
-      let a = n.dispatch;
-      const s = { getState: n.getState, dispatch: (e) => a(e) },
-        c = e.map((e) => e(s));
-      return (a = c.reduce((e, t) => t(e))(n.dispatch)), { ...n, dispatch: a };
-    }),
-  (Olova.Suspense = ({ fallback: e, children: t }) => {
-    const [o, r] = Olova.State(!1),
-      [n, a] = Olova.State(null);
-    try {
-      return Olova.createElement(
-        SuspenseProvider,
-        { value: { isPending: o, setPending: r, setError: a } },
-        t
+        t.firstChild ? diffChildren([t.firstChild], [r], t) : t.appendChild(r),
+        r
       );
-    } catch (t) {
-      if (t instanceof Promise) return t.then(() => r(!1)), r(!0), e;
-      throw t;
-    }
-  }),
-  (Olova.ErrorBoundary = class {
-    constructor(e) {
-      (this.state = { hasError: !1, error: null }),
-        (this.fallback = e.fallback);
-    }
-    static getDerivedStateFromError(e) {
-      return { hasError: !0, error: e };
-    }
-    componentDidCatch(e, t) {
-      console.error("Error caught by ErrorBoundary:", e, t),
-        this.props.onError && this.props.onError(e, t);
-    }
-    render() {
-      return this.state.hasError
-        ? "function" == typeof this.fallback
-          ? this.fallback(this.state.error)
-          : this.fallback
-        : this.props.children;
-    }
-  });
-const createVirtualDom = (e) => ({
-    type: e.type,
-    key: e.key || null,
-    ref: e.ref || null,
-    props: {
-      ...e.props,
-      children: Array.isArray(e.props.children)
-        ? e.props.children.map((e) =>
-            "object" == typeof e ? createVirtualDom(e) : e
-          )
-        : e.props.children,
     },
-    _owner: currentComponent,
-    _store: { validated: !1 },
-    _self: null,
-    _source:
-      "production" !== process.env.NODE_ENV
-        ? {
-            fileName: e._source?.fileName || "unknown",
-            lineNumber: e._source?.lineNumber || 0,
-          }
-        : null,
-  }),
-  reconcileChildrenArray = (e, t, o) => {
-    let r = t,
-      n = null,
-      a = null,
-      s = 0,
-      c = null;
-    const l = new Map();
-    let i = t;
-    for (; i; ) {
-      const e = i.key || s;
-      l.set(e, i), (i = i.sibling);
-    }
-    for (; r && s < o.length; s++) {
-      c = r.sibling;
-      const t = o[s],
-        l = t.key || s;
-      if (l !== (r.key || s)) {
-        r = c;
-        break;
-      }
-      (a = {
-        type: t.type,
-        key: l,
-        props: t.props,
-        dom: r.dom,
-        parent: e,
-        alternate: r,
-        effectTag: "UPDATE",
-        lanes: 0,
-        childLanes: 0,
-      }),
-        null === n ? (e.child = a) : (n.sibling = a),
-        (n = a),
-        (r = c);
-    }
-    for (; s < o.length; ) {
-      const t = o[s];
-      (a = {
-        type: t.type,
-        key: t.key || s,
-        props: t.props,
-        dom: null,
-        parent: e,
-        alternate: null,
-        effectTag: "PLACEMENT",
-        lanes: 0,
-        childLanes: 0,
-      }),
-        null === n ? (e.child = a) : (n.sibling = a),
-        (n = a),
-        s++;
-    }
-    for (; r; ) (r.effectTag = "DELETION"), deletions.push(r), (r = r.sibling);
-    return e.child;
-  },
-  memoizedDiff = (() => {
-    const e = new WeakMap();
-    return (t, o) => {
-      const r = `${t?.type}-${o?.type}`;
-      e.has(t) || e.set(t, new Map());
-      const n = e.get(t);
-      if (n.has(r)) return n.get(r);
-      const a = [];
-      if (t?.type !== o?.type)
-        return a.push({ type: "REPLACE", newNode: o }), n.set(r, a), a;
-      if ("object" != typeof o)
-        return t !== o && a.push({ type: "TEXT", content: o }), n.set(r, a), a;
-      const s = diffProps(t.props, o.props);
-      return (
-        s && a.push({ type: "PROPS", patches: s }),
-        o.props.skipChildrenDiff ||
-          diffChildren(t.props.children, o.props.children, a),
-        n.set(r, a),
-        a
-      );
-    };
-  })(),
-  diffProps = (e, t) => {
-    const o = {};
-    let r = !1;
-    for (const n in e) "children" === n || n in t || ((r = !0), (o[n] = null));
-    for (const n in t)
-      "children" !== n && e[n] !== t[n] && ((r = !0), (o[n] = t[n]));
-    return r ? o : null;
-  },
-  diffChildren = (e, t, o) => {
-    const r = Array.isArray(e) ? e : [e],
-      n = Array.isArray(t) ? t : [t],
-      a = new Map();
-    r.forEach((e, t) => {
-      const o = e?.key || `index:${t}`;
-      a.set(o, { child: e, index: t });
-    });
-    const s = [];
-    let c = 0;
-    n.forEach((e, t) => {
-      const o = e?.key || `index:${t}`,
-        r = a.get(o);
-      if (r) {
-        const t = r.child,
-          n = r.index;
-        n !== c && s.push({ type: "REORDER", from: n, to: c });
-        const l = memoizedDiff(t, e);
-        l.length > 0 && s.push({ type: "UPDATE", index: c, patches: l }),
-          a.delete(o);
-      } else s.push({ type: "INSERT", index: c, node: e });
-      c++;
-    }),
-      a.forEach(({ index: e }) => {
-        s.push({ type: "REMOVE", index: e });
-      }),
-      s.length > 0 && o.push({ type: "CHILDREN", patches: s });
-  },
-  applyPatches = (e, t) => {
-    t.forEach((t) => {
-      switch (t.type) {
-        case "REPLACE":
-          const o = createDom(t.newNode);
-          e.parentNode.replaceChild(o, e);
-          break;
-        case "TEXT":
-          e.textContent = t.content;
-          break;
-        case "PROPS":
-          updateDomProperties(e, t.patches);
-          break;
-        case "CHILDREN":
-          applyChildrenPatches(e, t.patches);
-      }
-    });
-  },
-  updateDomProperties = (e, t) => {
-    Object.entries(t).forEach(([t, o]) => {
-      if (t.startsWith("on")) {
-        const r = t.toLowerCase().substring(2);
-        e._listeners &&
-          e._listeners[r] &&
-          e.removeEventListener(r, e._listeners[r]),
-          o &&
-            (e._listeners || (e._listeners = {}),
-            (e._listeners[r] = o),
-            e.addEventListener(r, o));
-      } else
-        "style" === t && "object" == typeof o
-          ? Object.assign(e.style, o)
-          : "className" === t
-          ? e.setAttribute("class", o)
-          : "boolean" == typeof o
-          ? o
-            ? e.setAttribute(t, "")
-            : e.removeAttribute(t)
-          : null === o
-          ? e.removeAttribute(t)
-          : e.setAttribute(t, o);
-    });
-  },
-  applyChildrenPatches = (e, t) => {
-    const o = Array.from(e.childNodes),
-      r = [];
-    t.forEach((e) => {
-      switch (e.type) {
-        case "REORDER":
-          r.push({ type: "MOVE", from: e.from, to: e.to, node: o[e.from] });
-          break;
-        case "REMOVE":
-          r.push({ type: "REMOVE", index: e.index, node: o[e.index] });
-          break;
-        case "INSERT":
-          r.push({ type: "INSERT", index: e.index, node: createDom(e.node) });
-          break;
-        case "UPDATE":
-          applyPatches(o[e.index], e.patches);
-      }
-    }),
-      r
-        .sort((e, t) =>
-          "REMOVE" === e.type ? -1 : "REMOVE" === t.type ? 1 : e.index - t.index
-        )
-        .forEach((t) => {
-          switch (t.type) {
-            case "MOVE":
-              e.insertBefore(t.node, e.childNodes[t.to] || null);
-              break;
-            case "REMOVE":
-              e.removeChild(t.node);
-              break;
-            case "INSERT":
-              e.insertBefore(t.node, e.childNodes[t.index] || null);
-          }
-        });
-  },
-  priorityLevels = {
-    IMMEDIATE: 1,
-    USER_BLOCKING: 2,
-    NORMAL: 3,
-    LOW: 4,
-    IDLE: 5,
-  },
-  scheduleWork = (e, t) => {
-    new Map().set(t, e);
-  };
-let batchQueue = new Set(),
-  isProcessingBatch = !1;
-const batchedUpdates = (e) => {
-    const t = isBatchingUpdates;
-    isBatchingUpdates = !0;
-    try {
-      return e();
-    } finally {
-      (isBatchingUpdates = t), isBatchingUpdates || flushBatchQueue();
-    }
-  },
-  flushBatchQueue = () => {
-    if (!isProcessingBatch) {
-      isProcessingBatch = !0;
-      try {
-        batchQueue.forEach((e) => {
-          e();
-        });
-      } finally {
-        (isProcessingBatch = !1), batchQueue.clear();
-      }
-      performSyncWork();
-    }
-  },
-  queueUpdate = (e) => {
-    batchQueue.add(e), isBatchingUpdates || flushBatchQueue();
-  },
-  performSyncWork = () => {
-    rerender();
-  };
-(Olova.Transition = () => {
-  const [e, t] = Olova.State(!1);
-  return [
-    e,
-    Olova.Callback((e) => {
-      t(!0),
-        queueMicrotask(() => {
-          try {
-            e();
-          } finally {
-            t(!1);
-          }
-        });
-    }, []),
-  ];
-}),
-  (Olova.DeferredValue = (e, t) => {
-    const [o, r] = Olova.State(e);
-    return (
-      Olova.Effect(() => {
-        const o = setTimeout(() => {
-          r(e);
-        }, t?.timeoutMs || 2e3);
-        return () => clearTimeout(o);
-      }, [e, t?.timeoutMs]),
-      o
-    );
-  }),
-  (Olova.renderToString = (e) => {
-    let t = "";
-    var o;
-    return "string" != typeof (o = e) || (t += o), t;
-  });
-const SyntheticEvent = {
-  preventDefault() {},
-  stopPropagation() {},
-  persist() {},
-  isPersistent() {},
-  nativeEvent: null,
-  target: null,
-  currentTarget: null,
-  type: null,
-};
-Olova.lazy = (e) => {
-  let t = null,
-    o = null;
-  return (r) => {
-    if (
-      (t ||
-        o ||
-        (o = e()
-          .then((e) => {
-            t = e.default || e;
-          })
-          .catch((e) => {
-            throw e;
-          })),
-      t)
-    )
-      return Olova.createElement(t, r);
-    throw o;
-  };
-};
-export const {
-  State: State,
-  createContext: createContext,
-  Context: Context,
-  Effect: Effect,
-  Reducer: Reducer,
-  Callback: Callback,
-  Memo: Memo,
-  Ref: Ref,
-  LayoutEffect: LayoutEffect,
-  ImperativeHandle: ImperativeHandle,
-  Fragment: Fragment,
-  createStore: createStore,
-  Provider: Provider,
-  Selector: Selector,
-  Dispatch: Dispatch,
-  combineReducers: combineReducers,
-  createAction: createAction,
-  applyMiddleware: applyMiddleware,
-  Suspense: Suspense,
-  ErrorBoundary: ErrorBoundary,
-  Transition: Transition,
-  DeferredValue: DeferredValue,
-  renderToString: renderToString,
-  lazy: lazy,
-  StrictMode: StrictMode,
-  Profiler: Profiler,
-  DebugValue: DebugValue,
-  Id: Id,
-  InsertionEffect: InsertionEffect,
-  Optimistic: Optimistic,
-  SyncExternalStore: SyncExternalStore,
-  ActionState: ActionState,
-} = Olova;
-export default Olova;
-(Olova.StrictMode = ({ children: e }) => {
-  const t = (e) => {
-    if ("function" == typeof e.type) {
-      Object.getOwnPropertyNames(e.type.prototype).forEach((t) => {
-        t.startsWith("UNSAFE_") &&
-          console.warn(
-            `StrictMode: Detected deprecated method ${t} in component ${e.type.name}`
-          );
-      }),
-        e.props && e.props.children && e.props.children.forEach(t);
-    }
-  };
-  return e.forEach(t), e[0];
-}),
-  (Olova.Profiler = ({ id: e, onRender: t, children: o }) => {
-    if ("function" != typeof t)
-      return console.warn("Profiler requires an onRender callback"), o;
-    const r = performance.now();
-    return (
-      Olova.Effect(() => {
-        const o = performance.now(),
-          n = o - r;
-        t({
-          id: e,
-          actualDuration: n,
-          baseDuration: n,
-          startTime: r,
-          commitTime: o,
-          interactions: new Set(),
-          phase: "mount",
-        });
-      }, []),
-      o
-    );
-  }),
-  "production" !== process.env.NODE_ENV &&
-    (Olova.__DEV__ = {
-      componentStack: [],
-      markComponentRender: (e) => {
-        Olova.__DEV__.componentStack.push(e),
-          console.log(`Component rendered: ${e.name || "Anonymous"}`);
-      },
-      clearComponentStack: () => {
-        Olova.__DEV__.componentStack = [];
-      },
-    });
-const handleError = (e, t) => {
-    console.error("Error in Olova application:", e),
-      console.error("Component stack:", t);
-    let o = null,
-      r = t[t.length - 1];
-    for (; r && !o; )
-      r.type && r.type.prototype instanceof Olova.ErrorBoundary && (o = r),
-        (r = r.parent);
-    if (!o) throw e;
-    o.setState({ hasError: !0, error: e });
-  },
-  cleanupComponent = (e) => {
-    effects.has(e) &&
-      (effects.get(e).forEach((e) => {
-        e.cleanup && e.cleanup();
-      }),
-      effects.delete(e)),
-      states.has(e) && states.delete(e),
-      memos.has(e) && memos.delete(e),
-      refs.has(e) && refs.delete(e);
+    mount(e, t) {
+      return this.render(e, t);
+    },
+    unmount(e) {
+      e.innerHTML = "";
+    },
+    Fragment: Fragment,
   },
-  sanitizeProps = (e) => {
-    if (e.dangerouslySetInnerHTML) {
-      const t = e.dangerouslySetInnerHTML.__html.replace(
-        /<script[^>]*>([\S\s]*?)<\/script>/gi,
-        ""
-      );
-      e.dangerouslySetInnerHTML.__html = t;
-    }
-    return e;
-  };
-(Olova.DebugValue = (e, t) => {
-  if ("production" !== process.env.NODE_ENV) {
-    const o = t ? t(e) : e;
-    console.log("Debug value:", o);
-  }
-}),
-  (Olova.Id = () => {
-    const [e] = Olova.State(
-      () => `olova-${Math.random().toString(36).slice(2)}`
-    );
-    return e;
-  }),
-  (Olova.InsertionEffect = (e, t) => {
-    Olova.LayoutEffect(e, t);
-  }),
-  (Olova.SyncExternalStore = (e, t, o) => {
-    const [r, n] = Olova.State(t);
-    return (
-      Olova.Effect(
-        () => (
-          n(t()),
-          e(() => {
-            n(t());
-          })
-        ),
-        [e, t]
-      ),
-      r
-    );
-  }),
-  (Olova.Optimistic = (e, t) => {
-    const [o, r] = Olova.State(e),
-      [n, a] = Olova.Transition();
-    return [
-      o,
-      (e) => {
-        a(() => {
-          const n = t(o, e);
-          r(n);
-        });
+  contextRegistry = new Map();
+function Context(e) {
+  const t = Symbol("context");
+  return (
+    contextRegistry.set(t, e),
+    {
+      Provider({ value: e, children: r }) {
+        const n = contextRegistry.get(t);
+        contextRegistry.set(t, e);
+        const o = r;
+        return contextRegistry.set(t, n), o;
       },
-    ];
-  }),
-  (Olova.ActionState = (e, t) => {
-    const [o, r] = Olova.State(e),
-      [n, a] = Olova.State(null),
-      [s, c] = Olova.State(null);
-    return [
-      o,
-      async (e) => {
-        try {
-          a(o);
-          const n = await t(o, e);
-          r(n), a(null), c(null);
-        } catch (e) {
-          c(e), a(null);
-        }
+      use() {
+        const r = contextRegistry.get(t);
+        if (void 0 === r && void 0 === e)
+          throw new Error("Context used outside of Provider");
+        return r ?? e;
       },
-      { pending: n, error: s },
-    ];
-  });
-const diffCache = new WeakMap(),
-  memoizedCreateVirtualDom = (e) => {
-    if (diffCache.has(e)) return diffCache.get(e);
-    const t = createVirtualDom(e);
-    return diffCache.set(e, t), t;
-  };
-class UpdateQueue {
-  constructor() {
-    this.updates = new Map();
-  }
-  enqueue(e, t) {
-    this.updates.has(e) || this.updates.set(e, new Set()),
-      this.updates.get(e).add(t);
-  }
-  dequeue() {
-    const e = Array.from(this.updates.keys()).sort();
-    for (const t of e) {
-      const e = this.updates.get(t);
-      if (e.size > 0) {
-        const o = e.values().next().value;
-        return e.delete(o), 0 === e.size && this.updates.delete(t), o;
-      }
     }
-    return null;
-  }
+  );
 }
-const updateQueue = new UpdateQueue(),
-  componentCache = new WeakMap(),
-  getCachedComponent = (e, t) => {
-    const o = JSON.stringify(t);
-    componentCache.has(e) || componentCache.set(e, new Map());
-    const r = componentCache.get(e);
-    return r.has(o) || r.set(o, new e(t)), r.get(o);
-  },
-  batchDomOperations = (e) => {
-    const t = document.createDocumentFragment();
-    return (
-      e.forEach((e) => {
-        if ("INSERT" === e.type) t.appendChild(e.node);
-      }),
-      t
-    );
-  },
-  eventDelegator = {
-    handlers: new Map(),
-    delegate(e, t) {
-      this.handlers.has(e) ||
-        (this.handlers.set(e, new Set()),
-        document.addEventListener(e, this.handleEvent.bind(this))),
-        this.handlers.get(e).add(t);
-    },
-    handleEvent(e) {
-      const t = this.handlers.get(e.type);
-      t && t.forEach((t) => t(e));
-    },
-  },
-  createImmutableState = (e) => ({
-    value: e,
-    set(e) {
-      return !Object.is(this.value, e) && ((this.value = e), !0);
-    },
-  });
-let renderThrottleTimeout = null;
-const throttledRerender = () => {
-  renderThrottleTimeout ||
-    (renderThrottleTimeout = setTimeout(() => {
-      rerender(), (renderThrottleTimeout = null);
-    }, 16));
-};
+function Callback(e, t) {
+  const [r, n] = State(() => ({ fn: e, deps: t, memoized: (...t) => e(...t) }));
+  return (
+    Effect(() => {
+      const o = r();
+      t &&
+        ((o.deps &&
+          t.length === o.deps.length &&
+          !t.some((e, t) => e !== o.deps[t])) ||
+          n({ fn: e, deps: t, memoized: (...t) => e(...t) }));
+    }),
+    () => r().memoized
+  );
+}
+export { State, Effect, Memo, Ref, Context, Callback, Component, h, Fragment };
+export default Olova;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "olova",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "A lightweight JavaScript framework for building reactive applications.",
   "main": "dist/olova.js",
   "keywords": [