Resolve TypeScript errors in React 19 (by removing the deprecated propTypes.ts)

.changeset/fast-rocks-think.md

@@ -0,0 +1,5 @@
+---
+"mobx-react": major
+---
+
+Removed the deprecated PropTypes export, as React 19 no longer provides the types `React.Requireable` and `React.Validator`, and this was causing TypeScript errors with `@types/[email protected]`.

docs/react-integration.md

@@ -317,7 +317,6 @@ It offers a few more features which are typically not needed anymore in greenfie
 
 1. Support for React class components.
 1. `Provider` and `inject`. MobX's own React.createContext predecessor which is not needed anymore.
-1. Observable specific `propTypes`.
 
 Note that `mobx-react` fully repackages and re-exports `mobx-react-lite`, including functional component support.
 If you use `mobx-react`, there is no need to add `mobx-react-lite` as a dependency or import from it anywhere.

packages/mobx-react/README.md

@@ -26,7 +26,6 @@ mobx-react 6 / 7 is a repackage of the smaller [mobx-react-lite](https://github.
 
 -   Support for class based components for `observer` and `@observer`
 -   `Provider / inject` to pass stores around (but consider to use `React.createContext` instead)
--   `PropTypes` to describe observable based property checkers (but consider to use TypeScript instead)
 -   The `disposeOnUnmount` utility / decorator to easily clean up resources such as reactions created in your class based components.
 
 ## Installation
@@ -287,20 +286,6 @@ Decorators are currently a stage-2 ESNext feature. How to enable them is documen
 See this [thread](https://www.reddit.com/r/reactjs/comments/4vnxg5/free_eggheadio_course_learn_mobx_react_in_30/d61oh0l).
 TL;DR: the conceptual distinction makes a lot of sense when using MobX as well, but use `observer` on all components.
 
-### `PropTypes`
-
-MobX-react provides the following additional `PropTypes` which can be used to validate against MobX structures:
-
--   `observableArray`
--   `observableArrayOf(React.PropTypes.number)`
--   `observableMap`
--   `observableObject`
--   `arrayOrObservableArray`
--   `arrayOrObservableArrayOf(React.PropTypes.number)`
--   `objectOrObservableObject`
-
-Use `import { PropTypes } from "mobx-react"` to import them, then use for example `PropTypes.observableArray`
-
 ### `Provider` and `inject`
 
 _Note: usually there is no need anymore to use `Provider` / `inject` in new code bases; most of its features are now covered by `React.createContext`._

packages/mobx-react/__tests__/stateless.test.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import PropTypes from "prop-types"
-import { observer, PropTypes as MRPropTypes } from "../src"
+import { observer } from "../src"
 import { render, act } from "@testing-library/react"
 import { observable } from "mobx"
 
@@ -58,29 +58,6 @@ test("stateless component with context support", () => {
     expect(container.textContent).toBe("context: hello world")
 })
 
-// propTypes validation seems to have been removed from class components in React 19: https://react.dev/reference/react/Component
-test.skip("component with observable propTypes", () => {
-    class Comp extends React.Component {
-        render() {
-            return null
-        }
-        static propTypes = {
-            a1: MRPropTypes.observableArray,
-            a2: MRPropTypes.arrayOrObservableArray
-        }
-    }
-    const originalConsoleError = console.error
-    const warnings: Array<any> = []
-    console.error = msg => warnings.push(msg)
-    // eslint-disable-next-line no-unused-vars
-    const firstWrapper = <Comp a1={[]} a2={[]} />
-    expect(warnings.length).toBe(1)
-    // eslint-disable-next-line no-unused-vars
-    const secondWrapper = <Comp a1={observable([])} a2={observable([])} />
-    expect(warnings.length).toBe(1)
-    console.error = originalConsoleError
-})
-
 describe("stateless component with forwardRef", () => {
     const a = observable({
         x: 1

packages/mobx-react/__tests__/utils/compile-ts.tsx

@@ -1,15 +1,7 @@
 import React from "react"
 import ReactDOM from "react-dom"
 import PropTypes from "prop-types"
-import {
-    observer,
-    Provider,
-    inject,
-    Observer,
-    disposeOnUnmount,
-    PropTypes as MRPropTypes,
-    useLocalStore
-} from "../src"
+import { observer, Provider, inject, Observer, disposeOnUnmount, useLocalStore } from "../../src"
 
 @observer
 class T1 extends React.Component<{ pizza: number }, {}> {
@@ -28,9 +20,6 @@ const T2 = observer(
                 </div>
             )
         }
-        static propTypes = {
-            zoem: MRPropTypes.arrayOrObservableArray
-        }
     }
 )
 

packages/mobx-react/src/index.ts

@@ -26,5 +26,4 @@ export { observer } from "./observer"
 export { MobXProviderContext, Provider, ProviderProps } from "./Provider"
 export { inject } from "./inject"
 export { disposeOnUnmount } from "./disposeOnUnmount"
-export { PropTypes } from "./propTypes"
 export { IWrappedComponent } from "./types/IWrappedComponent"