vaderjs 1.3.3-alpha-45 → 1.3.3-alpha-47

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-45",
+  "version": "1.3.3-alpha-47",
   "bin": {
     "vader": "./vader.js"
   },

package/runtime/router.js

@@ -1,333 +1 @@
-import { Component } from "./vader.js";
-
-let middlewares = [];
-
- 
-
-/**
- * @class VaderRouter
- * @description  - creates an instance of Vader Express Router
- *  
- * @param {String} path
- * @param {Function} handler
- * @param {object} req  request object
- * @param {object} res  response object
- * @returns {Object} Express
- *  
- */
-class VaderRouter{
-    /**
-     * @constructor
-     * @param {*} basePath 
-     *  
-     */
-    constructor(/**@type {string}**/basePath, /**@type {number}**/port) {
-      this.routes = [];
-      this.middlewares = [];
-      this.errorMiddlewares = [];
-      this.listeners = [];
-       
-      this.basePath = basePath;
-     
-    }
-  
-    /**
-     * @method get
-     * @param {String} path
-     * @param {Function} handler
-     * @param {{a:b}} req  request object
-     * @description This method is used to register a get route
-     * @returns {void}
-     * @memberof Express
-     */
-    get(path,  handler) {
-     
-      this.routes.push({
-        path,
-        handler,
-        method: 'get',
-      });
-    }
-    /**
-     * @method use
-     * @description This method allows you to use middlewares
-     * @param {Function} middleware 
-     */
-  
-    use(/* path, */ middleware) {
-      console.log(middleware)
-      this.middlewares.push(middleware);
-    }
-  
-    /**
-     * @method listen
-     * @param {String} port - unique id for the listener
-     * @param {Function} callback - callback function
-     * @description This method is used to start listening to the routes
-     * @returns {void}
-     * 
-     */
-  
-    listen(port, callback) {
-      if(!port){
-       port = Math.random().toString(36).substring(7);
-      }
-      this.listeners.push(port);
-      if (this.listeners.length === 1) {
-        this.handleRoute(window.location.hash);
-      }else{
-        this.listeners.pop();
-      }
-      if (callback) {
-        callback();
-      }
-      window.onhashchange = () => {
-        this.handleRoute(window.location.hash);
-      }
-    }
-    /**
-     * @method extractParams
-     * @description This method is used to extract parameters from the route path
-     * @param {*} routePath
-     * @param {*} hash 
-     * @returns  {Object} params
-     * @memberof Express
-     */
-  
-    extractParams(routePath, hash) {
-      const routeParts = routePath.split('/');
-      const hashParts = hash.split('/');
-      const params = {};
-      routeParts.forEach((part, index) => {
-        if (part.startsWith(':')) {
-          const paramName = part.slice(1);
-          params[paramName] = hashParts[index];
-        }else if(part.startsWith('*')){ 
-          let array = hashParts.slice(index)
-          array.forEach((i, index)=>{
-            params[index] = i
-          })
-        }
-      });
-      return params;
-    }
-    extractQueryParams(hash){
-      
-      const queryParams = hash.split('?')[1];
-      if(!queryParams){
-        return {};
-      }
-      const params = {};
-      queryParams.split('&').forEach((param)=>{
-        const [key, value] = param.split('=');
-        params[key] = value;
-      })
-      return params;
-    }
-  
-    /**
-     * @method handleRoute
-     * @param {String} hash
-     * @description This method is used to handle the route
-     */
-  
-    handleRoute(hash) {
-      hash = hash.slice(1);
-      let status = 200;
-      let paramsCatchall = {}
-      let hashBefore = hash;
-      let route = this.routes.find((route) => {
-        if (route.path === hash) {
-          return true;
-        }
-
-        if(hash === '' && route.path === '/'){
-          return true
-        }
-    
-        if(hash.includes('?')){
-           hash = hash.split('?')[0]
-        } 
-        if (route.path.includes('*') || route.path.includes(':')) {
-          const routeParts = route.path.split('/');
-          const hashParts = hash.split('/');
-    
-          if (routeParts.length !== hashParts.length && !route.path.endsWith('*')) { 
-            return false;
-          }
-    
-          for (let index = 0; index < routeParts.length; index++) {
-            const routePart = routeParts[index];
-            const hashPart = hashParts[index];
-    
-            if (routePart.startsWith(':') || routePart.startsWith('*')) {
-               
-              continue;
-            }
-    
-            if (routePart !== hashPart) {
-              
-              return false;
-            }
-          }
-    
-          return true;
-        }
-     
-        const params = this.extractParams(route.path, hashBefore);
-        return Object.keys(params).length > 0;
-      }); 
-    
-      
-      if (!route) { 
-        route = this.routes.find((errorRoute) => {
-          if (errorRoute.path.includes('/404')){ 
-            this.error = true;
-            return true;
-          } else if (!this.error && errorRoute.path.includes('/404')){
-            window.location.hash = this.basePath
-          }
-        });
-    
-        status = route ? 200 : 404;
-      }
-     
-      const queryParams = this.extractQueryParams(hashBefore);
-      const params =  route && route.path ? this.extractParams(route.path,  hashBefore) : {};
-      const req = {
-        headers: {},
-        params: params,
-        query: queryParams,
-        path: hash,
-        method: route ? route.method : 'get',
-      };
-    
-      // @ts-ignore
-      window.$CURRENT_URL = req.path
-     
-      // @ts-ignore
-      window.$FULL_URL = window.location.href.replace('#', '')
-     
-      const res = {
-        status: status,
-        /**
-         * @method log
-         * @param {String} type 
-         * @description This method is used to log the request and response
-         */
-        log: (type) => {
-          if(type === undefined){
-            console.log(`${req.path} ${req.method} ${res.status} ${req.timestamp}`);
-          }else{
-            console.table({
-              'Request Path': req.path,
-              'Request Method': route.method,
-              'Response Status': res.status,
-              'Request Timestamp': req.timestamp,
-            });
-          }
-        },
-        refresh: () => {
-           this.handleRoute(window.location.hash);
-        },
-        redirect: (path) => { 
-          !path.startsWith('/') ? path = `/${path}` : null;
-          window.location.hash = `#${path}`;
-        },
-        render: async (/**@type {Component} */ Component, req, res) => {
-          try {
-              if(!Component.default || !Component.default.constructor){
-                let message = !Component.default ? `Router expected a default exported component ie: export default class Component` : !Component.default.constructor ? 'Component is not a class' : null;
-                throw new Error(message);
-              }
-              
-      
-              // Create an instance of the component
-              Component = Component.default ? new Component.default() : Component.constructor ? new Component() : Component;
-      
-              // Set the 'mounted' flag to true
-              Component.mounted = true;
-      
-              // Check if the root element exists
-              if (!document.querySelector('#root')) {
-                  throw new Error('Root element not found, please add an element with id root');
-              }
-      
-              // Reset component state
-              Component.reset();
-              Component.components = {};
-              Component.request = req;
-              Component.response = res;
-      
-              // Check if the component has a router and is not a child component
-              if (Component.router.use && !Component.isChild) {
-                 
-                  // Allow pausing the route and run code before rendering
-                  await new Promise(async (resolve) => {
-                      await Component.router.use(req, res)
-                      if(req.pause){
-                      let timer = setInterval(() => {
-                        if(!req.pause){
-                          resolve();
-                          clearInterval(timer);
-                        }
-                      }, 1000);
-                     }else{
-                        resolve();
-                     }
-                  });
-              } else if (Component.router.use && Component.isChild) {
-                  console.warn('Router.use() is not supported in child components');
-              } 
-                  const renderedContent = await Component.render();
-                  document.querySelector('#root').innerHTML = renderedContent;
-                  Component.bindMount();
-                  Component.onMount();
-             
-          } catch (error) {
-              console.error(error);
-          }
-      },
-        setQuery: (query) => {
-          let queryString = '';
-          Object.keys(query).forEach((key, index) => {
-            queryString += `${index === 0 ? '?' : '&'}${key}=${query[key]}`;
-          }); 
-          let route = window.location.hash.split('?')[0];
-          queryString = queryString.replace('/', '-').replaceAll('/', '-')
-          window.location.hash = `${route}${queryString}`;
-        },
-        send: (data) => {
-          document.querySelector('#root').innerHTML = data;
-        },
-        json: (data) => {
-          const rootElement = document.querySelector('#root');
-        
-          // Clear existing content in #root
-          rootElement.innerHTML = '';
-        
-          // Create a <pre> element
-          const preElement = document.createElement('pre');
-        
-          // Set the text content of the <pre> element with formatted JSON
-          preElement.textContent = JSON.stringify(data, null, 2);
-        
-          // Append the <pre> element to the #root element
-          rootElement.appendChild(preElement);
-        }
-        
-      }; 
-      middlewares.forEach((middleware) => { 
-        middleware(req, res);
-      });
-    
-      route ? route.handler(req, res) : null;
-    }
-    
-    
-  }
- 
-  window.VaderRouter = VaderRouter;
-  
-  export default VaderRouter;
-   
+import{Component}from"./vader.js";let middlewares=[];class VaderRouter{constructor(t,e){this.routes=[],this.middlewares=[],this.errorMiddlewares=[],this.listeners=[],this.basePath=t}get(t,e){this.routes.push({path:t,handler:e,method:"get"})}use(t){console.log(t),this.middlewares.push(t)}listen(t,e){t||(t=Math.random().toString(36).substring(7)),this.listeners.push(t),1===this.listeners.length?this.handleRoute(window.location.hash):this.listeners.pop(),e&&e(),window.onhashchange=()=>{this.handleRoute(window.location.hash)}}extractParams(t,e){const s=t.split("/"),r=e.split("/"),o={};return s.forEach(((t,e)=>{if(t.startsWith(":")){const s=t.slice(1);o[s]=r[e]}else if(t.startsWith("*")){r.slice(e).forEach(((t,e)=>{o[e]=t}))}})),o}extractQueryParams(t){const e=t.split("?")[1];if(!e)return{};const s={};return e.split("&").forEach((t=>{const[e,r]=t.split("=");s[e]=r})),s}handleRoute(t){let e=200,s=t=t.slice(1),r=this.routes.find((e=>{if(e.path===t)return!0;if(""===t&&"/"===e.path)return!0;if(t.includes("?")&&(t=t.split("?")[0]),e.path.includes("*")||e.path.includes(":")){const s=e.path.split("/"),r=t.split("/");if(s.length!==r.length&&!e.path.endsWith("*"))return!1;for(let t=0;t<s.length;t++){const e=s[t],o=r[t];if(!e.startsWith(":")&&!e.startsWith("*")&&e!==o)return!1}return!0}const r=this.extractParams(e.path,s);return Object.keys(r).length>0}));r||(r=this.routes.find((t=>{if(t.path.includes("/404"))return this.error=!0,!0;!this.error&&t.path.includes("/404")&&(window.location.hash=this.basePath)})),e=r?200:404);const o=this.extractQueryParams(s),n=r&&r.path?this.extractParams(r.path,s):{},a={headers:{},params:n,query:o,path:t,method:r?r.method:"get"};window.$CURRENT_URL=a.path,window.$FULL_URL=window.location.href.replace("#","");const i={status:e,log:t=>{void 0===t?console.log(`${a.path} ${a.method} ${i.status} ${a.timestamp}`):console.table({"Request Path":a.path,"Request Method":r.method,"Response Status":i.status,"Request Timestamp":a.timestamp})},refresh:()=>{this.handleRoute(window.location.hash)},redirect:t=>{!t.startsWith("/")&&(t=`/${t}`),window.location.hash=`#${t}`},render:async(t,e,s)=>{try{let a=new Component;if("function"==typeof(r=t.default)&&/^class\s/.test(Function.prototype.toString.call(r))){let e=new t.default;a.state=e.state,console.log(a.state),a=e}else{let r=t.default.toString(),i=r.split("this.key")[1].split("=")[1].split('"')[1],l=(r.match(/return\s*`([\s\S]*)`/),r.split("return")[1].split("`")[0]);l=l.replace(/,\s*$/,"");let h=t.default.apply?t.default.apply(a,[e,s]):new t.default;a.key=i;let u={key:i,render:()=>h,request:e,response:s,params:n,queryParams:o,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};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=e,a.response=s,a.router.use&&!a.isChild?await new Promise((async t=>{if(await a.router.use(e,s),e.pause){let s=setInterval((()=>{e.pause||(t(),clearInterval(s))}),1e3)}else t()})):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(t){console.error(t)}var r},setQuery:t=>{let e="";Object.keys(t).forEach(((s,r)=>{e+=`${0===r?"?":"&"}${s}=${t[s]}`}));let s=window.location.hash.split("?")[0];e=e.replace("/","-").replaceAll("/","-"),window.location.hash=`${s}${e}`},send:t=>{document.querySelector("#root").innerHTML=t},json:t=>{const e=document.querySelector("#root");e.innerHTML="";const s=document.createElement("pre");s.textContent=JSON.stringify(t,null,2),e.appendChild(s)}};middlewares.forEach((t=>{t(a,i)})),r&&r.handler(a,i)}}window.VaderRouter=VaderRouter;export default VaderRouter;