Update tsconfig, webpack & pretierrc config

Author: ngoczwolinski

.prettierrc

@@ -1,9 +1,9 @@
 {
-    "printWidth": 100,
-    "semi": true,
-    "singleQuote": true,
-    "jsxSingleQuote": true,
-    "tabWidth": 2,
-    "bracketSpacing": true,
-    "trailingComma": "none"
-  }
+  "printWidth": 100,
+  "semi": true,
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "tabWidth": 2,
+  "bracketSpacing": true,
+  "trailingComma": "all"
+}

tsconfig.json

@@ -1,26 +1,80 @@
 {
   "compilerOptions": {
-    "outDir": "./src/extension/build/bundles/",
-    "module": "es6",
-    // "noImplicitAny": true,
+    /* Basic Options */
+    //---------------------LANGUAGE AND ENVIRONEMNT-----------------------------
+    // Specifies the ECMAScript version that the TypeScript compiler should target. This allow the transpiled file being used in older browser.
     "target": "es5",
+    // Specifies the syntax for writing React components in TypeScript
     "jsx": "react",
-    "removeComments": true,  
-    "allowJs": true,
-    "allowSyntheticDefaultImports": true,
-    "typeRoots": [
-      "./node_modules/@types"
-    ],
+
+    // --------------------------MODULES----------------------------------------
+    // Specifies the module format for the compiled TypeScript files
+    "module": "es6",
+    // Specifies the folder where TypeScript should look for type definition files.
+    "typeRoots": ["./node_modules/@types"],
+    // Specifies which global types to include in the project.
+    // Specifies type package names to be included without being referenced in a source file.
     "types": ["chrome", "jest", "node"],
-    "esModuleInterop": true,
+
+    // ---------------------------------TYPE CHECKING---------------------------
+    // "strict": true,                                    /* Enable all strict type-checking options. */
+    // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
+    // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
+    // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
+    // "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
+    // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
+    // "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
+    // "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
+    // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
+    // "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
+    // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
+    // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
+    // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
+    // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
+    // "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
+    // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
+    // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
+    // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
+    // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
+
+    // -------------------------------EMIT--------------------------------------
+    // Specifies TypeScript compiler to remove comments from the compiled JavaScript code.
+    "removeComments": true,
+
+    // --------------------------JAVASCRIPT SUPPORT-----------------------------
+    // Specifies TypeScript compiler to allow JavaScript files to be included in the compilation process. => good to use if want to incrementally convert javascript to typescript files
+    "allowJs": true,
+
+    // Specifies the module resolution strategy to use.
     "moduleResolution": "node",
+
+    // Enables TypeScript to import JSON files as modules.
     "resolveJsonModule": true,
+
+    //------------------------INTEROP CONSTRAINTS------------------------------
+    //  Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility.
+    "esModuleInterop": true,
+    // Specifies TypeScript compiler to allow importing modules with a default export from modules
+    // some third party modules may still use
+    "allowSyntheticDefaultImports": true,
+    // Transiple each file as a seprate module => expect all files to have import/export statement
+    // "isolatedModules": true,
+    // Ensures that file names are consistently cased.
     "forceConsistentCasingInFileNames": true,
+
+    // -----------------------------COMPLETENESS--------------------------------
+    // Skip type checking of type declartion files (.d.ts files) that are included with TypeScript. If we trust the type definition of our imported file, turn this flag on => reduce compiling time.
+    "skipLibCheck": true
   },
+
+  // Specifies which files should be included in the compilation.
   "include": ["./src/app", "./src/backend", "./src/extension", "./jest-setup.ts", "./global.d.ts"],
+  // Specifies which files should be excluded from the compilation.
   "exclude": ["./src/app/__tests__", "./src/backend/__tests__", "node_modules"],
+
+  // Specifies options for TypeDoc, a documentation generator for TypeScript. In this case, it tells TypeDoc to generate documentation for the project in "file" mode, and to output the documentation to a "docs" folder.
   "typeDocOptions": {
     "mode": "file",
     "out": "docs"
-  },
-}
+  }
+}

webpack.config.js

