Move app/src (mostly) to flipper-ui-core/src
Summary: This diff moves all UI code from app/src to app/flipper-ui-core. That is now slightly too much (e.g. node deps are not removed yet), but from here it should be easier to move things out again, as I don't want this diff to be open for too long to avoid too much merge conflicts. * But at least flipper-ui-core is Electron free :) * Killed all cross module imports as well, as they where now even more in the way * Some unit test needed some changes, most not too big (but emotion hashes got renumbered in the snapshots, feel free to ignore that) * Found some files that were actually meaningless (tsconfig in plugins, WatchTools files, that start generating compile errors, removed those Follow up work: * make flipper-ui-core configurable, and wire up flipper-server-core in Electron instead of here * remove node deps (aigoncharov) * figure out correct place to load GKs, plugins, make intern requests etc., and move to the correct module * clean up deps Reviewed By: aigoncharov Differential Revision: D32427722 fbshipit-source-id: 14fe92e1ceb15b9dcf7bece367c8ab92df927a70
This commit is contained in:
Michel Weststrate
committed by
Facebook GitHub Bot
Facebook GitHub Bot
parent
54b7ce9308
commit
7e50c0466a
308
desktop/flipper-ui-core/src/dispatcher/flipperServer.tsx
Normal file
308
desktop/flipper-ui-core/src/dispatcher/flipperServer.tsx
Normal file
@@ -0,0 +1,308 @@
|
||||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @format
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import {State, Store} from '../reducers/index';
|
||||
import {FlipperServer, Logger} from 'flipper-common';
|
||||
import {FlipperServerImpl} from 'flipper-server-core';
|
||||
import {selectClient} from '../reducers/connections';
|
||||
import Client from '../Client';
|
||||
import {notification} from 'antd';
|
||||
import BaseDevice from '../devices/BaseDevice';
|
||||
import {ClientDescription, timeout} from 'flipper-common';
|
||||
import {reportPlatformFailures} from 'flipper-common';
|
||||
import {sideEffect} from '../utils/sideEffect';
|
||||
import {getStaticPath} from '../utils/pathUtils';
|
||||
import constants from '../fb-stubs/constants';
|
||||
import {getRenderHostInstance} from '../RenderHost';
|
||||
|
||||
export default async (store: Store, logger: Logger) => {
|
||||
const {enableAndroid, androidHome, idbPath, enableIOS, enablePhysicalIOS} =
|
||||
store.getState().settingsState;
|
||||
|
||||
const server = new FlipperServerImpl(
|
||||
{
|
||||
enableAndroid,
|
||||
androidHome,
|
||||
idbPath,
|
||||
enableIOS,
|
||||
enablePhysicalIOS,
|
||||
staticPath: getStaticPath(),
|
||||
tmpPath: getRenderHostInstance().paths.tempPath,
|
||||
validWebSocketOrigins: constants.VALID_WEB_SOCKET_REQUEST_ORIGIN_PREFIXES,
|
||||
},
|
||||
logger,
|
||||
);
|
||||
|
||||
store.dispatch({
|
||||
type: 'SET_FLIPPER_SERVER',
|
||||
payload: server,
|
||||
});
|
||||
|
||||
server.on('notification', ({type, title, description}) => {
|
||||
console.warn(`[$type] ${title}: ${description}`);
|
||||
notification.open({
|
||||
message: title,
|
||||
description: description,
|
||||
type: type,
|
||||
duration: 0,
|
||||
});
|
||||
});
|
||||
|
||||
server.on('server-error', (err) => {
|
||||
notification.error({
|
||||
message: 'Failed to start connection server',
|
||||
description:
|
||||
err.code === 'EADDRINUSE' ? (
|
||||
<>
|
||||
Couldn't start connection server. Looks like you have multiple
|
||||
copies of Flipper running or another process is using the same
|
||||
port(s). As a result devices will not be able to connect to Flipper.
|
||||
<br />
|
||||
<br />
|
||||
Please try to kill the offending process by running{' '}
|
||||
<code>kill $(lsof -ti:PORTNUMBER)</code> and restart flipper.
|
||||
<br />
|
||||
<br />
|
||||
{'' + err}
|
||||
</>
|
||||
) : (
|
||||
<>Failed to start Flipper server: ${err.message}</>
|
||||
),
|
||||
duration: null,
|
||||
});
|
||||
});
|
||||
|
||||
server.on('device-connected', (deviceInfo) => {
|
||||
logger.track('usage', 'register-device', {
|
||||
os: deviceInfo.os,
|
||||
name: deviceInfo.title,
|
||||
serial: deviceInfo.serial,
|
||||
});
|
||||
|
||||
const existing = store
|
||||
.getState()
|
||||
.connections.devices.find(
|
||||
(device) => device.serial === deviceInfo.serial,
|
||||
);
|
||||
// handled outside reducer, as it might emit new redux actions...
|
||||
if (existing) {
|
||||
if (existing.connected.get()) {
|
||||
console.warn(
|
||||
`Tried to replace still connected device '${existing.serial}' with a new instance.`,
|
||||
);
|
||||
}
|
||||
existing.destroy();
|
||||
}
|
||||
|
||||
const device = new BaseDevice(server, deviceInfo);
|
||||
device.loadDevicePlugins(
|
||||
store.getState().plugins.devicePlugins,
|
||||
store.getState().connections.enabledDevicePlugins,
|
||||
);
|
||||
|
||||
store.dispatch({
|
||||
type: 'REGISTER_DEVICE',
|
||||
payload: device,
|
||||
});
|
||||
});
|
||||
|
||||
server.on('device-disconnected', (device) => {
|
||||
logger.track('usage', 'unregister-device', {
|
||||
os: device.os,
|
||||
serial: device.serial,
|
||||
});
|
||||
// N.B.: note that we don't remove the device, we keep it in offline
|
||||
});
|
||||
|
||||
server.on('client-setup', (client) => {
|
||||
store.dispatch({
|
||||
type: 'START_CLIENT_SETUP',
|
||||
payload: client,
|
||||
});
|
||||
});
|
||||
|
||||
server.on('client-connected', (payload: ClientDescription) =>
|
||||
handleClientConnected(server, store, logger, payload),
|
||||
);
|
||||
|
||||
server.on('client-disconnected', ({id}) => {
|
||||
const existingClient = store.getState().connections.clients.get(id);
|
||||
existingClient?.disconnect();
|
||||
});
|
||||
|
||||
server.on('client-message', ({id, message}) => {
|
||||
const existingClient = store.getState().connections.clients.get(id);
|
||||
existingClient?.onMessage(message);
|
||||
});
|
||||
|
||||
if (typeof window !== 'undefined') {
|
||||
window.addEventListener('beforeunload', () => {
|
||||
server.close();
|
||||
});
|
||||
}
|
||||
|
||||
server
|
||||
.start()
|
||||
.then(() => {
|
||||
console.log(
|
||||
'Flipper server started and accepting device / client connections',
|
||||
);
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error('Failed to start Flipper server', e);
|
||||
notification.error({
|
||||
message: 'Failed to start Flipper server',
|
||||
description: 'error: ' + e,
|
||||
});
|
||||
});
|
||||
|
||||
return () => {
|
||||
server.close();
|
||||
};
|
||||
};
|
||||
|
||||
export async function handleClientConnected(
|
||||
server: Pick<FlipperServer, 'exec'>,
|
||||
store: Store,
|
||||
logger: Logger,
|
||||
{id, query}: ClientDescription,
|
||||
) {
|
||||
const {connections} = store.getState();
|
||||
const existingClient = connections.clients.get(id);
|
||||
|
||||
if (existingClient) {
|
||||
existingClient.destroy();
|
||||
store.dispatch({
|
||||
type: 'CLEAR_CLIENT_PLUGINS_STATE',
|
||||
payload: {
|
||||
clientId: id,
|
||||
devicePlugins: new Set(),
|
||||
},
|
||||
});
|
||||
store.dispatch({
|
||||
type: 'CLIENT_REMOVED',
|
||||
payload: id,
|
||||
});
|
||||
}
|
||||
|
||||
console.log(
|
||||
`[conn] Searching matching device ${query.device_id} for client ${query.app}...`,
|
||||
);
|
||||
const device =
|
||||
getDeviceBySerial(store.getState(), query.device_id) ??
|
||||
(await findDeviceForConnection(store, query.app, query.device_id).catch(
|
||||
(e) => {
|
||||
console.error(
|
||||
`[conn] Failed to find device '${query.device_id}' while connection app '${query.app}'`,
|
||||
e,
|
||||
);
|
||||
notification.error({
|
||||
message: 'Connection failed',
|
||||
description: `Failed to find device '${query.device_id}' while trying to connect app '${query.app}'`,
|
||||
duration: 0,
|
||||
});
|
||||
},
|
||||
));
|
||||
|
||||
if (!device) {
|
||||
return;
|
||||
}
|
||||
|
||||
const client = new Client(
|
||||
id,
|
||||
query,
|
||||
{
|
||||
send(data: any) {
|
||||
server.exec('client-request', id, data);
|
||||
},
|
||||
async sendExpectResponse(data: any) {
|
||||
return await server.exec('client-request-response', id, data);
|
||||
},
|
||||
},
|
||||
logger,
|
||||
store,
|
||||
undefined,
|
||||
device,
|
||||
);
|
||||
|
||||
console.debug(
|
||||
`Device client initialized: ${client.id}. Supported plugins: ${Array.from(
|
||||
client.plugins,
|
||||
).join(', ')}`,
|
||||
'server',
|
||||
);
|
||||
|
||||
store.dispatch({
|
||||
type: 'NEW_CLIENT',
|
||||
payload: client,
|
||||
});
|
||||
|
||||
store.dispatch(selectClient(client.id));
|
||||
|
||||
await timeout(
|
||||
30 * 1000,
|
||||
client.init(),
|
||||
`[conn] Failed to initialize client ${query.app} on ${query.device_id} in a timely manner`,
|
||||
);
|
||||
console.log(`[conn] ${query.app} on ${query.device_id} connected and ready.`);
|
||||
}
|
||||
|
||||
function getDeviceBySerial(
|
||||
state: State,
|
||||
serial: string,
|
||||
): BaseDevice | undefined {
|
||||
return state.connections.devices.find((device) => device.serial === serial);
|
||||
}
|
||||
|
||||
async function findDeviceForConnection(
|
||||
store: Store,
|
||||
clientId: string,
|
||||
serial: string,
|
||||
): Promise<BaseDevice> {
|
||||
let lastSeenDeviceList: BaseDevice[] = [];
|
||||
/* All clients should have a corresponding Device in the store.
|
||||
However, clients can connect before a device is registered, so wait a
|
||||
while for the device to be registered if it isn't already. */
|
||||
return reportPlatformFailures(
|
||||
new Promise<BaseDevice>((resolve, reject) => {
|
||||
let unsubscribe: () => void = () => {};
|
||||
|
||||
const timeout = setTimeout(() => {
|
||||
unsubscribe();
|
||||
reject(
|
||||
new Error(
|
||||
`Timed out waiting for device ${serial} for client ${clientId}`,
|
||||
),
|
||||
);
|
||||
}, 15000);
|
||||
unsubscribe = sideEffect(
|
||||
store,
|
||||
{name: 'waitForDevice', throttleMs: 100},
|
||||
(state) => state.connections.devices,
|
||||
(newDeviceList) => {
|
||||
if (newDeviceList === lastSeenDeviceList) {
|
||||
return;
|
||||
}
|
||||
lastSeenDeviceList = newDeviceList;
|
||||
const matchingDevice = newDeviceList.find(
|
||||
(device) => device.serial === serial,
|
||||
);
|
||||
if (matchingDevice) {
|
||||
console.log(`[conn] Found device for: ${clientId} on ${serial}.`);
|
||||
clearTimeout(timeout);
|
||||
resolve(matchingDevice);
|
||||
unsubscribe();
|
||||
}
|
||||
},
|
||||
);
|
||||
}),
|
||||
'client-setMatchingDevice',
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user