@depup/react-redux 9.3.0-depup.53

package/src/hooks/useReduxContext.ts

@@ -0,0 +1,42 @@
+import { React } from '../utils/react'
+import { ReactReduxContext } from '../components/Context'
+import type { ReactReduxContextValue } from '../components/Context'
+
+/**
+ * Hook factory, which creates a `useReduxContext` hook bound to a given context. This is a low-level
+ * hook that you should usually not need to call directly.
+ *
+ * @param {React.Context} [context=ReactReduxContext] Context passed to your `<Provider>`.
+ * @returns {Function} A `useReduxContext` hook bound to the specified context.
+ */
+export function createReduxContextHook(context = ReactReduxContext) {
+  return function useReduxContext(): ReactReduxContextValue {
+    const contextValue = React.useContext(context)
+
+    if (process.env.NODE_ENV !== 'production' && !contextValue) {
+      throw new Error(
+        'could not find react-redux context value; please ensure the component is wrapped in a <Provider>',
+      )
+    }
+
+    return contextValue!
+  }
+}
+
+/**
+ * A hook to access the value of the `ReactReduxContext`. This is a low-level
+ * hook that you should usually not need to call directly.
+ *
+ * @returns {any} the value of the `ReactReduxContext`
+ *
+ * @example
+ *
+ * import React from 'react'
+ * import { useReduxContext } from 'react-redux'
+ *
+ * export const CounterComponent = () => {
+ *   const { store } = useReduxContext()
+ *   return <div>{store.getState()}</div>
+ * }
+ */
+export const useReduxContext = /*#__PURE__*/ createReduxContextHook()

package/src/hooks/useSelector.ts

