MobX 7

.changeset/mobx-7-react-10.md

@@ -0,0 +1,69 @@
+---
+"mobx": major
+"mobx-react-lite": major
+"mobx-react": major
+---
+
+Release MobX 7, mobx-react-lite 5, and mobx-react 10.
+
+Bundle sizes are down: ESM prod 17.02 KiB gzip -> 13.96 KiB gzip; a minimal tree-shaken example is 10.32 KiB gzip now.
+
+It removes long-deprecated compatibility paths and keeps the React bindings split between `mobx-react-lite` for function components and `mobx-react` for class-component support.
+
+## MobX 7
+
+MobX 7 is a cleanup release focused on the modern runtime and decorator model.
+
+-   MobX now always uses Proxy-backed observable objects and arrays. The ES5/non-proxy fallback has been removed.
+-   `configure({ useProxies: ... })` is no longer supported.
+-   `{ proxy: false }` options for `observable`, `observable.object`, and `observable.array` are no longer supported.
+-   Legacy decorators are no longer supported.
+-   Namespaced annotation and comparer properties now use named exports to reduce bundle size:
+
+| Removed API           | Replacement         |
+| --------------------- | ------------------- |
+| `observable.ref`      | `observableRef`     |
+| `observable.shallow`  | `observableShallow` |
+| `observable.deep`     | `observableDeep`    |
+| `observable.struct`   | `observableStruct`  |
+| `computed.struct`     | `computedStruct`    |
+| `action.bound`        | `actionBound`       |
+| `flow.bound`          | `flowBound`         |
+| `comparer.identity`   | `compareIdentity`   |
+| `comparer.default`    | `compareDefault`    |
+| `comparer.structural` | `compareStructural` |
+| `comparer.shallow`    | `compareShallow`    |
+
+-   The public `trace` API and its related runtime support have been removed. Use `toJS`, `getDependencyTree`, `getObserverTree`, `spy` or `mobx-log` package for debugging.
+
+## mobx-react-lite 5 and mobx-react 10
+
+mobx-react-lite 5 and mobx-react 10 require MobX 7 and React 18 or later.
+
+`mobx-react-lite` remains the function-component package. `mobx-react` remains a thin wrapper around `mobx-react-lite` that adds class component and Stage 3 `@observer` class decorator support.
+
+-   Keep function-component imports on `mobx-react-lite` if you do not need class component support.
+-   Use `mobx-react` when you need class components or `@observer` class decorators.
+-   `mobx-react-lite` supports function components and `forwardRef`; `mobx-react` delegates function components to `mobx-react-lite` and handles classes itself.
+-   Remove React batching imports, including the stale React Native batching deep import. React 18+ renderers handle batching.
+
+The recommended public React binding surface for both packages is:
+
+-   `observer`
+-   `Observer`
+-   `useLocalObservable`
+-   `enableStaticRendering`
+-   `isUsingStaticRendering`
+
+The following APIs have been removed from the React binding packages:
+
+-   `Provider`, `inject`, and `MobXProviderContext`; use `React.createContext` directly.
+-   `disposeOnUnmount`; dispose reactions in `componentWillUnmount` or return cleanup functions from `useEffect`.
+-   `PropTypes`; use TypeScript or the regular `prop-types` package.
+-   `useObserver`; wrap components with `observer` or use `<Observer>`.
+-   `useLocalStore`; use `useLocalObservable`.
+-   `useAsObservableSource`; synchronize values from props into local observable state explicitly.
+-   `useStaticRendering`; use `enableStaticRendering`.
+-   `observerBatching`, `isObserverBatched`, `batchingForReactDom`, `batchingOptOut`, and `batchingForReactNative`; remove these imports because React 18+ renderers handle batching.
+-   Deprecated `observer(fn, { forwardRef: true })`; pass an already-created `React.forwardRef(...)` component to `observer` instead.
+-   Legacy function-component `contextTypes` handling.

.github/workflows/build_and_test.yml

@@ -35,8 +35,8 @@ jobs:
       - name: Test
         run: npm test -- -i
 
-      - name: Test size
-        run: npm run test:size
+      - name: Check size
+        run: npm run check-size
 
       - name: Test performance
         run: npm -w mobx run test:performance

docs/analyzing-reactivity.md

