vaderjs 1.4.0-90gbho234 → 1.4.1-h7iuy47

package/binaries/watcher.js

@@ -1,70 +1,74 @@
 /**
+
  * @file watcher.js
+
  * @description This file is used as a polyfill for missing functionality of bun.js fs watch on windows
+
  */
-import { watch } from 'fs'
-import WebSocket, { WebSocketServer } from 'ws';
-const wss =  new WebSocketServer({ port: process.env.PORT || 3434 })
-console.log('watcher started', process.env.PORT)
-process.cwd = ()=>{return process.env.PWD}
-globalThis.wss = wss
-let folders = process.env.FOLDERS.split(',')
- 
-let isWriting = false
-
-wss.on('connection', (ws) => {
-    folders.forEach((folder)=>{ 
-        console.log('watching folder: ', folder)
-        wss.clients.forEach((client) => {
-            client.send(JSON.stringify({
-                type: 'init',
-                folder
-            }))
-        })
-        watch(process.cwd() + '/' + folder, { recursive: true }, (event, filename) => {
-            switch(event){
-                case 'change':
-                   
-                     wss.clients.forEach((client) => {
-                        client.send(JSON.stringify({
-                            type: 'change',
-                            filename
-                        }))
-                     }) 
-                    
-                break;
-                case 'add':
-                     
-                        wss.clients.forEach((client) => {
-                            client.send(JSON.stringify({
-                                type: 'add',
-                                filename
-                            }))
-                        })
-                     
-                break;
-                case 'close':
-                 
-                        wss.clients.forEach((client) => {
-                            client.send(JSON.stringify({
-                                type: 'close',
-                                filename
-                            }))
-                        })
-                    
-                break;
-    
-                
-            }
-            
-        })
-    })
-})
-
-wss.on('close', ()=>{
-    console.log('watcher closed')
-})
-//before closing erase the index.json file
-process.on('exit', function(code) {
-    console.log('About to exit with code:', code);
-});
+
+import { watch } from "fs";
+
+import IPC from "../binaries/IPC/index.js";
+
+IPC.NOLISTEN = true;
+
+const s = await IPC.newServer(IPC.typeEnums.WATCHER, { port: process.env.PORT || 3434 });
+
+console = s.Console;
+
+process.cwd = () => {
+  return process.env.PWD;
+};
+
+let folders = process.env.FOLDERS.split(","); 
+
+let hasSent = false;
+
+folders.forEach((folder) => {
+  watch(process.cwd() + "/" + folder, { recursive: true }, (event, filename) => {
+    switch (event) {
+      case "change":
+        if (!hasSent) {
+          console.log({ type: "change", filename });
+
+          hasSent = true;
+
+          setTimeout(() => {
+            hasSent = false;
+          }, 1000);
+        }
+
+        break;
+
+      case "add":
+        if (!hasSent) {
+          console.log({ type: "add", filename });
+
+          hasSent = true;
+
+          setTimeout(() => {
+            hasSent = false;
+          }, 500);
+        }
+
+        break;
+
+      case "close":
+        if (!hasSent) {
+          console.log({ type: "close", filename });
+
+          hasSent = true;
+
+          setTimeout(() => {
+            hasSent = false;
+          }, 500);
+        }
+
+        break;
+    }
+  });
+});
+
+process.on("exit", function (code) {
+  console.log("About to exit with code:", code);
+});

package/binaries/win32/check.ps1

@@ -0,0 +1,7 @@
+$chrometest = Test-Path 'HKLM:\SOFTWARE\Microsoft\Windows\CurrentVersion\App Paths\chrome.exe'
+
+if($chrometest -eq $true){
+   Write-Host "Google Chrome is installed"
+}else{
+   Write-Host "Google Chrome is not installed"
+}

package/config/index.js

@@ -0,0 +1,36 @@
+/**
+ * @function defineConfig
+ * @description Define the configuration for the application
+ * @param {Object} config 
+ * @param {Object} config.host -  Important metadata
+ * @param {string} config.host.hostname - The hostname for your webapplication
+ * @param {Object} config.host.prod - Define data for production use
+ * @param {Number} config.host.prod.port - The production port for your webapp
+ * @param {('vercel'|'netlify'|'cloudflare')} config.host.provider - Helps vader to generate routes for your webapp
+ * @param {Object} config.dev - The development server configuration
+ * @param {Number} config.dev.port - The port to use for the development server
+ * @param {('localhost')} config.dev.host - The hostname to use for the development server
+ * @param {Array} config.integrations - Additional integrations to enhance vaderjs
+ * @param {Function} config.integrations[0] - The integration to use for the application
+ * @returns {Object} The defined configuration
+ */
+export const defineConfig = (config = {
+    host: {
+        provider: '',
+        hostname:'',
+        prod:{
+          port:3000, 
+        }
+    },
+    dev: {
+        port: 3000, // Default port for the development server
+        host: 'localhost' // Default hostname for the development server
+    },
+    integrations: []
+}) => {
+    return config;
+};
+
+export default {
+    defineConfig
+};

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.4.0-90gbho234",
+  "version": "1.4.1-h7iuy47",
   "bin": {
     "vader": "./vader.js"
   },
@@ -12,6 +12,7 @@
     "nextjs",
     "pages router",
     "bun.js",
+    "severside generation",
     "spa",
     "vanillajs",
     "vanilla js"
@@ -28,10 +29,8 @@
     "email": "malikwhitterb@gmail.com"
   },
   "dependencies": { 
-    "puppeteer":"latest",
-    "dotenv":"latest",
-    "prettier": "latest",
-    "source-map": "latest"
-
+    "playwright": "latest",  
+    "source-map": "latest",
+    "ws": "latest"
   }
 }

package/runtime/router.js

