electron-renderer webpack seems to be generating main_renderer.js

background.html

@@ -42,6 +42,6 @@
       </div>
     </div>
 
-    <script type="text/javascript" src="js/main_start.js"></script>
+    <script type="text/javascript" src="dist/js/electron-renderer.js"></script>
   </body>
 </html>

package.json

@@ -39,7 +39,9 @@
     "clean-transpile": "rimraf 'ts/**/*.js' 'ts/*.js' 'ts/*.js.map' 'ts/**/*.js.map' && rimraf tsconfig.tsbuildinfo;",
     "ready": "yarn grunt && yarn lint-full && yarn test",
     "sedtoAppImage": "sed -i 's/\"target\": \\[\"deb\", \"rpm\", \"freebsd\"\\]/\"target\": \"AppImage\"/g' package.json",
-    "sedtoDeb": "sed -i 's/\"target\": \"AppImage\"/\"target\": \\[\"deb\", \"rpm\", \"freebsd\"\\]/g' package.json"
+    "sedtoDeb": "sed -i 's/\"target\": \"AppImage\"/\"target\": \\[\"deb\", \"rpm\", \"freebsd\"\\]/g' package.json",
+    "build:webpack": "webpack --config ./webpack.config.js",
+    "start:webpack": "yarn build && electron ./dist/electron.js"
   },
   "dependencies": {
     "@reduxjs/toolkit": "^1.4.0",
@@ -171,6 +173,7 @@
     "grunt-exec": "3.0.0",
     "grunt-gitinfo": "0.1.7",
     "grunt-sass": "3.0.1",
+    "html-webpack-plugin": "^5.5.0",
     "mocha": "4.1.0",
     "mocha-testcheck": "1.0.0-rc.0",
     "node-gyp": "3.8.0",
@@ -180,12 +183,14 @@
     "prettier": "1.19.0",
     "run-script-os": "^1.1.6",
     "sinon": "9.0.2",
-    "ts-loader": "^9.2.7",
+    "ts-loader": "^9.2.8",
     "ts-mock-imports": "^1.3.0",
     "tslint": "5.19.0",
     "tslint-microsoft-contrib": "6.0.0",
     "tslint-react": "3.6.0",
-    "typescript": "4.5.4"
+    "typescript": "^4.6.3",
+    "webpack": "^5.70.0",
+    "webpack-cli": "^4.9.2"
   },
   "engines": {
     "node": "^14.16.0"
@@ -238,7 +243,11 @@
         "StartupWMClass": "Session"
       },
       "asarUnpack": "node_modules/spellchecker/vendor/hunspell_dictionaries",
