vaderjs 1.3.3-7bn28b17d42e1 → 1.3.3-7u27417d42e1

package/README.md

@@ -81,7 +81,7 @@ export default function(req, res){
 
    return <>
     <h1>${count}</h1>
-    <button onClick={(event)=>{setCount(++count)}}>
+    <button onClick={(event)=>{setCount(count + 1)}}>
    </>
 }
  
@@ -130,7 +130,7 @@ export function Layout({title, keywords, description, children}){
 
 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>
   </>

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-7bn28b17d42e1",
+  "version": "1.3.3-7u27417d42e1",
   "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=[],lastRoute=null,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 n=r(e)?new e(t):null;if(!e)throw new Error("Component must be defined");let i=[],o=new Component(t);if(r(e))n.props=t||{},n.props.children=s.join("")||[],n.props.children=s.join(""),n.parentNode=this,n.type="class ",n.request=this.request,n.response=this.response,n.key=n.props.key?n.props.key:Math.random(),o=n;else{e.toString();o.key=e.toString().split('key="')[1]?e.toString().split('key="')[1].split('"')[0]:null,t=t?{...t,...i.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 n=e[r],i=t[r];if(n&&i&&n.childNodes.length>0&&i.childNodes.length>0){switch(!0){case n.attributes&&i.attributes&&n.attributes.length!==i.attributes.length:s.push({type:"attributeSwap",old:n,new:i});break;case!n.isEqualNode(i)&&n.nodeName===i.nodeName&&n.textContent!==i.textContent:s.push({type:"replace",old:n,new:i})}let e=this.domDifference(Array.from(n.childNodes),Array.from(i.childNodes));return s.push(...e),s}n.isEqualNode(i)||n.nodeName!==i.nodeName||n.textContent===i.textContent?!n&&i&&s.push({type:"add",old:n,new:i}):s.push({type:"replace",old:n,new:i})}return s}updateChangedElements(e){e.forEach((e=>{if(e)switch(e.type){case"replace":if(e.old.panrntNode&&"BODY"===e.old.parentNode.nodeName)return;e.old.replaceWith(e.new.cloneNode(!0));break;case"remove":e.old.remove();break;case"attributeSwap":let t=Array.from(e.old.attributes),s=Array.from(e.new.attributes);t.forEach((t=>{e.old.removeAttribute(t.name)})),s.forEach((t=>{e.old.setAttribute(t.name,t.value)}));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));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,...n){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 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(),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",this.props?.href?.includes("https")||this.props?.href?.includes("http")?`window.open('${this.props.href}', '${this.props.action||"_blank"}').focus()`:`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 this.html.setAttribute("lang",this.props.lang?this.props.lang:"en"),window.isServer?(this.html.innerHTML=this.props.children,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"),this.eagerScripts=document.querySelectorAll("script[eager]")}render(){if(!window.isServer&&this.props?.updateOnReload){this.props.children=(new DOMParser).parseFromString(this.props.children,"text/html").head;let e=this.props.children.querySelector("title");e&&e.textContent&&(console.log("title",e.textContent),document.querySelector("title").textContent=e.textContent),this.props.children.querySelectorAll("meta").forEach((e=>{let t=e.getAttribute("name"),s=e.getAttribute("content");t&&s&&document.querySelector(`meta[name="${t}"]`).setAttribute("content",s)})),this.props.children.querySelectorAll("link").forEach((e=>{let t=e.getAttribute("rel"),s=e.getAttribute("href");t&&s&&document.querySelector(`link[rel="${t}"]`).setAttribute("href",s)}))}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};
+window.Vader={version:"1.3.3"},window.componentRegistry={};let errors={"SyntaxError: Unexpected token '<'":"You forgot to enclose tags in a fragment <></>"},mounts=[],lastRoute=null,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 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 n=[],i=new Component(t);if(isClass(e))r.props=t||{},r.props.children=s.join("")||[],r.props.children=s.join(""),r.parentNode=this,r.type="class ",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,t=t?{...t,...n.reduce(((e,t)=>({...e,...t})),{}),children:s.join("")||[]}:{children:s.join("")||[]};let r={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),type:"function",parentNoe:this,props:{...t,children:s.join("")||[]}};i.render=r.render,i=r,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];"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 n=e[r],i=t[r];if(n&&i&&n.childNodes.length>0&&i.childNodes.length>0){switch(!0){case n.attributes&&i.attributes&&n.attributes.length!==i.attributes.length:s.push({type:"attributeSwap",old:n,new:i});break;case!n.isEqualNode(i)&&n.nodeName===i.nodeName&&n.textContent!==i.textContent:s.push({type:"replace",old:n,new:i})}let e=this.domDifference(Array.from(n.childNodes),Array.from(i.childNodes));return s.push(...e),s}n.isEqualNode(i)||n.nodeName!==i.nodeName||n.textContent===i.textContent?!n&&i&&s.push({type:"add",old:n,new:i}):s.push({type:"replace",old:n,new:i})}return s}updateChangedElements(e){e.forEach((e=>{if(e)switch(e.type){case"replace":if(e.old.panrntNode&&"BODY"===e.old.parentNode.nodeName)return;e.old.replaceWith(e.new.cloneNode(!0));break;case"remove":e.old.remove();break;case"attributeSwap":let t=Array.from(e.old.attributes),s=Array.from(e.new.attributes);t.forEach((t=>{e.old.removeAttribute(t.name)})),s.forEach((t=>{e.old.setAttribute(t.name,t.value)}));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));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,...n){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 getValue=()=>this.state[e];let r=getValue();return[getValue(),(t,n)=>{const i=s(r,t)??t;this.state[e]=i,this.hydrate(n),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.props?.className),this.link.setAttribute("onclick",this.props?.href?.includes("https")||this.props?.href?.includes("http")?`window.open('${this.props.href}', ${this.props.action||"_blank"}).focus()`:`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=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

