Create special function for merging instance options that can handle …

…nesteded settings (#205)

dist/glide.esm.js

@@ -244,20 +244,7 @@ var createClass = function () {
 
 
 
-var defineProperty = function (obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
 
-  return obj;
-};
 
 var _extends = Object.assign || function (target) {
   for (var i = 1; i < arguments.length; i++) {
@@ -463,25 +450,29 @@ function sortKeys(obj) {
 }
 
 /**
- * Deeply merges two objects.
+ * Merges passed settings object with default options.
  *
- * @param  {Object} target
- * @param  {Object} source
+ * @param  {Object} defaults
+ * @param  {Object} settings
  * @return {Object}
  */
-function merge(target, source) {
-  if (isObject(target) && isObject(source)) {
-    Object.keys(source).forEach(function (key) {
-      if (isObject(source[key])) {
-        if (!target[key]) _extends(target, defineProperty({}, key, {}));
-        merge(target[key], source[key]);
-      } else {
-        _extends(target, defineProperty({}, key, source[key]));
-      }
-    });
+function mergeOptions(defaults, settings) {
+  var options = _extends({}, defaults, settings);
+
+  // `Object.assign` do not deeply merge objects, so we
+  // have to do it manually for every nested object
+  // in options. Although it does not look smart,
+  // it's smaller and faster than some fancy
+  // merging deep-merge algorithm script.
+  if (settings.hasOwnProperty('classes')) {
+    options.classes = _extends({}, defaults.classes, settings.classes);
+
+    if (settings.classes.hasOwnProperty('direction')) {
+      options.classes.direction = _extends({}, defaults.classes.direction, settings.classes.direction);
+    }
   }
 
-  return _extends({}, target);
+  return options;
 }
 
 var EventsBus = function () {
@@ -562,7 +553,8 @@ var EventsBus = function () {
 }();
 
 var Glide$2 = function () {
-  /**   * Construct glide.
+  /**
+   * Construct glide.
    *
    * @param  {String} selector
    * @param  {Object} options
@@ -575,9 +567,8 @@ var Glide$2 = function () {
     this._e = new EventsBus();
 
     this.disabled = false;
-
     this.selector = selector;
-    this.settings = merge(defaults, options);
+    this.settings = mergeOptions(defaults, options);
     this.index = this.settings.startAt;
   }
 
@@ -3525,14 +3516,14 @@ var Breakpoints = function (Glide, Components, Events) {
    * Overwrite instance settings with currently matching breakpoint settings.
    * This happens right after component initialization.
    */
-  settings = _extends(settings, Breakpoints.match(points));
+  _extends(settings, Breakpoints.match(points));
 
   /**
    * Update glide with settings of matched brekpoint:
    * - window resize to update slider
    */
   Binder.on('resize', window, throttle(function () {
-    settings = _extends(settings, Breakpoints.match(points));
+    _extends(settings, Breakpoints.match(points));
   }, Glide.settings.throttle));
 
   /**

dist/glide.js

@@ -250,20 +250,7 @@ var createClass = function () {
 
 
 
-var defineProperty = function (obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
 
-  return obj;
-};
 
 var _extends = Object.assign || function (target) {
   for (var i = 1; i < arguments.length; i++) {
@@ -469,25 +456,29 @@ function sortKeys(obj) {
 }
 
 /**
- * Deeply merges two objects.
+ * Merges passed settings object with default options.
  *
- * @param  {Object} target
- * @param  {Object} source
+ * @param  {Object} defaults
+ * @param  {Object} settings
  * @return {Object}
  */
-function merge(target, source) {
-  if (isObject(target) && isObject(source)) {
-    Object.keys(source).forEach(function (key) {
-      if (isObject(source[key])) {
-        if (!target[key]) _extends(target, defineProperty({}, key, {}));
-        merge(target[key], source[key]);
-      } else {
-        _extends(target, defineProperty({}, key, source[key]));
-      }
-    });
+function mergeOptions(defaults, settings) {
+  var options = _extends({}, defaults, settings);
+
+  // `Object.assign` do not deeply merge objects, so we
+  // have to do it manually for every nested object
+  // in options. Although it does not look smart,
+  // it's smaller and faster than some fancy
+  // merging deep-merge algorithm script.
+  if (settings.hasOwnProperty('classes')) {
+    options.classes = _extends({}, defaults.classes, settings.classes);
+
+    if (settings.classes.hasOwnProperty('direction')) {
+      options.classes.direction = _extends({}, defaults.classes.direction, settings.classes.direction);
+    }
   }
 
-  return _extends({}, target);
+  return options;
 }
 
 var EventsBus = function () {
@@ -568,7 +559,8 @@ var EventsBus = function () {
 }();
 
 var Glide$2 = function () {
-  /**   * Construct glide.
+  /**
+   * Construct glide.
    *
    * @param  {String} selector
    * @param  {Object} options
@@ -581,9 +573,8 @@ var Glide$2 = function () {
     this._e = new EventsBus();
 
     this.disabled = false;
-
     this.selector = selector;
-    this.settings = merge(defaults, options);
+    this.settings = mergeOptions(defaults, options);
     this.index = this.settings.startAt;
   }
 
@@ -3531,14 +3522,14 @@ var Breakpoints = function (Glide, Components, Events) {
    * Overwrite instance settings with currently matching breakpoint settings.
    * This happens right after component initialization.
    */
-  settings = _extends(settings, Breakpoints.match(points));
+  _extends(settings, Breakpoints.match(points));
 
   /**
    * Update glide with settings of matched brekpoint:
    * - window resize to update slider
    */
   Binder.on('resize', window, throttle(function () {
-    settings = _extends(settings, Breakpoints.match(points));
+    _extends(settings, Breakpoints.match(points));
   }, Glide.settings.throttle));
 
   /**

dist/glide.modular.esm.js

@@ -244,20 +244,7 @@ var createClass = function () {
 
 
 
-var defineProperty = function (obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
 
-  return obj;
-};
 
 var _extends = Object.assign || function (target) {
   for (var i = 1; i < arguments.length; i++) {
@@ -463,25 +450,29 @@ function sortKeys(obj) {
 }
 
 /**
- * Deeply merges two objects.
+ * Merges passed settings object with default options.
  *
- * @param  {Object} target
- * @param  {Object} source
+ * @param  {Object} defaults
+ * @param  {Object} settings
  * @return {Object}
  */
-function merge(target, source) {
-  if (isObject(target) && isObject(source)) {
-    Object.keys(source).forEach(function (key) {
-      if (isObject(source[key])) {
-        if (!target[key]) _extends(target, defineProperty({}, key, {}));
-        merge(target[key], source[key]);
-      } else {
-        _extends(target, defineProperty({}, key, source[key]));
-      }
-    });
+function mergeOptions(defaults, settings) {
+  var options = _extends({}, defaults, settings);
+
+  // `Object.assign` do not deeply merge objects, so we
+  // have to do it manually for every nested object
+  // in options. Although it does not look smart,
+  // it's smaller and faster than some fancy
+  // merging deep-merge algorithm script.
+  if (settings.hasOwnProperty('classes')) {
+    options.classes = _extends({}, defaults.classes, settings.classes);
+
+    if (settings.classes.hasOwnProperty('direction')) {
+      options.classes.direction = _extends({}, defaults.classes.direction, settings.classes.direction);
+    }
   }
 
-  return _extends({}, target);
+  return options;
 }
 
 var EventsBus = function () {
@@ -562,7 +553,8 @@ var EventsBus = function () {
 }();
 
 var Glide$2 = function () {
-  /**   * Construct glide.
+  /**
+   * Construct glide.
    *
    * @param  {String} selector
    * @param  {Object} options
@@ -575,9 +567,8 @@ var Glide$2 = function () {
     this._e = new EventsBus();
 
     this.disabled = false;
-
     this.selector = selector;
-    this.settings = merge(defaults, options);
+    this.settings = mergeOptions(defaults, options);
     this.index = this.settings.startAt;
   }
 
@@ -3525,14 +3516,14 @@ var breakpoints = function (Glide, Components, Events) {
    * Overwrite instance settings with currently matching breakpoint settings.
    * This happens right after component initialization.
    */
-  settings = _extends(settings, Breakpoints.match(points));
+  _extends(settings, Breakpoints.match(points));
 
   /**
    * Update glide with settings of matched brekpoint:
    * - window resize to update slider
    */
   Binder.on('resize', window, throttle(function () {
-    settings = _extends(settings, Breakpoints.match(points));
+    _extends(settings, Breakpoints.match(points));
   }, Glide.settings.throttle));
 
   /**

src/components/breakpoints.js

@@ -1,7 +1,7 @@
 import { warn } from '../utils/log'
 import { throttle } from '../utils/wait'
 import { isObject } from '../utils/unit'
-import { sortKeys } from '../utils/object'
+import { sortKeys, mergeOptions } from '../utils/object'
 
 import EventsBinder from '../core/event/events-binder'
 
@@ -82,14 +82,14 @@ export default function (Glide, Components, Events) {
    * Overwrite instance settings with currently matching breakpoint settings.
    * This happens right after component initialization.
    */
-  settings = Object.assign(settings, Breakpoints.match(points))
+  Object.assign(settings, Breakpoints.match(points))
 
   /**
    * Update glide with settings of matched brekpoint:
    * - window resize to update slider
    */
   Binder.on('resize', window, throttle(() => {
-    settings = Object.assign(settings, Breakpoints.match(points))
+    Object.assign(settings, Breakpoints.match(points))
   }, Glide.settings.throttle))
 
   /**

src/index.js

@@ -1,6 +1,7 @@
 import defaults from './defaults'
 import { warn } from './utils/log'
 import { mount } from './core/index'
+import { mergeOptions } from './utils/object'
 import { toInt, isObject } from './utils/unit'
 
 import EventsBus from './core/event/events-bus'
@@ -18,7 +19,7 @@ export default class Glide {
 
     this.disabled = false
     this.selector = selector
-    this.settings = Object.assign({}, defaults, options)
+    this.settings = mergeOptions(defaults, options)
     this.index = this.settings.startAt
   }
 

src/utils/object.js

@@ -23,3 +23,29 @@ export function sortKeys (obj) {
     return (r[k], r)
   }, {})
 }
+
+/**
+ * Merges passed settings object with default options.
+ *
+ * @param  {Object} defaults
+ * @param  {Object} settings
+ * @return {Object}
+ */
+export function mergeOptions (defaults, settings) {
+  let options = Object.assign({}, defaults, settings)
+
+  // `Object.assign` do not deeply merge objects, so we
+  // have to do it manually for every nested object
+  // in options. Although it does not look smart,
+  // it's smaller and faster than some fancy
+  // merging deep-merge algorithm script.
+  if (settings.hasOwnProperty('classes')) {
+    options.classes = Object.assign({}, defaults.classes, settings.classes)
+
+    if (settings.classes.hasOwnProperty('direction')) {
+      options.classes.direction = Object.assign({}, defaults.classes.direction, settings.classes.direction)
+    }
+  }
+
+  return options
+}

tests/integration/instance.test.js

@@ -1,5 +1,6 @@
 import html from '../fixtures/html'
 import defaults from '../../src/defaults'
+import { mergeOptions } from '../../src/utils/object'
 
 import Glide from '../../entry/entry-complete'
 
@@ -37,7 +38,7 @@ describe('Glide', () => {
       }
     }).mount()
 
-    expect(glide.settings).toEqual(Object.assign(defaults, {
+    expect(glide.settings).toEqual(mergeOptions(defaults, {
       startAt: 2,
       classes: {
         direction: {