Feature/187

hooks/00_BoilerPlate/package.json

@@ -15,21 +15,21 @@
   "author": "Braulio Diez Botella",
   "license": "MIT",
   "devDependencies": {
-    "@babel/cli": "^7.2.3",
-    "@babel/core": "^7.2.2",
-    "@babel/polyfill": "^7.2.5",
-    "@babel/preset-env": "^7.3.1",
+    "@babel/cli": "^7.10.5",
+    "@babel/core": "^7.10.5",
+    "@babel/polyfill": "^7.10.4",
+    "@babel/preset-env": "^7.10.4",
     "awesome-typescript-loader": "^5.2.1",
-    "babel-loader": "^8.0.5",
-    "css-loader": "^2.1.0",
-    "file-loader": "^3.0.1",
-    "html-webpack-plugin": "^3.2.0",
-    "mini-css-extract-plugin": "^0.5.0",
-    "style-loader": "^0.23.1",
-    "typescript": "^3.3.3",
-    "url-loader": "^1.1.2",
-    "webpack": "^4.29.3",
-    "webpack-cli": "^3.2.3",
-    "webpack-dev-server": "^3.1.14"
+    "babel-loader": "^8.1.0",
+    "css-loader": "^3.6.0",
+    "file-loader": "^6.0.0",
+    "html-webpack-plugin": "^4.3.0",
+    "mini-css-extract-plugin": "^0.9.0",
+    "style-loader": "^1.2.1",
+    "typescript": "^3.9.7",
+    "url-loader": "^4.1.0",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.0"
   }
 }

hooks/00_BoilerPlate/webpack.config.js

@@ -1,27 +1,27 @@
-var HtmlWebpackPlugin = require("html-webpack-plugin");
-var MiniCssExtractPlugin = require("mini-css-extract-plugin");
-var webpack = require("webpack");
-var path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const webpack = require("webpack");
+const path = require("path");
 
-var basePath = __dirname;
+const basePath = __dirname;
 
 module.exports = {
   context: path.join(basePath, "src"),
   resolve: {
-    extensions: [".js", ".ts", ".tsx"]
+    extensions: [".js", ".ts", ".tsx"],
   },
   entry: ["@babel/polyfill", "./main.ts"],
   output: {
     path: path.join(basePath, "dist"),
-    filename: "bundle.js"
+    filename: "bundle.js",
   },
   devtool: "source-map",
   devServer: {
     contentBase: "./dist", // Content base
     inline: true, // Enable watch and live reload
     host: "localhost",
     port: 8080,
-    stats: "errors-only"
+    stats: "errors-only",
   },
   module: {
     rules: [
@@ -31,32 +31,33 @@ module.exports = {
         loader: "awesome-typescript-loader",
         options: {
           useBabel: true,
-          babelCore: "@babel/core" // needed for Babel v7
-        }
+          babelCore: "@babel/core", // needed for Babel v7
+        },
       },
       {
         test: /\.css$/,
-        use: [MiniCssExtractPlugin.loader, "css-loader"]
+        use: [MiniCssExtractPlugin.loader, "css-loader"],
       },
       {
         test: /\.(png|jpg|gif|svg)$/,
         loader: "file-loader",
         options: {
-          name: "assets/img/[name].[ext]?[hash]"
-        }
-      }
-    ]
+          name: "assets/img/[name].[ext]?[hash]",
+          esModule: false,
+        },
+      },
+    ],
   },
   plugins: [
     //Generate index.html in /dist => https://github.com/ampedandwired/html-webpack-plugin
     new HtmlWebpackPlugin({
       filename: "index.html", //Name of file in ./dist/
       template: "index.html", //Name of template in ./src
-      hash: true
+      hash: true,
     }),
     new MiniCssExtractPlugin({
       filename: "[name].css",
-      chunkFilename: "[id].css"
-    })
-  ]
+      chunkFilename: "[id].css",
+    }),
+  ],
 };

hooks/01_HelloReact/package.json

