npm - @aref-shojaei/router - Versions diffs - 1.0.1 - Mend

@aref-shojaei/router 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (25) hide show

package/.babelrc +3 -0
package/README.md +205 -0
package/build/router.min.js +1 -0
package/example/assets/css/styles.css +46 -0
package/example/assets/js/app.js +8 -0
package/example/assets/js/router.min.js +1 -0
package/example/index.html +26 -0
package/example/package.json +18 -0
package/example/server.js +18 -0
package/index.js +5 -0
package/package.json +43 -0
package/src/dto/route.js +18 -0
package/src/exception.js +6 -0
package/src/page.js +92 -0
package/src/route.js +104 -0
package/src/router.js +208 -0
package/src/utils/element.js +23 -0
package/src/utils/selector.js +58 -0
package/src/view.js +25 -0
package/tests/unit/element.test.js +33 -0
package/tests/unit/page.test.js +49 -0
package/tests/unit/route.test.js +83 -0
package/tests/unit/router.test.js +56 -0
package/tests/unit/selector.test.js +42 -0
package/tests/unit/view.test.js +47 -0

package/.babelrc ADDED Viewed

@@ -0,0 +1,3 @@
+{
+    "presets": ["@babel/preset-env"]
+}

package/README.md ADDED Viewed

@@ -0,0 +1,205 @@
+![SPA (1)](https://github.com/user-attachments/assets/7e76a68b-84f0-4fa7-b961-26319d3ed3bc)
+<h1 align='center'>Router - SPA Application</h1>
+> app.js
+```js
+import { Router, Route } from "@aref-shojaei/router"
+// Confgiure router system
+Router.configure({ window, document })
+// Single Route
+Route.addRoute("/", () => "Welcome Page")
+// Group Routes
+Route.group("/auth", () => {
+    Route.addRoute("/login", () => "Login Page")
+    Route.addRoute("/register", () => "Register Page")
+})
+// Dynamic Route
+Route.addRoute("/users/{id}", ({ params : { name } }) => `User#${id} Page`)
+// Redirect Routes
+Route.addRoute("/redirection", () => Route.redirect("/"))
+// Initialize the router
+Router.run()
+```
+> index.html
+```html
+<html>
+    <head>
+        <title>SPA App</title>
+    </head>
+    <body>
+        <ul>
+            <!-- Redirect to local links -->
+            <li><a href="/">Home</a></li>
+            <li><a href="/auth/login">Login</a></li>
+            <li><a href="/auth/register">Register</a></li>
+            <li><a href="/users/2904152">Admin Page</a></li>
+            <li><a href="/redirection">Redirect to a page</a></li>
+            <!-- Redirect to external resources -->
+            <li><a href="https://github.com/ArefShojaei/Router" data-link>Github</a></li>
+        </ul>
+        <div id="root"></div>
+        <script src="app.js"></script>
+    </body>
+</html>
+```
+##  Guide :
+1. [Introduction](#introduction)
+    * [What is this library ?](#what-is-this-library)
+    * [Why should I use it ?](#why-should-i-use-it)
+    * [Is it work like SPA ?](#is-it-work-like-spa)
+2. [installation](#installation)
+3. [tutorial](#tutorial)
+<br/>
+## Introduction
+<br/>
+### What is this library ?
+> This library is for handling routes in the browser env by HTTP requests!
+```bash
+* Back-end:
+[Request] GET /blog  => [Response] HTML | JSON
+* Front-end:
+Page -> [Route] /blog -> Update content -> without refereshing -> Render template
+```
+<br>
+### Why should I use it ?
+> If you like to have application or pages not to need to referesh again for every action | request + high performance for loading content (SPA)
+<br>
+### Is it work like SPA ?
+> Sure You can get this options to use the library:
+* Add Signle Route
+* Add the group routes
+* Add middleware to every routes (back-end concept)
+* Add route redirection
+* Add pages as component or template files to specific route
+* More ...
+<br>
+## Installation
+> NPM
+```bash
+npm i @aref-shojaei/router
+```
+> Yarn
+```bash
+yarn add @aref-shojaei/router
+```
+<br/>
+> Setup - app.js
+```js
+import { Router , Route } from "@aref-shojaei/router"
+Route.addRoute("/", () => "Welcome Page")
+Router.run()
+```
+**Note: Don't forget to read guides again!**
+<br/>
+## Tutorial
+> Route
+* Single type
+* Group type
+* Dynamic type
+```js
+import { Route } from "@aref-shojaei/router"
+// Single route
+Route.addRoute("/", () => "Welcome Page")
+// Group routes
+Route.group("/auth", () => {
+    Route.addRoute("/login", () => "Welcome Page")
+    Route.addRoute("/register", () => "Welcome Page")
+})
+// Dynamic route with params
+Route.addRoute("/users/{id}", ({ params : { id } }) => `User #{id} Page`)
+Route.addRoute("/courses/{category}/{name}", ({ params : { category, name } }) => `Course Detail: '${category}/${name}'  Page`)
+```
+<br/>
+> Middleware
+* Note: Midddleware is a function to call before every routes
+```js
+import { Route } from "@aref-shojaei/router"
+// Middleware
+const logger = () => console.log("[LOG] my custom middleware")
+// Single route with middleware
+Route.addRoute("/", () => "Welcome Page").middleware([logger])
+// Group routes with middleware
+Route.group("/auth", () => {
+    Route.addRoute("/login", () => "Welcome Page")
+    Route.addRoute("/register", () => "Welcome Page")
+}).middleware([logger])
+```
+<br/>
+> Route Redirection
+```js
+import { Route } from "@aref-shojaei/router"
+Route.addRoute("/auth/login", () => "Welcome Page")
+Route.addRoute("/dashboard", () => Route.redirect("/auth/login"))
+```
+<br/>
+> Route page title
+* Note: If I don't use it, page title is applied from document.title by default!
+```js
+import { Route } from "@aref-shojaei/router"
+Route.addRoute("/", () => "Welcome Page").title("Custom Page Title | SPA")
+```

package/build/router.min.js ADDED Viewed

@@ -0,0 +1 @@

+ (()=>{"use strict";class t extends Error{constructor(t){super(t),this.name="Invalid argument error"}}class e{static#t="";static#e="";static#s;constructor(){throw new Error(`${new.target.name} class must not be called with "new" keyword!`)}static setDocument(e){if("object"!=typeof e)throw new t("'document' must be a Document object!");this.#s=e}static _getDocument(){return this.#s}static setTitle(e){if("string"!=typeof e)throw new t("'title' must be a string!");this.#e=e,this.#i()}static getTitle(){return this.#e||this.#t}static setRootTitle(e){if("string"!=typeof e)throw new t("'value' must be a string!");this.#t=e,this.#i()}static getRootTitle(){return this.#t}static#i(){const t=this._getDocument();this.getTitle()?t.title=this.getTitle():t.title=this.getRootTitle()}}class s{constructor(){throw new Error(`${new.target.name} class must not be called with "new" keyword!`)}static render(e,s={}){if("function"!=typeof e)throw new t("'template' must be a function!");try{return e(s)}catch(t){console.error("Error during template rendering: ",t)}}}class i{static#o=[];constructor(){throw new Error(`${new.target.name} class must not be called with "new" keyword!`)}static findAll(e,s){if("string"!=typeof e)throw new t("'element' must be an HTMLElement object!");if("object"!=typeof s)throw new t("'document' must be a Document object!");const i=s.querySelectorAll(e);return this._setElements(i),this}static each(e){if("function"!=typeof e)throw new t("'callback' must be a function!");const s=this._getElements();this.#o.length&&s.forEach(e)}static _setElements(t){this.#o.push(...t)}static _getElements(){return this.#o}}class o{constructor(){throw new Error(`${new.target.name} class must not be called with "new" keyword!`)}static onClick(e,s){if("object"!=typeof e)throw new t("'element' must be an HTMLElement object!");if("function"!=typeof s)throw new t("'callback' must be a function!");e.addEventListener("click",s)}}class r{title="";template;middlewares=[];meta={params:{},query:{}};constructor({title:t,template:e}){this.title=t??this.title,this.template=e}}class n{static _window;static _document;static _rootElement="#root";static _routes={};static _currentRoute="";static _routePrefix="";static _defaultRoute=new r({title:"404",template:()=>"404 | Page not found!"});constructor(){throw new Error(`${new.target.name} class must not be called with "new" keyword!`)}static configure({window:e,document:s,selector:i}){if("object"!=typeof e)throw new t("'window' must be a Window object!");if("object"!=typeof s)throw new t("'document' must be a Document object!");if(i&&"string"!=typeof i)throw new t("'selector' must be a string!");i&&(this._rootElement=i),this._window=e,this._document=s}static#r(t){for(const e in this._routes){const s=new RegExp(`^${e.replace(/\{(\w+)\}/g,"(?<$1>[^/{}]+)")}$`);if(!s.test(t))continue;const{groups:i}=s.exec(t);return this.#n(e),this.#a(e,i),this._routes[e]}}static#n(t){const e={},{search:s}=location;if(!s.length)return!1;s.slice(1).split("&").forEach((t=>{const[s,i]=t.split("=");e[s]=i})),this._routes[t].meta.query={...e}}static#a(t,e){this._routes[t].meta.params={...e}}static _setRouteToURL(e){if("string"!=typeof e||!e.startsWith("/"))throw new t("'route' must be a string starting with \"/\"!");this._window.history.pushState({},"",e)}static#c(t){try{const{title:i,template:o,middlewares:r,meta:n}=this.#r(t)??this._defaultRoute;e.setTitle(i),this.#u(r),this._document.querySelector(this._rootElement).innerHTML=s.render(o,n)}catch(e){console.error("Error to inject route template:",t,e)}}static#l(){this._window.addEventListener("popstate",(t=>{const e=t.target.location.pathname;this.#c(e)}))}static#h(){const{pathname:t}=this._window.location;this.#c(t)}static#w(){i.findAll("a",this._document).each((t=>{o.onClick(t,(t=>{if(t.target.hasAttribute("data-link"))return!1;t.preventDefault();const e=t.target.getAttribute("href");this._setRouteToURL(e),this.#c(e)}))}))}static#u(t){try{t.length&&t.forEach((t=>t()))}catch(t){console.error("Error executing middleware:",t)}}static run(s=(()=>{})){if("function"!=typeof s)throw new t("'callback' must be a function!");e.setDocument(this._document),e.setRootTitle(this._document.title),this.#l(),this.#h(),this.#w(),s()}}window.Router=n,window.Route=class extends n{constructor(){throw new Error(`${new.target.name} class must not be called with "new" keyword!`)}static addRoute(e,s){if("string"!=typeof e)throw new t("'route' must be a string!");if("function"!=typeof s)throw new t("'callback' must be a function!");return this._routes[this._routePrefix+e]=new r({template:s}),this._currentRoute=e,this}static group(e,s){if("string"!=typeof e||!e.startsWith("/"))throw new t("'prefix' must be a string!");if("function"!=typeof s)throw new t("'callback' must be a function!");const i=this._routePrefix;return this._routePrefix=e,s(),this._routePrefix=i,this}static middleware(e){if(!Array.isArray(e))throw new t("'middlewares' must be an array!");if(this._routePrefix)for(const t in this._routes)t.startsWith(this._routePrefix)&&this._routes[t].middlewares.push(...e);else this._routes[this._routePrefix+this._currentRoute].middlewares.push(...e)}static title(e){if("string"!=typeof e)throw new t("'value' must be a string!");this._routes[this._routePrefix+this._currentRoute].title=e}static redirect(e){if("string"!=typeof e||!e.startsWith("/"))throw new t("'to' must be a string starting route with \"/\"!");this._setRouteToURL(e);const{template:i,meta:o}=this._routes[e]??this._defaultRoute;return s.render(i,o)}}})();

package/example/assets/css/styles.css ADDED Viewed

@@ -0,0 +1,46 @@
+* {
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    font-family: sans-serif;
+}
+body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 24px;
+}
+ul {
+    display: flex;
+    align-items: center;
+    margin-top: 16px;
+}
+ul li {
+    margin: 0 24px;
+    list-style: none;
+}
+ul li a {
+    padding: 4 8px;
+    color: #81a6f4;
+    text-decoration: none;
+}
+ul li a:hover {
+    color: #2b2b2a;
+    transition: all .5s ease;
+}
+#root {
+    padding: 16px;
+    text-align: center;
+    margin-top: 40px;
+    background: #ded7d7;
+    width: 600px;
+    height: 250px;
+    border-radius: 16px;
+}

package/example/assets/js/app.js ADDED Viewed

@@ -0,0 +1,8 @@
+Router.configure({ window, document })
+Route.addRoute("/", () => "Welcome Page")
+Route.addRoute("/users", () => "Users Page")
+Route.addRoute("/users/{name}", ({ params : { name } }) => `User #${name} Page`)
+Route.addRoute("/redirection", () => Route.redirect("/"))
+Router.run()

package/example/assets/js/router.min.js ADDED Viewed

@@ -0,0 +1 @@

package/example/index.html ADDED Viewed

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>SPA | JavaScript</title>
+        <link rel="stylesheet" href="/assets/css/styles.css">
+    </head>
+    <body>
+        <h1>SPA Page</h1>
+        <ul>
+            <li><a href="/">Welcome</a></li>
+            <li><a href="/users">Users</a></li>
+            <li><a href="/blog">Blog</a></li>
+            <li><a href="/test">404 | Not Found</a></li>
+            <li><a href="/redirection">Redirection</a></li>
+            <li><a href="https://github.com/ArefShojaei/Lite-PHP/" data-link>Github</a></li>
+        </ul>
+        <div id="root"></div>
+        <script src="/assets/js/router.min.js"></script>
+        <script src="/assets/js/app.js"></script>
+    </body>
+</html>

package/example/package.json ADDED Viewed

@@ -0,0 +1,18 @@
+{
+  "name": "example",
+  "version": "1.0.0",
+  "description": "",
+  "main": "server.js",
+  "scripts": {
+    "start": "nodemon server.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "express": "^4.21.2"
+  },
+  "devDependencies": {
+    "nodemon": "^3.1.9"
+  }
+}

package/example/server.js ADDED Viewed

@@ -0,0 +1,18 @@
+const express = require('express');
+const path = require('path');
+const app = express()
+const PORT = 8000
+app.use(express.static(path.join(__dirname)))
+app.get("/", (req, res) => {
+    try {
+        const filePath = path.join(__dirname, "\\index.html")
+        res.status(200).sendFile(filePath)
+    } catch (error) {
+        console.log(error);
+    }
+})
+app.listen(PORT, () => console.log(`Server is running -> http://localhost:${PORT}`))

package/index.js ADDED Viewed

@@ -0,0 +1,5 @@
+import Router from "./src/router.js";
+import Route from "./src/route.js";
+export { Router, Route }

package/package.json ADDED Viewed

@@ -0,0 +1,43 @@
+{
+  "name": "@aref-shojaei/router",
+  "version": "1.0.1",
+  "description": "JavaScript Router (SPA)",
+  "main": "index.js",
+  "directories": {
+    "test": "tests",
+    "src": "src",
+    "build": "build",
+    "example": "example"
+  },
+  "scripts": {
+    "test": "jest"
+  },
+  "jest": {
+    "transform": {
+      "^.+\\.js$": "babel-jest"
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ArefShojaei/Router.git"
+  },
+  "keywords": [
+    "router",
+    "routing",
+    "route",
+    "spa"
+  ],
+  "author": "Aref Shojaei",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/ArefShojaei/Router/issues"
+  },
+  "homepage": "https://github.com/ArefShojaei/Router#readme",
+  "devDependencies": {
+    "@babel/core": "^7.26.0",
+    "@babel/preset-env": "^7.26.0",
+    "babel-jest": "^29.7.0",
+    "jest": "^29.7.0",
+    "jsdom": "^25.0.1"
+  }
+}

package/src/dto/route.js ADDED Viewed

@@ -0,0 +1,18 @@
+export default class Route {
+    title = ""
+    template
+    middlewares = []
+    meta = {
+        params : {},
+        query : {},
+    }
+    constructor({ title, template }) {
+        this.title = title ?? this.title
+        this.template = template
+    }
+}

package/src/exception.js ADDED Viewed

@@ -0,0 +1,6 @@
+export class InvalidArgumentTypeError extends Error {
+    constructor(message) {
+        super(message)
+        this.name = "Invalid argument error"
+    }
+}

package/src/page.js ADDED Viewed

@@ -0,0 +1,92 @@
+import { InvalidArgumentTypeError } from "./exception.js"
+/**
+ * @abstract
+ */
+export default class Page {
+    /**
+     * Default page title
+     */
+    static #root = ""
+    /**
+     * Updated page title
+     */
+    static #title = ""
+    static #document
+    constructor() {
+        throw new Error(`${new.target.name} class must not be called with \"new\" keyword!`)
+    }
+    /**
+     * @param {Document} document
+     */
+    static setDocument(document) {
+        if (typeof document !== "object") throw new InvalidArgumentTypeError("'document' must be a Document object!")
+        this.#document = document
+    }
+    /**
+     * @returns {Document}
+     */
+    static _getDocument() {
+        return this.#document
+    }
+    /**
+     * @param {string} value
+     * @returns {void}
+     */
+    static setTitle(value) {
+        if (typeof value !== "string") throw new InvalidArgumentTypeError("'title' must be a string!")
+        this.#title = value
+        this.#updateTitle()
+    }
+    /**
+     * @param {string} value
+     * @returns {void}
+     */
+     static getTitle() {
+        return this.#title || this.#root
+    }
+    /**
+     * @param {string} value
+     * @returns {void}
+     */
+    static setRootTitle(value) {
+        if (typeof value !== "string") throw new InvalidArgumentTypeError("'value' must be a string!")
+        this.#root = value
+        this.#updateTitle()
+    }
+    /**
+     * @returns {string}
+     */
+    static getRootTitle() {
+        return this.#root
+    }
+    /**
+     * @returns {void}
+     */
+    static #updateTitle() {
+        const document = this._getDocument()
+        !this.getTitle()
+            ? (document.title = this.getRootTitle())
+            : (document.title = this.getTitle())
+    }
+}

