| [9af201e] | 1 | # deepmerge
|
|---|
| 2 |
|
|---|
| 3 | Merges the enumerable properties of two or more objects deeply.
|
|---|
| 4 |
|
|---|
| 5 | > UMD bundle is 723B minified+gzipped
|
|---|
| 6 |
|
|---|
| 7 | ## Getting Started
|
|---|
| 8 |
|
|---|
| 9 | ### Example Usage
|
|---|
| 10 | <!--js
|
|---|
| 11 | const merge = require('./')
|
|---|
| 12 | -->
|
|---|
| 13 |
|
|---|
| 14 | ```js
|
|---|
| 15 | const x = {
|
|---|
| 16 | foo: { bar: 3 },
|
|---|
| 17 | array: [{
|
|---|
| 18 | does: 'work',
|
|---|
| 19 | too: [ 1, 2, 3 ]
|
|---|
| 20 | }]
|
|---|
| 21 | }
|
|---|
| 22 |
|
|---|
| 23 | const y = {
|
|---|
| 24 | foo: { baz: 4 },
|
|---|
| 25 | quux: 5,
|
|---|
| 26 | array: [{
|
|---|
| 27 | does: 'work',
|
|---|
| 28 | too: [ 4, 5, 6 ]
|
|---|
| 29 | }, {
|
|---|
| 30 | really: 'yes'
|
|---|
| 31 | }]
|
|---|
| 32 | }
|
|---|
| 33 |
|
|---|
| 34 | const output = {
|
|---|
| 35 | foo: {
|
|---|
| 36 | bar: 3,
|
|---|
| 37 | baz: 4
|
|---|
| 38 | },
|
|---|
| 39 | array: [{
|
|---|
| 40 | does: 'work',
|
|---|
| 41 | too: [ 1, 2, 3 ]
|
|---|
| 42 | }, {
|
|---|
| 43 | does: 'work',
|
|---|
| 44 | too: [ 4, 5, 6 ]
|
|---|
| 45 | }, {
|
|---|
| 46 | really: 'yes'
|
|---|
| 47 | }],
|
|---|
| 48 | quux: 5
|
|---|
| 49 | }
|
|---|
| 50 |
|
|---|
| 51 | merge(x, y) // => output
|
|---|
| 52 | ```
|
|---|
| 53 |
|
|---|
| 54 |
|
|---|
| 55 | ### Installation
|
|---|
| 56 |
|
|---|
| 57 | With [npm](http://npmjs.org) do:
|
|---|
| 58 |
|
|---|
| 59 | ```sh
|
|---|
| 60 | npm install deepmerge
|
|---|
| 61 | ```
|
|---|
| 62 |
|
|---|
| 63 | deepmerge can be used directly in the browser without the use of package managers/bundlers as well: [UMD version from unpkg.com](https://unpkg.com/deepmerge/dist/umd.js).
|
|---|
| 64 |
|
|---|
| 65 |
|
|---|
| 66 | ### Include
|
|---|
| 67 |
|
|---|
| 68 | deepmerge exposes a CommonJS entry point:
|
|---|
| 69 |
|
|---|
| 70 | ```
|
|---|
| 71 | const merge = require('deepmerge')
|
|---|
| 72 | ```
|
|---|
| 73 |
|
|---|
| 74 | The ESM entry point was dropped due to a [Webpack bug](https://github.com/webpack/webpack/issues/6584).
|
|---|
| 75 |
|
|---|
| 76 | # API
|
|---|
| 77 |
|
|---|
| 78 |
|
|---|
| 79 | ## `merge(x, y, [options])`
|
|---|
| 80 |
|
|---|
| 81 | Merge two objects `x` and `y` deeply, returning a new merged object with the
|
|---|
| 82 | elements from both `x` and `y`.
|
|---|
| 83 |
|
|---|
| 84 | If an element at the same key is present for both `x` and `y`, the value from
|
|---|
| 85 | `y` will appear in the result.
|
|---|
| 86 |
|
|---|
| 87 | Merging creates a new object, so that neither `x` or `y` is modified.
|
|---|
| 88 |
|
|---|
| 89 | **Note:** By default, arrays are merged by concatenating them.
|
|---|
| 90 |
|
|---|
| 91 | ## `merge.all(arrayOfObjects, [options])`
|
|---|
| 92 |
|
|---|
| 93 | Merges any number of objects into a single result object.
|
|---|
| 94 |
|
|---|
| 95 | ```js
|
|---|
| 96 | const foobar = { foo: { bar: 3 } }
|
|---|
| 97 | const foobaz = { foo: { baz: 4 } }
|
|---|
| 98 | const bar = { bar: 'yay!' }
|
|---|
| 99 |
|
|---|
| 100 | merge.all([ foobar, foobaz, bar ]) // => { foo: { bar: 3, baz: 4 }, bar: 'yay!' }
|
|---|
| 101 | ```
|
|---|
| 102 |
|
|---|
| 103 |
|
|---|
| 104 | ## Options
|
|---|
| 105 |
|
|---|
| 106 | ### `arrayMerge`
|
|---|
| 107 |
|
|---|
| 108 | There are multiple ways to merge two arrays, below are a few examples but you can also create your own custom function.
|
|---|
| 109 |
|
|---|
| 110 | Your `arrayMerge` function will be called with three arguments: a `target` array, the `source` array, and an `options` object with these properties:
|
|---|
| 111 |
|
|---|
| 112 | - `isMergeableObject(value)`
|
|---|
| 113 | - `cloneUnlessOtherwiseSpecified(value, options)`
|
|---|
| 114 |
|
|---|
| 115 | #### `arrayMerge` example: overwrite target array
|
|---|
| 116 |
|
|---|
| 117 | Overwrites the existing array values completely rather than concatenating them:
|
|---|
| 118 |
|
|---|
| 119 | ```js
|
|---|
| 120 | const overwriteMerge = (destinationArray, sourceArray, options) => sourceArray
|
|---|
| 121 |
|
|---|
| 122 | merge(
|
|---|
| 123 | [1, 2, 3],
|
|---|
| 124 | [3, 2, 1],
|
|---|
| 125 | { arrayMerge: overwriteMerge }
|
|---|
| 126 | ) // => [3, 2, 1]
|
|---|
| 127 | ```
|
|---|
| 128 |
|
|---|
| 129 | #### `arrayMerge` example: combine arrays
|
|---|
| 130 |
|
|---|
| 131 | Combines objects at the same index in the two arrays.
|
|---|
| 132 |
|
|---|
| 133 | This was the default array merging algorithm pre-version-2.0.0.
|
|---|
| 134 |
|
|---|
| 135 | ```js
|
|---|
| 136 | const combineMerge = (target, source, options) => {
|
|---|
| 137 | const destination = target.slice()
|
|---|
| 138 |
|
|---|
| 139 | source.forEach((item, index) => {
|
|---|
| 140 | if (typeof destination[index] === 'undefined') {
|
|---|
| 141 | destination[index] = options.cloneUnlessOtherwiseSpecified(item, options)
|
|---|
| 142 | } else if (options.isMergeableObject(item)) {
|
|---|
| 143 | destination[index] = merge(target[index], item, options)
|
|---|
| 144 | } else if (target.indexOf(item) === -1) {
|
|---|
| 145 | destination.push(item)
|
|---|
| 146 | }
|
|---|
| 147 | })
|
|---|
| 148 | return destination
|
|---|
| 149 | }
|
|---|
| 150 |
|
|---|
| 151 | merge(
|
|---|
| 152 | [{ a: true }],
|
|---|
| 153 | [{ b: true }, 'ah yup'],
|
|---|
| 154 | { arrayMerge: combineMerge }
|
|---|
| 155 | ) // => [{ a: true, b: true }, 'ah yup']
|
|---|
| 156 | ```
|
|---|
| 157 |
|
|---|
| 158 | ### `isMergeableObject`
|
|---|
| 159 |
|
|---|
| 160 | By default, deepmerge clones every property from almost every kind of object.
|
|---|
| 161 |
|
|---|
| 162 | You may not want this, if your objects are of special types, and you want to copy the whole object instead of just copying its properties.
|
|---|
| 163 |
|
|---|
| 164 | You can accomplish this by passing in a function for the `isMergeableObject` option.
|
|---|
| 165 |
|
|---|
| 166 | If you only want to clone properties of plain objects, and ignore all "special" kinds of instantiated objects, you probably want to drop in [`is-plain-object`](https://github.com/jonschlinkert/is-plain-object).
|
|---|
| 167 |
|
|---|
| 168 | ```js
|
|---|
| 169 | const { isPlainObject } = require('is-plain-object')
|
|---|
| 170 |
|
|---|
| 171 | function SuperSpecial() {
|
|---|
| 172 | this.special = 'oh yeah man totally'
|
|---|
| 173 | }
|
|---|
| 174 |
|
|---|
| 175 | const instantiatedSpecialObject = new SuperSpecial()
|
|---|
| 176 |
|
|---|
| 177 | const target = {
|
|---|
| 178 | someProperty: {
|
|---|
| 179 | cool: 'oh for sure'
|
|---|
| 180 | }
|
|---|
| 181 | }
|
|---|
| 182 |
|
|---|
| 183 | const source = {
|
|---|
| 184 | someProperty: instantiatedSpecialObject
|
|---|
| 185 | }
|
|---|
| 186 |
|
|---|
| 187 | const defaultOutput = merge(target, source)
|
|---|
| 188 |
|
|---|
| 189 | defaultOutput.someProperty.cool // => 'oh for sure'
|
|---|
| 190 | defaultOutput.someProperty.special // => 'oh yeah man totally'
|
|---|
| 191 | defaultOutput.someProperty instanceof SuperSpecial // => false
|
|---|
| 192 |
|
|---|
| 193 | const customMergeOutput = merge(target, source, {
|
|---|
| 194 | isMergeableObject: isPlainObject
|
|---|
| 195 | })
|
|---|
| 196 |
|
|---|
| 197 | customMergeOutput.someProperty.cool // => undefined
|
|---|
| 198 | customMergeOutput.someProperty.special // => 'oh yeah man totally'
|
|---|
| 199 | customMergeOutput.someProperty instanceof SuperSpecial // => true
|
|---|
| 200 | ```
|
|---|
| 201 |
|
|---|
| 202 | ### `customMerge`
|
|---|
| 203 |
|
|---|
| 204 | Specifies a function which can be used to override the default merge behavior for a property, based on the property name.
|
|---|
| 205 |
|
|---|
| 206 | The `customMerge` function will be passed the key for each property, and should return the function which should be used to merge the values for that property.
|
|---|
| 207 |
|
|---|
| 208 | It may also return undefined, in which case the default merge behaviour will be used.
|
|---|
| 209 |
|
|---|
| 210 | ```js
|
|---|
| 211 | const alex = {
|
|---|
| 212 | name: {
|
|---|
| 213 | first: 'Alex',
|
|---|
| 214 | last: 'Alexson'
|
|---|
| 215 | },
|
|---|
| 216 | pets: ['Cat', 'Parrot']
|
|---|
| 217 | }
|
|---|
| 218 |
|
|---|
| 219 | const tony = {
|
|---|
| 220 | name: {
|
|---|
| 221 | first: 'Tony',
|
|---|
| 222 | last: 'Tonison'
|
|---|
| 223 | },
|
|---|
| 224 | pets: ['Dog']
|
|---|
| 225 | }
|
|---|
| 226 |
|
|---|
| 227 | const mergeNames = (nameA, nameB) => `${nameA.first} and ${nameB.first}`
|
|---|
| 228 |
|
|---|
| 229 | const options = {
|
|---|
| 230 | customMerge: (key) => {
|
|---|
| 231 | if (key === 'name') {
|
|---|
| 232 | return mergeNames
|
|---|
| 233 | }
|
|---|
| 234 | }
|
|---|
| 235 | }
|
|---|
| 236 |
|
|---|
| 237 | const result = merge(alex, tony, options)
|
|---|
| 238 |
|
|---|
| 239 | result.name // => 'Alex and Tony'
|
|---|
| 240 | result.pets // => ['Cat', 'Parrot', 'Dog']
|
|---|
| 241 | ```
|
|---|
| 242 |
|
|---|
| 243 |
|
|---|
| 244 | ### `clone`
|
|---|
| 245 |
|
|---|
| 246 | *Deprecated.*
|
|---|
| 247 |
|
|---|
| 248 | Defaults to `true`.
|
|---|
| 249 |
|
|---|
| 250 | If `clone` is `false` then child objects will be copied directly instead of being cloned. This was the default behavior before version 2.x.
|
|---|
| 251 |
|
|---|
| 252 |
|
|---|
| 253 | # Testing
|
|---|
| 254 |
|
|---|
| 255 | With [npm](http://npmjs.org) do:
|
|---|
| 256 |
|
|---|
| 257 | ```sh
|
|---|
| 258 | npm test
|
|---|
| 259 | ```
|
|---|
| 260 |
|
|---|
| 261 |
|
|---|
| 262 | # License
|
|---|
| 263 |
|
|---|
| 264 | MIT
|
|---|