Merge pull request #11712 from vector-im/travis/babel7-wp-wp

Make the webpack config work for us

.babelrc

@@ -1,20 +1,25 @@
 {
+  "sourceMaps": true,
   "presets": [
-        "react",
+    ["@babel/preset-env", {
-        "es2015",
+      "targets": {
-        "es2016"
+        "browsers": [
-    ],
+          "last 2 versions"
-    "plugins": [
+        ]
-        [
+      }
-            "transform-builtin-extend",
+    }],
-            {
+    "@babel/preset-typescript",
-                "globals": ["Error"]
+    "@babel/preset-flow",
-            }
+    "@babel/preset-react"
-        ],
+  ],
-        "transform-class-properties",
+  "plugins": [
-        "transform-object-rest-spread",
+    ["@babel/plugin-proposal-decorators", {"legacy": true}],
-        "transform-runtime",
+    "@babel/plugin-proposal-export-default-from",
-        "add-module-exports",
+    "@babel/plugin-proposal-numeric-separator",
-        "syntax-dynamic-import"
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-object-rest-spread",
+    "@babel/plugin-transform-flow-comments",
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-transform-runtime"
   ]
 }

package.json

@@ -63,8 +63,6 @@
     "test-multi": "karma start"
   },
   "dependencies": {
-    "babel-polyfill": "^6.26.0",
-    "babel-runtime": "^6.26.0",
     "browser-request": "^0.3.3",
     "favico.js": "^0.3.10",
     "gemini-scrollbar": "github:matrix-org/gemini-scrollbar#91e1e566",
@@ -83,27 +81,32 @@
     "url": "^0.11.0"
   },
   "devDependencies": {
-    "autoprefixer": "^6.6.0",
+    "@babel/cli": "^7.7.5",
-    "babel-cli": "^6.26.0",
+    "@babel/core": "^7.7.5",
-    "babel-core": "^6.26.3",
+    "@babel/plugin-proposal-class-properties": "^7.7.4",
-    "babel-eslint": "^8.1.1",
+    "@babel/plugin-proposal-decorators": "^7.7.4",
-    "babel-loader": "^7.1.5",
+    "@babel/plugin-proposal-export-default-from": "^7.7.4",
-    "babel-plugin-add-module-exports": "^0.2.1",
+    "@babel/plugin-proposal-numeric-separator": "^7.7.4",
-    "babel-plugin-syntax-dynamic-import": "^6.18.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.7.4",
-    "babel-plugin-transform-builtin-extend": "^1.1.2",
+    "@babel/plugin-syntax-dynamic-import": "^7.7.4",
-    "babel-plugin-transform-class-properties": "^6.24.1",
+    "@babel/plugin-transform-flow-comments": "^7.7.4",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "@babel/plugin-transform-runtime": "^7.7.6",
-    "babel-plugin-transform-runtime": "^6.23.0",
+    "@babel/preset-env": "^7.7.6",
-    "babel-preset-es2015": "^6.24.1",
+    "@babel/preset-flow": "^7.7.4",
-    "babel-preset-es2016": "^6.24.1",
+    "@babel/preset-react": "^7.7.4",
-    "babel-preset-es2017": "^6.24.1",
+    "@babel/preset-typescript": "^7.7.4",
-    "babel-preset-react": "^6.24.1",
+    "@babel/register": "^7.7.4",
-    "babel-preset-stage-2": "^6.24.1",
+    "@babel/runtime": "^7.7.6",
+    "@types/react": "^16.9.16",
+    "@types/react-dom": "^16.9.4",
+    "autoprefixer": "^9.7.3",
+    "babel-eslint": "^10.0.3",
+    "babel-loader": "^8.0.6",
     "chokidar": "^2.0.4",
     "concurrently": "^4.0.1",
     "cpx": "^1.3.2",
     "cross-env": "^4.0.0",
-    "css-loader": "^2.1.0",
+    "css-loader": "^3.3.2",
     "electron-builder": "^21.2.0",
     "electron-builder-squirrel-windows": "^21.2.0",
     "electron-devtools-installer": "^2.2.4",
@@ -117,7 +120,7 @@
     "eslint-plugin-react-hooks": "^2.2.0",
     "expect": "^1.16.0",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
-    "file-loader": "^3.0.1",
+    "file-loader": "^5.0.2",
     "fs-extra": "^0.30.0",
     "html-webpack-plugin": "^3.2.0",
     "json-loader": "^0.5.3",
@@ -133,23 +136,27 @@
     "loader-utils": "^1.2.3",
     "matrix-mock-request": "^1.2.3",
     "matrix-react-test-utils": "^0.2.2",
+    "mini-css-extract-plugin": "^0.8.0",
     "minimist": "^1.2.0",
     "mkdirp": "^0.5.1",
     "mocha": "^5.2.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
     "postcss-extend": "^1.0.5",
-    "postcss-import": "^11.1.0",
+    "postcss-import": "^12.0.1",
-    "postcss-loader": "^2.1.6",
+    "postcss-loader": "^3.0.0",
-    "postcss-mixins": "^6.2.0",
+    "postcss-mixins": "^6.2.3",
-    "postcss-nested": "^3.0.0",
+    "postcss-nested": "^4.2.1",
-    "postcss-scss": "^1.0.6",
+    "postcss-preset-env": "^6.7.0",
-    "postcss-simple-vars": "^4.1.0",
+    "postcss-scss": "^2.0.0",
+    "postcss-simple-vars": "^5.0.2",
     "postcss-strip-inline-comments": "^0.1.5",
     "rimraf": "^2.4.3",
     "shell-escape": "^0.2.0",
-    "source-map-loader": "^0.2.4",
+    "terser-webpack-plugin": "^2.3.0",
-    "webpack": "^4.23.1",
+    "typescript": "^3.7.3",
-    "webpack-cli": "^3.1.2",
+    "webpack": "^4.41.2",
-    "webpack-dev-server": "^3.1.11"
+    "webpack-cli": "^3.3.10",
+    "webpack-dev-server": "^3.9.0"
   },
   "build": {
     "appId": "im.riot.app",

postcss.config.js

@@ -1,14 +0,0 @@
-module.exports = {
-    plugins: [
-        require("postcss-import")(),
-        require("autoprefixer")(),
-        require("postcss-simple-vars")(),
-        require("postcss-extend")(),
-        require("postcss-nested")(),
-        require("postcss-mixins")(),
-        require("postcss-easings")(),
-        require("postcss-strip-inline-comments")(),
-    ],
-    "parser": "postcss-scss",
-    "local-plugins": true,
-};

tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "target": "es2016",
+    "noImplicitAny": false,
+    "sourceMap": false,
+    "outDir": "./lib",
+    "declaration": true,
+    "types": [
+      "node"
+    ]
+  },
+  "include": [
+    "./src/**/*.ts"
+  ]
+}

