Merge branch 'release/3.0.0'

Author: iamWing

.eslintrc

@@ -1,36 +1,73 @@
 {
+  "root": true,
   "env": {
     "browser": true,
     "node": true
   },
-  "extends": "airbnb",
+  "extends": [
+    "airbnb",
+    "airbnb/hooks"
+  ],
   "rules": {
-    "no-unused-vars": "warn",
-    "max-len": [
-      "error",
-      {
-        "ignoreUrls": true
-      }
-    ],
     "import/no-extraneous-dependencies": [
       "error",
       {
         "devDependencies": [
-          "webpack.*.js",
-          "test/**/*.js"
+          "**/webpack.*",
+          "test/**/*"
         ]
       }
     ],
-    "sort-imports": 2,
-    "import/prefer-default-export": 0,
-    "import/no-default-export": 2,
-    "import/no-named-default": 0,
-    "react/jsx-no-bind": false
+    "max-len": [
+      "warn",
+      {
+        "ignoreUrls": true
+      }
+    ],
+    "sort-imports": "warn"
   },
-  "plugins": [
-    "import"
-  ],
   "settings": {
-    "import/resolver": "webpack"
-  }
-}
+    "import/resolver": {
+      "node": {
+        "extensions": [
+          ".js",
+          ".jsx",
+          ".ts",
+          ".tsx"
+        ]
+      },
+      "webpack": {
+        "config": "./webpack.config.js"
+      }
+    }
+  },
+  "overrides": [
+    {
+      "files": [
+        "**/*.ts",
+        "**/*.tsx"
+      ],
+      "parser": "@typescript-eslint/parser",
+      "parserOptions": {
+        "project": "./tsconfig.json"
+      },
+      "plugins": [
+        "@typescript-eslint"
+      ],
+      "extends": [
+        "plugin:@typescript-eslint/eslint-recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:@typescript-eslint/recommended-requiring-type-checking"
+      ],
+      "rules": {
+        // This rule is already covered by the TypeScript compiler.
+        "import/default": "off",
+        // This rule is already covered by the TypeScript compiler.
+        "import/no-unresolved": "off",
+        "no-use-before-define": "off",
+        "@typescript-eslint/no-use-before-define": "warn",
+        "react/jsx-filename-extension": "off"
+      }
+    }
+  ]
+}

.github/FUNDING.yml

@@ -0,0 +1,12 @@
+# These are supported funding model platforms
+
+github: [iamWing]
+patreon: # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
+custom: ['https://paypal.me/iamWing0w0']

CHANGELOG.md

