Assets 2

Overview

This release separates all TDS components into separate npm packages. (See the list here) All new packages are versioned at v1.0.0 and will follow semantic versioning. There are no new features or breaking changes between 1.0 and now. So, it is completely safe to go to this new package structure immediately.

This means there will not be any more @telusdigital/tds packages, as TDS is now a collection of independent component packages.

Follow the upgrade guide below.

Why?

The TDS components have been bundled together as a single package that is versioned using the semantic versioning spec, so that consumers have a predictable way of managing the dependency. As the number of components in the system expands, maintaining and distributing as a single package becomes less desirable.

Components will now be able have their own roadmap and evolve independently, meaning bug fixes and new features can be developed more rapidly and safely. Consumers will now be able to manage their TDS component dependencies at a more granular level, lowering the effort of upgrades. Consumers can pick and choose which components to import, reducing their overall TDS dependency footprint.

Overall, this exciting step lays more foundation to enable community ownership and contribution!

Upgrade guide from 1.0 --> split components

The following steps should only take a few minutes, and we have tried to automate as much as we can. We have also made a PR to the isomorphic-starter-kit that you can pull in.

If you are still on a 0.y.z beta version, please upgrade to 1.0 first, and then follow these steps.

  1. Change the TDS dependency from @telusdigital/tds to the split components, including all ES6 import statements. We have an automated tool to help make this easy. Follow the usage steps from tds-codemod.
  2. Replace the main TDS CSS file with the new @tds/core-css-reset package.
  • yarn add @tds/core-css-reset
  • Open "ui/src/components/App/index.jsx"
  • Change import '@telusdigital/tds/dist/tds.css' to import '@tds/core-css-reset/dist/index.css'
  1. Replace references to the colours Sass file (@import '~@telusdigital/tds/dist/scss/colours';) with the new @tds/core-colours package.
  • yarn add @tds/core-colours
  • Change @import '~@telusdigital/tds/dist/scss/colours'; to @import '~@tds/core-colours/colours'; in all Sass files. (You may want to use your editor's built in find/replace)
  • Or, if you are on Mac you can run this command from the ui/ folder.
find src -type f -name *.scss -exec sed -i '' -e 's/telusdigital\/tds\/dist\/scss\/colours/tds\/core-colours\/colours/g' {} +
  1. Set up for server-side rendering.
  • yarn add ignore-styles
  • Add import 'ignore-styles' to the top of "ui/src/server/index.js"
  • yarn remove babel-plugin-transform-require-ignore
  • Remove the following from your .babelrc.js file config
[
  'babel-plugin-transform-require-ignore',
  {
    extensions: ['.scss', '.css']
  }
]
  1. Configure webpack to remove potential duplicated CSS classes from the bundle.
  • yarn add optimize-css-assets-webpack-plugin@3.2.0 --dev
  • Edit webpack.prod.config.babel.js as follows:
import OptimizeCssAssetsPlugin from 'optimize-css-assets-webpack-plugin';

module.exports = {
  ...
  plugins: [
    new ExtractTextPlugin({filename: "[name]_[chunkhash].css", allChunks: true}),
    new OptimizeCssAssetsPlugin(),
    ...
  ]
}
  1. Remove TDS from the vendor chunk (webpack).
  • Open webpack.config.babel.js
  • Remove @telusdigital/tds from the vendor array