vaderjs 1.3.3-6124766be812 → 1.3.3-6722242

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-6124766be812",
+  "version": "1.3.3-6722242",
   "bin": {
     "vader": "./vader.js"
   },

package/runtime/vader.js

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

package/vader.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
-import fs from "fs";
+import fs, { fstatSync } from "fs";
 import { glob, globSync, globStream, globStreamSync, Glob, } from 'glob'
-import puppeteer from 'puppeteer'; 
+import puppeteer from 'puppeteer';
 import http from 'http'
 import { SourceMapGenerator } from 'source-map'
 
@@ -9,19 +9,19 @@ import { WebSocketServer } from 'ws'
 import prettier from 'prettier'
 import { watch } from "fs";
 import path from 'path'
- 
+
 globalThis.compiledFiles = []
 
 const sourceMapGen = (data, code) => {
-  let { origin, fileName } = data 
+  let { origin, fileName } = data
   const sourceMap = new SourceMapGenerator({ file: '/src/' + fileName.replace('.jsx', '.js') });
 
-  const lines =  fs.readFileSync(origin, "utf8").split("\n");
+  const lines = fs.readFileSync(origin, "utf8").split("\n");
   let line = 1;
   let column = 0;
-  for (const l of lines) { 
+  for (const l of lines) {
     sourceMap.addMapping({
-      source:  origin, 
+      source: origin,
       sourceRoot: '/src',
       original: { line: line, column: 0 },
       generated: { line: line, column: 0 },
@@ -34,7 +34,7 @@ const sourceMapGen = (data, code) => {
   code = code + `\n//# sourceMappingURL=./src/maps/${fileName.replace('.jsx', '.js')}.map \n //#sourceURL=/src/maps/${fileName.replace('.jsx', '.js')}.map`
   return { code, sourceMap };
 }
- 
+
 let config = await import('file://' + process.cwd() + '/vader.config.js').then((e) => e.default || e)
 let writer = async (file, data) => {
   globalThis.isWriting = file
@@ -80,20 +80,21 @@ function Compiler(func, file) {
   let childs = [];
 
 
-  const spreadAttributeRegex = /\s*([a-zA-Z0-9_-]+)\s*(\$\s*=\s*\{\s*\{[^]*?\}\s*\})/gs;
- 
+  // or : value boolean variable etc
+  const spreadAttributeRegex = /\s*([a-zA-Z0-9_-]+)\s*(\$\s*=\s*\{\s*\{(?:[^{}]|(?:\{(?:[^{}]|(?:\{[^{}]*\})*)*\})*)*\}\s*\})/gs;
+
 
 
 
   function extractAttributes(code) {
     // grab $={...} and ={...}
-    const elementRegex =  /<([a-zA-Z0-9_-]+)([^>]*)>/gs;
+    const elementRegex = /<([a-zA-Z0-9_-]+)([^>]*)>/gs;
 
     // Match attributes in an opening tag, including those with ={}
     // Match attributes in an opening tag, including those with ={...}
     const attributeRegex =
-    /\s*([a-zA-Z0-9_-]+)(\s*=\s*("(?:[^"\\]*(?:\\.[^"\\]*)*)"|'(?:[^'\\]*(?:\\.[^'\\]*)*)'|\{(?:[^{}]|(?:\{(?:[^{}]|(?:\{[^{}]*\})*)*\})*)*\}|(?:\([^)]*\)|\{[^}]*\}|()=>\s*(?:\{[^}]*\})?)|\[[^\]]*\]))?/gs;
-  
+      /\s*([a-zA-Z0-9_-]+)(\s*=\s*("(?:[^"\\]*(?:\\.[^"\\]*)*)"|'(?:[^'\\]*(?:\\.[^'\\]*)*)'|\{(?:[^{}]|(?:\{(?:[^{}]|(?:\{[^{}]*\})*)*\})*)*\}|(?:\([^)]*\)|\{[^}]*\}|()=>\s*(?:\{[^}]*\})?)|\[[^\]]*\]))?/gs;
+
 
 
     const functionAttributeRegex = /\s*([a-zA-Z0-9_-]+)\s*(=\s*{((?:[^{}]|(?:\{(?:[^{}]|(?:\{[^{}]*\})*)*\})*)*)})/gs;
@@ -101,7 +102,7 @@ function Compiler(func, file) {
     let attributesList = [];
 
     let spreadAttributes = [];
-    
+
     /**
      * @search - handle spread for html elements
      * @keywords - spread, spread attributes, spread props, spread html attributes
@@ -214,10 +215,10 @@ function Compiler(func, file) {
      * @keywords - attributes, props, html attributes
      */
     let match;
-    while ((match = elementRegex.exec(code)) !== null) {
+    while ((match = elementRegex.exec(string)) !== null) {
       let [, element, attributes] = match;
 
-     
+
       let attributesMatch;
       let elementAttributes = {};
 
@@ -229,81 +230,60 @@ function Compiler(func, file) {
 
       attributesList.push({ element, attributes: elementAttributes });
     }
-    
-  let spreadMatch;
-  while ((spreadMatch = spreadAttributeRegex.exec(string)) !== null) {
-    let [, element, spread] = spreadMatch;
-
-    let isJSXComponent = element.match(/[A-Z]/) ? true : false;
-    if (isJSXComponent) {
-      continue
-
-    } 
-    let old = spread;
-    // turn spread into attributes 
-    spread = spread.replace(/\s*$\s*=\s*/, "");
-    spread = spread.replace(/\$\s*=\s*/, "");
-    spread = spread.replace('{{', '')
-    spread = spread.replace(/,$/, '');
 
- 
- 
-            let splitByCommas = spread.split(/,(?![^{}]*})/gs).map((e) => {
-    
-  
-    
-      switch (true) {
-        case e.includes('function') || e.includes('=>'):
-          e = e.replace(/\,\s*$/, '');
-          // replace commas
-          e = e.replace(/,\s*/gs, ',');
-          // remove space between (.*) => 
-          e = e.replace(/\(\s*=>/gs, '=>');
-          e = e.replace(/\s*=>\s*\{/gs, '=>{');
-          
-          // add ; after newlines 
-          e = e.replace(/\s*(\w+)\s*=>\s*\{/gs, '$1=>{');
-          // turn (e) => {e} into  function(e){e}
-          e = e.replace(/\(([^)]*)\)\s*=>\s*\{/gs, 'function($1){\n');
-          e = e.replace(/;/g, ';\n ');
-          e = e.replace(/,\s*}\s*$/gs, '}');
-        
-
-       
-          e = e.replace(/:(.*)/gs, '="\${this.bind($1, ' + false + ', "' + Math.random().toString(36).substring(2).split('').filter((e) => !Number(e)).join('') + '", "")}"');
-        
-          break;
-        case e.includes('style'): 
-        e = e.replace(/,\s*$/gs, '');
-        e = e.replace(/}\s*$/gs, '');
-        e = e.replaceAll(/{\s*$/gs, '');
-        e = e.replaceAll(/}\s*$/gs, '');
-          e = e.replace(/style:(.*)/gs, 'style="\${this.parseStyle($1)}"');
-          
+    let spreadMatch;
+    while ((spreadMatch = spreadAttributeRegex.exec(code)) !== null) {
+      let [, element, spread] = spreadMatch;
+      let isJSXComponent = element.match(/^[A-Z]/) ? true : false;
+      if (isJSXComponent) {
+        continue;
+      }
+      let old = spread;
+      spread = spread.trim().replace(/\s+/g, " "); 
+      // re,pve $={ and }
+      spread = spread.replace(/\s*\$\s*=\s*{\s*{/gs, '')
+      
+      // replace trailing }
+      spread = spread.replace(/}}\s*$/, '').replace(/}\s*}$/, '') 
+      let splitByCommas =  spread.split(/,(?![^{}]*})/gs) 
+      // remove empty strings
+      splitByCommas = splitByCommas.filter((e) => e.split(':')[0].trim().length > 0)
+      splitByCommas = splitByCommas.map((e, index) => { 
+        let key = e.split(':')[0].trim()
+        switch (true) {
+          case e.includes('function') && !e.includes('this.bind') || e && e.includes('=>') && !e.includes('this.bind'):
+            let value = e.split(':')[1].trim()
+            let ref = Math.random().toString(36).substring(2).split('').filter((e) => !Number(e)).join(''); 
+            value = `this.bind(${value}, false, "${ref}", "")`
+            e = `${key}="\${${value}}"`
+            break;
+          case  e.includes('style:'):
+            let v2 = e.split('style:')[1].trim().replace(/,$/, '') 
+            v2 = v2.replace(/,$/, '') 
+            e = `${key}="\${this.parseStyle(${v2})}"`
+           break;
+           
+          default:  
+            let v = e.split(':') 
+            key = v[0].trim()
+             // remove key from v
+            v.shift()
+            v = v.join(' ')
+            e = `${key}="\${${v}}"`
+
+            break;
+        }
 
-          break;
-        case e.includes('[') && e.includes(']'):
-          e = e.replace(/:(.*)/gs, '={$1.join(" ")}');
-          break;
-        default:
-          e = e.replace(/:(.*)/gs, '="${$1}"');
-          e = e.replace(/,\s*$/gs, '');
-          e = e.replace(/}\s*$/gs, '');
-          e = e.replaceAll(/{\s*$/gs, '');
 
-          break;
-      }
+        return e;
+      });
  
-      return e.trim();
-    });
 
-    let newSpread = splitByCommas.join(' ').trim().replace(/,$/, '');
-     
-    // remove trailing }
-    newSpread = newSpread.replace(/}\s*$/, '')
-    newSpread = newSpread.trim().replace(/{\s*$/gs, '')
-    string = string.replace(old, newSpread); 
-  }
+      let newSpread = splitByCommas.join(' ').trim().replace(/,$/, '');
+
+      // remove trailing } 
+      string = string.replace(old, newSpread);
+    }
 
     return attributesList;
   }
@@ -346,12 +326,12 @@ function Compiler(func, file) {
     }
     let usesBraces = returnStatement.match(/return\s*\(/gs) ? true : false;
 
-    let attributes = extractAttributes(contents);
+    let attributes = extractAttributes(string);
     contents = contents.trim().replace(/\]$/, "")
     contents = contents.replace(/\)$/, "");
     usesBraces ? !contents.includes('<>') ? contents = `<>${contents}</>` : null : null
     updatedContents = contents;
- 
+
 
     let newAttributes = [];
     let oldAttributes = [];
@@ -371,16 +351,16 @@ function Compiler(func, file) {
         let value = attributes[key]; 
         let oldvalue = value;
         if (value && !value.new) {
-           
+
           if (value && value.includes("={")) {
-         
+
             value = value.replace("=", "");
             value == "undefined" ? (value = '"') : (value = value);
 
             key == 'style'
               && value.includes("{{")
               ? value = `{this.parseStyle({${value.split('{{')[1].split('}}')[0]}})}` : null
- 
+
 
 
             value = `="\$${value}",`;
@@ -504,7 +484,7 @@ function Compiler(func, file) {
 
 
       let props = component.match(dynamicAttributesRegex)
- 
+
       let filteredProps = [];
       let isWithinComponent = false;
       let componentName = name
@@ -519,25 +499,24 @@ function Compiler(func, file) {
           isWithinComponent = true;
           filteredProps.push(prop);
         } else if (isWithinComponent && prop.includes('=')) {
- 
+
           if (prop.startsWith('$=')) {
             let old = prop
-            prop = prop.replace(/\$\s*=\s*\{\s*\{/, '').replace(/\}\s*\}/, '')
- 
-            component = component.replace(old, prop)
-            componentAttributes = componentAttributes.replace(old, prop)
+            let match = prop.replace(/\$\s*=\s*\{\s*\{\s*([^]*?)\s*\}\s*\}/gs, '$1') 
+            match = match.replace('$:', '$_ternary:')
+            component = component.replace(old, '')
+            componentAttributes = componentAttributes.replace(old,  match)
 
             $_ternaryprops.push(prop)
 
           }
           else if (prop.includes('${')) {
-       
-            
-            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('${', '')
             }
             if (prop.includes('="${{')) {
               prop = prop.replace('${{', '{')
@@ -547,19 +526,21 @@ function Compiler(func, file) {
             }
 
           }
-          else if (prop.includes('={')) {  
-           let key = prop.split('=')[0].trim()
-           let value = prop.split('=')[1].trim()
-           if(value.startsWith('{')){
-              value = value.replace('{', '')
-           }
-            if(value.endsWith('}')){
-              value = value.slice(0, -1)
+          if (prop.includes('={')) {
+            let value = prop.split('={')
+            let isObj = value[1].match(/^{.*}$/gs) ? true : false
+            if (!isObj) {
+              // remove trailing }
+              value[1] = value[1].replace(/}\s*$/, '')
             }
-            prop = `${key}:${value}`
+
+            if (value[0] == 'style' && isObj) {
+              value[1] = `this.parseStyle(${value[1]})`
+            }
+            prop = `${value[0]}:${value[1]}`
           }
 
-          if (prop.includes('function')) {
+          if (prop.includes('function') || prop.includes('=>')) {
             // parse 'function' to function 
             prop = prop.replace("'", '')
 
@@ -570,13 +551,13 @@ function Compiler(func, file) {
 
             prop = prop.replace('=function', ':function')
           }
- 
+
           filteredProps.push(prop);
 
 
 
-        }else if (isWithinComponent && prop.includes('}')) {
-            
+        } else if (isWithinComponent && prop.includes('}')) {
+
         }
 
 
@@ -683,10 +664,10 @@ function Compiler(func, file) {
           let text = fs.readFileSync(file, "utf8");
           if (!file.endsWith('.js') && file.endsWith('.jsx')) {
             text = Compiler(text, file);
-            
+
           }
           let dest = file.split('node_modules')[1]
-          dest = dest.split(baseFolder)[1] 
+          dest = dest.split(baseFolder)[1]
           writer(process.cwd() + '/dist/src/' + baseFolder + dest, text)
           let importname = match.split('import')[1].split('from')[0].trim()
           let oldImportstring = match.split('from')[1].trim().replace(/'/g, '').replace(/"/g, '').trim()
@@ -895,7 +876,7 @@ const glb = await glob("**/**/**/**.{jsx,js}", {
 async function Build() {
   globalThis.isBuilding = true
   console.log(globalThis.isProduction ? 'Creating Optimized Production Build\n' : '')
-  let str = `Page \t\t\t\t Size\n` 
+  let str = `Page \t\t\t\t Size\n`
   globalThis.isProduction ? console.log('\x1b[32m%s\x1b[0m', str) : null
   let reader = async (file) => {
     let text = await fs.readFileSync(file, "utf8");
@@ -903,11 +884,11 @@ async function Build() {
   };
 
 
-   
+
   function ssg(routes = []) {
-    globalThis.isBuilding = true 
+    globalThis.isBuilding = true
     routes.forEach(async (route) => {
-      if (route.url.includes(':')) { 
+      if (route.url.includes(':')) {
         return
       }
       let equalparamroute = routes.map((e) => {
@@ -928,6 +909,8 @@ async function Build() {
       <head>
           <script>
           window.routes = JSON.parse('${JSON.stringify(routes)}')
+            
+         
           </script>
           <script id="isServer">
           window.isServer = true
@@ -950,8 +933,16 @@ async function Build() {
             res.render(module, req, res, module.$metadata)
            }
            catch(error){
-             document.documentElement.setAttribute('error', error.message)
-             throw new Error(error.message)
+            let errorMessage = {
+              message: error.message,
+              name: error.name,
+              stack: error.stack,
+              path: window.location.pathname
+            };
+          
+            
+            document.documentElement.setAttribute('error', JSON.stringify(errorMessage));
+            throw new Error(error)
            }
          }) 
          ${equalparamroute.length > 0 ? equalparamroute.map((e) => {
@@ -964,7 +955,7 @@ async function Build() {
          })\n`
       }) : ''}
          router.listen(3000)
-          
+         
      </script> 
       </head>
       <body>
@@ -1015,28 +1006,24 @@ async function Build() {
       const browser = await puppeteer.launch({
         headless: "new", args: ['--no-sandbox', '--disable-setuid-sandbox'],
         warning: false,
-      }) 
+      })
       try {
 
         route.url = route.url.replaceAll(/\/:[a-zA-Z0-9_-]+/gs, '')
         let page = await browser.newPage();
-         // Handle browser errors
-         page.on('error', (err) => {
-          console.error('BROWSER ERROR:', err);
+        // Handle browser errors
+        page.on('error', (err) => {
+          console.error('BROWSER ERROR:', JSON.parse(err));
         });
-        await page.evaluate(() => {
-          window.onerror = function (msg, url, lineNo, columnNo, error) {
-            console.log(msg, url, lineNo, columnNo, error)
-          }
-        })  
+      
         try {
           page.on('pageerror', async err => { 
-            let errorObj = await page.evaluate(() => document.documentElement.getAttribute('error')) 
-            console.log('\x1b[31m%s\x1b[0m', 'PAGE ERROR:', errorObj);
-            throw new Error(errorObj)
+            let errorObj =  JSON.parse(await page.evaluate(() => document.documentElement.getAttribute('error')) || '{}') 
+            console.log('\x1b[31m%s\x1b[0m', 'Compiler Error:',  errorObj)
+
           });
         } catch (error) {
-          // do nothing
+          browser.close()
         }
         // Handle page crashes
         page.on('crash', () => {
@@ -1045,14 +1032,14 @@ async function Build() {
         page.on('requestfailed', request => {
           console.error('REQUEST FAILED:', request.url(), request.failure().errorText);
         });
-       await page.goto(`http://localhost:${port}/`, { waitUntil: 'networkidle2' });
-       
+        await page.goto(`http://localhost:${port}/`, { waitUntil: 'networkidle2' });
+
+
+
+
+
 
-     
-          
 
-           
-   
         await page.evaluate(() => {
           document.getElementById('meta').remove()
           document.querySelector('#isServer').innerHTML = 'window.isServer = false'
@@ -1060,29 +1047,29 @@ async function Build() {
             document.querySelector('#root').innerHTML = ''
             console.log(`Disabled prerendering for ${window.location.pathname}`)
           }
-        }) 
+        })
         let html = await page.content();
 
-        html = await prettier.format(html, { parser: "html" }) 
-        
-        
+        html = await prettier.format(html, { parser: "html" })
+
+
         await writer(process.cwd() + '/dist/' + (route.url === '/' ? 'index.html' : `${route.url}/` + 'index.html'), html)
-        
+
 
       } catch (error) {
-        console.log(error) 
-      } 
+        console.log(error)
+      }
 
       finally {
-        await browser.close();
-        server.close() 
+        browser.close()
+        server.close()
       }
     })
 
     let timeout = setTimeout(() => {
       globalThis.isBuilding = false
       clearTimeout(timeout)
-    }, 1000) 
+    }, 1000)
   }
 
   globalThis.routes = []
@@ -1114,14 +1101,15 @@ async function Build() {
 
 
     let data = await fs.readFileSync(origin, "utf8");
-     
-   // gen sourcemap if not production
+
+    // gen sourcemap if not production
     let size = fs.statSync(origin).size;
-    if(!globalThis.isProduction){
-      let { sourceMap } = sourceMapGen({origin:origin, fileName:fileName}, await Compiler(data, origin)) 
+    if (!globalThis.isProduction) {
+      let { sourceMap } = sourceMapGen({ origin: origin, fileName: fileName }, await Compiler(data, origin))
+      data = data + `\n//# sourceMappingURL=/src/maps/${fileName.replace('.jsx', '.js.map')}\n //#sourceURL=${origin}`
       await writer(process.cwd() + "/dist/src/maps/" + fileName.replace('.jsx', '.js.map'), JSON.stringify(sourceMap, null, 2))
     }
-    await writer(process.cwd() + "/dist/" + fileName.replace('.jsx', '.js'), await Compiler(data, origin)) 
+    await writer(process.cwd() + "/dist/" + fileName.replace('.jsx', '.js'), await Compiler(data, origin))
 
     // configure routing for each page
 
@@ -1185,17 +1173,18 @@ async function Build() {
 
     globalThis.routes.push({ fileName: fileName, url: obj.url, html: '/' + (isBasePath ? 'index.html' : `${obj.url}/` + 'index.html') })
 
- 
-    let stats = {route: obj.url.padEnd(30),
+
+    let stats = {
+      route: obj.url.padEnd(30),
       size: Math.round(size / 1000) + 'kb',
       letParentFolder: obj.url.split('/').slice(0, -1).join('/'),
       isChildRoute: obj.url.split('/').slice(0, -1).join('/').includes(':') ? true : false,
       parentRoute: obj.url.split('/').slice(0, -1).join('/').split(':')[0],
-     
-    }   
+
+    }
     stats.isChildRoute ? stats.route = `? ${obj.url}` : null
     let string = `${isBasePath ? '+' : '+'} ${stats.route.padEnd(30)} ${stats.size}`
-     
+
     globalThis.isProduction ? console.log(string) : null
   }
 
@@ -1231,9 +1220,13 @@ async function Build() {
 
     let data = await reader(process.cwd() + "/src/" + name)
     if (name.includes('.jsx')) {
-      data = Compiler(data, process.cwd() + "/src/" + name);
-
-      await writer(process.cwd() + "/dist/src/" + name.split('.jsx').join('.js'), data)  
+      let origin = process.cwd() + "/src/" + name 
+      if (!globalThis.isProduction) {
+        let { sourceMap } = sourceMapGen({ origin: origin, fileName: name }, await Compiler(data, origin))
+        data = data + `\n//# sourceMappingURL=/src/maps/${name.replace('.jsx', '.js.map')}\n //#sourceURL=${origin}`
+        await writer(process.cwd() + "/dist/src/maps/" + name.replace('.jsx', '.js.map'), JSON.stringify(sourceMap, null, 2))
+      }
+      await writer(process.cwd() + "/dist/src/" + name.split('.jsx').join('.js'), await Compiler(data, origin))
       return
     }
     bundleSize += fs.statSync(process.cwd() + "/src/" + name).size;
@@ -1378,7 +1371,7 @@ const s = () => {
     console.log(`Server is running on port ${PORT}`);
     globalThis.ws = ws
   });
-  
+
 
 }
 
@@ -1404,7 +1397,7 @@ Vader.js v1.3.3
           if (event == 'change'
             && !globalThis.isBuilding
           ) {
-            if(globalThis.ws && !globalThis.isWriting){
+            if (globalThis.ws && !globalThis.isWriting) {
               globalThis.ws.clients.forEach((client) => {
                 console.log('Reloading...')
                 client.send('reload')
@@ -1432,7 +1425,7 @@ Vader.js v1.3.3
 Vader.js v1.3.3 
 Building to ./dist
 `)
-    if(fs.existsSync(process.cwd() + '/dist/src/maps')){
+    if (fs.existsSync(process.cwd() + '/dist/src/maps')) {
       fs.rmSync(process.cwd() + '/dist/src/maps', { recursive: true })
     }
     Build()