focused

Yet another Optics library for JavaScript, based on the famous lens library from Haskell. Wrapped in a convenient Proxy interface.

Put simply, this library will allow you to:

• Create functional references (Optics), i.e. like pointers to nested parts in data structures (e.g. Object properties, Array elements, Map keys/values, or even fancier parts like a number inside a string ...).
• Apply immutable updates to data structures pointed by those functional references.

Install

yarn add focused

or

npm install --save focused

Tutorial

Lenses, or Optics in general, are an elegant way, from functional programming, to access and update immutable data structures. Simply put, an optic gives us a reference, also called a focus, to a nested part of a data structure. Once we build a focus (using some helper), we can use given functions to access or update, immutably, the embedded value.

In the following tutorial, we'll introduce Optics using focused helpers. The library is meant to be friendly for JavaScript developers who are not used to FP jargon.

We'll use the following object as a test bed

import { lensProxy, set, ... } from "focused";

const state = {
  name: "Luffy",
  level: 4,
  nakama: [
    { name: "Zoro", level: 3 },
    { name: "Sanji", level: 3 },
    { name: "Chopper", level: 2 }
  ]
};

// we'll use this as a convenient way to access deep properties in the state
const _ = lensProxy();

Focusing on a single value

Here is our first example, using the set function:

const newState = set(_.name, "Mugiwara", state);
// => { name: "Mugiwara", ... }

above, set takes 3 arguments:

1. _.name is a Lens which lets us focus on the name property inside the state object
2. The new value which replaces the old one
3. The state to operate on.

It then returns a new state, with the name property replaced with the new value.

over is like set but takes a function instead of a constant value

const newState = over(_.level, x => x * 2, state);
// => { name: "Luffy", level: 8, ... }

As you may have noticed, set is just a shortcut for over(lens, _ => newValue, state).

Besides properties, we can access elements inside an array

set(_.nakama[0].name, "Jimbi", state);

It's important to remember that a Lens focuses exactly on 1 value. no more, no less. In the above example, accessing a non existing property on state (or out of bound index) will throw an error.

If you want the access to silently fail, you can prefix the property name with $.

const newState = over(_.$assistant.$level, x => x * 2, state);
// newState == state

_.$assistant is sometimes called an Affine, which is a focus on at most one value (ie 0 or 1 value).

There is also a view function, which provides a read only access to a Lens

view(_.name, state);
// => Luffy

You're probably wondering, what's the utility of the above function, since the access can be trivially achieved with state.name. That's true, but Lenses allows more advanced accesses that are not as trivial to achieve as the above case, especially when combined with other Optics as we'll see.

Similarly, preview can be used with Affines to safely dereference deeply nested values

preview(_.$assitant.$level, state);
// null

Focusing on multiple values

As we said, Lenses can focus on a single value. To focus on multiple values, we can use the each Optic together with toList function (view can only view a single value).

For example, to gets the names of all Luffy's nakama

toList(_.nakama.$(each).name, state);
// => ["Zoro", "Sanji", "Chopper"]

Note how we wrapped each inside the .$() method of the proxy. .$() lets us insert arbitrary Optics in the access path which will be automatically composed with the other Optics in the chain.

In Optics jargon, each is called a Traversal. It's an optic which can focus on multiple parts inside a data structure. Note that Traversals are not restricted to lists. You can create your own Traversals for any Traversable data structure (eg Maps, trees, linked lists ...).

Of course, Traversals work automatically with update functions like over. For example

over(_.nakama.$(each).name, s => s.toUpperCase(), state);

returns a new state with all nakama names uppercased.

Another Traversal is filtered which can restrict the focus only to parts meeting some criteria. For example

toList(_.nakama.$(filtered(x => x.level > 2)).name, state);
// => ["Zoro", "Sanji"]

retrieves all nakamas names with level above 2. While

over(_.nakama.$(filtered(x => x.level > 2)).name, s => s.toUpperCase(), state);

updates all nakamas names with level above 2.

When the part and the whole matches

Suppose we have the following json

