@aref-shojaei/router 1.0.2 → 1.1.0

package/src/route.js

@@ -1,104 +1,104 @@
-import Router from "./router.js"
-import View from "./view.js";
-import { InvalidArgumentTypeError } from "./exception.js"
-import RouteDTO from "./dto/route.js"
-
-
-/**
- * @abstract
- */
-export default class Route extends Router {
-    constructor() {
-        throw new Error(`${new.target.name} class must not be called with \"new\" keyword!`)
-    }
-
-    /**
-     * @param {string} route 
-     * @param {fucntion} callback 
-     * @returns {Route}
-     */   
-    static add(route, callback) {
-        if (typeof route !== "string") throw new InvalidArgumentTypeError("'route' must be a string!")
-        
-        if (typeof callback !== "function") throw new InvalidArgumentTypeError("'callback' must be a function!")
-
-
-        this._routes[this._routePrefix + route] = new RouteDTO({ template : callback })
-
-        this._currentRoute = route;
-
-        return this;
-    }
-
-    /**
-     * @param {string} prefix 
-     * @param {function} callback 
-     * @returns {Route}
-     */
-    static group(prefix, callback) {
-        if (typeof prefix !== "string" || !prefix.startsWith("/")) throw new InvalidArgumentTypeError("'prefix' must be a string!")
-        
-        if (typeof callback !== "function") throw new InvalidArgumentTypeError("'callback' must be a function!")
-
-
-        const previousPrefix = this._routePrefix 
-
-        this._routePrefix = prefix;
-
-        callback();
-
-        this._routePrefix = previousPrefix
-
-        return this;
-    }
-
-    /**
-     * @param {array} middlewares
-     * @returns {void}
-     */
-    static middleware(middlewares) {
-        if (!Array.isArray(middlewares)) throw new InvalidArgumentTypeError("'middlewares' must be an array!")
-
-        const isDefinedRoutePrefix = this._routePrefix ? true : false
-
-        // Add middlewares to single route
-        if (!isDefinedRoutePrefix) {
-            this._routes[this._routePrefix + this._currentRoute]["middlewares"].push(...middlewares);
-
-            return;
-        }
-
-        // Add middlewares to the group of routes
-        for (const route in this._routes) {
-            if (!route.startsWith(this._routePrefix)) continue;
-
-            this._routes[route]["middlewares"].push(...middlewares);
-        }
-    }
-
-    /**
-     * Set route page title
-     * @param {string} value
-     * @returns {void}
-     */
-    static title(value) {
-        if (typeof value !== "string") throw new InvalidArgumentTypeError("'value' must be a string!")
-
-        this._routes[this._routePrefix + this._currentRoute]["title"] = value
-    }
-
-    /**
-     * @param {string} to - Route pointer  
-     * @returns {string}
-     */
-    static redirect(to) {
-        if (typeof to !== "string" || !to.startsWith("/")) throw new InvalidArgumentTypeError("'to' must be a string starting route with \"/\"!")
-
-
-        this._setRouteToURL(to)
-
-        const { template, meta } = this._routes[to] ?? this._defaultRoute;
-
-        return View.render(template, meta)
-    }
+import Router from "./router.js"
+import View from "./view.js";
+import { InvalidArgumentTypeError } from "./exception.js"
+import RouteDTO from "./dto/route.js"
+
+
+/**
+ * @abstract
+ */
+export default class Route extends Router {
+    constructor() {
+        throw new Error(`${new.target.name} class must not be called with \"new\" keyword!`)
+    }
+
+    /**
+     * @param {string} route 
+     * @param {fucntion} callback 
+     * @returns {Route}
+     */   
+    static add(route, callback) {
+        if (typeof route !== "string") throw new InvalidArgumentTypeError("'route' must be a string!")
+        
+        if (typeof callback !== "function") throw new InvalidArgumentTypeError("'callback' must be a function!")
+
+
+        this._routes[this._routePrefix + route] = new RouteDTO({ template : callback })
+
+        this._currentRoute = route;
+
+        return this;
+    }
+
+    /**
+     * @param {string} prefix 
+     * @param {function} callback 
+     * @returns {Route}
+     */
+    static group(prefix, callback) {
+        if (typeof prefix !== "string" || !prefix.startsWith("/")) throw new InvalidArgumentTypeError("'prefix' must be a string!")
+        
+        if (typeof callback !== "function") throw new InvalidArgumentTypeError("'callback' must be a function!")
+
+
+        const previousPrefix = this._routePrefix 
+
+        this._routePrefix = prefix;
+
+        callback();
+
+        this._routePrefix = previousPrefix
+
+        return this;
+    }
+
+    /**
+     * @param {array} middlewares
+     * @returns {void}
+     */
+    static middleware(middlewares) {
+        if (!Array.isArray(middlewares)) throw new InvalidArgumentTypeError("'middlewares' must be an array!")
+
+        const isDefinedRoutePrefix = this._routePrefix ? true : false
+
+        // Add middlewares to single route
+        if (!isDefinedRoutePrefix) {
+            this._routes[this._routePrefix + this._currentRoute]["middlewares"].push(...middlewares);
+
+            return;
+        }
+
+        // Add middlewares to the group of routes
+        for (const route in this._routes) {
+            if (!route.startsWith(this._routePrefix)) continue;
+
+            this._routes[route]["middlewares"].push(...middlewares);
+        }
+    }
+
+    /**
+     * Set route page title
+     * @param {string} value
+     * @returns {void}
+     */
+    static title(value) {
+        if (typeof value !== "string") throw new InvalidArgumentTypeError("'value' must be a string!")
+
+        this._routes[this._routePrefix + this._currentRoute]["title"] = value
+    }
+
+    /**
+     * @param {string} to - Route pointer  
+     * @returns {string}
+     */
+    static redirect(to) {
+        if (typeof to !== "string" || !to.startsWith("/")) throw new InvalidArgumentTypeError("'to' must be a string starting route with \"/\"!")
+
+
+        this._setRouteToURL(to)
+
+        const { template, meta } = this._routes[to] ?? this._defaultRoute;
+
+        return View.render(template, meta)
+    }
 }

package/src/router.js

@@ -1,208 +1,208 @@
-import Page from "./page.js"
-import View from "./view.js";
-import Selector from "./utils/selector.js";
-import Element from "./utils/element.js";
-import { InvalidArgumentTypeError } from "./exception.js";
-import RouteDTO from "./dto/route.js"
-
-
-/**
- * @abstract
- */
-export default class Router {
-    static _window
-
-    static _document
-
-    static _rootElement = "#root"
-
-    static _routes = {};
-    
-    static _currentRoute = "";
-    
-    static _routePrefix = "";
-    
-    static _defaultRoute = new RouteDTO({
-        title : "404",
-        template : () => "404 | Page not found!"
-    })
-
-
-
-
-    constructor() {
-        throw new Error(`${new.target.name} class must not be called with \"new\" keyword!`)
-    }
-
-    /**
-     * @param {object} params 
-     */
-    static configure({ window, document, selector }) {
-        if (typeof window !== "object") throw new InvalidArgumentTypeError("'window' must be a Window object!")
-                    
-        if (typeof document !== "object") throw new InvalidArgumentTypeError("'document' must be a Document object!")
-        
-        if (selector && typeof selector !== "string") throw new InvalidArgumentTypeError("'selector' must be a string!")
-        
-        
-        if (selector) this._rootElement = selector
-        
-
-        this._window = window
-
-        this._document = document
-    }
-
-    /**
-     * @param {string} target 
-     * @returns {object}
-     */
-    static #findRoute(target) {
-        for (const route in this._routes) {
-            const regex = new RegExp(`^${route.replace(/\{(\w+)\}/g, '(?<$1>[^/{}]+)')}$`);
-        
-            if (!regex.test(target)) continue
-
-            const { groups } = regex.exec(target)
-
-            this.#setRouteQuery(route)
-
-            this.#setRouteParams(route, groups)
-
-            return this._routes[route]
-        }
-    }
-
-    /**
-     * @param {string} route 
-     * @returns {boolean}
-     */
-    static #setRouteQuery(route) {
-        const query = {}
-        
-        const { search } = location
-        
-        if (!search.length) return false
-
-
-        search.slice(1).split("&").forEach(item => {
-            const [key, value] = item.split("=")
-        
-            query[key] = value
-        })
-
-        this._routes[route]["meta"]["query"] = {...query}
-    }
-
-    /**
-     * @param {string} route 
-     * @param {object} params
-     * @returns {void} 
-     */
-    static #setRouteParams(route, params) {
-        this._routes[route]["meta"]["params"] = {...params}
-    }
-
-    /**
-     * @param {string} route
-     * @param {Window} window
-     * @returns {void} 
-     */
-    static _setRouteToURL(route) {
-        if (typeof route !== "string" || !route.startsWith("/")) throw new InvalidArgumentTypeError("'route' must be a string starting with \"/\"!")
-
-        this._window.history.pushState({}, "", route)
-    }
-
-    /**
-     * @param {string} route
-     * @returns {void} 
-     */
-    static #injectTemplateToDOM(route) {
-        try {
-            const { title, template, middlewares, meta } = this.#findRoute(route) ?? this._defaultRoute
-
-            Page.setTitle(title)
-            
-            this.#applyMiddlewares(middlewares)
-            
-            this._document.querySelector(this._rootElement).innerHTML = View.render(template, meta)
-        } catch (error) {
-            console.error("Error to inject route template:", route, error);
-        }
-    }
-
-    /**
-     * @returns {void}
-     */
-    static #activeHistroyNavigation() {
-        this._window.addEventListener("popstate", event => {
-            const route = event.target.location.pathname
-
-            this.#injectTemplateToDOM(route)
-        })
-    }
-
-    /**
-     * @returns {void}
-     */    
-    static #changeRoutebyRequest() {
-        const { pathname } = this._window.location
-
-        this.#injectTemplateToDOM(pathname)
-    }
-
-    /**
-     * @returns {void}
-     */
-    static #changeRoutebyLink() {
-        Selector.findAll("a", this._document).each(anchor => {
-            Element.onClick(anchor, (event) => {
-                if (event.target.hasAttribute("data-link")) return false
-
-                event.preventDefault()
-
-                const route = event.target.getAttribute("href")
-
-                this._setRouteToURL(route)
-
-                this.#injectTemplateToDOM(route)
-            })
-        })
-    }
-
-    /**
-     * Executes middleware functions
-     * @param {array} middlewares
-     * @returns {void}
-     */
-    static #applyMiddlewares(middlewares) {
-        try {
-            middlewares.length && middlewares.forEach(middleware => middleware())
-        } catch (error) {
-            console.error("Error executing middleware:", error);
-        }
-    }
-
-    /**
-     * Initializes the router
-     * @param {function} callback
-     * @returns {void}
-     */
-    static run(callback = () => {}) {
-        if (typeof callback !== "function") throw new InvalidArgumentTypeError("'callback' must be a function!")
-        
-
-        Page.setDocument(this._document)
-        
-        Page.setRootTitle(this._document.title)
-
-        this.#activeHistroyNavigation()
-
-        this.#changeRoutebyRequest()
-
-        this.#changeRoutebyLink()
-
-        callback()
-    }
+import Page from "./page.js"
+import View from "./view.js";
+import Selector from "./utils/selector.js";
+import Element from "./utils/element.js";
+import { InvalidArgumentTypeError } from "./exception.js";
+import RouteDTO from "./dto/route.js"
+
+
+/**
+ * @abstract
+ */
+export default class Router {
+    static _window
+
+    static _document
+
+    static _rootElement = "#root"
+
+    static _routes = {};
+    
+    static _currentRoute = "";
+    
+    static _routePrefix = "";
+    
+    static _defaultRoute = new RouteDTO({
+        title : "404",
+        template : () => "404 | Page not found!"
+    })
+
+
+
+
+    constructor() {
+        throw new Error(`${new.target.name} class must not be called with \"new\" keyword!`)
+    }
+
+    /**
+     * @param {object} params 
+     */
+    static configure({ window, document, selector }) {
+        if (typeof window !== "object") throw new InvalidArgumentTypeError("'window' must be a Window object!")
+                    
+        if (typeof document !== "object") throw new InvalidArgumentTypeError("'document' must be a Document object!")
+        
+        if (selector && typeof selector !== "string") throw new InvalidArgumentTypeError("'selector' must be a string!")
+        
+        
+        if (selector) this._rootElement = selector
+        
+
+        this._window = window
+
+        this._document = document
+    }
+
+    /**
+     * @param {string} target 
+     * @returns {object}
+     */
+    static #findRoute(target) {
+        for (const route in this._routes) {
+            const regex = new RegExp(`^${route.replace(/\{(\w+)\}/g, '(?<$1>[^/{}]+)')}$`);
+        
+            if (!regex.test(target)) continue
+
+            const { groups } = regex.exec(target)
+
+            this.#setRouteQuery(route)
+
+            this.#setRouteParams(route, groups)
+
+            return this._routes[route]
+        }
+    }
+
+    /**
+     * @param {string} route 
+     * @returns {boolean}
+     */
+    static #setRouteQuery(route) {
+        const query = {}
+        
+        const { search } = location
+        
+        if (!search.length) return false
+
+
+        search.slice(1).split("&").forEach(item => {
+            const [key, value] = item.split("=")
+        
+            query[key] = value
+        })
+
+        this._routes[route]["meta"]["query"] = {...query}
+    }
+
+    /**
+     * @param {string} route 
+     * @param {object} params
+     * @returns {void} 
+     */
+    static #setRouteParams(route, params) {
+        this._routes[route]["meta"]["params"] = {...params}
+    }
+
+    /**
+     * @param {string} route
+     * @param {Window} window
+     * @returns {void} 
+     */
+    static _setRouteToURL(route) {
+        if (typeof route !== "string" || !route.startsWith("/")) throw new InvalidArgumentTypeError("'route' must be a string starting with \"/\"!")
+
+        this._window.history.pushState({}, "", route)
+    }
+
+    /**
+     * @param {string} route
+     * @returns {void} 
+     */
+    static #injectTemplateToDOM(route) {
+        try {
+            const { title, template, middlewares, meta } = this.#findRoute(route) ?? this._defaultRoute
+
+            Page.setTitle(title)
+            
+            this.#applyMiddlewares(middlewares)
+            
+            this._document.querySelector(this._rootElement).innerHTML = View.render(template, meta)
+        } catch (error) {
+            console.error("Error to inject route template:", route, error);
+        }
+    }
+
+    /**
+     * @returns {void}
+     */
+    static #activeHistroyNavigation() {
+        this._window.addEventListener("popstate", event => {
+            const route = event.target.location.pathname
+
+            this.#injectTemplateToDOM(route)
+        })
+    }
+
+    /**
+     * @returns {void}
+     */    
+    static #changeRoutebyRequest() {
+        const { pathname } = this._window.location
+
+        this.#injectTemplateToDOM(pathname)
+    }
+
+    /**
+     * @returns {void}
+     */
+    static #changeRoutebyLink() {
+        Selector.findAll("a", this._document).each(anchor => {
+            Element.onClick(anchor, (event) => {
+                if (event.target.hasAttribute("data-link")) return false
+
+                event.preventDefault()
+
+                const route = event.target.getAttribute("href")
+
+                this._setRouteToURL(route)
+
+                this.#injectTemplateToDOM(route)
+            })
+        })
+    }
+
+    /**
+     * Executes middleware functions
+     * @param {array} middlewares
+     * @returns {void}
+     */
+    static #applyMiddlewares(middlewares) {
+        try {
+            middlewares.length && middlewares.forEach(middleware => middleware())
+        } catch (error) {
+            console.error("Error executing middleware:", error);
+        }
+    }
+
+    /**
+     * Initializes the router
+     * @param {function} callback
+     * @returns {void}
+     */
+    static run(callback = () => {}) {
+        if (typeof callback !== "function") throw new InvalidArgumentTypeError("'callback' must be a function!")
+        
+
+        Page.setDocument(this._document)
+        
+        Page.setRootTitle(this._document.title)
+
+        this.#activeHistroyNavigation()
+
+        this.#changeRoutebyRequest()
+
+        this.#changeRoutebyLink()
+
+        callback()
+    }
 }

