Skip to content

Releases: swissquote/crafty

1.27.0

03 Sep 12:54
@onigoetz onigoetz
v1.27.0
682b3bc
Compare
Choose a tag to compare
1.27.0 Latest
Latest

Highlights

  • Remove stylelint-no-unsupported-browser-features as it is unmaintained
  • Support TypeScript 5.5

Internal changes

  • fork gulp-babel and gulp-concat as they are unmaintained
  • Replace gulp-plumber with stream-plumber

Renovate updates

Read more

Contributors

renovate
Assets 2
Loading

v1.26.0

16 May 15:19
@onigoetz onigoetz
v1.26.0
c5a738a
Compare
Choose a tag to compare
v1.26.0

Highlights

CSS modules changes

css-loader v7 introduced a change that requires the following change in all your CSS module imports:

- import styles from "./Component.module.css";
+ import * as styles from "./Component.module.css";

What's Changed

New Contributors

Full Changelog: v1.25.0...v1.26.0

Contributors

renovate, JonathanLink, and 2 other contributors
Assets 2
Loading

v1.25.0

27 Feb 20:47
@onigoetz onigoetz
v1.25.0
c5d5bb6
Compare
Choose a tag to compare
v1.25.0

Highlights

  • Support Prettier 3 #2137 #2251
  • Add support for custom configuration in devServer #2285
  • Fix incorrect Jest environment #2281
  • CSS Modules: Fix Webpack issues and improve CSS linting configuration #2275 #2284
  • Disable @swissquote/swissquote/react/prop-types in TypeScript files #2216
  • Support paths configuration in TypeScript #2066
  • Add tsconfigFile option to JS bundles to specify a custom tsconfig.json

Prettier 3

Prettier 3 supports syntax for TypeScript 5.2 and 5.3 such as import assertions and resource management

  eslint: {
    settings: {
      "formatting/mode": "prettier:3",
    },
  },

Improved TS Support

Webpack and ESLint support TypeScript's "paths" options.
You can also change the tsconfig.json by setting tsconfigFile in the bundle options.

What's Changed

Full Changelog: v1.24.0...v1.25.0

Contributors

renovate and types
Assets 2
Loading

v1.24.0

19 Dec 16:05
@onigoetz onigoetz
v1.24.0
d5b53a0
Compare
Choose a tag to compare
v1.24.0

Highlights

  • Drop Node 16 support
  • Improve IDE mode #2215
  • Update supported browsers list #2247
  • Update to TypeScript 5.3

Drop Node 16 support

In alignment with Node.js release schedule, Crafty stops supporting Node 16, but supports version 18 and 20

Improve IDE Mode

When running crafty ide a few files are created inside your repository so that your IDE knows you're using eslint/prettier/jest.
We got some feedback that this feature is confusing because every user needs to run it on their own machine.

Starting with this version, stylelint.config.mjs, prettier.config.mjs, and jest.config.mjs are created in a commit-friendly way, it will no longer contain the content of the configuration but will allow to commit and get a pleasant out-of-the-box experience for newcomers

At this stage, this doesn't work for ESLint and this file should still not be committed, this is because ESLint's configuration is trickier and another change is ongoing for this one; #2250

Update supported browsers list

As is the case every year, we update the list of supported browsers. The browserslist query is now the following:

Edge >= 96, Safari >= 15, iOS >= 15, Chrome >= 96, and_chr >= 96, Firefox >= 94, > 1%, not dead, not op_mini all

Update to TypeScript 5.3

As it is usual, TypeScript brings a lot of updates in this new version.

You can use all the new features of TypeScript 5.3 except for newly introduced syntax such as import attributes.
This is because Prettier 2 does not support it.
We are working on Prettier 3 support for Crafty to fix this.

What's Changed

Full Changelog: v1.23.0...v1.24.0

Contributors

renovate and types
Assets 2
Loading

1.23.0

03 Oct 20:51
@onigoetz onigoetz
v1.23.0
39b6793
Compare
Choose a tag to compare
1.23.0

