olova 2.0.4 → 2.0.6

package/README.md

@@ -1,258 +1,54 @@
-# 🚀 Olova Framework Documentation
+# Olova JavaScript Framework
 
-> A lightweight JavaScript framework for building web applications with JSX
+Olova is a lightweight and reactive JavaScript framework that simplifies UI
+development with a clean, intuitive syntax. It provides a reactivity system and
+hooks to manage state and side effects, allowing developers to build modern web
+applications with ease.
 
-## What is Olova?
+## Features
 
-Olova is a simple yet powerful JavaScript framework that lets you build web
-applications using JSX. It directly manipulates the DOM without a Virtual DOM,
-making it lightweight and straightforward to use.
+- **State Management**: Use the `State` hook to manage reactive state in your
+  components.
+- **Side Effects**: Use the `Effect` hook to run side effects in response to
+  state changes.
+- **JSX-style Syntax**: Write UI components using a simple, declarative
+  JSX-style syntax.
+- **Reactivity**: Automatically re-render components when state changes.
 
-## ⚡ Quick Start
+## Installation
 
-### Installation
-
-Get started with a single command:
-
-```bash
-npm create vilo@latest
-```
-
-This command will set up a new Olova project, similar to how Vite works. You can
-use it to create an Olova template or install Olova in an existing project.
-
-Alternatively, you can install Olova directly:
+To get started with Olova, first install the core library via npm or yarn.
 
 ```bash
 npm install olova
 ```
 
-### Your First Olova App
-
-```jsx
-import Olova from "olova";
-
-const App = () => {
-  return (
-    <>
-      <h1>Welcome to Olova! 🎉</h1>
-      <p>Building web apps made simple.</p>
-    </>
-  );
-};
-```
-
-## 🎯 Core Concepts
+or
 