@@ -1 +1 @@
-import Vader from"./vader.js";let middlewares=[];class Router{constructor(t,e){this.routes=[],this.middlewares=[],this.errorMiddlewares=[],this.listeners=[],this.basePath=t}get(t,e){this.routes.push({method:"get",path:t,handler:e})}use(t){this.middlewares.push(t)}matchingRoute(){return routes.find((t=>t.url===window.location.pathname||window.location.pathname.split("/")[1]===t.url.split("/")[1]||void 0))}listen(t,e){t||(t=Math.random().toString(36).substring(7)),this.listeners.push(t),window.onpopstate=async t=>{let e=window.location.pathname;if(e.includes("#noNavigation"))return;let r=`/${e.split("/")[1]}`,n=(new DOMParser).parseFromString(await fetch(r,{cache:"reload"}).then((t=>t.text())),"text/html").documentElement,s=(n.querySelector("head"),n.querySelector("body"));document.querySelector("#app").innerHTML=s.querySelector("#app").innerHTML;let o=document.createElement("script");o.id="router",o.innerHTML=s.querySelector('script[id="router"]').innerHTML,o.setAttribute("type","module"),document.body.appendChild(o)},window.location.pathname.includes("#noNavigation")||(console.log("no navigation"),this.handleRoute(window.location.pathname)),e&&e()}render(t){document.querySelector("#app").innerHTML="",Vader.render(t,document.querySelector("#app"))}extractParams(t,e){const r=t.split("/").filter((t=>""!==t)),n=e.split("/").filter((t=>""!==t)),s={};return r.forEach(((t,e)=>{if(t.startsWith(":")){const r=t.slice(1);s[r]=n[e]}else if(t.startsWith("*")){n.slice(e).forEach(((t,e)=>{s[e]=t}))}})),s}extractQueryParams(t){const e=t.split("?")[1];if(!e)return{};const r={};return e.split("&").forEach((t=>{const[e,n]=t.split("=");r[e]=n})),r}checkroute(t){return(t=t.endsWith("/")?t.slice(0,-1):t).includes("?")&&(t=t.split("?")[0]),this.routes.find((e=>{if(e.path===t)return!0;if(""===t&&"/"===e.path)return!0;if(e.path.includes("*")||e.path.includes(":")){const r=e.path.split("/").filter((t=>""!==t)),n=t.split("/").filter((t=>""!==t));if(this.basePath&&n.shift(),console.log(r,n),r.length!==n.length&&!e.path.endsWith("*"))return!1;for(let t=0;t<r.length;t++){const e=r[t],s=n[t];if(!e.startsWith(":")&&!e.startsWith("*")&&e!==s)return!1}return!0}const r=this.extractParams(e.path,t);return Object.keys(r).length>0}))}handleRoute(t){let e=200,r={},n=t,s=this.checkroute(t);console.log(s),s||(e=404,s=this.routes.find((t=>"*"===t.path)),s&&(r=this.extractParams(s.path,t)));const o=this.extractQueryParams(n),a=s&&s.path?this.extractParams(s.path,n):r;Object.keys(a).forEach((t=>{a[t]=a[t].split("?")?a[t].split("?")[0]:a[t]}));const i={headers:{},params:a,query:o,path:t,fileUrl:window.location.href.split(window.location.origin)[1],url:window.location.href,method:s?s.method:"get",pause:!1,timestamp:Date.now()};window.$CURRENT_URL=i.path,window.$FULL_URL=window.location.href.replace("#","");const l={status:e,log:t=>{void 0===t?console.log(`${i.path} ${i.method} ${l.status} ${i.timestamp}`):console.table({"Request Path":i.path,"Request Method":s.method,"Response Status":l.status,"Request Timestamp":i.timestamp})},refresh:()=>{this.handleRoute(window.location.pathname)},redirect:t=>{!t.startsWith("/")&&(t=`/${t}`),window.history.pushState({},"",t),window.dispatchEvent(new Event("popstate"))},render:async t=>{document.querySelector("#app").innerHTML="",Vader.render(t,document.querySelector("#app"),{passProps:{router:{req:i,res:l}}})},setQuery:t=>{let e="";Object.keys(t).forEach(((r,n)=>{e+=`${0===n?"?":"&"}${r}=${t[r]}`}));let r=window.location.hash.split("?")[0];e=e.replace("/","-").replaceAll("/","-"),window.location.hash=`${r}${e}`},send:t=>{document.querySelector("#app").innerHTML=t},json:t=>{const e=document.querySelector("#app");e.innerHTML="";const r=document.createElement("pre");r.textContent=JSON.stringify(t,null,2),e.appendChild(r)}};middlewares.forEach((t=>{t(i,l)})),s?l.render(s.handler):l.status(404).send("Not Found")}}export default Router;
+import t from"./vader.js";let e=[];export default class Router{constructor(t,e){this.routes=[],this.middlewares=[],this.errorMiddlewares=[],this.listeners=[],this.basePath=t}get(t,e){this.routes.push({method:"get",path:t,handler:e})}use(t){this.middlewares.push(t)}matchingRoute(){return routes.find((t=>t.url===window.location.pathname||window.location.pathname.split("/")[1]===t.url.split("/")[1]||void 0))}listen(t,e){t||(t=Math.random().toString(36).substring(7)),this.listeners.push(t),window.onpopstate=async t=>{let e=window.location.pathname;if(e.includes("#noNavigation"))return;let r=`/${e.split("/")[1]}`,n=(new DOMParser).parseFromString(await fetch(r,{cache:"reload"}).then((t=>t.text())),"text/html").documentElement,o=(n.querySelector("head"),n.querySelector("body"));document.querySelector("#app").innerHTML=o.querySelector("#app").innerHTML;let s=document.createElement("script");s.id="router",s.innerHTML=o.querySelector('script[id="router"]').innerHTML,s.setAttribute("type","module"),document.body.removeChild(document.getElementById("router")),document.body.appendChild(s)},window.location.pathname.includes("#noNavigation")||(console.log("no navigation"),this.handleRoute(window.location.pathname)),e&&e()}render(e){document.querySelector("#app").innerHTML="",t.render(e,document.querySelector("#app"))}extractParams(t,e){const r=t.split("/").filter((t=>""!==t)),n=e.split("/").filter((t=>""!==t)),o={};return r.forEach(((t,e)=>{if(t.startsWith(":")){const r=t.slice(1);o[r]=n[e]}else if(t.startsWith("*")){n.slice(e).forEach(((t,e)=>{o[e]=t}))}})),o}extractQueryParams(t){const e=t.split("?")[1];if(!e)return{};const r={};return e.split("&").forEach((t=>{const[e,n]=t.split("=");r[e]=n})),r}checkroute(t){return(t=t.endsWith("/")?t.slice(0,-1):t).includes("index.html")&&(t=t.replace("index.html","")),t.includes("?")&&(t=t.split("?")[0]),this.routes.find((e=>{if(console,e.path===t)return!0;if(""===t&&"/"===e.path)return!0;if(e.path.includes("*")||e.path.includes(":")){const r=e.path.split("/").filter((t=>""!==t)),n=t.split("/").filter((t=>""!==t));if(this.basePath&&n.shift(),console.log(r,n),r.length!==n.length&&!e.path.endsWith("*"))return!1;for(let t=0;t<r.length;t++){const e=r[t],o=n[t];if(!e.startsWith(":")&&!e.startsWith("*")&&e!==o)return!1}return!0}const r=this.extractParams(e.path,t);return Object.keys(r).length>0}))}handleRoute(r){let n=200,o={},s=r,a=this.checkroute(r);a||(n=404,a=this.routes.find((t=>"*"===t.path)),a&&(o=this.extractParams(a.path,r)));const i=this.extractQueryParams(s),l=a&&a.path?this.extractParams(a.path,s):o;Object.keys(l).forEach((t=>{l[t]=l[t].split("?")?l[t].split("?")[0]:l[t]}));const c={headers:{},params:l,query:i,path:r,fileUrl:window.location.href.split(window.location.origin)[1],url:window.location.href,method:a?a.method:"get",pause:!1,timestamp:Date.now()};window.$CURRENT_URL=c.path,window.$basePath=" ",window.$FULL_URL=window.location.href.replace("#","");const h={status:n,log:t=>{void 0===t?console.log(`${c.path} ${c.method} ${h.status} ${c.timestamp}`):console.table({"Request Path":c.path,"Request Method":a.method,"Response Status":h.status,"Request Timestamp":c.timestamp})},refresh:()=>{this.handleRoute(window.location.pathname)},redirect:t=>{!t.startsWith("/")&&(t=`/${t}`),window.history.pushState({},"",t),window.dispatchEvent(new Event("popstate"))},render:async e=>{e?.default&&(e=e.default),document.querySelector("#app").innerHTML="",t.render(e,document.querySelector("#app"),{passProps:{router:{req:c,res:h}}})},setQuery:t=>{if($SERVER)return;let e="";Object.keys(t).forEach(((r,n)=>{e+=`${0===n?"?":"&"}${r}=${t[r]}`}));let r=window.location.pathname.split("?")[0];e=e.replace("/","-").replaceAll("/","-"),c.query={...c.query,...t},window.history.pushState({},"",`${r}${e}`)},getQuery:t=>{let e=window.location.search,r=new URLSearchParams(e);return t?r.get(t.key):r},send:t=>{document.querySelector("#app").innerHTML=t},json:t=>{const e=document.querySelector("#app");e.innerHTML="";const r=document.createElement("pre");r.textContent=JSON.stringify(t,null,2),e.appendChild(r)}};e.forEach((t=>{t(c,h)})),a?h.render(a.handler):h.status(404).send("Not Found")}}