package/src/route.js ADDED Viewed

@@ -0,0 +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 addRoute(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 ADDED Viewed

@@ -0,0 +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()
+    }
+}

package/src/utils/element.js ADDED Viewed

@@ -0,0 +1,23 @@
+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
+     */
+    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)
+    }
+}

package/src/utils/selector.js ADDED Viewed

@@ -0,0 +1,58 @@
+import { InvalidArgumentTypeError } from "../exception.js"
+/**
+ * @abstract
+ */
+export default class Selector {
+    static #elements = []
+    constructor() {
+        throw new Error(`${new.target.name} class must not be called with \"new\" keyword!`)
+    }
+    /**
+     * @param {HTMLAnchorElement} element
+     * @param {Document} document
+     * @returns {Selector}
+     */
+    static findAll(element, document) {
+        if (typeof element !== "string") throw new InvalidArgumentTypeError("'element' must be an HTMLElement object!")
+        if (typeof document !== "object") throw new InvalidArgumentTypeError("'document' must be a Document object!")
+        const elements = document.querySelectorAll(element)
+        this._setElements(elements)
+        return this
+    }
+    /**
+     * @param {function} callback
+     * @returns {void}
+     */
+    static each(callback) {
+        if (typeof callback !== "function") throw new InvalidArgumentTypeError("'callback' must be a function!")
+        const elements = this._getElements()
+        if (this.#elements.length) elements.forEach(callback)
+    }
+    /**
+     * @param {array} elements
+     */
+    static _setElements(elements) {
+        this.#elements.push(...elements)
+    }
+    /**
+     * @returns {array}
+     */
+    static _getElements() {
+        return this.#elements
+    }
+}

package/src/view.js ADDED Viewed

@@ -0,0 +1,25 @@
+import { InvalidArgumentTypeError } from "./exception.js"
+/**
+ * @abstract
+ */
+export default class View {
+    constructor() {
+        throw new Error(`${new.target.name} class must not be called with \"new\" keyword!`)
+    }
+    /**
+     * @param {function} template
+     * @param {object} data
+     * @returns {string}
+     */
+    static render(template, data = {}) {
+        if (typeof template !== "function") throw new InvalidArgumentTypeError("'template' must be a function!")
+        try {
+            return template(data)
+        } catch (error) {
+            console.error("Error during template rendering: ", error);
+        }
+    }
+}

package/tests/unit/element.test.js ADDED Viewed

@@ -0,0 +1,33 @@
+import { JSDOM } from "jsdom"
+import Element from "../../src/utils/element"
+describe("Element tests", () => {
+    let documentInstance
+    beforeEach(() => {
+        const { window : { document } } = new JSDOM(`
+            <html>
+                <head>
+                    <title>SPA Page</title>
+                </head>
+                <body>
+                    <a href='/'>Home page</a>
+                </body>
+            </html>
+        `)
+        documentInstance = document
+    })
+    it("should prevent instantiation of the class", () => {
+        expect(() => new Element).toThrow()
+    })
+    it("should fire click event", () => {
+        const link = documentInstance.querySelector("a")
+        Element.onClick(link , (event) => expect(typeof event).toBe(Event))
+    })
+})

package/tests/unit/page.test.js ADDED Viewed

@@ -0,0 +1,49 @@
+import { JSDOM } from "jsdom"
+import Page from "../../src/page.js"
+describe("Page tests", () => {
+    let documentInstance
+    const titles = {
+        default : "SPA Page",
+        custom : "Custom Page",
+    }
+    beforeEach(() => {
+        const { window : { document } } = new JSDOM(`
+            <html>
+                <head>
+                    <title>${titles["default"]}</title>
+                </head>
+                <body>
+                    <a href='/'>Home page</a>
+                </body>
+            </html>
+        `)
+        documentInstance = document
+        Page.setDocument(documentInstance)
+    })
+    it("should prevent instantiation of the class", () => {
+        expect(() => new Page).toThrow()
+    })
+    it("should set page default title", () => {
+        Page.setRootTitle(documentInstance.title)
+        expect(Page.getRootTitle()).toBeDefined()
+        expect(Page.getRootTitle()).toBe(titles["default"])
+        expect(typeof Page.getRootTitle()).toBe("string")
+    })
+    it("should set custom page title", () => {
+        Page.setTitle(titles["custom"])
+        expect(Page.getTitle()).toBeDefined()
+        expect(Page.getTitle()).toBe(titles["custom"])
+        expect(typeof Page.getTitle()).toBe("string")
+    })
+})

package/tests/unit/route.test.js ADDED Viewed

@@ -0,0 +1,83 @@
+import Route from "../../src/route.js"
+describe("Route tests", () => {
+    it("should add a single route", () => {
+        const route = "/"
+        const template = () => "Welcome Page"
+        Route.addRoute(route, template)
+        const routes = Route._routes
+        expect(routes[route]).toBeDefined()
+    })
+    it("should add the group route", () => {
+        const routePrefix = "/auth"
+        const route = "/login"
+        const template = () => "Login Page"
+        Route.group(routePrefix, () => {
+            Route.addRoute(route, template)
+        })
+        const routes = Route._routes
+        expect(routes[routePrefix + route]).toBeDefined()
+        expect(typeof routes[routePrefix + route]).toBe("object")
+    })
+    it("should add a dynamic route", () => {
+        const route = "/users/{id}"
+        const template = ({ params: { id } }) => `User #${id}`
+        Route.addRoute(route, template)
+        const routes = Route._routes
+        expect(routes[route]).toBeDefined()
+        expect(typeof routes[route]).toBe("object")
+    })
+    it("should add middleware to a route", () => {
+        const route = "/admin"
+        const template = () => "Admin Page"
+        const loggerMiddleware = () => { message : "Custom Log Message!" }
+        Route.addRoute(route, template).middleware([loggerMiddleware])
+        const routes = Route._routes
+        expect(routes[route]["middlewares"]).toBeDefined()
+        expect(typeof routes[route]["middlewares"]).toBe("object")
+    })
+    it("should add page title to a route", () => {
+        const route = "/product"
+        const template = () => "SPA Page"
+        Route.addRoute(route, template).title("Custom page title (SPA)")
+        const routes = Route._routes
+        expect(routes[route]["title"]).toBeDefined()
+        expect(typeof routes[route]["title"]).toBe("string")
+    })
+    it("should redirect route", () => {
+        const welcomeRoute = "/"
+        const redirectionRoute = "/redirection"
+        const distRoute = welcomeRoute
+        Route.addRoute("/", () => "Welcome Page")
+        Route.addRoute("/redirection", () => Route.redirect(distRoute))
+        const routes = Route._routes
+        expect(routes[redirectionRoute]).toBeDefined()
+        expect(typeof routes[redirectionRoute]).toBe("object")
+        expect(routes[welcomeRoute]).toBeDefined()
+        expect(typeof routes[welcomeRoute]).toBe("object")
+    })
+})

package/tests/unit/router.test.js ADDED Viewed

@@ -0,0 +1,56 @@
+import { JSDOM } from "jsdom"
+import Router from "../../src/router.js"
+describe("Router tests", () => {
+    let documentInstance
+    let windowtInstance
+    let selectorID
+    beforeEach(() => {
+        const { window } = new JSDOM(`
+            <html>
+                <head>
+                    <title>SPA Page</title>
+                </head>
+                <body>
+                    <div id='root'></div>
+                </body>
+            </html>
+        `)
+        const { document } = window
+        documentInstance = document
+        windowtInstance = window
+        selectorID = "#root"
+    })
+    it("should prevent instantiation of the class", () => {
+        expect(() => new Router).toThrow()
+    })
+    it("should configure router", () => {
+        expect(() => {
+            Router.configure({
+                window : windowtInstance,
+                document : documentInstance,
+                selector : selectorID
+            })
+        }).not.toThrow()
+    })
+    it("should run router", () => {
+        expect(() => {
+            Router.configure({
+                window : windowtInstance,
+                document : documentInstance,
+                selector : selectorID
+            })
+            Router.run()
+        }).not.toThrow()
+    })
+})

package/tests/unit/selector.test.js ADDED Viewed

@@ -0,0 +1,42 @@
+import { JSDOM } from "jsdom";
+import Selector from "../../src/utils/selector.js";
+describe("Selector tests", () => {
+    let documentInstance
+    beforeEach(() => {
+        const { window : { document } } = new JSDOM(`
+            <html>
+                <head></head>
+                <body>
+                    <a href='/'>Home page</a>
+                    <a href='/products'>Products page</a>
+                    <a href='/blog'>Blog page</a>
+                </body>
+            </html>
+        `)
+        documentInstance = document
+    })
+    it("should prevent instantiation of the class", () => {
+        expect(() => new Selector).toThrow();
+    });
+    it("should get all anchor elements", () => {
+        const links = Selector.findAll("a", documentInstance)._getElements();
+        expect(typeof links).toBe("object")
+    });
+    it("should get title of link", () => {
+        Selector.findAll("a", documentInstance).each(anchor => {
+            const link = anchor.getAttribute("href")
+            expect(typeof link).toBe("string")
+        })
+    })
+});

package/tests/unit/view.test.js ADDED Viewed

@@ -0,0 +1,47 @@
+import View from "../../src/view.js"
+describe("View tests", () => {
+    it("should prevent instantiation of the class", () => {
+        expect(() => new View).toThrow()
+    })
+    it("should render a template without params", () => {
+        const template = () => {
+            return `
+                <div>
+                    <h1>Welcome Page</h1>
+                    <p>This is SPA page!</p>
+                </div>
+            `
+        }
+        const renderedTemplate = View.render(template)
+        expect(typeof renderedTemplate).toBe("string")
+        expect(renderedTemplate).toContain("<h1>Welcome Page</h1>")
+        expect(renderedTemplate).toContain("<p>This is SPA page!</p>")
+    })
+    it("should render a template with params", () => {
+        const template = ({ id, name }) => {
+            return `
+                <div>
+                    <h1>User Page</h1>
+                    <p>ID: ${id}  -  Name: ${name}</p>
+                </div>
+            `
+        }
+        const user = {
+            id : 1,
+            name : "Robert"
+        }
+        const renderedTemplate = View.render(template, user)
+        expect(typeof renderedTemplate).toBe("string")
+        expect(renderedTemplate).toContain(`<h1>User Page</h1>`)
+        expect(renderedTemplate).toContain(`<p>ID: ${user.id}  -  Name: ${user.name}</p>`)
+    })
+})