* Update dependency eslint-config-prettier to v8
* adjust .eslintrc.js file to comply with new config-prettier
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Joel Maher <joel.maher@gmail.com>
* Update to webpack 5
* Update style-loader to ^3.3.0
* Update copy-webpack-plugin to 11.0.0
* Update css-loader & html-webpack-plugin
* Replace file-loader by a webpack asset
* Replace url-loader by a webpack asset
* Update code imports
* Update webpack config
* Drop process.env.NODE_ENV in eslintrc
* Move webpack related deps to devDependencies
* Suggestion: serve dev server via the webpack module
* Lock file maintenance
* upgrade eslint-plugin-import to remove infinity symbol lint error and disable import/extensions rule
* upgrade neutrinojs
* add resolution for cacache since neutrino and webpack rely on an outdated version
that uses ssri v<8.0.1 which has an important security patch
Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Sarah Clements <sclements313@gmail.com>
Also remove all Karma support and update the docs to only mention ``Jest``.
One of the test files was testing some AngularJS filters. I converted these
tests to test the equivalent helper functions.
Since it's more reliable (and strict) at code formatting than ESLint.
We use it via an ESLint plugin, and so disable the style-related AirBnB
preset rules, leaving the AirBnB guide to handle only correctness and
best practices rules.
It's highly encouraged to use an IDE integration or Git commit hook
to run Prettier (or `yarn lint --fix`) automatically. See:
* https://prettier.io/docs/en/editors.html
* https://prettier.io/docs/en/precommit.html
We may consider enabling a git commit hook out of the box (using eg
Husky) in the future, however they have previously been known to
interfere with partial-staging workflows, so would need to test the
fixes they have made for them thoroughly first.
In future PRs we may also want to start formatting JSON/CSS/Markdown
using Prettier too.
Imports must now be grouped like so (with newlines between each):
```
// "external" modules
import _ from 'lodash';
import chalk from 'chalk';
// modules from a "parent" directory
import foo from '../foo';
import qux from '../../foo/qux';
// "sibling" modules from the same or a sibling's directory
import bar from './bar';
import baz from './bar/baz';
```
The `import/order` rule has auto-fix support, so any errors can be
resolved using `yarn lint --fix`.
See:
https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/order.md
Neutrino controls our frontend linting, transpilation, source-maps,
testing, dev-server and optimisation of production builds.
Highlights of the upgrade are:
* Major version updates to the individual tools within (such as webpack,
Babel and ESLint), significantly improving performance, fixing
transpilation/minification correctness bugs, adding support for newer
ECMAScript features, and increasing linter coverage.
* Hot reloading in the dev server now works for all entry-points and not
just the jobs view, shortening the feedback cycle.
* Reduced bundle size due to webpack 4's tree shaking, scope hoisting,
automatic shared/vendor code chunk splitting (no need for the manually
maintained 'vendor' list).
* CSS is now extracted out of JS, which improves performance, reduces
bundle size and prevents the initial white flash of un-styled content.
* Support for dynamic imports/code splitting (needed for bug 1502192).
* Support for Jest via a new Jest preset (unblocks bug 1364045).
* Support for public class field declarations (unblocks bug 1480166).
* Improved source-maps (increases the quality of production exception
trace-backs and fixes several debugger breakpoint bugs).
* Reduced amount of custom configuration required for our fairly complex
frontend needs, reducing maintenance burden and allowing for easier
future Neutrino upgrades.
In addition this PR:
* Fixes the WhiteNoise `immutable_file_test()` regex, so that it now
correctly enables browser caching of images, fonts and source maps.
* Enables webpack-dev-server's overlay feature, which displays any
compilation errors in the browser, saving having to switch back
to the console (this can be enabled for warnings too if desired).
* Enables webpack-dev-server's automatic browser-opening feature,
which saves having to manually navigate to `localhost:5000` after
running `yarn start`.
* Switches Karma tests to run Firefox in headless mode, reducing the
workflow disruption when running `yarn test`.
* Uses the new webpack `performance` option to enable maximum asset
file size thresholds, to help prevent bundle-size regressions.
* Rewrites the `package.json` script commands so that they now work
correctly on Windows, even when setting environment variables.
Performance comparison:
* Local `yarn build`:
- Cached: 2m34s -> 23s
- Uncached: 2m34s -> 58s
* Local `yarn start`:
- Cached: 34.5s -> 13.6s
- Uncached: 34.5s -> 31.3s
* Local `yarn test`
- Cached: 61.5s -> 19.8s
- Uncached: 61.5s -> 22.0s
* Local `yarn lint`
- Cached: 3.8s -> 1.8s
- Uncached: 13.7s -> 13.4s
* Travis end-to-end time:
9 minutes -> 6 minutes
* Heroku deploy end-to-end time:
14 minutes -> 9 minutes
Enabling the ESLint caching reduces `yarn lint` time by 60%. See:
https://eslint.org/docs/user-guide/command-line-interface#caching
This also adds JS files in the repo root to the list of files that
are linted, and fixes a subsequent lint error in `.eslintrc.js`.
renovate[bot]
Joel Maher
Valentin Rigal
esanuandra
Bola Ahmed Buari
Musa Talluzi
Cameron Dawson
Armen Zambrano G
Ed Morley
Casey Williams