vaderjs 1.3.3-alpha-61 → 1.3.3-alpha-62

package/package.json

@@ -2,7 +2,7 @@
   "name": "vaderjs",
   "description": "A Reactive library aimed to helping you build reactive applications inspired by react.js",
   "module": "vader.js",
-  "version": "1.3.3-alpha-61",
+  "version": "1.3.3-alpha-62",
   "bin": {
     "vader": "./vader.js"
   },

package/runtime/router.js

@@ -1 +1 @@
-import{Component}from"./vader.js";let middlewares=[];class VaderRouter{constructor(e,t){this.routes=[],this.middlewares=[],this.errorMiddlewares=[],this.listeners=[],this.basePath=e}get(e,t){this.routes.push({path:e,handler:t,method:"get"})}use(e){console.log(e),this.middlewares.push(e)}listen(e,t){e||(e=Math.random().toString(36).substring(7)),this.listeners.push(e),1===this.listeners.length?this.handleRoute(window.location.hash):this.listeners.pop(),t&&t(),window.onhashchange=()=>{this.handleRoute(window.location.hash)}}extractParams(e,t){const s=e.split("/"),n=t.split("/"),r={};return s.forEach(((e,t)=>{if(e.startsWith(":")){const s=e.slice(1);r[s]=n[t]}else if(e.startsWith("*")){n.slice(t).forEach(((e,t)=>{r[t]=e}))}})),r}extractQueryParams(e){const t=e.split("?")[1];if(!t)return{};const s={};return t.split("&").forEach((e=>{const[t,n]=e.split("=");s[t]=n})),s}handleRoute(e){let t=200,s=e=e.slice(1),n=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 s=t.path.split("/"),n=e.split("/");if(s.length!==n.length&&!t.path.endsWith("*"))return!1;for(let e=0;e<s.length;e++){const t=s[e],r=n[e];if(!t.startsWith(":")&&!t.startsWith("*")&&t!==r)return!1}return!0}const n=this.extractParams(t.path,s);return Object.keys(n).length>0}));n||(n=this.routes.find((e=>{if(e.path.includes("/404"))return this.error=!0,!0;!this.error&&e.path.includes("/404")&&(window.location.hash=this.basePath)})),t=n?200:404);const r=this.extractQueryParams(s),o=n&&n.path?this.extractParams(n.path,s):{},a={headers:{},params:o,query:r,path:e,url:window.location.href+e,method:n?n.method:"get",pause:e=>{a.pause=e},timestamp:Date.now()};window.$CURRENT_URL=a.path,window.$FULL_URL=window.location.href.replace("#","");const i={status:t,log:e=>{void 0===e?console.log(`${a.path} ${a.method} ${i.status} ${a.timestamp}`):console.table({"Request Path":a.path,"Request Method":n.method,"Response Status":i.status,"Request Timestamp":a.timestamp})},refresh:()=>{this.handleRoute(window.location.hash)},redirect:e=>{!e.startsWith("/")&&(e=`/${e}`),window.location.hash=`#${e}`},render:async(e,t,s)=>{function n(e){return"function"==typeof e&&/^class\s/.test(Function.prototype.toString.call(e))}try{let a=new Component;if(n(e.default)){let t=new e.default;a.state=t.state,console.log(a.state),a=t}else{let n=e.default.toString(),i=n.split("this.key")[1]?n.split("this.key")[1].split("=")[1].split(";")[0].trim():n.split('key="')?n.split('key="')[1].split('"')[0]:null,l=(n.match(/return\s*`([\s\S]*)`/),n.split("return")[1].split("`")[0]);l=l.replace(/,\s*$/,""),a.key=i;let u={key:a.key,render:()=>e.default.apply?e.default.apply(a,[t,s]):new e.default,request:t,response:s,params:o,queryParams:r,reset:a.reset.bind(a),onMount:a.onMount.bind(a),useState:null,router:{use:a.router.use.bind(a)},bindMount:a.bindMount.bind(a),memoize:a.memoize.bind(a),createComponent:a.createComponent.bind(a),isChild:!1,useState:a.useState.bind(a),parseStyle:a.parseStyle.bind(a),bind:a.bind.bind(a),hydrate:a.hydrate.bind(a),js:l};a.render=u.render,a=u}if(!document.querySelector("#root"))throw new Error("Root element not found, please add an element with id root");a.reset(),a.components={},a.request=t,a.response=s,a.router.use&&!a.isChild?await new Promise((async r=>{if(n(e.default))switch(await a.router.use(t,s),t.pause){case!0:console.log("pausing",t.pause);let e=setInterval((()=>{t.pause?console.log("still pausing",t.pause):(console.log("resuming"),clearInterval(e),r())}),1e3);break;case!1:r()}else switch(new Function("req","res",a.js).apply(a,[t,s]),await a.router.use(t,s),t.pause){case!0:console.log("pausing",t.pause);let e=setInterval((()=>{t.pause?console.log("still pausing  request",t.url):(console.log("resuming"),clearInterval(e),r())}),1e3);break;case!1:r()}})):a.router.use&&a.isChild&&console.warn("Router.use() is not supported in child components");const i=await a.render();document.querySelector("#root").innerHTML=i,a.bindMount(),a.onMount()}catch(e){console.error(e)}},setQuery:e=>{let t="";Object.keys(e).forEach(((s,n)=>{t+=`${0===n?"?":"&"}${s}=${e[s]}`}));let s=window.location.hash.split("?")[0];t=t.replace("/","-").replaceAll("/","-"),window.location.hash=`${s}${t}`},send:e=>{document.querySelector("#root").innerHTML=e},json:e=>{const t=document.querySelector("#root");t.innerHTML="";const s=document.createElement("pre");s.textContent=JSON.stringify(e,null,2),t.appendChild(s)}};middlewares.forEach((e=>{e(a,i)})),n&&n.handler(a,i)}}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){console.log(e),this.middlewares.push(e)}listen(e,t){e||(e=Math.random().toString(36).substring(7)),this.listeners.push(e),1===this.listeners.length?this.handleRoute(window.location.hash):this.listeners.pop(),t&&t(),window.onhashchange=()=>{this.handleRoute(window.location.hash)}}extractParams(e,t){const s=e.split("/"),n=t.split("/"),o={};return s.forEach(((e,t)=>{if(e.startsWith(":")){const s=e.slice(1);o[s]=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 s={};return t.split("&").forEach((e=>{const[t,n]=e.split("=");s[t]=n})),s}handleRoute(e){let t=200,s=e=e.slice(1),n=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 s=t.path.split("/"),n=e.split("/");if(s.length!==n.length&&!t.path.endsWith("*"))return!1;for(let e=0;e<s.length;e++){const t=s[e],o=n[e];if(!t.startsWith(":")&&!t.startsWith("*")&&t!==o)return!1}return!0}const n=this.extractParams(t.path,s);return Object.keys(n).length>0}));n||(n=this.routes.find((e=>{if(e.path.includes("/404"))return this.error=!0,!0;!this.error&&e.path.includes("/404")&&(window.location.hash=this.basePath)})),t=n?200:404);const o=this.extractQueryParams(s),r=n&&n.path?this.extractParams(n.path,s):{},i={headers:{},params:r,query:o,path:e,url:window.location.href+e,method:n?n.method:"get",pause:e=>{i.pause=e},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.hash)},redirect:e=>{!e.startsWith("/")&&(e=`/${e}`),window.location.hash=`#${e}`},render:async(e,t,s)=>{function n(e){return"function"==typeof e&&/^class\s/.test(Function.prototype.toString.call(e))}try{let i=new Component;if(n(e.default)){let t=new e.default;i.state=t.state,console.log(i.state),i=t}else{let n=e.default.toString(),a=n.split("this.key")[1]?n.split("this.key")[1].split("=")[1].split(";")[0].trim():n.split('key="')?n.split('key="')[1].split('"')[0]:null,l=(n.match(/return\s*`([\s\S]*)`/),n.split("return")[1].split("`")[0]);l=l.replace(/,\s*$/,""),i.key=a;let u={key:i.key,render:()=>e.default.apply?e.default.apply(i,[t,s]):new e.default,request:t,response:s,params:r,queryParams:o,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),hydrate:i.hydrate.bind(i),js:l};i.render=u.render,i=u}if(!document.querySelector("#root"))throw new Error("Root element not found, please add an element with id root");i.reset(),i.components={},i.request=t,i.response=s,i.router.use&&!i.isChild?await new Promise((async o=>{if(n(e.default))if(await i.router.use(t,s),!0===t.pause){console.log("pausing",t.pause);let e=setInterval((()=>{t.pause?console.log("still pausing",t.pause):(console.log("resuming"),clearInterval(e),o())}),1e3)}else o();else if(new Function("req","res",i.js).apply(i,[t,s]),await i.router.use(t,s),!0===t.pause){console.log("pausing",t.pause);let e=setInterval((()=>{t.pause?console.log("still pausing  request",t.url):(console.log("resuming"),clearInterval(e),o())}),1e3)}else o()})):i.router.use&&i.isChild&&console.warn("Router.use() is not supported in child components"),console.log("rendering");const a=await i.render();document.querySelector("#root").innerHTML=a,i.bindMount(),i.onMount()}catch(e){console.error(e)}},setQuery:e=>{let t="";Object.keys(e).forEach(((s,n)=>{t+=`${0===n?"?":"&"}${s}=${e[s]}`}));let s=window.location.hash.split("?")[0];t=t.replace("/","-").replaceAll("/","-"),window.location.hash=`${s}${t}`},send:e=>{document.querySelector("#root").innerHTML=e},json:e=>{const t=document.querySelector("#root");t.innerHTML="";const s=document.createElement("pre");s.textContent=JSON.stringify(e,null,2),t.appendChild(s)}};middlewares.forEach((e=>{e(i,a)})),n&&n.handler(i,a)}}window.VaderRouter=VaderRouter;export default VaderRouter;