changed dist to create webpack bundles

- this contains a lot of small code changes related to how modules are imported to satisfy webpack
- also a new vortex-run module (embedded in the main application). This is necessary for runtime imports because webpack will rewrite all requires in the main application
- added an .npmrc, this should make the rebuildrequire hack mostly unneccessary (node-sass?)
- updated electron, just 'cause

the reason all this was neccessary was because react will complain in production mode if no tree shaking has been applied

.gitignore

@@ -1,4 +1,4 @@
-node_modules
+node_modules/*
 typings
 dist
 dist_custom
@@ -10,6 +10,7 @@ coverage
 .vscode/.BROWSE.VC.DB*
 *.VC.db
 app/bundledPlugins
+src/util/vortex-run/lib
 
 # User-specific files
 *.suo

.npmrc

@@ -0,0 +1,3 @@
+disturl=https://atom.io/download/electron
+target=1.8.4
+runtime=electron

InstallAssets.json

@@ -1,17 +1,5 @@
 {
-  "spawn": [
-    {
-      "executable": "tsc",
-      "arguments": [
-        "-p",
-        ".",
-        "--outDir", "app"
-      ],
-      "target": [
-        "app"
-      ]
-    }
-  ],
+  "spawn": [],
   "copy": [
     {
       "srcPath": "./LICENSE.md",

app/package.json

@@ -11,7 +11,7 @@
     "url": "https://github.com/Nexus-Mods/Vortex"
   },
   "vortex": {
-    "electron": "1.8.2"
+    "electron": "1.8.4"
   },
   "dependencies": {
     "bbcode-to-react": "TanninOne/bbcode-to-react",
@@ -91,6 +91,7 @@
     "turbowalk": "Nexus-Mods/node-turbowalk",
     "uuid": "^3.1.0",
     "vortex-parse-ini": "Nexus-Mods/vortex-parse-ini",
+    "vortex-run": "link:../src/util/vortex-run",
     "winreg": "^1.2.4",
     "winston": "^2.4.0",
     "ws": "^4.0.0",

app/yarn.lock

@@ -3527,6 +3527,10 @@ vortex-parse-ini@Nexus-Mods/vortex-parse-ini:
     lodash "^4.17.4"
     ref "^1.3.4"
 
+"vortex-run@link:../src/util/vortex-run":
+  version "0.0.0"
+  uid ""
+
 warning@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"

package.json

@@ -9,7 +9,7 @@
     "url": "https://github.com/Nexus-Mods/Vortex"
   },
   "vortex": {
-    "electron": "1.8.2"
+    "electron": "1.8.4"
   },
   "scripts": {
     "_assets_out": "node InstallAssets.js out",
@@ -20,8 +20,10 @@
     "subprojects_app": "yarn run _update_submodules && node BuildSubprojects.js app",
     "build_api": "cd api && yarn run build",
     "build_rest": "yarn run _assets_out && yarn run build_api && yarn run subprojects",
+    "build_dist": "webpack --config webpack.main.config.js && webpack --config webpack.renderer.config.js",
+    "package": "electron-builder --config electron-builder-oneclick.json && electron-builder --config electron-builder-advanced.json",
     "predist": "yarn run --non-interactive build_api && yarn run --non-interactive _install_app && yarn run --non-interactive subprojects_app && yarn run --non-interactive _assets_app",
-    "dist": "electron-builder --config electron-builder-oneclick.json && electron-builder --config electron-builder-advanced.json",
+    "dist": "yarn run build_dist && yarn run package",
     "ci": "yarn run predist && electron-builder --config electron-builder-ci.json",
     "start": "cross-env NODE_ENV=development electron .",
     "clean": "yarn add rm-local-modules && rm-local-modules && yarn install --check-files",
@@ -126,7 +128,7 @@
     "copyfiles": "^1.2.0",
     "cross-env": "^5.1.0",
     "devtron": "^1.4.0",
-    "electron": "1.8.2",
+    "electron": "1.8.4",
     "electron-builder": "^20.0.4",
     "electron-debug": "^1.4.0",
     "electron-download-tf": "^4.3.4",
@@ -228,11 +230,16 @@
     "simple-vdf": "^1.1.0",
     "string-template": "^1.0.0",
     "tmp": "0.0.33",
+    "ts-loader": "^4.2.0",
     "turbowalk": "Nexus-Mods/node-turbowalk",
-    "typescript": "2.6.2",
+    "typescript": "^2.8.3",
+    "uglify-js": "^3.3.21",
     "uuid": "^3.1.0",
     "vortex-parse-ini": "Nexus-Mods/vortex-parse-ini",
-    "webpack": "^3.8.1",
+    "vortex-run": "link:src/util/vortex-run",
+    "webpack": "^4.6.0",
+    "webpack-cli": "^2.0.14",
+    "webpack-node-externals": "^1.7.2",
     "winreg": "^1.2.4",
     "winston": "^2.4.0",
     "ws": "^4.0.0",

src/app/Application.ts

@@ -32,7 +32,7 @@ import { allow } from 'permissions';
 import * as Redux from 'redux';
 import * as uuidT from 'uuid';
 
-const uuid = lazyRequire<typeof uuidT>('uuid');
+const uuid = lazyRequire<typeof uuidT>(() => require('uuid'));
 
 function last(array: any[]): any {
   if (array.length === 0) {

src/app/MainWindow.ts

@@ -2,18 +2,22 @@ import {addNotification} from '../actions/notifications';
 import {setMaximized, setWindowPosition,  setWindowSize} from '../actions/window';
 import {IState, IWindow} from '../types/IState';
 import Debouncer from '../util/Debouncer';
+import { log } from '../util/log';
 import * as storeHelperT from '../util/storeHelper';
 
 import * as Promise from 'bluebird';
-import { screen } from 'electron';
+import { dialog, screen } from 'electron';
 import * as Redux from 'redux';
+import { terminate } from '../util/errorHandling';
+import getVortexPath from '../util/getVortexPath';
 
 class MainWindow {
   private mWindow: Electron.BrowserWindow = null;
   // timers used to prevent window resize/move from constantly causeing writes to the
   // store
   private mResizeDebouncer: Debouncer;
   private mMoveDebouncer: Debouncer;
+  private mShown: boolean;
 
   constructor(store: Redux.Store<IState>) {
     this.mResizeDebouncer = new Debouncer(() => {
@@ -42,12 +46,31 @@ class MainWindow {
 
     this.mWindow = new BrowserWindow(this.getWindowSettings(store.getState().settings.window));
 
-    this.mWindow.loadURL(`file://${__dirname}/../index.html`);
-    // this.mWindow.loadURL(`file://${__dirname}/../index.html?react_perf`);
+    this.mWindow.loadURL(`file://${getVortexPath('base')}/index.html`);
+    // this.mWindow.loadURL(`file://${getVortexPath('base')}/index.html?react_perf`);
 
     // opening the devtools automatically can be very useful if the renderer has
     // trouble loading the page
     // this.mWindow.webContents.openDevTools();
+    this.mWindow.webContents.on('console-message' as any,
+      (evt: Electron.Event, level: number, message: string, ...rest) => {
+        if (level !== 2) {
+          log('info', message, { rest });
+        } else {
+          setTimeout(() => {
+            if (!this.mShown) {
+              terminate({ message }, {});
+            }
+          }, 5000);
+        }
+      });
+
+    this.mWindow.webContents.on('crashed',
+      (evt, killed) => log('error', killed ? 'killed' : 'crashed'));
+
+    this.mWindow.webContents.on('did-fail-load', (evt, code, description, url) => {
+      log('error', 'failed to load page', { code, description, url });
+    });
 
     this.mWindow.webContents.session.on(
         'will-download', (event, item, webContents) => {
@@ -79,6 +102,7 @@ class MainWindow {
 
   public show(maximized: boolean) {
     const {getSafe} = require('../util/storeHelper') as typeof storeHelperT;
+    this.mShown = true;
     this.mWindow.show();
     if (maximized) {
       this.mWindow.maximize();

src/app/SplashScreen.ts

@@ -1,4 +1,5 @@
 import {delayed} from '../util/delayed';
+import getVortexPath from '../util/getVortexPath';
 
 class SplashScreen {
   private mWindow: Electron.BrowserWindow = null;
@@ -53,7 +54,7 @@ class SplashScreen {
           sandbox: false,
         },
       });
-      this.mWindow.loadURL(`${__dirname}/../splash.html`);
+      this.mWindow.loadURL(`${getVortexPath('base')}/splash.html`);
       this.mWindow.once('ready-to-show', onReady);
     });
   }

src/app/TrayIcon.ts

@@ -1,6 +1,8 @@
+import { IExtensionApi } from '../types/api';
+import getVortexPath from '../util/getVortexPath';
+
 import { app, Menu, NativeImage, Tray } from 'electron';
 import * as path from 'path';
-import { IExtensionApi } from '../types/api';
 
 class TrayIcon {
   private mTrayIcon: Electron.Tray;
@@ -10,7 +12,7 @@ class TrayIcon {
   constructor(api: IExtensionApi) {
     this.mApi = api;
     this.mImagePath = path.resolve(
-        __dirname, '..', 'assets', 'images',
+        getVortexPath('assets'), 'images',
         process.platform === 'win32' ? 'vortex.ico' : 'vortex.png');
     this.mTrayIcon = new Tray(this.mImagePath);
 
@@ -28,7 +30,7 @@ class TrayIcon {
   }
 
   private showNotification(title: string, content: string) {
-    const icon = path.resolve(__dirname, '..', 'assets', 'images', 'vortex.png');
+    const icon = path.join(getVortexPath('assets'), 'images', 'vortex.png');
     this.mTrayIcon.displayBalloon({
       title,
       content,

src/controls/Banner.tsx

@@ -70,11 +70,11 @@ class Banner extends React.Component<IProps, {}> {
 
   private cycle = () => {
     if (truthy(this.mRef)) {
-      this.mRef.childNodes.item(this.mCurrentBanner).attributes.removeNamedItem('class');
+      (this.mRef.childNodes.item(this.mCurrentBanner) as any).attributes.removeNamedItem('class');
       this.mCurrentBanner = (this.mCurrentBanner + 1) % this.mBanners.length;
       const attr = document.createAttribute('class');
       attr.value = 'active';
-      this.mRef.childNodes.item(this.mCurrentBanner).attributes.setNamedItem(attr);
+      (this.mRef.childNodes.item(this.mCurrentBanner) as any).attributes.setNamedItem(attr);
     }
   }
 }

src/controls/FormFeedback.tsx

@@ -1,7 +1,7 @@
 import Icon from './Icon';
 import Spinner from './Spinner';
 
-import classNames = require('classnames');
+import * as classNames from 'classnames';
 import * as _ from 'lodash';
 import * as PropTypes from 'prop-types';
 import * as React from 'react';

src/controls/VisibilityProxy.tsx

@@ -1,4 +1,4 @@
-import update = require('immutability-helper');
+import * as update from 'immutability-helper';
 import * as _ from 'lodash';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
@@ -34,7 +34,7 @@ class VisibilityProxy extends React.PureComponent<any, {}> {
       VisibilityProxy.sObservers.set(container || null,
           new IntersectionObserver(VisibilityProxy.callback, {
         root: container,
-        rootMargin: '90px 0px 90px 0px',
+        rootMargin: '180px 0px 180px 0px',
       } as any));
     }
     return VisibilityProxy.sObservers.get(container);

src/extensions/category_management/views/CategoryList.tsx

@@ -26,7 +26,7 @@ import { FormControl } from 'react-bootstrap';
 import * as SortableTreeT from 'react-sortable-tree';
 import * as Redux from 'redux';
 
-const tree = lazyRequire<typeof SortableTreeT>('react-sortable-tree');
+const tree = lazyRequire<typeof SortableTreeT>(() => require('react-sortable-tree'));
 
 const nop = () => undefined;
 

src/extensions/download_management/DownloadManager.ts

@@ -11,8 +11,8 @@ import FileAssembler from './FileAssembler';
 import SpeedCalculator from './SpeedCalculator';
 
 import * as Promise from 'bluebird';
-import contentDisposition = require('content-disposition');
-import contentType = require('content-type');
+import * as contentDisposition from 'content-disposition';
+import * as contentType from 'content-type';
 import { remote } from 'electron';
 import * as http from 'http';
 import * as https from 'https';

src/extensions/download_management/index.ts

@@ -227,13 +227,13 @@ function init(context: IExtensionContextExt): boolean {
     });
 
   context.registerMainPage('download', 'Downloads',
-                           LazyComponent('./views/DownloadView', __dirname), {
+                           LazyComponent(() => require('./views/DownloadView')), {
                              hotkey: 'D',
                              group: 'global',
                              badge: downloadCount,
                            });
 
-  context.registerSettings('Download', LazyComponent('./views/Settings', __dirname));
+  context.registerSettings('Download', LazyComponent(() => require('./views/Settings')));
 
   context.registerFooter('speed-o-meter', SpeedOMeter);
 

src/extensions/download_management/views/Dashlet.tsx

@@ -1,7 +1,6 @@
 import Dashlet from '../../../controls/Dashlet';
 import RadialProgress from '../../../controls/RadialProgress';
 import {IState} from '../../../types/IState';
-import asyncRequire from '../../../util/asyncRequire';
 import {ComponentEx, connect} from '../../../util/ComponentEx';
 import { bytesToString } from '../../../util/util';
 

src/extensions/download_management/views/DownloadGraph.tsx

@@ -1,5 +1,4 @@
 import {IState} from '../../../types/IState';
-import asyncRequire from '../../../util/asyncRequire';
 import {ComponentEx, connect} from '../../../util/ComponentEx';
 import { log } from '../../../util/log';
 import { bytesToString, truthy } from '../../../util/util';
@@ -40,14 +39,8 @@ class DownloadGraph extends ComponentEx<IProps, IComponentState> {
   }
 
   public componentWillMount() {
-    asyncRequire('recharts')
-    .then((rechartsIn) => {
-      recharts = rechartsIn;
-      this.forceUpdate();
-    })
-    .catch((err) => {
-      log('error', 'failed to load recharts', { err });
-    });
+    recharts = require('recharts');
+    this.forceUpdate();
   }
 
   public componentDidMount() {

src/extensions/download_management/views/DownloadView.tsx

@@ -14,7 +14,6 @@ import { IComponentContext } from '../../../types/IComponentContext';
 import { DialogActions, DialogType, IDialogContent, IDialogResult } from '../../../types/IDialog';
 import { IState } from '../../../types/IState';
 import { ITableAttribute } from '../../../types/ITableAttribute';
-import { Placeholder } from '../../../util/asyncRequire';
 import { ComponentEx, connect, translate } from '../../../util/ComponentEx';
 import { ProcessCanceled, UserCanceled } from '../../../util/CustomErrors';
 import * as fs from '../../../util/fs';

src/extensions/download_management/views/Settings.tsx

@@ -5,11 +5,14 @@ import { setMaxDownloads } from '../actions/settings';
 
 import getText from '../texts';
 
-import opn = require('opn');
+import {} from 'opn';
 import * as React from 'react';
 import { Button, ControlLabel, FormControl, FormGroup } from 'react-bootstrap';
 import * as Redux from 'redux';
 
+// tslint:disable-next-line:no-var-requires
+const opn = require('opn');
+
 interface IConnectedProps {
   parallelDownloads: number;
   isPremium: boolean;

src/extensions/extension_manager/ExtensionManager.tsx

@@ -6,6 +6,7 @@ import { IExtensionLoadFailure, IExtensionState, IState } from '../../types/ISta
 import { ITableAttribute } from '../../types/ITableAttribute';
 import { ComponentEx, connect, translate } from '../../util/ComponentEx';
 import * as fs from '../../util/fs';
+import getVortexPath from '../../util/getVortexPath';
 import { getSafe } from '../../util/storeHelper';
 import { spawnSelf } from '../../util/util';
 import MainPage from '../../views/MainPage';
@@ -235,7 +236,7 @@ class ExtensionManager extends ComponentEx<IProps, IComponentState> {
   }
 
   private readExtensions() {
-    const bundledPath = path.resolve(__dirname, '..', '..', 'bundledPlugins');
+    const bundledPath = getVortexPath('bundledPlugins');
     const extensionsPath = path.join(remote.app.getPath('userData'), 'plugins');
     const extensions: { [extId: string]: IExtension } = {};
 

src/extensions/extension_manager/installExtension.ts

@@ -2,7 +2,7 @@ import * as fs from '../../util/fs';
 
 import * as Promise from 'bluebird';
 import { app as appIn, remote } from 'electron';
-import ZipT = require('node-7z');
+import * as ZipT from 'node-7z';
 import * as path from 'path';
 import * as rimraf from 'rimraf';