feat: node 22 and pnpm support - upgrade code and dependencies

.drone.yml

@@ -19,9 +19,6 @@ steps:
 # TODO: Fix different font rendering on different operation systems
 #  - name: cypress
 #    image: cypress/included:3.3.1
-#    environment:
-#      SENTRY_DSN: ''
-#      GA_TRACKING_ID: ''
 #    commands:
 #      - npm install
 #      - npm run test:cypress:onhost

.electron-vue/build.js

@@ -4,9 +4,7 @@ process.env.NODE_ENV = 'production'
 
 require('../env')
 const fs = require('fs').promises
-const dateFormat = require('dateformat')
 const path = require('path')
-const mkdirp = require('mkdirp')
 const chalk = require('chalk')
 const del = require('del')
 const { exec } = require('child_process')
@@ -23,9 +21,15 @@ const errorLog = chalk.bgRed.white(' ERROR ') + ' '
 const okayLog = chalk.bgBlue.white(' OKAY ') + ' '
 const isCI = process.env.CI || false
 
-if (process.env.BUILD_TARGET === 'clean') clean()
-else if (process.env.BUILD_TARGET === 'web') web()
-else build()
+let dateFormat; // Placeholder for the dateFormat module
+
+// Dynamically import the dateFormat module
+import('dateformat').then(module => {
+  dateFormat = module.default;
+  if (process.env.BUILD_TARGET === 'clean') clean()
+  else if (process.env.BUILD_TARGET === 'web') web()
+  else build()
+}).catch(error => console.error(`Failed to load module: ${error}`));
 
 function clean() {
   del.sync(['build/*', '!build/icons', '!build/icons/icon.*'])
@@ -102,7 +106,7 @@ async function setBuildVersionAndNumber() {
   const { version } = packageJson
   const buildNumber = dateFormat(new Date(), 'yyyymmdd-HHMMss', true)
 
-  await mkdirp(path.resolve(__dirname, '../build'))
+  await fs.mkdir(path.resolve(__dirname, '../build'), { recursive: true })
   await Promise.all([
     fs.writeFile(path.resolve(__dirname, '../build/.number'), buildNumber),
     fs.writeFile(path.resolve(__dirname, '../build/.version'), version),
@@ -155,18 +159,37 @@ function web() {
 }
 
 async function prepareLogo() {
-  const createIconsDir = new Promise((resolve, reject) => {
-    mkdirp(path.resolve(__dirname, '../build/icons'), (err) => {
-      if (!err) resolve()
-      else reject(err)
-    })
-  })
-
-  const generateIcons = new Promise((resolve, reject) => {
-    exec('bash .electron-vue/generate-icons.sh src/app-icon.png build', (error, stdout, stderr) => {
-      error ? reject(error) : resolve()
-    })
-  })
-
-  return createIconsDir.then(generateIcons)
-}
+	try {
+	  await fs.mkdir(path.resolve(__dirname, '../build/icons'), { recursive: true });
+	  console.log(`${doneLog}Created icons directory.`);
+	} catch (err) {
+	  console.error(`${errorLog}Failed to create icons directory: ${err}`);
+	  throw err; // Rethrow to be caught by the caller
+	}
+
+	try {
+	  const generateIconsCmd = 'bash .electron-vue/generate-icons.sh src/app-icon.png build';
+	  await execPromise(generateIconsCmd);
+	  console.log(`${doneLog}Icons generated successfully.`);
+	} catch (err) {
+	  console.error(`${errorLog}Failed to generate icons: ${err}`);
+	  throw err; // Rethrow to be caught by the caller
+	}
+  }
+
+  // Utility function to promisify exec
+  function execPromise(command) {
+	return new Promise((resolve, reject) => {
+	  exec(command, (error, stdout, stderr) => {
+		if (error) {
+		  console.error(`exec error: ${error}`);
+		  reject(error);
+		}
+		if (stderr) {
+		  console.error(`stderr: ${stderr}`);
+		}
+		console.log(`stdout: ${stdout}`);
+		resolve(stdout);
+	  });
+	});
+  }

.electron-vue/dev-runner.js

@@ -8,17 +8,14 @@ const { say } = require('cfonts')
 const { spawn } = require('child_process')
 const webpack = require('webpack')
 const WebpackDevServer = require('webpack-dev-server')
-const webpackHotMiddleware = require('webpack-hot-middleware')
 
 const mainConfig = require('./webpack.main.config')
 const rendererConfig = require('./webpack.renderer.config')
 
-rendererConfig.entry.renderer = [path.join(__dirname, 'dev-client')].concat(rendererConfig.entry.renderer)
 rendererConfig.mode = 'development'
 
 let electronProcess = null
 let manualRestart = false
-let hotMiddleware
 
 function logStats(proc, data) {
   let log = ''
@@ -42,140 +39,124 @@ function logStats(proc, data) {
   console.log(log)
 }
 
-function startRenderer(options = {}) {
-  const port = options.port || 9080
-  const webpackConfig = options.webpackConfig || rendererConfig
-
+function startRenderer() {
   return new Promise((resolve, reject) => {
-    const compiler = webpack(webpackConfig)
-    hotMiddleware = webpackHotMiddleware(compiler, {
-      log: false,
-      heartbeat: 2500
-    })
-
-    compiler.hooks.compilation.tap('compilation', compilation => {
-      compilation.hooks.htmlWebpackPluginAfterEmit.tapAsync('html-webpack-plugin-after-emit', (data, cb) => {
-        hotMiddleware.publish({ action: 'reload' })
-        cb()
-      })
-    })
-
-    compiler.hooks.done.tap('done', stats => {
-      logStats('Renderer', stats)
-    })
-
-    const server = new WebpackDevServer(
-      compiler,
-      {
-        contentBase: path.join(__dirname, '../'),
-        quiet: true,
-        before(app, ctx) {
-          app.use(hotMiddleware)
-          ctx.middleware.waitUntilValid(() => {
-            resolve(server)
-          })
-        }
+    rendererConfig.mode = 'development';
+    const compiler = webpack(rendererConfig);
+    const server = new WebpackDevServer({
+      historyApiFallback: true,
+      static: {
+        directory: path.join(__dirname, '../dist'),
+      },
+      devMiddleware: {
+        publicPath: '/',
+      },
+    }, compiler);
+
+    server.startCallback((err) => {
+      if (err) {
+        console.error(err);
+        reject(err);
+      } else {
+        console.log('WebpackDevServer started successfully on http://localhost:8080');
+        resolve();
       }
-    )
-
-    server.listen(port)
-  })
+    });
+  });
 }
 
 function startMain() {
   return new Promise((resolve, reject) => {
-    mainConfig.entry.main = [path.join(__dirname, '../src/main/index.dev.js')].concat(mainConfig.entry.main)
-    mainConfig.mode = 'development'
-    const compiler = webpack(mainConfig)
+	const mainEntryPath = path.join(__dirname, '../src/main/index.js');
+    mainConfig.mode = 'development';
+    const compiler = webpack(mainConfig);
 
     compiler.hooks.watchRun.tapAsync('watch-run', (compilation, done) => {
-      logStats('Main', chalk.white.bold('compiling...'))
-      hotMiddleware.publish({ action: 'compiling' })
-      done()
-    })
+      logStats('Main', chalk.white.bold('compiling...'));
+      done();
+    });
 
     compiler.watch({}, (err, stats) => {
       if (err) {
-        console.log(err)
-        return
+        console.log(err);
+        return;
       }
 
-      logStats('Main', stats)
+      logStats('Main', stats);
 
       if (electronProcess && electronProcess.kill) {
-        manualRestart = true
-        process.kill(electronProcess.pid)
-        electronProcess = null
-        startElectron()
+        manualRestart = true;
+        process.kill(electronProcess.pid);
+        electronProcess = null;
+        startElectron();
 
         setTimeout(() => {
-          manualRestart = false
-        }, 5000)
+          manualRestart = false;
+        }, 5000);
       }
 
-      resolve()
-    })
-  })
+      resolve();
+    });
+  });
 }
 
 function startElectron() {
   var args = [
     '--inspect=5858',
-    path.join(__dirname, '../dist/electron/main.js')
-  ]
+    path.join(__dirname, '../dist/electron/main.js'),
+  ];
 
