olova 2.0.3 → 2.0.5

package/README.md

@@ -1,54 +1,258 @@
-# Olova JavaScript Framework
+# 🚀 Olova Framework Documentation
 
-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.
+> A lightweight JavaScript framework for building web applications with JSX
 
-## Features
+## What is Olova?
 
-- **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.
+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.
 
-## Installation
+## ⚡ Quick Start
 
-To get started with Olova, first install the core library via npm or yarn.
+### Installation
+
+Get started with a single command:
 
 ```bash
-npm install olova
+npm create vilo@latest
 ```
 
-or
+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:
 
 ```bash
-yarn add olova
+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
+
+### 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>
 ```
 
-## Example Usage
+## 💫 Using Hooks
 
-Here is an example of a basic component in Olova:
+### State Management
 
-```js
-import Olova, { State, Effect } from "olova";
+```jsx
+import Olova, { $signal } from "olova";
 
-export default function Home() {
+const Counter = () => {
   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(() => {
-    console.log("Home is rendered");
-    console.log(count);
-  }, [count]);
+    fetch("/api/data")
+      .then((res) => res.json())
+      .then(setData);
+  }, []); // Empty array means run once on mount
 
-  return (
-    <>
-      <h1>{count}</h1>
-      <button onClick={() => setCount(count + 1)}>Increment</button>
-    </>
-  );
-}
+  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
+
+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
+```
+
+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/olova.js

@@ -1,291 +1 @@
-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));
-        }
-      } else {
-        const e = s instanceof Node ? s : document.createTextNode(String(s));
-        n.appendChild(e);
-      }
-    else t instanceof Node && n.removeChild(t);
-  }
-});
-class Signal {
-  constructor(e) {
-    (this._value = e),
-      (this.observers = new Map()),
-      (this.pending = new Set()),
-      (this.isBatching = !1);
-  }
-  get value() {
-    return (
-      currentObserver &&
-        (this.observers.has("_root") || this.observers.set("_root", new Set()),
-        this.observers.get("_root").add(currentObserver)),
-      this._value
-    );
-  }
-  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);
-      }));
-  }
-  observe(e, t) {
-    this.observers.has(e) || this.observers.set(e, new Set()),
-      this.observers.get(e).add(t);
-  }
-  unobserve(e, t) {
-    this.observers.has(e) && this.observers.get(e).delete(t);
-  }
-}
-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;
-      },
-    ]
-  );
-}
-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();
-    }
-  );
-}
-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;
-    return (
-      Array.isArray(o) &&
-        o.flat().forEach((e) => {
-          null != e &&
-            r.appendChild(
-              e instanceof Node ? e : document.createTextNode(String(e))
-            );
-        }),
-      r
-    );
-  }
-  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;
-      return (
-        t.firstChild ? diffChildren([t.firstChild], [n], t) : t.appendChild(n),
-        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 memoize=(e,{resolver:t=((...e)=>JSON.stringify(e))}={})=>{const r=new Map;return(...n)=>{const o=t(...n);return r.has(o)||r.set(o,e(...n)),r.get(o)}};let currentObserver=null,batchQueue=new Set,isBatching=!1;function batch(e){isBatching=!0,e(),isBatching=!1,batchQueue.forEach((e=>e())),batchQueue.clear()}const perf={enabled:!0,entries:{},wrap:(e,t)=>function(...r){if(!this.enabled)return e(...r);const n=performance.now(),o=e(...r);return this.entries[t]=(this.entries[t]||0)+(performance.now()-n),o}};function ErrorBoundary({fallback:e,children:t}){const[r,n]=$signal(null),o=t=>(console.error("Error caught by boundary:",t),n(t),e);try{if(r())return e;try{return t}catch(e){return o(e)}}catch(e){return o(e)}}function diffProps(e={},t={},r){if(!(r&&r instanceof Element))throw new TypeError("diffProps requires a valid DOM element");try{void 0!==t.className&&(t.class=t.className,delete t.className),void 0!==e.className&&(e.class=e.className,delete e.className);const n={remove:[],set:[],events:[],styles:[]};for(const[r,o]of Object.entries(e))r in t||n.remove.push([r,o]);for(const[r,o]of Object.entries(t))null!=o&&e[r]!==o&&(r.startsWith("on")?n.events.push([r,o,e[r]]):"style"===r?n.styles.push(o):n.set.push([r,o]));n.remove.forEach((([e,t])=>{e.startsWith("on")?r.removeEventListener(e.slice(2).toLowerCase(),t):"style"===e?r.style.cssText="":r.removeAttribute(e)})),n.events.forEach((([e,t,n])=>{if("function"!=typeof t)throw new TypeError(`Event handler for ${e} must be a function`);const o=e.slice(2).toLowerCase();n&&r.removeEventListener(o,n),r.addEventListener(o,t)})),n.styles.forEach((e=>{if("object"==typeof e)Object.assign(r.style,e);else{if("string"!=typeof e)throw new TypeError("style must be an object or string");r.style.cssText=e}})),n.set.forEach((([e,t])=>{if("ref"===e)if(t&&"object"==typeof t&&"current"in t)t.current=r;else{if("function"!=typeof t)throw new TypeError("ref must be a ref object or function");t(r)}else"boolean"==typeof t&&e in r?r[e]=t:r.setAttribute(e,t)}))}catch(e){throw new Error(`Failed to diff props: ${e.message}`)}}const diffChildren=perf.wrap(memoize(((e,t,r)=>{if(!(r&&r instanceof Node))throw new TypeError("diffChildren requires a valid parent node");try{const n=Array.isArray(e)?e.flat():[e],o=Array.isArray(t)?t.flat():[t],s=new Map,i=new Map,a=new Set,c=[];n.forEach(((e,t)=>{e?.key&&s.set(e.key,{node:e,index:t,originalIndex:t})})),o.forEach(((e,t)=>{e?.key&&(a.add(e.key),i.set(e.key,{node:e,index:t,originalIndex:s.get(e.key)?.originalIndex??-1}))})),n.forEach(((e,t)=>{e?.key&&!a.has(e.key)&&r.removeChild(e)}));let l=0;o.forEach(((e,t)=>{const r=e?.key;if(!r)return;const n=s.get(r);i.get(r);n?(n.index<l&&c.push({node:n.node,index:t,type:"move"}),l=Math.max(l,n.index)):c.push({node:e,index:t,type:"insert"})})),c.sort(((e,t)=>e.index-t.index)),c.forEach((({node:e,index:t,type:n})=>{if("move"===n)r.insertBefore(e,r.childNodes[t]||null);else{const n=e instanceof Node?e:document.createTextNode(String(e));r.insertBefore(n,r.childNodes[t]||null)}}));for(let e=0;e<o.length;e++){const t=o[e],n=r.childNodes[e];if(n)if(t){if(n instanceof Element&&t instanceof Element)n.nodeType!==t.nodeType||n.nodeName!==t.nodeName?r.replaceChild(t,n):(diffProps(n.attributes,t.attributes,n),diffChildren(Array.from(n.childNodes),Array.from(t.childNodes),n));else if(n.nodeType===Node.TEXT_NODE&&"object"!=typeof t)n.textContent=String(t);else if(n!==t){const e=t instanceof Node?t:document.createTextNode(String(t));r.replaceChild(e,n)}}else r.removeChild(n);else{const e=t instanceof Node?t:document.createTextNode(String(t));r.appendChild(e)}}for(;r.childNodes.length>o.length;)r.removeChild(r.lastChild)}catch(e){throw new Error(`Failed to diff children: ${e.message}`)}})),"diffChildren");class Signal{constructor(e){this._value=e,this.observers=new Map,this.pending=new Set,this.isBatching=!1,this.isLoading=!1,this.error=null}get value(){return currentObserver&&(this.observers.has("_root")||this.observers.set("_root",new Set),this.observers.get("_root").add(currentObserver)),this._value}set value(e){try{if(this._value===e)return;const t=this._value;if(e instanceof Promise)return this.isLoading=!0,this.error=null,this._value=void 0,this.notifyObservers(),void e.then((e=>(this.isLoading=!1,this._value=e,this.notifyObservers(),e))).catch((e=>{throw this.isLoading=!1,this.error=e,this._value=void 0,this.notifyObservers(),e}));if(this._value=e,this.observers.has("_root")){const e=this.observers.get("_root");for(const t of e)t&&this.pending.add(t)}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))this.pending.add(e)}this.batchUpdate()}catch(e){throw new Error(`Failed to update signal value: ${e.message}`)}}notifyObservers(){if(this.observers.has("_root")){const e=this.observers.get("_root");for(const t of e)t&&this.pending.add(t)}this.batchUpdate()}batchUpdate(){isBatching?batchQueue.add((()=>this.runObservers())):this.isBatching||(this.isBatching=!0,Promise.resolve().then((()=>{try{this.pending.forEach((e=>{try{e()}catch(e){console.error(`Observer execution failed: ${e.message}`)}})),this.pending.clear()}catch(e){console.error(`Batch update failed: ${e.message}`)}finally{this.isBatching=!1}})))}runObservers(){try{this.pending.forEach((e=>{try{e()}catch(e){console.error(`Observer execution failed: ${e.message}`)}})),this.pending.clear()}catch(e){console.error(`Run observers failed: ${e.message}`)}}observe(e,t){if("function"!=typeof t)throw new TypeError("Observer must be a function");this.observers.has(e)||this.observers.set(e,new Set),this.observers.get(e).add(t)}unobserve(e,t){this.observers.has(e)&&this.observers.get(e).delete(t)}cleanup(){try{this.observers.clear(),this.pending.clear(),this._value=void 0,this.isLoading=!1,this.error=null}catch(e){throw new Error(`Failed to cleanup signal: ${e.message}`)}}}function $signal(e,t={}){if(t&&"object"!=typeof t)throw new TypeError("Options must be an object");const{equals:r=((e,t)=>e===t),persistence:n,lazy:o=!1}=t;try{const t=new Signal(o?()=>e:"function"==typeof e?e():e),s=()=>(o&&!t.initialized&&(t.value="function"==typeof e?e():e,t.initialized=!0),t.value);s.loading=()=>t.isLoading,s.error=()=>t.error,s.peek=()=>t._value,s.toString=()=>t.value,s.toJSON=()=>t.value,s.derive=(e,r={})=>{if("function"!=typeof e)throw new TypeError("Derive requires a function");const n=$signal((()=>e(t.value)),r);return t.observe("_derived",(()=>n[1](e(t.value)))),n},s.subscribe=(e,r={})=>{if("function"!=typeof e)throw new TypeError("Subscribe requires a callback function");const{immediate:n=!0,once:o=!1,filter:s}=r,i=()=>{const r=t.value;s&&!s(r)||(e({value:r,loading:t.isLoading,error:t.error}),o&&a())},a=()=>t.unobserve("_root",i);return t.observe("_root",i),n&&i(),a},s.observe=(e,r)=>t.observe(e,r),s.unobserve=(e,r)=>t.unobserve(e,r),s.effect=(e,t={})=>{if("function"!=typeof e)throw new TypeError("Effect requires a function");let r;return s.subscribe((({value:t,loading:n,error:o})=>{r&&r(),r=e(t,{loading:n,error:o})}),t)};const i=e=>{try{return"function"==typeof e?i(e(t.value)):e instanceof Promise?(t.isLoading=!0,t.error=null,e.then((e=>(n&&n.save(e),t.isLoading=!1,t.value=e,e))).catch((e=>{throw t.isLoading=!1,t.error=e,e}))):(r(t.value,e)||(n&&n.save(e),t.value=e),t.value)}catch(e){throw new Error(`Failed to set signal value: ${e.message}`)}};if(i.reset=()=>{try{t.value="function"==typeof e?e():e,n&&n.remove()}catch(e){throw new Error(`Failed to reset signal: ${e.message}`)}},i.transaction=e=>{if("function"!=typeof e)throw new TypeError("Transaction requires a function");const r=t.value;try{t.isBatching=!0;const n=e(r);return t.value=n,n}catch(e){throw t.value=r,e}finally{t.isBatching=!1,t.batchUpdate()}},i.batch=e=>{if(!Array.isArray(e))throw new TypeError("Batch updates must be an array");return i.transaction((()=>e.reduce(((e,t)=>"function"==typeof t?t(e):t),t.value)))},n)try{const e=n.load();void 0!==e&&(t.value=e)}catch(e){console.error(`Failed to load persisted value: ${e.message}`)}return"development"===process.env.NODE_ENV&&(s.debug={listeners:()=>[...t.observers.entries()],dependencies:()=>t.dependencies,trace:()=>console.log("Signal trace:",{value:t.value,loading:t.isLoading,error:t.error,observers:t.observers})}),[s,i]}catch(e){throw new Error(`Failed to create signal: ${e.message}`)}}function createPersistence(e,t=localStorage){if(!e||"string"!=typeof e)throw new TypeError("Persistence requires a valid string key");return{save:r=>{try{t.setItem(e,JSON.stringify(r))}catch(e){throw new Error(`Failed to save to storage: ${e.message}`)}},load:()=>{try{return JSON.parse(t.getItem(e))}catch(e){throw new Error(`Failed to load from storage: ${e.message}`)}},remove:()=>{try{t.removeItem(e)}catch(e){throw new Error(`Failed to remove from storage: ${e.message}`)}},listen:t=>{const r=r=>{r.key===e&&t(r.newValue)};return window.addEventListener("storage",r),()=>window.removeEventListener("storage",r)}}}function $effect(e,t){if("function"!=typeof e)throw new TypeError("Effect requires a function");let r,n=!0,o=null;const s=()=>{try{"function"==typeof r&&(r(),r=void 0),currentObserver=o;const t=e();currentObserver=null,"function"==typeof t&&(r=t)}catch(e){throw new Error(`Effect execution failed: ${e.message}`)}};return o=()=>{if(n||!t)return s(),void(n=!1);Array.isArray(t)&&0===t.length?n&&(s(),n=!1):s()},o(),()=>{if(r)try{r()}catch(e){console.error(`Effect cleanup failed: ${e.message}`)}}}function $memo(e){if("function"!=typeof e)throw new TypeError("Memo requires a function");try{const[t,r]=$signal(e());return $effect((()=>r(e()))),t}catch(e){throw new Error(`Failed to create memo: ${e.message}`)}}function $ref(e){try{const[t,r]=$signal({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}}}catch(e){throw new Error(`Failed to create ref: ${e.message}`)}}function h(e,t,...r){try{if(e===Fragment||Array.isArray(e)){const n=document.createDocumentFragment(),o=e===Fragment?t?.children||r:e;return Array.isArray(o)&&o.flat().forEach((e=>{null!=e&&n.appendChild(e instanceof Node?e:document.createTextNode(String(e)))})),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((()=>{try{const e=r();if(Array.isArray(e)){const r=document.createDocumentFragment();e.forEach((e=>{r.appendChild(e instanceof Node?e:document.createTextNode(String(e)))})),t.parentNode&&t.parentNode.replaceChild(r,t)}else t.textContent=String(e)}catch(e){console.error(`Failed to render dynamic content: ${e.message}`),t.textContent=""}})),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}catch(e){throw new Error(`Failed to create element: ${e.message}`)}}const Component=(e,t)=>{if("function"!=typeof e)throw new TypeError("Invalid Component: must be a function");try{return e(t)}catch(e){throw new Error(`Component rendering failed: ${e.message}`)}},Fragment=e=>e.children;window.Fragment=Fragment;const Olova={render(e,t){if(!(t&&t instanceof Element))throw new TypeError("Container must be a valid DOM element");try{const r="function"==typeof e?e():e;return t.firstChild?diffChildren([t.firstChild],[r],t):t.appendChild(r),r}catch(e){throw new Error(`Render failed: ${e.message}`)}},mount(e,t){return this.render(e,t)},unmount(e){if(!(e&&e instanceof Element))throw new TypeError("Container must be a valid DOM element");try{e.innerHTML=""}catch(e){throw new Error(`Unmount failed: ${e.message}`)}},Fragment:Fragment},contextStack=[];function $context(e){const t=Symbol("context");return{Provider:({value:e,children:r})=>{contextStack.push({id:t,value:e});const n=r;return contextStack.pop(),n},use:()=>{const r=contextStack.findLast((e=>e.id===t));return r?.value??e}}}function $callback(e,t){if("function"!=typeof e)throw new TypeError("Callback requires a function");try{const[r,n]=$signal((()=>({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}catch(e){throw new Error(`Failed to create callback: ${e.message}`)}}export{$signal,$effect,$memo,$ref,$context,$callback,Component,h,Fragment,ErrorBoundary,batch};export default Olova;

package/package.json

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