PR-753737: Se agrega ESLint a webpack.

src/.eslintignore

@@ -0,0 +1,7 @@
+#Build
+build
+#Webpack
+webpack.config.js
+webpack.config.dev.js
+#Server
+/server/index.js

src/.eslintrc.js

@@ -0,0 +1,51 @@
+module.exports = {
+	'env': {
+		'browser': true,
+		'node': true,
+		'es2021': true
+	},
+	'extends': [
+		'eslint:recommended',
+		'plugin:react/recommended',
+		'plugin:@typescript-eslint/recommended'
+	],
+	'parser': '@typescript-eslint/parser',
+	'parserOptions': {
+		'ecmaFeatures': {
+			'jsx': true
+		},
+		'ecmaVersion': 'latest',
+		'sourceType': 'module'
+	},
+	'plugins': [
+		'react',
+		'@typescript-eslint'
+	],
+	'rules': {
+		'indent': [
+			'error',
+			'tab'
+		],
+		'linebreak-style': [
+			'error',
+			'unix'
+		],
+		'quotes': [
+			'error',
+			'single'
+		],
+		'semi': [
+			'error',
+			'always'
+		],
+		'eol-last': [
+			'error',
+			'always'
+		]
+	},
+	'settings': {
+		'react': {
+			'version': 'detect',
+		}
+	}
+};

src/PRNameGenerator.ts

@@ -1,11 +1,11 @@
 const PRName = function () {
-    let ID = "";
+	let ID = '';
 	// let characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
-    let characters = "0123456789";
+	const characters = '0123456789';
-    for ( var i = 0; i < 6; i++ ) {
+	for ( let i = 0; i < 6; i++ ) {
 		ID += characters.charAt(Math.floor(Math.random() * 10));
 	}
 	return 'PR-'+ID;
 };
   
-console.log(PRName())
+console.log(PRName());

src/config/index.js

@@ -3,6 +3,6 @@ const config = {
 	port: process.env.PORT ? process.env.PORT : 80,
 	// portDev: process.env.PORT_DEV ? process.env.PORT_DEV : 3000,
 	// portReloadDev: process.env.PORT_RELOAD_DEV,
-}
+};
 
 module.exports = { config: config };

src/frontend/components/App.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PrincipalRoutes from './PrincipalRoutes';
 
-const App = () => <PrincipalRoutes />
+const App = () => <PrincipalRoutes />;
 
 export default App;

src/frontend/components/InitialComponent.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
 
-const InitialComponent = () => <h1>Hello React!</h1>
+const InitialComponent = () => <h1>Hello React!</h1>;
 
 export default InitialComponent;

src/frontend/components/OtherComponent.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
 
-const OtherComponent = () => <h1>Other Component!</h1>
+const OtherComponent = () => <h1>Other Component!</h1>;
 
 export default OtherComponent;

src/frontend/components/PrincipalRoutes.jsx

@@ -5,7 +5,7 @@ import routes from '../../routes';
 
 const PrincipalRoutes = () => {
 	let element = useRoutes(routes);
-    return element
+	return element;
-}
+};
 
 export default PrincipalRoutes;

src/frontend/index.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { hydrateRoot } from 'react-dom/client';
-//Router
+// Router
 import { BrowserRouter as Router } from 'react-router-dom';
-//History
+// History
 import { createBrowserHistory } from 'history';
-//Redux
+// Redux
 import { createStore } from 'redux'; //, applyMiddleware
 import { Provider } from 'react-redux';
 import { composeWithDevTools as composeWithDevToolsWeb } from 'redux-devtools-extension';
@@ -14,20 +14,20 @@ import reducer from './reducers';
 import App from './components/App';
 import './styles/global.sass';
 
-//Redux DevTools
+// Redux DevTools
 /* declare global {
     interface Window {
         __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: typeof compose;
     }
 } */
 
-const { env } = config
+const { env } = config;
 
 const composeEnhancers = composeWithDevToolsWeb({
 	// Specify here name, actionsBlacklist, actionsCreators and other options
 });
 
-const preloadedState = window.__PRELOADED_STATE__
+const preloadedState = window.__PRELOADED_STATE__;
 
 const store = env === 'development' ? createStore(
 	reducer,
@@ -36,21 +36,22 @@ const store = env === 'development' ? createStore(
 ) : createStore(
 	reducer,
 	preloadedState,
-)
+);
 
