diff --git a/docs/api/app.md b/docs/api/app.md index fc31d465f7..c6c5887ef6 100644 --- a/docs/api/app.md +++ b/docs/api/app.md @@ -6,8 +6,8 @@ The following example shows how to quit the application when the last window is closed: ```javascript -const app = require('electron').app; -app.on('window-all-closed', function() { +const { app } = require('electron'); +app.on('window-all-closed', () => { app.quit(); }); ``` @@ -237,7 +237,7 @@ should prevent the default behavior with `event.preventDefault()` and call `callback(username, password)` with the credentials. ```javascript -app.on('login', function(event, webContents, request, authInfo, callback) { +app.on('login', (event, webContents, request, authInfo, callback) => { event.preventDefault(); callback('username', 'secret'); }) @@ -481,9 +481,9 @@ An example of activating the window of primary instance when a second instance starts: ```javascript -var myWindow = null; +let myWindow = null; -var shouldQuit = app.makeSingleInstance(function(commandLine, workingDirectory) { +const shouldQuit = app.makeSingleInstance((commandLine, workingDirectory) => { // Someone tried to run a second instance, we should focus our window. if (myWindow) { if (myWindow.isMinimized()) myWindow.restore(); @@ -497,7 +497,7 @@ if (shouldQuit) { } // Create myWindow, load the rest of the app, etc... -app.on('ready', function() { +app.on('ready', () => { }); ``` diff --git a/docs/api/browser-window.md b/docs/api/browser-window.md index 7289057b40..ea88220598 100644 --- a/docs/api/browser-window.md +++ b/docs/api/browser-window.md @@ -4,13 +4,13 @@ ```javascript // In the main process. -const BrowserWindow = require('electron').BrowserWindow; +const { BrowserWindow } = require('electron'); // Or in the renderer process. -const BrowserWindow = require('electron').remote.BrowserWindow; +const { BrowserWindow } = require('electron').remote; -var win = new BrowserWindow({ width: 800, height: 600, show: false }); -win.on('closed', function() { +let win = new BrowserWindow({ width: 800, height: 600, show: false }); +win.on('closed', () => { win = null; }); @@ -315,7 +315,7 @@ Commands are lowercased with underscores replaced with hyphens and the e.g. `APPCOMMAND_BROWSER_BACKWARD` is emitted as `browser-backward`. ```javascript -someWindow.on('app-command', function(e, cmd) { +someWindow.on('app-command', (e, cmd) => { // Navigate the window back when the user hits their mouse back button if (cmd === 'browser-backward' && someWindow.webContents.canGoBack()) { someWindow.webContents.goBack(); diff --git a/docs/api/chrome-command-line-switches.md b/docs/api/chrome-command-line-switches.md index 17059435ea..e51ffe5e2e 100644 --- a/docs/api/chrome-command-line-switches.md +++ b/docs/api/chrome-command-line-switches.md @@ -7,11 +7,11 @@ your app's main script before the [ready][ready] event of the [app][app] module is emitted: ```javascript -const app = require('electron').app; +const { app } = require('electron'); app.commandLine.appendSwitch('remote-debugging-port', '8315'); app.commandLine.appendSwitch('host-rules', 'MAP * 127.0.0.1'); -app.on('ready', function() { +app.on('ready', () => { // Your code here }); ``` diff --git a/docs/api/clipboard.md b/docs/api/clipboard.md index 58e5a1c1b0..38bd865942 100644 --- a/docs/api/clipboard.md +++ b/docs/api/clipboard.md @@ -5,7 +5,7 @@ The following example shows how to write a string to the clipboard: ```javascript -const clipboard = require('electron').clipboard; +const { clipboard } = require('electron'); clipboard.writeText('Example String'); ``` diff --git a/docs/api/content-tracing.md b/docs/api/content-tracing.md index e347790b63..e6f6b7a0d2 100644 --- a/docs/api/content-tracing.md +++ b/docs/api/content-tracing.md @@ -8,7 +8,7 @@ This module does not include a web interface so you need to open result. ```javascript -const contentTracing = require('electron').contentTracing; +const { contentTracing } = require('electron'); const options = { categoryFilter: '*', @@ -18,8 +18,8 @@ const options = { contentTracing.startRecording(options, function() { console.log('Tracing started'); - setTimeout(function() { - contentTracing.stopRecording('', function(path) { + setTimeout(() => { + contentTracing.stopRecording('', (path) => { console.log('Tracing data recorded to ' + path); }); }, 5000); diff --git a/docs/api/crash-reporter.md b/docs/api/crash-reporter.md index 1f8229eaa7..4e4b49df0f 100644 --- a/docs/api/crash-reporter.md +++ b/docs/api/crash-reporter.md @@ -6,7 +6,7 @@ The following is an example of automatically submitting a crash report to a remote server: ```javascript -const crashReporter = require('electron').crashReporter; +const { crashReporter } = require('electron'); crashReporter.start({ productName: 'YourName', diff --git a/docs/api/desktop-capturer.md b/docs/api/desktop-capturer.md index dc523c3a42..9c6d220112 100644 --- a/docs/api/desktop-capturer.md +++ b/docs/api/desktop-capturer.md @@ -5,9 +5,9 @@ microphone, camera, or screen. ```javascript // In the renderer process. -var desktopCapturer = require('electron').desktopCapturer; +var { desktopCapturer } = require('electron'); -desktopCapturer.getSources({types: ['window', 'screen']}, function(error, sources) { +desktopCapturer.getSources({types: ['window', 'screen']}, (error, sources) => { if (error) throw error; for (var i = 0; i < sources.length; ++i) { if (sources[i].name == "Electron") { diff --git a/docs/api/dialog.md b/docs/api/dialog.md index a5f61a53e3..84aac7c63b 100644 --- a/docs/api/dialog.md +++ b/docs/api/dialog.md @@ -6,7 +6,7 @@ An example of showing a dialog to select multiple files and directories: ```javascript var win = ...; // BrowserWindow in which to show the dialog -const dialog = require('electron').dialog; +const { dialog } = require('electron'); console.log(dialog.showOpenDialog({ properties: [ 'openFile', 'openDirectory', 'multiSelections' ]})); ``` @@ -14,7 +14,7 @@ The Dialog is opened from Electron's main thread. If you want to use the dialog object from a renderer process, remember to access it using the remote: ```javascript -const dialog = require('electron').remote.dialog; +const { dialog } = require('electron').remote; ``` ## Methods diff --git a/docs/api/download-item.md b/docs/api/download-item.md index 4418f61c19..6d15176aa0 100644 --- a/docs/api/download-item.md +++ b/docs/api/download-item.md @@ -8,17 +8,17 @@ control the download item. ```javascript // In the main process. -win.webContents.session.on('will-download', function(event, item, webContents) { +win.webContents.session.on('will-download', (event, item, webContents) => { // Set the save path, making Electron not to prompt a save dialog. item.setSavePath('/tmp/save.pdf'); console.log(item.getMimeType()); console.log(item.getFilename()); console.log(item.getTotalBytes()); - item.on('updated', function() { + item.on('updated', () => { console.log('Received bytes: ' + item.getReceivedBytes()); }); - item.on('done', function(e, state) { - if (state == "completed") { + item.on('done', (e, state) => { + if (state === "completed") { console.log("Download successfully"); } else { console.log("Download is cancelled or interrupted that can't be resumed"); diff --git a/docs/api/file-object.md b/docs/api/file-object.md index 31c6feddb5..2484e960e9 100644 --- a/docs/api/file-object.md +++ b/docs/api/file-object.md @@ -15,16 +15,16 @@ Example on getting a real path from a dragged-onto-the-app file: @@ -50,16 +48,29 @@ To run your app, read [Run your app](../tutorial/quick-start.md#run-your-app). ## Destructuring assignment -If you are using CoffeeScript or Babel, you can also use +As of 0.37, you can use [destructuring assignment][destructuring-assignment] to make it easier to use -built-in modules: +built-in modules. ```javascript -const {app, BrowserWindow} = require('electron') +const { app, BrowserWindow } = require('electron'); ``` -However if you are using plain JavaScript, you have to wait until Chrome fully -supports ES6. +If you need the entire `electron` module, you can require it and then using +destructuring to access the individual modules from `electron`. + +```javascript +const electron = require('electron'); +const { app, BrowserWindow } = electron; +``` + +This is equivalent to the following code: + +```javascript +const electron = require('electron'); +const app = electron.app; +const BrowserWindow = electron.BrowserWindow; +``` ## Disable old styles of using built-in modules diff --git a/docs/api/system-preferences.md b/docs/api/system-preferences.md index df7ef89e65..cafb1d3745 100644 --- a/docs/api/system-preferences.md +++ b/docs/api/system-preferences.md @@ -56,7 +56,7 @@ An example of using it to determine if you should create a transparent window or not (transparent windows won't work correctly when DWM composition is disabled): ```javascript -let browserOptions = {width: 1000, height: 800}; +let browserOptions = { width: 1000, height: 800 }; // Make the window transparent only if the platform supports it. if (process.platform !== 'win32' || systemPreferences.isAeroGlassEnabled()) { diff --git a/docs/api/tray.md b/docs/api/tray.md index 1ea0859f14..eaf3f6c42b 100644 --- a/docs/api/tray.md +++ b/docs/api/tray.md @@ -8,10 +8,10 @@ const app = electron.app; const Menu = electron.Menu; const Tray = electron.Tray; -var appIcon = null; -app.on('ready', function(){ +let appIcon = null; +app.on('ready', () => { appIcon = new Tray('/path/to/my/icon'); - var contextMenu = Menu.buildFromTemplate([ + const contextMenu = Menu.buildFromTemplate([ { label: 'Item1', type: 'radio' }, { label: 'Item2', type: 'radio' }, { label: 'Item3', type: 'radio', checked: true }, @@ -20,7 +20,6 @@ app.on('ready', function(){ appIcon.setToolTip('This is my application.'); appIcon.setContextMenu(contextMenu); }); - ``` __Platform limitations:__ diff --git a/docs/api/web-contents.md b/docs/api/web-contents.md index 3d4a83cf1f..f304ad98d7 100644 --- a/docs/api/web-contents.md +++ b/docs/api/web-contents.md @@ -9,12 +9,12 @@ the [`BrowserWindow`](browser-window.md) object. An example of accessing the `webContents` object: ```javascript -const BrowserWindow = require('electron').BrowserWindow; +const { BrowserWindow } = require('electron'); -var win = new BrowserWindow({width: 800, height: 1500}); +let win = new BrowserWindow({width: 800, height: 1500}); win.loadURL("http://github.com"); -var webContents = win.webContents; +let webContents = win.webContents; ``` ## Events @@ -398,10 +398,10 @@ Initiates a download of the resource at `url` without navigating. The Returns URL of the current web page. ```javascript -var win = new BrowserWindow({width: 800, height: 600}); +let win = new BrowserWindow({width: 800, height: 600}); win.loadURL("http://github.com"); -var currentURL = win.webContents.getURL(); +let currentURL = win.webContents.getURL(); ``` ### `webContents.getTitle()` @@ -671,22 +671,22 @@ By default, an empty `options` will be regarded as: ``` ```javascript -const BrowserWindow = require('electron').BrowserWindow; +const { BrowserWindow } = require('electron'); const fs = require('fs'); -var win = new BrowserWindow({width: 800, height: 600}); -win.loadURL("http://github.com"); +let win = new BrowserWindow({width: 800, height: 600}); +win.loadURL('http://github.com'); -win.webContents.on("did-finish-load", function() { +win.webContents.on('did-finish-load', () => { // Use default printing options - win.webContents.printToPDF({}, function(error, data) { + win.webContents.printToPDF({}, (error, data) => { if (error) throw error; - fs.writeFile("/tmp/print.pdf", data, function(error) { + fs.writeFile('/tmp/print.pdf', data, (error) => { if (error) throw error; - console.log("Write PDF successfully."); - }) - }) + console.log('Write PDF successfully.'); + }); + }); }); ``` @@ -761,12 +761,13 @@ An example of sending messages from the main process to the renderer process: ```javascript // In the main process. -var window = null; -app.on('ready', function() { - window = new BrowserWindow({width: 800, height: 600}); - window.loadURL('file://' + __dirname + '/index.html'); - window.webContents.on('did-finish-load', function() { - window.webContents.send('ping', 'whoooooooh!'); +let mainWindow = null; + +app.on('ready', () => { + mainWindow = new BrowserWindow({width: 800, height: 600}); + mainWindow.loadURL(`file://${__dirname}/index.html`); + mainWindow.webContents.on('did-finish-load', () => { + mainWindow.webContents.send('ping', 'whoooooooh!'); }); }); ``` @@ -776,7 +777,7 @@ app.on('ready', function() { @@ -892,8 +893,8 @@ Returns true if the process of saving page has been initiated successfully. ```javascript win.loadURL('https://github.com'); -win.webContents.on('did-finish-load', function() { - win.webContents.savePage('/tmp/test.html', 'HTMLComplete', function(error) { +win.webContents.on('did-finish-load', () => { + win.webContents.savePage('/tmp/test.html', 'HTMLComplete', (error) => { if (!error) console.log("Save page successfully"); }); @@ -930,13 +931,13 @@ try { console.log("Debugger attach failed : ", err); }; -win.webContents.debugger.on('detach', function(event, reason) { +win.webContents.debugger.on('detach', (event, reason) => { console.log("Debugger detached due to : ", reason); }); -win.webContents.debugger.on('message', function(event, method, params) { - if (method == "Network.requestWillBeSent") { - if (params.request.url == "https://www.github.com") +win.webContents.debugger.on('message', (event, method, params) => { + if (method === "Network.requestWillBeSent") { + if (params.request.url === "https://www.github.com") win.webContents.debugger.detach(); } }) diff --git a/docs/api/web-frame.md b/docs/api/web-frame.md index 4b7d04b6f0..dcd595d3d9 100644 --- a/docs/api/web-frame.md +++ b/docs/api/web-frame.md @@ -5,7 +5,7 @@ An example of zooming current page to 200%. ```javascript -var webFrame = require('electron').webFrame; +const { webFrame } = require('electron'); webFrame.setZoomFactor(2); ``` diff --git a/docs/api/web-view-tag.md b/docs/api/web-view-tag.md index 5f4a422a13..a7410e146a 100644 --- a/docs/api/web-view-tag.md +++ b/docs/api/web-view-tag.md @@ -31,18 +31,20 @@ and displays a "loading..." message during the load time: ```html ``` @@ -211,7 +213,7 @@ The `webview` tag has the following methods: **Example** ```javascript -webview.addEventListener("dom-ready", function() { +webview.addEventListener("dom-ready", () => { webview.openDevTools(); }); ``` @@ -642,10 +644,12 @@ Fired when the guest page attempts to open a new browser window. The following example code opens the new url in system's default browser. ```javascript -webview.addEventListener('new-window', function(e) { - var protocol = require('url').parse(e.url).protocol; +const { shell } = require('electron'); + +webview.addEventListener('new-window', (e) => { + const protocol = require('url').parse(e.url).protocol; if (protocol === 'http:' || protocol === 'https:') { - require('electron').shell.openExternal(e.url); + shell.openExternal(e.url); } }); ``` @@ -700,7 +704,7 @@ The following example code navigates the `webview` to `about:blank` when the guest attempts to close itself. ```javascript -webview.addEventListener('close', function() { +webview.addEventListener('close', () => { webview.src = 'about:blank'; }); ``` @@ -719,7 +723,7 @@ between guest page and embedder page: ```javascript // In embedder page. -webview.addEventListener('ipc-message', function(event) { +webview.addEventListener('ipc-message', (event) => { console.log(event.channel); // Prints "pong" }); @@ -728,8 +732,8 @@ webview.send('ping'); ```javascript // In guest page. -var ipcRenderer = require('electron').ipcRenderer; -ipcRenderer.on('ping', function() { +var { ipcRenderer } = require('electron'); +ipcRenderer.on('ping', () => { ipcRenderer.sendToHost('pong'); }); ``` diff --git a/docs/faq/electron-faq.md b/docs/faq/electron-faq.md index 02d72744e6..c690b7ed3d 100644 --- a/docs/faq/electron-faq.md +++ b/docs/faq/electron-faq.md @@ -60,16 +60,16 @@ If you want a quick fix, you can make the variables global by changing your code from this: ```javascript -app.on('ready', function() { - var tray = new Tray('/path/to/icon.png'); +app.on('ready', () => { + const tray = new Tray('/path/to/icon.png'); }) ``` to this: ```javascript -var tray = null; -app.on('ready', function() { +let tray = null; +app.on('ready', () => { tray = new Tray('/path/to/icon.png'); }) ``` @@ -84,7 +84,7 @@ To solve this, you can turn off node integration in Electron: ```javascript // In the main process. -var mainWindow = new BrowserWindow({ +let mainWindow = new BrowserWindow({ webPreferences: { nodeIntegration: false } diff --git a/docs/styleguide.md b/docs/styleguide.md index 28ebaa18b6..cd68414ac2 100644 --- a/docs/styleguide.md +++ b/docs/styleguide.md @@ -92,7 +92,7 @@ a value it and its type is noted below. If you were to listen and respond to this event it might look something like this: ```javascript -Alarm.on('wake-up', function(time) { +Alarm.on('wake-up', (time) => { console.log(time) }) ``` diff --git a/docs/tutorial/application-packaging.md b/docs/tutorial/application-packaging.md index b42a2f9298..257119a573 100644 --- a/docs/tutorial/application-packaging.md +++ b/docs/tutorial/application-packaging.md @@ -71,8 +71,8 @@ require('/path/to/example.asar/dir/module.js'); You can also display a web page in an `asar` archive with `BrowserWindow`: ```javascript -const BrowserWindow = require('electron').BrowserWindow; -var win = new BrowserWindow({width: 800, height: 600}); +const { BrowserWindow } = require('electron'); +let win = new BrowserWindow({width: 800, height: 600}); win.loadURL('file:///path/to/example.asar/static/index.html'); ``` @@ -86,7 +86,7 @@ For example, to get a file with `$.get`: ```html @@ -99,7 +99,7 @@ content of `asar` archive as file. For this purpose you can use the built-in `original-fs` module which provides original `fs` APIs without `asar` support: ```javascript -var originalFs = require('original-fs'); +const originalFs = require('original-fs'); originalFs.readFileSync('/path/to/example.asar'); ``` diff --git a/docs/tutorial/desktop-environment-integration.md b/docs/tutorial/desktop-environment-integration.md index 110d2917ab..470e779965 100644 --- a/docs/tutorial/desktop-environment-integration.md +++ b/docs/tutorial/desktop-environment-integration.md @@ -18,7 +18,7 @@ the currently running operating system's native notification APIs to display it. **Note:** Since this is an HTML5 API it is only available in the renderer process. ```javascript -var myNotification = new Notification('Title', { +let myNotification = new Notification('Title', { body: 'Lorem Ipsum Dolor Sit Amet' }); @@ -117,8 +117,8 @@ const electron = require('electron'); const app = electron.app; const Menu = electron.Menu; -var dockMenu = Menu.buildFromTemplate([ - { label: 'New Window', click: function() { console.log('New Window'); } }, +const dockMenu = Menu.buildFromTemplate([ + { label: 'New Window', click: () => { console.log('New Window'); } }, { label: 'New Window with Settings', submenu: [ { label: 'Basic' }, { label: 'Pro'} @@ -209,24 +209,25 @@ You can use [BrowserWindow.setThumbarButtons][setthumbarbuttons] to set thumbnail toolbar in your application: ```javascript -const BrowserWindow = require('electron').BrowserWindow; +const { BrowserWindow } = require('electron'); const path = require('path'); -var win = new BrowserWindow({ +let win = new BrowserWindow({ width: 800, height: 600 }); + win.setThumbarButtons([ { tooltip: "button1", icon: path.join(__dirname, 'button1.png'), - click: function() { console.log("button2 clicked"); } + click: () => { console.log("button2 clicked"); } }, { tooltip: "button2", icon: path.join(__dirname, 'button2.png'), flags:['enabled', 'dismissonclick'], - click: function() { console.log("button2 clicked."); } + click: () => { console.log("button2 clicked."); } } ]); ``` @@ -266,7 +267,7 @@ To set the progress bar for a Window, you can use the [BrowserWindow.setProgressBar][setprogressbar] API: ```javascript -var window = new BrowserWindow({...}); +let window = new BrowserWindow({...}); window.setProgressBar(0.5); ``` @@ -293,7 +294,7 @@ To set the overlay icon for a window, you can use the [BrowserWindow.setOverlayIcon][setoverlayicon] API: ```javascript -var window = new BrowserWindow({...}); +let window = new BrowserWindow({...}); window.setOverlayIcon('path/to/overlay.png', 'Description for overlay'); ``` @@ -315,7 +316,7 @@ To set the represented file of window, you can use the [BrowserWindow.setDocumentEdited][setdocumentedited] APIs: ```javascript -var window = new BrowserWindow({...}); +let window = new BrowserWindow({...}); window.setRepresentedFilename('/etc/passwd'); window.setDocumentEdited(true); ``` diff --git a/docs/tutorial/online-offline-events.md b/docs/tutorial/online-offline-events.md index d143118e01..7e784e336e 100644 --- a/docs/tutorial/online-offline-events.md +++ b/docs/tutorial/online-offline-events.md @@ -10,10 +10,11 @@ const electron = require('electron'); const app = electron.app; const BrowserWindow = electron.BrowserWindow; -var onlineStatusWindow; -app.on('ready', function() { +let onlineStatusWindow; + +app.on('ready', () => { onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false }); - onlineStatusWindow.loadURL('file://' + __dirname + '/online-status.html'); + onlineStatusWindow.loadURL(`file://${__dirname}/online-status.html`); }); ``` @@ -24,7 +25,7 @@ _online-status.html_