mobx-react v6

CHANGELOG.md

@@ -10,6 +10,7 @@
 * `inject` now supports ref forwarding. As such, the `.wrappedInstance` property has been removed since refs can be used instead. (Fixes [#616](/~https://github.com/mobxjs/mobx-react/issues/616) (See also [#619](/~https://github.com/mobxjs/mobx-react/pull/619) by [42shadow42](/~https://github.com/42shadow42))
 * Changing the set of stores in `Provider` is no longer supported and while throw a hard error (this was a warning before), as the model of `Provider` / `inject` has always been to inject final values into the tree. (That is, fixed references, injected objects themselves can be stateful without problem). If you want to dynamically swap what is provided into the tree, use `React.createContext` instead of `Provider` / `inject`. The  suppressChangedStoreWarning` flag for `Provider` has been dropped.
 * The third argument of custom `storesToProps` functions passed to `inject` is no longer available.
+* `<Observer>` no longer supports the deprecated `inject` property.
 
 **Improvements**
 

package.json

@@ -72,7 +72,8 @@
     "typescript": "^2.6.0"
   },
   "dependencies": {
-    "hoist-non-react-statics": "^3.0.0"
+    "hoist-non-react-statics": "^3.0.0",
+    "mobx-react-lite": "^1.0.0"
   },
   "keywords": [
     "mobx",
@@ -96,4 +97,4 @@
       "pre-commit": "lint-staged"
     }
   }
-}
+}

src/index.js

@@ -9,6 +9,8 @@ if (!spy) throw new Error("mobx-react requires mobx to be available")
 if (typeof rdBatched === "function") configure({ reactionScheduler: rdBatched })
 else if (typeof rnBatched === "function") configure({ reactionScheduler: rnBatched })
 
+// TODO: re-export mobx-react-lite stuff?
+
 export {
     observer,
     Observer,

src/inject.js

@@ -21,9 +21,6 @@ function createStoreInjector(grabStoresFn, component, injectNames, makeReactive)
         static contextType = MobXProviderContext
 
         render() {
-            // Optimization: it might be more efficient to apply the mapper function *outside* the render method
-            // (if the mapper is a function), that could avMobXProviderContextoid expensive(?) re-rendering of the injector component
-            // See this test: 'using a custom injector is not too reactive' in inject.js
             const { forwardRef, ...props } = this.props
 
             Object.assign(props, grabStoresFn(this.context || {}, props) || {})

src/observer.js

@@ -2,9 +2,12 @@ import React, { Component, PureComponent, forwardRef } from "react"
 import hoistStatics from "hoist-non-react-statics"
 import { createAtom, Reaction, _allowStateChanges, $mobx } from "mobx"
 import { findDOMNode as baseFindDOMNode } from "react-dom"
+import {
+    observer as observerLite,
+    useStaticRendering as useStaticRenderingLite
+} from "mobx-react-lite"
 
 import EventEmitter from "./utils/EventEmitter"
-import inject from "./inject"
 import { patch as newPatch, newSymbol, shallowEqual } from "./utils/utils"
 
 const mobxAdminProperty = $mobx || "$mobx"
@@ -17,8 +20,6 @@ let isDevtoolsEnabled = false
 
 let isUsingStaticRendering = false
 
-let warnedAboutObserverInjectDeprecation = false
-
 // WeakMap<Node, Object>;
 export const componentByNodeRegistry = typeof WeakMap !== "undefined" ? new WeakMap() : undefined
 export const renderReporter = new EventEmitter()
@@ -84,6 +85,7 @@ export function trackComponents() {
 
 export function useStaticRendering(useStaticRendering) {
     isUsingStaticRendering = useStaticRendering
+    useStaticRenderingLite(useStaticRendering)
 }
 
 /**
@@ -299,18 +301,12 @@ export function observer(componentClass) {
         !componentClass.isReactClass &&
         !Component.isPrototypeOf(componentClass)
     ) {
-        const observerComponent = observer(
-            class extends Component {
-                static displayName = componentClass.displayName || componentClass.name
-                static contextTypes = componentClass.contextTypes
-                static propTypes = componentClass.propTypes
-                static defaultProps = componentClass.defaultProps
-                render() {
-                    return componentClass.call(this, this.props, this.context)
-                }
-            }
-        )
+        const observerComponent = observerLite(componentClass)
+        // TODO: move to mobx-react-lite
         hoistStatics(observerComponent, componentClass)
+        if (componentClass.propTypes) observerComponent.propTypes = componentClass.propTypes
+        if (componentClass.defaultProps)
+            observerComponent.defaultProps = componentClass.defaultProps
         return observerComponent
     }
 
@@ -348,20 +344,13 @@ function mixinLifecycleEvents(target) {
     }
 }
 
-export const Observer = observer(({ children, inject: observerInject, render }) => {
+// TODO: use mobx-react-lite version?
+export const Observer = observer(({ children, render }) => {
     const component = children || render
     if (typeof component === "undefined") {
         return null
     }
-    if (!observerInject) {
-        return component()
-    }
-    // TODO: remove in next major
-    console.warn(
-        "<Observer inject=.../> is no longer supported. Please use inject on the enclosing component instead"
-    )
-    const InjectComponent = inject(observerInject)(component)
-    return <InjectComponent />
+    return component()
 })
 
 Observer.displayName = "Observer"

test/__snapshots__/observer.test.js.snap

@@ -1,25 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`use Observer inject and render sugar should work   use children with inject should be correct 1`] = `
-Object {
-  "errors": Array [],
-  "infos": Array [],
-  "warnings": Array [
-    Array [
-      "<Observer inject=.../> is no longer supported. Please use inject on the enclosing component instead",
-    ],
-  ],
-}
-`;
-
-exports[`use Observer inject and render sugar should work   use render with inject should be correct 1`] = `
-Object {
-  "errors": Array [],
-  "infos": Array [],
-  "warnings": Array [
-    Array [
-      "<Observer inject=.../> is no longer supported. Please use inject on the enclosing component instead",
-    ],
-  ],
-}
+exports[`should stop updating if error was thrown in render (#134) 1`] = `
+Array [
+  "Error: Hello",
+  Object {
+    "componentStack": "
+    in X
+    in div (created by Outer)
+    in Outer",
+  },
+]
 `;

test/inject.test.js

@@ -305,43 +305,6 @@ describe("inject based context", () => {
         expect(ref.current.testField).toBe(1)
     })
 
-    test.skip("warning is printed when attaching contextTypes to HOC", () => {
-        // TODO: can be removed once using modern context?
-        const msg = []
-        const baseWarn = console.warn
-        console.warn = m => msg.push(m)
-        const C = inject("foo")(
-            createClass({
-                displayName: "C",
-                render() {
-                    return (
-                        <div>
-                            context:
-                            {this.props.foo}
-                        </div>
-                    )
-                }
-            })
-        )
-        C.propTypes = {}
-        C.defaultProps = {}
-        C.contextTypes = {}
-
-        const B = () => <C />
-        const A = () => (
-            <Provider foo="bar">
-                <B />
-            </Provider>
-        )
-        mount(<A />)
-        expect(msg.length).toBe(1)
-        expect(msg[0]).toBe(
-            "Mobx Injector: you are trying to attach `contextTypes` on an component decorated with `inject` (or `observer`) HOC. Please specify the contextTypes on the wrapped component instead. It is accessible through the `wrappedComponent`"
-        )
-
-        console.warn = baseWarn
-    })
-
     test("propTypes and defaultProps are forwarded", () => {
         const msg = []
         const baseError = console.error
@@ -427,7 +390,7 @@ describe("inject based context", () => {
         console.warn = baseWarn
     })
 
-    test("using a custom injector is reactive", async () => {
+    test("using a custom injector is reactive", () => {
         const user = mobx.observable({ name: "Noa" })
         const mapper = stores => ({ name: stores.user.name })
         const DisplayName = props => <h1>{props.name}</h1>

test/misc.test.js

@@ -4,7 +4,7 @@ import ReactDOM from "react-dom"
 import { mount, shallow } from "enzyme"
 import * as mobx from "mobx"
 import { observer } from "../src"
-import { createTestRoot, withConsole } from "./index"
+import { createTestRoot, withConsole, asyncReactDOMRender } from "./index"
 
 const mobxAdminProperty = mobx.$mobx || "$mobx"
 
@@ -18,7 +18,12 @@ describe("custom shouldComponentUpdate is not respected for observable changes (
                 const x = mobx.observable.box(3)
                 const C = observer(
                     createClass({
-                        render: () => <div>value:{x.get()}</div>,
+                        render: () => (
+                            <div>
+                                value:
+                                {x.get()}
+                            </div>
+                        ),
                         shouldComponentUpdate: () => called++
                     })
                 )
@@ -45,7 +50,12 @@ describe("custom shouldComponentUpdate is not respected for observable changes (
                 const C = observer(
                     createClass({
                         render() {
-                            return <div>value:{this.props.y}</div>
+                            return (
+                                <div>
+                                    value:
+                                    {this.props.y}
+                                </div>
+                            )
                         },
                         shouldComponentUpdate(nextProps) {
                             called++
@@ -131,13 +141,20 @@ test("#85 Should handle state changing in constructors", done => {
                 a.set(3) // one shouldn't do this!
                 return {}
             },
-            render: () => <div>child:{a.get()} - </div>
+            render: () => (
+                <div>
+                    child:
+                    {a.get()} -{" "}
+                </div>
+            )
         })
     )
     const ParentWrapper = observer(function Parent() {
         return (
             <span>
-                <Child />parent:{a.get()}
+                <Child />
+                parent:
+                {a.get()}
             </span>
         )
     })
@@ -174,9 +191,9 @@ test("testIsComponentReactive", () => {
 })
 
 test("testGetDNode", () => {
-    const C = observer(() => null)
+    const C = observer(() => <div />)
 
-    const wrapper = mount(<C />)
+    const wrapper = renderer.create(<C />)
     expect(wrapper.instance().render[mobxAdminProperty]).toBeTruthy()
     expect(mobx.getAtom(wrapper.instance().render)).toBeTruthy()