CHANGELOG.md

@@ -1,4 +1,9 @@
 # MobX-React Changelog
+
+### 5.4.0
+
+* Added support for forward refs, fixes [#602](https://github.com/mobxjs/mobx-react/issues/602)
+
 ### 5.3.6
 
 * Fixed some additional issues around life-cycle patching, take 3. See [#536](https://github.com/mobxjs/mobx-react/pull/586) by [@xaviergonz](https://github.com/xaviergonz). Fixed [#579](https://github.com/mobxjs/mobx-react/issues/579)

README.md

@@ -24,6 +24,8 @@ import { observer } from "mobx-react/custom"
 This package provides the bindings for MobX and React.
 See the [official documentation](http://mobxjs.github.io/mobx/intro/overview.html) for how to get started.
 
+If you are using [React hooks](https://reactjs.org/docs/hooks-intro.html) with latest React 16.7 and you like living on the bleeding edge then have a look at the new [mobx-react-lite](https://github.com/mobxjs/mobx-react-lite).
+
 ## Boilerplate projects that use mobx-react
 
 *   Minimal MobX, React, ES6, JSX, Hot reloading: [MobX-React-Boilerplate](https://github.com/mobxjs/mobx-react-boilerplate)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mobx-react",
-  "version": "5.3.6",
+  "version": "5.4.0",
   "description": "React bindings for MobX. Create fully reactive components.",
   "main": "index.js",
   "jsnext:main": "index.module.js",
@@ -73,6 +73,7 @@
   },
   "dependencies": {
     "hoist-non-react-statics": "^3.0.0",
+    "react-is": "^16.3.2",
     "react-lifecycles-compat": "^3.0.2"
   },
   "keywords": [
@@ -89,7 +90,9 @@
       "git add"
     ]
   },
-  "jest": {},
+  "jest": {
+    "testURL": "http://127.0.0.1/"
+  },
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged"

src/observer.js

@@ -2,10 +2,13 @@ import React, { Component, PureComponent } from "react"
 import hoistStatics from "hoist-non-react-statics"
 import { createAtom, Reaction, _allowStateChanges, $mobx } from "mobx"
 import { findDOMNode as baseFindDOMNode } from "react-dom"
+
 import EventEmitter from "./utils/EventEmitter"
 import inject from "./inject"
 import { patch as newPatch, newSymbol } from "./utils/utils"
 
+const ReactIs = require("react-is")
+
 const mobxAdminProperty = $mobx || "$mobx"
 const mobxIsUnmounted = newSymbol("isUnmounted")
 
@@ -183,7 +186,7 @@ function makeComponentReactive(render) {
             if (this[mobxIsUnmounted] !== true) {
                 // If we are unmounted at this point, componentWillReact() had a side effect causing the component to unmounted
                 // TODO: remove this check? Then react will properly warn about the fact that this should not happen? See #73
-                // However, people also claim this migth happen during unit tests..
+                // However, people also claim this might happen during unit tests..
                 let hasError = true
                 try {
                     setHiddenProp(this, isForcingUpdateKey, true)
@@ -318,6 +321,22 @@ export function observer(arg1, arg2) {
         )
     }
 
+    // Unwrap forward refs into `<Observer>` component
+    // we need to unwrap the render, because it is the inner render that needs to be tracked,
+    // not the ForwardRef HoC
+    if (componentClass["$$typeof"] === ReactIs.ForwardRef) {
+        const baseRender = componentClass.render
+        if (typeof baseRender !== "function")
+            throw new Error("render property of ForwardRef was not a function")
+        return {
+            ...componentClass,
+            render() {
+                const args = arguments
+                return <Observer>{() => baseRender.apply(undefined, arguments)}</Observer>
+            }
+        }
+    }
+
     // Stateless function component:
     // If it is function but doesn't seem to be a react class constructor,
     // wrap it to a react class automatically

test/__snapshots__/stateless.test.js.snap

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`stateless component with forwardRef is reactive 1`] = `
+<div>
+  result: 
+  hello world
+  , 
+  got ref
+  , a.x: 
+  2
+</div>
+`;
+
+exports[`stateless component with forwardRef render test correct 1`] = `
+<div>
+  result: 
+  hello world
+  , 
+  got ref
+  , a.x: 
+  1
+</div>
+`;

test/stateless.test.js

@@ -6,6 +6,8 @@ import TestUtils from "react-dom/test-utils"
 import * as mobx from "mobx"
 import { observer, propTypes } from "../src"
 import { createTestRoot } from "./index"
+import renderer from "react-test-renderer"
+import { observable } from "mobx"
 
 const testRoot = createTestRoot()
 
@@ -74,3 +76,33 @@ test("component with observable propTypes", () => {
     expect(warnings.length).toBe(1)
     console.error = originalConsoleError
 })
+
+describe("stateless component with forwardRef", () => {
+    const a = observable({
+        x: 1
+    })
+    const ForwardRefCompObserver = observer(
+        React.forwardRef(({ testProp }, ref) => {
+            return (
+                <div>
+                    result: {testProp}, {ref ? "got ref" : "no ref"}, a.x: {a.x}
+                </div>
+            )
+        })
+    )
+
+    test("render test correct", () => {
+        const component = renderer.create(
+            <ForwardRefCompObserver testProp="hello world" ref={React.createRef()} />
+        )
+        expect(component).toMatchSnapshot()
+    })
+
+    test("is reactive", () => {
+        const component = renderer.create(
+            <ForwardRefCompObserver testProp="hello world" ref={React.createRef()} />
+        )
+        a.x++
+        expect(component).toMatchSnapshot()
+    })
+})