Move desktop-related code to "desktop" subfolder (#872)
Summary: Pull Request resolved: https://github.com/facebook/flipper/pull/872 Move all the JS code related to desktop app to "desktop" subfolder. The structure of "desktop" folder: - `src` - JS code of Flipper desktop app executing in Electron Renderer (Chrome) process. This folder also contains all the Flipper plugins in subfolder "src/plugins". - `static` - JS code of Flipper desktop app bootstrapping executing in Electron Main (Node.js) process - `pkg` - Flipper packaging lib and CLI tool - `doctor` - Flipper diagnostics lib and CLI tool - `scripts` - Build scripts for Flipper desktop app - `headless` - Headless version of Flipper app - `headless-tests` - Integration tests running agains Flipper headless version Reviewed By: passy Differential Revision: D20249304 fbshipit-source-id: 9a51c63b51b92b758a02fc8ebf7d3d116770efe9
This commit is contained in:
committed by
Facebook GitHub Bot
parent
a60e6fee87
commit
85c13bb1f3
@@ -60,4 +60,4 @@ This will ask Flipper desktop to generate a client certificate, using the CSR pr
|
||||
|
||||
Depending on the client, `destination` can have a different meaning. A basic example would be a file path, that both the desktop and the client have access to. With this Flipper desktop could write the certificate to that path. A more involved example is that of the Android Client, where destination specifies a relative path inside an app container. And the Subject Common Name determines which app container. Together these two pieces of information form an absolute file path inside an android device.
|
||||
|
||||
For Flipper desktop to work with a given Client type, it needs to be modified to know how to correctly interpret the `destination` argument, and deploy certificates to it. You can see the current implementations in [CertificateProvider.tsx](https://github.com/facebook/flipper/blob/master/src/utils/CertificateProvider.tsx).
|
||||
For Flipper desktop to work with a given Client type, it needs to be modified to know how to correctly interpret the `destination` argument, and deploy certificates to it. You can see the current implementations in [CertificateProvider.tsx](https://github.com/facebook/flipper/blob/master/desktop/src/utils/CertificateProvider.tsx).
|
||||
|
||||
@@ -65,7 +65,7 @@ Pseudo-classes can be used like this:
|
||||
|
||||
## Colors
|
||||
|
||||
The colors module contains all standard colors used by Flipper. All the available colors are defined in [`src/ui/components/colors.tsx`](https://github.com/facebook/flipper/blob/master/src/ui/components/colors.tsx) with comments about suggested usage of them. And we strongly encourage to use them. They can be required like this:
|
||||
The colors module contains all standard colors used by Flipper. All the available colors are defined in [`desktop/src/ui/components/colors.tsx`](https://github.com/facebook/flipper/blob/master/desktop/src/ui/components/colors.tsx) with comments about suggested usage of them. And we strongly encourage to use them. They can be required like this:
|
||||
|
||||
```javascript
|
||||
import {colors} from 'flipper'
|
||||
|
||||
@@ -97,7 +97,7 @@ TEST(MyFlipperPluginTests, testDummy) {
|
||||
## Testing the Flipper Desktop Plugin
|
||||
|
||||
Tests should be put in the `__tests__` directory of your plugin sources, and be created using Jest.
|
||||
An example test suite can be found [here](https://github.com/facebook/flipper/blob/master/src/plugins/layout/__tests__/ProxyArchiveClient.node.tsx).
|
||||
An example test suite can be found [here](https://github.com/facebook/flipper/blob/master/desktop/src/plugins/layout/__tests__/ProxyArchiveClient.node.tsx).
|
||||
|
||||
Flipper exposes an API to generate unit tests that can verify _regressions_ and real life scenarios.
|
||||
To generate a unit test:
|
||||
|
||||
@@ -59,6 +59,6 @@ you can also specify a title to show in the Flipper sidebar and an icon to displ
|
||||
}
|
||||
}
|
||||
```
|
||||
*See [package.json](https://github.com/facebook/flipper/blob/master/src/plugins/seamammals/package.json)*
|
||||
*See [package.json](https://github.com/facebook/flipper/blob/master/desktop/src/plugins/seamammals/package.json)*
|
||||
|
||||
Now that our package has been set up, we are ready to build a UI for our plugin. Either by using a standardized table-based plugin, or by creating a custom UI.
|
||||
|
||||
@@ -129,7 +129,7 @@ export default createTablePlugin<Row>({
|
||||
buildRow,
|
||||
});
|
||||
```
|
||||
*See [index.tsx](https://github.com/facebook/flipper/blob/master/src/plugins/seamammals/index.tsx)*
|
||||
*See [index.tsx](https://github.com/facebook/flipper/blob/master/desktop/src/plugins/seamammals/index.tsx)*
|
||||
|
||||
The `method` we define here corresponds to the name
|
||||
of the function we call on the native side to inform
|
||||
|
||||
@@ -49,4 +49,4 @@ The `connection` object can also be used to listen to messages coming from the D
|
||||
An example plugin to play a little Tic-Tac-Toe between the Flipper Desktop and a React Native app can be found inside this repository as well (run `yarn && yarn android` in `react-native/ReactNativeFlipperExample` to start the test project):
|
||||
|
||||
* The React Native JavaScript based plugin implementation: [FlipperTicTacToe.js](https://github.com/facebook/flipper/tree/master/react-native/ReactNativeFlipperExample/FlipperTicTacToe.js)
|
||||
* The Flipper Desktop plugin implementation: [rn-tic-tac-toe/index.tsx](https://github.com/facebook/flipper/blob/master/src/plugins/rn-tic-tac-toe/index.tsx)
|
||||
* The Flipper Desktop plugin implementation: [rn-tic-tac-toe/index.tsx](https://github.com/facebook/flipper/blob/master/desktop/src/plugins/rn-tic-tac-toe/index.tsx)
|
||||
|
||||
Reference in New Issue
Block a user