-      "target": ["deb", "rpm", "freebsd"],
+      "target": [
+        "deb",
+        "rpm",
+        "freebsd"
+      ],
       "icon": "build/icon-linux.icns"
     },
     "asarUnpack": [

preload.js

@@ -1,5 +1,4 @@
 /* eslint-disable global-require */
-/* global Whisper: false */
 /* global window: false */
 const path = require('path');
 const { webFrame, remote, clipboard, ipcRenderer } = require('electron');

ts/mains/main_renderer.ts

@@ -1,20 +1,20 @@
 import _ from 'lodash';
-import { MessageModel } from '../ts/models/message';
-import { isMacOS } from '../ts/OS';
-import { queueAllCached } from '../ts/receiver/receiver';
-import { getConversationController } from '../ts/session/conversations';
-import { AttachmentDownloads } from '../ts/session/utils';
-import { getOurPubKeyStrFromCache } from '../ts/session/utils/User';
-import { BlockedNumberController } from '../ts/util';
-import { ExpirationTimerOptions } from '../ts/util/expiringMessages';
-import { Notifications } from '../ts/util/notifications';
-import { Registration } from '../ts/util/registration';
-import { isSignInByLinking, Storage } from '../ts/util/storage';
-
-import * as Data from '../ts/data/data';
+import { MessageModel } from '../models/message';
+import { isMacOS } from '../OS';
+import { queueAllCached } from '../receiver/receiver';
+import { getConversationController } from '../session/conversations';
+import { AttachmentDownloads } from '../session/utils';
+import { getOurPubKeyStrFromCache } from '../session/utils/User';
+import { BlockedNumberController } from '../util';
+import { ExpirationTimerOptions } from '../util/expiringMessages';
+import { Notifications } from '../util/notifications';
+import { Registration } from '../util/registration';
+import { isSignInByLinking, Storage } from '../util/storage';
+
+import * as Data from '../data/data';
 import Backbone from 'backbone';
-import { SessionRegistrationView } from '../ts/components/registration/SessionRegistrationView';
-import { SessionInboxView } from '../ts/components/SessionInboxView';
+import { SessionRegistrationView } from '../components/registration/SessionRegistrationView';
+import { SessionInboxView } from '../components/SessionInboxView';
 // tslint:disable: max-classes-per-file
 
 // Globally disable drag and drop

ts/receiver/receiver.ts

@@ -145,7 +145,7 @@ export function handleRequest(plaintext: any, options: ReqOptions, messageHash:
 
 // tslint:enable:cyclomatic-complexity max-func-body-length */
 /**
- * Used in main_start.js
+ * Used in main_renderer.js
  */
 export async function queueAllCached() {
   const items = await getAllFromCache();

tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     // Basic Options
-    "target": "es6", // Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'.
+    "target": "es2020", // Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT' or 'es2020'.
     "module": "commonjs", // Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'.
     "lib": [
       "dom", // Required to access `window`
@@ -9,16 +9,29 @@
     ],
     "jsx": "react", // Specify JSX code generation: 'preserve', 'react-native', or 'react'.
 
-    "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
+    "removeComments": true, // Do not emit comments to output.
+    // "noEmit": true,                        // Do not emit outputs.
+    // "importHelpers": true,                 // Import emit helpers from 'tslib'.
+    // "downlevelIteration": true,            // Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'.
+    // "isolatedModules": true,               // Transpile each file as a separate module (similar to 'ts.transpileModule').
+    // noImplicitAny
+    // Strict Type-Checking Options
     "strict": true, // Enable all strict type-checking options.
     "skipLibCheck": true,
     "noUnusedLocals": true, // Report errors on unused locals.
     "noUnusedParameters": true, // Report errors on unused parameters.
     "noImplicitReturns": true, // Report error when not all code paths in function return a value.
     "noFallthroughCasesInSwitch": true, // Report errors for fallthrough cases in switch statement.
-
     "moduleResolution": "node", // Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6).
+    "resolveJsonModule": true,
+    // Module Resolution Options
+    // "baseUrl": "./",                       // Base directory to resolve non-absolute module names.
+    // "paths": {},                           // A series of entries which re-map imports to lookup locations relative to the 'baseUrl'.
+    // "rootDirs": [],                        // List of root folders whose combined content represents the structure of the project at runtime.
+    // "typeRoots": [],                       // List of folders to include type definitions from.
+    // "types": [],                           // Type declaration files to be included in compilation.
+    // "allowSyntheticDefaultImports": true,  // Allow default imports from modules with no default export. This does not affect code emit, just typechecking.
     "useUnknownInCatchVariables": false,
     "esModuleInterop": true, // Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'.
     "inlineSourceMap": true // Emit a single file with source maps instead of having a separate file.

webpack.config.js

@@ -0,0 +1,61 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = [
+  //   {
+  //     // bundling mode
+
+  //     mode: 'development', //   mode: 'production',
+
+  //     // entry files
+
+  //     entry: './main.js',
+  //     target: 'electron-main',
+  //     module: {
+  //       // loaders
+
+  //       rules: [
+  //         {
+  //           test: /\.tsx?$/,
+  //           include: /ts/,
+  //           use: [{ loader: 'ts-loader' }],
+  //           exclude: /node_modules/,
+  //         },
+  //       ],
+  //     },
+  //     // output bundles (location)
+
+  //     output: {
+  //       path: path.resolve(__dirname, 'dist'),
+  //       filename: 'electron.js',
+  //     },
+  //   },
+
+  {
+    mode: 'development',
+    entry: './ts/mains/main_renderer.ts',
+    target: 'electron-renderer',
+    devtool: 'source-map',
+    resolve: {
+      extensions: ['.ts', '.tsx', '.js', '.json'],
+    },
+    module: {
+      rules: [
+        {
+          test: /\.ts(x?)$/,
+          include: [path.resolve(__dirname, 'ts'), path.resolve(__dirname, 'js')],
+          use: [{ loader: 'ts-loader' }],
+        },
+      ],
+    },
+    output: {
+      path: path.resolve(__dirname, 'dist', 'js'),
+      filename: 'electron-renderer.js',
+    },
+    plugins: [
+      new HtmlWebpackPlugin({
+        template: './background.html',
+      }),
+    ],
+  },
+];