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

@@ -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",

.gitignore

@@ -1,9 +1,8 @@
 .DS_Store
-dist/
-node_modules/
+dist
+build
+node_modules
 thumbs.db
-.idea/
-.vscode
 NOTES.md
 *.txt
 package-lock.json

.nvmrc

@@ -1 +1 @@
-v14.18.1
+v16.13.0

.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"]
+      }
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+   "conventionalCommits.scopes": [
+      "UI",
+      "core",
+      "MySQL",
+      "PostgreSQL"
+   ],
+   "svg.preview.background": "transparent"
+}

jsconfig.json

@@ -1,5 +0,0 @@
-{
-   "include": [
-     "./src/renderer/**/*"
-   ]
- }

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 <fabio286@gmail.com>",
+  "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"
   }
 }

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);

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');
-
-         // 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');
+         try {
+            const name = await installExtension(VUEJS3_DEVTOOLS, options);
+            console.log(`Added Extension: ${name}`);
+         }
+         catch (err) {
+            console.log('An error occurred: ', err);
+         }
+
+         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);

src/renderer/components/ModalSettings.vue

@@ -184,7 +184,7 @@
                            :class="{'selected': applicationTheme === 'dark'}"
                            @click="changeApplicationTheme('dark')"
                         >
-                           <img :src="require('@/images/dark.png').default" class="img-responsive img-fit-cover s-rounded">
+                           <img src="../images/dark.png" class="img-responsive img-fit-cover s-rounded">
                            <div class="theme-name text-light">
                               <i class="mdi mdi-moon-waning-crescent mdi-48px" />
                               <div class="h6 mt-4">
@@ -197,7 +197,7 @@
                            :class="{'selected': applicationTheme === 'light'}"
                            @click="changeApplicationTheme('light')"
                         >
-                           <img :src="require('@/images/light.png').default" class="img-responsive img-fit-cover s-rounded">
+                           <img src="../images/light.png" class="img-responsive img-fit-cover s-rounded">
                            <div class="theme-name text-dark">
                               <i class="mdi mdi-white-balance-sunny mdi-48px" />
                               <div class="h6 mt-4">
@@ -280,7 +280,7 @@
 
                <div v-show="selectedTab === 'about'" class="panel-body py-4">
                   <div class="text-center">
-                     <img :src="require('@/images/logo.svg').default" width="128">
+                     <img src="../images/logo.svg" width="128">
                      <h4>{{ appName }}</h4>
                      <p>
                         {{ $t('word.version') }} {{ appVersion }}<br>

src/renderer/components/TheTitleBar.vue

@@ -5,7 +5,7 @@
          <img
             v-if="!isMacOS"
             class="titlebar-logo"
-            :src="require('@/images/logo.svg').default"
+            src="@/images/logo.svg"
          >
       </div>
       <div class="titlebar-elements titlebar-title">

src/renderer/components/WorkspaceEmptyState.vue

@@ -1,7 +1,16 @@
 <template>
    <div class="column col-12 empty">
       <div class="empty-icon">
-         <img :src="require(`@/images/logo-${applicationTheme}.svg`).default" width="200">
+         <img
+            v-if="applicationTheme === 'dark'"
+            src="../images/logo-dark.svg"
+            width="200"
+         >
+         <img
+            v-if="applicationTheme === 'light'"
+            src="../images/logo-light.svg"
+            width="200"
+         >
       </div>
       <p class="h6 empty-subtitle">
          {{ $t('message.noOpenTabs') }}

src/renderer/index.ejs

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+   <meta charset="utf-8" />
+   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+   <title></title>
+   <script>
+      global = globalThis
+   </script>
+   <% if (htmlWebpackPlugin.options.nodeModules) { %>
+      <script>
+         require('module').globalPaths.push(
+            `<%= htmlWebpackPlugin.options.nodeModules.replace(/\\/g, '\\\\') %>`
+         )
+      </script>
+   <% } %>
+</head>
+<body>
+   <div id="app"></div>
+   <!-- webpack builds are automatically injected -->
+</body>
+</html>

webpack.config.js

@@ -1,27 +0,0 @@
-const webpack = require('webpack');
-
-module.exports = {
-   stats: 'errors-warnings',
-   plugins: [
-      new webpack.DefinePlugin({
-         'process.env': {
-            PACKAGE_VERSION: JSON.stringify(require('./package.json').version)
-         }
-      })
-   ],
-   module: {
-      rules: [
-         {
-            test: /\.scss$/,
-            use: [
-               {
-                  loader: 'sass-loader',
-                  options: {
-                     additionalData: '@import "@/scss/_variables.scss";'
-                  }
-               }
-            ]
-         }
-      ]
-   }
-};

webpack.main.config.js

