Add RelayPlugin

agent/Bridge.js

@@ -156,7 +156,7 @@ class Bridge {
     });
   }
 
-  call(name: string, args: any | Array<any>, cb: (val: any) => any) {
+  call(name: string, args: Array<any>, cb: (val: any) => any) {
     var _cid = this._cid++;
     this._cbs.set(_cid, cb);
 
@@ -187,11 +187,20 @@ class Bridge {
     });
   }
 
+  setInspectable(id: string, data: Object) {
+    var prev = this._inspectables.get(id);
+    if (!prev) {
+      this._inspectables.set(id, data);
+      return;
+    }
+    this._inspectables.set(id, {...prev, ...data});
+  }
+
   sendOne(evt: string, data: any) {
     var cleaned = [];
     var san = dehydrate(data, cleaned);
     if (cleaned.length) {
-      this._inspectables.set(data.id, data);
+      this.setInspectable(data.id, data);
     }
     this._wall.send({type: 'event', evt, data: san, cleaned});
   }
@@ -218,7 +227,7 @@ class Bridge {
       var cleaned = [];
       var san = dehydrate(data, cleaned);
       if (cleaned.length) {
-        this._inspectables.set(data.id, data);
+        this.setInspectable(data.id, data);
       }
       return {type: 'event', evt, data: san, cleaned};
     });

frontend/Container.js

@@ -35,6 +35,7 @@ class Container extends React.Component {
         store: Object
       ) => ?Array<MenuItem>,
     },
