diff --git a/src/chrome/DetailSidebar.js b/src/chrome/DetailSidebar.js index 6e9068df8..ff07f2924 100644 --- a/src/chrome/DetailSidebar.js +++ b/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, }; diff --git a/src/createTablePlugin.js b/src/createTablePlugin.js index 9d11b3245..fdaf69e87 100644 --- a/src/createTablePlugin.js +++ b/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; diff --git a/src/dispatcher/iOSDevice.js b/src/dispatcher/iOSDevice.js index 0bb89cb22..cee8db1dc 100644 --- a/src/dispatcher/iOSDevice.js +++ b/src/dispatcher/iOSDevice.js @@ -46,9 +46,12 @@ function forwardPort(port: number, multiplexChannelPort: number) { const portForwarders: Array = 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 { const {connections} = store.getState(); diff --git a/src/dispatcher/plugins.js b/src/dispatcher/plugins.js index d4beb2a85..b3a07b8b5 100644 --- a/src/dispatcher/plugins.js +++ b/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 = []; const disabledPlugins: Array = []; @@ -74,7 +73,7 @@ function getBundledPlugins(): Array { // List of defaultPlugins is written at build time let bundledPlugins: Array = []; 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 { export function getDynamicPlugins() { let dynamicPlugins: Array = []; 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) => ( 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) => ( export const requirePlugin = ( failedPlugins: Array<[PluginDefinition, string]>, - requireFunction: Function = window.electronRequire, + reqFn: Function = global.electronRequire, ) => { return ( pluginDefinition: PluginDefinition, ): ?Class | FlipperDevicePlugin<>> => { try { - let plugin = requireFunction(pluginDefinition.out); + let plugin = reqFn(pluginDefinition.out); if (plugin.default) { plugin = plugin.default; } diff --git a/src/dispatcher/server.js b/src/dispatcher/server.js index 78adaee50..32c0b0004 100644 --- a/src/dispatcher/server.js +++ b/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(); + }); + } }; diff --git a/src/dispatcher/tracking.js b/src/dispatcher/tracking.js index e75adda2b..229bb113e 100644 --- a/src/dispatcher/tracking.js +++ b/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 { diff --git a/src/plugin.js b/src/plugin.js index dc9d3aff0..42ec14482 100644 --- a/src/plugin.js +++ b/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'); diff --git a/src/ui/components/Interactive.js b/src/ui/components/Interactive.js index c3c17ac44..e2b4741ff 100644 --- a/src/ui/components/Interactive.js +++ b/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'); diff --git a/src/ui/components/data-inspector/DataDescription.js b/src/ui/components/data-inspector/DataDescription.js index 56f5e96cd..d8609a6e1 100644 --- a/src/ui/components/data-inspector/DataDescription.js +++ b/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'; diff --git a/src/ui/components/elements-inspector/sidebar.js b/src/ui/components/elements-inspector/sidebar.js index 25f65eea2..9217a4fdf 100644 --- a/src/ui/components/elements-inspector/sidebar.js +++ b/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'); diff --git a/src/utils/icons.js b/src/utils/icons.js index b50d5d145..fb0a9097f 100644 --- a/src/utils/icons.js +++ b/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 => { diff --git a/static/electron-stubs.notjs b/static/electron-stubs.notjs index c622b6505..071aefe62 100644 --- a/static/electron-stubs.notjs +++ b/static/electron-stubs.notjs @@ -5,11 +5,25 @@ }, getCurrentWindow: function() { return { - isFocused: function() {return true;} + isFocused: function() {return true;}, + on: function() {return true;} }; }, app: { - getVersion: function() {return '1';} + getVersion: function() {return '1';}, + getName: function() {return '';} + }, + shell: { + openExternal: function() {} + }, + Menu: { + buildFromTemplate: function() { + return {items: []} + }, + setApplicationMenu: function() {} } }, + ipcRenderer: { + on: function() {return true;} + }, } diff --git a/static/transforms/__tests__/flipper-requires.node.js b/static/transforms/__tests__/flipper-requires.node.js index b9a9770c0..02cd92c29 100644 --- a/static/transforms/__tests__/flipper-requires.node.js +++ b/static/transforms/__tests__/flipper-requires.node.js @@ -17,36 +17,36 @@ const babelOptions = { filename: 'index.js', }; -test('transform react requires to global window', () => { +test('transform react requires to global object', () => { const src = 'require("react")'; const ast = parse(src); const transformed = transformFromAstSync(ast, src, babelOptions).ast; const {code} = generate(transformed); - expect(code).toBe('window.React;'); + expect(code).toBe('global.React;'); }); -test('transform react-dom requires to global window', () => { +test('transform react-dom requires to global object', () => { const src = 'require("react-dom")'; const ast = parse(src); const transformed = transformFromAstSync(ast, src, babelOptions).ast; const {code} = generate(transformed); - expect(code).toBe('window.ReactDOM;'); + expect(code).toBe('global.ReactDOM;'); }); -test('transform flipper requires to global window', () => { +test('transform flipper requires to global object', () => { const src = 'require("flipper")'; const ast = parse(src); const transformed = transformFromAstSync(ast, src, babelOptions).ast; const {code} = generate(transformed); - expect(code).toBe('window.Flipper;'); + expect(code).toBe('global.Flipper;'); }); -test('transform React identifier to window.React', () => { +test('transform React identifier to global.React', () => { const src = 'React;'; const ast = parse(src); const transformed = transformFromAstSync(ast, src, babelOptions).ast; const {code} = generate(transformed); - expect(code).toBe('window.React;'); + expect(code).toBe('global.React;'); }); test.skip('throw error when requiring outside the plugin', () => { diff --git a/static/transforms/electron-requires.js b/static/transforms/electron-requires.js index 26a12ebdb..f4e1e5ab8 100644 --- a/static/transforms/electron-requires.js +++ b/static/transforms/electron-requires.js @@ -29,6 +29,7 @@ const BUILTINS = [ 'assert', 'util', 'path', + 'perf_hooks', 'punycode', 'querystring', 'cluster', diff --git a/static/transforms/flipper-requires.js b/static/transforms/flipper-requires.js index 450e59f02..1a49f9652 100644 --- a/static/transforms/flipper-requires.js +++ b/static/transforms/flipper-requires.js @@ -37,11 +37,11 @@ module.exports = ({types: t}) => ({ t.isStringLiteral(args[0]) ) { if (args[0].value === 'flipper') { - path.replaceWith(t.identifier('window.Flipper')); + path.replaceWith(t.identifier('global.Flipper')); } else if (args[0].value === 'react') { - path.replaceWith(t.identifier('window.React')); + path.replaceWith(t.identifier('global.React')); } else if (args[0].value === 'react-dom') { - path.replaceWith(t.identifier('window.ReactDOM')); + path.replaceWith(t.identifier('global.ReactDOM')); } else if ( // require a file not a pacakge args[0].value.indexOf('/') > -1 && @@ -70,7 +70,7 @@ module.exports = ({types: t}) => ({ path.parentPath.node.id !== path.node && !isExcludedPath(state.file.opts.filename) ) { - path.replaceWith(t.identifier('window.React')); + path.replaceWith(t.identifier('global.React')); } }, },