aprog 1.0.1 → 1.1.0

package/README.md

@@ -18,6 +18,57 @@ npm i aprog -D
 
 ### Basic Usage
 
+Підключення router:
+
+```shell
+import Categories from "./pages/Categories";
+import Access from "./pages/Access";
+import Unauthorized from "./pages/Unauthorized";
+
+const routes = [
+  {
+    path: "/categories",
+    component: Categories,
+  },
+  {
+    path: "/access/denied",
+    component: Access,
+  },
+  {
+    path: "/unauthorized",
+    component: Unauthorized,
+  }
+];
+
+document.addEventListener("DOMContentLoaded", async function() {
+  // router
+  const body = document.body;
+  await router({ routes, body, "Page Not Found" });
+});
+
+```
+
+Створення Pages:
+
+```shell
+
+const NamePage = () => {
+  return div({
+    class: "w-full h-screen flex flex-col items-center justify-center text-3xl",
+      value: [
+        div({
+          class: "text-red font-bold text-5xl",
+          value: "Блок №1"
+        }),
+        div({value: "Блок №2"})
+      ]
+  });
+}
+
+export default NamePage;
+
+```
+
 Приклад використання методів формування HTML елементів:
 
 ```shell

package/index.js

@@ -6,4 +6,5 @@ export {
 } from './src/aprog.js';
 export { dump, dd } from './src/debugger.js';
 export { redirect } from './src/redirect.js';
+export { router } from './src/router.js';
 export { encrypt, decrypt } from './src/shifrator.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aprog",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Допоміжна бібліотека js",
   "main": "index.js",
   "scripts": {

package/src/NotFound.js

@@ -0,0 +1,32 @@
+import {div} from "./aprog.js";
+
+const NotFound = (message = "Page Not Found") => {
+    return div({
+        style: style,
+        value: [
+            div({
+                style: style2,
+                value: "404"
+            }),
+            div({value: message})
+        ]
+    });
+}
+
+const style = {
+    width: "100%",
+    height: "100vh",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "1.875rem"
+};
+
+const style2 = {
+    fontSize: "3rem",
+    fontWeight: "bold",
+    color: "#ff2800"
+}
+
+export default NotFound;

package/src/router.js

@@ -0,0 +1,28 @@
+import NotFound from "NotFound";
+
+const router = async ({ routes, main, message = "Page Not Found" }) => {
+    const renderRoute = async () => {
+        const routeComponent = await useRoutes(routes, message);
+        main.innerHTML = "";
+        if (routeComponent) {
+            main.appendChild(routeComponent);
+        }
+    }
+    window.addEventListener('popstate', renderRoute);
+    await renderRoute();
+}
+
+
+const navigateTo = (path) => {
+    window.history.pushState("", "", path);
+}
+
+
+const useRoutes = async (routes, message) => {
+    const path = window.location.pathname;
+    const matchingRoute = routes.find(route => route.path === path);
+    return matchingRoute ? await matchingRoute.component() : NotFound(message);
+}
+
+
+export { router, navigateTo };