@@ -0,0 +1,286 @@
+//import * as React from 'react'
+import { React } from '../utils/react'
+import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector.js'
+import type { ReactReduxContextValue } from '../components/Context'
+import { ReactReduxContext } from '../components/Context'
+import type { EqualityFn, NoInfer } from '../types'
+import {
+  createReduxContextHook,
+  useReduxContext as useDefaultReduxContext,
+} from './useReduxContext'
+
+/**
+ * The frequency of development mode checks.
+ *
+ * @since 8.1.0
+ * @internal
+ */
+export type DevModeCheckFrequency = 'never' | 'once' | 'always'
+
+/**
+ * Represents the configuration for development mode checks.
+ *
+ * @since 9.0.0
+ * @internal
+ */
+export interface DevModeChecks {
+  /**
+   * Overrides the global stability check for the selector.
+   * - `once` - Run only the first time the selector is called.
+   * - `always` - Run every time the selector is called.
+   * - `never` - Never run the stability check.
+   *
+   * @default 'once'
+   *
+   * @since 8.1.0
+   */
+  stabilityCheck: DevModeCheckFrequency
+
+  /**
+   * Overrides the global identity function check for the selector.
+   * - `once` - Run only the first time the selector is called.
+   * - `always` - Run every time the selector is called.
+   * - `never` - Never run the identity function check.
+   *
+   * **Note**: Previously referred to as `noopCheck`.
+   *
+   * @default 'once'
+   *
+   * @since 9.0.0
+   */
+  identityFunctionCheck: DevModeCheckFrequency
+}
+
+export interface UseSelectorOptions<Selected = unknown> {
+  equalityFn?: EqualityFn<Selected>
+
+  /**
+   * `useSelector` performs additional checks in development mode to help
+   * identify and warn about potential issues in selector behavior. This
+   * option allows you to customize the behavior of these checks per selector.
+   *
+   * @since 9.0.0
+   */
+  devModeChecks?: Partial<DevModeChecks>
+}
+
+/**
+ * Represents a custom hook that allows you to extract data from the
+ * Redux store state, using a selector function. The selector function
+ * takes the current state as an argument and returns a part of the state
+ * or some derived data. The hook also supports an optional equality
+ * function or options object to customize its behavior.
+ *
+ * @template StateType - The specific type of state this hook operates on.
+ *
+ * @public
+ */
+export interface UseSelector<StateType = unknown> {
+  /**
+   * A function that takes a selector function as its first argument.
+   * The selector function is responsible for selecting a part of
+   * the Redux store's state or computing derived data.
+   *
+   * @param selector - A function that receives the current state and returns a part of the state or some derived data.
+   * @param equalityFnOrOptions - An optional equality function or options object for customizing the behavior of the selector.
+   * @returns The selected part of the state or derived data.
+   *
+   * @template TState - The specific type of state this hook operates on.
+   * @template Selected - The type of the value that the selector function will return.
+   */
+  <TState extends StateType = StateType, Selected = unknown>(
+    selector: (state: TState) => Selected,
+    equalityFnOrOptions?: EqualityFn<Selected> | UseSelectorOptions<Selected>,
+  ): Selected
+
+  /**
+   * Creates a "pre-typed" version of {@linkcode useSelector useSelector}
+   * where the `state` type is predefined.
+   *
+   * This allows you to set the `state` type once, eliminating the need to
+   * specify it with every {@linkcode useSelector useSelector} call.
+   *
+   * @returns A pre-typed `useSelector` with the state type already defined.
+   *
+   * @example
+   * ```ts
+   * export const useAppSelector = useSelector.withTypes<RootState>()
+   * ```
+   *
+   * @template OverrideStateType - The specific type of state this hook operates on.
+   *
+   * @since 9.1.0
+   */
+  withTypes: <
+    OverrideStateType extends StateType,
+  >() => UseSelector<OverrideStateType>
+}
+
+const refEquality: EqualityFn<any> = (a, b) => a === b
+
+/**
+ * Hook factory, which creates a `useSelector` hook bound to a given context.
+ *
+ * @param {React.Context} [context=ReactReduxContext] Context passed to your `<Provider>`.
+ * @returns {Function} A `useSelector` hook bound to the specified context.
+ */
+export function createSelectorHook(
+  context: React.Context<ReactReduxContextValue<
+    any,
+    any
+  > | null> = ReactReduxContext,
+): UseSelector {
+  const useReduxContext =
+    context === ReactReduxContext
+      ? useDefaultReduxContext
+      : createReduxContextHook(context)
+
+  const useSelector = <TState, Selected>(
+    selector: (state: TState) => Selected,
+    equalityFnOrOptions:
+      | EqualityFn<NoInfer<Selected>>
+      | UseSelectorOptions<NoInfer<Selected>> = {},
+  ): Selected => {
+    const { equalityFn = refEquality } =
+      typeof equalityFnOrOptions === 'function'
+        ? { equalityFn: equalityFnOrOptions }
+        : equalityFnOrOptions
+    if (process.env.NODE_ENV !== 'production') {
+      if (!selector) {
+        throw new Error(`You must pass a selector to useSelector`)
+      }
+      if (typeof selector !== 'function') {
+        throw new Error(`You must pass a function as a selector to useSelector`)
+      }
+      if (typeof equalityFn !== 'function') {
+        throw new Error(
+          `You must pass a function as an equality function to useSelector`,
+        )
+      }
+    }
+
+    const reduxContext = useReduxContext()
+
+    const { store, subscription, getServerState } = reduxContext
+
+    const firstRun = React.useRef(true)
+
+    const wrappedSelector = React.useCallback<typeof selector>(
+      {
+        [selector.name](state: TState) {
+          const selected = selector(state)
+          if (process.env.NODE_ENV !== 'production') {
+            const { devModeChecks = {} } =
+              typeof equalityFnOrOptions === 'function'
+                ? {}
+                : equalityFnOrOptions
+            const { identityFunctionCheck, stabilityCheck } = reduxContext
+            const {
+              identityFunctionCheck: finalIdentityFunctionCheck,
+              stabilityCheck: finalStabilityCheck,
+            } = {
+              stabilityCheck,
+              identityFunctionCheck,
+              ...devModeChecks,
+            }
+            if (
+              finalStabilityCheck === 'always' ||
+              (finalStabilityCheck === 'once' && firstRun.current)
+            ) {
+              const toCompare = selector(state)
+              if (!equalityFn(selected, toCompare)) {
+                let stack: string | undefined = undefined
+                try {
+                  throw new Error()
+                } catch (e) {
+                  // eslint-disable-next-line no-extra-semi
+                  ;({ stack } = e as Error)
+                }
+                console.warn(
+                  'Selector ' +
+                    (selector.name || 'unknown') +
+                    ' returned a different result when called with the same parameters. This can lead to unnecessary rerenders.' +
+                    '\nSelectors that return a new reference (such as an object or an array) should be memoized: https://redux.js.org/usage/deriving-data-selectors#optimizing-selectors-with-memoization',
+                  {
+                    state,
+                    selected,
+                    selected2: toCompare,
+                    stack,
+                  },
+                )
+              }
+            }
+            if (
+              finalIdentityFunctionCheck === 'always' ||
+              (finalIdentityFunctionCheck === 'once' && firstRun.current)
+            ) {
+              // @ts-ignore
+              if (selected === state) {
+                let stack: string | undefined = undefined
+                try {
+                  throw new Error()
+                } catch (e) {
+                  // eslint-disable-next-line no-extra-semi
+                  ;({ stack } = e as Error)
+                }
+                console.warn(
+                  'Selector ' +
+                    (selector.name || 'unknown') +
+                    ' returned the root state when called. This can lead to unnecessary rerenders.' +
+                    '\nSelectors that return the entire state are almost certainly a mistake, as they will cause a rerender whenever *anything* in state changes.',
+                  { stack },
+                )
+              }
+            }
+            if (firstRun.current) firstRun.current = false
+          }
+          return selected
+        },
+      }[selector.name],
+      [selector],
+    )
+
+    const selectedState = useSyncExternalStoreWithSelector(
+      subscription.addNestedSub,
+      store.getState,
+      getServerState || store.getState,
+      wrappedSelector,
+      equalityFn,
+    )
+
+    React.useDebugValue(selectedState)
+
+    return selectedState
+  }
+
+  Object.assign(useSelector, {
+    withTypes: () => useSelector,
+  })
+
+  return useSelector as UseSelector
+}
+
+/**
+ * A hook to access the redux store's state. This hook takes a selector function
+ * as an argument. The selector is called with the store state.
+ *
+ * This hook takes an optional equality comparison function as the second parameter
+ * that allows you to customize the way the selected state is compared to determine
+ * whether the component needs to be re-rendered.
+ *
+ * @param {Function} selector the selector function
+ * @param {Function=} equalityFn the function that will be used to determine equality
+ *
+ * @returns {any} the selected state
+ *
+ * @example
+ *
+ * import React from 'react'
+ * import { useSelector } from 'react-redux'
+ *
+ * export const CounterComponent = () => {
+ *   const counter = useSelector(state => state.counter)
+ *   return <div>{counter}</div>
+ * }
+ */
+export const useSelector = /*#__PURE__*/ createSelectorHook()

