vaderjs 1.1.7 → 1.1.8

package/.vscode/vaderjs.autosense.json

@@ -0,0 +1,5 @@
+{
+      "className":{
+        
+      }
+}

package/index.js

@@ -5,7 +5,7 @@
  * @version 1.1.5
  * 
  */
-import { Vader } from "./vader.js";
+import Vader from "./vader.js";
 // @ts-ignore
 import { VaderRouter } from "./vader-router.js";
 

package/package.json

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

package/vader.js

@@ -1,55 +1,39 @@
-
 let dom = /**@type {Obect}  **/ {};
 /**
  * @function useRef
  * @description Allows you to get reference to DOM element
  * @param {String} ref
- * @returns {Object} {current}
+ * @returns {void | Object} {current, update}
  */
-export const useRef = (ref /** @type {string} */) => {
-  // Try to get the existing DOM element from window.dom
-   /**@type {object }*/
-  let el =   dom[ref] || document.querySelector(`[ref="${ref}"]`);
+export const useRef = (ref) => {
+  const element = document.querySelector(`[ref="${ref}"]`);
+  const getElement = () => element;
 
-  // Function to update the DOM element with new HTML content
-  /**
-   * @function update
-   * @description Allows you to update the DOM element with new HTML content
-   * @param {String} data 
-   */
   const update = (data) => {
-    // Parse the new HTML data
     const newDom = new DOMParser().parseFromString(data, "text/html");
-     
-     
-    const newHtml = newDom.body.firstChild;
+    const newElement = newDom.body.firstChild;
 
-    if (el) {
-      // If the element already exists, update it
-      const isDifferent = !newHtml.isEqualNode(el);
+    if (element) {
+      // @ts-ignore
+      const isDifferent = !newElement.isEqualNode(element);
       if (isDifferent) {
-        const newElement = newHtml.cloneNode(true);
-        // Replace the old element with the new one
-        el.parentNode.replaceChild(newElement, el);
-        dom[ref] = newElement;
+        // @ts-ignore
+        element.parentNode.replaceChild(newElement, element);
       }
-    } else {
-      // If the element doesn't exist, create it
-      el = newHtml.cloneNode(true);
-      dom[ref] = el;
     }
   };
 
   return {
-    current: el,
+    current: getElement(),
     update,
   };
 };
+
 let components = [];
 /**
  * @class Component
  * @description Allows you to create a component
- * @returns {null}
+ * @returns {void}
  * @example
  * import { Vader } from "../../dist/vader/index.js";
  * export class Home extends Vader.Component {
@@ -70,7 +54,6 @@ export class Component {
     this.states = {};
     //@ts-ignore
     this.name = this.constructor.name;
-    console.log(this.name);
     this.executedEffects = {};
     this.storedProps = {};
     this.componentMounted = false;
@@ -80,8 +63,8 @@ export class Component {
      * @property {Array} $_signal_subscribers_ran
      * @description Allows you to keep track of signal subscribers
      * @private
-    */
-    this.$_signal_subscribers_ran =   [];
+     */
+    this.$_signal_subscribers_ran = [];
     this.effects = {};
     this.$_useStore_subscribers = [];
     this.init();
@@ -92,42 +75,22 @@ export class Component {
         state: null,
       },
     });
+    this.snapshots = [];
   }
 
   init() {
-    //@ts-ignore
     this.registerComponent();
-      //@ts-ignore
-    window.states = this.states;
-      //@ts-ignore
-    window.useState = this.useState;
-      //@ts-ignore
-    window.setState = this.setState;
-      //@ts-ignore
-    window.useEffect = this.useEffect;
-      //@ts-ignore
-    window.useAuth = this.useAuth;
-      //@ts-ignore
-    window.useSyncStore = this.useSyncStore;
-      //@ts-ignore
-    window.useReducer = this.useReducer;
-      //@ts-ignore
-    window.runEffects = this.runEffects;
-      //@ts-ignore
-    window.rf = this.rf;
-      //@ts-ignore
-    window.signal = this.signal;
   }
 
   registerComponent() {
     components.push(this);
   }
