vaderjs 1.3.3-alpha-60 → 1.3.3-alpha-61

package/client/index.js

@@ -1,17 +1,8 @@
-window.Vader = {
-  version: "1.3.3", 
-};
-window.componentRegistry = {};
-let errors = {
-  "SyntaxError: Unexpected token '<'": "You forgot to enclose tags in a fragment <></>",
-} 
- 
-let mounts = [];
 /**
  * @method strictMount
  * @description  This method allows you to await until the component is mounted before running a callback
- * @param {*} key 
- * @param {*} callback 
+ * @param {Component key} key 
+ * @param {Function} callback 
  */
 export const strictMount = (key, callback) => {
    

package/package.json

@@ -2,7 +2,7 @@
   "name": "vaderjs",
   "description": "A Reactive library aimed to helping you build reactive applications inspired by react.js",
   "module": "vader.js",
-  "version": "1.3.3-alpha-60",
+  "version": "1.3.3-alpha-61",
   "bin": {
     "vader": "./vader.js"
   },

package/runtime/router.js

@@ -1 +1 @@
-import{Component}from"./vader.js";let middlewares=[];class VaderRouter{constructor(t,e){this.routes=[],this.middlewares=[],this.errorMiddlewares=[],this.listeners=[],this.basePath=t}get(t,e){this.routes.push({path:t,handler:e,method:"get"})}use(t){console.log(t),this.middlewares.push(t)}listen(t,e){t||(t=Math.random().toString(36).substring(7)),this.listeners.push(t),1===this.listeners.length?this.handleRoute(window.location.hash):this.listeners.pop(),e&&e(),window.onhashchange=()=>{this.handleRoute(window.location.hash)}}extractParams(t,e){const s=t.split("/"),r=e.split("/"),n={};return s.forEach(((t,e)=>{if(t.startsWith(":")){const s=t.slice(1);n[s]=r[e]}else if(t.startsWith("*")){r.slice(e).forEach(((t,e)=>{n[e]=t}))}})),n}extractQueryParams(t){const e=t.split("?")[1];if(!e)return{};const s={};return e.split("&").forEach((t=>{const[e,r]=t.split("=");s[e]=r})),s}handleRoute(t){let e=200,s=t=t.slice(1),r=this.routes.find((e=>{if(e.path===t)return!0;if(""===t&&"/"===e.path)return!0;if(t.includes("?")&&(t=t.split("?")[0]),e.path.includes("*")||e.path.includes(":")){const s=e.path.split("/"),r=t.split("/");if(s.length!==r.length&&!e.path.endsWith("*"))return!1;for(let t=0;t<s.length;t++){const e=s[t],n=r[t];if(!e.startsWith(":")&&!e.startsWith("*")&&e!==n)return!1}return!0}const r=this.extractParams(e.path,s);return Object.keys(r).length>0}));r||(r=this.routes.find((t=>{if(t.path.includes("/404"))return this.error=!0,!0;!this.error&&t.path.includes("/404")&&(window.location.hash=this.basePath)})),e=r?200:404);const n=this.extractQueryParams(s),o=r&&r.path?this.extractParams(r.path,s):{},i={headers:{},params:o,query:n,path:t,method:r?r.method:"get"};window.$CURRENT_URL=i.path,window.$FULL_URL=window.location.href.replace("#","");const a={status:e,log:t=>{void 0===t?console.log(`${i.path} ${i.method} ${a.status} ${i.timestamp}`):console.table({"Request Path":i.path,"Request Method":r.method,"Response Status":a.status,"Request Timestamp":i.timestamp})},refresh:()=>{this.handleRoute(window.location.hash)},redirect:t=>{!t.startsWith("/")&&(t=`/${t}`),window.location.hash=`#${t}`},render:async(t,e,s)=>{try{let i=new Component;if("function"==typeof(r=t.default)&&/^class\s/.test(Function.prototype.toString.call(r))){let e=new t.default;i.state=e.state,console.log(i.state),i=e}else{let r=t.default.toString(),a=r.split("this.key")[1]?r.split("this.key")[1].split("=")[1].split(";")[0].trim():r.split('key="')?r.split('key="')[1].split('"')[0]:null,l=(r.match(/return\s*`([\s\S]*)`/),r.split("return")[1].split("`")[0]);l=l.replace(/,\s*$/,""),i.key=a;let h={key:i.key,render:()=>t.default.apply?t.default.apply(i,[e,s]):new t.default,request:e,response:s,params:o,queryParams:n,reset:i.reset.bind(i),onMount:i.onMount.bind(i),useState:null,router:{use:i.router.use.bind(i)},bindMount:i.bindMount.bind(i),memoize:i.memoize.bind(i),createComponent:i.createComponent.bind(i),isChild:!1,useState:i.useState.bind(i),parseStyle:i.parseStyle.bind(i),bind:i.bind.bind(i),hydrate:i.hydrate.bind(i)};i.render=h.render,i=h}if(!document.querySelector("#root"))throw new Error("Root element not found, please add an element with id root");i.reset(),i.components={},i.request=e,i.response=s,i.router.use&&!i.isChild?await new Promise((async t=>{if(await i.router.use(e,s),e.pause){let s=setInterval((()=>{e.pause||(t(),clearInterval(s))}),1e3)}else t()})):i.router.use&&i.isChild&&console.warn("Router.use() is not supported in child components");const a=await i.render();document.querySelector("#root").innerHTML=a,i.bindMount(),i.onMount()}catch(t){console.error(t)}var r},setQuery:t=>{let e="";Object.keys(t).forEach(((s,r)=>{e+=`${0===r?"?":"&"}${s}=${t[s]}`}));let s=window.location.hash.split("?")[0];e=e.replace("/","-").replaceAll("/","-"),window.location.hash=`${s}${e}`},send:t=>{document.querySelector("#root").innerHTML=t},json:t=>{const e=document.querySelector("#root");e.innerHTML="";const s=document.createElement("pre");s.textContent=JSON.stringify(t,null,2),e.appendChild(s)}};middlewares.forEach((t=>{t(i,a)})),r&&r.handler(i,a)}}window.VaderRouter=VaderRouter;export default VaderRouter;
+import{Component}from"./vader.js";let middlewares=[];class VaderRouter{constructor(e,t){this.routes=[],this.middlewares=[],this.errorMiddlewares=[],this.listeners=[],this.basePath=e}get(e,t){this.routes.push({path:e,handler:t,method:"get"})}use(e){console.log(e),this.middlewares.push(e)}listen(e,t){e||(e=Math.random().toString(36).substring(7)),this.listeners.push(e),1===this.listeners.length?this.handleRoute(window.location.hash):this.listeners.pop(),t&&t(),window.onhashchange=()=>{this.handleRoute(window.location.hash)}}extractParams(e,t){const s=e.split("/"),n=t.split("/"),r={};return s.forEach(((e,t)=>{if(e.startsWith(":")){const s=e.slice(1);r[s]=n[t]}else if(e.startsWith("*")){n.slice(t).forEach(((e,t)=>{r[t]=e}))}})),r}extractQueryParams(e){const t=e.split("?")[1];if(!t)return{};const s={};return t.split("&").forEach((e=>{const[t,n]=e.split("=");s[t]=n})),s}handleRoute(e){let t=200,s=e=e.slice(1),n=this.routes.find((t=>{if(t.path===e)return!0;if(""===e&&"/"===t.path)return!0;if(e.includes("?")&&(e=e.split("?")[0]),t.path.includes("*")||t.path.includes(":")){const s=t.path.split("/"),n=e.split("/");if(s.length!==n.length&&!t.path.endsWith("*"))return!1;for(let e=0;e<s.length;e++){const t=s[e],r=n[e];if(!t.startsWith(":")&&!t.startsWith("*")&&t!==r)return!1}return!0}const n=this.extractParams(t.path,s);return Object.keys(n).length>0}));n||(n=this.routes.find((e=>{if(e.path.includes("/404"))return this.error=!0,!0;!this.error&&e.path.includes("/404")&&(window.location.hash=this.basePath)})),t=n?200:404);const r=this.extractQueryParams(s),o=n&&n.path?this.extractParams(n.path,s):{},a={headers:{},params:o,query:r,path:e,url:window.location.href+e,method:n?n.method:"get",pause:e=>{a.pause=e},timestamp:Date.now()};window.$CURRENT_URL=a.path,window.$FULL_URL=window.location.href.replace("#","");const i={status:t,log:e=>{void 0===e?console.log(`${a.path} ${a.method} ${i.status} ${a.timestamp}`):console.table({"Request Path":a.path,"Request Method":n.method,"Response Status":i.status,"Request Timestamp":a.timestamp})},refresh:()=>{this.handleRoute(window.location.hash)},redirect:e=>{!e.startsWith("/")&&(e=`/${e}`),window.location.hash=`#${e}`},render:async(e,t,s)=>{function n(e){return"function"==typeof e&&/^class\s/.test(Function.prototype.toString.call(e))}try{let a=new Component;if(n(e.default)){let t=new e.default;a.state=t.state,console.log(a.state),a=t}else{let n=e.default.toString(),i=n.split("this.key")[1]?n.split("this.key")[1].split("=")[1].split(";")[0].trim():n.split('key="')?n.split('key="')[1].split('"')[0]:null,l=(n.match(/return\s*`([\s\S]*)`/),n.split("return")[1].split("`")[0]);l=l.replace(/,\s*$/,""),a.key=i;let u={key:a.key,render:()=>e.default.apply?e.default.apply(a,[t,s]):new e.default,request:t,response:s,params:o,queryParams:r,reset:a.reset.bind(a),onMount:a.onMount.bind(a),useState:null,router:{use:a.router.use.bind(a)},bindMount:a.bindMount.bind(a),memoize:a.memoize.bind(a),createComponent:a.createComponent.bind(a),isChild:!1,useState:a.useState.bind(a),parseStyle:a.parseStyle.bind(a),bind:a.bind.bind(a),hydrate:a.hydrate.bind(a),js:l};a.render=u.render,a=u}if(!document.querySelector("#root"))throw new Error("Root element not found, please add an element with id root");a.reset(),a.components={},a.request=t,a.response=s,a.router.use&&!a.isChild?await new Promise((async r=>{if(n(e.default))switch(await a.router.use(t,s),t.pause){case!0:console.log("pausing",t.pause);let e=setInterval((()=>{t.pause?console.log("still pausing",t.pause):(console.log("resuming"),clearInterval(e),r())}),1e3);break;case!1:r()}else switch(new Function("req","res",a.js).apply(a,[t,s]),await a.router.use(t,s),t.pause){case!0:console.log("pausing",t.pause);let e=setInterval((()=>{t.pause?console.log("still pausing  request",t.url):(console.log("resuming"),clearInterval(e),r())}),1e3);break;case!1:r()}})):a.router.use&&a.isChild&&console.warn("Router.use() is not supported in child components");const i=await a.render();document.querySelector("#root").innerHTML=i,a.bindMount(),a.onMount()}catch(e){console.error(e)}},setQuery:e=>{let t="";Object.keys(e).forEach(((s,n)=>{t+=`${0===n?"?":"&"}${s}=${e[s]}`}));let s=window.location.hash.split("?")[0];t=t.replace("/","-").replaceAll("/","-"),window.location.hash=`${s}${t}`},send:e=>{document.querySelector("#root").innerHTML=e},json:e=>{const t=document.querySelector("#root");t.innerHTML="";const s=document.createElement("pre");s.textContent=JSON.stringify(e,null,2),t.appendChild(s)}};middlewares.forEach((e=>{e(a,i)})),n&&n.handler(a,i)}}window.VaderRouter=VaderRouter;export default VaderRouter;

package/runtime/vader.js

@@ -1 +1 @@
-window.Vader={version:"1.3.3"},window.componentRegistry={};let errors={"SyntaxError: Unexpected token '<'":"You forgot to enclose tags in a fragment <></>"},mounts=[],hasRan=[];export const strictMount=(e,t)=>{let n=setInterval((()=>{document.querySelector(`[key="${e}"]`)&&!hasRan.includes(e)&&(clearInterval(n),t(),hasRan.push(e))}),120)};export class Component{constructor(){this.state={},this.key=null,this.components={},this.mounted=!1,this.checkIFMounted(),this.memoizes=[],this.functions=[],this.children=[],this.parentNode={},this.request={headers:{},method:"GET",params:{},path:"",query:{}},this.response={json:e=>{},send:e=>{},redirect:e=>{},render:async e=>{},log:e=>{},setQuery:e=>{}},this.router={use:e=>{}}}createComponent(e,t,n){function s(e){return"function"==typeof e&&/^class\s/.test(Function.prototype.toString.call(e))}let r=s(e)?new e(t):null;if(!e)throw new Error("Component must be defined");let o=new Component(t);if(s(e.default?e.default:e))r.props=t,r.children=n,r.props.children=n.join(""),r.parentNode=this,r.request=this.request,r.response=this.response,r.key=t.key||null,o=r;else{e.default&&(e=e.default);let s=e.toString(),i=s.split("this.key")[1]?s.split("this.key")[1].split("=")[1].split(";")[0].trim():s.split('key="')?s.split('key="')[1].split('"')[0]:null;t.children=n.join(""),o.key=i,t.key=i,r={key:t.key?t.key:i,render:()=>e.apply(o,[t]),request:this.request,response:this.response,reset:o.reset.bind(o),onMount:o.onMount.bind(o),parentNode:this,useState:o.useState.bind(o),useReducer:o.useReducer.bind(o),useRef:o.useRef.bind(o),router:{use:o.router.use.bind(o)},bindMount:o.bindMount.bind(o),memoize:o.memoize.bind(o),createComponent:o.createComponent.bind(o),isChild:!0,parseStyle:o.parseStyle.bind(o),components:{},onUnmount:o.onUnmount.bind(o),onMount:o.onMount.bind(o),hydrate:o.hydrate.bind(o),functions:[],memoizes:[],state:{}},o.render=r.render.bind(r),o=r}return this.components[t.key]||(this.components[t.key]=o),this.children.push(o),this.components[t.key]}reset(){Object.keys(this.components).forEach((e=>{this.components[e].onUnmount(),delete this.components[e]})),this.state={},this.children=[]}memoize(e){if(!e.key)throw new Error("Component must have a static key");if(!0==!this.memoizes.includes(e.key))this.memoizes.push(e.key),this.components[e.key]=e;let t=this.components[e.key];t.bindMount(),t.parentNode=this,t.props=e.props,t.request=this.request,t.response=this.response;let n=t.render();return n&&n.split(">,").length>1&&(n=n.replaceAll(">,",">")),`<div key="${e.key}">${n}</div>`}parseStyle(e){let t="";return Object.keys(e).forEach((n=>{let s=e[n];n=n.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g,"$1-$2").toLowerCase(),t+=`${n}:${s};`})),t}bindMount(){mounts.push(this)}domDifference(e,t){let n=[];for(let s=0;s<e.length;s++){let r=e[s],o=t[s];r&&o&&!r.isEqualNode(o)&&n.push({type:"replace",old:r,new:o.cloneNode(!0)})}return n}updateChangedElements(e){e.forEach((e=>{switch(e.type){case"replace":e.old.parentNode.replaceChild(e.new,e.old);break;case"remove":e.old.remove();break;case"add":e.old.appendChild(e.new.cloneNode(!0))}}))}hydrate(e){if(e){let t=(new DOMParser).parseFromString(this.render(),"text/html").body.firstChild,n=document.body.querySelectorAll(`[ref="${e}"]`),s=t.querySelectorAll(`[ref="${e}"]`),r=this.domDifference(n,s);this.updateChangedElements(r)}else{let e=this.key?document.querySelector(`[key="${this.key}"]`):null,t=(new DOMParser).parseFromString(this.render(),"text/html").body;if(t=document.createElement("div").appendChild(t),!e&&(e=document.querySelector(`[key="${t.attributes?.key?.value||null}"]`)),!e)return void console.error('Hydration failed, component not found got ensure you have set key="a value" on the component or this.key inside of function or render method body');t.querySelectorAll("*").forEach((e=>{console.log(e.innerHTML!==document.querySelector(`[key="${e.attributes.key.value}"]`).innerHTML),e.hasAttribute("key")&&e.innerHTML!==document.querySelector(`[key="${e.attributes.key.value}"]`).innerHTML&&document.querySelector(`[key="${e.attributes.key.value}"]`).replaceWith(e)}))}}patch(e,t){const n=this.domDifference(e,t);this.updateChangedElements(n)}handleObject(obj){try{obj=JSON.parse(obj)}catch(e){}return eval(obj)}bind(e,t,n,s,r,...o){s=s+this.key||2022;let i={},u=(r=r.replace(/,,/g,",")).replaceAll(",,",",");for(var a in o){let e=o[a];i[u.split(",")[a]]=e}r=r.replace(",,",",");let l=new Function(`${r}`,`\n       return (async (${r}) => { \n          ${e.toString()}\n       })(${Object.keys(i).join(",")}) \n     `);return l=l.bind(this),this.functions.find((e=>e.ref===s))||document.addEventListener(`$dispatch_#id=${s}`,(n=>{let{name:r,event:o}=n.detail;if(r===s){let n=this.functions.find((e=>e.ref===s)).params;Object.keys(n).forEach((e=>{n[e]instanceof CustomEvent&&delete n[e],void 0===n[e]?delete n[e]:n[e]})),t?e(o,...Object.values(n)):l(...Object.values(n))}})),window.callFunction=(e,t)=>{document.dispatchEvent(new CustomEvent(`$dispatch_#id=${e}`,{detail:{name:e,params:null,event:t}}))},this.functions.find((e=>e.ref===s))?!t&&(this.functions.find((e=>e.ref===s)).params=i):this.functions.push({ref:s,params:i}),n?e:`((event)=>{event.target.ev = event; callFunction('${s}', event.target.ev)})(event)`}useState(e,t){this.state[e]||(this.state[e]=t);let n=()=>this.state[e],s=n();return[s,(t,r)=>{this.state[e]=t,this.hydrate(r),s=n()}]}useRef(e=null,t){this.state[e]||(this.state[e]=t);return{bind:e+this.key,current:(()=>document.querySelector(`[ref="${e+this.key}"]`)||t)()}}useReducer(e=null,t,n=null){this.state[e]||(this.state[e]=t);const s=()=>this.state[e];let r=s();return[s(),(t,o)=>{const i=n(r,t)??t;this.state[e]=i,this.hydrate(o),r=s()}]}render(){}checkIFMounted(){new MutationObserver((e=>{e.forEach((e=>{e.target.querySelector(`[key="${this.key}"]`)&&!this.mounted&&(this.onMount(),this.mounted=!0),Array.from(e.removedNodes).find((e=>e.attributes&&e.attributes.key&&e.attributes.key.value===this.key))&&(this.onUnmount(),this.reset())}))})).observe(document.body,{childList:!0,subtree:!0})}onMount(){}onUnmount(){}}export const useState=(e,t)=>{states[e]||(states[e]=t);return[states[e],(t,n)=>{states[e]=t,this.hydrate(n)}]};export const useReducer=(e,t)=>[e,e=>{}];export const useRef=e=>({current:e,bind:""});export default{Component:Component,useRef:useRef,useReducer:useReducer,useState:useState,strictMount:strictMount};
+window.Vader={version:"1.3.3"},window.componentRegistry={};let errors={"SyntaxError: Unexpected token '<'":"You forgot to enclose tags in a fragment <></>"},mounts=[],hasRan=[];export const strictMount=(e,t)=>{let n=setInterval((()=>{document.querySelector(`[key="${e}"]`)&&!hasRan.includes(e)&&(clearInterval(n),t(),hasRan.push(e))}),120)};export class Component{constructor(){this.state={},this.key=null,this.components={},this.mounted=!1,this.checkIFMounted(),this.memoizes=[],this.functions=[],this.children=[],this.parentNode={},this.request={headers:{},method:"GET",params:{},path:"",query:{}},this.response={json:e=>{},send:e=>{},redirect:e=>{},render:async e=>{},log:e=>{},setQuery:e=>{}},this.router={use:e=>{}}}createComponent(e,t,n){function s(e){return"function"==typeof e&&/^class\s/.test(Function.prototype.toString.call(e))}let r=s(e)?new e(t):null;if(!e)throw new Error("Component must be defined");let o=new Component(t);if(s(e.default?e.default:e))r.props=t,r.children=n,r.props.children=n.join(""),r.parentNode=this,r.request=this.request,r.response=this.response,r.key=t.key||null,o=r;else{e.default&&(e=e.default);let s=e.toString(),i=s.split("this.key")[1]?s.split("this.key")[1].split("=")[1].split(";")[0].trim():s.split('key="')?s.split('key="')[1].split('"')[0]:null;t.children=n.join(""),o.key=i,t.key=i,r={key:t.key?t.key:i,render:()=>e.apply(o,[t]),request:this.request,response:this.response,reset:o.reset.bind(o),onMount:o.onMount.bind(o),parentNode:this,useState:o.useState.bind(o),useReducer:o.useReducer.bind(o),useRef:o.useRef.bind(o),router:{use:o.router.use.bind(o)},bindMount:o.bindMount.bind(o),memoize:o.memoize.bind(o),createComponent:o.createComponent.bind(o),isChild:!0,parseStyle:o.parseStyle.bind(o),components:{},onUnmount:o.onUnmount.bind(o),onMount:o.onMount.bind(o),hydrate:o.hydrate.bind(o),functions:[],memoizes:[],bind:o.bind.bind(o),state:{}},o.render=r.render.bind(r),o=r}return this.components[t.key]||(this.components[t.key]=o),this.children.push(o),this.components[t.key]}reset(){Object.keys(this.components).forEach((e=>{this.components[e].onUnmount(),delete this.components[e]})),this.state={},this.children=[]}memoize(e){if(!e.key)throw new Error("Component must have a static key");if(!0==!this.memoizes.includes(e.key))this.memoizes.push(e.key),this.components[e.key]=e;let t=this.components[e.key];t.bindMount(),t.parentNode=this,t.props=e.props,t.request=this.request,t.response=this.response;let n=t.render();return n&&n.split(">,").length>1&&(n=n.replaceAll(">,",">")),`<div key="${e.key}">${n}</div>`}parseStyle(e){let t="";return Object.keys(e).forEach((n=>{let s=e[n];n=n.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g,"$1-$2").toLowerCase(),t+=`${n}:${s};`})),t}bindMount(){mounts.push(this)}domDifference(e,t){let n=[];for(let s=0;s<e.length;s++){let r=e[s],o=t[s];r&&o&&!r.isEqualNode(o)&&n.push({type:"replace",old:r,new:o.cloneNode(!0)})}return n}updateChangedElements(e){e.forEach((e=>{switch(e.type){case"replace":e.old.parentNode.replaceChild(e.new,e.old);break;case"remove":e.old.remove();break;case"add":e.old.appendChild(e.new.cloneNode(!0))}}))}hydrate(e){if(e){let t=(new DOMParser).parseFromString(this.render(),"text/html").body.firstChild,n=document.body.querySelectorAll(`[ref="${e}"]`),s=t.querySelectorAll(`[ref="${e}"]`),r=this.domDifference(n,s);this.updateChangedElements(r)}else{let e=this.key?document.querySelector(`[key="${this.key}"]`):null,t=(new DOMParser).parseFromString(this.render(),"text/html").body;if(t=document.createElement("div").appendChild(t),!e&&(e=document.querySelector(`[key="${t.attributes?.key?.value||null}"]`)),!e)return void console.error('Hydration failed, component not found got ensure you have set key="a value" on the component or this.key inside of function or render method body');t.querySelectorAll("*").forEach((e=>{e.hasAttribute("key")&&e.innerHTML!==document.querySelector(`[key="${e.attributes.key.value}"]`).innerHTML&&document.querySelector(`[key="${e.attributes.key.value}"]`).replaceWith(e)}))}}patch(e,t){const n=this.domDifference(e,t);this.updateChangedElements(n)}handleObject(obj){try{obj=JSON.parse(obj)}catch(e){}return eval(obj)}bind(e,t,n,s,...r){n=n+this.key||2022;let o={},i=(s=s.replace(/,,/g,",")).replaceAll(",,",",");for(var u in r){let e=r[u];o[i.split(",")[u]]=e}s=s.replace(",,",",");let a=null;try{a=new Function(`event, ${s}`,` \n          return (async (event, ${s}) => {    \n              ${e.toString()}\n          })(event, ${Object.keys(o).join(",")}) \n        `)}catch(e){let{message:t}=e;console.error(`Error in function ${n} ${t}`)}return a=a.bind(this),this.functions.find((e=>e.ref===n))||document.addEventListener(`$dispatch_#id=${n}`,(e=>{let{name:t,event:s}=e.detail;if(t===n){let e=this.functions.find((e=>e.ref===n)).params;Object.keys(e).forEach((t=>{e[t]instanceof CustomEvent&&delete e[t],void 0===e[t]?delete e[t]:e[t]})),a(s,...Object.values(e))}})),window.callFunction=(e,t)=>{document.dispatchEvent(new CustomEvent(`$dispatch_#id=${e}`,{detail:{name:e,params:null,event:t}}))},!this.functions.find((e=>e.ref===n))&&this.functions.push({ref:n,params:o}),t?e:`((event)=>{event.target.ev = event; callFunction('${n}', event.target.ev)})(event)`}useState(e,t){this.state[e]||(this.state[e]=t);let n=()=>this.state[e],s=n();return[s,(t,r)=>{this.state[e]=t,this.hydrate(r),s=n()}]}useRef(e=null,t){this.state[e]||(this.state[e]=t);return{bind:e+this.key,current:(()=>document.querySelector(`[ref="${e+this.key}"]`)||t)()}}useReducer(e=null,t,n=null){this.state[e]||(this.state[e]=t);const s=()=>this.state[e];let r=s();return[s(),(t,o)=>{const i=n(r,t)??t;this.state[e]=i,this.hydrate(o),r=s()}]}render(){}checkIFMounted(){new MutationObserver((e=>{e.forEach((e=>{e.target.querySelector(`[key="${this.key}"]`)&&!this.mounted&&(this.onMount(),this.mounted=!0),Array.from(e.removedNodes).find((e=>e.attributes&&e.attributes.key&&e.attributes.key.value===this.key))&&(this.onUnmount(),this.reset())}))})).observe(document.body,{childList:!0,subtree:!0})}onMount(){}onUnmount(){}}export const useState=(e,t)=>{states[e]||(states[e]=t);return[states[e],(t,n)=>{states[e]=t,this.hydrate(n)}]};export const useReducer=(e,t)=>[e,e=>{}];export const useRef=e=>({current:e,bind:""});export default{Component:Component,useRef:useRef,useReducer:useReducer,useState:useState,strictMount:strictMount};

