📊 billboard.js 2.0 is out! 🎉🎊, more smaller and faster.

After the several months of work, proud to announce a long waited major update came out today!

For the detailed info, please checkout the v2 changelog:
https://github.com/naver/billboard.js/wiki/CHANGELOG-v2

# install the v2
npm install billboard.js

TL;DR

• Moved the code base to TypeScript
• Restructured whole file system & class architecture
• Smaller build size & run faster
• Maintained backward compatibility.

Major internal changes

We decided to move whole codebase to TypeScript to make more easier for contributors to access and understand codes.

And also re-architecture were applied from the ground to facilitate the maintenance of the library.

https://github.com/naver/billboard.js/wiki/CHANGELOG-v2#updates-on-private-state-variables

Yay! smaller build size & performance improvements

1) Bundle size

Reducing delivery size is a strong key to improve loading efficiency. In most cases, not every chart types are used in all circumstances. Those non used types codes were delivered regardless of the usage in previous version.

v1 was providing UMD style module exports, and it was difficult for users’ bundlers to tree-shake non-used codes at all.

To improve on this, starting from v2, will provide ESM build. And from now chart types and interaction modules are named exported.

Interaction functionalities are great, but they’re not always used. For the majority of cases with the purpose of visualizing data, interactions such as: data selection, subchart and zoom functionality aren’t required.

This means including all those related codes in your bundle are useless. Just include when they’re used.

import bb, {
  area,
  areaLineRange,
  areaSpline,
  areaSplineRange,
  areaStep,
  bar,
  bubble,
  donut,
  gauge,
  line,
  pie,
  radar,
  scatter,
  spline,
  step,

  // interaction modules
  selection, subchart, zoom
}
bb.generate({
  ...,
  data: {
    // by calling `line()`, will make internally extend 'line' type related functionality.
    // line() will return "line"…