update libs and move to webpack 4

2025-12-05 23:53:21 +00:00 · 2018-09-12 10:17:06 -04:00
parent 3ef60cb3a0
commit 0e96a462ee
12 changed files with 2230 additions and 1710 deletions
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -18,8 +18,14 @@ function webfonts() {
            format: 'woff',
        }))
        .pipe(gulp.dest(paths.cssDir));
-};
+}
+
+// ref: https://github.com/angular/angular/issues/22524
+function cleanupAotIssue() {
+    return del(['./node_modules/@types/uglify-js/node_modules/source-map/source-map.d.ts']);
+}

 gulp.task('clean', clean);
+gulp.task('cleanupAotIssue', cleanupAotIssue);
 gulp.task('webfonts', ['clean'], webfonts);
-gulp.task('prebuild:renderer', ['webfonts']);
+gulp.task('prebuild:renderer', ['webfonts', 'cleanupAotIssue']);
--- a/2
+++ b/2
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -107,71 +107,73 @@
    }
  },
  "devDependencies": {
-    "@angular/compiler-cli": "5.2.0",
-    "@microsoft/microsoft-graph-types": "^1.2.0",
-    "@ngtools/webpack": "1.10.2",
+    "@angular/compiler-cli": "^6.1.7",
+    "@microsoft/microsoft-graph-types": "^1.4.0",
+    "@ngtools/webpack": "^6.2.1",
    "@types/ldapjs": "^1.0.3",
-    "@types/lowdb": "^1.0.1",
-    "@types/lunr": "2.1.5",
-    "@types/node": "8.0.19",
-    "@types/node-forge": "0.7.1",
-    "@types/papaparse": "4.1.31",
-    "@types/semver": "5.5.0",
-    "@types/webcrypto": "0.0.28",
-    "clean-webpack-plugin": "^0.1.17",
-    "concurrently": "3.5.1",
-    "copy-webpack-plugin": "^4.2.0",
-    "css-loader": "^0.28.7",
+    "@types/lowdb": "^1.0.5",
+    "@types/lunr": "^2.1.6",
+    "@types/node-forge": "^0.7.5",
+    "@types/papaparse": "^4.5.3",
+    "@types/semver": "^5.5.0",
+    "@types/source-map": "0.5.2",
+    "@types/webcrypto": "^0.0.28",
+    "@types/webpack": "^4.4.11",
+    "clean-webpack-plugin": "^0.1.19",
+    "concurrently": "^4.0.1",
+    "copy-webpack-plugin": "^4.5.2",
+    "css-loader": "^1.0.0",
    "del": "^3.0.0",
    "electron": "2.0.7",
    "electron-builder": "^20.25.0",
    "electron-rebuild": "1.8.1",
    "electron-reload": "1.2.5",
-    "extract-text-webpack-plugin": "^3.0.1",
-    "file-loader": "^1.1.5",
+    "extract-text-webpack-plugin": "next",
+    "file-loader": "^2.0.0",
    "font-awesome": "4.7.0",
    "gulp": "^3.9.1",
    "gulp-google-webfonts": "^2.0.0",
-    "html-loader": "^0.5.1",
-    "html-webpack-plugin": "^2.30.1",
+    "html-loader": "^0.5.5",
+    "html-webpack-plugin": "^3.2.0",
    "node-loader": "^0.6.0",
-    "node-sass": "^4.9.2",
+    "node-sass": "^4.9.3",
    "rimraf": "^2.6.2",
-    "sass-loader": "^6.0.6",
-    "ts-loader": "^3.5.0",
-    "tslint": "^5.9.1",
-    "tslint-loader": "^3.5.3",
-    "typescript": "^2.7.1",
-    "webpack": "^3.10.0",
-    "webpack-merge": "^4.1.0",
-    "webpack-node-externals": "^1.6.0"
+    "sass-loader": "^7.1.0",
+    "ts-loader": "^5.1.0",
+    "tslint": "^5.11.0",
+    "tslint-loader": "^3.6.0",
+    "typescript": "^2.7.2",
+    "webpack": "^4.18.0",
+    "webpack-cli": "^3.1.0",
+    "webpack-merge": "^4.1.4",
+    "webpack-node-externals": "^1.7.2"
  },
  "dependencies": {
-    "@angular/animations": "5.2.0",
-    "@angular/common": "5.2.0",
-    "@angular/compiler": "5.2.0",
-    "@angular/core": "5.2.0",
-    "@angular/forms": "5.2.0",
-    "@angular/http": "5.2.0",
-    "@angular/platform-browser": "5.2.0",
-    "@angular/platform-browser-dynamic": "5.2.0",
-    "@angular/router": "5.2.0",
-    "@angular/upgrade": "5.2.0",
-    "@microsoft/microsoft-graph-client": "1.0.0",
-    "@okta/okta-sdk-nodejs": "1.1.0",
-    "angular2-toaster": "4.0.2",
-    "angulartics2": "5.0.1",
+    "@angular/animations": "6.1.7",
+    "@angular/common": "6.1.7",
+    "@angular/compiler": "6.1.7",
+    "@angular/core": "6.1.7",
+    "@angular/forms": "6.1.7",
+    "@angular/http": "6.1.7",
+    "@angular/platform-browser": "6.1.7",
+    "@angular/platform-browser-dynamic": "6.1.7",
+    "@angular/router": "6.1.7",
+    "@angular/upgrade": "6.1.7",
+    "@microsoft/microsoft-graph-client": "1.2.0",
+    "@okta/okta-sdk-nodejs": "1.2.0",
+    "angular2-toaster": "6.1.0",
+    "angulartics2": "6.3.0",
    "bootstrap": "4.1.3",
-    "core-js": "2.4.1",
+    "core-js": "2.5.7",
    "electron-log": "2.2.14",
    "electron-updater": "3.0.3",
-    "googleapis": "29.0.0",
+    "googleapis": "33.0.0",
    "keytar": "4.2.1",
    "ldapjs": "1.0.2",
    "lowdb": "1.0.0",
    "lunr": "2.3.3",
-    "node-forge": "0.7.1",
-    "rxjs": "5.5.6",
-    "zone.js": "0.8.19"
+    "node-forge": "0.7.6",
+    "rxjs": "6.3.2",
+    "zone.js": "0.8.26"
  }
 }
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -50,7 +50,7 @@ import { SearchCiphersPipe } from 'jslib/angular/pipes/search-ciphers.pipe';
                clearQueryParams: true,
            },
        }),
