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.