Client: Support ES5

winwiz1 · winwiz1 · commit bc8313d34fe7 · 2020-02-08T15:41:33.000+11:00
diff --git a/README.md b/README.md
@@ -203,9 +203,9 @@ To turn off code splitting using multiple SPAs simply leave one SPA in the SPA C
 
 > Tip: Let's assume over the time the application has grown and acquired extensive reporting capabilities, perhaps with a reporting dashboard that imports many components. In this case the third SPA and its entry point `reporting.tsx` can be added to the SPA Configuration block. The entry point would import the dashboard and use it for rendering. Such an addition would take little time but bring performance and development/testing benefits. For example, some tests can focus on a React application which has the reporting SPA as the only entry in the SPA Configuration block thus taking the rest of the application out of the testing scope.
 ### Integration with UI and CSS Libraries
-Both libraries ([Semantic UI](https://react.semantic-ui.com) and [Typestyle](https://typestyle.github.io) respectively) provide React with the type safety afforded by Typescript.
+Both libraries ([Semantic UI](https://react.semantic-ui.com) and [Typestyle](https://typestyle.github.io) respectively) provide React with the type safety afforded by TypeScript.
 ### Testing
-Debuggable test cases written in Typescript. Integration with [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) on the client and [Supertest](https://github.com/visionmedia/supertest) on the backend. Both using [Jest](https://jestjs.io/) as an engine.<br/>
+Debuggable test cases written in TypeScript. Integration with [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) on the client and [Supertest](https://github.com/visionmedia/supertest) on the backend. Both using [Jest](https://jestjs.io/) as an engine.<br/>
 The client and backend can be tested independently by executing the `yarn test` command. Alternatively the same command can be executed at the workspace level.
 
 The repository is integrated with Travis CI and the test outcome is reflected by the test badge.
@@ -383,11 +383,24 @@ In case you have a utility class used infrequently, it can also be imported dyna
 Q: Do dynamic imports negate the need to have multiple SPAs.<br/>
 A: It depends. These two are complimentary techniques. Obviously once a bundle grows larger, it starts affecting performance as its loading time increases. But the reverse is also true, having too many small bundles could result in more network round-trips and the bundle compression will become less efficient. It can also complicate attempts to scrutinise network traffic including requests for bundles.
 
-Q: The client project does not have .html file(s). How can I add my own HTML?<br/>
-A: You can add .html snippet file to the project and change the `HtmlWebpackPlugin` configuration in `webpack.config.js` to include the content of your snippet into the generated .html files. That's how you would include polyfills etc. Look for the [headHtmlSnippet](https://github.com/jaketrent/html-webpack-template) configuration setting (and the bodyHtmlSnippet setting), it accepts a name of .html file. 
+Q: How can I add my own HTML including polyfills etc. to the generated .html files?<br/>
+A: Use react-helmet to add additional HTML tags to the `<head>` element and modify the existing ones. Alternatively use the `client\src\entrypoints\head-snippet.html` file. Its content is inserted into the `<head>` element. You can add a [bodyHtmlSnippet](https://github.com/jaketrent/html-webpack-template) by changing the `HtmlWebpackPlugin` configuration in `webpack.config.js` (search for `headHtmlSnippet` and add similar code).
 
-Q: How can I fix Typescript compilation errors?<br/>
-A: Note the Typescript version in `package.json`. Ensure the Typescript version shown at the VS Code status bar when .ts or .tsx file is opened is not lower.
+Q: I need to support Microsoft Edge and IE11.<br/>
+A: Edge is supported provided it has been updated using Windows updates. To support IE11 add the following 5 lines to the `client\src\entrypoints\head-snippet.html` file:
+```
+<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/whatwg-fetch@3.0.0/dist/fetch.umd.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/abortcontroller-polyfill@1.4.0/dist/umd-polyfill.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/mdn-polyfills/String.prototype.includes.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/mdn-polyfills/Object.assign.js"></script>
+```
+
+Q: In addition to Edge and IE11, I also need to support earlier versions of Internet Explorer.<br/>
+A: IE10 is officially [unsupported](https://support.microsoft.com/en-au/help/4488955/support-ending-for-internet-explorer-10) and therefore insecure. This project aims to support browsers that can be made secure.
+
+Q: How can I fix TypeScript compilation errors?<br/>
+A: Note the TypeScript version in `package.json`. Ensure the TypeScript version shown at the VS Code status bar when .ts or .tsx file is opened is not lower.
 
 Q: Breakpoints in Chrome DevTools are not hit. How can I fix it?<br/>
 A: Open the Settings page of the Chrome DevTools and ensure 'Enable JavaScript source maps' and 'Disable cache (while DevTools is open)' boxes are ticked. Close the Settings page and on the Network tab tick the 'Disable cache' box. If debugging a production build, change the `sourceMap` setting of the TerserPlugin config to `true` in `webpack.config.js`, then restart debugging.
diff --git a/client/config/spa.config.js b/client/config/spa.config.js
@@ -72,31 +72,37 @@ var ConfiguredSPAs = function() {
 
   SPAs.getEntrypoints = function() {
     var entryPoints = new Object();
-    SPAs.forEach(spa => (entryPoints[spa.params.name] = spa.params.entryPoint));
+    SPAs.forEach(function(spa) {
+      entryPoints[spa.params.name] = spa.params.entryPoint;
+    });
     return entryPoints;
   };
 
   SPAs.getRedirectName = function() {
-    return SPAs.find(spa => spa.params.redirect).params.name;
+    return SPAs.find(function(spa) {
+      return spa.params.redirect;
+    }).params.name;
   };
 
   SPAs.getNames = function() {
     var spaNames = new Array();
-    SPAs.forEach(spa => spaNames.push(spa.params.name));
+    SPAs.forEach(function(spa) {
+      spaNames.push(spa.params.name);
+    });
     return spaNames;
   };
 
   SPAs.getRewriteRules = function() {
     var ret = new Array();
-    SPAs.forEach(spa => {
+    SPAs.forEach(function(spa) {
       var rule = new Object();
-      rule.from = new RegExp(`^/${spa.params.name}` + "(\\.html)?$");
-      rule.to = `${spa.params.name}.html`;
+      rule.from = new RegExp("^/" + spa.params.name + "(\\.html)?$");
+      rule.to = spa.params.name + ".html";
       ret.push(rule);
     });
     ret.push({
       from: new RegExp("^.*$"),
-      to: `/${SPAs.getRedirectName()}.html`
+      to: "/" + SPAs.getRedirectName() + ".html"
     });
     return ret;
   };
diff --git a/client/package.json b/client/package.json
@@ -37,7 +37,7 @@
     "copy": "copyfiles -f dist/* ../server/build/client/"
   },
   "dependencies": {
-    "debug": "^4.1.1",
+    "loglevel": "^1.6.6",
     "react": "16.12.0",
     "react-dom": "16.12.0",
     "react-helmet": "5.2.1",
diff --git a/client/src/entrypoints/head-snippet.html b/client/src/entrypoints/head-snippet.html
diff --git a/client/src/utils/logger.ts b/client/src/utils/logger.ts
@@ -1,41 +1,24 @@
-import debug from "debug";
+import * as log from "loglevel";
 import * as SPAs from "../../config/spa.config";
 
-const enum LOG_LEVEL {
-  LOG_TRACE,
-  LOG_INFO,
-  LOG_WARN,
-  LOG_ERROR
-}
-
 export class Log {
-  private readonly BASE = SPAs.appTitle;
-
-  private generateMessage(level: LOG_LEVEL, message: string, source?: string) {
-    const namespace = `${this.BASE}:${level}`;
-    const logger: debug.Debugger = debug(namespace);
-
-    if (source) {
-      logger(source, message);
-    } else {
-      logger(message);
-    }
-  }
+  private readonly m_title = SPAs.appTitle;
+  private readonly m_logger = log.getLogger(this.m_title);
 
-  public trace(message: string, source?: string) {
-    return this.generateMessage(LOG_LEVEL.LOG_TRACE, message, source);
+  public trace(message: string) {
+    return this.m_logger.trace(message);
   }
 
-  public info(message: string, source?: string) {
-    return this.generateMessage(LOG_LEVEL.LOG_INFO, message, source);
+  public info(message: string) {
+    return this.m_logger.info(message);
   }
 
-  public warn(message: string, source?: string) {
-    return this.generateMessage(LOG_LEVEL.LOG_WARN, message, source);
+  public warn(message: string) {
+    return this.m_logger.warn(message);
   }
 
-  public error(message: string, source?: string) {
-    return this.generateMessage(LOG_LEVEL.LOG_ERROR, message, source);
+  public error(message: string) {
+    return this.m_logger.error(message);
   }
 }
 
diff --git a/client/webpack.config.js b/client/webpack.config.js
@@ -1,22 +1,24 @@
-const path = require('path');
-const webpack = require('webpack')
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');
-const TerserPlugin = require('terser-webpack-plugin');
-const configuredSPAs = require('./config/spa.config');
+const path = require("path");
+const fs = require("fs");
+const webpack = require("webpack")
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const HtmlWebpackHarddiskPlugin = require("html-webpack-harddisk-plugin");
+const TerserPlugin = require("terser-webpack-plugin");
+const configuredSPAs = require("./config/spa.config");
 const verifier = require("./config/verifySpaParameters");
-const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
+const headHtmlSnippet = fs.readFileSync(path.join("src", "entrypoints", "head-snippet.html"), "utf8");
 
 configuredSPAs.verifyParameters(verifier);
 
 const getWebpackConfig = (env, argv) => {
   const isProduction = (env && env.prod) ? true : false;
 
   const config = {
-    mode: isProduction ? 'production' : 'development',
-    devtool: 'source-map',
+    mode: isProduction ? "production" : "development",
+    devtool: "source-map",
     entry: configuredSPAs.getEntrypoints(),
     module: {
       rules: [
@@ -25,45 +27,45 @@ const getWebpackConfig = (env, argv) => {
           exclude: /node_modules/,
           use: [
             {
-              loader: 'ts-loader',
+              loader: "ts-loader",
               options: {
                 transpileOnly: true,
                 happyPackMode: true,
-                configFile: path.resolve(__dirname, 'tsconfig.json'),
+                configFile: path.resolve(__dirname, "tsconfig.json"),
               },
             }
           ],
         },
         {
           test: /\.css$/,
-          use: ['style-loader', 'css-loader'],
+          use: ["style-loader", "css-loader"],
         },
       ]
     },
     resolve: {
-      extensions: ['.tsx', '.ts', '.js'],
+      extensions: [".tsx", ".ts", ".js"],
       plugins: [
         new TsconfigPathsPlugin()
       ]
     },
     output: {
-      filename: '[name].[hash].bundle.js',
-      chunkFilename: '[name].[hash].bundle.js',
-      path: path.resolve(__dirname, 'dist'),
-      publicPath: '/static/',
+      filename: "[name].[hash].bundle.js",
+      chunkFilename: "[name].[hash].bundle.js",
+      path: path.resolve(__dirname, "dist"),
+      publicPath: "/static/",
     },
     optimization: {
       splitChunks: {
         cacheGroups: {
           vendor: {
             test: /node_modules/,
-            chunks: 'initial',
-            name: 'vendor',
+            chunks: "initial",
+            name: "vendor",
             enforce: true
           },
         },
       },
-      runtimeChunk: 'single',
+      runtimeChunk: "single",
       ...(isProduction && {
         minimizer: [
           new TerserPlugin({
@@ -86,7 +88,7 @@ const getWebpackConfig = (env, argv) => {
     plugins: [
       new CleanWebpackPlugin(),
       new webpack.DefinePlugin({
-        'process.env.DEVELOPMENT': JSON.stringify(isProduction === false)
+        "process.env.DEVELOPMENT": JSON.stringify(isProduction === false)
       }),
       new ForkTsCheckerWebpackPlugin({
         tslint: false,
@@ -96,8 +98,8 @@ const getWebpackConfig = (env, argv) => {
     ],
     devServer: {
       index: `/${configuredSPAs.getRedirectName()}.html`,
-      publicPath: '/static/',
-      contentBase: path.join(__dirname, 'dist'),
+      publicPath: "/static/",
+      contentBase: path.join(__dirname, "dist"),
       compress: false,
       hot: true,
       inline: true,
@@ -114,14 +116,15 @@ const getWebpackConfig = (env, argv) => {
   configuredSPAs.getNames().forEach((entryPoint) => {
     config.plugins.push(
       new HtmlWebpackPlugin({
-        template: require('html-webpack-template'),
+        template: require("html-webpack-template"),
         inject: false,
         title: configuredSPAs.appTitle,
         appMountId: "react-root",
         alwaysWriteToDisk: true,
         filename: `${entryPoint}.html`,
-        chunks: [`${entryPoint}`, 'vendor', 'runtime'],
+        chunks: [`${entryPoint}`, "vendor", "runtime"],
         addBrotliExtension: isProduction,
+        headHtmlSnippet,
         links: [
           "//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"
         ],
@@ -135,17 +138,17 @@ const getWebpackConfig = (env, argv) => {
   config.plugins.push(new HtmlWebpackHarddiskPlugin());
 
   if (isProduction) {
-    const BrotliPlugin = require('brotli-webpack-plugin');
+    const BrotliPlugin = require("brotli-webpack-plugin");
     const CompressionPlugin = require("compression-webpack-plugin")
     const HtmlWebpackBrotliPlugin = require("html-webpack-brotli-plugin")
 
     config.plugins.push(
       new webpack.DefinePlugin({
-        'process.env.NODE_ENV': JSON.stringify('production')
+        "process.env.NODE_ENV": JSON.stringify("production")
       }));
     config.plugins.push(
       new BrotliPlugin({
-        asset: '[path].br[query]',
+        asset: "[path].br[query]",
         test: /\.(js|css|html|svg)$/,
         threshold: 10240,
         minRatio: 0.8
@@ -155,8 +158,8 @@ const getWebpackConfig = (env, argv) => {
     );
     config.plugins.push(
       new CompressionPlugin({
-        filename: '[path].gz[query]',
-        algorithm: 'gzip',
+        filename: "[path].gz[query]",
+        algorithm: "gzip",
         test: /\.js$|\.css$|\.html$/,
         threshold: 10240,
         minRatio: 0.8
