Blog

News from the bpmn.io project

Hello ES2018, Hello Modern JavaScript

Published by Maciej Barelkowski on Tuesday, 20 September 2022.

bpmn-js10.0.0 diagram-js9.0.0 dmn-js13.0.0

We are happy to announce the latest releases of our modeling toolkits. These new major versions incorporate a single change: We ship them with modern JavaScript syntax, namely ES2018, and browser features.

The releases introduce modern language constructs to the codebase, i.e., async/await, ES6-style classes, and rest/spread operator. The target runtime of the libraries is ES2018 from now on, and the bundled output will use ES2018 syntax and features. Furthermore, we stop shipping shims/polyfills to support long-dead browsers (bye-bye Internet Explorer!).

For library users, this means smaller bundles and performance improves where modern language features are no longer shimmed/polyfilled. For us and contributors, this means a productivity boost. We may now use modern language features without transpilation. We can now debug the real thing in case of an error, not a source-mapped representation.

Migration

You don't have to do anything to prepare for the new versions unless you require support for dead browsers such as Internet Explorer. Also, no additional steps are required, if you already transpile your code using tools such as Babel.

Otherwise, you need to setup a transpilation step in your bundler pipeline. A common way to do this is to use Babel, for example, via a Babel plugin in your rollup configuration:

// rollup.config.js
import resolve from '@rollup/plugin-node-resolve';
import babel from '@rollup/plugin-babel';

export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'cjs'
  },
  plugins: [resolve(), babel({ babelHelpers: 'bundled' })]
};

Check out the complete rollup guide on using Babel. If your bundler of choice is webpack, check out our bundling example.

Wrapping up

Did we miss anything? Did you spot a bug, or would you like to suggest an improvement?

Reach out to us via our forums, toot us on Mastodon or file any issue you found in the respective issue trackers for bpmn-js, dmn-js, or diagram-js.

Are you passionate about JavaScript, modeling, and the web?
Join Camunda and build modeling tools people heart.