vaderjs 1.3.3-alpha-151 → 1.3.3-alpha-152

package/package.json

@@ -2,7 +2,7 @@
   "name": "vaderjs",
   "description": "A Reactive library aimed to helping you build reactive applications inspired by react.js",
   "module": "vader.js",
-  "version": "1.3.3-alpha-151",
+  "version": "1.3.3-alpha-152",
   "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.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 r(e){return"function"==typeof e&&/^class\s/.test(Function.prototype.toString.call(e))}let n=r(e)?new e(t):null;if(!e)throw new Error("Component must be defined");let i=new Component(t);if(r(e))n.props=t||{},n.props.children=s.join("")||[],n.props.children=s.join(""),n.parentNode=this,n.request=this.request,n.response=this.response,n.key=n.props.key?n.props.key:Math.random(),i=n;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=>{e.startsWith("$props")&&(r.push(t[e]),delete t[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(">,",">")),`<span key="${e.key}" >${s}</span>`}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 n=e[r],i=t[r];n&&i&&!n.isEqualNode(i)&&s.push({type:"replace",old:n,new:i.cloneNode(!0)})}return s}updateChangedElements(e){e.forEach((e=>{switch(e.type){case"replace":e.old.parentNode.replaceChild(e.new,e.old);break;case"remove":e.old.remove();break;case"add":e.old.appendChild(e.new.cloneNode(!0))}}))}hydrate(e){if(e){(new DOMParser).parseFromString(this.render(),"text/html").body.querySelector(`[ref="${e}"]`),document.querySelector(`[ref="${e}"]`)}else{let e=this.key?document.querySelector(`[key="${this.key}"]`):null,t=(new DOMParser).parseFromString(this.render(),"text/html").body;if(t=document.createElement("div").appendChild(t),!e&&(e=document.querySelector(`[key="${t.attributes?.key?.value||null}"]`)),!e)return void console.error('Hydration failed, component not found got ensure you have set key="a value" on the component or this.key inside of function or render method body');t.querySelectorAll("*").forEach((e=>{e.hasAttribute("key")&&e.innerHTML!==document.querySelector(`[key="${e.attributes.key.value}"]`).innerHTML&&document.querySelector(`[key="${e.attributes.key.value}"]`).replaceWith(e)}))}}patch(e,t){const 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,...n){s=s+this.key||2022;let i={},o=(r=r.replace(/,,/g,",")).replaceAll(",,",",");for(var h in n){let e=n[h];i[o.split(",")[h]]=e}r=r.replace(",,",",");return this.functions.find((e=>e.ref===s))||document.addEventListener(`$dispatch_#id=${s}`,(t=>{let{name:r,event:n}=t.detail;if(r===s){let t=this.functions.find((e=>e.ref===s)).params;Object.keys(t).forEach((e=>{t[e]instanceof CustomEvent&&delete t[e],void 0===t[e]?delete t[e]:t[e]}));let r=n;console.log(r),e(n.detail.event)}})),window.callFunction=(e,t)=>{document.dispatchEvent(new CustomEvent(`$dispatch_#id=${e}`,{detail:{name:e,params:null,event:t}}))},!this.functions.find((e=>e.ref===s))&&this.functions.push({ref:s,params:i}),t?e:`((event)=>{event.target.ev = event; callFunction('${s}', event.target.ev)})(event)`}useState(e,t){this.state[e]||(this.state[e]=t);let s=()=>this.state[e],r=s();return[r,(t,n)=>{console.log(t),this.state[e]=t,r=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 n=r();return[r(),(t,i)=>{const o=s(n,t)??t;this.state[e]=o,this.hydrate(i),n=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)=>{states[e]||(states[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()}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,n=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",n),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: ${n}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.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 r(e){return"function"==typeof e&&/^class\s/.test(Function.prototype.toString.call(e))}let n=r(e)?new e(t):null;if(!e)throw new Error("Component must be defined");let i=new Component(t);if(r(e))n.props=t||{},n.props.children=s.join("")||[],n.props.children=s.join(""),n.parentNode=this,n.request=this.request,n.response=this.response,n.key=n.props.key?n.props.key:Math.random(),i=n;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=>{e.startsWith("$props")&&(r.push(t[e]),delete t[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(">,",">")),`<span key="${e.key}" >${s}</span>`}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 n=e[r],i=t[r];n&&i&&!n.isEqualNode(i)&&s.push({type:"replace",old:n,new:i.cloneNode(!0)})}return s}updateChangedElements(e){e.forEach((e=>{switch(e.type){case"replace":e.old.parentNode.replaceChild(e.new,e.old);break;case"remove":e.old.remove();break;case"add":e.old.appendChild(e.new.cloneNode(!0))}}))}hydrate(e){if(e){console.log("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{let e=this.key?document.querySelector(`[key="${this.key}"]`):null;e&&(e.innerHTML=this.render())}}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,...n){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)`}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 n=r();return[r(),(t,i)=>{const o=s(n,t)??t;this.state[e]=o,this.hydrate(i),n=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()}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,n=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",n),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: ${n}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};

package/vader.js

@@ -4,10 +4,10 @@ import { glob, globSync, globStream, globStreamSync, Glob, } from 'glob'
 import puppeteer from 'puppeteer';
 import http from 'http'
 import { WebSocketServer } from 'ws'
-import { watch } from "fs"; 
+import { watch } from "fs";
 import path from 'path'
-let config =  await import('file://' + process.cwd() + '/vader.config.js').then((e) => e.default || e)
- 
+let config = await import('file://' + process.cwd() + '/vader.config.js').then((e) => e.default || e)
+
 
 let start = Date.now()
 let bundleSize = 0;
@@ -31,7 +31,7 @@ if (typeof process.env.isCloudflare !== "undefined" || !fs.existsSync(process.cw
   fs.writeFileSync(process.cwd() + "/dist/index.html", htmlFile)
 }
 
- 
+
 
 function Compiler(func, file) {
   let string = func;
@@ -108,6 +108,7 @@ function Compiler(func, file) {
     let functionMatch;
     while ((functionMatch = functionAttributeRegex.exec(code)) !== null) {
       let [, attributeName, attributeValue] = functionMatch;
+
       let attribute = {};
 
       if (attributeValue && attributeValue.includes("=>") || attributeValue && attributeValue.includes("function")) {
@@ -143,7 +144,7 @@ function Compiler(func, file) {
               .split(" ")[0];
             isJSXComponent = elementTag.match(/^[A-Z]/) ? true : false;
           }
-        }); 
+        });
         // add ; after newlines  
 
 
@@ -193,10 +194,10 @@ function Compiler(func, file) {
         paramnames = paramnames ? paramnames.filter((e) => e.length > 0) : null
         // remove comments
         paramnames = paramnames ? paramnames.map((e) => e.match(/\/\*.*\*\//gs) ? e.replace(e.match(/\/\*.*\*\//gs)[0], "") : e) : null
-        
+
         // add ; after newlines
         newvalue = newvalue.replaceAll(/\n/g, ";\n")
- 
+
         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 ''
           if (e.length > 0) {
@@ -204,7 +205,7 @@ function Compiler(func, file) {
           }
           return e
         }) : ''}" ${params ? params.split(',').map((e) => e.trim()).filter(Boolean).map((e) => `,${e}`).join('') : ''})}"`
- 
+
         string = string.replace(old, bind);
       }
     }
@@ -230,15 +231,21 @@ function Compiler(func, file) {
 
   function extractOuterReturn(code) {
     // match return [...]
-    let returns = code.match(/return\s*\<>.*\<\/>/gs)
+    let returns = code.match(/return\s*\<>.*\<\/>|return\s*\(.*\)/gs);
 
     return returns || [];
   }
-  // throw error if return is not wrapped in <></> if return is found and not wrapped in <></> or <div></div> and not <><div></div></>
-  if (string.match(/return\s*\<>/gs) && !string.match(/return\s*\<>.*\<\/>/gs)
+  // 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)
   ) {
-    throw new SyntaxError("You forgot to enclose jsx in a fragment <></> at line " + string.split(/return\s*\<[a-zA-Z0-9_-]+.*>/gs)[0].split('\n').length + ' in file ' + file)
+
+    try {
+      throw new SyntaxError("You forgot to enclose jsx in a fragment return <> jsx html </> or  return (<> jsx html </>) at line " + string.split(/return\s*\<[a-zA-Z0-9_-]+.*>/gs)[0].split('\n').length + ' in file ' + file)
+    } catch (error) {
+      console.error(error)
+      process.exit(1)
+    }
   }
 
   let outerReturn = extractOuterReturn(string);
@@ -250,16 +257,20 @@ function Compiler(func, file) {
 
     for (let i = 0; i < lines.length; i++) {
       let line = lines[i];
-      if (line.match(/return\s*\<>/gs)) {
+      if (line.match(/return\s*\<>|return\s*\(/gs)) {
         continue;
       }
       contents += line + "\n";
     }
+    let usesBraces = returnStatement.match(/return\s*\(/gs) ? true : false;
 
-    // Remove trailing ']'
-    contents = contents.trim().replace(/\]$/, "");
-    updatedContents = contents;
     let attributes = extractAttributes(contents);
+    // Remove trailing ']' or trailing )
+    contents = contents.trim().replace(/\]$/, "")
+    contents = contents.replace(/\)$/, "");
+    usesBraces ? !contents.includes('<>') ? contents = `<>${contents}</>` : null : null
+    updatedContents = contents;
+
 
     let newAttributes = [];
     let oldAttributes = [];
@@ -283,6 +294,7 @@ function Compiler(func, file) {
               ? value = `{this.parseStyle({${value.split('{{')[1].split('}}')[0]}})}` : null
 
 
+
             value = `="\$${value}",`;
             string = string.replace(oldvalue, value);
 
@@ -294,34 +306,13 @@ function Compiler(func, file) {
 
           }
         } else if (value && value.new) {
-          string = string.replace(value.old, value.new);
+          string = string.replace(oldvalue, value.new);
         }
       }
     });
   });
 
-  let retursnString = [];
-  let outerReturnString = extractOuterReturn(string);
-
-  outerReturnString.forEach((returnStatement) => {
-    let lines = returnStatement.split("\n");
-    let code = "";
-    for (let i = 0; i < lines.length; i++) {
-      let line = lines[i];
-
-      code += line + "\n";
-    }
-
-    code = code.trim().replace(/\<\/\>$/, "");
-    retursnString.push(code);
-  });
-
-  retursnString.forEach((returnStatement, index) => {
-    let old = outerReturnString[index];
 
-    let newReturn = `${returnStatement}</>`;
-    string = string.replace(old, newReturn);
-  });
 
   if (comments) {
     comments.forEach((comment) => {
@@ -410,149 +401,154 @@ function Compiler(func, file) {
     let componentMatch = body.match(componentRegex);
     let topComponent = "";
     componentMatch?.forEach(async (component) => {
-    
+
       let [, element, attributes] = component;
-      
+
 
       !isChild ? (topComponent = component) : null;
-      let before = component; 
+      let before = component;
 
       let myChildrens = [];
 
       let name = component.split("<")[1].split(">")[0].split(" ")[0].replace("/", "");
       // 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+)(?:="([^"]*)")?(?:='([^']*)')?(?:=\{([^}]*)\})?(?:=\{(.*?)\})?(?:={([^}]*)})?(?:{([^}]*)})?|(\{(?:[^{}]+|\{(?:[^{}]+|\{[^}]*\})*\})*\})/gs;
+      const dynamicAttributesRegex = /(\w+)(?:="([^"]*)")?(?:='([^']*)')?(?:=\{([^}]*)\})?(?:=\{(.*?)\})?(?:={([^}]*)})?(?:{([^}]*)})?|(?:{(?:[^{}]+|\{(?:[^{}]+|\{[^}]*\})*\})*\})|(\.{3}\{(?:[^{}]+|\{(?:[^{}]+|\{[^}]*\})*\})*\})/gs;
+
+
 
 
 
 
-  
       let props = component.match(dynamicAttributesRegex)
-     
-  let filteredProps = [];
-  let isWithinComponent = false;
-  let componentName = name
-  
-  for (let prop of props) {
-     
-    if (prop.includes(componentName)) {
-      // If the component is encountered, start collecting props
-      isWithinComponent = true;
-      filteredProps.push(prop);
-    } else if (isWithinComponent && prop.includes('=')) {
-       
-      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('="',':')
-          prop = prop.replace('${', '')
-          prop = prop.replace('}', '')
-          
-        } 
-        if(prop.includes('="${{')){ 
-          prop = prop.replace('${{', '{')
-          prop = prop.replace('}}', '}')
-          prop = prop.replace('="', ':')
-          prop = prop.replace('}"', '}')
-        } 
-
-      } 
-      if(prop.startsWith('={')){
-        prop = prop.replace('={', ':`${')
-        prop.replace('} ', '}`') 
-      }
-       
-       if(prop.includes('function')){
-        // parse 'function' to function 
-        prop = prop.replace("'", '')
-        
-        if(prop.endsWith("}'")){
-          prop = prop.replace("}'", '}')
-          console
-          
+
+      let filteredProps = [];
+      let isWithinComponent = false;
+      let componentName = name
+
+      for (let prop of props) {
+
+        if (prop.includes(componentName)) {
+          // If the component is encountered, start collecting props
+          isWithinComponent = true;
+          filteredProps.push(prop);
+        } else if (isWithinComponent && prop.includes('=')) {
+
+          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('="', ':')
+              prop = prop.replace('${', '')
+              prop = prop.replace('}', '')
+
+            }
+            if (prop.includes('="${{')) {
+              prop = prop.replace('${{', '{')
+              prop = prop.replace('}}', '}')
+              prop = prop.replace('="', ':')
+              prop = prop.replace('}"', '}')
+            }
+
+          }
+          if (prop.startsWith('={')) {
+            prop = prop.replace('={', ':`${')
+            prop.replace('} ', '}`')
+          }
+
+          if (prop.includes('function')) {
+            // parse 'function' to function 
+            prop = prop.replace("'", '')
+
+            if (prop.endsWith("}'")) {
+              prop = prop.replace("}'", '}')
+
+            }
+
+            prop = prop.replace('=function', ':function')
+          }
+
+          filteredProps.push(prop);
+
+
         }
-        
-        prop = prop.replace('=function', ':function') 
-       }
+        else if (isWithinComponent && prop.includes('...')) {
+
+
+
+          // Check if spread props are within curly braces
+          if (prop.startsWith('{') && prop.endsWith('}')) {
+            const spreadObject = prop
+            const hasOtherObjects = spreadObject.split(',').filter((e) => e.includes(':')).length > 0;
+
+            const isValidSpread = spreadObject.includes('...');
+
+            let processedSpreadObject = '';
+            if (isValidSpread) {
+              // Split the spreadObject by commas and process each part individually
+              const parts = spreadObject.split(',').map((part) => {
+                if (part.trim().startsWith('{') && part.trim().endsWith('}')) {
+                  const nestedParts = part
+                    .trim()
+                    .slice(1, -1) // Remove outer {}
+                    .split(',')
+                    .map((nestedPart) => {
+                      return nestedPart.includes('...') ? nestedPart.trim().replace(/\.\.\./, '') : `...${nestedPart.trim()}`;
+                    });
+                  return `{${nestedParts.join(',')}}`;
+                } else {
+                  return part.includes('...') ? part.trim() : part.trim().startsWith('{') ? `...${part.trim()}` : `${part.trim()}`;
+                }
+              });
+              if (!parts.join(',').includes('{(')) {
 
-      filteredProps.push(prop);
-  
-       
-    } 
-    else if (isWithinComponent && prop.includes('...')) {
- 
-      
-    
-      // Check if spread props are within curly braces
-      if (prop.startsWith('{') && prop.endsWith('}')) { 
-        const spreadObject = prop
-        const hasOtherObjects = spreadObject.split(',').filter((e) => e.includes(':')).length > 0;
-      
-        const isValidSpread = spreadObject.includes('...');
-      
-        let processedSpreadObject = '';
-        if (isValidSpread) {
-          // Split the spreadObject by commas and process each part individually
-          const parts = spreadObject.split(',').map((part) => { 
-            if (part.trim().startsWith('{') && part.trim().endsWith('}')) {
-              // Handle nested spreads within the object
-              const nestedParts = part
-                .trim()
-                .slice(1, -1) // Remove outer {}
-                .split(',')
-                .map((nestedPart) => {
-                  return nestedPart.includes('...') ? nestedPart.trim().replace(/\.\.\./, '') : `...${nestedPart.trim()}`;
-                });
-              return `{${nestedParts.join(',')}}`;
-            } else {  
-              return part.includes('...') ? part.trim() :  part.trim().startsWith('{') ? `...${part.trim()}` : `${part.trim()}`;
+                processedSpreadObject = `${parts.join(',')}`
+
+              } else {
+                let prop = parts.join(',')
+                prop = prop.replaceAll('{(', '(')
+                prop = prop.replaceAll(')}', ')')
+                processedSpreadObject = prop
+              }
+              if (prop.includes('{{')) {
+                let prop = parts.join(',')
+                prop = prop.replaceAll('{{', '{')
+                prop = prop.replaceAll('}}', '}')
+                processedSpreadObject = prop
+              }
+
+
+            } else {
+              // Process nested structures within the object
+              processedSpreadObject = `{...${spreadObject}}`;
             }
-          });      
-          if(!parts.join(',').includes('{(')){
-             
-          processedSpreadObject = `${parts.join(',')}` 
-
-          }else{
-            let prop = parts.join(',')
-            prop = prop.replaceAll('{(', '(')
-            prop = prop.replaceAll(')}', ')')
-            processedSpreadObject = prop
+
+            const $propsKey = `$props_${Math.random().toString(36).substring(2)}`;
+            filteredProps.push(`${$propsKey}:${processedSpreadObject}`);
           }
-       
-        
-        } else {
-          // Process nested structures within the object
-          processedSpreadObject = `{...${spreadObject}}`;
-        } 
-      
-        const $propsKey = `$props_${Math.random().toString(36).substring(2)}`;
-        filteredProps.push(`${$propsKey}:${processedSpreadObject}`);
-      }  
-    }
-    
-    else{
-      isWithinComponent = false;
-    }
-  }
+        }
+
+        else {
+          isWithinComponent = false;
+        }
+      }
 
       // get inner content of <Component>inner content</Component>
       let children = new RegExp(`<${name}[^>]*>(.*?)<\/${name}>`, "gs").exec(component) ? new RegExp(`<${name}[^>]*>(.*?)<\/${name}>`, "gs").exec(component)[1] : null;
-       
+
       props = filteredProps.join(',')
-    
+
       let savedname = name;
-      
-      
+
+
 
       name = name + Math.random().toString(36).substring(2);
       if (children && children.match(componentRegex)) {
         children = parseComponents(children, true);
         childs.push({ parent: name, children: children });
       } else {
-   
+
         children ? childs.push({ parent: name, children: children }) : null;
       }
 
@@ -574,24 +570,22 @@ function Compiler(func, file) {
 
 
 
- 
-       props  = props.replaceAll(`,${savedname}`, '').replaceAll(savedname, '')
-       if(props.startsWith(',')){
-          props = props.replace(',', '')
-       } 
-       props = props .replaceAll("='", ":'")
-       .replaceAll('=`', ':`')
+
+      props = props.replaceAll(`,${savedname}`, '').replaceAll(savedname, '')
+      if (props.startsWith(',')) {
+        props = props.replace(',', '')
+      }
+      props = props.replaceAll("='", ":'")
+        .replaceAll('=`', ':`')
         .replaceAll('="', ':"')
-       .replaceAll(`={\``, ':`')
-       .replaceAll('`}', '`')
-       .replaceAll('={', ":`") 
-    
+        .replaceAll('={', ':')
+
 
       /**
        * @memoize - memoize a component to be remembered on each render and replace the old jsx
        */
 
-      let replace = ""; 
+      let replace = "";
       replace = `\${this.memoize(this.createComponent(${savedname}, {${props}}, [\`${myChildrens.join(" ")}\`]))}`;
 
       body = body.replace(before, replace);
@@ -781,6 +775,12 @@ function Compiler(func, file) {
 
 globalThis.isBuilding = false
 globalThis.isWriting = null
+const glb = await glob("**/**/**/**.{jsx,js}", {
+  ignore: ["node_modules/**/*", "dist/**/*"],
+  cwd: process.cwd() + '/pages/',
+  absolute: true,
+  recursive: true
+});
 async function Build() {
   globalThis.isBuilding = true
   console.log('Compiling......')
@@ -806,12 +806,7 @@ async function Build() {
   };
 
 
-  const glb = await glob("**/**/**/**.{jsx,js}", {
-    ignore: ["node_modules/**/*", "dist/**/*"],
-    cwd: process.cwd() + '/pages/',
-    absolute: true,
-    recursive: true
-  });
+
 
   // Process files in the 'pages' directory
   let appjs = '';
@@ -823,10 +818,10 @@ async function Build() {
       if (route.url.includes(':')) {
         console.log('Route ' + route.url + ' is a dynamic route and will not be generated')
         return
-      } 
-      let equalparamroute = routes.map((e) => { 
+      }
+      let equalparamroute = routes.map((e) => {
         if (e.url.includes(':')) {
-          let url = e.url.split('/:')[0] 
+          let url = e.url.split('/:')[0]
           if (url && route.url === url) {
             return e
           } else {
@@ -910,14 +905,14 @@ async function Build() {
            res.render(module, req, res, module.$metadata)
          }) 
          ${equalparamroute.length > 0 ? equalparamroute.map((e) => {
- 
- 
- 
-         return `router.get('${e.url}', async (req, res) => {
+
+
+
+        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> 
@@ -934,8 +929,8 @@ async function Build() {
       let port = Math.floor(Math.random() * (65535 - 49152 + 1) + 49152)
 
       const server = http.createServer((req, res) => {
-        
-        if (req.url === '/') { 
+
+        if (req.url === '/') {
           res.writeHead(200, { 'Content-Type': 'text/html' });
           res.end(document);
         } else {
@@ -967,26 +962,26 @@ async function Build() {
 
       globalThis.listen = true;
 
-      const browser  = await puppeteer.launch({
-        headless:  "new", args: ['--no-sandbox', '--disable-setuid-sandbox'],
+      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();
-        await page.goto(`http://localhost:${port}/`  , { waitUntil: 'networkidle2' });
+        await page.goto(`http://localhost:${port}/`, { waitUntil: 'networkidle2' });
         await page.waitForSelector('#root');
         await page.evaluate(() => {
           document.getElementById('meta').remove()
           document.querySelector('#isServer').innerHTML = 'window.isServer = false'
-          if(document.head.getAttribute('prerender') === 'false'){
+          if (document.head.getAttribute('prerender') === 'false') {
             document.querySelector('#root').innerHTML = ''
           }
         })
         const html = await page.content();
-        
+
         await page.close();
         await writer(process.cwd() + '/dist/' + (route.url === '/' ? 'index.html' : `${route.url}/` + 'index.html'), html)
         await browser.close();
@@ -994,11 +989,11 @@ async function Build() {
         console.log(error)
         await browser.close();
       }
-      finally{
+      finally {
         await browser.close();
         server.close()
       }
-      
+
 
     })
 
@@ -1006,6 +1001,7 @@ async function Build() {
       globalThis.isBuilding = false
       clearTimeout(timeout)
     }, 1000)
+    console.log(`Generated ${routes.length} html files for ${routes.length} routes`)
   }
 
   globalThis.routes = []
@@ -1043,75 +1039,72 @@ async function Build() {
 
     await writer(process.cwd() + "/dist/" + fileName.replace('.jsx', '.js'), data).then(async () => {
 
-      let { minify } = await import('terser')
-
-      try {
-        let minified = await minify(data, {
-          toplevel: true,
-          ecma: 2016,
-          enclose: false,
-          module: true,
-          compress: true,
-          keep_fnames: true,
 
-        })
 
-        minified.code += `\n\n window.params = ${JSON.stringify(obj.url.split('/').filter((e) => e.includes(':')).map((e) => e.split(':')[1]))}`
+      await writer(process.cwd() + "/dist/" + fileName.replace('.jsx', '.js'), data)
 
-        await writer(process.cwd() + "/dist/" + fileName.replace('.jsx', '.js'), minified.code)
-      } catch (error) {
-        console.log(error)
-      }
     })
 
+    // configure routing for each page
 
     obj.compiledPath = process.cwd() + "/dist/pages/" + fileName.replace('.jsx', '.js')
-    let providerRedirects = {cloudflare: '_redirects', vercel: 'vercel.json', netlify:'_redirects'}
-    switch(true){
+    let providerRedirects = { cloudflare: '_redirects', vercel: 'vercel.json', netlify: '_redirects' }
+    switch (true) {
       case config && config.host && !config.host['_redirect']:
         let host = config.host.provider
-      
-        let provider = providerRedirects[host] 
-        if(provider){ 
-         
-          let redirectFile =  fs.existsSync(process.cwd() + '/dist/' + provider) ? fs.readFileSync(process.cwd() + '/dist/' + provider, 'utf8') : ''
-          let type = provider === '_redirects' ? 'text/plain' : 'application/json' 
-
-          let root =  obj.url.includes(':') ? obj.url.split(':')[0] : obj.url
-          switch(true){
+
+        let provider = providerRedirects[host]
+        if (provider) {
+
+          let redirectFile = null
+          switch (true) {
+            case provider === '_redirects':
+              redirectFile = fs.existsSync(process.cwd() + '/dist/' + provider) ? fs.readFileSync(process.cwd() + '/dist/' + provider, 'utf8') : ''
+              break;
+            case provider === 'vercel.json':
+              redirectFile = fs.existsSync(process.cwd() + '/' + provider) ? fs.readFileSync(process.cwd() + '/' + provider, 'utf8') : ''
+              break;
+            default:
+              break;
+          }
+          let type = provider === '_redirects' ? 'text/plain' : 'application/json'
+
+          let root = obj.url.includes(':') ? obj.url.split('/:')[0] : obj.url
+          switch (true) {
             case root === '/':
               break;
             case type === 'text/plain' && !redirectFile.includes(obj.url) && obj.url.includes(':'):
               let page = obj.pathname.split('/pages/')[1].replace('.jsx', '.js')
               redirectFile += `\n/${page} /${page} 200\n${obj.url} ${root} 200\n`
               !redirectFile.includes('/404') ? redirectFile += `\n/404 /404 404` : null
-              fs.writeFileSync(process.cwd() + '/dist/' + provider, redirectFile) 
+              fs.writeFileSync(process.cwd() + '/dist/' + provider, redirectFile)
               console.log(`Added ${obj.url} ${obj.url} 200 to ${provider}`)
               break;
-            case  type === 'application/json' && !redirectFile.includes(root):
-              let json = JSON.parse(redirectFile) || {}
+            case type === 'application/json' && !redirectFile?.includes(`${obj.url}`):
+              let json = redirectFile ? JSON.parse(redirectFile) : {}
               let isVercel = provider === 'vercel.json' ? true : false
-              if(isVercel){
+              if (isVercel) {
                 json['rewrites'] = json['rewrites'] || []
-                json['rewrites'].push({ "source": `${root}/*`, "destination": `/${root}` })
+                json['rewrites'].push({ "source": obj.url, "destination": `${root}/index.html` })
+                fs.writeFileSync(process.cwd() + '/' + provider, JSON.stringify(json, null, 2))
+                console.log(`Added ${obj.url} ${root}/index.html to ${provider}`)
               }
-              fs.writeFileSync(process.cwd() + '/dist/' + provider, JSON.stringify(json))
-              console.log(`Added ${root}/* ${root} 200 to ${provider}`)
+
           }
         }
         break;
       case config && config.host && config.host['_redirect']:
-        let file =  config.host['_redirect']  
+        let file = config.host['_redirect']
         file = file.split('./').join('')
-        let redirectFile =  fs.existsSync(process.cwd() + '/' + file) ? fs.readFileSync(process.cwd() + '/' + file, 'utf8') : '' 
+        let redirectFile = fs.existsSync(process.cwd() + '/' + file) ? fs.readFileSync(process.cwd() + '/' + file, 'utf8') : ''
         fs.writeFileSync(process.cwd() + '/dist/' + file, redirectFile)
         console.log(`Using ${file} for redirects`)
       default:
         break;
 
     }
- 
-    
+
+
     globalThis.routes.push({ fileName: fileName, url: obj.url, html: '/' + (isBasePath ? 'index.html' : `${obj.url}/` + 'index.html') })
 
 
@@ -1153,18 +1146,7 @@ async function Build() {
       data = Compiler(data, process.cwd() + "/src/" + name);
 
       await writer(process.cwd() + "/dist/src/" + name.split('.jsx').join('.js'), data).then(async () => {
-        let { minify } = await import('terser')
-        try {
-          let minified = await minify(data, {
-            ecma: " 2016",
-            module: true,
-            compress: true,
-            keep_fnames: true,
-          })
-          await writer(process.cwd() + "/dist/src/" + name.replace('.jsx', '.js'), minified.code)
-        } catch (error) {
-          console.log(error)
-        }
+        await writer(process.cwd() + "/dist/src/" + name.replace('.jsx', '.js'), data)
 
       })
       return
@@ -1236,18 +1218,17 @@ const s = () => {
 
     fs.readFile(filePath, (err, data) => {
       if (err) {
-        console.log(err)
         res.writeHead(404, { 'Content-Type': 'text/html' });
         res.end(fs.existsSync(process.cwd() + '/dist/404') ? fs.readFileSync(process.cwd() + '/dist/404/index.html') : '404');
       } else {
-        const contentType = getContentType(filePath); 
+        const contentType = getContentType(filePath);
         switch (true) {
           case contentType === 'text/html' && globalThis.devMode:
             data = data.toString() + `<script type="module">
-               let ws = new WebSocket('ws://localhost:3000')
+               let ws = new WebSocket('ws://localhost:${process.env.PORT || 3000}')
                 ws.onmessage = (e) => {
                   if(e.data === 'reload'){ 
-                    window.rehydrate()
+                    window.location.reload()
                   }
                 }
               </script>
@@ -1262,13 +1243,13 @@ const s = () => {
 
   const ws = new WebSocketServer({ server });
   ws.on('connection', (socket) => {
-    console.log('Client connected');
-    socket.on('close', () => console.log('Client disconnected'));
+    console.log('WebSocket Hydration Client connected');
+    socket.on('close', () => console.log('WebSocket Hydration Client disconnected'));
   });
 
 
   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'].includes(path.extname(filePath)) ? path.extname(filePath) : '.html'
     switch (ext) {
       case '.js':
         return 'text/javascript';
@@ -1310,21 +1291,20 @@ const s = () => {
   let i =
     setInterval(() => {
       if (globalThis.isBuilding && globalThis.devMode) {
-        // reload page
-        console.log(globalThis.isBuilding)
-        console.log('Reloading page...')
+
         ws.clients.forEach((client) => {
           client.send('reload')
-          console.log('Reloaded page')
         })
-      } 
+      } else {
+        clearInterval(i)
+      }
     }, 120)
 
 }
 
 
 switch (true) {
-  case process.argv.includes('--watch'):
+  case process.argv.includes('--watch') && !process.argv.includes('--build') && !process.argv.includes('--serve'):
 
     globalThis.devMode = true
     console.log(`
@@ -1354,7 +1334,7 @@ Vader.js v1.3.3
     globalThis.listen = true;
 
     break;
-  case process.argv.includes('--build'):
+  case process.argv.includes('--build') && !process.argv.includes('--watch') && !process.argv.includes('--serve'):
     globalThis.devMode = false
     console.log(`
 Vader.js v1.3.3 
@@ -1363,7 +1343,7 @@ Building to ./dist
     Build()
 
     break;
-  case process.argv.includes('--serve'):
+  case process.argv.includes('--serve') && !process.argv.includes('--watch') && !process.argv.includes('--build'):
     let port = process.argv[process.argv.indexOf('--serve') + 1] || 3000
     process.env.PORT = port
     globalThis.devMode = false
@@ -1381,9 +1361,9 @@ Vader.js is a reactive framework for building interactive applications for the w
 Usage: vader <command> 
 
 Commands:
-  --watch     Watch the pages folder for changes and recompile 
+  --watch     Watch the pages folder for changes with hot reloading
 
-  --build     Build the project
+  --build     Build the project to ./dist
 
   --serve     Serve the project on a port (default 3000)