Migrate electron files to typescript (#267)

- Switches electron src files to typescript with minimum typing required
for build
- Adds webpack-merge for shared typescript build config and jsdoc types
- Minor README changes

---------

Co-authored-by: emma <hi@emma.cafe>

README.md

@@ -52,19 +52,19 @@ It is also a Jekyll site for use with GitHub pages. Jekyll is only needed to bui
 
 The package provides various commands that can be used with yarn:
 
-- `yarn run start-dev` - to run in dev mode with Webpack dev server on port 9990. Autobuilds dev assets.
+- `yarn start-dev` - to run in dev mode with Webpack dev server on port 9990. Autobuilds dev assets.
 
-- `yarn run build` - to build production assets sw.js, ui.js
+- `yarn build` - to build production assets sw.js, ui.js
 
-- `yarn run start-prod` - to run production site on port 9990, with previously built assets
+- `yarn start-prod` - to run production site on port 9990, with previously built assets
 
-- `yarn run start-electron` - to start electron in dev mode, with previously built assets
+- `yarn start-electron` - to start electron in dev mode, with previously built assets
 
-- `yarn run dist` - to build production assets + Electron app (in dist/)
+- `yarn dist` - to build production assets + Electron app (in dist/)
 
-- `yarn run build-docs` - to build the Jekyll docs (for local use) and run Jekyll. Requires Ruby.
+- `yarn build-docs` - to build the Jekyll docs (for local use) and run Jekyll. Requires Ruby.
 
-- `yarn run start-jekyll` - to build Jekyll docs and start Jekyll static server on port 4000.
+- `yarn start-jekyll` - to build Jekyll docs and start Jekyll static server on port 4000.
 
 The static assets are placed in the root `index.html`, `sw.js` and `ui.js`, and can be used with any HTTP server.
 

package.json

@@ -55,7 +55,8 @@
     "typescript": "^5.2.2",
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.1",
-    "webpack-dev-server": "^4.11.1"
+    "webpack-dev-server": "^4.11.1",
+    "webpack-merge": "^5.10.0"
   },
   "files": [
     "/assets",

src/electron-replay-app.ts

@@ -41,9 +41,6 @@ const URL_RX = /([^/]+)\/([\d]+)(?:\w\w_)?\/(.*)$/;
 
 // ============================================================================
 class ElectronReplayApp {
-  /**
-   * @type {string}
-   */
   pluginPath = "";
 
   appPath = app.getAppPath();
@@ -54,26 +51,17 @@ class ElectronReplayApp {
 
   profileName = "";
 
-  proxyColl = null;
+  proxyColl: string | null = null;
 
-  proxyTS = null;
+  proxyTS: string | null = null;
 
-  /**
+  mainWindow: BrowserWindow | null = null;
-   * @type {BrowserWindow | null}
-   */
-  mainWindow = null;
 
-  /**
+  openNextFile: string | null = null;
-   * @type {string | null}
-   */
-  openNextFile = null;
 
   screenSize = { width: 1024, height: 768 };
 
-  /**
+  origUA: string | null = null;
-   * @type {string | null}
-   */
-  origUA = null;
 
   constructor({ staticPath = "./", profileName = "" } = {}) {
     this.staticContentPath = staticPath;

webpack.config.js

@@ -3,6 +3,7 @@
 
 const path = require("path");
 const webpack = require("webpack");
+const { merge } = require("webpack-merge");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const CopyPlugin = require("copy-webpack-plugin");
 const TerserPlugin = require("terser-webpack-plugin");
@@ -18,6 +19,7 @@ const GDRIVE_CLIENT_ID =
 // Copyright banner text
 const BANNER_TEXT = `'[name].js is part of ReplayWeb.page (https://replayweb.page) Copyright (C) 2020-${new Date().getFullYear()}, Webrecorder Software. Licensed under the Affero General Public License v3.'`;
 
+/** @type {import("webpack").Configuration['optimization']} */
 const optimization = {
   minimize: true,
   minimizer: [
@@ -26,13 +28,32 @@ const optimization = {
     }),
   ],
 };
+/** @type {import("webpack").Configuration} */
+const tsConfig = {
+  resolve: {
+    extensions: [".ts", ".js"],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        loader: "ts-loader",
+        include: path.resolve(__dirname, "src"),
+        options: {
+          onlyCompileBundledFiles: true,
+        },
+      },
+    ],
+  },
+};
 
 const electronMainConfig = (/*env, argv*/) => {
-  return {
+  /** @type {import('webpack').Configuration} */
+  const config = {
     target: "electron-main",
     mode: "production",
     entry: {
-      electron: "./src/electron-main.js",
+      electron: "./src/electron-main.ts",
     },
     optimization,
     output: {
@@ -56,19 +77,22 @@ const electronMainConfig = (/*env, argv*/) => {
       }),
     ],
   };
+  return merge(tsConfig, config);
 };
 
 const electronPreloadConfig = (/*env, argv*/) => {
-  return {
+  /** @type {import('webpack').Configuration} */
+  const config = {
     target: "electron-preload",
     mode: "production",
     entry: {
-      preload: "./src/electron-preload.js",
+      preload: "./src/electron-preload.ts",
     },
 
     optimization,
     plugins: [new webpack.BannerPlugin(BANNER_TEXT)],
   };
+  return merge(tsConfig, config);
 };
 
 const browserConfig = (/*env, argv*/) => {
@@ -89,7 +113,8 @@ const browserConfig = (/*env, argv*/) => {
     });
   }
 
-  return {
+  /** @type {import('webpack').Configuration} */
+  const config = {
     target: "web",
     mode: "production",
     cache: {
@@ -97,7 +122,6 @@ const browserConfig = (/*env, argv*/) => {
     },
     resolve: {
       fallback: { crypto: false },
-      extensions: [".ts", ".js"],
     },
     entry,
     optimization,
@@ -146,14 +170,6 @@ const browserConfig = (/*env, argv*/) => {
 
     module: {
       rules: [
-        {
-          test: /\.tsx?$/,
-          loader: "ts-loader",
-          include: path.resolve(__dirname, "src"),
-          options: {
-            onlyCompileBundledFiles: true,
-          },
-        },
         {
           test: /\.svg$/,
           use: ["svg-inline-loader"],
@@ -169,6 +185,7 @@ const browserConfig = (/*env, argv*/) => {
       ],
     },
   };
+  return merge(tsConfig, config);
 };
 
 module.exports = [browserConfig, electronMainConfig, electronPreloadConfig];

yarn.lock

@@ -2870,6 +2870,11 @@ flat-cache@^3.0.4:
     flatted "^3.1.0"
     rimraf "^3.0.2"
 
+flat@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/flat/-/flat-5.0.2.tgz#8ca6fe332069ffa9d324c327198c598259ceb241"
+  integrity sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==
+
 flatted@^3.1.0:
   version "3.2.7"
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.7.tgz#609f39207cb614b89d0765b477cb2d437fbf9787"
@@ -6472,6 +6477,15 @@ webpack-dev-server@^4.11.1:
     webpack-dev-middleware "^5.3.1"
     ws "^8.4.2"
 
+webpack-merge@^5.10.0:
+  version "5.10.0"
+  resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-5.10.0.tgz#a3ad5d773241e9c682803abf628d4cd62b8a4177"
+  integrity sha512-+4zXKdx7UnO+1jaN4l2lHVD+mFvnlZQP/6ljaJVb4SZiwIKeUnrT5l0gkT8z+n4hKpC+jpOv6O9R+gLtag7pSA==
+  dependencies:
+    clone-deep "^4.0.1"
+    flat "^5.0.2"
+    wildcard "^2.0.0"
+
 webpack-merge@^5.7.3:
   version "5.8.0"
   resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-5.8.0.tgz#2b39dbf22af87776ad744c390223731d30a68f61"