package/runtime/vader.js

@@ -1 +1 @@
-let hasMounted=[],hasRendered=[];export const Mounted=(e,t,r=!1)=>{let s=setInterval((()=>{switch(!0){case r&&hasMounted.includes(t.key):return clearInterval(s);case r&&!hasMounted.includes(t.key):hasMounted.push(t.key),e();break;case!document.querySelector(`[key="${t.key}"]`):return;default:e(),clearInterval(s)}}),100)};export class Component{constructor(e){this.state={},this.__internalInstance=null,this.key=e?.key||Math.random(),this.checkMount(),this.mounted=!1}setState(e){this.state=Object.assign({},this.state,e),this.updateInstance(this.__internalInstance)}useState(e,t){this.state[e]||(this.state[e]=t);let r=this.state[e];return r=(()=>this.state[e]||t)(),[r,t=>{r=t,this.state[e]=t,this.updateInstance(this.__internalInstance)}]}useReducer(e,t,r){this.state[e]||(this.state[e]=r);let s=this.state[e];return s=(()=>this.state[e]||r)(),[s,r=>{const n=t(s,r);s=n,this.state[e]=n,this.updateInstance(this.__internalInstance)}]}useRef(e,t){return this.state[e]||(this.state[e]=t),{current:this.state[e]}}onMount(){}domDifference(e,t){let r=[];for(let s=0;s<e.length;s++){let n=e[s],a=t[s];if(n&&a&&n.childNodes.length>0&&a.childNodes.length>0){switch(!0){case n.attributes&&a.attributes&&n.attributes.length!==a.attributes.length:r.push({type:"attributeSwap",old:n,new:a});break;case!n.isEqualNode(a)&&n.nodeName===a.nodeName:r.push({type:"replace",old:n,new:a})}let e=this.domDifference(Array.from(n.childNodes),Array.from(a.childNodes));return r.push(...e),r}!n&&a&&r.push({type:"add",old:n,new:a})}return r}checkMount(){if(this.mounted)return;setInterval((()=>{document.querySelector(`[key="${this.key}"]`)&&!this.mounted&&(this.mounted=!0,this.onMount())}))}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),r=Array.from(e.new.attributes);t.forEach((t=>{e.old.removeAttribute(t.name)})),r.forEach((t=>{e.old.setAttribute(t.name,t.value)}));break;case"add":e.old.appendChild(e.new.cloneNode(!0))}}))}async updateInstance(e){console.log(e);let t=document.querySelector(`[key="${this.key}"]`)||document.querySelector("#app").firstChild,r=await vjsxx.render(e,t,{return:!0});console.log(r);let s=this.domDifference(Array.from(t.childNodes),Array.from(r.childNodes));this.updateChangedElements(s)}parseStyle(e){let t="";return Object.keys(e).forEach((r=>{let s=e[r];r=r.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g,"$1-$2").toLowerCase(),t+=`${r}:${s};`})),t}}class vjsx{constructor(){this._vjsx=!0}isClass(e){return/^\s*class\s+/.test(e.toString())}instanizeClass(e,t={}){if("string"==typeof e||"object"==typeof e)return e;switch(this.isClass(e)){case!0:let r=new e(t);return r.$$typeof="vjsx",r.type=e.name,r.key=t?.key||r.name,r.props=t,r.__internalInstance=()=>r.render(),r.render();case!1:let s=new Component;s.key=e.name+Math.random(),s.__internalInstance=()=>e.bind(s)(t),e.$$typeof="vjsx",e.useState=s.useState.bind(s),e.setState=s.setState.bind(s),e.state=s.state;let n={},a={};return t?.router&&(n=t.router.req,a=t.router.res),e.apply?e.apply(s,[n,a,t]):e}}createElement(e,t,r,...s){let n="function"==typeof e,a=s.find((e=>"vjsx"===e?.$$typeof));if(n)return t.key=r||Math.random(),t.parent=a,this.instanizeClass(e,t);let o={type:e,RootParent:a,props:{...t,key:t?.key||Math.random(),children:Array.isArray(t.children)?t.children:[t.children]}};return"TEXT_ELEMENT"===("string"==typeof o?"TEXT_ELEMENT":o.type)?createTextElement(o):o}async render(e,t,r){let s=this.instanizeClass(e,r?.passProps);if(r&&r?.passProps&&r?.passProps?.router){let e=r.passProps.router.req,s=r.passProps.router.res;e.pause&&await new Promise((n=>{let a=setInterval((()=>{e.pause?s.render&&"function"==typeof s.render&&!hasRendered.includes(s.render.toString())&&(Vader.render(s.render(e,s,r.passProps),t),hasRendered.push(s.render.toString())):(clearInterval(a),n())}),0)}))}if(!s.type)return;let n="TEXT_ELEMENT"===s.type?document.createTextNode(""):document.createElement(s.type),isListener=e=>e.startsWith("on");if(s.props&&(s.props.key&&(s.key=s.props.key),Object.keys(s.props).filter(isListener).forEach((e=>{let t=e.toLowerCase().substring(2);n.addEventListener(t,s.props[e].bind(s))})),Object.keys(s.props).filter((e=>!isListener(e))).forEach((e=>{switch(e){case"classname":n.setAttribute("class",s.props[e]),delete s.props[e];break;case"ref":if(Array.isArray(s.props[e].current))return void s.props[e].current.push(n);s.props[e].current=n;break;case"htmlFor":n.setAttribute("for",s.props[e]);break;case"style":n.setAttribute("style",Component.prototype.parseStyle(s.props[e]));case"children":break;default:n.setAttribute(e,s.props[e])}"TEXT_ELEMENT"!==s.type||(n.nodeValue=s.props[e])}))),s.props&&s.props.children&&Array.isArray(s.props.children)&&s.props?.children&&s.props.children.forEach((e=>{if(Array.isArray(e))return void e.forEach((e=>{null!==e&&this.render(e,n,!0)}));if(!e)return;let t="function"==typeof e?this.instanizeClass(e):e;"TEXT_ELEMENT"!==(t?.type?t.type:"TEXT_ELEMENT")?this.render(t,n):n.appendChild(document.createTextNode(t))})),r?.return)return n;s.key&&n.setAttribute("key",s.key),!r?.return&&document.body.contains(t)&&(s?.RootParent?.onMount(),t.innerHTML=""),r?.return||t.appendChild(n)}}function createTextElement(e){return{type:"TEXT_ELEMENT",props:{nodeValue:e,children:[]}}}export const useState=e=>{this.state[key]||(this.state[key]=e);let t=this.state[key];return t=(()=>this.state[key]||e)(),[t,e=>{t=e,this.state[key]=e,this.updateInstance(this.__internalInstance)}]};export const useReducer=(e,t)=>{const[r,s]=useState(t);return[r,t=>{const n=e(r,t);s(n)}]};export const useRef=e=>{this.state[key]||(this.state[key]=e);let t=this.state[key];return t=(()=>this.state[key]||e)(),[t,e=>{t=e,this.state[key]=e,this.updateInstance(this.__internalInstance)}]};export class Html extends Component{constructor(e){super(e),this.key=e?.key||"DOCUMENT_ROOT",this.props=e,this.checkMount()}render(){return $SERVER?(this.props.lang&&document.documentElement.setAttribute("lang",this.props.lang),vjsxx.createElement("html",{children:this.props.children})):vjsxx.createElement("div",{children:this.props.children,key:this.key})}onMount(){this.props?.parent&&this.props?.parent&&this.props.parent.onMount()}}export class Head extends Component{constructor(e){super(e),this.head=document.createElement("head")}render(){if($SERVER||this.props.updateOnReload){Array.isArray(this.props.children)&&this.props.children.forEach((e=>{this.head.appendChild(vjsxx.render(e,this.head,{return:!0}))})),Object.keys(this.props).includes("children")&&!Array.isArray(this.props.children)&&this.head.appendChild(vjsxx.render(this.props.children,this.head,{return:!0}));let e=document.head;this.head.querySelectorAll("*").forEach((t=>{switch(t.tagName){case"TITLE":e.querySelector("title")&&e.querySelector("title").remove(),e.appendChild(t);break;case"META":if(this.props.updateOnReload)return;return void(e.querySelector(`meta[name="${t.name}"]`)&&e.querySelector(`meta[name="${t.name}"]`).remove());case"LINK":if($SERVER)return void(e.querySelector(`link[href="${t.href}"]`)||e.appendChild(t));case"SCRIPT":if(!t.hasAttribute("eager"))return void(document.querySelector(`script[src="${t.src}"]`)||e.appendChild(t));if(document.querySelector(`script[srcid="${t.src}"]`))return;fetch(t.src).then((e=>e.text())).then((r=>{let s=document.createElement("script");s.innerHTML=r,s.setAttribute("srcid",t.src),s.setAttribute("type",t.type),s.setAttribute("async",t.async||!1),s.setAttribute("defer",t.defer||!1),e.querySelector(`script[srcid="${t.src}"]`)||e.prepend(s)})).catch((e=>{console.warn("Error fetching script",e)}));break;default:console.warn("Unknown tag",t.tagName)}}))}return""}}export class Link extends Component{constructor(e){super(e),this.key=e?.key||Math.random(),this.props=e,this.checkMount()}render(){return vjsxx.createElement("a",{class:this.props.class||this.props.className,style:this.props.style,onClick:e=>{switch(e.preventDefault(),!0){case"outside"===this.props.action:e.preventDefault(),window.open(this.props.href,"_blank");break;case"function"==typeof this.props.action:this.props.action(e);break;default:e.preventDefault(),window.history.pushState({},"",this.props.href),window.dispatchEvent(new Event("popstate"))}},children:this.props.children},this.props?.key,null)}}let vjsxx=new vjsx,Vader={createElement:vjsxx.createElement,useState:useState,instanizeClass:vjsxx.instanizeClass,render:vjsxx.render,useRef:useRef,isClass:vjsxx.isClass,Head:Head,Html:Html,Mounted:Mounted,Component:Component,Link:Link};export default Vader;
+let e=[],t={},r={};export const Mounted=(t,r,s=!1)=>{let n=setInterval((()=>{switch(!0){case s&&e.includes(r.key):return clearInterval(n);case s&&!e.includes(r.key):e.push(r.key),t();break;case!document.querySelector(`[key="${r.key}"]`):return;default:t(),clearInterval(n)}}),100)};export class Component{constructor(e){this.state=r[this.constructor.name]||{},this.__internalInstance=null,this.key=e?.key||Math.random(),this.checkMount(),this.mounted=!1,this.props=e,this.useKey=e=>{this.props.key=e,this.key=e}}setState(e){this.state=Object.assign({},this.state,e),this.updateInstance(this.__internalInstance)}useState(e,t){this.state[e]||(this.state[e]=t);let r=this.state[e];const state=()=>this.state[e];return[state,t=>{this.state[e]=t,this.updateInstance(this.__internalInstance),r=state()}]}useRef(e,t){return this.state[e]||(this.state[e]=t),{current:this.state[e]}}onMount(){}domDifference(e,t){let r=[];for(let s=0;s<e.length;s++){let n=e[s],a=t[s];if(n&&a&&n.childNodes.length>0&&a.childNodes.length>0){let e=this.domDifference(Array.from(n.childNodes),Array.from(a.childNodes));return r=r.concat(e),r}n.nodeValue!==a.nodeValue&&r.push({type:"replace",old:n,new:a})}return r}checkMount(){if(this.mounted)return;setInterval((()=>{document.querySelector(`[key="${this.key}"]`)&&!this.mounted&&(this.mounted=!0,this.onMount())}))}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),r=Array.from(e.new.attributes);t.forEach((t=>{e.old.removeAttribute(t.name)})),r.forEach((t=>{e.old.setAttribute(t.name,t.value)}));break;case"add":e.old.appendChild(e.new.cloneNode(!0))}}))}updateInstance(e){let t=document.querySelector(`[key="${this.key}"]`)||document.querySelector("#app").firstChild,r=s.render(e,t,{return:!0}),n=this.domDifference(Array.from(t.childNodes),Array.from(r.childNodes));this.updateChangedElements(n)}parseStyle(e){let t="";return Object.keys(e).forEach((r=>{let s=e[r];r=r.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g,"$1-$2").toLowerCase(),t+=`${r}:${s};`})),t}}export const useState=e=>{this.state[key]||(this.state[key]=e);let t=this.state[key];const getUpdatedState=()=>this.state[key]||e;return t=getUpdatedState(),[getUpdatedState,e=>{t=e,this.state[key]=e,this.updateInstance(this.__internalInstance)}]};export const useReducer=(e,t)=>{const[r,s]=useState(t);return[r,t=>{const n=e(r,t);s(n)}]};export const useRef=e=>{this.state[key]||(this.state[key]=e);let t=this.state[key];return t=(()=>this.state[key]||e)(),[t,e=>{t=e,this.state[key]=e,this.updateInstance(this.__internalInstance)}]};export class Html extends Component{constructor(e){super(e),this.key=e?.key||"DOCUMENT_ROOT",this.props=e,this.checkMount()}render(){return $SERVER?(this.props.lang&&document.documentElement.setAttribute("lang",this.props.lang),s.createElement("div",{children:this.props.children,key:this.key})):s.createElement("div",{children:this.props.children,key:this.key})}onMount(){this.props?.parent&&this.props?.parent&&this.props.parent.onMount()}}export class Head extends Component{constructor(e){super(e),this.head=document.createElement("div"),this.useKey("head"),this.hasRefreshed=!1}render(){if($SERVER||this.props.refresh){Array.isArray(this.props.children)&&this.props.children.forEach((e=>{let r=s.render(e,this.head,{return:!0}),n=this.head.querySelectorAll("*");for(let e=0;e<n.length;e++)n[e].isEqualNode(r)&&console.log("Equal");console.log(this.key,"key"),this.head.appendChild(r),t[this.key]=!0})),Object.keys(this.props).includes("children")&&!Array.isArray(this.props.children)&&this.head.appendChild(s.render(this.props.children,this.head,{return:!0}));let e=document.head;this.head.querySelectorAll("*").forEach((t=>{switch(t.tagName){case"TITLE":e.querySelector("title")&&e.querySelector("title").remove(),e.appendChild(t);break;case"META":return void(e.querySelector(`meta[name="${t.name}"]`)||e.appendChild(t));case"LINK":if($SERVER)return console.log("Server"),void(e.querySelector(`link[href="${t.href}"]`)||e.appendChild(t));case"SCRIPT":if(!t.hasAttribute("eager"))return void(document.querySelector(`script[src="${t.src}"]`)||e.appendChild(t));if(document.querySelector(`script[srcid="${t.src}"]`))return;fetch(t.src).then((e=>e.text())).then((r=>{let s=document.createElement("script");s.innerHTML=r,s.setAttribute("srcid",t.src),s.setAttribute("type",t.type),s.setAttribute("async",t.async||!1),s.setAttribute("defer",t.defer||!1),e.querySelector(`script[srcid="${t.src}"]`)||e.prepend(s)})).catch((e=>{console.warn("Error fetching script",e)}));break;default:console.warn("Unknown tag",t.tagName)}}))}return""}}export class Link extends Component{constructor(e){super(e),this.key=e?.key||Math.random(),this.props=e,this.checkMount()}render(){let e={...this.props,href:this.props?.href,onClick:e=>{switch(e.preventDefault(),!0){case"outside"===this.props.action:console.log("Outside"),e.preventDefault(),window.open(this.props.href,"_blank");break;case"function"==typeof this.props.action:this.props.action(e);break;default:e.preventDefault(),window.history.pushState({},"",this.props.href),window.dispatchEvent(new Event("popstate"))}},key:this.key};return s.createElement("a",e,this.props?.key,null)}}let s=new class vjsx{constructor(){this._vjsx=!0}isClass(e){return/^\s*class\s+/.test(e.toString())}instanizeClass(e,t={}){if("string"==typeof e||"object"==typeof e)return e;switch(this.isClass(e)){case!0:let s=new e(t);return r[e.name]=s.state,s.state=r[e.name],s.$$typeof="vjsx",s.type=e.name,s.key=t?.key||s.name,s.props=t,s.__internalInstance=()=>s.render(s.props),s.render();case!1:let n=new Component;n.key=e.name+Math.random(),e.$$typeof="vjsx",e.useState=n.useState.bind(n),e.setState=n.setState.bind(n),r[e.name]=n.state,n.state=r[e.name],e.state=n.state;let a={},o={};return t?.router&&(a=t.router.req,o=t.router.res),n.__internalInstance=()=>e.bind(n)(t,a,o),e.apply?e.apply(n,[t,a,o]):e}}createElement(e,t,r,...s){let n="function"==typeof e,a=s.find((e=>"vjsx"===e?.$$typeof));if(n)return t.key=r||t?.key||Math.random(),t.parent=a,this.instanizeClass(e,t);let o={type:e,RootParent:a,props:{...t,key:t?.key||Math.random(),children:Array.isArray(t.children)?t.children:[t.children]}};return"TEXT_ELEMENT"===("string"==typeof o?"TEXT_ELEMENT":o.type)?function createTextElement(e){return{type:"TEXT_ELEMENT",props:{nodeValue:e,children:[]}}}(o):o}render(e,t,r){let s=this.instanizeClass(e,r?.passProps);if(r&&r?.passProps&&r?.passProps?.router){let e=r.passProps.router.req;r.passProps.router.res;e.pause}if(!s.type)return;let n="TEXT_ELEMENT"===s.type?document.createTextNode(""):document.createElement(s.type),isListener=e=>e.startsWith("on");if(s.props&&(s.props.key&&(s.key=s.props.key),Object.keys(s.props).filter(isListener).forEach((e=>{let t=e.toLowerCase().substring(2);n.addEventListener(t,s.props[e].bind(s))})),Object.keys(s.props).filter((e=>!isListener(e))).forEach((e=>{switch(!0){case"className"===e||"class"===e||"classname"===e:n.setAttribute("class",s.props[e]),delete s.props[e];break;case"ref"===e:if(Array.isArray(s.props[e].current))return void s.props[e].current.push(n);s.props[e].current=n,n.removeAttribute("ref");break;case"htmlFor"===e:n.setAttribute("for",s.props[e]);break;case"style"===e:n.setAttribute("style",Component.prototype.parseStyle(s.props[e]));break;default:"children"!==e&&n.setAttribute(e,s.props[e])}"TEXT_ELEMENT"!==s.type||(n.nodeValue=s.props[e])}))),s.props&&s.props.children&&Array.isArray(s.props.children)&&s.props?.children&&s.props.children.forEach((e=>{if("number"!=typeof e&&"string"!=typeof e||(e=e.toString()),Array.isArray(e))return void e.forEach((e=>{null!==e&&this.render(e,n,!0)}));if(!e)return;let t="function"==typeof e?this.instanizeClass(e):e;"TEXT_ELEMENT"!==(t?.type?t.type:"TEXT_ELEMENT")?this.render(t,n):n.appendChild(document.createTextNode(t))})),r?.return)return n;s.key&&n.setAttribute("key",s.key),!r?.return&&document.body.contains(t)&&(s?.RootParent?.onMount(),t.innerHTML=""),t.appendChild(n)}},n={createElement:s.createElement,useState:useState,instanizeClass:s.instanizeClass,render:s.render,useRef:useRef,isClass:s.isClass,Head:Head,Html:Html,Mounted:Mounted,Component:Component,Link:Link};export default n;

