Device plugin management (4/n): Allow choosing "device" plugin type in "flipper-pkg init"

Summary:
Added option to bootstrap device plugin in "flipper-pkg".

Changelog: "flipper-pkg init" can now be used to bootstrap device plugins

Reviewed By: mweststrate

Differential Revision: D26389429

fbshipit-source-id: 90773011bd50289004cd747111e1787402840922

desktop/pkg/templates/device-plugin/src/__tests__/test.spec.tsx.template

@@ -0,0 +1,68 @@
+import {TestUtils} from 'flipper-plugin';
+import * as Plugin from '..';
+
+// Read more: https://fbflipper.com/docs/tutorial/js-custom#testing-plugin-logic
+// API: https://fbflipper.com/docs/tutorial/js-custom#testing-plugin-logic
+test('It can store data', () => {
+  const {instance, sendLogEntry} = TestUtils.startDevicePlugin(Plugin);
+
+  expect(instance.data.get()).toEqual([]);
+
+  sendLogEntry({
+    date: new Date(1611854112859),
+    message: 'test1',
+    pid: 0,
+    tag: 'test',
+    tid: 1,
+    type: 'error',
+    app: 'X',
+  });
+  sendLogEntry({
+    date: new Date(1611854117859),
+    message: 'test2',
+    pid: 2,
+    tag: 'test',
+    tid: 3,
+    type: 'warn',
+    app: 'Y',
+  });
+
+  expect(instance.data.get()).toMatchInlineSnapshot(`
+    Array [
+      "test1",
+      "test2",
+    ]
+  `);
+});
+
+// Read more: https://fbflipper.com/docs/tutorial/js-custom#testing-plugin-logic
+// API: https://fbflipper.com/docs/tutorial/js-custom#testing-plugin-logic
+test('It can render data', async () => {
+  const {instance, renderer, sendLogEntry} = TestUtils.renderDevicePlugin(
+    Plugin,
+  );
+
+  expect(instance.data.get()).toEqual([]);
+
+  sendLogEntry({
+    date: new Date(1611854112859),
+    message: 'test1',
+    pid: 0,
+    tag: 'test',
+    tid: 1,
+    type: 'error',
+    app: 'X',
+  });
+  sendLogEntry({
+    date: new Date(1611854117859),
+    message: 'test2',
+    pid: 2,
+    tag: 'test',
+    tid: 3,
+    type: 'warn',
+    app: 'Y',
+  });
+
+  expect(await renderer.findByTestId('0')).not.toBeNull();
+  expect(await renderer.findByTestId('1')).toMatchInlineSnapshot();
+});

desktop/pkg/templates/device-plugin/src/index.tsx.template

@@ -0,0 +1,46 @@
+import React from 'react';
+import {
+  DevicePluginClient,
+  usePlugin,
+  createState,
+  useValue,
+  Layout,
+} from 'flipper-plugin';
+
+// Read more: https://fbflipper.com/docs/tutorial/js-custom#creating-a-first-plugin
+// API: https://fbflipper.com/docs/extending/flipper-plugin#pluginclient
+export function devicePlugin(client: DevicePluginClient) {
+  const data = createState<string[]>([]);
+
+  client.device.onLogEntry((entry) => {
+    data.update((draft) => {
+      draft.push(entry.message);
+    });
+  });
+
+  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(devicePlugin);
+  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>
+  );
+}