vaderjs 1.3.3-4944326ca411 → 1.3.3-612-hotfix

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-4944326ca411",
+  "version": "1.3.3-612-hotfix",
   "bin": {
     "vader": "./vader.js"
   },
@@ -29,7 +29,9 @@
   "dependencies": {
     "glob": "latest", 
     "puppeteer":"latest",
-    "dotenv":"latest"
+    "dotenv":"latest",
+    "prettier": "latest",
+    "source-map": "latest"
 
   }
 }

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 s=setInterval((()=>{document.querySelector(`[key="${e}"]`)&&!hasRan.includes(e)&&(clearInterval(s),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,s){function isClass(e){return"function"==typeof e&&/^class\s/.test(Function.prototype.toString.call(e))}let r=isClass(e)?new e(t):null;if(!e)throw new Error("Component must be defined");let i=new Component(t);if(isClass(e))r.props=t||{},r.props.children=s.join("")||[],r.props.children=s.join(""),r.parentNode=this,r.request=this.request,r.response=this.response,r.key=r.props.key?r.props.key:Math.random(),i=r;else{e.toString();i.key=e.toString().split('key="')[1]?e.toString().split('key="')[1].split('"')[0]:null;let r=[];Object.keys(t).forEach((e=>{if(e.startsWith("$props")&&(r.push(t[e]),delete t[e]),e.startsWith("$_ternary")){let s=t[e];delete t[e],Object.keys(s).forEach((e=>{t[e]=s[e]}))}})),t=t?{...t,...r.reduce(((e,t)=>({...e,...t})),{}),children:s.join("")||[]}:{children:s.join("")||[]};let n={key:i.key?i.key:Math.random(),isUnique:!!i.key,render:()=>e.apply(i,[t]),request:this.request,isChild:!0,response:this.response,params:this.request.params,queryParams:this.request.query,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),useRef:i.useRef.bind(i),request:this.request,response:this.response,useReducer:i.useReducer.bind(i),hydrate:i.hydrate.bind(i),onUnmount:i.onUnmount.bind(i),parentNoe:this,props:{...t,children:s.join("")||[]}};i.render=n.render,i=n,i.props.children=s.join("")||[]}return this.components[i.key]||(this.components[i.key]=i),!this.children.includes(i)&&this.children.push(i),this.components[i.key]}reset(){Object.keys(this.components).forEach((e=>{this.components[e].onUnmount(),delete this.components[e]})),this.state={},this.children=[]}memoize(e){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 s=t.render();return s&&s.split(">,").length>1&&(s=s.replaceAll(">,",">")),t.nokey?s:`<div key="${t.key}">${s}</div>`}parseStyle(e){let t="";return Object.keys(e).forEach((s=>{let r=e[s];s=s.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g,"$1-$2").toLowerCase(),t+=`${s}:${r};`})),t}bindMount(){mounts.push(this)}domDifference(e,t){let s=[];for(let r=0;r<e.length;r++){let i=e[r],n=t[r];i&&n&&!i.isEqualNode(n)&&s.push({type:"replace",old:i,new:n.cloneNode(!0)})}return s}updateChangedElements(e){e.forEach((e=>{switch(e.type){case"replace":e.old.replaceWith(e.new);break;case"remove":e.old.remove();break;case"add":e.old.appendChild(e.new.cloneNode(!0))}}))}hydrate(e){if(e){console.log("hydrating");let t=(new DOMParser).parseFromString(this.render(),"text/html").body.querySelector(`[ref="${e}"]`);document.querySelector(`[ref="${e}"]`);document.querySelector(`[ref="${e}"]`).replaceWith(t)}else{if(this.key?document.querySelector(`[key="${this.key}"]`):null){let e=(new DOMParser).parseFromString(this.render(),"text/html").body.querySelector(`[key="${this.key}"]`),t=document.querySelector(`[key="${this.key}"]`),s=this.domDifference(t.children,e.children);this.updateChangedElements(s)}}}patch(e,t){const s=this.domDifference(e,t);this.updateChangedElements(s)}handleObject(obj){try{obj=JSON.parse(obj)}catch(e){}return eval(obj)}bind(e,t,s,r,...i){return s+=this.key,window["callFunctions"+this.key]=(e,t)=>{console.log("called");let s=this.functions.find((t=>t.ref===e));s&&s.func(t)},this.functions.find((e=>e.ref===s))||this.functions.push({ref:s,func:e}),t?e:`((event)=>{callFunctions${this.key} ? callFunctions${this.key}('${s}', event) : null})(event)`}setState(e,t){this.state=e,this.hydrate(t)}useState(e,t){this.state.hasOwnProperty(e)||(this.state[e]=t);return[(()=>this.state[e])(),(t,s)=>{this.state[e]=t,this.hydrate(s)}]}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,s=null){this.state[e]||(this.state[e]=t);const getValue=()=>this.state[e];let r=getValue();return[getValue(),(t,i)=>{const n=s(r,t)??t;this.state[e]=n,this.hydrate(i),r=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)=>{this.state[e]||(this.state[e]=t);return[states[e],(t,s)=>{states[e]=t,this.hydrate(s)}]};export const useReducer=(e,t)=>[e,e=>{}];export const useRef=e=>({current:e,bind:""});export class Link extends Component{constructor(e){super(e),this.props=e,this.link=document.createElement("a"),this.key=e.href+Math.random(),this.nokey=!0}render(){return this.link.innerHTML=this.props.children,this.link.setAttribute("id",this.props?.href),this.link.style=this.props?.style,this.link.setAttribute("class",this.props?.class),this.link.setAttribute("onclick",`window.history.pushState({}, '', '${this.props?.href}'); window.dispatchEvent(new Event('popstate'));`),this.link.outerHTML}}export class Image extends Component{constructor(e){super(e),this.props={src:e.src,class:e.class,style:e.style,blur:e.blur,width:e.width,height:e.height,optimize:e.optimize||!0,loader:e.loader||!0,alt:e.alt||"image",ref:e.ref||null},this.key=e.src+Math.random(),this.img=document.createElement("img"),this.placeholder=document.createElement("div")}render(){if(window.isServer)return"";let[e,t]=this.useState("loaded",!1),s=this.useRef("hookref",null),r=this.props.width?this.props.width:window.innerWidth/2,i=this.props.height?this.props.height:window.innerHeight/2;if(!this.props.src)throw new Error("Image src is required");return this.img.setAttribute("src",this.props.src),this.img.setAttribute("class",this.props.class),this.img.setAttribute("style",this.props.style?this.props.style:""),this.img.setAttribute("width",r),this.img.setAttribute("ref",s.bind),this.img.referrerPolicy="no-referrer",this.img.setAttribute("height",i),this.img.setAttribute("loading","lazy"),this.img.setAttribute("alt",this.props.alt),this.props.blur&&this.img.setAttribute("style",`filter: blur(${this.props.blur}px);`),this.props.optimize&&this.img.setAttribute("style",`image-rendering: -webkit-optimize-contrast; object-fit: cover; object-position: center; ${this.props.style?this.props.style:""}`),!this.props.loader||e||window.isServer||(this.placeholder.setAttribute("style",`width: ${r}px; height: ${i}px; background: #eee;`),this.placeholder.setAttribute("class","vader-image-placeholder"),this.placeholder.innerHTML=this.props.loader,window.isServer)?void 0:(this.img.onload=()=>{t(!0,s.bind)},`<span ref="${s.bind}">${e?this.img.outerHTML:this.placeholder.outerHTML}</span>`)}}export class Html extends Component{constructor(e){super(e),this.props={children:e.children,lang:e.lang||"en",attributes:e.attributes||{}},this.key="html",this.html=document.createElement("div")}render(){return window.isServer?(this.html.innerHTML=this.props.children,this.html.setAttribute("lang",this.props.lang?this.props.lang:"en"),this.props.attributes&&Object.keys(this.props.attributes).forEach((e=>{this.html.setAttribute(e,this.props.attributes[e])})),this.html.innerHTML):this.props.children}onMount(){console.log("Document Has Been Mounted")}}export class Head extends Component{constructor(e){super(e),this.props=e,this.key="head",this.head=document.createElement("head")}render(){return""}onMount(){if(!this.state.hasMounted&&window.isServer){document.head.innerHTML=this.props.children+document.head.innerHTML,document.querySelectorAll("script[eager]").forEach((async e=>{if(!e.getAttribute("src"))throw new Error("Eager scripts must be external");e.remove();let t=e.getAttribute("src"),s=document.createElement("script"),r=await fetch(t).then((e=>e.text()));s.innerHTML=r,s.setAttribute("srcid",t),document.querySelector(`[srcid="${t}"]`)||document.head.prepend(s)})),this.state.hasMounted=!0}}}export class Script extends Component{constructor(e){super(e),this.props={children:e.children},this.key="script",this.script=document.createElement("script")}render(){return this.script.innerHTML=this.props.children.split("\n").join(";\n"),this.script.outerHTML}onMount(){document.head.appendChild(this.script),document.body.querySelector(`[key="${this.key}"]`).remove()}}export default{Component:Component,useRef:useRef,useReducer:useReducer,useState:useState,strictMount:strictMount,Link:Link,Image:Image,Head:Head,Script:Script,Html:Html};
+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 s=setInterval((()=>{document.querySelector(`[key="${e}"]`)&&!hasRan.includes(e)&&(clearInterval(s),t(),hasRan.push(e))}),120)};export class Component{constructor(){this.$_vaderElement=!0,this.state={},this.key=null,this.components={},this.mounted=!1,this.checkIFMounted(),this.memoizes=[],this.functions=[],this.children=[],this.noKey=!1,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,s){function r(e){return"function"==typeof e&&/^class\s/.test(Function.prototype.toString.call(e))}let i=r(e)?new e(t):null;if(!e)throw new Error("Component must be defined");let n=[];Object.keys(t).forEach((e=>{if(e.startsWith("$props")&&(n.push(t[e]),delete t[e]),e.startsWith("$_ternary")){let s=t[e];delete t[e],Object.keys(s).forEach((e=>{t[e]=s[e]}))}}));let o=new Component(t);if(r(e))i.props=t||{},i.props.children=s.join("")||[],i.props.children=s.join(""),i.parentNode=this,i.type="class ",i.request=this.request,i.response=this.response,i.key=i.props.key?i.props.key:Math.random(),o=i;else{e.toString();o.key=e.toString().split('key="')[1]?e.toString().split('key="')[1].split('"')[0]:null,t=t?{...t,...n.reduce(((e,t)=>({...e,...t})),{}),children:s.join("")||[]}:{children:s.join("")||[]};let r={key:o.key?o.key:Math.random(),isUnique:!!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),type:"function",parentNoe:this,props:{...t,children:s.join("")||[]}};o.render=r.render,o=r,o.props.children=s.join("")||[]}return this.components[o.key]||(this.components[o.key]=o),!this.children.includes(o)&&this.children.push(o),this.components[o.key]}reset(){Object.keys(this.components).forEach((e=>{this.components[e].onUnmount(),delete this.components[e]})),this.state={},this.children=[]}memoize(e){if(!0==!this.memoizes.includes(e.key))this.memoizes.push(e.key),this.components[e.key]=e;let t=this.components[e.key];"class"!==t.type||t.$_vaderElement||console.error(`class ${t.constructor.name} must extend Component`),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 s=t.render();return s&&s.split(">,").length>1&&(s=s.replaceAll(">,",">")),t.nokey||t.noKey?s:`<div key="${t.key}">${s}</div>`}parseStyle(e){let t="";return Object.keys(e).forEach((s=>{let r=e[s];s=s.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g,"$1-$2").toLowerCase(),t+=`${s}:${r};`})),t}bindMount(){mounts.push(this)}domDifference(e,t){let s=[];for(let r=0;r<e.length;r++){let i=e[r],n=t[r];if(i&&n&&i.childNodes.length>0&&n.childNodes.length>0){console.log("equal");let e=this.domDifference(Array.from(i.childNodes),Array.from(n.childNodes));s.push(...e)}i&&n&&0===i.childNodes.length&&0===n.childNodes.length?i.isEqualNode(n)||s.push({type:"replace",old:i,new:n}):i&&n&&Array.from(i.attributes).length!==Array.from(n.attributes).length&&s.push({type:"replace",old:i,new:n})}return s}updateChangedElements(e){e.forEach((e=>{if(e)switch(e.type){case"replace":e.old.replaceWith(e.new);break;case"remove":e.old.remove();break;case"add":e.old.appendChild(e.new.cloneNode(!0))}}))}hydrate(e){if(e){console.log(e.bind);let t=(new DOMParser).parseFromString(this.render(),"text/html").body.querySelectorAll(`[ref="${e.bind?e.bind:e}"]`),s=document.querySelectorAll(`[ref="${e?e.bind:e}"]`);t.forEach((e=>{let t=Array.from(s).find((t=>t.getAttribute("ref")===e.getAttribute("ref")));if(t){let s=this.domDifference(Array.from(t.childNodes),Array.from(e.childNodes))[0];this.updateChangedElements([s])}}))}else{let e=this.key?document.querySelector(`[key="${this.key}"]`):null;if(console.log(e),e){let t=(new DOMParser).parseFromString(this.render(),"text/html").body.querySelector(`[key="${this.key}"]`),s=e,r=this.domDifference([s],[t]);this.updateChangedElements(r)}}}patch(e,t){const s=this.domDifference(e,t);this.updateChangedElements(s)}handleObject(obj){try{obj=JSON.parse(obj)}catch(e){}return eval(obj)}bind(e,t,s,r,...i){return s+=this.key,window["callFunctions"+this.key]=(e,t)=>{let s=this.functions.find((t=>t.ref===e));s&&s.func(t)},this.functions.find((e=>e.ref===s))||this.functions.push({ref:s,func:e}),t?e:`((event)=>{callFunctions${this.key} ? callFunctions${this.key}('${s}', event) : null})(event)`}setState(e,t){this.state=e,this.hydrate(t)}useState(e,t){this.state.hasOwnProperty(e)||(this.state[e]=t);return[(()=>this.state[e])(),(t,s)=>{this.state[e]=t,this.hydrate(s)}]}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,s=null){this.state[e]||(this.state[e]=t);const r=()=>this.state[e];let i=r();return[r(),(t,n)=>{const o=s(i,t)??t;this.state[e]=o,this.hydrate(n),i=r()}]}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)=>{this.state[e]||(this.state[e]=t);return[states[e],(t,s)=>{states[e]=t,this.hydrate(s)}]};export const useReducer=(e,t)=>[e,e=>{}];export const useRef=e=>({current:e,bind:""});export class Link extends Component{constructor(e){super(e),this.props=e,this.link=document.createElement("a"),this.key=e.href+Math.random(),this.nokey=!0}render(){return this.link.innerHTML=this.props.children,this.link.setAttribute("id",this.props?.href),this.link.style=this.props?.style,this.link.setAttribute("class",this.props?.class||this.props?.className),this.link.setAttribute("onclick",`window.history.pushState({}, '', '${this.props?.href}'); window.dispatchEvent(new Event('popstate'));`),this.link.outerHTML}}export class Image extends Component{constructor(e){super(e),this.props={src:e.src,class:e.class,style:e.style,blur:e.blur,width:e.width,height:e.height,optimize:e.optimize||!0,loader:e.loader||!0,alt:e.alt||"image",ref:e.ref||null},this.key=e.src+Math.random(),this.img=document.createElement("img"),this.placeholder=document.createElement("div")}render(){if(window.isServer)return"";let[e,t]=this.useState("loaded",!1),s=this.useRef("hookref",null),r=this.props.width?this.props.width:window.innerWidth/2,i=this.props.height?this.props.height:window.innerHeight/2;if(!this.props.src)throw new Error("Image src is required");return this.img.setAttribute("src",this.props.src),this.img.setAttribute("class",this.props.class),this.img.setAttribute("style",this.props.style?this.props.style:""),this.img.setAttribute("width",r),this.img.setAttribute("ref",s.bind),this.img.referrerPolicy="no-referrer",this.img.setAttribute("height",i),this.img.setAttribute("loading","lazy"),this.img.setAttribute("alt",this.props.alt),this.props.blur&&this.img.setAttribute("style",`filter: blur(${this.props.blur}px);`),this.props.optimize&&this.img.setAttribute("style",`image-rendering: -webkit-optimize-contrast; object-fit: cover; object-position: center; ${this.props.style?this.props.style:""}`),!this.props.loader||e||window.isServer||(this.placeholder.setAttribute("style",`width: ${r}px; height: ${i}px; background: #eee;`),this.placeholder.setAttribute("class","vader-image-placeholder"),this.placeholder.innerHTML=this.props.loader,window.isServer)?void 0:(this.img.onload=()=>{t(!0,s.bind)},`<span ref="${s.bind}">${e?this.img.outerHTML:this.placeholder.outerHTML}</span>`)}}export class Html extends Component{constructor(e){super(e),this.props={children:e.children,lang:e.lang||"en",attributes:e.attributes||{}},this.key="html",this.html=document.createElement("div")}render(){return window.isServer?(this.html.innerHTML=this.props.children,this.html.setAttribute("lang",this.props.lang?this.props.lang:"en"),this.props.attributes&&Object.keys(this.props.attributes).forEach((e=>{this.html.setAttribute(e,this.props.attributes[e])})),this.html.innerHTML):this.props.children}onMount(){console.log("Document Has Been Mounted")}}export class Head extends Component{constructor(e){super(e),this.props=e,this.key="head",this.head=document.createElement("head")}render(){return""}onMount(){if(!this.state.hasMounted&&window.isServer){console.log(this.props.children),document.head.innerHTML=this.props.children+document.head.innerHTML,document.querySelectorAll("script[eager]").forEach((async e=>{if(!e.getAttribute("src"))throw new Error("Eager scripts must be external");e.remove();let t=e.getAttribute("src"),s=document.createElement("script"),r=null;await fetch(t).then((e=>{if(404===e.status)throw document.documentElement.setAttribute("error",JSON.stringify({error:`File ${t} not found`,status:404})),new Error(`File ${t} not found`);return e.text()})).then((e=>{r=e})).catch((e=>{throw e})),s.innerHTML=r,s.setAttribute("srcid",t),document.querySelector(`[srcid="${t}"]`)||document.head.prepend(s)})),this.state.hasMounted=!0}}}export class Script extends Component{constructor(e){super(e),this.props={children:e.children},this.key="script",this.script=document.createElement("script")}render(){return this.script.innerHTML=this.props.children.split("\n").join(";\n"),this.script.outerHTML}onMount(){document.head.appendChild(this.script),document.body.querySelector(`[key="${this.key}"]`).remove()}}export default{Component:Component,useRef:useRef,useReducer:useReducer,useState:useState,strictMount:strictMount,Link:Link,Image:Image,Head:Head,Script:Script,Html:Html};

