.babelrc

@@ -1,8 +1,8 @@
 {
-    "env": {
-      "test": {
-        "presets": [["es2015"], "stage-0","react"],
-        "plugins": ["transform-decorators-legacy", "transform-class-properties"]
-      }
-    }
-}
+    "presets": ["@babel/preset-env"],
+    "plugins": [
+        ["@babel/plugin-proposal-decorators", { "legacy": true}],
+        ["@babel/plugin-proposal-class-properties", { "loose": true}],
+        "@babel/plugin-transform-react-jsx"
+    ]
+}

.browserlistrc

@@ -0,0 +1,6 @@
+{
+    "targets": {
+        "chrome": "58",
+        "ie": "9"
+    }
+}

.travis.yml

@@ -1,8 +1,9 @@
 language: node_js
-script: npm run test:travis
+cache: yarn
+install:
+    - yarn install
+script: CI=true yarn test:travis
 after_success:
-  - cat ./coverage/lcov.info|./node_modules/coveralls/bin/coveralls.js
-after_failure:
-  - cat ./npm-debug.log
+    - cat ./coverage/lcov.info|./node_modules/coveralls/bin/coveralls.js
 node_js:
-  - "6.9.0"
+    - "node"

CHANGELOG.md

@@ -1,5 +1,13 @@
 # MobX-React Changelog
 
+### 5.3.0 / 5.3.1
+
+_5.3.0 was retracted as files were not generated correctly during publish_
+
+* Added `disposeOnUmount` utility / decorator to call disposable properties (reaction, autorun, etc) automatically on `componentWillUnmount`
+* Introduced new method to patch lifecycle methods which should be more compatible with for example arrow functions.
+
+
 ### 5.2.8
 
 * Make sure `mobx-react` doesn't require `Object.assign` polyfill

README.md