-  // detect yarn or npm and process commandline args accordingly
   if (process.env.npm_execpath.endsWith('yarn.js')) {
-    args = args.concat(process.argv.slice(3))
+    args = args.concat(process.argv.slice(3));
   } else if (process.env.npm_execpath.endsWith('npm-cli.js')) {
-    args = args.concat(process.argv.slice(2))
+    args = args.concat(process.argv.slice(2));
   }
 
-  electronProcess = spawn(electron, args)
+  electronProcess = spawn(electron, args);
 
-  electronProcess.stdout.on('data', data => {
-    electronLog(data, 'blue')
-  })
-  electronProcess.stderr.on('data', data => {
-    electronLog(data, 'red')
-  })
+  electronProcess.stdout.on('data', (data) => {
+    electronLog(data, 'blue');
+  });
+  electronProcess.stderr.on('data', (data) => {
+    electronLog(data, 'red');
+  });
 
   electronProcess.on('close', () => {
-    if (!manualRestart) process.exit()
-  })
+    if (!manualRestart) process.exit();
+  });
 }
 
 function electronLog(data, color) {
-  let log = ''
-  data = data.toString().split(/\r?\n/)
-  data.forEach(line => {
-    log += `  ${line}\n`
-  })
+  let log = '';
+  data = data.toString().split(/\r?\n/);
+  data.forEach((line) => {
+    log += `  ${line}\n`;
+  });
   if (/[0-9A-z]+/.test(log)) {
     console.log(
       chalk[color].bold('┏ Electron -------------------') +
       '\n\n' +
       log +
       chalk[color].bold('┗ ----------------------------') +
       '\n'
-    )
+    );
   }
 }
 
-function init() {
-  Promise.all([startRenderer(), startMain()])
-    .then(() => {
-      startElectron()
-    })
-    .catch(err => {
-      console.error(err)
-    })
+async function init() {
+  try {
+    await startRenderer(); // Ensure renderer is started before main
+    await startMain();
+    await startElectron();
+  } catch (err) {
+    console.error(err);
+  }
 }
 
 if (require.main === module) {
-  init()
+  init();
 } else {
   module.exports = {
-    startRenderer
-  }
+    startRenderer,
+  };
 }