Merge pull request #15 from electron/code-cleanup

Documentation, minor code cleanup

src/interfaces.ts

@@ -19,6 +19,13 @@ export interface GitHubVersion {
   body: string;
 }
 
+export interface EditorValues {
+  main: string;
+  renderer: string;
+  html: string;
+  package?: string;
+}
+
 export interface ElectronVersion extends GitHubVersion {
   state: ElectronVersionState;
 }

src/main.ts

@@ -2,15 +2,14 @@ import { app, BrowserWindow } from 'electron';
 
 import { setupMenu } from './menu';
 
-require('update-electron-app')();
-
 // Handle creating/removing shortcuts on Windows when installing/uninstalling.
 if (require('electron-squirrel-startup')) { // eslint-disable-line global-require
   app.quit();
 }
 
 app.setName('Electron Fiddle');
 
+
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
 let mainWindow;

src/menu.ts

@@ -1,6 +1,9 @@
 import { app, shell, Menu } from 'electron';
 import * as defaultMenu from 'electron-default-menu';
 
+/**
+ * Creates the app's window menu.
+ */
 export function setupMenu() {
   // Get template for default menu
   const menu = defaultMenu(app, shell);

src/renderer/app.tsx

@@ -1,104 +1,81 @@
 import * as React from 'react';
 import { render } from 'react-dom';
 import * as loader from 'monaco-loader';
-import { observable } from 'mobx';
 import * as MonacoType from 'monaco-editor';
 
 import { mainTheme } from './themes';
 import { Header } from './components/header';
-import { BinaryManager } from './binary';
-import { ElectronVersion, StringMap, OutputEntry } from '../interfaces';
-import { arrayToStringMap } from '../utils/array-to-stringmap';
-import { getKnownVersions } from './versions';
-import { normalizeVersion } from '../utils/normalize-version';
+import { EditorValues } from '../interfaces';
 import { editors } from './components/editors';
 import { updateEditorLayout } from '../utils/editor-layout';
-
-const knownVersions = getKnownVersions();
-const defaultVersion = normalizeVersion(knownVersions[0].tag_name);
-
-window.ElectronFiddle = {
-  editors: {
-    main: null,
-    renderer: null,
-    html: null
-  },
-  app: null
-};
-
-export class AppState {
-  @observable public gistId: string = '';
-  @observable public version: string = defaultVersion;
-  @observable public githubToken: string | null = null;
-  @observable public binaryManager: BinaryManager = new BinaryManager(defaultVersion);
-  @observable public versions: StringMap<ElectronVersion> = arrayToStringMap(knownVersions);
-  @observable public output: Array<OutputEntry> = [];
-  @observable public isConsoleShowing: boolean = false;
-  @observable public isTokenDialogShowing: boolean = false;
-  @observable public isUnsaved: boolean = true;
-  @observable public isMyGist: boolean = false;
-}
-
-const appState = new AppState();
-appState.githubToken = localStorage.getItem('githubToken');
-
+import { appState } from './state';
+
+/**
+ * The top-level class controlling the whole app. This is *not* a React component,
+ * but it does eventually render all components.
+ *
+ * @class App
+ */
 class App {
-  public editors: {
-    main: MonacoType.editor.IStandaloneCodeEditor | null,
-    renderer: MonacoType.editor.IStandaloneCodeEditor | null,
-    html: MonacoType.editor.IStandaloneCodeEditor | null,
-  } = {
-    main: null,
-    renderer: null,
-    html: null
-  };
   public monaco: typeof MonacoType | null = null;
   public name = 'test';
   public typeDefDisposable = null;
-  public isScrollbarHidden = false;
 
   constructor() {
     this.getValues = this.getValues.bind(this);
-
     this.setup();
   }
 
-  public setValues(values: {
-    html: string;
-    main: string;
-    renderer: string;
-  }) {
+  /**
+   * Sets the values on all three editors.
+   *
+   * @param {EditorValues} values
+   */
+  public setValues(values: EditorValues): void {
     const { ElectronFiddle: fiddle } = window;
 
-    if (!fiddle.editors.html || !fiddle.editors.main || !fiddle.editors.renderer) {
-      throw new Error('Editors not ready');
+    if (!fiddle) {
+      throw new Error('Fiddle not ready');
     }
 
-    fiddle.editors.html.setValue(values.html);
-    fiddle.editors.main.setValue(values.main);
-    fiddle.editors.renderer.setValue(values.renderer);
+    const { main, html, renderer } = fiddle.editors;
+
+    if (html && html.setValue) html.setValue(values.html);
+    if (main && main.setValue) main.setValue(values.main);
+    if (renderer && renderer.setValue) renderer.setValue(values.renderer);
   }
 
-  public getValues() {
+  /**
+   * Gets the values on all three editors.
+   *
+   * @returns {EditorValues}
+   */
+  public getValues(): EditorValues {
     const { ElectronFiddle: fiddle } = window;
 
-    if (!fiddle.editors.html || !fiddle.editors.main || !fiddle.editors.renderer) {
-      throw new Error('Editors not ready');
+    if (!fiddle) {
+      throw new Error('Fiddle not ready');
     }
 
+    const { main, html, renderer } = fiddle.editors;
+
     return {
-      html: fiddle.editors.html.getValue(),
-      main: fiddle.editors.main.getValue(),
-      renderer: fiddle.editors.renderer.getValue(),
+      html: html && html.getValue() ? html.getValue() : '',
+      main: main && main.getValue() ? main.getValue() : '',
+      renderer: renderer && renderer.getValue() ? renderer.getValue() : '',
       package: JSON.stringify({
         name: this.name,
         main: './main.js',
-        version: '1.0.0'
+        version: '1.0.0',
       })
     };
   }
 
-  public async setup() {
+  /**
+   * Initial setup call, loading Monaco and kicking off the React
+   * render process.
+   */
+  public async setup(): Promise<void> {
     this.monaco = await loader();
     this.createThemes();
 
@@ -114,11 +91,18 @@ class App {
     this.setupResizeListener();
   }
 
-  public setupResizeListener() {
+  /**
+   * We need to possibly recalculate the layout whenever the window
+   * is resized. This method sets up the listener.
+   */
+  public setupResizeListener(): void {
     window.addEventListener('resize', updateEditorLayout);
   }
 
-  public createThemes() {
+  /**
+   * We have a custom theme for the Monaco editor. This sets that up.
+   */
+  public createThemes(): void {
     if (!this.monaco) return;
     this.monaco.editor.defineTheme('main', mainTheme as any);
   }

src/renderer/binary.ts

@@ -3,24 +3,34 @@ import * as os from 'os';
 import * as fs from 'fs-extra';
 import * as path from 'path';
 import * as extract from 'extract-zip';
-import { EventEmitter } from 'events';
 
 import { USER_DATA_PATH } from './constants';
 import { normalizeVersion } from '../utils/normalize-version';
 import { StringMap } from '../interfaces';
 
 const eDownload = promisify(require('electron-download'));
 
-export class BinaryManager extends EventEmitter {
+/**
+ * The binary manager takes care of downloading Electron versions
+ *
+ * @export
+ * @class BinaryManager
+ */
+export class BinaryManager {
   public state: StringMap<'ready' | 'downloading'> = {};
 
   constructor(version: string) {
-    super();
-
     this.setup(version);
   }
 
-  public async setup(iVersion: string) {
+  /**
+   * General setup, called with a version. Is called during construction
+   * to ensure that we always have or download at least one version.
+   *
+   * @param {string} iVersion
+   * @returns {Promise<void>}
+   */
+  public async setup(iVersion: string): Promise<void> {
     const version = normalizeVersion(iVersion);
     await fs.mkdirp(this.getDownloadPath(version));
 
@@ -47,7 +57,13 @@ export class BinaryManager extends EventEmitter {
     this.state[version] = 'ready';
   }
 
-  public getElectronBinary(version: string) {
+  /**
+   * Gets the expected path for the binary of a given Electron version
+   *
+   * @param {string} version
+   * @returns {string}
+   */
+  public getElectronBinaryPath(version: string): string {
     const platform = os.platform();
     const dir = this.getDownloadPath(version);
 
@@ -64,6 +80,11 @@ export class BinaryManager extends EventEmitter {
     }
   }
 
+  /**
+   * Returns an array of all versions downloaded to disk
+   *
+   * @returns {Promise<Array<string>>}
+   */
   public async getDownloadedVersions(): Promise<Array<string>> {
     const downloadPath = path.join(USER_DATA_PATH, 'electron-bin');
     console.log(`BinaryManager: Checking for downloaded versions`);
@@ -85,16 +106,35 @@ export class BinaryManager extends EventEmitter {
     }
   }
 
-  public getIsDownloaded(version: string) {
-    const expectedPath = this.getElectronBinary(version);
+  /**
+   * Did we already download a given version?
+   *
+   * @param {string} version
+   * @returns {boolean}
+   */
+  public getIsDownloaded(version: string): boolean {
+    const expectedPath = this.getElectronBinaryPath(version);
     return fs.existsSync(expectedPath);
   }
 
-  private getDownloadPath(version: string) {
+  /**
+   * Gets the expected path for a given Electron version
+   *
+   * @param {string} version
+   * @returns {string}
+   */
+  private getDownloadPath(version: string): string {
     return path.join(USER_DATA_PATH, 'electron-bin', version);
   }
 
-  private unzip(zipPath: string, extractPath: string) {
+  /**
+   * Unzips an electron package so that we can actaully use it.
+   *
+   * @param {string} zipPath
+   * @param {string} extractPath
+   * @returns {Promise<void>}
+   */
+  private unzip(zipPath: string, extractPath: string): Promise<void> {
     return new Promise((resolve, reject) => {
       process.noAsar = true;