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
1.9 KiB
id, title, sidebar_label
| id | title | sidebar_label |
|---|---|---|
| js-setup | Building a Flipper desktop plugin | 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:
{
"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:
$ 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:
{
"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
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.