feat: types shuffling

.eslintrc.js

@@ -9,5 +9,6 @@ module.exports = {
   rules: {
     'prettier/prettier': 'error',
     'no-use-before-define': 'off',
+    'react/no-unused-prop-types': 'off',
   },
 };

src/ElementsRenderer.ts

@@ -1,6 +1,24 @@
 import React from 'react';
 
-import { ElementsRendererProps, ResolvedElement } from './typeUtils';
+import HttpError from './HttpError';
+import { RenderArgsElements } from './resolveRenderArgs';
+import { Match, ResolvedElement } from './utilityTypes';
+
+export type RenderPendingArgs = Match;
+
+export interface RenderReadyArgs extends Match {
+  elements: RenderArgsElements;
+}
+
+export interface RenderErrorArgs extends Match {
+  error: HttpError;
+}
+
+export type RenderArgs = RenderPendingArgs | RenderReadyArgs | RenderErrorArgs;
+
+export interface ElementsRendererProps {
+  elements: RenderArgsElements;
+}
 
 function accumulateElement(
   children: ResolvedElement,

src/Link.tsx

@@ -2,8 +2,79 @@ import useEventCallback from '@restart/hooks/useEventCallback';
 import React from 'react';
 import warning from 'tiny-warning';
 
-import { LinkInjectedProps, LinkProps } from './typeUtils';
 import useRouter from './useRouter';
+import { LocationDescriptor } from './utilityTypes';
+
+export type LinkPropsWithActivePropName<
+  TInner extends React.ComponentType<
+    LinkInjectedProps & { [activePropName in TActivePropName]: boolean }
+  >,
+  TActivePropName extends string,
+> = ReplaceLinkProps<
+  TInner,
+  LinkPropsNodeChild & {
+    as: TInner;
+    activePropName: TActivePropName;
+  } & {
+    [activePropName in TActivePropName]?: null;
+  }
+>;
+export interface LinkPropsCommon {
+  to: LocationDescriptor;
+  // match: Match,  provided by withRouter
+  // router: Router, provided by withRouter
+  exact?: boolean;
+  target?: string;
+  onClick?: (event: React.SyntheticEvent<any>) => void;
+}
+
+export interface LinkInjectedProps {
+  href: string;
+  onClick: (event: React.SyntheticEvent<any>) => void;
+}
+
+export interface LinkPropsNodeChild extends LinkPropsCommon {
+  activeClassName?: string;
+  activeStyle?: Record<string, unknown>;
+  children?: React.ReactNode;
+}
+
+type ReplaceLinkProps<TInner extends React.ElementType, TProps> = Omit<
+  React.ComponentProps<TInner>,
+  keyof TProps | keyof LinkInjectedProps
+> &
+  TProps;
+
+export type LinkPropsSimple = ReplaceLinkProps<'a', LinkPropsNodeChild>;
+
+export type LinkPropsWithAs<
+  TInner extends React.ElementType<LinkInjectedProps>,
+> = ReplaceLinkProps<
+  TInner,
+  LinkPropsNodeChild & {
+    as: TInner;
+    activePropName?: null;
+  }
+>;
+export interface LinkPropsWithFunctionChild extends LinkPropsCommon {
+  children: (linkRenderArgs: {
+    href: string;
+    active: boolean;
+    onClick: (event: React.SyntheticEvent<any>) => void;
+  }) => React.ReactNode;
+}
+
+export type LinkProps<
+  TInner extends React.ElementType = never,
+  TInnerWithActivePropName extends React.ComponentType<
+    LinkInjectedProps & { [activePropName in TActivePropName]: boolean }
+  > = never,
+  TActivePropName extends string = never,
+> =
+  | LinkPropsSimple
+  | LinkPropsWithAs<TInner>
+  | LinkPropsWithActivePropName<TInnerWithActivePropName, TActivePropName>
+  | LinkPropsWithFunctionChild;
 
 // TODO: Try to type this & simplify those types in next breaking change.
 function Link({

src/Matcher.ts

@@ -15,7 +15,7 @@ import type {
   RouteConfig,
   RouteIndices,
   RouteObject,
-} from './typeUtils';
+} from './utilityTypes';
 
 export type RouteConfigGroups = Record<string, RouteConfig>;
 
@@ -31,6 +31,12 @@ export interface MatcherOptions {
   warnOnPartiallyMatchedNamedRoutes?: boolean;
 }
 
+/**
+ * An object implementing the matching algorithm.
+ *
+ * User code generally shouldn't need this, but it doesn't hurt to here,
+ * since we use it for routerShape below.
+ */
 export default class Matcher {
   private routeConfig: RouteConfig;
 
@@ -76,6 +82,11 @@ export default class Matcher {
     return `${basePath}${this.getCanonicalPattern(path)}`;
   }
 
+  /**
+   * for match as above, returns whether match corresponds to location or a
+   * subpath of location; if exact is set, returns whether match corresponds
+   * exactly to location
+   */
   isActive(
     { location: matchLocation }: Match,
     location: LocationDescriptorObject,
@@ -90,6 +101,10 @@ export default class Matcher {
     );
   }
 
+  /**
+   * Returns the path string for a pattern of the same format as a route path
+   * and a object of the corresponding path parameters
+   */
   format(pattern: string, params: ParamsDescriptor): string {
     return compile(pattern)(params);
   }

src/Redirect.tsx

@@ -2,7 +2,13 @@
 import React from 'react';
 
 import RedirectException from './RedirectException';
-import { LocationDescriptor, Match, RedirectOptions } from './typeUtils';
+import { LocationDescriptor, Match } from './utilityTypes';
+
+export interface RedirectOptions {
+  from?: string;
+  to: string | ((match: Match) => LocationDescriptor);
+  status?: number;
+}
 
 class Redirect implements RedirectOptions {
   path?: string;
@@ -38,8 +44,11 @@ if (__DEV__) {
   (Redirect.prototype as any).isReactComponent = {};
 }
 
+// It's more "natural" to call this "props" when used in the context of a
+//  React component.
+export type RedirectProps = RedirectOptions;
 // This actually doesn't extend a React.Component, but we need consumer to think that it does
-declare class RedirectType extends React.Component<RedirectOptions> {
+declare class RedirectType extends React.Component<RedirectProps> {
   constructor(config: RedirectOptions);
 }
 

src/ResolverUtils.ts

@@ -2,7 +2,12 @@ import isPromise from 'is-promise';
 import { setImmediate } from 'tiny-set-immediate';
 import warning from 'tiny-warning';
 
-import { Match, RouteIndices, RouteMatch, RouteObjectBase } from './typeUtils';
+import {
+  Match,
+  RouteIndices,
+  RouteMatch,
+  RouteObjectBase,
+} from './utilityTypes';
 
 const UNRESOLVED = {};
 

src/Route.ts

@@ -1,7 +1,15 @@
 // eslint-disable-next-line max-classes-per-file
 import React from 'react';
 
-import type { RouteObject, RouteProps } from './typeUtils';
+import type { RouteObject, RouteObjectBase } from './utilityTypes';
+
+export interface RouteProps extends RouteObjectBase {
+  children?: React.ReactNode | Record<string, React.ReactNode>;
+}
+
+export interface RouteProps extends RouteObjectBase {
+  children?: React.ReactNode | Record<string, React.ReactNode>;
+}
 
 /**
  * Convenience class for creating normal routes with JSX. When not using JSX,

src/RouterContext.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Match, Router } from './typeUtils';
+import { Match, Router } from './utilityTypes';
 
 export interface RouterContextState<TContext = any> {
   match: Match<TContext> | null;

src/createBaseRouter.tsx

@@ -4,19 +4,19 @@ import { Store } from 'redux';
 import warning from 'tiny-warning';
 
 import ActionTypes from './ActionTypes';
+import { RenderArgs } from './ElementsRenderer';
 import RouterContext, { RouterContextState } from './RouterContext';
 import StaticContainer from './StaticContainer';
-import createRender from './createRender';
+import createRender, { CreateRenderOptions } from './createRender';
 import createStoreRouterObject from './createStoreRouterObject';
 import resolveRenderArgs from './resolveRenderArgs';
-import {
-  ConnectedRouterProps,
-  CreateRenderOptions,
-  MatchBase,
-  RenderArgs,
-  Resolver,
-  Router,
-} from './typeUtils';
+import { MatchBase, Resolver, Router } from './utilityTypes';
+
+export interface ConnectedRouterProps {
+  matchContext?: any;
+  resolver: Resolver;
+  initialRenderArgs?: RenderArgs;
+}
 
 interface CreateProps extends CreateRenderOptions {
   render?: (args: RenderArgs) => React.ReactElement;

src/createBrowserRouter.tsx

@@ -1,13 +1,24 @@
 import BrowserProtocol from 'farce/BrowserProtocol';
 import React from 'react';
 
-import createFarceRouter from './createFarceRouter';
-import resolver from './resolver';
-import {
-  BrowserRouter,
-  BrowserRouterOptions,
+import { RenderArgs } from './ElementsRenderer';
+import createFarceRouter, {
+  FarceRouterOptions,
   FarceRouterProps,
-} from './typeUtils';
+} from './createFarceRouter';
+import resolver from './resolver';
+import { Resolver } from './utilityTypes';
+
+export interface BrowserRouterProps
+  extends Omit<FarceRouterProps, 'resolver'> {
+  resolver?: Resolver;
+}
+
+export type BrowserRouter = React.ComponentType<BrowserRouterProps>;
+export interface BrowserRouterOptions
+  extends Omit<FarceRouterOptions, 'historyProtocol'> {
+  render?: (args: RenderArgs) => React.ReactElement;
+}
 
 export default function createBrowserRouter(
   options: BrowserRouterOptions,

src/createConnectedRouter.tsx

@@ -2,18 +2,21 @@ import React from 'react';
 import { shallowEqual, useSelector, useStore } from 'react-redux';
 import { Store } from 'redux';
 
-import createBaseRouter from './createBaseRouter';
-import {
-  ConnectedRouterOptions,
-  ConnectedRouterProps,
-  ConnectedRouter as ConnectedRouterType,
-  FoundState,
-} from './typeUtils';
+import { RenderArgs } from './ElementsRenderer';
+import createBaseRouter, { ConnectedRouterProps } from './createBaseRouter';
+import { CreateRenderOptions } from './createRender';
+import { FoundState } from './utilityTypes';
+
+export type ConnectedRouter = React.ComponentType<ConnectedRouterProps>;
+export interface ConnectedRouterOptions extends CreateRenderOptions {
+  render?: (args: RenderArgs) => React.ReactElement;
+  getFound?: (store: Store) => FoundState;
+}
 
 export default function createConnectedRouter({
   getFound = ({ found }: any) => found as FoundState,
   ...options
-}: ConnectedRouterOptions): ConnectedRouterType {
+}: ConnectedRouterOptions): ConnectedRouter {
   const Router = createBaseRouter(options);
 
   const getFoundState = (state: Store) => {

src/createElements.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import warning from 'tiny-warning';
 
 import { isResolved } from './ResolverUtils';
-import { Match, ResolvedElement, RouteMatch } from './typeUtils';
+import { Match, ResolvedElement, RouteMatch } from './utilityTypes';
 
 /**
  * maps an array of `Route`s to React elements. The returned array

src/createFarceRouter.tsx

@@ -1,10 +1,23 @@
 import useIsomorphicEffect from '@restart/hooks/useIsomorphicEffect';
+import { HistoryEnhancerOptions, Protocol } from 'farce';
 import React, { forwardRef, useImperativeHandle, useState } from 'react';
+import { Middleware, Store } from 'redux';
 
-import createBaseRouter from './createBaseRouter';
+import createBaseRouter, { ConnectedRouterProps } from './createBaseRouter';
+import { ConnectedRouterOptions } from './createConnectedRouter';
 import createFarceStore from './createFarceStore';
-import { FarceRouter, FarceRouterOptions, FoundState } from './typeUtils';
+import { FoundState, RouteConfig } from './utilityTypes';
 
+export interface FarceRouterOptions extends ConnectedRouterOptions {
+  store?: Store;
+  historyProtocol: Protocol;
+  historyMiddlewares?: Middleware[];
+  historyOptions?: Omit<HistoryEnhancerOptions, 'protocol' | 'middlewares'>;
+  routeConfig: RouteConfig;
+}
+
+export type FarceRouter = React.ComponentType<FarceRouterProps>;
+export type FarceRouterProps = ConnectedRouterProps;
 export default function createFarceRouter({
   store: userStore,
   historyProtocol,

src/createFarceStore.ts

@@ -15,7 +15,7 @@ import {
 import Matcher from './Matcher';
 import createMatchEnhancer from './createMatchEnhancer';
 import foundReducer from './foundReducer';
-import { RouteConfig } from './typeUtils';
+import { RouteConfig } from './utilityTypes';
 
 interface Props {
   matcherOptions?: any;

src/createInitialBrowserRouter.ts

@@ -1,8 +1,15 @@
 import BrowserProtocol from 'farce/BrowserProtocol';
 
-import createInitialFarceRouter from './createInitialFarceRouter';
+import { BrowserRouter } from './createBrowserRouter';
+import createInitialFarceRouter, {
+  InitialFarceRouterOptions,
+} from './createInitialFarceRouter';
 import resolver from './resolver';
-import { BrowserRouter, InitialBrowserRouterOptions } from './typeUtils';
+
+export type InitialBrowserRouterOptions = Omit<
+  InitialFarceRouterOptions,
+  'resolver' | 'historyProtocol'
+>;
 
 export default function createInitialBrowserRouter(
   options: InitialBrowserRouterOptions,

src/createInitialFarceRouter.ts

@@ -1,7 +1,16 @@
-import createFarceRouter from './createFarceRouter';
+import createFarceRouter, {
+  FarceRouter,
+  FarceRouterOptions,
+} from './createFarceRouter';
 import createFarceStore from './createFarceStore';
 import getStoreRenderArgs from './getStoreRenderArgs';
-import { FarceRouter, InitialFarceRouterOptions } from './typeUtils';
+import { Resolver } from './utilityTypes';
+
+export interface InitialFarceRouterOptions
+  extends Omit<FarceRouterOptions, 'store'> {
+  matchContext?: any;
+  resolver: Resolver;
+}
 
 export default async function createInitialFarceRouter({
   historyProtocol,