Merge pull request #523 from zhangciwu/master

Fix: observer should not modify original componentClass

src/observer.js

@@ -376,16 +376,18 @@ export function observer(arg1, arg2) {
         throw new Error("Please pass a valid component to 'observer'")
     }
 
-    const target = componentClass.prototype || componentClass
+    const targetClass = class targetClassName extends componentClass {}
+    targetClass.displayName = componentClass.displayName || componentClass.name
+    const target = targetClass.prototype || targetClass
     mixinLifecycleEvents(target)
-    componentClass.isMobXReactObserver = true
+    targetClass.isMobXReactObserver = true
     makeObservableProp(target, "props")
     makeObservableProp(target, "state")
     const baseRender = target.render
     target.render = function() {
         return makeComponentReactive.call(this, baseRender)
     }
-    return componentClass
+    return targetClass
 }
 
 function mixinLifecycleEvents(target) {

test/observer.test.js

@@ -838,6 +838,73 @@ describe("use Observer inject and render sugar should work  ", () => {
     })
 })
 
+describe("should not modify original componentClass", () => {
+    test("keep original at client", () => {
+        useStaticRendering(false)
+
+        class Origin extends React.Component {}
+
+        Origin.prototype.render = "DO_NOT_MODIFY"
+        observer(Origin)
+        expect(Origin.prototype.render).toBe("DO_NOT_MODIFY")
+    })
+
+    test("keep original at server", () => {
+        useStaticRendering(true)
+
+        class Origin extends React.Component {}
+
+        Origin.prototype.render = "DO_NOT_MODIFY"
+        observer(Origin)
+        expect(Origin.prototype.render).toBe("DO_NOT_MODIFY")
+    })
+
+    test("no exception: Maximum call stack size exceeded", () => {
+        // this test maybe a little slow (10s)
+
+        useStaticRendering(true)
+
+        class NameDisplayer extends Component {
+            render() {
+                return <h1>{this.props.name}</h1>
+            }
+        }
+
+        function getWraped() {
+            return inject(stores => ({
+                name: stores.userStore.name
+            }))(observer(NameDisplayer))
+        }
+
+        const user = mobx.observable({
+            name: "Noa"
+        })
+
+        class Name2 extends Component {
+            render() {
+                let UserNameDisplayer = getWraped()
+                return (
+                    <div>
+                        <UserNameDisplayer />
+                    </div>
+                )
+            }
+        }
+
+        function getHtml() {
+            return ReactDOMServer.renderToString(
+                <Provider userStore={user}>
+                    <Name2 />
+                </Provider>
+            )
+        }
+
+        for (let i = 0; i < 20000; i++) {
+            getHtml()
+        }
+    })
+})
+
 test("don't use PureComponent", () => {
     const msg = []
     const baseWarn = console.warn