package/vader.js

@@ -1,11 +1,40 @@
 #!/usr/bin/env node
 import fs from "fs";
 import { glob, globSync, globStream, globStreamSync, Glob, } from 'glob'
-import puppeteer from 'puppeteer';
+import puppeteer from 'puppeteer'; 
 import http from 'http'
+import { SourceMapGenerator } from 'source-map'
+
 import { WebSocketServer } from 'ws'
+import prettier from 'prettier'
 import { watch } from "fs";
 import path from 'path'
+ 
+globalThis.compiledFiles = []
+
+const sourceMapGen = (data, code) => {
+  let { origin, fileName } = data 
+  const sourceMap = new SourceMapGenerator({ file: '/src/' + fileName.replace('.jsx', '.js') });
+
+  const lines =  fs.readFileSync(origin, "utf8").split("\n");
+  let line = 1;
+  let column = 0;
+  for (const l of lines) { 
+    sourceMap.addMapping({
+      source:  origin, 
+      sourceRoot: '/src',
+      original: { line: line, column: 0 },
+      generated: { line: line, column: 0 },
+    });
+    line++;
+  }
+
+  sourceMap.setSourceContent(origin, fs.readFileSync(origin, "utf8"));
+
+  code = code + `\n//# sourceMappingURL=./src/maps/${fileName.replace('.jsx', '.js')}.map \n //#sourceURL=/src/maps/${fileName.replace('.jsx', '.js')}.map`
+  return { code, sourceMap };
+}
+ 
 let config = await import('file://' + process.cwd() + '/vader.config.js').then((e) => e.default || e)
 let writer = async (file, data) => {
   globalThis.isWriting = file
@@ -23,15 +52,7 @@ let writer = async (file, data) => {
   return { _written: true };
 };
 
-let start = Date.now()
 let bundleSize = 0;
-let errorCodes = {
-  "SyntaxError: Unexpected token '<'": "You forgot to enclose tags in a fragment <></>",
-}
-/**
- * define directories
- */
-
 
 if (!fs.existsSync(process.cwd() + '/dist')) {
   fs.mkdirSync(process.cwd() + '/dist')
@@ -41,133 +62,46 @@ if (!fs.existsSync(process.cwd() + '/dist')) {
 
 
 if (typeof process.env.isCloudflare !== "undefined" || !fs.existsSync(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)
+  fs.writeFileSync(process.cwd() + "/dist/index.html", '')
 }
 
 
 
 function Compiler(func, file) {
   let string = func;
-  // Remove block comments 
-
   let returns = []
   let comments = string.match(/\{\s*\/\*.*\*\/\s*}/gs)?.map((comment) => comment.trim());
 
-  let savedfuncnames = [];
-  let functions = string.match(
-    /(?:const|let)\s*([a-zA-Z0-9_-]+)\s*=\s*function\s*\(([^)]*)\)|function\s*([a-zA-Z0-9_-]+)\s*\(([^)]*)\)/gs
-  )
-    ?.map((match) => match.trim());
-
-  let functionNames = [];
-
-
-  functions && functions.forEach((func) => {
-    if (
-      !func.match(
-        /(?:const|let)\s*([a-zA-Z0-9_-]+)\s*=\s*function\s*\(([^)]*)\)|function\s*([a-zA-Z0-9_-]+)\s*\(([^)]*)\)/gs
-      )
-    ) {
-      return;
-    }
-
-    let name = func.split(" ")[1].split("(")[0].trim();
-
-    let lines = string.match(/return\s*\<>.*\<\/>/gs);
-
-    if (lines) {
-      for (let i = 0; i < lines.length; i++) {
-        let line = lines[i];
-
-        if (!functionNames.includes(name)) {
-          functionNames.push(name);
-        }
-      }
-    }
-  });
 
