From 7ac567e522fa41c6ab86e2cccc82d58459a9507f Mon Sep 17 00:00:00 2001 From: Felix Rieseberg Date: Wed, 8 Aug 2018 19:26:59 -0700 Subject: [PATCH 1/4] :memo: Update Readme --- README.md | 54 +++++++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 45 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index c2f96b0304..c3ff4589c8 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,7 @@ # Electron Fiddle -> :warning: Still a work in progress, please stay tuned. - -
- -[![Build status](https://ci.appveyor.com/api/projects/status/ngeqlis14337ke3q/branch/master?svg=true)](https://ci.appveyor.com/project/felixrieseberg/fiddle/branch/master) [![Build Status](https://travis-ci.org/electron/fiddle.svg?branch=master)](https://travis-ci.org/electron/fiddle) -
- Electron Fiddle let's you create and play with small Electron experiments. It greets you with a quick-start template after opening – change a few things, choose the version of Electron you want to run it with, and play around. Then, @@ -16,11 +9,54 @@ save your fiddle either as a GitHub Gist or to a local folder. Once pushed to GitHub, anyone can quickly try your fiddle out by just entering it in the address bar. -![](https://user-images.githubusercontent.com/1426799/41096018-8499e31a-6a53-11e8-9887-7483fd38e58b.png) +![Screenshot](https://user-images.githubusercontent.com/1426799/43873471-8893e3a8-9b3b-11e8-975b-e357f8039b5c.png) + +# Features + +### Explore Electron + +![Screenshot: Electron App running](https://user-images.githubusercontent.com/1426799/43873856-5f66e56e-9b3d-11e8-8472-3a14d6a08c62.png) + +Try Electron without installing any dependencies: Fiddle includes everything +you'll need to explore the platform. It also includes examples for every API +available in Electron, so if you want to quickly see what a +[BrowserView][BrowserView] is or how the [desktopCapturer][desktopCapturer] +works, Fiddle has got you covered. + +### Code with Types + +![Screenshot: Fiddle's Types](https://user-images.githubusercontent.com/1426799/43874324-10e46eae-9b40-11e8-962b-8c793d73c259.png) + +Fiddle includes Microsoft's excellent Monaco Editor, the same editor powering +Visual Studio Code. It also installs the type definitions for the currently +selected version of Electron automatically, ensuring that you always have +all Electron APIs only a few keystrokes away. + +### Compile and Package + +![Screenshot: Fiddle's Tasks Menu](https://user-images.githubusercontent.com/1426799/43874349-3f5abd74-9b40-11e8-9225-ddd1f1087a47.png) + +Fiddle can automatically turn your experiment into binaries you can share with +your friends, coworkers, or grandparents. It does so thanks to +[electron-forge][electron-forge], allowing you to package your fiddle as an +app for Windows, macOS, or Linux. + +### Start with Fiddle, Continue Wherever + +![Screenshot: Visual Studio Code with Fiddle Export](https://user-images.githubusercontent.com/1426799/43874411-9cfd5946-9b40-11e8-8797-dd4138e31933.png) + +Fiddle is not an IDE – it is however an excellent starting point. Once your +fiddle has grown up, export it as a project with or without +[electron-forge][electron-forge]. Then, use your favorite editor and take on +the world! ## License [MIT, please see the LICENSE file for full details](https://github.com/electron/fiddle/blob/master/LICENSE). When using the Electron or other GitHub logos, be sure to follow the [GitHub -logo guidelines](https://github.com/logos). \ No newline at end of file +logo guidelines](https://github.com/logos). + +[BrowserView]: https://electronjs.org/docs/api/browser-view +[desktopCapturer]: https://electronjs.org/docs/api/desktop-capturer +[electron-forge]: https://electronforge.io/ \ No newline at end of file From d711082c677907c875091ba7415c43a27fc76db1 Mon Sep 17 00:00:00 2001 From: Felix Rieseberg Date: Wed, 8 Aug 2018 19:36:15 -0700 Subject: [PATCH 2/4] :wrench: Allow new window creation --- src/main/windows.ts | 43 ++++++++++++++++++++++---------------- tests/main/windows-spec.ts | 10 ++++----- 2 files changed, 30 insertions(+), 23 deletions(-) diff --git a/src/main/windows.ts b/src/main/windows.ts index 64975a25e2..8b9424cd6c 100644 --- a/src/main/windows.ts +++ b/src/main/windows.ts @@ -1,14 +1,9 @@ import { BrowserWindow } from 'electron'; -import { WindowNames } from '../interfaces'; -import { IpcEvents } from '../ipc-events'; import { createContextMenu } from './context-menu'; -import { ipcMainManager } from './ipc'; // Keep a global reference of the window objects, if we don't, the window will // be closed automatically when the JavaScript object is garbage collected. -export const browserWindows: Record = { - main: null -}; +export let browserWindows: Array = []; /** * Gets default options for the main window @@ -27,26 +22,38 @@ export function getMainWindowOptions(): Electron.BrowserWindowConstructorOptions }; } + /** - * Gets or creates the main window, returning it in both cases. + * Creates a new main window. * + * @export * @returns {Electron.BrowserWindow} */ -export function getOrCreateMainWindow(): Electron.BrowserWindow { - if (browserWindows.main) return browserWindows.main; - - browserWindows.main = new BrowserWindow(getMainWindowOptions()); - browserWindows.main.loadFile('./dist/index.html'); +export function createMainWindow(): Electron.BrowserWindow { + const browserWindow = new BrowserWindow(getMainWindowOptions()); + browserWindow.loadFile('./dist/index.html'); - browserWindows.main.webContents.once('dom-ready', () => { - if (browserWindows.main) { - createContextMenu(browserWindows.main); + browserWindow.webContents.once('dom-ready', () => { + if (browserWindow) { + createContextMenu(browserWindow); } }); - browserWindows.main.on('closed', () => { - browserWindows.main = null; + browserWindow.on('closed', () => { + browserWindows = browserWindows + .filter((bw) => browserWindow !== bw); }); - return browserWindows.main; + browserWindows.push(browserWindow); + + return browserWindow; +} + +/** + * Gets or creates the main window, returning it in both cases. + * + * @returns {Electron.BrowserWindow} + */ +export function getOrCreateMainWindow(): Electron.BrowserWindow { + return browserWindows[0] || createMainWindow(); } diff --git a/tests/main/windows-spec.ts b/tests/main/windows-spec.ts index 5b9188c2c4..5ad2965c16 100644 --- a/tests/main/windows-spec.ts +++ b/tests/main/windows-spec.ts @@ -39,21 +39,21 @@ describe('windows', () => { describe('getOrCreateMainWindow()', () => { it('creates a window on first call', () => { - expect(browserWindows.main).toBe(null); + expect(browserWindows.length).toBe(0); getOrCreateMainWindow(); - expect(browserWindows.main).toBeTruthy(); + expect(browserWindows[0]).toBeTruthy(); }); it('updates "browserWindows" on "close"', () => { getOrCreateMainWindow(); - expect(browserWindows.main).toBeTruthy(); + expect(browserWindows[0]).toBeTruthy(); getOrCreateMainWindow().emit('closed'); - expect(browserWindows.main).toBe(null); + expect(browserWindows.length).toBe(0); }); it('creates the context menu on "dom-ready"', () => { getOrCreateMainWindow(); - expect(browserWindows.main).toBeTruthy(); + expect(browserWindows[0]).toBeTruthy(); getOrCreateMainWindow().webContents.emit('dom-ready'); expect(createContextMenu).toHaveBeenCalled(); }); From 27dc99e7cb5684390578093cb4f9222181b5a935 Mon Sep 17 00:00:00 2001 From: Felix Rieseberg Date: Wed, 8 Aug 2018 19:38:50 -0700 Subject: [PATCH 3/4] :wrench: Create new windows --- src/main/menu.ts | 8 +++++++- src/main/windows.ts | 2 +- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/main/menu.ts b/src/main/menu.ts index 455c1c472f..cd4e2399b6 100644 --- a/src/main/menu.ts +++ b/src/main/menu.ts @@ -5,6 +5,7 @@ import { IpcEvents } from '../ipc-events'; import { SHOW_ME_TEMPLATES } from '../templates'; import { showOpenDialog, showSaveDialog } from './files'; import { ipcMainManager } from './ipc'; +import { createMainWindow } from './windows'; /** * Is the passed object a constructor for an Electron Menu? @@ -173,7 +174,12 @@ function getFileMenu(): MenuItemConstructorOptions { const fileMenu: Array = [ { label: 'New Fiddle', - click: () => ipcMainManager.send(IpcEvents.FS_NEW_FIDDLE) + click: () => ipcMainManager.send(IpcEvents.FS_NEW_FIDDLE), + accelerator: 'CommandOrCtrl+N' + }, { + label: 'New Window', + click: () => createMainWindow(), + accelerator: 'CommandOrCtrl+Shift+N' }, { type: 'separator' }, diff --git a/src/main/windows.ts b/src/main/windows.ts index 8b9424cd6c..3c7ca24d4f 100644 --- a/src/main/windows.ts +++ b/src/main/windows.ts @@ -55,5 +55,5 @@ export function createMainWindow(): Electron.BrowserWindow { * @returns {Electron.BrowserWindow} */ export function getOrCreateMainWindow(): Electron.BrowserWindow { - return browserWindows[0] || createMainWindow(); + return BrowserWindow.getFocusedWindow() || browserWindows[0] || createMainWindow(); } From 766cf9100a787e489724d09083a2adf3b1e81622 Mon Sep 17 00:00:00 2001 From: Felix Rieseberg Date: Wed, 8 Aug 2018 19:41:43 -0700 Subject: [PATCH 4/4] :microscope: Fix tests --- src/main/ipc.ts | 2 +- tests/main/menu-spec.ts | 19 ++++++++++++++----- 2 files changed, 15 insertions(+), 6 deletions(-) diff --git a/src/main/ipc.ts b/src/main/ipc.ts index fca615d648..ad1268aeaa 100644 --- a/src/main/ipc.ts +++ b/src/main/ipc.ts @@ -16,7 +16,7 @@ export class IpcMainManager extends EventEmitter { super(); ipcMainEvents.forEach((name) => { - ipcMain.on(name, (...args) => this.emit(name, ...args)); + ipcMain.on(name, (...args: Array) => this.emit(name, ...args)); }); } diff --git a/tests/main/menu-spec.ts b/tests/main/menu-spec.ts index 0d42586c5a..e6939cbe99 100644 --- a/tests/main/menu-spec.ts +++ b/tests/main/menu-spec.ts @@ -3,8 +3,11 @@ import * as electron from 'electron'; import { IpcEvents } from '../../src/ipc-events'; import { ipcMainManager } from '../../src/main/ipc'; import { setupMenu } from '../../src/main/menu'; +import { createMainWindow } from '../../src/main/windows'; import { overridePlatform, resetPlatform } from '../utils'; +jest.mock('../../src/main/windows'); + describe('menu', () => { beforeEach(() => { (electron.app.getName as any).mockReturnValue('Electron Fiddle'); @@ -195,28 +198,34 @@ describe('menu', () => { expect(ipcMainManager.send).toHaveBeenCalledWith(IpcEvents.FS_NEW_FIDDLE); }); + it('creates a new window', () => { + file.submenu[1].click(); + file.submenu[1].click(); + expect(createMainWindow).toHaveBeenCalledTimes(2); + }); + it('opens a fiddle', () => { - file.submenu[2].click(); + file.submenu[3].click(); expect(electron.dialog.showOpenDialog).toHaveBeenCalled(); }); it('saves a fiddle', () => { - file.submenu[4].click(); + file.submenu[5].click(); expect(ipcMainManager.send).toHaveBeenCalledWith(IpcEvents.FS_SAVE_FIDDLE); }); it('saves a fiddle as', () => { - file.submenu[5].click(); + file.submenu[6].click(); expect(electron.dialog.showOpenDialog).toHaveBeenCalled(); }); it('saves a fiddle as a gist', () => { - file.submenu[7].click(); + file.submenu[8].click(); expect(ipcMainManager.send).toHaveBeenCalledWith(IpcEvents.FS_SAVE_FIDDLE_GIST); }); it('saves a fiddle as a forge project', () => { - file.submenu[8].click(); + file.submenu[9].click(); expect(electron.dialog.showOpenDialog).toHaveBeenCalled(); }); });