build: add packaging to build.mjs

- remove vue-cli-plugin-electron-builder

build/scripts/build.mjs

@@ -1,26 +1,39 @@
 import vue from '@vitejs/plugin-vue';
+import builder from 'electron-builder';
 import esbuild from 'esbuild';
-import { $ } from 'execa';
 import fs from 'fs-extra';
 import path from 'path';
 import { fileURLToPath } from 'url';
 import * as vite from 'vite';
 import { getMainProcessCommonConfig } from './helpers.mjs';
+import yargs from 'yargs';
+import { hideBin } from 'yargs/helpers';
 
 const dirname = path.dirname(fileURLToPath(import.meta.url));
 const root = path.join(dirname, '..', '..');
+const buildDirPath = path.join(root, 'dist_electron', 'build');
+const packageDirPath = path.join(root, 'dist_electron', 'bundled');
+const mainFileName = 'main.js';
+const commonConfig = getMainProcessCommonConfig(root);
 
-const $$ = $({ stdio: 'inherit' });
-await $$`rm -rf ${path.join(root, 'dist_electron', 'build')}`;
-
+updatePaths();
 await buildMainProcessSource();
 await buildRendererProcessSource();
+copyPackageJson();
+await packageApp();
+
+function updatePaths() {
+  fs.removeSync(buildDirPath);
+  fs.mkdirSync(buildDirPath);
+  fs.removeSync(packageDirPath);
+  fs.mkdirSync(packageDirPath);
+  fs.ensureDirSync(path.join(buildDirPath, 'node_modules'));
+}
 
 async function buildMainProcessSource() {
-  const commonConfig = getMainProcessCommonConfig(root);
   const result = await esbuild.build({
     ...commonConfig,
-    outfile: path.join(root, 'dist_electron', 'build', 'main.js'),
+    outfile: path.join(buildDirPath, mainFileName),
   });
 
   if (result.errors.length) {
@@ -32,7 +45,7 @@ async function buildMainProcessSource() {
 
 async function buildRendererProcessSource() {
   const base = 'app://';
-  const outDir = path.join(root, 'dist_electron', 'build', 'src');
+  const outDir = path.join(buildDirPath, 'src');
   await vite.build({
     base: `/${base}`,
     root: path.join(root, 'src'),
@@ -57,6 +70,80 @@ async function buildRendererProcessSource() {
   removeBaseLeadingSlash(outDir, base);
 }
 
+/**
+ * Copies the package.json file to the build folder with the
+ * following changes:
+ * - Irrelevant fields are removed.
+ * - Non-external deps (those that are bundled) and devDeps are removed.
+ * - Main file is updated to the bundled main process JS file.
+ */
+function copyPackageJson() {
+  const packageJsonText = fs.readFileSync(path.join(root, 'package.json'), {
+    encoding: 'utf-8',
+  });
+
+  const packageJson = JSON.parse(packageJsonText);
+  const keys = [
+    'name',
+    'version',
+    'description',
+    'author',
+    'homepage',
+    'repository',
+    'license',
+  ];
+  const modifiedPackageJson = {};
+  for (const key of keys) {
+    modifiedPackageJson[key] = packageJson[key];
+  }
+
+  modifiedPackageJson.main = mainFileName;
+  modifiedPackageJson.dependencies = {};
+
+  for (const dep of commonConfig.external) {
+    modifiedPackageJson.dependencies[dep] = packageJson.dependencies[dep];
+  }
+
+  fs.writeFileSync(
+    path.join(buildDirPath, 'package.json'),
+    JSON.stringify(modifiedPackageJson, null, 2),
+    {
+      encoding: 'utf-8',
+    }
+  );
+}
+
+/**
+ * Packages the app using electron builder.
+ *
+ * Note: this also handles signing and notarization if the
+ * appropriate flags are set. 
+ * 
+ * Electron builder cli [commands](https://www.electron.build/cli)
+ * are passed on as builderArgs.
+ */
+async function packageApp() {
+  const { configureBuildCommand } = await await import(
+    'electron-builder/out/builder.js'
+  );
+
+  const rawArgs = hideBin(process.argv);
+  const builderArgs = yargs(rawArgs)
+    .command(['build', '*'], 'Build', configureBuildCommand)
+    .parse();
+
+  const buildOptions = {
+    config: {
+      directories: { output: packageDirPath, app: buildDirPath },
+      files: ['**'],
+      extends: null,
+    },
+    ...builderArgs,
+  };
+
+  await builder.build(buildOptions);
+}
+
 /**
  * Removes leading slash from all renderer files
  * electron uses a custom registered protocol to load the

build/scripts/helpers.mjs

@@ -4,7 +4,7 @@ import path from 'path';
 /**
  * Common ESBuild config used for building main process source
  * code for both dev and production.
- * 
+ *
  * @param {string} root
  * @returns {import('esbuild').BuildOptions}
  */
@@ -16,7 +16,7 @@ export function getMainProcessCommonConfig(root) {
     sourcesContent: false,
     platform: 'node',
     target: 'node16',
-    external: ['knex', 'electron', 'better-sqlite3'],
+    external: ['knex', 'electron', 'better-sqlite3', 'electron-store'],
     plugins: [excludeVendorFromSourceMap],
     write: true,
   };
@@ -26,9 +26,9 @@ export function getMainProcessCommonConfig(root) {
  * ESBuild plugin used to prevent source maps from being generated for
  * packages inside node_modules, only first-party code source maps
  * are to be included.
- * 
+ *
  * Note, this is used only for the main process source code.
- * 
+ *
  * source: https://github.com/evanw/esbuild/issues/1685#issuecomment-944916409
  * @type {import('esbuild').Plugin}
  */

package.json

@@ -62,7 +62,7 @@
     "chokidar": "^3.5.3",
     "dotenv": "^16.0.0",
     "electron": "18.3.7",
-    "electron-builder": "24.0.0-alpha.12",
+    "electron-builder": "^24.4.0",
     "electron-devtools-installer": "^3.2.0",
     "electron-rebuild": "^3.2.9",
     "electron-updater": "^5.2.1",
@@ -85,12 +85,9 @@
     "tslib": "^2.3.1",
     "typescript": "^4.6.2",
     "vite": "^4.3.9",
-    "vue-cli-plugin-electron-builder": "https://github.com/nklayman/vue-cli-plugin-electron-builder#ebb9183f4913f927d4e4f4eb1fbab61a960f7a09",
     "vue-tsc": "^1.6.5",
-    "webpack": "^5.76.0"
-  },
-  "resolutions": {
-    "electron-builder": "24.0.0-alpha.12"
+    "webpack": "^5.76.0",
+    "yargs": "^17.7.2"
   },
   "prettier": {
     "semi": true,
@@ -107,5 +104,6 @@
   },
   "repository": {
     "url": "https://github.com/frappe/books"
-  }
+  },
+  "license": "AGPL-3.0-only"
 }