Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including immutability-helper-extensions with all npm packages installed. Try it out:

require("immutability-helper/package.json"); // immutability-helper is a peer dependency. var immutabilityHelperExtensions = require("immutability-helper-extensions")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

immutability-helper-extensions v1.0.2

Extensions for immutability-helper

This module is an extension of immutability-helper.

Installation

With yarn:

yarn add immutability-helper immutability-helper-extensions

With npm:

npm i --save immutability-helper immutability-helper-extensions

Add an extension

To import an extension, you just have to import it:

const update = require("immutability-helper");
require("immutability-helper-extensions/find");

// $find is loaded in the rest of the codebase

And if you want to import everything:

const update = require("immutability-helper");
require("immutability-helper-extensions");

List of extensions

  • $find: find every element of an array that matches the selection and update it
  • $delete: remove every elements of an array that matches the selection
  • $insertAfter: find every element of an array that matches the selection and add after them a new element
  • $insertBefore: find every element of an array that matches the selection and add before them a new element
  • $deleteAfter: find every element of an array that matches the selection and remove the firsts elements after them
  • $deleteBefore: find every element of an array that matches the selection and remove the firsts elements before them

Selectors

When you want to select an element in any of those functions, under the hood lodash's iteratee is used.

const users = [{ user: "barney", age: 36, active: true }, { user: "fred", age: 40, active: false }];

// Any function
users.filter(_.iteratee(u => u.active));
// => [{ 'user': 'barney', 'age': 36, 'active': true }]

// The `_.matches` iteratee shorthand.
users.filter(_.iteratee({ user: "barney", active: true }));
// => [{ 'user': 'barney', 'age': 36, 'active': true }]

// The `_.matchesProperty` iteratee shorthand.
users.filter(_.iteratee(["user", "fred"]));
// => [{ 'user': 'fred', 'age': 40 }]

// The `_.property` iteratee shorthand.
users.map(_.iteratee("user"));
// => ['barney', 'fred']

$find

const state = {
  users: [
    { user: "barney", age: 36, active: true },
    { user: "fred", age: 40, active: false },
    { user: "pebbles", age: 1, active: true }
  ]
};

const updatedState = update(state, {
  users: {
    // $find: [selection, mutation]
    $find: [{ user: "barney" }, { age: { $set: 35 } }]
  }
});

/*
{
  users: [
    { user: "barney", age: 35, active: true },
    { user: "fred", age: 40, active: false },
    { user: "pebbles", age: 1, active: true }
  ]
}
*/

$delete

const state = {
  users: [
    { user: "barney", age: 36, active: true },
    { user: "fred", age: 40, active: false },
    { user: "pebbles", age: 1, active: true }
  ]
};

const updatedState = update(state, {
  users: {
    // $delete: selection
    $delete: { user: "barney" }
  }
});

/*
{
  users: [
    { user: "fred", age: 40, active: false },
    { user: "pebbles", age: 1, active: true }
  ]
}
*/

$insertAfter

const state = {
  users: [
    { user: "barney", age: 36, active: true },
    { user: "fred", age: 40, active: false },
    { user: "pebbles", age: 1, active: true }
  ]
};

const updateState = update(state, {
  users: {
    // $insertAfter: [selection, element]
    $insertAfter: [{ active: true }, { user: "rodrigo", age: 40, active: false }]
  }
});

/*
{
  users: [
    { user: "barney", age: 36, active: true },
    { user: "rodrigo", age: 40, active: false },
    { user: "fred", age: 40, active: false },
    { user: "pebbles", age: 1, active: true },
    { user: "rodrigo", age: 40, active: false }
  ]
}
*/

$insertBefore

const state = {
  users: [
    { user: "barney", age: 36, active: true },
    { user: "fred", age: 40, active: false },
    { user: "pebbles", age: 1, active: true }
  ]
};

const updateState = update(state, {
  users: {
    // $insertBefore: [selection, element]
    $insertBefore: [{ active: true }, { user: "rodrigo", age: 40, active: false }]
  }
});

/*
{
  users: [
    { user: "rodrigo", age: 40, active: false },
    { user: "barney", age: 36, active: true },
    { user: "fred", age: 40, active: false },
    { user: "rodrigo", age: 40, active: false },
    { user: "pebbles", age: 1, active: true }
  ]
}
*/

$deleteAfter

const state = {
  users: [
    { user: "barney", age: 36, active: true },
    { user: "rodrigo", age: 48, active: false },
    { user: "fred", age: 40, active: false },
    { user: "pebbles", age: 1, active: true },
    { user: "rodrigo", age: 48, active: false }
  ]
};

const updatedState = update(state, {
  users: {
    // $deleteAfter: selection
    $deleteAfter: { active: true }
  }
});

/*
{
  users: [
    { user: "barney", age: 36, active: true },
    { user: "fred", age: 40, active: false },
    { user: "pebbles", age: 1, active: true }
  ]
}
*/

$deleteBefore

const state = {
  users: [
    { user: "rodrigo", age: 48, active: false },
    { user: "barney", age: 36, active: true },
    { user: "fred", age: 40, active: false },
    { user: "rodrigo", age: 48, active: false },
    { user: "pebbles", age: 1, active: true }
  ]
};

const updatedState = update(state, {
  users: {
    // $deleteBefore: selection
    $deleteBefore: { active: true }
  }
});

/*
{
  users: [
    { user: "barney", age: 36, active: true },
    { user: "fred", age: 40, active: false },
    { user: "pebbles", age: 1, active: true }
  ]
}
*/
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free