-        ToasterModule,
+        ToasterModule.forRoot(),
    ],
    declarations: [
        ApiActionDirective,
--- a/src/app/tabs/dashboard.component.html
+++ b/src/app/tabs/dashboard.component.html
@@ -14,12 +14,12 @@
            <strong *ngIf="syncRunning" class="text-success">{{'running' | i18n}}</strong>
            <strong *ngIf="!syncRunning" class="text-danger">{{'stopped' | i18n}}</strong>
        </p>
-        <button #startBtn (click)="start()" [appApiAction]="startPromise" class="btn btn-primary" [disabled]="startBtn.loading">
+        <button #startBtn (click)="start()" [appApiAction]="startPromise" class="btn btn-primary mr-1" [disabled]="startBtn.loading">
            <i class="fa fa-play fa-fw" [hidden]="startBtn.loading"></i>
            <i class="fa fa-spinner fa-fw fa-spin" [hidden]="!startBtn.loading"></i>
            {{'startSync' | i18n}}
        </button>
-        <button (click)="stop()" class="btn btn-primary">
+        <button (click)="stop()" class="btn btn-primary mr-1">
            <i class="fa fa-stop fa-fw"></i>
            {{'stopSync' | i18n}}
        </button>
--- a/src/app/tabs/more.component.html
+++ b/src/app/tabs/more.component.html
@@ -20,7 +20,7 @@
        <div class="card">
            <h3 class="card-header">{{'other' | i18n}}</h3>
            <div class="card-body">
-                <button class="btn btn-primary" type="button" (click)="logOut()">
+                <button class="btn btn-primary mr-1" type="button" (click)="logOut()">
                    {{'logOut' | i18n}}
                </button>
                <button class="btn btn-primary" type="button" (click)="clearCache()">
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,4 @@
-import { app, BrowserWindow } from 'electron';
+import { app } from 'electron';
 import * as path from 'path';

 import { MenuMain } from './main/menu.main';
--- a/src/services/gsuite-directory.service.ts
+++ b/src/services/gsuite-directory.service.ts
@@ -1,13 +1,8 @@
 import { JWT } from 'google-auth-library';
 import {
+    admin_directory_v1,
    google,
-    GoogleApis,
 } from 'googleapis';
-import {
-    Admin,
-    Schema$Group,
-    Schema$User,
-} from 'googleapis/build/src/apis/admin/directory_v1';

 import { DirectoryType } from '../enums/directoryType';

@@ -25,7 +20,7 @@ import { LogService } from 'jslib/abstractions/log.service';

 export class GSuiteDirectoryService extends BaseDirectoryService implements DirectoryService {
    private client: JWT;
-    private service: Admin;
+    private service: admin_directory_v1.Admin;
    private authParams: any;
    private dirConfig: GSuiteConfiguration;
    private syncConfig: SyncConfiguration;
@@ -33,7 +28,7 @@ export class GSuiteDirectoryService extends BaseDirectoryService implements Dire
    constructor(private configurationService: ConfigurationService, private logService: LogService,
        private i18nService: I18nService) {
        super();
-        this.service = google.admin<Admin>('directory_v1');
+        this.service = google.admin('directory_v1');
    }

    async getEntries(force: boolean, test: boolean): Promise<[GroupEntry[], UserEntry[]]> {
@@ -117,7 +112,7 @@ export class GSuiteDirectoryService extends BaseDirectoryService implements Dire
        return entries;
    }

-    private buildUser(user: Schema$User, deleted: boolean) {
+    private buildUser(user: admin_directory_v1.Schema$User, deleted: boolean) {
        if ((user.emails == null || user.emails === '') && !deleted) {
            return null;
        }
@@ -151,7 +146,7 @@ export class GSuiteDirectoryService extends BaseDirectoryService implements Dire
        return entries;
    }

-    private async buildGroup(group: Schema$Group) {
+    private async buildGroup(group: admin_directory_v1.Schema$Group) {
        const entry = new GroupEntry();
        entry.referenceId = group.id;
        entry.externalId = group.id;
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -25,6 +25,9 @@
      ],
      "electron": [
        "node_modules/electron"
+      ],
+      "node": [
+        "node_modules/@types/node"
      ]
    }
  },
--- a/webpack.main.js
+++ b/webpack.main.js
@@ -1,5 +1,4 @@
 const path = require('path');
-const webpack = require('webpack');
 const merge = require('webpack-merge');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
@@ -11,48 +10,49 @@ const common = {
            {
                test: /\.ts$/,
                enforce: 'pre',
-                loader: 'tslint-loader'
+                loader: 'tslint-loader',
            },
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
-                exclude: /node_modules\/(?!(@bitwarden)\/).*/
+                exclude: /node_modules\/(?!(@bitwarden)\/).*/,
            },
-        ]
+        ],
    },
    plugins: [],
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
        alias: {
-            jslib: path.join(__dirname, 'jslib/src')
-        }
+            jslib: path.join(__dirname, 'jslib/src'),
+        },
    },
    output: {
        filename: '[name].js',
-        path: path.resolve(__dirname, 'build')
-    }
+        path: path.resolve(__dirname, 'build'),
+    },
 };

 const main = {
+    mode: 'production',
    target: 'electron-main',
    node: {
        __dirname: false,
-        __filename: false
+        __filename: false,
    },
    entry: {
-        'main': './src/main.ts'
+        'main': './src/main.ts',
    },
    module: {
        rules: [
            {
                test: /\.node$/,
-                loader: 'node-loader'
+                loader: 'node-loader',
            },
-        ]
+        ],
    },
    plugins: [
        new CleanWebpackPlugin([
-            path.resolve(__dirname, 'build/*')
+            path.resolve(__dirname, 'build/*'),
        ]),
        new CopyWebpackPlugin([
            './src/package.json',
@@ -60,7 +60,7 @@ const main = {
            { from: './src/locales', to: 'locales' },
        ]),
    ],
-    externals: [nodeExternals()]
+    externals: [nodeExternals()],
 };

 module.exports = merge(common, main);
