Performance optimization. Keep user options after breakpoints hit.

dist/js/splide.cjs.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 4.0.0
+ * Version  : 4.0.1
  * License  : MIT
  * Copyright: 2022 Naotoshi Fujita
  */
@@ -168,7 +168,7 @@ function merge(object) {
       if (isArray(value)) {
         object[key] = value.slice();
       } else if (isObject(value)) {
-        object[key] = merge(isObject(object[key]) ? object[key] : {}, value);
+        object[key] = merge({}, isObject(object[key]) ? object[key] : {}, value);
       } else {
         object[key] = value;
       }
@@ -574,9 +574,10 @@ function Throttle(func, duration) {
 }
 
 function Media(Splide2, Components2, options) {
+  var state = Splide2.state;
+  var breakpoints = options.breakpoints || {};
   var reducedMotion = options.reducedMotion || {};
   var binder = EventBinder();
-  var breakpoints = options.breakpoints || {};
   var queries = [];
 
   function setup() {
@@ -603,13 +604,17 @@ function Media(Splide2, Components2, options) {
   }
 
   function update() {
-    var destroyed = Splide2.state.is(DESTROYED);
+    var destroyed = state.is(DESTROYED);
     var direction = options.direction;
     var merged = queries.reduce(function (merged2, entry) {
       return merge(merged2, entry[1].matches ? entry[0] : {});
     }, {});
     omit(options);
-    Splide2.options = merged;
+    merge(options, merged);
+
+    if (!state.is(CREATED)) {
+      Splide2.emit(EVENT_UPDATED, options);
+    }
 
     if (options.destroy) {
       Splide2.destroy(options.destroy === "completely");
@@ -2500,12 +2505,13 @@ function Pagination(Splide2, Components2, options) {
 
   function destroy() {
     if (list) {
-      event.destroy();
       remove(Elements.pagination ? slice(list.children) : list);
       removeClass(list, paginationClasses);
       empty(items);
       list = null;
     }
+
+    event.destroy();
   }
 
   function createPagination() {
@@ -2622,12 +2628,14 @@ function Pagination(Splide2, Components2, options) {
 var TRIGGER_KEYS = [" ", "Enter"];
 
 function Sync(Splide2, Components2, options) {
-  var isNavigation = options.isNavigation;
+  var isNavigation = options.isNavigation,
+      slideFocus = options.slideFocus;
   var events = [];
 
   function setup() {
-    var slideFocus = options.slideFocus;
-    options.slideFocus = isUndefined(slideFocus) ? isNavigation : slideFocus;
+    Splide2.options = {
+      slideFocus: isUndefined(slideFocus) ? isNavigation : slideFocus
+    };
   }
 
   function mount() {
@@ -3081,6 +3089,7 @@ var _Splide = /*#__PURE__*/function () {
     set: function set(options) {
       var _o = this._o;
       merge(_o, options);
+      merge(Object.getPrototypeOf(_o), options);
 
       if (!this.state.is(CREATED)) {
         this.emit(EVENT_UPDATED, _o);

dist/js/splide.esm.js

@@ -4,7 +4,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 /*!
  * Splide.js
- * Version  : 4.0.0
+ * Version  : 4.0.1
  * License  : MIT
  * Copyright: 2022 Naotoshi Fujita
  */
@@ -163,7 +163,7 @@ function merge(object) {
       if (isArray(value)) {
         object[key] = value.slice();
       } else if (isObject(value)) {
-        object[key] = merge(isObject(object[key]) ? object[key] : {}, value);
+        object[key] = merge({}, isObject(object[key]) ? object[key] : {}, value);
       } else {
         object[key] = value;
       }
@@ -569,9 +569,10 @@ function Throttle(func, duration) {
 }
 
 function Media(Splide2, Components2, options) {
+  var state = Splide2.state;
+  var breakpoints = options.breakpoints || {};
   var reducedMotion = options.reducedMotion || {};
   var binder = EventBinder();
-  var breakpoints = options.breakpoints || {};
   var queries = [];
 
   function setup() {
@@ -598,13 +599,17 @@ function Media(Splide2, Components2, options) {
   }
 
   function update() {
-    var destroyed = Splide2.state.is(DESTROYED);
+    var destroyed = state.is(DESTROYED);
     var direction = options.direction;
     var merged = queries.reduce(function (merged2, entry) {
       return merge(merged2, entry[1].matches ? entry[0] : {});
     }, {});
     omit(options);
-    Splide2.options = merged;
+    merge(options, merged);
+
+    if (!state.is(CREATED)) {
+      Splide2.emit(EVENT_UPDATED, options);
+    }
 
     if (options.destroy) {
       Splide2.destroy(options.destroy === "completely");
@@ -2495,12 +2500,13 @@ function Pagination(Splide2, Components2, options) {
 
   function destroy() {
     if (list) {
-      event.destroy();
       remove(Elements.pagination ? slice(list.children) : list);
       removeClass(list, paginationClasses);
       empty(items);
       list = null;
     }
+
+    event.destroy();
   }
 
   function createPagination() {
@@ -2617,12 +2623,14 @@ function Pagination(Splide2, Components2, options) {
 var TRIGGER_KEYS = [" ", "Enter"];
 
 function Sync(Splide2, Components2, options) {
-  var isNavigation = options.isNavigation;
+  var isNavigation = options.isNavigation,
+      slideFocus = options.slideFocus;
   var events = [];
 
   function setup() {
-    var slideFocus = options.slideFocus;
-    options.slideFocus = isUndefined(slideFocus) ? isNavigation : slideFocus;
+    Splide2.options = {
+      slideFocus: isUndefined(slideFocus) ? isNavigation : slideFocus
+    };
   }
 
   function mount() {
@@ -3076,6 +3084,7 @@ var _Splide = /*#__PURE__*/function () {
     set: function set(options) {
       var _o = this._o;
       merge(_o, options);
+      merge(Object.getPrototypeOf(_o), options);
 
       if (!this.state.is(CREATED)) {
         this.emit(EVENT_UPDATED, _o);

dist/js/splide.js

@@ -4,7 +4,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 /*!
  * Splide.js
- * Version  : 4.0.0
+ * Version  : 4.0.1
  * License  : MIT
  * Copyright: 2022 Naotoshi Fujita
  */
@@ -168,7 +168,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
         if (isArray(value)) {
           object[key] = value.slice();
         } else if (isObject(value)) {
-          object[key] = merge(isObject(object[key]) ? object[key] : {}, value);
+          object[key] = merge({}, isObject(object[key]) ? object[key] : {}, value);
         } else {
           object[key] = value;
         }
@@ -570,9 +570,10 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   }
 
   function Media(Splide2, Components2, options) {
+    var state = Splide2.state;
+    var breakpoints = options.breakpoints || {};
     var reducedMotion = options.reducedMotion || {};
     var binder = EventBinder();
-    var breakpoints = options.breakpoints || {};
     var queries = [];
 
     function setup() {
@@ -599,13 +600,17 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     }
 
     function update() {
-      var destroyed = Splide2.state.is(DESTROYED);
+      var destroyed = state.is(DESTROYED);
       var direction = options.direction;
       var merged = queries.reduce(function (merged2, entry) {
         return merge(merged2, entry[1].matches ? entry[0] : {});
       }, {});
       omit(options);
-      Splide2.options = merged;
+      merge(options, merged);
+
+      if (!state.is(CREATED)) {
+        Splide2.emit(EVENT_UPDATED, options);
+      }
 
       if (options.destroy) {
         Splide2.destroy(options.destroy === "completely");
@@ -2493,12 +2498,13 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
     function destroy() {
       if (list) {
-        event.destroy();
         remove(Elements.pagination ? slice(list.children) : list);
         removeClass(list, paginationClasses);
         empty(items);
         list = null;
       }
+
+      event.destroy();
     }
 
     function createPagination() {
@@ -2615,12 +2621,14 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   var TRIGGER_KEYS = [" ", "Enter"];
 
   function Sync(Splide2, Components2, options) {
-    var isNavigation = options.isNavigation;
+    var isNavigation = options.isNavigation,
+        slideFocus = options.slideFocus;
     var events = [];
 
     function setup() {
-      var slideFocus = options.slideFocus;
-      options.slideFocus = isUndefined(slideFocus) ? isNavigation : slideFocus;
+      Splide2.options = {
+        slideFocus: isUndefined(slideFocus) ? isNavigation : slideFocus
+      };
     }
 
     function mount() {
@@ -3074,6 +3082,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       set: function set(options) {
         var _o = this._o;
         merge(_o, options);
+        merge(Object.getPrototypeOf(_o), options);
 
         if (!this.state.is(CREATED)) {
           this.emit(EVENT_UPDATED, _o);

dist/js/utils/splide-utils.cjs.js

@@ -137,7 +137,7 @@ function merge(object) {
       if (isArray(value)) {
         object[key] = value.slice();
       } else if (isObject(value)) {
-        object[key] = merge(isObject(object[key]) ? object[key] : {}, value);
+        object[key] = merge({}, isObject(object[key]) ? object[key] : {}, value);
       } else {
         object[key] = value;
       }

dist/js/utils/splide-utils.esm.js

@@ -133,7 +133,7 @@ function merge(object) {
       if (isArray(value)) {
         object[key] = value.slice();
       } else if (isObject(value)) {
-        object[key] = merge(isObject(object[key]) ? object[key] : {}, value);
+        object[key] = merge({}, isObject(object[key]) ? object[key] : {}, value);
       } else {
         object[key] = value;
       }

dist/types/index.d.ts

@@ -4,6 +4,7 @@
  * @since 4.0.0
  */
 interface MediaComponent extends BaseComponent {
+    /** @internal */
     reduce(reduced: boolean): void;
 }
 

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@splidejs/splide",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@splidejs/splide",
-      "version": "4.0.0",
+      "version": "4.0.1",
       "license": "MIT",
       "devDependencies": {
         "@babel/core": "^7.16.10",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splidejs/splide",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "description": "Splide is a lightweight, flexible and accessible slider/carousel. No dependencies, no Lighthouse errors.",
   "author": "Naotoshi Fujita",
   "license": "MIT",

src/js/components/Media/Media.ts

@@ -1,9 +1,10 @@
 import { MEDIA_PREFERS_REDUCED_MOTION } from '../../constants/media';
-import { DESTROYED } from '../../constants/states';
+import { CREATED, DESTROYED } from '../../constants/states';
 import { EventBinder } from '../../constructors';
 import { Splide } from '../../core/Splide/Splide';
 import { BaseComponent, Components, Options } from '../../types';
 import { merge, omit, ownKeys } from '../../utils';
+import { EVENT_UPDATED } from "../../constants/events";
 
 
 /**
@@ -12,6 +13,7 @@ import { merge, omit, ownKeys } from '../../utils';
  * @since 4.0.0
  */
 export interface MediaComponent extends BaseComponent {
+  /** @internal */
   reduce( reduced: boolean ): void;
 }
 
@@ -28,9 +30,10 @@ export interface MediaComponent extends BaseComponent {
  * @return A Media component object.
  */
 export function Media( Splide: Splide, Components: Components, options: Options ): MediaComponent {
+  const { state } = Splide;
+  const breakpoints   = options.breakpoints || {};
   const reducedMotion = options.reducedMotion || {};
   const binder        = EventBinder();
-  const breakpoints   = options.breakpoints || {};
 
   /**
    * Stores options and MediaQueryList object.
@@ -80,14 +83,18 @@ export function Media( Splide: Splide, Components: Components, options: Options
    * Checks all media queries in entries and updates options.
    */
   function update(): void {
-    const destroyed = Splide.state.is( DESTROYED );
+    const destroyed = state.is( DESTROYED );
     const direction = options.direction;
     const merged = queries.reduce<Options>( ( merged, entry ) => {
       return merge( merged, entry[ 1 ].matches ? entry[ 0 ] : {} );
     }, {} );
 
     omit( options );
-    Splide.options = merged;
+    merge( options, merged );
+
+    if ( ! state.is( CREATED ) ) {
+      Splide.emit( EVENT_UPDATED, options );
+    }
 
     if ( options.destroy ) {
       Splide.destroy( options.destroy === 'completely' );

src/js/components/Pagination/Pagination.ts

@@ -126,12 +126,13 @@ export function Pagination( Splide: Splide, Components: Components, options: Opt
    */
   function destroy(): void {
     if ( list ) {
-      event.destroy();
       remove( Elements.pagination ? slice( list.children ) : list );
       removeClass( list, paginationClasses );
       empty( items );
       list = null;
     }
+
+    event.destroy();
   }
 
   /**

src/js/components/Sync/Sync.ts

@@ -45,7 +45,7 @@ const TRIGGER_KEYS = [ ' ', 'Enter' ];
  * @return A Sync component object.
  */
 export function Sync( Splide: Splide, Components: Components, options: Options ): SyncComponent {
-  const { isNavigation } = options;
+  const { isNavigation, slideFocus } = options;
 
   /**
    * Stores event objects.
@@ -56,8 +56,7 @@ export function Sync( Splide: Splide, Components: Components, options: Options )
    * Called when the component is constructed.
    */
   function setup(): void {
-    const { slideFocus } = options;
-    options.slideFocus = isUndefined( slideFocus ) ? isNavigation : slideFocus;
+    Splide.options = { slideFocus: isUndefined( slideFocus ) ? isNavigation : slideFocus };
   }
 
   /**

src/js/core/Splide/Splide.ts

@@ -381,6 +381,7 @@ export class Splide {
   set options( options: Options ) {
     const { _o } = this;
     merge( _o, options );
+    merge( Object.getPrototypeOf( _o ), options );
 
     if ( ! this.state.is( CREATED ) ) {
       this.emit( EVENT_UPDATED, _o );

src/js/test/php/examples/ttb.php

@@ -30,10 +30,8 @@ $settings = get_settings();
         // wheel       : true,
 	      waitForTransition: false,
         releaseWheel: true,
-	      wheel       : {
-					// min: 99,
-		      sleep: 500,
-	      },
+        wheel: true,
+        wheelSleep: 500,
       } );
 
       splide.mount();

src/js/utils/object/merge/merge.ts

@@ -57,7 +57,7 @@ export function merge<T extends object>( object: T ): any {
       if ( isArray( value ) ) {
         object[ key ] = value.slice();
       } else if ( isObject( value ) ) {
-        object[ key ] = merge( isObject( object[ key ] ) ? object[ key ] : {}, value );
+        object[ key ] = merge( {}, isObject( object[ key ] ) ? object[ key ] : {}, value );
       } else {
         object[ key ] = value;
       }