remove window dependency

Summary:
Fixes required to be able to run Flipper in node.js:
* Adds checks if the `window`-object exists before using it, to allow running in node.
* Imports from within Flipper should directly reference the file they are requiring instead of `import from 'flipper'`. This was done in most of the places. Fixed a few occurrences where this wasn't the case. This is to prevent cyclic dependencies in node.
* shared packages (React, ReactDOM and Flipper) were exposed on the `window` before, changed this to `global` as this works in browser and node.
* Adds some missing methods to our electron stubs (used for testing and headless Flipper)

Reviewed By: passy

Differential Revision: D13786577

fbshipit-source-id: 145d560f1446e7d0bdec2acd8dd54dae983d7b36

src/chrome/DetailSidebar.js

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import {Sidebar} from 'flipper';
+import Sidebar from '../ui/components/Sidebar';
 import {connect} from 'react-redux';
 import {toggleRightSidebarAvailable} from '../reducers/application.js';
 
@@ -15,7 +15,7 @@ type Props = {
   children: any,
   rightSidebarVisible: boolean,
   rightSidebarAvailable: boolean,
-  toggleRightSidebarAvailable: (visible: boolean) => void,
+  toggleRightSidebarAvailable: (visible?: boolean) => any,
   width?: number,
 };
 

src/createTablePlugin.js

@@ -11,10 +11,14 @@ import type {
   TableColumnSizes,
   TableColumns,
 } from 'flipper';
-import {FlexColumn, Button, DetailSidebar} from 'flipper';
+
+import FlexColumn from './ui/components/FlexColumn';
+import Button from './ui/components/Button';
+import DetailSidebar from './chrome/DetailSidebar';
+import {FlipperPlugin} from './plugin';
+import SearchableTable from './ui/components/searchable/SearchableTable';
 import textContent from './utils/textContent.js';
 import createPaste from './utils/createPaste.js';
-import {FlipperPlugin, SearchableTable} from 'flipper';
 
 type ID = string;
 

src/dispatcher/iOSDevice.js

