Merge branch 'main' into Matchlighter-decorators2022-2

README.md

@@ -35,7 +35,7 @@ MobX is made possible by the generosity of the sponsors below, and many other [i
 <a href="https://coinbase.com/"><img src="https://mobx.js.org/assets/coinbase.jpeg" align="center" width="100" title="Coinbase" alt="Coinbase" /></a>
 <a href="https://curology.com/blog/tech"><img src="https://mobx.js.org/assets/curology.png" align="center" width="100" title="Curology" alt="Curology"/></a>
 <a href="https://opensource.facebook.com/"><img src="https://mobx.js.org/assets/fbos.jpeg" align="center" width="100" title="Facebook Open Source" alt="Facebook Open Source" /></a>
-<a href="https://www.canva.com/"><img src="https://mobx.js.org/assets/canva.png" align="center" width="100" title="Canva" alt="Canva" /></a>
+<a href="https://www.canva.com/"><img src="https://mobx.js.org/assets/canva.svg" align="center" width="100" title="Canva" alt="Canva" /></a>
 
 **🥈 Silver sponsors (\$100+ per month):**<br/>
 

docs/README.md

@@ -36,7 +36,7 @@ MobX is made possible by the generosity of the sponsors below, and many other [i
 <a href="https://coinbase.com/"><img src="https://mobx.js.org/assets/coinbase.jpeg" align="center" width="80" title="Coinbase" alt="Coinbase" /></a>
 <a href="https://curology.com/blog/tech"><img src="https://mobx.js.org/assets/curology.png" align="center" width="80" title="Curology" alt="Curology"/></a>
 <a href="https://opensource.facebook.com/"><img src="https://mobx.js.org/assets/fbos.jpeg" align="center" width="80" title="Facebook Open Source" alt="Facebook Open Source" /></a>
-<a href="https://www.canva.com/"><img src="https://mobx.js.org/assets/canva.png" align="center" width="80" title="Canva" alt="Canva" /></a>
+<a href="https://www.canva.com/"><img src="https://mobx.js.org/assets/canva.svg" align="center" width="80" title="Canva" alt="Canva" /></a>
 
 **🥈 Silver sponsors (\$100+ per month):**<br/>
 <a href="https://casinosites.ltd.uk/?utm_source=sponsorship&utm_medium=mobx&utm_campaign=readme"><img src="https://mobx.js.org/assets/casino2.png" align="center" width="80" title="Casino Sites" alt="Casino Sites"/></a>

packages/mobx-react-lite/__tests__/tsconfig.json

@@ -0,0 +1,3 @@
+{
+    "extends": "../tsconfig.test.json"
+}

packages/mobx-react/CHANGELOG.md

@@ -1,5 +1,11 @@
 # mobx-react
 
+## 9.0.2
+
+### Patch Changes
+
+-   [`5063c38e`](https://github.com/mobxjs/mobx/commit/5063c38ead557624321e2bbeb1aff905438564b0) [#3776](https://github.com/mobxjs/mobx/pull/3776) Thanks [@wbercx](https://github.com/wbercx)! - Fixed premature disposal of class component observers.
+
 ## 9.0.1
 
 ### Patch Changes

packages/mobx-react/__tests__/timerBasedFinalizationRegistry.tsx

@@ -0,0 +1,36 @@
+import "./utils/killFinalizationRegistry"
+import { cleanup, render, act } from "@testing-library/react"
+import * as mobx from "mobx"
+import * as React from "react"
+import { observer } from "../src"
+import { clearTimers } from "mobx-react-lite"
+
+expect(globalThis.FinalizationRegistry).toBeUndefined()
+
+afterEach(cleanup)
+
+test("should unregister from FinalizationRegistry once commited #3776", async () => {
+    const o = mobx.observable({ x: 0 })
+
+    @observer
+    class TestCmp extends React.Component<any> {
+        render() {
+            return o.x
+        }
+    }
+
+    const { unmount, container } = render(<TestCmp />)
+
+    expect(container).toHaveTextContent("0")
+
+    // If not unregistered, clearTimes disposes reaction
+    clearTimers()
+
+    act(() => {
+        o.x++
+    })
+
+    expect(container).toHaveTextContent("1")
+
+    unmount()
+})

packages/mobx-react/__tests__/tsconfig.json

@@ -0,0 +1,3 @@
+{
+    "extends": "../tsconfig.test.json"
+}

packages/mobx-react/__tests__/utils/killFinalizationRegistry.ts

@@ -0,0 +1,4 @@
+// We want to be able to test reaction cleanup code that based on FinalizationRegistry & timers on the same run
+// For that we import this file on the beginning on the timer based test to the feature detection will pick the timers impl
+// @ts-ignore
+global.FinalizationRegistry = undefined

packages/mobx-react/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mobx-react",
-    "version": "9.0.1",
+    "version": "9.0.2",
     "description": "React bindings for MobX. Create fully reactive components.",
     "source": "src/index.ts",
     "main": "dist/index.js",

packages/mobx-react/src/observerClass.ts

@@ -133,7 +133,7 @@ export function makeClassComponentObserver(
         admin.mounted = true
 
         // Component instance committed, prevent reaction disposal.
-        observerFinalizationRegistry.unregister(admin)
+        observerFinalizationRegistry.unregister(this)
 
         // We don't set forceUpdate before mount because it requires a reference to `this`,
         // therefore `this` could NOT be garbage collected before mount,

packages/mobx-undecorate/__tests__/tsconfig.json

@@ -0,0 +1,3 @@
+{
+    "extends": "../../../tsconfig.test.json"
+}

packages/mobx/__tests__/tsconfig.json

@@ -0,0 +1,3 @@
+{
+    "extends": "../../../tsconfig.test.json"
+}