Usage of bpmn-js with Typescript

Hi.
I’m reading the documentation of the bpmn-js project, checking the source code and I’m trying to understand the library because I need to use it in an Angular project.
Apart from the difficulties of bundling the library with my app (which I’ll probably leave for later on, since I’m going to use the pre-packaged version for now), I’m wondering if there are any type definitions to enable intellisense in Typescript.
If not, I’d like to know if I can find anywhere some kind of API documentation for the classes of the 3 libraries (bpmn, diagram and moddle), so even thought I can’t have intellisense I can still know which methods are available and what parameters they need, while programming.
The examples are cool but an API documentation is fundamental to any good library…

Thanks in advance,

Andrea Bertoldo

2 Likes

What would you like to achieve? What do you miss from our examples?

I would like to understand the library in order to be able to:

  • wrap it in an Angular component (should be easy)
  • bundle it inside my angular app (should be harder but doable; I don’t have much experience of pure webpack, I’ve used mostly Angular CLI which hides the webpack stuff for us)
  • attach metadata and customize tasks, logic and other objects of the palette (for example, we need to attach metadata to a generic Task to make it compatible with our business entities).
    I’ve seen there are a lot of examples, well written highly specific to better explain the single functionality they demonstrate, but it’s all plain Javascript. I’ve been writing TypeScript for years now and the help from the type system is invaluable. Just by typing bpmnjs. I’d love to see all the methods the class exposes, which parameters they accept and doing so I’d learn the library way more quickly than just studying examples that only teach me what they’re written to.
    Don’t you agree? By the way aren’t you ever going to port the project to TypeScript?! Just saying out of curiosity, I’m not asking of course…
1 Like

…but it’s all plain Javascript. I’ve been writing TypeScript for years now and the help from the type system is invaluable.

I agree. The nature (pluggability/extensibility) of our toolkits and mechanisms being used (dependency injection by name) will only get you so far though.

JavaScript is not hard to understand either. You just figure out more things during run-time, i.e. via debugging (F12 or something in your favorite web browser). I suggest you to try it out!

By the way aren’t you ever going to port the project to TypeScript?!

Yes, some day, maybe we migrate to TypeScript or some other typed JS variant that provides better editor tooling.

So long answer, short:

  • We don’t offer TypeScript type definitions for the majority of our libraries, including the modeling toolkits at the moment.
  • Some libraries (tiny-svg, min-dom) include type definitions, contributed by the community.

Contribute a type definition if you’d like things to improve.

JavaScript is not hard to understand either. You just figure out more things during run-time, i.e. via debugging (F12 or something in your favorite web browser). I suggest you to try it out!

I have tried it out before passing to TypeScript :slight_smile:
Thanks for now, maybe I’ll write typings down as a mean of learning the library… if I have time, this is of course a job project so I might not have time to do it.

1 Like

@Etchelon, did you end up creating some typings? Would it be possible to take a look and maybe contribute some?

1 Like

Hello.
No I haven’t used typescript for the bpmn extensions that I’m writing. I’m using pure JavaScript since the ts compiler (and angular’s) don’t complain. For the moment it’s good enough because I’m writing small extensions to the property panel. Of course with tons of runtime errors… but it still costs less time than if I wrote definition files for the bpmn project :sweat_smile: