vaderjs 1.3.3-662-hotfix → 1.3.3-763562-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-662-hotfix",
+  "version": "1.3.3-763562-hotfix",
   "bin": {
     "vader": "./vader.js"
   },

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.$_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};
+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(e={}){this.$_vaderElement=!0,this.state={},this.key=null,this.components={},this.mounted=!1,this.checkIFMounted(),this.memoizes=[],this.functions=[],this.props={children:"",$:{},...e},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=[],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){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){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(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){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

@@ -143,6 +143,9 @@ function Compiler(func, file) {
             isJSXComponent = elementTag.match(/^[A-Z]/) ? true : false;
           }
         });
+        if (isJSXComponent) {
+          continue
+        }
         // add ; after newlines  
 
 
@@ -239,34 +242,34 @@ function Compiler(func, file) {
         continue;
       }
       let old = spread;
-      spread = spread.trim().replace(/\s+/g, " "); 
+      spread = spread.trim().replace(/\s+/g, " ");
       // re,pve $={ and }
       spread = spread.replace(/\s*\$\s*=\s*{\s*{/gs, '')
-      
+
       // replace trailing }
-      spread = spread.replace(/}}\s*$/, '').replace(/}\s*}$/, '') 
-      let splitByCommas =  spread.split(/,(?![^{}]*})/gs) 
+      spread = spread.replace(/}}\s*$/, '').replace(/}\s*}$/, '')
+      let splitByCommas = spread.split(/,(?![^{}]*})/gs)
       // remove empty strings
       splitByCommas = splitByCommas.filter((e) => e.split(':')[0].trim().length > 0)