@@ -46,9 +46,12 @@ function forwardPort(port: number, multiplexChannelPort: number) {
 const portForwarders: Array<ChildProcess> = GK.get('flipper_ios_device_support')
   ? [forwardPort(8089, 8079), forwardPort(8088, 8078)]
   : [];
-window.addEventListener('beforeunload', () => {
-  portForwarders.forEach(process => process.kill());
-});
+
+if (typeof window !== 'undefined') {
+  window.addEventListener('beforeunload', () => {
+    portForwarders.forEach(process => process.kill());
+  });
+}
 
 function queryDevices(store: Store, logger: Logger): Promise<void> {
   const {connections} = store.getState();

src/dispatcher/plugins.js

@@ -12,7 +12,7 @@ import type {State} from '../reducers/plugins';
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import * as Flipper from 'flipper';
+import * as Flipper from '../index.js';
 import {
   registerPlugins,
   addGatekeepedPlugins,
@@ -20,11 +20,9 @@ import {
   addFailedPlugins,
 } from '../reducers/plugins';
 import {remote} from 'electron';
-import {GK} from 'flipper';
+import GK from '../fb-stubs/GK';
 import {FlipperBasePlugin} from '../plugin.js';
 import {setupMenuBar} from '../MenuBar.js';
-import {setPluginState} from '../reducers/pluginStates.js';
-import {getPersistedState} from '../utils/pluginUtils.js';
 
 export type PluginDefinition = {
   name: string,
@@ -35,9 +33,10 @@ export type PluginDefinition = {
 
 export default (store: Store, logger: Logger) => {
   // expose Flipper and exact globally for dynamically loaded plugins
-  window.React = React;
-  window.ReactDOM = ReactDOM;
-  window.Flipper = Flipper;
+  const globalObject = typeof window === 'undefined' ? global : window;
+  globalObject.React = React;
+  globalObject.ReactDOM = ReactDOM;
+  globalObject.Flipper = Flipper;
 
   const gatekeepedPlugins: Array<PluginDefinition> = [];
   const disabledPlugins: Array<PluginDefinition> = [];
@@ -74,7 +73,7 @@ function getBundledPlugins(): Array<PluginDefinition> {
   // List of defaultPlugins is written at build time
   let bundledPlugins: Array<PluginDefinition> = [];
   try {
-    bundledPlugins = window.electronRequire('./defaultPlugins/index.json');
+    bundledPlugins = global.electronRequire('./defaultPlugins/index.json');
   } catch (e) {}
 
   return bundledPlugins.map(plugin => ({
@@ -86,8 +85,10 @@ function getBundledPlugins(): Array<PluginDefinition> {
 export function getDynamicPlugins() {
   let dynamicPlugins: Array<PluginDefinition> = [];
   try {
-    // $FlowFixMe process.env not defined in electron API spec
-    dynamicPlugins = JSON.parse(remote?.process.env.PLUGINS || '[]');
+    dynamicPlugins = JSON.parse(
+      // $FlowFixMe process.env not defined in electron API spec
+      remote?.process.env.PLUGINS || process.env.PLUGINS || '[]',
+    );
   } catch (e) {
     console.error(e);
   }
@@ -119,7 +120,8 @@ export const checkDisabled = (disabledPlugins: Array<PluginDefinition>) => (
   try {
     disabledList = new Set(
       // $FlowFixMe process.env not defined in electron API spec
-      JSON.parse(remote?.process.env.CONFIG || '{}').disabledPlugins || [],
+      JSON.parse(remote?.process.env.CONFIG || process.env.CONFIG || '{}')
+        .disabledPlugins || [],
     );
   } catch (e) {
     console.error(e);
@@ -134,13 +136,13 @@ export const checkDisabled = (disabledPlugins: Array<PluginDefinition>) => (
 
 export const requirePlugin = (
   failedPlugins: Array<[PluginDefinition, string]>,
-  requireFunction: Function = window.electronRequire,
+  reqFn: Function = global.electronRequire,
 ) => {
   return (
     pluginDefinition: PluginDefinition,
   ): ?Class<FlipperPlugin<> | FlipperDevicePlugin<>> => {
     try {
-      let plugin = requireFunction(pluginDefinition.out);
+      let plugin = reqFn(pluginDefinition.out);
       if (plugin.default) {
         plugin = plugin.default;
       }

src/dispatcher/server.js

@@ -78,7 +78,9 @@ export default (store: Store, logger: Logger) => {
     },
   );
 
-  window.addEventListener('beforeunload', () => {
-    server.close();
-  });
+  if (typeof window !== 'undefined') {
+    window.addEventListener('beforeunload', () => {
+      server.close();
+    });
+  }
 };

src/dispatcher/tracking.js

@@ -29,10 +29,12 @@ export default (store: Store, logger: Logger) => {
     }
   }
 
-  droppedFrameDetection(
-    performance.now(),
-    () => store.getState().application.windowIsFocused,
-  );
+  if (typeof window !== 'undefined') {
+    droppedFrameDetection(
+      performance.now(),
+      () => store.getState().application.windowIsFocused,
+    );
+  }
 
   ipcRenderer.on('trackUsage', () => {
     const {

src/plugin.js

@@ -14,7 +14,8 @@ import type {Store} from './reducers/index.js';
 import React from 'react';
 import type {Node} from 'react';
 import BaseDevice from './devices/BaseDevice.js';
-import {AndroidDevice, IOSDevice} from 'flipper';
+import AndroidDevice from './devices/AndroidDevice';
+import IOSDevice from './devices/IOSDevice';
 
 const invariant = require('invariant');
 

src/ui/components/Interactive.js

@@ -13,7 +13,7 @@ import {
   maybeSnapTop,
   SNAP_SIZE,
 } from '../../utils/snap.js';
-import {styled} from '../../ui';
+import styled from '../styled/index.js';
 
 const invariant = require('invariant');
 const React = require('react');

src/ui/components/data-inspector/DataDescription.js

@@ -4,7 +4,7 @@
  * LICENSE file in the root directory of this source tree.
  * @format
  */
-import {Link} from 'flipper';
+import Link from '../Link';
 import type {DataInspectorSetValue} from './DataInspector.js';
 import {PureComponent} from 'react';
 import styled from '../../styled/index.js';

src/ui/components/elements-inspector/sidebar.js

@@ -13,7 +13,7 @@ import Panel from '../Panel.js';
 import ManagedDataInspector from '../data-inspector/ManagedDataInspector.js';
 import {Component} from 'react';
 import {Console} from '../console';
-import {GK} from 'flipper';
+import GK from '../../../fb-stubs/GK';
 
 const deepEqual = require('deep-equal');
 

src/utils/icons.js

@@ -96,7 +96,9 @@ export function getIconUrl(
     }
   }
 
-  let requestedScale: number = window.devicePixelRatio;
+  let requestedScale: number =
+    typeof window !== 'undefined' ? window.devicePixelRatio : 1;
+
   if (!SCALE.includes(requestedScale)) {
     // find the next largest size
     const possibleScale: ?number = SCALE.find(scale => {