aprog 2.2.95 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aprog",
-  "version": "2.2.95",
+  "version": "2.3.0",
   "description": "Допоміжна JavaScript-бібліотека для проєктів",
   "main": "index.js",
   "exports": {

package/src/NotFound.js

@@ -1,11 +1,22 @@
 import {div} from "./general.js";
 
-const NotFound = ({ message = "Page Not Found" }) => {
+const NotFound = ({ colors = {
+    numberColor: "#ff2800",
+    textColor: "#c3e4fc",
+    backgroundColor: "#043458",
+}, message = "Page Not Found" }) => {
     return div({
-        style: style,
+        style: {
+            ...style,
+            color: colors.textColor,
+            backgroundColor: colors.backgroundColor
+        },
         value: [
             div({
-                style: style2,
+                style: {
+                    ...style2,
+                    color: colors.numberColor
+                },
                 value: "404"
             }),
             div({value: message})
@@ -20,15 +31,12 @@ const style = {
     flexDirection: "column",
     alignItems: "center",
     justifyContent: "center",
-    fontSize: "1.875rem",
-    color: "#c3e4fc",
-    backgroundColor: "#043458"
+    fontSize: "1.875rem"
 };
 
 const style2 = {
     fontSize: "3rem",
-    fontWeight: "bold",
-    color: "#ff2800"
+    fontWeight: "bold"
 }
 
 export default NotFound;

package/src/router.js

@@ -1,13 +1,24 @@
 import NotFound from "./NotFound.js";
 
-export const router = async ({ routes, main }) => {
+/**
+ * Ініціалізація роутера.
+ */
+export const router = async ({routes, main, message = "", props = {}}) => {
     const renderRoute = async () => {
-        const { routeComponent, props } = await useRoutes(routes);
+        const {routeComponent, props: routeProps} = useRoutes(routes);
         main.innerHTML = "";
-        if (routeComponent) {
-            const component = await routeComponent(props);
-            main.appendChild(component);
+
+        if (!routeComponent) {
+            return;
         }
+
+        const component = await routeComponent({
+            ...props,
+            ...routeProps,
+            message,
+        });
+
+        main.appendChild(component);
     };
 
     window.addEventListener('popstate', renderRoute);
@@ -16,21 +27,84 @@ export const router = async ({ routes, main }) => {
     await renderRoute();
 };
 
+/**
+ * Перехід без рендеру.
+ */
 export const navigateTo = (path, props = {}) => {
     window.history.pushState(props, "", path);
 };
 
-export const navi = (path, props = {}) => {
+/**
+ * Перехід + рендер.
+ */
+export const navi = async (path, props = {}) => {
     window.history.pushState(props, "", path);
-    window.renderRoute().then();
+
+    await window.renderRoute();
 };
 
-const useRoutes = async (routes) => {
+/**
+ * Порівнює URL з шаблоном route
+ * і повертає параметри.
+ *
+ * /category/{id}
+ * /category/15
+ *
+ * => { id: "15" }
+ *
+ * /category/{category_id}/product/{product_id}
+ * /category/15/product/128
+ *
+ * => {
+ *     category_id: "15",
+ *     product_id: "128"
+ * }
+ */
+const matchRoute = (routePath, path) => {
+    const keys = [];
+
+    const pattern = routePath.replace(/\{([^}]+)}/g, (_, key) => {
+        keys.push(key);
+
+        return '([^/]+)';
+    });
+
+    const match = path.match(new RegExp(`^${pattern}$`));
+
+    if (!match) {
+        return null;
+    }
+
+    return keys.reduce((params, key, index) => {
+        params[key] = decodeURIComponent(match[index + 1]);
+
+        return params;
+    }, {});
+};
+
+/**
+ * Знаходить поточний route.
+ */
+const useRoutes = (routes) => {
     const path = window.location.pathname;
-    const matchingRoute = routes.find(route => route.path === path);
-    const props = window.history.state || {};
 
-    return matchingRoute
-        ? { routeComponent: matchingRoute.component, props }
-        : { routeComponent: NotFound, props };
+    for (const route of routes) {
+        const params = matchRoute(route.path, path);
+        if (params !== null) {
+            return {
+                routeComponent: route.component,
+                props: {
+                    ...(window.history.state || {}),
+                    ...params,
+                },
+            };
+        }
+    }
+
+    return {
+        routeComponent: NotFound,
+        props: {
+            ...(window.history.state || {}),
+        },
+    };
 };