From 1f2f799772795f91ac722ad8191c4dd47bdbec6e Mon Sep 17 00:00:00 2001 From: Andrey Goncharov Date: Tue, 10 May 2022 05:13:24 -0700 Subject: [PATCH] Setup globals and initialize flipper-server-companion Summary: We want Flipper plugins to share imports with Flipper: - They must share the same React otherwise different Reacts could conflict with each other - Other common modules are shared to decrease the bundle size for each plugin. `setGlobalObject` provides shared modules to Flipper Plugins by adding them to the global context (window or process or global this). In the headless context, we do not have React and other DOM-related libraries, so we provide stubs instead. Reviewed By: passy Differential Revision: D36130161 fbshipit-source-id: d30c59a6c3ae02e7f9244bc0bb5790079b771107 --- .../globalsReplacements/fakeEmotionStyled.tsx | 11 ++++ .../globalsReplacements/fakeLegacyExports.tsx | 11 ++++ .../src/globalsReplacements/fakeReact.tsx | 16 ++++++ .../src/globalsReplacements/fakeReactDOM.tsx | 12 +++++ .../flipper-server-companion/src/index.tsx | 11 ++++ desktop/flipper-server-companion/src/init.tsx | 51 +++++++++++++++++++ 6 files changed, 112 insertions(+) create mode 100644 desktop/flipper-server-companion/src/globalsReplacements/fakeEmotionStyled.tsx create mode 100644 desktop/flipper-server-companion/src/globalsReplacements/fakeLegacyExports.tsx create mode 100644 desktop/flipper-server-companion/src/globalsReplacements/fakeReact.tsx create mode 100644 desktop/flipper-server-companion/src/globalsReplacements/fakeReactDOM.tsx create mode 100644 desktop/flipper-server-companion/src/index.tsx create mode 100644 desktop/flipper-server-companion/src/init.tsx diff --git a/desktop/flipper-server-companion/src/globalsReplacements/fakeEmotionStyled.tsx b/desktop/flipper-server-companion/src/globalsReplacements/fakeEmotionStyled.tsx new file mode 100644 index 000000000..01c22a6af --- /dev/null +++ b/desktop/flipper-server-companion/src/globalsReplacements/fakeEmotionStyled.tsx @@ -0,0 +1,11 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + */ + +export const styled = () => () => ({}); +(styled as any).img = () => {}; diff --git a/desktop/flipper-server-companion/src/globalsReplacements/fakeLegacyExports.tsx b/desktop/flipper-server-companion/src/globalsReplacements/fakeLegacyExports.tsx new file mode 100644 index 000000000..40703cd35 --- /dev/null +++ b/desktop/flipper-server-companion/src/globalsReplacements/fakeLegacyExports.tsx @@ -0,0 +1,11 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + */ + +export * from './fakeEmotionStyled'; +export const Layout = {}; diff --git a/desktop/flipper-server-companion/src/globalsReplacements/fakeReact.tsx b/desktop/flipper-server-companion/src/globalsReplacements/fakeReact.tsx new file mode 100644 index 000000000..1dcb388cd --- /dev/null +++ b/desktop/flipper-server-companion/src/globalsReplacements/fakeReact.tsx @@ -0,0 +1,16 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + */ + +export class PureComponent {} +export class Component {} + +export default { + PureComponent, + Component, +}; diff --git a/desktop/flipper-server-companion/src/globalsReplacements/fakeReactDOM.tsx b/desktop/flipper-server-companion/src/globalsReplacements/fakeReactDOM.tsx new file mode 100644 index 000000000..cf6fbc190 --- /dev/null +++ b/desktop/flipper-server-companion/src/globalsReplacements/fakeReactDOM.tsx @@ -0,0 +1,12 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + */ + +export const unstable_batchedUpdates = (cb: () => void) => { + return cb(); +}; diff --git a/desktop/flipper-server-companion/src/index.tsx b/desktop/flipper-server-companion/src/index.tsx new file mode 100644 index 000000000..210a9bf25 --- /dev/null +++ b/desktop/flipper-server-companion/src/index.tsx @@ -0,0 +1,11 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + */ + +export {FlipperServerCompanion} from './companion'; +export {initCompanionEnv, FlipperServerCompanionEnv} from './init'; diff --git a/desktop/flipper-server-companion/src/init.tsx b/desktop/flipper-server-companion/src/init.tsx new file mode 100644 index 000000000..48a2e19cf --- /dev/null +++ b/desktop/flipper-server-companion/src/init.tsx @@ -0,0 +1,51 @@ +/** + * Copyright (c) Meta Platforms, Inc. and 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 {FlipperServer, getLogger} from 'flipper-common'; +import {getRenderHostInstance, setGlobalObject} from 'flipper-frontend-core'; +import * as FlipperPluginSDK from 'flipper-plugin'; +import * as Immer from 'immer'; +import {HeadlessPluginInitializer} from './HeadlessPluginInitializer'; +import {initializeFlipperLibImplementation} from './initializeFlipperLibImplementation'; +import {initializeRenderHost} from './initializeRenderHost'; +import * as React from './globalsReplacements/fakeReact'; +import * as ReactDOM from './globalsReplacements/fakeReactDOM'; +import {styled} from './globalsReplacements/fakeEmotionStyled'; +import * as legacyExports from './globalsReplacements/fakeLegacyExports'; + +export interface FlipperServerCompanionEnv { + pluginInitializer: HeadlessPluginInitializer; +} + +export const initCompanionEnv = async ( + flipperServer: FlipperServer, +): Promise => { + // Anything DOM-related (like React or ant) does not exist and should not be used in a headless context because there is no DOM to use + setGlobalObject({ + React: React, + ReactDOM: ReactDOM, + ReactDOMClient: {}, + ReactIs: {}, + Flipper: legacyExports, + FlipperPlugin: FlipperPluginSDK, + Immer, + antd: {}, + emotion_styled: {default: styled}, + antdesign_icons: {}, + }); + + const flipperServerConfig = await flipperServer.exec('get-config'); + initializeRenderHost(flipperServer, flipperServerConfig); + initializeFlipperLibImplementation(getRenderHostInstance(), getLogger()); + + const pluginInitializer = new HeadlessPluginInitializer(); + await pluginInitializer.init(); + + return {pluginInitializer}; +};