vaderjs 1.1.4 → 1.1.6

package/vaderRouter.js

@@ -1,4 +1,6 @@
+// @ts-ignore
 window.$URL_PARAMS = {};
+// @ts-ignore
 window.$URL_QUERY = {};
 
 /**
@@ -93,23 +95,21 @@ class VaderRouter {
     this.customerror = true;
   }
   handleRoute(method) {
-    if (this.hooked) {
-      return;
-    }
-    this.hooked = true;
     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]) {
-      console.log("route", route);
       this.storedroutes.push(route);
       const req = {
-        params: {},
+        // @ts-ignore
+        params: $URL_PARAMS ? $URL_PARAMS : {},
+        // @ts-ignore
         query: $URL_QUERY ? $URL_QUERY : {},
         url: route,
         method: method ? method : "GET",
@@ -124,8 +124,6 @@ class VaderRouter {
       };
       if (typeof this.routes[route] === "function") {
         this.routes[route](req, res);
-      } else {
-        console.error("Error: Route is not a function");
       }
     } else {
       if (this.customerror) {
@@ -134,12 +132,6 @@ class VaderRouter {
       } else {
         console.error("404: Route not found");
       }
-
-      // if route has no content to send return 500
-      if (this.routes[route] === undefined || this.hooked === false) {
-        this.handleError("500", route);
-        console.error("500: Route has no content");
-      }
     }
   }
   /**
@@ -160,9 +152,9 @@ class VaderRouter {
   }
   /**
    * @alias get
-   * @param {*} path
-   * @param {*} callback
-   * @returns  {void}
+   * @param {String} path
+   * @param {Function} callback
+   * @returns  {boolean}
    * @memberof VaderRouter
    * @description  Allows you to perform actions when path matches the current Route on visit.
    */
@@ -201,20 +193,13 @@ class VaderRouter {
         path.includes(":") &&
         window.location.hash.substring(1).split("?")[1]
       ) {
-        if (debug.enabled) {
-          debug.log(
-            [
-              `
-                  Cannot use query params with path params ${path} ${
-                window.location.hash.substring(1).split("?")[1]
-              }`,
-            ],
-            "assert"
-          );
-        }
-
         return false;
       }
+      /**
+       * @alias query
+       * @type {Object}
+       * @property {Object} params - The params object.
+       */
       const query = {};
 
       const queryString = window.location.hash.substring(1).split("?")[1];
@@ -238,9 +223,11 @@ class VaderRouter {
         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
@@ -251,23 +238,26 @@ class 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;
   }
-
+ 
+  /**
+   * @alias kill
+   * @description  Allows you to kill a route.
+   * @param {string} path 
+   */
   kill(path) {
     if (this.routes[path]) {
       delete this.routes[path];
@@ -275,67 +265,38 @@ class VaderRouter {
   }
   /**
    * @alias use
-   * @param {*} path
+   * @param {String} pattern
+   * @param {Function} callback
    * @returns {void}
    * @memberof VaderRouter
    * @description  Allows you to set routes to be used throughout your spa.
    */
-  use(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 + "(\\?(.*))?$");
+  use(pattern, callback = null) {
+    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 = {};
-    path = parsedPath;
 
-    // get params
-    if (window.location.hash.substring(1).match(regex)) {
+    // Get params
+    const match = window.location.hash.substring(1).match(regex);
+
+    if (match) {
       this.storedroutes.push(window.location.hash.substring(1));
-      const matches = window.location.hash.substring(1).match(regex);
-      params = {};
+      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++) {
-        params[paramNames[i]] = matches[i + 1];
+        const paramName = paramNames[i].substring(1); // Remove the leading ":"
+        params[paramName] = matches[i];
       }
-      if (
-        path.includes(":") &&
-        window.location.hash.substring(1).split("?")[1]
-      ) {
-        if (debug.enabled) {
-          debug.log(
-            [
-              `
-                        Cannot use query params with path params ${path} ${
-                window.location.hash.substring(1).split("?")[1]
-              }`,
-            ],
-            "assert"
-          );
-        }
 
-        return false;
-      }
       query = {};
 
-      const queryString = window.location.hash.substring(1).split("?")[1];
+      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++) {
@@ -344,20 +305,28 @@ class VaderRouter {
         }
       }
     }
+    // @ts-ignore
     window.$URL_PARAMS = params;
+    // @ts-ignore
     window.$URL_QUERY = query;
+
     if (callback) {
-      this.routes[parsedPath] = callback;
+      this.routes[pattern] = callback;
     } else {
-      this.storedroutes.push(parsedPath);
-      return this.routes[parsedPath];
+      this.routes[pattern] = true;
+      this.storedroutes.push(window.location.hash.substring(1));
     }
   }
 
+  /**
+   * @alias onload
+   * @param {Function} callback 
+   */
   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"
     ) {
@@ -367,8 +336,8 @@ class VaderRouter {
 
   /**
    * @alias on
-   * @param {*} path
-   * @param {*} callback
+   * @param {String} path
+   * @param {Function} callback
    * @returns {void}
    * @memberof VaderRouter
    * @description  Allows you to perform actions when the currentRoute changes.
@@ -376,8 +345,16 @@ class VaderRouter {
    */
   on(path, callback) {
     window.addEventListener("hashchange", () => {
-      const paramNames = [];
-      const queryNames = [];
+      /**
+       * @alias paramNames
+       * @typedef {Array}
+       */
+      const paramNames =  new Array();
+      /**
+       * @alias queryNames
+       * @typedef {Array}
+       */
+      const queryNames = new Array();
       const parsedPath = path
         .split("/")
         .map((part) => {
@@ -409,18 +386,22 @@ class VaderRouter {
         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) &&
-        this.routes[$CURRENT_URL]
+        // @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];
         }
         if (
@@ -441,6 +422,7 @@ class VaderRouter {
           const queryParts = queryString.split("&");
           for (let i = 0; i < queryParts.length; i++) {
             const queryParam = queryParts[i].split("=");
+            // @ts-ignore
             query[queryParam[0]] = queryParam[1];
           }
         }
@@ -451,25 +433,37 @@ class VaderRouter {
           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 {*} selector
-           * @param {*} data
+           * @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;
 
         /**
@@ -481,6 +475,8 @@ class VaderRouter {
          * @description  Allows you to perform actions when the currentRoute changes.
          */
         callback(req, res);
+      } else {
+        console.log("no route");
       }
     });
   }