Handsontable 8.3.2: introducing monorepo

Beata Mówka Release Notes / March 16, 2021

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 disableVisualSelection for cells/columns. #5082
  • Fixed wrong paddings for multi-level headers. #5086
  • Fixed problems with the current option of the disableVisualSelection setting. #5869
  • Fixed problems with the header option of the disableVisualSelection setting. #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 updateSettings method in the body of some callbacks would break the table. #7231
  • Fixed an issue where the maxRows and maxCols options interfered with hidden index calculations. #7350
  • Fixed problems with doubled borders being displayed when window was 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 AutoRowSize plugin would break the table when placed in an iframe. #7424
  • Fixed bugs in navigation by HOME and END keys with hidden rows/columns enabled. #7454
  • Fixed a bug with the trimWhitespace option not working properly. #7458
  • Fixed an issue with inconsistent documentation and TypeScript definitions for colWidths and rowHeights options. #7507
  • Fixed the incorrect cellTypes module paths in the exports entry of the package.json file. #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/vue will all be developed in the same repo – handsontable. #7380
  • Added a custom ESLint rule which allows restricting specified modules from loading by import or 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.