Woah <p-router> overhaul? MVP done.

package.json

@@ -13,7 +13,5 @@
     "webpack": "^4.44.1",
     "webpack-cli": "^3.3.12"
   },
-  "dependencies": {
-    "path-to-regexp": "^6.1.0"
-  }
+  "dependencies": {}
 }

src/components/p-router.ts

@@ -1,24 +1,49 @@
-import { IRouteDescriptor } from "../internals/api.js";
+import { IRouteDescriptor, ICurrentRoute } from "../internals/api.js";
 import { addPageWatcher } from "./p-link.js";
+import { matchPath } from "../internals/match-path.js";
 
 export interface IPorpoiseRouter extends HTMLElement {
-    routes: Record<string, string | IRouteDescriptor>;
-    configure(routes: Record<string, string | IRouteDescriptor>): void;
+    routes: IRouteDescriptor[];
+    configure(routes: IRouteDescriptor[]): void;
 }
 
 class PorpoiseRouter extends HTMLElement implements IPorpoiseRouter {
-    routes: Record<string, string | IRouteDescriptor> = Object.create(null);
+    "[[current]]": ICurrentRoute | null;
+    routes: IRouteDescriptor[] = [];
 
-    configure(routes: Record<string, string | IRouteDescriptor>) {
+    configure(routes: IRouteDescriptor[]) {
         this.routes = routes;
 
         // Listen for changes onpopstate, and on <p-link> clicks:
-        window.addEventListener("popstate", this.changeView.bind(this));
+        window.addEventListener("popstate", () => {
+            this.changeView.bind(this)
+        });
         addPageWatcher(this.changeView.bind(this));
+        this.changeView();
     }
 
     changeView() {
-
+        const newPath = location.pathname.startsWith("/") ? location.pathname : `/${location.pathname}`;
+        console.log(newPath);
+
+        for (const n in this.routes) {
+            const route = this.routes[n];
+
+            const { doesMatch, params } = matchPath(route.path, newPath);
+
+            // Success:
+            if (doesMatch) {
+                // Set current route data:
+                this["[[current]]"] = { path: newPath, params };
+                this.textContent = "";
+                this.appendChild(document.createElement(route.element));
+                return;
+            }
+        }
+
+        // If this point reached, no match was found:
+        this.innerText = "You found a broken link";
+        this["[[current]]"] = null;
     }
 }
 

src/functions/create-router.ts

@@ -1,11 +1,11 @@
 import { IPorpoiseRouter } from "../components/p-router.js";
 import { IRouteDescriptor } from "../internals/api.js";
 
-export function createRouter(target: string, routes: Record<string, string | IRouteDescriptor>) {
+export function createRouter(target: string, routes: IRouteDescriptor[]) {
     const routerNode = document.querySelector(`p-router[name="${target}"]`) as IPorpoiseRouter;
 
     if (routerNode) {
         routerNode.configure(routes);
     }
-    else console.error(`Could not find <porpoise-router name="${target}"></porpoise-router> in the DOM.`);
+    else console.error(`Could not find <p-router name="${target}"></p-router> in the DOM.`);
 }

src/internals/api.ts

@@ -1,4 +1,9 @@
+export interface ICurrentRoute {
+    path: string,
+    params: Record<string, string>
+}
+
 export interface IRouteDescriptor {
+    path: string
     element: string,
-    props?: Record<string, string>
 }

src/internals/match-path.ts

@@ -0,0 +1,17 @@
+import { match } from "./path-parser.js";
+
+export function matchPath(specifier: string, rawPath: string) {
+    // Catch-all route:
+    if (specifier === "*") {
+        return { doesMatch: true, params: null }
+    }
+
+    // Parse the path:
+    else {
+        const matchData = match(specifier, { decode: decodeURIComponent })((rawPath));
+        return {
+            doesMatch: matchData !== false,
+            params: (matchData as any).params || null
+        }
+    }
+}