vaderjs 1.3.3-12819a8b18b-hotfix → 1.3.3-1b2198a8b18b

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-12819a8b18b-hotfix",
+  "version": "1.3.3-1b2198a8b18b",
   "bin": {
     "vader": "./vader.js"
   },

package/runtime/router.js

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

package/vader.js

@@ -907,7 +907,9 @@ async function Build() {
           page.on('crash', () => {
             console.error(`Render process crashed for ${route.url}`)
           });
-         
+          page.on('requestfailed', request => {
+            console.error('REQUEST FAILED:', request.url(), request.failure().errorText);
+          });
           await page.goto(`http://localhost:${port}${route.url}`, { waitUntil: 'networkidle2' });
 
           page.evaluate(() => {
@@ -1163,12 +1165,8 @@ async function Build() {
   `;
     globalThis.routeDocuments.push({ url: route.url, document: document })
   })
- 
-  if(globalThis.devMode && !globalThis.oneAndDone){
-    ssg(globalThis.routes)
-    globalThis.oneAndDone = true
-    console.log('Prerendering...')
-  }
+
+  ssg(globalThis.routes)
 
 
   const scannedSourceFiles = await glob("**/**.{jsx,js,json}", {
@@ -1260,7 +1258,7 @@ async function Build() {
 
   return true
 }
-const s = (port) => {
+const s = () => {
 
   const server = http.createServer((req, res) => {
 
@@ -1345,9 +1343,10 @@ const s = (port) => {
         return 'application/octet-stream';
     }
   }
- 
-  server.listen(port, () => {
-    console.log(`Server is running on port ${port}`);
+
+  const PORT = process.env.PORT || 3000;
+  server.listen(PORT, () => {
+    console.log(`Server is running on port ${PORT}`);
     globalThis.ws = ws
   });
 
@@ -1360,15 +1359,11 @@ 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(`
 Vader.js v${fs.readFileSync(process.cwd() + '/node_modules/vaderjs/package.json', 'utf8').split('"version": "')[1].split('"')[0]}
 - Watching for changes in ./pages
 - Watching for changes in ./src
 - Watching for changes in ./public
-- Serving on port ${p}
 `)
     !globalThis.isBuilding ? Build() : null
 
@@ -1392,8 +1387,11 @@ Vader.js v${fs.readFileSync(process.cwd() + '/node_modules/vaderjs/package.json'
             Build()
           }
         }).on('error', (err) => console.log(err))
-    })  
-    s(p)
+    })
+    let p = process.argv[process.argv.indexOf('dev') + 1] || 3000
+
+    process.env.PORT = p
+    s()
 
     globalThis.listen = true;
 
@@ -1413,15 +1411,15 @@ Building to ./dist
 
     break;
   case process.argv.includes('start') && !process.argv.includes('dev') && !process.argv.includes('build'):
-    let port = process.env.PORT || config.port || process.argv.includes('-p') ? process.argv[process.argv.indexOf('-p') + 1] : 3000
-    console.log(port)
+    let port = process.argv[process.argv.indexOf('--serve') + 1] || 3000
+    process.env.PORT = port
     globalThis.devMode = false
     console.log(`
 Vader.js v1.3.3 
 Serving ./dist on port ${port}
 url: http://localhost:${port}
     `)
-    s(port)
+    s()
     break;
   default:
     // add color
@@ -1432,11 +1430,11 @@ Usage: vader <command>
     
 Commands:
 
-   vaderjs dev  -p <number>    Start the development server
+   vaderjs dev     Start the development server
     
    vaderjs build   Build the project to ./dist
     
-   vaderjs start  -p <number>  Production Mode (default 3000 or process.env.PORT)
+   vaderjs start  <port>   Production Mode (default 3000 or process.env.PORT)
       
 Learn more about vader:           https://vader-js.pages.dev/