--- a/webpack.renderer.js
+++ b/webpack.renderer.js
@@ -5,17 +5,10 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const AngularCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin;

-const isVendorModule = (module) => {
-    if (!module.context) {
-        return false;
-    }
-    return module.context.indexOf('node_modules') !== -1;
-};
-
 const extractCss = new ExtractTextPlugin({
    filename: '[name].css',
    disable: false,
-    allChunks: true
+    allChunks: true,
 });

 const common = {
@@ -24,11 +17,11 @@ const common = {
            {
                test: /\.ts$/,
                enforce: 'pre',
-                loader: 'tslint-loader'
+                loader: 'tslint-loader',
            },
            {
                test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
-                loader: '@ngtools/webpack'
+                loader: '@ngtools/webpack',
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
@@ -38,39 +31,53 @@ const common = {
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'images/',
-                    }
-                }]
-            }
-        ]
+                    },
+                }],
+            },
+        ],
    },
    plugins: [],
    resolve: {
        extensions: ['.tsx', '.ts', '.js', '.json'],
        alias: {
-            jslib: path.join(__dirname, 'jslib/src')
+            jslib: path.join(__dirname, 'jslib/src'),
        },
        symlinks: false,
-        modules: [path.resolve('node_modules')]
+        modules: [path.resolve('node_modules')],
    },
    output: {
        filename: '[name].js',
-        path: path.resolve(__dirname, 'build')
-    }
+        path: path.resolve(__dirname, 'build'),
+    },
 };

 const renderer = {
+    mode: 'production',
    target: 'electron-renderer',
    node: {
-        __dirname: false
+        __dirname: false,
    },
    entry: {
-        'app/main': './src/app/main.ts'
+        'app/main': './src/app/main.ts',
+    },
+    optimization: {
+        splitChunks: {
+            cacheGroups: {
+                commons: {
+                    test: /[\\/]node_modules[\\/]/,
+                    name: 'app/vendor',
+                    chunks: (chunk) => {
+                        return chunk.name === 'app/main';
+                    },
+                },
+            },
+        },
    },
    module: {
        rules: [
            {
                test: /\.(html)$/,
-                loader: 'html-loader'
+                loader: 'html-loader',
            },
            {
                test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
@@ -79,9 +86,9 @@ const renderer = {
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
-                        outputPath: 'fonts/'
-                    }
-                }]
+                        outputPath: 'fonts/',
+                    },
+                }],
            },
            {
                test: /\.scss$/,
@@ -92,27 +99,27 @@ const renderer = {
                        },
                        {
                            loader: 'sass-loader',
-                        }
+                        },
                    ],