-  // get all Obj({}) and parse to JSON.stringify
 
-  let objects = string.match(/Obj\({.*}\)/gs);
 
-  objects && objects.forEach((obj) => {
-    let key = obj.split("Obj")[1].split("(")[1].split(")")[0].trim();
-    let newobj = obj.replaceAll(`Obj(${key})`, `${key}`);
-    // let newobj = obj.replaceAll(`Obj(${key})`, `JSON.parse('${key}')`)
-    string = string.replaceAll(obj, `this.handleObject('${newobj}')`);
-  });
 
 
   let childs = [];
 
-  const spreadAttributeRegex = /\s*([a-zA-Z0-9_-]+)(\s*\$\s*=\s*{{((?:[^{}]|(?:\{(?:[^{}]|(?:\{[^{}]*\})*)*\})*)*)}})/gs;
-  let spreadMatch;
-  while ((spreadMatch = spreadAttributeRegex.exec(string)) !== null) {
-    let [, element, spread] = spreadMatch;
-    let isJSXComponent = element.match(/[A-Z]/) ? true : false;
-    if (isJSXComponent) {
-      continue
-
-    }
-    let old = spread;
-
-    // turn spread into attributes 
-    spread = spread.replace(/\s*$\s*=\s*/, "");
-    spread = spread.replace(/{{/, "");
-    spread = spread.replace(/}}/, "");
-    spread = spread.replace(/\$\s*=\s*/, "");
-
-    // turn : into =
-
-    // do not split inner Objects ex: {color: 'red', background: {color: 'blue'}} -> {color: 'red', background: {color: 'blue'}}
-    let splitByCommas = spread.split(/,(?![^{]*})/g);
-    splitByCommas = splitByCommas.map((e) => e.trim())
-    splitByCommas = splitByCommas.map((e) => {
-      switch (true) {
-        case e.includes('function') || e.includes('=>'):
-          e = e.replace(/:(.*)/gs, '={$1}')
-          break;
-        case e.includes('style'):
-          e = e.replace(/:(.*)/gs, '="${this.parseStyle($1)}"')
-          break;
-        case e.includes('[') && e.includes(']'):
-          e = e.replace(/:(.*)/gs, '={$1.join(" ")}')
-          break;
-        default:
-      }
-
-      return e.trim()
-    })
 
-    let newSpread = `\t` + splitByCommas.join(' ') + `\t`
-
-    string = string.replace(old, newSpread);
-
-  }
+  const spreadAttributeRegex = /\s*([a-zA-Z0-9_-]+)\s*(\$\s*=\s*\{\s*\{[^]*?\}\s*\})/gs;
+ 
 
 
 
   function extractAttributes(code) {
-    // Match elements with opening tags
-    const elementRegex = /<([a-zA-Z0-9_-]+)([^>]*)>/gs;
+    // grab $={...} and ={...}
+    const elementRegex =  /<([a-zA-Z0-9_-]+)([^>]*)>/gs;
 
     // Match attributes in an opening tag, including those with ={}
     // Match attributes in an opening tag, including those with ={...}
     const attributeRegex =
-      /\s*([a-zA-Z0-9_-]+)(\s*=\s*("([^"\\]*(\\.[^"\\]*)*)"|'([^'\\]*(\\.[^'\\]*)*)'|\{(?:[^{}]|(?:\{(?:[^{}]|(?:\{[^{}]*\})*)*\})*)*\}|(?:\([^)]*\)|\{[^}]*\}|()=>\s*(?:\{[^}]*\})?)|\[[^\]]*\]))?/gs;
-
-    // <div $={{color: 'red'}}></div> 
+    /\s*([a-zA-Z0-9_-]+)(\s*=\s*("(?:[^"\\]*(?:\\.[^"\\]*)*)"|'(?:[^'\\]*(?:\\.[^'\\]*)*)'|\{(?:[^{}]|(?:\{(?:[^{}]|(?:\{[^{}]*\})*)*\})*)*\}|(?:\([^)]*\)|\{[^}]*\}|()=>\s*(?:\{[^}]*\})?)|\[[^\]]*\]))?/gs;
+  
 
 
-
-    // only return elements with attribute {()=>{}} or if it also has parameters ex: onclick={(event)=>{console.log(event)}} also get muti line functions or onClick=()=>{} 
-    const functionAttributeRegex = /\s*([a-zA-Z0-9_-]+)(\s*=\s*{((?:[^{}]|(?:\{(?:[^{}]|(?:\{[^{}]*\})*)*\})*)*)})/gs;
+    const functionAttributeRegex = /\s*([a-zA-Z0-9_-]+)\s*(=\s*{((?:[^{}]|(?:\{(?:[^{}]|(?:\{[^{}]*\})*)*\})*)*)})/gs;
 
     let attributesList = [];
 
     let spreadAttributes = [];
