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
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
## 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.
The ID that is returned from your implementation needs to match the `name` defined in your JavaScript counterpart's `package.json`.
<!--DOCUSAURUS_CODE_TABS-->
<!--Android-->
<Tabs defaultValue="android" values={[{label: 'Android', value: 'android'}, { label: 'iOS', value: 'ios'}, { label: 'C++', value: 'cpp'}, { label: 'React Native (JS)', value: 'rn' }]}>
<TabItem value="android">
```java
public class MyFlipperPlugin implements FlipperPlugin {
private FlipperConnection mConnection;
@@ -37,7 +42,10 @@ public class MyFlipperPlugin implements FlipperPlugin {
}
}
```
<!--iOS-->
</TabItem>
<TabItem value="ios">
```objective-c
@interface MyFlipperPlugin : NSObject<FlipperPlugin>
@end
@@ -51,7 +59,10 @@ public class MyFlipperPlugin implements FlipperPlugin {
@end
```
<!--C++-->
</TabItem>
<TabItem value="cpp">
```cpp
class MyFlipperPlugin : public FlipperPlugin {
public:
@@ -61,7 +72,9 @@ public:
bool runInBackground() override;
};
```
<!--React Native JS-->
</TabItem>
<TabItem value="rn">
<div class="warning">
@@ -87,15 +100,17 @@ addPlugin({
}
})
```
<!--END_DOCUSAURUS_CODE_TABS-->
</TabItem>
</Tabs>
## 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.
<!--DOCUSAURUS_CODE_TABS-->
<!--Android-->
<Tabs defaultValue="android" values={[{label: 'Android', value: 'android'}, { label: 'iOS', value: 'ios'}, { label: 'C++', value: 'cpp'}, { label: 'React Native (JS)', value: 'rn' }]}>
<TabItem value="android">
```java
connection.receive("getData", new FlipperReceiver() {
@Override
@@ -107,7 +122,10 @@ connection.receive("getData", new FlipperReceiver() {
}
});
```
<!--iOS-->
</TabItem>
<TabItem value="ios">
```objective-c
@interface MyFlipperPlugin : NSObject<FlipperPlugin>
@end
@@ -129,7 +147,10 @@ connection.receive("getData", new FlipperReceiver() {
@end
```
<!--C++-->
</TabItem>
<TabItem value="cpp">
```cpp
void MyFlipperPlugin::didConnect(std::shared_ptr<FlipperConnection> conn) {
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
addPlugin({
getId() {
@@ -158,32 +182,44 @@ addPlugin({
// ...as-is
})
```
<!--END_DOCUSAURUS_CODE_TABS-->
</TabItem>
</Tabs>
## 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.
<!--DOCUSAURUS_CODE_TABS-->
<!--Android-->
<Tabs defaultValue="android" values={[{label: 'Android', value: 'android'}, { label: 'iOS', value: 'ios'}, { label: 'C++', value: 'cpp'}, { label: 'React Native (JS)', value: 'rn' }]}>
<TabItem value="android">
```java
connection.send("MyMessage",
new FlipperObject.Builder()
.put("message", "Hello")
.build()
```
<!--iOS-->
</TabItem>
<TabItem value="ios">
```objective-c
[connection send:@"getData" withParams:@{@"message":@"hello"}];
```
<!--C++-->
</TabItem>
<TabItem value="cpp">
```cpp
void MyFlipperPlugin::didConnect(std::shared_ptr<FlipperConnection> conn) {
dynamic message = folly::dynamic::object("message", "hello");
conn->send("getData", message);
}
```
<!--React Native JS-->
</TabItem>
<TabItem value="rn">
```javascript
addPlugin({
getId() {
@@ -196,7 +232,9 @@ addPlugin({
// ...as-is
})
```
<!--END_DOCUSAURUS_CODE_TABS-->
</TabItem>
</Tabs>
## Background Plugins

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

@@ -3,15 +3,18 @@ id: send-data
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.
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.
<Tabs defaultValue="android" values={[{label: 'Android', value: 'android'}, { label: 'iOS', value: 'ios'}, { label: 'C++', value: 'cpp'}]}>
<TabItem value="android">
<!--DOCUSAURUS_CODE_TABS-->
<!--Android-->
```java
final FlipperClient client = AndroidFlipperClient.getInstance(context);
if (client != null) {
@@ -19,13 +22,19 @@ if (client != null) {
plugin.sendData(myData);
}
```
<!--iOS-->
</TabItem>
<TabItem value="ios">
```objective-c
FlipperClient *client = [FlipperClient sharedClient];
MyFlipperPlugin *myPlugin = [client pluginWithIdentifier:@"MyFlipperPlugin"];
[myPlugin sendData:myData];
```
<!--C++-->
</TabItem>
<TabItem value="cpp">
```cpp
auto& client = FlipperClient::instance();
auto myPlugin = client.getPlugin<MyFlipperPlugin>("MyFlipperPlugin");
@@ -33,7 +42,8 @@ if (myPlugin) {
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.

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 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.
@@ -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
AppDelegate.
<!--DOCUSAURUS_CODE_TABS-->
<!--Objective-C-->
<Tabs defaultValue="ios" values={[{ label: 'iOS', value: 'ios'}, { label: 'Swift', value: 'swift'}]}>
<TabItem value="ios">
```objective-c
#import <FlipperKit/FlipperClient.h>
@@ -116,7 +117,8 @@ AppDelegate.
@end
```
<!--Swift-->
</TabItem>
<TabItem value="swift">
```swift
import UIKit
@@ -139,7 +141,8 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
}
```
<!--END_DOCUSAURUS_CODE_TABS-->
</TabItem>
</Tabs>
## 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 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.
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
- Crash Reporter
<!--DOCUSAURUS_CODE_TABS-->
<!--Objective-C-->
<Tabs defaultValue="ios" values={[{ label: 'iOS', value: 'ios'}, { label: 'Swift', value: 'swift'}]}>
<TabItem value="ios">
```objective-c
...
@@ -145,7 +146,8 @@ The code below enables the following integrations:
@end
```
<!--Swift-->
</TabItem>
<TabItem value="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.

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

@@ -4,6 +4,9 @@ title: Layout Inspector Setup
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.
## 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.
<!--DOCUSAURUS_CODE_TABS-->
<!--Objective-C-->
<Tabs defaultValue="ios" values={[{ label: 'iOS', value: 'ios'}, { label: 'Swift', value: 'swift'}]}>
<TabItem value="ios">
```objective-c
#import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h>
SKDescriptorMapper *mapper = [[SKDescriptorMapper alloc] initWithDefaults];
[client addPlugin:[[FlipperKitLayoutPlugin alloc] initWithRootNode:context.application withDescriptorMapper:mapper]];
```
<!--Swift-->
</TabItem>
<TabItem value="swift">
```swift
import FlipperKit
let layoutDescriptorMapper = SKDescriptorMapper(defaults: ())
client?.add(FlipperKitLayoutPlugin(rootNode: application, with: layoutDescriptorMapper!))
```
<!--END_DOCUSAURUS_CODE_TABS-->
</TabItem>
</Tabs>
### With ComponentKit Support
@@ -113,8 +122,10 @@ If you want to enable [ComponentKit support](https://github.com/facebook/compone
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.
<!--DOCUSAURUS_CODE_TABS-->
<!--Objective-C-->
<Tabs defaultValue="ios" values={[{ label: 'iOS', value: 'ios'}, { label: 'Swift', value: 'swift'}]}>
<TabItem value="ios">
```objective-c
#import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h>
#import <FlipperKitLayoutComponentKitSupport/FlipperKitLayoutComponentKitSupport.h>
@@ -124,7 +135,10 @@ SKDescriptorMapper *layoutDescriptorMapper = [[SKDescriptorMapper alloc] initWit
[client addPlugin: [[FlipperKitLayoutPlugin alloc] initWithRootNode: application
withDescriptorMapper: layoutDescriptorMapper]];
```
<!--Swift-->
</TabItem>
<TabItem value="swift">
```swift
import FlipperKit
@@ -133,4 +147,6 @@ FlipperKitLayoutComponentKitSupport.setUpWith(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
---
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
@@ -50,19 +53,25 @@ pod 'FlipperKit/SKIOSNetworkPlugin', '~>' + flipperkit_version
Initialise the plugin in the following way:
<!--DOCUSAURUS_CODE_TABS-->
<!--Objective-C-->
<Tabs defaultValue="ios" values={[{ label: 'iOS', value: 'ios'}, { label: 'Swift', value: 'swift'}]}>
<TabItem value="ios">
```objective-c
#import <FlipperKitNetworkPlugin/FlipperKitNetworkPlugin.h>
[[FlipperClient sharedClient] addPlugin: [[FlipperKitNetworkPlugin alloc] initWithNetworkAdapter:[SKIOSNetworkAdapter new]]];
```
<!--Swift-->
</TabItem>
<TabItem value="swift">
```swift
import FlipperKit
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
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
This plugin is available for both Android and iOS.
## Android
@@ -25,17 +28,23 @@ pod 'FlipperKit/FlipperKitUserDefaultsPlugin', '~>' + flipperkit_version
Initialize the plugin in the following way:
<!--DOCUSAURUS_CODE_TABS-->
<!--Objective-C-->
<Tabs defaultValue="ios" values={[{ label: 'iOS', value: 'ios'}, { label: 'Swift', value: 'swift'}]}>
<TabItem value="ios">
```objectivec
#import <FlipperKitUserDefaultsPlugin/FKUserDefaultsPlugin.h>
[client addPlugin:[[FKUserDefaultsPlugin alloc] initWithSuiteName:@"your_suitename"]];
```
<!--Swift-->
</TabItem>
<TabItem value="swift">
```swift
import FlipperKit
client?.add(FKUserDefaultsPlugin.init(suiteName: "your_suitename"))
```
<!--END_DOCUSAURUS_CODE_TABS-->
</TabItem>
</Tabs>