Initialized flipper-plugin library

Summary: Set up an initial library which can (should) be used by plugins in the future.

Reviewed By: jknoxville

Differential Revision: D22019554

fbshipit-source-id: 502b14b34b2c9c117cea377ab6ebbf150e6faee9

desktop/.eslintrc.js

@@ -14,6 +14,7 @@ const pattern = /^\*\r?\n[\S\s]*Facebook[\S\s]* \* @format\r?\n/;
 
 const builtInModules = [
   'flipper',
+  'flipper-plugin',
   'react',
   'react-dom',
   'electron',

desktop/app/package.json

@@ -23,6 +23,7 @@
     "deep-equal": "^2.0.1",
     "emotion": "^10.0.23",
     "expand-tilde": "^2.0.2",
+    "flipper-plugin": "0.49.0",
     "flipper-doctor": "0.49.0",
     "flipper-plugin-lib": "0.49.0",
     "fs-extra": "^8.0.1",

desktop/app/src/dispatcher/plugins.tsx

@@ -34,6 +34,7 @@ import {PluginDetails} from 'flipper-plugin-lib';
 import {addNotification} from '../reducers/notifications';
 import styled from '@emotion/styled';
 import {tryCatchReportPluginFailures, reportUsage} from '../utils/metrics';
+import * as FlipperPluginSDK from 'flipper-plugin';
 
 // eslint-disable-next-line import/no-unresolved
 import getPluginIndex from '../utils/getDefaultPluginsIndex';
@@ -49,6 +50,7 @@ export default (store: Store, logger: Logger) => {
   globalObject.ReactDOM = ReactDOM;
   globalObject.Flipper = Flipper;
   globalObject.adbkit = adbkit;
+  globalObject.FlipperPlugin = FlipperPluginSDK;
 
   const gatekeepedPlugins: Array<PluginDetails> = [];
   const disabledPlugins: Array<PluginDetails> = [];

desktop/babel-transformer/src/replace-flipper-requires.ts

@@ -17,6 +17,7 @@ import {NodePath} from '@babel/traverse';
 
 const requireReplacements: any = {
   flipper: 'global.Flipper',
+  'flipper-plugin': 'global.FlipperPlugin',
   react: 'global.React',
   'react-dom': 'global.ReactDOM',
   adbkit: 'global.adbkit',

desktop/flipper-plugin/README.md

@@ -0,0 +1,16 @@
+# flipper-plugin
+
+`flipper-plugin` is the dependency used by all modern Flipper plugins (project "Tommy").
+
+For background: https://fb.quip.com/YHOGAnaPqAVJ
+
+`flipper-plugin` is to be used as `dev` and `peer` dependency of all Flipper plugins. It provides:
+
+1. (TODO) Standard API's to interact with Flipper, such as the client connection.
+2. (TODO) Standard components to organize the UI
+3. (TODO) Testing utilities
+
+API's provided by `flipper-plugin` are documented at fbflipper.com (TODO).
+
+There should normally be no need to install `flipper-plugin` as dependency.
+Rather, plugins should be scaffolded using `npx flipper-pkg init` (TODO) as documented [here](https://fbflipper.com/docs/tutorial/js-setup)

desktop/flipper-plugin/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "flipper-plugin",
+  "version": "0.49.0",
+  "description": "Flipper Desktop plugin SDK and components",
+  "repository": "facebook/flipper",
+  "main": "lib/index.js",
+  "flipperBundlerEntry": "src",
+  "types": "lib/index.d.ts",
+  "license": "MIT",
+  "bugs": "https://github.com/facebook/flipper/issues",
+  "dependencies": {},
+  "devDependencies": {
+    "typescript": "^3.9.2"
+  },
+  "scripts": {
+    "reset": "rimraf lib *.tsbuildinfo",
+    "build": "tsc -b",
+    "prepack": "yarn reset && yarn build"
+  },
+  "files": [
+    "lib/**/*"
+  ],
+  "homepage": "https://github.com/facebook/flipper",
+  "keywords": [
+    "Flipper"
+  ],
+  "author": "Facebook, Inc"
+}

desktop/flipper-plugin/src/index.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+export function hello() {
+  return 'universe  ';
+}

desktop/flipper-plugin/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "lib",
+    "rootDir": "src"
+  },
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "node_modules",
+    "**/__tests__/*"
+  ]
+}

desktop/flipper-plugin/yarn.lock

@@ -0,0 +1,8 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+typescript@^3.9.2:
+  version "3.9.5"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.5.tgz#586f0dba300cde8be52dd1ac4f7e1009c1b13f36"
+  integrity sha512-hSAifV3k+i6lEoCJ2k6R2Z/rp/H3+8sdmcn5NrS3/3kE7+RyZXm9aqvxWqjEXHAd8b0pShatpcdMTvEdvAJltQ==

desktop/jest.config.js

@@ -18,6 +18,7 @@ module.exports = {
     '^flipper-doctor$': '<rootDir>/doctor/src',
     '^flipper-pkg$': '<rootDir>/pkg/src',
     '^flipper-pkg-lib$': '<rootDir>/pkg-lib/src',
+    '^flipper-plugin$': '<rootDir>/flipper-plugin/src',
   },
   clearMocks: true,
   coverageReporters: ['json-summary', 'lcov', 'html'],

desktop/package.json

@@ -22,6 +22,7 @@
       "headless-tests",
       "pkg",
       "pkg-lib",
+      "flipper-plugin",
       "static",
       "plugins/*",
       "e2e",

desktop/scripts/start-dev-server.ts

@@ -199,7 +199,7 @@ async function startWatchChanges(io: socketIo.Server) {
     const watchman = new Watchman(path.resolve(__dirname, '..'));
     await watchman.initialize();
     await Promise.all(
-      ['app', 'pkg', 'doctor'].map((dir) =>
+      ['app', 'pkg', 'doctor', 'flipper-plugin'].map((dir) =>
         watchman.startWatchFiles(
           dir,
           () => {

desktop/tsconfig.base.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "module": "commonjs",
-    "lib": ["es7", "dom", "es2017"],
+    "lib": [
+      "es7",
+      "dom",
+      "es2017"
+    ],
     "esModuleInterop": true,
     "target": "ES2017",
     "removeComments": true,
@@ -18,9 +22,19 @@
     "allowJs": true,
     "rootDir": ".",
     "paths": {
-      "flipper": ["./app/src"],
+      "flipper": [
-      "flipper-*": ["./*/src"],
+        "./app/src"
-      "*": ["./*", "./types/*"]
+      ],
+      "flipper-plugin": [
+        "./flipper-plugin/src"
+      ],
+      "flipper-*": [
+        "./*/src"
+      ],
+      "*": [
+        "./*",
+        "./types/*"
+      ]
     }
   }
 }