fix(core): Fix security issue and update dependencies

Closes #501

package.json

@@ -22,53 +22,56 @@
     "csvtojson": "1.1.11",
     "dotjem-angular-tree": "github:dotJEM/angular-tree",
     "file-saver": "2.0.0",
-    "geoApi": "github:fgpv-vpgf/geoApi#v2.5.0-2",
-    "jquery": "3.3.1",
+    "geoApi": "github:fgpv-vpgf/geoApi#v3.2.0",
+    "jquery": "3.4.1",
     "jquery-ui": "1.12.1",
     "moment-timezone": "0.5.14",
-    "tv4": "1.0.15"
+    "tv4": "1.3.0"
   },
   "devDependencies": {
     "babel-core": "6.26.3",
     "babel-eslint": "8.2.3",
     "babel-loader": "7.1.4",
+    "babel-plugin-transform-runtime": "6.23.0",
     "babel-preset-env": "1.6.1",
-    "bootstrap": "3.3.5",
-    "clean-webpack-plugin": "0.1.19",
-    "copy-webpack-plugin": "4.5.1",
-    "css-loader": "0.28.11",
-    "docdash": "github:fgpv-vpgf/docdash",
-    "eslint": "4.19.1",
-    "eslint-loader": "2.0.0",
-    "extract-text-webpack-plugin": "3.0.2",
-    "file-loader": "1.1.11",
-    "gh-pages": "1.1.0",
-    "glob": "7.1.2",
+    "bootstrap": "3.4.1",
+    "copy-webpack-plugin": "5.0.4",
+    "css-loader": "3.2.0",
+    "eslint": "6.3.0",
+    "eslint-loader": "2.2.1",
+    "file-loader": "4.2.0",
+    "fs-extra": "7.0.1",
+    "gh-pages": "2.1.1",
+    "glob": "7.1.3",
     "html-loader": "0.5.5",
-    "html-webpack-include-assets-plugin": "1.0.2",
-    "html-webpack-plugin": "2.30.1",
-    "imports-loader": "^0.6.5",
-    "jsdoc": "3.5.5",
+    "html-webpack-plugin": "3.2.0",
+    "html-webpack-tags-plugin": "2.0.17",
+    "imports-loader": "0.8.0",
+    "jsdoc": "^3.6.3",
+    "mini-css-extract-plugin": "0.8.0",
     "net": "1.0.2",
     "ng-annotate-loader": "0.6.1",
     "ngtemplate-loader": "2.0.1",
-    "node-sass": "4.9.0",
-    "protractor": "5.3.1",
-    "raw-loader": "0.5.1",
-    "resolve-url-loader": "2.2.1",
-    "sass-loader": "7.0.1",
-    "style-loader": "0.21.0",
-    "url-loader": "1.0.1",
-    "webpack": "^3.10.0",
-    "webpack-bundle-analyzer": "3.3.2",
-    "webpack-dev-server": "2.9.7",
-    "webpack-merge": "4.1.2",
+    "node-sass": "4.12.0",
+    "optimize-css-assets-webpack-plugin": "5.0.1",
+    "protractor": "5.4.2",
+    "raw-loader": "3.1.0",
+    "resolve-url-loader": "3.1.0",
+    "sass-loader": "7.2.0",
+    "style-loader": "1.0.0",
+    "terser-webpack-plugin": "1.4.1",
+    "url-loader": "2.1.0",
+    "webpack": "4.39.1",
+    "webpack-bundle-analyzer": "^3.6.0",
+    "webpack-cli": "3.3.6",
+    "webpack-dev-server": "3.8.0",
+    "webpack-merge": "4.2.1",
     "webpack-shell-plugin": "0.5.0",
-    "webpack-subresource-integrity": "1.1.0-rc.4",
-    "wrapper-webpack-plugin": "1.0.0",
+    "webpack-subresource-integrity": "1.3.2",
+    "wrapper-webpack-plugin": "2.1.0",
     "xml2js": "0.4.19",
-    "xml2js-xpath": "0.8.0",
-    "zip-webpack-plugin": "2.1.0"
+    "xml2js-xpath": "^0.10.0",
+    "zip-webpack-plugin": "3.0.0"
   },
   "scripts": {
     "build": "webpack",

scripts/postBuild.sh

@@ -0,0 +1,3 @@
+#!/bin/bash
+
+rm -rf build/help

scripts/preBuild.sh

@@ -0,0 +1,5 @@
+#!/bin/bash
+
+# remove build and dist folders before new files are added
+echo "Removing 'build' and 'dist' folders"
+rm -rf ./build ./dist

src/app/core/stateManager.service.js

@@ -10,7 +10,7 @@ angular
     .module('app.core')
     .factory('stateManager', stateManager);
 
-function stateManager($timeout, $translate, events, constants, commonService, modelManager) {
+function stateManager($translate, events, constants, commonService) {
 
     const service = {
         getState,

src/app/ui/forms/map/map.directive.js

@@ -198,14 +198,14 @@ function Controller($scope, $translate, $timeout,
             self.formService.initValueToFormIndex(entries, entryClass, 'index', 'legend.0');
 
             // set columns if need be
-            for (let [entryIndex, entries] of entries.entries()) {
-                if (typeof entries.table !== 'undefined' && typeof entries.table.columns !== 'undefined') {
+            for (let [entryIndex, entry] of entries.entries()) {
+                if (typeof entry.table !== 'undefined' && typeof entry.table.columns !== 'undefined') {
                     let columnClass = [
                         { 'cls': 'av-layers', 'ind': layerIndex },
                         { 'cls': 'av-layerEntries', 'ind': entryIndex },
                         { 'cls': 'av-columns', 'ind': -1 }
                     ];
-                    self.formService.initValueToFormIndex(entries.table.columns, columnClass, 'title', 'legend.0');
+                    self.formService.initValueToFormIndex(entry.table.columns, columnClass, 'title', 'legend.0');
                 }
             }
         } else if (layerType === 'ogcWms') {

webpack.common.js

@@ -2,23 +2,22 @@ const webpack   = require('webpack');
 const path      = require('path');
 const fs        = require('fs');
 const glob      = require('glob');
-const ExtractTextPlugin  = require('extract-text-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const TranslationPlugin     = require('./scripts/webpack/translations_plugin.js');
 const CopyWebpackPlugin     = require('copy-webpack-plugin');
 const VersionPlugin         = require('./scripts/webpack/version_plugin.js');
 const WrapperPlugin         = require('wrapper-webpack-plugin');
-const CleanWebpackPlugin    = require('clean-webpack-plugin');
 const HtmlWebpackPlugin     = require('html-webpack-plugin');
-const HtmlWebpackIncludeAssetsPlugin = require('html-webpack-include-assets-plugin');
-
-// NOTE: We are with Webpack 3 because of HtmlWebpackIncludeAssetsPlugin. If we switch to Webpack 4 this plugin
-// doesn't work anymore... we will have to find a solution.
+const htmlWebpackTagsPlugin = require('html-webpack-tags-plugin');
+const BundleAnalyzerPlugin  = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const WebpackShellPlugin    = require('webpack-shell-plugin');
 
 const babelPresets = {
     presets: ['env', 'stage-2'],
     cacheDirectory: true
 }
 
+// eslint-disable-next-line complexity
 module.exports = function (env) {
 
     const geoPath = env.geoLocal ?
@@ -40,9 +39,22 @@ module.exports = function (env) {
 
         module: {
             rules: [
+                {
+                    test: /\.(woff(2)?)(\?v=\d+\.\d+\.\d+)?$/,
+                    include: [path.resolve(__dirname, 'src/content/fonts')],
+                    use: [{
+                        loader: 'file-loader',
+                        options: {
+                            name: '[name].[ext]',
+                            mimetype: 'application/font-woff',
+                            publicPath: 'fonts/',
+                            outputPath: 'fonts/'
+                        }
+                    }]
+                },
                 {
                     test: /\.js$/,
-                    include: [path.resolve(__dirname, 'src/app'), path.resolve(__dirname, 'src/plugins'), geoPath],
+                    include: [path.resolve(__dirname, 'src/app'), geoPath],
                     use: [{
                         loader: 'ng-annotate-loader'
                     }, {
@@ -53,39 +65,30 @@ module.exports = function (env) {
                     }]
                 },
                 {
-                    test: /\.css$/,
-                    use: ExtractTextPlugin.extract({
-                        use: ['style-loader', 'css-loader']
-                    })
-                },
-                {
-                // for .css files in bootsrap node_modules
-                    test: /\.css$/,
-                    include: [path.resolve(__dirname, 'node_modules/bootstrap')],
-                    use: ['style-loader', 'css-loader']
-                },
-                {
-                    test: /\.(woff|woff2|ttf|eot)$/,
-                    loader: "url-loader?limit=10000&mimetype=application/font-woff"
-                },
-                {
-                    test: /\.scss$/,
-                    use: ExtractTextPlugin.extract({
-                        fallback: 'style-loader',
-                        use: ['css-loader', 'resolve-url-loader', 'sass-loader?sourceMap']
-                    })
+                    test: /\.s?[ac]ss$/,
+                    include: [path.resolve(__dirname, 'src/content/styles'), path.resolve(__dirname, 'node_modules/@fgpv')],
+                    use: [
+                        env.hmr ? 'style-loader' : MiniCssExtractPlugin.loader,
+                        {loader: 'css-loader'},
+                        {
+                            loader: 'resolve-url-loader'
+                        },
+                        'sass-loader'
+                    ]
                 },
                 {
                     test: /\.html$/,
+                    include: [path.resolve(__dirname, 'src/content/samples'), path.resolve(__dirname, 'src/app')],
                     use: ['ngtemplate-loader?relativeTo=' + (path.resolve(__dirname, './src/app')), 'html-loader?minimize=false']
                 },
                 {
-                    test: /\.(png|svg)$/,
+                    test: /\.(png|svg|woff|woff2)$/,
+                    include: [path.resolve(__dirname, 'src/content'), path.resolve(__dirname, 'node_modules/ag-grid-community'),
+                        path.resolve(__dirname, 'node_modules/@claviska'), path.resolve(__dirname, 'node_modules/bootstrap/dist/fonts')],
                     use: 'url-loader'
                 },
-                {
-                    test: /\.xsl$/,
-                    use: 'raw-loader'
+                {   test: /\.(ttf|eot)$/,
+                    loader: 'file-loader'
                 },
                 {
                     test: /ui-sortable/,
@@ -95,30 +98,19 @@ module.exports = function (env) {
         },
 
         plugins: [
-            new webpack.PrefetchPlugin(geoPath),
-            new webpack.PrefetchPlugin(path.resolve(__dirname, 'src/app/app-loader.js')),
+            new MiniCssExtractPlugin({
+                filename: "av-styles.css"
+            }),
 
-            new webpack.optimize.ModuleConcatenationPlugin(),
+            new WebpackShellPlugin({
+                onBuildStart: ['bash scripts/preBuild.sh'],
+                onBuildEnd: ['bash scripts/postBuild.sh']
+            }),
 
             new CopyWebpackPlugin([{
                 context: 'src/content/samples',
-                from: '**/*.json',
+                from: '**/*.+(json|js|css|html)',
                 to: 'samples'
-            },{
-                context: 'src/content/samples',
-                from: '**/*.html',
-                to: 'samples'
-            },{
-                context: 'src/content/samples',
-                from: '**/*.js',
-                to: 'samples'
-            },{
-                context: 'src/content/samples',
-                from: '**/*.css',
-                to: 'samples'
-            },{
-                from: 'src/content/samples/extensions',
-                to: 'samples/extensions'
             },{
                 from: 'src/locales/help',
                 to: 'samples/help'
@@ -131,16 +123,6 @@ module.exports = function (env) {
                 { from: 'node_modules/tv4/tv4.js', to: 'form'},
                 { from: 'node_modules/angular-schema-form-bootstrap/dist/angular-schema-form-bootstrap-bundled.min.js', to: 'form'}
             ]),
-            new HtmlWebpackIncludeAssetsPlugin({
-                assets: ['form/tv4.js'],
-                append: false
-            }),
-            new HtmlWebpackIncludeAssetsPlugin({
-                assets: ['form/angular-schema-form-bootstrap-bundled.min.js'],
-                append: true
-            }),
-
-            new ExtractTextPlugin('av-styles.css'),
 
             new webpack.ProvidePlugin({
                 $: 'jquery',
@@ -155,27 +137,28 @@ module.exports = function (env) {
                 footer: fileName => /^av-main\.js$/.test(fileName) ? fs.readFileSync('./scripts/webpack/footer.js', 'utf8') : ''
             }),
 
-            new VersionPlugin(),
-
-            new CleanWebpackPlugin(['build'])
+            new VersionPlugin()
         ],
 
         resolve: {
             modules: [path.resolve(__dirname, 'node_modules'), path.resolve(geoPath, 'node_modules')],
             alias: {
-                XSLT: path.resolve(__dirname, 'src/content/metadata/'),
                 jquery: 'jquery/src/jquery', // so webpack builds from src and not dist - optional but good to have
                 src: path.resolve(__dirname, 'src/'),
                 app: path.resolve(__dirname, 'src/app/')
-            }
+            },
+            extensions: ['.js', 'css', 'scss']
         },
+
         watchOptions: {
             aggregateTimeout: 300,
             poll: 1000,
             ignored: /node_modules/
         },
+
         devServer: {
             host: '0.0.0.0',
+            https: !!env.https,
             publicPath: '/',
             historyApiFallback: {
                 index: '/samples/webpack-note.html',
@@ -189,7 +172,7 @@ module.exports = function (env) {
         }
     };
 
-    const files = glob.sync("samples/**/*", { cwd: './src/content/', nodir: true });
+    const files = glob.sync('samples/**/*', {cwd: './src/content/', nodir: true});
     config.plugins.push(...files.map(file => {
         if (/\.tpl$/.test(file)) {
             const filePath = file.split('/');
@@ -204,6 +187,24 @@ module.exports = function (env) {
     }).filter(x => x)
     );
 
+    config.plugins.push(new htmlWebpackTagsPlugin({
+        tags: ['form/tv4.js'],
+        append: false
+    }));
+    config.plugins.push(new htmlWebpackTagsPlugin({
+        tags: ['form/angular-schema-form-bootstrap-bundled.min.js'],
+        append: true
+    }));
+
+    // not supported while doing hmr - causes memory leaks and slows build time by ~40%
+    if (!env.hmr && !env.inspect) {
+        config.plugins.push(new webpack.optimize.ModuleConcatenationPlugin());
+    }
+
+    if (env.inspect) {
+        config.plugins.push(new BundleAnalyzerPlugin({openAnalyzer: false, generateStatsFile: true}));
+    }
+
     if (env.geoLocal) {
         config.resolve.alias['geoApi$'] = geoPath;
     }

webpack.config.js

@@ -1,7 +1,11 @@
 /* Webpack command line options
+    Use `npm run build -- --env.[]` to supply webpack environmental options.
+
+    env.prod                        -   Create production build
     env.useMap                      -   Enable source maps on develop (increases build time)
     env.geoLocal                    -   Replaces geoApi from npm node_module with a local geoApi repo folder located by ../geoApi
-    env.geoLocal="path/to/geoApi"   -   same as no argument env.geoLocal but uses provided path to local folder
+    env.geoLocal="path/to/geoApi"   -   Same as no argument env.geoLocal but uses provided path to local folder
+    env.inspect                     -   Use for analysing our bundle component sizes and dependency trees.
 */
 module.exports = function(env = {}) {
     return require(`./webpack.${env.prod ? 'prod' : 'dev'}.js`)(env);

webpack.dev.js

@@ -1,13 +1,18 @@
-const webpack   = require('webpack');
 const Merge         = require('webpack-merge');
 const CommonConfig  = require('./webpack.common.js');
 
 module.exports = function (env) {
     const config = Merge(CommonConfig(env), {});
 
+    config.mode = 'development';
     if (env.useMap) {
         config.devtool = 'cheap-module-eval-source-map';
     }
 
+    if (env.bundleAnalyzer) {
+        const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+        config.plugins.push(new BundleAnalyzerPlugin());
+    }
+
     return config;
 }