@@ -15,27 +15,27 @@
   "author": "Braulio Diez Botella",
   "license": "MIT",
   "devDependencies": {
-    "@babel/cli": "^7.2.3",
-    "@babel/core": "^7.2.2",
-    "@babel/polyfill": "^7.2.5",
-    "@babel/preset-env": "^7.3.1",
-    "@types/react": "^16.8.3",
-    "@types/react-dom": "^16.8.1",
+    "@babel/cli": "^7.10.5",
+    "@babel/core": "^7.10.5",
+    "@babel/polyfill": "^7.10.4",
+    "@babel/preset-env": "^7.10.4",
+    "@types/react": "^16.9.43",
+    "@types/react-dom": "^16.9.8",
     "awesome-typescript-loader": "^5.2.1",
-    "babel-loader": "^8.0.5",
-    "css-loader": "^2.1.0",
-    "file-loader": "^3.0.1",
-    "html-webpack-plugin": "^3.2.0",
-    "mini-css-extract-plugin": "^0.5.0",
-    "style-loader": "^0.23.1",
-    "typescript": "^3.3.3",
-    "url-loader": "^1.1.2",
-    "webpack": "^4.29.3",
-    "webpack-cli": "^3.2.3",
-    "webpack-dev-server": "^3.1.14"
+    "babel-loader": "^8.1.0",
+    "css-loader": "^3.6.0",
+    "file-loader": "^6.0.0",
+    "html-webpack-plugin": "^4.3.0",
+    "mini-css-extract-plugin": "^0.9.0",
+    "style-loader": "^1.2.1",
+    "typescript": "^3.9.7",
+    "url-loader": "^4.1.0",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.0"
   },
   "dependencies": {
-    "react": "^16.8.2",
-    "react-dom": "^16.8.2"
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
   }
 }

hooks/01_HelloReact/webpack.config.js

@@ -1,27 +1,27 @@
-var HtmlWebpackPlugin = require("html-webpack-plugin");
-var MiniCssExtractPlugin = require("mini-css-extract-plugin");
-var webpack = require("webpack");
-var path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const webpack = require("webpack");
+const path = require("path");
 
-var basePath = __dirname;
+const basePath = __dirname;
 
 module.exports = {
   context: path.join(basePath, "src"),
   resolve: {
-    extensions: [".js", ".ts", ".tsx"]
+    extensions: [".js", ".ts", ".tsx"],
   },
   entry: ["@babel/polyfill", "./index.tsx"],
   output: {
     path: path.join(basePath, "dist"),
-    filename: "bundle.js"
+    filename: "bundle.js",
   },
   devtool: "source-map",
   devServer: {
     contentBase: "./dist", // Content base
     inline: true, // Enable watch and live reload
     host: "localhost",
     port: 8080,
-    stats: "errors-only"
+    stats: "errors-only",
   },
   module: {
     rules: [
@@ -31,32 +31,33 @@ module.exports = {
         loader: "awesome-typescript-loader",
         options: {
           useBabel: true,
-          babelCore: "@babel/core" // needed for Babel v7
-        }
+          babelCore: "@babel/core", // needed for Babel v7
+        },
       },
       {
         test: /\.css$/,
-        use: [MiniCssExtractPlugin.loader, "css-loader"]
+        use: [MiniCssExtractPlugin.loader, "css-loader"],
       },
       {
         test: /\.(png|jpg|gif|svg)$/,
         loader: "file-loader",
         options: {
-          name: "assets/img/[name].[ext]?[hash]"
-        }
-      }
-    ]
+          name: "assets/img/[name].[ext]?[hash]",
+          esModule: false,
+        },
+      },
+    ],
   },
   plugins: [
     //Generate index.html in /dist => https://github.com/ampedandwired/html-webpack-plugin
     new HtmlWebpackPlugin({
       filename: "index.html", //Name of file in ./dist/
       template: "index.html", //Name of template in ./src
-      hash: true
+      hash: true,
     }),
     new MiniCssExtractPlugin({
       filename: "[name].css",
-      chunkFilename: "[id].css"
-    })
-  ]
+      chunkFilename: "[id].css",
+    }),
+  ],
 };

hooks/02_Properties/package.json

