feat(astexplorer): open files using the transform menu

The File > Open Transform Menu has been removed, instead select the type
of Transform you are using from the Transform Menu within AST Explorer
and a File Dialog will be presented.

Closes #2
Closes #3

src/constants.js

@@ -9,31 +9,30 @@ const ICON_PATH = path.resolve(ROOT, './assets/icons/png/64x64.png');
 const WEBSITE_PATH = path.resolve(ROOT, './vendor/astexplorer/out/index.html');
 
 const DEFAULT_SOURCE = `
-// This is the "Source" Panel. Code which you want to explore the AST of and/or
-// run through a "Transform" (Babel Plugin, ESLint Rule, Codemod etc) goes here.
+// This is the "Source" Panel.
+//
+// Code which you want to explore the AST of and/or run through a "Transform"
+// (Babel Plugin, ESLint Rule, Codemod etc) goes here.
 //
 // The AST of this code is displayed in the panel on the top-right and your
 // Transform goes in the panel below in the bottom-left.
 //
-// You can either paste some source code here, or follow these steps to import
-// a file from disk:
-//
-// 1. Open File > Import Source
-// 2. Browse to a Script file
-// 3. Edit your Source in VS Code, Sublime Text etc
-// 4. Changes will be reloaded automatically
+// Paste some source code here to view its AST.
 
 const reverseMe = 'Hello World';
 `.trimLeft();
 
 const DEFAULT_TRANSFORM = `
-// This is the "Transform" Panel. The result of running this transform over the
-// Source Panel is shown in the panel on the bottom-right.
+// This is the "Transform" Panel.
+//
+// The result of running this transform over the Source Panel is shown in the
+// panel on the bottom-right.
 //
-// 1. Open File > Import Transform
-// 2. Browse to your Babel Plugin, ESLint Rule, Codemod etc
-// 3. Edit your Transform Script in your IDE
-// 4. Changes will be reloaded here automatically
+// 1. Using the "Transform" Menu above, choose your Transform type, such as
+//    Babel Plugin, ESLint Rule, Codemod etc.
+// 2. Use the Open File Dialog to locate your Transform Script.
+// 3. Edit your Transform Script in your IDE.
+// 4. Changes will be reloaded here automatically.
 //
 // Feel free to organise your transform using ES modules and they will be
 // bundled together automatically.

src/main/file-dialog.js

@@ -1,13 +1,28 @@
 const { dialog } = require('electron');
 
-export const openTransform = () =>
+const transformNamesById = {
+  'babel-plugin-macros': 'Babel Macro',
+  babel: 'Babel 5.x Plugin',
+  babelv6: 'Babel 6.x Plugin',
+  babelv7: 'Babel 7.x Plugin',
+  'eslint-v1': 'ESLint 1.x Plugin',
+  'eslint-v2': 'ESLint 2.x Plugin',
+  'eslint-v3': 'ESLint 3.x Plugin',
+  'eslint-v4': 'ESLint 4.x Plugin',
+  jscodeshift: 'JSCodeshift Codemod',
+  prettier: 'Prettier Config',
+  tslint: 'TSLint Rule',
+};
+
+export const openTransform = (id) =>
   new Promise((done) => {
+    const transformName = transformNamesById[id] || 'Transform';
     dialog.showOpenDialog(
       {
-        buttonLabel: 'Open Transform',
+        buttonLabel: `Open ${transformName}`,
         filters: [{ extensions: ['js', 'ts'], name: 'JavaScript' }],
+        message: `Open ${transformName}`,
         properties: ['openFile'],
-        title: 'Transform',
       },
       (files) =>
         done(Array.isArray(files) && files.length === 1 ? files[0] : ''),

src/main/index.js

@@ -1,11 +1,12 @@
 const electron = require('electron');
 
-const { mainEvents } = require('../event-types');
+const { browserEvents, mainEvents } = require('../event-types');
 const appMenu = require('./app-menu');
 const appWindow = require('./app-window');
+const fileDialog = require('./file-dialog');
 const rollupWatcher = require('./rollup-watcher');
 
-const { app } = electron;
+const { app, ipcMain } = electron;
 
 app.setName('AST Explorer');
 
@@ -14,6 +15,16 @@ app.on('ready', async () => {
     appWindow.sendEvent(mainEvents.SET_TRANSFORM_CODE, sourceCode);
   });
 
+  ipcMain.on(browserEvents.REDUX_ACTION_DISPATCHED, async (event, action) => {
+    if (action && action.type === 'SELECT_TRANSFORMER') {
+      const filePath = await fileDialog.openTransform(action.transformer.id);
+      if (!filePath) return;
+      const sourceCode = await transformWatcher.setFilePath(filePath);
+      appWindow.sendEvent(mainEvents.SET_TRANSFORM_CODE, sourceCode);
+      transformWatcher.start();
+    }
+  });
+
   await appMenu.create();
   await appWindow.create();