Manually Configure webpack and electron-builder instead of using electron-webpack

package.json

@@ -2,69 +2,67 @@
   "name": "noteworthy",
   "version": "0.0.1",
   "description": "Text editor with rich document semantics, based on ProseMirror.",
-  "main": "./dist/index.js",
+  "repository": {
+    "type": "git",
+    "url": "github:benrbray/noteworthy"
+  },
+  "main": "./dist/main/main.js",
+  "keywords": [
+    "productivity",
+    "note",
+    "markdown",
+    "zettelkasten"
+  ],
+  "author": {
+    "name": "Benjamin R. Bray",
+    "email": "[email protected]"
+  },
+  "license": "AGPL-3.0-or-later",
+  "bugs": {
+    "url": "https://github.com/benrbray/noteworthy/issues"
+  },
+  "homepage": "https://github.com/benrbray/noteworthy#readme",
   "scripts": {
     "clean:deps": "",
     "clean:dist": "npx del dist",
     "clean:releases": "npx del releases",
     "clean": "npm run clean:dist && npm run clean:releases",
-    "compile": "npm run clean:deps && electron-webpack",
+    "compile:renderer": "webpack --config webpack.renderer.js",
+    "compile:main": "webpack --config webpack.main.js",
+    "compile": "npm run clean:deps && npm run compile:renderer && npm run compile:main",
     "dist": "npm run compile && electron-builder",
     "build:mac": "npm run compile && electron-builder --mac",
-    "build:win": "npm run compile && electron-builder --win && npm run script:build:fixlatestwin",
-    "build:linux": "npm run compile && electron-builder --linux && npm run script:build:fixlatestlinux",
+    "build:win": "npm run compile && electron-builder --win",
+    "build:linux": "npm run compile && electron-builder --linux",
     "build:all": "npm run clean:releases && npm run compile && electron-builder -mwl && npm run script:build:fixlatestwin && npm run script:build:fixlatestlinux",
-    "bundle:analyze:main": "open webpack.report.main.html",
-    "bundle:analyze:renderer": "open webpack.report.renderer.html",
-    "script:build:fixlatestlinux": "",
-    "script:build:fixlatestwin": "",
-    "script:build:fixlatestlinux_old": "node -e \"require ( './scripts/build/fix_latest_linux' )()\"",
-    "script:build:fixlatestwin_old": "node -e \"require ( './scripts/build/fix_latest_win' )()\"",
-    "svelto:dev": "svelto build --env development",
-    "svelto:dev:watch": "npm run svelto:dev && svelto watch --env development",
-    "svelto:prod": "svelto build",
-    "iconfont": "icon-font-buildr",
-    "comparison": "wkhtmltoimage --quiet --quality 30 --encoding 'UTF-8' --zoom 2 ./resources/comparison/table.html ./resources/comparison/table.png",
-    "monaco": "webpack --config ./webpack.monaco.js",
-    "dev": "electron-webpack dev",
-    "prod": "npm run compile && CSC_IDENTITY_AUTO_DISCOVERY=false electron-builder --mac dir && open releases/mac/*.app"
+    "postinstall": "electron-builder install-app-deps"
   },
   "build": {
+    "productName": "Noteworthy",
+    "appId": "noteworthy",
+    "extends": null,
     "files": [
-      "assets/*"
-    ]
+      "dist/main/**/*",
+      "dist/renderer/**/*",
+      "dist/renderer/index.html",
+      "dist/renderer/renderer.js"
+    ],
+    "directories": {
+      "output": "dist"
+    },
+    "linux": {
+      "category": "Office",
+      "icon": "./assets/icon/noteworthy-icon-512.png"
+    }
   },
   "electronWebpack": {
-    "main": {
-      "webpackConfig": "webpack.main.js"
-    },
     "renderer": {
-      "template": "src/renderer/index.html",
-      "webpackConfig": "webpack.renderer.js"
+      "template": "src/renderer/index.html"
     },
     "whiteListedModules": [
       "solid-js"
     ]
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/benrbray/noteworthy.git"
-  },
-  "keywords": [
-    "productivity",
-    "note",
-    "markdown",
-    "zettelkasten"
-  ],
-  "author": {
-    "name": "Benjamin R. Bray",
-    "email": "[email protected]"
-  },
-  "license": "GPL-3.0-or-later",
-  "bugs": {
-    "url": "https://github.com/benrbray/noteworthy/issues"
-  },
-  "homepage": "https://github.com/benrbray/noteworthy#readme",
   "dependencies": {
     "chokidar": "^3.4.1",
     "citeproc": "^2.4.35",
@@ -78,6 +76,7 @@
     "lodash": "^4.17.19",
     "markdown-it": "^11.0.0",
     "markdown-it-directive": "^1.0.1",
+    "mini-css-extract-plugin": "^0.9.0",
     "prosemirror-commands": "^1.1.4",
     "prosemirror-gapcursor": "^1.1.5",
     "prosemirror-history": "^1.1.3",
@@ -115,12 +114,14 @@
     "@types/prosemirror-tables": "^0.9.1",
     "@types/prosemirror-transform": "^1.1.1",
     "@types/prosemirror-view": "^1.15.0",
+    "asar": "^3.0.3",
     "babel-preset-solid": "^0.18.14",
     "copy-webpack-plugin": "^6.0.3",
     "electron": "^9.1.1",
     "electron-builder": "^22.7.0",
     "electron-webpack": "^2.8.2",
     "electron-webpack-ts": "^4.0.1",
+    "html-webpack-plugin": "^4.5.2",
     "less-loader": "^6.2.0",
     "tsconfig-paths-webpack-plugin": "^3.2.0",
     "typescript": "^3.9.7",

src/common/static.ts

@@ -1,7 +1,7 @@
 import path from 'path'
 import * as url from 'url'
 
-const isDevelopment = process.env.NODE_ENV !== 'production';
+const isDevelopment = (process.env.NODE_ENV === 'development');
 
 declare const __static:string;
 

src/main/windows/route.ts

@@ -15,18 +15,23 @@ class Route extends Window {
 		console.log("route :: load", __dirname)
 		const route = this.name;
 
+		// the `Environment.isDevelopment` flag is defined with a plugin in webpack.base.js
 		if (Environment.isDevelopment) {
 			const { protocol, hostname, port } = Environment.wds;
-			this.window.loadURL(`${protocol}://${hostname}:${port}?route=${route}`);
+			let url = `${protocol}://${hostname}:${port}?route=${route}`;
+			console.log("route :: development :: url", url);
+			this.window.loadURL(url);
 		} else {
-			this.window.loadURL(formatURL({
-				pathname: path.join(__dirname, 'index.html'),
+			let url = formatURL({
+				pathname: path.join(__dirname, "../renderer/index.html"),
 				protocol: 'file',
 				slashes: true,
 				query: {
 					route,
 				}
-			}));
+			})
+			console.log("route :: production :: url", url);
+			this.window.loadURL(url);
 		}
 	}
 

src/main/windows/window.ts

@@ -63,7 +63,7 @@ class Window {
 				webSecurity: true
 			},
 			/** @todo (9/15/20) icon caused bug on prod build, re-enable later */
-			//icon: "assets/icon/nwt_large.png"
+			icon: "assets/icon/noteworthy-icon-512.png"
 		}, options);
 
 		const win = new BrowserWindow(options);
