4.1.2 • Published 3 years ago

object-path-immutable v4.1.2

Weekly downloads
53,110
License
MIT
Repository
github
Last release
3 years ago

build coverage downloads version deps devdeps

object-path-immutable

Tiny JS library to modify deep object properties without modifying the original object (immutability). Works great with React (especially when using setState()) and Redux (inside a reducer).

This can be seen as a simpler and more intuitive alternative to the React Immutability Helpers and Immutable.js.

Changelog

View Changelog

Install

npm install object-path-immutable --save

Quick usage

The following, sets a property without modifying the original object. It will minimize the number of clones down the line. The resulting object is just a plain JS object literal, so be warned that it will not be protected against property mutations (like Immutable.js)

const obj = {
  a: {
    b: 'c',
    c: ['d', 'f']
  }
}

const newObj = immutable.set(obj, 'a.b', 'f')
// {
//   a: {
//     b: 'f',
//     c: ['d', 'f']
//   }
// }

// obj !== newObj
// obj.a !== newObj.a
// obj.a.b !== newObj.a.b

// However:
// obj.a.c === newObj.a.c

Wrap mode

You can also chain the api's and call value() at the end to retrieve the resulting object.

const newObj = immutable.wrap(obj).set('a.b', 'f').del('a.c.0').value()

API

// Premises

const obj = {
  a: {
    b: 'c',
    c: ['d', 'f']
  }
}

import * as immutable from 'object-path-immutable'

set (initialObject, path, value)

Changes an object property.

  • Path can be either a string or an array.
const newObj1 = immutable.set(obj, 'a.b', 'f')
const newObj2 = immutable.set(obj, ['a', 'b'], 'f')

// {
//   a: {
//     b: 'f',
//     c: ['d', 'f']
//   }
// }

// Note that if the path is specified as a string, numbers are automatically interpreted as array indexes.

const newObj = immutable.set(obj, 'a.c.1', 'fooo')
// {
//   a: {
//     b: 'f',
//     c: ['d', 'fooo']
//   }
// }

update (initialObject, path, updater)

Updates an object property.

const obj = {
  a: {
    b: 1
  }
}

const newObj = immutable.update(obj, ['a', 'b'], v => v + 1)

// {
//   a: {
//     b: 2,
//   }
// }

push (initialObject, path, value)

Push into a deep array (it will create intermediate objects/arrays if necessary).

const newObj = immutable.push(obj, 'a.d', 'f')
// {
//   a: {
//     b: 'f',
//     c: ['d', 'f'],
//     d: ['f']
//   }
// }

del (initialObject, path)

Deletes a property.

const newObj = immutable.del(obj, 'a.c')
// {
//   a: {
//     b: 'f'
//   }
// }

Can also delete a deep array item using splice

const newObj = immutable.del(obj, 'a.c.0')
// {
//   a: {
//     b: 'f',
//     c: ['f']
//   }
// }

assign (initialObject, path, payload)

Shallow copy properties.

const newObj = immutable.assign(obj, 'a', { b: 'f', g: 'h' })
// {
//   a: {
//     b: 'f',
//     c: ['d, 'f'],
//     g: 'h'
//   }
// }

insert (initialObject, path, payload, position)

Insert property at the specific array index.

const newObj = immutable.insert(obj, 'a.c', 'k', 1)
// var obj = {
//   a: {
//     b: 'c',
//     c: ['d, 'k' 'f'],
//   }
// }

merge (initialObject, path, value)

Deep merge properties.

const newObj = immutable.merge(obj, 'a.c', {b: 'd'})

Getters (not available in wrap mode)

get (object, path, defaultValue)

Retrieve a deep object property. Imported from object-path for convenience.

Equivalent library with side effects

object-path

@xhw/clixhw-cli@kblue/redux-scopestorybook-addons-playwrightreact-path-storecopycat-ui@thinkdeep/deep-graphql-binding@dacio/graphql-bindingkymove-beneficiaries-front@infinitebrahmanuniverse/nolb-object-@everything-registry/sub-chunk-2365observable-redux-json-apimira-elementspin-uiprisma-lib@devnepal/use-form@devnepal/use-validationasync-geneticbillogram-foundation@cenk1cenk2/boilerplate-oclif@cenk1cenk2/oclif-common@digigov/storybook-addon-playwright@cordelta/react-formsboiler-ui@cylon3035/graphql-binding@danderson00/react-forms@foxpage/foxpage-component-editor-widgets@bernatfortet/redux-entities@anthonyjdella/customized-resume-cli@billogram/react@billogram/foundation-formardux@c0b41/redux-beesactions-adminactions-client-inputsyaflametrationeappachecloudflare-dynamic-dns2reactatorreact-uirendererreact-redux-local-formreact-redux-form-providerreact-rocketjumpre-operatorsraydiant-elementsreact-freeformrasa-nlu-editorrasa-nlu-trainerrasa-nlu-trainer-with-typoresumed-cliresume-cliresume-cli-devredux-controllersredux-chunkredux-beesredux-ascoredux-frameredux-json-apiredux-json-api-omitredux-json-api-without-credentialsredux-path-storeredux-rocketjumpreact-mapfilterton-loggerrveshipfinex-kyc-formstest-i3-package2theme-providersqlite-objectsstyle-transformreact-redux-modularizedreact-signy-form-component-test-1react-signy-form-component-test-2react-smanstorybook-addon-playwright@zohodesk/platformestveniam@inveniem/redux-beesgraphql-bindinggraphql-binding-personalframework2bfractal-component@luctc/template-builderfintalk-loggerflexformfinal-chartflamingo-carotene-state-manager@matt-dunn/state-mutate-with-statusform-providerflexschemagatsby-graphql-binding@mwater/form-designer@mwater/react-libraryibis@retailmenot/redux-mount-store@react-last-field/field@jacked/core@jevakallio/graphql-binding@ra_wm/carsalon-constructor
4.1.2

3 years ago

4.1.1

4 years ago

4.1.0

4 years ago

4.0.2

5 years ago

4.0.1

5 years ago

4.0.0

5 years ago

3.1.1

5 years ago

3.1.0

5 years ago

3.0.2

5 years ago

3.0.0

6 years ago

2.0.0

6 years ago

1.0.3

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago

0.5.3

6 years ago

0.5.2

7 years ago

0.5.1

7 years ago

0.5.0

8 years ago

0.4.0

8 years ago

0.3.0

8 years ago

0.2.0

8 years ago

0.1.0

8 years ago