Add support for nested routes

Author: marvinhagemeister

.changeset/thirty-spiders-attend.md

@@ -0,0 +1,5 @@
+---
+'preact-iso': minor
+---
+
+Add support for nested routes matching

packages/preact-iso/README.md

@@ -104,3 +104,43 @@ You can use the `useRoute` hook to get information of the route you are currentl
 **Progressive Hydration:** When the app is hydrated on the client, the route (`Home` or `Profile` in this case) suspends. This causes hydration for that part of the page to be deferred until the route's `import()` is resolved, at which point that part of the page automatically finishes hydrating.
 
 **Seamless Routing:** Switch switching between routes on the client, the Router is aware of asynchronous dependencies in routes. Instead of clearing the current route and showing a loading spinner while waiting for the next route (or its data), the router preserves the current route in-place until the incoming route has finished loading, then they are swapped.
+
+### Nested Routing
+
+Nested routes are supported by using multiple `Router` components. Partially matched routes end with a wildcard `/*` and the remaining value will be past to continue matching with if there are any further routes.
+
+```jsx
+import { ErrorBoundary, LocationProvider, Router, Route } from 'preact-iso';
+
+function ProfileA() {
+	return <h2>A</h2>;
+}
+
+function ProfileB() {
+	return <h2>B</h2>;
+}
+
+function Profile() {
+	return (
+		<div>
+			<h1>Profile</h1>
+			<ErrorBoundary>
+				<Router>
+					<Route path="/a" component={ProfileA} />
+					<Route path="/b" component={ProfileB} />
+				</Router>
+			<ErrorBoundary>
+		</div>
+	);
+}
+
+const App = () => (
+	<LocationProvider>
+		<ErrorBoundary>
+			<Router>
+				<Route path="/profiles/*" component={Profile} />
+			</Router>
+		</ErrorBoundary>
+	</LocationProvider>
+);
+```

packages/preact-iso/router.js

@@ -43,7 +43,10 @@ export const exec = (url, route, matches) => {
 		// segment match:
 		if (!m && param == val) continue;
 		// /foo/* match
-		if (!m && val && flag == '*') break;
+		if (!m && val && flag == '*') {
+			matches.rest = '/' + url.slice(i).map(decodeURIComponent).join('/');
+			break;
+		}
 		// segment mismatch / missing required field:
 		if (!m || (!val && flag != '?' && flag != '*')) return;
 		rest = flag == '+' || flag == '*';
@@ -88,7 +91,8 @@ const RESOLVED = Promise.resolve();
 export function Router(props) {
 	const [, update] = useReducer(c => c + 1, 0);
 
-	const { url, path, query, wasPush } = useLocation();
+	const { url, query, wasPush, path } = useLocation();
+	const { rest = path, params = {} } = useContext(RouteContext);
 
 	// Monotonic counter used to check if an un-suspending route is still the current route:
 	const count = useRef(0);
@@ -114,13 +118,13 @@ export function Router(props) {
 
 		let p, d, m;
 		toChildArray(props.children).some(vnode => {
-			const matches = exec(path, vnode.props.path, (m = { path, query, params: {} }));
+			const matches = exec(rest, vnode.props.path, (m = { path: rest, query, params, rest: '' }));
 			if (matches) return (p = cloneElement(vnode, m));
 			if (vnode.props.default) d = cloneElement(vnode, m);
 		});
 
 		return h(RouteContext.Provider, { value: m }, p || d);
-	}, [url]);
+	}, [rest, params]);
 
 	// Reset previous children - if rendering succeeds synchronously, we shouldn't render the previous children.
 	const p = prev.current;

packages/preact-iso/test/match.test.js

@@ -23,18 +23,24 @@ describe('match', () => {
 
 	it('Param rest segment', () => {
 		const accurateResult = execPath('/user/foo', '/user/*');
-		expect(accurateResult).toEqual({ path: '/user/foo', params: {}, query: {} });
+		expect(accurateResult).toEqual({ path: '/user/foo', params: {}, query: {}, rest: '/foo' });
 
 		const inaccurateResult = execPath('/', '/user/:id/*');
 		expect(inaccurateResult).toEqual(undefined);
 	});
 
 	it('Param route with rest segment', () => {
 		const accurateResult = execPath('/user/2/foo', '/user/:id/*');
-		expect(accurateResult).toEqual({ path: '/user/2/foo', params: { id: '2' }, id: '2', query: {} });
+		expect(accurateResult).toEqual({ path: '/user/2/foo', params: { id: '2' }, id: '2', query: {}, rest: '/foo' });
 
 		const accurateResult2 = execPath('/user/2/foo/bar/bob', '/user/:id/*');
-		expect(accurateResult2).toEqual({ path: '/user/2/foo/bar/bob', params: { id: '2' }, id: '2', query: {} });
+		expect(accurateResult2).toEqual({
+			path: '/user/2/foo/bar/bob',
+			params: { id: '2' },
+			id: '2',
+			query: {},
+			rest: '/foo/bar/bob'
+		});
 
 		const inaccurateResult = execPath('/', '/user/:id/*');
 		expect(inaccurateResult).toEqual(undefined);

packages/preact-iso/test/router.test.js

@@ -1,7 +1,7 @@
 import { jest, describe, it, beforeEach, expect } from '@jest/globals';
 import { h, render } from 'preact';
 import { html } from 'htm/preact';
-import { LocationProvider, Router, useLocation } from '../router.js';
+import { LocationProvider, Router, useLocation, Route, useRoute } from '../router.js';
 import lazy, { ErrorBoundary } from '../lazy.js';
 
 Object.defineProperty(window, 'scrollTo', { value() {} });
@@ -47,7 +47,7 @@ describe('Router', () => {
 		);
 
 		expect(scratch).toHaveProperty('textContent', 'Home');
-		expect(Home).toHaveBeenCalledWith({ path: '/', query: {}, params: {} }, expect.anything());
+		expect(Home).toHaveBeenCalledWith({ path: '/', query: {}, params: {}, rest: '' }, expect.anything());
 		expect(Profiles).not.toHaveBeenCalled();
 		expect(Profile).not.toHaveBeenCalled();
 		expect(Fallback).not.toHaveBeenCalled();
@@ -64,7 +64,7 @@ describe('Router', () => {
 
 		expect(scratch).toHaveProperty('textContent', 'Profiles');
 		expect(Home).not.toHaveBeenCalled();
-		expect(Profiles).toHaveBeenCalledWith({ path: '/profiles', query: {}, params: {} }, expect.anything());
+		expect(Profiles).toHaveBeenCalledWith({ path: '/profiles', query: {}, params: {}, rest: '' }, expect.anything());
 		expect(Profile).not.toHaveBeenCalled();
 		expect(Fallback).not.toHaveBeenCalled();
 
@@ -82,7 +82,7 @@ describe('Router', () => {
 		expect(Home).not.toHaveBeenCalled();
 		expect(Profiles).not.toHaveBeenCalled();
 		expect(Profile).toHaveBeenCalledWith(
-			{ path: '/profiles/bob', query: {}, params: { id: 'bob' }, id: 'bob' },
+			{ path: '/profiles/bob', query: {}, params: { id: 'bob' }, id: 'bob', rest: '' },
 			expect.anything()
 		);
 		expect(Fallback).not.toHaveBeenCalled();
@@ -102,7 +102,7 @@ describe('Router', () => {
 		expect(Profiles).not.toHaveBeenCalled();
 		expect(Profile).not.toHaveBeenCalled();
 		expect(Fallback).toHaveBeenCalledWith(
-			{ default: true, path: '/other', query: { a: 'b', c: 'd' }, params: {} },
+			{ default: true, path: '/other', query: { a: 'b', c: 'd' }, params: {}, rest: '' },
 			expect.anything()
 		);
 
@@ -141,13 +141,13 @@ describe('Router', () => {
 		);
 
 		expect(scratch).toHaveProperty('innerHTML', '');
-		expect(A).toHaveBeenCalledWith({ path: '/', query: {}, params: {} }, expect.anything());
+		expect(A).toHaveBeenCalledWith({ path: '/', query: {}, params: {}, rest: '' }, expect.anything());
 
 		A.mockClear();
 		await sleep(10);
 
 		expect(scratch).toHaveProperty('innerHTML', '<h1>A</h1><p>hello</p>');
-		expect(A).toHaveBeenCalledWith({ path: '/', query: {}, params: {} }, expect.anything());
+		expect(A).toHaveBeenCalledWith({ path: '/', query: {}, params: {}, rest: '' }, expect.anything());
 
 		A.mockClear();
 		loc.route('/b');
@@ -160,14 +160,14 @@ describe('Router', () => {
 		expect(scratch).toHaveProperty('innerHTML', '<h1>A</h1><p>hello</p>');
 		// We should never re-invoke <A /> while loading <B /> (that would be a remount of the old route):
 		expect(A).not.toHaveBeenCalled();
-		expect(B).toHaveBeenCalledWith({ path: '/b', query: {}, params: {} }, expect.anything());
+		expect(B).toHaveBeenCalledWith({ path: '/b', query: {}, params: {}, rest: '' }, expect.anything());
 
 		B.mockClear();
 		await sleep(10);
 
 		expect(scratch).toHaveProperty('innerHTML', '<h1>B</h1><p>hello</p>');
 		expect(A).not.toHaveBeenCalled();
-		expect(B).toHaveBeenCalledWith({ path: '/b', query: {}, params: {} }, expect.anything());
+		expect(B).toHaveBeenCalledWith({ path: '/b', query: {}, params: {}, rest: '' }, expect.anything());
 
 		B.mockClear();
 		loc.route('/c');
@@ -186,14 +186,14 @@ describe('Router', () => {
 		expect(scratch).toHaveProperty('innerHTML', '<h1>B</h1><p>hello</p>');
 		// We should never re-invoke <A /> while loading <B /> (that would be a remount of the old route):
 		expect(B).not.toHaveBeenCalled();
-		expect(C).toHaveBeenCalledWith({ path: '/c', query: {}, params: {} }, expect.anything());
+		expect(C).toHaveBeenCalledWith({ path: '/c', query: {}, params: {}, rest: '' }, expect.anything());
 
 		C.mockClear();
 		await sleep(10);
 
 		expect(scratch).toHaveProperty('innerHTML', '<h1>C</h1>');
 		expect(B).not.toHaveBeenCalled();
-		expect(C).toHaveBeenCalledWith({ path: '/c', query: {}, params: {} }, expect.anything());
+		expect(C).toHaveBeenCalledWith({ path: '/c', query: {}, params: {}, rest: '' }, expect.anything());
 
 		// "instant" routing to already-loaded routes
 
@@ -205,7 +205,7 @@ describe('Router', () => {
 		expect(scratch).toHaveProperty('innerHTML', '<h1>B</h1><p>hello</p>');
 		expect(C).not.toHaveBeenCalled();
 		// expect(B).toHaveBeenCalledTimes(1);
-		expect(B).toHaveBeenCalledWith({ path: '/b', query: {}, params: {} }, expect.anything());
+		expect(B).toHaveBeenCalledWith({ path: '/b', query: {}, params: {}, rest: '' }, expect.anything());
 
 		B.mockClear();
 		loc.route('/');
@@ -214,7 +214,7 @@ describe('Router', () => {
 		expect(scratch).toHaveProperty('innerHTML', '<h1>A</h1><p>hello</p>');
 		expect(B).not.toHaveBeenCalled();
 		// expect(A).toHaveBeenCalledTimes(1);
-		expect(A).toHaveBeenCalledWith({ path: '/', query: {}, params: {} }, expect.anything());
+		expect(A).toHaveBeenCalledWith({ path: '/', query: {}, params: {}, rest: '' }, expect.anything());
 	});
 
 	describe('intercepted VS external links', () => {
@@ -436,4 +436,66 @@ describe('Router', () => {
 
 		pushState.mockRestore();
 	});
+
+	it('should match nested routes', async () => {
+		let route;
+		const Inner = () => html`
+			<${Router}>
+				<${Route}
+					path="/bob"
+					component=${() => {
+						route = useRoute();
+						return null;
+					}}
+				/>
+			<//>
+		`;
+
+		render(
+			html`
+				<${LocationProvider}>
+					<${Router}>
+						<${Route} path="/foo/:id/*" component=${Inner} />
+					<//>
+					<a href="/foo/bar/bob"></a>
+				<//>
+			`,
+			scratch
+		);
+
+		scratch.querySelector('a[href="/foo/bar/bob"]').click();
+		await sleep(20);
+		expect(route).toMatchObject({ path: '/bob', params: { id: 'bar' } });
+	});
+
+	it('should append params in nested routes', async () => {
+		let params;
+		const Inner = () => html`
+			<${Router}>
+				<${Route}
+					path="/bob"
+					component=${() => {
+						params = useRoute().params;
+						return null;
+					}}
+				/>
+			<//>
+		`;
+
+		render(
+			html`
+				<${LocationProvider}>
+					<${Router}>
+						<${Route} path="/foo/:id/*" component=${Inner} />
+					<//>
+					<a href="/foo/bar/bob"></a>
+				<//>
+			`,
+			scratch
+		);
+
+		scratch.querySelector('a[href="/foo/bar/bob"]').click();
+		await sleep(20);
+		expect(params).toMatchObject({ id: 'bar' });
+	});
 });