@@ -15,27 +15,27 @@
   "author": "Braulio Diez Botella",
   "license": "MIT",
   "devDependencies": {
-    "@babel/cli": "^7.2.3",
-    "@babel/core": "^7.2.2",
-    "@babel/polyfill": "^7.2.5",
-    "@babel/preset-env": "^7.3.1",
-    "@types/react": "^16.8.3",
-    "@types/react-dom": "^16.8.1",
+    "@babel/cli": "^7.10.5",
+    "@babel/core": "^7.10.5",
+    "@babel/polyfill": "^7.10.4",
+    "@babel/preset-env": "^7.10.4",
+    "@types/react": "^16.9.43",
+    "@types/react-dom": "^16.9.8",
     "awesome-typescript-loader": "^5.2.1",
-    "babel-loader": "^8.0.5",
-    "css-loader": "^2.1.0",
-    "file-loader": "^3.0.1",
-    "html-webpack-plugin": "^3.2.0",
-    "mini-css-extract-plugin": "^0.5.0",
-    "style-loader": "^0.23.1",
-    "typescript": "^3.3.3",
-    "url-loader": "^1.1.2",
-    "webpack": "^4.29.3",
-    "webpack-cli": "^3.2.3",
-    "webpack-dev-server": "^3.1.14"
+    "babel-loader": "^8.1.0",
+    "css-loader": "^3.6.0",
+    "file-loader": "^6.0.0",
+    "html-webpack-plugin": "^4.3.0",
+    "mini-css-extract-plugin": "^0.9.0",
+    "style-loader": "^1.2.1",
+    "typescript": "^3.9.7",
+    "url-loader": "^4.1.0",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.0"
   },
   "dependencies": {
-    "react": "^16.8.2",
-    "react-dom": "^16.8.2"
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
   }
 }

hooks/02_Properties/src/hello.tsx

@@ -4,6 +4,6 @@ interface Props {
   userName: string;
 }
 
-export const HelloComponent = (props: Props) => (
-    <h2>Hello user: {props.userName} !</h2>
-);
+export const HelloComponent: React.FC<Props> = (props) => (
+  <h2>Hello user: {props.userName} !</h2>
+);

hooks/02_Properties/webpack.config.js

@@ -1,27 +1,27 @@
-var HtmlWebpackPlugin = require("html-webpack-plugin");
-var MiniCssExtractPlugin = require("mini-css-extract-plugin");
-var webpack = require("webpack");
-var path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const webpack = require("webpack");
+const path = require("path");
 
-var basePath = __dirname;
+const basePath = __dirname;
 
 module.exports = {
   context: path.join(basePath, "src"),
   resolve: {
-    extensions: [".js", ".ts", ".tsx"]
+    extensions: [".js", ".ts", ".tsx"],
   },
   entry: ["@babel/polyfill", "./index.tsx"],
   output: {
     path: path.join(basePath, "dist"),
-    filename: "bundle.js"
+    filename: "bundle.js",
   },
   devtool: "source-map",
   devServer: {
     contentBase: "./dist", // Content base
     inline: true, // Enable watch and live reload
     host: "localhost",
     port: 8080,
-    stats: "errors-only"
+    stats: "errors-only",
   },
   module: {
     rules: [
@@ -31,32 +31,33 @@ module.exports = {
         loader: "awesome-typescript-loader",
         options: {
           useBabel: true,
-          babelCore: "@babel/core" // needed for Babel v7
-        }
+          babelCore: "@babel/core", // needed for Babel v7
+        },
       },
       {
         test: /\.css$/,
-        use: [MiniCssExtractPlugin.loader, "css-loader"]
+        use: [MiniCssExtractPlugin.loader, "css-loader"],
       },
       {
         test: /\.(png|jpg|gif|svg)$/,
         loader: "file-loader",
         options: {
-          name: "assets/img/[name].[ext]?[hash]"
-        }
-      }
-    ]
+          name: "assets/img/[name].[ext]?[hash]",
+          esModule: false,
+        },
+      },
+    ],
   },
   plugins: [
     //Generate index.html in /dist => https://github.com/ampedandwired/html-webpack-plugin
     new HtmlWebpackPlugin({
       filename: "index.html", //Name of file in ./dist/
       template: "index.html", //Name of template in ./src
-      hash: true
+      hash: true,
     }),
     new MiniCssExtractPlugin({
       filename: "[name].css",
-      chunkFilename: "[id].css"
-    })
-  ]
+      chunkFilename: "[id].css",
+    }),
+  ],
 };