vaderjs 1.2.3 → 1.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vaderjs",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "A Reactive Framework for Single-Page Applications (SPA)",
   "main": "index.js",
   "scripts": {

package/readme.md

@@ -65,24 +65,27 @@ or
 ### Declarative Routing
 
 ```javascript
-import { VaderRouter  } from 'vaderjs'
-import { MyComponent } from './components/my-component.js'
-const app = new VaderRouter('/') // intial route
-
-app.use('/') // use the route
-
-app.get('/', async (req, res) => {
-    res.render('#app', await MyComponent.render())
-})
+import VaderRouter from "../dist/vader/vaderRouter.js";
+import { Mycomponent} from "../src/pages/Home.js";
+ 
+const app = new VaderRouter('/');
 
-app.on('/', async (req, res) => {
-    res.render('#app', await MyComponent.render())
+app.get("/", async (req, res)=>{
+    res.send('#root', await new Home().render())
 })
-app.get('/:hello', (req, res) => {
-    res.render('#app', `<h1>Hello ${req.params.hello}</h1>`)
+app.get('/docs/:page/*', async (req, res)=>{
+     // page and asterisk route use req.params for params and req.params[0] to get the asterisk
+     // you can get queries from the url using req.query!
 })
+const middleware = (req, res)=>{
+    req.time = Date.now()
+}
+app.use(middleware) // use middlewares
 
-app.start()
+app.listen(3000, ()=>{
+    console.log('listening on port 3000')
+})
+ 
 ```
  
 

package/vader.js

@@ -17,13 +17,16 @@ function markdown(content) {
     let link = line.match(/\[(.*?)\]\((.*?)\)/g);
     let ul = line.match(/^\-\s/);
     let ol = line.match(/^\d\.\s/);
+    let li = line.match(/^\s/);
     let hr = line.match(/^\-\-\-\s/);
     let blockquote = line.match(/^\>\s/);
     let image = line.match(/\!\[(.*?)\]\((.*?)\)/g);
     
+    
     let codeBlock = line.match(/\`\`\`/g);
     let codeBlockEnd = line.match(/\`\`\`/g);
 
+     
     if (heading) {
        // @ts-ignore
       let headingLevel = heading[0].match(/#/g).length;
@@ -81,11 +84,15 @@ function markdown(content) {
       });
     }
     if(codeBlock){
-      line = line.replace(codeBlock[0], `<pre><code>`);
+      line = line.replace(codeBlock[0], `<code>`);
+      
     }
     if(codeBlockEnd){
-      line = line.replace(codeBlockEnd[0], `</code></pre>`);
+      line = line.replace(codeBlockEnd[0], `</code>`);
+      // remove spaces
+      line = line.replace(/^\s+/g, '');
     }
+    
 
 
     result += `${line}\n`;
@@ -826,8 +833,9 @@ export class Component {
         "You should wrap your html in a body tag, vader may not grab all html!"
       );
     }
-    let dom = new DOMParser().parseFromString(result, "text/html");
-    let elements = dom.body.querySelectorAll("*");
+     
+    const dom = new DOMParser().parseFromString(result, "text/html");
+    const elements = dom.documentElement.querySelectorAll("*");
 
     elements.forEach((element) => {
       switch (element.nodeName) {
@@ -861,11 +869,8 @@ export class Component {
             let prevurl = element.getAttribute("src");
             element.setAttribute("aria-hidden", "true");
             element.setAttribute("hidden", "true");
-            let url =
-              window.location.origin +
-              window.location.pathname +
-              "/public/" +
-              element.getAttribute("src");
+             // if window.lcoation.pathname includes a html file remove it and only use the path
+             let url = window.location.origin +  window.location.pathname.replace(/\/[^\/]*$/, '') + '/public/' + element.getAttribute("src");
             let image = new Image();
             image.src = url;
             image.onerror = () => {
@@ -891,7 +896,7 @@ export class Component {
             dom[element.getAttribute("ref")] = element;
           }
           if(element.nodeName === "MARKDOWN"){
-            element.innerHTML = markdown(element.innerHTML.trim())
+            element.innerHTML = markdown(element.innerHTML.replace(/\\n/g, '\n').trim())
           }
 
           if (element.hasAttribute("class")) {
@@ -1119,4 +1124,4 @@ export const include = async (path) => {
     });
 };
 
-export default Vader;
+export default Vader

package/vaderRouter.js

@@ -1,477 +1,218 @@
- // @ts-ignore
- window.$URL_PARAMS = {};
- // @ts-ignore
-window.$URL_QUERY = {};
 
 /**
- * @file VaderRouter.js
- * @version 1.0.0
- * @license MIT
- * @description A simple router for single page applications.
+ * @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 {
-  /**
-   * Creates an instance of VaderRouter.
-   * @param {string} starturl - The starting URL for the router.
-   */
-  constructor(starturl) {
-    /**
-     * Object to store route information.
-     * @type {Object}
-     */
-    this.routes = {};
-
-    /**
-     * The current URL being navigated.
-     * @type {string}
-     */
-    this.currentUrl = "";
-
-    /**
-     * Listener function for hash change events.
-     * @type {Function}
-     */
-    //@ts-ignore
-    this.hashChangeListener = null;
-
-    /**
-     * Error handlers for different error types.
-     * @type {Object}
-     */
-    this.errorHandlers = {};
-
-    /**
-     * Flag indicating if custom error handling is enabled.
-     * @type {boolean}
-     */
-    //@ts-ignore
-    this.customerror = null;
-
-    /**
-     * Flag indicating if the router is currently handling a route.
-     * @type {boolean}
-     */
-    this.hooked = false;
-
-    /**
-     * The starting URL for the router.
-     * @type {string}
-     */
-    this.starturl = starturl;
-
-    /**
-     * Array to store stored routes.
-     * @type {string[]}
-     */
-    this.storedroutes = [];
+class VaderRouter{
+  constructor() {
+    this.routes = [];
+    this.middlewares = [];
+    this.errorMiddlewares = [];
+    this.listeners = [];
   }
 
   /**
-   * Starts the router.
+   * @method get
+   * @param {String} path
+   * @param {Function} handler
+   * @description This method is used to register a get route
+   * @returns {void}
+   * @memberof Express
    */
-  start() {
-    if (window.location.hash === "") {
-      window.location.hash = this.starturl;
-    }
-    console.log(this.routes);
-    this.handleRoute("GET");
-    window.addEventListener("hashchange", () => {
-      this.handleRoute("POST");
+  get(path, handler) {
+   
+    this.routes.push({
+      path,
+      handler,
+      method: 'get',
     });
   }
-
   /**
-   * @alias handleErrors
-   * @param {*} type
-   * @param {*} callback
-   * @returns {void}
-   * @memberof VaderRouter
-   * @description Handles errors for the router.
-   * @example
-   * router.handleErrors('404', (err) => {
-   *  // do something with err
-   * });
+   * @method use
+   * @description This method allows you to use middlewares
+   * @param {Function} middleware 
    */
-  handleErrors(type, callback) {
-    this.errorHandlers[type] = callback;
-    this.customerror = true;
-  }
-  handleRoute(method) {
-   
-    let route = window.location.hash.substring(1);
- // @ts-ignore
-    window.$CURRENT_URL = route;
 
-    // remove query params from route
-    if (route.includes("?")) {
-      route = route.split("?")[0];
-    }
-    route = route.split("/")[0] + "/" + route.split("/")[1];
-    if (this.routes[route]) {
-       
-      this.storedroutes.push(route);
-      const req = {
-         // @ts-ignore
-        params: $URL_PARAMS ? $URL_PARAMS : {},
-         // @ts-ignore
-        query: $URL_QUERY ? $URL_QUERY : {},
-        url: route,
-        method: method ? method : "GET",
-      };
-      const res = {
-        return: function (data) {
-          this.hooked = false;
-        },
-        render: function (selector, data) {
-          document.querySelector(selector).innerHTML = data;
-        },
-      };
-      if(typeof this.routes[route] === 'function'){
-        this.routes[route](req, res);
-      }
-    } else {
-      if (this.customerror) {
-        //@ts-ignore
-        this.handleError("404", route);
-        console.error("404: Route not found");
-      } else {
-        console.error("404: Route not found");
-      }
-
-       
-    }
+  use(/* path, */ middleware) {
+    this.middlewares.push(middleware);
   }
+
   /**
-   *
-   * @param {*} type
-   * @param {*} data
+   * @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}
-   * @memberof VaderRouter
-   * @description used by start() to handle errors.
+   * 
    */
 
-  handleError(type, data) {
-    if (this.errorHandlers[type]) {
-      this.errorHandlers[type](data);
-    } else {
-      console.error("Error: No error handler found for " + type);
+  listen(port, callback) {
+    if(!port){
+     port = Math.random().toString(36).substring(7);
+    }
+    this.listeners.push(port);
+    callback();
+    if (this.listeners.length === 1) {
+      this.handleRoute(window.location.hash);
+    }else{
+      this.listeners.pop();
+    }
+    if (callback) {
+      callback();
+    }
+    window.onhashchange = () => {
+      this.handleRoute(window.location.hash);
     }
   }
   /**
-   * @alias get
-   * @param {String} path
-   * @param {Function} callback
-   * @returns  {boolean}
-   * @memberof VaderRouter
-   * @description  Allows you to perform actions when path matches the current Route on visit.
+   * @method extractParams
+   * @description This method is used to extract parameters from the route path
+   * @param {*} routePath
+   * @param {*} hash 
+   * @returns  {Object} params
+   * @memberof Express
    */
-  get(path, callback) {
-    const paramNames = [];
-    const queryNames = [];
-    const parsedPath = path
-      .split("/")
-      .map((part) => {
-        if (part.startsWith(":")) {
-          paramNames.push(part.substring(1));
-          return "([^/]+)";
-        }
-        if (part.startsWith("*")) {
-          paramNames.push(part.substring(1));
-          return "(.*)";
-        }
-        if (part.startsWith("?")) {
-          queryNames.push(part.substring(1));
-          return "([^/]+)";
-        }
-        return part;
-      })
-      .join("/");
-    const regex = new RegExp("^" + parsedPath + "(\\?(.*))?$");
-
-    if (window.location.hash.substring(1).match(regex)) {
-      this.storedroutes.push(window.location.hash.substring(1));
-      const matches = window.location.hash.substring(1).match(regex);
-      const params = {};
 
-      for (let i = 0; i < paramNames.length; i++) {
-        //@ts-ignore
-        params[paramNames[i]] = matches[i + 1];
+  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('*')){
+        // remove queries from this par
+        params[0] = hashParts.slice(index).join('/').split('?')[0];
       }
-      if (
-        path.includes(":") &&
-        window.location.hash.substring(1).split("?")[1]
-      ) {
-         
-
-        return false;
-      }
-      const query = {};
-
-      const queryString = window.location.hash.substring(1).split("?")[1];
-      if (queryString) {
-        const queryParts = queryString.split("&");
-        for (let i = 0; i < queryParts.length; i++) {
-          const queryParam = queryParts[i].split("=");
-          query[queryParam[0]] = queryParam[1];
-        }
-      }
-      /**
-       * @alias req
-       * @type {Object}
-       * @property {Object} params - The params object.
-       * @returns {Object}  current url params
-       */
-
-      const req = {
-        params: params,
-        query: query,
-        url: window.location.hash.substring(1),
-        method: "GET",
-      };
- // @ts-ignore
-      window.$URL_PARAMS = params;
-       // @ts-ignore
-      window.$URL_QUERY = query;
-       // @ts-ignore
-      window.$CURRENT_URL = window.location.hash.substring(1);
-      /**
-       * @alias render
-       * @param {*} selector
-       * @param {*} data
-       * @returns {void}
-       * @memberof VaderRouter
-       * @description  Allows you to perform actions when the currentRoute changes.
-       */
-      const res = {
-        return: function (data) {
-          this.hooked = false;
-        },
-        render: function (selector, data) {
-          document.querySelector(selector).innerHTML = data;
-        },
-      };
-
-      callback(req, res);
-     // @ts-ignore
-      return true;
-    }
-
-    this.hooked = false;
-    return false;
+    });
+    return params;
   }
-
-  kill(path) {
-    if (this.routes[path]) {
-      delete this.routes[path];
+  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;
   }
+
   /**
-   * @alias use
-   * @param {String} pattern
-   * @param { void} callback
-   * @returns {void}
-   * @memberof VaderRouter
-   * @description  Allows you to set routes to be used throughout your spa.
+   * @method handleRoute
+   * @param {String} hash
+   * @description This method is used to handle the route
    */
-  use(pattern, callback) {
-    const regexPattern = pattern
-      .replace(/:[^/]+/g, "([^/]+)") // Replace :param with a capturing group
-      .replace(/\//g, "\\/"); // Escape forward slashes
-  
-    const regex = new RegExp("^" + regexPattern + "(\\?(.*))?$");
-    let params = {};
-    let query = {};
-  
-    // Get params
-    const match = window.location.hash.substring(1).match(regex);
-  
-    if (match) {
-      this.storedroutes.push(window.location.hash.substring(1));
-      const matches = match.slice(1); // Extract matched groups
-  
-      // Extract named params from the pattern
-      const paramNames = pattern.match(/:[^/]+/g) || [];
-      for (let i = 0; i < paramNames.length; i++) {
-        const paramName = paramNames[i].substring(1); // Remove the leading ":"
-        params[paramName] = matches[i];
+
+  handleRoute(hash) {
+    hash = hash.slice(1);
+    let status = 200;
+    let route = this.routes.find((route) => {
+     
+      if (route.path === hash) {
+        return true;
       }
-  
-      query = {};
-  
-      const queryString = matches[paramNames.length]; // The last match is the query string
-      if (queryString) {
-        const queryParts = queryString.split("&");
-        for (let i = 0; i < queryParts.length; i++) {
-          const queryParam = queryParts[i].split("=");
-          query[queryParam[0]] = queryParam[1];
-        }
+      const routePathParts = route.path.split('/');
+      const hashParts = hash.split('/');
+      // if asterisk is present in route path then it will be the last part
+      if(routePathParts[routePathParts.length-1].startsWith('*')){
+        return true;
+      }else if (routePathParts.length !== hashParts.length) {
+        return false;
       }
-    }
-   // @ts-ignore
-    window.$URL_PARAMS = params;
-     // @ts-ignore
-    window.$URL_QUERY = query;
-  //@ts-ignore
-    if (callback) {
-      this.routes[pattern] = callback;
-    } else {
-      this.routes[pattern] = true;
-      this.storedroutes.push(window.location.hash.substring(1));
-    }
-  }
-  
+     
+      const params = this.extractParams( route.path, hash);
+      return Object.keys(params).length > 0;
+    });
   
+    if (!route) {
+      route = this.routes.find((route) => {
+        return route.path === '/404';
+      });
 
-  onload(callback) {
-    // await dom to be done make sure no new elements are added
-    if (
-      document.readyState === "complete" ||
-       // @ts-ignore
-      document.readyState === "loaded" ||
-      document.readyState === "interactive"
-    ) {
-      callback();
+      status = 404;
     }
-  }
 
-  /**
-   * @alias on
-   * @param {String} path
-   * @param {Function} callback
-   * @returns {void}
-   * @memberof VaderRouter
-   * @description  Allows you to perform actions when the currentRoute changes.
-   *
-   */
-  on(path, callback) {
-    window.addEventListener("hashchange", () => {
-      const paramNames = [];
-      const queryNames = [];
-      const parsedPath = path
-        .split("/")
-        .map((part) => {
-          if (part.startsWith(":")) {
-            paramNames.push(part.substring(1));
-            return "([^/]+)";
-          }
-          if (part.startsWith("*")) {
-            paramNames.push(part.substring(1));
-            return "(.*)";
-          }
-          if (part.startsWith("?")) {
-            queryNames.push(part.substring(1));
-            return "([^/]+)";
-          }
-          return part;
-        })
-        .join("/");
-      const regex = new RegExp("^" + parsedPath + "(\\?(.*))?$");
-
-      let hash = window.location.hash.split("#")[1]
-        ? window.location.hash.split("#")[1]
-        : window.location.hash;
-
-      let basePath = "";
-      if (hash.length > 1) {
-        basePath = hash.split("/")[0] + "/" + hash.split("/")[1];
-      } else {
-        basePath = hash[0];
-      }
-      const route = basePath;
-      this.currentUrl = route;
-      // @ts-ignore
-      window.$CURRENT_URL = route;
-       // @ts-ignore
-      window.$URL_PARAMS = {};
-      if (
-        window.location.hash.substring(1).match(regex) &&
-         // @ts-ignore
-        this.routes[window.$CURRENT_URL]
-      ) {
-        this.storedroutes.push(window.location.hash.substring(1));
-        const matches = window.location.hash.substring(1).match(regex);
-        const params = {};
-
-        for (let i = 0; i < paramNames.length; i++) {
-          //@ts-ignore
-          params[paramNames[i]] = matches[i + 1];
+     
+    const queryParams = this.extractQueryParams(hash);
+    const params =  route && route.path ? this.extractParams(route.path, hash) : {};
+    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,
+          });
         }
-        if (
-          path.includes(":") &&
-          window.location.hash.substring(1).split("?")[1]
-        ) {
-          console.error(
-            "Cannot use query params with path params",
-            path,
-            window.location.hash.substring(1).split("?")[1]
-          );
-          return false;
+      },
+      send: (selector, data) => {
+        if(typeof selector === 'string'){
+          // @ts-ignore
+          document.querySelector(selector).innerHTML = data;
+        }else if(typeof selector === 'number'){
+          res.status = selector;
+        }else if(typeof selector === 'object'){
+          res.status = selector.status;
         }
-        const query = {};
-
-        const queryString = window.location.hash.substring(1).split("?")[1];
-        if (queryString) {
-          const queryParts = queryString.split("&");
-          for (let i = 0; i < queryParts.length; i++) {
-            const queryParam = queryParts[i].split("=");
-            query[queryParam[0]] = queryParam[1];
-          }
+      },
+      json: (selector, data) => {
+        
+        if(typeof selector === 'string'){
+          // @ts-ignore
+          let obj = document.createElement('object');
+           // data url
+          obj.data =  URL.createObjectURL(new Blob([JSON.stringify(data)], {type: 'application/json'}));
+          // @ts-ignore
+          document.querySelector(selector).appendChild(obj);
+        }else{
+          throw new Error('Selector must be a string');
         }
-        const req = {
-          params: params,
-          query: query,
-          url: window.location.hash.substring(1),
-          method: "POST",
-        };
-        const res = {
-          return: function (data) {
-            this.hooked = false;
-          },
-          /**
-           * @alias send
-           * @param {String} selector
-           * @param {String} data
-           * @returns {void}
-           * @memberof VaderRouter
-           * @description  Allows you to perform actions when the currentRoute changes.
-           * @example
-           * res.send('#root', '<h1>Hello World</h1>');
-           * */
-          send: function (selector, data) {
-            //@ts-ignore
-            document.querySelector(selector).innerHTML = data;
-          },
-          /**
-           * @alias render
-           * @param {String} selector
-           * @param {String} data
-           * @returns {void}
-           * @memberof VaderRouter
-           * @description  Allows you to perform actions when the currentRoute changes.
-           */
-          render: function (selector, data) {
-            //@ts-ignore
-            document.querySelector(selector).innerHTML = data;
-          },
-        };
-         // @ts-ignore
-        window.$URL_QUERY = query;
-         // @ts-ignore
-        window.$URL_PARAMS = params;
-
-        /**
-         * @alias callback
-         * @type {function}
-         * @param {Object} req - The request object.
-         * @returns {void}
-         * @memberof VaderRouter
-         * @description  Allows you to perform actions when the currentRoute changes.
-         */
-        callback(req, res);
-      }else{
-        console.log('no route')
-      }
+      },
+    };
+    this.middlewares.forEach((middleware) => {
+      middleware(req, res);
     });
+  
+    route ? route.handler(req, res) : null;
+     
   }
+  
 }
-export default VaderRouter;
+
+export default VaderRouter;
+ 
+