Decorator version of disposeOnUnmount now works with arrays (closes #637)

README.md

@@ -432,6 +432,14 @@ class SomeComponent extends React.Component {
     // decorator version
     @disposeOnUnmount
     someReactionDisposer = reaction(...)
+
+    // decorator version with arrays
+    @disposeOnUnmount
+    someReactionDisposers = [
+        reaction(...),
+        reaction(...)
+    ]
+
 
     // function version over properties
     someReactionDisposer = disposeOnUnmount(this, reaction(...))

src/disposeOnUnmount.js

@@ -3,6 +3,22 @@ import { patch, newSymbol } from "./utils/utils"
 
 const storeKey = newSymbol("disposeOnUnmount")
 
+function checkFunc(prop) {
+    if (typeof prop !== "function") {
+        throw new Error(
+            "[mobx-react] disposeOnUnmount only works on functions such as disposers returned by reactions, autorun, etc."
+        )
+    }
+}
+
+function check(prop) {
+    if (Array.isArray(prop)) {
+        prop.map(checkFunc)
+    } else {
+        checkFunc(prop)
+    }
+}
+
 function runDisposersOnWillUnmount() {
     if (!this[storeKey]) {
         // when disposeOnUnmount is only set to some instances of a component it will still patch the prototype
@@ -12,45 +28,36 @@ function runDisposersOnWillUnmount() {
         const prop =
             typeof propKeyOrFunction === "string" ? this[propKeyOrFunction] : propKeyOrFunction
         if (prop !== undefined && prop !== null) {
-            if (typeof prop !== "function") {
-                throw new Error(
-                    "[mobx-react] disposeOnUnmount only works on functions such as disposers returned by reactions, autorun, etc."
-                )
-            }
-            prop()
+            check(prop)
+            if (Array.isArray(prop)) prop.map(f => f())
+            else prop()
         }
     })
     this[storeKey] = []
 }
 
-export function disposeOnUnmount(target, propertyKeyOrFunction) {
-    if (Array.isArray(propertyKeyOrFunction)) {
-        return propertyKeyOrFunction.map(fn => disposeOnUnmount(target, fn))
-    }
-
+export function disposeOnUnmount(target, propertyKeyOrFunctionOrArray) {
     if (!target instanceof React.Component) {
         throw new Error("[mobx-react] disposeOnUnmount only works on class based React components.")
     }
 
-    if (typeof propertyKeyOrFunction !== "string" && typeof propertyKeyOrFunction !== "function") {
-        throw new Error(
-            "[mobx-react] disposeOnUnmount only works if the parameter is either a property key or a function."
-        )
+    if (typeof propertyKeyOrFunctionOrArray !== "string") {
+        check(propertyKeyOrFunctionOrArray)
     }
 
     // add property key / function we want run (disposed) to the store
     const componentWasAlreadyModified = !!target[storeKey]
     const store = target[storeKey] || (target[storeKey] = [])
 
-    store.push(propertyKeyOrFunction)
+    store.push(propertyKeyOrFunctionOrArray)
 
     // tweak the component class componentWillUnmount if not done already
     if (!componentWasAlreadyModified) {
         patch(target, "componentWillUnmount", runDisposersOnWillUnmount)
     }
 
     // return the disposer as is if invoked as a non decorator
-    if (typeof propertyKeyOrFunction !== "string") {
-        return propertyKeyOrFunction
+    if (typeof propertyKeyOrFunctionOrArray !== "string") {
+        return propertyKeyOrFunctionOrArray
     }
 }

test/disposeOnUnmount.test.js

@@ -503,3 +503,38 @@ it("componentDidMount should be different between components", async () => {
     await doTest(true)
     await doTest(false)
 })
+
+describe("should works with arrays", async () => {
+    test("as function", async () => {
+        class C extends React.Component {
+            methodA = jest.fn()
+            methodB = jest.fn()
+
+            componentDidMount() {
+                disposeOnUnmount(this, [this.methodA, this.methodB])
+            }
+
+            render() {
+                return null
+            }
+        }
+
+        await testComponent(C)
+    })
+
+    test("as decorator", async () => {
+        class C extends React.Component {
+            methodA = jest.fn()
+            methodB = jest.fn()
+
+            @disposeOnUnmount
+            disposers = [this.methodA, this.methodB]
+
+            render() {
+                return null
+            }
+        }
+
+        await testComponent(C)
+    })
+})