diff --git a/desktop/.eslintrc.js b/desktop/.eslintrc.js index 1505d60bf..d38cd3a66 100644 --- a/desktop/.eslintrc.js +++ b/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', diff --git a/desktop/app/package.json b/desktop/app/package.json index e9595e363..858a70328 100644 --- a/desktop/app/package.json +++ b/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", diff --git a/desktop/app/src/dispatcher/plugins.tsx b/desktop/app/src/dispatcher/plugins.tsx index 1c0fb407b..e6e573b6e 100644 --- a/desktop/app/src/dispatcher/plugins.tsx +++ b/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 = []; const disabledPlugins: Array = []; diff --git a/desktop/babel-transformer/src/replace-flipper-requires.ts b/desktop/babel-transformer/src/replace-flipper-requires.ts index d5d94f823..a20b91c27 100644 --- a/desktop/babel-transformer/src/replace-flipper-requires.ts +++ b/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', diff --git a/desktop/flipper-plugin/README.md b/desktop/flipper-plugin/README.md new file mode 100644 index 000000000..63efc8cd2 --- /dev/null +++ b/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) diff --git a/desktop/flipper-plugin/package.json b/desktop/flipper-plugin/package.json new file mode 100644 index 000000000..4d1e75af4 --- /dev/null +++ b/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" +} diff --git a/desktop/flipper-plugin/src/index.ts b/desktop/flipper-plugin/src/index.ts new file mode 100644 index 000000000..02e501ce7 --- /dev/null +++ b/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 '; +} diff --git a/desktop/flipper-plugin/tsconfig.json b/desktop/flipper-plugin/tsconfig.json new file mode 100644 index 000000000..ecd4c16fb --- /dev/null +++ b/desktop/flipper-plugin/tsconfig.json @@ -0,0 +1,14 @@ +{ + "extends": "../tsconfig.base.json", + "compilerOptions": { + "outDir": "lib", + "rootDir": "src" + }, + "include": [ + "src" + ], + "exclude": [ + "node_modules", + "**/__tests__/*" + ] +} diff --git a/desktop/flipper-plugin/yarn.lock b/desktop/flipper-plugin/yarn.lock new file mode 100644 index 000000000..9362a6558 --- /dev/null +++ b/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== diff --git a/desktop/jest.config.js b/desktop/jest.config.js index 4c665249b..636c0c078 100644 --- a/desktop/jest.config.js +++ b/desktop/jest.config.js @@ -18,6 +18,7 @@ module.exports = { '^flipper-doctor$': '/doctor/src', '^flipper-pkg$': '/pkg/src', '^flipper-pkg-lib$': '/pkg-lib/src', + '^flipper-plugin$': '/flipper-plugin/src', }, clearMocks: true, coverageReporters: ['json-summary', 'lcov', 'html'], diff --git a/desktop/package.json b/desktop/package.json index 25680b6cf..c10d37ad9 100644 --- a/desktop/package.json +++ b/desktop/package.json @@ -22,6 +22,7 @@ "headless-tests", "pkg", "pkg-lib", + "flipper-plugin", "static", "plugins/*", "e2e", diff --git a/desktop/scripts/start-dev-server.ts b/desktop/scripts/start-dev-server.ts index d8dd173fa..629404f1c 100644 --- a/desktop/scripts/start-dev-server.ts +++ b/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, () => { diff --git a/desktop/tsconfig.base.json b/desktop/tsconfig.base.json index 55025f742..acafe847c 100644 --- a/desktop/tsconfig.base.json +++ b/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-*": ["./*/src"], - "*": ["./*", "./types/*"] + "flipper": [ + "./app/src" + ], + "flipper-plugin": [ + "./flipper-plugin/src" + ], + "flipper-*": [ + "./*/src" + ], + "*": [ + "./*", + "./types/*" + ] } } }