@@ -0,0 +1,70 @@
+const path = require('path');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const ProgressPlugin = require('progress-webpack-plugin');
+
+const { dependencies, devDependencies } = require('./package.json');
+
+const externals = Object.keys(dependencies).concat(Object.keys(devDependencies));
+const isDevMode = process.env.NODE_ENV === 'development';
+const whiteListedModules = [];
+
+module.exports = [
+   { // Main
+      name: 'main',
+      mode: process.env.NODE_ENV,
+      devtool: isDevMode ? 'eval-source-map' : false,
+      entry: {
+         main: path.join(__dirname, './src/main/main.js')
+      },
+      target: 'electron-main',
+      output: {
+         libraryTarget: 'commonjs2',
+         path: path.join(__dirname, 'dist'),
+         filename: '[name].js'
+      },
+      node: {
+         global: true,
+         __dirname: isDevMode,
+         __filename: isDevMode
+      },
+      externals: externals.filter((d) => !whiteListedModules.includes(d)),
+      resolve: {
+         extensions: ['.js', '.json'],
+         alias: {
+            src: path.join(__dirname, 'src/'),
+            common: path.resolve(__dirname, 'src/common')
+         },
+         fallback: {
+            'pg-native': false,
+            'cpu-features': false,
+            cardinal: false
+         }
+      },
+      plugins: [
+         new ProgressPlugin(true),
+         new CleanWebpackPlugin({ root: path.join(__dirname, 'dist') })
+      ],
+      module: {
+         rules: [
+            {
+               test: /\.node$/,
+               loader: 'node-loader',
+               options: {
+                  name: '[path][name].[ext]'
+               }
+            },
+            {
+               test: /\.js$/,
+               exclude: /node_modules/,
+               loader: 'babel-loader'
+            },
+            {
+               test: /\.(png|jpg|gif)$/,
+               use: [{
+                  loader: 'file-loader'
+               }]
+            }
+         ]
+      }
+   }
+];

webpack.renderer.config.js

@@ -0,0 +1,147 @@
+const path = require('path');
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const { VueLoaderPlugin } = require('vue-loader');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const ProgressPlugin = require('progress-webpack-plugin');
+
+const { dependencies, devDependencies, version } = require('./package.json');
+
+const externals = Object.keys(dependencies).concat(Object.keys(devDependencies));
+const isDevMode = process.env.NODE_ENV === 'development';
+const whiteListedModules = ['vue'];
+
+const config = {
+   name: 'renderer',
+   mode: process.env.NODE_ENV,
+   devtool: isDevMode ? 'eval-source-map' : false,
+   entry: {
+      renderer: path.join(__dirname, './src/renderer/index.js')
+   },
+   target: 'electron-renderer',
+   output: {
+      libraryTarget: 'commonjs2',
+      path: path.resolve(__dirname, 'dist'),
+      filename: '[name].js',
+      publicPath: ''
+   },
+   node: {
+      global: true,
+      __dirname: isDevMode,
+      __filename: isDevMode
+   },
+   externals: externals.filter((d) => !whiteListedModules.includes(d)),
+   resolve: {
+      alias: {
+         vue$: 'vue/dist/vue.common.js',
+         common: path.resolve(__dirname, 'src/common'),
+         '@': path.resolve(__dirname, 'src/renderer')
+      },
+      extensions: ['', '.js', '.vue', '.json'],
+      fallback: {
+         fs: false,
+         path: false,
+         util: false,
+         crypto: false,
+         assert: false,
+         os: false
+      }
+   },
+   plugins: [
+      new ProgressPlugin(true),
+      new HtmlWebpackPlugin({
+         excludeChunks: ['processTaskWorker'],
+         filename: 'index.html',
+         template: path.resolve(__dirname, 'src/renderer/index.ejs'),
+         nodeModules: isDevMode
+            ? path.resolve(__dirname, '../node_modules')
+            : false
+      }),
+      new MiniCssExtractPlugin({
+         filename: '[name].css',
+         chunkFilename: '[id].css'
+      }),
+      new VueLoaderPlugin(),
+      new webpack.DefinePlugin({
+         'process.env': {
+            PACKAGE_VERSION: `"${version}"`
+         }
+      })
+   ],
+   module: {
+      rules: [
+         {
+            test: /\.js$/,
+            use: 'babel-loader',
+            exclude: /node_modules/
+         },
+         {
+            test: /\.node$/,
+            use: 'node-loader'
+         },
+         {
+            test: /\.vue$/,
+            loader: 'vue-loader'
+         },
+         {
+            test: /\.s(c|a)ss$/,
+            use: [
+               { loader: MiniCssExtractPlugin.loader },
+               { loader: 'css-loader' },
+               {
+                  loader: 'sass-loader',
+                  options: {
+                     additionalData: '@import "@/scss/_variables.scss";',
+                     sassOptions: { quietDeps: true }
+                  }
+               }
+            ]
+         },
+         {
+            test: /\.css$/,
+            use: [
+               {
+                  loader: MiniCssExtractPlugin.loader,
+                  options: {
+                     publicPath: ''
+                  }
+               },
+               {
+                  loader: 'css-loader',
+                  options: {
+                     url: true
+                  }
+               }
+            ]
+         },
+         {
+            test: /\.(png|jpe?g|gif|tif?f|bmp|webp|svg)(\?.*)?$/,
+            type: 'asset/resource',
+            generator: {
+               filename: 'images/[hash][ext][query]'
+            }
+         },
+         {
+            test: /\.(woff|woff2|ttf|eot)$/,
+            type: 'asset',
+            parser: {
+               dataUrlCondition: {
+                  maxSize: 8 * 1024
+               }
+            },
+            generator: {
+               filename: 'fonts/[hash][ext][query]'
+            }
+         }
+      ]
+   }
+};
+
+if (isDevMode) {
+   // any dev only config
+   config.plugins.push(
+      new webpack.HotModuleReplacementPlugin()
+   );
+}
+
+module.exports = config;