package/src/hooks/useStore.ts

@@ -0,0 +1,123 @@
+import type { Context } from 'react'
+import type { Action, Store } from 'redux'
+import type { ReactReduxContextValue } from '../components/Context'
+import { ReactReduxContext } from '../components/Context'
+import {
+  createReduxContextHook,
+  useReduxContext as useDefaultReduxContext,
+} from './useReduxContext'
+
+/**
+ * Represents a type that extracts the action type from a given Redux store.
+ *
+ * @template StoreType - The specific type of the Redux store.
+ *
+ * @since 9.1.0
+ * @internal
+ */
+export type ExtractStoreActionType<StoreType extends Store> =
+  StoreType extends Store<any, infer ActionType> ? ActionType : never
+
+/**
+ * Represents a custom hook that provides access to the Redux store.
+ *
+ * @template StoreType - The specific type of the Redux store that gets returned.
+ *
+ * @since 9.1.0
+ * @public
+ */
+export interface UseStore<StoreType extends Store> {
+  /**
+   * Returns the Redux store instance.
+   *
+   * @returns The Redux store instance.
+   */
+  (): StoreType
+
+  /**
+   * Returns the Redux store instance with specific state and action types.
+   *
+   * @returns The Redux store with the specified state and action types.
+   *
+   * @template StateType - The specific type of the state used in the store.
+   * @template ActionType - The specific type of the actions used in the store.
+   */
+  <
+    StateType extends ReturnType<StoreType['getState']> = ReturnType<
+      StoreType['getState']
+    >,
+    ActionType extends Action = ExtractStoreActionType<Store>,
+  >(): Store<StateType, ActionType>
+
+  /**
+   * Creates a "pre-typed" version of {@linkcode useStore useStore}
+   * where the type of the Redux `store` is predefined.
+   *
+   * This allows you to set the `store` type once, eliminating the need to
+   * specify it with every {@linkcode useStore useStore} call.
+   *
+   * @returns A pre-typed `useStore` with the store type already defined.
+   *
+   * @example
+   * ```ts
+   * export const useAppStore = useStore.withTypes<AppStore>()
+   * ```
+   *
+   * @template OverrideStoreType - The specific type of the Redux store that gets returned.
+   *
+   * @since 9.1.0
+   */
+  withTypes: <
+    OverrideStoreType extends StoreType,
+  >() => UseStore<OverrideStoreType>
+}
+
+/**
+ * Hook factory, which creates a `useStore` hook bound to a given context.
+ *
+ * @param {React.Context} [context=ReactReduxContext] Context passed to your `<Provider>`.
+ * @returns {Function} A `useStore` hook bound to the specified context.
+ */
+export function createStoreHook<
+  StateType = unknown,
+  ActionType extends Action = Action,
+>(
+  // @ts-ignore
+  context?: Context<ReactReduxContextValue<
+    StateType,
+    ActionType
+  > | null> = ReactReduxContext,
+) {
+  const useReduxContext =
+    context === ReactReduxContext
+      ? useDefaultReduxContext
+      : // @ts-ignore
+        createReduxContextHook(context)
+  const useStore = () => {
+    const { store } = useReduxContext()
+    return store
+  }
+
+  Object.assign(useStore, {
+    withTypes: () => useStore,
+  })
+
+  return useStore as UseStore<Store<StateType, ActionType>>
+}
+
+/**
+ * A hook to access the redux store.
+ *
+ * @returns {any} the redux store
+ *
+ * @example
+ *
+ * import React from 'react'
+ * import { useStore } from 'react-redux'
+ *
+ * export const ExampleComponent = () => {
+ *   const store = useStore()
+ *   return <div>{store.getState()}</div>
+ * }
+ */
+export const useStore = /*#__PURE__*/ createStoreHook()