- 
+
   /**
    * @method setState
    * @description Allows you to set state
    * @param {String} key
-   * @param {*} value 
+   * @param {*} value
    * @returns {void}
    * @example
    * this.setState('count', 1)
@@ -136,13 +99,51 @@ export class Component {
     this.states[key] = value;
     this.updateComponent();
   }
+  /**
+   * @method componentUnmount
+   * @description Allows you to run code after component has unmounted
+   * @type {VoidFunction}
+   * @returns {void}
+   */
+  unmount() {
+    this.componentMounted = false;
+    this.componentWillUnmount();
+    // @ts-ignore
+    document.querySelector(`[data-component="${this.name}"]`).remove();
+    if (!document.querySelector(`[data-component="${this.name}"]`)) {
+      components = components.filter(
+        (component) => component.name !== this.name
+      );
+    }
+  }
 
-  componentUpdate() {}
+  /**
+   * @method componentUpdate
+   * @description Allows you to run code after component has updated
+   * @param {Object} prev_state
+   * @param {Object} prev_props
+   * @param {Object} snapshot
+   * @returns {void}
+   * @example
+   * componentUpdate(prev_state, prev_props, snapshot) {
+   * console.log(prev_state, prev_props, snapshot)
+   * }
+   * */
+  componentUpdate(prev_state, prev_props, snapshot) {}
   /**
    * @method componentDidMount
    * @description Allows you to run code after component has mounted
    */
   componentDidMount() {}
