3 awesome libraries I started using in 2023

TL;DR

Just want the hot tips, and no blabbering? Here's the summary:

• eslint-plugin-boundaries: Eslint plugin for keeping large code bases organized and promoting module encapsulation.
• ts-sinon: Easily create stubs for all types of objects in your TypeScript project.
• Preact: 3kb alternative to React

Awesome software I started using in 2023

One of the things I love about starting new projects, or joining a new team, is that I get to learn new technologies. In 2023 I joined a new company, and started a new open source project. This gave me two chances of learning new stacks and new tools. Without further ado, here are 3 tools that have transformed the way I write code in the last year:

eslint-plugin-boundaries

I love organizing my frontend code as monorepos. This helps me define different packages of modules, and define how they relate to one another. It's a great pattern for scaling. One problem that all monorepos need to solve, is defining rules for how packages are allowed to depend on one another. This is where eslint-plugin-boundaries can be a huge help. With this plugin I can define packages as such in my eslint-config:

{
  "settings": {
    "boundaries/elements": [
      {
        "type": "helpers",
        "pattern": "helpers/*"
      },
      {
        "type": "components",
        "pattern": "components/*"
      },
      {
        "type": "modules",
        "pattern": "modules/*"
      }
    ]
  }
}

And then I can enforce rules for how they are allowed to depend on one another like this:

{
  "rules": {
    "boundaries/element-types": [2, {
      "default": "disallow",
      "rules": [
        {
          "from": "components",
          "allow": ["helpers"]
        },
        {
          "from": "modules",
          "allow": ["helpers"]
        }
      ]
    }]
  }
}

In the example above, all dependencies between packages is disabled by default. Then I allow components and modules to depend on the helpers package.

ts-sinon

My unit tests used to be way more bloated and unreadable than they are now. To some extent, ts-sinon helped me reduce this. Though this library is far from new, and not very famous, I love it! Given a TypeScript interface as such:

interface Product {
  price: number
  sale: boolean
  title: string
  id: string
}

I used to create mock objects in my tests such as:

const mockProduct = {
  price: 10,
  sale: false,
  title: 'Engine Wroom x100',
  id: 'asdfghjkl'
}

With ts-sinon, I instead do this:

import { stubInterface } from 'ts-sinon';

const product = stubInterface<Product>()

If I then need to set a property to a certain value, I just override that one property of the stub. For larger objects, this saves me from a great many lines of redundant test code.

Preact

Most importantly, I last year started working with Preact. Basically, the objective of this library is to offer the same APIs as React, but in 3kb of minified code! Isn't that great?

I had come across the name Preact many times over the last couple of years, but never checked it out. Now, I'm a big fan. For any project where a heavy JavaScript-framework is unnecessary, but I still want a library to perform most of the heavy lifting for me, I would now reach for Preact. No doubt.

Preact also offers it's own solution for state management called signals. Coupled with the Context API, signals can help you manage global state, similar to if you were working in a regular React application.

Lastly

If this content is helpful to you, consider checking out my profile on X, where I'm blogging about building an open source calendar: https://github.com/schedule-x/schedule-x