-### Built-in Hooks
-
-Olova provides several essential hooks for building dynamic applications:
-
-```jsx
-import {
-  $signal, // Manage component state
-  $effect, // Handle side effects
-  $memo, // Memoize values
-  $ref, // Reference DOM elements
-  $context, // Share data between components
-  $callback, // Memoize functions
-} from "olova";
-```
-
-### Default Exports
-
-Olova comes with two built-in utilities:
-
-```jsx
-import Olova, { h, Fragment } from "olova";
-
-// h: Element generator (automatically used for JSX transformation)
-// Fragment: Wrapper for multiple elements, can be used as <></> or <Fragment></Fragment>
+```bash
+yarn add olova
 ```
 
-## 💫 Using Hooks
+## Example Usage
 
-### State Management
+Here is an example of a basic component in Olova:
 
-```jsx
-import Olova, { $signal } from "olova";
+```js
+import Olova, { State, Effect } from "olova";
 
-const Counter = () => {
+export default function Home() {
   const [count, setCount] = State(0);
 
-  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
-};
-```
-
-### Side Effects
-
-```jsx
-import Olova, { $effect, $signal } from "olova";
-
-const DataFetcher = () => {
-  const [data, setData] = State(null);
-
-  Effect(() => {
-    fetch("/api/data")
-      .then((res) => res.json())
-      .then(setData);
-  }, []); // Empty array means run once on mount
-
-  return <div>{data ? "Data loaded!" : "Loading..."}</div>;
-};
-```
-
-### Using References
-
-```jsx
-import Olova, { $ref } from "olova";
-
-const FocusInput = () => {
-  const inputRef = $ref(null);
-
-  return <input ref={inputRef} onFocus={() => console.log("Input focused!")} />;
-};
-```
-
-### Memoization
-
-```jsx
-import Olova, { $memo, $signal } from "olova";
-
-const ExpensiveComponent = ({ data }) => {
-  const processedData = Memo(() => {
-    // Expensive computation here
-    return data.map((item) => item * 2);
-  }, [data]);
-
-  return <div>{processedData.join(", ")}</div>;
-};
-```
-
-## 🎨 Styling in Olova
-
-Olova supports all standard CSS approaches:
-
-### CSS Imports
-
-```jsx
-import "./styles.css";
-
-const StyledComponent = () => (
-  <div className="my-component">Styled content</div>
-);
-```
-
-### CSS Modules
-
-```jsx
-import styles from "./Component.module.css";
-
-const ModuleStyledComponent = () => (
-  <div className={styles.container}>Module styled content</div>
-);
-```
-
-### Inline Styles
-
-```jsx
-const InlineStyledComponent = () => (
-  <div style={{ padding: "20px", color: "blue" }}>Inline styled content</div>
-);
-```
-
-## 🔮 How Olova Works
-
-1. **Direct DOM Manipulation**
-
-1. Olova directly updates the DOM without a Virtual DOM
-1. Efficient updates when state changes
-1. Lightweight and fast performance
-
-1. **JSX Transformation**
-
-1. Uses the `h` function to transform JSX into DOM elements
-1. Handles event binding automatically
-1. Manages component lifecycle efficiently
-
-## 📚 Best Practices
-
-### Component Structure
-
-```jsx
-// Good: Single responsibility component
-const UserProfile = ({ user }) => (
-  <div className="profile">
-    <img src={user.avatar || "/placeholder.svg"} alt={user.name} />
-    <h2>{user.name}</h2>
-  </div>
-);
-
-// Better: Using Fragment for multiple elements
-const UserCard = ({ user }) => (
-  <>
-    <UserProfile user={user} />
-    <UserStats stats={user.stats} />
-  </>
-);
-```
-
-### Hook Usage
-
-```jsx
-// Effective use of multiple hooks
-const UserDashboard = () => {
-  const [user, setUser] = State(null);
-  const userCache = $ref({});
-
   Effect(() => {
-    // Side effect cleanup example
-    return () => {
-      userCache.current = {};
-    };
-  }, []);
-
-  return <div>Dashboard Content</div>;
-};
-```
-
-## 🚀 Coming Soon
-
-- More built-in hooks
-- Enhanced development tools
-- Additional utility functions
-- Performance optimizations
-
-## 🤝 Contributing
-
-We welcome contributions! Whether it's:
-
-- Bug reports
-- Feature requests
-- Documentation improvements
-- Pull requests
-
-## 📖 Examples
-
-Find more examples in our [GitHub repository](https://github.com/olovajs/olova).
-
-## 🛠 Using Vilo
+    console.log("Home is rendered");
+    console.log(count);
+  }, [count]);
 
-Vilo is a project creation tool for Olova, similar to Vite. You can use it to
-quickly set up new Olova projects or add Olova to existing projects.
-
-To create a new Olova project:
-
-```bash
-npm create vilo@latest my-olova-app
-cd my-olova-app
-npm install
-npm run dev
+  return (
+    <>
+      <h1>{count}</h1>
+      <button onClick={() => setCount(count + 1)}>Increment</button>
+    </>
+  );
+}
 ```
-
-This will set up a new Olova project with a basic template, ready for you to
-start developing.
-
----
-
-Made with simplicity in mind 🌟

package/dist/hooks/callback.js

@@ -0,0 +1,4 @@
+import o from "./memo.js";
+export default function r(r, t, e) {
+  return o(r, () => t, e);
+}

package/dist/hooks/context.js

@@ -0,0 +1,21 @@
+export default function e(e, r) {
+  const n = e.getCurrentInstance(),
+    o = n.currentHook++;
+  if (!n.hooks[o]) {
+    n.hooks[o] = r._currentValue;
+    const e = { instance: n, hookIndex: o, version: r._version };
+    r._subscribers.add(e),
+      n.contextSubscriptions.add(() => {
+        r._subscribers.delete(e);
+      });
+  }
+  const s = Array.from(r._subscribers).find(
+    (e) => e.instance === n && e.hookIndex === o
+  );
+  return (
+    s &&
+      s.version !== r._version &&
+      ((n.hooks[o] = r._currentValue), (s.version = r._version)),
+    r._currentValue
+  );
+}