-    let spreadMatch;
+    
     /**
      * @search - handle spread for html elements
      * @keywords - spread, spread attributes, spread props, spread html attributes
@@ -180,36 +114,22 @@ function Compiler(func, file) {
      * 
      */
     let functionAttributes = [];
+    let spreadFunctions = [];
     let functionMatch;
     while ((functionMatch = functionAttributeRegex.exec(code)) !== null) {
 
       let [, attributeName, attributeValue] = functionMatch;
       let attribute = {};
 
-      if (attributeValue && attributeValue.includes("=>") || attributeValue && attributeValue.includes("function")
+      if (attributeValue && attributeValue.includes("=>")
+        && !attributeValue.includes("this.bind")
+        || attributeValue && attributeValue.includes("function")
         && !spreadFunctions.includes(attributeValue)
       ) {
-        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) => {
@@ -227,6 +147,7 @@ function Compiler(func, file) {
 
         let newvalue = attributeValue.includes('=>') ? attributeValue.split("=>").slice(1).join("=>").trim() : attributeValue.split("function").slice(1).join("function").trim()
 
+        // add ; after newlines 
 
 
         newvalue = newvalue.trim();
@@ -263,7 +184,7 @@ function Compiler(func, file) {
         newvalue = newvalue.replace(/}\s*$/, '');
 
 
-        functionparams.length > 0 ? params = params + ',' + functionparams.map((e) => e.name).join(',') : null
+
 
         newvalue = newvalue.replaceAll(',,', ',')
         let paramnames = params ? params.split(',').map((e) => e.trim()) : null
@@ -273,6 +194,8 @@ function Compiler(func, file) {
 
         // add ; after newlines
         newvalue = newvalue.replaceAll(/\n/g, ";\n")
+        // remove () from newvalue
+        newvalue = newvalue.replace(/\(\s*=>/gs, '=>').replace(/\function\s*\([^\)]*\)\s*\{/gs, '{')
 
         let bind = isJSXComponent ? `${attributeName}='function(${params}){${newvalue}}'` : `${attributeName}="\$\{this.bind(function(){${newvalue}}.bind(this), ${isJSXComponent}, "${ref}",   "${paramnames ? paramnames.map((e, index) => {
           if (e.length < 1) return ''
@@ -294,6 +217,7 @@ function Compiler(func, file) {
     while ((match = elementRegex.exec(code)) !== null) {
       let [, element, attributes] = match;
 
+     
       let attributesMatch;
       let elementAttributes = {};
 
@@ -305,6 +229,81 @@ function Compiler(func, file) {
 
       attributesList.push({ element, attributes: elementAttributes });
     }
+    
+  let spreadMatch;
+  while ((spreadMatch = spreadAttributeRegex.exec(string)) !== null) {
+    let [, element, spread] = spreadMatch;
+
+    let isJSXComponent = element.match(/[A-Z]/) ? true : false;
+    if (isJSXComponent) {
+      continue
+
+    } 
+    let old = spread;
+    // turn spread into attributes 
+    spread = spread.replace(/\s*$\s*=\s*/, "");
+    spread = spread.replace(/\$\s*=\s*/, "");
+    spread = spread.replace('{{', '')
+    spread = spread.replace(/,$/, '');
+
+ 
+ 
+            let splitByCommas = spread.split(/,(?![^{}]*})/gs).map((e) => {
+    
+  
+    
+      switch (true) {
+        case e.includes('function') || e.includes('=>'):
+          e = e.replace(/\,\s*$/, '');
+          // replace commas
+          e = e.replace(/,\s*/gs, ',');
+          // remove space between (.*) => 
+          e = e.replace(/\(\s*=>/gs, '=>');
+          e = e.replace(/\s*=>\s*\{/gs, '=>{');
+          
+          // add ; after newlines 
+          e = e.replace(/\s*(\w+)\s*=>\s*\{/gs, '$1=>{');
+          // turn (e) => {e} into  function(e){e}
+          e = e.replace(/\(([^)]*)\)\s*=>\s*\{/gs, 'function($1){\n');
+          e = e.replace(/;/g, ';\n ');
+          e = e.replace(/,\s*}\s*$/gs, '}');
+        
+
+       
+          e = e.replace(/:(.*)/gs, '="\${this.bind($1, ' + false + ', "' + Math.random().toString(36).substring(2).split('').filter((e) => !Number(e)).join('') + '", "")}"');
+        
+          break;
+        case e.includes('style'): 
+        e = e.replace(/,\s*$/gs, '');
+        e = e.replace(/}\s*$/gs, '');
+        e = e.replaceAll(/{\s*$/gs, '');
+        e = e.replaceAll(/}\s*$/gs, '');
+          e = e.replace(/style:(.*)/gs, 'style="\${this.parseStyle($1)}"');
+          
+
+          break;
+        case e.includes('[') && e.includes(']'):
+          e = e.replace(/:(.*)/gs, '={$1.join(" ")}');
+          break;
+        default:
+          e = e.replace(/:(.*)/gs, '="${$1}"');
+          e = e.replace(/,\s*$/gs, '');
+          e = e.replace(/}\s*$/gs, '');
+          e = e.replaceAll(/{\s*$/gs, '');
+
+          break;
+      }
+ 
+      return e.trim();
+    });
+
+    let newSpread = splitByCommas.join(' ').trim().replace(/,$/, '');
+     
+    // remove trailing }
+    newSpread = newSpread.replace(/}\s*$/, '')
+    newSpread = newSpread.trim().replace(/{\s*$/gs, '')
+    string = string.replace(old, newSpread); 
+  }
 
     return attributesList;
   }
@@ -315,7 +314,6 @@ function Compiler(func, file) {
 
     return returns || [];
   }
-  // throw error if return is not wrapped in <></> or
   if (string.match(/return\s*\<>|return\s*\(.*\)/gs) && !string.match(/return\s*\<>.*\<\/>|return\s*\(.*\)/gs)
     || string.match(/return\s*\<[a-zA-Z0-9_-]+.*>/gs)
   ) {
@@ -348,35 +346,41 @@ function Compiler(func, file) {
     }
     let usesBraces = returnStatement.match(/return\s*\(/gs) ? true : false;
 
-
-    // Remove trailing ']' or trailing )
+    let attributes = extractAttributes(contents);
     contents = contents.trim().replace(/\]$/, "")
     contents = contents.replace(/\)$/, "");
     usesBraces ? !contents.includes('<>') ? contents = `<>${contents}</>` : null : null
     updatedContents = contents;
-    let attributes = extractAttributes(contents);
+ 
 
     let newAttributes = [];
     let oldAttributes = [];
     attributes.forEach((attribute) => {
       const { element, attributes } = attribute;
+      // make sure it isnt a jsx component
+      let isJSXComponent = element.match(/[A-Z]/) ? true : false;
+      if (isJSXComponent) {
+        return;
+      }
       if (Object.keys(attributes).length === 0) return;
 
 
       newAttributes.push(attribute);
       for (let key in attributes) {
 
-        let value = attributes[key];
+        let value = attributes[key]; 
         let oldvalue = value;
         if (value && !value.new) {
+           
           if (value && value.includes("={")) {
+         
             value = value.replace("=", "");
             value == "undefined" ? (value = '"') : (value = value);
 
             key == 'style'
               && value.includes("{{")
               ? value = `{this.parseStyle({${value.split('{{')[1].split('}}')[0]}})}` : null
-
+ 
 
 
             value = `="\$${value}",`;
@@ -433,9 +437,7 @@ function Compiler(func, file) {
           valuestate = valuestate.match(regex) ? valuestate.match(regex)[0].split("useState(")[1].split(")")[0].trim() : valuestate
 
 
-          let newState = `${varType} [${key}, ${setKey}] = this.useState('${key}', ${valuestate}
-           
-            `;
+          let newState = `${varType} [${key}, ${setKey}] = this.useState('${key}', ${valuestate}`;
           string = string.replace(line, newState);
           break;
         case line.includes("useRef") && !line.includes("import"):
@@ -497,16 +499,12 @@ function Compiler(func, file) {
 
       let name = component.split("<")[1].split(">")[0].split(" ")[0].replace("/", "");
       let componentAttributes = component.split("<")[1].split(">")[0].split(" ").join(" ").replace(name, "").trim();
-      // some components will have props that have html inside of them we need to only get the props ex: <Header title={<h1>hello</h1>}></Header> -> title={<h1>hello</h1>}  // also spread props ex: <Header {...props}></Header> -> {...props} or {...props, title: 'hello'} or {...props, color:{color: 'red'}}
-      // grab ...( spread props ) 
-      const dynamicAttributesRegex = /(\w+)(?:="([^"]*)")?(?:='([^']*)')?(?:=\{([^}]*)\})?(?:=\{(.*?)\})?(?:={([^}]*)})?(?:{([^}]*)})?|(?:{(?:[^{}]+|\{(?:[^{}]+|\{[^}]*\})*\})*\})|(\.{3}\{(?:[^{}]+|\{(?:[^{}]+|\{[^}]*\})*\})*\})|\$=\{(?:[^{}]+|\{(?:[^{}]+|\{[^}]*\})*\})*\}/gs;
-
-
+      const dynamicAttributesRegex = /(\w+)(?:="([^"]*?)"|='([^']*?)'|(?:=\{([^}]*?)\})?|(?:=\{(.*?)*\})?|(?:={([^}]*?)})?|(?:{([^}]*?)})?|(?:}))?|\$=\s*\{\s*\{\s*([^]*?)\s*\}\s*\}/gs;
 
 
 
       let props = component.match(dynamicAttributesRegex)
-
+ 
       let filteredProps = [];
       let isWithinComponent = false;
       let componentName = name
@@ -518,17 +516,14 @@ function Compiler(func, file) {
 
         if (prop === componentName) {
 
-          // If the component is encountered, start collecting props
           isWithinComponent = true;
           filteredProps.push(prop);
         } else if (isWithinComponent && prop.includes('=')) {
-
+ 
           if (prop.startsWith('$=')) {
             let old = prop
-            prop = prop.replace('$=', '$_ternary=')
-
-            // remove trailing }
-            prop = prop.replace(/}\s*$/, '')
+            prop = prop.replace(/\$\s*=\s*\{\s*\{/, '').replace(/\}\s*\}/, '')
+ 
             component = component.replace(old, prop)
             componentAttributes = componentAttributes.replace(old, prop)
 
@@ -536,14 +531,12 @@ function Compiler(func, file) {
 
           }
           else if (prop.includes('${')) {
-            // if it has  an object inside of it then we should just do soemting:object else we should do something: `${object}`
-
-            prop = prop.replace('="', ':').replace('}"', '}')
-            if (prop.includes('${')) {
+       
+            
+            prop = prop.replace('="', ':') 
+            if (prop.includes('${')) { 
               prop = prop.replace('="', ':')
-              prop = prop.replace('${', '')
-              prop = prop.replace('}', '')
-
+              prop = prop.replace('${', '')  
             }
             if (prop.includes('="${{')) {
               prop = prop.replace('${{', '{')
@@ -553,12 +546,21 @@ function Compiler(func, file) {
             }
 
           }
-          else if (prop.startsWith('={')) {
-            prop = prop.replace('={', ':`${')
-            prop.replace('} ', '}`')
+          if (prop.includes('={')) {  
+              let value = prop.split('={') 
+              let isObj = value[1].match(/^{.*}$/gs) ? true : false
+              if (!isObj) {
+                // remove trailing }
+                value[1] = value[1].replace(/}\s*$/, '')
+              }
+
+              if(value[0] == 'style' && isObj){
+                value[1] = `this.parseStyle(${value[1]})`
+              }
+              prop = `${value[0]}:${value[1]}`
           }
 
-          if (prop.includes('function')) {
+          if (prop.includes('function') || prop.includes('=>')){
             // parse 'function' to function 
             prop = prop.replace("'", '')
 
@@ -567,13 +569,15 @@ function Compiler(func, file) {
 
             }
 
-            prop = prop.replace('=function', ':function')
+            prop = prop.replace('=function', ':function') 
           }
-
+  
           filteredProps.push(prop);
 
 
 
+        }else if (isWithinComponent && prop.includes('}')) {
+            
         }
 
 
@@ -588,14 +592,13 @@ function Compiler(func, file) {
         component = component.replace(prop, '')
       })
 
-      let children = component.split(`<${name}`)[1].split(`</${name}>`)[0].trim().replace(/\s+/g, " ").trim().replace(/,$/, '').replace('>', '').replace(/\/$/, '').trim()
-
+      let children = new RegExp(`<${name}[^>]*>([^]*)<\/${name}>`, 'gs').exec(component)?.[1] || null;
 
       props = filteredProps.join(',').replace(/\s+/g, " ").trim().replace(/,$/, '')
 
       let savedname = name;
 
-
+ 
 
       name = name + Math.random().toString(36).substring(2);
       if (children && children.match(componentRegex)) {
@@ -618,6 +621,7 @@ function Compiler(func, file) {
           }
 
           myChildrens.push(child.children);
+          childs = childs.filter((e) => e.parent !== name);
         }
       });
 
@@ -680,10 +684,10 @@ function Compiler(func, file) {
           let text = fs.readFileSync(file, "utf8");
           if (!file.endsWith('.js') && file.endsWith('.jsx')) {
             text = Compiler(text, file);
+            
           }
           let dest = file.split('node_modules')[1]
-          dest = dest.split(baseFolder)[1]
-          // write to dist
+          dest = dest.split(baseFolder)[1] 
           writer(process.cwd() + '/dist/src/' + baseFolder + dest, text)
           let importname = match.split('import')[1].split('from')[0].trim()
           let oldImportstring = match.split('from')[1].trim().replace(/'/g, '').replace(/"/g, '').trim()
@@ -891,26 +895,20 @@ const glb = await glob("**/**/**/**.{jsx,js}", {
 });
 async function Build() {
   globalThis.isBuilding = true
-  console.log('Compiling......')
+  console.log(globalThis.isProduction ? 'Creating Optimized Production Build\n' : '')
+  let str = `Page \t\t\t\t Size\n` 
+  globalThis.isProduction ? console.log('\x1b[32m%s\x1b[0m', str) : null
   let reader = async (file) => {
     let text = await fs.readFileSync(file, "utf8");
     return text;
   };
 
 
-
-
-
-
-  // Process files in the 'pages' directory
-  let appjs = '';
-  let hasWritten = []
+   
   function ssg(routes = []) {
-    globalThis.isBuilding = true
-    console.log(`Generating html files for ${routes.length} routes`)
+    globalThis.isBuilding = true 
     routes.forEach(async (route) => {
-      if (route.url.includes(':')) {
-        console.log('Route ' + route.url + ' is a dynamic route and will not be generated')
+      if (route.url.includes(':')) { 
         return
       }
       let equalparamroute = routes.map((e) => {
@@ -938,65 +936,24 @@ async function Build() {
           <meta charset="UTF-8">
           <meta name="viewport" content="width=device-width,initial-scale=1.0">
           <script type="module" id="meta">
-          window.history.pushState({}, '', '${route.url}')
-          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){
-            let image = metadata.image.file
-            let type = metadata.image.type
-            
-            document.head.innerHTML += '<meta property="og:image" content="' + image + '">'
-            document.head.innerHTML += '<meta property="og:image:type" content="' + type + '">'
-         }
-         if(metadata && metadata.url){
-           document.head.innerHTML += '<meta property="og:url" content="' + metadata.url + '">'
-         } 
+          window.history.pushState({}, '', '${route.url}') 
           
-         if(metadata && metadata.robot){
-            document.head.innerHTML += '<meta name="robots" content="' + metadata.robot + '">'
-         }
-         if(metadata && metadata.manifest){
-            document.head.innerHTML += '<link rel="manifest" href="' + metadata.manifest + '">'
-         }
-         if(metadata && metadata.tags){
-            metadata.tags.forEach(tag => {
-              document.head.innerHTML += tag
-            })
-         }
-
-         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>
          <script type="module" id="router">
          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')}')
-           if(Object.keys(module).includes('$prerender') && !module.$prerender){
-             document.head.setAttribute('prerender', 'false')
+           try{
+            let module = await import('/${route.fileName.replace('.jsx', '.js')}')
+            if(Object.keys(module).includes('$prerender') && !module.$prerender){
+              document.head.setAttribute('prerender', 'false')
+            }
+            res.render(module, req, res, module.$metadata)
+           }
+           catch(error){
+             document.documentElement.setAttribute('error', JSON.stringify({stack: error.stack, message: error.message, at: '${route.fileName}', line: error.lineNumber}))
+             throw new Error({stack: error.stack, message: error.message})
            }
-           res.render(module, req, res, module.$metadata)
          }) 
          ${equalparamroute.length > 0 ? equalparamroute.map((e) => {
 
@@ -1057,52 +1014,76 @@ async function Build() {
       globalThis.listen = true;
 
       const browser = await puppeteer.launch({
-        headless: "new", args: ['--no-sandbox', '--disable-setuid-sandbox'],
+        headless:  "new", args: ['--no-sandbox', '--disable-setuid-sandbox'],
         warning: false,
-      })
-
-      const browserPID = browser.process().pid
+      }) 
       try {
 
         route.url = route.url.replaceAll(/\/:[a-zA-Z0-9_-]+/gs, '')
         let page = await browser.newPage();
-        await page.goto(`http://localhost:${port}/`, { waitUntil: 'networkidle2' });
-        await page.waitForSelector('#root', { timeout: 10000 })
+         // Handle browser errors
+         page.on('error', (err) => {
+          console.error('BROWSER ERROR:', err);
+        });
+        await page.evaluate(() => {
+          window.onerror = function (msg, url, lineNo, columnNo, error) {
+            console.log(msg, url, lineNo, columnNo, error)
+          }
+        })  
+        try {
+          page.on('pageerror', async err => { 
+            let errorObj = await page.evaluate(() => document.documentElement.getAttribute('error')) 
+            console.log('\x1b[31m%s\x1b[0m', 'PAGE ERROR:', errorObj);
+            
+          });
+        } catch (error) {
+          browser.close()
+        }
+        // Handle page crashes
+        page.on('crash', () => {
+          console.error('PAGE CRASHED');
+        });
+        page.on('requestfailed', request => {
+          console.error('REQUEST FAILED:', request.url(), request.failure().errorText);
+        });
+       await page.goto(`http://localhost:${port}/`, { waitUntil: 'networkidle2' });
+       
+
+     
+          
+
+           
+   
         await page.evaluate(() => {
           document.getElementById('meta').remove()
           document.querySelector('#isServer').innerHTML = 'window.isServer = false'
           if (document.head.getAttribute('prerender') === 'false') {
             document.querySelector('#root').innerHTML = ''
+            console.log(`Disabled prerendering for ${window.location.pathname}`)
           }
-        })
-        const html = await page.content();
+        }) 
+        let html = await page.content();
 
-        await page.close();
+        html = await prettier.format(html, { parser: "html" }) 
+        
+        
         await writer(process.cwd() + '/dist/' + (route.url === '/' ? 'index.html' : `${route.url}/` + 'index.html'), html)
-        await browser.close();
-        server.close()
+        
 
       } catch (error) {
-        server.close()
-        await browser.close();
-      }
+        console.log(error) 
+      } 
+
       finally {
-        await browser.close();
-        server.close()
+        browser.close()
+        server.close() 
       }
-      try {
-        process.kill(browserPID)
-      } catch (error) {
-      }
-
-
     })
 
     let timeout = setTimeout(() => {
       globalThis.isBuilding = false
       clearTimeout(timeout)
-    }, 1000)
-    console.log(`Generated ${routes.length} html files for ${routes.length} routes`)
+    }, 1000) 
   }
 
   globalThis.routes = []
@@ -1134,17 +1115,14 @@ async function Build() {
 
 
     let data = await fs.readFileSync(origin, "utf8");
-    data = Compiler(data, origin);
-
-
-
-    await writer(process.cwd() + "/dist/" + fileName.replace('.jsx', '.js'), data).then(async () => {
-
-
-
-      await writer(process.cwd() + "/dist/" + fileName.replace('.jsx', '.js'), data)
-
-    })
+     
+   // gen sourcemap if not production
+    let size = fs.statSync(origin).size;
+    if(!globalThis.isProduction){
+      let { sourceMap } = sourceMapGen({origin:origin, fileName:fileName}, await Compiler(data, origin)) 
+      await writer(process.cwd() + "/dist/src/maps/" + fileName.replace('.jsx', '.js.map'), JSON.stringify(sourceMap, null, 2))
+    }
+    await writer(process.cwd() + "/dist/" + fileName.replace('.jsx', '.js'), await Compiler(data, origin)) 
 
     // configure routing for each page
 
@@ -1208,8 +1186,18 @@ async function Build() {
 
     globalThis.routes.push({ fileName: fileName, url: obj.url, html: '/' + (isBasePath ? 'index.html' : `${obj.url}/` + 'index.html') })
 
-
-
+ 
+    let stats = {route: obj.url.padEnd(30),
+      size: Math.round(size / 1000) + 'kb',
+      letParentFolder: obj.url.split('/').slice(0, -1).join('/'),
+      isChildRoute: obj.url.split('/').slice(0, -1).join('/').includes(':') ? true : false,
+      parentRoute: obj.url.split('/').slice(0, -1).join('/').split(':')[0],
+     
+    }   
+    stats.isChildRoute ? stats.route = `? ${obj.url}` : null
+    let string = `${isBasePath ? '+' : '+'} ${stats.route.padEnd(30)} ${stats.size}`
+     
+    globalThis.isProduction ? console.log(string) : null
   }
 
   ssg(globalThis.routes)
@@ -1246,10 +1234,7 @@ async function Build() {
     if (name.includes('.jsx')) {
       data = Compiler(data, process.cwd() + "/src/" + name);
 
-      await writer(process.cwd() + "/dist/src/" + name.split('.jsx').join('.js'), data).then(async () => {
-        await writer(process.cwd() + "/dist/src/" + name.replace('.jsx', '.js'), data)
-
-      })
+      await writer(process.cwd() + "/dist/src/" + name.split('.jsx').join('.js'), data)  
       return
     }
     bundleSize += fs.statSync(process.cwd() + "/src/" + name).size;
@@ -1297,7 +1282,7 @@ async function Build() {
   }
 
   globalThis.isBuilding = false
-  console.log(`📦 Build completed: Build Size -> ${Math.round(bundleSize / 1000)}kb`)
+  console.log(`\nTotal bundle size: ${Math.round(bundleSize / 1000)}kb`)
 
   bundleSize = 0;
 
@@ -1307,7 +1292,7 @@ const s = () => {
 
   const server = http.createServer((req, res) => {
 
-    const validExtensions = ['.js', '.css', '.mjs', '.cjs', '.html', '.json', '.png', '.jpg', '.jpeg', '.gif', '.svg', '.mp4', '.webm', '.ogg'];
+    const validExtensions = ['.js', '.css', '.mjs', '.cjs', '.html', '.json', '.png', '.jpg', '.jpeg', '.gif', '.svg', '.mp4', '.webm', '.ogg', '.map']
 
     if (!validExtensions.some(ext => req.url.endsWith(ext))) {
       req.url = req.url !== '/' ? req.url.split('/')[1] : req.url;
@@ -1330,6 +1315,7 @@ const s = () => {
                let ws = new WebSocket('ws://localhost:${process.env.PORT || 3000}')
                 ws.onmessage = (e) => {
                   if(e.data === 'reload'){ 
+                    console.log('Reloading...')
                     window.location.reload()
                   }
                 }
@@ -1351,7 +1337,7 @@ const s = () => {
 
 
   function getContentType(filePath) {
-    let ext = ['.js', '.css', '.mjs', '.cjs', '.html', '.json', '.png', '.jpg', '.jpeg', '.gif', '.svg', '.mp4', '.webm', '.ogg'].includes(path.extname(filePath)) ? path.extname(filePath) : '.html'
+    let ext = ['.js', '.css', '.mjs', '.cjs', '.html', '.json', '.png', '.jpg', '.jpeg', '.gif', '.svg', '.mp4', '.webm', '.ogg', '.map'].includes(path.extname(filePath)) ? path.extname(filePath) : '.html'
     switch (ext) {
       case '.js':
         return 'text/javascript';
@@ -1363,6 +1349,8 @@ const s = () => {
         return 'text/javascript';
       case '.html':
         return 'text/html';
+      case '.map':
+        return 'application/json';
       case '.json':
         return 'application/json';
       case '.png':
@@ -1389,26 +1377,18 @@ const s = () => {
   const PORT = process.env.PORT || 3000;
   server.listen(PORT, () => {
     console.log(`Server is running on port ${PORT}`);
+    globalThis.ws = ws
   });
-  let i =
-    setInterval(() => {
-      if (globalThis.isBuilding && globalThis.devMode) {
-
-        ws.clients.forEach((client) => {
-          client.send('reload')
-        })
-      } else {
-        clearInterval(i)
-      }
-    }, 120)
+  
 
 }
 
 
 switch (true) {
-  case process.argv.includes('--watch') && !process.argv.includes('--build') && !process.argv.includes('--serve'):
+  case process.argv.includes('dev') && !process.argv.includes('build') && !process.argv.includes('start'):
 
     globalThis.devMode = true
+    globalThis.isProduction = false
     console.log(`
 Vader.js v1.3.3
 - Watching for changes in ./pages
@@ -1425,12 +1405,19 @@ Vader.js v1.3.3
           if (event == 'change'
             && !globalThis.isBuilding
           ) {
+            if(globalThis.ws && !globalThis.isWriting){
+              globalThis.ws.clients.forEach((client) => {
+                console.log('Reloading...')
+                client.send('reload')
+              })
+            }
 
+            globalThis.isBuilding = true
             Build()
           }
         }).on('error', (err) => console.log(err))
     })
-    let p = process.argv[process.argv.indexOf('--watch') + 1] || process.env.PORT || 3000
+    let p = process.argv[process.argv.indexOf('dev') + 1] || 3000
 
     process.env.PORT = p
     s()
@@ -1438,16 +1425,21 @@ Vader.js v1.3.3
     globalThis.listen = true;
 
     break;
-  case process.argv.includes('--build') && !process.argv.includes('--watch') && !process.argv.includes('--serve'):
+  case process.argv.includes('build') && !process.argv.includes('dev') && !process.argv.includes('start'):
     globalThis.devMode = false
+    globalThis.isProduction = true
+    globalThis.routeStates = []
     console.log(`
 Vader.js v1.3.3 
 Building to ./dist
 `)
+    if(fs.existsSync(process.cwd() + '/dist/src/maps')){
+      fs.rmSync(process.cwd() + '/dist/src/maps', { recursive: true })
+    }
     Build()
 
     break;
-  case process.argv.includes('--serve') && !process.argv.includes('--watch') && !process.argv.includes('--build'):
+  case process.argv.includes('start') && !process.argv.includes('dev') && !process.argv.includes('build'):
     let port = process.argv[process.argv.indexOf('--serve') + 1] || 3000
     process.env.PORT = port
     globalThis.devMode = false
@@ -1459,17 +1451,19 @@ url: http://localhost:${port}
     s()
     break;
   default:
-    console.log(`
+    // add color
+    console.log(` 
 Vader.js is a reactive framework for building interactive applications for the web built ontop of bun.js!
     
 Usage: vader <command> 
     
 Commands:
-  --watch (port)    Watch the pages folder for changes with hot reloading
+
+   vaderjs dev     Start the development server
     
-  --build     Build the project to ./dist
+   vaderjs build   Build the project to ./dist
     
-  --serve  (400)   Serve the project on a port (default 3000 or process.env.PORT)
+   vaderjs start  <port>   Production Mode (default 3000 or process.env.PORT)
       
 Learn more about vader:           https://vader-js.pages.dev/