Better React 18 support

.vscode/settings.json

@@ -1,9 +1,11 @@
 {
     "[typescript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode",
         "editor.formatOnSave": true,
         "editor.formatOnPaste": false
     },
     "[javascript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode",
         "editor.formatOnSave": true,
         "editor.formatOnPaste": false
     },

packages/mobx-react-lite/__tests__/observer.test.tsx

@@ -1084,3 +1084,86 @@ test("Anonymous component displayName #3192", () => {
     expect(observerError.message).toEqual(memoError.message)
     consoleErrorSpy.mockRestore()
 })
+
+describe.skip("simple TODO del", () => {
+    let state = {}
+    let onStoreUpdate = () => {}
+
+    function updateStore(newState) {
+        state = newState
+        onStoreUpdate()
+    }
+
+    const subscribe = _onStoreUpdate => {
+        console.log("SUBSCRIBE")
+        onStoreUpdate = _onStoreUpdate
+        return () => {
+            console.log("UNSUBSCRIBE")
+            onStoreUpdate = () => {}
+        }
+    }
+
+    const getSnapshot = () => state
+
+    function TestCmp() {
+        console.log("RENDER")
+
+        React.useEffect(() => {
+            console.log("MOUNT")
+            return () => console.log("UNMOUNT")
+        }, [])
+
+        React.useSyncExternalStore(subscribe, getSnapshot)
+
+        return null
+    }
+
+    test("", async () => {
+        render(<TestCmp />)
+
+        act(() => {
+            //console.log('before update')
+            updateStore({})
+            //console.log('after update')
+        })
+        // console.log('before await');
+        // await (new Promise(resolve =>setTimeout(resolve, 1000)));
+        // console.log('after await');
+        // act(()=> {
+        //     //console.log('before update')
+        //     updateStore({});
+        //     //console.log('after update')
+        // })
+
+        console.log("after act")
+    })
+
+    const execute = () => {
+        const renderings = {
+            child: 0,
+            parent: 0
+        }
+        const data = { x: 1 }
+        const odata = mobx.observable({ y: 1 })
+
+        const Child = observer((props: any) => {
+            renderings.child++
+            return <span>{props.data.x}</span>
+        })
+        const TestCmp = observer(() => {
+            renderings.parent++
+            return <span>{odata.y}</span>
+        })
+        return { ...render(<TestCmp />), renderings, odata }
+    }
+
+    test("prd", () => {
+        const { container, renderings, odata } = execute()
+        expect(renderings.parent).toBe(1)
+        act(() => {
+            odata.y++
+        })
+        expect(renderings.parent).toBe(2)
+        expect(container.querySelector("span")!.innerHTML).toBe("1")
+    })
+})

packages/mobx-react-lite/__tests__/strictAndConcurrentModeUsingFinalizationRegistry.test.tsx

@@ -1,21 +1,20 @@
 import { cleanup, render } from "@testing-library/react"
 import * as mobx from "mobx"
 import * as React from "react"
-
 import { useObserver } from "../src/useObserver"
 import { sleep } from "./utils"
-import { FinalizationRegistry } from "../src/utils/FinalizationRegistryWrapper"
-
-// @ts-ignore
 import gc from "expose-gc/function"
