sku

Patch Changes

• Prevents typescript from being upgraded to 4.5.x (#662)

  Typescript 4.5 has caused a lot of issues with packages included with sku (braid, vanilla-extract) that are caused by a regression that's been introduced in the type checker.
  It seems to be fixed in 4.6.0-dev, but that won't be available until late February.

  To prevent things blowing up in the meantime, the version of typescript has been update to keep it below 4.5, at least until a patch is released in 4.5

Patch Changes

• The autogenerated tsconfig.json no longer explicitly excludes node_modules (#660)

Patch Changes

• Fix loading of TS config files that use node builtins or external dependencies. (#657)

Minor Changes

• Config files can now be in TypeScript (#655)

  Previously, projects were configured using a sku.config.js file, which exported a config object.
  As most projects at SEEK are now TypeScript based, having a JS config file makes it impossible to reuse any of your production code in the config (e.g. routes).

  This change makes it possible to use a TypeScript config file, by default sku.config.ts.
  The easiest way to migrate is to change the module exports to a default export:

  - // sku.config.js
  + // sku.config.ts
  - module.exports = {
  + export default {
    clientEntry: 'src/client.tsx',
    // ...
  }
  

  But sku also now exports a type for the config object, to make it easier to setup and understand the configuration options.

  + import type { SkuConfig } from 'sku';
  +
  - module.exports = {
  + const config: SkuConfig = {
    clientEntry: 'src/client.tsx',
    // ...
  }
  +
  + export default config;
  

  sku init will now create TypeScript config files by default.

Patch Changes

• Ensure translations are available when running storybook (#638)

Minor Changes

• Include node_modules in node builds (#651)

  Previously, sku would only compile code within your src folder, plus any compile packages, for builds targetting the node environment. While this results in faster builds, it can sometimes lead to incorrect versions of packages being resolved due to clashing version range requirements. All node_modules will now included in the compilation by default, ensuring the correct package version is always required.

  The old behaviour can be re-enabled via the new externalizeNodeModules config.

Patch Changes

• Correct exclusion of removeViewBox svgo plugin (#647)

Patch Changes

• Run @vanilla-extract/webpack-plugin in node builds to ensure class name consistency (#640)

• Update @vanilla-extract/webpack-plugin to v2.0.0 (#640)

Patch Changes

• Run babel transform-runtime in development (#636)

  This fixes an issue where the regeneratorRuntime is required to be setup manually only for development.

Patch Changes

• Re-introduce lint rules requiring React import when using JSX (#631)

  As sku v11 moved to the new JSX transform, we removed all lint rules ensuring React was imported when using JSX. Unfortunately this change only works if all compile packages (e.g. braid-design-system) switch to sku v11 at the same time, which would also constitute a breaking change. To avoid a lot of package update churn, we are re-introducing the need for React imports when JSX is present.

• Update svgo config to remove deprecated "extendDefaultPlugins" utility. (#632)

  This requires [email protected], so Unknown builtin plugin "preset-default" specified errors can be fixed by refreshing the lockfile.

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 your storybookTarget as in sku.config.js. The default is dist-storybook.

  BREAKING CHANGE

  sku chromatic script is no longer available.

• Rename the SkuWebpackPlugin option supportedBrowsers to browserslist (#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 of supportedBrowsers to use browserslist instead. If compiling for Node, ensure you pass a valid Node browserslist query (e.g. current node).

• Remove sku playroom and sku 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.

  Webpack 5 migration guide

  Webpack 5 release notes

• Add persistentCache option and enable by default (#629)

  The new persistentCache option will turn on webpack's filesystem caching between runs of sku start and sku 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 use sku 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 to node. However, sku will remain using jsdom 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 the storybookAddons option.

  // sku.config.js
  module.exports = {
    storybookAddons: ['@storybook/addon-knobs'],
  };
  

• Add webpackStats.json to build-ssr output (#629)

  Running sku build-ssr will now output a webpackStats.json alongside the server.js file which is required to be deployed to the same directory as server.js.

  BREAKING CHANGE

  SSR applications must now deploy the webpackStats.json alongside the server.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 use eval-cheap-module-source-map.

• Upgrade to storybook 6 (#629)

Patch Changes

• Fix incorrect "Invalid script passed to 'registerScript'" errors (#614)

Patch Changes

• Fix static rendering of vanilla-extract classes in production (#610)

Minor Changes

• Upgrade to Prettier 2.3 (#606)

  This will require consumers to run yarn format to adopt the new Prettier rules. To reduce the mismatch of prettier versions in the future we are unpinning sku's required version, allowing consumers to relock and accept minor and patch updates.

Patch Changes

• Fix Date instanceof checks inside render (#604)

Patch Changes

• Group .css.ts files with styles when ordering imports (#600)

• Work around a classnames bug where dynamic class objects are converted to [Object object] during static render (#602)

• Update minimum playroom version (#600)

Patch Changes

• Correctly handle image imports in .css.ts files (#598)

Patch Changes

• Update vanilla-extract to v1 (#593)

• Remove deprecated Braid components from sku init template (#595)

Minor Changes

• Add skipPackageCompatibilityCompilation option (#591)

  When running sku build, sku will compile all your external packages (node_modules) through @babel/preset-env. This is to ensure external packages satisfy the browser support policy. However, this can cause very slow builds when large packages are processed. The skipPackageCompatibilityCompilation option allows you to pass a list of trusted packages to skip this behaviour.

  Note: react & react-dom are skipped by default.

  Example:

  const config = {
    skipPackageCompatibilityCompilation: [
      '@bloat/very-large-package',
      'lodash',
    ],
  };
  

Patch Changes

• Remove cssnano calc optimization (#589)

Patch Changes

• Exclude vanilla-extract CSS files from Storybook's webpack config (#587)