Tidied up Flow types for Bridge and Store

src/backend/agent.js

@@ -31,7 +31,7 @@ export default class Agent extends EventEmitter {
     bridge.addListener('shutdown', this.shutdown);
 
     // TODO Listen to bridge for things like selection.
-    // bridge.on('...'), this...);
+    // bridge.addListener('...'), this...);
   }
 
   highlightElementInDOM = ({

src/backend/types.js

@@ -48,6 +48,7 @@ export type RendererInterface = {
   getNativeFromReactElement?: ?(component: Fiber) => ?NativeType,
   getReactElementFromNative?: ?(component: NativeType) => ?Fiber,
   handleCommitFiberRoot: (fiber: Object) => void,
+  handleCommitFiberUnmount: (fiber: Object) => void,
   inspectElement: (id: number) => InspectedElement | null,
   renderer: ReactRenderer | null,
   selectElement: (id: number) => void,
@@ -63,7 +64,7 @@ export type Hook = {
 
   emit: (evt: string, data: any) => void,
   getFiberRoots: (rendererID: RendererID) => Set<Object>,
-  inject: (renderer: ReactRenderer) => string | null,
+  inject: (renderer: ReactRenderer) => number | null,
   on: (evt: string, handler: Handler) => void,
   off: (evt: string, handler: Handler) => void,
   reactDevtoolsAgent?: ?Object,

src/devtools/store.js

@@ -55,8 +55,8 @@ export default class Store extends EventEmitter {
     debug('constructor', 'subscribing to Bridge');
 
     this._bridge = bridge;
-    this._bridge.on('operations', this.onBridgeOperations);
-    this._bridge.on('shutdown', this.onBridgeShutdown);
+    this._bridge.addListener('operations', this.onBridgeOperations);
+    this._bridge.addListener('shutdown', this.onBridgeShutdown);
   }
 
   get numElements(): number {
@@ -405,8 +405,8 @@ export default class Store extends EventEmitter {
   onBridgeShutdown = () => {
     debug('onBridgeShutdown', 'unsubscribing from Bridge');
 
-    this._bridge.off('operations', this.onBridgeOperations);
-    this._bridge.off('shutdown', this.onBridgeShutdown);
+    this._bridge.removeListener('operations', this.onBridgeOperations);
+    this._bridge.removeListener('shutdown', this.onBridgeShutdown);
   };
 
   // DEBUG

src/devtools/views/Settings.css

@@ -1,6 +1,5 @@
 .Settings {
   width: 100%;
-  height: 100%;
   padding: 0.5rem;
   display: flex;
   flex-direction: column;

src/hook.js

@@ -7,12 +7,12 @@
  * @flow
  */
 
-import type { Hook } from './types';
+import type { Hook } from 'src/backend/types';
 
 declare var window: any;
 
-export function installHook(target: any): Hook {
-  if (target.hasOwnProperty('__REACT_DEVTOOLS_GLOBAL_HOOK__')) return;
+export function installHook(target: any): Hook | null {
+  if (target.hasOwnProperty('__REACT_DEVTOOLS_GLOBAL_HOOK__')) return null;
 
   function detectReactBuildType(renderer) {
     try {
@@ -124,7 +124,6 @@ export function installHook(target: any): Hook {
   }
 
   function onCommitFiberUnmount(rendererID, fiber) {
-    // TODO: can we use hook for roots too?
     const rendererInterface = rendererInterfaces.get(rendererID);
     if (rendererInterface != null) {
       rendererInterface.handleCommitFiberUnmount(fiber);

src/types.js

@@ -1,10 +1,10 @@
 // @flow
 
-// TODO
-export type Bridge = any;
-
-// TODO
-export type Hook = any;
+export type Bridge = {
+  addListener(type: string, callback: Function): void,
+  removeListener(type: string, callback: Function): void,
+  send(type: string, data?: any): void,
+};
 
 export type Wall = {|
   listen: (fn: Function) => void,