package/dist/hooks/effect.js

@@ -0,0 +1,11 @@
+export default function e(e, n, t) {
+  const o = e.getCurrentInstance(),
+    s = o.currentHook++,
+    c = o.hooks[s];
+  (!c || !t || t.length !== c.length || t.some((e, n) => e !== c[n])) &&
+    o.pendingEffects.push(() => {
+      o.cleanups.has(s) && o.cleanups.get(s)();
+      const e = n();
+      (o.hooks[s] = t), "function" == typeof e && o.cleanups.set(s, e);
+    });
+}

package/dist/hooks/memo.js

@@ -0,0 +1,15 @@
+export default function o(o, t, n) {
+  const e = o.getCurrentInstance(),
+    r = e.currentHook++,
+    [s, u] = e.hooks[r] || [void 0, void 0];
+  if (
+    !u ||
+    !n ||
+    n.length !== u.length ||
+    n.some((t, n) => !o.shallowEqual(t, u[n]))
+  ) {
+    const o = t();
+    return (e.hooks[r] = [o, n]), o;
+  }
+  return s;
+}

package/dist/hooks/reducer.js

@@ -0,0 +1,11 @@
+export default function o(o, e, t) {
+  const n = o.getCurrentInstance(),
+    s = n.currentHook++;
+  n.hooks[s] = n.hooks[s] || t;
+  return [
+    n.hooks[s],
+    (t) => {
+      (n.hooks[s] = e(n.hooks[s], t)), o.scheduleUpdate();
+    },
+  ];
+}

package/dist/hooks/ref.js

@@ -0,0 +1,5 @@
+export default function o(o, t) {
+  const n = o.getCurrentInstance(),
+    r = n.currentHook++;
+  return n.hooks[r] || (n.hooks[r] = { current: t }), n.hooks[r];
+}

package/dist/hooks/state.js

@@ -0,0 +1,19 @@
+export default function e(e, o) {
+  const t = e.getCurrentInstance(),
+    s = t.currentHook++;
+  return (
+    t.hooks[s] ||
+      (t.hooks[s] = {
+        value: o,
+        setValue: (o) => {
+          const n = "function" == typeof o ? o(t.hooks[s].value) : o;
+          n !== t.hooks[s].value &&
+            ((t.hooks[s].value = n),
+            (e.dirtyInstances = e.dirtyInstances || new Set()),
+            e.dirtyInstances.add(t),
+            e.scheduleUpdate());
+        },
+      }),
+    [t.hooks[s].value, t.hooks[s].setValue]
+  );
+}

package/dist/olova.js

