Photo by Dmitry Chernyshov on Unsplash

Inspired by @ngrx/entity

Lately I started my learning Vue.js path. Was working on my household finances app using Vue, Vue-router and Vuex. In app there finance operations and goals collections which I need to manage somehow. It can be a lot of work to manage collections in JavaScript, for example to edit some object in collection, first you need to find index in collection and then assign to this specific index a new object (maybe there’s more elegant way?).

We need to do some work for every collection so I decided to make own entity adapter inspired by @ngrx/entity-adapter.

Library

Package contains methods getInitialState , addOne , addAll , updateOne , removeOne , removeAll , replaceAll , getOne and getAll . Methods names speak for themselves and there is no need to explain what they are doing.

To start use it I made an object of entity adapter in seperate file

and then import it to mutations file for goals module

New library, really?

There is a joke which everybody knows that 1 week = new JavaScript library but I do not really care about that. I built it and deployed to npm just for my own comfort - to be able to grab it anywhere I want to.

Summary

I played around with Test Driven Development — was cool, it helped me several times. In certain moment I had a bad clue about what I wanted to do and failed test helps me to understand that I was trying to solve my problem in bad way.

Played around with webpack for like 30 minutes because I wanted to figured out the best way to build my package (multiple formats for example) but ended up with the easiest one (because it was what I needed) and I could not find the best way to generate multiple formats. Maybe I should look to source files of Angular CLI project. It generates multiple formats for Angular library.

Deploying to npm it is easy. Nothing unusual that there is so much JavaScript libraries out there it is too easy to deploy them.