docs: update to the use of arrow functions in line with the style guide (#30194)

* docs: Update to the use of arrow functions in line with the style guide

* docs: Fixed unmatched bracket typo in previous commit 9ebe3e58f7948c6636d77f3c58a2693683b69691

* fix linting

Co-authored-by: Cheng Zhao <zcbenz@gmail.com>

docs/tutorial/accessibility.md

@@ -21,7 +21,7 @@ In the testing framework Spectron, you can now audit each window and `<webview>`
 tag in your application. For example:
 
 ```javascript
-app.client.auditAccessibility().then(function (audit) {
+app.client.auditAccessibility().then((audit) => {
   if (audit.failed) {
     console.error(audit.message)
   }

docs/tutorial/automated-testing-with-a-custom-driver.md

@@ -84,11 +84,15 @@ class TestDriver {
 In the app, you'd need to write a simple handler for the RPC calls:
 
 ```js
-if (process.env.APP_TEST_DRIVER) {
+const METHODS = {
-  process.on('message', onMessage)
+  isReady () {
+    // do any setup needed
+    return true
+  }
+  // define your RPC-able methods here
 }
 
-async function onMessage ({ msgId, cmd, args }) {
+const onMessage = async ({ msgId, cmd, args }) => {
   let method = METHODS[cmd]
   if (!method) method = () => new Error('Invalid method: ' + cmd)
   try {
@@ -104,12 +108,8 @@ async function onMessage ({ msgId, cmd, args }) {
   }
 }
 
-const METHODS = {
+if (process.env.APP_TEST_DRIVER) {
-  isReady () {
+  process.on('message', onMessage)
-    // do any setup needed
-    return true
-  }
-  // define your RPC-able methods here
 }
 ```
 

docs/tutorial/dark-mode.md

@@ -138,7 +138,7 @@ Finally, the `main.js` file represents the main process and contains the actual
 const { app, BrowserWindow, ipcMain, nativeTheme } = require('electron')
 const path = require('path')
 
-function createWindow () {
+const createWindow = () => {
   const win = new BrowserWindow({
     width: 800,
     height: 600,

docs/tutorial/in-app-purchases.md

@@ -39,7 +39,7 @@ inAppPurchase.on('transactions-updated', (event, transactions) => {
   }
 
   // Check each transaction.
-  transactions.forEach(function (transaction) {
+  transactions.forEach((transaction) => {
     const payment = transaction.payment
 
     switch (transaction.transactionState) {

docs/tutorial/keyboard-shortcuts.md

@@ -82,7 +82,7 @@ listen for the `keyup` and `keydown` [DOM events][dom-events] inside the
 renderer process using the [addEventListener() API][addEventListener-api].
 
 ```javascript fiddle='docs/fiddles/features/keyboard-shortcuts/web-apis|focus=renderer.js'
-function handleKeyPress(event) {
+const handleKeyPress = (event) => {
   // You can put code here to handle the keypress.
   document.getElementById("last-keypress").innerText = event.key;
   console.log(`You pressed ${event.key}`);

docs/tutorial/launch-app-from-url-in-another-app.md

@@ -44,7 +44,7 @@ if (process.defaultApp) {
 We will now define the function in charge of creating our browser window and load our application's `index.html` file.
 
 ```js
-function createWindow () {
+const createWindow = () => {
   // Create the browser window.
   mainWindow = new BrowserWindow({
     width: 800,
@@ -112,7 +112,7 @@ Finally, we will add some additional code to handle when someone closes our appl
 // Quit when all windows are closed, except on macOS. There, it's common
 // for applications and their menu bar to stay active until the user quits
 // explicitly with Cmd + Q.
-app.on('window-all-closed', function () {
+app.on('window-all-closed', () => {
   if (process.platform !== 'darwin') app.quit()
 })
 ```

docs/tutorial/macos-dock.md

@@ -25,7 +25,7 @@ Starting with a working application from the
 ```javascript fiddle='docs/fiddles/features/macos-dock-menu'
 const { app, BrowserWindow, Menu } = require('electron')
 
-function createWindow () {
+const createWindow = () => {
   const win = new BrowserWindow({
     width: 800,
     height: 600,

docs/tutorial/message-ports.md

@@ -134,7 +134,7 @@ app.whenReady().then(async () => {
 <script>
 const { ipcRenderer } = require('electron')
 
-function doWork(input) {
+const doWork = (input) => {
   // Something cpu-intensive.
   return input * 2
 }
@@ -185,7 +185,7 @@ stream of data.
 ```js
 // renderer.js ///////////////////////////////////////////////////////////////
 
-function makeStreamingRequest (element, callback) {
+const makeStreamingRequest = (element, callback) => {
   // MessageChannels are lightweight--it's cheap to create a new one for each
   // request.
   const { port1, port2 } = new MessageChannel()

docs/tutorial/notifications.md

@@ -54,7 +54,7 @@ const { Notification } = require('electron')
 const NOTIFICATION_TITLE = 'Basic Notification'
 const NOTIFICATION_BODY = 'Notification from the Main process'
 
-function showNotification () {
+const showNotification = () => {
   new Notification({ title: NOTIFICATION_TITLE, body: NOTIFICATION_BODY }).show()
 }
 

docs/tutorial/online-offline-events.md

@@ -41,7 +41,7 @@ Starting with an HTML file `index.html`, this example will demonstrate how the `
 In order to mutate the DOM, create a `renderer.js` file that adds event listeners to the `'online'` and `'offline'` `window` events. The event handler sets the content of the `<strong id='status'>` element depending on the result of `navigator.onLine`.
 
 ```js title='renderer.js'
-function updateOnlineStatus () {
+const updateOnlineStatus = () => {
   document.getElementById('status').innerHTML = navigator.onLine ? 'online' : 'offline'
 }
 
@@ -56,7 +56,7 @@ Finally, create a `main.js` file for main process that creates the window.
 ```js title='main.js'
 const { app, BrowserWindow } = require('electron')
 
-function createWindow () {
+const createWindow = () => {
   const onlineStatusWindow = new BrowserWindow({
     width: 400,
     height: 100

docs/tutorial/process-model.md

@@ -84,7 +84,7 @@ uses `app` APIs to create a more native application window experience.
 
 ```js title='main.js'
 // quitting the app when no windows are open on macOS
-app.on('window-all-closed', function () {
+app.on('window-all-closed', () => {
   if (process.platform !== 'darwin') app.quit()
 })
 ```

docs/tutorial/progress-bar.md

@@ -48,7 +48,7 @@ const { app, BrowserWindow } = require('electron')
 
 let progressInterval
 
-function createWindow () {
+const createWindow = () => {
   const win = new BrowserWindow({
     width: 800,
     height: 600

docs/tutorial/quick-start.md

@@ -166,7 +166,7 @@ Then, add a `createWindow()` function that loads `index.html` into a new `Browse
 instance.
 
 ```js
-function createWindow () {
+const createWindow = () => {
   const win = new BrowserWindow({
     width: 800,
     height: 600
@@ -216,7 +216,7 @@ To implement this, listen for the `app` module's [`'window-all-closed'`][window-
 event, and call [`app.quit()`][app-quit] if the user is not on macOS (`darwin`).
 
 ```js
-app.on('window-all-closed', function () {
+app.on('window-all-closed', () => {
   if (process.platform !== 'darwin') app.quit()
 })
 ```
@@ -244,7 +244,7 @@ from within your existing `whenReady()` callback.
 app.whenReady().then(() => {
   createWindow()
 
-  app.on('activate', function () {
+  app.on('activate', () => {
     if (BrowserWindow.getAllWindows().length === 0) createWindow()
   })
 })
@@ -295,7 +295,7 @@ to the `webPreferences.preload` option in your existing `BrowserWindow` construc
 const path = require('path')
 
 // modify your existing createWindow() function
-function createWindow () {
+const createWindow = () => {
   const win = new BrowserWindow({
     width: 800,
     height: 600,
@@ -360,7 +360,7 @@ The full code is available below:
 const { app, BrowserWindow } = require('electron')
 const path = require('path')
 
-function createWindow () {
+const createWindow = () => {
   // Create the browser window.
   const mainWindow = new BrowserWindow({
     width: 800,
@@ -383,7 +383,7 @@ function createWindow () {
 app.whenReady().then(() => {
   createWindow()
 
-  app.on('activate', function () {
+  app.on('activate', () => {
     // On macOS it's common to re-create a window in the app when the
     // dock icon is clicked and there are no other windows open.
     if (BrowserWindow.getAllWindows().length === 0) createWindow()
@@ -393,7 +393,7 @@ app.whenReady().then(() => {
 // Quit when all windows are closed, except on macOS. There, it's common
 // for applications and their menu bar to stay active until the user quits
 // explicitly with Cmd + Q.
-app.on('window-all-closed', function () {
+app.on('window-all-closed', () => {
   if (process.platform !== 'darwin') app.quit()
 })
 

docs/tutorial/recent-documents.md

@@ -22,7 +22,7 @@ const { app, BrowserWindow } = require('electron')
 const fs = require('fs')
 const path = require('path')
 
-function createWindow () {
+const createWindow = () => {
   const win = new BrowserWindow({
     width: 800,
     height: 600

docs/tutorial/represented-file.md

@@ -24,7 +24,7 @@ To set the represented file of window, you can use the
 const { app, BrowserWindow } = require('electron')
 const os = require('os');
 
-function createWindow () {
+const createWindow = () => {
   const win = new BrowserWindow({
     width: 800,
     height: 600

docs/tutorial/security.md

@@ -216,7 +216,7 @@ access to a `window.readConfig()` method, but no Node.js features.
 ```js
 const { readFileSync } = require('fs')
 
-window.readConfig = function () {
+window.readConfig = () => {
   const data = readFileSync('./config.json')
   return data
 }