v2.8.5

Replace Object.assign with deepmerge

CHANGELOG.md

@@ -1,5 +1,91 @@
 # Change Log
 
+## [v2.8.4](https://github.com/apertureless/vue-chartjs/tree/v2.8.4) (2017-09-08)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.8.3...v2.8.4)
+
+**Closed issues:**
+
+- Regression in 2.8.3 [\#190](https://github.com/apertureless/vue-chartjs/issues/190)
+- Why default Chart.js styles are overridden? [\#189](https://github.com/apertureless/vue-chartjs/issues/189)
+- Legend or other options not working in reactiveProps [\#188](https://github.com/apertureless/vue-chartjs/issues/188)
+- Changes to yAxisID property does not re-render chart [\#177](https://github.com/apertureless/vue-chartjs/issues/177)
+
+**Merged pull requests:**
+
+- Replace Object.assign with deepmerge [\#191](https://github.com/apertureless/vue-chartjs/pull/191) ([apertureless](https://github.com/apertureless))
+
+## [v2.8.3](https://github.com/apertureless/vue-chartjs/tree/v2.8.3) (2017-09-06)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.8.2...v2.8.3)
+
+**Closed issues:**
+
+- Rounded corner for Bar chart [\#185](https://github.com/apertureless/vue-chartjs/issues/185)
+- Access canvas object from parents [\#184](https://github.com/apertureless/vue-chartjs/issues/184)
+- Issue with DonutChart in Safari [\#183](https://github.com/apertureless/vue-chartjs/issues/183)
+- Responsive Width, Fixed Height [\#180](https://github.com/apertureless/vue-chartjs/issues/180)
+- Entire Lodash Library Is Loaded!! 200kb chunk!  [\#179](https://github.com/apertureless/vue-chartjs/issues/179)
+- height changed unexpectedly after re-rendering [\#178](https://github.com/apertureless/vue-chartjs/issues/178)
+- Default height no longer working in 2.8 [\#176](https://github.com/apertureless/vue-chartjs/issues/176)
+- how to get click on point in bar chart? [\#175](https://github.com/apertureless/vue-chartjs/issues/175)
+- clean install of from npm cannot be used in gulp / browserify [\#174](https://github.com/apertureless/vue-chartjs/issues/174)
+- tooltip callbacks possible? [\#173](https://github.com/apertureless/vue-chartjs/issues/173)
+- Computed object won't populate chart [\#170](https://github.com/apertureless/vue-chartjs/issues/170)
+- Error in nextTick: "RangeError: Maximum call stack size exceeded" [\#169](https://github.com/apertureless/vue-chartjs/issues/169)
+- Standalone chartjs build \(don't include moment.js\) [\#124](https://github.com/apertureless/vue-chartjs/issues/124)
+
+**Merged pull requests:**
+
+- 🔥 Remove default styles object as it causes problems [\#187](https://github.com/apertureless/vue-chartjs/pull/187) ([apertureless](https://github.com/apertureless))
+- remvove lodash merge [\#186](https://github.com/apertureless/vue-chartjs/pull/186) ([apertureless](https://github.com/apertureless))
+
+## [v2.8.2](https://github.com/apertureless/vue-chartjs/tree/v2.8.2) (2017-08-12)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.8.1...v2.8.2)
+
+**Closed issues:**
+
+- UNMET PEER DEPENDENCY [\#167](https://github.com/apertureless/vue-chartjs/issues/167)
+- Base Charts' height: 200% [\#164](https://github.com/apertureless/vue-chartjs/issues/164)
+
+**Merged pull requests:**
+
+- Add support for xLabels and yLabels [\#166](https://github.com/apertureless/vue-chartjs/pull/166) ([dsbert](https://github.com/dsbert))
+- Update README.md [\#165](https://github.com/apertureless/vue-chartjs/pull/165) ([mikeybeck](https://github.com/mikeybeck))
+
+## [v2.8.1](https://github.com/apertureless/vue-chartjs/tree/v2.8.1) (2017-08-05)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.8.0...v2.8.1)
+
+**Merged pull requests:**
+
+- Add Russian documentation [\#163](https://github.com/apertureless/vue-chartjs/pull/163) ([dood-](https://github.com/dood-))
+
+## [v2.8.0](https://github.com/apertureless/vue-chartjs/tree/v2.8.0) (2017-08-04)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v1.2.0...v2.8.0)
+
+**Closed issues:**
+
+- Update README CDN link [\#161](https://github.com/apertureless/vue-chartjs/issues/161)
+- Options being ignored [\#160](https://github.com/apertureless/vue-chartjs/issues/160)
+- Fails to dynamically change height. [\#158](https://github.com/apertureless/vue-chartjs/issues/158)
+- Chart doesn't load in bootstrap tab [\#157](https://github.com/apertureless/vue-chartjs/issues/157)
+- Add scatter chart to vue-chatjs@legacy [\#155](https://github.com/apertureless/vue-chartjs/issues/155)
+- \[Error\] Get error when $destroy is started. [\#149](https://github.com/apertureless/vue-chartjs/issues/149)
+
+**Merged pull requests:**
+
+- Feature/dynamic styles [\#162](https://github.com/apertureless/vue-chartjs/pull/162) ([apertureless](https://github.com/apertureless))
+- Add Chinese simplified docs support. [\#159](https://github.com/apertureless/vue-chartjs/pull/159) ([Mooooooon](https://github.com/Mooooooon))
+
+## [v1.2.0](https://github.com/apertureless/vue-chartjs/tree/v1.2.0) (2017-07-25)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.7.2...v1.2.0)
+
+**Closed issues:**
+
+- this.$refs doesn't seem to have expected canvas property [\#156](https://github.com/apertureless/vue-chartjs/issues/156)
+
+**Merged pull requests:**
+
+- Before destroy fix [\#152](https://github.com/apertureless/vue-chartjs/pull/152) ([DenisLapi](https://github.com/DenisLapi))
+
 ## [v2.7.2](https://github.com/apertureless/vue-chartjs/tree/v2.7.2) (2017-07-22)
 [Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.7.1...v2.7.2)
 

README.md

@@ -66,7 +66,7 @@ You can use `vue-chartjs` directly in the browser without any build setup. Like
 
 If you're using Gulp, Browserify or Webpack 1 the entry is `vue-chartjs.js` which is __transpiled__ and __bundled__ UMD Module.
 
-However Vue.js and Chart.js are `deerDependencies` so you have to install them seperately. In most projects you will have `Vue.js` already installed anyways. This way, you can have different versions of Vue.js and Chart.js then in this package.
+However Vue.js and Chart.js are `peerDependencies` so you have to install them separately. In most projects you will have `Vue.js` already installed anyways. This way, you can have different versions of Vue.js and Chart.js then in this package.
 
 ### Webpack 2
 If you're using Webpack 2 it will automatically use the `jsnext:main` / `module` entry point. Which is `es/index.js`

docs/config.js

@@ -3,7 +3,8 @@ const langs = [
   {title: 'Deutsch', path: '/de/', matchPath: /^\/de/},
   {title: '日本語', path: '/ja/', matchPath: /^\/ja/},
   {title: 'Português do Brasil', path: '/pt-br/', matchPath: /^\/pt-br/},
-  {title: '中文(简体)', path: '/zh-cn/', matchPath: /^\/zh-cn/}
+  {title: '中文(简体)', path: '/zh-cn/', matchPath: /^\/zh-cn/},
+  {title: 'Русский', path: '/ru/', matchPath: /^\/ru/}
 ]
 
 docute.init({
@@ -38,7 +39,7 @@ docute.init({
       apiKey: 'b3544f7387612693644777553675d56a',
       indexName: 'vue-chartjs',
       // algolia docsearch allows you to search with tag filter
-      tags: ['en', 'de', 'ja', 'pt-br'],
+      tags: ['en', 'de', 'ja', 'pt-br', 'ru'],
       // this plugin does require a url too
       // where docsearch fetches contents
       url: 'https://vue-chartjs.org'

docs/ru/README.md

@@ -0,0 +1,294 @@
+---
+search: ru
+---
+
+<div align="center">
+  <img width="256" heigth="256" src="../../assets/vue-chartjs.png" alt="vue-chartjs logo">
+</div>
+
+[![npm version](https://badge.fury.io/js/vue-chartjs.svg)](https://badge.fury.io/js/vue-chartjs)
+[![codecov](https://codecov.io/gh/apertureless/vue-chartjs/branch/master/graph/badge.svg)](https://codecov.io/gh/apertureless/vue-chartjs)
+[![Build Status](https://travis-ci.org/apertureless/vue-chartjs.svg?branch=master)](https://travis-ci.org/apertureless/vue-chartjs)
+[![Package Quality](http://npm.packagequality.com/shield/vue-chartjs.svg)](http://packagequality.com/#?package=vue-chartjs)
+[![npm](https://img.shields.io/npm/dm/vue-chartjs.svg)](https://www.npmjs.com/package/vue-chartjs)
+[![Gitter chat](https://img.shields.io/gitter/room/TechnologyAdvice/Stardust.svg)](https://gitter.im/vue-chartjs/Lobby)
+[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/apertureless/vue-chartjs/blob/master/LICENSE.txt)
+[![CDNJS version](https://img.shields.io/cdnjs/v/vue-chartjs.svg)](https://cdnjs.com/libraries/vue-chartjs)
+
+# vue-chartjs
+
+**vue-chartjs** обертка для [Chart.js](https://github.com/chartjs/Chart.js) в vue. Вы можете с легкостью создавать многоразовые компоненты диаграмм.
+
+## Демо & Документация
+
+- 📺 [Demo](http://demo.vue-chartjs.org/)
+- 📖 [Docs](http://www.vue-chartjs.org/)
+
+### Совместимость
+
+- v1 later `@legacy`
+  - Vue.js 1.x
+- v2 later
+  - Vue.js 2.x
+
+После филнального выпуска vue.js 2, вы получите v2 по умолчанию, если установите vue-chartjs через npm.
+Больше нет необходимости в @next теге. Если вы нуждаетесь в v1, вам необходимо указать версию или использовать legacy тег.
+Если вы ищите v1, проверьте эту [ветку](https://github.com/apertureless/vue-chartjs/tree/release/1.x).
+
+## Установка
+
+Просто выполните `yarn add vue-chartjs chart.js`
+
+В случаи если вы хотите использовать библиотеку прямо в браузере, добавьте
+
+```html
+<script src="https://unpkg.com/vue-chartjs@2.6.0/dist/vue-chartjs.full.min.js"></script>
+```
+в ваши скрипты. Смотрите [Codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010)
+
+## Описание различий сборок
+
+Существует три различные точки входа. Это зависит от того, какая сборка стоит у вас. Зависимости собираются или подключаются как peerDependency.
+
+- Browser
+- Browserify / Webpack 1
+- Webpack 2
+
+
+| Build | Chart.js | Vue.js |
+|---|---|---|
+| vue-chartjs.full.js | Bundled | Bundled |
+| vue-chartjs.full.min.js |  Bundled | Bundled  |
+| vue-chartjs.js | peerDependency | peerDependency  |
+| vue-chartjs.min.js | peerDependency  | peerDependency  |
+| es/index* |  peerDependency | peerDependency  |
+
+### Браузер
+Вы можете использовать `vue-chartjs` прямо в браузере без установки каких-либо сборок. Пример на [codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010). В этом случаи, пожалуйста, используйте `vue-chartjs.full.min.js`. Это минифицированноая версиея библиотеки, содержащая Vue.js и Chart.js в себе, с возможностью подключения при помощи UMD Module. Таким образом, вам необходим лишь один файл.
+
+
+### Browserify / Webpack 1
+
+Если вы используете Gulp, Browserify или Webpack 1, входная точка находится в `vue-chartjs.js`. Она __транслируется__ и __собирается__ при помощи UMD Module.
+
+Однако Vue.js и Chart.js является `peerDependencies`, поэтому вы можете устанавливать их отдельно. В большинстве проектов вы в любом случаи будете иметь установленный `Vue.js`. В этом случаи, вы можете иметь различные версии Vue.js и Chart.js.
+
+### Webpack 2
+Если вы используете Webpack 2, он будет автоматически использовать `jsnext:main` / `module` в качестве входной точки, которая расположена в `es/index.js`.
+Это транслированная es версия кода, которая не __собирается__ в модуль. Таким образом, three shaking будет работать.
+Как и в собранной версии, `Vue.js` и `Chart.js` являются `peerDependencies` и не нуждаются в установке.
+
+
+## Как использовать
+
+Вам необходимо импортировать базовый класс диаграммы и унаследовать его. Это даст гораздо большую гибкость при работе с различными данными. Вы можете передать данные через props или vue-resource. 
+
+Вы можете импортировать весь проект или каждый модуль по отдельности.
+
+```javascript
+import VueCharts from 'vue-chartjs'
+import { Bar, Line } from 'vue-chartjs'
+```
+
+Просто создайте ваш собственный компонент.
+
+```javascript
+// CommitChart.js
+import { Bar } from 'vue-chartjs'
+
+export default Bar.extend({
+  mounted () {
+    // Переопределение базового рендер метода с реальными данными.
+    this.renderChart({
+      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+      datasets: [
+        {
+          label: 'GitHub Commits',
+          backgroundColor: '#f87979',
+          data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
+        }
+      ]
+    })
+  }
+})
+```
+
+Затем просто импортируйте и используйте ваши собственные расширенные компоненты как обычные vue компоненты.
+
+```javascript
+import CommitChart from 'path/to/component/CommitChart'
+```
+
+## Другой пример с options
+
+Вы можете переопределить стандартные опции графика. Просто передайте объект с опциями в качестве второго параметра в рендер метод.
+
+```javascript
+// MonthlyIncome.js
+import { Line } from 'vue-chartjs'
+
+export default Line.extend({
+  props: ['data', 'options'],
+  mounted () {
+    this.renderChart(this.data, this.options)
+  }
+})
+```
+
+Используйте это в вашем vue приложении
+
+```javascript
+import MonthlyIncome from 'path/to/component/MonthlyIncome'
+
+<template>
+  <monthly-income :data={....} />
+</template>
+
+<script>
+export default {
+  components: { MonthlyIncome },
+  ....
+}
+</script>
+```
+
+## Реактивность
+
+Chart.js не обновляет и не перерисовывает диаграмму при передаче новых данных.
+Впрочем, вы можете реализовать это самостоятельно или использовав один из двух подключенных миксинов:
+
+- `reactiveProp`
+- `reactiveData`
+
+Оба включены в `mixins` модуль.
+
+Миксины автоматически создают `chartData` в виде prop или data. И добавляют watcher. Если данные были измененны, график обновится.
+Но помните про ограничение vue и javascript на изменений массивов и объектов. Больше информации можно получить [здесь](http://vue-chartjs.org/#/home?id=reactive-data)
+
+```javascript
+// MonthlyIncome.js
+import { Line, mixins } from 'vue-chartjs'
+
+export default Line.extend({
+  mixins: [mixins.reactiveProp],
+  props: ['chartData', 'options'],
+  mounted () {
+    this.renderChart(this.chartData, this.options)
+  }
+})
+
+```
+
+### Mixins модуль
+Модуль `mixins` включен в `VueCharts`, а также доступен в виде отдельного модуля.
+Несколько способов импортировать их:
+
+```javascript
+// Load complete module with all charts
+import VueCharts from 'vue-chartjs'
+
+export default VueCharts.Line.extend({
+  mixins: [VueCharts.mixins.reactiveProp],
+  props: ['chartData', 'options'],
+  mounted () {
+    this.renderChart(this.chartData, this.options)
+  }
+})
+```
+
+```javascript
+// Load speperate modules
+import { Line, mixins } from 'vue-chartjs'
+
+export default Line.extend({
+  mixins: [mixins.reactiveProp],
+  props: ['chartData', 'options'],
+  mounted () {
+    this.renderChart(this.chartData, this.options)
+  }
+})
+```
+
+```javascript
+// Load speperate modules with destructure assign
+import { Line, mixins } from 'vue-chartjs'
+const { reactiveProp } = mixins
+
+export default Line.extend({
+  mixins: [reactiveProp],
+  props: ['chartData', 'options'],
+  mounted () {
+    this.renderChart(this.chartData, this.options)
+  }
+})
+```
+
+## Доступные диаграммы
+
+### Bar Chart
+
+![Bar](../assets/bar.png)
+
+### Line Chart
+
+![Line](../assets/line.png)
+
+### Doughnut
+
+![Doughnut](../assets/doughnut.png)
+
+### Pie
+
+![Pie](../assets/pie.png)
+
+### Radar
+
+![Pie](../assets/radar.png)
+
+### Polar Area
+
+![Pie](../assets/polar.png)
+
+### Bubble
+
+![Bubble](../assets/bubble.png)
+
+### Scatter
+
+![Scatter](../assets/scatter.png)
+
+## Настройка сборки
+
+``` bash
+# инициализация зависимостей
+npm install
+
+# сборка с горячей заменой на localhost:8080
+npm run dev
+
+# сборка для production с минификацией
+npm run build
+
+# запуск unit тестов
+npm run unit
+
+# запуск e2e тестов
+npm run e2e
+
+# запуск всех тестов
+npm test
+```
+
+Для детальных объяснений того, как это работает, перейдите в [руководство](http://vuejs-templates.github.io/webpack/) и [документацию для vue-loader](http://vuejs.github.io/vue-loader).
+
+## Contributing
+
+1. Fork it ( https://github.com/apertureless/vue-chartjs/fork )
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Add some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create a new Pull Request
+
+## License
+
+This software is distributed under [MIT license](LICENSE.txt).

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-chartjs",
-  "version": "2.8.0",
+  "version": "2.8.5",
   "description": "vue.js wrapper for chart.js",
   "author": "Jakub Juszczak <jakub@posteo.de>",
   "homepage": "http://vue-chartjs.org",
@@ -57,7 +57,7 @@
     "prepublish": "yarn run lint && yarn run test && yarn run build"
   },
   "dependencies": {
-    "lodash": "^4.17.4"
+    "lodash.merge": "^4.6.0"
   },
   "peerDependencies": {
     "chart.js": "^2.6.0",
@@ -67,6 +67,7 @@
     "babel-cli": "^6.24.1",
     "babel-core": "^6.25.0",
     "babel-loader": "^7.0.0",
+    "babel-plugin-transform-object-assign": "^6.22.0",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-stage-2": "^6.24.1",

src/BaseCharts/Bar.js

@@ -41,14 +41,7 @@ export default Vue.extend({
       default: ''
     },
     styles: {
-      type: Object,
-      default () {
-        return {
-          width: '100%',
-          height: '200%',
-          position: 'relative'
-        }
-      }
+      type: Object
     }
   },
   data () {

src/BaseCharts/Bubble.js

@@ -42,14 +42,7 @@ export default Vue.extend({
       default: ''
     },
     styles: {
-      type: Object,
-      default () {
-        return {
-          width: '100%',
-          height: '200%',
-          position: 'relative'
-        }
-      }
+      type: Object
     }
   },
 

src/BaseCharts/Doughnut.js

@@ -42,14 +42,7 @@ export default Vue.extend({
       default: ''
     },
     styles: {
-      type: Object,
-      default () {
-        return {
-          width: '100%',
-          height: '200%',
-          position: 'relative'
-        }
-      }
+      type: Object
     }
   },
 

src/BaseCharts/HorizontalBar.js

@@ -42,14 +42,7 @@ export default Vue.extend({
       default: ''
     },
     styles: {
-      type: Object,
-      default () {
-        return {
-          width: '100%',
-          height: '200%',
-          position: 'relative'
-        }
-      }
+      type: Object
     }
   },
 

src/BaseCharts/Line.js

@@ -42,14 +42,7 @@ export default Vue.extend({
       default: ''
     },
     styles: {
-      type: Object,
-      default () {
-        return {
-          width: '100%',
-          height: '200%',
-          position: 'relative'
-        }
-      }
+      type: Object
     }
   },
 

src/BaseCharts/Pie.js

@@ -42,14 +42,7 @@ export default Vue.extend({
       default: ''
     },
     styles: {
-      type: Object,
-      default () {
-        return {
-          width: '100%',
-          height: '200%',
-          position: 'relative'
-        }
-      }
+      type: Object
     }
   },
 

src/BaseCharts/PolarArea.js

@@ -42,14 +42,7 @@ export default Vue.extend({
       default: ''
     },
     styles: {
-      type: Object,
-      default () {
-        return {
-          width: '100%',
-          height: '200%',
-          position: 'relative'
-        }
-      }
+      type: Object
     }
   },
 

src/BaseCharts/Radar.js

@@ -42,14 +42,7 @@ export default Vue.extend({
       default: ''
     },
     styles: {
-      type: Object,
-      default () {
-        return {
-          width: '100%',
-          height: '200%',
-          position: 'relative'
-        }
-      }
+      type: Object
     }
   },
 

src/BaseCharts/Scatter.js

@@ -42,14 +42,7 @@ export default Vue.extend({
       default: ''
     },
     styles: {
-      type: Object,
-      default () {
-        return {
-          width: '100%',
-          height: '200%',
-          position: 'relative'
-        }
-      }
+      type: Object
     }
   },
 

src/helpers/options.js

@@ -1,4 +1,4 @@
-import merge from 'lodash/fp/merge'
+import merge from 'lodash.merge'
 
 export function mergeOptions (obj, src) {
   return merge(obj, src)

src/mixins/reactiveData.js

@@ -48,7 +48,15 @@ module.exports = {
               }
             })
 
-            chart.data.labels = newData.labels
+            if (newData.hasOwnProperty('labels')) {
+              chart.data.labels = newData.labels
+            }
+            if (newData.hasOwnProperty('xLabels')) {
+              chart.data.xLabels = newData.xLabels
+            }
+            if (newData.hasOwnProperty('yLabels')) {
+              chart.data.yLabels = newData.yLabels
+            }
             chart.update()
           } else {
             chart.destroy()

src/mixins/reactiveProp.js

@@ -48,7 +48,15 @@ module.exports = {
               }
             })
 
-            chart.data.labels = newData.labels
+            if (newData.hasOwnProperty('labels')) {
+              chart.data.labels = newData.labels
+            }
+            if (newData.hasOwnProperty('xLabels')) {
+              chart.data.xLabels = newData.xLabels
+            }
+            if (newData.hasOwnProperty('yLabels')) {
+              chart.data.yLabels = newData.yLabels
+            }
             chart.update()
           } else {
             chart.destroy()

test/unit/specs/helpers/options.spec.js

@@ -15,16 +15,40 @@ describe('mergeOptions.js', () => {
     c: 'c'
   }
 
+  const an = {
+    a: {
+      a: 'a'
+    },
+    b: {
+      b: 'a'
+    }
+  }
+
+  const bn = {
+    a: {
+      a: 'a'
+    },
+    b: {
+      b: 'b'
+    }
+  }
+
   it('should replace old a and b if a and b are new', () => {
-    let ab = mergeOptions(a, b)
+    const ab = mergeOptions(a, b)
     expect(ab).to.have.property('a').and.to.equal('b')
     expect(ab).to.have.property('b').and.to.equal('b')
   })
 
   it('should add c if c is new', () => {
-    let ac = mergeOptions(a, c)
-    expect(ac).to.have.property('a').and.to.equal('a')
-    expect(ac).to.have.property('b').and.to.equal('a')
+    const ac = mergeOptions(a, c)
+    expect(ac).to.have.property('a').and.to.equal('b')
+    expect(ac).to.have.property('b').and.to.equal('b')
     expect(ac).to.have.property('c').and.to.equal('c')
   })
+
+  it('should replace old a and b if a and b are new in nested objects', () => {
+    const ab = mergeOptions(an, bn)
+    expect(ab).to.have.deep.property('a.a').and.to.equal('a')
+    expect(ab).to.have.deep.property('b.b').and.to.equal('b')
+  })
 })

yarn.lock

@@ -687,6 +687,12 @@ babel-plugin-transform-exponentiation-operator@^6.24.1:
     babel-plugin-syntax-exponentiation-operator "^6.8.0"
     babel-runtime "^6.22.0"
 
+babel-plugin-transform-object-assign@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-assign/-/babel-plugin-transform-object-assign-6.22.0.tgz#f99d2f66f1a0b0d498e346c5359684740caa20ba"
+  dependencies:
+    babel-runtime "^6.22.0"
+
 babel-plugin-transform-object-rest-spread@^6.22.0:
   version "6.23.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.23.0.tgz#875d6bc9be761c58a2ae3feee5dc4895d8c7f921"
@@ -3538,6 +3544,10 @@ lodash.keysin@^4.0.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/lodash.keysin/-/lodash.keysin-4.2.0.tgz#8cc3fb35c2d94acc443a1863e02fa40799ea6f28"
 
+lodash.merge@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.0.tgz#69884ba144ac33fe699737a6086deffadd0f89c5"
+
 lodash.mergewith@^4.0.0, lodash.mergewith@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.0.tgz#150cf0a16791f5903b8891eab154609274bdea55"
@@ -3554,7 +3564,7 @@ lodash@^3.8.0:
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
 
-lodash@^4.0.0, lodash@^4.0.1, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.3.0, lodash@^4.5.0:
+lodash@^4.0.0, lodash@^4.0.1, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.2.0, lodash@^4.3.0, lodash@^4.5.0:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"