webpack.config.js

@@ -1,18 +1,17 @@
 const path = require('path');
-const webpack = require('webpack');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const webpack = require("webpack");
 
 let og_image_url = process.env.RIOT_OG_IMAGE_URL;
 if (!og_image_url) og_image_url = 'https://riot.im/app/themes/riot/img/logos/riot-im-logo-black-text.png';
 
-module.exports = {
+module.exports = (env, argv) => ({
     entry: {
-        // Load babel-polyfill first to avoid issues where some imports (namely react)
+        "bundle": "./src/vector/index.js",
-        // are potentially loaded before babel-polyfill.
-        "bundle": ["babel-polyfill", "./src/vector/index.js"],
         "indexeddb-worker": "./src/vector/indexeddb-worker.js",
-
         "mobileguide": "./src/vector/mobile_guide/index.js",
 
         // CSS themes
@@ -21,10 +20,176 @@ module.exports = {
         "theme-light-custom": "./node_modules/matrix-react-sdk/res/themes/light-custom/css/light-custom.scss",
         "theme-dark-custom": "./node_modules/matrix-react-sdk/res/themes/dark-custom/css/dark-custom.scss",
     },
+
+    optimization: {
+        // Put all of our CSS into one useful place - this is needed for MiniCssExtractPlugin.
+        // Previously we used a different extraction plugin that did this magic for us, but
+        // now we need to consider that the CSS needs to be bundled up together.
+        splitChunks: {
+            cacheGroups: {
+                styles: {
+                    name: 'styles',
+                    test: /\.css$/,
+                    enforce: true,
+                    // Do not add `chunks: 'all'` here because you'll break the app entry point.
+                },
+            },
+        },
+
+        // Minification is normally enabled by default for webpack in production mode, but
+        // we use a CSS optimizer too and need to manage it ourselves.
+        minimize: argv.mode === 'production',
+        minimizer: argv.mode === 'production' ? [new TerserPlugin({}), new OptimizeCSSAssetsPlugin({})] : [],
+    },
+
+    resolve: {
+        // We define an alternative import path so we can safely use src/ across the react-sdk
+        // and js-sdk. We already import from src/ where possible to ensure our source maps are
+        // extremely accurate (and because we're capable of compiling the layers manually rather
+        // than relying on partially-mangled output from babel), though we do need to fix the
+        // package level import (stuff like `import {Thing} from "matrix-js-sdk"` for example).
+        // We can't use the aliasing down below to point at src/ because that'll fail to resolve
+        // the package.json for the dependency. Instead, we rely on the package.json of each
+        // layer to have our custom alternate fields to load things in the right order. These are
+        // the defaults of webpack prepended with `matrix_src_`.
+        mainFields: ['matrix_src_browser', 'matrix_src_main', 'browser', 'main'],
+        aliasFields: ['matrix_src_browser', 'browser'],
+
+        // We need to specify that TS can be resolved without an extension
+        extensions: ['.js', '.json', '.ts'],
+        alias: {
+            // alias any requires to the react module to the one in our path,
+            // otherwise we tend to get the react source included twice when
+            // using `npm link` / `yarn link`.
+            "react": path.resolve(__dirname, 'node_modules/react'),
+            "react-dom": path.resolve(__dirname, 'node_modules/react-dom'),
+
+            // same goes for js-sdk - we don't need two copies.
+            "matrix-js-sdk": path.resolve(__dirname, 'node_modules/matrix-js-sdk'),
+
+            // Define a variable so the i18n stuff can load
+            "$webapp": path.resolve(__dirname, 'webapp'),
+        },
+    },
+
     module: {
+        noParse: [
+            // for cross platform compatibility use [\\\/] as the path separator
+            // this ensures that the regex trips on both Windows and *nix
+
+            // don't parse the languages within highlight.js. They cause stack
+            // overflows (https://github.com/webpack/webpack/issues/1721), and
+            // there is no need for webpack to parse them - they can just be
+            // included as-is.
+            /highlight\.js[\\\/]lib[\\\/]languages/,
+
+            // olm takes ages for webpack to process, and it's already heavily
+            // optimised, so there is little to gain by us uglifying it.
+            /olm[\\\/](javascript[\\\/])?olm\.js$/,
+        ],
         rules: [
-            { enforce: 'pre', test: /\.js$/, use: "source-map-loader", exclude: /node_modules/, },
+            {
-            { test: /\.js$/, use: "babel-loader", include: path.resolve(__dirname, 'src') },
+                test: /\.(ts|js)x?$/,
+                exclude: /node_modules/,
+                loader: 'babel-loader',
+                options: {
+                    cacheDirectory: true,
+
+                    // These two options are needed to load the babelrc file and
+                    // apply it to node_modules (ie: react-sdk and js-sdk). We
+                    // could put the babel config in this block instead, but we
+                    // publish riot-web to npm for some reason and that seems to
+                    // ship a lib directory. Therefore, we need the babel config
+                    // in a place where babel and babel-loader can reach it.
+                    babelrc: true,
+                    configFile: path.resolve(__dirname, ".babelrc"),
+                }
+            },
+            {
+                test: /\.css$/,
+                use: [
+                    MiniCssExtractPlugin.loader,
+                    {
+                        loader: 'css-loader',
+                        options: {
+                            importLoaders: 1,
+                            sourceMap: true,
+                        }
+                    },
+                    {
+                        loader: 'postcss-loader',
+                        ident: 'postcss',
+                        options: {
+                            sourceMap: true,
+                            plugins: () => [
+                                // Note that we use significantly fewer plugins on the plain
+                                // CSS parser. If we start to parse plain CSS, we end with all
+                                // kinds of nasty problems (like stylesheets not loading).
+                                //
+                                // You might have noticed that we're also sending regular CSS
+                                // through PostCSS. This looks weird, and in fact is probably
+                                // not what you'd expect, however in order for our CSS build
+                                // to work nicely we have to do this. Because down the line
+                                // our SCSS stylesheets reference plain CSS we have to load
+                                // the plain CSS through PostCSS so it can find it safely. This
+                                // also acts like a babel-for-css by transpiling our (S)CSS
+                                // down/up to the right browser support (prefixes, etc).
+                                // Further, if we don't do this then PostCSS assumes that our
+                                // plain CSS is SCSS and it really doesn't like that, even
+                                // though plain CSS should be compatible. The chunking options
+                                // at the top of this webpack config help group the SCSS and
+                                // plain CSS together for the bundler.
+
+                                require("postcss-simple-vars")(),
+                                require("postcss-strip-inline-comments")(),
+
+                                // It's important that this plugin is last otherwise we end
+                                // up with broken CSS.
+                                require('postcss-preset-env')({stage: 3, browsers: 'last 2 versions'}),
+                            ],
+                            parser: "postcss-scss",
+                            "local-plugins": true,
+                        },
+                    },
+                ]
+            },
+            {
+                test: /\.scss$/,
+                use: [
+                    MiniCssExtractPlugin.loader,
+                    {
+                        loader: 'css-loader',
+                        options: {
+                            importLoaders: 1,
+                            sourceMap: true,
+                        }
+                    },
+                    {
+                        loader: 'postcss-loader',
+                        ident: 'postcss',
+                        options: {
+                            sourceMap: true,
+                            plugins: () => [
+                                // Note that we use slightly different plugins for SCSS.
+
+                                require('postcss-import')(),
+                                require("postcss-simple-vars")(),
+                                require("postcss-extend")(),
+                                require("postcss-nested")(),
+                                require("postcss-mixins")(),
+                                require("postcss-easings")(),
+                                require("postcss-strip-inline-comments")(),
+
+                                // It's important that this plugin is last otherwise we end
+                                // up with broken CSS.
+                                require('postcss-preset-env')({stage: 3, browsers: 'last 2 versions'}),
+                            ],
+                            parser: "postcss-scss",
+                            "local-plugins": true,
+                        },
+                    },
+                ]
+            },
             {
                 test: /\.wasm$/,
                 loader: "file-loader",
@@ -34,34 +199,6 @@ module.exports = {
                     outputPath: '.',
                 },
             },
-            {
-                test: /\.scss$/,
-                // 1. postcss-loader turns the SCSS into normal CSS.
-                // 2. css-loader turns the CSS into a JS module whose default
-                //    export is a string containing the CSS, while also adding
-                //    the images and fonts from CSS as Webpack inputs.
-                // 3. ExtractTextPlugin turns that string into a separate asset.
-                use: ExtractTextPlugin.extract({
-                    use: [
-                        "css-loader",
-                        {
-                            loader: 'postcss-loader',
-                            options: {
-                                config: {
-                                    path: './postcss.config.js',
-                                },
-                            },
-                        },
-                    ],
-                }),
-            },
-            {
-                // this works similarly to the scss case, without postcss.
-                test: /\.css$/,
-                use: ExtractTextPlugin.extract({
-                    use: "css-loader",
-                }),
-            },
             {
                 // cache-bust languages.json file placed in
                 // riot-web/webapp/i18n during build by copy-res.js
@@ -82,6 +219,7 @@ module.exports = {
                         issuer: /\.(scss|css)$/,
                         loader: 'file-loader',
                         options: {
+                            esModule: false,
                             name: '[name].[hash:7].[ext]',
                             outputPath: getImgOutputPath,
                             publicPath: function(url, resourcePath) {
@@ -97,6 +235,7 @@ module.exports = {
                         // Assets referenced in HTML and JS files
                         loader: 'file-loader',
                         options: {
+                            esModule: false,
                             name: '[name].[hash:7].[ext]',
                             outputPath: getImgOutputPath,
                             publicPath: function(url, resourcePath) {
@@ -107,26 +246,50 @@ module.exports = {
                     },
                 ],
             },
-        ],
+        ]
-        noParse: [
-            // for cross platform compatibility use [\\\/] as the path separator
-            // this ensures that the regex trips on both Windows and *nix
-
-            // don't parse the languages within highlight.js. They cause stack
-            // overflows (https://github.com/webpack/webpack/issues/1721), and
-            // there is no need for webpack to parse them - they can just be
-            // included as-is.
-            /highlight\.js[\\\/]lib[\\\/]languages/,
-
-            // olm takes ages for webpack to process, and it's already heavily
-            // optimised, so there is little to gain by us uglifying it.
-            /olm[\\\/](javascript[\\\/])?olm\.js$/,
-        ],
     },
+
+    plugins: [
+        new webpack.DefinePlugin({
+            'process.env': {
+                NODE_ENV: JSON.stringify(process.env.NODE_ENV),
+            },
+        }),
+
+        // This exports our CSS using the splitChunks and loaders above.
+        new MiniCssExtractPlugin({
+            filename: 'bundles/[hash]/[name].css',
+            ignoreOrder: false, // Enable to remove warnings about conflicting order
+        }),
+
+        // This is the app's main entry point.
+        new HtmlWebpackPlugin({
+            template: './src/vector/index.html',
+
+            // we inject the links ourselves via the template, because
+            // HtmlWebpackPlugin will screw up our formatting like the names
+            // of the themes and which chunks we actually care about.
+            inject: false,
+            excludeChunks: ['mobileguide'],
+            minify: argv.mode === 'production',
+            vars: {
+                og_image_url: og_image_url,
+            },
+        }),
+
+        // This is the mobile guide's entry point (separate for faster mobile loading)
+        new HtmlWebpackPlugin({
+            template: './src/vector/mobile_guide/index.html',
+            filename: 'mobile_guide/index.html',
+            minify: argv.mode === 'production',
+            chunks: ['mobileguide'],
+        }),
+    ],
+
     output: {
         path: path.join(__dirname, "webapp"),
 
-        // The generated JS (and CSS, from the ExtractTextPlugin) are put in a
+        // The generated JS (and CSS, from the extraction plugin) are put in a
         // unique subdirectory for the build. There will only be one such
         // 'bundle' directory in the generated tarball; however, hosting
         // servers can collect 'bundles' from multiple versions into one
@@ -135,62 +298,12 @@ module.exports = {
         // chunks even after the app is redeployed.
         filename: "bundles/[hash]/[name].js",
         chunkFilename: "bundles/[hash]/[name].js",
-        devtoolModuleFilenameTemplate: function(info) {
-            // Reading input source maps gives only relative paths here for
-            // everything. Until I figure out how to fix this, this is a
-            // workaround.
-            // We use the relative resource path with any '../'s on the front
-            // removed which gives a tree with matrix-react-sdk and vector
-            // trees smashed together, but this fixes everything being under
-            // various levels of '.' and '..'
-            // Also, sometimes the resource path is absolute.
-            return path.relative(process.cwd(), info.resourcePath).replace(/^[\/\.]*/, '');
     },
-    },
-    resolve: {
-        alias: {
-            // alias any requires to the react module to the one in our path,
-            // otherwise we tend to get the react source included twice when
-            // using `npm link` / `yarn link`.
-            "react": path.resolve('./node_modules/react'),
-            "react-dom": path.resolve('./node_modules/react-dom'),
 
-            // same goes for js-sdk
+    // DO NOT enable this option. It makes the source maps all wonky. Instead,
-            "matrix-js-sdk": path.resolve('./node_modules/matrix-js-sdk'),
+    // we end up including the sourcemaps through the loaders which makes them
-
+    // more accurate.
-            "$webapp": path.resolve('./webapp'),
+    //devtool: "source-map",
-        },
-    },
-    plugins: [
-        new webpack.DefinePlugin({
-            'process.env': {
-                NODE_ENV: JSON.stringify(process.env.NODE_ENV),
-            },
-        }),
-        new ExtractTextPlugin("bundles/[hash]/[name].css", {
-            allChunks: true,
-        }),
-
-        new HtmlWebpackPlugin({
-            template: './src/vector/index.html',
-
-            // we inject the links ourselves via the template, because
-            // HtmlWebpackPlugin wants to put the script tags either at the
-            // bottom of <head> or the bottom of <body>, and I'm a bit scared
-            // about moving them.
-            inject: false,
-            excludeChunks: ['mobileguide'],
-            vars: {
-                og_image_url: og_image_url,
-            },
-        }),
-        new HtmlWebpackPlugin({
-            template: './src/vector/mobile_guide/index.html',
-            filename: 'mobile_guide/index.html',
-            chunks: ['mobileguide'],
-        }),
-    ],
-    devtool: 'source-map',
 
     // configuration for the webpack-dev-server
     devServer: {
@@ -202,13 +315,13 @@ module.exports = {
             chunks: false,
         },
 
-        // hot mdule replacement doesn't work (I think we'd need react-hot-reload?)
+        // hot module replacement doesn't work (I think we'd need react-hot-reload?)
         // so webpack-dev-server reloads the page on every update which is quite
         // tedious in Riot since that can take a while.
         hot: false,
         inline: false,
     },
-};
+});
 
 /**
  * Merge assets found via CSS and imports into a single tree, while also preserving