Upgrade to N-API and Electron 11 (#2422)

* Upgrade to N-API and Electron 11

* Update Electron and remove workaround

* Fix ESLint error

.eslintrc.js

@@ -47,7 +47,10 @@ module.exports = {
     'no-mixed-operators': "off",
     'no-prototype-builtins': "off",
     'no-return-await': "off",
-    'accessor-pairs': "off"
+    'accessor-pairs': "off",
+    // Workaround #2422.
+    'template-curly-spacing': "off",
+    'indent' : "off"
   },
   settings: {
     'import/resolver': {

docs/dev/BUILD.md

@@ -10,7 +10,7 @@ git clone https://github.com/marktext/marktext.git
 
 Before you can get started developing, you need set up your build environment:
 
-- Node.js `>=v12.0.0` and yarn
+- Node.js `>=v12.17` and yarn
 - Python `v2.7` or `>=v3.5` for node-gyp
 - C++ compiler and development tools
 - Build is supported on Linux, macOS and Windows

package.json

@@ -34,20 +34,20 @@
   },
   "dependencies": {
     "@hfelix/electron-localshortcut": "^3.1.1",
-    "@hfelix/electron-spellchecker": "1.0.0-rc.5",
+    "@hfelix/electron-spellchecker": "^2.0.0",
     "@octokit/rest": "^16.43.2",
-    "arg": "^4.1.3",
+    "arg": "^5.0.0",
     "axios": "^0.21.0",
     "ced": "^1.0.0",
     "chokidar": "^3.4.3",
     "codemirror": "^5.58.3",
     "command-exists": "^1.2.9",
-    "dayjs": "^1.9.6",
+    "dayjs": "^1.9.7",
     "dom-autoscroller": "^2.3.4",
-    "dompurify": "^2.2.2",
+    "dompurify": "^2.2.4",
     "dragula": "^3.7.3",
     "electron-is-accelerator": "^0.2.0",
-    "electron-log": "^4.3.0",
+    "electron-log": "^4.3.1",
     "electron-store": "^6.0.1",
     "electron-window-state": "^5.0.3",
     "element-resize-detector": "^1.2.1",
@@ -55,7 +55,7 @@
     "execall": "^2.0.0",
     "file-icons-js": "1.0.3",
     "flowchart.js": "^1.15.0",
-    "fontmanager-redux": "^0.4.0",
+    "fontmanager-redux": "^1.0.0",
     "fs-extra": "^9.0.1",
     "fuzzaldrin": "^2.1.0",
     "github-markdown-css": "^3.0.1",
@@ -65,8 +65,8 @@
     "joplin-turndown-plugin-gfm": "^1.0.12",
     "katex": "^0.12.0",
     "keyboard-layout": "^2.0.17",
-    "keytar": "^6.0.1",
+    "keytar": "^7.3.0",
-    "mermaid": "^8.8.3",
+    "mermaid": "^8.8.4",
     "plist": "^3.0.1",
     "popper.js": "^1.16.1",
     "prismjs": "^1.22.0",
@@ -77,7 +77,7 @@
     "underscore": "^1.12.0",
     "unsplash-js": "^6.3.0",
     "vega": "^5.17.0",
-    "vega-embed": "^6.13.0",
+    "vega-embed": "^6.14.2",
     "vega-lite": "^4.17.0",
     "vscode-ripgrep": "^1.11.1",
     "vue": "^2.6.12",
@@ -87,37 +87,37 @@
     "webfontloader": "^1.6.28"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.9",
+    "@babel/core": "^7.12.10",
     "@babel/plugin-proposal-class-properties": "^7.12.1",
     "@babel/plugin-proposal-export-default-from": "^7.12.1",
     "@babel/plugin-proposal-function-bind": "^7.12.1",
     "@babel/plugin-syntax-class-properties": "^7.12.1",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-runtime": "^7.12.1",
+    "@babel/plugin-transform-runtime": "^7.12.10",
-    "@babel/preset-env": "^7.12.7",
+    "@babel/preset-env": "^7.12.11",
-    "@babel/register": "^7.12.1",
+    "@babel/register": "^7.12.10",
     "@babel/runtime": "^7.12.5",
     "@markedjs/html-differ": "^3.0.4",
     "babel-eslint": "^10.1.0",
-    "babel-loader": "^8.2.1",
+    "babel-loader": "^8.2.2",
     "babel-plugin-component": "^1.1.1",
     "babel-plugin-istanbul": "^6.0.0",
-    "cfonts": "^2.8.6",
+    "cfonts": "^2.9.0",
     "chai": "^4.2.0",
     "chalk": "^4.1.0",
     "cheerio": "^1.0.0-rc.3",
     "copy-webpack-plugin": "^5.1.2",
-    "cross-env": "^7.0.2",
+    "cross-env": "^7.0.3",
     "css-loader": "^3.6.0",
     "del": "^5.1.0",
     "devtron": "^1.4.0",
     "dotenv": "^8.2.0",
-    "electron": "^8.5.5",
+    "electron": "^11.1.0",
-    "electron-builder": "^22.9.1",
+    "electron-builder": "^22.10.3",
     "electron-devtools-installer": "^3.1.1",
-    "electron-rebuild": "^2.3.2",
+    "electron-rebuild": "^2.3.4",
-    "electron-updater": "^4.3.5",
+    "electron-updater": "^4.3.7",
-    "eslint": "^7.14.0",
+    "eslint": "^7.15.0",
     "eslint-config-standard": "^14.1.1",
     "eslint-friendly-formatter": "^4.0.1",
     "eslint-import-resolver-alias": "^1.1.2",
@@ -131,7 +131,7 @@
     "esm": "^3.2.25",
     "file-loader": "^6.2.0",
     "git-revision-webpack-plugin": "^3.0.6",
-    "html-webpack-plugin": "^4.4.1",
+    "html-webpack-plugin": "^4.5.0",
     "imports-loader": "^0.8.0",
     "karma": "^5.2.3",
     "karma-chai": "^0.1.0",
@@ -142,7 +142,7 @@
     "karma-spec-reporter": "0.0.32",
     "karma-webpack": "^4.0.2",
     "license-checker": "^25.0.1",
-    "marked": "^1.2.5",
+    "marked": "^1.2.7",
     "mini-css-extract-plugin": "^0.12.0",
     "mocha": "^7.2.0",
     "multispinner": "^0.2.1",
@@ -152,7 +152,7 @@
     "postcss-preset-env": "^6.7.0",
     "raw-loader": "^4.0.2",
     "require-dir": "^1.2.0",
-    "spectron": "^10.0.1",
+    "spectron": "^13.0.0",
     "style-loader": "^1.3.0",
     "svg-sprite-loader": "^4.3.0",
     "svgo": "^1.3.2",
@@ -160,7 +160,7 @@
     "to-string-loader": "^1.1.6",
     "url-loader": "^4.1.1",
     "vue-html-loader": "^1.2.4",
-    "vue-loader": "^15.9.5",
+    "vue-loader": "^15.9.6",
     "vue-style-loader": "^4.1.2",
     "vue-template-compiler": "^2.6.12",
     "webpack": "^4.44.2",

src/common/filesystem/paths.js

@@ -2,6 +2,8 @@ import fs from 'fs-extra'
 import path from 'path'
 import { isFile, isFile2, isSymbolicLink } from './index'
 
+const isOsx = process.platform === 'darwin'
+
 export const MARKDOWN_EXTENSIONS = Object.freeze([
   'markdown',
   'mdown',
@@ -103,3 +105,17 @@ export const isChildOfDirectory = (dir, child) => {
   const relative = path.relative(dir, child)
   return relative && !relative.startsWith('..') && !path.isAbsolute(relative)
 }
+
+export const getResourcesPath = () => {
+  let resPath = process.resourcesPath
+  if (process.env.NODE_ENV === 'development') {
+    // Default locations:
+    //   Linux/Windows: node_modules/electron/dist/resources/
+    //   macOS: node_modules/electron/dist/Electron.app/Contents/Resources
+    if (isOsx) {
+      resPath = path.join(resPath, '../..')
+    }
+    resPath = path.join(resPath, '../../../../resources')
+  }
+  return resPath
+}

src/main/config.js

@@ -7,6 +7,8 @@ export const editorWinOptions = Object.freeze({
   minHeight: 350,
   webPreferences: {
     enableRemoteModule: true,
+    contextIsolation: false,
+    spellcheck: false,
     nodeIntegration: true,
     webSecurity: false
   },
@@ -22,6 +24,8 @@ export const preferencesWinOptions = Object.freeze({
   height: 650,
   webPreferences: {
     enableRemoteModule: true,
+    contextIsolation: false,
+    spellcheck: false,
     nodeIntegration: true,
     webSecurity: false
   },

src/main/dataCenter/index.js

@@ -151,7 +151,7 @@ class DataCenter extends EventEmitter {
       return
     }
 
-    Object.keys(settings).map(key => {
+    Object.keys(settings).forEach(key => {
       this.setItem(key, settings[key])
     })
   }

src/main/exceptionHandler.js

@@ -114,7 +114,8 @@ const setupExceptionHandler = () => {
     companyName: 'marktext',
     productName: 'marktext',
     submitURL: 'http://0.0.0.0/',
-    uploadToServer: false
+    uploadToServer: false,
+    compress: true
   })
 }
 

src/main/index.js

@@ -9,8 +9,6 @@ import Accessor from './app/accessor'
 import setupEnvironment from './app/env'
 import { getLogLevel } from './utils'
 
-app.allowRendererProcessReuse = false
-
 const initializeLogger = appEnvironment => {
   log.transports.console.level = process.env.NODE_ENV === 'development' ? true : 'error'
   log.transports.rendererConsole = null

src/main/preferences/hunspell.js

@@ -1,22 +1,12 @@
 import path from 'path'
 import fs from 'fs-extra'
 import log from 'electron-log'
-import { isOsx } from '../config'
+import { getResourcesPath } from 'common/filesystem/paths'
 
 // This is an asynchronous function to not block the process. The spell checker may be
 // diabled on first application start because the dictionary doesn't exists or is incomplete.
 export default async appDataPath => {
-  let srcPath = process.resourcesPath
+  const srcPath = path.join(getResourcesPath(), 'hunspell_dictionaries/en-US.bdic')
-  if (process.env.NODE_ENV === 'development') {
-    // Default locations:
-    //   Linux/Windows: node_modules/electron/dist/resources/
-    //   macOS: node_modules/electron/dist/Electron.app/Contents/Resources
-    if (isOsx) {
-      srcPath = path.join(srcPath, '../..')
-    }
-    srcPath = path.join(srcPath, '../../../../resources')
-  }
-  srcPath = path.join(srcPath, 'hunspell_dictionaries/en-US.bdic')
 
   // NOTE: Hardcoded in "@hfelix/electron-spellchecker/src/spell-check-handler.js"
   const destDir = path.join(appDataPath, 'dictionaries')

src/main/preferences/index.js

@@ -107,7 +107,7 @@ class Preference extends EventEmitter {
       return
     }
 
-    Object.keys(settings).map(key => {
+    Object.keys(settings).forEach(key => {
       this.setItem(key, settings[key])
     })
   }

src/main/windows/editor.js

@@ -100,10 +100,18 @@ class EditorWindow extends BaseWindow {
       log.error(`The window failed to load or was cancelled: ${errorCode}; ${errorDescription}`)
     })
 
-    win.webContents.once('crashed', async (event, killed) => {
+    win.webContents.once('render-process-gone', async (event, { reason }) => {
-      const msg = `The renderer process has crashed unexpected or is killed (${killed}).`
+      if (reason === 'clean-exit') {
+        return
+      }
+
+      const msg = `The renderer process has crashed unexpected or is killed (${reason}).`
       log.error(msg)
 
+      if (reason === 'abnormal-exit') {
+        return
+      }
+
       const { response } = await dialog.showMessageBox(win, {
         type: 'warning',
         buttons: ['Close', 'Reload', 'Keep It Open'],

src/renderer/bootstrap.js

@@ -1,5 +1,5 @@
 import path from 'path'
-import { crashReporter, ipcRenderer } from 'electron'
+import { ipcRenderer } from 'electron'
 import log from 'electron-log'
 import RendererPaths from './node/paths'
 
@@ -50,14 +50,6 @@ const parseUrlArgs = () => {
 }
 
 const bootstrapRenderer = () => {
-  // Start crash reporter to save core dumps for the renderer process
-  crashReporter.start({
-    companyName: 'marktext',
-    productName: 'marktext',
-    submitURL: 'http://0.0.0.0/',
-    uploadToServer: false
-  })
-
   // Register renderer exception handler
   window.addEventListener('error', event => {
     if (event.error) {

src/renderer/node/paths.js

@@ -1,7 +1,7 @@
 import { rgPath } from 'vscode-ripgrep'
 import EnvPaths from 'common/envPaths'
 
-// "vscode-ripgrep" is unpacked out of asar because of the binary.
+// // "vscode-ripgrep" is unpacked out of asar because of the binary.
 const rgDiskPath = rgPath.replace(/\bapp\.asar\b/, 'app.asar.unpacked')
 
 class RendererPaths extends EnvPaths {

src/renderer/prefComponents/image/index.vue

@@ -55,7 +55,7 @@ export default {
   },
   methods: {
     openImageFolder () {
-      shell.openItem(this.imageFolderPath)
+      shell.openPath(this.imageFolderPath)
     },
     modifyImageFolderPath () {
       return this.$store.dispatch('SET_IMAGE_FOLDER_PATH')

src/renderer/spellchecker/index.js

@@ -140,7 +140,7 @@ export class SpellChecker {
       throw new Error('Invalid state.')
     }
 
-    this.provider = new SpellCheckHandler()
+    this.provider = new SpellCheckHandler(dictionaryPath)
     this.isHunspell = this.provider.isHunspell
 
     // The spell checker is now initialized but not yet enabled. You need to call `init`.

test/unit/karma.conf.js

@@ -36,6 +36,8 @@ module.exports = config => {
         browserWindowOptions: {
           webPreferences: {
             enableRemoteModule: true,
+            contextIsolation: false,
+            spellcheck: false,
             nodeIntegration: true
           }
         }