diff --git a/docs/tutorial/android.mdx b/docs/tutorial/android.mdx index 61a9c11b8..0d0d50e12 100644 --- a/docs/tutorial/android.mdx +++ b/docs/tutorial/android.mdx @@ -3,6 +3,7 @@ id: android title: Building an Android Plugin --- import useBaseUrl from '@docusaurus/useBaseUrl'; +import {FbInternalOnly} from 'internaldocs-fb-helpers'; Android Tutorial App @@ -22,6 +23,12 @@ https://github.com/facebook/flipper/tree/7dae5771d96ea76b75796d3b3a2c78746e581e3 ## Creating a Plugin + +
+[FB-Only] Depending the options selected during scaffolding (see intro), some of the following code might already have been generated by `scarf`. +
+ + On Android, a Flipper plugin is a class that implements the [`FlipperPlugin`](https://github.com/facebook/flipper/blob/master/android/src/main/java/com/facebook/flipper/core/FlipperPlugin.java) interface. diff --git a/docs/tutorial/intro.mdx b/docs/tutorial/intro.mdx index f679dd3f3..3e9401ccb 100644 --- a/docs/tutorial/intro.mdx +++ b/docs/tutorial/intro.mdx @@ -3,10 +3,10 @@ id: intro title: Intro --- import useBaseUrl from '@docusaurus/useBaseUrl'; +import {FbInternalOnly} from 'internaldocs-fb-helpers'; Android App Tutorial - Flipper was designed with extensibility in mind from the start to enable engineers to quickly build quality, easy-to-use tools for their own needs and applications. In addition to building plugins for the existing platforms, you can also extend the capabilities of Flipper to other platforms by conforming to the `FlipperClient` API. After this, you can make use of the existing desktop plugins by writing client plugins that conform to the same API. @@ -22,3 +22,42 @@ this tutorial: - **Desktop app**: This is the Electron-based application you run on your desktop. - **Mobile client**: This is the mobile app running most likely on a phone or other mobile device. It connects to the desktop app. + + + +## Scaffolding a new plugin + +To create your plugin and add it to Wilde / fb4a there are some steps to go through. That's why we made a simple scripts for it. + +Go to your terminal and simply run `scarf flipper-plugin`, this will setup all required files for you. + +On completion you'll have everything set up ready to start and running it on Flipper. Run `hg diff` to see the following: + +* **Desktop plugin files**: The UI code for your plugin. Everything starts in the `index.js` file +* **Native Flipper plugin files**: The Android / iOS code for your plugin +* **Integration with flagship apps**: Your plugin has already been added into Wilde and/or fb4a! + +### Gatekeeper + +Depending on the scaffolding choices, we've gated your new plugin behind a GK, so you can go ahead and ship it without premature exposure. You will have to create the gatekeeper, and add yourself to it so you can see your plugin. The GK name is defined in your plugins `package.json`. + +### Let's see something on screen + +Now that you have a good ground for your plugin there is nothing better than actually see something on screen. Make sure you build and run fb4a or wilde with your generated changes. + +You also need to compile and run the flipper desktop app, with your new plugin. + +To locally run Flipper just go to your terminal (please use non-atom terminal): + +``` +$ cd ~/fbsource/xplat/sonar/desktop +$ yarn install +$ yarn start +``` +This will kickoff a local build of Flipper that will spawn automatically for you once its ready. While you're working on your custom plugin you'll not be using the Flipper build pre-installed on your machine. + +As you keep tweaking and improving your desktop plugin, the only thing to do is to save your changes (on your `index.tsx` file) and it will automatically reload flipper with all changes applied for you. This makes it possible to see your changes automatically appear on screen without rebuilding Flipper every time. + +To start an IDE we recommend to run `code-fb ~/fbsource/xplat/sonar/` + + diff --git a/docs/tutorial/ios.mdx b/docs/tutorial/ios.mdx index fac45d455..9974de664 100644 --- a/docs/tutorial/ios.mdx +++ b/docs/tutorial/ios.mdx @@ -3,6 +3,7 @@ id: ios title: Building an iOS Plugin --- import useBaseUrl from '@docusaurus/useBaseUrl'; +import {FbInternalOnly} from 'internaldocs-fb-helpers'; iOS Tutorial App @@ -15,6 +16,12 @@ You can find the source code of the project [on GitHub](https://github.com/faceb ## Creating a Plugin + +
+[FB-Only] Depending the options selected during scaffolding (see intro), some of the following code might already have been generated by `scarf`. +
+ + On iOS, a Flipper plugin is a class that implements the [`FlipperPlugin`](https://github.com/facebook/flipper/blob/master/iOS/FlipperKit/FlipperPlugin.h) interface. diff --git a/docs/tutorial/js-publishing.mdx b/docs/tutorial/js-publishing.mdx index c7450ed02..60f3e335b 100644 --- a/docs/tutorial/js-publishing.mdx +++ b/docs/tutorial/js-publishing.mdx @@ -4,6 +4,16 @@ title: Publishing your Plugin sidebar_label: Publishing --- import useBaseUrl from '@docusaurus/useBaseUrl'; +import Link from '@docusaurus/Link'; +import {FbInternalOnly, OssOnly} from 'internaldocs-fb-helpers'; + + + +The process of releasing plugins is largely automated at Facebook, and described in detail here. + + + + Once you're happy with your plugin and want the world to see it, you can publish it to npm. Ensure that your plugin follows these @@ -64,3 +74,5 @@ This may be Maven Central, JCenter or GitHub Packages for Android, CocoaPods for iOS and npm or GitHub Packages for React Native. Make sure to leave setup instructions in the README of your npm package. + + diff --git a/docs/tutorial/js-setup.mdx b/docs/tutorial/js-setup.mdx index 67f302444..4cf16b968 100644 --- a/docs/tutorial/js-setup.mdx +++ b/docs/tutorial/js-setup.mdx @@ -4,6 +4,7 @@ title: Building a Desktop Plugin sidebar_label: Building a Desktop Plugin --- import useBaseUrl from '@docusaurus/useBaseUrl'; +import {FbInternalOnly, OssOnly} from 'internaldocs-fb-helpers'; Now that we have the native side covered, let's display the data we're sending on the desktop side. You can check out the full workflow of building Flipper desktop @@ -13,6 +14,12 @@ plugins here: https://fbflipper.com/docs/extending/js-setup. ## Dynamic Plugin loading + +[FB-Only] After scaffolding and starting Flipper from source, no further steps are needed to setup the desktop plugin. + + + + 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 @@ -84,3 +91,5 @@ For instance: To ensure there are no errors in the defined plugin, install packages (using `yarn install` or `npm install`) and execute script `lint` (`yarn lint` or `npm run lint`) which shows all the mismatches that should be fixed to make the plugin definition valid. 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. + + diff --git a/docs/tutorial/js-table.mdx b/docs/tutorial/js-table.mdx index 3f2457ba3..d8ae6e9e2 100644 --- a/docs/tutorial/js-table.mdx +++ b/docs/tutorial/js-table.mdx @@ -3,9 +3,16 @@ id: js-table title: Showing a table --- import useBaseUrl from '@docusaurus/useBaseUrl'; +import Link from '@docusaurus/Link'; Android Tutorial App +
+ +The APIs described on this page are currently being revised, if you are looking for a plugin that does more than displaying a table, we recommend to skip to the Custom Plugin page right away. +If you want to follow the steps on this page, **remove** `flipper-plugin` from the (peer)dependencies in the `package.json` of your scaffolded plugin. +
+ ## Building a Table We have found that one of the most useful things you can do to understand how your app works @@ -67,6 +74,8 @@ For this tutorial, however, we will just show the full object by using our `ManagedDataInspector` UI component: ```javascript +import {Panel, ManagedDataInspector} from 'flipper'; + function renderSidebar(row: Row) { return ( diff --git a/website/sidebars.js b/website/sidebars.js index b311eea05..cd2c15547 100644 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -119,7 +119,6 @@ module.exports = { }, { 'Plugin Development': [ - 'fb/create-new-plugin', 'fb/developmentworkflow', 'fb/TypeScript', 'fb/using-gatekeepers',