@@ -6,6 +6,75 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [3.0.0] - 2020-12-26
+### Added
+- NPM packages `react-router` & `react-router-dom` to package dependencies.
+- NPM package `eslint-plugin-react-hooks` to `devDependencies` as required by
+  the updated version of `eslint-config-airbnb`.
+- NPM package `copy-webpack-plugin` to `devDependencies` as replacement of
+  `copy-pkg-json-webpack-plugin`.
+- NPM packages `@typescript-eslint/eslint-plugin` & `@typescript-eslint/parser`
+  to `devDependencies` for using ESLint to lint TypeScript.
+
+### Changed
+- __Project is now being developed based on Node.js `v14 (LTS)`.__
+- Minor version upgrades on package dependencies:
+  - `eslint-import-resolver-webpack` - `0.11.1` -> `0.13.0`
+  - `eslint-plugin-import` - `2.18.2` -> `2.22.1`
+  - `eslint-plugin-jsx-a11y` - `6.2.3` -> `6.4.1`
+  - `eslint-plugin-react` - `7.17.0` -> ``7.21.5`
+  - `lodash` - `4.17.15` -> `4.17.20`
+- Major version upgrades on package dependencies:
+  - `react` & `react-dom` - `16.12.0` -> `17.0.1`
+  - `cross-env` - `5.2.1` -> `7.0.3`
+  - `css-loader` - `1.0.1` -> `5.0.1`
+  - `electron` - `3.1.13` -> `11.1.1`
+  - `electron-builder` - `20.44.4` -> `22.9.1`
+  - `eslint` - `5.16.0` -> `7.16.0`
+  - `eslint-config-airbnb` - `17.1.1` -> `18.2.1`
+  - `file-loader` - `2.0.0` -> `6.2.0`
+  - `html-webpack-plugin` - `3.2.0` -> `4.5.0`
+  - `mocha` - `5.2.0` -> `8.2.1`
+  - `rimraf` - `2.7.1` -> `3.0.2`
+  - `source-map-loader` - `0.2.4` -> `2.0.0`
+  - `spectron` - `5.0.0` -> `13.0.0`
+  - `style-loader` - `0.23.1` -> `2.0.0`
+  - `ts-loader` - `5.4.5` -> `8.0.12`
+  - `ts-node` - `7.0.1` -> `9.1.1`
+  - `typescript` - `3.7.2` - > `4.1.3`
+  - `webpack` - `4.41.2` -> `5.11.0`
+  - `webpack-cli` - `3.3.10` -> `4.3.0`
+- Moved `@types` packages from `dependencies` to `devDependencies` as those
+  have no need to be included in production builds.
+- Commands of NPM scripts `dev` & `prod` to make them work with Webpack 5.
+- Migrated to ESLint from TSLint.
+- Updated prefix of internal paths from `@` to `_` to avoid confusions with
+  scoped NPM packages.
+- Indentation for `.ts` files is now set as `2` spaces instead of `4`.
+- `electron-builder` settings:
+  - `win`:
+    - Enabled `asar`. _(turn it off if the executable built doesn't work)_
+    - Disabled one click installer.
+    - Allowed custom installation directory in the installer built.
+  - `mac`:
+    - Changed build target back to `dmg`.
+  - `buildVersion` is now being used as build number instead of just another
+    parameter for semantic version number.
+- Updated section `Known issues` in `README`.
+
+### Fixed
+- ESLint errors/warnings on `main.ts` & `renderer.tsx`.
+- `electron-builder` fails to build `dmg` on `macOS` (issue 
+  [electron-builder #3990])by upgrading the package version to `> 21.2.0`.
+
+### Removed
+- NPM package `copy-pkg-json-webpack-plugin` as it doesn't work with Webpack 5
+  and seems not very well maintained.
+- NPM packages `acorn` & `ajv` from `devDependencies` as they're not being used
+  in this boilerplate.
+- NPM packages `tslint` & `tslint-microsoft-contrib` as TSLint is now
+  deprecated.
+
 ## [2.0.2] - 2019-12-02
 `v2.0.2` is a minor hotfix release fixed the documentation error and build 
 error on `macOS Catalina(10.15+)`.
@@ -87,8 +156,10 @@ issue.
     isn't based on this boilerplate.
 - Separated Webpack config files for `development` & `production` mode.
 
-[Unreleased]: https://github.com/Devtography/electron-react-typescript-webpack-boilerplate/compare/v2.0.2...HEAD
+[Unreleased]: https://github.com/Devtography/electron-react-typescript-webpack-boilerplate/compare/v3.0.0...HEAD
 [2.0.1]: https://github.com/Devtography/electron-react-typescript-webpack-boilerplate/compare/v2.0.0...v2.0.1
 [2.0.2]: https://github.com/Devtography/electron-react-typescript-webpack-boilerplate/compare/v2.0.1...v2.0.2
+[3.0.0]: https://github.com/Devtography/electron-react-typescript-webpack-boilerplate/compare/v2.0.2...v3.0.0
 
 [Issue #2]: https://github.com/Devtography/electron-react-typescript-webpack-boilerplate/issues/2
+[electron-builder #3990]: https://github.com/electron-userland/electron-builder/issues/3990

README.md

@@ -1,9 +1,9 @@
 # Electron-React-TypeScript-Webpack-Boilerplate
 Pre-configured Electron.js + React.js + TypeScript boilerplate with 
-Webpack v4 & linters config predefined.
+Webpack v5 & linters config predefined.
 
 This boilerplate currently works on macOS and Windows. If something doesn't 
-work, please [file and issue](https://github.com/Devtography/electron-react-typescript-webpack-boilerplate/issues/new).
+work, please [file an issue](https://github.com/Devtography/electron-react-typescript-webpack-boilerplate/issues/new).
 
 ## Getting started
 ```sh
@@ -20,7 +20,7 @@ git clone https://github.com/iamWing/electron-react-typescript-base-proj.git
   "build": {
     "appId": your-app-id,
     "productName": your-product-name,
-    "buildVersion": whatever-you-like
+    "buildVersion": your-build-number
   },
   "author": who's-the-author?,
   "license": if-you-don't-want-to-use-MIT,
