fix(remix-server-runtime): inline react's ComponentType type

Author: MichaelDeBoey

packages/remix-server-runtime/package.json

@@ -25,7 +25,6 @@
   "devDependencies": {
     "@remix-run/web-file": "^3.0.2",
     "@types/cookie": "^0.4.0",
-    "@types/react": "^18.0.15",
     "@types/set-cookie-parser": "^2.4.1"
   },
   "engines": {

packages/remix-server-runtime/react-types.d.ts

@@ -0,0 +1,365 @@
+import type * as PropTypes from "prop-types";
+
+interface Component<P = {}, S = {}, SS = any>
+  extends ComponentLifecycle<P, S, SS> {}
+class Component<P, S> {
+  // tslint won't let me format the sample code in a way that vscode likes it :(
+  /**
+   * If set, `this.context` will be set at runtime to the current value of the given Context.
+   *
+   * Usage:
+   *
+   * ```ts
+   * type MyContext = number
+   * const Ctx = React.createContext<MyContext>(0)
+   *
+   * class Foo extends React.Component {
+   *   static contextType = Ctx
+   *   context!: React.ContextType<typeof Ctx>
+   *   render () {
+   *     return <>My context's value: {this.context}</>;
+   *   }
+   * }
+   * ```
+   *
+   * @see https://reactjs.org/docs/context.html#classcontexttype
+   */
+  static contextType?: Context<any> | undefined;
+
+  /**
+   * If using the new style context, re-declare this in your class to be the
+   * `React.ContextType` of your `static contextType`.
+   * Should be used with type annotation or static contextType.
+   *
+   * ```ts
+   * static contextType = MyContext
+   * // For TS pre-3.7:
+   * context!: React.ContextType<typeof MyContext>
+   * // For TS 3.7 and above:
+   * declare context: React.ContextType<typeof MyContext>
+   * ```
+   *
+   * @see https://reactjs.org/docs/context.html
+   */
+  context: unknown;
+
+  constructor(props: Readonly<P> | P);
+  /**
+   * @deprecated
+   * @see https://reactjs.org/docs/legacy-context.html
+   */
+  constructor(props: P, context: any);
+
+  // We MUST keep setState() as a unified signature because it allows proper checking of the method return type.
+  // See: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18365#issuecomment-351013257
+  // Also, the ` | S` allows intellisense to not be dumbisense
+  setState<K extends keyof S>(
+    state:
+      | ((prevState: Readonly<S>, props: Readonly<P>) => Pick<S, K> | S | null)
+      | (Pick<S, K> | S | null),
+    callback?: () => void
+  ): void;
+
+  forceUpdate(callback?: () => void): void;
+  render(): ReactNode;
+
+  readonly props: Readonly<P>;
+  state: Readonly<S>;
+  /**
+   * @deprecated
+   * https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs
+   */
+  refs: {
+    [key: string]: ReactInstance;
+  };
+}
+
+interface ComponentClass<P = {}, S = ComponentState>
+  extends StaticLifecycle<P, S> {
+  new (props: P, context?: any): Component<P, S>;
+  propTypes?: WeakValidationMap<P> | undefined;
+  contextType?: Context<any> | undefined;
+  contextTypes?: ValidationMap<any> | undefined;
+  childContextTypes?: ValidationMap<any> | undefined;
+  defaultProps?: Partial<P> | undefined;
+  displayName?: string | undefined;
+}
+
+interface ComponentLifecycle<P, S, SS = any>
+  extends NewLifecycle<P, S, SS>,
+    DeprecatedLifecycle<P, S> {
+  /**
+   * Called immediately after a component is mounted. Setting state here will trigger re-rendering.
+   */
+  componentDidMount?(): void;
+  /**
+   * Called to determine whether the change in props and state should trigger a re-render.
+   *
+   * `Component` always returns true.
+   * `PureComponent` implements a shallow comparison on props and state and returns true if any
+   * props or states have changed.
+   *
+   * If false is returned, `Component#render`, `componentWillUpdate`
+   * and `componentDidUpdate` will not be called.
+   */
+  shouldComponentUpdate?(
+    nextProps: Readonly<P>,
+    nextState: Readonly<S>,
+    nextContext: any
+  ): boolean;
+  /**
+   * Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
+   * cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.
+   */
+  componentWillUnmount?(): void;
+  /**
+   * Catches exceptions generated in descendant components. Unhandled exceptions will cause
+   * the entire component tree to unmount.
+   */
+  componentDidCatch?(error: Error, errorInfo: ErrorInfo): void;
+}
+
+type ComponentState = any;
+
+export type ComponentType<P = {}> = ComponentClass<P> | FunctionComponent<P>;
+
+type Consumer<T> = ExoticComponent<ConsumerProps<T>>;
+
+interface ConsumerProps<T> {
+  children: (value: T) => ReactNode;
+}
+
+interface Context<T> {
+  Provider: Provider<T>;
+  Consumer: Consumer<T>;
+  displayName?: string | undefined;
+}
+
+interface DeprecatedLifecycle<P, S> {
+  /**
+   * Called immediately before mounting occurs, and before `Component#render`.
+   * Avoid introducing any side-effects or subscriptions in this method.
+   *
+   * Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps
+   * prevents this from being invoked.
+   *
+   * @deprecated 16.3, use componentDidMount or the constructor instead; will stop working in React 17
+   * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state
+   * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path
+   */
+  componentWillMount?(): void;
+  /**
+   * Called immediately before mounting occurs, and before `Component#render`.
+   * Avoid introducing any side-effects or subscriptions in this method.
+   *
+   * This method will not stop working in React 17.
+   *
+   * Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps
+   * prevents this from being invoked.
+   *
+   * @deprecated 16.3, use componentDidMount or the constructor instead
+   * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state
+   * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path
+   */
+  UNSAFE_componentWillMount?(): void;
+  /**
+   * Called when the component may be receiving new props.
+   * React may call this even if props have not changed, so be sure to compare new and existing
+   * props if you only want to handle changes.
+   *
+   * Calling `Component#setState` generally does not trigger this method.
+   *
+   * Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps
+   * prevents this from being invoked.
+   *
+   * @deprecated 16.3, use static getDerivedStateFromProps instead; will stop working in React 17
+   * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props
+   * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path
+   */
+  componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
+  /**
+   * Called when the component may be receiving new props.
+   * React may call this even if props have not changed, so be sure to compare new and existing
+   * props if you only want to handle changes.
+   *
+   * Calling `Component#setState` generally does not trigger this method.
+   *
+   * This method will not stop working in React 17.
+   *
+   * Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps
+   * prevents this from being invoked.
+   *
+   * @deprecated 16.3, use static getDerivedStateFromProps instead
+   * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props
+   * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path
+   */
+  UNSAFE_componentWillReceiveProps?(
+    nextProps: Readonly<P>,
+    nextContext: any
+  ): void;
+  /**
+   * Called immediately before rendering when new props or state is received. Not called for the initial render.
+   *
+   * Note: You cannot call `Component#setState` here.
+   *
+   * Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps
+   * prevents this from being invoked.
+   *
+   * @deprecated 16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17
+   * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update
+   * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path
+   */
+  componentWillUpdate?(
+    nextProps: Readonly<P>,
+    nextState: Readonly<S>,
+    nextContext: any
+  ): void;
+  /**
+   * Called immediately before rendering when new props or state is received. Not called for the initial render.
+   *
+   * Note: You cannot call `Component#setState` here.
+   *
+   * This method will not stop working in React 17.
+   *
+   * Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps
+   * prevents this from being invoked.
+   *
+   * @deprecated 16.3, use getSnapshotBeforeUpdate instead
+   * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update
+   * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path
+   */
+  UNSAFE_componentWillUpdate?(
+    nextProps: Readonly<P>,
+    nextState: Readonly<S>,
+    nextContext: any
+  ): void;
+}
+
+interface ErrorInfo {
+  /**
+   * Captures which component contained the exception, and its ancestors.
+   */
+  componentStack: string;
+}
+
+interface ExoticComponent<P = {}> {
+  /**
+   * **NOTE**: Exotic components are not callable.
+   */
+  (props: P): ReactElement | null;
+  readonly $$typeof: symbol;
+}
+
+interface FunctionComponent<P = {}> {
+  (props: P, context?: any): ReactElement<any, any> | null;
+  propTypes?: WeakValidationMap<P> | undefined;
+  contextTypes?: ValidationMap<any> | undefined;
+  defaultProps?: Partial<P> | undefined;
+  displayName?: string | undefined;
+}
+
+type GetDerivedStateFromProps<P, S> =
+  /**
+   * Returns an update to a component's state based on its new props and old state.
+   *
+   * Note: its presence prevents any of the deprecated lifecycle methods from being invoked
+   */
+  (nextProps: Readonly<P>, prevState: S) => Partial<S> | null;
+
+type GetDerivedStateFromError<P, S> =
+  /**
+   * This lifecycle is invoked after an error has been thrown by a descendant component.
+   * It receives the error that was thrown as a parameter and should return a value to update state.
+   *
+   * Note: its presence prevents any of the deprecated lifecycle methods from being invoked
+   */
+  (error: any) => Partial<S> | null;
+
+type JSXElementConstructor<P> =
+  | ((props: P) => ReactElement<any, any> | null)
+  | (new (props: P) => Component<any, any>);
+
+type Key = string | number;
+
+interface NewLifecycle<P, S, SS> {
+  /**
+   * Runs before React applies the result of `render` to the document, and
+   * returns an object to be given to componentDidUpdate. Useful for saving
+   * things such as scroll position before `render` causes changes to it.
+   *
+   * Note: the presence of getSnapshotBeforeUpdate prevents any of the deprecated
+   * lifecycle events from running.
+   */
+  getSnapshotBeforeUpdate?(
+    prevProps: Readonly<P>,
+    prevState: Readonly<S>
+  ): SS | null;
+  /**
+   * Called immediately after updating occurs. Not called for the initial render.
+   *
+   * The snapshot is only present if getSnapshotBeforeUpdate is present and returns non-null.
+   */
+  componentDidUpdate?(
+    prevProps: Readonly<P>,
+    prevState: Readonly<S>,
+    snapshot?: SS
+  ): void;
+}
+
+type Provider<T> = ProviderExoticComponent<ProviderProps<T>>;
+
+interface ProviderExoticComponent<P> extends ExoticComponent<P> {
+  propTypes?: WeakValidationMap<P> | undefined;
+}
+
+interface ProviderProps<T> {
+  value: T;
+  children?: ReactNode | undefined;
+}
+
+interface ReactElement<
+  P = any,
+  T extends string | JSXElementConstructor<any> =
+    | string
+    | JSXElementConstructor<any>
+> {
+  type: T;
+  props: P;
+  key: Key | null;
+}
+
+type ReactFragment = Iterable<ReactNode>;
+
+type ReactInstance = Component<any> | Element;
+
+type ReactNode =
+  | ReactElement
+  | string
+  | number
+  | ReactFragment
+  | ReactPortal
+  | boolean
+  | null
+  | undefined;
+
+interface ReactPortal extends ReactElement {
+  key: Key | null;
+  children: ReactNode;
+}
+
+interface StaticLifecycle<P, S> {
+  getDerivedStateFromProps?: GetDerivedStateFromProps<P, S> | undefined;
+  getDerivedStateFromError?: GetDerivedStateFromError<P, S> | undefined;
+}
+
+type ValidationMap<T> = PropTypes.ValidationMap<T>;
+
+type Validator<T> = PropTypes.Validator<T>;
+
+type WeakValidationMap<T> = {
+  [K in keyof T]?: null extends T[K]
+    ? Validator<T[K] | null | undefined>
+    : undefined extends T[K]
+    ? Validator<T[K] | null | undefined>
+    : Validator<T[K]>;
+};

packages/remix-server-runtime/routeModules.ts

@@ -4,10 +4,10 @@ import type {
   Params,
   RouterState,
 } from "@remix-run/router";
-import type { ComponentType } from "react";
 
 import type { AppLoadContext, AppData } from "./data";
 import type { LinkDescriptor } from "./links";
+import type { ComponentType } from "./react-types";
 import type { SerializeFrom } from "./serialize";
 
 type RouteData = RouterState["loaderData"];