Show plugin documentation in Flipper

Reviewed By: passy

Differential Revision: D29392524

fbshipit-source-id: 675de1fc070b1b8b22d0b27721c16dbd6f7076ef

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",

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',
+});

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,

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",

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 {

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 [

desktop/plugin-lib/src/getPluginDetails.ts

@@ -63,6 +63,20 @@ export async function getInstalledPluginDetails(
 ): Promise<InstalledPluginDetails> {
   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,
   };
 }
 

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'});

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)) {

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"