From 03fefc85a5b1330b0027bf9ffe2ebd812f629194 Mon Sep 17 00:00:00 2001 From: sua yoo Date: Tue, 28 Nov 2023 12:47:20 -0800 Subject: [PATCH] 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 --- README.md | 14 +++--- package.json | 3 +- src/{electron-main.js => electron-main.ts} | 0 ...lectron-preload.js => electron-preload.ts} | 0 ...n-replay-app.js => electron-replay-app.ts} | 24 +++------- webpack.config.js | 45 +++++++++++++------ yarn.lock | 14 ++++++ 7 files changed, 60 insertions(+), 40 deletions(-) rename src/{electron-main.js => electron-main.ts} (100%) rename src/{electron-preload.js => electron-preload.ts} (100%) rename src/{electron-replay-app.js => electron-replay-app.ts} (98%) diff --git a/README.md b/README.md index f4ac1b7..1bc3bde 100644 --- a/README.md +++ b/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. diff --git a/package.json b/package.json index 55adc76..3ce304b 100644 --- a/package.json +++ b/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", diff --git a/src/electron-main.js b/src/electron-main.ts similarity index 100% rename from src/electron-main.js rename to src/electron-main.ts diff --git a/src/electron-preload.js b/src/electron-preload.ts similarity index 100% rename from src/electron-preload.js rename to src/electron-preload.ts diff --git a/src/electron-replay-app.js b/src/electron-replay-app.ts similarity index 98% rename from src/electron-replay-app.js rename to src/electron-replay-app.ts index c8f8719..3e4d584 100644 --- a/src/electron-replay-app.js +++ b/src/electron-replay-app.ts @@ -1,4 +1,4 @@ -/*eslint-env node */ +/* eslint-env node */ import fetch from "node-fetch"; import { Headers } from "node-fetch"; @@ -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; - /** - * @type {BrowserWindow | null} - */ - mainWindow = null; + mainWindow: BrowserWindow | null = null; - /** - * @type {string | null} - */ - openNextFile = null; + openNextFile: string | null = null; screenSize = { width: 1024, height: 768 }; - /** - * @type {string | null} - */ - origUA = null; + origUA: string | null = null; constructor({ staticPath = "./", profileName = "" } = {}) { this.staticContentPath = staticPath; diff --git a/webpack.config.js b/webpack.config.js index bc09c8e..5718c32 100644 --- a/webpack.config.js +++ b/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]; diff --git a/yarn.lock b/yarn.lock index 4d5f121..f9ed9f6 100644 --- a/yarn.lock +++ b/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"