+    extraTabs: {[key: string]: () => ReactElement},
   };
 
   render(): ReactElement {
@@ -50,9 +51,7 @@ class Container extends React.Component {
     };
     return (
       <div style={styles.container}>
-        <TabbedPane
-          tabs={tabs}
-        />
+        <TabbedPane tabs={tabs} />
         <ContextMenu itemSources={[DEFAULT_MENU_ITEMS, this.props.menuItems]} />
       </div>
     );

frontend/DataView/DataView.js

@@ -10,18 +10,23 @@
  */
 'use strict';
 
+import type {DOMEvent} from '../types';
+
 var React = require('react');
 var Simple = require('./Simple');
 
+var assign = require('object-assign');
 var consts = require('../../agent/consts');
 var previewComplex = require('./previewComplex');
 
 class DataView extends React.Component {
   props: {
     data: Object,
     path: Array<string>,
-    inspect: () => void,
-    showMenu: () => void,
+    inspect: (path: Array<string>, cb: () => void) => void,
+    showMenu: (e: DOMEvent, val: any, path: Array<string>, name: string) => void,
+    startOpen: boolean,
+    noSort?: boolean,
     readOnly: boolean,
   };
 
@@ -31,7 +36,9 @@ class DataView extends React.Component {
       return <div style={styles.missing}>null</div>;
     }
     var names = Object.keys(data);
-    names.sort();
+    if (!this.props.noSort) {
+      names.sort();
+    }
     var path = this.props.path;
     if (!names.length) {
       return <span style={styles.empty}>Empty object</span>;
@@ -44,6 +51,7 @@ class DataView extends React.Component {
             name={'__proto__'}
             path={path.concat(['__proto__'])}
             key={'__proto__'}
+            startOpen={this.props.startOpen}
             inspect={this.props.inspect}
             showMenu={this.props.showMenu}
             readOnly={this.props.readOnly}
@@ -55,6 +63,7 @@ class DataView extends React.Component {
             name={name}
             path={path.concat([name])}
             key={name}
+            startOpen={this.props.startOpen}
             inspect={this.props.inspect}
             showMenu={this.props.showMenu}
             readOnly={this.props.readOnly}
@@ -69,7 +78,13 @@ class DataView extends React.Component {
 class DataItem extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {open: false, loading: false};
+    this.state = {open: this.props.startOpen, loading: false};
+  }
+
+  componentDidMount() {
+    if (this.state.open && this.props.value && this.props.value[consts.inspected] === false) {
+      this.inspect();
+    }
   }
 
   componentWillReceiveProps(nextProps) {
@@ -157,7 +172,8 @@ class DataItem extends React.Component {
         <div style={styles.head}>
           {opener}
           <div
-            style={styles.name}
+            style={assign({}, styles.name, complex && styles.complexName)}
+            onClick={this.toggleOpen.bind(this)}
           >
             {this.props.name}:
           </div>
@@ -218,6 +234,10 @@ var styles = {
     margin: '2px 3px',
   },
 
+  complexName: {
+    cursor: 'pointer',
+  },
+
   preview: {
     display: 'flex',
     margin: '2px 3px',

frontend/DataView/Simple.js

@@ -141,7 +141,7 @@ Simple.propTypes = {
 };
 
 Simple.contextTypes = {
-  onChange: React.PropTypes.func.isRequired,
+  onChange: React.PropTypes.func,
 };
 
 var styles = {

frontend/Panel.js

@@ -15,9 +15,11 @@ var Container = require('./Container');
 var Store = require('./Store');
 var keyboardNav = require('./keyboardNav');
 var invariant = require('./invariant');
+var assign = require('object-assign');
 
 var Bridge = require('../agent/Bridge');
 var NativeStyler = require('../plugins/ReactNativeStyle/ReactNativeStyle.js');
+var RelayPlugin = require('../plugins/Relay/RelayPlugin');
 
 var consts = require('../agent/consts');
 
@@ -44,7 +46,7 @@ class Panel extends React.Component {
   _keyListener: ?(e: DOMEvent) => void;
   _checkTimeout: ?number;
   _unMounted: boolean;
-  _bridge: ?Bridge;
+  _bridge: Bridge;
   _store: Store;
   _unsub: ?() => void;
 
@@ -55,6 +57,7 @@ class Panel extends React.Component {
     this.state = {loading: true, isReact: this.props.alreadyFoundReact};
     this._unMounted = false;
     window.panel = this;
+    this.plugins = [];
   }
 
   getChildContext(): Object {
@@ -141,6 +144,8 @@ class Panel extends React.Component {
   }
 
   teardown() {
+    this.plugins.forEach(p => p.teardown());
+    this.plugins = [];
     if (this._keyListener) {
       window.removeEventListener('keydown', this._keyListener);
       this._keyListener = null;
@@ -152,7 +157,6 @@ class Panel extends React.Component {
       this._teardownWall();
       this._teardownWall = null;
     }
-    this._bridge = null;
   }
 
   inject() {
@@ -161,13 +165,16 @@ class Panel extends React.Component {
 
       this._bridge = new Bridge(wall);
 
-      if (this._bridge) {
-        this._store = new Store(this._bridge);
-      }
+      this._store = new Store(this._bridge);
+      var refresh = () => this.forceUpdate();
+      this.plugins = [
+        new RelayPlugin(this._store, this._bridge, refresh),
+      ];
       this._keyListener = keyboardNav(this._store, window);
 
       window.addEventListener('keydown', this._keyListener);
 
+
       this._store.on('connected', () => {
         this.setState({loading: false});
         this.getNewSelection();
@@ -211,6 +218,11 @@ class Panel extends React.Component {
     if (!this.state.isReact) {
       return <div style={styles.loading}><h1>Looking for react...</h1></div>;
     }
+    var extraTabs = assign.apply(null, [{}].concat(this.plugins.map(p => p.tabs())));
+    var extraPanes = [].concat(...this.plugins.map(p => p.panes()));
+    if (this._store.capabilities.rnStyle) {
+      extraPanes.push(panelRNStyle(this._bridge));
+    }
     return (
       <Container
         reload={this.props.reload && this.reload.bind(this)}
@@ -239,7 +251,8 @@ class Panel extends React.Component {
             }];
           },
         }}
-        extraPanes={this._store.capabilities.rnStyle && [panelRNStyle(this._bridge)]}
+        extraPanes={extraPanes}
+        extraTabs={extraTabs}
       />
     );
   }

frontend/SplitPane.js

@@ -14,8 +14,16 @@ var React = require('react');
 var Draggable = require('./Draggable');
 var assign = require('object-assign');
 
+type Props = {
+  style: ?{[key: string]: any},
+  left: () => ReactElement,
+  right: () => ReactElement,
+  initialWidth: number,
+};
+
 class SplitPane extends React.Component {
-  constructor(props: Object) {
+  props: Props;
+  constructor(props: Props) {
     super(props);
     this.state = {
       width: props.initialWidth,
@@ -59,7 +67,6 @@ class SplitPane extends React.Component {
 var styles = {
   container: {
     display: 'flex',
-    fontFamily: 'sans-serif',
     minWidth: 0,
     flex: 1,
   },

frontend/TabbedPane.js

@@ -38,7 +38,7 @@ class TabbedPane extends React.Component {
               style = assign({}, style, styles.lastTab);
             }
             return (
-              <li style={style} onClick={() => this.props.setSelectedTab(name)}>
+              <li key={name + i} style={style} onClick={() => this.props.setSelectedTab(name)}>
                 {name}
               </li>
             );
@@ -90,6 +90,14 @@ var styles = {
 
 module.exports = decorate({
   listeners: () => ['selectedTab'],
+  shouldUpdate: (props, prevProps) => {
+    for (var name in props) {
+      if (props[name] !== prevProps[name]) {
+        return true;
+      }
+    }
+    return false;
+  },
   props(store) {
     return {
       selected: store.selectedTab,

frontend/decorate.js

@@ -51,6 +51,7 @@ type Options = {
  * }, MyComp);
  */
 module.exports = function(options: Options, Component: any): any {
+  var storeKey = options.store || 'store';
   class Wrapper extends React.Component {
     _listeners: Array<string>;
     _update: () => void;
@@ -61,25 +62,25 @@ module.exports = function(options: Options, Component: any): any {
     }
 
     componentWillMount() {
-      if (!this.context.store) {
+      if (!this.context[storeKey]) {
         return console.warn('no store on context...');
       }
       this._update = () => this.forceUpdate();
       if (!options.listeners) {
         return undefined;
       }
-      this._listeners = options.listeners(this.props, this.context.store);
+      this._listeners = options.listeners(this.props, this.context[storeKey]);
       this._listeners.forEach(evt => {
-        this.context.store.on(evt, this._update);
+        this.context[storeKey].on(evt, this._update);
       });
     }
 
     componentWillUnmount() {
-      if (!this.context.store) {
+      if (!this.context[storeKey]) {
         return console.warn('no store on context...');
       }
       this._listeners.forEach(evt => {
-        this.context.store.off(evt, this._update);
+        this.context[storeKey].off(evt, this._update);
       });
     }
 
@@ -94,32 +95,33 @@ module.exports = function(options: Options, Component: any): any {
     }
 
     componentWillUpdate(nextProps, nextState) {
-      if (!this.context.store) {
+      if (!this.context[storeKey]) {
         return console.warn('no store on context...');
       }
       if (!options.listeners) {
         return undefined;
       }
-      var listeners = options.listeners(this.props, this.context.store);
+      var listeners = options.listeners(this.props, this.context[storeKey]);
       var diff = arrayDiff(listeners, this._listeners);
       diff.missing.forEach(name => {
-        this.context.store.off(name, this._update);
+        this.context[storeKey].off(name, this._update);
       });
       diff.newItems.forEach(name => {
-        this.context.store.on(name, this._update);
+        this.context[storeKey].on(name, this._update);
       });
       this._listeners = listeners;
     }
 
     render() {
-      var store = this.context.store;
+      var store = this.context[storeKey];
       var props = store && options.props(store, this.props);
       return <Component {...props} {...this.props} />;
     }
   }
 
   Wrapper.contextTypes = {
-    store: React.PropTypes.object,
+    // $FlowFixMe computed property
+    [storeKey]: React.PropTypes.object,
   };
 
   Wrapper.displayName = 'Wrapper(' + Component.name + ')';