vaderjs 1.3.3-alpha-99 → 1.3.3-alpha-101

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-99",
+  "version": "1.3.3-alpha-101",
   "bin": {
     "vader": "./vader.js"
   },
@@ -28,6 +28,7 @@
   },
   "dependencies": {
     "glob": "latest",
-    "terser":"latest"
+    "terser":"latest",
+    "puppeteer":"latest"
   }
 }

package/runtime/router.js

@@ -1 +1 @@
-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):{};Object.keys(o).forEach((e=>{o[e]=o[e].split("?")?o[e].split("?")[0]:o[e]}));const a={headers:{},params:o,query:r,path:e,url:window.location.href,method:n?n.method:"get",pause:!1,timestamp:Date.now()};console.log(a),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,a=t}else{if(e.default.toString().includes("this.key"))throw new Error('Using this.key is not supported in functional components use the attribute key="a value" instead');a.key=e.default.toString().split('key="')[1]?e.default.toString().split('key="')[1].split('"')[0]:null;let n={key:a.key,render:()=>e.default.apply(a,[t,s]),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),useRef:a.useRef.bind(a),useReducer:a.useReducer.bind(a),hydrate:a.hydrate.bind(a)};a.render=n.render,a=n}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))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):(clearInterval(e),r())}),1e3);break;case!1:r()}else r();else switch(await e.default.apply(a,[t,s]),await a.router.use(t,s),t.pause){case!0:let e=setInterval((()=>{t.pause?console.log("still pausing  request",t.url):(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;
+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){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.length>0?window.location.hash:window.location.pathname):this.listeners.pop(),t&&t(),window.onhashchange=()=>{this.handleRoute(window.location.hash)}}extractParams(e,t){const s=e.split("/"),n=t.split("/"),o={};return s.forEach(((e,t)=>{if(e.startsWith(":")){const s=e.slice(1);o[s]=n[t]}else if(e.startsWith("*")){n.slice(t).forEach(((e,t)=>{o[t]=e}))}})),o}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){e=e.includes("#")?e.slice(1):e,console.log(e);let t=200,s=e,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],o=n[e];if(!t.startsWith(":")&&!t.startsWith("*")&&t!==o)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 o=this.extractQueryParams(s),r=n&&n.path?this.extractParams(n.path,s):{};Object.keys(r).forEach((e=>{r[e]=r[e].split("?")?r[e].split("?")[0]:r[e]}));const i={headers:{},params:r,query:o,path:e,fileUrl:window.location.href.split(window.location.origin)[1],url:window.location.href,method:n?n.method:"get",pause:!1,timestamp:Date.now()};window.$CURRENT_URL=i.path,window.$FULL_URL=window.location.href.replace("#","");const a={status:t,log:e=>{void 0===e?console.log(`${i.path} ${i.method} ${a.status} ${i.timestamp}`):console.table({"Request Path":i.path,"Request Method":n.method,"Response Status":a.status,"Request Timestamp":i.timestamp})},refresh:()=>{this.handleRoute(window.location.hash)},redirect:e=>{!e.startsWith("/")&&(e=`/${e}`),window.location.hash=`#${e}`},render:async(e,t,s,n)=>{function i(e){return"function"==typeof e&&/^class\s/.test(Function.prototype.toString.call(e))}try{let n=new Component;if(i(e.default)){let t=new e.default;n.state=t.state,n=t}else{if(e.default.toString().includes("this.key"))throw new Error('Using this.key is not supported in functional components use the attribute key="a value" instead');n.key=e.default.toString().split('key="')[1]?e.default.toString().split('key="')[1].split('"')[0]:null;let i={key:n.key,render:()=>e.default.apply(n,[t,s]),request:t,response:s,params:r,queryParams:o,reset:n.reset.bind(n),onMount:n.onMount.bind(n),useState:null,router:{use:n.router.use.bind(n)},bindMount:n.bindMount.bind(n),memoize:n.memoize.bind(n),createComponent:n.createComponent.bind(n),isChild:!1,useState:n.useState.bind(n),parseStyle:n.parseStyle.bind(n),bind:n.bind.bind(n),useRef:n.useRef.bind(n),useReducer:n.useReducer.bind(n),onMount:n.onMount.bind(n),onUnmount:n.onUnmount.bind(n),hydrate:n.hydrate.bind(n)};n.render=i.render,n=i,console.log(t)}if(!document.querySelector("#root"))throw new Error("Root element not found, please add an element with id root");n.reset(),n.components={},n.request=t,n.response=s,n.router.use&&!n.isChild?await new Promise((async o=>{if(i(e.default))if(i(e.default))switch(await n.router.use(t,s),t.pause){case!0:console.log("pausing",t.pause);let e=setInterval((()=>{t.pause?console.log("still pausing",t.pause):(clearInterval(e),o())}),1e3);break;case!1:o()}else o();else switch(await e.default.apply(n,[t,s]),await n.router.use(t,s),t.pause){case!0:let e=setInterval((()=>{t.pause?console.log("still pausing  request",t.url):(clearInterval(e),o())}),1e3);break;case!1:o()}})):n.router.use&&n.isChild&&console.warn("Router.use() is not supported in child components");const a=await n.render();document.querySelector("#root").innerHTML!==a&&(console.log("rendering"),document.querySelector("#root").innerHTML=a),n.bindMount(),n.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(i,a)})),n&&n.handler(i,a)}}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 isClass(e){return"function"==typeof e&&/^class\s/.test(Function.prototype.toString.call(e))}let s=isClass(e)?new e(t):null;if(!e)throw new Error("Component must be defined");let r=new Component(t);if(isClass(e))s.props=t,s.children=n,s.props.children=n.join(""),s.parentNode=this,s.request=this.request,s.response=this.response,s.key=t.key||null,r=s;else{e.toString();r.key=e.toString().split('key="')[1]?e.toString().split('key="')[1].split('"')[0]:null;let n={key:r.key,render:()=>e.apply(r,[t]),request:this.request,isChild:!0,response:this.response,params:this.request.params,queryParams:this.request.query,reset:r.reset.bind(r),onMount:r.onMount.bind(r),useState:null,router:{use:r.router.use.bind(r)},bindMount:r.bindMount.bind(r),memoize:r.memoize.bind(r),createComponent:r.createComponent.bind(r),isChild:!1,useState:r.useState.bind(r),parseStyle:r.parseStyle.bind(r),bind:r.bind.bind(r),useRef:r.useRef.bind(r),request:this.request,response:this.response,useReducer:r.useReducer.bind(r),hydrate:r.hydrate.bind(r),onUnmount:r.onUnmount.bind(r),parentNoe:this};r.render=n.render,r=n}return this.components[t.key]||(this.components[t.key]=r),!this.children.includes(r)&&this.children.push(r),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){console.log(e);let t=(new DOMParser).parseFromString(this.render(),"text/html").body.querySelector(`[ref="${e}"]`),n=document.querySelector(`[ref="${e}"]`);console.log(t,n)}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 updatedValue=()=>this.state[e],n=updatedValue();return[n,(t,s)=>{this.state[e]=t,this.hydrate(s),n=updatedValue()}]}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 getValue=()=>this.state[e];let s=getValue();return[getValue(),(t,r)=>{const o=n(s,t)??t;this.state[e]=o,this.hydrate(r),s=getValue()}]}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))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.toString();o.key=e.toString().split('key="')[1]?e.toString().split('key="')[1].split('"')[0]:null;let n={key:o.key,render:()=>e.apply(o,[t]),request:this.request,isChild:!0,response:this.response,params:this.request.params,queryParams:this.request.query,reset:o.reset.bind(o),onMount:o.onMount.bind(o),useState:null,router:{use:o.router.use.bind(o)},bindMount:o.bindMount.bind(o),memoize:o.memoize.bind(o),createComponent:o.createComponent.bind(o),isChild:!1,useState:o.useState.bind(o),parseStyle:o.parseStyle.bind(o),bind:o.bind.bind(o),useRef:o.useRef.bind(o),request:this.request,response:this.response,useReducer:o.useReducer.bind(o),hydrate:o.hydrate.bind(o),onUnmount:o.onUnmount.bind(o),parentNoe:this};o.render=n.render,o=n}return this.components[t.key]||(this.components[t.key]=o),!this.children.includes(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,t.onMount=e.onMount.bind(e),t.onUnmount=e.onUnmount.bind(e);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){(new DOMParser).parseFromString(this.render(),"text/html").body.querySelector(`[ref="${e}"]`),document.querySelector(`[ref="${e}"]`)}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

