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 thedisableVisualSelection
setting. #5869 - Fixed problems with the
header
option of thedisableVisualSelection
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
andmaxCols
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
andEND
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
androwHeights
options. #7507 - Fixed the incorrect
cellTypes
module paths in theexports
entry of thepackage.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.