Use a prototype for options.

dist/js/splide.cjs.js

@@ -13,6 +13,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 Object.defineProperty(exports, '__esModule', {
   value: true
 });
+var MEDIA_PREFERS_REDUCED_MOTION = "(prefers-reduced-motion: reduce)";
 var CREATED = 1;
 var MOUNTED = 2;
 var IDLE = 3;
@@ -582,7 +583,6 @@ function Throttle(func, duration) {
 function Media(Splide2, Components2, options) {
   var binder = EventBinder();
   var breakpoints = options.breakpoints || {};
-  var initialOptions = Splide2._io;
   var queries = [];
 
   function setup() {
@@ -590,9 +590,9 @@ function Media(Splide2, Components2, options) {
     ownKeys(breakpoints).sort(function (n, m) {
       return isMin ? +n - +m : +m - +n;
     }).forEach(function (key) {
-      register(key, breakpoints[key], "(" + (isMin ? "min" : "max") + "-width:" + key + "px)");
+      register(breakpoints[key], "(" + (isMin ? "min" : "max") + "-width:" + key + "px)");
     });
-    register("motion", options.reducedMotion || {}, "(prefers-reduced-motion: reduce)");
+    register(options.reducedMotion || {}, MEDIA_PREFERS_REDUCED_MOTION);
     update();
   }
 
@@ -602,40 +602,36 @@ function Media(Splide2, Components2, options) {
     }
   }
 
-  function register(key, options2, query) {
+  function register(options2, query) {
     var queryList = matchMedia(query);
     binder.bind(queryList, "change", update);
-    queries.push([key, options2, queryList]);
+    queries.push([options2, queryList]);
   }
 
   function update() {
-    var merged = accumulate();
     var direction = options.direction;
-    var destruction = merged.destroy;
+    var merged = queries.reduce(function (merged2, entry) {
+      return merge(merged2, entry[1].matches ? entry[0] : {});
+    }, {});
     forOwn(options, function (value, key) {
-      !(key in initialOptions) && delete options[key];
+      delete options[key];
     });
+    merge(options, merged);
 
-    if (destruction) {
-      Splide2.destroy(destruction === "completely");
+    if (options.destroy) {
+      Splide2.destroy(options.destroy === "completely");
     } else if (Splide2.state.is(DESTROYED)) {
       destroy(true);
       Splide2.mount();
     } else {
       Splide2.options = merged;
-      direction !== merged.direction && Splide2.refresh();
+      direction !== options.direction && Splide2.refresh();
     }
   }
 
-  function accumulate() {
-    return queries.reduce(function (merged, entry) {
-      return merge(merged, entry[2].matches ? entry[1] : {});
-    }, merge({}, initialOptions));
-  }
-
-  function matches(key) {
+  function matches(media) {
     return queries.some(function (entry) {
-      return entry[0] === key && entry[2].matches;
+      return entry[1].media === media && entry[1].matches;
     });
   }
 
@@ -2214,11 +2210,11 @@ function Drag(Splide2, Components2, options) {
     var velocity = computeVelocity(e);
     var destination = computeDestination(velocity);
     var rewind = options.rewind && options.rewindByDrag;
-    var reduced = Components2.Media.matches("motion");
+    var reduced = Components2.Media.matches(MEDIA_PREFERS_REDUCED_MOTION);
     var go = Controller.go;
 
     if (reduced) {
-      options.speed = Splide2._io.speed;
+      delete options.speed;
     }
 
     if (isFree) {
@@ -2974,8 +2970,7 @@ var _Splide = /*#__PURE__*/function () {
       assert(false, "Invalid JSON");
     }
 
-    this._io = merge({}, options);
-    this._options = options;
+    this._options = Object.create(merge({}, options));
   }
 
   var _proto = _Splide.prototype;

dist/js/splide.esm.js

@@ -8,6 +8,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
  * License  : MIT
  * Copyright: 2022 Naotoshi Fujita
  */
+var MEDIA_PREFERS_REDUCED_MOTION = "(prefers-reduced-motion: reduce)";
 var CREATED = 1;
 var MOUNTED = 2;
 var IDLE = 3;
@@ -577,7 +578,6 @@ function Throttle(func, duration) {
 function Media(Splide2, Components2, options) {
   var binder = EventBinder();
   var breakpoints = options.breakpoints || {};
-  var initialOptions = Splide2._io;
   var queries = [];
 
   function setup() {
@@ -585,9 +585,9 @@ function Media(Splide2, Components2, options) {
     ownKeys(breakpoints).sort(function (n, m) {
       return isMin ? +n - +m : +m - +n;
     }).forEach(function (key) {
-      register(key, breakpoints[key], "(" + (isMin ? "min" : "max") + "-width:" + key + "px)");
+      register(breakpoints[key], "(" + (isMin ? "min" : "max") + "-width:" + key + "px)");
     });
-    register("motion", options.reducedMotion || {}, "(prefers-reduced-motion: reduce)");
+    register(options.reducedMotion || {}, MEDIA_PREFERS_REDUCED_MOTION);
     update();
   }
 
@@ -597,40 +597,36 @@ function Media(Splide2, Components2, options) {
     }
   }
 
-  function register(key, options2, query) {
+  function register(options2, query) {
     var queryList = matchMedia(query);
     binder.bind(queryList, "change", update);
-    queries.push([key, options2, queryList]);
+    queries.push([options2, queryList]);
   }
 
   function update() {
-    var merged = accumulate();
     var direction = options.direction;
-    var destruction = merged.destroy;
+    var merged = queries.reduce(function (merged2, entry) {
+      return merge(merged2, entry[1].matches ? entry[0] : {});
+    }, {});
     forOwn(options, function (value, key) {
-      !(key in initialOptions) && delete options[key];
+      delete options[key];
     });
+    merge(options, merged);
 
-    if (destruction) {
-      Splide2.destroy(destruction === "completely");
+    if (options.destroy) {
+      Splide2.destroy(options.destroy === "completely");
     } else if (Splide2.state.is(DESTROYED)) {
       destroy(true);
       Splide2.mount();
     } else {
       Splide2.options = merged;
-      direction !== merged.direction && Splide2.refresh();
+      direction !== options.direction && Splide2.refresh();
     }
   }
 
-  function accumulate() {
-    return queries.reduce(function (merged, entry) {
-      return merge(merged, entry[2].matches ? entry[1] : {});
-    }, merge({}, initialOptions));
-  }
-
-  function matches(key) {
+  function matches(media) {
     return queries.some(function (entry) {
-      return entry[0] === key && entry[2].matches;
+      return entry[1].media === media && entry[1].matches;
     });
   }
 
@@ -2209,11 +2205,11 @@ function Drag(Splide2, Components2, options) {
     var velocity = computeVelocity(e);
     var destination = computeDestination(velocity);
     var rewind = options.rewind && options.rewindByDrag;
-    var reduced = Components2.Media.matches("motion");
+    var reduced = Components2.Media.matches(MEDIA_PREFERS_REDUCED_MOTION);
     var go = Controller.go;
 
     if (reduced) {
-      options.speed = Splide2._io.speed;
+      delete options.speed;
     }
 
     if (isFree) {
@@ -2969,8 +2965,7 @@ var _Splide = /*#__PURE__*/function () {
       assert(false, "Invalid JSON");
     }
 
-    this._io = merge({}, options);
-    this._options = options;
+    this._options = Object.create(merge({}, options));
   }
 
   var _proto = _Splide.prototype;

dist/js/splide.js

@@ -13,6 +13,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 })(this, function () {
   'use strict';
 
+  var MEDIA_PREFERS_REDUCED_MOTION = "(prefers-reduced-motion: reduce)";
   var CREATED = 1;
   var MOUNTED = 2;
   var IDLE = 3;
@@ -578,7 +579,6 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   function Media(Splide2, Components2, options) {
     var binder = EventBinder();
     var breakpoints = options.breakpoints || {};
-    var initialOptions = Splide2._io;
     var queries = [];
 
     function setup() {
@@ -586,9 +586,9 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       ownKeys(breakpoints).sort(function (n, m) {
         return isMin ? +n - +m : +m - +n;
       }).forEach(function (key) {
-        register(key, breakpoints[key], "(" + (isMin ? "min" : "max") + "-width:" + key + "px)");
+        register(breakpoints[key], "(" + (isMin ? "min" : "max") + "-width:" + key + "px)");
       });
-      register("motion", options.reducedMotion || {}, "(prefers-reduced-motion: reduce)");
+      register(options.reducedMotion || {}, MEDIA_PREFERS_REDUCED_MOTION);
       update();
     }
 
@@ -598,40 +598,36 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       }
     }
 
-    function register(key, options2, query) {
+    function register(options2, query) {
       var queryList = matchMedia(query);
       binder.bind(queryList, "change", update);
-      queries.push([key, options2, queryList]);
+      queries.push([options2, queryList]);
     }
 
     function update() {
-      var merged = accumulate();
       var direction = options.direction;
-      var destruction = merged.destroy;
+      var merged = queries.reduce(function (merged2, entry) {
+        return merge(merged2, entry[1].matches ? entry[0] : {});
+      }, {});
       forOwn(options, function (value, key) {
-        !(key in initialOptions) && delete options[key];
+        delete options[key];
       });
+      merge(options, merged);
 
-      if (destruction) {
-        Splide2.destroy(destruction === "completely");
+      if (options.destroy) {
+        Splide2.destroy(options.destroy === "completely");
       } else if (Splide2.state.is(DESTROYED)) {
         destroy(true);
         Splide2.mount();
       } else {
         Splide2.options = merged;
-        direction !== merged.direction && Splide2.refresh();
+        direction !== options.direction && Splide2.refresh();
       }
     }
 
-    function accumulate() {
-      return queries.reduce(function (merged, entry) {
-        return merge(merged, entry[2].matches ? entry[1] : {});
-      }, merge({}, initialOptions));
-    }
-
-    function matches(key) {
+    function matches(media) {
       return queries.some(function (entry) {
-        return entry[0] === key && entry[2].matches;
+        return entry[1].media === media && entry[1].matches;
       });
     }
 
@@ -2210,11 +2206,11 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       var velocity = computeVelocity(e);
       var destination = computeDestination(velocity);
       var rewind = options.rewind && options.rewindByDrag;
-      var reduced = Components2.Media.matches("motion");
+      var reduced = Components2.Media.matches(MEDIA_PREFERS_REDUCED_MOTION);
       var go = Controller.go;
 
       if (reduced) {
-        options.speed = Splide2._io.speed;
+        delete options.speed;
       }
 
       if (isFree) {
@@ -2970,8 +2966,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
         assert(false, "Invalid JSON");
       }
 
-      this._io = merge({}, options);
-      this._options = options;
+      this._options = Object.create(merge({}, options));
     }
 
     var _proto = _Splide.prototype;

dist/types/index.d.ts

@@ -958,12 +958,6 @@ declare class Splide {
      * An array with SyncTarget objects for splide instances to sync with.
      */
     readonly splides: SyncTarget[];
-    /**
-     * Keeps the initial options.
-     *
-     * @internal
-     */
-    readonly _io: Options;
     /**
      * The current options.
      */

src/js/components/Drag/Drag.ts

@@ -1,6 +1,7 @@
 import { CLASS_ARROW, CLASS_PAGINATION_PAGE } from '../../constants/classes';
 import { EVENT_DRAG, EVENT_DRAGGED, EVENT_DRAGGING, EVENT_MOUNTED, EVENT_UPDATED } from '../../constants/events';
 import { SCROLL_LISTENER_OPTIONS } from '../../constants/listener-options';
+import { MEDIA_PREFERS_REDUCED_MOTION } from '../../constants/media';
 import { DRAGGING, IDLE, MOVING, SCROLLING } from '../../constants/states';
 import { FADE, LOOP, SLIDE } from '../../constants/types';
 import { EventInterface } from '../../constructors';
@@ -228,11 +229,11 @@ export function Drag( Splide: Splide, Components: Components, options: Options )
     const velocity    = computeVelocity( e );
     const destination = computeDestination( velocity );
     const rewind      = options.rewind && options.rewindByDrag;
-    const reduced     = Components.Media.matches( 'motion' );
+    const reduced     = Components.Media.matches( MEDIA_PREFERS_REDUCED_MOTION );
     const { go } = Controller;
 
     if ( reduced ) {
-      options.speed = Splide._io.speed;
+      delete options.speed;
     }
 
     if ( isFree ) {

src/js/components/Media/Media.ts

@@ -1,3 +1,4 @@
+import { MEDIA_PREFERS_REDUCED_MOTION } from '../../constants/media';
 import { DESTROYED } from '../../constants/states';
 import { EventBinder } from '../../constructors';
 import { Splide } from '../../core/Splide/Splide';
@@ -29,15 +30,10 @@ export function Media( Splide: Splide, Components: Components, options: Options
   const binder      = EventBinder();
   const breakpoints = options.breakpoints || {};
 
-  /**
-   * Keeps the initial options to apply when no matched query exists.
-   */
-  const initialOptions = Splide._io;
-
   /**
    * Stores options and MediaQueryList object.
    */
-  const queries: Array<[ string, Options, MediaQueryList ]> = [];
+  const queries: Array<[ Options, MediaQueryList ]> = [];
 
   /**
    * Called when the component is constructed.
@@ -48,10 +44,10 @@ export function Media( Splide: Splide, Components: Components, options: Options
     ownKeys( breakpoints )
       .sort( ( n, m ) => isMin ? +n - +m : +m - +n )
       .forEach( key => {
-        register( key, breakpoints[ key ], `(${ isMin ? 'min' : 'max' }-width:${ key }px)` );
+        register( breakpoints[ key ], `(${ isMin ? 'min' : 'max' }-width:${ key }px)` );
       } );
 
-    register( 'motion', options.reducedMotion || {}, '(prefers-reduced-motion: reduce)' );
+    register( options.reducedMotion || {}, MEDIA_PREFERS_REDUCED_MOTION );
     update();
   }
 
@@ -69,60 +65,47 @@ export function Media( Splide: Splide, Components: Components, options: Options
   /**
    * Registers entries as [ Options, media query string ].
    *
-   * @param key     - An unique key.
-   * @param options - Options merged to current options when the query matches the media.
+   * @param options - Options merged to current options when the document matches the query.
    * @param query   - A query string.
    */
-  function register( key: string, options: Options, query: string ): void {
+  function register( options: Options, query: string ): void {
     const queryList = matchMedia( query );
     binder.bind( queryList, 'change', update );
-    queries.push( [ key, options, queryList ] );
+    queries.push( [ options, queryList ] );
   }
 
   /**
    * Checks all media queries in entries and updates options.
    */
   function update(): void {
-    const merged    = accumulate();
     const direction = options.direction;
-    const { destroy: destruction } = merged;
+    const merged = queries.reduce<Options>( ( merged, entry ) => {
+      return merge( merged, entry[ 1 ].matches ? entry[ 0 ] : {} );
+    }, {} );
 
-    forOwn( options, ( value, key ) => {
-      ! ( key in initialOptions ) && delete options[ key ];
-    } );
+    forOwn( options, ( value, key ) => { delete options[ key ] } );
+    merge( options, merged );
 
-    if ( destruction ) {
-      Splide.destroy( destruction === 'completely' );
+    if ( options.destroy ) {
+      Splide.destroy( options.destroy === 'completely' );
     } else if ( Splide.state.is( DESTROYED ) ) {
       destroy( true );
       Splide.mount();
     } else {
       Splide.options = merged;
-      direction !== merged.direction && Splide.refresh();
+      direction !== options.direction && Splide.refresh();
     }
   }
 
   /**
-   * Accumulates all options assigned to predefined media queries,
-   * and merges them into user options.
-   *
-   * @return Merged options.
-   */
-  function accumulate(): Options {
-    return queries.reduce( ( merged, entry ) => {
-      return merge( merged, entry[ 2 ].matches ? entry[ 1 ] : {} );
-    }, merge( {}, initialOptions ) );
-  }
-
-  /**
-   * Checks if the query registered by the specified key matches the current media or not.
+   * Checks if the document matches the registered media query or not.
    *
-   * @param key - A key.
+   * @param media - A registered media query.
    *
-   * @return `true` if the query matches the media, or otherwise `false`.
+   * @return `true` if the document matches the query, or otherwise `false`.
    */
-  function matches( key: string ): boolean {
-    return queries.some( entry => entry[ 0 ] === key && entry[ 2 ].matches );
+  function matches( media: string ): boolean {
+    return queries.some( entry => entry[ 1 ].media === media && entry[ 1 ].matches );
   }
 
   return {

src/js/constants/media.ts

@@ -0,0 +1 @@
+export const MEDIA_PREFERS_REDUCED_MOTION = '(prefers-reduced-motion: reduce)';

src/js/core/Splide/Splide.ts

@@ -53,13 +53,6 @@ export class Splide {
    */
   readonly splides: SyncTarget[] = [];
 
-  /**
-   * Keeps the initial options.
-   *
-   * @internal
-   */
-  readonly _io: Options;
-
   /**
    * The current options.
    */
@@ -100,8 +93,7 @@ export class Splide {
       assert( false, 'Invalid JSON' );
     }
 
-    this._io      = merge( {}, options );
-    this._options = options;
+    this._options = Object.create( merge( {}, options ) );
   }
 
   /**