(preact-iso) - trim leading and trailing slash (#416)

* trim leading and trailing slash * try truthy split * Update router.js * Update router.js * fix test arguments * add changeset and update demo * fix matching * Update packages/preact-iso/router.js * minor fix * Apply suggestions from code review Co-authored-by: Jason Miller <developit@users.noreply.github.com> * update indents in demo * Update router.js Co-authored-by: Jason Miller <developit@users.noreply.github.com>
preactjs · Mar 14, 2021 · f320e3e · f320e3e
1 parent b225cc2
commit f320e3e
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 6 deletions.
diff --git a/.changeset/cyan-badgers-grab.md b/.changeset/cyan-badgers-grab.md
@@ -0,0 +1,5 @@
+---
+'preact-iso': patch
+---
+
+Fix routes with leading/trailing slashes
diff --git a/packages/preact-iso/router.js b/packages/preact-iso/router.js
@@ -20,8 +20,8 @@ const UPDATE = (state, url) => {
 };
 
 export const exec = (url, route, matches) => {
-	url = url.trim('/').split('/');
-	route = (route || '').trim('/').split('/');
+	url = url.split('/').filter(Boolean);
+	route = (route || '').split('/').filter(Boolean);
 	for (let i = 0, val; i < Math.max(url.length, route.length); i++) {
 		let [, m, param, flag] = (route[i] || '').match(/^(:?)(.*?)([+*?]?)$/);
 		val = url[i];
@@ -32,7 +32,7 @@ export const exec = (url, route, matches) => {
 		// field match:
 		matches[param] = val && decodeURIComponent(val);
 		// normal/optional field:
-		if (flag >= '?') continue;
+		if (flag >= '?' || flag === '') continue;
 		// rest (+/*) match:
 		matches[param] = url.slice(i).map(decodeURIComponent).join('/');
 		break;

diff --git a/packages/preact-iso/test/match.test.js b/packages/preact-iso/test/match.test.js
@@ -24,4 +24,12 @@ describe('match', () => {
 		const inaccurateResult = exec('/', '/user/:id?', { path: '/' });
 		expect(inaccurateResult).toEqual(undefined);
 	});
+
+	it('Handles leading/trailing slashes', () => {
+		const result = exec('/about-late/_SEGMENT1_/_SEGMENT2_/', '/about-late/:seg1/:seg2/', {});
+		expect(result).toEqual({
+			seg1: '_SEGMENT1_',
+			seg2: '_SEGMENT2_'
+		});
+	});
 });
diff --git a/packages/wmr/demo/public/lib/loc.js b/packages/wmr/demo/public/lib/loc.js
@@ -19,8 +19,8 @@ const UPDATE = (state, url, push) => {
 };
 
 export const exec = (url, route, matches) => {
-	url = url.trim('/').split('/');
-	route = (route || '').trim('/').split('/');
+	url = url.split('/').filter(Boolean);
+	route = (route || '').split('/').filter(Boolean);
 	for (let i = 0, val; i < Math.max(url.length, route.length); i++) {
 		let [, m, param, flag] = (route[i] || '').match(/^(:?)(.*?)([+*?]?)$/);
 		val = url[i];
@@ -31,7 +31,7 @@ export const exec = (url, route, matches) => {
 		// field match:
 		matches[param] = val && decodeURIComponent(val);
 		// normal/optional field:
-		if (flag >= '?') continue;
+		if (flag >= '?' || flag === '') continue;
 		// rest (+/*) match:
 		matches[param] = url.slice(i).map(decodeURIComponent).join('/');
 		break;