@sondor-technology/sondor-components 1.0.1-develop.5 → 1.0.1-develop.6

package/dist/components/router/router.d.ts

@@ -1,7 +1,31 @@
-declare class AppRouter {
-    constructor();
+export interface RouteDefinition {
+    component: string;
+    [key: string]: unknown;
+}
+export type RouteConfig = Record<string, RouteDefinition>;
+export interface RouteMatch {
+    path: string;
+    component: string;
+    params: Record<string, string>;
+    definition: RouteDefinition;
+}
+export declare class AppRouter {
+    private _routes;
+    private _initialized;
+    constructor(routes?: RouteConfig);
+    /**
+     * Register or update the route configuration for this application.
+     */
+    setRoutes(routes: RouteConfig): void;
+    /**
+     * Programmatically navigate to an internal path.
+     */
+    navigate(path: string): void;
+    /**
+     * Matches a URL path against the registered routes.
+     */
+    matchRoute(currentPath: string): RouteMatch | null;
     private _notify;
 }
 export declare const router: AppRouter;
-export {};
 //# sourceMappingURL=router.d.ts.map

package/dist/components/router/router.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["../../../src/components/router/router.ts"],"names":[],"mappings":"AAAA,cAAM,SAAS;IACb,cAoCC;IAED,OAAO,CAAC,OAAO;CAKhB;AAED,eAAO,MAAM,MAAM,WAAkB,CAAC"}
+{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["../../../src/components/router/router.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,eAAe;IAC9B,SAAS,EAAE,MAAM,CAAC;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;AAE1D,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,UAAU,EAAE,eAAe,CAAC;CAC7B;AASD,qBAAa,SAAS;IACpB,OAAO,CAAC,OAAO,CAAmB;IAClC,OAAO,CAAC,YAAY,CAAS;IAE7B,YAAY,MAAM,CAAC,EAAE,WAAW,EA+B/B;IAED;;OAEG;IACI,SAAS,CAAC,MAAM,EAAE,WAAW,QAUnC;IAED;;OAEG;IACI,QAAQ,CAAC,IAAI,EAAE,MAAM,QAG3B;IAED;;OAEG;IACI,UAAU,CAAC,WAAW,EAAE,MAAM,GAAG,UAAU,GAAG,IAAI,CA+BxD;IAED,OAAO,CAAC,OAAO;CAahB;AAGD,eAAO,MAAM,MAAM,WAAkB,CAAC"}

package/dist/components/router/router.js

@@ -1,37 +1,97 @@
-class AppRouter {
-    constructor() {
+function getRouteWeight(pattern) {
+    const segments = pattern.split('/').filter(Boolean);
+    return segments.reduce((weight, seg) => {
+        return weight + (seg.startsWith(':') ? 1 : 10);
+    }, 0);
+}
+export class AppRouter {
+    constructor(routes) {
+        this._routes = {};
+        this._initialized = false;
+        if (routes) {
+            this.setRoutes(routes);
+        }
         window.addEventListener('popstate', () => this._notify());
         document.addEventListener('click', (e) => {
-            // 1. Ignore modified clicks (Ctrl+Click, etc)
             if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
                 return;
             }
-            // 2. Safely traverse the path
             const path = e.composedPath();
             const link = path.find((el) => el && typeof el.hasAttribute === 'function' && el.hasAttribute('href'));
             if (!link)
                 return;
             const href = link.getAttribute('href');
             const target = link.getAttribute('target');
-            // 3. Ignore external links
             if (!href || href.startsWith('http') || href.startsWith('mailto:') || target === '_blank') {
                 return;
             }
-            // 4. Intercept internal links
             if (href.startsWith('/')) {
                 e.preventDefault();
-                window.history.pushState(null, '', href);
-                this._notify();
+                this.navigate(href);
             }
         });
-        // Broadcast initial route on load
-        // Use setTimeout to ensure all Lit components have registered first
-        setTimeout(() => this._notify(), 0);
+    }
+    /**
+     * Register or update the route configuration for this application.
+     */
+    setRoutes(routes) {
+        this._routes = routes;
+        // Trigger initial route resolution once routes are registered
+        if (!this._initialized) {
+            this._initialized = true;
+            setTimeout(() => this._notify(), 0);
+        }
+        else {
+            this._notify();
+        }
+    }
+    /**
+     * Programmatically navigate to an internal path.
+     */
+    navigate(path) {
+        window.history.pushState(null, '', path);
+        this._notify();
+    }
+    /**
+     * Matches a URL path against the registered routes.
+     */
+    matchRoute(currentPath) {
+        const sortedRoutes = Object.entries(this._routes).sort(([patternA], [patternB]) => getRouteWeight(patternB) - getRouteWeight(patternA));
+        for (const [pattern, routeDef] of sortedRoutes) {
+            const paramNames = [];
+            const regexPath = pattern.replace(/:([a-zA-Z0-9_]+)/g, (_, paramName) => {
+                paramNames.push(paramName);
+                return '([^/]+)';
+            });
+            const regex = new RegExp(`^${regexPath}$`);
+            const match = currentPath.match(regex);
+            if (match) {
+                const params = {};
+                paramNames.forEach((name, index) => {
+                    params[name] = decodeURIComponent(match[index + 1]);
+                });
+                return {
+                    path: currentPath,
+                    component: routeDef.component,
+                    params,
+                    definition: routeDef
+                };
+            }
+        }
+        return null;
     }
     _notify() {
+        const currentPath = window.location.pathname;
+        const match = this.matchRoute(currentPath);
         window.dispatchEvent(new CustomEvent('route-changed', {
-            detail: window.location.pathname
+            detail: {
+                path: currentPath,
+                component: match ? match.component : 'not-found-page',
+                params: match ? match.params : {},
+                definition: match ? match.definition : null
+            }
         }));
     }
 }
+// Export a singleton instance for standard app-wide use
 export const router = new AppRouter();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sondor-technology/sondor-components",
-  "version": "1.0.1-develop.5",
+  "version": "1.0.1-develop.6",
   "description": "",
   "main": "src/index.js",
   "types": "dist/index.d.ts",

package/src/components/router/router.ts

@@ -1,14 +1,40 @@
-class AppRouter {
-  constructor() {
+export interface RouteDefinition {
+  component: string;
+  [key: string]: unknown; // Allows consuming apps to attach custom metadata (e.g., titles, auth roles)
+}
+
+export type RouteConfig = Record<string, RouteDefinition>;
+
+export interface RouteMatch {
+  path: string;
+  component: string;
+  params: Record<string, string>;
+  definition: RouteDefinition;
+}
+
+function getRouteWeight(pattern: string): number {
+  const segments = pattern.split('/').filter(Boolean);
+  return segments.reduce((weight, seg) => {
+    return weight + (seg.startsWith(':') ? 1 : 10);
+  }, 0);
+}
+
+export class AppRouter {
+  private _routes: RouteConfig = {};
+  private _initialized = false;
+
+  constructor(routes?: RouteConfig) {
+    if (routes) {
+      this.setRoutes(routes);
+    }
+
     window.addEventListener('popstate', () => this._notify());
     
     document.addEventListener('click', (e) => {
-      // 1. Ignore modified clicks (Ctrl+Click, etc)
       if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
         return;
       }
 
-      // 2. Safely traverse the path
       const path = e.composedPath();
       const link = path.find((el: any) => 
         el && typeof el.hasAttribute === 'function' && el.hasAttribute('href')
@@ -19,29 +45,90 @@ class AppRouter {
       const href = link.getAttribute('href');
       const target = link.getAttribute('target');
 
-      // 3. Ignore external links
       if (!href || href.startsWith('http') || href.startsWith('mailto:') || target === '_blank') {
         return;
       }
 
-      // 4. Intercept internal links
       if (href.startsWith('/')) {
         e.preventDefault(); 
-        window.history.pushState(null, '', href);
-        this._notify();
+        this.navigate(href);
       }
     });
+  }
+
+  /**
+   * Register or update the route configuration for this application.
+   */
+  public setRoutes(routes: RouteConfig) {
+    this._routes = routes;
 
-    // Broadcast initial route on load
-    // Use setTimeout to ensure all Lit components have registered first
-    setTimeout(() => this._notify(), 0);
+    // Trigger initial route resolution once routes are registered
+    if (!this._initialized) {
+      this._initialized = true;
+      setTimeout(() => this._notify(), 0);
+    } else {
+      this._notify();
+    }
+  }
+
+  /**
+   * Programmatically navigate to an internal path.
+   */
+  public navigate(path: string) {
+    window.history.pushState(null, '', path);
+    this._notify();
+  }
+
+  /**
+   * Matches a URL path against the registered routes.
+   */
+  public matchRoute(currentPath: string): RouteMatch | null {
+    const sortedRoutes = Object.entries(this._routes).sort(
+      ([patternA], [patternB]) => getRouteWeight(patternB) - getRouteWeight(patternA)
+    );
+
+    for (const [pattern, routeDef] of sortedRoutes) {
+      const paramNames: string[] = [];
+      const regexPath = pattern.replace(/:([a-zA-Z0-9_]+)/g, (_, paramName) => {
+        paramNames.push(paramName);
+        return '([^/]+)';
+      });
+
+      const regex = new RegExp(`^${regexPath}$`);
+      const match = currentPath.match(regex);
+
+      if (match) {
+        const params: Record<string, string> = {};
+        paramNames.forEach((name, index) => {
+          params[name] = decodeURIComponent(match[index + 1]);
+        });
+
+        return {
+          path: currentPath,
+          component: routeDef.component,
+          params,
+          definition: routeDef
+        };
+      }
+    }
+
+    return null;
   }
 
   private _notify() {
+    const currentPath = window.location.pathname;
+    const match = this.matchRoute(currentPath);
+
     window.dispatchEvent(new CustomEvent('route-changed', { 
-      detail: window.location.pathname 
+      detail: {
+        path: currentPath,
+        component: match ? match.component : 'not-found-page',
+        params: match ? match.params : {},
+        definition: match ? match.definition : null
+      }
     }));
   }
 }
 
+// Export a singleton instance for standard app-wide use
 export const router = new AppRouter();