node package manager

update-immutable

update-immutable

Build Status

Description

This is a mostly-compatible re-implementation of react's update function.

update() implements a mini-language that describes modifications to a data-structure consisting of nested objects and arrays. The updates can be applied to a data-structure without modifying it. Instead, a new data-structure is returned that has had the updates applied. The two structures share as much as possible. Only the intermediate structures that needed to be modified are shallow-copied prior to modification. Everything else is preserved and is therefore shared between the two structures.

In react this is useful for implementing an efficient shouldComponentUpdate(), for example by sub-classing React.PureComponent. For more details, see this page on optimizing react performance.

However, this module is independent of react, and is also suitable for passing updates between clients and servers so that a consistent data-structure can be maintained on both ends of a connection without transferring the entire structure on every modification. When used for both react component state updates and server-client communication, systems can be designed where server-side events directly cause modification of react components.

Usage (ES6)

import update from 'update-immutable';

let orig = { a: 1 };
let next = update(orig, { b: { $set: 2 } });

## next: { a: 1, b: 2 }
## orig: { a: 1 }

Usage (ES5)

var update = require("update-immutable").default;

var orig = { a: 1 };
var next = update(orig, { b: { $set: 2 } });

## next: { a: 1, b: 2 }
## orig: { a: 1 }

Command reference

  • $set: Sets a value in an object, replacing the previous value (if any). Example:

      update({}, { a: { $set: 1 } })
      => { a: 1 }
    
  • $unset: Unsets the provided key or keys. Example:

      update({ a: 1, b: 2 }, { $unset: 'a' })
      => { b: 2 }
    
      update({ a: 1, b: 2 }, { $unset: ['a', 'b'] })
      => {}
    
  • $merge: Does a shallow merge, replacing the previous values (if any). Example:

      update({ a: 1, b: 2 }, { $merge: { a: 3, c: 4 } })
      => { a: 3, b: 2, c: 4 }
    

    Note: This is a shallow merge only and will fully replace the values with the new values. For example, you may expect that both b and c keys will exist in the following output:

      update({ a: { b: 1 } }, { $merge: { a: { c: 1 } } })
      => { a: { c: 1 } }
    

    But in this case, the object containing b is fully replaced. There are various ways to solve this, such as using one of the many deep merging modules on npm. Here is an example using deepmerge:

      var orig = { a: { b: 1 } };
      update(orig, { a: { $set: deepmerge(orig.a, { c: 2 }) } })
      => { a: { b: 1, c: 2 } }
    
  • $push: Appends new values to the end of an array. Example:

      update({ a: [1, 2] }, { a: { $push: [3, 4] } })
      => { a: [ 1, 2, 3, 4 ] }
    
  • $unshift: Prepends new values to the beginning of an array. Example:

      update({ a: [1, 2] }, { a: { $unshift: [3, 4] } })
      => { a: [ 3, 4, 1, 2 ] }
    
  • $splice: Calls javascript's splice method on the target array. Accepts an array of arrays, each of which are the arguments to a splice call. Example:

      update({ a: [0, 1, 2] }, { a: { $splice: [ [1, 0, 3] ] } })
      => { a: [ 0, 3, 1, 2 ] }
    

    As well as adding elements, $splice is also useful for removing elements:

      update({ a: [0, 1, 2, 3, 4, 5] }, { a: { $splice: [ [2, 2] ] } })
      => { a: [ 0, 1, 4, 5 ] }
    

Features

The following new features/bugfixes have been implemented:

  • Simple recursive implementation without dependencies

    The original version depends on react.

  • Implements $unset

    The react team refuses to merge this functionality. $unset is important for several use-cases, for example removing an item from a collection so that it will no longer be present when you iterate over that collection. $unset only works for objects, not arrays. Array elements can be deleted with $splice.

  • $unshift doesn't reverse

    The react version of $unshift unshifts each element in a loop, thereby reversing the portion of the list provided in the update. This version fixes that bug and makes it work like perl's unshift.

  • Supports autovivification

    Autovivification allows you to modify a nested data structure even if the nesting data-structures don't yet exist. They will be created so as to satisfy the update. This simplifies many use-cases, for example you don't need to maintain an initial-state skeleton. See below for more details.

Autovivification

In the original update implementation, if you try to set a value in a nested structure where one of the intermediate keys doesn't exist, an error will be thrown:

> update({}, {a: {b: {c: {$set: true}}}})
TypeError: Cannot read property 'b' of undefined

However, in this module it will autovivify the nested structures into existence so as to satisfy the update:

> update({}, {a: {b: {c: {$set: true}}}})
{ a: { b: { c: true } } }

Nested autovivification will only create objects however, because the update language unfortunately doesn't distinguish between object access and array access. Creating a nested array with autovivification is not supported and will create an object instead:

> update({}, {a: {0: {c: {$set: true}}}})
{ a: { '0': { c: true } } }

Note however that autovivifying an array into existence with a push (for example) works fine since it's obvious you meant for that key to contain an array:

> update({}, {a: {b: {c: {$push: [1,2,3]}}}})
{ a: { b: { c: [1, 2, 3] } } }

As of version 1.0.6, this module also autovivifies null into existence just as it does undefined. This can be useful since setting to null is often used instead of deleting an element from a collection.

Preservation of equality

As of version 1.2.0, this module will attempt to preserve reference equality where possible. In other words, if you make an update that doesn't cause the structure to be modified, the original version of the data structure will be returned, not a shallow copy.

For example, none of the following will result in a copy being returned: using $set to modify a primitive value to the same value as it was before, $pushing an empty list, $unsetting a key that isn't present.

Note that for performance reasons it does not do a deep comparison of your modifications, so it will only detect identity updates to primitives. Also, due to a limitation, $splice will always return a shallow copy even if no changes were made (see Todo section below).

Incompatibilities

This module is mostly compatible with the react version except for the following:

  • $unshift behaviour

    As described above, when passing multiple items in a single $unshift update, the order of the items is preserved, unlike react which reverses the list.

Server-side

There is a companion perl module Update::Immutable that implements functionality nearly identical to this module. This lets you process updates in the same way on both the server and the client (provided your server is implemented in perl that is).

If you do plan on performing server-client updates, you should avoid using $apply since functions generally cannot be serialised for transfer over the network. $apply is useful for react-compatibility and/or purely in-browser updates.

See-also

Please add any bug reports or feature requests to the update-immutable repo on github.

As mentioned, this is a re-implementation of react's update function which is now deprecated (but currently still available as an add-on).

There is another re-implementation called immutability-helper. It allows you to define custom commands, although currently it doesn't provide autovivification. This module now supports $unset.

For certain use-cases, immutable.js may be better than using update(), although this does not work for transferring updates between clients and servers (without creating another update protocol on top).

Perl companion module: Update::Immutable

I did a short talk on this module which you can watch on YouTube.

Todo

$splice will always shallow-copy the array, even if the splice operations cause no modifications to the array.

Copyright

(C) 2016-2017 Doug Hoyte

2-clause BSD license