@@ -1,291 +1,248 @@
-const memoize = (e) => {
-  const t = new Map();
-  return (...n) => {
-    const r = JSON.stringify(n);
-    return t.has(r) || t.set(r, e(...n)), t.get(r);
-  };
-};
-let currentObserver = null;
-function diffProps(e = {}, t = {}, n) {
-  void 0 !== t.className && ((t.class = t.className), delete t.className),
-    void 0 !== e.className && ((e.class = e.className), delete e.className);
-  for (const [r, o] of Object.entries(e))
-    r in t ||
-      (r.startsWith("on")
-        ? n.removeEventListener(r.slice(2).toLowerCase(), o)
-        : "style" === r
-        ? (n.style.cssText = "")
-        : n.removeAttribute(r));
-  for (const [r, o] of Object.entries(t))
-    if (null != o && e[r] !== o)
-      if (r.startsWith("on")) {
-        const t = r.slice(2).toLowerCase();
-        e[r] && n.removeEventListener(t, e[r]), n.addEventListener(t, o);
-      } else if ("ref" === r)
-        o && "object" == typeof o && "current" in o
-          ? (o.current = n)
-          : "function" == typeof o && o(n);
-      else if ("style" === r) {
-        const e = n.style;
-        "object" == typeof o ? Object.assign(e, o) : (e.cssText = o);
-      } else n.setAttribute(r, o);
-}
-const diffChildren = memoize((e, t, n) => {
-  const r = Array.isArray(e) ? e.flat() : [e],
-    o = Array.isArray(t) ? t.flat() : [t],
-    s = Math.max(r.length, o.length);
-  for (let e = 0; e < s; e++) {
-    const t = r[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
-            ? n.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 = n.childNodes[e];
-          t && (t.textContent = String(s));
+import e from "./hooks/state.js";
+import t from "./hooks/effect.js";
+import n from "./hooks/memo.js";
+import s from "./hooks/callback.js";
+import o from "./hooks/reducer.js";
+import r from "./hooks/ref.js";
+import i from "./hooks/context.js";
+const c = new (class {
+  constructor() {
+    (this.rootElement = null),
+      (this.components = new Map()),
+      (this.componentStack = []),
+      (this.componentInstances = new Map()),
+      (this.pendingUpdates = []),
+      (this.pendingEffects = []),
+      (this.contextSubscriptions = new WeakMap()),
+      (this.isBatchingUpdates = !1),
+      (this.hasScheduledFlush = !1),
+      (this.dirtyInstances = null);
+  }
+  createElement(e, t, ...n) {
+    return null == e
+      ? (console.error("Element type cannot be null or undefined"), null)
+      : "function" == typeof e || "string" == typeof e
+      ? { type: e, props: { ...t, children: n.flat() } }
+      : (console.error("Invalid element type:", e), null);
+  }
+  render(e, t) {
+    try {
+      if (null == e) return;
+      if ("string" == typeof e || "number" == typeof e)
+        return void t.appendChild(document.createTextNode(e));
+      if (Array.isArray(e)) return void e.forEach((e) => this.render(e, t));
+      if ("function" == typeof e.type) {
+        const n = e.type,
+          s = this.getComponentInstance(n);
+        if (n.__isMemoized) {
+          const n = s.lastProps;
+          if (n && this.deepEqual(n, e.props) && s.lastResult)
+            return void this.render(s.lastResult, t);
         }
-      } else {
-        const e = s instanceof Node ? s : document.createTextNode(String(s));
-        n.appendChild(e);
+        this.componentStack.push(s),
+          (s.currentHook = 0),
+          (s.lastProps = e.props);
+        const o = n(e.props);
+        return (
+          (s.lastResult = o), this.componentStack.pop(), void this.render(o, t)
+        );
       }
-    else t instanceof Node && n.removeChild(t);
+      if ("string" != typeof e.type)
+        return void console.error("Invalid element type:", e.type);
+      const n = document.createElement(e.type);
+      this.applyProps(n, e.props),
+        (e.props.children || []).forEach((e) => this.render(e, n)),
+        t.appendChild(n);
+    } catch (e) {
+      console.error("Render error:", e);
+    }
   }
-});
-class Signal {
-  constructor(e) {
-    (this._value = e),
-      (this.observers = new Map()),
-      (this.pending = new Set()),
-      (this.isBatching = !1);
+  applyProps(e, t) {
+    Object.keys(t || {}).forEach((n) => {
+      if ("ref" === n && t[n]) t[n].current = e;
+      else if (n.startsWith("on")) {
+        const s = n.toLowerCase().substring(2);
+        e.addEventListener(s, t[n]);
+      } else
+        "children" !== n &&
+          ("className" === n ? e.setAttribute("class", t[n]) : (e[n] = t[n]));
+    });
   }
-  get value() {
+  getComponentInstance(e) {
     return (
-      currentObserver &&
-        (this.observers.has("_root") || this.observers.set("_root", new Set()),
-        this.observers.get("_root").add(currentObserver)),
-      this._value
+      this.componentInstances.has(e) ||
+        this.componentInstances.set(e, {
+          hooks: [],
+          currentHook: 0,
+          effects: [],
+          cleanups: new Map(),
+          pendingEffects: [],
+          contextSubscriptions: new Set(),
+          lastProps: null,
+          lastResult: null,
+        }),
+      this.componentInstances.get(e)
     );
   }
-  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")) this.pending.add(e);
-    if ("object" == typeof t && "object" == typeof e) {
-      const n = new Set([...Object.keys(t), ...Object.keys(e)]);
-      for (const r of n)
-        if (t[r] !== e[r] && this.observers.has(r))
-          for (const e of this.observers.get(r)) this.pending.add(e);
-    }
-    this.batchUpdate();
-  }
-  batchUpdate() {
-    this.isBatching ||
-      ((this.isBatching = !0),
-      Promise.resolve().then(() => {
-        this.pending.forEach((e) => e()),
-          this.pending.clear(),
-          (this.isBatching = !1);
-      }));
+  renderComponent(e, t) {
+    const n = this.getComponentInstance(e);
+    this.componentStack.push(n), (n.currentHook = 0);
+    if (!n.lastResult || this.shouldComponentUpdate(n, e)) {
+      const s = e();
+      (n.lastResult = s),
+        this.render(s, t),
+        n.pendingEffects.length > 0 &&
+          (this.pendingEffects.push(...n.pendingEffects),
+          (n.pendingEffects = []));
+    } else this.render(n.lastResult, t);
+    this.componentStack.pop();
   }
-  observe(e, t) {
-    this.observers.has(e) || this.observers.set(e, new Set()),
-      this.observers.get(e).add(t);
+  shouldComponentUpdate(e, t) {
+    return (
+      !t.__isMemoized || !e.lastProps || !this.deepEqual(e.lastProps, t.props)
+    );
   }
-  unobserve(e, t) {
-    this.observers.has(e) && this.observers.get(e).delete(t);
+  getCurrentInstance() {
+    return this.componentStack[this.componentStack.length - 1];
   }
-}
-function $signal(e) {
-  const t = new Signal(e),
-    n = () => t.value;
-  return (
-    (n.toString = () => t.value),
-    (n.observe = (e, n) => t.observe(e, n)),
-    (n.unobserve = (e, n) => t.unobserve(e, n)),
-    [
-      n,
-      (e) => {
-        t.value = "function" == typeof e ? e(t.value) : e;
+  createContext(e) {
+    const t = {
+      _currentValue: e,
+      _defaultValue: e,
+      _subscribers: new Set(),
+      _version: 0,
+      Provider: ({ value: e, children: n }) => {
+        const s = this.getCurrentInstance(),
+          o = s.currentHook++,
+          r = s.hooks[o];
+        return (
+          this.shallowEqual(r, e) ||
+            ((t._currentValue = e),
+            t._version++,
+            t._subscribers.forEach((t) => {
+              (t.instance.hooks[t.hookIndex] = e), this.scheduleUpdate();
+            })),
+          (s.hooks[o] = e),
+          n
+        );
       },
-    ]
-  );
-}
-function $effect(e, t) {
-  let n,
-    r = !0,
-    o = null;
-  const s = () => {
-    "function" == typeof n && (n(), (n = void 0)), (currentObserver = o);
-    const t = e();
-    (currentObserver = null), "function" == typeof t && (n = t);
-  };
-  return (
-    (o = () => {
-      if (r || !t) return s(), void (r = !1);
-      Array.isArray(t) && 0 === t.length ? r && (s(), (r = !1)) : s();
-    }),
-    o(),
-    () => {
-      n && n();
+      Consumer: ({ children: e }) => {
+        if ("function" != typeof e)
+          throw new Error("Context.Consumer expects a function as a child");
+        return e(t._currentValue);
+      },
+    };
+    return t;
+  }
+  scheduleUpdate() {
+    this.isBatchingUpdates ||
+      ((this.isBatchingUpdates = !0),
+      this.pendingUpdates.push(() => {
+        if (this.rootElement) {
+          const e = this.dirtyInstances || new Set();
+          for (
+            this.components.forEach((t, n) => {
+              const s = this.getComponentInstance(t);
+              e.has(s) && ((n.innerHTML = ""), this.renderComponent(t, n));
+            }),
+              this.dirtyInstances = new Set();
+            this.pendingEffects.length > 0;
+
+          ) {
+            this.pendingEffects.shift()();
+          }
+        }
+      }),
+      this.hasScheduledFlush ||
+        ((this.hasScheduledFlush = !0),
+        queueMicrotask(() => {
+          this.flushUpdates(), (this.isBatchingUpdates = !1);
+        })));
+  }
+  flushUpdates() {
+    for (; this.pendingUpdates.length > 0; ) {
+      this.pendingUpdates.shift()();
+    }
+    this.hasScheduledFlush = !1;
+  }
+  mount(e, t) {
+    for (
+      this.rootElement = t,
+        this.components.set(t, e),
+        this.renderComponent(e, t);
+      this.pendingEffects.length > 0;
+
+    ) {
+      this.pendingEffects.shift()();
     }
-  );
-}
-function $memo(e) {
-  const [t, n] = $signal(e());
-  return $effect(() => n(e())), t;
-}
-function $ref(e) {
-  const [t, n] = $signal({
-    current: e,
-    toString() {
-      return this.current;
-    },
-    valueOf() {
-      return this.current;
-    },
-  });
-  return {
-    get current() {
-      return t().current;
-    },
-    set current(e) {
-      n((t) => (t.current === e ? t : { ...t, current: e }));
-    },
-    toString() {
-      return this.current.toString();
-    },
-    valueOf() {
-      return this.current;
-    },
-  };
-}
-function h(e, t, ...n) {
-  if (e === Fragment || Array.isArray(e)) {
-    const r = document.createDocumentFragment(),
-      o = e === Fragment ? t?.children || n : e;
+  }
+  unmount(e) {
+    const t = this.components.get(e);
+    if (t) {
+      const n = this.componentInstances.get(t);
+      n &&
+        (n.contextSubscriptions.forEach((e) => e()),
+        n.contextSubscriptions.clear(),
+        n.cleanups.forEach((e) => e()),
+        n.cleanups.clear(),
+        this.componentInstances.delete(t)),
+        this.components.delete(e);
+    }
+    e.innerHTML = "";
+  }
+  memo(e) {
+    const t = (t) => {
+      const n = this.getCurrentInstance();
+      if (!n) return e(t);
+      const s = n.currentHook++,
+        o = n.hooks[s] || { props: null, result: null },
+        r = !o.props || !this.deepEqual(t, o.props);
+      if (!o.result || r) {
+        const o = e(t);
+        return (n.hooks[s] = { props: t, result: o }), o;
+      }
+      return o.result;
+    };
+    return (t.__isMemoized = !0), (t.__original = e), t;
+  }
+  shallowEqual(e, t) {
+    if (e === t) return !0;
+    if (!e || !t) return !1;
+    if ("object" != typeof e || "object" != typeof t) return e === t;
+    const n = Object.keys(e),
+      s = Object.keys(t);
     return (
-      Array.isArray(o) &&
-        o.flat().forEach((e) => {
-          null != e &&
-            r.appendChild(
-              e instanceof Node ? e : document.createTextNode(String(e))
-            );
-        }),
-      r
+      n.length === s.length &&
+      n.every((n) => t.hasOwnProperty(n) && e[n] === t[n])
     );
   }
-  if (!e) return null;
-  const r = "function" == typeof e ? e(t) : document.createElement(e);
-  if (("string" == typeof e && r && t && diffProps({}, t, r), n.length)) {
-    const e = document.createDocumentFragment(),
-      t = (n) => {
-        if (null != n)
-          if ("function" == typeof n) {
-            const t = document.createTextNode("");
-            $effect(() => {
-              const e = n();
-              if (Array.isArray(e)) {
-                const n = document.createDocumentFragment();
-                e.forEach((e) => {
-                  n.appendChild(
-                    e instanceof Node ? e : document.createTextNode(String(e))
-                  );
-                }),
-                  t.parentNode && t.parentNode.replaceChild(n, t);
-              } else t.textContent = String(e);
-            }),
-              e.appendChild(t);
-          } else
-            n instanceof Node
-              ? e.appendChild(n)
-              : Array.isArray(n)
-              ? n.flat().forEach(t)
-              : e.appendChild(document.createTextNode(String(n)));
-      };
-    n.forEach(t), r.appendChild(e);
-  }
-  return r;
-}
-const Component = (e, t) => {
-    if ("function" != typeof e)
-      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 n = "function" == typeof e ? e() : e;
+  deepEqual(e, t) {
+    if (e === t) return !0;
+    if (!e || !t) return !1;
+    if (typeof e != typeof t) return !1;
+    if ("object" != typeof e) return e === t;
+    if (Array.isArray(e))
       return (
-        t.firstChild ? diffChildren([t.firstChild], [n], t) : t.appendChild(n),
-        n
+        !(!Array.isArray(t) || e.length !== t.length) &&
+        e.every((e, n) => this.deepEqual(e, t[n]))
       );
-    },
-    mount(e, t) {
-      return this.render(e, t);
-    },
-    unmount(e) {
-      e.innerHTML = "";
-    },
-    Fragment: Fragment,
-  },
-  contextRegistry = new Map();
-function $context(e) {
-  const t = Symbol("context");
-  return (
-    contextRegistry.set(t, e),
-    {
-      Provider({ value: e, children: n }) {
-        const r = contextRegistry.get(t);
-        contextRegistry.set(t, e);
-        const o = n;
-        return contextRegistry.set(t, r), o;
-      },
-      use() {
-        const n = contextRegistry.get(t);
-        if (void 0 === n && void 0 === e)
-          throw new Error("Context used outside of Provider");
-        return n ?? e;
-      },
-    }
-  );
-}
-function $callback(e, t) {
-  const [n, r] = $signal(() => ({
-    fn: e,
-    deps: t,
-    memoized: (...t) => e(...t),
-  }));
-  return (
-    $effect(() => {
-      const o = n();
-      t &&
-        ((o.deps &&
-          t.length === o.deps.length &&
-          !t.some((e, t) => e !== o.deps[t])) ||
-          r({ fn: e, deps: t, memoized: (...t) => e(...t) }));
-    }),
-    () => n().memoized
-  );
-}
-export {
-  $signal,
-  $effect,
-  $memo,
-  $ref,
-  $context,
-  $callback,
-  Component,
-  h,
-  Fragment,
-};
-export default Olova;
+    const n = Object.keys(e),
+      s = Object.keys(t);
+    return (
+      n.length === s.length &&
+      n.every((n) => t.hasOwnProperty(n) && this.deepEqual(e[n], t[n]))
+    );
+  }
+})();
+export const h = c.createElement.bind(c);
+export const Fragment = (e) => (e ? e.children : null);
+export const $state = (t) => e(c, t);
+export const $effect = (e, n) => t(c, e, n);
+export const $memo = (e, t) => n(c, e, t);
+export const $callback = (e, t) => s(c, e, t);
+export const $reducer = (e, t) => o(c, e, t);
+export const $ref = (e) => r(c, e);
+export const $context = (e) => i(c, e);
+export const createContext = c.createContext.bind(c);
+export const memo = c.memo.bind(c);
+export default c;

package/package.json

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