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

Fix all docusaurus tabs

Browse Source 
Summary: Seems that all tabs were broken after migration to Docusaurus 2.

Reviewed By: jknoxville

Differential Revision: D25586214

fbshipit-source-id: 31a8da4e13fbac01911a03f1f4bab0d2837c9c9a
This commit is contained in:
Michel Weststrate
2020-12-16 07:25:03 -08:00
committed by Facebook GitHub Bot
parent 32a75ecb58
commit 58cbea0017
7 changed files with 137 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
docs/extending/create-plugin.mdx
View File

@@ -3,15 +3,20 @@ id: create-plugin
title: Client Plugin API title: Client Plugin API
--- ---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
## FlipperPlugin ## FlipperPlugin
The plugin implementation that runs on the (mobile) application side of things is called the _client plugin_ in Flipper terminology.
To build a client plugin, implement the `FlipperPlugin` interface. To build a client plugin, implement the `FlipperPlugin` interface.
The ID that is returned from your implementation needs to match the `name` defined in your JavaScript counterpart's `package.json`. The ID that is returned from your implementation needs to match the `name` defined in your JavaScript counterpart's `package.json`.
<!--DOCUSAURUS_CODE_TABS--> <Tabs defaultValue="android" values={[{label: 'Android', value: 'android'}, { label: 'iOS', value: 'ios'}, { label: 'C++', value: 'cpp'}, { label: 'React Native (JS)', value: 'rn' }]}>
<!--Android--> <TabItem value="android">
```java ```java
public class MyFlipperPlugin implements FlipperPlugin { public class MyFlipperPlugin implements FlipperPlugin {
private FlipperConnection mConnection; private FlipperConnection mConnection;
@@ -37,7 +42,10 @@ public class MyFlipperPlugin implements FlipperPlugin {
} }
} }
``` ```
<!--iOS-->
</TabItem>
<TabItem value="ios">
```objective-c ```objective-c
@interface MyFlipperPlugin : NSObject<FlipperPlugin> @interface MyFlipperPlugin : NSObject<FlipperPlugin>
@end @end
@@ -51,7 +59,10 @@ public class MyFlipperPlugin implements FlipperPlugin {
@end @end
``` ```
<!--C++-->
</TabItem>
<TabItem value="cpp">
```cpp ```cpp
class MyFlipperPlugin : public FlipperPlugin { class MyFlipperPlugin : public FlipperPlugin {
public: public:
@@ -61,7 +72,9 @@ public:
bool runInBackground() override; bool runInBackground() override;
}; };
``` ```
<!--React Native JS-->
</TabItem>
<TabItem value="rn">
<div class="warning"> <div class="warning">
@@ -87,15 +100,17 @@ addPlugin({
} }
}) })
``` ```
<!--END_DOCUSAURUS_CODE_TABS--> </TabItem>
</Tabs>
## Using FlipperConnection ## Using FlipperConnection
`onConnect` will be called when your plugin becomes active. This will provide a `FlipperConnection` allowing you to register receivers for desktop method calls and respond with data. `onConnect` will be called when your plugin becomes active. This will provide a `FlipperConnection` allowing you to register receivers for desktop method calls and respond with data.
<!--DOCUSAURUS_CODE_TABS--> <Tabs defaultValue="android" values={[{label: 'Android', value: 'android'}, { label: 'iOS', value: 'ios'}, { label: 'C++', value: 'cpp'}, { label: 'React Native (JS)', value: 'rn' }]}>
<!--Android--> <TabItem value="android">
```java ```java
connection.receive("getData", new FlipperReceiver() { connection.receive("getData", new FlipperReceiver() {
@Override @Override
@@ -107,7 +122,10 @@ connection.receive("getData", new FlipperReceiver() {
} }
}); });
``` ```
<!--iOS-->
</TabItem>
<TabItem value="ios">
```objective-c ```objective-c
@interface MyFlipperPlugin : NSObject<FlipperPlugin> @interface MyFlipperPlugin : NSObject<FlipperPlugin>
@end @end
@@ -129,7 +147,10 @@ connection.receive("getData", new FlipperReceiver() {
@end @end
``` ```
<!--C++-->
</TabItem>
<TabItem value="cpp">
```cpp ```cpp
void MyFlipperPlugin::didConnect(std::shared_ptr<FlipperConnection> conn) { void MyFlipperPlugin::didConnect(std::shared_ptr<FlipperConnection> conn) {
conn->receive("getData", [](const folly::dynamic &params, conn->receive("getData", [](const folly::dynamic &params,
@@ -139,7 +160,10 @@ void MyFlipperPlugin::didConnect(std::shared_ptr<FlipperConnection> conn) {
}); });
} }
``` ```
<!--React Native JS-->
</TabItem>
<TabItem value="rn">
```javascript ```javascript
addPlugin({ addPlugin({
getId() { getId() {
@@ -158,32 +182,44 @@ addPlugin({
// ...as-is // ...as-is
}) })
``` ```
<!--END_DOCUSAURUS_CODE_TABS-->
</TabItem>
</Tabs>
## Push data to the desktop ## Push data to the desktop
You don't have to wait for the desktop to request data though, you can also push data directly to the desktop. If the JS plugin subscribes to the same method, it will receive the data. You don't have to wait for the desktop to request data though, you can also push data directly to the desktop. If the JS plugin subscribes to the same method, it will receive the data.
<!--DOCUSAURUS_CODE_TABS--> <Tabs defaultValue="android" values={[{label: 'Android', value: 'android'}, { label: 'iOS', value: 'ios'}, { label: 'C++', value: 'cpp'}, { label: 'React Native (JS)', value: 'rn' }]}>
<!--Android--> <TabItem value="android">
```java ```java
connection.send("MyMessage", connection.send("MyMessage",
new FlipperObject.Builder() new FlipperObject.Builder()
.put("message", "Hello") .put("message", "Hello")
.build() .build()
``` ```
<!--iOS-->
</TabItem>
<TabItem value="ios">
```objective-c ```objective-c
[connection send:@"getData" withParams:@{@"message":@"hello"}]; [connection send:@"getData" withParams:@{@"message":@"hello"}];
``` ```
<!--C++-->
</TabItem>
<TabItem value="cpp">
```cpp ```cpp
void MyFlipperPlugin::didConnect(std::shared_ptr<FlipperConnection> conn) { void MyFlipperPlugin::didConnect(std::shared_ptr<FlipperConnection> conn) {
dynamic message = folly::dynamic::object("message", "hello"); dynamic message = folly::dynamic::object("message", "hello");
conn->send("getData", message); conn->send("getData", message);
} }
``` ```
<!--React Native JS-->
</TabItem>
<TabItem value="rn">
```javascript ```javascript
addPlugin({ addPlugin({
getId() { getId() {
@@ -196,7 +232,9 @@ addPlugin({
// ...as-is // ...as-is
}) })
``` ```
<!--END_DOCUSAURUS_CODE_TABS-->
</TabItem>
</Tabs>
## Background Plugins ## Background Plugins

20
docs/extending/send-data.mdx
View File

@@ -3,15 +3,18 @@ id: send-data
title: Providing Data to Plugins title: Providing Data to Plugins
--- ---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
It is often useful to get an instance of a Flipper plugin to send data to it. Flipper makes this simple with built-in support. It is often useful to get an instance of a Flipper plugin to send data to it. Flipper makes this simple with built-in support.
Plugins should be treated as singleton instances as there can only be one `FlipperClient` and each `FlipperClient` can only have one instance of a certain plugin. The Flipper API makes this simple by offering a way to get the current client and query it for plugins. Plugins should be treated as singleton instances as there can only be one `FlipperClient` and each `FlipperClient` can only have one instance of a certain plugin. The Flipper API makes this simple by offering a way to get the current client and query it for plugins.
Plugins are identified by the string that their identifier method returns, in this example, "MyFlipperPlugin". Note that null checks may be required as plugins may not be initialized, for example in production builds. Plugins are identified by the string that their identifier method returns, in this example, "MyFlipperPlugin". Note that null checks may be required as plugins may not be initialized, for example in production builds.
<Tabs defaultValue="android" values={[{label: 'Android', value: 'android'}, { label: 'iOS', value: 'ios'}, { label: 'C++', value: 'cpp'}]}>
<TabItem value="android">
<!--DOCUSAURUS_CODE_TABS-->
<!--Android-->
```java ```java
final FlipperClient client = AndroidFlipperClient.getInstance(context); final FlipperClient client = AndroidFlipperClient.getInstance(context);
if (client != null) { if (client != null) {
@@ -19,13 +22,19 @@ if (client != null) {
plugin.sendData(myData); plugin.sendData(myData);
} }
``` ```
<!--iOS-->
</TabItem>
<TabItem value="ios">
```objective-c ```objective-c
FlipperClient *client = [FlipperClient sharedClient]; FlipperClient *client = [FlipperClient sharedClient];
MyFlipperPlugin *myPlugin = [client pluginWithIdentifier:@"MyFlipperPlugin"]; MyFlipperPlugin *myPlugin = [client pluginWithIdentifier:@"MyFlipperPlugin"];
[myPlugin sendData:myData]; [myPlugin sendData:myData];
``` ```
<!--C++-->
</TabItem>
<TabItem value="cpp">
```cpp ```cpp
auto& client = FlipperClient::instance(); auto& client = FlipperClient::instance();
auto myPlugin = client.getPlugin<MyFlipperPlugin>("MyFlipperPlugin"); auto myPlugin = client.getPlugin<MyFlipperPlugin>("MyFlipperPlugin");
@@ -33,7 +42,8 @@ if (myPlugin) {
myPlugin->sendData(myData); myPlugin->sendData(myData);
} }
``` ```
<!--END_DOCUSAURUS_CODE_TABS--> </TabItem>
</Tabs>
Here, `sendData` is an example of a method that might be implemented by the Flipper plugin. Here, `sendData` is an example of a method that might be implemented by the Flipper plugin.

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

@@ -5,6 +5,8 @@ sidebar_label: Adding Flipper to iOS apps
--- ---
import useBaseUrl from '@docusaurus/useBaseUrl'; import useBaseUrl from '@docusaurus/useBaseUrl';
import Link from '@docusaurus/Link'; import Link from '@docusaurus/Link';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
We support both Swift and Objective-C for Flipper with CocoaPods as build and distribution mechanism. We support both Swift and Objective-C for Flipper with CocoaPods as build and distribution mechanism.
@@ -86,9 +88,8 @@ This is done to overcome a bug with Xcode 11 which fails to compile swift code w
Install the dependencies by running `pod install`. You can now import and initialize Flipper in your Install the dependencies by running `pod install`. You can now import and initialize Flipper in your
AppDelegate. AppDelegate.
<!--DOCUSAURUS_CODE_TABS--> <Tabs defaultValue="ios" values={[{ label: 'iOS', value: 'ios'}, { label: 'Swift', value: 'swift'}]}>
<TabItem value="ios">
<!--Objective-C-->
```objective-c ```objective-c
#import <FlipperKit/FlipperClient.h> #import <FlipperKit/FlipperClient.h>
@@ -116,7 +117,8 @@ AppDelegate.
@end @end
``` ```
<!--Swift--> </TabItem>
<TabItem value="swift">
```swift ```swift
import UIKit import UIKit
@@ -139,7 +141,8 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
} }
``` ```
<!--END_DOCUSAURUS_CODE_TABS--> </TabItem>
</Tabs>
## Enabling plugins ## Enabling plugins

13
docs/getting-started/react-native-ios.mdx
View File

@@ -5,6 +5,8 @@ sidebar_label: React Native for iOS
--- ---
import useBaseUrl from '@docusaurus/useBaseUrl'; import useBaseUrl from '@docusaurus/useBaseUrl';
import Link from '@docusaurus/Link'; import Link from '@docusaurus/Link';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
These instructions are aimed at people manually adding Flipper to a React Native 0.62+ app. These instructions are aimed at people manually adding Flipper to a React Native 0.62+ app.
This should only be necessary if you have an existing app that cannot be upgraded with the This should only be necessary if you have an existing app that cannot be upgraded with the
@@ -102,9 +104,8 @@ The code below enables the following integrations:
- Shared Preferences - Shared Preferences
- Crash Reporter - Crash Reporter
<!--DOCUSAURUS_CODE_TABS--> <Tabs defaultValue="ios" values={[{ label: 'iOS', value: 'ios'}, { label: 'Swift', value: 'swift'}]}>
<TabItem value="ios">
<!--Objective-C-->
```objective-c ```objective-c
... ...
@@ -145,7 +146,8 @@ The code below enables the following integrations:
@end @end
``` ```
<!--Swift--> </TabItem>
<TabItem value="swift">
```swift ```swift
... ...
@@ -185,7 +187,8 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
} }
``` ```
<!--END_DOCUSAURUS_CODE_TABS--> </TabItem>
</Tabs>
Lastly, open the Flipper desktop app, and run `yarn ios` in your terminal. Lastly, open the Flipper desktop app, and run `yarn ios` in your terminal.

32
docs/setup/layout-plugin.mdx
View File

@@ -4,6 +4,9 @@ title: Layout Inspector Setup
sidebar_label: Layout Inspector sidebar_label: Layout Inspector
--- ---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
To use the layout inspector plugin, you need to add the plugin to your Flipper client instance. To use the layout inspector plugin, you need to add the plugin to your Flipper client instance.
## Android ## Android
@@ -88,22 +91,28 @@ pod 'FlipperKit/FlipperKitLayoutPlugin', '~>' + flipperkit_version
Once you have added the pod, initialise the plugin and add it to the `FlipperClient` as follows. Once you have added the pod, initialise the plugin and add it to the `FlipperClient` as follows.
<!--DOCUSAURUS_CODE_TABS--> <Tabs defaultValue="ios" values={[{ label: 'iOS', value: 'ios'}, { label: 'Swift', value: 'swift'}]}>
<!--Objective-C--> <TabItem value="ios">
```objective-c ```objective-c
#import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h> #import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h>
SKDescriptorMapper *mapper = [[SKDescriptorMapper alloc] initWithDefaults]; SKDescriptorMapper *mapper = [[SKDescriptorMapper alloc] initWithDefaults];
[client addPlugin:[[FlipperKitLayoutPlugin alloc] initWithRootNode:context.application withDescriptorMapper:mapper]]; [client addPlugin:[[FlipperKitLayoutPlugin alloc] initWithRootNode:context.application withDescriptorMapper:mapper]];
``` ```
<!--Swift-->
</TabItem>
<TabItem value="swift">
```swift ```swift
import FlipperKit import FlipperKit
let layoutDescriptorMapper = SKDescriptorMapper(defaults: ()) let layoutDescriptorMapper = SKDescriptorMapper(defaults: ())
client?.add(FlipperKitLayoutPlugin(rootNode: application, with: layoutDescriptorMapper!)) client?.add(FlipperKitLayoutPlugin(rootNode: application, with: layoutDescriptorMapper!))
``` ```
<!--END_DOCUSAURUS_CODE_TABS-->
</TabItem>
</Tabs>
### With ComponentKit Support ### With ComponentKit Support
@@ -113,8 +122,10 @@ If you want to enable [ComponentKit support](https://github.com/facebook/compone
pod 'FlipperKit/FlipperKitLayoutComponentKitSupport', '~>' + flipperkit_version pod 'FlipperKit/FlipperKitLayoutComponentKitSupport', '~>' + flipperkit_version
``` ```
Once you have added the pod you will then need to augment the descriptor with Componentkit-specific settings as shown below. Once you have added the pod you will then need to augment the descriptor with Componentkit-specific settings as shown below.
<!--DOCUSAURUS_CODE_TABS-->
<!--Objective-C--> <Tabs defaultValue="ios" values={[{ label: 'iOS', value: 'ios'}, { label: 'Swift', value: 'swift'}]}>
<TabItem value="ios">
```objective-c ```objective-c
#import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h> #import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h>
#import <FlipperKitLayoutComponentKitSupport/FlipperKitLayoutComponentKitSupport.h> #import <FlipperKitLayoutComponentKitSupport/FlipperKitLayoutComponentKitSupport.h>
@@ -124,7 +135,10 @@ SKDescriptorMapper *layoutDescriptorMapper = [[SKDescriptorMapper alloc] initWit
[client addPlugin: [[FlipperKitLayoutPlugin alloc] initWithRootNode: application [client addPlugin: [[FlipperKitLayoutPlugin alloc] initWithRootNode: application
withDescriptorMapper: layoutDescriptorMapper]]; withDescriptorMapper: layoutDescriptorMapper]];
``` ```
<!--Swift-->
</TabItem>
<TabItem value="swift">
```swift ```swift
import FlipperKit import FlipperKit
@@ -133,4 +147,6 @@ FlipperKitLayoutComponentKitSupport.setUpWith(layoutDescriptorMapper)
client?.add(FlipperKitLayoutPlugin(rootNode: application, with: layoutDescriptorMapper!)) client?.add(FlipperKitLayoutPlugin(rootNode: application, with: layoutDescriptorMapper!))
``` ```
<!--END_DOCUSAURUS_CODE_TABS-->
</TabItem>
</Tabs>

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

@@ -4,6 +4,9 @@ title: Network Setup
sidebar_label: Network 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. To use the network plugin, you need to add the plugin to your Flipper client instance.
## Android ## Android
@@ -50,19 +53,25 @@ pod 'FlipperKit/SKIOSNetworkPlugin', '~>' + flipperkit_version
Initialise the plugin in the following way: Initialise the plugin in the following way:
<!--DOCUSAURUS_CODE_TABS--> <Tabs defaultValue="ios" values={[{ label: 'iOS', value: 'ios'}, { label: 'Swift', value: 'swift'}]}>
<!--Objective-C--> <TabItem value="ios">
```objective-c ```objective-c
#import <FlipperKitNetworkPlugin/FlipperKitNetworkPlugin.h> #import <FlipperKitNetworkPlugin/FlipperKitNetworkPlugin.h>
[[FlipperClient sharedClient] addPlugin: [[FlipperKitNetworkPlugin alloc] initWithNetworkAdapter:[SKIOSNetworkAdapter new]]]; [[FlipperClient sharedClient] addPlugin: [[FlipperKitNetworkPlugin alloc] initWithNetworkAdapter:[SKIOSNetworkAdapter new]]];
``` ```
<!--Swift-->
</TabItem>
<TabItem value="swift">
```swift ```swift
import FlipperKit import FlipperKit
client?.add(FlipperKitNetworkPlugin(networkAdapter: SKIOSNetworkAdapter())) client?.add(FlipperKitNetworkPlugin(networkAdapter: SKIOSNetworkAdapter()))
``` ```
<!--END_DOCUSAURUS_CODE_TABS-->
</TabItem>
</Tabs>

17
docs/setup/shared-preferences-plugin.mdx
View File

@@ -4,6 +4,9 @@ title: Shared Preferences Setup
sidebar_label: Shared Preferences sidebar_label: Shared Preferences
--- ---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
This plugin is available for both Android and iOS. This plugin is available for both Android and iOS.
## Android ## Android
@@ -25,17 +28,23 @@ pod 'FlipperKit/FlipperKitUserDefaultsPlugin', '~>' + flipperkit_version
Initialize the plugin in the following way: Initialize the plugin in the following way:
<!--DOCUSAURUS_CODE_TABS--> <Tabs defaultValue="ios" values={[{ label: 'iOS', value: 'ios'}, { label: 'Swift', value: 'swift'}]}>
<!--Objective-C--> <TabItem value="ios">
```objectivec ```objectivec
#import <FlipperKitUserDefaultsPlugin/FKUserDefaultsPlugin.h> #import <FlipperKitUserDefaultsPlugin/FKUserDefaultsPlugin.h>
[client addPlugin:[[FKUserDefaultsPlugin alloc] initWithSuiteName:@"your_suitename"]]; [client addPlugin:[[FKUserDefaultsPlugin alloc] initWithSuiteName:@"your_suitename"]];
``` ```
<!--Swift-->
</TabItem>
<TabItem value="swift">
```swift ```swift
import FlipperKit import FlipperKit
client?.add(FKUserDefaultsPlugin.init(suiteName: "your_suitename")) client?.add(FKUserDefaultsPlugin.init(suiteName: "your_suitename"))
``` ```
<!--END_DOCUSAURUS_CODE_TABS-->
</TabItem>
</Tabs>