Handsontable 8.3.2: Introducing monorepo
Today we’re placing Handsontable versions for JavaScript, Angular, React, and Vue, under one umbrella, in a monorepo. We would like to tell you more about this transition, and why it matters.
Overview
When JavaScript frameworks first entered the field, we immediately started to build wrappers for Handsontable and then placing each of them in its own repository. This worked well until we realized that we could no longer add any more frameworks because each one was taking a bite out of our productivity. We had to change something to be able to work faster and more efficiently.
So we asked ourselves how we could simplify the development process and after several brainstorms, we came to a conclusion that monorepo was a perfect fit for several reasons:
- We are a relatively small team (20+) so it’s critical to standardize and simplify the workflow whenever possible. A single repo makes it easier.
- It’s easier to build, test, and release new versions across all projects when you don’t have to make an extra effort to link them.
- We needed a single place to collaborate, report issues, and suggest improvements.
- It makes it faster to set up the development environment. This is especially important for newcomers.
- It’s easier to coordinate changes across all projects and roll them back if needed.
Naturally, there were some cons too but turned out to be negligible in comparison to all the pros.
Comparison table
We moved several repositories to the monorepo. These repositories are now marked as archived. Nothing has changed in terms of our packages in npm though, so there is no need to adjust your dependency configuration. See the table below for reference.
| Project | Old location | New location | Npm installation |
|---|---|---|---|
| Handsontable for Angular | github.com/handsontable/angular-handsontable | github.com/handsontable/handsontable/tree/master/wrappers/angular | npm install handsontable @handsontable/angular |
| Handsontable for React | github.com/handsontable/react-handsontable | github.com/handsontable/handsontable/tree/master/wrappers/react | npm install handsontable @handsontable/react |
| Handsontable for Vue | github.com/handsontable/vue-handsontable-official | github.com/handsontable/handsontable/tree/master/wrappers/vue | npm install handsontable @handsontable/vue |
Framework wrappers
Together with Handsontable 8.3.2, we have released major versions of Handsontable wrappers:
We unified the licensing terms for all Handsontable products, and now they are all available under either a non-commercial license or a commercial one.
What’s next?
We have two more projects waiting to be incorporated into the monorepo in the nearest future.
First, the new documentation engine, VuePress, which we successfully used in the HyperFormula project. Soon we’re planning to introduce the same, improved experience for all Handsontable users.
Our second project is an environment to help us speed up writing code snippets for demos in the docs and other places. Each code snippet should support JS and frameworks and needs to be thoroughly tested, which takes time. We’re especially excited about this one because, in the long run, it will significantly boost the experience developers have working with our documentation.
Fixes and additions
Besides the monorepo, we have been working hard on fixing issues and improving features. Below is a complete list of changes in version 8.3.2 released on March 16, 2021:
Fixed Issues
- Fixed a bug where it was impossible to enable
disableVisualSelectionfor cells/columns. #5082 - Fixed wrong paddings for multi-level headers. #5086
- Fixed problems with the
currentoption of thedisableVisualSelectionsetting. #5869 - Fixed problems with the
headeroption of thedisableVisualSelectionsetting. #6025 - Fixed a bug where the “double-tap-to-zoom” gesture prevented the editor from opening properly on some mobile devices. #7142
- Fixed a bug where calling the
updateSettingsmethod in the body of some callbacks would break the table. #7231 - Fixed an issue where the
maxRowsandmaxColsoptions interfered with hidden index calculations. #7350 - Fixed problems with doubled borders being displayed when
windowwas a scrollable container. #7356 - Fixed a bug where the value population from an edited cell would result in a console error. #7382
- Fixed a bug where the dropdown cell type would not work on Safari 14+. #7413
- Fixed a bug where the
AutoRowSizeplugin would break the table when placed in an iframe. #7424 - Fixed bugs in navigation by
HOMEandENDkeys with hidden rows/columns enabled. #7454 - Fixed a bug with the
trimWhitespaceoption not working properly. #7458 - Fixed an issue with inconsistent documentation and TypeScript definitions for
colWidthsandrowHeightsoptions. #7507 - Fixed the incorrect
cellTypesmodule paths in theexportsentry of thepackage.jsonfile. #7597 - Vue: Fixed Remote Code Execution vulnerability in the dev dependencies. #7620
Added
- Introduced the monorepo to this repository. From now on,
handsontable,@handsontable/angular,@handsontable/react, and@handsontable/vuewill all be developed in the same repo –handsontable. #7380 - Added a custom ESLint rule which allows restricting specified modules from loading by
importor re-exporting. #7473
Leave a comment below or drop us a message if you have any questions. Follow us on Twitter to keep up with news and updates.