Skip to content

[1.13.0] TypeScript 4, ESLint 7, lots of improvements
Compare
Choose a tag to compare
@onigoetz onigoetz released this 09 Oct 12:27
· 1627 commits to master since this release
v1.13.0
9b40a13

Highlights

  • Upgraded to TypeScript 4.
  • Upgraded to ESLint 7, including some configuration improvements.
  • Fixed a bug with node_modules imports in Jest.
  • Removed Enzyme from crafty-preset-react.
  • TypeScript files are now run through Babel for all three current runners. (only Webpack was doing it before)
  • Treat @babel/runtime as an external dependency to reduce bundle sizes.
  • @swissquote/rollup-plugin-eslint replaces rollup-plugin-eslint.
  • Extract Terser options into @swissquote/crafty-preset-terser.

TypeScript 4

TypeScript 4 is out and brings a lot of new features like Variadic Tuple Types, Labeled Tuple Elements and inference of types from constructor types.

All runners have been updated to support those features.

For more details you can check their release notes : https://devblogs.microsoft.com/typescript/announcing-typescript-4-0/

ESLint 7 and configuration improvements

ESLint 7 has been released and while it changes a lot internally and in the way it's configured.
Crafty's upgrade does all the heavy lifting for you.

For more information you can check their release notes : https://eslint.org/blog/2020/05/eslint-v7.0.0-released

Some configuration improvements

  • Fix typescript-eslint/naming-convention configuration; shouldn't report any false positives anymore.
  • Add eslint-plugin-react-hooks to our ESLint preset. The official rules for React Hooks, should help catch some gotchas in your React Hooks.
  • A newer version of eslint-plugin-react was making too many false positives in jsx-handler-names and it has been disabled while we investigate the matter.

Jest module imports bugfix

A configuration mistake in Jest broke module resolution sometimes, this has now been fixed and module resolution should be more reliable now.

If you had a workaround like this in your crafty.config.js:

  jest(crafty, options) {
    options.moduleDirectories.push("node_modules");
  }

You can now remove it safely

Removed Enzyme from crafty-preset-react

It's used by only few people and making it work with multiple versions of React makes it's not worth it to keep around.

TypeScript files are now run through Babel for all three current runners

When using crafty-preset-typescript with the gulp and rollup runner, compilation will also go through Babel (Webpack already did the same). This makes it easier to add optimization for all cases.

Treat @babel/runtime as an external dependency to reduce bundle sizes

When compiling with Babel, some code has to be added to files (to handle default imports, class creations, destructuring ...)
If you compile using the gulp or Rollup runners (meant for libraries) These pieces of code are better left outside of your codebase, since re-declaring exactly the same snippets of code for each module or even file, can become big very fast.

Now, if you add @babel/runtime as a dependency to your project. Crafty will automatically keep these snippets external to your codebase.
This way it is the job of the final project to import all helpers and it can do a better job at de-duplicating them.

You can override this behaviour with the inlineRuntime option for your bundles.
Defaults to true when nothing is specified, and to false when a dependency to @babel/runtime is found.

@swissquote/rollup-plugin-eslint replaces rollup-plugin-eslint

This plugin is a fork of rollup-plugin-eslint with a few differences

  1. It's compatible with ESLint 7
  2. Linting is done on all files and a single report is printed at the end of the run
    this allows to lint all files and not fail after the first one.

Extract Terser options into @swissquote/crafty-preset-terser

Options for Terser were duplicated and scattered accross multiple files.
These options are now moved to a separate preset, and the uglifyJS option has been renamed to terser.

Updates

ESLint related updates

  • eslint from 6.8.0 to 7.10.0
  • @typescript-eslint/eslint-plugin from 3.6.0 to 4.4.0
  • @typescript-eslint/parser from 3.6.0 to 4.4.0
  • gulp-eslint replaced with gulp-eslint7
  • eslint-config-prettier from 6.11.0 to 6.12.0
  • eslint-import-resolver-typescript from 2.0.0 to 2.3.0
  • eslint-plugin-import from 2.22.0 to 2.22.1
  • eslint-plugin-react from 7.20.3 to 7.21.3

Rollup related updates

  • @rollup/plugin-commonjs from 13.0.1 to 15.1.0
  • @rollup/plugin-node-resolve from 8.4.0 to 9.0.0
  • rollup from 2.21.0 to 2.28.2
  • rollup-plugin-babel replaced with @rollup/plugin-babel
  • rollup-plugin-terser from 6.1.0 to 7.0.2
  • rollup-plugin-typescript2 from 0.27.1 to 0.27.3

Webpack related updates

  • mini-css-extract-plugin from 0.9.0 to 0.12.0
  • fork-ts-checker-webpack-plugin from 4.1.6 to 5.2.0
  • terser-webpack-plugin from 3.0.6 to 4.2.3
  • webpack from 4.43.0 to 4.44.2
  • webpack-chain from 6.5.0 to 6.5.1
  • webpack-merge from 5.0.9 to 5.2.0
  • style-loader from 1.2.1 to 1.3.0
  • ts-loader from 8.0.0 to 8.0.4

PostCSS Related updates

  • browserslist from 4.13.0 to 4.14.5
  • css-loader from 3.6.0 to 4.3.0
  • postcss from 7.0.32 to 7.0.35
  • postcss-loader from 3.0.0 to 4.0.3
  • postcss-selector-parser from 6.0.2 to 6.0.4

Other updates

  • babel from 7.10.* to 7.11.*
  • jest from 26.1.0 to 26.5.2
  • gulp-terser from 1.2.0 to 1.4.0
  • enhanced-resolve from 4.2.0 to 5.2.0
  • find-up from ^4.0.0 to ^5.0.0
  • react-hot-loader from 4.12.21 to 4.13.0
  • stylelint from 13.6.1 to 13.7.2
  • ts-jest from 26.1.2 to 26.4.1
  • typescript from 3.9.6 to 4.0.3
  • undertaker from 1.2.1 to 1.3.0
  • yargs-parser from ^18.0.0 to ^20.0.0

Internal

  • Replace Lerna with oao
  • Replace glob-watcher with an inlined, up-to-date, version
Assets 2