@@ -132,7 +132,6 @@ class Window {
 	__closed = () => {
 		console.log("window :: closed");
 		this.cleanup();
-		delete this.window;
 	}
 
 	__focused = () => {

tsconfig.json

@@ -1,4 +1,10 @@
 {
+  "include": [
+    "./src/**/*.ts", "./src/**/*.tsx"
+  ],
+  "exclude" : [
+    "./node_modules/*"
+  ],
   "compilerOptions": {
     /* Visit https://aka.ms/tsconfig.json to read more about this file */
 
@@ -17,7 +23,7 @@
     "sourceMap": true,                     /* Generates corresponding '.map' file. */
     // "outFile": "./",                       /* Concatenate and emit output to single file. */
     "outDir": "./tsc_out",                    /* Redirect output structure to the directory. */
-    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+    "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
     // "composite": true,                     /* Enable project compilation */
     // "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */
     // "removeComments": true,                /* Do not emit comments to output. */

webpack.base.js

@@ -7,17 +7,17 @@ const path = require("path");
 const webpack = require("webpack");
 const merge = require("webpack-merge");
 
+const PACKAGE_JSON = require("./package.json");
+
 ////////////////////////////////////////////////////////////
 
 // (7/16/20) webpack+babel https://stackoverflow.com/a/52323181/1444650
 // (7/16/20) babel-preset-solid https://github.com/ryansolid/solid
 // (7/16/20) solidjs+ts advice:  https://gitter.im/solidjs-community/community?at=5d92f910d97d8e3549e2b7ef
 
-/** @todo (7/16/20) set development mode to FALSE before publishing */
-const IS_DEVELOP = true;
-
 ////////////////////////////////////////////////////////////
 
+// TODO: this was copied from the Notable config, what does it do and should it be kept?
 function PluginSkeletonOptimization ( compiler ) { // Loading heavy resources after the skeleton
   compiler.plugin ( 'compilation', compilation => {
     compilation.hooks.htmlWebpackPluginAfterHtmlProcessing = {
@@ -29,65 +29,103 @@ function PluginSkeletonOptimization ( compiler ) { // Loading heavy resources af
   });
 }
 
-////////////////////////////////////////////////////////////
+// TODO: (2021/3/21) this was blindly copied from electron-webpack, but I should make an effort to replace+simplify it later
+// https://github.com/electron-userland/electron-webpack/blob/8a9d2892ecedd8f0d8158f3175116f34efdf94ed/packages/electron-webpack/src/main.ts#L278
+function computeExternals(isRenderer /*bool*/) {
+	// electron-webpack code was written with consideration for other build targets,
+	// but for our purposes, if we're not the renderer we MUST be the main process
+	let isMain = !isRenderer;
+
+	// whitelisted modules
+	const manualWhiteList = PACKAGE_JSON.electronWebpack.whiteListedModules;
+	const whiteListedModules = new Set(manualWhiteList || [])
+
+	if (isRenderer) {
+		whiteListedModules.add("react")
+		whiteListedModules.add("react-dom")
+	}
+
+	const filter = (name) => !name.startsWith("@types/") && (whiteListedModules == null || !whiteListedModules.has(name))
+	const externals = Object.keys(PACKAGE_JSON.dependencies).filter(filter)
+	externals.push("electron")
+	externals.push("webpack")
+	// because electron-devtools-installer specified in the devDependencies, but required in the index.dev
+	externals.push("electron-devtools-installer")
+	if (isMain) {
+		externals.push("webpack/hot/log-apply-result")
+		externals.push("electron-webpack/out/electron-main-hmr/HmrClient")
+		externals.push("source-map-support/source-map-support.js")
+	}
+
+	// if (this.electronWebpackConfiguration.externals != null) {
+	// 	return externals.concat(this.electronWebpackConfiguration.externals)
+	// }
+
+	return externals;
+}
+
+////////////////////////////////////////////////////////////////////////////////
 
 function base(options){
 	// modify default config with a config function
 	// (https://webpack.electron.build/modifying-webpack-configurations#using-a-config-function)
-	return (config) => {
+	let IS_PRODUCTION = (process.env.NODE_ENV !== "development");
+	let isRenderer = (options.target == "electron-renderer");
+	let DIRNAME = path.resolve(__dirname);
+	return (env) => {
 		// merge incoming config with a few extra options
-		let result = merge(config, ({
-			resolve: { plugins: [ new TSConfigPathsPlugin() ] },
-			target: options.target,
+		let result = merge(options, {
+			mode: IS_PRODUCTION ? "production" : "development",
+			// Absolute path for resolving entry points and loaders from configuration. 
+			// By default, webpack uses the current directory, but it is recommended to 
+			// manually provide a value.
+			context : path.resolve(__dirname),
+			externals: computeExternals(isRenderer),
+			// Dependencies to exclude from the output bundles.  Instead, the created 
+			// bundle relies on that dependency to be present in the consumer's environment.
+			// This feature is typically most useful to library developers.
+			// exclude : [],
+			// Configure whether to polyfill or mock certain Node.js globals.
+			node : {
+				"__dirname" : false,  // use standard __dirname behavior
+				"__filename" : false  // use standard __filename behavior
+			},
+			// Options for changing how modules are resolved.
+			resolve: { 
+				// webpack plugins which set additional resolve configuration
+				plugins: [
+					// automatically creates aliases for `compilerOptions.paths` entry in tsconfig.json
+					// (warning:  as of 2021/3/1, does not work with implicit `baseUrl` introduced by TypeScript 4.1)
+					new TSConfigPathsPlugin()
+				],
+				// aliases to import more easily from common folders
+				alias: {
+					"common" : path.resolve(__dirname, "src/common/")
+				}	
+			},
+			//
 			plugins: [
+				// make `Environment.isDevelopment` available as global variable
 				new webpack.DefinePlugin ({
-					'Environment.isDevelopment': JSON.stringify ( process.env.NODE_ENV !== 'production' )
+					'Environment.isDevelopment': JSON.stringify ( IS_PRODUCTION )
+				}),
+				// make static directory path available as global variable
+				// TODO differences in __static path for production vs development?
+				// https://github.com/electron-userland/electron-webpack/blob/ebbf9150b1549fbe7b5e97e9a972e547108eba50/packages/electron-webpack/src/targets/BaseTarget.ts#L121
+				new webpack.DefinePlugin({
+					__static: `"${path.join(__dirname, "static").replace(/\\/g, "\\\\")}"`,
+					"process.env.NODE_ENV": IS_PRODUCTION ? "\"production\"" : "\"development\""
 				}),
 				new CopyWebpackPlugin({
-					patterns: [
-						{ from: 'static' }
-					]
+					patterns: [ { from: 'static' } ]
 				}),
 				PluginSkeletonOptimization
 			],
+
+			/* TODO (2021/3/1) disable source-map in production mode */
 			devtool: "source-map"
-		}));
-
-		// default electron-webpack rule matches both .ts and .tsx
-		const tsxIndex = result.module.rules.findIndex(rule =>
-			rule.test.toString().match(/tsx/)
-		);
-
-		// modify rule to match only .ts files
-		const tsxRule = result.module.rules[tsxIndex];
-		tsxRule.test = /\.ts$/;
-
-		// create separate rule for tsx files
-		/** @todo (7/17/20) does this merge have any unintended consequences? */
-		result = merge(result, { module : { rules : [
-			{
-				test: /\.tsx$/,
-				exclude: [/node_modules/],
-				use: {
-					loader: "babel-loader",
-						options: merge(tsxRule.options, {
-						babelrc: false,
-						presets: [
-							[ '@babel/preset-env', { 
-								"targets": { "electron": "9.0.2", }
-							} ],
-							'solid',
-							'@babel/preset-typescript'
-						],
-						plugins: ["@babel/plugin-proposal-optional-chaining"],
-						cacheDirectory: true,
-						cacheCompression: !IS_DEVELOP,
-						compact: !IS_DEVELOP,
-					}),
-				}
-			}
-		]}});
-
+		});
+
 		return result;
 	}
 }