Consolidate connect logic into one file

Author: markerikson

src/components/Provider.tsx

@@ -12,8 +12,8 @@ export interface ProviderProps<A extends Action = AnyAction> {
   store: Store<FixTypeLater, A>
   /**
    * Optional context to be used internally in react-redux. Use React.createContext() to create a context to be used.
-   * If this is used, generate own connect HOC by using connectAdvanced, supplying the same context provided to the
-   * Provider. Initial value doesn't matter, as it is overwritten with the internal state of Provider.
+   * If this is used, you'll need to customize `connect` by supplying the same context provided to the Provider.
+   * Initial value doesn't matter, as it is overwritten with the internal state of Provider.
    */
   context?: Context<ReactReduxContextValue>
   children: ReactNode

src/components/connectAdvanced.tsx

@@ -1,11 +1,33 @@
+/* eslint-disable valid-jsdoc, @typescript-eslint/no-unused-vars */
 import hoistStatics from 'hoist-non-react-statics'
 import React, { useContext, useMemo, useRef, useReducer } from 'react'
 import { isValidElementType, isContextConsumer } from 'react-is'
-import type { Store } from 'redux'
-import type { SelectorFactory } from '../connect/selectorFactory'
+import type { Store, Dispatch, Action, AnyAction } from 'redux'
+
+import type {
+  AdvancedComponentDecorator,
+  ConnectedComponent,
+  DefaultRootState,
+  InferableComponentEnhancer,
+  InferableComponentEnhancerWithProps,
+  ResolveThunks,
+  DispatchProp,
+} from '../types'
+
+import defaultSelectorFactory, {
+  MapStateToPropsParam,
+  MapDispatchToPropsParam,
+  MergeProps,
+  MapDispatchToPropsNonObject,
+  SelectorFactory,
+} from '../connect/selectorFactory'
+import defaultMapDispatchToPropsFactories from '../connect/mapDispatchToProps'
+import defaultMapStateToPropsFactories from '../connect/mapStateToProps'
+import defaultMergePropsFactories from '../connect/mergeProps'
+
 import { createSubscription, Subscription } from '../utils/Subscription'
 import { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect'
-import type { AdvancedComponentDecorator, ConnectedComponent } from '../types'
+import shallowEqual from '../utils/shallowEqual'
 
 import {
   ReactReduxContext,
@@ -502,4 +524,301 @@ function connectAdvanced<S, TProps, TOwnProps, TFactoryOptions = {}>(
   return wrapWithConnect
 }
 
-export default connectAdvanced
+function match<T>(
+  arg: unknown,
+  factories: ((value: unknown) => T)[],
+  name: string
+): T {
+  for (let i = factories.length - 1; i >= 0; i--) {
+    const result = factories[i](arg)
+    if (result) return result
+  }
+
+  return ((dispatch: Dispatch, options: { wrappedComponentName: string }) => {
+    throw new Error(
+      `Invalid value of type ${typeof arg} for ${name} argument when connecting component ${
+        options.wrappedComponentName
+      }.`
+    )
+  }) as any
+}
+
+function strictEqual(a: unknown, b: unknown) {
+  return a === b
+}
+
+/**
+ * Infers the type of props that a connector will inject into a component.
+ */
+export type ConnectedProps<TConnector> =
+  TConnector extends InferableComponentEnhancerWithProps<
+    infer TInjectedProps,
+    any
+  >
+    ? unknown extends TInjectedProps
+      ? TConnector extends InferableComponentEnhancer<infer TInjectedProps>
+        ? TInjectedProps
+        : never
+      : TInjectedProps
+    : never
+
+export interface ConnectOptions<
+  State = DefaultRootState,
+  TStateProps = {},
+  TOwnProps = {},
+  TMergedProps = {}
+> extends ConnectAdvancedOptions {
+  pure?: boolean
+  areStatesEqual?: (nextState: State, prevState: State) => boolean
+
+  areOwnPropsEqual?: (
+    nextOwnProps: TOwnProps,
+    prevOwnProps: TOwnProps
+  ) => boolean
+
+  areStatePropsEqual?: (
+    nextStateProps: TStateProps,
+    prevStateProps: TStateProps
+  ) => boolean
+  areMergedPropsEqual?: (
+    nextMergedProps: TMergedProps,
+    prevMergedProps: TMergedProps
+  ) => boolean
+  forwardRef?: boolean
+}
+
+/* @public */
+function connect(): InferableComponentEnhancer<DispatchProp>
+
+/* @public */
+function connect<
+  TStateProps = {},
+  no_dispatch = {},
+  TOwnProps = {},
+  State = DefaultRootState
+>(
+  mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>
+): InferableComponentEnhancerWithProps<TStateProps & DispatchProp, TOwnProps>
+
+/* @public */
+function connect<no_state = {}, TDispatchProps = {}, TOwnProps = {}>(
+  mapStateToProps: null | undefined,
+  mapDispatchToProps: MapDispatchToPropsNonObject<TDispatchProps, TOwnProps>
+): InferableComponentEnhancerWithProps<TDispatchProps, TOwnProps>
+
+/* @public */
+function connect<no_state = {}, TDispatchProps = {}, TOwnProps = {}>(
+  mapStateToProps: null | undefined,
+  mapDispatchToProps: MapDispatchToPropsParam<TDispatchProps, TOwnProps>
+): InferableComponentEnhancerWithProps<ResolveThunks<TDispatchProps>, TOwnProps>
+
+/* @public */
+function connect<
+  TStateProps = {},
+  TDispatchProps = {},
+  TOwnProps = {},
+  State = DefaultRootState
+>(
+  mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>,
+  mapDispatchToProps: MapDispatchToPropsNonObject<TDispatchProps, TOwnProps>
+): InferableComponentEnhancerWithProps<TStateProps & TDispatchProps, TOwnProps>
+
+/* @public */
+function connect<
+  TStateProps = {},
+  TDispatchProps = {},
+  TOwnProps = {},
+  State = DefaultRootState
+>(
+  mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>,
+  mapDispatchToProps: MapDispatchToPropsParam<TDispatchProps, TOwnProps>
+): InferableComponentEnhancerWithProps<
+  TStateProps & ResolveThunks<TDispatchProps>,
+  TOwnProps
+>
+
+/* @public */
+function connect<
+  no_state = {},
+  no_dispatch = {},
+  TOwnProps = {},
+  TMergedProps = {}
+>(
+  mapStateToProps: null | undefined,
+  mapDispatchToProps: null | undefined,
+  mergeProps: MergeProps<undefined, undefined, TOwnProps, TMergedProps>
+): InferableComponentEnhancerWithProps<TMergedProps, TOwnProps>
+
+/* @public */
+function connect<
+  TStateProps = {},
+  no_dispatch = {},
+  TOwnProps = {},
+  TMergedProps = {},
+  State = DefaultRootState
+>(
+  mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>,
+  mapDispatchToProps: null | undefined,
+  mergeProps: MergeProps<TStateProps, undefined, TOwnProps, TMergedProps>
+): InferableComponentEnhancerWithProps<TMergedProps, TOwnProps>
+
+/* @public */
+function connect<
+  no_state = {},
+  TDispatchProps = {},
+  TOwnProps = {},
+  TMergedProps = {}
+>(
+  mapStateToProps: null | undefined,
+  mapDispatchToProps: MapDispatchToPropsParam<TDispatchProps, TOwnProps>,
+  mergeProps: MergeProps<undefined, TDispatchProps, TOwnProps, TMergedProps>
+): InferableComponentEnhancerWithProps<TMergedProps, TOwnProps>
+
+/* @public */
+// @ts-ignore
+function connect<
+  TStateProps = {},
+  no_dispatch = {},
+  TOwnProps = {},
+  State = DefaultRootState
+>(
+  mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>,
+  mapDispatchToProps: null | undefined,
+  mergeProps: null | undefined,
+  options: ConnectOptions<State, TStateProps, TOwnProps>
+): InferableComponentEnhancerWithProps<DispatchProp & TStateProps, TOwnProps>
+
+/* @public */
+function connect<TStateProps = {}, TDispatchProps = {}, TOwnProps = {}>(
+  mapStateToProps: null | undefined,
+  mapDispatchToProps: MapDispatchToPropsNonObject<TDispatchProps, TOwnProps>,
+  mergeProps: null | undefined,
+  options: ConnectOptions<{}, TStateProps, TOwnProps>
+): InferableComponentEnhancerWithProps<TDispatchProps, TOwnProps>
+
+/* @public */
+function connect<TStateProps = {}, TDispatchProps = {}, TOwnProps = {}>(
+  mapStateToProps: null | undefined,
+  mapDispatchToProps: MapDispatchToPropsParam<TDispatchProps, TOwnProps>,
+  mergeProps: null | undefined,
+  options: ConnectOptions<{}, TStateProps, TOwnProps>
+): InferableComponentEnhancerWithProps<ResolveThunks<TDispatchProps>, TOwnProps>
+
+/* @public */
+function connect<
+  TStateProps = {},
+  TDispatchProps = {},
+  TOwnProps = {},
+  State = DefaultRootState
+>(
+  mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>,
+  mapDispatchToProps: MapDispatchToPropsNonObject<TDispatchProps, TOwnProps>,
+  mergeProps: null | undefined,
+  options: ConnectOptions<State, TStateProps, TOwnProps>
+): InferableComponentEnhancerWithProps<TStateProps & TDispatchProps, TOwnProps>
+
+/* @public */
+function connect<
+  TStateProps = {},
+  TDispatchProps = {},
+  TOwnProps = {},
+  State = DefaultRootState
+>(
+  mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>,
+  mapDispatchToProps: MapDispatchToPropsParam<TDispatchProps, TOwnProps>,
+  mergeProps: null | undefined,
+  options: ConnectOptions<State, TStateProps, TOwnProps>
+): InferableComponentEnhancerWithProps<
+  TStateProps & ResolveThunks<TDispatchProps>,
+  TOwnProps
+>
+
+/* @public */
+function connect<
+  TStateProps = {},
+  TDispatchProps = {},
+  TOwnProps = {},
+  TMergedProps = {},
+  State = DefaultRootState
+>(
+  mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>,
+  mapDispatchToProps: MapDispatchToPropsParam<TDispatchProps, TOwnProps>,
+  mergeProps: MergeProps<TStateProps, TDispatchProps, TOwnProps, TMergedProps>,
+  options?: ConnectOptions<State, TStateProps, TOwnProps, TMergedProps>
+): InferableComponentEnhancerWithProps<TMergedProps, TOwnProps>
+
+/**
+ * Connects a React component to a Redux store.
+ *
+ * - Without arguments, just wraps the component, without changing the behavior / props
+ *
+ * - If 2 params are passed (3rd param, mergeProps, is skipped), default behavior
+ * is to override ownProps (as stated in the docs), so what remains is everything that's
+ * not a state or dispatch prop
+ *
+ * - When 3rd param is passed, we don't know if ownProps propagate and whether they
+ * should be valid component props, because it depends on mergeProps implementation.
+ * As such, it is the user's responsibility to extend ownProps interface from state or
+ * dispatch props or both when applicable
+ *
+ * @param mapStateToProps A function that extracts values from state
+ * @param mapDispatchToProps Setup for dispatching actions
+ * @param mergeProps Optional callback to merge state and dispatch props together
+ * @param options Options for configuring the connection
+ *
+ */
+function connect(
+  mapStateToProps?: unknown,
+  mapDispatchToProps?: unknown,
+  mergeProps?: unknown,
+  {
+    pure = true,
+    areStatesEqual = strictEqual,
+    areOwnPropsEqual = shallowEqual,
+    areStatePropsEqual = shallowEqual,
+    areMergedPropsEqual = shallowEqual,
+    ...extraOptions
+  }: ConnectOptions<unknown, unknown, unknown, unknown> = {}
+): unknown {
+  const initMapStateToProps = match(
+    mapStateToProps,
+    // @ts-ignore
+    defaultMapStateToPropsFactories,
+    'mapStateToProps'
+  )
+  const initMapDispatchToProps = match(
+    mapDispatchToProps,
+    // @ts-ignore
+    defaultMapDispatchToPropsFactories,
+    'mapDispatchToProps'
+  )
+  const initMergeProps = match(
+    mergeProps,
+    // @ts-ignore
+    defaultMergePropsFactories,
+    'mergeProps'
+  )
+
+  return connectAdvanced(
+    defaultSelectorFactory as SelectorFactory<any, any, any, any>,
+    {
+      // if mapStateToProps is falsy, the Connect component doesn't subscribe to store state changes
+      shouldHandleStateChanges: Boolean(mapStateToProps),
+
+      // passed through to selectorFactory
+      initMapStateToProps,
+      initMapDispatchToProps,
+      initMergeProps,
+      pure,
+      areStatesEqual,
+      areOwnPropsEqual,
+      areStatePropsEqual,
+      areMergedPropsEqual,
+
+      // any extra options args can override defaults of connect or connectAdvanced
+      ...extraOptions,
+    }
+  )
+}
+
+export default connect