package/src/utils/element.js

@@ -1,24 +1,24 @@
-import { InvalidArgumentTypeError } from "../exception.js"
-
-/**
- * @abstract
- */
-export default class Element {
-    constructor() {
-        throw new Error(`${new.target.name} class must not be called with \"new\" keyword!`)
-    }
-
-    /**
-     * @param {HTMLElement} element 
-     * @param {function} callback 
-     * @returns {void}
-     */
-    static onClick(element, callback) {
-        if (typeof element !== "object") throw new InvalidArgumentTypeError("'element' must be an HTMLElement object!")
-
-        if (typeof callback !== "function") throw new InvalidArgumentTypeError("'callback' must be a function!")
-
-        
-        element.addEventListener("click", callback)
-    }
+import { InvalidArgumentTypeError } from "../exception.js"
+
+/**
+ * @abstract
+ */
+export default class Element {
+    constructor() {
+        throw new Error(`${new.target.name} class must not be called with \"new\" keyword!`)
+    }
+
+    /**
+     * @param {HTMLElement} element 
+     * @param {function} callback 
+     * @returns {void}
+     */
+    static onClick(element, callback) {
+        if (typeof element !== "object") throw new InvalidArgumentTypeError("'element' must be an HTMLElement object!")
+
+        if (typeof callback !== "function") throw new InvalidArgumentTypeError("'callback' must be a function!")
+
+        
+        element.addEventListener("click", callback)
+    }
 }