package/src/index-rsc.ts

@@ -0,0 +1,35 @@
+import type * as normal from './index'
+import type * as rsc from './index-rsc'
+
+// checks to make sure we didn't forgot to replicate any exports
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const _check: typeof normal = {} as typeof rsc
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const _check2: typeof rsc = {} as typeof normal
+
+// -------------------------------------------------------------------------------------
+
+const throwNotSupportedError = ((
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  ...args: any[]
+): any => {
+  throw new Error(
+    'This function is not supported in React Server Components. Please only use this export in a Client Component.',
+  )
+}) as any
+
+export {
+  throwNotSupportedError as Provider,
+  throwNotSupportedError as batch,
+  throwNotSupportedError as connect,
+  throwNotSupportedError as legacy_connect,
+  throwNotSupportedError as createDispatchHook,
+  throwNotSupportedError as createSelectorHook,
+  throwNotSupportedError as createStoreHook,
+  throwNotSupportedError as useDispatch,
+  throwNotSupportedError as useSelector,
+  throwNotSupportedError as useStore,
+}
+export const ReactReduxContext = {} as any
+export { default as shallowEqual } from './utils/shallowEqual'

package/src/index.ts

@@ -0,0 +1 @@
+export * from './exports'

package/src/types.ts

@@ -0,0 +1,180 @@
+import type {
+  ClassAttributes,
+  ComponentClass,
+  ComponentType,
+  FunctionComponent,
+  JSX,
+} from 'react'
+
+import type { Action, UnknownAction, Dispatch } from 'redux'
+
+import type { NonReactStatics } from './utils/hoistStatics'
+
+import type { ConnectProps } from './components/connect'
+
+import type { UseSelectorOptions } from './hooks/useSelector'
+
+export type FixTypeLater = any
+
+export type EqualityFn<T> = (a: T, b: T) => boolean
+
+export type ExtendedEqualityFn<T, P> = (a: T, b: T, c: P, d: P) => boolean
+
+export type AnyIfEmpty<T extends object> = keyof T extends never ? any : T
+
+export type DistributiveOmit<T, K extends keyof T> = T extends unknown
+  ? Omit<T, K>
+  : never
+
+export interface DispatchProp<A extends Action<string> = UnknownAction> {
+  dispatch: Dispatch<A>
+}
+
+/**
+ * A property P will be present if:
+ * - it is present in DecorationTargetProps
+ *
+ * Its value will be dependent on the following conditions
+ * - if property P is present in InjectedProps and its definition extends the definition
+ *   in DecorationTargetProps, then its definition will be that of DecorationTargetProps[P]
+ * - if property P is not present in InjectedProps then its definition will be that of
+ *   DecorationTargetProps[P]
+ * - if property P is present in InjectedProps but does not extend the
+ *   DecorationTargetProps[P] definition, its definition will be that of InjectedProps[P]
+ */
+export type Matching<InjectedProps, DecorationTargetProps> = {
+  [P in keyof DecorationTargetProps]: P extends keyof InjectedProps
+    ? InjectedProps[P] extends DecorationTargetProps[P]
+      ? DecorationTargetProps[P]
+      : InjectedProps[P]
+    : DecorationTargetProps[P]
+}
+
+/**
+ * a property P will be present if :
+ * - it is present in both DecorationTargetProps and InjectedProps
+ * - InjectedProps[P] can satisfy DecorationTargetProps[P]
+ * ie: decorated component can accept more types than decorator is injecting
+ *
+ * For decoration, inject props or ownProps are all optionally
+ * required by the decorated (right hand side) component.
+ * But any property required by the decorated component must be satisfied by the injected property.
+ */
+export type Shared<InjectedProps, DecorationTargetProps> = {
+  [P in Extract<
+    keyof InjectedProps,
+    keyof DecorationTargetProps
+  >]?: InjectedProps[P] extends DecorationTargetProps[P]
+    ? DecorationTargetProps[P]
+    : never
+}
+
+// Infers prop type from component C
+export type GetProps<C> =
+  C extends ComponentType<infer P>
+    ? C extends ComponentClass<P>
+      ? ClassAttributes<InstanceType<C>> & P
+      : P
+    : never
+
+// Applies LibraryManagedAttributes (proper handling of defaultProps
+// and propTypes).
+export type GetLibraryManagedProps<C> = JSX.LibraryManagedAttributes<
+  C,
+  GetProps<C>
+>
+
+// Applies LibraryManagedAttributes (proper handling of defaultProps
+// and propTypes), as well as defines WrappedComponent.
+export type ConnectedComponent<
+  C extends ComponentType<any>,
+  P,
+> = FunctionComponent<P> &
+  NonReactStatics<C> & {
+    WrappedComponent: C
+  }
+
+export type ConnectPropsMaybeWithoutContext<TActualOwnProps> =
+  TActualOwnProps extends { context: any }
+    ? Omit<ConnectProps, 'context'>
+    : ConnectProps
+
+type Identity<T> = T
+export type Mapped<T> = Identity<{ [k in keyof T]: T[k] }>
+
+// Injects props and removes them from the prop requirements.
+// Will not pass through the injected props if they are passed in during
+// render. Also adds new prop requirements from TNeedsProps.
+// Uses distributive omit to preserve discriminated unions part of original prop type.
+// Note> Most of the time TNeedsProps is empty, because the overloads in `Connect`
+// just pass in `{}`.  The real props we need come from the component.
+export type InferableComponentEnhancerWithProps<TInjectedProps, TNeedsProps> = <
+  C extends ComponentType<Matching<TInjectedProps, GetProps<C>>>,
+>(
+  component: C,
+) => ConnectedComponent<
+  C,
+  Mapped<
+    DistributiveOmit<
+      GetLibraryManagedProps<C>,
+      keyof Shared<TInjectedProps, GetLibraryManagedProps<C>>
+    > &
+      TNeedsProps &
+      ConnectPropsMaybeWithoutContext<TNeedsProps & GetProps<C>>
+  >
+>
+
+// Injects props and removes them from the prop requirements.
+// Will not pass through the injected props if they are passed in during
+// render.
+export type InferableComponentEnhancer<TInjectedProps> =
+  InferableComponentEnhancerWithProps<TInjectedProps, {}>
+
+export type InferThunkActionCreatorType<
+  TActionCreator extends (...args: any[]) => any,
+> = TActionCreator extends (
+  ...args: infer TParams
+) => (...args: any[]) => infer TReturn
+  ? (...args: TParams) => TReturn
+  : TActionCreator
+
+export type HandleThunkActionCreator<TActionCreator> = TActionCreator extends (
+  ...args: any[]
+) => any
+  ? InferThunkActionCreatorType<TActionCreator>
+  : TActionCreator
+
+// redux-thunk middleware returns thunk's return value from dispatch call
+// https://github.com/reduxjs/redux-thunk#composition
+export type ResolveThunks<TDispatchProps> = TDispatchProps extends {
+  [key: string]: any
+}
+  ? {
+      [C in keyof TDispatchProps]: HandleThunkActionCreator<TDispatchProps[C]>
+    }
+  : TDispatchProps
+
+/**
+ * This interface allows you to easily create a hook that is properly typed for your
+ * store's root state.
+ *
+ * @example
+ *
+ * interface RootState {
+ *   property: string;
+ * }
+ *
+ * const useTypedSelector: TypedUseSelectorHook<RootState> = useSelector;
+ */
+export interface TypedUseSelectorHook<TState> {
+  <TSelected>(
+    selector: (state: TState) => TSelected,
+    equalityFn?: EqualityFn<NoInfer<TSelected>>,
+  ): TSelected
+  <Selected = unknown>(
+    selector: (state: TState) => Selected,
+    options?: UseSelectorOptions<Selected>,
+  ): Selected
+}
+
+export type NoInfer<T> = [T][T extends any ? 0 : never]