Merge pull request #11 from maxholman/master

fix: onclick when using nav api + types

__tests__/__snapshots__/hooks.test.tsx.snap

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`useMatch 1`] = `
+exports[`Router preset pathname 1`] = `
 <DocumentFragment>
   <pre>
     {

__tests__/hooks.test.tsx

@@ -13,7 +13,7 @@ const EffCee = (_: ExtractRouteParams<typeof login.path>) => {
   return <pre>{JSON.stringify(match, null, 2)}</pre>;
 };
 
-test('useMatch', async () => {
+test('Router preset pathname', async () => {
   const { asFragment } = render(
     <Router
       pathname={login.build({

lib/Routes.tsx

@@ -3,19 +3,16 @@ import {
   forwardRef,
   isValidElement,
   useMemo,
-  type ComponentPropsWithRef,
   type PropsWithChildren,
   type ReactElement,
 } from 'react';
 import { Route } from './Route.js';
 import { RoutesContext } from './RoutesContext.js';
 import type { MatchResult } from './matcher.js';
-import type { Params } from './types.js';
+import type { Params, RouteComponentProps } from './types.js';
 import { useLocation, useRouter } from './use-router.js';
 import { flattenFragments } from './util.js';
 
-export type RouteComponent = ComponentPropsWithRef<typeof Route>;
-
 export const Routes = forwardRef<HTMLElement, PropsWithChildren>(
   ({ children }, forwardedRef) => {
     const [url] = useLocation();
@@ -24,16 +21,16 @@ export const Routes = forwardRef<HTMLElement, PropsWithChildren>(
     const { pathname } = url;
 
     const [child, matchResult] = useMemo((): [
-      ReactElement<RouteComponent> | null,
+      ReactElement<RouteComponentProps> | null,
       MatchResult<Params> | false,
     ] => {
       let match: MatchResult<Params> | false = false;
-      let matchChild: ReactElement<RouteComponent> | null = null;
+      let matchChild: ReactElement<RouteComponentProps> | null = null;
 
       flattenFragments(children)
         .filter(
-          (c): c is ReactElement<RouteComponent> =>
-            isValidElement<RouteComponent>(c) &&
+          (c): c is ReactElement<RouteComponentProps> =>
+            isValidElement<RouteComponentProps>(c) &&
             // supports native routes, and also custom route components
             (c.type === Route || 'path' in c.props),
         )

lib/components/Link.tsx

@@ -82,7 +82,7 @@ export const Link = forwardRef<
   const newProps: LinkChildProps = {
     ...props,
     href: isSameOrigin ? urlRhs(destAsUrl) : href.toString(),
-    ...(!hasNav && { onClick: handleClick }),
+    onClick: hasNav ? onClick : handleClick,
     ...(!isSameOrigin && { rel: 'no-opener noreferrer' }),
     ref,
   };

lib/matcher.ts

@@ -1,8 +1,12 @@
 import type { ReactElement } from 'react';
 import { parse } from 'regexparam';
 import { pathCache } from './path-cache.js';
-import type { RouteComponent } from './Routes.js';
-import type { ExtractRouteParams, Params, RoutingProps } from './types.js';
+import type {
+  ExtractRouteParams,
+  Params,
+  RouteComponentProps,
+  RoutingProps,
+} from './types.js';
 
 export type Match<TPath extends string = '/'> =
   | MatchResult<ExtractRouteParams<TPath>>
@@ -15,7 +19,7 @@ export interface MatchResult<P extends Params> {
 }
 
 export type Matcher = (
-  component: ReactElement<RouteComponent>,
+  component: ReactElement<RouteComponentProps>,
   pathname: string,
 ) => Match | false;
 

lib/path-cache.ts

@@ -1,6 +1,6 @@
 import type { RoutingProps } from './types.js';
 
-export function pathCache<P extends RoutingProps<string>, T>(
+export function pathCache<P extends RoutingProps, T>(
   map: WeakMap<P, T>,
   props: P,
   builder: (props: P) => T,

lib/types.ts

@@ -1,6 +1,7 @@
 import type { FC, ReactNode } from 'react';
 
-type Path = string | undefined;
+type Path = string;
+type MaybePath = Path | undefined;
 
 export type Params = Record<string, string>;
 
@@ -35,12 +36,12 @@ export type ExtractRouteParams<PathType extends Path> = string extends PathType
       : // eslint-disable-next-line @typescript-eslint/ban-types
         {};
 
-export interface RoutingProps<TPath extends Path> {
+export interface RoutingProps<TPath extends MaybePath = Path> {
   path: TPath;
   wildcard?: boolean | undefined;
 }
 
-export type RouteComponentProps<TPath extends Path> =
+export type RouteComponentProps<TPath extends Path = Path> =
   | {
       children: ReactNode;
       // path?: never;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@block65/mrr",
-  "version": "5.3.0",
+  "version": "6.0.0-rc1",
   "private": false,
   "license": "MIT",
   "sideEffects": false,