Route patterns matching

.changeset/lovely-buttons-repair.md

@@ -0,0 +1,5 @@
+---
+"@chialab/synapse": patch
+---
+
+Route patterns matching

src/App.tsx

@@ -3,7 +3,7 @@ import type { RequestInit, RequestMethod } from './Router/Request';
 import { Component, window, property, state, observe, listen } from '@chialab/dna';
 import { Request } from './Router/Request';
 import { Response } from './Router/Response';
-import { Router } from './Router/Router';
+import { Router, DEFAULT_ORIGIN } from './Router/Router';
 import { Page } from './Components/Page';
 
 enum NavigationDirection {
@@ -22,7 +22,14 @@ export class App extends Component {
         type: String,
     })
     get origin(): string {
-        return this.getInnerPropertyValue('origin') || window.location?.origin;
+        if (this.getInnerPropertyValue('origin')) {
+            return this.getInnerPropertyValue('origin');
+        }
+        if (window.location.origin && window.location.origin !== 'null') {
+            return window.location.origin;
+        }
+
+        return DEFAULT_ORIGIN;
     }
     set origin(value: string) {
         this.setInnerPropertyValue('origin', value);

src/Router/Pattern.ts

@@ -103,7 +103,8 @@ export class Pattern {
      * @param path The path to check.
      * @return False if does not match, grouped values if it does.
      */
-    matches(path: string): RequestParams|false {
+    matches(path: string): RequestParams | false {
+        path = path.split('?')[0];
         if (this.cache[path]) {
             return this.cache[path];
         }

src/Router/Router.ts

@@ -30,6 +30,11 @@ export interface PopStateData {
     previous: State;
 }
 
+/**
+ * Default router origin.
+ */
+export const DEFAULT_ORIGIN = 'http://local';
+
 /**
  * Trim slashes from the start and end of a string.
  * @param token The string to trim.

test/App.spec.js

@@ -34,6 +34,11 @@ describe('App', () => {
 
     afterEach(() => {
         DOM.removeChild(document.body, wrapper);
+        if (typeof window._jsdom !== 'undefined') {
+            window._jsdom.reconfigure({
+                url: 'about:blank',
+            });
+        }
     });
 
     it('should initialize a router', () => {

test/Router.spec.js

@@ -98,4 +98,51 @@ describe('Router', () => {
         expect(response.data.href).to.be.equal('http://local/base');
         expect(history.entries[0].url).to.be.equal('http://local/base');
     });
+
+    describe('patterns', () => {
+        let router;
+        before(() => {
+            router = new Router({
+                base: '/base',
+            }, [
+                {
+                    pattern: '/params/:action/:id',
+                },
+                {
+                    pattern: '/params/:id',
+                },
+                {
+                    pattern: '/params',
+                },
+            ]);
+        });
+
+        it('should match empty params', async () => {
+            const { request: { params } } = await router.navigate('/params');
+
+            expect(Object.keys(params)).to.have.lengthOf(0);
+        });
+
+        it('should match single param', async () => {
+            const { request: { params } } = await router.navigate('/params/123');
+
+            expect(Object.keys(params)).to.have.lengthOf(1);
+            expect(params.id).to.be.equal('123');
+        });
+
+        it('should match single param with query string', async () => {
+            const { request: { params } } = await router.navigate('/params/123?test');
+
+            expect(Object.keys(params)).to.have.lengthOf(1);
+            expect(params.id).to.be.equal('123');
+        });
+
+        it('should match multiple params', async () => {
+            const { request: { params } } = await router.navigate('/params/view/123');
+
+            expect(Object.keys(params)).to.have.lengthOf(2);
+            expect(params.action).to.be.equal('view');
+            expect(params.id).to.be.equal('123');
+        });
+    });
 });