fix whole project

- update versions
- fix errors
- update dev server

Author: prod3v3loper

.gitignore

@@ -1 +1,2 @@
-node_modules
+node_modules
+generator-webpack-preact-*

README.md

@@ -87,7 +87,7 @@ projects$ yo
 If promt a call
 
 ```
-? 'Allo Tarim,! What would you like to do? (Use arrow keys)
+? 'Hi prod3v3loper,! What would you like to do? (Use arrow keys)
   Run a generator
 > webpack-preact
 ```
@@ -115,7 +115,7 @@ projects$ yo
 If promt a call
 
 ```
-? 'Allo Tarim,! What would you like to do? (Use arrow keys)
+? 'Hi prod3v3loper,! What would you like to do? (Use arrow keys)
   Run a generator
 > webpack-preact
 ```

app/index.js

@@ -1,8 +1,7 @@
 // DEFAULTS
 const createGLOBALSjson = require("./settings/defaults/global");
 const createPackageJson = require("./settings/defaults/package-json");
-const createDevTsconfig = require("./settings/defaults/ts-dev-json");
-const createProTsconfig = require("./settings/defaults/ts-pro-json");
+const createTsconfig = require("./settings/defaults/tsconfig-json");
 // Yeoman
 const Generator = require("yeoman-generator");
 // Helper for create empty folders
