Modelberry

NPM7 and @npmcli/arborist

@npmcli/arborist is a powerful library that handles the new npm 7 workspaces. This blog is about a simple make tool that uses the library.

Workspaces

Within a code repository, workspaces are a way of separating NodeJs projects.

In 2017 the Lerna project provided a clear monorepo workflow for Npm and Yarn. Shortly after the release of Lerna v1.0, Yarn introduced 'workspaces' and four years later also Npm added the 'workspaces' feature.

Arborist

Npm v7 under the hood uses @npmcli/arborist to handle the workspaces. It is a powerful library that can be used independently of npm.

Jmmake

Over the years the Lerna project grew and gained many options. These options were required to handle all the different use cases.

Most of our projects however, required only a subset of what Lerna has to offer. This resulted in a little custom build tool named 'jmmake'.

Versioning

Jmmake uses a very specific versioning scheme. Bottom line is that the root package version is always leading when bumping the version.

Jmmake version management by maintaining a root package version.

Build, publish and release

Besides managing the version, the tool allows for:

  • running npm run build for each package

  • publish the packages to a repository

  • create a Github release

Roll you own

The tool is not meant to be a generic solution for everyone. Lerna already is. The project shows how easy it is to create your own build tool that does exactly what you want. The Arborist package does the heavy lifting.

When you're interested in the source, the list-command.unit.test.ts is a good place to start. The code base has a few simple commands defined that call reusable library functions.

With the library functions as a base, rolling your own is simple!


NPM7 and @npmcli/arborist

@npmcli/arborist is a powerful library that handles the new npm 7 workspaces. This blog is about a simple make tool that uses the library.

Comparing React app, Nextjs and Gatsby

A new React project starts with a React toolchain. Main tools in the chains are SSR, React server components and GraphQL.

Versioning strategy for npm modules

It is important to be able to bump the version of a npm package without side effects.

React component themes and CSS variables

Creating React components with flexible themes by using CSS variables.

Content modeling with variants

The efficiency of a variant field in a content model.

Green oil

Documentation

Documenting a software project is challenging. Here's a few simple guidelines that help a team writing clear documentation.

Dark orange bubbles

Javascript history

In 1986 David Ungar and Randall B. Smith developed Self at Xerox PARC. Inspired by Java, Scheme and Self Brendan Eich created Javascript in 1995.

Orange yellow oil

On Javascript transpilers, bundlers and modules

There's Javascript transpilers, modules, bundles and bundlers. This is a brief overview of all of these.

Blue waves

Agile Scrum

The Agile Scrum framework is flexible enough to be used in many different ways. Here's one way of working.

Blue water bubbles

Contentful, Netlify and Gatsby four years later

What did we learn from using Contentful for four years?

Orange oil

Typescript interface for React UI components

How to define an interface for React UI components that prevents breaking changes.

Wheelroom hero image

What happened to Wheelroom?

Founded in 2018. Started to fly in 2020 and abandoned in 2021. What happened?

Orange green oil

Naming React components

What's in a name? A clear naming strategy helps developers communicate. Most devs rather spend time writing component code than wasting time on a good component name.