package/vader.js

@@ -30,6 +30,8 @@ Object.keys(dirs).map((key, index) => {
 
 function Compiler(func, file) {
   let string = func;
+  // Remove block comments 
+ 
   let returns = []
   let comments = string.match(/\{\s*\/\*.*\*\/\s*}/gs)?.map((comment) => comment.trim());
 
@@ -104,30 +106,59 @@ function Compiler(func, file) {
       let [, attributeName, attributeValue] = functionMatch;
       let attribute = {};
 
-      if (attributeValue && attributeValue.includes("=>")) {
-        let ref = Math.random().toString(36).substring(2);
-        let old = `${attributeName}${attributeValue}`;
-
-        //ex: (params)=>{console.log(params)} => console.log(params
-        // do not split all =>
-        let newvalue = attributeValue.split("=>").slice(1).join("=>").trim();
-
+      if (attributeValue && attributeValue.includes("=>") || attributeValue && attributeValue.includes("function")) {
+        let functionparams = [];
+        // ref with no numbers
+        let ref = Math.random().toString(36).substring(2).split('').filter((e) => !Number(e)).join('')
+        let old = `${attributeName}${attributeValue}`
+        functionNames.forEach((name) => {
+          string.split("\n").forEach((line) => {
+            if (line.includes(name) && line.includes("function")) {
+              line = line.trim();
+              line = line.replace(/\s+/g, " ");
+
+              let ps = line.split("(").slice(1).join("(").split(")")[0].trim();
+
+              // remove comments
+              ps = ps.match(/\/\*.*\*\//gs)
+                ? ps.replace(ps.match(/\/\*.*\*\//gs)[0], "")
+                : ps; 
+              functionparams.push({ ref: ref, name: name, params: ps });
+               
+            }
+          });
+        });
+        let elementMatch = string.match(/<([a-zA-Z0-9_-]+)([^>]*)>/gs);
+        let isJSXComponent = false;
+        elementMatch.forEach((element) => {
+          element = element.trim().replace(/\s+/g, " ");
+          if (element.includes(attributeName)) {
+            let elementTag = element
+              .split("<")[1]
+              .split(">")[0]
+              .split(" ")[0];
+            isJSXComponent = elementTag.match(/^[A-Z]/) ? true : false;
+          }
+        });   
+        let newvalue = attributeValue.includes('=>') ? attributeValue.split("=>").slice(1).join("=>").trim() : attributeValue.split("function").slice(1).join("function").trim()
+  
 
         newvalue = newvalue.trim();
 
         //remove starting {
         newvalue = newvalue.replace("{", "");
 
+       
         let params = attributeValue
           .split("=>")[0]
           .split("(")[1]
           .split(")")[0]
           .trim();
+
+        // remove comments 
         params = params.match(/\/\*.*\*\//gs)
           ? params.replace(params.match(/\/\*.*\*\//gs)[0], "")
-          : params;
-
-        let functionparams = [];
+          : params; 
         // split first {}
         newvalue = newvalue.trim();
 
@@ -142,86 +173,30 @@ function Compiler(func, file) {
           case newvalue.endsWith("}"):
             newvalue = newvalue.replace("}", "");
             break;
+        } 
+        // replace trailing }
+        newvalue = newvalue.trim();
+        if (newvalue.endsWith("}")) {
+          newvalue = newvalue.replace("}", "");
         }
-
-
-
-        let currentParams = params
-        let name = functionNames.map((name) => { return newvalue.includes(name) ? name : null }).filter(Boolean)[0]
-        switch (true) {
-          case name:
-
-            if (newvalue.includes('function')) {
-              return
-            }
-
-            name && string.split("\n").forEach((line) => {
-              if (line.includes(name) && line.includes("function")) {
-                line = line.trim();
-                line = line.replace(/\s+/g, " ");
-
-                let ps = line.split("(").slice(1).join("(").split(")")[0].trim();
-
-                // remove comments
-                ps = ps.match(/\/\*.*\*\//gs)
-                  ? ps.replace(ps.match(/\/\*.*\*\//gs)[0], "")
-                  : ps;
-
-                functionparams.push({ ref: ref, name: name, params: ps });
-              }
-            });
-            let isJSXComponent = false;
-            let elementMatch = string.match(/<([a-zA-Z0-9_-]+)([^>]*)>/gs);
-            elementMatch.forEach((element) => {
-              element = element.trim().replace(/\s+/g, " ");
-              if (element.includes(attributeName)) {
-                let elementTag = element
-                  .split("<")[1]
-                  .split(">")[0]
-                  .split(" ")[0];
-                isJSXComponent = elementTag.match(/^[A-Z]/) ? true : false;
-              }
-            });
-
-            let functionParmas = functionparams.map((param) => { return param.params }).join(',')
-            let suppliedParams = newvalue.split("(")[1].split(")")[0].trim();
-
-            let replacement = `this.bind(${name}, true, ${isJSXComponent ? true : false}, '${ref}', "${functionParmas}", event, ${suppliedParams || null})`
-            let newattribute = `${attributeName}="\${${replacement}}", usesEvent="true", eventType="${attributeName}",data-ref="${ref}", `
-
-            string = string.replace(old, newattribute);
-            break;
-          default:
-            let elementMatch1 = string.match(/<([a-zA-Z0-9_-]+)([^>]*)>/gs);
-            let isJSXComponent1 = false;
-            elementMatch1.forEach((element) => {
-              element = element.trim().replace(/\s+/g, " ");
-              if (element.includes(attributeName)) {
-                let elementTag = element
-                  .split("<")[1]
-                  .split(">")[0]
-                  .split(" ")[0];
-                isJSXComponent1 = elementTag.match(/^[A-Z]/) ? true : false;
-              }
-
-            });
-
-
-            let otherdata = {};
-            params ? (otherdata["params"] = params) : null;
-            otherdata["jsx"] = isJSXComponent1;
-            otherdata["ref"] = ref;
-            // since js is all in one line split it
-            newvalue = newvalue.split('\n').map(line => line.trim() ? line.trim() + ';' : line).join('\n');
-            let paramString = params ? params.split(' ').map(param => param + ',').join('') : "";
-            paramString = paramString.replaceAll(',,', ',')
-            let jsxAttribute = `${attributeName}=function(${paramString}){${newvalue}}.bind(this),`
-            let newattribute2 = `${attributeName}="\${this.bind(\`${newvalue}\`, false, ${isJSXComponent1 ? true : false}, '${ref}', "${paramString}", ${params || null})}", usesEvent="true", eventType="${attributeName}",data-ref="${ref}", `
-            newattribute2 = newattribute2.replace(/\s+/g, " ")
-            string = string.replace(old, isJSXComponent1 ? jsxAttribute : newattribute2);
-            break;
-        }
-
+        console.log(newvalue)
+        functionparams.length > 0 ? params = params + ',' + functionparams.map((e) => e.name).join(',') : null  
+        newvalue = newvalue.split('\n').map(line => line.trim() ? line.trim() + ';' : line).join('\n');
+        newvalue = newvalue.replaceAll(',,', ',')
+        let paramnames = params ? params.split(',').map((e) => e.trim())  : null
+        paramnames = paramnames ? paramnames.filter((e) => e.length > 0) : null
+        // remove comments
+        paramnames = paramnames ? paramnames.map((e) => e.match(/\/\*.*\*\//gs) ? e.replace(e.match(/\/\*.*\*\//gs)[0], "") : e) : null
+        
+        let bind =  isJSXComponent ? `${attributeName}=function(${params}){${newvalue}}.bind(this)` :  `${attributeName} = "\$\{this.bind("${newvalue.replace(/\s+g/, " ")}", ${isJSXComponent}, "${ref}",   "${paramnames ?   paramnames.map((e, index)=> {
+          if(e.length < 1) return  ''
+          if(e.length > 0){
+            index == 0 ?  e : ',' + e
+         }
+          return e
+        }) : ''}" ${params ? params.split(',').map((e) => e.trim()).filter(Boolean).map((e) => `,${e}`).join('') : ''})}"`
+        bind = bind.replaceAll(/\s+/g, " "); 
+        string = string.replace(old, bind);
       }
     }
 
@@ -528,7 +503,21 @@ function Compiler(func, file) {
 
 
 
+  // replace all comments
+ 
   string = string.replaceAll('vaderjs/client', '/vader.js')
+  // replace ${... with ${
+    
+  string = string.replaceAll(/\$\{[^{]*\.{3}/gs, (match) => {
+    if (match.includes('...')) {
+      // Your logic for replacement goes here
+      // For example, you can replace '...' with some other string
+      return match.replace('...', '');
+    }
+  
+    return match;
+  });
+  
   string = string.replaceAll("<>", "`").replaceAll("</>", "`");
   string = parseComponents(string);
 
@@ -539,6 +528,7 @@ function Compiler(func, file) {
 
   string = string.replaceAll('../src', './src')
   string += `\n\n //wascompiled`;
+  
 
   string = string.replaceAll("undefined", "");
   const parse = (css) => {
@@ -585,7 +575,7 @@ function Compiler(func, file) {
             case path && path.includes('module.css'):
               let css = await fs.readFileSync(process.cwd() + path, 'utf8')
               css = css.replaceAll('.', '')
-              console
+           
               if (!name) {
                 throw new Error('Could not find name for css module ' + path + ' at' + beforeimport + ' file' + file)
               }
@@ -761,7 +751,8 @@ async function Build() {
           ecma: " 2016",
           module: true,
           compress: true,
-          mangle: true
+          mangle: true,
+          keep_fnames: true,
         })
         await writer(process.cwd() + "/dist/pages/" + fileName.replace('.jsx', '.js'), minified.code)
       } catch (error) {
@@ -829,6 +820,7 @@ async function Build() {
             ecma: " 2016",
             module: true,
             compress: true,
+            keep_fnames: true,
           })
           await writer(process.cwd() + "/dist/src/" + name.replace('.jsx', '.js'), minified.code)
         } catch (error) {