From 9fc85730badddc459da4386a3ea70e9f85868b98 Mon Sep 17 00:00:00 2001 From: Anton Nikolaev Date: Tue, 29 Jun 2021 13:00:18 -0700 Subject: [PATCH] Show plugin documentation in Flipper Reviewed By: passy Differential Revision: D29392524 fbshipit-source-id: 675de1fc070b1b8b22d0b27721c16dbd6f7076ef --- desktop/app/package.json | 1 + .../app/src/sandy-chrome/CenteredContainer.tsx | 18 ++++++++++++++++++ desktop/flipper-plugin/src/ui/theme.tsx | 1 + desktop/package.json | 1 + desktop/plugin-lib/src/PluginDetails.ts | 4 ++++ .../src/__tests__/getPluginDetails.node.ts | 9 +++++++++ desktop/plugin-lib/src/getPluginDetails.ts | 15 +++++++++++++++ desktop/scripts/build-plugin.ts | 8 ++++++++ desktop/scripts/start-dev-server.ts | 9 +++++++++ desktop/yarn.lock | 12 ++++++++++++ 10 files changed, 78 insertions(+) create mode 100644 desktop/app/src/sandy-chrome/CenteredContainer.tsx diff --git a/desktop/app/package.json b/desktop/app/package.json index ed9425b21..a8cbb18b7 100644 --- a/desktop/app/package.json +++ b/desktop/app/package.json @@ -54,6 +54,7 @@ "react-async": "^10.0.0", "react-debounce-render": "^7.0.0", "react-dom": "^17.0.1", + "react-electron-web-view": "^2.0.1", "react-element-to-jsx-string": "^14.3.1", "react-markdown": "^6.0.2", "react-player": "^2.9.0", diff --git a/desktop/app/src/sandy-chrome/CenteredContainer.tsx b/desktop/app/src/sandy-chrome/CenteredContainer.tsx new file mode 100644 index 000000000..e98f86a63 --- /dev/null +++ b/desktop/app/src/sandy-chrome/CenteredContainer.tsx @@ -0,0 +1,18 @@ +/** + * 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 + */ + +import {Layout, styled} from '../ui'; + +export const CenteredContainer = styled(Layout.Container)({ + width: '100%', + height: '100%', + flexGrow: 1, + alignItems: 'center', + justifyContent: 'center', +}); diff --git a/desktop/flipper-plugin/src/ui/theme.tsx b/desktop/flipper-plugin/src/ui/theme.tsx index f469d885d..af1e1bae1 100644 --- a/desktop/flipper-plugin/src/ui/theme.tsx +++ b/desktop/flipper-plugin/src/ui/theme.tsx @@ -41,6 +41,7 @@ export const theme = { huge: 24, } as const, fontSize: { + large: '16px', default: '14px', small: '12px', } as const, diff --git a/desktop/package.json b/desktop/package.json index 402062743..b5c9d2fc6 100644 --- a/desktop/package.json +++ b/desktop/package.json @@ -253,6 +253,7 @@ "start": "yarn dev-server --inspect=9229", "start:break": "yarn dev-server --inspect-brk=9229", "start:no-embedded-plugins": "yarn start --no-embedded-plugins", + "docs": "cd ../website && yarn start", "test": "cross-env TZ=Pacific/Pohnpei jest", "test:debug": "yarn build:tsc && cross-env TZ=Pacific/Pohnpei node --inspect node_modules/.bin/jest --runInBand", "tsc-plugins": "./ts-node scripts/tsc-plugins.ts", diff --git a/desktop/plugin-lib/src/PluginDetails.ts b/desktop/plugin-lib/src/PluginDetails.ts index 072788975..af76d1361 100644 --- a/desktop/plugin-lib/src/PluginDetails.ts +++ b/desktop/plugin-lib/src/PluginDetails.ts @@ -29,6 +29,10 @@ export interface PluginDetails { flipperSDKVersion?: string; pluginType?: PluginType; supportedDevices?: SupportedDevice[]; + publishedDocs?: { + overview?: boolean; + setup?: boolean; + }; } export interface SupportedDevice { diff --git a/desktop/plugin-lib/src/__tests__/getPluginDetails.node.ts b/desktop/plugin-lib/src/__tests__/getPluginDetails.node.ts index a79cd9454..5daad611a 100644 --- a/desktop/plugin-lib/src/__tests__/getPluginDetails.node.ts +++ b/desktop/plugin-lib/src/__tests__/getPluginDetails.node.ts @@ -94,6 +94,7 @@ test('getPluginDetailsV2', async () => { "main": "dist/bundle.js", "name": "flipper-plugin-test", "pluginType": undefined, + "publishedDocs": undefined, "source": "src/index.tsx", "specVersion": 2, "supportedDevices": undefined, @@ -135,6 +136,7 @@ test('id used as title if the latter omited', async () => { "main": "dist/bundle.js", "name": "flipper-plugin-test", "pluginType": undefined, + "publishedDocs": undefined, "source": "src/index.tsx", "specVersion": 2, "supportedDevices": undefined, @@ -175,6 +177,7 @@ test('name without "flipper-plugin-" prefix is used as title if the latter omite "main": "dist/bundle.js", "name": "flipper-plugin-test", "pluginType": undefined, + "publishedDocs": undefined, "source": "src/index.tsx", "specVersion": 2, "supportedDevices": undefined, @@ -218,6 +221,7 @@ test('flipper-plugin-version is parsed', async () => { "main": "dist/bundle.js", "name": "flipper-plugin-test", "pluginType": undefined, + "publishedDocs": undefined, "source": "src/index.tsx", "specVersion": 2, "supportedDevices": undefined, @@ -265,6 +269,7 @@ test('plugin type and supported devices parsed', async () => { "main": "dist/bundle.js", "name": "flipper-plugin-test", "pluginType": "device", + "publishedDocs": undefined, "source": "src/index.tsx", "specVersion": 2, "supportedDevices": Array [ @@ -348,6 +353,10 @@ test('can merge two package.json files', async () => { "main": "dist/bundle.js", "name": "flipper-plugin-test", "pluginType": "device", + "publishedDocs": Object { + "overview": true, + "setup": true, + }, "source": "src/index.tsx", "specVersion": 2, "supportedDevices": Array [ diff --git a/desktop/plugin-lib/src/getPluginDetails.ts b/desktop/plugin-lib/src/getPluginDetails.ts index 7e7a6840c..d15e89648 100644 --- a/desktop/plugin-lib/src/getPluginDetails.ts +++ b/desktop/plugin-lib/src/getPluginDetails.ts @@ -63,6 +63,20 @@ export async function getInstalledPluginDetails( ): Promise { packageJson = packageJson ?? (await readPluginPackageJson(dir)); const pluginDetails = getPluginDetails(packageJson); + const [hasOverviewDocs, hasSetupDocs] = await Promise.all([ + pluginDetails.publishedDocs?.overview === undefined + ? fs.pathExists(path.join(dir, 'docs', 'overview.mdx')) + : Promise.resolve(pluginDetails.publishedDocs.overview), + pluginDetails.publishedDocs?.setup === undefined + ? fs.pathExists(path.join(dir, 'docs', 'setup.mdx')) + : Promise.resolve(pluginDetails.publishedDocs.setup), + ]); + if (hasOverviewDocs || hasSetupDocs) { + pluginDetails.publishedDocs = { + overview: hasOverviewDocs, + setup: hasSetupDocs, + }; + } const entry = pluginDetails.specVersion === 1 ? path.resolve( @@ -136,6 +150,7 @@ function getPluginDetailsV2(packageJson: any): PluginDetails { pluginType: packageJson?.pluginType, supportedDevices: packageJson?.supportedDevices, engines: packageJson.engines, + publishedDocs: packageJson.publishedDocs, }; } diff --git a/desktop/scripts/build-plugin.ts b/desktop/scripts/build-plugin.ts index 020fbcced..8a60a1cef 100644 --- a/desktop/scripts/build-plugin.ts +++ b/desktop/scripts/build-plugin.ts @@ -107,6 +107,14 @@ async function buildPlugin() { packageJson.engines.flipper = minFlipperVersion; } packageJson.version = argv.version; + if (await fs.pathExists(path.join(pluginDir, 'docs', 'overview.mdx'))) { + packageJson.publishedDocs = packageJson.publishedDocs ?? {}; + packageJson.publishedDocs.overview = true; + } + if (await fs.pathExists(path.join(pluginDir, 'docs', 'setup.mdx'))) { + packageJson.publishedDocs = packageJson.publishedDocs ?? {}; + packageJson.publishedDocs.setup = true; + } await fs.writeJson(packageJsonPath, packageJson, {spaces: 2}); const packCmd = `yarn pack --cwd "${pluginDir}" --filename ${outputFile}`; execSync(packCmd, {cwd: rootDir, stdio: 'inherit'}); diff --git a/desktop/scripts/start-dev-server.ts b/desktop/scripts/start-dev-server.ts index 18c2ac2e9..2afd3f7d6 100644 --- a/desktop/scripts/start-dev-server.ts +++ b/desktop/scripts/start-dev-server.ts @@ -100,6 +100,11 @@ const argv = yargs 'Will force using the given value as Flipper version, to be able to test logic which is version-dependent. Setting env var "FLIPPER_FORCE_VERSION" is equivalent.', type: 'string', }, + 'local-docs': { + describe: + '[FB-internal only] Use local instance of documentation website for showing embedded plugin docs.', + type: 'boolean', + }, }) .version('DEV') .help() @@ -180,6 +185,10 @@ if (argv['force-version']) { process.env.FLIPPER_FORCE_VERSION = argv['force-version']; } +if (argv['local-docs']) { + process.env.FLIPPER_DOCS_BASE_URL = 'http://localhost:3001/docs'; +} + function looksLikeDevServer(): boolean { const hn = hostname(); if (/^devvm.*\.facebook\.com$/.test(hn)) { diff --git a/desktop/yarn.lock b/desktop/yarn.lock index c9e35ac7c..d662416b3 100644 --- a/desktop/yarn.lock +++ b/desktop/yarn.lock @@ -9490,6 +9490,11 @@ lodash._reinterpolate@^3.0.0: resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d" integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0= +lodash.camelcase@^4.3.0: + version "4.3.0" + resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6" + integrity sha1-soqmKIorn8ZRA1x3EfZathkDMaY= + lodash.clonedeep@^4.5.0: version "4.5.0" resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef" @@ -11609,6 +11614,13 @@ react-dom@^17.0.1: object-assign "^4.1.1" scheduler "^0.20.2" +react-electron-web-view@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/react-electron-web-view/-/react-electron-web-view-2.0.1.tgz#984b7bbbeb77e35bcca921dc50120fc8f2b0f27d" + integrity sha1-mEt7u+t341vMqSHcUBIPyPKw8n0= + dependencies: + lodash.camelcase "^4.3.0" + react-element-to-jsx-string@^14.3.1, react-element-to-jsx-string@^14.3.2: version "14.3.2" resolved "https://registry.yarnpkg.com/react-element-to-jsx-string/-/react-element-to-jsx-string-14.3.2.tgz#c0000ed54d1f8b4371731b669613f2d4e0f63d5c"