feat: Webpack 5 (#34)

* fix: update to webpack 5

* Updating dev server and other dependencies.

* Post MUI-5 styling fix.

* Running Prettier.

* Fixing tests.

* retrigger checks

* Replacing non-functional semantic pull requests

Co-authored-by: Ian Schmitz <ianschmitz@gmail.com>
Co-authored-by: Eric Parsons <eparsons@latitudegeo.com>

Author: 3 people

.github/semantic.yml

@@ -21,10 +21,10 @@ jobs:
         steps:
             - uses: actions/checkout@v2
 
-            - name: Use Node.js 12
+            - name: Use Node.js 14
               uses: actions/setup-node@v1
               with:
-                  node-version: 12.x
+                  node-version: 14.x
 
             - run: npm install
 
@@ -47,10 +47,10 @@ jobs:
             - name: Fetch git tags
               run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*
 
-            - name: Use Node.js 12
+            - name: Use Node.js 14
               uses: actions/setup-node@v1
               with:
-                  node-version: 12.x
+                  node-version: 14.x
 
             - run: npm install
               env:

.github/workflows/ci-cd.yml

@@ -0,0 +1,17 @@
+name: "Lint PR"
+
+on:
+    pull_request:
+        types:
+            - opened
+            - edited
+            - synchronize
+
+jobs:
+    main:
+        name: Validate PR title
+        runs-on: ubuntu-latest
+        steps:
+            - uses: amannn/action-semantic-pull-request@v4
+              env:
+                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/lint-pr.yml

@@ -23,7 +23,8 @@ const resolveModule = (resolveFn, filePath) => {
 };
 const resolveProj = (relativePath) => path.resolve(projRoot, relativePath);
 // Up 1 from "config/"
-const resolveOwn = (relativePath) => path.resolve(__dirname, "..", relativePath);
+const resolveOwn = (relativePath) =>
+    path.resolve(__dirname, "..", relativePath);
 
 module.exports = {
     projBuild: resolveProj("build"),

config/paths.js

@@ -1,8 +1,8 @@
 {
     "compilerOptions": {
         "module": "esnext",
-        "target": "es2019",
-        "lib": ["es2019", "dom", "dom.iterable"],
+        "target": "es2021",
+        "lib": ["es2021", "dom", "dom.iterable"],
         "allowJs": true,
         // Assumes <projectdir>/node_modules/@vertigis/web-sdk/config
         "baseUrl": "../../../../",
@@ -19,6 +19,7 @@
         },
         "resolveJsonModule": true,
         "skipLibCheck": true,
+        "sourceMap": true,
         "strict": true,
         "strictNullChecks": false,
         "strictFunctionTypes": false,

config/tsconfig.json

@@ -6,11 +6,9 @@ const path = require("path");
 const paths = require("./paths");
 const webpack = require("webpack");
 
-const autoprefixer = require("autoprefixer");
 const { CleanWebpackPlugin } = require("clean-webpack-plugin");
 const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
 const HtmlWebPackPlugin = require("html-webpack-plugin");
-const TerserPlugin = require("terser-webpack-plugin");
 
 const isEnvDevelopment = process.env.NODE_ENV === "development";
 const isEnvProduction = process.env.NODE_ENV === "production";
@@ -23,11 +21,12 @@ const libId = require("crypto").randomBytes(8).toString("hex");
 module.exports = {
     mode: isEnvProduction ? "production" : "development",
     context: paths.projRoot,
-    devtool: isEnvProduction ? false : "eval",
+    devtool: isEnvProduction
+        ? false
+        : process.env.DEV_TOOL || "inline-source-map",
     // Disable perf hints as it's mostly out of the developer's control as we
     // only allow one chunk.
     performance: false,
-    stats: "minimal",
     resolve: {
         extensions: paths.moduleFileExtensions,
         alias: {
@@ -46,25 +45,16 @@ module.exports = {
         // Technically this shouldn't be needed as we restrict the library to
         // one chunk, but we set this here just to be extra safe against
         // collisions.
-        jsonpFunction: libId,
+        chunkLoadingGlobal: libId,
         libraryTarget: "amd",
         // Use "/" in dev so hot updates are requested from server root instead
         // of from "viewer" relative path.
         publicPath: isEnvProduction ? "." : "/",
         path: isEnvProduction ? paths.projBuild : undefined,
-        // TODO: remove this when upgrading to webpack 5
-        futureEmitAssets: true,
         // There will be one main bundle, and one file per asynchronous chunk.
         // In development, it does not produce real files.
         filename: "[name].js",
     },
-    optimization: {
-        // This is only used in production mode
-        minimizer: [
-            // Minify JS output
-            new TerserPlugin(),
-        ],
-    },
     module: {
         strictExportPresence: true,
         rules: [
@@ -78,9 +68,6 @@ module.exports = {
                     {
                         test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
                         loader: require.resolve("url-loader"),
-                        options: {
-                            esModule: true,
-                        },
                     },
                     // Process application JS with Babel.
                     // The preset includes JSX, Flow, TypeScript, and some ESnext features.
@@ -99,9 +86,6 @@ module.exports = {
                         use: [
                             {
                                 loader: require.resolve("style-loader"),
-                                options: {
-                                    esModule: true,
-                                },
                             },
                             {
                                 loader: require.resolve("css-loader"),
@@ -115,20 +99,9 @@ module.exports = {
                                 // package.json
                                 loader: require.resolve("postcss-loader"),
                                 options: {
-                                    ident: "postcss",
-                                    plugins: () =>
-                                        [
-                                            autoprefixer({
-                                                flexbox: "no-2009",
-                                                overrideBrowserslist: [
-                                                    "last 2 chrome versions",
-                                                    "last 2 firefox versions",
-                                                    "last 2 safari versions",
-                                                ],
-                                            }),
-                                            isEnvProduction &&
-                                                require("cssnano")(),
-                                        ].filter(Boolean),
+                                    postcssOptions: {
+                                        plugins: ["postcss-preset-env"],
+                                    },
                                 },
                             },
                         ],
@@ -165,12 +138,10 @@ module.exports = {
 
         isEnvProduction && new CleanWebpackPlugin(),
     ].filter(Boolean),
-    node: {
-        dgram: "empty",
-        fs: "empty",
-        net: "empty",
-        tls: "empty",
-        // eslint-disable-next-line @typescript-eslint/camelcase
-        child_process: "empty",
+    watchOptions: {
+        // Don't bother watching node_modules files for changes. This reduces
+        // CPU/mem overhead, but means that changes from `npm install` while the
+        // dev server is running won't take effect until restarted.
+        ignored: /node_modules/,
     },
 };

config/webpack.config.js

@@ -29,47 +29,46 @@
         "test": "node ./test/index.js"
     },
     "dependencies": {
-        "@typescript-eslint/eslint-plugin": "^4.27.0",
-        "@typescript-eslint/parser": "^4.27.0",
-        "autoprefixer": "^9.8.6",
+        "@typescript-eslint/eslint-plugin": "^5.29.0",
+        "@typescript-eslint/parser": "^5.29.0",
         "chalk": "^4.1.0",
-        "clean-webpack-plugin": "^3.0.0",
-        "css-loader": "^4.3.0",
-        "cssnano": "^4.1.10",
-        "eslint": "^7.28.0",
+        "clean-webpack-plugin": "^4.0.0",
+        "css-loader": "^6.7.1",
+        "eslint": "^8.18.0",
         "eslint-config-prettier": "^8.3.0",
         "eslint-plugin-react": "^7.24.0",
-        "eslint-plugin-react-hooks": "^4.2.0",
-        "fork-ts-checker-webpack-plugin": "^5.2.0",
+        "eslint-plugin-react-hooks": "^4.6.0",
+        "fork-ts-checker-webpack-plugin": "^6.2.6",
         "fs-extra": "^10.0.0",
-        "html-webpack-plugin": "^4.5.0",
+        "html-webpack-plugin": "^5.5.0",
         "node-fetch": "^2.6.7",
-        "open": "^8.2.0",
-        "postcss-loader": "^3.0.0",
-        "style-loader": "^1.2.1",
-        "terser-webpack-plugin": "^4.2.1",
-        "ts-loader": "^8.0.12",
+        "postcss-loader": "^7.0.0",
+        "postcss-preset-env": "^7.7.1",
+        "style-loader": "^3.3.1",
+        "terser-webpack-plugin": "^5.3.3",
+        "ts-loader": "^9.3.0",
         "url-loader": "^4.1.1",
-        "webpack": "^4.44.1",
-        "webpack-dev-server": "^3.11.0"
+        "webpack": "^5.73.0",
+        "webpack-dev-server": "^4.9.2"
     },
     "devDependencies": {
         "@types/node": "^14.14.13",
-        "@vertigis/web": "^5.16.0",
+        "@vertigis/web": "^5.17.0",
         "conventional-changelog-conventionalcommits": "^4.5.0",
         "cross-env": "^7.0.3",
         "execa": "^5.1.1",
-        "husky": "^6.0.0",
-        "p-retry": "^4.2.0",
-        "playwright-chromium": "1.12.2",
-        "prettier": "^2.3.1",
-        "pretty-quick": "^3.1.0",
-        "semantic-release": "^17.4.3",
-        "typescript": "^4.5.5"
+        "lint-staged": "13.0.2",
+        "p-retry": "^4.6.2",
+        "playwright-chromium": "1.22.2",
+        "prettier": "^2.7.1",
+        "semantic-release": "^19.0.3",
+        "simple-git-hooks": "2.8.0",
+        "typescript": "^4.7.4"
     },
-    "husky": {
-        "hooks": {
-            "pre-commit": "pretty-quick --staged"
-        }
+    "simple-git-hooks": {
+        "pre-commit": "npx lint-staged"
+    },
+    "lint-staged": {
+        "*.{js,json,ts,tsx,md,xml}": "prettier --write"
     }
 }

package.json

@@ -29,16 +29,10 @@ const build = () => {
 
             console.log(
                 stats.toString({
-                    // TODO: Use "preset" property instead when webpack 5 is released.
-                    // Copied from `minimal` preset.
-                    all: false,
-                    modules: true,
-                    maxModules: 0,
-                    errors: true,
-                    warnings: true,
-
-                    // Add in assets output to see chunk size.
-                    assets: true,
+                    preset: "normal",
+                    colors: chalk.supportsColor
+                        ? chalk.supportsColor.hasBasic
+                        : false,
                 })
             );
 
@@ -87,7 +81,7 @@ const build = () => {
         await build();
     } catch (e) {
         if (e && e.message) {
-            console.error(e.message);
+            console.error(e);
         }
         process.exit(1);
     }

scripts/build.js

@@ -14,7 +14,6 @@ process.on("unhandledRejection", (err) => {
 
 const http = require("http");
 const https = require("https");
-const open = require("open");
 const webpack = require("webpack");
 const WebpackDevServer = require("webpack-dev-server");
 const paths = require("../config/paths");
@@ -29,21 +28,23 @@ const port = process.env.PORT || 3000;
 
 const compiler = webpack(webpackConfig);
 const serverConfig = {
-    after: function () {
-        if (process.env.OPEN_BROWSER !== "false") {
-            open(`http://localhost:${port}${process.env.OPEN_PAGE || ""}`);
-        }
+    allowedHosts: "all",
+    client: {
+        logging: "none",
+        webSocketURL: {
+            port: process.env.SOCK_PORT || undefined,
+        },
     },
-    clientLogLevel: "silent",
     compress: true,
-    contentBase: paths.projPublicDir,
-    disableHostCheck: true,
     headers: {
         "Access-Control-Allow-Origin": "*",
     },
     // Allow binding to any host (localhost, jdoe-pc.latitudegeo.com, etc).
     host: "0.0.0.0",
     hot: true,
+    open:
+        process.env.OPEN_BROWSER !== "false" &&
+        `http://localhost:${port}${process.env.OPEN_PAGE || ""}`,
     port,
     proxy: {
         "/viewer": {
@@ -58,28 +59,10 @@ const serverConfig = {
             },
         },
     },
-    sockPort: process.env.SOCK_PORT || undefined,
-    stats: "minimal",
-    watchContentBase: true,
-    watchOptions: {
-        // Don't bother watching node_modules files for changes. This reduces
-        // CPU/mem overhead, but means that changes from `npm install` while the
-        // dev server is running won't take effect until restarted.
-        ignored: /node_modules/,
+    static: {
+        directory: paths.projPublicDir,
     },
 };
 
-const devServer = new WebpackDevServer(compiler, serverConfig);
-devServer.listen(serverConfig.port, serverConfig.host, (err) => {
-    if (err) {
-        throw err;
-    }
-});
-
-["SIGINT", "SIGTERM"].forEach((signal) => {
-    process.on(signal, () => {
-        devServer.close(() => {
-            process.exit();
-        });
-    });
-});
+const devServer = new WebpackDevServer(serverConfig, compiler);
+devServer.start();

scripts/start.js

@@ -2,4 +2,5 @@
     height: 20px;
     width: 20px;
     border-radius: 50%;
+    margin-right: 16px;
 }