package/vader.js

@@ -2,9 +2,11 @@
 import { exec } from "child_process";
 import fs from "fs";
 globalThis.currentCommand = null;
-let vaderisInstalled = process.cwd() + "/node_modules/vaderjs/vader.js";
+globalThis.isRunning = false;
+let vaderisInstalled = process.cwd() + "/node_modules/vaderjs/binaries/main.js";
 if (!fs.existsSync(process.cwd() + "/_dev")) {
   fs.mkdirSync(process.cwd() + "/_dev");
+  !fs.existsSync(process.cwd() + "/_dev/readme.md") && fs.writeFileSync(process.cwd() + "/_dev/readme.md", `This folder is used by vader.js to store important files, deletables include: Bun, Chrome - These should only be uninstalled if you need to reinstall them.`);
 }
 
 if (!fs.existsSync(process.cwd() + "/_dev/vader.js")) {
@@ -13,12 +15,12 @@ if (!fs.existsSync(process.cwd() + "/_dev/vader.js")) {
 }
 
 function checkIFBundleIsInstalled() {
-   if(fs.existsSync(process.cwd() + '/_dev/bun')){
-     return new Promise((resolve, reject) => {
-       resolve(true);
-     });
-   }
-   return new Promise((resolve, reject) => {
+  if (fs.existsSync(process.cwd() + "/_dev/bun")) {
+    return new Promise((resolve, reject) => {
+      resolve(true);
+    });
+  }
+  return new Promise((resolve, reject) => {
     exec("bun -v", (err, stdout, stderr) => {
       if (err) {
         reject(err);
@@ -35,15 +37,10 @@ function checkIFBundleIsInstalled() {
 
 function run() {
   if (!fs.existsSync(process.cwd() + "/package.json")) {
-    fs.writeFileSync(
-      process.cwd() + "/package.json",
-      JSON.stringify({ name: "my_app", version: "1.0.0" }, null, 2)
-    );
+    fs.writeFileSync(process.cwd() + "/package.json", JSON.stringify({ name: "my_app", version: "1.0.0" }, null, 2));
     return;
   }
-  let packageJson = JSON.parse(
-    fs.readFileSync(process.cwd() + "/package.json").toString()
-  );
+  let packageJson = JSON.parse(fs.readFileSync(process.cwd() + "/package.json").toString());
   if (!packageJson.scripts) {
     packageJson.scripts = {};
   }
@@ -53,30 +50,26 @@ function run() {
   if (!packageJson.dependencies) {
     packageJson.dependencies = {};
   }
-  fs.writeFileSync(
-    process.cwd() + "/package.json",
-    JSON.stringify(packageJson, null, 2)
-  );
-   
+  fs.writeFileSync(process.cwd() + "/package.json", JSON.stringify(packageJson, null, 2));
 
   if (currentCommand) {
-    let child = exec(currentCommand)
+    let child = exec(currentCommand);
     child.stdout.pipe(process.stdout);
     child.stderr.pipe(process.stderr);
-    child.on('exit', (code) => {
+    child.on("exit", (code) => {
       process.exit(code);
     });
-    child.on('message', (message) => {
-        console.log(message.toString());
+    child.on("message", (message) => {
+      console.log(message.toString());
     });
-    child.on('error', (err) => {
+    child.on("error", (err) => {
       console.error(err);
     });
 
-    return
+    return;
   }
-     
-console.log(` 
+
+  console.log(` 
   Vader.js is a reactive framework for building interactive applications for the web built ontop of bun.js!
             
   Usage: npx vaderjs <command> 
@@ -92,74 +85,58 @@ console.log(`
    Learn more about vader:      https://vader-js.pages.dev/
                 
    `);
-  
 }
 
 function checkIFChromeIumIsInstalled() {
-  let platform = process.platform; 
-  let findChrome = { 
-    windows:`powershell -c "${ process.cwd() + '\\test.ps1'}"`,
+  let platform = process.platform;
+  let findChrome = {
+    windows: `powershell -c "${process.cwd() + "\\node_modules\\vaderjs\\binaries\\win32\\check.ps1"}"`,
     others: "/usr/bin/chromium-browser --version",
   };
-  let installCommands = { 
+  let installCommands = {
     windows: `winget install Google.Chrome`,
     others: "sudo apt-get install chromium-browser -y",
   };
   findChrome.windows = findChrome.windows.replace(/\n/g, " ");
-  let commandToRun =
-    platform === "win32" ? findChrome.windows : findChrome.others;
-   
+  let commandToRun = platform === "win32" ? findChrome.windows : findChrome.others;
+
   return new Promise((resolve, reject) => {
-     if(fs.existsSync(process.cwd() + '/_dev/chrome')){
-       resolve(true);
-     }else{ 
-       exec(commandToRun, (err, stdout, stderr) => { 
+    if (fs.existsSync(process.cwd() + "/_dev/chrome")) {
+      resolve(true);
+    } else {
+      exec(commandToRun, (err, stdout, stderr) => {
         let hasError = false;
         if (err) {
-          console.log(err); 
-            hasError = true;
-          console.log(
-            `Attempting to install DEPENDENCY: ${platform === "win32" ? "Google Chrome" : "Chromium"}`
-          );
+          console.log(err);
+          hasError = true;
+          console.log(`Attempting to install DEPENDENCY: ${platform === "win32" ? "Google Chrome" : "Chromium"}`);
         }
         if (stdout && !hasError) {
-          resolve(
-            `${platform === "win32" ? "Google Chrome" : "Chromium"} is installed: ${stdout}`
-          ); 
-          fs.writeFileSync(process.cwd() + '/_dev/chrome', `Installed: ${stdout}`);
-          run();
+          resolve(`${platform === "win32" ? "Google Chrome" : "Chromium"} is installed: ${stdout}`);
+          fs.writeFileSync(process.cwd() + "/_dev/chrome", `Installed: ${stdout}`);
         }
         if (stderr) {
           console.log(stderr);
-          console.log(
-            `Installing DEPENDENCY: ${platform === "win32" ? "Google Chrome" : "Chromium"}`
-          );
-          let installCommand =
-            platform === "win32"
-              ? installCommands.windows
-              : installCommands.others;
+          console.log(`Installing DEPENDENCY: ${platform === "win32" ? "Google Chrome" : "Chromium"}`);
+          let installCommand = platform === "win32" ? installCommands.windows : installCommands.others;
           return new Promise((resolve, reject) => {
-            exec(installCommand, (err, stdout, stderr) => { 
+            exec(installCommand, (err, stdout, stderr) => {
               if (err) {
                 reject(err);
               }
               if (stdout) {
-                resolve(
-                  `${platform === "win32" ? "Google Chrome" : "Chromium"} installed successfully: ${stdout}`
-                );
-                fs.writeFileSync(process.cwd() + '/_dev/chrome', `Installed: ${stdout}`);
+                resolve(`${platform === "win32" ? "Google Chrome" : "Chromium"} installed successfully: ${stdout}`);
+                fs.writeFileSync(process.cwd() + "/_dev/chrome", `Installed: ${stdout}`);
                 run();
               }
               if (stderr) {
-                reject(
-                  `${platform === "win32" ? "Google Chrome" : "Chromium"} failed to install: ${stderr}`
-                );
+                reject(`${platform === "win32" ? "Google Chrome" : "Chromium"} failed to install: ${stderr}`);
               }
             });
           });
         }
       });
-     }
+    }
   });
 }
 let Commands = {
@@ -167,24 +144,15 @@ let Commands = {
   build: `bun run build`,
   start: `bun run start`,
 };
-let port = process.argv.includes("-p") || process.argv.includes("--port") 
-    ? process.argv[process.argv.indexOf("-p") + 1] || process.argv[process.argv.indexOf("--port") + 1] || process.env.PORT || 3000
-    : process.env.PORT || 3000;
+let port = process.argv.includes("-p") || process.argv.includes("--port") ? process.argv[process.argv.indexOf("-p") + 1] || process.argv[process.argv.indexOf("--port") + 1] || process.env.PORT || 3000 : process.env.PORT || 3000;
 switch (true) {
-  case process.argv.includes("dev") &&
-    !process.argv.includes("build") &&
-    !process.argv.includes("start"):
-    
-    currentCommand = Commands.dev +  (port ? ` -p ${port}` : "");
+  case process.argv.includes("dev") && !process.argv.includes("build") && !process.argv.includes("start"):
+    currentCommand = Commands.dev + (port ? ` -p ${port}` : "");
     break;
-  case process.argv.includes("build") &&
-    !process.argv.includes("dev") &&
-    !process.argv.includes("start"):
+  case process.argv.includes("build") && !process.argv.includes("dev") && !process.argv.includes("start"):
     currentCommand = Commands.build + (port ? ` -p ${port}` : "");
     break;
-  case process.argv.includes("start") &&
-    !process.argv.includes("dev") &&
-    !process.argv.includes("build"):
+  case process.argv.includes("start") && !process.argv.includes("dev") && !process.argv.includes("build"):
     currentCommand = Commands.start + (port ? ` -p ${port}` : "");
     break;
   default:
@@ -193,15 +161,15 @@ switch (true) {
 }
 checkIFChromeIumIsInstalled()
   .then((stdout) => {
-    
     if (stdout) {
       checkIFBundleIsInstalled()
-        .then((stdout) => { 
-          if (stdout) {
-            if(!fs.existsSync(process.cwd() + '/_dev/bun')){
-                fs.writeFileSync(process.cwd() + "/_dev/bun", `Installed: ${stdout}`);
+        .then((stdout) => {
+          if (stdout && !isRunning) {
+            if (!fs.existsSync(process.cwd() + "/_dev/bun")) {
+              fs.writeFileSync(process.cwd() + "/_dev/bun", `Installed: ${stdout}`);
             }
             run();
+            globalThis.isRunning = true;
           }
         })
         .catch(async (err) => {
@@ -210,17 +178,14 @@ checkIFChromeIumIsInstalled()
             windows: 'powershell -c "irm bun.sh/install.ps1|iex',
             others: "curl -fsSL https://bun.sh/install.sh | bash",
           };
-          let scriptotRun =
-            process.platform === "win32"
-              ? installScipt.windows
-              : installScipt.others;
+          let scriptotRun = process.platform === "win32" ? installScipt.windows : installScipt.others;
           exec(scriptotRun, async (err, stdout, stderr) => {
             if (err) {
               console.log("Error installing bun.js");
               process.exit(1);
             }
             if (stdout) {
-              if (!platform === "win32") {
+              if (!process.platform === "win32") {
                 await new Promise((resolve, reject) => {
                   console.log(`Adding bun.js to path...`);
                   let shell = null;