At Railslove we are writing more an more applications that are JavaScript only, mostly React for web applications or React Native for mobile apps. Pretty much all of those apps need to communicate with an API at some point to obtain data.In a lot of these cases, we have been using the fetch API and we noticed that we wrote the same wrappers around the API for each new project. This was cumbersome and error prone, so it seemed convenient to just move that code into a package so it could be reused throughout our various projects.
This is how Snuffles was born. It did not do much in the beginning, just the things we needed in our projects. Over time, a lot of new features were introduced and Snuffles grew in functionality. We are currently in the process of identifying what exactly we want from Snuffles and rewriting the code accordingly.
Since I was in between projects at the time we identified it could be helpful to
have a package for all our fetch needs, I had the chance to be
developing the first release of Snuffles.
I had used a lot of npm packages before of course, but I never actually wrote
one. This was a really interesting process for me and I learned a lot along the
way. This article goes into detail on some of the things that I learned and
problems I encountered.
Also, a lot of the things mentioned here I only know because of
Timo.
Create-React-Library
It turned out that writing the actual library code was not the biggest challenge
I was facing since the gist of the code was already present in some of our
projects and just needed to be adapted. The biggest challange was taking care of
all the things that had to happen in order for the package to be shippable.
For exmaple things like the rollup and transpiling the code using babel.
This is usually something I don't want to configure by hand, as it can be pretty
cumbersome and at times also cost you a night or two. Luckily, there is
create-react-library.
Just like the awesome create-react-app, it gets you up and running for
development within minutes, with a decent default configuration, but for
libraries instead of apps.
At first, the name seemed a little strange to me, since Snuffles is not a React
library per se, but could be used in any JavaScript project. However, it turns
out that the package is not tightly coupled with React. I removed some files and
folders that I did not see as necessary (like the /examples folder) but was
able to continue benefiting form all the configuration and start developing
right away.
Local development & linking
Since the code from Snuffles was similar to something we used in a recent project I was working on, it was convenient to just remove the code from the project and use it in the package, then use the package in the project to see if something breaks. Of course, Snuffles has a test suite on its own, but having it implemented in a real project from the beginning was a nice addition and allowed covering things like testing different browsers that are not trivial to set up in a test suite.
However, linking packages locally can be a bit
tricky and
this was the case for me as well. Now, I don't recall what the exact problem
was, but I think it was related to having the project managed with yarn and
the package with npm. While I'm not certain about the causes, I'm very certain
about the solution I was using: yalc.
Yalc creates a local repository for you and allows you to publish your work in progress packages to this repository, as well as including them from there in your projects for testing. This made the workflow pretty seamless.
Publishing
To be honest, publishing scared me a little. Of course, publishing is always a
little scary because you put out your work in the world, just as publishing this
article will be a little scary, but that was not it. It was rather the process
of publishing. There are commands like prepublish, prepare and postpack
and of course at some point you also have to take care of the versioning. This
whole process felt overwhelming to me. But there is a package for that!
np makes publishing ridiculously easy. You
literally type one command, np, and then just follow the brief wizard. It does
all the rollup and packaging for you, asks you what kind of release this is
(minor, major, ...) and adapts the version for you. It even supports 2FA before
publishing.
All in all I had a lot of fun while writing this package and learned a lot along the way. After using so many packages over the year, it feels good to be able to finally have given something back to the community (even though Snuffles is not heavily used; we are somewhere between 50 and 100 installs per week most weeks). In the future, I definitely want to keep publishing smaller packages, even if it is just for myself. It's (almost) never wrong to ship something!