@@ -1,6 +1,8 @@
 #!/usr/bin/env node
 import fs from "fs";
 import { glob, globSync, globStream, globStreamSync, Glob, } from 'glob'
+import puppeteer from 'puppeteer';
+import http from 'http'
 let bundleSize = 0;
 let errorCodes = {
   "SyntaxError: Unexpected token '<'": "You forgot to enclose tags in a fragment <></>",
@@ -8,24 +10,14 @@ let errorCodes = {
 /**
  * define directories
  */
-let dirs = {
-  ...fs.existsSync(process.cwd() + '/pages') ? { pages: true } : { pages: false },
-  ...fs.existsSync(process.cwd() + '/src') ? { components: true } : { components: false },
-  ...fs.existsSync(process.cwd() + '/public') ? { public: true } : { public: false },
-  ...fs.existsSync(process.cwd() + '/dist') ? { dist: true } : { dist: false },
-  ...fs.existsSync(process.cwd() + '/dist/pages') ? { distpages: true } : { distpages: false },
-  ...fs.existsSync(process.cwd() + '/dist/src') ? { distcomponents: true } : { distcomponents: false },
-  ...fs.existsSync(process.cwd() + '/dist/public') ? { distpublic: true } : { distpublic: false },
-}
+ 
 
+if(!fs.existsSync(process.cwd() + '/dist')){
+  fs.mkdirSync(process.cwd() + '/dist')
+}
 
-Object.keys(dirs).map((key, index) => {
-  if (!dirs[key]) {
-    fs.mkdirSync(process.cwd() + '/' + key)
-  }
-}).filter(Boolean)[0]
 
-if (process.env.isCloudflare) {
+if (process.env.isCloudflare || !process.cwd() + '/dist/index.html') {
   let htmlFile = fs.readFileSync(process.cwd() + "/node_modules/vaderjs/runtime/index.html", 'utf8')
   fs.writeFileSync(process.cwd() + "/dist/index.html", htmlFile)
 }
@@ -663,18 +655,7 @@ function Compiler(func, file) {
 
           }
 
-          let html = fs.existsSync(process.cwd() + '/dist/index.html') ? fs.readFileSync(process.cwd() + '/dist/index.html', 'utf8') : ''
-          if (!html.includes(`<link rel="preload" href="${path.replace(/'/g, '').trim()}" as="${path.replace(/'/g, '').trim().includes('.css') ? 'style' : 'script'}">`)
-            && !path.includes('.module.css')
-          ) {
-            let preload = `
-            ${path.trim().includes('.css') ? `<link rel="stylesheet" href="${path.trim().replace(/'/g, '').trim()}">` : ''
-              }
-            ${!path.trim().includes('.css') ? `<link rel="modulepreload" href="${path.trim().replace(/'/g, '').trim()}">` : ''}<link rel="preload" href="${path.trim().replace(/'/g, '').trim()}" as="${path.trim().includes('.css') ? 'style' : 'script'}">`
-            html = html.replace('</head>', `${preload}\n</head>`)
-
-            fs.writeFileSync(process.cwd() + '/dist/index.html', html)
-          }
+           
           if (newImport) {
             string = string.replace(beforeimport, newImport)
           }
@@ -716,24 +697,8 @@ async function Build() {
     globalThis.isWriting = null
     return { _written: true };
   };
-  const scannedVaderFiles = await glob("**/**.{html,js}", {
-    cwd: process.cwd() + '/node_modules/vaderjs/runtime',
-    absolute: true,
-  });
-
-  scannedVaderFiles.forEach(async (file) => {
-    file = file.replace(/\\/g, '/');
 
 
-    let name = file.split('/node_modules/vaderjs/runtime/')[1]
-    if (file.includes('index.html') && fs.existsSync(process.cwd() + "/dist/" + name)) {
-      return
-    }
-    let data = await reader(file)
-    bundleSize += fs.statSync(file).size;
-    await writer(process.cwd() + "/dist/" + name, data);
-  })
-
   const glb = await glob("**/**/**/**.{jsx,js}", {
     ignore: ["node_modules/**/*", "dist/**/*"],
     cwd: process.cwd() + '/pages/',
@@ -744,12 +709,146 @@ async function Build() {
   // Process files in the 'pages' directory
   let appjs = '';
   let hasWritten = []
-  const writejs = () => {
-
-    writer(process.cwd() + '/dist/app.js', appjs)
+  function ssg(routes = []) {
+    console.log(`Generating html files for ${routes.length} routes`)
+    routes.forEach(async (route) => {
+      if(route.url.includes(':')){
+        let url = route.url.split('/:')[0]
+        route.url = url
+      }
+      let equalparamroute = routes.map((e) => {
+        
+        if (e.url.includes(':')) {
+           let url = e.url.split('/:')[0]    
+           if(url&&route.url === url){
+             return  e
+           }else{
+              return null
+            
+           }
+        }
+        return null
+      }).filter(Boolean)  
+      let document = `
+      <!DOCTYPE html>
+      <html lang="en">
+      <head>
+          <meta charset="UTF-8">
+          <meta name="viewport" content="width=device-width,initial-scale=1.0">
+          <script type="module" id="meta">
+          window.module = await import('/${route.fileName.replace('.jsx', '.js')}')
+          let metadata = await module.$metadata 
+          if(metadata && metadata.title){
+            document.head.innerHTML += '<title>' + metadata.title + '</title>'
+         } 
+         if(metadata && metadata.description){
+           document.head.innerHTML += '<meta name="description" content="' + metadata.description + '">'
+         }
+         if(metadata && metadata.keywords){
+           document.head.innerHTML += '<meta name="keywords" content="' + metadata.keywords + '">'
+         }
+         if(metadata && metadata.author){
+           document.head.innerHTML += '<meta name="author" content="' + metadata.author + '">'
+         }
+         if(metadata && metadata.image){
+           document.head.innerHTML += '<meta property="og:image" content="' + metadata.image + '">'
+         }
+         if(metadata && metadata.url){
+           document.head.innerHTML += '<meta property="og:url" content="' + metadata.url + '">'
+         } 
+         if(metadata && metadata.styles){
+           metadata.styles.forEach(style => {
+             style = style.replaceAll('./', '/')
+             style = style.replaceAll('../', '/')
+             style = style.replace("'", '')
+             document.head.innerHTML += '<link rel="stylesheet" href="' + style + '">'
+           })
+         }
+         if(metadata && metadata.icon){
+           document.head.innerHTML += '<link rel="icon" href="' + metadata.icon + '">'
+         }
+         </script>
+      </head>
+      <body>
+          <div id="root"></div>
+      </body>  
+      
+      <script type="module">
+        import VaderRouter from '/router.js' 
+        const router = new VaderRouter('${route.url}', 3000)
+        router.get('${route.url}', async (req, res) => {
+          let module = await import('/${route.fileName.replace('.jsx', '.js')}')
+          res.render(module, req, res, module.$metadata)
+        }) 
+        ${equalparamroute.length > 0 ? equalparamroute.map((e) => { 
+        let folderName =  '/' + e.url.split('/')[1] 
+        
+        e.url = e.url.replace(folderName, '') 
+
+        return `router.get('${e.url}', async (req, res) => {
+           let module = await import('/${e.fileName.replace('.jsx', '.js')}')
+           res.render(module, req, res, module.$metadata)
+        })\n`
+        }): ''}
+        router.listen(3000)
+    </script> 
+      </html>
+    `;
+  
+    let port = Math.floor(Math.random() * 10000) + 1;
+     
+      const server = http.createServer((req, res) => { 
+        if (req.url === '/') {
+          // Respond with the generated HTML
+          res.writeHead(200, { 'Content-Type': 'text/html' });
+          res.end(document);
+        } else {
+          // Serve static files (adjust the file paths based on your project structure)
+          const filePath =  process.cwd() +  '/dist/' + req.url
+           
+          fs.readFile(filePath, (err, data) => {
+            if (err) {
+              res.writeHead(404, { 'Content-Type':  filePath.includes('js') ? 'text/javascript' : 'text/html' });
+              res.end('File not found');
+            } else {
+              res.writeHead(200, { 'Content-Type': filePath.includes('js') ? 'text/javascript' : 'text/html' });
+              res.end(data);
+            }
+          });
+        }
+      });
+  
+      server.listen(port)
+  
+      globalThis.listen = true;
+
+      puppeteer.launch({ headless:  "new", args: ['--no-sandbox', '--disable-setuid-sandbox'], 
+     warning: false,
+    }).then(async (browser) => {
+        
+        // remove /: from route
+        route.url = route.url.replaceAll(/\/:[a-zA-Z0-9_-]+/gs, '')  
+        const page = await browser.newPage(); 
+        await page.goto(`http://localhost:${port}` + '#' + route.url, { waitUntil: 'networkidle2' });
+        await page.waitForSelector('#root');  
+        await page.evaluate(() => {
+          document.getElementById('meta').remove()
+        })
+        const html = await page.content();
+        await page.close(); 
+        let isBasePath = route.url === '/' ? true : false
+        await writer(process.cwd() + '/dist/' + (isBasePath ? 'index.html' : `${route.url}/` + 'index.html'), html)
+        await browser.close();
+         // close http
+          server.close()
+      })
+     
+    })
+     
+    console.log('Done')
   }
-
-
+ 
+  globalThis.routes = []
 
   for await (let file of glb) {
     // Normalize file paths
@@ -774,22 +873,14 @@ async function Build() {
       fullpath: origin,
     };
 
-    if(process.cwd() + '/dist/index.html'){
-      let html = fs.readFileSync(process.cwd() + '/dist/index.html', 'utf8')
-      if (!html.includes(`<link rel="preload" href="${obj.url}" as="script">`)) {
-        html = html.replace('</head>', `<link rel="preload" href="${obj.url}" as="script">\n</head>`)
-        fs.writeFileSync(process.cwd() + '/dist/index.html', html)
-      }
-    }
-
 
 
     let data = await fs.readFileSync(origin, "utf8");
     data = Compiler(data, origin);
+   
 
 
-
-    await writer(process.cwd() + "/dist/pages/" + fileName.replace('.jsx', '.js'), data).then(async () => {
+    await writer(process.cwd() + "/dist/" + fileName.replace('.jsx', '.js'), data).then(async () => {
 
       let { minify } = await import('terser')
 
@@ -804,7 +895,9 @@ async function Build() {
 
         })
 
-        await writer(process.cwd() + "/dist/pages/" + fileName.replace('.jsx', '.js'), minified.code)
+        minified.code += `\n\n window.params = ${JSON.stringify(obj.url.split('/').filter((e) => e.includes(':')).map((e) => e.split(':')[1]))}`
+
+        await writer(process.cwd() + "/dist/" + fileName.replace('.jsx', '.js'), minified.code)
       } catch (error) {
         console.log(error)
       }
@@ -814,22 +907,15 @@ async function Build() {
     obj.compiledPath = process.cwd() + "/dist/pages/" + fileName.replace('.jsx', '.js')
 
 
-    // Generate routing logic
-    let js = `
-      router.get('${obj.url}', async (req, res) => {
-        res.render(await import('./pages/${fileName.replace('.jsx', '.js')}'), req, res)
-      }) 
-      //@desc ${obj.pathname}
-    ` + '\n';
-    appjs += js
-
-    writejs()
-
+     
+    globalThis.routes.push({fileName:fileName, url:obj.url})
+ 
 
 
 
   }
 
+  ssg(globalThis.routes)
 
 
   const scannedSourceFiles = await glob("**/**.{jsx,js,json}", {
@@ -837,7 +923,23 @@ async function Build() {
     cwd: process.cwd() + '/src/',
     absolute: true,
   });
-  
+  const scannedVaderFiles = await glob("**/**.{html,js}", {
+    cwd: process.cwd() + '/node_modules/vaderjs/runtime',
+    absolute: true,
+  });
+
+  scannedVaderFiles.forEach(async (file) => {
+    file = file.replace(/\\/g, '/');
+
+
+    let name = file.split('/node_modules/vaderjs/runtime/')[1]
+    if (file.includes('index.html') && fs.existsSync(process.cwd() + "/dist/" + name)) {
+      return
+    }
+    let data = await reader(file)
+    bundleSize += fs.statSync(file).size;
+    await writer(process.cwd() + "/dist/" + name, data);
+  })
   scannedSourceFiles.forEach(async (file) => {
     file = file.replace(/\\/g, '/');
     let name = file.split('/src/')[1]
@@ -868,7 +970,7 @@ async function Build() {
     await writer(process.cwd() + "/dist/src/" + name, data);
   })
 
-  const scannedPublicFiles = await glob("**/**.{css,js,html,mjs,cjs,umd.js}", {
+  const scannedPublicFiles = await glob("**/**.{css,js,html,mjs,cjs}", {
     ignore: ["node_modules/**/*", "dist/**/*"],
     cwd: process.cwd() + '/public/',
     absolute: true,
@@ -894,15 +996,15 @@ async function Build() {
 
       let objCase = {
         ...file == "app.js" ? { exit: true } : null,
-        ...file.includes("index.html") && fs.existsSync(process.cwd() + "/runtime/" + file) ? { exit: true } : null,
+        ...file.includes("index.html") && fs.existsSync(process.cwd() + "/dist/" + file) ? { exit: true } : null,
 
       }
       if (objCase.exit) {
         console.log('exiting')
-        return
+        return true
       }
-      bundleSize += fs.statSync(process.cwd() + "/runtime/" + file).size;
-      let data = await reader(process.cwd() + "/runtime/" + file)
+      bundleSize += fs.statSync(process.cwd() + "/node_modules/vaderjs/runtime/" + file).size;
+      let data = await reader(process.cwd() + "/node_modules/vaderjs/runtime/" + file)
       await writer(process.cwd() + "/dist/" + file, data);
     });