-      splitByCommas = splitByCommas.map((e, index) => { 
+      splitByCommas = splitByCommas.map((e, index) => {
         let key = e.split(':')[0].trim()
         switch (true) {
           case e.includes('function') && !e.includes('this.bind') || e && e.includes('=>') && !e.includes('this.bind'):
             let value = e.split(':')[1].trim()
-            let ref = Math.random().toString(36).substring(2).split('').filter((e) => !Number(e)).join(''); 
+            let ref = Math.random().toString(36).substring(2).split('').filter((e) => !Number(e)).join('');
             value = `this.bind(${value}, false, "${ref}", "")`
             e = `${key}="\${${value}}"`
             break;
-          case  e.includes('style:'):
-            let v2 = e.split('style:')[1].trim().replace(/,$/, '') 
-            v2 = v2.replace(/,$/, '') 
+          case e.includes('style:'):
+            let v2 = e.split('style:')[1].trim().replace(/,$/, '')
+            v2 = v2.replace(/,$/, '')
             e = `${key}="\${this.parseStyle(${v2})}"`
-           break;
-           
-          default:  
-            let v = e.split(':') 
+            break;
+
+          default:
+            let v = e.split(':')
             key = v[0].trim()
-             // remove key from v
+            // remove key from v
             v.shift()
             v = v.join(' ')
             e = `${key}="\${${v}}"`
@@ -277,7 +280,7 @@ function Compiler(func, file) {
 
         return e;
       });
- 
+
 
       let newSpread = splitByCommas.join(' ').trim().replace(/,$/, '');
 
@@ -348,7 +351,7 @@ function Compiler(func, file) {
       newAttributes.push(attribute);
       for (let key in attributes) {
 
-        let value = attributes[key]; 
+        let value = attributes[key];
         let oldvalue = value;
         if (value && !value.new) {
 
@@ -479,11 +482,16 @@ 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();
-      const dynamicAttributesRegex = /(\w+)(?:="([^"]*?)"|='([^']*?)'|(?:=\{([^}]*?)\})?|(?:=\{(.*?)*\})?|(?:={([^}]*?)})?|(?:{([^}]*?)})?|(?:}))?|\$=\s*\{\s*\{\s*([^]*?)\s*\}\s*\}/gs;
+      // catchall = "" ={} =[]
+
+
+      let props = component.split("<")[1].split(">")[0]
 
 
+      const dynamicAttributesRegex = /([a-zA-Z0-9_-]+)\s*=\s*("(?:[^"\\]*(?:\\.[^"\\]*)*)"|'(?:[^'\\]*(?:\\.[^'\\]*)*)'|\{(?:[^{}]|(?:\{(?:[^{}]|(?:\{.*.*\})*)*\})*)*\}|(?:\([^)]*\)|()\s*=>\s*(?:\{.*\})?|\{[^}]*\})|\[[^\]]*\])/gs;
+
+      const attributeObject = {};
 
-      let props = component.match(dynamicAttributesRegex)
 
       let filteredProps = [];
       let isWithinComponent = false;
@@ -492,78 +500,31 @@ function Compiler(func, file) {
 
       let $_ternaryprops = []
 
-      for (let prop of props) {
-
-        if (prop === componentName) {
-
-          isWithinComponent = true;
-          filteredProps.push(prop);
-        } else if (isWithinComponent && prop.includes('=')) {
-
-          if (prop.startsWith('$=')) {
-            let old = prop
-            prop = prop.replace(/\$\s*=\s*\{\s*\{/, '').replace(/\}\s*\}/, '}').replace(/}\s*$/, '')
- 
-            component = component.replace(old, prop)
-            componentAttributes = componentAttributes.replace(old, prop)
-
-            $_ternaryprops.push(prop)
-
-          }
-          else if (prop.includes('${')) {
-
-
-            prop = prop.replace('="', ':')
-            if (prop.includes('${')) {
-              prop = prop.replace('="', ':')
-              prop = prop.replace('${', '')
-            }
-            if (prop.includes('="${{')) {
-              prop = prop.replace('${{', '{')
-              prop = prop.replace('}}', '}')
-              prop = prop.replace('="', ':')
-              prop = 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') || prop.includes('=>')) {
-            // parse 'function' to function 
-            prop = prop.replace("'", '')
-
-            if (prop.endsWith("}'")) {
-              prop = prop.replace("}'", '}')
-
-            }
-
-            prop = prop.replace('=function', ':function')
-          }
-
-          filteredProps.push(prop);
-
-
-
-        } else if (isWithinComponent && prop.includes('}')) {
-
+      let match;
+      let propstring = ''
+      // props right now is just a string with all of them on one line and a space between each
+      while ((match = dynamicAttributesRegex.exec(props)) !== null) {
+        let str = match[0].trim().replace(/\s+/g, " ");
+        if (!str.includes('=')) {
+          continue
         }
-
-
-        else {
-          isWithinComponent = false;
+        str = str.split('=')
+        let key = str[0].trim()
+        let value = str[1].trim()
+        if (value.startsWith('"') && !value.endsWith('"') || value.startsWith("'") && !value.endsWith("'")
+          || value.startsWith('`') && !value.endsWith('`')) {
+          // wrap in respective quotes
+          value = value + value[0]
+        }
+        let isObject = value.startsWith('{{') && value.endsWith('}}')
+        if (isObject) {
+          value = value.split('{{')[1].split('}}')[0].trim()
+          value = `{${value}}`
+        } else {
+          // remove starting { and ending } using regex
+          value = value.replace(/^{/, '').replace(/}$/, '')
         }
+        propstring += `${key}:${value},`
       }
       component = component.replaceAll(/\s+/g, " ");
 
@@ -574,7 +535,7 @@ function Compiler(func, file) {
 
       let children = new RegExp(`<${name}[^>]*>([^]*)<\/${name}>`, 'gs').exec(component)?.[1] || null;
 
-      props = filteredProps.join(',').replace(/\s+/g, " ").trim().replace(/,$/, '')
+
 
       let savedname = name;
 
@@ -607,24 +568,15 @@ function Compiler(func, file) {
 
 
 
-
-      props = props.replaceAll(`,${savedname}`, '').replaceAll(savedname, '')
-      if (props.startsWith(',')) {
-        props = props.replace(',', '')
-      }
-      props = props.replaceAll("='", ":'")
-        .replaceAll('=`', ':`')
-        .replaceAll('="', ':"')
-        .replaceAll('={', ':')
+      propstring = propstring.replace(/,$/, '')
 
 
       /**
        * @memoize - memoize a component to be remembered on each render and replace the old jsx
        */
 
-
       let replace = "";
-      replace = `\${this.memoize(this.createComponent(${savedname}, {${props}}, [\`${myChildrens.join('')}\`]))}`;
+      replace = `\${this.memoize(this.createComponent(${savedname}, {${propstring}}, [\`${myChildrens.join('')}\`]))}`;
 
 
       body = body.replace(before, replace);
@@ -640,47 +592,49 @@ function Compiler(func, file) {
   let replaceMents = [];
 
 
-  for (let match of imports) {
-    let path = match.split('from')[1].trim().replace(/'/g, '').replace(/"/g, '').trim()
-    switch (true) {
-      case path && !path.includes('./') && !path.includes('/vader.js') && !path.includes('/vaderjs/client') && !path.startsWith('src') && !path.startsWith('public') && !path.includes('http') && !path.includes('https'):
-        let componentFolder = fs.existsSync(process.cwd() + '/node_modules/' + path) ? process.cwd() + '/node_modules/' + path : process.cwd() + '/node_modules/' + path.split('/')[0]
-        componentFolder = componentFolder.split(process.cwd())[1]
-        if (!fs.existsSync(process.cwd() + componentFolder)) {
-          throw new Error('Could not find ' + path + ' at ' + match + ' in file ' + file)
-        }
-
-        if (!fs.existsSync(process.cwd() + '/dist/src/' + componentFolder.split('/').slice(2).join('/'))) {
-          fs.mkdirSync(process.cwd() + '/dist/src/' + componentFolder.split('/').slice(2).join('/'), { recursive: true })
-        }
-
-        let baseFolder = componentFolder.split('node_modules')[1].split('/')[1]
-        let glp = globSync('**/**/**/**.{jsx,js}', {
-          cwd: process.cwd() + '/node_modules/' + baseFolder + '/',
-          absolute: true,
-          recursive: true
-        })
-        for (let file of glp) {
-          let text = fs.readFileSync(file, "utf8");
-          if (!file.endsWith('.js') && file.endsWith('.jsx')) {
-            text = Compiler(text, file);
-
+  if(imports){
+    for (let match of imports) {
+      let path = match.split('from')[1].trim().replace(/'/g, '').replace(/"/g, '').trim()
+      switch (true) {
+        case path && !path.includes('./') && !path.includes('/vader.js') && !path.includes('/vaderjs/client') && !path.startsWith('src') && !path.startsWith('public') && !path.includes('http') && !path.includes('https'):
+          let componentFolder = fs.existsSync(process.cwd() + '/node_modules/' + path) ? process.cwd() + '/node_modules/' + path : process.cwd() + '/node_modules/' + path.split('/')[0]
+          componentFolder = componentFolder.split(process.cwd())[1]
+          if (!fs.existsSync(process.cwd() + componentFolder)) {
+            throw new Error('Could not find ' + path + ' at ' + match + ' in file ' + file)
           }
-          let dest = file.split('node_modules')[1]
-          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()
-          let newImport = `/src/${baseFolder + dest}`
-          newImport = newImport.replaceAll('.jsx', '.js').replaceAll('\\', '/')
-          replaceMents.push({ match: oldImportstring, replace: newImport })
-          console.log(`📦 imported Node Package  ${baseFolder} `)
-        }
-
-
-        break;
-      default:
-        break;
+  
+          if (!fs.existsSync(process.cwd() + '/dist/src/' + componentFolder.split('/').slice(2).join('/'))) {
+            fs.mkdirSync(process.cwd() + '/dist/src/' + componentFolder.split('/').slice(2).join('/'), { recursive: true })
+          }
+  
+          let baseFolder = componentFolder.split('node_modules')[1].split('/')[1]
+          let glp = globSync('**/**/**/**.{jsx,js}', {
+            cwd: process.cwd() + '/node_modules/' + baseFolder + '/',
+            absolute: true,
+            recursive: true
+          })
+          for (let file of glp) {
+            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]
+            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()
+            let newImport = `/src/${baseFolder + dest}`
+            newImport = newImport.replaceAll('.jsx', '.js').replaceAll('\\', '/')
+            replaceMents.push({ match: oldImportstring, replace: newImport })
+            console.log(`📦 imported Node Package  ${baseFolder} `)
+          }
+  
+  
+          break;
+        default:
+          break;
+      }
     }
   }
 
@@ -873,6 +827,8 @@ const glb = await glob("**/**/**/**.{jsx,js}", {
   absolute: true,
   recursive: true
 });
+let hasRendered = []
+
 async function Build() {
   globalThis.isBuilding = true
   console.log(globalThis.isProduction ? 'Creating Optimized Production Build\n' : '')
@@ -887,190 +843,133 @@ async function Build() {
 
   function ssg(routes = []) {
     globalThis.isBuilding = true
-    routes.forEach(async (route) => {
-      if (route.url.includes(':')) {
-        return
-      }
-      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
+    let server = http.createServer((req, res) => {
+      let route = routes.find((e) => e.url === req.url)
+      if (route) {
+        let document = globalThis.routeDocuments.find((e) => e.url === req.url)
+        res.writeHead(200, { 'Content-Type': 'text/html' });
+        res.end(document.document);
+      } else {
+        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);
           }
-        }
-        return null
-      }).filter(Boolean)
-      let document = `
-      <!DOCTYPE html>
-      <html lang="en">
-      <head>
-          <script>
-          window.routes = JSON.parse('${JSON.stringify(routes)}') 
-          </script>
-          <script id="isServer">
-          window.isServer = true
-          </script>
-          <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}')  
-         </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) => {
-           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){
-            let errorMessage = {
-              message: error.message,
-              name: error.name,
-              stack: error.stack, 
-              path: window.location.pathname
-            };
-          
-            
-            document.documentElement.setAttribute('error', JSON.stringify(errorMessage));
-            throw new Error(error)
-           }
-         }) 
-         ${equalparamroute.length > 0 ? equalparamroute.map((e) => {
-
-
-
-        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> 
-      </head>
-      <body>
-          <div id="root"></div>
-      </body>  
-      
-      
-      </html>
-    `;
-
-      // generate random but common ports
-      let port = Math.floor(Math.random() * (65535 - 49152 + 1) + 49152)
-
-      const server = http.createServer((req, res) => {
+        });
+      }
+    });
 
-        if (req.url === '/') {
-          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);
-            }
-          });
-        }
-      });
+    let port = 12000
+    server.on('error', (err) => {
+      if (err.code === 'EADDRINUSE') {
+        setTimeout(() => {
+          server.close();
+          server.listen(++port);
+        }, 1000);
+      }
+    })
 
-      server.listen(port)
-      server.on('error', (err) => {
-        if (err.code === 'EADDRINUSE') {
-          console.log(`Port ${port} is in use, trying another port...`);
-          setTimeout(() => {
-            server.close();
-            server.listen(++port);
-          }, 1000);
-        }
-      })
+    const browser = puppeteer.launch({
+      headless: "new", args: ['--no-sandbox', '--disable-setuid-sandbox'],
+      warning: false,
+    })
+    server.listen(port);
 
+    routes.forEach(async (route) => {
+      if (route.url.includes(':')) {
+        return
+      }
       globalThis.listen = true;
 
-      const browser = await puppeteer.launch({
-        headless: "new", args: ['--no-sandbox', '--disable-setuid-sandbox'],
-        warning: false,
-      })
       try {
 
         route.url = route.url.replaceAll(/\/:[a-zA-Z0-9_-]+/gs, '')
-        let page = await browser.newPage();
-        // Handle browser errors
-        page.on('error', (err) => {
-          console.error('BROWSER ERROR:', JSON.parse(err));
-        });
-      
-        try {
-          page.on('pageerror', async err => { 
-            let errorObj =  JSON.parse(await page.evaluate(() => document.documentElement.getAttribute('error')) || '{}') 
-            console.log('\x1b[31m%s\x1b[0m', 'Compiler Error:',  errorObj)
-            if(globalThis.isProduction){
-              process.exit(1)
-            }
+        let page = (await browser).newPage()
+        page.then(async (page) => {
+          page.on('error', (err) => {
+            console.error('JS ERROR:', JSON.parse(err));
           });
-        } 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' });
-
-
-
+          try {
+            page.on('pageerror', async err => {
+              let errorObj = JSON.parse(await page.evaluate(() => document.documentElement.getAttribute('error')) || '{}')
+              console.log('\x1b[31m%s\x1b[0m', 'Compiler Error:', errorObj)
+
+              console.log('\x1b[31m%s\x1b[0m', 'Error:', err)
+            });
+          } catch (error) {
+            page.close()
+          }
+          page.on('crash', () => {
+            console.error(`Render process crashed for ${route.url}`)
+          });
+          page.on('requestfailed', request => {
+            console.error('REQUEST FAILED:', request.url(), request.failure().errorText);
+          });
+          await page.goto(`http://localhost:${port}${route.url}`, { waitUntil: 'networkidle2' });
+
+          page.evaluate(() => {
+            document.querySelector('#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}`)
+            }
+          })
+          let html = await page.content();
 
+          html = await prettier.format(html, { parser: "html" })
 
+          writer(process.cwd() + '/dist/' + (route.url === '/' ? 'index.html' : `${route.url}/` + 'index.html'), html)
 
+          console.log(`\x1b[32m%s\x1b[0m`, `Prerendered ${route.url}...`)
 
-        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}`)
-          }
+          hasRendered.push(route.url)
         })
-        let html = await page.content();
-
-        html = await prettier.format(html, { parser: "html" })
 
 
-        await writer(process.cwd() + '/dist/' + (route.url === '/' ? 'index.html' : `${route.url}/` + 'index.html'), html)
 
 
       } catch (error) {
-        console.log(error)
-      }
+        console.log('\x1b[31m%s\x1b[0m', 'Error:', error)
 
+      }
       finally {
-        browser.close()
-        server.close()
       }
     })
 
-    let timeout = setTimeout(() => {
+
+
+
+
+    function kill() {
+      console.log(`\x1b[32m%s\x1b[0m`, `\nPrerendered ${routes.length} pages...\n`)
+      server.close()
+      browser.then((browser) => {
+        browser.close()
+      })
+      hasRendered = []
       globalThis.isBuilding = false
-      clearTimeout(timeout)
-    }, 1000)
-  }
+      globalThis.isProduction ? console.log(`Total Bundle Size: ${Math.round(bundleSize / 1000)}kb`) : null
+      bundleSize = 0
+    }
 
+    if (hasRendered.length === routes.length) {
+      kill()
+    } else {
+      console.log(`\x1b[32m%s\x1b[0m`, `Prerendering ${routes.length} pages...\n`)
+      let interval = setInterval(() => {
+        if (hasRendered.length === routes.length) {
+          kill()
+          clearInterval(interval)
+        }
+      }, 1000);
+    }
+  }
   globalThis.routes = []
 
   for await (let file of glb) {
@@ -1170,7 +1069,9 @@ async function Build() {
     }
 
 
-    globalThis.routes.push({ fileName: fileName, url: obj.url, html: '/' + (isBasePath ? 'index.html' : `${obj.url}/` + 'index.html') })
+    if (!obj.url.includes(':')) {
+      globalThis.routes.push({ fileName: fileName, url: obj.url, html: '/' + (isBasePath ? 'index.html' : `${obj.url}/` + 'index.html') })
+    }
 
 
     let stats = {
@@ -1187,6 +1088,84 @@ async function Build() {
     globalThis.isProduction ? console.log(string) : null
   }
 
+  globalThis.routeDocuments = []
+  globalThis.routes.map((route) => {
+    let equalparamroute = globalThis.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>
+        <script>
+        window.routes = JSON.parse('${JSON.stringify(globalThis.routes)}') 
+        </script>
+        <script type="module" id="meta">
+        window.history.pushState({}, '', '${route.url}')
+        
+       </script>
+        <script id="isServer">
+        window.isServer = true
+        </script>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width,initial-scale=1.0">
+         
+       <script type="module" id="router">
+       import VaderRouter from '/router.js' 
+       const router = new VaderRouter('${route.url}')
+       router.get('${route.url}', async (req, res) => {
+         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){
+          let errorMessage = {
+            message: error.message,
+            name: error.name,
+            stack: error.stack,
+            path: window.location.pathname
+          };
+        
+          
+          document.documentElement.setAttribute('error', JSON.stringify(errorMessage));
+          throw new Error(error)
+         }
+       }) 
+       ${equalparamroute.length > 0 ? equalparamroute.map((e) => {
+
+
+
+      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> 
+    </head>
+    <body>
+        <div id="root"></div>
+    </body>  
+    
+    
+    </html>
+  `;
+    globalThis.routeDocuments.push({ url: route.url, document: document })
+  })
+
   ssg(globalThis.routes)
 
 
@@ -1215,11 +1194,10 @@ async function Build() {
   scannedSourceFiles.forEach(async (file) => {
     file = file.replace(/\\/g, '/');
     let name = file.split('/src/')[1]
-    //parse jsx 
 
     let data = await reader(process.cwd() + "/src/" + name)
     if (name.includes('.jsx')) {
-      let origin = process.cwd() + "/src/" + name 
+      let origin = process.cwd() + "/src/" + name
       if (!globalThis.isProduction) {
         let { sourceMap } = sourceMapGen({ origin: origin, fileName: name }, await Compiler(data, origin))
         data = data + `\n//# sourceMappingURL=/src/maps/${name.replace('.jsx', '.js.map')}\n //#sourceURL=${origin}`
@@ -1228,11 +1206,13 @@ async function Build() {
       await writer(process.cwd() + "/dist/src/" + name.split('.jsx').join('.js'), await Compiler(data, origin))
       return
     }
-    bundleSize += fs.statSync(process.cwd() + "/src/" + name).size;
+    if (!name.includes('.map')) {
+      bundleSize += fs.statSync(process.cwd() + "/src/" + name).size;
+    }
     await writer(process.cwd() + "/dist/src/" + name, data);
   })
 
-  const scannedPublicFiles = await glob("**/**.{css,js,html,mjs,cjs}", {
+  const scannedPublicFiles = await glob("**/**/**.{css,js,html,mjs,cjs,png,jpg,jpeg,gif,svg,mp4,webm,ogg}", {
     ignore: ["node_modules/**/*", "dist/**/*"],
     cwd: process.cwd() + '/public/',
     absolute: true,
@@ -1240,7 +1220,7 @@ async function Build() {
   scannedPublicFiles.forEach(async (file) => {
     file = file.replace(/\\/g, '/');
     file = file.split('/public/')[1]
-    let data = await reader(process.cwd() + "/public/" + file)
+    let data = fs.readFileSync(process.cwd() + "/public/" + file);
     bundleSize += fs.statSync(process.cwd() + "/public/" + file).size;
     await writer(process.cwd() + "/dist/public/" + file, data);
   })
@@ -1273,7 +1253,6 @@ async function Build() {
   }
 
   globalThis.isBuilding = false
-  console.log(`\nTotal bundle size: ${Math.round(bundleSize / 1000)}kb`)
 
   bundleSize = 0;
 
@@ -1381,7 +1360,7 @@ switch (true) {
     globalThis.devMode = true
     globalThis.isProduction = false
     console.log(`
-Vader.js v1.3.3
+Vader.js v${fs.readFileSync(process.cwd() + '/node_modules/vaderjs/package.json', 'utf8').split('"version": "')[1].split('"')[0]}
 - Watching for changes in ./pages
 - Watching for changes in ./src
 - Watching for changes in ./public
@@ -1403,6 +1382,7 @@ Vader.js v1.3.3
               })
             }
 
+            console.log('\nRebuilding...')
             globalThis.isBuilding = true
             Build()
           }