Highlights

  • Support Node 18 and 20
  • Disable ESLint while in watch mode
  • Remove crafty-runner-rollup as it wasn't used
  • Replace @squoosh/lib with @onigoetz/resquoosh
  • Replace gulp-typescript with @onigoetz/gulp-typescript
  • Support TypeScript 5.2 (formatting doesn't support new features such as using)
  • Disable @swissquote/swissquote/import/first since some test files need jest.mock before import

Updates

  • webpack 5.88.2
  • postcss 8.4.31
  • Babel 7.23.0
  • ESLint 8.50.0
  • Jest 29.7.0
  • lightningcss 1.22.0
  • Stylelint 5.10.0
  • TypeScript 5.2.2

Full Changelog: v1.22.3...v1.23.0

Assets 2
Loading

1.22.3

27 Apr 11:17
@onigoetz onigoetz
v1.22.3
9d42e6f
Compare
Choose a tag to compare
1.22.3

Highlights

  • Don't remove vendor prefixes automatically when linting css with --fix as the result could be unpredictable.

Full Changelog: v1.22.2...v1.22.3

Assets 2
Loading

v1.22.2

24 Apr 18:57
@onigoetz onigoetz
v1.22.2
1057aae
Compare
Choose a tag to compare
v1.22.2

Highlights

  • Improvements in Crafty's internals for ESM
  • Improvements in crafty-preset-jest for ESM

Improvements in Crafty's internals for ESM

  • Rename crafty's binary to bin.cjs to force node to start it as CommonJS, allows to install it within an ESM module
  • new crafty.runAllSync(method: string, ...args) method to run all implementations of an extension within presets.
  • loaded presets are wrapped in a CraftyPreset class with the following methods:
    • implements(method: string)
    • run(method: string, ...args)
    • get(property: string)
  • load presets with import(). This allows future presets to be created as ESM modules

Improvements in crafty-preset-jest for ESM

  • Automatically detect when package.json contains type: "module"
    • run Jest with Vmodules enabled
    • don't transpile node dependencies that are using ESM
    • transpile .ts, .tsx files to modules instead of commonjs
  • Use enhanced-resolve to resolve modules in Jest, allows to set .mjs and .cjs to be aliases of .mts and .cts

What's Changed

  • @swc/core from 1.3.51 to 1.3.53
  • postcss from 8.4.22 to 8.4.23
  • eslint from 8.38.0 to 8.39.0
  • stylelint from 15.5.0 to 15.6.0
  • rollup from 30.20.6 to 3.21.0
  • webpack from 5.79.0 to 5.80.0

Full Changelog: v1.22.1...v1.22.2

Assets 2
Loading

1.22.1

19 Apr 08:55
@onigoetz onigoetz
v1.22.1
f782e14
Compare
Choose a tag to compare
1.22.1

Highlights

  • properly declare peerDependencies in packages needing them to avoid bad surprises when modules are installed
  • Support compiling .mjs and .mts files in gulp
  • Support testing .mts files with dependencies to other .mts files. Same for .cts

Updates

  • Update SWC from 1.3.49 to 1.3.51
  • Update postcss from 8.4.21 to 8.4.22

Full Changelog: v1.22.0...v1.22.1

Assets 2
Loading

v1.22.0

13 Apr 21:16
@onigoetz onigoetz
v1.22.0
cc0d018
Compare
Choose a tag to compare
v1.22.0

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.

Updates

  • webpack from 5.75.0 to 5.79.0
  • Jest from 29.2.0 to 29.5.0
  • lightningcss from 1.18.0 to 1.19.0
  • rollup 3.10.0 to 3.20.2

Full Changelog: v1.21.1...v1.22.0

Assets 2
Loading

[1.21.1]

13 Jan 13:49
@onigoetz onigoetz
v1.21.1
dddc94e
Compare
Choose a tag to compare
[1.21.1]

Highlights

React Fast Refresh

note that React Fast Refresh works only with the development version of React, if you are loading React through requirejs or equivalent make sure to switch to the dev version while running crafty watch

Libraries Updates

  • webpack update to 5.75.0
  • postcss update to 8.4.21
  • babel update to 7.20.12
  • babel-loader update to 9.1.2
  • eslint update to 8.31.0
  • jest update to 29.3.1
  • stylelint update to 14.16.1
  • rollup to 3.10.0 (new major) -> updated related plugins as well
  • typescript update to 4.9.4
  • lightningcss to 1.18.0

Full Changelog: v1.20.0...v1.21.1

Assets 2
Loading