+
+  /**
+   * @method componentWillUnmount
+   * @description Allows you to run code before component unmounts
+   * @type {VoidFunction}
+   * @returns {void}
+   */
+  componentWillUnmount() {}
+
   /**
    * @method signal
    * @description Allows you to create a signal
@@ -227,6 +228,7 @@ export class Component {
     };
     this.$_signal_call = () => {
       hasCaller = true;
+      // @ts-ignore
       this.$_signal_dispatch();
     };
     /**
@@ -305,8 +307,8 @@ export class Component {
    * auth.can('create') // true
    */
   useAuth(options) {
-    /**@type {Array}**/ 
-    let rules =  options.rulesets;
+    /**@type {Array}**/
+    let rules = options.rulesets;
     if (!rules) {
       throw new Error("No rulesets provided");
     }
@@ -336,8 +338,8 @@ export class Component {
       /**
        * @function canWithRole
        * @param {String} action
-       * @param {String} role 
-       * @returns 
+       * @param {String} role
+       * @returns
        */
       canWithRole: (action, role) => {
         return auth.can(action) && auth.hasRole(role);
@@ -388,12 +390,22 @@ export class Component {
    *  setCount({type: 'increment'})
    */
   useReducer(key, reducer, initialState) {
-    const [state, setState] = this.useState(key, initialState);
-    const dispatch = (action) => {
-      const newState = reducer(state, action);
-      setState(newState);
-    };
-    return [state, dispatch];
+    if (!this.states[key]) {
+      this.states[key] = initialState;
+    }
+    return [
+      this.states[key],
+      /**
+       * @function dispatch
+       * @description Allows you to dispatch a reducer
+       * @param {*} action
+       * @returns {void}
+       */
+      (action) => {
+        this.states[key] = reducer(this.states[key], action);
+        this.updateComponent();
+      },
+    ];
   }
   runEffects() {
     Object.keys(this.effects).forEach((component) => {
@@ -408,28 +420,28 @@ export class Component {
   /**
    * @method useSyncStore
    * @description Allows you to create a store
-   * @param {*} storeName 
-   * @param {*} initialState 
+   * @param {String} storeName
+   * @param {*} initialState
    * @returns  {Object} {getField, setField, subscribe, clear}
    * @example
    *  let store = this.useSyncStore('store', {count: 0})
    *  store.setField('count', 1)
    *  store.getField('count') // 1
-   * 
+   *
    */
   useSyncStore(storeName, initialState) {
     let [storedState, setStoredState] = this.useState(
       storeName,
       initialState ||
-       // @ts-ignore
+        // @ts-ignore
         localStorage.getItem(`$_vader_${storeName}`, (s) => {
-          
           localStorage.setItem(`$_vader_${storeName}`, JSON.stringify(s));
           this.$_useStore_subscribers.forEach((subscriber) => {
             subscriber(s);
           });
         }) ||
-        {}
+        {},
+      () => {}
     );
 
     const getField = (fieldName) => {
@@ -460,7 +472,7 @@ export class Component {
    * @description Allows you to create a state
    * @param {String} key
    * @param {*} initialValue
-   * @param {*} callback
+   * @param {Function} callback
    * @url - useState works similarly to - https://react.dev/reference/react/useState
    * @returns  {Array} [state, setState]
    * @example
@@ -476,6 +488,12 @@ export class Component {
     }
     return [
       this.states[key],
+      /**
+       * @function setState
+       * @description Allows you to set state
+       * @param {*} value
+       * @returns {void}
+       */
       (value) => {
         this.states[key] = value;
         this.updateComponent();
@@ -511,13 +529,13 @@ export class Component {
       this.hasMounted = true;
     }
 
-    return{
+    return {
       cleanup: () => {
         this.effects[this.name] = this.effects[this.name].filter(
           (effect) => effect !== effectFn
         );
       },
-    }
+    };
   }
   /**
    * @method $Function
@@ -536,7 +554,7 @@ export class Component {
     }
     let name = fn.name;
     if (!name) {
-      name = "anonymous";
+      name = "anonymous" + Math.floor(Math.random() * 100000000000000000);
     }
     window[name] = fn;
     // @ts-ignore
@@ -546,12 +564,29 @@ export class Component {
   // Add other methods like render, useEffect, useReducer, useAuth, etc.
 
   updateComponent() {
+    const fragment = document.createDocumentFragment();
     Object.keys(components).forEach(async (component) => {
       const { name } = components[component];
       const componentContainer = document.querySelector(
         `[data-component="${name}"]`
       );
 
+      let time = new Date().getTime().toLocaleString();
+      /**
+       * @property {Object} snapshot
+       * @description Allows you to keep track of component snapshots
+       * @private
+       * @returns {Object} {name, time, prev_state, prev_props, content}
+       */
+      let snapshot = {
+        name: name,
+        time: time,
+        prev_state: this.states,
+        prev_props: this.storedProps,
+        // @ts-ignore
+        content: componentContainer.innerHTML,
+      };
+
       if (!componentContainer) return;
       const newHtml = await new Function(
         "useState",
@@ -573,14 +608,92 @@ export class Component {
         this.signal,
         this.render
       );
-      this.componentDidMount();
 
-      if (newHtml && newHtml !== componentContainer.innerHTML) {
-        componentContainer.outerHTML = newHtml;
+      if (newHtml !== componentContainer.innerHTML) {
+        if (this.snapshots.length > 0) {
+          let lastSnapshot = this.snapshots[this.snapshots.length - 1];
+          if (lastSnapshot !== snapshot) {
+            this.snapshots.push(snapshot);
+          }
+        } else {
+          this.snapshots.push(snapshot);
+        }
+        this.componentUpdate(
+          snapshot.prev_state,
+          snapshot.prev_props,
+          snapshot.content
+        );
+        // batch updates
+        fragment.appendChild(
+          document.createRange().createContextualFragment(newHtml)
+        );
+        componentContainer.innerHTML = "";
+        componentContainer.appendChild(fragment);
+        this.runEffects();
       }
     });
   }
+  /**
+   * @method validateClassName
+   * @param {String} className
+   * @private
+   * @returns {Boolean}
+   */
+  validateClassName(className) {
+    // validate classNames ensure they are camelCase but also allow for - and _
+    return /^[a-zA-Z0-9-_]+$/.test(className);
+  }
+
+  /**
+   * The `html` method generates and processes HTML content for a component, performing various validations and tasks.
+   *
+   * @param {String} strings - The HTML content to be processed.
+   * @param {...any} args - Dynamic values to be inserted into the template.
+   * @returns {string} - The processed HTML content as a string.
+   *
+   * @throws {SyntaxError} - Throws a `SyntaxError` if image-related attributes are missing or invalid.
+   * @throws {Error} - Throws an `Error` if there are issues with class names or relative paths.
+   *
+   * @example
+   * // Example usage within a component:
+   * const myComponent = new Component();
+   * const htmlContent = myComponent.html`
+   *   <div>
+   *     <img src="/images/example.jpg" alt="Example Image" />
+   *   </div>
+   * `;
+   * document.body.innerHTML = htmlContent;
+   *
+   * @remarks
+   * The `html` method is a core function used in component rendering. It allows you to define and generate HTML content within your component while enforcing best practices and accessibility standards. The method performs several essential tasks:
+   *
+   * 1. **Image Validation**: It checks images for the presence of 'alt' attributes and their validity.
+   *    - Throws a `SyntaxError` if an image is missing the 'alt' attribute.
+   *    - Throws a `SyntaxError` if the 'alt' attribute is empty.
+   *    - Checks for an 'aria-hidden' attribute for image elements.
+   *
+   * 2. **Class Attribute Handling**: It enforces class attribute usage and allows optional configuration via comments.
+   *    - Throws an `Error` if 'class' attributes are used without permission.
+   *    - Supports 'className' attributes for class definitions.
+   *    - Allows or disallows class-related comments based on your configuration.
+   *
+   * 3. **Relative Path Handling**: It processes relative paths in 'href' and 'src' attributes, ensuring proper routing.
+   *    - Converts relative 'href' attributes to anchor links with appropriate routing.
+   *    - Converts relative 'src' attributes to absolute paths with 'public' directories.
+   *
+   * 4. **Custom Component Attributes**: It supports adding a 'data-component' attribute to the root element.
+   *    - Ensures that the 'data-component' attribute is present for component identification.
+   *
+   * 5. **Lifecycle Method Invocation**: It invokes the `componentDidMount` method if called from a 'render' context.
+   *    - Executes `componentDidMount` to handle component initialization once the DOM is ready.
+   *
+   * @see {@link Component}
+   * @see {@link Component#componentDidMount}
+   */
   html(strings, ...args) {
+    // @ts-ignore
+    let caller = new Error().stack.split("\n")[2].trim();
+
     let result = "";
     for (let i = 0; i < strings.length; i++) {
       result += strings[i];
@@ -588,26 +701,179 @@ export class Component {
         result += args[i];
       }
     }
-    // add ref to all elements
+
+    if (!result.trim().startsWith("<body>")) {
+      console.warn(
+        "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("*");
+
     elements.forEach((element) => {
-      if (element.hasAttribute("ref")) {
-        dom[element.getAttribute("ref")] = element;
+      switch (element.nodeName) {
+        case "IMG":
+          if (
+            !element.hasAttribute("alt") &&
+            !document.documentElement.outerHTML
+              .trim()
+              .includes("<!-- #vader-disable_accessibility -->")
+          ) {
+            throw new SyntaxError(
+              `Image: ${element.outerHTML} missing alt attribute`
+            );
+          } else if (
+            element.hasAttribute("alt") &&
+            // @ts-ignore
+            element.getAttribute("alt").length < 1 &&
+            !document.documentElement.outerHTML
+              .trim()
+              .includes("<!-- #vader-disable_accessibility -->")
+          ) {
+            throw new SyntaxError(
+              `Image: ${element.outerHTML} alt attribute cannot be empty`
+            );
+          } else if (
+            element.hasAttribute("src") &&
+            !document.documentElement.outerHTML
+              .trim()
+              .includes("<!-- #vader-disable_accessibility -->")
+          ) {
+            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");
+            let image = new Image();
+            image.src = url;
+            image.onerror = () => {
+              // @ts-ignore
+              element.setAttribute("src", prevurl);
+              throw new Error(`Image: ${element.outerHTML} not found`);
+            };
+            element.setAttribute("src", url);
+
+            image.onload = () => {
+              document.querySelectorAll(`img[src="${url}"]`).forEach((img) => {
+                img.setAttribute("src", url);
+                img.removeAttribute("aria-hidden");
+                img.removeAttribute("hidden");
+              });
+            };
+          }
+          break;
+
+        default:
+          if (element.hasAttribute("ref")) {
+            // @ts-ignore
+            dom[element.getAttribute("ref")] = element;
+          }
+
+          if (element.hasAttribute("class")) {
+            const allowClassComments =
+              document.documentElement.outerHTML.includes(
+                "<!-- #vader-allow_class -->"
+              );
+            if (!allowClassComments) {
+              console.warn(
+                "you can disable class errors using, <!-- #vader-allow_class -->"
+              );
+              throw new Error(
+                "class attribute is not allowed, please use className instead"
+              );
+            }
+          } else if (element.hasAttribute("className")) {
+            const isLocalhost = window.location.href.includes("localhost");
+            const is127001 = window.location.href.includes("127.0.0.1");
+            const ignoreClassComments = document.documentElement.outerHTML
+              .trim()
+              .includes("<!-- #vader-class-ignore -->");
+            const allowClassComments = document.documentElement.outerHTML
+              .trim()
+              .includes("<!-- #vader-allow_class -->");
+
+            if (
+              // @ts-ignore
+              (!this.validateClassName(element.getAttribute("className")) &&
+                isLocalhost) ||
+              (is127001 && !ignoreClassComments && !allowClassComments)
+            ) {
+              throw new Error(
+                `Invalid className ${element.getAttribute(
+                  "className"
+                )}, please use camelCase instead - example: myClass`
+              );
+            }
+            // @ts-ignore
+            element.setAttribute("class", element.getAttribute("className"));
+            element.removeAttribute("className");
+          }
+
+          if (
+            element.hasAttribute("href") &&
+            // @ts-ignore
+            element.getAttribute("href").startsWith("/") &&
+            !document.documentElement.outerHTML
+              .trim()
+              .includes("<!-- #vader-disable_relative-paths -->")
+          ) {
+            element.setAttribute(
+              "href",
+              // @ts-ignore
+              `#/${element.getAttribute("href").replace("/", "")}`
+            );
+          }
+
+          if (
+            element.hasAttribute("src") &&
+            // @ts-ignore
+            element.getAttribute("src").startsWith("/") &&
+            !document.documentElement.outerHTML
+              .trim()
+              .includes("<!-- #vader-disable_relative-paths -->")
+          ) {
+            element.setAttribute(
+              "src",
+              `${window.location.origin}/public${element.getAttribute("src")}`
+            );
+          }
+          break;
       }
     });
+
+    result = dom.body.innerHTML;
+
     this.Componentcontent = result;
+
     if (!result.includes("<div data-component")) {
-      result = `<div data-component="${this.name}">${result}</div>`;
+      result = `<div 
+      
+      data-component="${this.name}">${result}</div>`;
+    }
+    if (caller.includes("render") && !this.componentMounted) {
+      this.componentMounted = true;
+      this.componentDidMount();
     }
 
     return result;
   }
-  async render() {
-    this.componentMounted = true;
-    this.componentDidMount();
-    return await new Function(`return \`${this.Componentcontent}\`;`)();
-  }
+  // write types to ensure it returns a string
+  /**
+   * @method render
+   * @description Allows you to render html
+   * @returns {Promise <any>}
+   * @example
+   * async render() {
+   * return this.html(`
+   * <div className="hero p-5">
+   * <h1>Home</h1>
+   * </div>
+   * `);
+   */
+  async render() {}
 }
 
 /**
@@ -629,12 +895,32 @@ export class Component {
  * `);
  * }
  */
-export const Vader = {
+const Vader = {
+  /**
+   * @class Component
+   * @description Allows you to create a component
+   * @returns {void}
+   * @memberof {Vader}
+   * @example
+   * import { Vader } from "../../dist/vader/index.js";
+   * export class Home extends Vader.Component {
+   *  constructor() {
+   *   super();
+   * }
+   *  async render() {
+   *  return this.html(`
+   *     <div className="hero p-5">
+   *        <h1>Home</h1>
+   *     </div>
+   *   `);
+   *  }
+   * }
+   */
   Component: Component,
   useRef: useRef,
 };
 export const component = (name) => {
-  return new Component()
+  return new Component();
 };
 
 /**
@@ -652,12 +938,20 @@ let cache = {};
 /**
  * @function include
  * @description Allows you to include html file
- * @returns   - modified string with html content
+ * @returns {Promise}  - modified string with html content
  * @param {string}  path
- * @param {Object} options
  */
 
-export const include = (path, options) => {
+export const include = async (path) => {
+  if (
+    path.startsWith("/") &&
+    !path.includes("/src/") &&
+    !document.documentElement.outerHTML
+      .trim()
+      .includes("<!-- #vader-disable_relative-paths -->")
+  ) {
+    path = "/src/" + path;
+  }
   if (cache[path]) {
     return new Function(`return \`${cache[path]}\`;`)();
   }
@@ -669,13 +963,23 @@ export const include = (path, options) => {
       }
       return res.text();
     })
-    .then((data) => {
+    .then(async (data) => {
       // Handle includes
       let includes = data.match(/<include src="(.*)"\/>/gs);
       if (includes) {
         // Use Promise.all to fetch all includes concurrently
         const includePromises = includes.map((e) => {
+          // @ts-ignore
           let includePath = e.match(/<include src="(.*)"\/>/)[1];
+
+          if (
+            includePath.startsWith("/") &&
+            !document.documentElement.outerHTML
+              .trim()
+              .includes("<!-- #vader-disable_relative-paths -->")
+          ) {
+            includePath = "/src" + includePath;
+          }
           return include(includePath).then((includeData) => {
             // Replace the include tag with the fetched data
             data = data.replace(e, includeData);
@@ -692,4 +996,6 @@ export const include = (path, options) => {
         return new Function(`return \`${data}\`;`)();
       }
     });
-};
+};
+
+export default Vader;

package/vaderRouter.js

@@ -1,6 +1,6 @@
-// @ts-ignore
-window.$URL_PARAMS = {};
-// @ts-ignore
+ // @ts-ignore
+ window.$URL_PARAMS = {};
+ // @ts-ignore
 window.$URL_QUERY = {};
 
 /**
@@ -31,6 +31,7 @@ class VaderRouter {
      * Listener function for hash change events.
      * @type {Function}
      */
+    //@ts-ignore
     this.hashChangeListener = null;
 
     /**
@@ -43,6 +44,7 @@ class VaderRouter {
      * Flag indicating if custom error handling is enabled.
      * @type {boolean}
      */
+    //@ts-ignore
     this.customerror = null;
 
     /**
@@ -95,8 +97,9 @@ class VaderRouter {
     this.customerror = true;
   }
   handleRoute(method) {
+   
     let route = window.location.hash.substring(1);
-    // @ts-ignore
+ // @ts-ignore
     window.$CURRENT_URL = route;
 
     // remove query params from route
@@ -105,11 +108,12 @@ class VaderRouter {
     }
     route = route.split("/")[0] + "/" + route.split("/")[1];
     if (this.routes[route]) {
+       
       this.storedroutes.push(route);
       const req = {
-        // @ts-ignore
+         // @ts-ignore
         params: $URL_PARAMS ? $URL_PARAMS : {},
-        // @ts-ignore
+         // @ts-ignore
         query: $URL_QUERY ? $URL_QUERY : {},
         url: route,
         method: method ? method : "GET",
@@ -122,16 +126,19 @@ class VaderRouter {
           document.querySelector(selector).innerHTML = data;
         },
       };
-      if (typeof this.routes[route] === "function") {
+      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");
       }
+
+       
     }
   }
   /**
@@ -143,7 +150,7 @@ class VaderRouter {
    * @description used by start() to handle errors.
    */
 
-  handleError(type, data, res) {
+  handleError(type, data) {
     if (this.errorHandlers[type]) {
       this.errorHandlers[type](data);
     } else {
@@ -187,19 +194,17 @@ class VaderRouter {
       const params = {};
 
       for (let i = 0; i < paramNames.length; i++) {
+        //@ts-ignore
         params[paramNames[i]] = matches[i + 1];
       }
       if (
         path.includes(":") &&
         window.location.hash.substring(1).split("?")[1]
       ) {
+         
+
         return false;
       }
-      /**
-       * @alias query
-       * @type {Object}
-       * @property {Object} params - The params object.
-       */
       const query = {};
 
       const queryString = window.location.hash.substring(1).split("?")[1];
@@ -223,11 +228,11 @@ class VaderRouter {
         url: window.location.hash.substring(1),
         method: "GET",
       };
-      // @ts-ignore
+ // @ts-ignore
       window.$URL_PARAMS = params;
-      // @ts-ignore
+       // @ts-ignore
       window.$URL_QUERY = query;
-      // @ts-ignore
+       // @ts-ignore
       window.$CURRENT_URL = window.location.hash.substring(1);
       /**
        * @alias render
@@ -238,26 +243,23 @@ 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
+     // @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];
@@ -266,36 +268,36 @@ class VaderRouter {
   /**
    * @alias use
    * @param {String} pattern
-   * @param {Function} callback
+   * @param { void} callback
    * @returns {void}
    * @memberof VaderRouter
    * @description  Allows you to set routes to be used throughout your spa.
    */
-  use(pattern, callback = null) {
+  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];
       }
-
+  
       query = {};
-
+  
       const queryString = matches[paramNames.length]; // The last match is the query string
       if (queryString) {
         const queryParts = queryString.split("&");
@@ -305,11 +307,11 @@ class VaderRouter {
         }
       }
     }
-    // @ts-ignore
+   // @ts-ignore
     window.$URL_PARAMS = params;
-    // @ts-ignore
+     // @ts-ignore
     window.$URL_QUERY = query;
-
+  //@ts-ignore
     if (callback) {
       this.routes[pattern] = callback;
     } else {
@@ -317,16 +319,14 @@ class VaderRouter {
       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
+       // @ts-ignore
       document.readyState === "loaded" ||
       document.readyState === "interactive"
     ) {
@@ -345,16 +345,8 @@ class VaderRouter {
    */
   on(path, callback) {
     window.addEventListener("hashchange", () => {
-      /**
-       * @alias paramNames
-       * @typedef {Array}
-       */
-      const paramNames =  new Array();
-      /**
-       * @alias queryNames
-       * @typedef {Array}
-       */
-      const queryNames = new Array();
+      const paramNames = [];
+      const queryNames = [];
       const parsedPath = path
         .split("/")
         .map((part) => {
@@ -389,11 +381,11 @@ class VaderRouter {
       this.currentUrl = route;
       // @ts-ignore
       window.$CURRENT_URL = route;
-      // @ts-ignore
+       // @ts-ignore
       window.$URL_PARAMS = {};
       if (
         window.location.hash.substring(1).match(regex) &&
-        // @ts-ignore
+         // @ts-ignore
         this.routes[window.$CURRENT_URL]
       ) {
         this.storedroutes.push(window.location.hash.substring(1));
@@ -401,7 +393,7 @@ class VaderRouter {
         const params = {};
 
         for (let i = 0; i < paramNames.length; i++) {
-          // @ts-ignore
+          //@ts-ignore
           params[paramNames[i]] = matches[i + 1];
         }
         if (
@@ -422,7 +414,6 @@ 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];
           }
         }
@@ -433,7 +424,9 @@ class VaderRouter {
           method: "POST",
         };
         const res = {
-         
+          return: function (data) {
+            this.hooked = false;
+          },
           /**
            * @alias send
            * @param {String} selector
@@ -445,7 +438,7 @@ class VaderRouter {
            * res.send('#root', '<h1>Hello World</h1>');
            * */
           send: function (selector, data) {
-            // @ts-ignore
+            //@ts-ignore
             document.querySelector(selector).innerHTML = data;
           },
           /**
@@ -457,13 +450,13 @@ class VaderRouter {
            * @description  Allows you to perform actions when the currentRoute changes.
            */
           render: function (selector, data) {
-            // @ts-ignore
+            //@ts-ignore
             document.querySelector(selector).innerHTML = data;
           },
         };
-        // @ts-ignore
+         // @ts-ignore
         window.$URL_QUERY = query;
-        // @ts-ignore
+         // @ts-ignore
         window.$URL_PARAMS = params;
 
         /**
@@ -475,10 +468,10 @@ class VaderRouter {
          * @description  Allows you to perform actions when the currentRoute changes.
          */
         callback(req, res);
-      } else {
-        console.log("no route");
+      }else{
+        console.log('no route')
       }
     });
   }
 }
-export default VaderRouter;
+export default VaderRouter;