jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Auto-generate plugin docs

Browse Source 
Summary:
This diff changes the way on how plugin documentation is produced. Instead of keeping plugin documentation together with other docs, we will now keep it together with plugin code. There are multiple advantages of such solution:
1. We are generating docs for every plugin in a standartised way so all of them looks similar. We can also use plugin metadata for generation as well (e.g. take title, icon, oncall name etc from package.json).
2. Standartised plugin docs make it possible to build docs both for websites (public and internal) and for embedding into Flipper.
3. It will hopefully incentivise authors to write docs as they will be a part of plugin "package".
4. We can scaffold documentation template using scarf to further incentivise filling it.

Reviewed By: jknoxville

Differential Revision: D29378053

fbshipit-source-id: 66ea48dc9ba225fabfb256ae6a10f8c81eef6f5f
This commit is contained in:
Anton Nikolaev
2021-06-29 13:00:18 -07:00
committed by Facebook GitHub Bot
parent 116f6eb5ba
commit e4fb2907fd
17 changed files with 352 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/features/index.mdx
View File

@@ -4,7 +4,7 @@ title: Features
---
import useBaseUrl from '@docusaurus/useBaseUrl';
Flipper itself only provides the architectural platform. What makes it useful are the plugins built on top of it: [Logs](logs-plugin), [Layout Inspector](layout-plugin) and [Network Inspector](network-plugin) are all plugins. Plugins can be built very specific to your business logic and the use-cases you have in your app. We are shipping Flipper with a couple of built-in all-purpose plugins, but we encourage you to build your own. Each plugin needs to be enabled individually.
Flipper itself only provides the architectural platform. What makes it useful are the plugins built on top of it: [Logs](logs-plugin), [Layout Inspector](layout-plugin) and [Network Inspector](plugins/network) are all plugins. Plugins can be built very specific to your business logic and the use-cases you have in your app. We are shipping Flipper with a couple of built-in all-purpose plugins, but we encourage you to build your own. Each plugin needs to be enabled individually.
<img alt="Plugins" src={useBaseUrl('img/plugins.png')} />

13
docs/features/network-plugin.mdx
View File

@@ -1,13 +0,0 @@
---
id: network-plugin
title: Network
---
import useBaseUrl from '@docusaurus/useBaseUrl';
→ [See setup instructions for the Network plugin](../setup/network-plugin.mdx)
Use the Network inspector to inspect outgoing network traffic in your apps. You can easily browse all requests being made and their responses. The plugin also supports gzipped responses.
<img alt="Network plugin" src={useBaseUrl("img/network.png")} />
All request sent from the device will be listed in the plugin. Click on a request to see details like headers and body. You can filter the table for domain, method or status by clicking on the corresponding value in the table.

2
docs/getting-started/android-native.mdx
View File

@@ -110,7 +110,7 @@ dependencies {
## Enabling plugins
Finally, you need to add plugins to your Flipper client. Above, we have only added the Layout Inspector plugin to get you started. See <Link to={useBaseUrl("/docs/setup/network-plugin")}>Network Plugin</Link> and <Link to={useBaseUrl("/docs/setup/layout-plugin")}>Layout Inspector Plugin</Link> for information on how to add them, and also enable Litho or ComponentKit support. You can check the sample apps in the [GitHub repo](https://github.com/facebook/flipper) for examples of integrating other plugins.
Finally, you need to add plugins to your Flipper client. Above, we have only added the Layout Inspector plugin to get you started. See <Link to={useBaseUrl("/docs/setup/plugins/network")}>Network Plugin</Link> and <Link to={useBaseUrl("/docs/setup/layout-plugin")}>Layout Inspector Plugin</Link> for information on how to add them, and also enable Litho or ComponentKit support. You can check the sample apps in the [GitHub repo](https://github.com/facebook/flipper) for examples of integrating other plugins.
## Having trouble?

2
docs/getting-started/ios-native.mdx
View File

@@ -147,7 +147,7 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
## Enabling plugins
Finally, you need to add plugins to your Flipper client. Above, we have only added the Layout Inspector plugin to get you started. See <Link to={useBaseUrl("/docs/setup/network-plugin")}>Network Plugin</Link> and <Link to={useBaseUrl("/docs/setup/layout-plugin")}>Layout Inspector Plugin</Link> for information on how to add them, and also enable Litho or ComponentKit support. You can check the sample apps in the [GitHub repo](https://github.com/facebook/flipper) for examples of integrating other plugins.
Finally, you need to add plugins to your Flipper client. Above, we have only added the Layout Inspector plugin to get you started. See <Link to={useBaseUrl("/docs/setup/plugins/network")}>Network Plugin</Link> and <Link to={useBaseUrl("/docs/setup/layout-plugin")}>Layout Inspector Plugin</Link> for information on how to add them, and also enable Litho or ComponentKit support. You can check the sample apps in the [GitHub repo](https://github.com/facebook/flipper) for examples of integrating other plugins.
## Having trouble?

102
docs/setup/network-plugin.mdx
View File

@@ -1,102 +0,0 @@
---
id: network-plugin
title: Network Setup
sidebar_label: Network
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
To use the network plugin, you need to add the plugin to your Flipper client instance.
## Android
The network plugin is shipped as a separate Maven artifact:
```groovy
dependencies {
debugImplementation 'com.facebook.flipper:flipper-network-plugin:0.95.0'
}
```
Once added to your dependencies, you can instantiate the plugin and add it to
the client:
```java
import com.facebook.flipper.plugins.network.NetworkFlipperPlugin;
NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
new NetworkingModule.CustomClientBuilder() {
@Override
public void apply(OkHttpClient.Builder builder) {
builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
}
});
client.addPlugin(networkFlipperPlugin);
```
### OkHttp Integration
If you are using the popular OkHttp library, you can use the Interceptors system to automatically hook into your existing stack.
```java
import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor;
new OkHttpClient.Builder()
.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin))
.build();
```
As interceptors can modify the request and response, add the Flipper interceptor after all others to get an accurate view of the network traffic.
### Protobuf / Retrofit Integration
If you are using Retrofit with Protobuf request or response types, you can setup automatic decoding so that the network inspector can display a human readable payload. First you must add the separate dependency:
```groovy
dependencies {
debugImplementation 'com.facebook.flipper:flipper-retrofit2-protobuf-plugin:0.91.2'
}
```
Then call `SendProtobufToFlipperFromRetrofit` for each service class.
```kotlin
import com.facebook.flipper.plugins.retrofit2protobuf.SendProtobufToFlipperFromRetrofit
SendProtobufToFlipperFromRetrofit("https://baseurl.com/", MyApiService::class.java)
```
## iOS
To enable network inspection, add the following pod to your Podfile:
```ruby
pod 'FlipperKit/SKIOSNetworkPlugin', '~>' + flipperkit_version
```
Initialise the plugin in the following way:
<Tabs defaultValue="ios" values={[{ label: 'iOS', value: 'ios'}, { label: 'Swift', value: 'swift'}]}>
<TabItem value="ios">
```objc
#import <FlipperKitNetworkPlugin/FlipperKitNetworkPlugin.h>
[[FlipperClient sharedClient] addPlugin: [[FlipperKitNetworkPlugin alloc] initWithNetworkAdapter:[SKIOSNetworkAdapter new]]];
```
</TabItem>
<TabItem value="swift">
```swift
import FlipperKit
client?.add(FlipperKitNetworkPlugin(networkAdapter: SKIOSNetworkAdapter()))
```
</TabItem>
</Tabs>