-                    publicPath: '../'
+                    publicPath: '../',
                })
            },
-        ]
+            // Hide System.import warnings. ref: https://github.com/angular/angular/issues/21560
+            {
+                test: /[\/\\]@angular[\/\\].+\.js$/,
+                parser: { system: true },
+            },
+        ],
    },
    plugins: [
        new AngularCompilerPlugin({
            tsConfigPath: 'tsconfig.json',
            entryModule: 'src/app/app.module#AppModule',
-            sourceMap: true
+            sourceMap: true,
        }),
        // ref: https://github.com/angular/angular/issues/20357
-        new webpack.ContextReplacementPlugin(/\@angular(\\|\/)core(\\|\/)esm5/,
+        new webpack.ContextReplacementPlugin(/\@angular(\\|\/)core(\\|\/)fesm5/,
            path.resolve(__dirname, './src')),
-        new webpack.optimize.CommonsChunkPlugin({
-            name: 'app/vendor',
-            chunks: ['app/main'],
-            minChunks: isVendorModule
-        }),
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
@@ -123,8 +130,8 @@ const renderer = {
            include: ['app/main.js']
        }),
        new webpack.DefinePlugin({ 'global.GENTLY': false }),
-        extractCss
-    ]
+        extractCss,
+    ],
 };

 module.exports = merge(common, renderer);