Skip to content

@datawheel/[email protected]

Pre-release
Pre-release
Compare
Choose a tag to compare
@davelandry davelandry released this 04 Jan 20:31
· 3605 commits to master since this release
@datawheel/[email protected]
21ef94a

v0.17.0 of canon-core revolves around the upgrading of multiple major dependencies, most notably Webpack v4 and React v16 (which then enables the latest Blueprintjs modules). Please read the following notes, as there are many breaking changes.

Migration Guide

📘 Upgrading Blueprint

There are multiple steps to upgrade Blueprint modules to their latest versions (v3 as of this writing).

  1. Use npm i to upgrade all blueprint packages used in your project to their @latest versions
  2. Run the v1 to v2 upgrade script: npx upgrade-blueprint-2.0.0-rename --path=./app
  3. Run the v2 to v3 upgrade script: npx upgrade-blueprint-3.0.0-rename --path=./app
  4. Rename all pt- class prefixes to bp3- (that number will now increment with new versions of blueprint)

🍻 Toasts

The Toaster component in older versions of Blueprint used a React API that has now been deprecated (it used an anti-pattern to add the pop-up to the page <body> outside of React scope). canon-core now passed a toaster component through context that you should use instead. Here is an example pseudo-usage:

import React, {Component} from "react";
import PropTypes from "prop-types";

class MyComponent extends Component {

  showToast() {

    const Toast = this.context.toast.current;

    Toast.show({
      icon: "heart", 
      message: "Wow, thanks for reading release notes!"
    });

  }

  render() {
    return <div onClick={this.showToast.bind(this)}>Click Me!</div>;
  }

}

MyComponent.contextTypes = {
  toast: PropTypes.object
};

export default MyComponent;

If you're curious about how they work from scratch, check out the <CanonProvider /> to see how it is currently being passed down using context.

⭐ Blueprint Icons

The latest version of Blueprint has switched from using a custom font-family to using raw SVG for all icons. The old font-family is still supported, but it is suggested to start porting icons over to the new SVG standard. Read more about it here.

㊗️ react-i18next translations

The translate() function that we need to wrap all localized components with in order to get translations has been deprecated. It still works, but it is suggested to migrate to the new withNamespaces() drop-in replacement.

♓ render Parentheses

It's sometimes nice to have a component render return an element wrapped in parentheses like this:

return (
  <div>Hello</div>
);

However, in React 16, this results in the following console error:

Warning: Did not expect server HTML to contain a <div> in <div>.

The solution is to remove the parentheses:

return <div>Hello</div>;

👪 this.props.children

In the old React, when rendering children, it was possible to do the following:

return <div id="wrapper">
  <a href="/">Go Home</a>
  { this.props.children }
  <footer>Copyright Dave</footer>
</div>;

However, in React v16, this now throughs a key error. The solution is to wrap this.props.children in a containing element:

return <div id="wrapper">
  <a href="/">Go Home</a>
  <div>{ this.props.children }</div>
  <footer>Copyright Dave</footer>
</div>;

Dependency Update List

  • @blueprintjs/core 1.35.5 to ^3.10.0
  • axios ^0.17.1 to ^0.18.0
  • babel-eslint ^8.2.3 to ^10.0.1
  • babel-plugin-direct-import removed
  • babel-plugin-transform-imports removed
  • d3plus-react ^0.5.1 to ^0.5.2
  • d3plus-text ^0.9.33 to ^0.9.34
  • d3plus-viz ^0.12.4 to ^0.12.6
  • eslint ^4.13.1 to ^5.11.1
  • eslint-plugin-react ^7.5.1 to ^7.12.2
  • extract-text-webpack-plugin replaced with mini-css-extract-plugin
  • hard-source-webpack-plugin ^0.6.4 to ^0.13.1
  • i18next-express-middleware ^1.0.7 to ^1.7.0
  • i18next-node-fs-backend ^1.0.0 to ^2.1.1
  • postcss-cssnext replaced with postcss-preset-env
  • react ^15.6.2 to ^16.7.0
  • react-addons-css-transition-group removed
  • react-dom ^15.6.2 to ^16.7.0
  • react-i18next ^6.1.0 to ^9.0.1
  • react-redux ^5.0.6 to ^6.0.0
  • redux ^3.7.2 to ^4.0.1
  • webpack ^3.10.0 to ^4.28.3
  • webpack-bundle-analyzer ^2.9.1 to ^3.0.3
  • webpack-cli added
  • webpack-dev-middleware ^2.0.1 to ^3.4.0
  • webpack-hot-middleware ^2.21.0 to ^2.24.3
  • yn ^2.0.0 to ^3.0.0

Commit Log

  • migrate from postcss-cssnext to postcss-preset-env (5279ad2)
  • upgrades to webpack v4 (dea3a81)
  • removes CANON_ATTRS variable (8fca57c)
  • updates yn to v3 (f35217a)
  • updates linting packages (bed9e5c)
  • updates hard-source-webpack-plugin to v0.13 (08083b4)
  • updates axios to v0.18 (eb557cf)
  • fixes Sequelize operator deprecation warning (7fbc0dd)
  • updates to latest react and blueprint dependencies (ccbaaf2)
  • fixes example app localization files (bd37074)
Assets 2
Loading