+import { observerFinalizationRegistry } from "../src/utils/observerFinalizationRegistry"
+
+if (typeof globalThis.FinalizationRegistry !== "function") {
+    throw new Error("This test must run with node >= 14")
+}
+
+expect(observerFinalizationRegistry).toBeInstanceOf(globalThis.FinalizationRegistry)
 
 afterEach(cleanup)
 
 test("uncommitted components should not leak observations", async () => {
-    if (!FinalizationRegistry) {
-        throw new Error("This test must run with node >= 14")
-    }
-
     const store = mobx.observable({ count1: 0, count2: 0 })
 
     // Track whether counts are observed

packages/mobx-react-lite/__tests__/strictAndConcurrentModeUsingTimers.test.tsx

@@ -2,21 +2,22 @@ import "./utils/killFinalizationRegistry"
 import { act, cleanup, render } from "@testing-library/react"
 import * as mobx from "mobx"
 import * as React from "react"
-
 import { useObserver } from "../src/useObserver"
 import {
-    forceCleanupTimerToRunNowForTests,
-    resetCleanupScheduleForTests
-} from "../src/utils/reactionCleanupTracking"
-import {
-    CLEANUP_LEAKED_REACTIONS_AFTER_MILLIS,
-    CLEANUP_TIMER_LOOP_MILLIS
-} from "../src/utils/reactionCleanupTrackingCommon"
+    REGISTRY_FINALIZE_AFTER,
+    REGISTRY_SWEEP_INTERVAL
+} from "../src/utils/UniversalFinalizationRegistry"
+import { observerFinalizationRegistry } from "../src/utils/observerFinalizationRegistry"
+import { TimerBasedFinalizationRegistry } from "../src/utils/UniversalFinalizationRegistry"
+
+expect(observerFinalizationRegistry).toBeInstanceOf(TimerBasedFinalizationRegistry)
+
+const registry = observerFinalizationRegistry as TimerBasedFinalizationRegistry<unknown>
 
 afterEach(cleanup)
 
 test("uncommitted components should not leak observations", async () => {
-    resetCleanupScheduleForTests()
+    registry.finalizeAllImmediately()
 
     // Unfortunately, Jest fake timers don't mock out Date.now, so we fake
     // that out in parallel to Jest useFakeTimers
@@ -51,7 +52,7 @@ test("uncommitted components should not leak observations", async () => {
     )
 
     // Allow any reaction-disposal cleanup timers to run
-    const skip = Math.max(CLEANUP_LEAKED_REACTIONS_AFTER_MILLIS, CLEANUP_TIMER_LOOP_MILLIS)
+    const skip = Math.max(REGISTRY_FINALIZE_AFTER, REGISTRY_SWEEP_INTERVAL)
     fakeNow += skip
     jest.advanceTimersByTime(skip)
 
@@ -72,7 +73,7 @@ test("cleanup timer should not clean up recently-pended reactions", () => {
     // 5. The commit phase runs for component A, but reaction R2 has already been disposed. Game over.
 
     // This unit test attempts to replicate that scenario:
-    resetCleanupScheduleForTests()
+    registry.finalizeAllImmediately()
 
     // Unfortunately, Jest fake timers don't mock out Date.now, so we fake
     // that out in parallel to Jest useFakeTimers
@@ -106,7 +107,7 @@ test("cleanup timer should not clean up recently-pended reactions", () => {
     // We force our cleanup loop to run even though enough time hasn't _really_
     // elapsed.  In theory, it won't do anything because not enough time has
     // elapsed since the reactions were queued, and so they won't be disposed.
-    forceCleanupTimerToRunNowForTests()
+    registry.sweep()
 
     // Advance time enough to allow any timer-queued effects to run
     jest.advanceTimersByTime(500)
@@ -137,7 +138,7 @@ test.skip("component should recreate reaction if necessary", () => {
 
     // This unit test attempts to replicate that scenario:
 
-    resetCleanupScheduleForTests()
+    registry.finalizeAllImmediately()
 
     // Unfortunately, Jest fake timers don't mock out Date.now, so we fake
     // that out in parallel to Jest useFakeTimers
@@ -166,9 +167,9 @@ test.skip("component should recreate reaction if necessary", () => {
     // and _then_ the component commits.
 
     // Force everything to be disposed.
-    const skip = Math.max(CLEANUP_LEAKED_REACTIONS_AFTER_MILLIS, CLEANUP_TIMER_LOOP_MILLIS)
+    const skip = Math.max(REGISTRY_FINALIZE_AFTER, REGISTRY_SWEEP_INTERVAL)
     fakeNow += skip
-    forceCleanupTimerToRunNowForTests()
+    registry.sweep()
 
     // The reaction should have been cleaned up.
     expect(countIsObserved).toBeFalsy()

packages/mobx-react-lite/src/index.ts

@@ -5,6 +5,7 @@ import { observerBatching } from "./utils/observerBatching"
 import { useDeprecated } from "./utils/utils"
 import { useObserver as useObserverOriginal } from "./useObserver"
 import { enableStaticRendering } from "./staticRendering"
+import { observerFinalizationRegistry } from "./utils/observerFinalizationRegistry"
 
 observerBatching(batch)
 
@@ -14,7 +15,9 @@ export { Observer } from "./ObserverComponent"
 export { useLocalObservable } from "./useLocalObservable"
 export { useLocalStore } from "./useLocalStore"
 export { useAsObservableSource } from "./useAsObservableSource"
-export { resetCleanupScheduleForTests as clearTimers } from "./utils/reactionCleanupTracking"
+
+export { observerFinalizationRegistry as _observerFinalizationRegistry }
+export const clearTimes = observerFinalizationRegistry["finalizeAllImmediately"] ?? (() => {})
 
 export function useObserver<T>(fn: () => T, baseComponentName: string = "observed"): T {
     if ("production" !== process.env.NODE_ENV) {