From cdca5f70b0284a70f906dded72c9ad590c41fc0b Mon Sep 17 00:00:00 2001 From: YadPe Date: Sun, 4 Jul 2021 18:46:59 +0200 Subject: [PATCH] chore: Replace eslint-loader with eslint-webpack-plugin and bump eslint --- .eslintrc | 3 +- .github/workflows/publish.yml | 32 +- config/renderer.webpack.config.js | 128 +++--- package.json | 11 +- yarn.lock | 686 +++++++++++++++++------------- 5 files changed, 454 insertions(+), 406 deletions(-) diff --git a/.eslintrc b/.eslintrc index bef1da1..06780fc 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,8 +2,7 @@ "parser": "babel-eslint", "extends": [ "airbnb", - "prettier", - "prettier/react" + "prettier" ], "env": { "browser": true, diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index 2654a5d..766cf77 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -5,23 +5,23 @@ on: tags: v* jobs: - build: + publish: environment: Publish runs-on: macos-10.15 steps: - - run: echo $GH_TOKEN - - uses: actions/checkout@v2 - - name: Use Node.js 14.x - uses: actions/setup-node@v2 - with: - node-version: 14.x - cache: 'yarn' - - name: Install - run: yarn install - - name: Build - run: yarn build - - name: Package and publish - run: yarn dist:gh-publish - env: - GH_TOKEN: ${{ secrets.GH_TOKEN }} + - run: echo $GH_TOKEN + - uses: actions/checkout@v2 + - name: Use Node.js 14.x + uses: actions/setup-node@v2 + with: + node-version: 14.x + cache: 'yarn' + - name: Install + run: yarn install + - name: Build + run: yarn build + - name: Package and publish + run: yarn dist:gh-publish + env: + GH_TOKEN: ${{ secrets.GH_TOKEN }} diff --git a/config/renderer.webpack.config.js b/config/renderer.webpack.config.js index 94ca673..7fbcada 100644 --- a/config/renderer.webpack.config.js +++ b/config/renderer.webpack.config.js @@ -18,6 +18,7 @@ const getClientEnvironment = require('./env'); const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin'); const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin'); const typescriptFormatter = require('react-dev-utils/typescriptFormatter'); +const ESLintPlugin = require('eslint-webpack-plugin'); // Source maps are resource heavy and can cause out of memory issue for large source files. const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false'; @@ -37,9 +38,7 @@ module.exports = function(webpackEnv) { // Webpack uses `publicPath` to determine where the app is being served from. // It requires a trailing slash, or the file assets will get an incorrect path. // In development, we always serve from the root. This makes config easier. - const publicPath = isEnvProduction - ? paths.servedPath - : isEnvDevelopment && '/'; + const publicPath = isEnvProduction ? paths.servedPath : isEnvDevelopment && '/'; // Some apps do not use client-side routing with pushState. // For these, "homepage" can be set to "." to enable relative asset paths. const shouldUseRelativeAssetPaths = publicPath === './'; @@ -47,12 +46,12 @@ module.exports = function(webpackEnv) { // `publicUrl` is just like `publicPath`, but we will provide it to our app // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript. // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz. - const publicUrl = publicPath.slice(0, -1); + const publicUrl = publicPath.slice(0, -1); // Get environment variables to inject into our app. const env = getClientEnvironment(publicUrl); return { - target: "electron-renderer", + target: 'electron-renderer', mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development', // Stop compilation early in production bail: isEnvProduction, @@ -63,26 +62,28 @@ module.exports = function(webpackEnv) { : isEnvDevelopment && 'cheap-module-source-map', // These are the "entry points" to our application. // This means they will be the "root" imports that are included in JS bundle. - entry: isEnvDevelopment ? [ - // Include an alternative client for WebpackDevServer. A client's job is to - // connect to WebpackDevServer by a socket and get notified about changes. - // When you save a file, the client will either apply hot updates (in case - // of CSS changes), or refresh the page (in case of JS changes). When you - // make a syntax error, this client will display a syntax error overlay. - // Note: instead of the default WebpackDevServer client, we use a custom one - // to bring better experience for Create React App users. You can replace - // the line below with these two lines if you prefer the stock client: - // require.resolve('webpack-dev-server/client') + '?/', - // require.resolve('webpack/hot/dev-server'), - require.resolve('react-dev-utils/webpackHotDevClient'), - // Finally, this is your app's code: Renderer code - paths.appIndexJs, - // We include the app code last so that if there is a runtime error during - // initialization, it doesn't blow up the WebpackDevServer client, and - // changing JS code would still trigger a refresh. - ] : { - path: paths.appIndexJs, - }, + entry: isEnvDevelopment + ? [ + // Include an alternative client for WebpackDevServer. A client's job is to + // connect to WebpackDevServer by a socket and get notified about changes. + // When you save a file, the client will either apply hot updates (in case + // of CSS changes), or refresh the page (in case of JS changes). When you + // make a syntax error, this client will display a syntax error overlay. + // Note: instead of the default WebpackDevServer client, we use a custom one + // to bring better experience for Create React App users. You can replace + // the line below with these two lines if you prefer the stock client: + // require.resolve('webpack-dev-server/client') + '?/', + // require.resolve('webpack/hot/dev-server'), + require.resolve('react-dev-utils/webpackHotDevClient'), + // Finally, this is your app's code: Renderer code + paths.appIndexJs, + // We include the app code last so that if there is a runtime error during + // initialization, it doesn't blow up the WebpackDevServer client, and + // changing JS code would still trigger a refresh. + ] + : { + path: paths.appIndexJs, + }, output: { // The build folder. path: isEnvProduction ? paths.appBuild : undefined, @@ -90,26 +91,18 @@ module.exports = function(webpackEnv) { pathinfo: isEnvDevelopment, // There will be one main bundle, and one file per asynchronous chunk. // In development, it does not produce real files. - filename: isEnvProduction - ? 'static/js/[name].[contenthash:8].js' - : isEnvDevelopment && 'static/js/bundle.js', + filename: isEnvProduction ? 'static/js/[name].[contenthash:8].js' : isEnvDevelopment && 'static/js/bundle.js', // TODO: remove this when upgrading to webpack 5 futureEmitAssets: true, // There are also additional JS chunk files if you use code splitting. - chunkFilename: isEnvProduction - ? 'static/js/[name].chunk.js' - : isEnvDevelopment && 'static/js/[name].chunk.js', + chunkFilename: isEnvProduction ? 'static/js/[name].chunk.js' : isEnvDevelopment && 'static/js/[name].chunk.js', // We inferred the "public path" (such as / or /my-project) from homepage. // We use "/" in development. publicPath: publicPath, // Point sourcemap entries to original disk location (format as URL on Windows) devtoolModuleFilenameTemplate: isEnvProduction - ? info => - path - .relative(paths.appSrc, info.absoluteResourcePath) - .replace(/\\/g, '/') - : isEnvDevelopment && - (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')), + ? info => path.relative(paths.appSrc, info.absoluteResourcePath).replace(/\\/g, '/') + : isEnvDevelopment && (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')), }, optimization: { minimize: isEnvProduction, @@ -176,18 +169,14 @@ module.exports = function(webpackEnv) { // We placed these paths second because we want `node_modules` to "win" // if there are any conflicts. This matches Node resolution mechanism. // https://github.com/facebook/create-react-app/issues/253 - modules: ['node_modules', paths.appNodeModules].concat( - modules.additionalModulePaths || [] - ), + modules: ['node_modules', paths.appNodeModules].concat(modules.additionalModulePaths || []), // These are the reasonable defaults supported by the Node ecosystem. // We also include JSX as a common component filename extension to support // some tools, although we do not recommend using it, see: // https://github.com/facebook/create-react-app/issues/290 // `web` extension prefixes have been added for better support // for React Native Web. - extensions: paths.moduleFileExtensions - .map(ext => `.${ext}`) - .filter(ext => useTypeScript || !ext.includes('ts')), + extensions: paths.moduleFileExtensions.map(ext => `.${ext}`).filter(ext => useTypeScript || !ext.includes('ts')), alias: { // Support React Native Web // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/ @@ -217,24 +206,6 @@ module.exports = function(webpackEnv) { rules: [ // Disable require.ensure as it's not a standard language feature. { parser: { requireEnsure: false } }, - - // First, run the linter. - // It's important to do this before Babel processes the JS. - { - test: /\.(js|mjs|jsx|ts|tsx)$/, - enforce: 'pre', - use: [ - { - options: { - formatter: require.resolve('react-dev-utils/eslintFormatter'), - eslintPath: require.resolve('eslint'), - emitWarning: true, - }, - loader: require.resolve('eslint-loader'), - }, - ], - include: paths.appSrc, - }, { // "oneOf" will traverse all following loaders until one will // match the requirements. When no loader matches it will fall @@ -258,10 +229,8 @@ module.exports = function(webpackEnv) { include: paths.appSrc, loader: require.resolve('babel-loader'), options: { - customize: require.resolve( - 'babel-preset-react-app/webpack-overrides' - ), - + customize: require.resolve('babel-preset-react-app/webpack-overrides'), + plugins: [ [ require.resolve('babel-plugin-named-asset-import'), @@ -305,6 +274,16 @@ module.exports = function(webpackEnv) { ], }, plugins: [ + new ESLintPlugin({ + formatter: require.resolve('react-dev-utils/eslintFormatter'), + eslintPath: require.resolve('eslint'), + emitWarning: true, + // TODO: On day when all linter error are fix we will be able to activate this + failOnError: false, + failOnWarning: false, + emitError: false, + emitWarning: false, + }), // Generates an `index.html` file with the