refactor: avoid hardcoding filenames (#621)

No functional changes. This is a minor refactor to avoid hardcoding
filenames or editorIds and to avoid hardcoding their lists. Instead,
generally iterate through the FILENAME_KEYS objects.

I started this cleanup while we were prototypeing a new 'test.js'
editor. It's less relevant since we discarded that idea, but it's still
preferable to use symbolic names instead of magic strings.

src/main/files.ts

@@ -3,13 +3,7 @@ import * as fs from 'fs-extra';
 import * as path from 'path';
 
 import { IpcEvents } from '../ipc-events';
-import {
-  INDEX_HTML_NAME,
-  MAIN_JS_NAME,
-  PACKAGE_NAME,
-  PRELOAD_JS_NAME,
-  RENDERER_JS_NAME,
-} from '../shared-constants';
+import { FILENAME_KEYS } from '../shared-constants';
 import { ipcMainManager } from './ipc';
 
 /**
@@ -69,13 +63,9 @@ export async function showSaveDialog(event?: IpcEvents, as?: string) {
  * @returns {Promise<boolean>}
  */
 async function ensureSaveTargetEmpty(filePath: string): Promise<boolean> {
-  const targetPaths = [
-    path.join(filePath, INDEX_HTML_NAME),
-    path.join(filePath, RENDERER_JS_NAME),
-    path.join(filePath, MAIN_JS_NAME),
-    path.join(filePath, PACKAGE_NAME),
-    path.join(filePath, PRELOAD_JS_NAME),
-  ];
+  const targetPaths = Object.keys(FILENAME_KEYS).map((filename) =>
+    path.join(filePath, filename),
+  );
 
   let noFilesOrOverwriteGranted = true;
 

src/renderer/components/commands-action-button.tsx

@@ -10,6 +10,7 @@ import {
 } from '@blueprintjs/core';
 import { observer } from 'mobx-react';
 import * as React from 'react';
+import * as path from 'path';
 
 import { when } from 'mobx';
 import {
@@ -19,13 +20,7 @@ import {
   GistActionType,
 } from '../../interfaces';
 import { IpcEvents } from '../../ipc-events';
-import {
-  INDEX_HTML_NAME,
-  MAIN_JS_NAME,
-  PRELOAD_JS_NAME,
-  RENDERER_JS_NAME,
-  STYLES_CSS_NAME,
-} from '../../shared-constants';
+import { FILENAME_KEYS } from '../../shared-constants';
 import { getOctokit } from '../../utils/octokit';
 import { EMPTY_EDITOR_CONTENT } from '../constants';
 import { ipcRendererManager } from '../ipc';
@@ -434,22 +429,13 @@ export class GistActionButton extends React.Component<
   };
 
   private gistFilesList = (values: EditorValues) => {
-    return {
-      [INDEX_HTML_NAME]: {
-        content: values.html || EMPTY_EDITOR_CONTENT.html,
-      },
-      [MAIN_JS_NAME]: {
-        content: values.main || EMPTY_EDITOR_CONTENT.js,
-      },
-      [RENDERER_JS_NAME]: {
-        content: values.renderer || EMPTY_EDITOR_CONTENT.js,
-      },
-      [PRELOAD_JS_NAME]: {
-        content: values.preload || EMPTY_EDITOR_CONTENT.js,
-      },
-      [STYLES_CSS_NAME]: {
-        content: values.css || EMPTY_EDITOR_CONTENT.css,
-      },
-    };
+    const getSuffix = (name: string) => path.parse(name).ext.slice(1);
+    const filesList = {};
+    for (const [filename, editorId] of Object.entries(FILENAME_KEYS)) {
+      filesList[filename] = {
+        content: values[editorId] || EMPTY_EDITOR_CONTENT[getSuffix(filename)],
+      };
+    }
+    return filesList;
   };
 }

src/renderer/components/editors.tsx

@@ -2,6 +2,13 @@ import { reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as MonacoType from 'monaco-editor';
 import * as React from 'react';
+import {
+  INDEX_HTML_NAME,
+  MAIN_JS_NAME,
+  PRELOAD_JS_NAME,
+  RENDERER_JS_NAME,
+  STYLES_CSS_NAME,
+} from '../../shared-constants';
 import {
   Mosaic,
   MosaicBranch,
@@ -37,12 +44,12 @@ const defaultMonacoOptions: MonacoType.editor.IEditorOptions = {
 };
 
 export const TITLE_MAP: Record<MosaicId, string> = {
-  main: 'Main Process (main.js)',
-  renderer: 'Renderer Process (renderer.js)',
-  preload: 'Preload (preload.js)',
-  html: 'HTML (index.html)',
-  css: 'Stylesheet (styles.css)',
-  docsDemo: 'Docs & Demos',
+  [EditorId.main]: `Main Process (${MAIN_JS_NAME})`,
+  [EditorId.renderer]: `Renderer Process (${RENDERER_JS_NAME})`,
+  [EditorId.preload]: `Preload (${PRELOAD_JS_NAME})`,
+  [EditorId.html]: `HTML (${INDEX_HTML_NAME})`,
+  [EditorId.css]: `Stylesheet (${STYLES_CSS_NAME})`,
+  [PanelId.docsDemo]: 'Docs & Demos',
 };
 
 export interface EditorsProps {

src/renderer/file-manager.ts

@@ -3,14 +3,7 @@ import * as path from 'path';
 
 import { Files, FileTransform } from '../interfaces';
 import { IpcEvents } from '../ipc-events';
-import {
-  INDEX_HTML_NAME,
-  MAIN_JS_NAME,
-  PACKAGE_NAME,
-  PRELOAD_JS_NAME,
-  RENDERER_JS_NAME,
-  STYLES_CSS_NAME,
-} from '../shared-constants';
+import { FILENAME_KEYS, PACKAGE_NAME } from '../shared-constants';
 import { DEFAULT_OPTIONS, PackageJsonOptions } from '../utils/get-package';
 import { fancyImport } from '../utils/import';
 import { readFiddle } from '../utils/read-fiddle';
@@ -133,13 +126,11 @@ export class FileManager {
   ): Promise<Files> {
     const pOptions = typeof options === 'object' ? options : DEFAULT_OPTIONS;
     const values = await window.ElectronFiddle.app.getEditorValues(pOptions);
-    let output: Files = new Map();
 
-    output.set(RENDERER_JS_NAME, values.renderer);
-    output.set(MAIN_JS_NAME, values.main);
-    output.set(INDEX_HTML_NAME, values.html);
-    output.set(PRELOAD_JS_NAME, values.preload);
-    output.set(STYLES_CSS_NAME, values.css);
+    let output: Files = new Map();
+    for (const [filename, editorId] of Object.entries(FILENAME_KEYS)) {
+      output.set(filename, values[editorId]);
+    }
     output.set(PACKAGE_NAME, values.package!);
 
     for (const transform of transforms) {

src/renderer/remote-loader.ts

@@ -1,14 +1,7 @@
 import { Octokit } from '@octokit/rest';
 import { when } from 'mobx';
 import { EditorValues, GenericDialogType } from '../interfaces';
-import {
-  INDEX_HTML_NAME,
-  MAIN_JS_NAME,
-  PRELOAD_JS_NAME,
-  RENDERER_JS_NAME,
-  STYLES_CSS_NAME,
-  FILENAME_KEYS,
-} from '../shared-constants';
+import { FILENAME_KEYS } from '../shared-constants';
 import { getOctokit } from '../utils/octokit';
 import { sortedElectronMap } from '../utils/sorted-electron-map';
 import { ELECTRON_ORG, ELECTRON_REPO } from './constants';
@@ -136,16 +129,11 @@ export class RemoteLoader {
       const octo = await getOctokit(this.appState);
       const gist = await octo.gists.get({ gist_id: gistId });
 
-      return this.handleLoadingSuccess(
-        {
-          html: this.getContentOrEmpty(gist, INDEX_HTML_NAME),
-          main: this.getContentOrEmpty(gist, MAIN_JS_NAME),
-          renderer: this.getContentOrEmpty(gist, RENDERER_JS_NAME),
-          preload: this.getContentOrEmpty(gist, PRELOAD_JS_NAME),
-          css: this.getContentOrEmpty(gist, STYLES_CSS_NAME),
-        },
-        gistId,
-      );
+      const values: Partial<EditorValues> = {};
+      for (const [filename, editorId] of Object.entries(FILENAME_KEYS)) {
+        values[editorId] = this.getContentOrEmpty(gist, filename);
+      }
+      return this.handleLoadingSuccess(values, gistId);
     } catch (error) {
       return this.handleLoadingFailed(error);
     }

src/utils/get-package.ts

@@ -1,4 +1,5 @@
 import { EditorValues } from '../interfaces';
+import { MAIN_JS_NAME } from '../shared-constants';
 import { findModulesInEditors } from '../renderer/npm';
 import { AppState } from '../renderer/state';
 import { getUsername } from './get-username';
@@ -50,7 +51,7 @@ export async function getPackageJson(
       productName: name,
       description: 'My Electron application description',
       keywords: [],
-      main: './main.js',
+      main: `./${MAIN_JS_NAME}`,
       version: '1.0.0',
       author: getUsername(),
       scripts: {