vaderjs 1.3.3-alpha-111 → 1.3.3-alpha-113

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

package/runtime/router.js

@@ -1,444 +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;
-      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;
-   
+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.pathname):this.listeners.pop(),t&&t(),window.onpopstate=async e=>{let t=window.location.pathname;console.log(t);let n=`/${t.split("/")[1]}`;routes.find((e=>e.url.includes(n)))||(n="/404");let s=(new DOMParser).parseFromString(await fetch(n,{cache:"reload"}).then((e=>e.text())),"text/html").documentElement;document.querySelector("#root").innerHTML=s.querySelector("#root").innerHTML,document.title=s.querySelector("title").innerHTML,document.querySelector('script[id="router"]').remove();let o=document.createElement("script");o.id="router",o.innerHTML=s.querySelector('script[id="router"]').innerHTML,o.setAttribute("type","module"),document.body.appendChild(o)}}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,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;

package/runtime/vader.js

@@ -1,656 +1 @@
-window.Vader = {
-    version: "1.3.3", 
-  };
-  window.componentRegistry = {};
-  let errors = {
-    "SyntaxError: Unexpected token '<'": "You forgot to enclose tags in a fragment <></>",
-  } 
-   
-  let mounts = [];
-  let hasRan = []
-  /**
-   * @method strictMount
-   * @description  This method allows you to await until the component is mounted before running a callback
-   * @param {*} key 
-   * @param {*} callback 
-   */
-  export const strictMount = (key, callback) => {
-    let timer = setInterval(() => {
-      if (document.querySelector(`[key="${key}"]`) && !hasRan.includes(key)) {
-        clearInterval(timer);
-        callback();
-        hasRan.push(key)
-      }
-    }, 120);
-  };
-   
-   
-   
-  /**
-   * Represents a component in the Vader framework.
-   */
-  export class Component {
-    /**
-     * Creates an instance of Component.
-     */
-    constructor() {
-      this.state = {};
-      this.key = null;
-      this.components = {};
-      this.mounted = false;  
-      this.checkIFMounted();
-      this.memoizes = []
-      this.functions = []   
-      this.children = []
-     
-       
-      /**
-       * Parent of the current component.
-       * @type {Component}
-       */
-      this.parentNode =  {}
-      
-        /**
-         * Request object.
-         */
-        this.request =  {
-          /**
-           * @type {string}
-           * @description The headers for the current route
-           */
-          headers:{},
-          /**
-           * @type {string}
-           * @description The method for the current route
-           */
-          method: "GET",
-          /**
-           * @type {string}
-           * @description params for the given route /:id/:name etc
-           */
-          params: {},
-          /**
-           * @type {string}
-           * @description path: current route path
-           */
-          path: "",
-          /**
-           * @type {string}
-           * @description query: query  object for the current route ?name=hello -> {name: 'hello'}
-           */
-          query: {},
-        },
-        /**
-         * @type {string}
-         * @description The response object for the current route
-         */
-        this.response = {
-          /**
-           * @method json
-           * @description  This method allows you to send json data to the client
-           * @param {*} data 
-           */
-          json: (data) => {},
-          /**
-           * @method send
-           * @description  This method allows you to send text data to the client
-           * @param {*} data 
-           */
-          send: (data) => {},
-          /**
-           * @method redirect
-           * @description  This method allows you to redirect the client to a new route
-           * @param {*} path 
-           */
-          redirect: (path) => {},
-          /**
-           * @method render
-           * @description  render a new component to the client
-           *  @param {*} Component
-           */
-          render: async (Component) => {},
-          /**
-           * @method log
-           * @description  This method is used to log the request and response
-           * @param {String} type
-           */
-          log: (type) => {},
-          /**
-           * @method setQuery
-           * @description  This method is used to set the query object for the current route
-           */
-          setQuery: (query) => {},
-          
-    }
-    /**
-     * @method router
-     * @description use router methods directly from the parent component
-     */
-  
-     this.router = {
-        /**
-         * @method use
-         * @description add a middleware to the current route
-         * @param {Function} middleware
-         * @returns {void}
-         */
-        use: (/**@type {Function} */ middleware) => {},
-     }
-  }
-  
-    createComponent(/**@type {Component}**/component, props, children) {
-       
-      function isClass(funcOrClass) {
-        return typeof funcOrClass === 'function' &&
-          /^class\s/.test(Function.prototype.toString.call(funcOrClass));
-      }
-      let comp = !isClass(component) ? null : new component(props);
-      if (!component) {
-        throw new Error("Component must be defined");
-      } 
-      let c =  new Component(props);
-      if(!isClass(component)){ 
-        let render = component.toString(); 
-         
-        
-       
-        
-       c.key =  component.toString().split('key="')[1] ? component.toString().split('key="')[1].split('"')[0] : null;
-       
-       let comp =  {
-          key: c.key,
-          render:  () => { 
-               return component.apply(c, [props])
-           },
-          request: this.request,
-          isChild: true,
-          response:  this.response,
-          params:  this.request.params,
-          queryParams: this.request.query,
-          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),
-          request: this.request,
-          response: this.response,
-          useReducer: c.useReducer.bind(c),
-          hydrate: c.hydrate.bind(c), 
-          onUnmount: c.onUnmount.bind(c), 
-          parentNoe: this,
-       } 
-       c.render = comp.render;
-       c = comp;  
-         
-     
-     } else{
-        comp['props'] = props;
-        comp.children = children; 
-        comp.props.children = children.join('')
-        comp.parentNode  = this;
-        comp.request = this.request;
-        comp.response = this.response;
-        comp.key = props.key || null;
-        c = comp;
-      }
-   
-      
-       
-       
-      if(!this.components[props.key]){
-        this.components[props.key] =  c
-      }  
-      !this.children.includes(c) ? this.children.push(c) : null
-      return this.components[props.key] 
-    }
-    reset(){ 
-      Object.keys(this.components).forEach((key) => {
-         this.components[key].onUnmount() 
-          delete this.components[key]
-      })
-      this.state = {} 
-      this.children = []
-    }
-    memoize(/**@type {Component}**/component){  
-    
-      switch(true){
-        case !this.memoizes.includes(component.key):
-          this.memoizes.push(component.key)
-          this.components[component.key] = component;
-          break;
-      }
-   
-      let comp = this.components[component.key];
-      comp.bindMount();
-      comp.parentNode = this;
-      comp.props = component.props;  
-      comp.request = this.request;
-      comp.response = this.response;
-      comp.onMount = component.onMount.bind(component);
-      comp.onUnmount = component.onUnmount.bind(component);
-      let h = comp.render() 
-      
-      if(h && h.split('>,').length > 1){
-        h = h.replaceAll('>,', '>')
-      }
-  
-      return `<span key="${component.key}" >${h}</span>`
-    }
-    parseStyle(styles){ 
-      let css = ''
-      Object.keys(styles).forEach((key) => { 
-        let value = styles[key]
-         key = key.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase()
-         css += `${key}:${value};`
-      })
-      return css
-    }
-    bindMount(){
-      mounts.push(this) 
-    }
-  
-    /**
-     * Hydrates the component by updating the HTML content if it has changed.
-     * @private
-     */
-  
-      /**
-     * Hydrates the component by updating the HTML content if it has changed.
-     * @private
-     */
-  
-   domDifference(oldDom, newDom) {
-    let diff = [];
-  
-    for (let i = 0; i < oldDom.length; i++) {
-      let oldEl = oldDom[i];
-      let newEl = newDom[i];
-  
-      if (oldEl && newEl && !oldEl.isEqualNode(newEl)) {
-        diff.push({
-          type: 'replace',
-          old: oldEl,
-          new: newEl.cloneNode(true),
-        });
-      }
-    }
-  
-    return diff;
-  }
-  
-   updateChangedElements(diff) {
-    diff.forEach((change) => {
-      switch (change.type) {
-        case 'replace':
-          change.old.parentNode.replaceChild(change.new, change.old);
-          break;
-        case 'remove':
-          change.old.remove();
-          break;
-        case 'add':
-          change.old.appendChild(change.new.cloneNode(true));
-          break;
-        default:
-          break;
-      }
-    });
-  }
-     hydrate(hook) {
-      
-        if (hook) { 
-          let newDom = new DOMParser().parseFromString(this.render(), 'text/html').body.querySelector(`[ref="${hook}"]`);
-          let oldDom = document.querySelector(`[ref="${hook}"]`);
-  
-        } else {
-           
-           
-            let targetElement = this.key ? document.querySelector(`[key="${this.key}"]`) : null; 
-           
-            let newDom = new DOMParser().parseFromString(this.render(), 'text/html').body
-            newDom = document.createElement('div').appendChild(newDom) 
-             
-            
-            !targetElement ? targetElement = document.querySelector(`[key="${newDom.attributes?.key?.value || null}"]`) : null
-            if(!targetElement){  
-              console.error('Hydration failed, component not found got ensure you have set key="a value" on the component or this.key inside of function or render method body')
-              return
-            } 
-             
-            newDom.querySelectorAll('*').forEach((el) => {
-              
-              if(el.hasAttribute('key') && el.innerHTML !== document.querySelector(`[key="${el.attributes.key.value}"]`).innerHTML){
-                  
-                  document.querySelector(`[key="${el.attributes.key.value}"]`).replaceWith(el)
-              }
-            });
-  
-            
-          
-        }
-       
-    }
-    
-   
-    
-    patch(oldElements, newElements) {
-      const diff = this.domDifference(oldElements, newElements);
-    
-      this.updateChangedElements(diff);
-    }
-    
-    
-    
-    
-  
-    /**
-     * Handles an object by parsing it as JSON and evaluating it.
-     * @param {string} obj - The object to handle.
-     * @returns {*} - The evaluated object.
-     * @prvate
-     */
-    handleObject(obj) {
-      try {
-        obj = JSON.parse(obj);
-      } catch (error) {
-        // Handle JSON parsing error if needed
-      }
-      return eval(obj);
-    }
-  
-    
-  
-    /**
-     * Binds a function to the component.
-     * @param {string} funcData - The function data.
-     * @param {string} p - The parameter.
-     * @param {string} ref - The reference.
-     * @returns {string} - A valid inline JS function call.
-     */
-    bind(funcTion, jsx,ref, paramNames, ...params) {
-       ref = ref + this.key || 2022
-     
-       let paramObject = {};
-     
-    
-       paramNames = paramNames.replace(/,,/g, ',');
-       let newparamnames = paramNames.replaceAll(',,', ',')
-        
-       for(var i in params){
-          let param = params[i]
-          let paramname = newparamnames.split(',')[i]
-          paramObject[paramname] = param 
-       }
-   
-     
-       
-        paramNames = paramNames.replace(',,', ',');
-        let func = null
-        // at the end of spaces or new lines add a ;
-        funcTion = funcTion.split('\n').join(';')
-        try{
-         func =  new Function(`event, ${paramNames}`, ` 
-          return (async (event, ${paramNames}) => {    
-              ${funcTion.toString()}
-          })(event, ${Object.keys(paramObject).join(',')}) 
-        `);  
-        }catch(e){
-           let  { message } = e;
-           console.error(`Error in function ${ref} ${message}`)
-        }
-         func   = func.bind(this)
-      
-         if(!this.functions.find((f) => f.ref === ref)){
-           document.addEventListener(`$dispatch_#id=${ref}`, (e) => {
-              let { name,   event } = e.detail;  
-              if (name === ref) {  
-                let params = this.functions.find((f) => f.ref === ref).params 
-                 Object.keys(params).forEach((key) => {
-                  if(params[key] instanceof CustomEvent){
-                    delete params[key]
-                  }
-                   
-                  params[key] === undefined ? delete params[key] : params[key]
-                 })     
-                 func(event, ...Object.values(params))
-              }
-           });
-           
-        }
-       
-      window.callFunction = (name, event) => {  
-        document.dispatchEvent(new CustomEvent(`$dispatch_#id=${name}`, { detail: { name: name, params: null, event: event } }));
-      }   
-      !this.functions.find((f) => f.ref === ref) ? this.functions.push({ref: ref, params: paramObject})  :  null
-      
-       
-      return jsx ?  funcTion :  `((event)=>{event.target.ev = event; callFunction('${ref}', event.target.ev)})(event)`;
-    }
-   
-    
-  
-    /**
-   * useState hook.
-   *
-   * @template T
-   * @param {string} key - The key for the state property.
-   * @param {T} initialState - The initial state value.
-   * @returns {[() => T, (newValue: T, hook: Function) => void]} - A tuple with getter and setter functions.
-   */
-   useState(key, initialState) { 
-    if (!this.state[key]) {
-      this.state[key] = initialState;
-    }
-  
-    /**
-     * Get the current state value.
-     *
-     * @returns {T} The current state value.
-     */
-    let updatedValue = () =>  this.state[key];
-  
-    let getValue = updatedValue();
-  
-    /**
-     * Set a new value for the state.
-     *
-     * @param {T} newValue - The new value to set.
-     * @param {Function} hook - The hook to hydrate after setting the value.
-     */
-    const set = (newValue, hook) => {
-      this.state[key] = newValue;
-     
-      this.hydrate(hook);
-      getValue = updatedValue();
-    };
-  
-   
-  
-    return  [getValue, set];
-  }
-  
-    
-  
-    useRef(key = null, initialState) {
-      if (!this.state[key]) {
-        this.state[key] = initialState;
-      }
-      const getValue = () =>  document.querySelector(`[ref="${key + this.key}"]`) ||  initialState;
-      const set = (newValue) => {
-        this.state[key] = newValue;
-   
-        this.hydrate();
-      };
-     
-      
-      return  {
-         bind: key + this.key,
-         current: getValue(),
-      }
-    }
-  
-     useReducer(key = null, initialState, func = null) {
-     
-      if (!this.state[key]) {
-        this.state[key] = initialState;  
-      }
-      const getValue = () => this.state[key];
-      let value = getValue();
-      const set = (newValue, hook) => {  
-        const nextState = func(value, newValue) ?? newValue; 
-        this.state[key] =  nextState;
-        this.hydrate(hook);
-        value = getValue(); 
-      };
-      return [getValue(), set];
-    }
-    
-  
-    /**
-     * Placeholder for content to be rendered.
-     * @method render
-     */
-    render() {}
-  
-    /**
-     * Checks if the component is mounted and triggers the onMount method.
-     * @private
-     */
-    checkIFMounted() {
-      let observer = new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-          
-          if (mutation.target.querySelector(`[key="${this.key}"]`) && !this.mounted) {
-            this.onMount(); 
-            this.mounted = true;   
-          }
-         
-          if(Array.from(mutation.removedNodes).find((node) => node.attributes && node.attributes.key && node.attributes.key.value === this.key)){
-            this.onUnmount();
-            this.reset();  
-          }
-        })
-      })
-      observer.observe(document.body, {
-        childList: true,
-        subtree: true,
-      });
-    }
-  
-    /**
-     * Method that is called when the component is mounted.
-     * @method onMount
-     */
-    onMount() {}
-    /**
-     * Method that is called when the component is unmounted.
-     * @method onUnmount
-     */
-    onUnmount() {}
-  }
-  
-   
-   
-  /**
-   *  useState hook.
-   *
-   * @param {string} key - The key for the state property.
-   * @param {*} initialState - The initial state value.
-   * @returns {[*]} - A tuple with the current state value and a setter function.
-   */
-  export const useState = (key, initialState) => {
-    if (!states[key]) {
-      states[key] = initialState;
-    }
-  
-    /**
-     * Get the current state value.
-     *
-     * @returns {*} The current state value.
-     */
-    let updatedValue = () => states[key];
-  
-    /**
-     * Set a new value for the state.
-     *
-     * @param {*} newValue - The new value to set.
-     * @param {Function} hook - The hook to hydrate after setting the value.
-     */
-    const set = (newValue, hook) => {
-      states[key] = newValue;
-      this.hydrate(hook);
-    };
-  
-    return [states[key], set];
-  };
-  
-   
-  
-  /**
-   * @method useReducer
-   * @param {*} initialState 
-   * @param {*} reducer 
-   * @returns  {Array} [value, set]
-   */
-  export const useReducer = (/**@type {*}**/initialState, /**@type {function}**/reducer) => {
-    return [initialState, (newValue) => {}];
-  };
-   
-  
-   /**
-   *  useRef hook.
-   *
-   * @param {*} initialState - The initial state value for the ref.
-   * @returns {{ current: *, bind: string }} - An object containing the current value and a bind string.
-   */
-  export const useRef = (initialState) => {
-    return {
-      /**
-       * @description The current value of the ref.
-         @type {*}
-       */
-      current: initialState,
-      /**
-       * @description A unique string that can be used to bind the ref to an element.
-       * @type {HTMLElement|string}
-       */
-      bind: '',
-    };
-  };
-  
-  export class Link extends Component{
-    constructor(props){
-      super(props)
-      this.props = props
-      this.link = document.createElement('a')
-    }
-    render(){
-       
-      
-      this.link.innerHTML = this.props.children
-      this.link.setAttribute('id', this.props?.href) 
-      this.link.style = this.props?.style
-      
-      this.link.setAttribute('class', this.props?.class)
-      this.link.setAttribute('onclick', `window.history.pushState({}, '', '${this.props?.href}'); window.dispatchEvent(new Event('popstate'));`)
-      return this.link.outerHTML
-    }
-     
-  }
-   
-  export default {
-    Component,  
-    useRef,
-    useReducer,
-    useState,
-    strictMount,
-    Link
-  }
+window.Vader={version:"1.3.3"},window.componentRegistry={};let errors={"SyntaxError: Unexpected token '<'":"You forgot to enclose tags in a fragment <></>"},mounts=[],hasRan=[];export const strictMount=(e,t)=>{let n=setInterval((()=>{document.querySelector(`[key="${e}"]`)&&!hasRan.includes(e)&&(clearInterval(n),t(),hasRan.push(e))}),120)};export class Component{constructor(){this.state={},this.key=null,this.components={},this.mounted=!1,this.checkIFMounted(),this.memoizes=[],this.functions=[],this.children=[],this.parentNode={},this.request={headers:{},method:"GET",params:{},path:"",query:{}},this.response={json:e=>{},send:e=>{},redirect:e=>{},render:async e=>{},log:e=>{},setQuery:e=>{}},this.router={use:e=>{}}}createComponent(e,t,n){function s(e){return"function"==typeof e&&/^class\s/.test(Function.prototype.toString.call(e))}let r=s(e)?new e(t):null;if(!e)throw new Error("Component must be defined");let o=new Component(t);if(s(e))r.props=t,r.children=n,r.props.children=n.join(""),r.parentNode=this,r.request=this.request,r.response=this.response,r.key=t.key||null,o=r;else{e.toString();o.key=e.toString().split('key="')[1]?e.toString().split('key="')[1].split('"')[0]:null;let n={key:o.key,render:()=>e.apply(o,[t]),request:this.request,isChild:!0,response:this.response,params:this.request.params,queryParams:this.request.query,reset:o.reset.bind(o),onMount:o.onMount.bind(o),useState:null,router:{use:o.router.use.bind(o)},bindMount:o.bindMount.bind(o),memoize:o.memoize.bind(o),createComponent:o.createComponent.bind(o),isChild:!1,useState:o.useState.bind(o),parseStyle:o.parseStyle.bind(o),bind:o.bind.bind(o),useRef:o.useRef.bind(o),request:this.request,response:this.response,useReducer:o.useReducer.bind(o),hydrate:o.hydrate.bind(o),onUnmount:o.onUnmount.bind(o),parentNoe:this};o.render=n.render,o=n}return this.components[t.key]||(this.components[t.key]=o),!this.children.includes(o)&&this.children.push(o),this.components[t.key]}reset(){Object.keys(this.components).forEach((e=>{this.components[e].onUnmount(),delete this.components[e]})),this.state={},this.children=[]}memoize(e){if(!0==!this.memoizes.includes(e.key))this.memoizes.push(e.key),this.components[e.key]=e;let t=this.components[e.key];t.bindMount(),t.parentNode=this,t.props=e.props,t.request=this.request,t.response=this.response,t.onMount=e.onMount.bind(e),t.onUnmount=e.onUnmount.bind(e);let n=t.render();return n&&n.split(">,").length>1&&(n=n.replaceAll(">,",">")),`<span key="${e.key}" >${n}</span>`}parseStyle(e){let t="";return Object.keys(e).forEach((n=>{let s=e[n];n=n.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g,"$1-$2").toLowerCase(),t+=`${n}:${s};`})),t}bindMount(){mounts.push(this)}domDifference(e,t){let n=[];for(let s=0;s<e.length;s++){let r=e[s],o=t[s];r&&o&&!r.isEqualNode(o)&&n.push({type:"replace",old:r,new:o.cloneNode(!0)})}return n}updateChangedElements(e){e.forEach((e=>{switch(e.type){case"replace":e.old.parentNode.replaceChild(e.new,e.old);break;case"remove":e.old.remove();break;case"add":e.old.appendChild(e.new.cloneNode(!0))}}))}hydrate(e){if(e){(new DOMParser).parseFromString(this.render(),"text/html").body.querySelector(`[ref="${e}"]`),document.querySelector(`[ref="${e}"]`)}else{let e=this.key?document.querySelector(`[key="${this.key}"]`):null,t=(new DOMParser).parseFromString(this.render(),"text/html").body;if(t=document.createElement("div").appendChild(t),!e&&(e=document.querySelector(`[key="${t.attributes?.key?.value||null}"]`)),!e)return void console.error('Hydration failed, component not found got ensure you have set key="a value" on the component or this.key inside of function or render method body');t.querySelectorAll("*").forEach((e=>{e.hasAttribute("key")&&e.innerHTML!==document.querySelector(`[key="${e.attributes.key.value}"]`).innerHTML&&document.querySelector(`[key="${e.attributes.key.value}"]`).replaceWith(e)}))}}patch(e,t){const n=this.domDifference(e,t);this.updateChangedElements(n)}handleObject(obj){try{obj=JSON.parse(obj)}catch(e){}return eval(obj)}bind(e,t,n,s,...r){n=n+this.key||2022;let o={},i=(s=s.replace(/,,/g,",")).replaceAll(",,",",");for(var u in r){let e=r[u];o[i.split(",")[u]]=e}s=s.replace(",,",",");let a=null;e=e.split("\n").join(";");try{a=new Function(`event, ${s}`,` \n        return (async (event, ${s}) => {    \n            ${e.toString()}\n        })(event, ${Object.keys(o).join(",")}) \n      `)}catch(e){let{message:t}=e;console.error(`Error in function ${n} ${t}`)}return a=a.bind(this),this.functions.find((e=>e.ref===n))||document.addEventListener(`$dispatch_#id=${n}`,(e=>{let{name:t,event:s}=e.detail;if(t===n){let e=this.functions.find((e=>e.ref===n)).params;Object.keys(e).forEach((t=>{e[t]instanceof CustomEvent&&delete e[t],void 0===e[t]?delete e[t]:e[t]})),a(s,...Object.values(e))}})),window.callFunction=(e,t)=>{document.dispatchEvent(new CustomEvent(`$dispatch_#id=${e}`,{detail:{name:e,params:null,event:t}}))},!this.functions.find((e=>e.ref===n))&&this.functions.push({ref:n,params:o}),t?e:`((event)=>{event.target.ev = event; callFunction('${n}', event.target.ev)})(event)`}useState(e,t){this.state[e]||(this.state[e]=t);let n=()=>this.state[e],s=n();return[s,(t,r)=>{this.state[e]=t,this.hydrate(r),s=n()}]}useRef(e=null,t){this.state[e]||(this.state[e]=t);return{bind:e+this.key,current:(()=>document.querySelector(`[ref="${e+this.key}"]`)||t)()}}useReducer(e=null,t,n=null){this.state[e]||(this.state[e]=t);const s=()=>this.state[e];let r=s();return[s(),(t,o)=>{const i=n(r,t)??t;this.state[e]=i,this.hydrate(o),r=s()}]}render(){}checkIFMounted(){new MutationObserver((e=>{e.forEach((e=>{e.target.querySelector(`[key="${this.key}"]`)&&!this.mounted&&(this.onMount(),this.mounted=!0),Array.from(e.removedNodes).find((e=>e.attributes&&e.attributes.key&&e.attributes.key.value===this.key))&&(this.onUnmount(),this.reset())}))})).observe(document.body,{childList:!0,subtree:!0})}onMount(){}onUnmount(){}}export const useState=(e,t)=>{states[e]||(states[e]=t);return[states[e],(t,n)=>{states[e]=t,this.hydrate(n)}]};export const useReducer=(e,t)=>[e,e=>{}];export const useRef=e=>({current:e,bind:""});export class Link extends Component{constructor(e){super(e),this.props=e,this.link=document.createElement("a")}render(){return this.link.innerHTML=this.props.children,this.link.setAttribute("id",this.props?.href),this.link.style=this.props?.style,this.link.setAttribute("class",this.props?.class),this.link.setAttribute("onclick",`window.history.pushState({}, '', '${this.props?.href}'); window.dispatchEvent(new Event('popstate'));`),this.link.outerHTML}}export default{Component:Component,useRef:useRef,useReducer:useReducer,useState:useState,strictMount:strictMount,Link:Link};

package/vader.js

@@ -823,7 +823,8 @@ async function Build() {
       </html>
     `;
   
-    let port = Math.floor(Math.random() * 10000) + 1;
+    // generate random but common ports
+    let port =  Math.floor(Math.random() * (65535 - 49152 + 1) + 49152)
      
       const server = http.createServer((req, res) => {  
         if (req.url === '/') {
@@ -1181,11 +1182,9 @@ Vader.js is a reactive framework for building interactive applications for the w
 Usage: vader <command> 
 
 Commands:
-  --watch     Watch the pages folder for changes with hot reloading
+  --watch     Watch the pages folder for changes and recompile 
 
   --build     Build the project
-
-  --serve     Serve the project on a given port
 Learn more about vader:           https://vader-js.pages.dev/
     
 `)