vaderjs 1.3.3-alpha-110 → 1.3.3-alpha-111

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

package/runtime/router.js

@@ -1 +1,444 @@
-import{Component}from"./vader.js";let middlewares=[];class VaderRouter{constructor(e,t){this.routes=[],this.middlewares=[],this.errorMiddlewares=[],this.listeners=[],this.basePath=e,console.log(this.basePath)}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)),this.listeners.push(e),1===this.listeners.length?this.handleRoute(window.location.hash.length>0?window.location.hash:window.location.pathname):this.listeners.pop(),t&&t(),window.onpopstate=async e=>{let t=`/${window.location.pathname.split("/")[1]}`;routes.find((e=>e.url.includes(t)))||(t="/404");let n=(new DOMParser).parseFromString(await fetch(t,{cache:"reload"}).then((e=>e.text())),"text/html").documentElement;document.querySelector("#root").innerHTML=n.querySelector("#root").innerHTML,document.title=n.querySelector("title").innerHTML,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)}}extractParams(e,t){const n=e.split("/"),s=t.split("/"),o={};return n.forEach(((e,t)=>{if(e.startsWith(":")){const n=e.slice(1);o[n]=s[t]}else if(e.startsWith("*")){s.slice(t).forEach(((e,t)=>{o[t]=e}))}})),o}extractQueryParams(e){const t=e.split("?")[1];if(!t)return{};const n={};return t.split("&").forEach((e=>{const[t,s]=e.split("=");n[t]=s})),n}handleRoute(e){let t=200,n=e=e.includes("#")?e.slice(1):e,s=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 n=t.path.split("/"),s=e.split("/");if(n.length!==s.length&&!t.path.endsWith("*"))return!1;for(let e=0;e<n.length;e++){const t=n[e],o=s[e];if(!t.startsWith(":")&&!t.startsWith("*")&&t!==o)return!1}return!0}const s=this.extractParams(t.path,n);return Object.keys(s).length>0}));s||(console.log(window.routes),s=window.routes.find((e=>{if(e.url.includes("/404"))window.history.replaceState({},"","/404");else if(!this.error&&e.url.includes("/404"))return!0})),t=s?200:404);const o=this.extractQueryParams(n),r=s&&s.path?this.extractParams(s.path,n):{};Object.keys(r).forEach((e=>{r[e]=r[e].split("?")?r[e].split("?")[0]:r[e]}));const i={headers:{},params:r,query:o,path:e,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 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":s.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,n,s)=>{function isClass(e){return"function"==typeof e&&/^class\s/.test(Function.prototype.toString.call(e))}try{let s=new Component;if(isClass(e.default)){let t=new e.default;s.state=t.state,s=t}else{if(e.default.toString().includes("this.key"))throw new Error('Using this.key is not supported in functional components use the attribute key="a value" instead');s.key=e.default.toString().split('key="')[1]?e.default.toString().split('key="')[1].split('"')[0]:null;let i={key:s.key,render:()=>e.default.apply(s,[t,n]),request:t,response:n,params:r,queryParams:o,reset:s.reset.bind(s),onMount:s.onMount.bind(s),useState:null,router:{use:s.router.use.bind(s)},bindMount:s.bindMount.bind(s),memoize:s.memoize.bind(s),createComponent:s.createComponent.bind(s),isChild:!1,useState:s.useState.bind(s),parseStyle:s.parseStyle.bind(s),bind:s.bind.bind(s),useRef:s.useRef.bind(s),useReducer:s.useReducer.bind(s),onMount:s.onMount.bind(s),onUnmount:s.onUnmount.bind(s),hydrate:s.hydrate.bind(s)};s.render=i.render,s=i,console.log(t)}if(!document.querySelector("#root"))throw new Error("Root element not found, please add an element with id root");s.reset(),s.components={},s.request=t,s.response=n,s.router.use&&!s.isChild?await new Promise((async o=>{if(isClass(e.default))if(isClass(e.default))switch(await s.router.use(t,n),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(s,[t,n]),await s.router.use(t,n),t.pause){case!0:let e=setInterval((()=>{t.pause?console.log("still pausing  request",t.url):(clearInterval(e),o())}),1e3);break;case!1:o()}})):s.router.use&&s.isChild&&console.warn("Router.use() is not supported in child components");const i=await s.render();document.querySelector("#root").innerHTML!==i&&(console.log("rendering"),document.querySelector("#root").innerHTML=i),s.bindMount(),s.onMount()}catch(e){console.error(e)}},setQuery:e=>{let t="";Object.keys(e).forEach(((n,s)=>{t+=`${0===s?"?":"&"}${n}=${e[n]}`}));let n=window.location.hash.split("?")[0];t=t.replace("/","-").replaceAll("/","-"),window.location.hash=`${n}${t}`},send:e=>{document.querySelector("#root").innerHTML=e},json:e=>{const t=document.querySelector("#root");t.innerHTML="";const n=document.createElement("pre");n.textContent=JSON.stringify(e,null,2),t.appendChild(n)}};middlewares.forEach((e=>{e(i,a)})),s&&s.handler(i,a)}}window.VaderRouter=VaderRouter;export default VaderRouter;
+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;
+      console.log(this.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) { 
+      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.length > 0 ? window.location.hash : window.location.pathname);
+      }else{
+        this.listeners.pop();
+      }
+      if (callback) {
+        callback();
+      }
+      window.onpopstate = async (e) => { 
+        let route = window.location.pathname
+        console.log(route)
+        let baseRoute = `/${route.split('/')[1]}`
+        if(!routes.find((route)=>route.url.includes(baseRoute))){
+          baseRoute = '/404'
+
+        }
+        let html =  new DOMParser().parseFromString(await fetch(baseRoute, {
+          cache: 'reload'
+        }).then((res)=>res.text()), 'text/html').documentElement 
+        
+
+        document.querySelector('#root').innerHTML = html.querySelector('#root').innerHTML;
+        document.title = html.querySelector('title').innerHTML; 
+        document.querySelector('script[id="router"]').remove();
+        let newscript = document.createElement('script');
+        newscript.id = 'router';
+        newscript.innerHTML = html.querySelector('script[id="router"]').innerHTML;
+        newscript.setAttribute('type', 'module'); 
+        document.body.appendChild(newscript);  
+      }
+    }
+    /**
+     * @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.includes('#') ? hash.slice(1) : hash;
+      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) { 
+        console.log(window.routes)
+        route = window.routes.find((errorRoute) => {
+          if (errorRoute.url.includes('/404')){ 
+            window.history.replaceState({}, '', '/404');
+            
+          } else if (!this.error && errorRoute.url.includes('/404')){
+             return true
+          }
+        });
+    
+        status = route ? 200 : 404;
+      }
+     
+      const queryParams = this.extractQueryParams(hashBefore);
+      const params =  route && route.path ? this.extractParams(route.path,  hashBefore) : {};
+     
+      // remove queryparams fromparam
+      Object.keys(params).forEach((key)=>{
+        params[key] = params[key].split('?') ? params[key].split('?')[0] : params[key];
+      })
+      const req = {
+        headers: {},
+        params: params,
+        query: queryParams,
+        path: hash,
+        fileUrl: window.location.href.split(window.location.origin)[1],
+        url: window.location.href,
+        method: route ? route.method : 'get',
+        pause: false,
+        timestamp: Date.now(),
+      }; 
+     
+      // @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, metadata) => {
+          function isClass(funcOrClass) {
+            return typeof funcOrClass === 'function' &&
+              /^class\s/.test(Function.prototype.toString.call(funcOrClass));
+          } 
+          
+          try {
+              let c  = new Component();
+              if(!isClass(component.default)){
+                 let render = component.default.toString(); 
+                 if(render.includes('this.key')){
+                    throw new Error('Using this.key is not supported in functional components use the attribute key="a value" instead')
+                 } 
+                 
+                
+                 
+                c.key =  component.default.toString().split('key="')[1] ? component.default.toString().split('key="')[1].split('"')[0] : null;
+                
+                let comp =  {
+                   key: c.key,
+                   render:  () => { 
+                        return component.default.apply(c, [req, res])
+                    },
+                   request: req,
+                   response: res,
+                   params: params,
+                   queryParams: queryParams,
+                   reset: c.reset.bind(c), 
+                   onMount: c.onMount.bind(c),
+                   useState: null,
+                   router: {
+                     use: c.router.use.bind(c),
+                   },
+                   bindMount: c.bindMount.bind(c),
+                   memoize: c.memoize.bind(c),
+                   createComponent: c.createComponent.bind(c),
+                   isChild: false, 
+                   useState: c.useState.bind(c),
+                   parseStyle: c.parseStyle.bind(c),
+                   bind: c.bind.bind(c),
+                   useRef: c.useRef.bind(c),
+                   useReducer: c.useReducer.bind(c),
+                   onMount: c.onMount.bind(c),
+                   onUnmount: c.onUnmount.bind(c),
+                   hydrate: c.hydrate.bind(c), 
+                } 
+                c.render = comp.render;
+                c = comp; 
+                
+                  
+              
+                console.log(req)
+              }else{
+                let comp = new component.default(); 
+                c.state = comp.state; 
+                c = comp;
+              }
+            
+          
+          
+            
+              
+              
+           
+        
+      
+              // Check if the root element exists
+              if (!document.querySelector('#root')) {
+                  throw new Error('Root element not found, please add an element with id root');
+              }
+       
+              c.reset();
+              c.components = {};
+              c.request = req;
+              c.response = res; 
+              if (c.router.use && !c.isChild) {  
+                  await new Promise(async (resolve) => {   
+                    if(!isClass(component.default) ){ 
+                      await component.default.apply(c, [req, res]) 
+                      await c.router.use(req, res)
+                      switch(req.pause){
+                        case true: 
+                          let timer = setInterval(() => {
+                            if (!req.pause) { 
+                              clearInterval(timer);
+                              resolve();
+                            }else{
+                              console.log('still pausing  request', req.url)
+                            }
+                          }, 1000);
+                          break;
+                        case false: 
+                          resolve();
+                          break;
+                      }
+                    }else if(isClass(component.default)){
+                        
+                      await c.router.use(req, res) 
+                      switch(req.pause){
+                        case true:
+                          console.log('pausing', req.pause)
+                          let timer = setInterval(() => {
+                            if (!req.pause) { 
+                              clearInterval(timer);
+                              resolve();
+                            }else{
+                              console.log('still pausing', req.pause)
+                            }
+                          }, 1000);
+                          break;
+                        case false:
+                          resolve();
+                          break;
+                      }
+                    }else{
+                        resolve();
+                    }
+                  });
+                  
+                 
+              } else if (c.router.use && c.isChild) {
+                  console.warn('Router.use() is not supported in child components');
+              }  
+                  const renderedContent = await c.render();
+                  if( document.querySelector('#root').innerHTML !== renderedContent){
+                     console.log('rendering')
+                    document.querySelector('#root').innerHTML = renderedContent;
+                  } 
+                  c.bindMount();
+                  c.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;
+   

package/runtime/vader.js

@@ -645,12 +645,12 @@ window.Vader = {
     }
      
   }
-  
-  console.log(Link)
+   
   export default {
     Component,  
     useRef,
     useReducer,
     useState,
-    strictMount 
+    strictMount,
+    Link
   }