vaderjs 1.3.3-alpha-152 → 1.3.3-alpha-161

package/README.md

@@ -14,7 +14,7 @@
 [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Postr-Inc/Vader.js/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/vaderjs.svg?style=flat)](https://www.npmjs.com/package/vaderjs) 
 
  
-
+> Do not use any alpha versions as these where changed multiple times any version under latest is considered lts and are deemed to be stable
 ## Get Started 
 
 2. Install vaderjs
@@ -81,7 +81,7 @@ export default function(req, res){
 
    return <>
     <h1>${count}</h1>
-    <button onClick={(count, setCount)=>{setCount(count + 1)}}>
+    <button onClick={(event)=>{setCount(count + 1)}}>
    </>
 }
  
@@ -126,9 +126,11 @@ export function Layout({title, keywords, description, children}){
 
 // pages/index.jsx
 
+//$= is a ternary operator used for spread like nesting
+
 export default function (req, res){
   return <>
-   <Layout {...{title:'home', description:'home page', keywords:'vader.js', logo:''}}>
+   <Layout $={{title:'home', description:'home page', keywords:'vader.js', logo:''}}>
    <h1> Hello World</h1>
    </Layout>
   </>
@@ -173,6 +175,8 @@ export default class MyApp extends Component{
   contructor(){
    super()
    this.key = 'static key for state changes'
+   // or
+   this.nokey // disable element generation 
   }
   
   render(){
@@ -215,7 +219,7 @@ return <>
 </>
 ```
  
-and lower level invokes - these operate the same just allow you to pass items from top level to lower level: ex - I have a variable named car and i want the button to log it i can pass it as a parameter to allow it to be added to the buttons function scope
+Low level invokes are considered top level and can access - any value above the scope !! 
 
 ```jsx
 let car = {
@@ -223,7 +227,7 @@ let car = {
   price: 'toomiuch'
 }
 return <>
-<button onclick={(car)=>{
+<button onclick={(event)=>{
  console.log(car.model)
 }}>Log</button>
 ```

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-152",
+  "version": "1.3.3-alpha-161",
   "bin": {
     "vader": "./vader.js"
   },
@@ -27,8 +27,9 @@
     "email": "malikwhitterb@gmail.com"
   },
   "dependencies": {
-    "glob": "latest",
-    "terser":"latest",
-    "puppeteer":"latest"
+    "glob": "latest", 
+    "puppeteer":"latest",
+    "dotenv":"latest"
+
   }
 }

package/runtime/router.js

@@ -1 +1 @@
-import{Component}from"./vader.js";let middlewares=[];class VaderRouter{constructor(e,t){this.routes=[],this.middlewares=[],this.errorMiddlewares=[],this.listeners=[],this.basePath=e}get(e,t){this.routes.push({path:e,handler:t,method:"get"})}use(e){this.middlewares.push(e)}listen(e,t){e||(e=Math.random().toString(36).substring(7)),window.onpopstate=async e=>{let t=window.location.pathname,r=`/${t.split("/")[1]}`;console.log("route",t),this.checkroute(t)||window.devMode||(t="/404");let n=(new DOMParser).parseFromString(await fetch(r,{cache:"reload"}).then((e=>e.text())),"text/html").documentElement;document.querySelector("#root").innerHTML=n.querySelector("#root").innerHTML,document.title=n.querySelector("title")?n.querySelector("title").innerHTML:document.title,document.querySelector('script[id="router"]').remove();let o=document.createElement("script");o.id="router",o.innerHTML=n.querySelector('script[id="router"]').innerHTML,o.setAttribute("type","module"),document.body.appendChild(o)},window.rehydrate=async()=>{window.location.reload()},this.listeners.push(e),1===this.listeners.length?this.handleRoute(window.location.pathname):this.listeners.pop(),t&&t()}extractParams(e,t){const r=e.split("/").filter((e=>""!==e)),n=t.split("/").filter((e=>""!==e)),o={};return r.forEach(((e,t)=>{if(e.startsWith(":")){const r=e.slice(1);o[r]=n[t]}else if(e.startsWith("*")){n.slice(t).forEach(((e,t)=>{o[t]=e}))}})),o}extractQueryParams(e){const t=e.split("?")[1];if(!t)return{};const r={};return t.split("&").forEach((e=>{const[t,n]=e.split("=");r[t]=n})),r}checkroute(e){return e=e.endsWith("/")?e.slice(0,-1):e,this.routes.find((t=>{if(t.path===e)return!0;if(""===e&&"/"===t.path)return!0;if(e.includes("?")&&(e=e.split("?")[0]),t.path.includes("*")||t.path.includes(":")){const r=t.path.split("/").filter((e=>""!==e)),n=e.split("/").filter((e=>""!==e));if(r.length!==n.length&&!t.path.endsWith("*"))return!1;for(let e=0;e<r.length;e++){const t=r[e],o=n[e];if(!t.startsWith(":")&&!t.startsWith("*")&&t!==o)return!1}return!0}const r=this.extractParams(t.path,e);return Object.keys(r).length>0}))}handleRoute(e){let t=200,r=e,n=this.checkroute(e);n||(n=window.routes.find((e=>!e.url.includes("/404")||this.error||window.devMode?!(this.error||!e.url.includes("/404"))||void 0:(window.history.pushState({},"","/404"),window.dispatchEvent(new Event("popstate")),this.error=!0,!1))),t=n?200:404);const o=this.extractQueryParams(r),s=n&&n.path?this.extractParams(n.path,r):{};Object.keys(s).forEach((e=>{s[e]=s[e].split("?")?s[e].split("?")[0]:s[e]}));const i={headers:{},params:s,query:o,path:e,fileUrl:window.location.href.split(window.location.origin)[1],url:window.location.href,method:n?n.method:"get",pause:!1,timestamp:Date.now()};window.$CURRENT_URL=i.path,window.$FULL_URL=window.location.href.replace("#","");const a={status:t,log:e=>{void 0===e?console.log(`${i.path} ${i.method} ${a.status} ${i.timestamp}`):console.table({"Request Path":i.path,"Request Method":n.method,"Response Status":a.status,"Request Timestamp":i.timestamp})},refresh:()=>{this.handleRoute(window.location.pathname)},redirect:e=>{!e.startsWith("/")&&(e=`/${e}`),window.history.pushState({},"",e),window.dispatchEvent(new Event("popstate"))},render:async(e,t,r,n)=>{function i(e){return"function"==typeof e&&/^class\s/.test(Function.prototype.toString.call(e))}try{let n=new Component;if(i(e.default)){let t=new e.default;n.state=t.state,n=t}else{if(e.default.toString().includes("this.key"))throw new Error('Using this.key is not supported in functional components use the attribute key="a value" instead');n.key=e.default.toString().split('key="')[1]?e.default.toString().split('key="')[1].split('"')[0]:null;let i={key:n.key,render:()=>e.default.apply(n,[t,r]),request:t,response:r,params:s,queryParams:o,reset:n.reset.bind(n),onMount:n.onMount.bind(n),useState:null,router:{use:n.router.use.bind(n)},bindMount:n.bindMount.bind(n),memoize:n.memoize.bind(n),createComponent:n.createComponent.bind(n),isChild:!1,useState:n.useState.bind(n),parseStyle:n.parseStyle.bind(n),bind:n.bind.bind(n),useRef:n.useRef.bind(n),useReducer:n.useReducer.bind(n),onMount:n.onMount.bind(n),onUnmount:n.onUnmount.bind(n),hydrate:n.hydrate.bind(n)};n.render=i.render,n=i}if(!document.querySelector("#root"))throw new Error("Root element not found, please add an element with id root");n.reset(),n.components={},n.request=t,n.response=r,n.router.use&&!n.isChild?await new Promise((async o=>{if(i(e.default))if(i(e.default))switch(await n.router.use(t,r),t.pause){case!0:console.log("pausing",t.pause);let e=setInterval((()=>{t.pause?console.log("still pausing",t.pause):(clearInterval(e),o())}),1e3);break;case!1:o()}else o();else switch(await e.default.apply(n,[t,r]),await n.router.use(t,r),t.pause){case!0:let e=setInterval((()=>{t.pause?console.log("still pausing  request",t.url):(clearInterval(e),o())}),1e3);break;case!1:o()}})):n.router.use&&n.isChild&&console.warn("Router.use() is not supported in child components");const a=await n.render();document.querySelector("#root").innerHTML!==a&&(document.querySelector("#root").innerHTML=a),n.bindMount(),n.onMount()}catch(e){console.error(e)}},setQuery:e=>{let t="";Object.keys(e).forEach(((r,n)=>{t+=`${0===n?"?":"&"}${r}=${e[r]}`}));let r=window.location.hash.split("?")[0];t=t.replace("/","-").replaceAll("/","-"),window.location.hash=`${r}${t}`},send:e=>{document.querySelector("#root").innerHTML=e},json:e=>{const t=document.querySelector("#root");t.innerHTML="";const r=document.createElement("pre");r.textContent=JSON.stringify(e,null,2),t.appendChild(r)}};middlewares.forEach((e=>{e(i,a)})),n&&n.handler(i,a)}}window.VaderRouter=VaderRouter;export default VaderRouter;
+import{Component}from"./vader.js";let middlewares=[];class VaderRouter{constructor(e,t){this.routes=[],this.middlewares=[],this.errorMiddlewares=[],this.listeners=[],this.basePath=e}get(e,t){this.routes.push({path:e,handler:t,method:"get"})}use(e){this.middlewares.push(e)}listen(e,t){e||(e=Math.random().toString(36).substring(7)),window.onpopstate=async e=>{let t=window.location.pathname,r=`/${t.split("/")[1]}`;console.log("route",t),this.checkroute(t)||window.devMode||(t="/404");let n=(new DOMParser).parseFromString(await fetch(r,{cache:"reload"}).then((e=>e.text())),"text/html").documentElement;document.querySelector("#root").innerHTML=n.querySelector("#root").innerHTML,document.title=n.querySelector("title")?n.querySelector("title").innerHTML:document.title,document.querySelector('script[id="router"]').remove();let o=document.createElement("script");o.id="router",o.innerHTML=n.querySelector('script[id="router"]').innerHTML,o.setAttribute("type","module"),document.body.appendChild(o)},window.rehydrate=async()=>{window.location.reload()},this.listeners.push(e),1===this.listeners.length?this.handleRoute(window.location.pathname):this.listeners.pop(),t&&t()}extractParams(e,t){const r=e.split("/").filter((e=>""!==e)),n=t.split("/").filter((e=>""!==e)),o={};return r.forEach(((e,t)=>{if(e.startsWith(":")){const r=e.slice(1);o[r]=n[t]}else if(e.startsWith("*")){n.slice(t).forEach(((e,t)=>{o[t]=e}))}})),o}extractQueryParams(e){const t=e.split("?")[1];if(!t)return{};const r={};return t.split("&").forEach((e=>{const[t,n]=e.split("=");r[t]=n})),r}checkroute(e){return e=e.endsWith("/")?e.slice(0,-1):e,this.routes.find((t=>{if(t.path===e)return!0;if(""===e&&"/"===t.path)return!0;if(e.includes("?")&&(e=e.split("?")[0]),t.path.includes("*")||t.path.includes(":")){const r=t.path.split("/").filter((e=>""!==e)),n=e.split("/").filter((e=>""!==e));if(r.length!==n.length&&!t.path.endsWith("*"))return!1;for(let e=0;e<r.length;e++){const t=r[e],o=n[e];if(!t.startsWith(":")&&!t.startsWith("*")&&t!==o)return!1}return!0}const r=this.extractParams(t.path,e);return Object.keys(r).length>0}))}handleRoute(e){let t=200,r=e,n=this.checkroute(e);n||(n=window.routes.find((e=>!e.url.includes("/404")||this.error||window.devMode?!(this.error||!e.url.includes("/404"))||void 0:(window.history.pushState({},"","/404"),window.dispatchEvent(new Event("popstate")),this.error=!0,!1))),t=n?200:404);const o=this.extractQueryParams(r),s=n&&n.path?this.extractParams(n.path,r):{};Object.keys(s).forEach((e=>{s[e]=s[e].split("?")?s[e].split("?")[0]:s[e]}));const i={headers:{},params:s,query:o,path:e,fileUrl:window.location.href.split(window.location.origin)[1],url:window.location.href,method:n?n.method:"get",pause:!1,timestamp:Date.now()};window.$CURRENT_URL=i.path,window.$FULL_URL=window.location.href.replace("#","");const a={status:t,log:e=>{void 0===e?console.log(`${i.path} ${i.method} ${a.status} ${i.timestamp}`):console.table({"Request Path":i.path,"Request Method":n.method,"Response Status":a.status,"Request Timestamp":i.timestamp})},refresh:()=>{this.handleRoute(window.location.pathname)},redirect:e=>{!e.startsWith("/")&&(e=`/${e}`),window.history.pushState({},"",e),window.dispatchEvent(new Event("popstate"))},render:async(e,t,r,n)=>{function isClass(e){return"function"==typeof e&&/^class\s/.test(Function.prototype.toString.call(e))}try{let n=new Component;if(isClass(e.default)){let t=new e.default;n.state=t.state,n=t}else{e.default.toString();n.key=e.default.toString().split('key="')[1]?e.default.toString().split('key="')[1].split('"')[0]:null;let i=e.default.toString().split("this.key")[1]?e.default.toString().split("this.key")[1].split("=")[1].split(";")[0].trim().replaceAll('"',""):null;i&&(n.key=i),console.log("key",n.key);let a={key:n.key,render:()=>{let o=document.createElement("div");return n.key&&o.setAttribute("key",n.key),o.innerHTML=e.default.apply(n,[t,r]),o.outerHTML},request:t,response:r,params:s,queryParams:o,reset:n.reset.bind(n),onMount:n.onMount.bind(n),useState:null,router:{use:n.router.use.bind(n)},bindMount:n.bindMount.bind(n),memoize:n.memoize.bind(n),createComponent:n.createComponent.bind(n),isChild:!1,useState:n.useState.bind(n),parseStyle:n.parseStyle.bind(n),bind:n.bind.bind(n),useRef:n.useRef.bind(n),useReducer:n.useReducer.bind(n),onMount:n.onMount.bind(n),onUnmount:n.onUnmount.bind(n),hydrate:n.hydrate.bind(n)};n.render=a.render,n=a}if(!document.querySelector("#root"))throw new Error("Root element not found, please add an element with id root");n.reset(),n.components={},n.request=t,n.response=r,n.router.use&&!n.isChild?await new Promise((async o=>{if(isClass(e.default))if(isClass(e.default))switch(await n.router.use(t,r),t.pause){case!0:console.log("pausing",t.pause);let e=setInterval((()=>{t.pause?console.log("still pausing",t.pause):(clearInterval(e),o())}),1e3);break;case!1:o()}else o();else switch(await e.default.apply(n,[t,r]),await n.router.use(t,r),t.pause){case!0:let e=setInterval((()=>{t.pause?console.log("still pausing  request",t.url):(clearInterval(e),o())}),1e3);break;case!1:o()}})):n.router.use&&n.isChild&&console.warn("Router.use() is not supported in child components");const i=await n.render();document.querySelector("#root").innerHTML!==i&&(document.querySelector("#root").innerHTML=i),n.bindMount(),n.onMount()}catch(e){console.error(e)}},setQuery:e=>{let t="";Object.keys(e).forEach(((r,n)=>{t+=`${0===n?"?":"&"}${r}=${e[r]}`}));let r=window.location.hash.split("?")[0];t=t.replace("/","-").replaceAll("/","-"),window.location.hash=`${r}${t}`},send:e=>{document.querySelector("#root").innerHTML=e},json:e=>{const t=document.querySelector("#root");t.innerHTML="";const r=document.createElement("pre");r.textContent=JSON.stringify(e,null,2),t.appendChild(r)}};middlewares.forEach((e=>{e(i,a)})),n&&n.handler(i,a)}}window.VaderRouter=VaderRouter;export default VaderRouter;

package/runtime/vader.js

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

package/vader.js

@@ -7,17 +7,23 @@ import { WebSocketServer } from 'ws'
 import { watch } from "fs";
 import path from 'path'
 let config = await import('file://' + process.cwd() + '/vader.config.js').then((e) => e.default || e)
+let writer = async (file, data) => {
+  globalThis.isWriting = file
+  switch (true) {
+    case !fs.existsSync(file):
+      fs.mkdirSync(file.split('/').slice(0, -1).join('/'), { recursive: true })
+      break;
+  }
+  if (globalThis.isWriting !== file) {
+    return
+  }
+  await fs.writeFileSync(file, data);
 
-
-let start = Date.now()
-let bundleSize = 0;
-let errorCodes = {
-  "SyntaxError: Unexpected token '<'": "You forgot to enclose tags in a fragment <></>",
-}
-/**
- * define directories
- */
-
+  globalThis.isWriting = null
+  return { _written: true };
+};
+ 
+let bundleSize = 0; 
 
 if (!fs.existsSync(process.cwd() + '/dist')) {
   fs.mkdirSync(process.cwd() + '/dist')
@@ -34,44 +40,13 @@ if (typeof process.env.isCloudflare !== "undefined" || !fs.existsSync(process.cw
 
 
 function Compiler(func, file) {
-  let string = func;
-  // Remove block comments 
-
+  let string = func; 
   let returns = []
   let comments = string.match(/\{\s*\/\*.*\*\/\s*}/gs)?.map((comment) => comment.trim());
 
-  let savedfuncnames = [];
-  let functions = string.match(
-    /(?:const|let)\s*([a-zA-Z0-9_-]+)\s*=\s*function\s*\(([^)]*)\)|function\s*([a-zA-Z0-9_-]+)\s*\(([^)]*)\)/gs
-  )
-    ?.map((match) => match.trim());
-
-  let functionNames = [];
-
-
-  functions && functions.forEach((func) => {
-    if (
-      !func.match(
-        /(?:const|let)\s*([a-zA-Z0-9_-]+)\s*=\s*function\s*\(([^)]*)\)|function\s*([a-zA-Z0-9_-]+)\s*\(([^)]*)\)/gs
-      )
-    ) {
-      return;
-    }
-
-    let name = func.split(" ")[1].split("(")[0].trim();
-
-    let lines = string.match(/return\s*\<>.*\<\/>/gs);
-
-    if (lines) {
-      for (let i = 0; i < lines.length; i++) {
-        let line = lines[i];
-
-        if (!functionNames.includes(name)) {
-          functionNames.push(name);
-        }
-      }
-    }
-  });
+ 
+  
+ 
 
   // get all Obj({}) and parse to JSON.stringify
 
@@ -87,6 +62,51 @@ function Compiler(func, file) {
 
   let childs = [];
 
+  const spreadAttributeRegex = /\s*([a-zA-Z0-9_-]+)(\s*\$\s*=\s*{{((?:[^{}]|(?:\{(?:[^{}]|(?:\{[^{}]*\})*)*\})*)*)}})/gs;
+  let spreadMatch;
+  while ((spreadMatch = spreadAttributeRegex.exec(string)) !== null) {
+    let [, element, spread] = spreadMatch;
+    let isJSXComponent = element.match(/[A-Z]/) ? true : false;
+    if (isJSXComponent) {
+      continue
+
+    }
+    let old = spread;
+
+    // turn spread into attributes 
+    spread = spread.replace(/\s*$\s*=\s*/, "");
+    spread = spread.replace(/{{/, "");
+    spread = spread.replace(/}}/, "");
+    spread = spread.replace(/\$\s*=\s*/, "");
+
+    // turn : into =
+
+    // do not split inner Objects ex: {color: 'red', background: {color: 'blue'}} -> {color: 'red', background: {color: 'blue'}}
+    let splitByCommas = spread.split(/,(?![^{]*})/g);
+    splitByCommas = splitByCommas.map((e) => e.trim())
+    splitByCommas = splitByCommas.map((e) => {
+      switch (true) {
+        case e.includes('function') || e.includes('=>'):
+          e = e.replace(/:(.*)/gs, '={$1}')
+          break;
+        case e.includes('style'):
+          e = e.replace(/:(.*)/gs, '="${this.parseStyle($1)}"')
+          break;
+        case e.includes('[') && e.includes(']'):
+          e = e.replace(/:(.*)/gs, '={$1.join(" ")}')
+          break;
+        default:
+      }
+
+      return e.trim()
+    })
+
+    let newSpread = `\t` + splitByCommas.join(' ') + `\t`
+
+    string = string.replace(old, newSpread);
+
+  }
+
 
 
   function extractAttributes(code) {
@@ -98,41 +118,40 @@ function Compiler(func, file) {
     const attributeRegex =
       /\s*([a-zA-Z0-9_-]+)(\s*=\s*("([^"\\]*(\\.[^"\\]*)*)"|'([^'\\]*(\\.[^'\\]*)*)'|\{(?:[^{}]|(?:\{(?:[^{}]|(?:\{[^{}]*\})*)*\})*)*\}|(?:\([^)]*\)|\{[^}]*\}|()=>\s*(?:\{[^}]*\})?)|\[[^\]]*\]))?/gs;
 
-    // only return elements with attribute {()=>{}} or if it also has parameters ex: onclick={(event)=>{console.log(event)}} also get muti line functions
+    
+
+ 
     const functionAttributeRegex = /\s*([a-zA-Z0-9_-]+)(\s*=\s*{((?:[^{}]|(?:\{(?:[^{}]|(?:\{[^{}]*\})*)*\})*)*)})/gs;
 
     let attributesList = [];
 
-    // handle functions
+    let spreadAttributes = [];
+    let spreadMatch;
+    /**
+     * @search - handle spread for html elements
+     * @keywords - spread, spread attributes, spread props, spread html attributes
+     */
+
+
+    /**
+     * @search - handle function parsing for html elements
+     * @keywords - function, function attributes, function props, function html attributes
+     * 
+     */
     let functionAttributes = [];
     let functionMatch;
     while ((functionMatch = functionAttributeRegex.exec(code)) !== null) {
-      let [, attributeName, attributeValue] = functionMatch;
 
+      let [, attributeName, attributeValue] = functionMatch;
       let attribute = {};
 
-      if (attributeValue && attributeValue.includes("=>") || attributeValue && attributeValue.includes("function")) {
-        let functionparams = [];
-        // ref with no numbers
+      if (attributeValue && attributeValue.includes("=>") || attributeValue && attributeValue.includes("function")
+        && !spreadFunctions.includes(attributeValue)
+      ) {
+        
         let ref = Math.random().toString(36).substring(2).split('').filter((e) => !Number(e)).join('')
         let old = `${attributeName}${attributeValue}`
-        functionNames.forEach((name) => {
-          string.split("\n").forEach((line) => {
-            if (line.includes(name) && line.includes("function")) {
-              line = line.trim();
-              line = line.replace(/\s+/g, " ");
-
-              let ps = line.split("(").slice(1).join("(").split(")")[0].trim();
-
-              // remove comments
-              ps = ps.match(/\/\*.*\*\//gs)
-                ? ps.replace(ps.match(/\/\*.*\*\//gs)[0], "")
-                : ps;
-              functionparams.push({ ref: ref, name: name, params: ps });
-
-            }
-          });
-        });
+       
         let elementMatch = string.match(/<([a-zA-Z0-9_-]+)([^>]*)>/gs);
         let isJSXComponent = false;
         elementMatch.forEach((element) => {
@@ -186,8 +205,7 @@ function Compiler(func, file) {
         newvalue = newvalue.replace(/}\s*$/, '');
 
 
-
-        functionparams.length > 0 ? params = params + ',' + functionparams.map((e) => e.name).join(',') : null
+        
 
         newvalue = newvalue.replaceAll(',,', ',')
         let paramnames = params ? params.split(',').map((e) => e.trim()) : null
@@ -210,6 +228,10 @@ function Compiler(func, file) {
       }
     }
 
+    /**
+     * @search - handle attributes for html elements
+     * @keywords - attributes, props, html attributes
+     */
     let match;
     while ((match = elementRegex.exec(code)) !== null) {
       let [, element, attributes] = match;
@@ -234,8 +256,7 @@ function Compiler(func, file) {
     let returns = code.match(/return\s*\<>.*\<\/>|return\s*\(.*\)/gs);
 
     return returns || [];
-  }
-  // throw error if return is not wrapped in <></> or
+  } 
   if (string.match(/return\s*\<>|return\s*\(.*\)/gs) && !string.match(/return\s*\<>.*\<\/>|return\s*\(.*\)/gs)
     || string.match(/return\s*\<[a-zA-Z0-9_-]+.*>/gs)
   ) {
@@ -251,6 +272,10 @@ function Compiler(func, file) {
   let outerReturn = extractOuterReturn(string);
   let contents = "";
   let updatedContents = "";
+  /**
+   * @search - handle return [...]
+   * @keywords - return, return jsx, return html, return [...]
+   */
   outerReturn.forEach((returnStatement) => {
 
     let lines = returnStatement.split("\n");
@@ -264,13 +289,12 @@ function Compiler(func, file) {
     }
     let usesBraces = returnStatement.match(/return\s*\(/gs) ? true : false;
 
-    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 attributes = extractAttributes(contents);
 
     let newAttributes = [];
     let oldAttributes = [];
@@ -349,9 +373,7 @@ function Compiler(func, file) {
           valuestate = valuestate.match(regex) ? valuestate.match(regex)[0].split("useState(")[1].split(")")[0].trim() : valuestate
 
 
-          let newState = `${varType} [${key}, ${setKey}] = this.useState('${key}', ${valuestate}
-           
-            `;
+          let newState = `${varType} [${key}, ${setKey}] = this.useState('${key}', ${valuestate}`;
           string = string.replace(line, newState);
           break;
         case line.includes("useRef") && !line.includes("import"):
@@ -396,25 +418,24 @@ function Compiler(func, file) {
   string = string.replaceAll('../src', './src')
 
   function parseComponents(body, isChild) {
-    let componentRegex = /<([A-Z][A-Za-z0-9_-]+)([^>]*)>(.*?)<\/\1>|<([A-Z][A-Za-z0-9_-]+)([^]*?)\/>/gs;
+    let componentRegex = /<([A-Z][A-Za-z0-9_-]+)\s*([^>]*)>\s*([\s\S]*?)\s*<\/\1>|<([A-Z][A-Za-z0-9_-]+)([^]*?)\/>/gs;
 
     let componentMatch = body.match(componentRegex);
     let topComponent = "";
     componentMatch?.forEach(async (component) => {
 
       let [, element, attributes] = component;
-
+      let before = component;
+      component = component.trim().replace(/\s+/g, " ");
 
       !isChild ? (topComponent = component) : null;
-      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+)(?:="([^"]*)")?(?:='([^']*)')?(?:=\{([^}]*)\})?(?:=\{(.*?)\})?(?:={([^}]*)})?(?:{([^}]*)})?|(?:{(?:[^{}]+|\{(?:[^{}]+|\{[^}]*\})*\})*\})|(\.{3}\{(?:[^{}]+|\{(?:[^{}]+|\{[^}]*\})*\})*\})/gs;
-
+      let componentAttributes = component.split("<")[1].split(">")[0].split(" ").join(" ").replace(name, "").trim(); 
+      const dynamicAttributesRegex = /(\w+)(?:="([^"]*)")?(?:='([^']*)')?(?:=\{([^}]*)\})?(?:=\{(.*?)\})?(?:={([^}]*)})?(?:{([^}]*)})?|(?:{(?:[^{}]+|\{(?:[^{}]+|\{[^}]*\})*\})*\})|(\.{3}\{(?:[^{}]+|\{(?:[^{}]+|\{[^}]*\})*\})*\})|\$=\{(?:[^{}]+|\{(?:[^{}]+|\{[^}]*\})*\})*\}/gs;
 
 
 
@@ -425,119 +446,21 @@ function Compiler(func, file) {
       let filteredProps = [];
       let isWithinComponent = false;
       let componentName = name
+      let currentProps = []
 
-      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);
-
+      let $_ternaryprops = []
+ 
+      component = component.replaceAll(/\s+/g, " ");
 
-        }
-        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('{(')) {
-
-                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}}`;
-            }
-
-            const $propsKey = `$props_${Math.random().toString(36).substring(2)}`;
-            filteredProps.push(`${$propsKey}:${processedSpreadObject}`);
-          }
-        }
+      component = component.replace(componentAttributes, '')
+      $_ternaryprops.forEach((prop) => {
+        component = component.replace(prop, '')
+      })
 
-        else {
-          isWithinComponent = false;
-        }
-      }
+      let children = component.split(`<${name}`)[1].split(`</${name}>`)[0].trim().replace(/\s+/g, " ").trim().replace(/,$/, '').replace('>', '').replace(/\/$/, '').trim()
 
-      // 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(',')
+      props = filteredProps.join(',').replace(/\s+/g, " ").trim().replace(/,$/, '')
 
       let savedname = name;
 
@@ -555,16 +478,16 @@ function Compiler(func, file) {
       childs.forEach((child) => {
         if (child.parent == name) {
           let html = child.children.match(
-            /<([a-zA-Z0-9_-]+)([^>]*)>(.*?)<\/\1>/gs
+            /<([A-Z][A-Za-z0-9_-]+)([^>]*)>(.*?)<\/\1>|<([A-Z][A-Za-z0-9_-]+)([^]*?)\/>/gs
           );
           if (html) {
             html = html.map((h) => h.trim().replace(/\s+/g, " ")).join(" ");
-            let before = child.children;
             child.children = child.children.replaceAll(html, `${html}`);
             // remove duplicate quotes 
           }
 
           myChildrens.push(child.children);
+          childs = childs.filter((e) => e.parent !== name);
         }
       });
 
@@ -585,8 +508,10 @@ function Compiler(func, file) {
        * @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}, {${props}}, [\`${myChildrens.join('')}\`]))}`;
+
 
       body = body.replace(before, replace);
     });
@@ -594,12 +519,61 @@ function Compiler(func, file) {
     return body;
   }
 
+  string = string.replaceAll('vaderjs/client', '/vader.js')
 
+  const importRegex = /import\s*([^\s,]+|\{[^}]+\})\s*from\s*(['"])(.*?)\2/g;
+  const imports = string.match(importRegex);
+  let replaceMents = [];
 
-  // replace all comments
 
-  string = string.replaceAll('vaderjs/client', '/vader.js')
-  // replace ${... with ${
+  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);
+
+          }
+          let dest = file.split('node_modules')[1]
+          dest = dest.split(baseFolder)[1]
+          // write to dist
+          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;
+    }
+  }
+
+  for (let replace of replaceMents) {
+    string = string.replaceAll(replace.match, replace.replace)
+  }
 
   string = string.replaceAll(/\$\{[^{]*\.{3}/gs, (match) => {
     if (match.includes('...')) {
@@ -652,7 +626,8 @@ function Compiler(func, file) {
     if (line.includes('import')) {
       // Regular expression for matching import() statements
       let asyncimportMatch = line.match(/import\s*\((.*)\)/gs);
-      let regularimportMatch = line.match(/import\s*([a-zA-Z0-9_-]+)?\s*from\s*('(.*)'|"(.*)")|import\s*('(.*)'|"(.*)")/gs);
+      // handle import { Component } from 'vaderjs/runtime/vader.js'
+      let regularimportMatch = line.match(/import\s*([A-Za-z0-9_-]+)\s*from\s*([A-Za-z0-9_-]+)|import\s*([A-Za-z0-9_-]+)\s*from\s*(".*")|import\s*([A-Za-z0-9_-]+)\s*from\s*('.*')|import\s*([A-Za-z0-9_-]+)\s*from\s*(\{.*\})/gs);
 
       if (asyncimportMatch) {
         asyncimportMatch.forEach(async (match) => {
@@ -731,6 +706,10 @@ function Compiler(func, file) {
             case path && path.includes('.css'):
               string = string.replace(beforeimport, '')
               newImport = ``
+              break;
+            case path && !path.startsWith('./') && !path.includes('/vader.js') && !path.startsWith('src') && !path.startsWith('public') &&
+              path.match(/^[A-Za-z0-9_-]+$/gs) && !path.includes('http') && !path.includes('https'):
+
               break;
             default:
               let beforePath = path
@@ -789,28 +768,7 @@ async function Build() {
     return text;
   };
 
-  let writer = async (file, data) => {
-    globalThis.isWriting = file
-    switch (true) {
-      case !fs.existsSync(file):
-        fs.mkdirSync(file.split('/').slice(0, -1).join('/'), { recursive: true })
-        break;
-    }
-    if (globalThis.isWriting !== file) {
-      return
-    }
-    await fs.writeFileSync(file, data);
-
-    globalThis.isWriting = null
-    return { _written: true };
-  };
-
-
-
-
-  // Process files in the 'pages' directory
-  let appjs = '';
-  let hasWritten = []
+ 
   function ssg(routes = []) {
     globalThis.isBuilding = true
     console.log(`Generating html files for ${routes.length} routes`)
@@ -966,33 +924,49 @@ async function Build() {
         headless: "new", args: ['--no-sandbox', '--disable-setuid-sandbox'],
         warning: false,
       })
-
+ 
+      const browserPID = browser.process().pid
       try {
 
         route.url = route.url.replaceAll(/\/:[a-zA-Z0-9_-]+/gs, '')
         let page = await browser.newPage();
         await page.goto(`http://localhost:${port}/`, { waitUntil: 'networkidle2' });
-        await page.waitForSelector('#root');
+        await page.on('console', msg => console.log('PAGE LOG:', msg.text()));
+        await page.on('error', err => console.log('PAGE LOG:', err));
+        await page.on('pageerror', err => console.log('PAGE LOG:', err));
+        await page.evaluate(() => {
+          window.onerror = function (msg, url, lineNo, columnNo, error) {
+            console.log(msg, url, lineNo, columnNo, error)
+          }
+        })
+        await page.waitForSelector('#root', { timeout: 10000 })
         await page.evaluate(() => {
           document.getElementById('meta').remove()
           document.querySelector('#isServer').innerHTML = 'window.isServer = false'
           if (document.head.getAttribute('prerender') === 'false') {
             document.querySelector('#root').innerHTML = ''
+            console.log(`Disabled prerendering for ${window.location.pathname}`)
           }
-        })
+        }) 
         const html = await page.content();
 
         await page.close();
         await writer(process.cwd() + '/dist/' + (route.url === '/' ? 'index.html' : `${route.url}/` + 'index.html'), html)
         await browser.close();
+        server.close()
+
       } catch (error) {
-        console.log(error)
+        server.close()
         await browser.close();
       }
       finally {
         await browser.close();
         server.close()
       }
+      try {
+        process.kill(browserPID)
+      } catch (error) {
+      }
 
 
     })
@@ -1033,10 +1007,10 @@ async function Build() {
 
 
     let data = await fs.readFileSync(origin, "utf8");
+    console.log(`Compiling ${fileName}...`)
     data = Compiler(data, origin);
 
 
-
     await writer(process.cwd() + "/dist/" + fileName.replace('.jsx', '.js'), data).then(async () => {
 
 
@@ -1199,6 +1173,7 @@ async function Build() {
   console.log(`📦 Build completed: Build Size -> ${Math.round(bundleSize / 1000)}kb`)
 
   bundleSize = 0;
+
   return true
 }
 const s = () => {
@@ -1328,7 +1303,9 @@ Vader.js v1.3.3
           }
         }).on('error', (err) => console.log(err))
     })
+    let p = process.argv[process.argv.indexOf('--watch') + 1] || process.env.PORT || 3000
 
+    process.env.PORT = p
     s()
 
     globalThis.listen = true;
@@ -1357,19 +1334,19 @@ url: http://localhost:${port}
   default:
     console.log(`
 Vader.js is a reactive framework for building interactive applications for the web built ontop of bun.js!
-
+    
 Usage: vader <command> 
-
+    
 Commands:
-  --watch     Watch the pages folder for changes with hot reloading
-
+  --watch (port)    Watch the pages folder for changes with hot reloading
+    
   --build     Build the project to ./dist
-
-  --serve     Serve the project on a port (default 3000)
-  
-Learn more about vader:           https://vader-js.pages.dev/
     
-`)
+  --serve  (400)   Serve the project on a port (default 3000 or process.env.PORT)
+      
+Learn more about vader:           https://vader-js.pages.dev/
+        
+    `)
     break;
 
 }