const pkgJson = `{
  "name": "my-package",
  "version": "1.0.0",
  "description": "Simple package",
  "main": "index.html",
  "scripts": {
    "start": "parcel index.html --open",
    "build": "parcel build index.html"
  },
  "dependencies": {
      "mydep": "6.0.0"
  }
}
`;

And we want to focus on the mydep field inside dependencies. With normal JS code, we can call JSON.parse on the json string, modify the field on the created object, then call JSON.stringify on the same object to create the new json string.

It turns out that Optics has got a first class concept for the above operations. When the whole (source JSON) and the part (object created by JSON.parse) matches we call that an Isomorphism (or simply Iso). In the above example we can create an Isomorphism between the JSON string and the corresponding JS object using the iso function

const json = iso(JSON.parse, JSON.stringify);

iso takes 2 functions: one to go from the source to the target, and the other to go back.

Note this is a partial Optic since JSON.parse can fail. We've got another Optic (oh yeah) to account for failure

Ok, so having the json Iso, we can use it with the standard functions, for example

set(_.$(json).dependencies.mydep, "6.1.0", pkgJson);

returns another JSON string with the mydep modified. Abstracting over the parsing/stringifying steps.

The previous example is nice, but it'd be nicer if we can get access to the semver string 6.0.0 as a regular JS object. Let's go a little further and create another Isomorphism for semver like strings

const semver = iso(
  s => {
    const [major, minor, patch] = s.split(".").map(x => +x);
    return { major, minor, patch };
  },
  ({ major, minor, patch }) => [major, minor, patch].join(".")
);

Now we can have a focus directly on the parts of a semver string as numbers. Below

over(_.$(json).dependencies.mydep.$(semver).minor, x => x + 1, jsonObj);

increments the minor directly in the JSON string.

Of course, we abstracted over failures in the semver Iso.

When the match can't always succeed

As I mentioned, the previous case was not a total Isomorphism because JSON strings aren't always parsed to JS objects. So, as you may expect, we need to introduce another fancy name, this time our Optic is called a Prism. Which is an Isomorphism that may fail when going from the source to the target (but which always succeeds when going back).

A simple way to create a Prism is the simplePrism function. It's like iso but you return null when the conversion fails.

const maybeJson = simplePrism(s => {
  try {
    return JSON.parse(s);
  } catch (e) {
    return null;
  }
}, JSON.stringify);

So now, something like

const badJSonObj = "@#" + jsonObj;
set(_.$(maybeJson).dependencies.mydep, "6.1.0", badJSonObj);

will simply return the original JSON string. The conversion of the semver Iso to a Prism is left as an exercise.

Documentation

Using Optics follows a uniform pattern

• First we create an Optic which focuses on some value(s) inside a container
• Then we use an operation to access or modify the value through the created Optic

In the following, all showcased functions are imported from the focused package

Creating Optics

As seen in the tutorial,lensProxy offers a convenient way to create Optics which focus on javascript objects and arrays. lensProxy is essentially a façade API which uses explicit functions behind the scene. In the following examples, we'll see both the proxy and the coresponding explicit functions.

Object properties

As we saw in the tutorial, we use the familiar property access notation to focus on an object property. For example

const _ = lensProxy()
const nameProp = _.name

creates a Lens which focuses on the name property of an object.

Using the explicit style, we can use the the prop function

const nameProp = prop("name")

As said previously, a Lens focuses exactly on one value, it means the value must exist in the target container (in this sense the prop lens is partial). For example, if you use nameProp on an object which doesn't have a name property, it will throw an error.

Array elements

As with object properties, we use the array index notation to focus on an array element at a specific index. For example

const _ = lensProxy()
const firstElem = _[0]

creates a lens that focuses on the first element on an array. The underlying function is index, so we could also write

const firstElem = index(0)

index is also a partial Lens, meaning it will throw if given index is out of the bounds of the target array.

Creating custom lenses

The lens function can be used to create arbitrary Lenses. The function takes 2 parameters

• getter is used to extract the focus value from the target container
• setter is used to update the target container with a new focus value.

In the following example, nameProp is equivalent to the nameProp Lens we saw earlier.

const nameProp