Update all non-major dependencies #374

renovate · 2023-04-15T03:00:54Z

This PR contains the following updates:

Package	Change	Type	Update
@swissquote/crafty	`1.21.1` -> `1.22.0`	devDependencies	minor
@swissquote/crafty-preset-babel	`1.21.1` -> `1.22.0`	devDependencies	minor
@swissquote/crafty-preset-postcss	`1.21.1` -> `1.22.0`	devDependencies	minor
@swissquote/crafty-runner-gulp	`1.21.1` -> `1.22.0`	devDependencies	minor
@swissquote/crafty-runner-rollup	`1.21.1` -> `1.22.0`	devDependencies	minor
php	`8.2.4` -> `8.2.5`	final	patch

Release Notes

swissquote/crafty

`v1.22.0`

Compare Source

Highlights

Support for Prettier 2 and new TypeScript / EcmaScript syntax
Replace Terser with SWC for faster minification in your builds, replace Babel with SWC in crafty-preset-typescript
TypeScript 5.0 support and other TypeScript improvements
New crafty-preset-lightningcss as alternative to crafty-preset-postcss
Extract CSS linting into crafty-preset-stylelint
Webpack --profile and --analyze options

Support for Prettier 2 and new TypeScript / EcmaScript syntax

Prettier 2.0 was released a while ago, introducing some new formatting rules that aren't backwards compatible. We've held off from upgrading for now as our internal Git hooks are using Crafty to autoformat code on commit. Upgrading Crafty to Prettier 2.0 would mean that all projects need to migrate as soon as the change is introduced.

Instead of this, we decided to bundle both Prettier 1 and Prettier 2 and let you opt-in to Prettier 2 at your own pace.

Since the release of Prettier 2.0, new features were added to TypeScript along with new syntax, such as import type ... from .... Support for these new features is present in Prettier 2.0 but not Prettier 1.0, if you wish to use those, you need to upgrade opt-in to Prettier 2

crafty.config.js:

module.exports = {
  eslint: {
    settings: {
      "formatting/mode": "prettier:2"
    }
  }
}

SWC for Minification and Transpilation

SWC Provides both transpiling and minification abilities, its architecture and the fact it's written in Rust makes it a strong contender compared to Babel and Terser.

First, we replaced the default minification in Webpack by SWC, in our limited tests, it improved by about 30% our build time in Webpack.

crafty-preset-typescript works with two steps, one is to convert TypeScript to modern EcmaScript, and a second step that transpiles EcmaScript down to what's supported by the browsers you need to support.
This second step was done by Babel but SWC will now be used instead.

TypeScript 5.0

TypeScript 5.0 was released a few weeks ago. Along with many features which I won't cover here, this version is 10-25% faster and smaller than before.

Along with the update we added a test suite to make sure that new syntax that's introduced by TypeScript can be properly parsed by the whole toolchain it goes through; ESLint, SWC, Prettier and all other pieces in between need to understand a new feature for it to be effectively useable inside Crafty. This also allows us to easily track the features that aren't working at the moment and make sure they'll be available to you when all tools support them.

This helped us finalize support for *.mts and *.cts files, you may now decide to use either extension for your module or commonjs files. Of course, the current *.ts and *.tsx extensions will continue to work fine.

New `crafty-preset-lightningcss` as alternative to `crafty-preset-postcss`

Lightningcss is a recent contender in the CSS space, built in Rust ... I think you can guess what's coming next; it's very fast.

Previous releases of Crafty have introduced lightningcss as a part of crafty-preset-postcss and replaced some postcss plugins with it. We decided to take it a step further and provide a preset that completely bypasses postcss plugins.

You will get less features out of the box (as our postcss preset is packed with them) but could find that it's enough for your needs and offers a lighter and faster alternative.

Read its documentation

Extract CSS linting into `crafty-preset-stylelint`

Now that we have two presets that can convert CSS, we extracted CSS Linting into a separate package,.

This preset exposes the crafty cssLint command and can be used without requiring crafty-preset-lightningcss nor crafty-preset-postcss

Read its documentation

`crafty-runner-webpack`'s `--profile` and `--analyze` options

Up until Crafty 1.21.1 running crafty run with --profile would export an analysis created with webpack-bundle-analyzer. Starting with Crafty 1.22.0 this option is renamed to --analyze

The --profile options still remains but instead outputs an analysis of the time spent in loaders and plugins provided by speed-measure-webpack-plugin. This can help track down performance issues in your builds.