From 20dd2fb9376bd93a4261e58612a8befc5969470d Mon Sep 17 00:00:00 2001 From: audioscavenger Date: Wed, 14 Oct 2020 19:57:51 -0700 Subject: [PATCH] upgraded to electron 10 - updated: settings, remote.screen, app.getName - index.html loads renderers just like main.js loads main-process - import.js imports html with XMLHttpRequest synchronously - main.js setup updated with worldSafeExecuteJavaScript, enableRemoteModule - devtron disabled Signed-off-by: audioscavenger --- assets/demo-btns.js | 6 +- assets/imports.js | 63 ++++++++++++++++--- assets/nav.js | 4 +- index.html | 10 +++ main-process/menus/application-menu.js | 3 +- main.js | 12 +++- package.json | 41 ++++++------ renderer-process/system/screen-information.js | 2 + 8 files changed, 102 insertions(+), 39 deletions(-) diff --git a/assets/demo-btns.js b/assets/demo-btns.js index b00c781f..146979c9 100644 --- a/assets/demo-btns.js +++ b/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() } diff --git a/assets/imports.js b/assets/imports.js index e5533445..213af9c4 100644 --- a/assets/imports.js +++ b/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) // + 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(); diff --git a/assets/nav.js b/assets/nav.js index 08b4a705..13e203c9 100644 --- a/assets/nav.js +++ b/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) diff --git a/index.html b/index.html index b5b8b8af..f3fd0e44 100644 --- a/index.html +++ b/index.html @@ -108,6 +108,16 @@
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() diff --git a/main-process/menus/application-menu.js b/main-process/menus/application-menu.js index b543889c..25d5548d 100644 --- a/main-process/menus/application-menu.js +++ b/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: [{ diff --git a/main.js b/main.js index 16fa2e25..a7d23d5b 100644 --- a/main.js +++ b/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', () => { diff --git a/package.json b/package.json index ce353d30..f71a534b 100644 --- a/package.json +++ b/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": { diff --git a/renderer-process/system/screen-information.js b/renderer-process/system/screen-information.js index bdcb37a3..2eb6c6c6 100644 --- a/renderer-process/system/screen-information.js +++ b/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')