Scroll to top
© 2018 - Dylan Vorster - I build things that make things.

STORM React Diagrams v4.0.0


dylanvorster - 2018-01-18 - 0 comments

STORM React Diagrams (Repo)

Happy new year everyone! This year we are kicking off the first release of the library with a major version bump: version 4.0.0! I’m super excited about this release because not only are there a few cool features that were provided by the community, but there was also a major overhaul of the internals.

Events rewrite

The first major change is that the events system is now much more robust and consistent. We changed the event callback to now only ever accept a single event parameter. The idea is to rather add more fields to this event object, rather than to keep stacking on new params as we decide to add new functionality. Furthermore, because the event parameter extends the Event object, it means that all events get some cool shared functionality such as a UUID as well as a common field for the entity that the event originates from. We also now have methods on the object (and plan to add a few more) that can can and will eventually control the lifecycle of the event.

The idea is to have the event object allow the event to debounce, prevent further propagation and allow the event to be cancel or rejected outright. Such functionality would eventually allow us to prevent actions from happening programmatically instead of having props to control them. Such an example would be the points limit on a link. Currently the only way to control the number of points on a link, is via prop, but in the future we will soon be able to intercept the point adding event, and cancel it outright on a case-by-case basis.

Factory Overhaul

We also made a large push to try and lower the barrier of entry by both simplifying the concepts of the factories, and also by trying to provide a cleaner new-developer experience. The solution to this problem involved getting rid of the idea of a WidgetFactory, and instead using a ModelFactory that is responsible for the complete lifecycle of that model. Now we use a single NodeFactory to both get new instances, provide the React view and in the future, perhaps control even more aspects of the model. We also unified the ‘type’ concept so that we no longer use the un-mangled class-names as the serial identifier, but instead use a string identifier that you have to provide. This results in a less brittle approach that results in less obfuscation issues. Furthermore, we have some nice helper methods for registering the default factories and working with factories in general.

Internal Refactor

Apart from some API breaking changes, we also did a lot of house cleaning. For starters, the models which were always in the CommonModels file, were split and broken up into their own models. Classes were also moved around and packaged in a more logical and concise manner, hopefully making it easier for the greater community to help contribute and understanding the code base which is growing at really awesome rate.

The demos were also given some love and attention, firstly by renaming all the folders correctly, so the correct demo can be found just by looking at the source, and furthermore by physically improving storybook with a custom add-on that now displays the main code of the demo side-by-side. While STORM React Diagrams still doesn’t have granular documentation, it does at the very least have very comprehensive stand-alone demos that now show the library off in a much better fashion. We also categorised the demos better and provided a good scaffold to contribute demos/docs and guides in the demo system itself.

Hopefully this will make it much easier to contribute demos and docs going forward

Contributor Guidelines

As the project started growing in size, I myself learnt a heck of a lot about how to (and how not to) run an open-source project. Over the years I have seen how challenging a project like this can be and how overwhelmingly valuable code review can be. I have therefore instated a couple of PR templates, guidelines and checklists and have also tried to clean and organise the issues on the issue tracker more thoroughly. Even though I don’t always have the time to respond to every issue and comment, I feel that the community using this library  has done an incredible job of discussing the architecture to new-comers and responding super quick almost every time. Im looking forward to the all the memes :3 (see PR template)

Other standard changes

As per usual, I updated the node packages, did general house cleaning and merged in a number of PR’s mostly contributed by the community that fixed a number of bugs and that added a number of small wins here and there.

Final notes

I know that when libraries push major versions (that beep continuously and break everything) that it can be hard and frustrating to upgrade, but I hope that in light of where this library is heading, that you will continue to support me in this project and keep on providing awesome PR’s that honestly blow my mind every time.

Im also looking for some champions (there are already a few of you) that I would like to formally invite onto the project so that we can contribute a lot faster and manage the project in a more decentralised manner, if you are interested in such open-source work, then hit me up for a chat and Ill see what I can do (I have some free Jetbrains licenses too 😉 (shout out to them btw, for being super awesome) )

I can’t wait to see what you all end up building.

Till next time o7

Related posts