Merge branch 'main' into route-params-possibility

Author: developit

CHANGELOG.md

@@ -1,5 +1,23 @@
 # preact-iso
 
+## 2.0.3
+
+### Patch Changes
+
+- [`62840d8`](https://github.com/preactjs/wmr/commit/62840d82eddf1bda9447c08750fe6886751edee7) [#665](https://github.com/preactjs/wmr/pull/665) Thanks [@rschristian](https://github.com/rschristian)! - Removing unused imports (and associated console warnings) in preact-iso
+
+## 2.0.2
+
+### Patch Changes
+
+- [`c1f3f0e`](https://github.com/preactjs/wmr/commit/c1f3f0e42a053811fe894f91a7bd702247e550d5) [#608](https://github.com/preactjs/wmr/pull/608) Thanks [@marvinhagemeister](https://github.com/marvinhagemeister)! - Fix `useRoute` missing in main entry exports
+
+## 2.0.1
+
+### Patch Changes
+
+- [`79c7fd6`](https://github.com/preactjs/wmr/commit/79c7fd6a5cd46904779a630ac42207e9bf918f1c) [#594](https://github.com/preactjs/wmr/pull/594) Thanks [@developit](https://github.com/developit)! - Fixes a race condition in preact-iso `Router` by registering the link click handler immediately.
+
 ## 2.0.0
 
 ### Major Changes

hydrate.d.ts

@@ -1,3 +1,3 @@
-import { ComponentChild, VNode } from 'preact';
+import { ComponentChild } from 'preact';
 
 export default function hydrate(jsx: ComponentChild, parent?: Element | Document | ShadowRoot | DocumentFragment): void;

index.js

@@ -1,4 +1,4 @@
-export { Router, LocationProvider, useLocation, Route } from './router.js';
+export { Router, LocationProvider, useLocation, Route, useRoute } from './router.js';
 export { default as lazy, ErrorBoundary } from './lazy.js';
 export { default as hydrate } from './hydrate.js';
 

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "preact-iso",
-	"version": "2.0.0",
+	"version": "2.0.3",
 	"description": "Isomorphic utilities for Preact",
 	"main": "./index.js",
 	"module": "./index.js",

router.js

@@ -1,5 +1,5 @@
 import { h, createContext, cloneElement, toChildArray } from 'preact';
-import { useContext, useMemo, useReducer, useEffect, useLayoutEffect, useRef } from 'preact/hooks';
+import { useContext, useMemo, useReducer, useLayoutEffect, useRef } from 'preact/hooks';
 
 let push;
 const UPDATE = (state, url) => {
@@ -62,7 +62,7 @@ export function LocationProvider(props) {
 		return { url, path, query: Object.fromEntries(u.searchParams), route, wasPush };
 	}, [url]);
 
-	useEffect(() => {
+	useLayoutEffect(() => {
 		addEventListener('click', route);
 		addEventListener('popstate', route);
 

test/match.test.js

@@ -1,53 +1,75 @@
 import { exec } from '../router.js';
 
-function doExec(path, route, opts) {
-	return exec(path, route, { path, query: {}, params: {}, ...(opts || {}) });
+function execPath(path, pattern, opts) {
+	return exec(path, pattern, { path, query: {}, params: {}, ...(opts || {}) });
 }
 
 describe('match', () => {
 	it('Base route', () => {
-		const accurateResult = doExec('/', '/');
+		const accurateResult = execPath('/', '/');
 		expect(accurateResult).toEqual({ path: '/', params: {}, query: {} });
 
-		const inaccurateResult = doExec('/user/1', '/');
+		const inaccurateResult = execPath('/user/1', '/');
 		expect(inaccurateResult).toEqual(undefined);
 	});
 
 	it('Param route', () => {
-		const accurateResult = doExec('/user/2', '/user/:id');
-		expect(accurateResult).toEqual({ path: '/user/2', params: { id: '2' }, query: {}, id: '2' });
+		const accurateResult = execPath('/user/2', '/user/:id');
+		expect(accurateResult).toEqual({ path: '/user/2', params: { id: '2' }, id: '2', query: {} });
 
-		const inaccurateResult = doExec('/', '/user/:id');
+		const inaccurateResult = execPath('/', '/user/:id');
 		expect(inaccurateResult).toEqual(undefined);
 	});
 
 	it('Optional param route', () => {
-		const accurateResult = doExec('/user', '/user/:id?');
-		expect(accurateResult).toEqual({ path: '/user', params: { id: undefined }, query: {} });
+		const accurateResult = execPath('/user', '/user/:id?');
+		expect(accurateResult).toEqual({ path: '/user', params: { id: undefined }, id: undefined, query: {} });
 
-		const inaccurateResult = doExec('/', '/user/:id?');
+		const inaccurateResult = execPath('/', '/user/:id?');
 		expect(inaccurateResult).toEqual(undefined);
 	});
 
+	it('Optional rest param route "/:x*"', () => {
+		const accurateResult = execPath('/user', '/user/:id?');
+		expect(accurateResult).toEqual({ path: '/user', params: { id: undefined }, id: undefined, query: {} });
+
+		const inaccurateResult = execPath('/', '/user/:id?');
+		expect(inaccurateResult).toEqual(undefined);
+	});
+
+	it('Rest param route "/:x+"', () => {
+		const matchedResult = execPath('/user/foo', '/user/:id+');
+		expect(matchedResult).toEqual({ path: '/user/foo', params: { id: 'foo' } });
+
+		const matchedResultWithSlash = execPath('/user/foo/bar', '/user/:id+');
+		expect(matchedResultWithSlash).toEqual({ path: '/user/foo/bar', params: { id: 'foo/bar' }, id: 'foo/bar' });
+
+		const emptyResult = execPath('/user', '/user/:id+');
+		expect(emptyResult).toEqual(undefined);
+
+		const mismatchedResult = execPath('/', '/user/:id+');
+		expect(mismatchedResult).toEqual(undefined);
+	});
+
 	it('Handles leading/trailing slashes', () => {
-		const result = doExec('/about-late/_SEGMENT1_/_SEGMENT2_/', '/about-late/:seg1/:seg2/');
+		const result = execPath('/about-late/_SEGMENT1_/_SEGMENT2_/', '/about-late/:seg1/:seg2/');
 		expect(result).toEqual({
+			path: '/about-late/_SEGMENT1_/_SEGMENT2_/',
 			params: {
 				seg1: '_SEGMENT1_',
 				seg2: '_SEGMENT2_'
 			},
-			path: '/about-late/_SEGMENT1_/_SEGMENT2_/',
-			query: {},
 			seg1: '_SEGMENT1_',
-			seg2: '_SEGMENT2_'
+			seg2: '_SEGMENT2_',
+			query: {},
 		});
 	});
 
 	it('should not overwrite existing properties', () => {
-		const result = doExec('/foo/bar', '/:path/:query');
+		const result = execPath('/foo/bar', '/:path/:query', { path: '/custom-path' });
 		expect(result).toEqual({
 			params: { path: 'foo', query: 'bar' },
-			path: '/foo/bar',
+			path: '/custom-path',
 			query: {}
 		});
 	});

test/router.test.js

@@ -429,7 +429,7 @@ describe('Router', () => {
 		await sleep(20);
 
 		scratch.querySelector('a[href="/foo#foo"]').click();
-		await sleep(100);
+		await sleep(20);
 		expect(Route).toHaveBeenCalledTimes(1);
 		expect(loc).toMatchObject({ url: '/foo#foo', path: '/foo' });
 		expect(pushState).toHaveBeenCalled();