-delete window.__PRELOADED_STATE__
+delete window.__PRELOADED_STATE__;
 
 const container = document.getElementById('app');
-const history = createBrowserHistory()
+const history = createBrowserHistory();
 
-const root = hydrateRoot(container, 
+// add "const root" to be able to rerender.
+hydrateRoot(container,
 	<Provider store={store}>
 		<Router history={history}>
 			<App />
 		</Router>
 	</Provider>,
-    //Add this comment to update later app and remove warning
+	// Add this comment to update later app and remove warning
-    /*{ 
+	/* { 
         onRecoverableError: (error) => {
           console.error("recoverable", error);
         }

src/frontend/reducers/index.js

@@ -2,8 +2,8 @@ import { combineReducers } from 'redux';
 import testReducer from './testReducer';
 
 const rootReducer = combineReducers({
-    //Here comes the reducers
+	// Here comes the reducers
 	testReducer
-})
+});
 
-export default rootReducer
+export default rootReducer;

src/frontend/reducers/initialState.js

@@ -1,3 +1,3 @@
-let initialState = {}
+let initialState = {};
 
-export default  initialState
+export default  initialState;

src/frontend/reducers/testReducer.js

@@ -1,18 +1,18 @@
 const initialState = {
 	hello: 'world'
-}
+};
 
 let testReducer = (state = initialState, action) => {
 	switch (action.type){
 	case 'CHANGE_HELLO': {
-            let newHello = action.payload.hello
+		let newHello = action.payload.hello;
 		return {
 			hello: newHello
-            }
+		};
 	}
 	default:
-            return state
+		return state;
 	}
-}
+};
 
-export default testReducer
+export default testReducer;

src/package.json

@@ -6,6 +6,8 @@
   "scripts": {
     "start": "nodemon server/index",
     "build": "webpack-cli --config webpack.config.js",
+    "lint": "eslint ./ --ext .js --ext .ts --ext .jsx --ext .tsx",
+    "lint:fix": "eslint ./ --ext .js --ext .ts --ext .jsx --ext .tsx --fix",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -44,11 +46,16 @@
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
+    "@typescript-eslint/eslint-plugin": "^5.20.0",
+    "@typescript-eslint/parser": "^5.20.0",
     "babel-loader": "^8.2.4",
     "clean-webpack-plugin": "^4.0.0",
     "compression-webpack-plugin": "^9.2.0",
     "css-loader": "^6.7.1",
     "css-minimizer-webpack-plugin": "^3.4.1",
+    "eslint": "^8.13.0",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-webpack-plugin": "^3.1.1",
     "mini-css-extract-plugin": "^2.6.0",
     "nodemon": "^2.0.15",
     "react-refresh": "^0.12.0",

src/routes/index.js

@@ -1,16 +1,16 @@
-import React from "react";
+import React from 'react';
-import InitialComponent from "../frontend/components/InitialComponent";
+import InitialComponent from '../frontend/components/InitialComponent';
-import OtherComponent from "../frontend/components/OtherComponent";
+import OtherComponent from '../frontend/components/OtherComponent';
 
 const OTHER_COMPONENT = {
 	path: 'other-component',
 	element: <OtherComponent />
-}
+};
 
 const INITIAL_COMPONENT = {
 	path: '/',
 	element: <InitialComponent />,
-}
+};
 
 
-export default [ INITIAL_COMPONENT, OTHER_COMPONENT ]
+export default [ INITIAL_COMPONENT, OTHER_COMPONENT ];

src/server/getHashManifest.js

@@ -2,10 +2,10 @@ import fs from 'fs';
 
 const getHashManifest = () => {
 	try {
-        return JSON.parse(fs.readFileSync(`${__dirname}/../build/assets/manifest-hash.json`))
+		return JSON.parse(fs.readFileSync(`${__dirname}/../build/assets/manifest-hash.json`));
 	}catch(err){
-        console.error(err)
+		console.error(err);
 	}
-}
+};
 
-export default getHashManifest
+export default getHashManifest;

src/server/index.js

@@ -3,27 +3,27 @@ require('dotenv').config();
 require('ignore-styles');
 
 require('@babel/register')({
-    "presets": [
+	'presets': [
-        "@babel/preset-env",
+		'@babel/preset-env',
-        "@babel/preset-react"
+		'@babel/preset-react'
 	]
 });
 
 require('asset-require-hook')({
 	extensions: [
-        //images
+		// images
 		'jpg',
 		'png',
 		'svg',
 		'gif',
-        //videos
+		// videos
 		'mp4',
 		'avi',
-        //typography
+		// typography
 		'ttf',
 		'otf',
 		'eot',
-        //files
+		// files
 		'pdf'
 	],
 	name: '/assets/[hash].[ext]',

src/server/server.js

@@ -13,7 +13,7 @@ import webpackHotMiddleware from 'webpack-hot-middleware';
 import React from 'react';
 import { renderToString } from 'react-dom/server';
 //Router
-import { StaticRouter } from "react-router-dom/server";
+import { StaticRouter } from 'react-router-dom/server';
 //Redux
 import { createStore } from 'redux'; //, applyMiddleware
 import { Provider } from 'react-redux';
@@ -24,7 +24,7 @@ import getHashManifest from './getHashManifest';
 //App
 import App from '../frontend/components/App';
 
-const { env, port } = config
+const { env, port } = config;
 
 const app = express();
 
@@ -38,7 +38,7 @@ if(env === 'development'){
 	app
 		.use(webpackDevMiddleware(compiler, serverConfig))
 		.use(webpackHotMiddleware(compiler, {
-        path: "/reload_wss",
+			path: '/reload_wss',
 			heartbeat: 1000,
 		}));
 }else{
@@ -54,7 +54,7 @@ if(env === 'development'){
 			contentSecurityPolicy: {
 				directives: {
 					...helmet.contentSecurityPolicy.getDefaultDirectives(),
-              "script-src": ["'self'", "'unsafe-inline'"],//"example.com"
+					'script-src': ['\'self\'', '\'unsafe-inline\''],//"example.com"
 				},
 			},
 		}))
@@ -85,11 +85,11 @@ const setResponse = (html, preloadedState, manifest) => {
             <script src="${vendorBuild}" type="text/javascript"></script>
         </body>
     </html>
-    `)
+    `);
-}
+};
 
 const renderApp = (req, res) => {
-    const store = createStore(reducer, initialState)
+	const store = createStore(reducer, initialState);
 	const preloadedState = store.getState();
 	const html = renderToString(
 		<Provider store={store}>
@@ -97,13 +97,13 @@ const renderApp = (req, res) => {
 				<App />
 			</StaticRouter>
 		</Provider>
-    )
+	);
 	res.send(setResponse(html, preloadedState, req.hashManifest));
 };
 
-app.get('*', renderApp)
+app.get('*', renderApp);
 
 app.listen(port, (err) => {
-    if(err) console.error(err)
+	if(err) console.error(err);
 	else console.log(`Server running on port ${port}`);
 });

src/webpack.config.dev.js

@@ -3,6 +3,7 @@ const dotenv = require('dotenv').config();
 const webpack = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+const ESLintPlugin = require('eslint-webpack-plugin');
 
 module.exports = {
 	entry: ['webpack-hot-middleware/client?path=/reload_wss&timeout=2000&overlay=false&reload=true', './frontend/index.js'],
@@ -44,6 +45,7 @@ module.exports = {
 		new MiniCssExtractPlugin({
 			filename: 'assets/app.css',
 		}),
+		new ESLintPlugin(),
 		new webpack.DefinePlugin({
 			'process.env': JSON.stringify(dotenv.parsed),
 		}),
@@ -67,4 +69,4 @@ module.exports = {
 			},
 		},
 	},
-}
+};

src/webpack.config.js

@@ -7,6 +7,7 @@ const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const ESLintPlugin = require('eslint-webpack-plugin');
 
 module.exports = {
 	entry: './frontend/index.js',
@@ -54,6 +55,7 @@ module.exports = {
 			fileName: 'assets/manifest-hash.json',
 		}),
 		new CleanWebpackPlugin(),
+		new ESLintPlugin(),
 		new webpack.DefinePlugin({
 			'process.env': JSON.stringify(dotenv.parsed),
 		}),
@@ -82,4 +84,4 @@ module.exports = {
 			},
 		},
 	},
-}
+};