cc438e60ad
Summary: This updates the docs of Flipper to use Sandy, rather than `FlipperPlugin` class. Restructured the docs a bit as a result. Reviewed By: passy Differential Revision: D24991285 fbshipit-source-id: 66d5760c25cf9cf3983515433dfd64348d51db3d
50 lines
1.2 KiB
Plaintext
50 lines
1.2 KiB
Plaintext
import React from 'react';
|
|
import {PluginClient, usePlugin, createState, useValue, Layout} from 'flipper-plugin';
|
|
|
|
type Data = {
|
|
id: string;
|
|
message?: string;
|
|
};
|
|
|
|
type Events = {
|
|
newData: Data;
|
|
};
|
|
|
|
// Read more: https://fbflipper.com/docs/tutorial/js-custom#creating-a-first-plugin
|
|
// API: https://fbflipper.com/docs/extending/flipper-plugin#pluginclient
|
|
export function plugin(client: PluginClient<Events, {}>) {
|
|
const data = createState<Record<string, Data>>({}, {persist: 'data'});
|
|
|
|
client.onMessage('newData', (newData) => {
|
|
data.update((draft) => {
|
|
draft[newData.id] = newData;
|
|
});
|
|
});
|
|
|
|
client.addMenuEntry({
|
|
action: 'clear',
|
|
handler: async () => {
|
|
data.set({});
|
|
},
|
|
});
|
|
|
|
return {data};
|
|
}
|
|
|
|
// Read more: https://fbflipper.com/docs/tutorial/js-custom#building-a-user-interface-for-the-plugin
|
|
// API: https://fbflipper.com/docs/extending/flipper-plugin#react-hooks
|
|
export function Component() {
|
|
const instance = usePlugin(plugin);
|
|
const data = useValue(instance.data);
|
|
|
|
return (
|
|
<Layout.ScrollContainer>
|
|
{Object.entries(data).map(([id, d]) => (
|
|
<pre key={id} data-testid={id}>
|
|
{JSON.stringify(d)}
|
|
</pre>
|
|
))}
|
|
</Layout.ScrollContainer>
|
|
);
|
|
}
|