From 0cd182546bc9bacb2f65a54a36baa39906275239 Mon Sep 17 00:00:00 2001 From: Fabio Di Stasio Date: Sun, 31 Oct 2021 10:36:45 +0100 Subject: [PATCH] build: electron-webpack replacement (#130) * some changes * improvements and dedicated webpeck configs for render and main * added debugging setup * vscode main process debug config * vue3 devtools --- .eslintrc | 1 + .gitignore | 7 +- .nvmrc | 2 +- .vscode/launch.json | 29 + .vscode/settings.json | 9 + {build => assets}/appx/LargeTile.png | Bin {build => assets}/appx/SmallTile.png | Bin {build => assets}/appx/Square150x150Logo.png | Bin {build => assets}/appx/Square44x44Logo.png | Bin {build => assets}/appx/StoreLogo.png | Bin {build => assets}/appx/Wide310x150Logo.png | Bin {build => assets}/icon.icns | Bin {build => assets}/icon.ico | Bin jsconfig.json | 5 - package.json | 47 +- scripts/devRunner.js | 130 +++ src/main/{index.js => main.js} | 32 +- src/renderer/components/ModalSettings.vue | 6 +- src/renderer/components/TheTitleBar.vue | 2 +- .../components/WorkspaceEmptyState.vue | 11 +- src/renderer/i18n/vi-VN.js | 824 +++++++++--------- src/renderer/index.ejs | 22 + src/renderer/{main.js => index.js} | 0 webpack.config.js | 27 - webpack.main.config.js | 70 ++ webpack.renderer.config.js | 147 ++++ 26 files changed, 893 insertions(+), 478 deletions(-) create mode 100644 .vscode/launch.json create mode 100644 .vscode/settings.json rename {build => assets}/appx/LargeTile.png (100%) rename {build => assets}/appx/SmallTile.png (100%) rename {build => assets}/appx/Square150x150Logo.png (100%) rename {build => assets}/appx/Square44x44Logo.png (100%) rename {build => assets}/appx/StoreLogo.png (100%) rename {build => assets}/appx/Wide310x150Logo.png (100%) rename {build => assets}/icon.icns (100%) rename {build => assets}/icon.ico (100%) delete mode 100644 jsconfig.json create mode 100644 scripts/devRunner.js rename src/main/{index.js => main.js} (78%) create mode 100644 src/renderer/index.ejs rename src/renderer/{main.js => index.js} (100%) delete mode 100644 webpack.config.js create mode 100644 webpack.main.config.js create mode 100644 webpack.renderer.config.js diff --git a/.eslintrc b/.eslintrc index 53e07d3c..5c86654c 100644 --- a/.eslintrc +++ b/.eslintrc @@ -46,6 +46,7 @@ "no-undef": "off", "vue/no-side-effects-in-computed-properties": "off", "vue/require-default-prop": "off", + "vue/comment-directive": "off", "vue/no-v-html": "off", "vue/html-indent": [ "error", diff --git a/.gitignore b/.gitignore index dcff5022..60bac061 100644 --- a/.gitignore +++ b/.gitignore @@ -1,9 +1,8 @@ .DS_Store -dist/ -node_modules/ +dist +build +node_modules thumbs.db -.idea/ -.vscode NOTES.md *.txt package-lock.json \ No newline at end of file diff --git a/.nvmrc b/.nvmrc index e24183e5..ff650592 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -v14.18.1 +v16.13.0 diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 00000000..a6027bca --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,29 @@ +{ + "version": "0.2.0", + "configurations": [ + { + "cwd": "${workspaceFolder}", + "name": "Electron: Main", + "port": 9222, + "protocol": "inspector", + "request": "attach", + "sourceMaps": true, + "type": "node", + "timeout": 1000000 + }, + { + "name": "Electron: Renderer", + "port": 9223, + "request": "attach", + "sourceMaps": true, + "type": "chrome", + "webRoot": "${workspaceFolder}" + } + ], + "compounds": [ + { + "name": "Electron: All", + "configurations": ["Electron: Main", "Electron: Renderer"] + } + ] +} \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..5b0c8130 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,9 @@ +{ + "conventionalCommits.scopes": [ + "UI", + "core", + "MySQL", + "PostgreSQL" + ], + "svg.preview.background": "transparent" +} \ No newline at end of file diff --git a/build/appx/LargeTile.png b/assets/appx/LargeTile.png similarity index 100% rename from build/appx/LargeTile.png rename to assets/appx/LargeTile.png diff --git a/build/appx/SmallTile.png b/assets/appx/SmallTile.png similarity index 100% rename from build/appx/SmallTile.png rename to assets/appx/SmallTile.png diff --git a/build/appx/Square150x150Logo.png b/assets/appx/Square150x150Logo.png similarity index 100% rename from build/appx/Square150x150Logo.png rename to assets/appx/Square150x150Logo.png diff --git a/build/appx/Square44x44Logo.png b/assets/appx/Square44x44Logo.png similarity index 100% rename from build/appx/Square44x44Logo.png rename to assets/appx/Square44x44Logo.png diff --git a/build/appx/StoreLogo.png b/assets/appx/StoreLogo.png similarity index 100% rename from build/appx/StoreLogo.png rename to assets/appx/StoreLogo.png diff --git a/build/appx/Wide310x150Logo.png b/assets/appx/Wide310x150Logo.png similarity index 100% rename from build/appx/Wide310x150Logo.png rename to assets/appx/Wide310x150Logo.png diff --git a/build/icon.icns b/assets/icon.icns similarity index 100% rename from build/icon.icns rename to assets/icon.icns diff --git a/build/icon.ico b/assets/icon.ico similarity index 100% rename from build/icon.ico rename to assets/icon.ico diff --git a/jsconfig.json b/jsconfig.json deleted file mode 100644 index 8c849748..00000000 --- a/jsconfig.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "include": [ - "./src/renderer/**/*" - ] - } \ No newline at end of file diff --git a/package.json b/package.json index cb07f243..37b90499 100644 --- a/package.json +++ b/package.json @@ -6,22 +6,38 @@ "license": "MIT", "repository": "https://github.com/Fabio286/antares.git", "scripts": { - "dev": "cross-env NODE_ENV=development electron-webpack dev", - "compile": "electron-webpack", + "debug": "npm run rebuild:electron && npm run debug-runner", + "debug-runner": "node scripts/devRunner.js --remote-debug", + "compile": "npm run compile:main && npm run compile:renderer", + "compile:main": "webpack --mode=production --config webpack.main.config.js", + "compile:renderer": "webpack --mode=production --config webpack.renderer.config.js", "build": "cross-env NODE_ENV=production npm run compile", "build:local": "npm run build && electron-builder", "build:appx": "npm run build:local -- --win appx", + "rebuild:electron": "npm run postinstall && electron-rebuild", "release": "standard-version", "release:pre": "npm run release -- --prerelease alpha", + "postinstall": "electron-builder install-app-deps", "test": "npm run lint", "lint": "eslint . --ext .js,.vue && stylelint \"./src/**/*.{css,scss,sass,vue}\"", - "lint:fix": "eslint . --ext .js,.vue --fix && stylelint \"./src/**/*.{css,scss,sass,vue}\" --fix", - "postinstall": "electron-builder install-app-deps" + "lint:fix": "eslint . --ext .js,.vue --fix && stylelint \"./src/**/*.{css,scss,sass,vue}\" --fix" }, "author": "Fabio Di Stasio ", + "main": "./dist/main.js", "build": { "appId": "com.fabio286.antares", "artifactName": "${productName}-${version}-${os}_${arch}.${ext}", + "asar": true, + "directories": { + "output": "build", + "buildResources": "assets" + }, + "asarUnpack": "**\\*.{node,dll}", + "files": [ + "dist/**/*", + "node_modules", + "package.json" + ], "win": { "target": [ "nsis", @@ -81,11 +97,6 @@ ] } }, - "electronWebpack": { - "renderer": { - "webpackConfig": "webpack.config.js" - } - }, "dependencies": { "@electron/remote": "^2.0.1", "@mdi/font": "^6.1.95", @@ -110,28 +121,40 @@ }, "devDependencies": { "@babel/eslint-parser": "^7.15.7", + "@babel/preset-env": "^7.15.8", "babel-loader": "^8.2.3", + "chalk": "^4.1.2", + "clean-webpack-plugin": "^4.0.0", "cross-env": "^7.0.2", + "css-loader": "^6.5.0", "electron": "^15.3.0", "electron-builder": "^22.13.1", "electron-devtools-installer": "^3.2.0", - "electron-webpack": "^2.8.2", - "electron-webpack-vue": "^2.4.0", + "electron-rebuild": "^3.2.3", "eslint": "^7.32.0", "eslint-config-standard": "^16.0.3", "eslint-plugin-import": "^2.24.2", "eslint-plugin-node": "^11.1.0", "eslint-plugin-promise": "^5.1.0", "eslint-plugin-vue": "^7.18.0", + "file-loader": "^6.2.0", + "html-webpack-plugin": "^5.5.0", + "mini-css-extract-plugin": "^2.4.3", + "node-loader": "^2.0.0", + "progress-webpack-plugin": "^1.0.12", "sass": "^1.42.1", "sass-loader": "^10.2.0", "standard-version": "^9.3.1", + "style-loader": "^3.3.1", "stylelint": "^13.13.1", "stylelint-config-standard": "^22.0.0", "stylelint-scss": "^3.21.0", + "tree-kill": "^1.2.2", "vue": "^2.6.14", "vue-loader": "^15.9.8", "vue-template-compiler": "^2.6.14", - "webpack": "^4.46.0" + "webpack": "^5.60.0", + "webpack-cli": "^4.9.1", + "webpack-dev-server": "^3.11.2" } } diff --git a/scripts/devRunner.js b/scripts/devRunner.js new file mode 100644 index 00000000..bfbea89d --- /dev/null +++ b/scripts/devRunner.js @@ -0,0 +1,130 @@ +process.env.NODE_ENV = 'development'; +// process.env.ELECTRON_ENABLE_LOGGING = true + +const chalk = require('chalk'); +const electron = require('electron'); +const webpack = require('webpack'); +const WebpackDevServer = require('webpack-dev-server'); +const kill = require('tree-kill'); + +const path = require('path'); +const { spawn } = require('child_process'); + +const mainConfig = require('../webpack.main.config'); +const rendererConfig = require('../webpack.renderer.config'); +// const workersConfig = require('../webpack.workers.config'); + +let electronProcess = null; +let manualRestart = null; +const remoteDebugging = process.argv.includes('--remote-debug'); + +if (remoteDebugging) { + // disable dvtools open in electron + process.env.RENDERER_REMOTE_DEBUGGING = true; +} + +async function killElectron (pid) { + return new Promise((resolve, reject) => { + if (pid) { + kill(pid, 'SIGKILL', err => { + if (err) reject(err); + + resolve(); + }); + } + else + resolve(); + }); +} + +async function restartElectron () { + console.log(chalk.gray('\nStarting electron...')); + + const { pid } = electronProcess || {}; + await killElectron(pid); + + electronProcess = spawn(electron, [ + path.join(__dirname, '../dist/main.js'), + // '--enable-logging', // Enable to show logs from all electron processes + remoteDebugging ? '--inspect=9222' : '', + remoteDebugging ? '--remote-debugging-port=9223' : '' + ]); + + electronProcess.stdout.on('data', data => { + console.log(chalk.white(data.toString())); + }); + + electronProcess.stderr.on('data', data => { + console.error(chalk.red(data.toString())); + }); + + electronProcess.on('exit', (code, signal) => { + if (!manualRestart) process.exit(0); + }); +} + +function startMain () { + const webpackSetup = webpack(mainConfig); + + webpackSetup.compilers.forEach((compiler) => { + const { name } = compiler; + + switch (name) { + case 'workers': + compiler.hooks.afterEmit.tap('afterEmit', async () => { + console.log(chalk.gray(`\nCompiled ${name} script!`)); + console.log( + chalk.gray(`\nWatching file changes for ${name} script...`) + ); + }); + break; + case 'main': + default: + compiler.hooks.afterEmit.tap('afterEmit', async () => { + console.log(chalk.gray(`\nCompiled ${name} script!`)); + + manualRestart = true; + await restartElectron(); + + setTimeout(() => { + manualRestart = false; + }, 2500); + + console.log( + chalk.gray(`\nWatching file changes for ${name} script...`) + ); + }); + break; + } + }); + + webpackSetup.watch({ aggregateTimeout: 500 }, err => { + if (err) console.error(chalk.red(err)); + }); +} + +function startRenderer (callback) { + const compiler = webpack(rendererConfig); + const { name } = compiler; + + compiler.hooks.afterEmit.tap('afterEmit', () => { + console.log(chalk.gray(`\nCompiled ${name} script!`)); + console.log(chalk.gray(`\nWatching file changes for ${name} script...`)); + }); + + const server = new WebpackDevServer(compiler, { + contentBase: path.join(__dirname, '../'), + hot: true, + noInfo: true, + overlay: true, + clientLogLevel: 'warning' + }); + + server.listen(9080, '', err => { + if (err) console.error(chalk.red(err)); + + callback(); + }); +} + +startRenderer(startMain); diff --git a/src/main/index.js b/src/main/main.js similarity index 78% rename from src/main/index.js rename to src/main/main.js index cb86a662..405d6844 100644 --- a/src/main/index.js +++ b/src/main/main.js @@ -44,17 +44,26 @@ async function createMainWindow () { remoteMain.enable(window.webContents); try { - if (isDevelopment) { // - await window.loadURL(`http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}`); + if (isDevelopment) { + const { default: installExtension, VUEJS3_DEVTOOLS } = require('electron-devtools-installer'); + const options = { + loadExtensionOptions: { allowFileAccess: true } + }; - // const { default: installExtension, VUEJS3_DEVTOOLS } = require('electron-devtools-installer'); + try { + const name = await installExtension(VUEJS3_DEVTOOLS, options); + console.log(`Added Extension: ${name}`); + } + catch (err) { + console.log('An error occurred: ', err); + } - // const oldDevToolsID = session.defaultSession.getAllExtensions().find(ext => ext.name === 'Vue.js devtools').id; - // session.defaultSession.removeExtension(oldDevToolsID); - // const toolName = await installExtension(VUEJS3_DEVTOOLS); - // console.log(toolName, 'installed'); + await window.loadURL('http://localhost:9080'); + } + else { + const indexPath = path.resolve(__dirname, 'index.html'); + await window.loadFile(indexPath); } - else await window.loadURL(new URL(`file:///${path.join(__dirname, 'index.html')}`).href); } catch (err) { console.log(err); @@ -89,10 +98,8 @@ else { app.on('activate', async () => { // on macOS it is common to re-create a window even after all windows have been closed - if (mainWindow === null) { + if (mainWindow === null) mainWindow = await createMainWindow(); - if (isDevelopment) mainWindow.webContents.openDevTools(); - } }); // create main BrowserWindow when electron is ready @@ -100,7 +107,8 @@ else { mainWindow = await createMainWindow(); createAppMenu(); - if (isDevelopment) mainWindow.webContents.openDevTools(); + if (isDevelopment) + mainWindow.webContents.openDevTools(); process.on('uncaughtException', (error) => { mainWindow.webContents.send('unhandled-exception', error); diff --git a/src/renderer/components/ModalSettings.vue b/src/renderer/components/ModalSettings.vue index 637e66af..7ea9feac 100644 --- a/src/renderer/components/ModalSettings.vue +++ b/src/renderer/components/ModalSettings.vue @@ -184,7 +184,7 @@ :class="{'selected': applicationTheme === 'dark'}" @click="changeApplicationTheme('dark')" > - +
@@ -197,7 +197,7 @@ :class="{'selected': applicationTheme === 'light'}" @click="changeApplicationTheme('light')" > - +
@@ -280,7 +280,7 @@
- +

{{ appName }}

{{ $t('word.version') }} {{ appVersion }}
diff --git a/src/renderer/components/TheTitleBar.vue b/src/renderer/components/TheTitleBar.vue index f82d6d5d..e8409793 100644 --- a/src/renderer/components/TheTitleBar.vue +++ b/src/renderer/components/TheTitleBar.vue @@ -5,7 +5,7 @@

diff --git a/src/renderer/components/WorkspaceEmptyState.vue b/src/renderer/components/WorkspaceEmptyState.vue index 77b9fd11..e35ed859 100644 --- a/src/renderer/components/WorkspaceEmptyState.vue +++ b/src/renderer/components/WorkspaceEmptyState.vue @@ -1,7 +1,16 @@