olova 2.0.9 → 2.0.10

package/dist/hooks/callback.js

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

package/dist/hooks/context.js

@@ -1,21 +1,25 @@
-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
-  );
+export function createContextHook(e) {
+  return function (n) {
+    const s = e.getCurrentInstance(),
+      t = s.currentHook++;
+    if (!s.hooks[t]) {
+      s.hooks[t] = n._currentValue;
+      const e = { instance: s, hookIndex: t, version: n._version };
+      n.subscribers.set(s, e),
+        s.contextSubscriptions.add(() => {
+          n.subscribers.delete(s);
+        });
+    }
+    const r = n.subscribers.get(s);
+    return (
+      r &&
+        r.version !== n._version &&
+        ((s.hooks[t] = n._currentValue),
+        (r.version = n._version),
+        (e.dirtyInstances = e.dirtyInstances || new Set()),
+        e.dirtyInstances.add(s),
+        e.scheduleUpdate()),
+      n._currentValue
+    );
+  };
 }

package/dist/hooks/effect.js

@@ -1,11 +1,20 @@
-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);
-    });
+export function createEffectHook(n) {
+  return function (e, t) {
+    const o = n.getCurrentInstance(),
+      u = o.currentHook++;
+    o.hooks[u] ||
+      (o.hooks[u] = { deps: null, cleanup: null, effect: e, lastRun: 0 });
+    const c = o.hooks[u];
+    (t
+      ? c.deps &&
+        n.areArraysEqual(
+          t.map((n) => ("function" == typeof n ? n() : n)),
+          c.deps
+        )
+      : 0 !== c.lastRun) ||
+      ("function" == typeof c.cleanup && c.cleanup(),
+      (c.cleanup = e()),
+      (c.deps = t?.map((n) => ("function" == typeof n ? n() : n))),
+      (c.lastRun = Date.now()));
+  };
 }

package/dist/hooks/memo.js

@@ -1,15 +1,17 @@
-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;
+export function createMemoHook(o) {
+  return function (n, t) {
+    const e = o.getCurrentInstance(),
+      r = e.currentHook++,
+      [u, c] = e.hooks[r] || [void 0, void 0];
+    if (
+      !c ||
+      !t ||
+      t.length !== c.length ||
+      t.some((n, t) => !o.shallowEqual(n, c[t]))
+    ) {
+      const o = n();
+      return (e.hooks[r] = [o, t]), o;
+    }
+    return u;
+  };
 }

package/dist/hooks/reducer.js

@@ -1,11 +1,21 @@
-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();
-    },
-  ];
+export function createReducerHook(t) {
+  return function (s, e, o) {
+    const n = t.getCurrentInstance(),
+      c = n.currentHook++;
+    if (!n.hooks[c]) {
+      const a = o ? o(e) : e;
+      n.hooks[c] = {
+        state: a,
+        dispatch: (e) => {
+          const o = s(n.hooks[c].state, e);
+          o !== n.hooks[c].state &&
+            ((n.hooks[c].state = o),
+            t.dirtyInstances || (t.dirtyInstances = new Set()),
+            t.dirtyInstances.add(n),
+            t.scheduleUpdate());
+        },
+      };
+    }
+    return [n.hooks[c].state, n.hooks[c].dispatch];
+  };
 }

package/dist/hooks/ref.js

@@ -1,5 +1,7 @@
-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];
+export function createRefHook(o) {
+  return function (n) {
+    const r = o.getCurrentInstance(),
+      t = r.currentHook++;
+    return r.hooks[t] || (r.hooks[t] = { current: n }), r.hooks[t];
+  };
 }

package/dist/hooks/state.js

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

package/dist/olova.js