@@ -117,7 +117,7 @@ function Compiler(func, file) {
     let functionAttributes = [];
     let spreadFunctions = [];
     let functionMatch;
-
+ 
     /**
      * @search - handle attributes for html elements
      * @keywords - attributes, props, html attributes
@@ -139,8 +139,60 @@ function Compiler(func, file) {
       attributesList.push({ element, attributes: elementAttributes });
     }
 
+    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;
+        }
 
 
+        return e;
+      });
+
+
+      let newSpread = splitByCommas.join(' ').trim().replace(/,$/, '');
+
+      // remove trailing } 
+      string = string.replace(old, newSpread);
+    }
+
     while ((functionMatch = functionAttributeRegex.exec(code)) !== null) {
 
       let [, attributeName, attributeValue] = functionMatch;
@@ -164,17 +216,17 @@ function Compiler(func, file) {
               .split("<")[1]
               .split(">")[0]
               .split(" ")[0];
-            isJSXComponent = elementTag.match(/^[A-Z]/) ? true : false;
+            isJSXComponent = elementTag.match(/^[A-Z]/) ? true : false; 
           }
         });
-        if (isJSXComponent) {
+        if (isJSXComponent) { 
           continue
         }
         // add ; after newlines  
 
 
         let newvalue = attributeValue.includes('=>') ? attributeValue.split("=>").slice(1).join("=>").trim() : attributeValue.split("function").slice(1).join("function").trim()
-
+ 
         // add ; after newlines 
 
 
@@ -226,14 +278,14 @@ function Compiler(func, file) {
         newvalue = newvalue.replace(/\(\s*=>/gs, '=>').replace(/\function\s*\([^\)]*\)\s*\{/gs, '{')
         newvalue = newvalue + `\n /**@id=${ref}**/ \n`
 
-        let bind = !isJSXComponent && `${attributeName}="\$\{this.bind(function(){${newvalue}}.bind(this), ${isJSXComponent}, "${ref}",   "${paramnames ? paramnames.map((e, index) => {
+        let bind = !isJSXComponent  && `${attributeName}="\$\{this.bind(function(){${newvalue}}.bind(this), ${isJSXComponent}, "${ref}",   "${paramnames ? paramnames.map((e, index) => {
           if (e.length < 1) return ''
           if (e.length > 0) {
             index == 0 ? e : ',' + e
           }
           return e
         }) : ''}" ${params ? params.split(',').map((e) => e.trim()).filter(Boolean).map((e) => `,${e}`).join('') : ''})}"`
-
+   
         string = string.replace(old, bind)
       }
     }
@@ -360,15 +412,9 @@ function Compiler(func, file) {
       switch (true) {
         case line.includes("useState") && !line.includes("import"):
           let varType = line.split("[")[0]
-          if (!line.split("=")[0].split(",")[1]) {
-            throw new Error('You forgot to value selector  (useState) ' + ' at ' + `${file}:${string.split(line)[0].split('\n').length}`)
-          }
           let key = line.split("=")[0].split(",")[0].trim().split('[')[1];
 
-          if (!line.split("=")[0].split(",")[1]) {
-            throw new Error('You forgot to add a setter (useState) ' + ' at ' + `${file}:${string.split(line)[0].split('\n').length}`)
-          }
-          let setKey = line.split("=")[0].split(",")[1].trim().replace("]", "");
+          let setKey = line.split("=")[0].trim().split(",")[1].trim().replace("]", "");
           key = key.replace("[", "").replace(",", "");
           let valuestate = line.split("=")[1].split("useState(")[1];
 
@@ -437,71 +483,37 @@ function Compiler(func, file) {
       let myChildrens = [];
 
       let name = component.split("<")[1].split(">")[0].split(" ")[0].replace("/", "");
-      let componentAttributes = component.split("<")[1].split(">")[0].split(" ").join(" ").replace(name, "").trim();
-      let props = component.includes('/>') ? component.split(`<`)[1].split('/>')[0] : component.split(`<`)[1].split(`>`)[0]
-      props = props.replaceAll(/\s+/g, " ").trim()
+      let componentAttributes = component.split("<")[1].split(">")[0].split(" ").join(" ").replace(name, "").trim(); 
+      let props = component.includes('/>')? component.split(`<`)[1].split('/>')[0] : component.split(`<`)[1].split(`>`)[0]
+          props = props.replaceAll(/\s+/g, " ").trim()
       props = props.replace(name, '').trim()
       component = component.replace(componentAttributes, '')
-      // or spread attributes {...{}, ...{}}
-      const dynamicAttributesRegex = /([a-zA-Z0-9_-]+)\s*=\s*("(?:[^"\\]*(?:\\.[^"\\]*)*)"|'(?:[^'\\]*(?:\\.[^'\\]*)*)'|\{(?:[^{}]|(?:\{(?:[^{}]|(?:\{(.*.*?)\})*)*\})*)*\}|(?:\([^)]*\)|()\s*=>\s*(?:\{.*.*\})?|\{.*\})|\[[^\]]*\])|\${\{.*\}}/gs;
+      const dynamicAttributesRegex = /([a-zA-Z0-9_-]+)\s*=\s*("(?:[^"\\]*(?:\\.[^"\\]*)*)"|'(?:[^'\\]*(?:\\.[^'\\]*)*)'|\{(?:[^{}]|(?:\{(?:[^{}]|(?:\{(.*.*?)\})*)*\})*)*\}|(?:\([^)]*\)|()\s*=>\s*(?:\{.*.*\})?|\{.*\})|\[[^\]]*\])/gs;
 
       const attributeObject = {};
-      let propstring = ''
+ 
       let $_ternaryprops = []
-      let spreadRegex = /\$\{.*\}/gs;
-      let spreadMatch;
-      let hasSpread = false;
-      while ((spreadMatch = spreadRegex.exec(props)) !== null) {
-        let spread = spreadMatch[0].trim().replace(/\s+/g, " ");
-        if (!spread.includes('...')) {
-          continue
-        }
-        let old = spread;
-        spread = spread.trim().replace(/\s+/g, " ");
-        //${...( loaded ? { title: "Malik Whitten - Blog" } : { title: "Loading" } )} -> ...( loaded ? { title: "Malik Whitten - Blog" } : { title: "Loading" } )
-
-        let spreadContent = spread.match(/\$\{.*\}/gs) ? spread.match(/\$\{.*.*\}/gs)[0] : null
-        spreadContent = spread.split('${')[1]
-
-        spreadContent = spread.replace(/\${/, '')
-        spreadContent = spreadContent.replaceAll(/\s+/g, " ").trim()
-        spreadContent = spreadContent.replace(')}', ')').replace('}}', '}')
-
-        propstring += spreadContent + ','
-        hasSpread = true
-
-      }
 
       let match;
-
+      let propstring = ''
       // props right now is just a string with all of them on one line and a space between each
       while ((match = dynamicAttributesRegex.exec(props)) !== null) {
         let str = match[0].trim().replace(/\s+/g, " ");
         if (!str.includes('=')) {
           continue
-        }
-
-        if (hasSpread) {
-
-          console.log('\x1b[33m', '🚨 Code confliction detected', '\x1b[0m')
-          let line = string.split(match[0])[0].split('\n').length
-          try {
-            throw new Error('You cannot use spread props and named props\n on the same component at ' + match[0] + ' at ' + `${file}:${line}`)
-          } catch (error) {
-            console.error(error)
-            process.exit(1)
-          }
-        }
-
-        str = str.replaceAll(/\s+/g, " ")
+        }   
+        
+       
+        str = str.replaceAll(/\s+/g, " ") 
         str = str.split('=')
-        let key = str[0].trim()
+        let key = str[0].trim() 
         let value = str.slice(1).join('=').trim().match(/\{.*\}/gs) ? str.slice(1).join('=').trim().match(/\{.*\}/gs)[0] : str.slice(1).join('=').trim();
-
-
+ 
+   
+        
         let isObject = value.startsWith('{{') && value.endsWith('}}')
-        if (isObject) {
-          value = value.split('{{')[1].split('}}')[0].trim()
+        if (isObject) { 
+          value = value.split('{{')[1].split('}}')[0].trim() 
           value = `{${value}}`
           propstring += `${key}:${value},`
         } else {
@@ -510,8 +522,8 @@ function Compiler(func, file) {
           propstring += `${key}:${value},`
         }
         propstring = propstring.replaceAll(/\s+/g, " ").trim()
-
-      }
+         
+      } 
       component = component.replaceAll(/\s+/g, " ");
 
       component = component.replace(componentAttributes, '')
@@ -578,7 +590,7 @@ function Compiler(func, file) {
   let replaceMents = [];
 
 
-  if (imports) {
+  if(imports){
     for (let match of imports) {
       let path = match.split('from')[1].trim().replace(/'/g, '').replace(/"/g, '').trim()
       switch (true) {
@@ -588,11 +600,11 @@ function Compiler(func, file) {
           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 + '/',
@@ -603,7 +615,7 @@ 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]
@@ -615,8 +627,8 @@ function Compiler(func, file) {
             replaceMents.push({ match: oldImportstring, replace: newImport })
             console.log(`📦 imported Node Package  ${baseFolder} `)
           }
-
-
+  
+  
           break;
         default:
           break;
@@ -641,7 +653,7 @@ function Compiler(func, file) {
   string = string.replaceAll(/\$\{\/\*.*\*\/\}/gs, "");
   string = string.replaceAll("<>", "`").replaceAll("</>", "`");
   string = string.replaceAll(".jsx", ".js");
-
+ 
 
   string = string
     .replaceAll("className", "class")
@@ -807,17 +819,15 @@ function Compiler(func, file) {
 
 globalThis.isBuilding = false
 globalThis.isWriting = null
-
+const glb = await glob("**/**/**/**.{jsx,js}", {
+  ignore: ["node_modules/**/*", "dist/**/*"],
+  cwd: process.cwd() + '/pages/',
+  absolute: true,
+  recursive: true
+});
 let hasRendered = []
 
 async function Build() {
-  const glb = await glob("**/**/**/**.{jsx,js}", {
-    ignore: ["node_modules/**/*", "dist/**/*"],
-    cwd: process.cwd() + '/pages/',
-    absolute: true,
-    recursive: true
-  });
-
   globalThis.isBuilding = true
   console.log(globalThis.isProduction ? 'Creating Optimized Production Build\n' : '')
   let str = `Page \t\t\t\t Size\n`
@@ -895,7 +905,7 @@ async function Build() {
           page.on('crash', () => {
             console.error(`Render process crashed for ${route.url}`)
           });
-
+         
           await page.goto(`http://localhost:${port}${route.url}`, { waitUntil: 'networkidle2' });
 
           page.evaluate(() => {
@@ -939,8 +949,8 @@ async function Build() {
         browser.close()
       })
       hasRendered = []
-      globalThis.isBuilding = false
-
+      globalThis.isBuilding = false 
+       
     }
 
     if (hasRendered.length === routes.length) {
@@ -956,7 +966,6 @@ async function Build() {
     }
   }
   globalThis.routes = []
-  globalThis.paramRoutes = []
 
   for await (let file of glb) {
     // Normalize file paths
@@ -1055,46 +1064,10 @@ async function Build() {
     }
 
 
-    if (obj.url.includes(':') && !paramRoutes.includes(obj.url)) {
-      globalThis.paramRoutes.push({ fileName: fileName, url: obj.url, html: '/' + (isBasePath ? 'index.html' : `${obj.url}/` + 'index.html') })
-    } else {
-
+    if (!obj.url.includes(':')) {
       globalThis.routes.push({ fileName: fileName, url: obj.url, html: '/' + (isBasePath ? 'index.html' : `${obj.url}/` + 'index.html') })
     }
 
-    // check if route has a index.html file
-
-    if (!fs.existsSync(process.cwd() + '/dist/' + (isBasePath ? 'index.html' : `${obj.url}/` + 'index.html'))
-      && !obj.url.includes(':') && !globalThis.isProduction
-    ) {
-      let document = `<!DOCTYPE html>
-      <html lang="en">
-      <head>
-          <meta charset="UTF-8">
-          <meta name="viewport" content="width=device-width, initial-scale=1.0">
-          <title>${obj.url}</title>
-          <script>
-          window.routes = JSON.parse('${JSON.stringify(globalThis.routes)}')
-          </script>
-          <script type="module">
-           import VaderRouter from '/router.js'
-           const router = new VaderRouter('${obj.url}')
-            router.get('${obj.url}', async (req, res) => {
-              let module = await import('/${obj.url === '/' ? 'index.js' : obj.url + '.js'}')
-              if(Object.keys(module).includes('$prerender') && !module.$prerender){
-                document.head.setAttribute('prerender', 'false')
-              }
-              res.render(module, req, res, module.$metadata)
-            })
-            router.listen(3000)
-          </script>
-      </head>
-      <body>
-           <div id="root"></div>
-      </body>
-      </html>`
-      writer(process.cwd() + '/dist/' + (isBasePath ? 'index.html' : `${obj.url}/` + 'index.html'), document)
-    }
 
     let stats = {
       route: obj.url.padEnd(30),
@@ -1112,8 +1085,7 @@ async function Build() {
 
   globalThis.routeDocuments = []
   globalThis.routes.map((route) => {
-    let equalparamroute = globalThis.paramRoutes.map((e) => {
-      console
+    let equalparamroute = globalThis.routes.map((e) => {
       if (e.url.includes(':')) {
         let url = e.url.split('/:')[0]
         if (url && route.url === url) {
@@ -1188,13 +1160,13 @@ async function Build() {
   `;
     globalThis.routeDocuments.push({ url: route.url, document: document })
   })
-
-  if (globalThis.devMode && !globalThis.oneAndDone) {
+ 
+  if(globalThis.devMode && !globalThis.oneAndDone){
     ssg(globalThis.routes)
     globalThis.oneAndDone = true
     console.log(`In Development Mode, Prerendering ${globalThis.routes.length} pages... Once`)
-  }
-  else if (globalThis.isProduction) {
+  } 
+  else if(globalThis.isProduction){
     ssg(globalThis.routes)
   }
 
@@ -1279,7 +1251,7 @@ async function Build() {
       let data = await reader(process.cwd() + "/node_modules/vaderjs/runtime/" + file)
       await writer(process.cwd() + "/dist/" + file, data);
     });
-
+    
 
   }
 
@@ -1287,29 +1259,7 @@ async function Build() {
 
   globalThis.isProduction ? console.log(`Total Bundle Size: ${Math.round(bundleSize / 1000)}kb`) : null
   bundleSize = 0;
-  if (!globalThis.isBuilding) {
-    let folders = fs.readdirSync(process.cwd() + '/dist/', { withFileTypes: true })
-
-    folders.forEach((folder) => {
-      // exclude files
-      if (folder.name.includes('src') || folder.name.includes('public') || folder.name.includes('pages')
-        || !folder.isDirectory()
-      ) {
-        return
-      }
-
-      let existsInPages = fs.existsSync(process.cwd() + '/pages/' + folder.name)
 
-      if (existsInPages) {
-        return
-      }
-      fs.rm(process.cwd() + '/dist/' + folder.name, { recursive: true }, (err) => {
-        if (err) {
-          throw err
-        }
-      })
-    })
-  }
   return true
 }
 const s = (port) => {
@@ -1319,7 +1269,7 @@ const s = (port) => {
     const validExtensions = ['.js', '.css', '.mjs', '.cjs', '.html', '.json', '.png', '.jpg', '.jpeg', '.gif', '.svg', '.mp4', '.webm', '.ogg', '.map']
 
     if (!validExtensions.some(ext => req.url.endsWith(ext))) {
-      req.url = req.url + '/'
+      req.url = req.url !== '/' ? req.url.split('/')[1] : req.url;
       req.url = path.join(process.cwd(), 'dist', req.url, 'index.html');
     } else {
       req.url = path.join(process.cwd(), 'dist', req.url);
@@ -1397,7 +1347,7 @@ const s = (port) => {
         return 'application/octet-stream';
     }
   }
-
+ 
   server.listen(port, () => {
     console.log(`Server is running on port ${port}`);
     globalThis.ws = ws
@@ -1412,7 +1362,7 @@ switch (true) {
 
     globalThis.devMode = true
     globalThis.isProduction = false
-
+    
     let p = process.env.PORT || config.port || process.argv.includes('-p') ? process.argv[process.argv.indexOf('-p') + 1] : 3000
     globalThis.oneAndDone = false
     console.log(`
@@ -1444,7 +1394,7 @@ Vader.js v${fs.readFileSync(process.cwd() + '/node_modules/vaderjs/package.json'
             Build()
           }
         }).on('error', (err) => console.log(err))
-    })
+    })  
     s(p)
 
     globalThis.listen = true;