fix: RHL should add new class methods

gaearon · May 24, 2018 · 111d56e · 111d56e
1 parent f5d57ee
commit 111d56e
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 2 deletions.
diff --git a/src/proxy/inject.js b/src/proxy/inject.js
@@ -40,13 +40,13 @@ function mergeComponents(
       if (key.startsWith(PREFIX)) return
       const nextAttr = nextInstance[key]
       const prevAttr = proxyInstance[key]
-      if (prevAttr && nextAttr) {
+      if (nextAttr) {
         if (isNativeFunction(nextAttr) || isNativeFunction(prevAttr)) {
           // this is bound method
           const isSameArity = nextAttr.length === prevAttr.length
           const existsInPrototype =
             ownKeys.indexOf(key) >= 0 || ProxyComponent.prototype[key]
-          if (isSameArity && existsInPrototype) {
+          if ((isSameArity || !prevAttr) && existsInPrototype) {
             if (hasRegenerate) {
               injectedCode[
                 key
@@ -109,6 +109,10 @@ function mergeComponents(
         } else {
           // key was skipped
         }
+      } else {
+        // key does not exists anymore
+        // we could not delete it, yet #840
+        // injectedCode[key] = null;
       }
     })
   } catch (e) {

diff --git a/test/proxy/lifecycle-method.test.js b/test/proxy/lifecycle-method.test.js
@@ -105,4 +105,52 @@ describe('lifecycle method', () => {
     wrapper.instance().forceUpdate()
     expect(wrapper.text()).toContain('PATCHED + !15')
   })
+
+  it('handle dynamic method creation', () => {
+    class App1 extends Component {
+      method1 = () => 41 + this.var1
+
+      var1 = 1
+
+      render() {
+        return <div>{this.method1()}</div>
+      }
+    }
+
+    class App2 extends Component {
+      method2 = () => 22 + this.var2
+
+      var2 = 2
+
+      /* eslint-disable */
+      __reactstandin__regenerateByEval(key, code) {
+        this[key] = eval(code)
+      }
+      /* eslint-enable */
+
+      render() {
+        return (
+          <div>
+            {this.method1()} + {this.method2()}
+          </div>
+        )
+      }
+    }
+
+    const proxy = createProxy(App1)
+    const Proxy = proxy.get()
+
+    const wrapper = mount(<Controller Proxy={Proxy} />)
+
+    expect(wrapper.text()).toContain('42')
+
+    proxy.update(App2)
+    wrapper.instance().forceUpdate()
+
+    // first render before hot render
+    expect(wrapper.text()).toContain('42')
+    wrapper.instance().forceUpdate()
+    // both methods expected to be present
+    expect(wrapper.text()).toContain('42 + 24')
+  })
 })