Show plugin (name and version) loaded (vercel#1826)

* Print plugin name and version in devtools
* Add plugins informations in About dialog

Author: chabou

app/index.js

@@ -405,8 +405,9 @@ app.on('ready', () => installDevExtensions(isDev).then(() => {
     const menu = plugins.decorateMenu(
       AppMenu(createWindow, () => {
         plugins.updatePlugins({force: true});
-      })
-    );
+      },
+      plugins.getLoadedPluginVersions
+    ));
 
     // If we're on Mac make a Dock Menu
     if (process.platform === 'darwin') {

app/menus/menu.js

@@ -1,4 +1,7 @@
+const {app, dialog} = require('electron');
+
 const {getKeymaps} = require('../config');
+const {icon} = require('../config/paths');
 
 // menus
 const viewMenu = require('./menus/view');
@@ -9,16 +12,32 @@ const windowMenu = require('./menus/window');
 const helpMenu = require('./menus/help');
 const darwinMenu = require('./menus/darwin');
 
-module.exports = (createWindow, updatePlugins) => {
+const appName = app.getName();
+const appVersion = app.getVersion();
+
+module.exports = (createWindow, updatePlugins, getLoadedPluginVersions) => {
   const commands = getKeymaps().commands;
+  const showAbout = () => {
+    const loadedPlugins = getLoadedPluginVersions();
+    const pluginList = loadedPlugins.length === 0 ?
+      'none' :
+      loadedPlugins.map(plugin => `\n  ${plugin.name} (${plugin.version})`);
+    dialog.showMessageBox({
+      title: `About ${appName}`,
+      message: `${appName} ${appVersion}`,
+      detail: `Plugins: ${pluginList}\n\nCreated by Guillermo Rauch\nCopyright © 2017 Zeit, Inc.`,
+      buttons: [],
+      icon
+    });
+  };
   const menu = [
-    ...(process.platform === 'darwin' ? [darwinMenu(commands)] : []),
+    ...(process.platform === 'darwin' ? [darwinMenu(commands, showAbout)] : []),
     shellMenu(commands, createWindow),
     editMenu(commands),
     viewMenu(commands),
     pluginsMenu(commands, updatePlugins),
     windowMenu(commands),
-    helpMenu(commands)
+    helpMenu(commands, showAbout)
   ];
 
   return menu;

app/menus/menus/darwin.js

@@ -3,12 +3,15 @@
 const {app} = require('electron');
 const {openConfig} = require('../../config');
 
-module.exports = function (commands) {
+module.exports = function (commands, showAbout) {
   return {
     label: `${app.getName()}`,
     submenu: [
       {
-        role: 'about'
+        label: 'About Hyper',
+        click() {
+          showAbout();
+        }
       },
       {
         type: 'separator'

app/menus/menus/help.js

@@ -1,8 +1,7 @@
 const os = require('os');
-const {app, shell, dialog} = require('electron');
-const {icon} = require('../../config/paths');
+const {app, shell} = require('electron');
 
-module.exports = function () {
+module.exports = function (commands, showAbout) {
   const submenu = [
     {
       label: `${app.getName()} Website`,
@@ -31,13 +30,7 @@ module.exports = function () {
       {
         role: 'about',
         click() {
-          dialog.showMessageBox({
-            title: `About ${app.getName()}`,
-            message: `${app.getName()} ${app.getVersion()}`,
-            detail: 'Created by Guillermo Rauch',
-            icon,
-            buttons: []
-          });
+          showAbout();
         }
       }
     );

app/plugins.js

@@ -161,6 +161,10 @@ function clearCache() {
 
 exports.updatePlugins = updatePlugins;
 
+exports.getLoadedPluginVersions = function () {
+  return modules.map(mod => ({name: mod._name, version: mod._version}));
+};
+
 // we schedule the initial plugins update
 // a bit after the user launches the terminal
 // to prevent slowness
@@ -309,6 +313,13 @@ function requirePlugins() {
 
       // populate the name for internal errors here
       mod._name = basename(path);
+      try {
+        // eslint-disable-next-line import/no-dynamic-require
+        mod._version = require(resolve(path, 'package.json')).version;
+      } catch (err) {
+        console.warn(`No package.json found in ${path}`);
+      }
+      console.log(`Plugin ${mod._name} (${mod._version}) loaded.`);
 
       return mod;
     } catch (err) {

lib/utils/plugins.js

@@ -73,7 +73,19 @@ const clearModulesCache = () => {
   }
 };
 
-const getPluginName = path => window.require('path').basename(path);
+const pathModule = window.require('path');
+
+const getPluginName = path => pathModule.basename(path);
+
+const getPluginVersion = path => {
+  let version = null;
+  try {
+    version = window.require(pathModule.resolve(path, 'package.json')).version;
+  } catch (err) {
+    console.warn(`No package.json found in ${path}`);
+  }
+  return version;
+};
 
 const loadModules = () => {
   console.log('(re)loading renderer plugins');
@@ -112,6 +124,7 @@ const loadModules = () => {
     .map(path => {
       let mod;
       const pluginName = getPluginName(path);
+      const pluginVersion = getPluginVersion(path);
 
       // window.require allows us to ensure this doesn't get
       // in the way of our build
@@ -126,6 +139,7 @@ const loadModules = () => {
       for (const i in mod) {
         if ({}.hasOwnProperty.call(mod, i)) {
           mod[i]._pluginName = pluginName;
+          mod[i]._pluginVersion = pluginVersion;
         }
       }
 
@@ -209,6 +223,8 @@ const loadModules = () => {
         mod.onRendererWindow(window);
       }
 
+      console.log(`Plugin ${pluginName} (${pluginVersion}) loaded.`);
+
       return mod;
     })
     .filter(mod => Boolean(mod));