10d990c32c
Summary: Plugins moved from "sonar/desktop/src/plugins" to "sonar/desktop/plugins". Fixed all the paths after moving. New "desktop" folder structure: - `src` - Flipper desktop app JS code executing in Electron Renderer (Chrome) process. - `static` - Flipper desktop app JS code executing in Electron Main (Node.js) process. - `plugins` - Flipper desktop JS plugins. - `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 desktop app. - `headless-tests` - Integration tests running agains Flipper headless version. Reviewed By: mweststrate Differential Revision: D20344186 fbshipit-source-id: d020da970b2ea1e001f9061a8782bfeb54e31ba0
65 lines
1.9 KiB
Markdown
65 lines
1.9 KiB
Markdown
---
|
|
id: js-setup
|
|
title: Building a Flipper desktop plugin
|
|
sidebar_label: Building a desktop plugin
|
|
---
|
|
|
|
Now that we have the native side covered, let's display the data we're sending
|
|
on the desktop side.
|
|
|
|
|
|
|
|
## Dynamic Plugin loading
|
|
|
|
By default, Flipper will start with the plugins it was bundled with. You can
|
|
configure it to also look for plugins in custom directories. To do that,
|
|
modify the `~/.flipper/config.json` file that is created the first time
|
|
you start Flipper and add a newly created directory the `pluginPaths` attribute.
|
|
|
|
Your file will then look something like this:
|
|
|
|
```json
|
|
{
|
|
"pluginPaths": [
|
|
"~/Flipper/custom-plugins/"
|
|
],
|
|
...
|
|
}
|
|
```
|
|
|
|
## Creating the Plugin Package
|
|
|
|
With the loading part out of the way, we can create the new plugin. For that, first
|
|
create a new folder inside the custom plugins directory. Then use `yarn init` (`npm init` if that's more your style)
|
|
to initialise a new JavaScript package:
|
|
|
|
```bash
|
|
$ cd ~/Flipper/custom-plugins/
|
|
$ mkdir sea-mammals
|
|
$ cd sea-mammals
|
|
$ yarn init
|
|
```
|
|
|
|
When choosing the package name, remember to use the name we have specified on the native side as ID.
|
|
In our case, that is "sea-mammals". Once done, open the `package.json`. In addition to the name,
|
|
you can also specify a title to show in the Flipper sidebar and an icon to display here. For instance:
|
|
|
|
```json
|
|
{
|
|
"name": "sea-mammals",
|
|
"version": "1.0.0",
|
|
"main": "index.tsx",
|
|
"license": "MIT",
|
|
"keywords": ["flipper-plugin"],
|
|
"icon": "apps",
|
|
"title": "Sea Mammals",
|
|
"category": "Example Plugin",
|
|
"dependencies": {
|
|
"flipper": "latest"
|
|
}
|
|
}
|
|
```
|
|
*See [package.json](https://github.com/facebook/flipper/blob/master/desktop/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.
|