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