@@ -1 +1 @@
-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 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,o=this.getComponentInstance(n);if(n.__isMemoized){const n=o.lastProps;if(n&&this.deepEqual(n,e.props)&&o.lastResult)return void this.render(o.lastResult,t)}this.componentStack.push(o),o.currentHook=0,o.lastProps=e.props;const s=n(e.props);return o.lastResult=s,this.componentStack.pop(),void this.render(s,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)}}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);e.addEventListener(o,t[n])}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),n.currentHook=0;if(!n.lastResult||this.shouldComponentUpdate(n,e)){const o=e();n.lastResult=o,this.render(o,t),n.pendingEffects.length>0&&(this.pendingEffects.push(...n.pendingEffects),n.pendingEffects=[])}else this.render(n.lastResult,t);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]}createContext(e){const t={_currentValue:e,_defaultValue:e,_subscribers:new Set,_version:0,Provider:({value:e,children:n})=>{const o=this.getCurrentInstance(),s=o.currentHook++,r=o.hooks[s];return this.shallowEqual(r,e)||(t._currentValue=e,t._version++,t._subscribers.forEach((t=>{t.instance.hooks[t.hookIndex]=e,this.scheduleUpdate()}))),o.hooks[s]=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,this.pendingUpdates.push((()=>{if(this.rootElement){const e=this.dirtyInstances||new Set;for(this.components.forEach(((t,n)=>{const o=this.getComponentInstance(t);e.has(o)&&(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()()}}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++,s=n.hooks[o]||{props:null,result:null},r=!s.props||!this.deepEqual(t,s.props);if(!s.result||r){const s=e(t);return n.hooks[o]={props:t,result:s},s}return s.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])))}}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}}
+import{createStateHook}from"./hooks/state";import{createEffectHook}from"./hooks/effect";import{createMemoHook}from"./hooks/memo";import{createRefHook}from"./hooks/ref";import{createCallbackHook}from"./hooks/callback";import{createContextHook}from"./hooks/context";class ReactLite{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,this.mountedComponents=new Map,this.$state=createStateHook(this),this.$effect=createEffectHook(this),this.$memo=createMemoHook(this),this.$ref=createRefHook(this),this.$callback=createCallbackHook(this),this.$context=createContextHook(this)}createElement(e,t,...n){if(null==e)return console.error("Element type cannot be null or undefined"),null;const o=n.flat(),r=[];return o.forEach((e=>{"string"==typeof e||"number"==typeof e?r.length>0&&("string"==typeof r[r.length-1]||"number"==typeof r[r.length-1])?r[r.length-1]=String(r[r.length-1])+String(e):r.push(e):null!=e&&r.push(e)})),e===Fragment?{type:Fragment,props:{...t,children:r}}:{type:e,props:{...t,children:r}}}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(!e.type)return void console.error("Invalid element:",e);if(e.type===Fragment)return void(e.props?.children||[]).forEach((e=>this.render(e,t)));if("function"==typeof e.type){const n=e.type,o=this.getComponentInstance(n);this.componentStack.push(o),o.currentHook=0,o.lastProps=e.props;const r=n(e.props);return o.lastResult=r,this.componentStack.pop(),void this.render(r,t)}if("string"==typeof e.type){const n=document.createElement(e.type);return this.applyProps(n,e.props),(e.props?.children||[]).forEach((e=>this.render(e,n))),void t.appendChild(n)}console.error("Unhandled element type:",e.type)}catch(t){console.error("Render error:",t),console.error("Element:",e)}}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);e.addEventListener(o,t[n])}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:new Map,cleanups:new Set,pendingEffects:[],contextSubscriptions:new Set,lastProps:null,lastResult:null}),this.componentInstances.get(e)}renderComponent(e,t){const n=this.getComponentInstance(e);this.componentStack.push(n),n.currentHook=0;const o=e();n.lastResult=o,this.render(o,t),this.componentStack.pop()}scheduleUpdate(){this.isBatchingUpdates||(this.isBatchingUpdates=!0,queueMicrotask((()=>{const e=new Set(this.dirtyInstances);this.dirtyInstances=new Set,e.forEach((e=>{const t=Array.from(this.components.keys()).find((t=>this.componentInstances.get(t)===e));if(t){this.componentStack.push(e),e.currentHook=0;const n=t(),o=e.lastResult;this.areNodesEqual(n,o)||(e.lastResult=n,this.rootElement&&this.updateDOM(this.rootElement,o,n)),this.componentStack.pop()}})),this.isBatchingUpdates=!1})))}updateDOM(e,t,n){if(this.areNodesEqual(t,n))return;const o=(e,t,n,r=0)=>{if("string"==typeof t||"number"==typeof t){const n=e.childNodes[r];return void(n?3===n.nodeType?n.textContent!==String(t)&&(n.textContent=String(t)):e.replaceChild(document.createTextNode(String(t)),n):e.appendChild(document.createTextNode(String(t))))}if(n&&this.areNodesEqual(n,t))return;if(!t)return void(e.childNodes[r]&&e.removeChild(e.childNodes[r]));if(!n||n.type!==t.type){const n=this.createElementFromVNode(t);return void(e.childNodes[r]?e.replaceChild(n,e.childNodes[r]):e.appendChild(n))}const s=e.childNodes[r];"string"==typeof t.type&&this.updateProps(s,n.props||{},t.props||{});const i=Array.isArray(t.props?.children)?t.props.children:[t.props?.children].filter(Boolean),c=Array.isArray(n.props?.children)?n.props.children:[n.props?.children].filter(Boolean),a=Math.max(i.length,c.length);for(let e=0;e<a;e++)o(s,i[e],c[e],e)};o(e,n,t)}updateProps(e,t,n){Object.keys(t).forEach((o=>{if("children"!==o&&!(o in n))if(o.startsWith("on")){const n=o.toLowerCase().substring(2);e.removeEventListener(n,t[o])}else"className"===o?e.removeAttribute("class"):e.removeAttribute(o)})),Object.keys(n).forEach((o=>{if("children"!==o&&n[o]!==t[o])if(o.startsWith("on")){const r=o.toLowerCase().substring(2);t[o]&&e.removeEventListener(r,t[o]),e.addEventListener(r,n[o])}else"className"===o?e.setAttribute("class",n[o]):o in e?e[o]=n[o]:e.setAttribute(o,n[o])}))}flushUpdates(){for(;this.pendingUpdates.length>0;){this.pendingUpdates.shift()()}this.hasScheduledFlush=!1}mount(e,t){this.rootElement=t,this.components.set(e,e),this.mountedComponents.has(t)&&this.unmount(t),t.innerHTML="",this.mountedComponents.set(t,new Set),this.renderComponent(e,t)}unmount(e){console.log("Unmounting component...");Array.from(this.componentInstances.values()).forEach((e=>{e.cleanups&&(e.cleanups.forEach((e=>{try{console.log("Running cleanup on unmount"),e()}catch(e){console.error("Error in unmount cleanup:",e)}})),e.cleanups.clear())})),this.componentInstances.clear(),e.innerHTML=""}createElementFromVNode(e){if("string"==typeof e||"number"==typeof e)return document.createTextNode(e);if(e.type===Fragment){const t=document.createDocumentFragment();return(e.props&&e.props.children?e.props.children:[]).forEach((e=>{t.appendChild(this.createElementFromVNode(e))})),t}if("string"==typeof e.type){const t=document.createElement(e.type);if(e.props){Object.keys(e.props).forEach((n=>{if("children"!==n)if("className"===n)t.setAttribute("class",e.props[n]);else if(n.startsWith("on")){const o=n.toLowerCase().substring(2);t.addEventListener(o,e.props[n])}else t[n]=e.props[n]}));(e.props.children||[]).forEach((e=>{t.appendChild(this.createElementFromVNode(e))}))}return t}return document.createTextNode("")}createContext(e){const t={currentValue:e,defaultValue:e,subscribers:new Map,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.dirtyInstances=this.dirtyInstances||new Set,this.dirtyInstances.add(t.instance),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}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(typeof e!=typeof t)return!1;if("object"!=typeof e||null===e||null===t)return!1;const n=Object.keys(e),o=Object.keys(t);return n.length===o.length&&n.every((n=>this.deepEqual(e[n],t[n])))}areArraysEqual(e,t){return e===t||!(!e||!t)&&(e.length===t.length&&e.every(((e,n)=>e===t[n])))}areNodesEqual(e,t){return e===t||!(!e||!t)&&(typeof e==typeof t&&("string"==typeof e||"number"==typeof e?e===t:e.type===t.type&&this.areObjectsEqual(e.props,t.props)))}areObjectsEqual(e,t){if(e===t)return!0;if(!e||!t)return!1;const n=Object.keys(e),o=Object.keys(t);return n.length===o.length&&n.every((n=>"children"===n?this.areChildrenEqual(e[n],t[n]):e[n]===t[n]))}areChildrenEqual(e,t){if(e===t)return!0;if(!e||!t)return!1;const n=Array.isArray(e)?e:[e],o=Array.isArray(t)?t:[t];return n.length===o.length&&n.every(((e,t)=>this.areNodesEqual(e,o[t])))}getCurrentInstance(){const e=this.componentStack[this.componentStack.length-1];if(!e)throw new Error("Hooks can only be called inside function components");return e}}const Olova=new ReactLite;export const h=Olova.createElement.bind(Olova);export const Fragment=Symbol("Fragment");export const $state=Olova.$state.bind(Olova);export const $effect=Olova.$effect.bind(Olova);export const $ref=Olova.$ref.bind(Olova);export const $memo=Olova.$memo.bind(Olova);export const $callback=Olova.$callback.bind(Olova);export const $context=Olova.$context.bind(Olova);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}}

package/package.json

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