3 awesome libraries I started using in 2023
Published: 2024-01-08 17:14:09

## TL;DR

Just want the hot tips, and no blabbering? Here's the summary:
- [eslint-plugin-boundaries](https://github.com/javierbrea/eslint-plugin-boundaries): Eslint plugin for keeping large code bases organized and promoting module encapsulation.
- [ts-sinon](https://github.com/ttarnowski/ts-sinon): Easily create stubs for all types of objects in your TypeScript project.
- [Preact](https://preactjs.com/): 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](https://github.com/javierbrea/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:

```js
{
  "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:

```js
{
  "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](https://github.com/ttarnowski/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:

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

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

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

With ts-sinon, I instead do this:

```ts
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](https://preactjs.com/)

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](https://preactjs.com/guide/v10/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](https://twitter.com/TomOesterlund), where I'm blogging about building an open source calendar: https://github.com/schedule-x/schedule-x