Zip List

A super simple TypeScript implementation of a basic zip list from the "Making Impossible States Impossible" talk at Elm Conf by Richard Feldman. You can read more about this in my blog post on Making Impossible States Impossible in React.

Used to model a list of data where one item is active. The underlying data structure is:

{ previous: [1], current: 2, next: [3] }

This module provides a nice wrapper around that data structure with a nice API.

Install

npm install @jackfranklin/zip-list
yarn add @jackfranklin/zip-list

Construct a zip list using the static fromArray method:

import ZipList from '@jackfranklin/zip-list';

const zip = ZipList.fromArray([1, 2, 3]);

This will set the first item (1) as active.

If you're using TypeScript, you can pass the type through as a generic to fromArray:

interface MyObj {
  name: string;
}

const zip = ZipList.fromArray<MyObj>([{ name: 'alice' }, { name: 'bob' }]);

Fetch and check if an item is active:

zip.active() === 1;
zip.isActive(2) === false;

Get the data as an array (useful for rendering):

zip.asArray() === [1, 2, 3];

And update the active value. This never mutates but returns a new zip:

const newZip = zip.setActive(2);