@@ -8,58 +8,6 @@ hide_title: true
 
 # Analyzing reactivity {🚀}
 
-# Using `trace` for debugging
-
-Trace is a small utility that helps you find out why your computed values, reactions or components are re-evaluating.
-
-It can be used by simply importing `import { trace } from "mobx"`, and then putting it inside a reaction or computed value.
-It will print why it is re-evaluating the current derivation.
-
-Optionally it is possible to automatically enter the debugger by passing `true` as the last argument.
-This way the exact mutation that causes the reaction to re-run will still be in stack, usually ~8 stack frames up. See the image below.
-
-In debugger mode, the debug information will also reveal the full derivation tree that is affecting the current computation / reaction.
-
-![trace](assets/trace-tips2.png)
-
-![trace](assets/trace.gif)
-
-## Live examples
-
-Simple [CodeSandbox `trace` example](https://codesandbox.io/s/trace-dnhbz?file=/src/index.js:309-338).
-
-[Here's a deployed example](https://csb-nr58ylyn4m-hontnuliaa.now.sh/) for exploring the stack.
-Make sure to play with the chrome debugger's blackbox feature!
-
-## Usage examples
-
-There are different ways of calling `trace()`, some examples:
-
-```javascript
-import { observer } from "mobx-react"
-import { trace } from "mobx"
-
-const MyComponent = observer(() => {
-    trace(true) // Enter the debugger whenever an observable value causes this component to re-run.
-    return <div>{this.props.user.name}</name>
-})
-```
-
-Enable trace by using the `reaction` argument of a reaction / autorun:
-
-```javascript
-mobx.autorun("logger", reaction => {
-    reaction.trace()
-    console.log(user.fullname)
-})
-```
-
-Pass in the property name of a computed property:
-
-```javascript
-trace(user, "fullname")
-```
-
 # Introspection APIs
 
 The following APIs might come in handy if you want to inspect the internal state of MobX while debugging, or want to build cool tools on top of MobX.

docs/api.md

@@ -25,7 +25,7 @@ _Making things observable._
 
 ### `makeObservable`
 
-Usage: `makeObservable(target, annotations?, options?)`
+Usage: `makeObservable(target, annotations, options?)`
 <small>(<b>[further information](observable-state.md#makeobservable)</b>)</small>
 
 Properties, entire objects, arrays, Maps and Sets can all be made observable.
@@ -89,7 +89,7 @@ If the values in the array should not be turned into observables automatically,
 
 Creates a new observable [ES6 Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) based on the provided `initialMap`.
 They are very useful if you don't want to react just to the change of a specific entry, but also to their addition and removal.
-Creating observable Maps is the recommended approach for creating dynamically keyed collections if you don't have [enabled Proxies](configuration.md#proxy-support).
+Creating observable Maps is the recommended approach for creating dynamically keyed collections.
 
 Besides all the language built-in Map functions, the following goodies are available on observable Maps as well:
 
@@ -216,7 +216,7 @@ Creates an observable value that is derived from other observables, but won't be
 
 ## React integration
 
-_From the `mobx-react` / `mobx-react-lite` packages._
+_From `mobx-react-lite` for function components, or `mobx-react` for class component support._
 
 ### `observer`
 
@@ -345,7 +345,7 @@ Use it to change how MobX behaves as a whole.
 
 ## Collection utilities {🚀}
 
-_They enable manipulating observable arrays, objects and Maps with the same generic API. This can be useful in [environments without `Proxy` support](configuration.md#limitations-without-proxy-support), but is otherwise typically not needed._
+_They enable manipulating observable arrays, objects and Maps with the same generic API._
 
 ### `values`
 
@@ -462,13 +462,6 @@ Is this a boxed computed value, created using `computed(() => expr)`?
 
 Is this a computed property?
 
-### `trace`
-
-{🚀} Usage: `trace()`, `trace(true)` _(enter debugger)_ or `trace(object, propertyName, enterDebugger?)`
-<small>(<b>[further information](analyzing-reactivity.md)</b>)</small>
-
-Should be used inside an observer, reaction or computed value. Logs when the value is invalidated, or sets the debugger breakpoint if called with _true_.
-
 ### `spy`
 
 {🚀} Usage: `spy(eventListener)`

docs/assets/getting-started-assets/script.js

@@ -25,9 +25,10 @@ function runCodeHelper(code) {
     window.autorun = mobx.autorun
     window.computed = mobx.computed
     window.action = mobx.action
-    window.observer = mobxReactLite.observer
+    window.observer = mobxReact.observer
     window.makeObservable = mobx.makeObservable
     window.makeAutoObservable = mobx.makeAutoObservable
+    window.renderReactApp = renderReactApp
 
     var globalEval = eval // global scope trick, See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval
 
@@ -41,6 +42,15 @@ function runCodeHelper(code) {
     }
 }
 
+function renderReactApp(element) {
+    var container = document.getElementById("reactjs-app")
+    if (!window.__cachedReactRoot) {
+        // Reuse one React 18 root across repeated "Run code" clicks.
+        window.__cachedReactRoot = ReactDOM.createRoot(container)
+    }
+    window.__cachedReactRoot.render(element)
+}
+
 function runCode(ids) {
     $(ids.join(",")).each(function(i, elem) {
         clearConsole()

docs/collection-utilities.md

@@ -9,7 +9,7 @@ hide_title: true
 # Collection utilities {🚀}
 
 They enable manipulating observable arrays, objects and Maps with the same generic API.
-These APIs are fully reactive, which means that even [without `Proxy` support](configuration.md#limitations-without-proxy-support) new property declarations can be detected by MobX if `set` is used to add them, and `values` or `keys` are used to iterate over them.
+These APIs are fully reactive and can track keys, values and entries without depending on the concrete collection type.
 
 Another benefit of `values`, `keys` and `entries` is that they return arrays rather than iterators, which makes it possible to, for example, immediately call `.map(fn)` on the results.
 
@@ -28,8 +28,6 @@ Mutation:
 -   `has(collection, key)` returns _true_ if the collection has the specified _observable_ property.
 -   `get(collection, key)` returns the child under the specified key.
 
-If you use the access APIs in an environment without `Proxy` support, then also use the mutation APIs so they can detect the changes.
-
 ```javascript
 import { autorun, get, set, observable, values } from "mobx"
 

docs/computeds-with-args.md

@@ -16,13 +16,11 @@ and the application supports multi-selection.
 How can we implement a derivation like `store.isSelected(item.id)`?
 
 ```javascript
-import * as React from 'react'
-import { observer } from 'mobx-react-lite'
+import * as React from "react"
+import { observer } from "mobx-react-lite"
 
 const Item = observer(({ item, store }) => (
-    <div className={store.isSelected(item.id) ? "selected" : ""}>
-        {item.title}
-    </div>
+    <div className={store.isSelected(item.id) ? "selected" : ""}>{item.title}</div>
 ))
 ```
 
@@ -46,17 +44,13 @@ This is a worst-case example. In general, it is completely fine to have unmarked
 This is a more efficient implementation compared to the original.
 
 ```javascript
-import * as React from 'react'
-import { computed } from 'mobx'
-import { observer } from 'mobx-react-lite'
+import * as React from "react"
+import { computed } from "mobx"
+import { observer } from "mobx-react-lite"
 
 const Item = observer(({ item, store }) => {
     const isSelected = computed(() => store.isSelected(item.id)).get()
-    return (
-        <div className={isSelected ? "selected" : ""}>
-            {item.title}
-        </div>
-    )
+    return <div className={isSelected ? "selected" : ""}>{item.title}</div>
 })
 ```
 

docs/computeds.md

@@ -214,22 +214,22 @@ This string is used as a debug name in the [Spy event listeners](analyzing-react
 
 ### `equals`
 
-Set to `comparer.default` by default. It acts as a comparison function for comparing the previous value with the next value. If this function considers the values to be equal, then the observers will not be re-evaluated.
+Set to `compareDefault` by default. It acts as a comparison function for comparing the previous value with the next value. If this function considers the values to be equal, then the observers will not be re-evaluated.
 
-This is useful when working with structural data and types from other libraries. For example, a computed [moment](https://momentjs.com/) instance could use `(a, b) => a.isSame(b)`. `comparer.structural` and `comparer.shallow` come in handy if you want to use structural / shallow comparison to determine whether the new value is different from the previous value, and as a result notify its observers.
+This is useful when working with structural data and types from other libraries. For example, a computed [moment](https://momentjs.com/) instance could use `(a, b) => a.isSame(b)`. `compareStructural` and `compareShallow` come in handy if you want to use structural / shallow comparison to determine whether the new value is different from the previous value, and as a result notify its observers.
 
 Check out the [`computed.struct`](#computed-struct) section above.
 
 #### Built-in comparers
 
-MobX provides four built-in `comparer` methods which should cover most needs of the `equals` option of `computed`:
+MobX provides four built-in comparison functions which should cover most needs of the `equals` option of `computed`:
 
--   `comparer.identity` uses the identity (`===`) operator to determine if two values are the same.
--   `comparer.default` is the same as `comparer.identity`, but also considers `NaN` to be equal to `NaN`.
--   `comparer.structural` performs deep structural comparison to determine if two values are the same.
--   `comparer.shallow` performs shallow structural comparison to determine if two values are the same.
+-   `compareIdentity` uses the identity (`===`) operator to determine if two values are the same.
+-   `compareDefault` uses `Object.is` to determine if two values are the same.
+-   `compareStructural` performs deep structural comparison to determine if two values are the same.
+-   `compareShallow` performs shallow structural comparison to determine if two values are the same.
 
-You can import `comparer` from `mobx` to access these methods. They can be used for `reaction` as well.
+You can import these functions from `mobx`. They can be used for `reaction` as well.
 
 ### `requiresReaction`
 

docs/configuration.md

@@ -13,37 +13,11 @@ Most configuration options can be set by using the `configure` method.
 
 ## Proxy support
 
-By default, MobX uses proxies to make arrays and plain objects observable. Proxies provide the best performance and most consistent behavior across environments.
-However, if you are targeting an environment that doesn't support proxies, proxy support has to be disabled.
-Most notably this is the case when targeting Internet Explorer or React Native without using the Hermes engine.
+MobX requires [`Proxy` support](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) to make arrays and plain objects observable.
+Proxies provide the best performance and most consistent behavior across environments.
 
-Proxy support can be disabled by using `configure`:
-
-```typescript
-import { configure } from "mobx"
-
-configure({
-    useProxies: "never"
-})
-```
-
-Accepted values for the `useProxies` configuration are:
-
--   `"always"` (**default**): MobX expects to run only in environments with [`Proxy` support](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) and it will error if such an environment is not available.
--   `"never"`: Proxies are not used and MobX falls back on non-proxy alternatives. This is compatible with all ES5 environments, but causes various [limitations](#limitations-without-proxy-support).
--   `"ifavailable"` (experimental): Proxies are used if they are available, and otherwise MobX falls back to non-proxy alternatives. The benefit of this mode is that MobX will try to warn if APIs or language features that wouldn't work in ES5 environments are used, triggering errors when hitting an ES5 limitation running on a modern environment.
-
-**Note:** before MobX 6, one had to pick either MobX 4 for older engines, or MobX 5 for new engines. However, MobX 6 supports both, although polyfills for certain APIs like Map will be required when targetting older JavaScript engines.
-Proxies cannot be polyfilled. Even though polyfills do exist, they don't support the full spec and are unsuitable for MobX. Don't use them.
-
-### Limitations without Proxy support
-
-1.  Observable arrays are not real arrays, so they won't pass the `Array.isArray()` check. The practical consequence is that you often need to `.slice()` the array first (to get a shallow copy of the real array) before passing it to third party libraries. For example, concatenating observable arrays doesn't work as expected, so `.slice()` them first.
-2.  Adding or deleting properties of existing observable plain objects after creation is not automatically picked up. If you intend to use objects as index based lookup maps, in other words, as dynamic collections of things, use observable Maps instead.
-
-It is possible to dynamically add properties to objects, and detect their additions, even when Proxies aren't enabled.
-This can be achieved by using the [Collection utilities {🚀}](collection-utilities.md). Make sure that (new) properties are set using the `set` utility, and that the objects are iterated using one of the `values` / `keys` or `entries` utilities, rather than the built-in JavaScript mechanisms.
-But, since this is really easy to forget, we instead recommend using observable Maps if possible.
+MobX 7 does not include the older ES5 fallback implementation and no longer supports `configure({ useProxies })`.
+Use MobX 6 if you need to support environments without Proxy support, such as Internet Explorer or older React Native versions.
 
 ## Decorator support