Add a way to forceUpdate stateless components (facebook#911)

* Add a way to forceUpdate stateless components, so dev tools can change their props + context

* guard forceUpdate function

Author: zgotsch

backend/getData.js

@@ -127,12 +127,17 @@ function getData(internalInstance: Object): DataType {
 
   if (internalInstance._instance) {
     var inst = internalInstance._instance;
+
+    // A forceUpdate for stateless (functional) components.
+    var forceUpdate = inst.forceUpdate || (inst.updater && inst.updater.enqueueForceUpdate && function(cb) {
+      inst.updater.enqueueForceUpdate(this, cb, 'forceUpdate');
+    });
     updater = {
       setState: inst.setState && inst.setState.bind(inst),
-      forceUpdate: inst.forceUpdate && inst.forceUpdate.bind(inst),
-      setInProps: inst.forceUpdate && setInProps.bind(null, internalInstance),
+      forceUpdate: forceUpdate && forceUpdate.bind(inst),
+      setInProps: forceUpdate && setInProps.bind(null, internalInstance, forceUpdate),
       setInState: inst.forceUpdate && setInState.bind(null, inst),
-      setInContext: inst.forceUpdate && setInContext.bind(null, inst),
+      setInContext: forceUpdate && setInContext.bind(null, inst, forceUpdate),
     };
     if (typeof type === 'function') {
       publicInstance = inst;
@@ -172,23 +177,23 @@ function getData(internalInstance: Object): DataType {
   };
 }
 
-function setInProps(internalInst, path: Array<string | number>, value: any) {
+function setInProps(internalInst, forceUpdate, path: Array<string | number>, value: any) {
   var element = internalInst._currentElement;
   internalInst._currentElement = {
     ...element,
     props: copyWithSet(element.props, path, value),
   };
-  internalInst._instance.forceUpdate();
+  forceUpdate.call(internalInst._instance);
 }
 
 function setInState(inst, path: Array<string | number>, value: any) {
   setIn(inst.state, path, value);
   inst.forceUpdate();
 }
 
-function setInContext(inst, path: Array<string | number>, value: any) {
+function setInContext(inst, forceUpdate, path: Array<string | number>, value: any) {
   setIn(inst.context, path, value);
-  inst.forceUpdate();
+  forceUpdate.call(inst);
 }
 
 function setIn(obj: Object, path: Array<string | number>, value: any) {

test/example/target.js

@@ -198,22 +198,20 @@ class HoverHighlight extends React.Component {
   }
 }
 
-class Filter extends React.Component {
-  render() {
-    var options = ['All', 'Completed', 'Remaining'];
-    return (
-      <div style={styles.filter}>
-        {options.map(text => (
-          <button
-            key={text}
-            style={assign({}, styles.filterButton, text === this.props.filter && styles.filterButtonActive)}
-            onClick={this.props.onFilter.bind(null, text)}
-          >{text}</button>
-        ))}
-        {/*<button onClick={this.props.onSort} style={styles.filterButton}>Sort</button>*/}
-      </div>
-    );
-  }
+function Filter(props) {
+  var options = ['All', 'Completed', 'Remaining'];
+  return (
+    <div style={styles.filter}>
+      {options.map(text => (
+        <button
+          key={text}
+          style={assign({}, styles.filterButton, text === props.filter && styles.filterButtonActive)}
+          onClick={props.onFilter.bind(null, text)}
+        >{text}</button>
+      ))}
+      {/*<button onClick={this.props.onSort} style={styles.filterButton}>Sort</button>*/}
+    </div>
+  );
 }
 
 var styles = {