olova 1.0.11 → 1.0.13

package/README.md

@@ -3,26 +3,16 @@
 ```html
 <div id="app">
   <template>
-    <div>
+    <div i-data="{count : 0}">
       <div>{ count }</div>
-      <button @click="increment">Increment</button>
+      <button @click="count++">Increment</button>
     </div>
   </template>
 </div>
 
 <script type="module">
   import { createApp } from "//unpkg.com/olova";
-
-  const app = createApp({
-    data: {
-      count: 0,
-    },
-    methods: {
-      increment() {
-        this.count++;
-      },
-    },
-  });
+  const app = createApp();
   app.mount("#app");
 </script>
 ```

package/dist/olova.js

@@ -1 +1 @@
-let createApp=({data:e,computed:t,methods:r,watch:n,mounted:o,beforeMount:a,beforeUpdate:i,template:l,plugins:c=[],components:s={},mixins:u=[],directives:d={}})=>{let f,m={},p={},h={},y={},E={...d},b=new Map,v=new Map,g=(e,t)=>{v.set(e,t)},A=(e,t)=>{E[e]=t},T=e=>{Array.from(e.attributes).forEach((t=>{let r=t.name.startsWith("i-")?t.name.slice(1):null;r&&E[r]&&(E[r](e,t.value,S),e.removeAttribute(t.name))}))},w=e=>new Proxy(e,{get:(e,t)=>"object"==typeof e[t]&&null!==e[t]?w(e[t]):e[t],set:(e,t,r)=>(e[t]!==r&&(e[t]=r,N(t)),!0)});Error;class x extends Error{constructor(e){super(e),this.name="StateError"}}let C=(e,t,r=Error)=>function(...n){try{return e.apply(this,n)}catch(e){throw new r(`${t}: ${e.message}`)}};a&&C(a,"Error in beforeMount hook",x).call(S);let L=new Set,M=e=>{m[e]&&(L.add(e),requestAnimationFrame((()=>{L.forEach((e=>{m[e].forEach(C((t=>{t.node?t.node.textContent=t.originalText.replace(/\{(.*?)\}/g,((e,t)=>{try{return Function("state",`with(state) { return ${t} }`)(S)}catch(e){return console.error(`Error evaluating expression: ${t}`,e),""}})):t.element&&t.attrName?(t.element.setAttribute(t.attrName,S[e]),t.element.removeAttribute(`:${t.attrName}`)):t.update&&t.update()}),"Error updating bindings"))})),L.clear()})))},N=e=>{i&&C(i,"Error in beforeUpdate hook").call(S,e),M(e),$(),H(e),h.__updated__?.forEach((e=>e.callback.call(S)))},$=()=>{Object.keys(p).forEach((e=>delete p[e]))},H=e=>{h[e]&&h[e].forEach((t=>{t.debounce?(clearTimeout(t.timeout),t.timeout=setTimeout((()=>t.callback.call(S,S[e])),t.debounce)):t.throttle?(!t.lastCalled||Date.now()-t.lastCalled>t.throttle)&&(t.callback.call(S,S[e]),t.lastCalled=Date.now()):t.callback.call(S,S[e])}))};n&&Object.entries(n).forEach((([e,t])=>{h[e]=Array.isArray(t)?t.map((e=>({callback:e}))):["function"==typeof t?{callback:t}:{...t}]}));let S=w({...e,$refs:new Proxy(y,{get(e,t){let r=e[t];return r instanceof HTMLElement?new Proxy(r,{get:(e,t)=>"function"==typeof e[t]?e[t].bind(e):e[t]}):r},set(){throw Error("$refs is read-only")}})}),k={},O={};t&&Object.entries(t).forEach((([e,t])=>{k[e]=[],Object.defineProperty(S,e,{get:()=>"function"==typeof t&&"AsyncFunction"===t.constructor.name?(O[e]||(p[e]=new Proxy(S,{get:(t,r)=>(k[e].includes(r)||k[e].push(r),t[r])}),O[e]=t.call(S).then((t=>(p[e]=t,delete O[e],M(e),t))).catch((t=>{console.error(`Error in async computed property "${e}":`,t)}))),O[e]):(p.hasOwnProperty(e)||(p[e]=new Proxy(S,{get:(t,r)=>(k[e].includes(r)||k[e].push(r),t[r])}),p[e]=t.call(S)),p[e]),enumerable:!0})}));let F=()=>{let e=new WeakMap,t={};f.querySelectorAll("[\\i-model]").forEach((r=>{let n=r.getAttribute("i-model");if(!n)return;let o=()=>{let e=(e=>e instanceof HTMLInputElement?"checkbox"===e.type?e.checked:"radio"===e.type?e.checked?e.value:void 0:e.value:e instanceof HTMLSelectElement?e.multiple?Array.from(e.selectedOptions).map((e=>e.value)):e.value:e instanceof HTMLTextAreaElement?e.value:void 0)(r);void 0!==e&&(S[n]=e,N(n))},a=()=>{((e,t)=>{e instanceof HTMLInputElement?"checkbox"===e.type?e.checked=!!t:"radio"===e.type?e.checked=e.value===t:e.value=t:e instanceof HTMLSelectElement?e.multiple?Array.from(e.options).forEach((e=>{e.selected=t.includes(e.value)})):e.value=t:e instanceof HTMLTextAreaElement&&(e.value=t)})(r,S[n])};if(e.has(r)){e.get(r).forEach((([e,t])=>{r.removeEventListener(e,t)}))}let i=[];if(r instanceof HTMLSelectElement||"checkbox"===r.type||"radio"===r.type){let e=()=>o();r.addEventListener("change",e),i.push(["change",e])}else{let e=()=>o();r.addEventListener("input",e),i.push(["input",e])}e.set(r,i),r instanceof HTMLInputElement&&"radio"===r.type&&(t[n]||(t[n]=[]),t[n].push(r),r.name=`radio-group-${n}`),(m[n]??=[]).push({element:r,updateModel:a}),a(),r.removeAttribute("i-model")})),Object.entries(t).forEach((([e,t])=>{(m[e]??=[]).push({updateModel(){t.forEach((t=>{t.checked=t.value===S[e]}))}})}))},j=()=>{let e="string"==typeof l?l.trim():l instanceof HTMLElement?l.innerHTML:f.innerHTML.trim();if(!e)throw Error("No template provided and container is empty");let t=document.createElement("template");t.innerHTML=e,f.innerHTML="",f.appendChild(t.content.cloneNode(!0));let r=e=>{e.nodeType===Node.ELEMENT_NODE&&((e=(e=>{if(e.nodeType===Node.ELEMENT_NODE){let t=e.tagName.toLowerCase();if(v.has(t)){let r=v.get(t),n=Array.from(e.attributes).reduce(((e,t)=>({...e,[t.name]:t.value})),{}),o=r(n),a=document.createElement("div");a.innerHTML=o;let i=a.firstElementChild;if(i)return e.parentNode?.replaceChild(i,e),i}}return e})(e))instanceof HTMLElement&&(e.hasAttribute("i-if")&&(e=>{if(!(e instanceof HTMLElement))return;let t=e.getAttribute("i-if");if(!t)return;let r=e.nextElementSibling?.hasAttribute("i-else")?e.nextElementSibling:null,n=e.parentNode,o=document.createComment("i-if placeholder");n?.insertBefore(o,e);let a=()=>{try{Function("state",`with(state) { return ${t} }`)(S)?(e.isConnected||n?.insertBefore(e,o.nextSibling),r?.isConnected&&n?.removeChild(r)):(e.isConnected&&n?.removeChild(e),r&&!r.isConnected&&n?.insertBefore(r,o.nextSibling))}catch(e){console.error("Error evaluating i-if directive:",e)}};a(),(m[t]??=[]).push({element:e,update:a}),e.removeAttribute("i-if"),r?.removeAttribute("i-else")})(e),e.hasAttribute("i-for")&&B(e),e.hasAttribute("i-show")&&U(e),T(e)),Array.from(e.childNodes).forEach(r))};Array.from(f.childNodes).forEach(r),f.querySelectorAll("*").forEach((e=>{if(e instanceof HTMLElement){T(e);let t=e=>{let t=e.textContent||"";if(t.includes("{")&&t.includes("}")){let r=t.split(/(\{.*?\})/),n=document.createDocumentFragment();r.forEach((e=>{if(e.startsWith("{")&&e.endsWith("}")){let t=e.slice(1,-1).trim(),r=document.createTextNode("");n.appendChild(r);let o=()=>{try{let e=Function("state",`with(state) { return ${t} }`)(S);r.textContent=e}catch(e){console.error(`Error evaluating expression: ${t}`,e),r.textContent=""}};o(),Object.keys(S).forEach((e=>{(m[e]??=[]).push({update:o})}))}else n.appendChild(document.createTextNode(e))})),e.parentNode.replaceChild(n,e)}};e.childNodes.forEach((e=>{e.nodeType===Node.TEXT_NODE&&t(e)}))}}))};Object.entries(s).forEach((([e,t])=>{g(e,t)}));let _={beforeCreate:[],created:[],beforeMount:[],mounted:[],beforeUpdate:[],updated:[],beforeUnmount:[],unmounted:[]},q=(e,t)=>{_[e]&&_[e].push(t)},D=e=>{_[e]?.forEach((e=>e.call(S)))},P=e=>{e.data&&Object.assign(S,e.data()),e.methods&&Object.assign(r,e.methods),e.computed&&Object.assign(t,e.computed),e.watch&&Object.entries(e.watch).forEach((([e,t])=>{(n[e]??=[]).push(t)})),e.mounted&&q("mounted",e.mounted)};u.forEach(P);window.addEventListener("error",(e=>{console.error("Global error:",e)}));let W={beforeEnter(e){e.style.opacity="0",e.style.transform="translateY(-20px)",e.style.display=""},enter(e,t){let r=1e3*parseFloat(getComputedStyle(e).transitionDuration);requestAnimationFrame((()=>{e.style.opacity="1",e.style.transform="translateY(0)",setTimeout(t,r)}))},afterEnter(e){e.style.opacity="",e.style.transform=""},enterCancelled(e){e.style.opacity="",e.style.transform=""},beforeLeave(e){e.style.opacity="1",e.style.transform="translateY(0)"},leave(e,t){let r=1e3*parseFloat(getComputedStyle(e).transitionDuration);requestAnimationFrame((()=>{e.style.opacity="0",e.style.transform="translateY(-20px)",setTimeout(t,r)}))},afterLeave(e){e.style.display="none",e.style.opacity="",e.style.transform=""},leaveCancelled(e){e.style.opacity="",e.style.transform=""}},U=e=>{if(!(e instanceof HTMLElement))return;let t=e.getAttribute("i-show");if(!t)return;let r=null,n=async()=>{try{let n=Function("state",`with(state) { return ${t} }`)(S);e._transitionShow&&e._transitionHide?(r&&(await r,r=null),await(r=n?e._transitionShow():e._transitionHide())):e.style.display=n?"":"none"}catch(e){console.error("Error evaluating i-show directive:",e)}};n(),(m[t]??=[]).push({element:e,update:n}),e.removeAttribute("i-show")},B=e=>{if(!(e instanceof HTMLElement))return;let t=e.getAttribute("i-for");if(!t)return;let r=t.match(/(\w+)(?:,\s*(\w+))?\s+(?:in|of)\s+(.+)/);if(!r)return void console.error("Invalid i-for expression:",t);let[,n,o,a]=r,i=e.getAttribute("i-key")||null,l=e.parentNode,c=document.createComment(`i-for: ${t}`);l?.insertBefore(c,e);let s=e.cloneNode(!0);s.removeAttribute("i-for"),s.removeAttribute("i-key");let u=()=>{try{let e=Function("state",`with(state) { return ${a} }`)(S),t=document.createDocumentFragment(),r=new Map,u=c.nextSibling;for(;u&&u.hasAttribute&&u.hasAttribute("data-i-for-id");)r.set(u.getAttribute("data-i-for-id"),u),u=u.nextSibling;for(e.forEach(((e,l)=>{let c=i?e[i]:JSON.stringify(e),u=`${a}-${c}`,f=r.get(u);f?r.delete(u):(f=s.cloneNode(!0)).setAttribute("data-i-for-id",u);let m={...S,[n]:e,...o?{[o]:l}:{index:l}};d(f,m),t.appendChild(f)})),r.forEach((e=>e.remove()));c.nextSibling&&c.nextSibling.hasAttribute&&c.nextSibling.hasAttribute("data-i-for-id");)l.removeChild(c.nextSibling);l.insertBefore(t,c.nextSibling)}catch(e){console.error("Error evaluating i-for directive:",e)}},d=(e,t)=>{e.querySelectorAll("*").forEach((e=>{Array.from(e.attributes).forEach((r=>{if(r.value.includes("{")&&r.value.includes("}")){let n=r.value.replace(/\{(.*?)\}/g,((e,r)=>Function("state",`with(state) { return ${r} }`)(t)));e.setAttribute(r.name,n)}}))}));e.childNodes.forEach((e=>{e.nodeType===Node.TEXT_NODE&&(e=>{let r=e.textContent||"";if(r.includes("{")&&r.includes("}")){let n=r.split(/(\{.*?\})/),o=document.createDocumentFragment();n.forEach((e=>{if(e.startsWith("{")&&e.endsWith("}")){let r=e.slice(1,-1).trim(),n=document.createTextNode("");o.appendChild(n);let a=()=>{try{let e=Function("state",`with(state) { return ${r} }`)(t);n.textContent=e}catch(e){console.error(`Error evaluating expression: ${r}`,e),n.textContent=""}};a()}else o.appendChild(document.createTextNode(e))})),e.parentNode.replaceChild(o,e)}})(e)}))};u(),(m[a]??=[]).push({update:u}),e.remove()};return{mount:C((function(e){if(!(f=document.querySelector(e)))throw Error(`Element with selector "${e}" not found.`);D("beforeCreate"),D("created"),a&&a.call(S),D("beforeMount"),c.forEach((e=>{"function"==typeof e&&e({createPlugin:A,state:S,bindings:m})}));let t=f.querySelector("template");t&&(f.innerHTML=t.innerHTML),j(),f.querySelectorAll("*").forEach((e=>{Array.from(e.attributes).forEach((t=>{if(t.name.startsWith("@")){let[n,...o]=t.name.slice(1).split("."),a=t.value.trim(),i={once:o.includes("once"),capture:o.includes("capture")};e.addEventListener(n,(e=>{try{o.includes("prevent")&&e.preventDefault(),o.includes("stop")&&e.stopPropagation(),r&&r[a]?r[a].call(S,e):Function("state","event",`with(state) { ${a} }`).call(S,S,e),N()}catch(e){console.error(`Error executing event handler: ${a}`,e)}}),i),e.removeAttribute(t.name)}}))})),f.querySelectorAll("[\\i-ref]").forEach((e=>{if(!(e instanceof HTMLElement))return;let t=e.getAttribute("i-ref");t&&(y[t]=e,e.removeAttribute("i-ref"))})),F(),f.querySelectorAll("[\\i-html]").forEach((e=>{if(!(e instanceof HTMLElement))return;let t=e.getAttribute("i-html");if(!t)return;let r=()=>{try{let r=Function("state",`with(state) { return ${t} }`)(S);r=r.replace(/\{(.*?)\}/g,((e,t)=>Function("state",`with(state) { return ${t} }`)(S))),e.innerHTML=r,e.querySelectorAll("*").forEach((e=>{e instanceof HTMLElement&&n(e)}))}catch(e){console.error("Error applying i-html directive:",e)}},n=e=>{Array.from(e.childNodes).forEach((e=>{e.nodeType===Node.TEXT_NODE&&o(e)})),Array.from(e.attributes).forEach((t=>{t.value.includes("{")&&t.value.includes("}")&&a(e,t)}))},o=e=>{let t=e.textContent||"";if(t.includes("{")&&t.includes("}")){let r=t.split(/(\{.*?\})/),n=document.createDocumentFragment();r.forEach((e=>{if(e.startsWith("{")&&e.endsWith("}")){let t=e.slice(1,-1).trim(),r=document.createTextNode("");n.appendChild(r);let o=()=>{try{let e=Function("state",`with(state) { return ${t} }`)(S);r.textContent=e}catch(e){console.error(`Error evaluating expression: ${t}`,e),r.textContent=""}};o(),Object.keys(S).forEach((e=>{(m[e]??=[]).push({update:o})}))}else n.appendChild(document.createTextNode(e))})),e.parentNode.replaceChild(n,e)}},a=(e,t)=>{let r=t.value,n=()=>{let n=r.replace(/\{(.*?)\}/g,((e,t)=>Function("state",`with(state) { return ${t} }`)(S)));e.setAttribute(t.name,n)};n(),Object.keys(S).forEach((e=>{(m[e]??=[]).push({update:n})}))};r(),Object.keys(S).forEach((e=>{(m[e]??=[]).push({update:r})})),e.removeAttribute("i-html")})),B(),f.querySelectorAll("[i-transition]").forEach((e=>{if(!(e instanceof HTMLElement))return;let t=e.getAttribute("i-transition");if(!t)return;let[r,n,o]=t.split(",").map((e=>e.trim())),a=n?`${n}ms`:"300ms",i=o||"ease";e.style.transition=`opacity ${a} ${i}, transform ${a} ${i}`;let l=(t,r)=>new Promise((n=>{let o=!1;return t.before(e),t.during(e,(()=>{o||(t.after(e),r&&r(),n())})),()=>{o=!0,t.cancelled(e),n()}}));e._transitionShow=async t=>{e.style.display="",await l({before:W.beforeEnter,during:W.enter,after:W.afterEnter,cancelled:W.enterCancelled},t)},e._transitionHide=async e=>{await l({before:W.beforeLeave,during:W.leave,after:W.afterLeave,cancelled:W.leaveCancelled},e)},e.style.display="none",e.removeAttribute("i-transition")})),f.querySelectorAll("*").forEach((e=>{e instanceof HTMLElement&&Array.from(e.attributes).forEach((t=>{let r=t.name.match(/^(?:i-bind:|:)(.+)$/);if(!r)return;let[,n]=r,o=t.value,a=()=>{try{let t=Function("state",`with(state) { return ${o} }`)(S);"class"===n?"object"==typeof t&&null!==t?Object.entries(t).forEach((([t,r])=>{e.classList.toggle(t,!!r)})):e.className=t:"style"===n?"object"==typeof t&&null!==t?Object.entries(t).forEach((([t,r])=>{e.style[t]=r})):e.setAttribute("style",t):!1===t?e.removeAttribute(n):e.setAttribute(n,!0===t?"":t)}catch(e){console.error(`Error applying bind directive for ${n}:`,e)}};a(),(m[o]??=[]).push({update:a}),e.removeAttribute(t.name)}))})),(e=>{Object.entries(k).forEach((([t,r])=>{r.includes(e)&&(delete p[t],M(t))}))})(),f.querySelectorAll("[\\i-show]").forEach((e=>{e instanceof HTMLElement&&U(e)})),o&&o.call(S),D("mounted"),Object.keys(S).forEach((e=>M(e)))}),"Error mounting application"),onUpdated:e=>{if("function"==typeof e){let t=C(e,"Error in onUpdated callback");(h.__updated__??=[]).push({callback:t})}},createPlugin:A,emit:(e,t)=>{(b.get(e)??[]).forEach((e=>e(t)))},on:(e,t)=>(b.has(e)||b.set(e,[]),b.get(e).push(t),()=>{let r=b.get(e),n=r.indexOf(t);-1!==n&&r.splice(n,1)}),addLifecycleHook:q,applyMixin:P,component:g,render:e=>{let t=document.createElement("template");return t.innerHTML=e.trim(),t.content}}};export{createApp};
+const createApp=({data:e={},computed:t={},methods:r={},watch:n={},mounted:o,beforeMount:i,beforeUpdate:a,template:c,plugins:s=[],components:l={},mixins:u=[],directives:d={},setup:f}={})=>{let h;const p={},m={},b={},y={},E={...d},v=new Map,g=new Map,w=(e,t)=>{g.set(e,t)},A=(e,t)=>{E[e]=t},T=e=>new Proxy(e,{get:(e,t)=>"object"==typeof e[t]&&null!==e[t]?T(e[t]):e[t],set:(e,t,r)=>(e[t]!==r&&(e[t]=r,M(t)),!0)});Error;class x extends Error{constructor(e){super(e),this.name="StateError"}}const C=(e,t,r=Error)=>function(...n){try{return e.apply(this,n)}catch(e){throw new r(`${t}: ${e.message}`)}};i&&C(i,"Error in beforeMount hook",x).call($);new Set;const L=e=>{p[e]&&p[e].forEach(C((t=>{t.node?t.node.textContent=t.originalText.replace(/\{(.*?)\}/g,((e,t)=>{try{return new Function("state","helpers",`with(state) { with(helpers) { return ${t} } }`)($,K)}catch(e){return console.error(`Error evaluating expression: ${t}`,e),""}})):t.element&&t.attrName?(t.element.setAttribute(t.attrName,$[e]),t.element.removeAttribute(`:${t.attrName}`)):t.update&&t.update()}),"Error updating bindings"))},M=e=>{a&&C(a,"Error in beforeUpdate hook").call($,e),L(e),N(e),b.__updated__?.forEach((e=>e.callback.call($)))},N=e=>{b[e]&&b[e].forEach((t=>{t.debounce?(clearTimeout(t.timeout),t.timeout=setTimeout((()=>t.callback.call($,$[e])),t.debounce)):t.throttle?(!t.lastCalled||Date.now()-t.lastCalled>t.throttle)&&(t.callback.call($,$[e]),t.lastCalled=Date.now()):t.callback.call($,$[e])}))};n&&Object.entries(n).forEach((([e,t])=>{b[e]=Array.isArray(t)?t.map((e=>({callback:e}))):["function"==typeof t?{callback:t}:{...t}]}));const $=T({...e,$refs:new Proxy(y,{get:(e,t)=>{const r=e[t];return r instanceof HTMLElement?new Proxy(r,{get:(e,t)=>"function"==typeof e[t]?e[t].bind(e):e[t]}):r},set:()=>{throw new Error("$refs is read-only")}})}),S={},O={};t&&Object.entries(t).forEach((([e,t])=>{S[e]=[],Object.defineProperty($,e,{get:()=>"function"==typeof t&&"AsyncFunction"===t.constructor.name?(O[e]||(m[e]=new Proxy($,{get:(t,r)=>(S[e].includes(r)||S[e].push(r),t[r])}),O[e]=t.call($).then((t=>(m[e]=t,delete O[e],L(e),t))).catch((t=>{console.error(`Error in async computed property "${e}":`,t)}))),O[e]):(m.hasOwnProperty(e)||(m[e]=new Proxy($,{get:(t,r)=>(S[e].includes(r)||S[e].push(r),t[r])}),m[e]=t.call($)),m[e]),enumerable:!0})}));const k=()=>{const e=new WeakMap,t={};h.querySelectorAll("[\\i-model]").forEach((r=>{const n=r.getAttribute("i-model");if(!n)return;const o=()=>{const e=(e=>e instanceof HTMLInputElement?"checkbox"===e.type?e.checked:"radio"===e.type?e.checked?e.value:void 0:e.value:e instanceof HTMLSelectElement?e.multiple?Array.from(e.selectedOptions).map((e=>e.value)):e.value:e instanceof HTMLTextAreaElement?e.value:void 0)(r);void 0!==e&&($[n]=e,M(n))},i=()=>{((e,t)=>{e instanceof HTMLInputElement?"checkbox"===e.type?e.checked=!!t:"radio"===e.type?e.checked=e.value===t:e.value=t:e instanceof HTMLSelectElement?e.multiple?Array.from(e.options).forEach((e=>{e.selected=t.includes(e.value)})):e.value=t:e instanceof HTMLTextAreaElement&&(e.value=t)})(r,$[n])};if(e.has(r)){e.get(r).forEach((([e,t])=>{r.removeEventListener(e,t)}))}const a=[];if(r instanceof HTMLSelectElement||"checkbox"===r.type||"radio"===r.type){const e=()=>o();r.addEventListener("change",e),a.push(["change",e])}else{const e=()=>o();r.addEventListener("input",e),a.push(["input",e])}e.set(r,a),r instanceof HTMLInputElement&&"radio"===r.type&&(t[n]||(t[n]=[]),t[n].push(r),r.name=`radio-group-${n}`),(p[n]??=[]).push({element:r,updateModel:i}),i(),r.removeAttribute("i-model")})),Object.entries(t).forEach((([e,t])=>{(p[e]??=[]).push({updateModel:()=>{t.forEach((t=>{t.checked=t.value===$[e]}))}})}))},_=e=>{try{return new Function("state","helpers",`with(state) { with(helpers) { return ${e} } }`)($,K)}catch(t){return console.error(`Error evaluating expression: ${e}`,t),""}},H=e=>{var t;e.nodeType===Node.ELEMENT_NODE?(e=(e=>{if(e.nodeType===Node.ELEMENT_NODE){const t=e.tagName.toLowerCase();if(g.has(t)){const r=g.get(t)(Array.from(e.attributes).reduce(((e,t)=>({...e,[t.name]:t.value})),{})),n=document.createElement("div");n.innerHTML=r;const o=n.firstElementChild;if(o)return e.parentNode?.replaceChild(o,e),o}}return e})(e))instanceof HTMLElement&&(e.hasAttribute("i-data")&&J(e),t=e,Array.from(t.attributes).forEach((e=>{const r=e.name.startsWith("i-")?e.name.slice(1):null;r&&E[r]&&(E[r](t,e.value,$),t.removeAttribute(e.name))})),e.hasAttribute("i-if")&&(e=>{if(!(e instanceof HTMLElement))return;const t=e.getAttribute("i-if");if(!t)return;const r=[];let n=null,o=e.nextElementSibling;for(;o&&(o.hasAttribute("i-else-if")||o.hasAttribute("i-else"));){if(o.hasAttribute("i-else-if"))r.push(o);else if(o.hasAttribute("i-else")){n=o;break}o=o.nextElementSibling}const i=e.parentNode,a=document.createComment("i-if placeholder");i?.insertBefore(a,e);const c=()=>{try{if(_(t))e.isConnected||i?.insertBefore(e,a.nextSibling),r.forEach((e=>{e.isConnected&&i?.removeChild(e)})),n?.isConnected&&i?.removeChild(n);else{let t=!1;e.isConnected&&i?.removeChild(e);for(const e of r){const r=e.getAttribute("i-else-if");if(_(r)){e.isConnected||i?.insertBefore(e,a.nextSibling),t=!0;break}e.isConnected&&i?.removeChild(e)}!t&&n?n.isConnected||i?.insertBefore(n,a.nextSibling):n?.isConnected&&i?.removeChild(n)}}catch(e){console.error("Error evaluating i-if directive:",e)}};c(),(p[t]??=[]).push({element:e,update:c}),e.removeAttribute("i-if"),r.forEach((e=>e.removeAttribute("i-else-if"))),n?.removeAttribute("i-else")})(e),e.hasAttribute("i-for")&&Y(e),e.hasAttribute("i-show")&&X(e),Array.from(e.childNodes).forEach((e=>{e.nodeType===Node.TEXT_NODE&&j(e)})),Array.from(e.attributes).forEach((t=>{if(t.name.startsWith("@")||t.name.startsWith("i-on:")){const r=t.name.startsWith("@")?t.name.slice(1):t.name.slice(5);z(e,r,t.value),e.removeAttribute(t.name)}else t.value.includes("{")&&t.value.includes("}")&&processAttribute(e,t)})),Array.from(e.childNodes).forEach(H)):e.nodeType===Node.TEXT_NODE&&j(e)},j=e=>{const t=e.textContent||"";if(t.includes("{")&&t.includes("}")){const r=t.split(/(\{.*?\})/),n=document.createDocumentFragment();r.forEach((e=>{if(e.startsWith("{")&&e.endsWith("}")){const t=e.slice(1,-1).trim(),r=document.createTextNode("");n.appendChild(r);const o=()=>{r.textContent=_(t)};o();F(t).forEach((e=>{(p[e]??=[]).push({update:o})}))}else n.appendChild(document.createTextNode(e))})),e.parentNode?.replaceChild(n,e)}},F=e=>{const t=e.match(/\b\w+\b/g);return t?t.filter((e=>e in $)):[]};Object.entries(l).forEach((([e,t])=>{w(e,t)}));const D=(e,t)=>{(v.get(e)??[]).forEach((e=>e(t)))},q=(e,t)=>(v.has(e)||v.set(e,[]),v.get(e).push(t),()=>{const r=v.get(e),n=r.indexOf(t);-1!==n&&r.splice(n,1)}),P={beforeCreate:[],created:[],beforeMount:[],mounted:[],beforeUpdate:[],updated:[],beforeUnmount:[],unmounted:[]},W=(e,t)=>{P[e]&&P[e].push(t)},U=e=>{P[e]?.forEach((e=>e.call($)))},B=e=>{e.data&&Object.assign($,e.data()),e.methods&&Object.assign(r,e.methods),e.computed&&Object.assign(t,e.computed),e.watch&&Object.entries(e.watch).forEach((([e,t])=>{(n[e]??=[]).push(t)})),e.mounted&&W("mounted",e.mounted)};u.forEach(B);window.addEventListener("error",(e=>{console.error("Global error:",e)}));const I={beforeEnter:e=>{e.style.opacity="0",e.style.transform="translateY(-20px)",e.style.display=""},enter:(e,t)=>{const r=1e3*parseFloat(getComputedStyle(e).transitionDuration);requestAnimationFrame((()=>{e.style.opacity="1",e.style.transform="translateY(0)",setTimeout(t,r)}))},afterEnter:e=>{e.style.opacity="",e.style.transform=""},enterCancelled:e=>{e.style.opacity="",e.style.transform=""},beforeLeave:e=>{e.style.opacity="1",e.style.transform="translateY(0)"},leave:(e,t)=>{const r=1e3*parseFloat(getComputedStyle(e).transitionDuration);requestAnimationFrame((()=>{e.style.opacity="0",e.style.transform="translateY(-20px)",setTimeout(t,r)}))},afterLeave:e=>{e.style.display="none",e.style.opacity="",e.style.transform=""},leaveCancelled:e=>{e.style.opacity="",e.style.transform=""}},X=e=>{if(!(e instanceof HTMLElement))return;const t=e.getAttribute("i-show");if(!t)return;let r=null;const n=async()=>{try{const n=new Function("state","helpers",`with(state) { with(helpers) { return ${t} } }`)($,K);e._transitionShow&&e._transitionHide?(r&&(await r,r=null),r=n?e._transitionShow():e._transitionHide(),await r):e.style.display=n?"":"none"}catch(e){console.error("Error evaluating i-show directive:",e)}};n(),(p[t]??=[]).push({element:e,update:n}),e.removeAttribute("i-show")},Y=e=>{if(!(e instanceof HTMLElement))return;const t=e.getAttribute("i-for");if(!t)return;const r=t.match(/(\(?\s*(\w+)(?:\s*,\s*(\w+))?\s*\)?)\s+(?:in|of)\s+(.+)/);if(!r)return void console.error("Invalid i-for expression:",t);const[,,n,o,i]=r,a=e.getAttribute("i-key")||null,c=e.parentNode,s=document.createComment(`i-for: ${t}`);c?.insertBefore(s,e);const l=e.cloneNode(!0);l.removeAttribute("i-for"),l.removeAttribute("i-key");const u=()=>{try{const e=new Function("state","helpers",`with(state) { with(helpers) { return ${i} } }`)($,K),t=document.createDocumentFragment(),r=new Map;let u=s.nextSibling;for(;u&&u.hasAttribute&&u.hasAttribute("data-i-for-id");)r.set(u.getAttribute("data-i-for-id"),u),u=u.nextSibling;for(e.forEach(((e,c)=>{const s=a?e[a]:JSON.stringify(e),u=`${i}-${s}`;let f=r.get(u);f?r.delete(u):(f=l.cloneNode(!0),f.setAttribute("data-i-for-id",u));const h=((e,t)=>{const r={...$};if(n.includes(",")){const[t,o]=n.split(",").map((e=>e.trim()));r[t]=Object.keys(e)[0],r[o]=Object.values(e)[0]}else r[n]=e;return o&&(r[o]=t),r})(e,c);d(f,h),t.appendChild(f)})),r.forEach((e=>e.remove()));s.nextSibling&&s.nextSibling.hasAttribute&&s.nextSibling.hasAttribute("data-i-for-id");)c.removeChild(s.nextSibling);c.insertBefore(t,s.nextSibling)}catch(e){console.error("Error evaluating i-for directive:",e)}},d=(e,t)=>{e.querySelectorAll("*").forEach((e=>{Array.from(e.attributes).forEach((r=>{if(r.value.includes("{")&&r.value.includes("}")){const n=r.value.replace(/\{(.*?)\}/g,((e,r)=>new Function("state",`with(state) { return ${r} }`)(t)));e.setAttribute(r.name,n)}}))}));e.childNodes.forEach((e=>{e.nodeType===Node.TEXT_NODE&&(e=>{const t=e.textContent||"";if(t.includes("{")&&t.includes("}")){const r=t.split(/(\{.*?\})/),n=document.createDocumentFragment();r.forEach((e=>{if(e.startsWith("{")&&e.endsWith("}")){const t=e.slice(1,-1).trim(),r=document.createTextNode("");n.appendChild(r),r.textContent=_(t)}else n.appendChild(document.createTextNode(e))})),e.parentNode.replaceChild(n,e)}})(e)}))};u(),(p[i]??=[]).push({update:u}),e.remove()},K={},R={use:e=>({_value:e,get value(){return this._value},set value(e){this._value!==e&&(this._value=e,M("value"))}}),watch:(e,t,r={})=>{"function"==typeof e?b[e.toString()]=[{callback:t,...r}]:e&&"object"==typeof e&&"_value"in e&&(b[e._value]=[{callback:t,...r}])},computed:e=>({_cached:void 0,_dirty:!0,get value(){return this._dirty&&(this._cached=e(),this._dirty=!1),this._cached}}),onMounted:e=>{W("mounted",e)},onBeforeMount:e=>{W("beforeMount",e)},onUpdated:e=>{W("updated",e)},onBeforeUpdate:e=>{W("beforeUpdate",e)},emit:D,on:q,useState:e=>{const t=R.use(e);return[t,e=>{t.value="function"==typeof e?e(t.value):e}]},effect:(e,t=[])=>{const r=()=>{try{e()}catch(e){console.error("Error in effect:",e)}};t.forEach((e=>{e&&"object"==typeof e&&"_value"in e&&R.watch(e,r)})),r()},useRef:()=>({current:null,set value(e){this.current=e},get value(){return this.current}})};let G={};if(f)try{G=f(R)||{},Object.entries(G).forEach((([e,t])=>{t&&"object"==typeof t&&"_value"in t?Object.defineProperty($,e,{get:()=>t.value,set:e=>{t.value=e},enumerable:!0}):$[e]=t}))}catch(e){console.error("Error in setup function:",e)}const J=e=>{if(!(e instanceof HTMLElement))return;const t=e.getAttribute("i-data");if(t){try{const e=new Function("return "+t)();Object.assign($,T(e))}catch(e){console.error("Error evaluating i-data directive:",e)}e.removeAttribute("i-data")}},z=(e,t,r)=>{const[n,...o]=t.split("."),i={capture:o.includes("capture"),once:o.includes("once"),passive:o.includes("passive")};e.addEventListener(n,(e=>{try{if(r.includes("++")||r.includes("--")){const e=r.replace(/[\+\-]+/g,"").trim(),t=r.includes("++");return $[e]=$[e]||0,$[e]=t?$[e]+1:$[e]-1,void M(e)}new Function("state","event",`with(state) { ${r} }`).call($,$,e),M()}catch(e){console.error(`Error in event handler "${r}":`,e)}}),i)};return{mount:C((function(e){if(h=document.querySelector(e),!h)throw new Error(`Element with selector "${e}" not found.`);var t;U("beforeCreate"),U("created"),i&&i.call($),U("beforeMount"),s.forEach((e=>{"function"==typeof e&&e({createPlugin:A,state:$,bindings:p})})),(()=>{const e=h.querySelector("template"),t=e?e.innerHTML.trim():"string"==typeof c?c.trim():h.innerHTML.trim();if(!t)throw new Error("No template provided and container is empty");h.innerHTML="",h.innerHTML=t,Array.from(h.childNodes).forEach(H)})(),h.querySelectorAll("*").forEach((e=>{Array.from(e.attributes).forEach((t=>{if(t.name.startsWith("@")){const[n,...o]=t.name.slice(1).split("."),i=t.value.trim(),a={capture:o.includes("capture"),once:o.includes("once"),passive:o.includes("passive")},c=t=>{try{if(o.includes("stop")&&t.stopPropagation(),o.includes("prevent")&&t.preventDefault(),o.includes("self")&&t.target!==e)return;if(t instanceof KeyboardEvent){const e=o.filter((e=>["ctrl","alt","shift","meta","Tab","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(e))),r=e.every((e=>t[`${e}Key`]));if(e.length>0&&!r)return;const n=o.find((e=>/^[0-9]+$/.test(e)));if(n&&t.keyCode!==parseInt(n))return;const i=o.find((t=>!e.includes(t)&&!/^[0-9]+$/.test(t)));if(i&&t.key.toLowerCase()!==i.toLowerCase())return}if(t instanceof MouseEvent){const e={left:0,middle:1,right:2},r=o.find((t=>Object.keys(e).includes(t)));if(r&&t.button!==e[r])return}r&&r[i]?r[i].call($,t):new Function("state","event",`with(state) { ${i} }`).call($,$,t),M()}catch(e){console.error(`Error executing event handler: ${i}`,e)}};let s=c;if(o.includes("debounce")){const e=parseInt(o[o.indexOf("debounce")+1])||300;s=debounce(c,e)}if(o.includes("throttle")){const e=parseInt(o[o.indexOf("throttle")+1])||300;s=throttle(c,e)}e.addEventListener(n,s,a),e.removeAttribute(t.name)}}))})),h.querySelectorAll("[\\i-ref]").forEach((e=>{if(!(e instanceof HTMLElement))return;const t=e.getAttribute("i-ref");t&&(y[t]=e,e.removeAttribute("i-ref"))})),k(),h.querySelectorAll("[\\i-html]").forEach((e=>{if(!(e instanceof HTMLElement))return;const t=e.getAttribute("i-html");if(!t)return;const r=()=>{try{let r=new Function("state","helpers",`with(state) { with(helpers) { return ${t} } }`)($,K);r=r.replace(/\{(.*?)\}/g,((e,t)=>new Function("state",`with(state) { return ${t} }`)($))),e.innerHTML=r,e.querySelectorAll("*").forEach((e=>{e instanceof HTMLElement&&n(e)}))}catch(e){console.error("Error applying i-html directive:",e)}},n=e=>{Array.from(e.childNodes).forEach((e=>{e.nodeType===Node.TEXT_NODE&&o(e)})),Array.from(e.attributes).forEach((t=>{t.value.includes("{")&&t.value.includes("}")&&i(e,t)}))},o=e=>{const t=e.textContent||"";if(t.includes("{")&&t.includes("}")){const r=t.split(/(\{.*?\})/),n=document.createDocumentFragment();r.forEach((e=>{if(e.startsWith("{")&&e.endsWith("}")){const t=e.slice(1,-1).trim(),r=document.createTextNode("");n.appendChild(r);const o=()=>{r.textContent=_(t)};o(),Object.keys($).forEach((e=>{(p[e]??=[]).push({update:o})}))}else n.appendChild(document.createTextNode(e))})),e.parentNode.replaceChild(n,e)}},i=(e,t)=>{const r=t.value,n=()=>{const n=r.replace(/\{(.*?)\}/g,((e,t)=>new Function("state",`with(state) { return ${t} }`)($)));e.setAttribute(t.name,n)};n(),Object.keys($).forEach((e=>{(p[e]??=[]).push({update:n})}))};r(),Object.keys($).forEach((e=>{(p[e]??=[]).push({update:r})})),e.removeAttribute("i-html")})),h.querySelectorAll("[i-transition]").forEach((e=>{if(!(e instanceof HTMLElement))return;const t=e.getAttribute("i-transition");if(!t)return;const[r,n,o]=t.split(",").map((e=>e.trim())),i=n?`${n}ms`:"300ms",a=o||"ease";e.style.transition=`opacity ${i} ${a}, transform ${i} ${a}`;const c=(t,r)=>new Promise((n=>{let o=!1;return t.before(e),t.during(e,(()=>{o||(t.after(e),r&&r(),n())})),()=>{o=!0,t.cancelled(e),n()}}));e._transitionShow=async t=>{e.style.display="",await c({before:I.beforeEnter,during:I.enter,after:I.afterEnter,cancelled:I.enterCancelled},t)},e._transitionHide=async e=>{await c({before:I.beforeLeave,during:I.leave,after:I.afterLeave,cancelled:I.leaveCancelled},e)},e.style.display="none",e.removeAttribute("i-transition")})),h.querySelectorAll("*").forEach((e=>{e instanceof HTMLElement&&Array.from(e.attributes).forEach((t=>{const r=t.name.match(/^(?:i-bind:|:)(.+)$/);if(!r)return;const[,n]=r,o=t.value,i=()=>{try{let t=new Function("state","helpers",`with(state) { with(helpers) { return ${o} } }`)($,K);"class"===n?"object"==typeof t&&null!==t?Object.entries(t).forEach((([t,r])=>{e.classList.toggle(t,!!r)})):e.className=t:"style"===n?"object"==typeof t&&null!==t?Object.entries(t).forEach((([t,r])=>{e.style[t]=r})):e.setAttribute("style",t):!1===t?e.removeAttribute(n):e.setAttribute(n,!0===t?"":t)}catch(e){console.error(`Error applying bind directive for ${n}:`,e)}};i(),(p[o]??=[]).push({update:i}),e.removeAttribute(t.name)}))})),Object.entries(S).forEach((([e,r])=>{r.includes(t)&&(delete m[e],L(e))})),h.querySelectorAll("[\\i-show]").forEach((e=>{e instanceof HTMLElement&&X(e)})),o&&o.call($),U("mounted"),Object.keys($).forEach((e=>L(e)))}),"Error mounting application"),onUpdated:e=>{if("function"==typeof e){const t=C(e,"Error in onUpdated callback");(b.__updated__??=[]).push({callback:t})}},createPlugin:A,emit:D,on:q,addLifecycleHook:W,applyMixin:B,component:w,render:e=>{const t=document.createElement("template");return t.innerHTML=e.trim(),t.content},power:e=>{Object.entries(e).forEach((([e,t])=>{K[e]="function"==typeof t?(...r)=>{try{return t(...r.map((e=>"string"==typeof e&&e.includes("{")&&e.includes("}")?new Function("state","helpers",`with(state) { with(helpers) { return ${e.slice(1,-1)} } }`)($,K):e)))}catch(t){return console.error(`Error in helper function '${e}':`,t),""}}:t}))}}};export const debounce=(e,t)=>{let r;return function(...n){clearTimeout(r),r=setTimeout((()=>{clearTimeout(r),e(...n)}),t)}};export const throttle=(e,t)=>{let r;return function(...n){r||(e(...n),r=!0,setTimeout((()=>r=!1),t))}};export{createApp};

package/dist/router.js

@@ -0,0 +1,40 @@
+import { createApp } from "./olova.js";
+class Router {
+  constructor() {
+    (this.routes = new Map()), (this.currentApp = null), this.init();
+  }
+  init() {
+    window.addEventListener("popstate", () => this.handleRoute()),
+      document.addEventListener("click", (t) => {
+        if (t.target.matches("a")) {
+          t.preventDefault();
+          const e = t.target.getAttribute("href");
+          this.navigate(e);
+        }
+      }),
+      window.addEventListener("load", () => {
+        this.handleRoute();
+      });
+  }
+  add(t, e) {
+    return this.routes.set(t, e), this;
+  }
+  navigate(t) {
+    window.history.pushState(null, "", t), this.handleRoute();
+  }
+  handleRoute() {
+    const t = window.location.pathname,
+      e = this.routes.get(t),
+      n = document.querySelector("[i-view]");
+    if (n)
+      if (e) {
+        this.currentApp && (n.innerHTML = "");
+        const t = document.createElement("div");
+        (t.id = "route-container"),
+          n.appendChild(t),
+          (this.currentApp = createApp({ ...e })),
+          this.currentApp.mount("#route-container");
+      } else n.innerHTML = "<h1>404 Not Found</h1>";
+  }
+}
+export const router = new Router();

package/package.json

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