@@ -418,6 +418,35 @@ const mountedComponent = mount(
 Bear in mind that using shallow rendering won't provide any useful results when testing injected components; only the injector will be rendered.
 To test with shallow rendering, instantiate the `wrappedComponent` instead: `shallow(<Person.wrappedComponent />)`
 
+### disposeOnUnmount(componentInstance, propertyKey | function | function[])
+
+Function (and decorator) that makes sure a function (usually a disposer such as the ones returned by `reaction`, `autorun`, etc.) is automatically executed as part of the componentWillUnmount lifecycle event.
+
+```javascript
+import { disposeOnUnmount } from "mobx-react"
+
+class SomeComponent extends React.Component {
+    // decorator version
+    @disposeOnUnmount
+    someReactionDisposer = reaction(...)
+
+    // function version over properties
+    someReactionDisposer = disposeOnUnmount(this, reaction(...))
+
+    // function version inside methods
+    componentDidMount() {
+        // single function
+        disposeOnUnmount(this, reaction(...))
+
+        // or function array
+        disposeOnUmount(this, [
+            reaction(...),
+            reaction(...)
+        ])
+    }
+}
+```
+
 ## FAQ
 
 **Should I use `observer` for each component?**

build-rollup.js

@@ -5,7 +5,7 @@ var babel = require("rollup-plugin-babel")
 var commonjs = require("rollup-plugin-commonjs")
 var resolve = require("rollup-plugin-node-resolve")
 
-var uglify = require("rollup-plugin-uglify")
+var uglify = require("rollup-plugin-uglify").uglify
 var alias = require("rollup-plugin-alias")
 
 var { rollup } = require("rollup")
@@ -36,15 +36,10 @@ function getAliases(target) {
 }
 
 function build(target, mode, filename) {
-    let externals
-    let aliases
-
     var plugins = [
         alias(getAliases(target)),
         babel({
-            exclude: "node_modules/**",
-            presets: ["es2015-rollup", "react"],
-            plugins: ["transform-decorators-legacy", "transform-class-properties"]
+            exclude: "node_modules/**"
         }),
         resolve({
             module: true,
@@ -73,14 +68,14 @@ function build(target, mode, filename) {
             var options = {
                 file: path.resolve(__dirname, filename),
                 format: mode.endsWith(".min") ? mode.slice(0, -".min".length) : mode,
-                name: "mobxReact",
-                exports: "named",
                 globals: {
                     react: "React",
                     "react-dom": "ReactDOM",
                     "react-native": "ReactNative",
                     mobx: "mobx"
-                }
+                },
+                name: "mobxReact",
+                exports: "named"
             }
 
             return bundle.write(options)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mobx-react",
-  "version": "5.2.8",
+  "version": "5.3.1",
   "description": "React bindings for MobX. Create fully reactive components.",
   "main": "index.js",
   "jsnext:main": "index.module.js",
@@ -16,8 +16,7 @@
     "test": "jest && npm run test:ts",
     "test:ts": "tsc -p test/ts",
     "test:travis": "npm run build && jest && npm run test:ts",
-    "build": "node build-rollup.js && cp src/index.d.ts index.d.ts && cp src/index.d.ts native.d.ts && cp src/index.d.ts custom.d.ts",
-    "precommit": "lint-staged",
+    "build": "node build-rollup.js && shx cp src/index.d.ts index.d.ts && shx cp src/index.d.ts native.d.ts && shx cp src/index.d.ts custom.d.ts",
     "watch": "jest --watch"
   },
   "author": "Michel Weststrate",
@@ -31,51 +30,48 @@
     "react": "^0.13.0 || ^0.14.0 || ^15.0.0 || ^16.0.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.1.0",
+    "@babel/plugin-proposal-class-properties": "^7.1.0",
+    "@babel/plugin-proposal-decorators": "^7.1.0",
+    "@babel/plugin-transform-react-jsx": "^7.0.0",
+    "@babel/preset-env": "^7.1.0",
     "@types/create-react-class": "^15.6.0",
-    "@types/node": "^9.0.0",
+    "@types/node": "^10.0.0",
     "@types/prop-types": "^15.5.2",
     "@types/react": "^16.0.13",
     "@types/react-dom": "^16.0.1",
-    "babel-core": "^6.26.0",
-    "babel-jest": "^22.0.4",
-    "babel-plugin-external-helpers": "^6.22.0",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-decorators-legacy": "^1.3.4",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-es2015-rollup": "^3.0.0",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-0": "^6.24.1",
-    "babelify": "^7.3.0",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-jest": "^23.6.0",
     "create-react-class": "^15.6.2",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.0.0",
-    "husky": "0.14.3",
-    "jest": "^22.0.5",
-    "jest-environment-jsdom": "^22.0.5",
+    "husky": "^1.0.0",
+    "jest": "^23.6.0",
+    "jest-environment-jsdom": "^23.4.0",
     "lint-staged": "^7.0.5",
     "lodash": "^4.17.4",
-    "mobx": "5.0.0",
-    "nscript": "^0.1.10",
+    "mobx": "^5.0.0",
     "opn-cli": "^3.1.0",
     "prettier": "^1.7.2",
     "prop-types": "^15.6.0",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
     "react-test-renderer": "^16.0.0",
-    "regenerator-runtime": "^0.11.1",
+    "regenerator-runtime": "^0.12.1",
     "request": "^2.83.0",
-    "rollup": "^0.50.0",
+    "rollup": "^0.66.2",
     "rollup-plugin-alias": "^1.3.0",
-    "rollup-plugin-babel": "^3.0.2",
-    "rollup-plugin-commonjs": "^8.2.1",
-    "rollup-plugin-filesize": "^1.2.1",
+    "rollup-plugin-babel": "^4.0.3",
+    "rollup-plugin-commonjs": "^9.0.0",
+    "rollup-plugin-filesize": "^4.0.0",
     "rollup-plugin-node-resolve": "^3.0.0",
-    "rollup-plugin-uglify": "^2.0.1",
-    "serve": "^7.0.0",
-    "typescript": "2.6"
+    "rollup-plugin-uglify": "^6.0.0",
+    "shelljs": "^0.8.2",
+    "shx": "^0.3.2",
+    "typescript": "^2.6.0"
   },
   "dependencies": {
-    "hoist-non-react-statics": "^2.5.0",
+    "hoist-non-react-statics": "^3.0.0",
     "react-lifecycles-compat": "^3.0.2"
   },
   "keywords": [
@@ -93,7 +89,9 @@
     ]
   },
   "jest": {},
-  "resolutions": {
-    "@types/node": "9.6.7"
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
   }
 }

publish.js

@@ -1,38 +1,87 @@
-#!./node_modules/.bin/nscript
-/* To run this script, nscript is needed: [sudo] npm install -g nscript
+#!/usr/bin/env node
 /* Publish.js, publish a new version of the npm package as found in the current directory */
-module.exports = function(shell, npm, git) {
-    var pkg = JSON.parse(shell.read("package.json"))
+/* Run this file from the root of the repository */
 
-    npm("run", "build")
+const shell = require("shelljs")
+const fs = require("fs")
+const readline = require("readline")
+
+const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout
+})
+
+function run(command, options) {
+    const continueOnErrors = options && options.continueOnErrors
+    const ret = shell.exec(command, options)
+    if (!continueOnErrors && ret.code !== 0) {
+        shell.exit(1)
+    }
+    return ret
+}
+
+function exit(code, msg) {
+    console.error(msg)
+    shell.exit(code)
+}
+
+async function prompt(question, defaultValue) {
+    return new Promise(resolve => {
+        rl.question(`${question} [${defaultValue}]: `, answer => {
+            answer = answer && answer.trim()
+            resolve(answer ? answer : defaultValue)
+        })
+    })
+}
+
+async function main() {
+    // build
+    run("npm run build")
+
+    const pkg = JSON.parse(fs.readFileSync("package.json", "utf8"))
 
     // Bump version number
-    var nrs = pkg.version.split(".")
+    let nrs = pkg.version.split(".")
     nrs[2] = 1 + parseInt(nrs[2], 10)
-    var version = (pkg.version = shell.prompt(
+    const version = (pkg.version = await prompt(
         "Please specify the new package version of '" + pkg.name + "' (Ctrl^C to abort)",
         nrs.join(".")
     ))
-    if (!version.match(/^\d+\.\d+\.\d+$/)) shell.exit(1, "Invalid semantic version: " + version)
+    if (!version.match(/^\d+\.\d+\.\d+$/)) {
+        exit(1, "Invalid semantic version: " + version)
+    }
 
-    // Check registery data
-    if (npm.silent().test("info", pkg.name)) {
+    // Check registry data
+    const npmInfoRet = run(`npm info ${pkg.name} --json`, {
+        continueOnErrors: true,
+        silent: true
+    })
+    if (npmInfoRet.code === 0) {
         //package is registered in npm?
-        var publishedPackageInfo = JSON.parse(npm.get("info", pkg.name, "--json"))
+        var publishedPackageInfo = JSON.parse(npmInfoRet.stdout)
         if (
             publishedPackageInfo.versions == version ||
-            publishedPackageInfo.versions.indexOf(version) != -1
-        )
-            shell.exit(2, "Version " + pkg.version + " is already published to npm")
+            publishedPackageInfo.versions.includes(version)
+        ) {
+            exit(2, "Version " + pkg.version + " is already published to npm")
+        }
 
-        shell.write("package.json", JSON.stringify(pkg, null, 2))
+        fs.writeFileSync("package.json", JSON.stringify(pkg, null, 2), "utf8")
 
-        npm("publish")
-        git("commit", "-am", "Published version " + version)
-        git("tag", version)
+        // Finally, commit and publish!
+        run("npm publish")
+        run(`git commit -am "Published version ${version}"`)
+        run(`git tag ${version}`)
 
-        git("push")
-        git("push", "--tags")
+        run("git push")
+        run("git push --tags")
         console.log("Published!")
-    } else shell.exit(1, pkg.name + " is not an existing npm package")
+        exit(0)
+    } else {
+        exit(1, pkg.name + " is not an existing npm package")
+    }
 }
+
+main().catch(e => {
+    throw e
+})

src/disposeOnUnmount.js

@@ -0,0 +1,52 @@
+import * as React from "react"
+import { patch, newSymbol } from "./utils/utils"
+
+const storeKey = newSymbol("disposeOnUnmount")
+
+function runDisposersOnWillUnmount() {
+    this[storeKey].forEach(propKeyOrFunction => {
+        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()
+        }
+    })
+    this[storeKey] = []
+}
+
+export function disposeOnUnmount(target, propertyKeyOrFunction) {
+    if (Array.isArray(propertyKeyOrFunction)) {
+        return propertyKeyOrFunction.map(fn => disposeOnUnmount(target, fn))
+    }
+
+    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."
+        )
+    }
+
+    // add property key / function we want run (disposed) to the store
+    const componentWasAlreadyModified = !!target[storeKey]
+    const store = target[storeKey] || (target[storeKey] = [])
+
+    store.push(propertyKeyOrFunction)
+
+    // tweak the component class componentWillUnmount if not done already
+    if (!componentWasAlreadyModified) {
+        patch(target, "componentWillUnmount", runDisposersOnWillUnmount, false)
+    }
+
+    // return the disposer as is if invoked as a non decorator
+    if (typeof propertyKeyOrFunction !== "string") {
+        return propertyKeyOrFunction
+    }
+}