Releases: swissquote/crafty
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 customtsconfig.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
- Update actions/setup-node action to v4.0.1 by @renovate in #2252
- Update dependency caniuse-lite to v1.0.30001571 by @renovate in #2253
- Update dependency @types/eslint to v8.56.0 by @renovate in #2254
- Update dependency mrmime to v2 by @renovate in #2255
- Update @types by @renovate in #2256
- Update babel monorepo to v7.23.7 by @renovate in #2257
- Update dependency @types/react to v18.2.55 by @renovate in #2261
- Update actions/setup-node action to v4.0.2 by @renovate in #2262
- Update dependency @types/react-dom to v18.2.19 by @renovate in #2263
- Update dependency caniuse-lite to v1.0.30001585 by @renovate in #2264
- Update dependency gulp-eslint-new to v1.9.1 by @renovate in #2265
- Update dependency caniuse-lite to v1.0.30001587 by @renovate in #2266
- Update dependency streamx to v2.15.8 by @renovate in #2267
- Update Yarn to v4.1.0 by @renovate in #2269
- Update dependency chokidar to v3.6.0 by @renovate in #2270
- Update dependency gulp-postcss to v10 by @renovate in #2271
- Update dependency @swc/core to v1.4.1 by @renovate in #2258
- Update dependency @types/react to v18.2.56 by @renovate in #2276
- Update dependency caniuse-lite to v1.0.30001588 by @renovate in #2277
- Update dependency @swc/core to v1.4.2 by @renovate in #2278
- Update dependency terser to v5.27.1 by @renovate in #2279
- Update dependency typescript-eslint to v7.1.0 by @renovate in #2282
- Update dependency @types/react to v18.2.59 by @renovate in #2283
Full Changelog: v1.24.0...v1.25.0
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
- Update @types to v18.2.25 by @renovate in #2173
- Update Yarn to v3.6.4 by @renovate in #2182
- Update dependency @types/react-dom to v18.2.11 by @renovate in #2183
- Update dependency sinon to v16.1.0 by @renovate in #2187
- Update dependency eslint to v8.51.0 by @renovate in #2186
- Update swc monorepo by @renovate in #2185
- Update dependency caniuse-lite to v1.0.30001546 by @renovate in #2184
- Update dependency ts-loader to v9.5.0 by @renovate in #2188
- Update dependency @types/react to v18.2.26 by @renovate in #2191
- Update dependency fork-ts-checker-webpack-plugin to v9 by @renovate in #2190
- Update @types to v18.2.27 by @renovate in #2192
- Update eslint to v6.7.5 by @renovate in #2193
- Update @types by @renovate in #2194
- Update dependency bufferutil to v4.0.8 by @renovate in #2197
- Update babel monorepo to v7.23.2 by @renovate in #2195
- Update dependency @swc/core to v1.3.93 by @renovate in #2196
- Update dependency caniuse-lite to v1.0.30001549 by @renovate in #2198
- Update all webpack dependencies by @renovate in #2199
- Update dependency terser to v5.22.0 by @renovate in #2200
- Update all eslint dependencies to v6.8.0 by @renovate in #2201
- Update @types by @renovate in #2203
- Update dependency @ronilaukkarinen/gulp-stylelint to v14.1.2 by @renovate in #2204
- Update dependency @types/jest to v29.5.6 by @renovate in #2207
- Update dependency @statoscope/cli to v5.28.1 - autoclosed by @renovate in #2205
- Update dependency @swc/core to v1.3.94 by @renovate in #2206
- Update dependency @vercel/ncc to v0.38.1 by @renovate in #2208
- Update dependency caniuse-lite to v1.0.30001553 by @renovate in #2209
- Update actions/setup-node action to v3.8.2 by @renovate in #2211
- Update dependency @statoscope/cli to v5.28.2 by @renovate in #2213
- Update dependency sinon to v16.1.3 by @renovate in #2210
- Update all eslint dependencies by @renovate in #2212
- Update Yarn to v4 by @renovate in #2219
- Update actions/setup-node action to v4 by @renovate in #2220
- Update Yarn to v4.0.1 by @renovate in #2221
- Update dependency caniuse-lite to v1.0.30001558 by @renovate in #2223
- Update dependency @types/react to v18.2.33 - autoclosed by @renovate in #2222
- Update dependency fork-ts-checker-webpack-plugin to v9.0.2 by @renovate in #2224
- Update dependency stylelint-scss to v5.3.0 by @renovate in #2225
- Update dependency terser to v5.23.0 by @renovate in #2227
- Update dependency streamx to v2.15.2 by @renovate in #2228
- Update dependency log-symbols to v6 by @renovate in #2226
- Update eslint to v6.9.1 by @renovate in #2229
- Update dependency @types/jest to v29.5.7 by @renovate in #2231
- Update dependency sinon to v17 by @renovate in #2230
- Update dependency @swc/core to v1.3.96 by @renovate in #2232
- Update dependency @types/react to v18.2.35 by @renovate in #2233
- Update dependency sinon to v17.0.1 by @renovate in #2235
- Update dependency eslint to v8.53.0 by @renovate in #2236
- Update dependency terser to v5.24.0 by @renovate in #2237
- Update dependency @types/react to v18.2.36 by @renovate in #2238
- Update dependency @types/react to v18.2.43 by @renovate in #2241
- Update dependency stylelint-scss to v5.3.2 by @renovate in #2240
- Update Yarn to v4.0.2 by @renovate in #2242
- Update dependency caniuse-lite to v1.0.30001568 by @renovate in #2243
- Update JamesIves/github-pages-deploy-action action to v4.5.0 by @renovate in #2244
- Update actions/setup-java action to v4 by @renovate in #2245
- Update @types by @renovate in #2248
Full Changelog: v1.23.0...v1.24.0
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 needjest.mock
beforeimport
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
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
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
containstype: "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
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
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 tocrafty-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.
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
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
[1.21.1]
Highlights
- React Fast Refresh is now the default mode for Hot Module Replacement
- Added some examples on how to use Crafty : https://github.com/swissquote/crafty/tree/master/examples
- Allow to run WebpackPluginServe more than once in watch mode, is useful if you have multiple bundles in a single configuration
- Update to Typescript 4.9
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
[1.21.0]
Please don't use this version, something went wrong with the release.
Use version 1.21.1 instead.
[1.20.0]
Highlights
- Drop node 12 and node 14 support
- Upgraded browserslist query to :
Edge >= 86, Safari >= 15, iOS >= 15, Chrome >= 86, and_chr >= 86, Firefox >= 81, > 1%, not dead, not op_mini all
- Add React Fast Refresh support as opt-in, the default is still react-hot-loader for now.
- Replace webpack-dev-server with webpack-plugin-serve this change should be transparent.
- Remove old PostCSS plugins that aren't useful anymore due to more modern browsers
- Replace
@parcel/css
withlightningcss
(the package has been renamed) - Better support for CSS Modules
- Update Jest 27 to 29
- Update TypeScript 4.6.3 to 4.8.4
Update list of supported browsers
Every year, Swissquote reviews its supported browsers, and the following is the resulting browserslist query:
Edge >= 86, Safari >= 15, iOS >= 15, Chrome >= 86, and_chr >= 86, Firefox >= 81, > 1%, not dead, not op_mini all
Add React Fast Refresh support as opt-in, the default is still react-hot-loader for now.
React Hot Loader introduced the concept of reloading parts of a page while keeping state.
But this was done by patching React and needs lots of configuration.
React Fast Refresh is React's own implementation of this feature.
Crafty now allows you to choose which one you want to enable, the default remains React Hot Loader for now, as we are making sure it's stable and works as expected.
Check the documentation on how to switch
Replace webpack-dev-server with webpack-plugin-serve
webpack-plugin-serve is smaller and has more frequent updates compared to webpack-dev-server.
With the implemented configuration, you shouldn't see any difference in behaviour.
Here is the difference between both implementations
Remove old PostCSS plugins that aren't useful anymore due to more modern browsers
postcss-dir-pseudo-class
: is now handled by lightningcsspostcss-attribute-case-insensitive
: is now fully supported by all browsers we supportpostcss-font-family-system-ui
: is now handled by lightningcsspostcss-pseudo-class-any-link
: is now fully supported by all browsers we supportpostcss-replace-overflow-wrap
: is fully supported by all browsers we support
Replace @parcel/css
with lightningcss
@parcel/css
has been rebranded to lightningcss
, many improvements and new feature are added regularly and are constantly improving the library.
Better support for CSS Modules
Naming a file with a .module.css
or .module.scss
will apply different rules than other CSS files
- CSS Class names will be hashed to avoid collisions.
- Apply CSS Modules transforms.
- Linting rules for naming are relaxed for module files.
Update Jest 27 to 29
Two major versions of Jest came out, this should mostly have no impact on your builds except a change in the Snapshot format.
Which means that on next test run, your snapshots will have many differences, running crafty test -u
will update them.
Jest 28 Release notes - Jest 28 Release notes
Update TypeScript 4.6 to 4.8
Important updates
- Update Jest 27.5.1 to 29.1.2
- Update TypeScript 4.6.3 to 4.8.4
- Update Babel 7.17 to 7.19
- Update ESLint 8.14.0 to 8.24.0
- Update SWC 1.2.171 to 1.3.5
- Update Postcss 8.4.12 to 8.4.17
- Update Stylelint 14.7.1 to 14.13.0
- Update Rollup 2.70.2 to 2.79.1
- Update Webpack 5.72.0 to 5.74.0
All Changes v1.19.1...v1.20.0