@@ -18,10 +17,10 @@ const createDevConfig = require("./settings/configs/dev");
 /**
  * Webpack Scaffolding by prod3v3loper
  *
- * @author      Samet Tarim
+ * @author      Samet Tarim aka prod3v3loper
  * @copyright   Copyright (C) 2021 Samet Tarim - All rights reserved
  * @license     MIT
- * @version     1.3.0
+ * @version     1.3.1
  * @since       1.0
  * @package     MELABUAI
  * @subpackage  Webpack Scaffold
@@ -40,6 +39,7 @@ module.exports = class WebpackGenerator extends Generator {
    * @param {*} opts
    */
   constructor(args, opts) {
+
     super(args, opts);
 
     this.answers = {};
@@ -48,6 +48,7 @@ module.exports = class WebpackGenerator extends Generator {
       install: false,
       root: "",
     };
+
     // This method adds support for a `--coffee` flag
     // this.option("coffee");
 
@@ -102,7 +103,7 @@ module.exports = class WebpackGenerator extends Generator {
         type: "input",
         name: "year",
         message: "Project year?",
-        default: "2019",
+        default: "2023",
       },
       {
         type: "input",
@@ -113,7 +114,7 @@ module.exports = class WebpackGenerator extends Generator {
       {
         type: "input",
         name: "components",
-        message: "Components you want to use? (counter, todolist, clock)",
+        message: "Components you want to import? (counter, todolist, clock)",
         default: ["clock"],
       },
       {
@@ -167,7 +168,7 @@ module.exports = class WebpackGenerator extends Generator {
       this.answers
     );
     this.options.env.configuration.pro.merge = "common";
-    this.options.env.configuration.pro.configName = "pro";
+    this.options.env.configuration.pro.configName = "prod";
 
     // Define root folder
     this.settings.root =
@@ -212,12 +213,8 @@ module.exports = class WebpackGenerator extends Generator {
 
     // tsconfig.json
     this.fs.extendJSON(
-      this.destinationPath("tsconfig.dev.json"),
-      createDevTsconfig(this.answers)
-    );
-    this.fs.extendJSON(
-      this.destinationPath("tsconfig.pro.json"),
-      createProTsconfig(this.answers)
+      this.destinationPath("tsconfig.json"),
+      createTsconfig(this.answers)
     );
 
     // Used components

app/settings/configs/common.js

@@ -7,7 +7,7 @@ const comPlugins = require("../plugins/common");
 module.exports = function createComConfig(answer) {
   let comConf = {
     entry: {
-      index: answer.entry ? "'" + answer.entry + "'" : "'./src/index.tsx'",
+      index: answer.entry ? "'" + answer.entry + "'" : "'./src/index.jsx'",
     },
     // path in single quotes to work
     output: {

app/settings/configs/dev.js

@@ -12,7 +12,6 @@ module.exports = function createDevConfig(answer) {
     },
     devtool: "'inline-source-map'",
     devServer: {
-      contentBase: "'./dist'",
       hot: true,
       compress: false,
     },
@@ -47,11 +46,7 @@ module.exports = function createDevConfig(answer) {
           test: "/\\.(tsx?|jsx?)$/",
           loader: "'ts-loader'",
           // include: 'path.resolve(__dirname, "src")',
-          exclude: "/node_modules/",
-          // Load ts dev config
-          options: {
-            configFile: "'tsconfig.dev.json'",
-          },
+          exclude: "/node_modules/"
         },
       ],
     },

app/settings/configs/pro.js

@@ -42,11 +42,7 @@ module.exports = function createProConfig(answer) {
           test: "/\\.(tsx?|jsx?)?$/",
           loader: "'ts-loader'",
           // include: 'path.resolve(__dirname, "src")',
-          exclude: "/node_modules/",
-          // Load ts pro config
-          options: {
-            configFile: "'tsconfig.pro.json'",
-          },
+          exclude: "/node_modules/"
         },
       ],
     },

app/settings/defaults/package-json.js

@@ -38,35 +38,35 @@ module.exports = function createPackageJson(answer) {
         : "https://github.com/prod3v3loper/generator-webpack-preact.git",
     },
     scripts: {
-      dev: "webpack-dev-server --open --config webpack.dev.js",
-      release: "webpack --config webpack.pro.js",
+      dev: "webpack serve --open --config webpack.dev.js",
+      prod: "webpack --config webpack.prod.js",
     },
     devDependencies: {
-      webpack: "^4.33.0",
-      "webpack-cli": "^3.3.2",
-      "webpack-dev-server": "^3.6.0",
-      "webpack-merge": "^4.2.1",
-      "css-loader": "^2.1.1",
-      "node-sass": "^4.12.0",
-      "sass-loader": "^7.1.0",
-      "style-loader": "^0.23.1",
-      "file-loader": "^3.0.1",
-      "ts-loader": "^6.0.2",
-      typescript: "^3.5.1",
-      "clean-webpack-plugin": "^1.0.1",
-      "html-webpack-plugin": "^3.2.0",
-      "@babel/core": "^7.2.2",
-      "@babel/plugin-transform-react-jsx": "^7.3.0",
-      "@babel/plugin-proposal-class-properties": "^7.3.0",
-      "@babel/plugin-proposal-object-rest-spread": "^7.3.2",
-      "@babel/preset-env": "^7.3.1",
-      "@babel/preset-typescript": "^7.1.0",
-      "babel-loader": "^8.0.6",
+      "webpack": "^5.81.0",
+      "webpack-cli": "^5.0.2",
+      "webpack-dev-server": "^4.13.3",
+      "webpack-merge": "^5.8.0",
+      "css-loader": "^6.7.3",
+      "node-sass": "^8.0.0",
+      "sass-loader": "^13.2.2",
+      "style-loader": "^3.3.2",
+      "file-loader": "^6.2.0",
+      "ts-loader": "^9.4.2",
+      "typescript": "^5.0.4",
+      "clean-webpack-plugin": "^4.0.0",
+      "html-webpack-plugin": "^5.5.1",
+      "@babel/core": "^7.21.5",
+      "@babel/plugin-transform-react-jsx": "^7.21.5",
+      "@babel/plugin-proposal-class-properties": "^7.18.6",
+      "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
+      "@babel/preset-env": "^7.21.5",
+      "@babel/preset-typescript": "^7.21.5",
+      "babel-loader": "^9.1.2"
     },
     dependencies: {
-      preact: "^8.4.2",
-      "redux-zero": "^5.0.4",
-    },
+      "preact": "^10.13.2",
+      "redux-zero": "^5.1.7"
+    }
   };
 
   return pkgJsonConf;

app/settings/defaults/ts-dev-json.js

@@ -30,7 +30,7 @@ module.exports = function createTsconfigJson(answer) {
       //     "dom"
       // ]
     },
-    include: ["src/*.ts", "src/*.tsx"],
+    include: ["src/*.js", "src/*.jsx", "src/*.ts", "src/*.tsx"],
   };
 
   return tsJsonConf;

app/settings/defaults/ts-pro-json.js app/settings/defaults/tsconfig-json.jsapp/settings/defaults/ts-pro-json.js renamed to app/settings/defaults/tsconfig-json.js

@@ -7,7 +7,18 @@
 
 module.exports = function commonPlugins(answer) {
   return [
-    "new CleanWebpackPlugin(['dist'])",
+    /**
+      * All files inside webpack's output.path directory will be removed once, but the
+      * directory itself will not be. If using webpack 4+'s default configuration,
+      * everything under <PROJECT_DIR>/dist/ will be removed.
+      * Use cleanOnceBeforeBuildPatterns to override this behavior.
+      *
+      * During rebuilds, all webpack assets that are not used anymore
+      * will be removed automatically.
+      *
+      * See `Options and Defaults` for information
+      */
+    "new CleanWebpackPlugin()",
     "new HtmlWebpackPlugin({title:'WebPack - Preact', template: './public/index.html', inlineSource: '.(js|css)$', minify: { collapseWhitespace: true, removeComments: true } })",
   ];
 };