Support of regexp named groups. #270

krasimir · Feb 2, 2021 · ea14b64 · ea14b64
1 parent 2478e63
commit ea14b64
Show file tree

Hide file tree

Showing 15 changed files with 68 additions and 13 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 8.8.4
+
+Support of regexp named groups. #270
+
 ## 8.8.3
 
 Fixing a bug with notFound handler hooks. #271

diff --git a/examples/270/package.json b/examples/270/package.json
@@ -0,0 +1,7 @@
+{
+  "name": "navigo-example-basic-spa",
+  "private": true,
+  "scripts": {
+    "start": "node ./server.js"
+  }
+}
diff --git a/examples/270/page.html b/examples/270/page.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Navigo</title>
+    <link href="/styles.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div>
+      <a href="/xyz/foobar" data-navigo>Click me</a>
+    </div>
+    <hr />
+    <div id="content"></div>
+    <script src="/navigo.js"></script>
+    <script>
+      window.addEventListener("load", () => {
+        const router = new Navigo("/");
+        const render = (content) =>
+          (document.querySelector("#content").innerHTML = content);
+
+        router
+          .on(/xyz\/(?<myName>[0-9a-z]{4,8})$/, (match) => {
+            render(`<p>${match.data.myName}</p>`);
+          })
+          .resolve();
+      });
+    </script>
+  </body>
+</html>
diff --git a/examples/270/server.js b/examples/270/server.js
@@ -0,0 +1,11 @@
+const express = require("express");
+const app = express();
+const port = 3000;
+const { staticAssets, serveFile } = require("../utils/server");
+
+staticAssets(app);
+app.get("*", serveFile(__dirname + "/page.html"));
+
+app.listen(port, () => {
+  console.log(`Example app listening at http://localhost:${port}`);
+});
diff --git a/examples/README.md b/examples/README.md
@@ -14,6 +14,7 @@ Examples done to investigate issues:
 * How to add a confirm prompt before leave? [#250](https://github.com/krasimir/navigo/issues/250) - [source](./250)
 * notFound is not working on new page (refresh) [#229](https://github.com/krasimir/navigo/issues/229) - [source](./229)
 * Is it possible to replace/redirect a route request? [#228](https://github.com/krasimir/navigo/issues/228) - [source](./228)
+* Named groups in RegExp [#270](https://github.com/krasimir/navigo/issues/191) - [source](./270)
 * Incorrect path detection [#191](https://github.com/krasimir/navigo/issues/191) - [source](./191)
 * Hook not firing on first page unload [#179](https://github.com/krasimir/navigo/issues/179) - [source](./179)
 * Global before hook except for 1 page [#163](https://github.com/krasimir/navigo/issues/163) - [source](./163)

diff --git a/lib/es/utils.js b/lib/es/utils.js
@@ -92,10 +92,10 @@ export function matchRoute(context, route) {
   }
 
   var regexp = new RegExp(pattern, MATCH_REGEXP_FLAGS);
-  var match = current.match(regexp); // console.log(current, regexp);
+  var match = current.match(regexp);
 
   if (match) {
-    var data = isString(route.path) ? regExpResultToParams(match, paramNames) : match.slice(1);
+    var data = isString(route.path) ? regExpResultToParams(match, paramNames) : match.groups ? match.groups : match.slice(1);
     return {
       url: current,
       queryString: GETParams,

diff --git a/lib/navigo.amd.js b/lib/navigo.amd.js
diff --git a/lib/navigo.amd.js.map b/lib/navigo.amd.js.map
diff --git a/lib/navigo.amd.min.js b/lib/navigo.amd.min.js
diff --git a/lib/navigo.amd.min.js.map b/lib/navigo.amd.min.js.map
diff --git a/lib/navigo.js b/lib/navigo.js
diff --git a/lib/navigo.js.map b/lib/navigo.js.map
diff --git a/lib/navigo.min.js b/lib/navigo.min.js
diff --git a/lib/navigo.min.js.map b/lib/navigo.min.js.map
diff --git a/src/utils.ts b/src/utils.ts
@@ -105,10 +105,12 @@ export function matchRoute(context: QContext, route: Route): false | Match {
   }
   const regexp = new RegExp(pattern, MATCH_REGEXP_FLAGS);
   const match = current.match(regexp);
-  // console.log(current, regexp);
+
   if (match) {
     const data = isString(route.path)
       ? regExpResultToParams(match, paramNames)
+      : match.groups
+      ? match.groups
       : match.slice(1);
     return {
       url: current,