2f5096ddc8
Summary: Random observations 1. RN already generates the Flipper initialization code out of the box 2. This code assumes a prefixed namespace: `facebook.flipper`. Maybe it would be better if that were `appname`, but that seems an unnecessary burden at this point, preventing direct copy / paste possibilities 3. Out of the box, the generated code by RN doesn't align with the code provided here, because no `ReactInstanceManager` argument is passed in (nor does it seem to be available in a straight-forward way) 4. patch MainApplication.java with `getReactNativeHost().getReactInstanceManager()` 5. turn this into an explicit section: https://fbflipper.com/docs/tutorial/js-table.html#dynamic-plugin-loading. Also explain that when using `node_modules`, config doesn't need to be changed? 6. xcode 10! sudo xcode-select -s /Applications/Xcode_10.XXX/Contents/Developer/ 7. Also tried to install Reactotron plugins by Infinite Red, got that compilable in the end, but the andoid / ios implementations still seems to be stub, so I'll try to follow up with them later, to be notified when they actually have something Reviewed By: passy Differential Revision: D18349098 fbshipit-source-id: 233bbe20a37c57c7dfe08c8fccdd4508bdefe96f
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/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.
|