@@ -34,7 +34,7 @@ git clone https://github.com/iamWing/electron-react-typescript-base-proj.git
 Then install all the `node_modules` needed by executing the following command:
 ```sh
 cd folder-containing-the-cloned-boilerplate
-npm install
+npm install --also-dev
 ```
 
 Finally execute the following command to start Webpack in development mode and 
@@ -55,17 +55,19 @@ your app for macOS & Windows using `electron-builder`.
 
 For macOS, execute:
 ```sh
+npm run prod
 npm run build:mac
 ```
 
 For Windows, execute:
 ```sh
+npm run prod
 npm run build:win
 ```
-_** `asar` archiving is disabled by default in Windows build as it can cause 
-errors while running the installed Electron app based on pervious experiences, 
-whereas the macOS build with `asar` enabled works just fine. You can turn it 
-back on by removing line 23 (`"asar": false`) in `package.json`. **_
+_**`asar` archiving may cause errors while running the installed Electron app 
+based on pervious experiences, whereas the macOS build with `asar` enabled 
+works just fine. You can turn it off by changing `asar` to `false` in
+`package.json` line 26.**_
 
 ### Extra options
 The build scripts are pre-configured to build 64 bit installers since 64 bit 
@@ -93,17 +95,22 @@ build scripts in `package.json`, but those aren't tested yet. For details,
 please refer to [documents of `electron-builder`](https://www.electron.build/cli).
 
 ## Known issues
-
-- `dmg` build action on `macOS Catalina (10.15)` fails due to Apple ditches 
-  support for 32-bit apps from `10.15` onwards (Don't worry, you are still 
-  building 64-bit apps, just some dependencies of the builder are still 32-bit).
-  Further details retailed to this issue can be found 
-  [here](https://github.com/electron-userland/electron-builder/issues/3990).  
-  Application installer built on `macOS` is now set to build `pkg` file 
-  instead of `dmg` as a workaround in the current version. The issue can be 
-  fixed by applying a major version upgrade of `electron-builder` to `21.2.0+` 
-  but it hasn't been tested on this boilerplate yet. This issue is planned to 
-  be addressed alongside with major version upgrades on other dependencies.
+1. As Apple introduced the [notarization requirements] with the public release
+   of `macOS 10.14.5`, apps built for `macOS` are now needed to be signed with
+   a valid Developer ID certificate and let Apple notarizes it for you. This
+   boilerplate doesn't include the notarization setup as of the `3.0.0` release,
+   but up until now, you should still be able to run your Electron app by
+   allowing your app to be opened in `System Preferences -> Security & Privacy
+   -> General` without notarizing it for still (tested on `macOS 11.1`).
+
+   If you want to notarization your app using this boilerplate before those
+   settings are included in the future updates, you can try follow the guides on
+   issue [electron-builder #3870].
+
+2. [`[email protected]`] added Apple Silicon and universal binary
+   supports, but it's still a pre-release instead of a stable one so the one
+   included in this boilerplate is still staying on `22.9.1` which doesn't
+   support building the universal binary yet.
 
 ## Folder structure
 ```
@@ -127,14 +134,22 @@ electron-react-typescript-base-proj/
 | - package-lock.json
 | - package.json
 | - tsconfig.json       //- TypeScript config
-| - tslint.json         //- TSLint config
 | - webpack.config.js   //- Webpack config
 ```
 
 ## Author
-
 [Wing Chau](https://github.com/iamWing) [@Devtography](https://github.com/Devtography)
 
+## Donation
+I do this open source work for free in my free time. If you'd like me to invest
+more time on it, please consider give me some [donations]. Any donation is
+gonna be a great motivation for me.
+
 ## License
 Electron React TypeScript Webpack Boilerplate is open source software 
 [licensed as MIT](LICENSE).
+
+[notarization requirements]: https://developer.apple.com/news/?id=04102019a
+[electron-builder #3870]: https://github.com/electron-userland/electron-builder/issues/3870
+[`[email protected]`]: https://github.com/electron-userland/electron-builder/releases/tag/v22.10.4
+[donations]: https://github.com/sponsors/iamWing