v11.0.0
Major Changes
-
Remove
sku chromatic
script (#629)Due to changes in the way chromatic is setup, it now makes more sense for consumers to integrate with chromatic directly.
MIGRATION GUIDE
Follow the chromatic install step.
Once installed, you can setup CI as follows
yarn sku build-storybook yarn chromatic --storybook-build-dir dist-storybook
Your
storybook-build-dir
is whatever you configured yourstorybookTarget
as insku.config.js
. The default isdist-storybook
.BREAKING CHANGE
sku chromatic
script is no longer available. -
Rename the
SkuWebpackPlugin
optionsupportedBrowsers
tobrowserslist
(#629)The
SkuWebpackPlugin
now uses the browserslist query as a compile target for Node code as well.BREAKING CHANGE
If you are consuming the
SkuWebpackPlugin
directly, update uses ofsupportedBrowsers
to usebrowserslist
instead. If compiling for Node, ensure you pass a valid Node browserslist query (e.g.current node
). -
Remove
sku playroom
andsku build-playroom
(#629)BREAKING CHANGE
All playroom scripts have been removed in favour of consumers installing playroom directly. If you'd like to continue using playroom then you can use the SkuWebpackPlugin.
Example config:
// playroom.config.js const SkuWebpackPlugin = require('sku/webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { components: './src/components', outputPath: './dist/playroom', webpackConfig: () => ({ plugins: [ new MiniCssExtractPlugin(), new SkuWebpackPlugin({ include: paths.src, target: 'browser', browserslist: ['last 2 chrome versions'], mode: 'development', displayNamesProd: true, removeAssertionsInProduction: false, MiniCssExtractPlugin, }), ], }), };
-
Remove support for
seek-asia-style-guide
(#629)As
seek-asia-style-guide
is no longer used, first class support for it has been removed. -
Upgrade to webpack 5 (#629)
All start and build scripts, including storybook will now use webpack 5. Along with the webpack upgrade a lot of other related dependencies have been updated.
MIGRATION GUIDE
While there is no breaking change from a sku perspective, there are many underlying changes that may require attention.
Things to validate before merging:
- If you use
dangerouslySetWebpackConfig
, check it's working against webpack 5 - Static assets are working correctly (e.g. images, fonts, etc)
- Both start and build scripts are outputting a working application
If you are seeing errors mentioning polyfills after upgrading it's likely your app is relying on automatic NodeJS polyfills which were removed in Webpack 5. Reach out in
#sku-support
if you're seeing this to discuss options. - If you use
-
Add persistentCache option and enable by default (#629)
The new
persistentCache
option will turn on webpack's filesystem caching between runs ofsku start
andsku start-ssr
. This should result in much faster dev server start times when the cache is vaild.BREAKING CHANGE
Unfortunately treat files are not compatible with the
persistentCache
option, so it will need to be disabled in your project until you have migrated them to Braid components or.css.ts
files.// sku.config.js module.exports = { persistentCache: false, };
This limitation only applies to files inside the current project, any treat files within node_modules can be safely ignored.
-
Update the minimum supported Node version to 12.13.0 (#629)
BREAKING CHANGE
Node 10 is no longer supported
-
Remove
test-ssr
command (#629)BREAKING CHANGE
The
sku test-ssr
command is no longer available. Please usesku test
instead. -
Switch to the
automatic
JSX React runtime (#629)This changes how JSX is transformed into valid JavaScript and comes with some performance benefits. It also means that JSX can be used without needing to import React. Read more about the change here.
e.g.
-import React from 'react'; export const MyComponent => <div>MyComponent</div>;
MIGRATION GUIDE
Ensure your app is running React 17. React 16.14 is also supported if required. Now your app should be working but you may be seeing lint errors similar to the following:
'React' is declared but its value is never read
To remove all the redundant react imports use the following codemod:
npx react-codemod update-react-imports
BREAKING CHANGE
The minimum supported version of React is now
v16.14.0
. -
Upgrade to Jest 27 (#629)
Jest 27 introduces a bunch of new default settings, primarily switching the default test environment from
jsdom
tonode
. However, sku will remain usingjsdom
by default as we feel it makes more sense as a default for UI development. You can read through the Jest 27 release post to see the other breaking changes that have occured. -
Remove support for flow (#629)
Files using flow types are no longer supported. Any remaining flow types should be migrated to TypeScript.
-
Remove
@storybook/addon-knobs
in favor of allowing custom addons. (#629)MIGRATION GUIDE
If you still require the use of
@storybook/addon-knobs
you'll first need to install it.Note:
@storybook/addon-knobs
has been deprecated in favor of@storybook/addon-controls
.yarn add --dev @storybook/addon-knobs
Once installed, inside your
sku.config.js
file, pass@storybook/addon-knobs
to thestorybookAddons
option.// sku.config.js module.exports = { storybookAddons: ['@storybook/addon-knobs'], };
-
Add
webpackStats.json
tobuild-ssr
output (#629)Running
sku build-ssr
will now output awebpackStats.json
alongside theserver.js
file which is required to be deployed to the same directory asserver.js
.BREAKING CHANGE
SSR applications must now deploy the
webpackStats.json
alongside theserver.js
file.
Minor Changes
-
Add
storybookAddons
config option (#629)Custom storybook addons can now be used via the
storybookAddons
config option. For example, if you want to use@storybook/addon-essentials
, first install the addon.yarn add --dev @storybook/addon-essentials
Then add it to your
sku.config.js
.// sku.config.js module.exports = { storybookAddons: ['@storybook/addon-essentials'], };
-
Add
--stats
argument (#629)You can now override the default webpack stats preset via the
--stats
option. This is useful for debugging warnings and build issues. You can pass any valid webpack stats preset.sku start --stats errors-warnings
The default values are as follows:
start/start-ssr:
summary
build/build-ssr:
errors-only
-
Move to faster source maps setting in development (#629)
Previously sku used
inline-source-map
in development which is very slow, particularly for rebuilds. Development source maps now useeval-cheap-module-source-map
. -
Upgrade to storybook 6 (#629)