upgraded to electron 10

assets/demo-btns.js

@@ -12,15 +12,15 @@ Array.prototype.forEach.call(demoBtns, (btn) => {
     // Saves the active demo if it is open, or clears it if the demo was user
     // collapsed by the user
     if (parent.classList.contains('is-open')) {
-      settings.set('activeDemoButtonId', event.target.getAttribute('id'))
+      settings.setSync('activeDemoButtonId', event.target.getAttribute('id'))
     } else {
-      settings.delete('activeDemoButtonId')
+      settings.unset('activeDemoButtonId')
     }
   })
 })
 
 // Default to the demo that was active the last time the app was open
-const buttonId = settings.get('activeDemoButtonId')
+const buttonId = settings.getSync('activeDemoButtonId')
 if (buttonId) {
   document.getElementById(buttonId).click()
 }

assets/imports.js

@@ -1,12 +1,55 @@
-const links = document.querySelectorAll('link[rel="import"]')
+// this is deprecated since M80 https://www.chromestatus.com/features/5144752345317376
+// const links = document.querySelectorAll('link[rel="import"]')
 
-// Import and add each page to the DOM
-Array.prototype.forEach.call(links, (link) => {
-  let template = link.import.querySelector('.task-template')
-  let clone = document.importNode(template.content, true)
-  if (link.href.match('about.html')) {
-    document.querySelector('body').appendChild(clone)
-  } else {
-    document.querySelector('.content').appendChild(clone)
+// // Import and add each page to the DOM
+// Array.prototype.forEach.call(links, (link) => {
+//   let template = link.import.querySelector('.task-template')
+//   let clone = document.importNode(template.content, true)
+//   if (link.href.match('about.html')) {
+//     document.querySelector('body').appendChild(clone)
+//   } else {
+//     document.querySelector('.content').appendChild(clone)
+//     console.log(clone)
+//   }
+// })
+
+// GET can be synchronous, which we want
+// source: https://www.w3schools.com/howto/howto_html_include.asp
+// JSDOM would achieve same result with nicer code but more overhead: https://www.twilio.com/blog/web-scraping-and-parsing-html-in-node-js-with-jsdom
+function includeHTML() {
+  var links, i, elmnt, href, request;
+  /* Loop through a collection of all HTML elements: */
+  links = document.querySelectorAll('link[rel="import"]');
+  // console.log(links)
+  for (i = 0; i < links.length; i++) {
+    elmnt = links[i];
+    /*search for elements with a certain atrribute:*/
+    href = elmnt.getAttribute('href');
+    // console.log(href)
+    if (href) {
+      /* Make an HTTP request using the attribute value as the file name: */
+      request = new XMLHttpRequest();
+      request.onreadystatechange = function() {
+        if (this.readyState == 4) {
+          if (this.status == 200) {elmnt.innerHTML = this.responseText;}
+          if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
+          // console.log(elmnt)                // <link ref="import" href="sections/windows/crash-hang.html">
+          let template = elmnt.querySelector('.task-template')
+          let clone = document.importNode(template.content, true)
+          if (href.match('about.html')) {
+            document.querySelector('body').appendChild(clone)
+          } else {
+            document.querySelector('.content').appendChild(clone)
+          }
+          elmnt.remove(); 
+          includeHTML();
+        }
+      }
+      request.open("GET", href, false);     // `false` makes the request synchronous
+      request.send();
+      /* Exit the function: */
+      return;
+    }
   }
-})
+}
+includeHTML();

assets/nav.js

@@ -22,7 +22,7 @@ function handleSectionTrigger (event) {
 
   // Save currently active button in localStorage
   const buttonId = event.target.getAttribute('id')
-  settings.set('activeSectionButtonId', buttonId)
+  settings.setSync('activeSectionButtonId', buttonId)
 }
 
 function activateDefaultSection () {
@@ -65,7 +65,7 @@ function displayAbout () {
 }
 
 // Default to the view that was active the last time the app was open
-const sectionId = settings.get('activeSectionButtonId')
+const sectionId = settings.getSync('activeSectionButtonId')
 if (sectionId) {
   showMainContent()
   const section = document.getElementById(sectionId)

index.html

@@ -108,6 +108,16 @@ <h5 class="nav-category">
     require('./assets/demo-btns')
     require('./assets/code-blocks')
     require('./assets/normalize-shortcuts')
+    // Require each JS file in the renderer-process dir
+    function loadRenderers() {
+      const path = require('path')
+      const glob = require('glob')
+      const files = glob.sync(path.join(__dirname, 'renderer-process/**/*.js'))
+      files.forEach((file) => { 
+        require(file) 
+      });
+    }
+    loadRenderers()
   </script>
 </body>
 </html>

main-process/menus/application-menu.js

@@ -172,7 +172,8 @@ function findReopenMenuItem () {
 }
 
 if (process.platform === 'darwin') {
-  const name = app.getName()
+  // const name = app.getName()      // (electron) 'getName function' is deprecated and will be removed. Please use 'name property' instead.
+  const name = app.name
   template.unshift({
     label: name,
     submenu: [{

main.js

@@ -18,13 +18,17 @@ function initialize () {
   loadDemos()
 
   function createWindow () {
+    // https://www.electronjs.org/docs/api/browser-window
     const windowOptions = {
       width: 1080,
       minWidth: 680,
       height: 840,
-      title: app.getName(),
+      // title: app.getName(),                // (electron) 'getName function' is deprecated and will be removed. Please use 'name property' instead.
+      title: app.name,
       webPreferences: {
-        nodeIntegration: true
+        nodeIntegration: true,                // will let you access node everywhere. security concern? for a desktop app? i doubt it.
+        worldSafeExecuteJavaScript: true,     // (electron) Security Warning: webFrame.executeJavaScript was called without worldSafeExecuteJavaScript enabled. This is considered unsafe. worldSafeExecuteJavaScript will be enabled by default in Electron 12.
+        enableRemoteModule: true,             // https://github.com/nathanbuchar/electron-settings For Electron v10+, if you want to use electron-settings within a browser window, be sure to set the enableRemoteModule web preference to true. Otherwise you might get the error Cannot read property 'app' of undefined
       }
     }
 
@@ -39,7 +43,9 @@ function initialize () {
     if (debug) {
       mainWindow.webContents.openDevTools()
       mainWindow.maximize()
-      require('devtron').install()
+      // https://github.com/electron/electron/issues/22117
+      // https://github.com/electron/electron/issues/23662
+      // require('devtron').install()
     }
 
     mainWindow.on('closed', () => {

package.json

@@ -32,31 +32,32 @@
   "author": "GitHub",
   "license": "MIT",
   "devDependencies": {
-    "@octokit/rest": "^16.3.2",
-    "chai": "^3.4.1",
-    "chai-as-promised": "^6.0.0",
+    "@octokit/rest": "^18.0.6",
+    "chai": "^4.2.0",
+    "chai-as-promised": "^7.1.1",
     "check-for-leaks": "^1.2.1",
-    "devtron": "^1.3.0",
-    "electron-packager": "^12.1.0",
-    "electron-winstaller": "^2.2.0",
-    "husky": "^0.14.3",
-    "mocha": "^5.2.0",
-    "npm-run-all": "^4.0.2",
+    "devtron": "^1.4.0",
+    "electron-packager": "^15.1.0",
+    "electron-winstaller": "^4.0.1",
+    "husky": "^4.3.0",
+    "mocha": "^8.1.3",
+    "npm-run-all": "^4.1.5",
     "request": "^2.70.0",
-    "rimraf": "^2.5.2",
-    "signcode": "^0.5.0",
-    "spectron": "^5.0.0",
-    "standard": "^8.2.0",
-    "tap": "^14.10.6"
+    "rimraf": "^3.0.2",
+    "signcode": "^1.0.0",
+    "spectron": "^12.0.0",
+    "standard": "^14.3.4",
+    "tap": "^14.10.8"
   },
   "dependencies": {
-    "electron": "^7.2.4",
-    "electron-log": "^2.2.14",
-    "electron-settings": "^3.0.7",
+    "@webcomponents/webcomponentsjs": "^2.4.4",
+    "electron": "^10.1.3",
+    "electron-log": "^4.2.4",
+    "electron-settings": "^4.0.2",
     "electron-shortcut-normalizer": "^1.0.0",
-    "glob": "^7.1.0",
-    "highlight.js": "^9.3.0",
-    "update-electron-app": "^1.1.1"
+    "glob": "^7.1.6",
+    "highlight.js": "^10.2.1",
+    "update-electron-app": "^2.0.1"
   },
   "standard": {
     "env": {

renderer-process/system/screen-information.js

@@ -1,3 +1,5 @@
+// https://www.electronjs.org/docs/breaking-changes
+// const {screen} = require('electron')
 const {screen} = require('electron').remote
 
 const screenInfoBtn = document.getElementById('screen-info')