Option for "yarn start" and "yarn build" scripts to pre-install default plugin packages instead of bundling them

Summary:
Sorry for long diff! I can try to split it if necessary, but many changes here are 1-1 replacements / renames.

**Preambule**
Currently we bundle default plugins into the Flipper main bundle. This helps us to reduce bundle size, because of plugin dependencies re-use. E.g. if multiple plugins use "lodash" when they are bundled together, only one copy of "lodash" added. When they are bundled separately, the same dependency might be added to each of them. However as we're not going to include most of plugins into Flipper distributive anymore and going to rely on Marketplace instead, this bundling doesn't provide significant size benefits anymore. In addition to that, bundling makes it impossible to differentiate whether thrown errors are originated from Flipper core or one of its plugins.

Why don't we remove plugin bundling at all? Because for "dev mode" it actually quite useful. It makes dev build start much faster and also enables using of Fast Refresh for plugin development (fast refresh won't work for plugins loaded from disk).

**Changes**
This diff introduces new option "no-bundled-plugins" for "yarn start" and "yarn build" commands. For now, by default, we will continue bundling default plugins into the Flipper main bundle, but if this option provided then we will build each default plugin separately and include their packages into the Flipper distributive as "pre-installed" to be able to load them from disk even without access to Marketplace.

For "yarn start", we're adding symlinks to plugin folders in "static/defaultPlugins" and then they are loaded by Flipper. For "yarn build" we are dereferencing these symlinks to include physical files of plugins into folder "defaultPlugins" of the produced distributive. Folder "defaultPlugins" is excluded from asar, because loading of plugins from asar archive might introduce some unexpected issues depending on their implementation.

Reviewed By: mweststrate

Differential Revision: D28431838

fbshipit-source-id: f7757e9f5ba9183ed918d70252de3ce0e823177d

desktop/plugin-lib/src/getPluginDetails.ts

@@ -16,6 +16,20 @@ import {
 } from './PluginDetails';
 import {pluginCacheDir} from './pluginPaths';
 
+export function isPluginJson(packageJson: any): boolean {
+  return packageJson?.keywords?.includes('flipper-plugin');
+}
+
+export async function isPluginDir(dir: string): Promise<boolean> {
+  const packageJsonPath = path.join(dir, 'package.json');
+  const json = (await fs.pathExists(packageJsonPath))
+    ? await fs.readJson(path.join(dir, 'package.json'), {
+        throws: false,
+      })
+    : undefined;
+  return isPluginJson(json);
+}
+
 export function getPluginDetails(packageJson: any): PluginDetails {
   const specVersion =
     packageJson.$schema &&

desktop/plugin-lib/src/getSourcePlugins.ts

@@ -14,7 +14,7 @@ import {getPluginSourceFolders} from './pluginPaths';
 import pmap from 'p-map';
 import pfilter from 'p-filter';
 import {satisfies} from 'semver';
-import {getInstalledPluginDetails} from './getPluginDetails';
+import {getInstalledPluginDetails, isPluginJson} from './getPluginDetails';
 import {InstalledPluginDetails} from './PluginDetails';
 
 const flipperVersion = require('../package.json').version;
@@ -75,8 +75,8 @@ async function entryPointForPluginFolder(
         } catch (e) {
           console.error(
             `Could not load plugin from "${dir}", because package.json is invalid.`,
+            e,
           );
-          console.error(e);
           return null;
         }
       }),
@@ -84,10 +84,10 @@ async function entryPointForPluginFolder(
     .then((packages) => packages.filter(notNull))
     .then((packages) => packages.filter(({manifest}) => !manifest.workspaces))
     .then((packages) =>
-      packages.filter(({manifest: {keywords, name}}) => {
-        if (!keywords || !keywords.includes('flipper-plugin')) {
+      packages.filter(({manifest}) => {
+        if (!isPluginJson(manifest)) {
           console.log(
-            `Skipping package "${name}" as its "keywords" field does not contain tag "flipper-plugin"`,
+            `Skipping package "${manifest.name}" as its "keywords" field does not contain tag "flipper-plugin"`,
           );
           return false;
         }
@@ -110,8 +110,8 @@ async function entryPointForPluginFolder(
         } catch (e) {
           console.error(
             `Could not load plugin from "${dir}", because package.json is invalid.`,
+            e,
           );
-          console.error(e);
           return null;
         }
       }),

desktop/plugin-lib/src/pluginInstaller.ts

@@ -16,7 +16,7 @@ import decompressTargz from 'decompress-targz';
 import decompressUnzip from 'decompress-unzip';
 import tmp from 'tmp';
 import {InstalledPluginDetails} from './PluginDetails';
-import {getInstalledPluginDetails} from './getPluginDetails';
+import {getInstalledPluginDetails, isPluginDir} from './getPluginDetails';
 import {
   getPluginVersionInstallationDir,
   getPluginDirNameFromPackageName,
@@ -267,3 +267,28 @@ async function getInstalledPluginVersionDirs(): Promise<InstalledPluginVersionDi
       ),
     );
 }
+
+export async function getAllInstalledPluginsInDir(
+  dir: string,
+  recursive: boolean = false,
+): Promise<InstalledPluginDetails[]> {
+  const plugins: InstalledPluginDetails[] = [];
+  if (!((await fs.pathExists(dir)) && (await fs.stat(dir)).isDirectory())) {
+    console.log('defaultPlugins dir not found');
+    return plugins;
+  }
+  const items = await fs.readdir(dir);
+  await pmap(items, async (item) => {
+    const fullPath = path.join(dir, item);
+    if (await isPluginDir(fullPath)) {
+      try {
+        plugins.push(await getInstalledPluginDetails(fullPath));
+      } catch (err) {
+        console.error(`Failed to load plugin from ${fullPath}`);
+      }
+    } else if (recursive) {
+      plugins.push(...(await getAllInstalledPluginsInDir(fullPath, recursive)));
+    }
+  });
+  return plugins;
+}

desktop/plugin-lib/src/pluginPaths.ts

@@ -28,9 +28,9 @@ export const pluginCacheDir = path.join(flipperDataDir, 'plugins');
 
 export async function getPluginSourceFolders(): Promise<string[]> {
   const pluginFolders: string[] = [];
-  if (process.env.FLIPPER_NO_EMBEDDED_PLUGINS) {
+  if (process.env.FLIPPER_NO_DEFAULT_PLUGINS) {
     console.log(
-      '🥫  Skipping embedded plugins because "--no-embedded-plugins" flag provided',
+      '🥫  Skipping default plugins because "--no-default-plugins" flag provided',
     );
     return pluginFolders;
   }