@@ -1,33 +1,52 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const path = require('path');
-const ChromeExtensionReloader = require('webpack-chrome-extension-reloader'); // enable hot reloading while developing a chrome extension
+
+/** ChromeExtensionReloader plugin is a tool for hot-reloading code in a Chrome extension during development.
+ * It works by injecting a script into the extension that listens for file changes and automatically reloads the extension when a file is modified.
+ */
+const ChromeExtensionReloader = require('webpack-chrome-extension-reloader');
+
 // const TypedocWebpackPlugin = require('typedoc-webpack-plugin');
 
 const config = {
   // use a "multi-main entry" to inject multiple dependent files together
   // and graph their dependencies into one "chunk"
   entry: {
-    // app: './src/app/index.js',
     app: './src/app/index.tsx',
     background: './src/extension/background.js',
     content: './src/extension/contentScript.ts',
-    backend: './src/backend/index.ts'
+    backend: './src/backend/index.ts',
   },
+  /**
+   * Bundle each entry point into one "chunk" & store it in the extension/build/bundles folder
+   * When load the unpacked extension in the chrome extension store, the src/extension/build folder is selected => load all bundles (app, backend, background & content script)
+   */
   output: {
     path: path.resolve(__dirname, 'src/extension/build/bundles'),
-    filename: '[name].bundle.js'
+    filename: '[name].bundle.js',
   },
+
   node: {
     net: 'empty',
-    tls: 'empty'
+    tls: 'empty',
   },
   module: {
+    /** The order of rules array is bottom to top.
+     * In your rules array, the order is:
+     * 1 .css and .scss files will be evaluated first will use the style-loader and css-loader, as well as the sass-loader (only applicable for .scss files).
+     * 2 .tsx and .ts files will be evaluated third and will use the ts-loader.
+     * 3 .jsx and .js files will be evaluated last and will use the babel-loader to transpile them into code that is compatible with older browsers.
+     */
     rules: [
+      /**
+       * For all files ending .js or .jsx, except those in node_modules
+       * => transpile them into code that is compatible with older browser using babel-loader
+       */
       {
         test: /\.jsx?/,
         exclude: /(node_modules)/,
         resolve: {
-          extensions: ['.js', '.jsx']
+          extensions: ['.js', '.jsx'],
         },
         use: {
           loader: 'babel-loader',
@@ -38,35 +57,46 @@ const config = {
                 {
                   useBuiltIns: 'entry',
                   corejs: 3,
-                  debug: true
-                }
+                  debug: true,
+                },
               ],
 
               '@babel/preset-react',
               {
-                plugins: ['@babel/plugin-proposal-class-properties']
-              }
-            ]
-          }
-        }
+                plugins: ['@babel/plugin-proposal-class-properties'],
+              },
+            ],
+          },
+        },
       },
+      /**
+       * For all files ending in .ts or .tsx, except those in node_modules
+       * => transpile typescript files into javascript file.
+       */
       {
         test: /\.tsx?$/,
         use: 'ts-loader',
         exclude: /node_modules/,
         resolve: {
-          extensions: ['.tsx', '.ts', '.js']
-        }
+          extensions: ['.tsx', '.ts', '.js'],
+        },
       },
+      /**
+       * For all files ending in .scss or .css files
+       * Since sass-loader will only works with .scss & .sass files, for any .css file, webpack will skip sass-loader and use css-loader, then style-loader.
+       */
       {
-        test: /\.scss$/,
-        use: ['style-loader', 'css-loader', 'sass-loader']
+        test: /\.s?css$/,
+        use: [
+          // Creates `style` nodes from JS strings
+          'style-loader',
+          // Translates CSS into CommonJS
+          'css-loader',
+          // Compiles Sass to CSS
+          'sass-loader',
+        ],
       },
-      {
-        test: /\.css$/,
-        use: ['style-loader', 'css-loader']
-      }
-    ]
+    ],
   },
   plugins: [
     // new TypedocWebpackPlugin({
@@ -76,19 +106,36 @@ const config = {
     //   includeDeclarations: false,
     //   ignoreCompilerErrors: true,
     // }),
-  ]
+  ],
+
+  // Add `.ts` and `.tsx` as a resolvable extension.
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js'],
+  },
 };
 
 module.exports = (env, argv) => {
+  /**
+   * env stands for "environment" and is an object that contains environment-specific configuration properties.
+   * argv stands for "argument vector" and is an object that contains the arguments passed to Webpack via the command line interface.
+   * argv.mode is an argument that is parsed by the Webpack CLI to specify the build mode.
+   * For example, running webpack --mode=production will set argv.mode to 'production'.
+   */
   if (argv.mode === 'development') {
+    /**
+     * "cheap-module-source-map" is a type of source map in webpack.
+     * A source map is a file that maps the source code to the compiled code, making it easier to debug and trace issues in the original source code.
+     * devtool is option to control if & how source maps are generated
+     * https://webpack.js.org/configuration/devtool/#root
+     */
     config.devtool = 'cheap-module-source-map';
     config.plugins.push(
       new ChromeExtensionReloader({
         entries: {
           contentScript: ['app', 'content'],
-          background: ['background']
-        }
-      })
+          background: ['background'],
+        },
+      }),
     );
   } else {
     config.mode = 'production';