olova 2.0.5 → 2.0.7

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 +1 @@
-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;
+import stateHook from"./hooks/state.js";import effectHook from"./hooks/effect.js";import memoHook from"./hooks/memo.js";import callbackHook from"./hooks/callback.js";import reducerHook from"./hooks/reducer.js";import refHook from"./hooks/ref.js";import contextHook from"./hooks/context.js";class Olovav2{constructor(){this.rootElement=null,this.components=new WeakMap,this.componentStack=[],this.componentInstances=new WeakMap,this.pendingUpdates=new Set,this.pendingEffects=[],this.contextSubscriptions=new WeakMap,this.isBatchingUpdates=!1,this.hasScheduledFlush=!1,this.dirtyInstances=new Set,this.virtualDOM=null,this.errorBoundaries=new WeakMap,this.batchQueue=new Set,this.isProcessingBatch=!1,this.debugEnabled=!1}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:this.flattenChildren(n)}}:(console.error("Invalid element type:",e),null)}flattenChildren(e){const t=[],n=[...e];for(;n.length;){const e=n.pop();Array.isArray(e)?n.push(...e):t.push(e)}return t.reverse()}render(e,t){try{if(null==e)return;const n=this.createVirtualDOM(e);this.virtualDOM?this.updateDOM(t,this.virtualDOM,n):(t.innerHTML="",t.appendChild(this.createDOM(n))),this.virtualDOM=n}catch(e){console.error("Render error:",e)}}createVirtualDOM(e){if("string"==typeof e||"number"==typeof e)return e;if(Array.isArray(e))return e.map((e=>this.createVirtualDOM(e)));if("function"==typeof e.type){const t=e.type,n=this.getComponentInstance(t);this.componentStack.push(n),n.currentHook=0,n.lastProps=e.props;try{const o=t(e.props);return n.lastResult=o,this.createVirtualDOM(o)}finally{this.componentStack.pop()}}return"string"!=typeof e.type?(console.error("Invalid element type:",e.type),null):{type:e.type,props:e.props,children:(e.props.children||[]).map((e=>this.createVirtualDOM(e)))}}createDOM(e){if("string"==typeof e||"number"==typeof e)return document.createTextNode(e);if(Array.isArray(e)){const t=document.createDocumentFragment();return e.forEach((e=>t.appendChild(this.createDOM(e)))),t}const t=document.createElement(e.type);return this.applyProps(t,e.props),e.children.forEach((e=>t.appendChild(this.createDOM(e)))),t}updateDOM(e,t,n){if(!e)return void this.debug("Container is undefined in updateDOM");if(t===n)return;if("string"==typeof t||"number"==typeof t)return void(t!==n&&e.textContent!==String(n)&&(e.textContent=n));if(Array.isArray(t)&&Array.isArray(n))return void this.reconcileChildren(e,t,n);if(t?.type!==n?.type){const t=this.createDOM(n);return void e.parentNode?.replaceChild(t,e)}t?.props!==n?.props&&this.updateProps(e,t?.props||{},n?.props||{});const o=t?.children||[],r=n?.children||[];this.updateChildren(e,o,r)}reconcileChildren(e,t,n){const o=new Map,r=new Map;t.forEach(((e,t)=>{e?.props?.key&&o.set(e.props.key,t)})),n.forEach(((e,t)=>{e?.props?.key&&r.set(e.props.key,t)}));const s=[];n.forEach(((e,t)=>{const n=e?.props?.key;if(n&&o.has(n)){const e=o.get(n);e!==t&&s.push({from:e,to:t})}})),s.forEach((({from:t,to:n})=>{const o=e.childNodes[t],r=e.childNodes[n];e.insertBefore(o,r)})),this.updateChildNodes(e,t,n)}updateChildNodes(e,t,n){const o=Math.max(t.length,n.length);for(let r=0;r<o;r++){const o=e.childNodes[r];!o&&n[r]?e.appendChild(this.createDOM(n[r])):n[r]?this.updateDOM(o,t[r],n[r]):e.removeChild(o)}}updateProps(e,t,n){Object.keys(t).forEach((t=>{if(!(t in n))if(t.startsWith("on")){const n=t.toLowerCase().substring(2);e.removeEventListener(n,e[`_${n}`]),delete e[`_${n}`]}else"children"!==t&&(e[t]="")})),Object.keys(n).forEach((o=>{n[o]!==t[o]&&this.applyProp(e,o,n[o])}))}applyProp(e,t,n){if("ref"===t)n.current=e;else if(t.startsWith("on")){const o=t.toLowerCase().substring(2),r=e[`_${o}`];r&&e.removeEventListener(o,r);const s=n;e[`_${o}`]=s,e.addEventListener(o,s)}else"children"!==t&&("className"===t?e.setAttribute("class",n):e[t]=n)}updateChildren(e,t,n){const o=Math.max(t.length,n.length);for(let r=0;r<o;r++){const o=e.childNodes[r];!o&&n[r]?e.appendChild(this.createDOM(n[r])):n[r]?this.updateDOM(o,t[r],n[r]):e.removeChild(o)}}applyProps(e,t){Object.keys(t||{}).forEach((n=>{if("ref"===n&&t[n])t[n].current=e;else if(n.startsWith("on")){const o=n.toLowerCase().substring(2),r=e[`_${o}`];r&&e.removeEventListener(o,r);const s=e=>{t[n](e)};e[`_${o}`]=s,e.addEventListener(o,s)}else"children"!==n&&("className"===n?e.setAttribute("class",t[n]):e[n]=t[n])}))}getComponentInstance(e){return 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)}renderComponent(e,t){const n=this.getComponentInstance(e);this.componentStack.push(n);try{n.currentHook=0;const o=e();n.lastResult=o;this.createVirtualDOM(o);return t&&this.render(o,t),n.pendingEffects.length>0&&(this.pendingEffects.push(...n.pendingEffects),n.pendingEffects=[]),o}finally{this.componentStack.pop()}}shouldComponentUpdate(e,t){return!t.__isMemoized||!e.lastProps||!this.deepEqual(e.lastProps,t.props)}getCurrentInstance(){return this.componentStack[this.componentStack.length-1]||null}createContext(e){const t={_currentValue:e,_defaultValue:e,_subscribers:new Set,_version:0,Provider:({value:e,children:n})=>{const o=this.getCurrentInstance(),r=o.currentHook++,s=o.hooks[r];return this.shallowEqual(s,e)||(t._currentValue=e,t._version++,t._subscribers.forEach((t=>{t.instance.hooks[t.hookIndex]=e,this.scheduleUpdate()}))),o.hooks[r]=e,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,queueMicrotask((()=>{if(this.rootElement){const e=this.components.get(this.rootElement);if(e){const t=this.createVirtualDOM(this.renderComponent(e));this.updateDOM(this.rootElement,this.virtualDOM,t),this.virtualDOM=t}}for(;this.pendingEffects.length>0;){this.pendingEffects.shift()()}this.isBatchingUpdates=!1})))}findComponentByInstance(e){for(const[t,n]of this.components.entries())if(this.componentInstances.get(n)===e)return n;return null}flushUpdates(){this.pendingUpdates.forEach((e=>e())),this.pendingUpdates.clear(),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()()}}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 o=n.currentHook++,r=n.hooks[o]||{props:null,result:null},s=!r.props||!this.deepEqual(t,r.props);if(!r.result||s){const r=e(t);return n.hooks[o]={props:t,result:r},r}return r.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),o=Object.keys(t);return n.length===o.length&&n.every((n=>t.hasOwnProperty(n)&&e[n]===t[n]))}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!(!Array.isArray(t)||e.length!==t.length)&&e.every(((e,n)=>this.deepEqual(e,t[n])));const n=Object.keys(e),o=Object.keys(t);return n.length===o.length&&n.every((n=>t.hasOwnProperty(n)&&this.deepEqual(e[n],t[n])))}findComponentElement(e){const t=document.querySelectorAll("*");return Array.from(t).find((t=>{const n=this.components.get(t);return n&&this.componentInstances.get(n)===e}))||null}setState(e){this.getCurrentInstance()&&this.scheduleUpdate()}setErrorBoundary(e,t){this.errorBoundaries.set(e,t)}handleError(e,t){let n=t;for(;n;){const t=this.errorBoundaries.get(n);if(t)return void t(e);n=this.findParentComponent(n)}console.error("Unhandled error:",e)}batchUpdates(e){const t=this.isBatchingUpdates;this.isBatchingUpdates=!0;try{e()}finally{t||(this.isBatchingUpdates=!1,this.flushBatchQueue())}}flushBatchQueue(){if(!this.isProcessingBatch){this.isProcessingBatch=!0;try{for(const e of this.batchQueue)e();this.batchQueue.clear()}finally{this.isProcessingBatch=!1}}}componentDidMount(e){e.onComponentDidMount&&e.onComponentDidMount()}componentWillUnmount(e){e.onComponentWillUnmount&&e.onComponentWillUnmount()}debug(...e){this.debugEnabled&&console.log("[Olova Debug]:",...e)}enableDebug(){this.debugEnabled=!0}disableDebug(){this.debugEnabled=!1}}const Olova=new Olovav2;export const h=Olova.createElement.bind(Olova);export const Fragment=e=>e?e.children:null;export const $state=e=>stateHook(Olova,e);export const $effect=(e,t)=>effectHook(Olova,e,t);export const $memo=(e,t)=>memoHook(Olova,e,t);export const $callback=(e,t)=>callbackHook(Olova,e,t);export const $reducer=(e,t)=>reducerHook(Olova,e,t);export const $ref=e=>refHook(Olova,e);export const $context=e=>contextHook(Olova,e);export const createContext=Olova.createContext.bind(Olova);export const memo=Olova.memo.bind(Olova);export default Olova;function isFunctionComponent(e){return"function"==typeof e}function renderComponent(e,t){try{return"function"==typeof e.type?e.type(e.props):"string"==typeof e?e:Array.isArray(e)?e.map((e=>renderComponent(e,t))):null==e?"":"object"==typeof e?e:String(e)}catch(e){return console.error("Error rendering component:",e),null}}export const enableDebug=Olova.enableDebug.bind(Olova);export const disableDebug=Olova.disableDebug.bind(Olova);export const setErrorBoundary=Olova.setErrorBoundary.bind(Olova);

package/package.json

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