Change the setup flow of components.

dist/js/splide.cjs.js

@@ -732,14 +732,10 @@ var min = Math.min,
  */
 
 function Options(Splide, Components, options) {
-  try {
-    merge(options, JSON.parse(getAttribute(Splide.root, DATA_ATTRIBUTE)));
-  } catch (e) {
-    assert(false, e.message);
-  }
-
-  var initialOptions = merge({}, options);
-  var breakpoints = options.breakpoints;
+  /**
+   * Keeps the initial options to apply when no matched query exists.
+   */
+  var initialOptions;
   /**
    * Stores breakpoints with the MediaQueryList object.
    */
@@ -750,11 +746,27 @@ function Options(Splide, Components, options) {
    */
 
   var currPoint;
+  /**
+   * Called when the component is constructed.
+   */
+
+  function setup() {
+    try {
+      merge(options, JSON.parse(getAttribute(Splide.root, DATA_ATTRIBUTE)));
+    } catch (e) {
+      assert(false, e.message);
+    }
+
+    initialOptions = merge({}, options);
+  }
   /**
    * Called when the component is mounted.
    */
 
+
   function mount() {
+    var breakpoints = options.breakpoints;
+
     if (breakpoints) {
       points = Object.keys(breakpoints).sort(function (n, m) {
         return +n - +m;
@@ -800,22 +812,23 @@ function Options(Splide, Components, options) {
 
 
   function onMatch(point) {
-    var options = breakpoints[point] || initialOptions;
+    var newOptions = options.breakpoints[point] || initialOptions;
 
-    if (options.destroy) {
+    if (newOptions.destroy) {
       Splide.options = initialOptions;
-      Splide.destroy(options.destroy === 'completely');
+      Splide.destroy(newOptions.destroy === 'completely');
     } else {
       if (Splide.state.is(DESTROYED)) {
         destroy(true);
         Splide.mount();
       }
 
-      Splide.options = options;
+      Splide.options = newOptions;
     }
   }
 
   return {
+    setup: setup,
     mount: mount,
     destroy: destroy
   };
@@ -1513,29 +1526,22 @@ function Elements(Splide, Components, options) {
 
   var list;
   /**
-   * Called when the component is mounted.
+   * Called when the component is constructed.
    */
 
-  function mount() {
-    init();
+  function setup() {
+    collect();
     identify();
-    on(EVENT_REFRESH, function () {
-      destroy();
-      init();
-    });
-    on(EVENT_UPDATED, function () {
-      removeClass(root, classes);
-      addClass(root, classes = getClasses());
-    });
+    addClass(root, classes = getClasses());
   }
   /**
-   * Initializes the component.
+   * Called when the component is mounted.
    */
 
 
-  function init() {
-    collect();
-    addClass(root, classes = getClasses());
+  function mount() {
+    on(EVENT_REFRESH, refresh);
+    on(EVENT_UPDATED, update);
   }
   /**
    * Destroys the component.
@@ -1546,6 +1552,24 @@ function Elements(Splide, Components, options) {
     empty(slides);
     removeClass(root, classes);
   }
+  /**
+   * Recollects slide elements.
+   */
+
+
+  function refresh() {
+    destroy();
+    setup();
+  }
+  /**
+   * Updates the status of elements.
+   */
+
+
+  function update() {
+    removeClass(root, classes);
+    addClass(root, classes = getClasses());
+  }
   /**
    * Collects elements which the slider consists of.
    */
@@ -1606,6 +1630,7 @@ function Elements(Splide, Components, options) {
   }
 
   return assign(elements, {
+    setup: setup,
     mount: mount,
     destroy: destroy
   });
@@ -2986,35 +3011,44 @@ function Controller(Splide, Components, options) {
    * The latest number of slides.
    */
 
-  var slideCount = getLength(true);
+  var slideCount;
   /**
    * The latest `perMove` value.
    */
 
-  var perMove = options.perMove;
+  var perMove;
   /**
    * The latest `perMove` value.
    */
 
-  var perPage = options.perPage;
+  var perPage;
   /**
    * Called when the component is mounted.
    */
 
   function mount() {
+    init();
     Move.jump(currIndex);
-    on([EVENT_UPDATED, EVENT_REFRESH], function () {
-      slideCount = getLength(true);
-      perMove = options.perMove;
-      perPage = options.perPage;
-    });
+    on([EVENT_UPDATED, EVENT_REFRESH], init);
     on(EVENT_SCROLLED, function () {
       setIndex(Move.toIndex(Move.getPosition()));
     }, 0);
   }
+  /**
+   * Initializes the component.
+   */
+
+
+  function init() {
+    slideCount = getLength(true);
+    perMove = options.perMove;
+    perPage = options.perPage;
+  }
   /**
    * Moves the slider by the control pattern.
    *
+   * @todo
+   *
    * @see `Splide#go()`
    *
    * @param control        - A control pattern.
@@ -3026,7 +3060,7 @@ function Controller(Splide, Components, options) {
     var dest = parse(control);
     var index = loop(dest);
 
-    if (!Move.isBusy() && index > -1 && (allowSameIndex || index !== currIndex)) {
+    if (index > -1 && !Move.isBusy() && (allowSameIndex || index !== currIndex)) {
       setIndex(index);
       Move.move(dest, index, prevIndex);
     }
@@ -3253,6 +3287,7 @@ function Controller(Splide, Components, options) {
     getNext: getNext,
     getPrev: getPrev,
     getEnd: getEnd,
+    setIndex: setIndex,
     getIndex: getIndex,
     toIndex: toIndex,
     toPage: toPage,
@@ -5062,15 +5097,19 @@ var Splide = /*#__PURE__*/function () {
     this.state.set(CREATED);
     this.Transition = Transition || this.Transition || (this.is(FADE) ? Fade : Slide);
     this.Extensions = Extensions || this.Extensions;
-    var Components = assign({}, ComponentConstructors, this.Extensions, {
+    var Constructors = assign({}, ComponentConstructors, this.Extensions, {
       Transition: this.Transition
     });
-    forOwn(Components, function (Component, key) {
+    var Components = this.Components;
+    forOwn(Constructors, function (Component, key) {
       var component = Component(_this3, _this3.Components, _this3.opts);
-      _this3.Components[key] = component;
+      Components[key] = component;
+      component.setup && component.setup();
+    });
+    forOwn(Components, function (component) {
       component.mount && component.mount();
     });
-    forOwn(this.Components, function (component) {
+    forOwn(Components, function (component) {
       component.mounted && component.mounted();
     });
     this.emit(EVENT_MOUNTED);

dist/js/splide.esm.js

@@ -727,14 +727,10 @@ var min = Math.min,
  */
 
 function Options(Splide, Components, options) {
-  try {
-    merge(options, JSON.parse(getAttribute(Splide.root, DATA_ATTRIBUTE)));
-  } catch (e) {
-    assert(false, e.message);
-  }
-
-  var initialOptions = merge({}, options);
-  var breakpoints = options.breakpoints;
+  /**
+   * Keeps the initial options to apply when no matched query exists.
+   */
+  var initialOptions;
   /**
    * Stores breakpoints with the MediaQueryList object.
    */
@@ -745,11 +741,27 @@ function Options(Splide, Components, options) {
    */
 
   var currPoint;
+  /**
+   * Called when the component is constructed.
+   */
+
+  function setup() {
+    try {
+      merge(options, JSON.parse(getAttribute(Splide.root, DATA_ATTRIBUTE)));
+    } catch (e) {
+      assert(false, e.message);
+    }
+
+    initialOptions = merge({}, options);
+  }
   /**
    * Called when the component is mounted.
    */
 
+
   function mount() {
+    var breakpoints = options.breakpoints;
+
     if (breakpoints) {
       points = Object.keys(breakpoints).sort(function (n, m) {
         return +n - +m;
@@ -795,22 +807,23 @@ function Options(Splide, Components, options) {
 
 
   function onMatch(point) {
-    var options = breakpoints[point] || initialOptions;
+    var newOptions = options.breakpoints[point] || initialOptions;
 
-    if (options.destroy) {
+    if (newOptions.destroy) {
       Splide.options = initialOptions;
-      Splide.destroy(options.destroy === 'completely');
+      Splide.destroy(newOptions.destroy === 'completely');
     } else {
       if (Splide.state.is(DESTROYED)) {
         destroy(true);
         Splide.mount();
       }
 
-      Splide.options = options;
+      Splide.options = newOptions;
     }
   }
 
   return {
+    setup: setup,
     mount: mount,
     destroy: destroy
   };
@@ -1508,29 +1521,22 @@ function Elements(Splide, Components, options) {
 
   var list;
   /**
-   * Called when the component is mounted.
+   * Called when the component is constructed.
    */
 
-  function mount() {
-    init();
+  function setup() {
+    collect();
     identify();
-    on(EVENT_REFRESH, function () {
-      destroy();
-      init();
-    });
-    on(EVENT_UPDATED, function () {
-      removeClass(root, classes);
-      addClass(root, classes = getClasses());
-    });
+    addClass(root, classes = getClasses());
   }
   /**
-   * Initializes the component.
+   * Called when the component is mounted.
    */
 
 
-  function init() {
-    collect();
-    addClass(root, classes = getClasses());
+  function mount() {
+    on(EVENT_REFRESH, refresh);
+    on(EVENT_UPDATED, update);
   }
   /**
    * Destroys the component.
@@ -1541,6 +1547,24 @@ function Elements(Splide, Components, options) {
     empty(slides);
     removeClass(root, classes);
   }
+  /**
+   * Recollects slide elements.
+   */
+
+
+  function refresh() {
+    destroy();
+    setup();
+  }
+  /**
+   * Updates the status of elements.
+   */
+
+
+  function update() {
+    removeClass(root, classes);
+    addClass(root, classes = getClasses());
+  }
   /**
    * Collects elements which the slider consists of.
    */
@@ -1601,6 +1625,7 @@ function Elements(Splide, Components, options) {
   }
 
   return assign(elements, {
+    setup: setup,
     mount: mount,
     destroy: destroy
   });
@@ -2981,35 +3006,44 @@ function Controller(Splide, Components, options) {
    * The latest number of slides.
    */
 
-  var slideCount = getLength(true);
+  var slideCount;
   /**
    * The latest `perMove` value.
    */
 
-  var perMove = options.perMove;
+  var perMove;
   /**
    * The latest `perMove` value.
    */
 
-  var perPage = options.perPage;
+  var perPage;
   /**
    * Called when the component is mounted.
    */
 
   function mount() {
+    init();
     Move.jump(currIndex);
-    on([EVENT_UPDATED, EVENT_REFRESH], function () {
-      slideCount = getLength(true);
-      perMove = options.perMove;
-      perPage = options.perPage;
-    });
+    on([EVENT_UPDATED, EVENT_REFRESH], init);
     on(EVENT_SCROLLED, function () {
       setIndex(Move.toIndex(Move.getPosition()));
     }, 0);
   }
+  /**
+   * Initializes the component.
+   */
+
+
+  function init() {
+    slideCount = getLength(true);
+    perMove = options.perMove;
+    perPage = options.perPage;
+  }
   /**
    * Moves the slider by the control pattern.
    *
+   * @todo
+   *
    * @see `Splide#go()`
    *
    * @param control        - A control pattern.
@@ -3021,7 +3055,7 @@ function Controller(Splide, Components, options) {
     var dest = parse(control);
     var index = loop(dest);
 
-    if (!Move.isBusy() && index > -1 && (allowSameIndex || index !== currIndex)) {
+    if (index > -1 && !Move.isBusy() && (allowSameIndex || index !== currIndex)) {
       setIndex(index);
       Move.move(dest, index, prevIndex);
     }
@@ -3248,6 +3282,7 @@ function Controller(Splide, Components, options) {
     getNext: getNext,
     getPrev: getPrev,
     getEnd: getEnd,
+    setIndex: setIndex,
     getIndex: getIndex,
     toIndex: toIndex,
     toPage: toPage,
@@ -5057,15 +5092,19 @@ var Splide = /*#__PURE__*/function () {
     this.state.set(CREATED);
     this.Transition = Transition || this.Transition || (this.is(FADE) ? Fade : Slide);
     this.Extensions = Extensions || this.Extensions;
-    var Components = assign({}, ComponentConstructors, this.Extensions, {
+    var Constructors = assign({}, ComponentConstructors, this.Extensions, {
       Transition: this.Transition
     });
-    forOwn(Components, function (Component, key) {
+    var Components = this.Components;
+    forOwn(Constructors, function (Component, key) {
       var component = Component(_this3, _this3.Components, _this3.opts);
-      _this3.Components[key] = component;
+      Components[key] = component;
+      component.setup && component.setup();
+    });
+    forOwn(Components, function (component) {
       component.mount && component.mount();
     });
-    forOwn(this.Components, function (component) {
+    forOwn(Components, function (component) {
       component.mounted && component.mounted();
     });
     this.emit(EVENT_MOUNTED);

dist/js/splide.js

@@ -731,14 +731,10 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
    */
 
   function Options(Splide, Components, options) {
-    try {
-      merge(options, JSON.parse(getAttribute(Splide.root, DATA_ATTRIBUTE)));
-    } catch (e) {
-      assert(false, e.message);
-    }
-
-    var initialOptions = merge({}, options);
-    var breakpoints = options.breakpoints;
+    /**
+     * Keeps the initial options to apply when no matched query exists.
+     */
+    var initialOptions;
     /**
      * Stores breakpoints with the MediaQueryList object.
      */
@@ -749,11 +745,27 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
      */
 
     var currPoint;
+    /**
+     * Called when the component is constructed.
+     */
+
+    function setup() {
+      try {
+        merge(options, JSON.parse(getAttribute(Splide.root, DATA_ATTRIBUTE)));
+      } catch (e) {
+        assert(false, e.message);
+      }
+
+      initialOptions = merge({}, options);
+    }
     /**
      * Called when the component is mounted.
      */
 
+
     function mount() {
+      var breakpoints = options.breakpoints;
+
       if (breakpoints) {
         points = Object.keys(breakpoints).sort(function (n, m) {
           return +n - +m;
@@ -799,22 +811,23 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 
     function onMatch(point) {
-      var options = breakpoints[point] || initialOptions;
+      var newOptions = options.breakpoints[point] || initialOptions;
 
-      if (options.destroy) {
+      if (newOptions.destroy) {
         Splide.options = initialOptions;
-        Splide.destroy(options.destroy === 'completely');
+        Splide.destroy(newOptions.destroy === 'completely');
       } else {
         if (Splide.state.is(DESTROYED)) {
           destroy(true);
           Splide.mount();
         }
 
-        Splide.options = options;
+        Splide.options = newOptions;
       }
     }
 
     return {
+      setup: setup,
       mount: mount,
       destroy: destroy
     };
@@ -1512,29 +1525,22 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
     var list;
     /**
-     * Called when the component is mounted.
+     * Called when the component is constructed.
      */
 
-    function mount() {
-      init();
+    function setup() {
+      collect();
       identify();
-      on(EVENT_REFRESH, function () {
-        destroy();
-        init();
-      });
-      on(EVENT_UPDATED, function () {
-        removeClass(root, classes);
-        addClass(root, classes = getClasses());
-      });
+      addClass(root, classes = getClasses());
     }
     /**
-     * Initializes the component.
+     * Called when the component is mounted.
      */
 
 
-    function init() {
-      collect();
-      addClass(root, classes = getClasses());
+    function mount() {
+      on(EVENT_REFRESH, refresh);
+      on(EVENT_UPDATED, update);
     }
     /**
      * Destroys the component.
@@ -1545,6 +1551,24 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       empty(slides);
       removeClass(root, classes);
     }
+    /**
+     * Recollects slide elements.
+     */
+
+
+    function refresh() {
+      destroy();
+      setup();
+    }
+    /**
+     * Updates the status of elements.
+     */
+
+
+    function update() {
+      removeClass(root, classes);
+      addClass(root, classes = getClasses());
+    }
     /**
      * Collects elements which the slider consists of.
      */
@@ -1605,6 +1629,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     }
 
     return assign(elements, {
+      setup: setup,
       mount: mount,
       destroy: destroy
     });
@@ -2985,35 +3010,44 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
      * The latest number of slides.
      */
 
-    var slideCount = getLength(true);
+    var slideCount;
     /**
      * The latest `perMove` value.
      */
 
-    var perMove = options.perMove;
+    var perMove;
     /**
      * The latest `perMove` value.
      */
 
-    var perPage = options.perPage;
+    var perPage;
     /**
      * Called when the component is mounted.
      */
 
     function mount() {
+      init();
       Move.jump(currIndex);
-      on([EVENT_UPDATED, EVENT_REFRESH], function () {
-        slideCount = getLength(true);
-        perMove = options.perMove;
-        perPage = options.perPage;
-      });
+      on([EVENT_UPDATED, EVENT_REFRESH], init);
       on(EVENT_SCROLLED, function () {
         setIndex(Move.toIndex(Move.getPosition()));
       }, 0);
     }
+    /**
+     * Initializes the component.
+     */
+
+
+    function init() {
+      slideCount = getLength(true);
+      perMove = options.perMove;
+      perPage = options.perPage;
+    }
     /**
      * Moves the slider by the control pattern.
      *
+     * @todo
+     *
      * @see `Splide#go()`
      *
      * @param control        - A control pattern.
@@ -3025,7 +3059,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       var dest = parse(control);
       var index = loop(dest);
 
-      if (!Move.isBusy() && index > -1 && (allowSameIndex || index !== currIndex)) {
+      if (index > -1 && !Move.isBusy() && (allowSameIndex || index !== currIndex)) {
         setIndex(index);
         Move.move(dest, index, prevIndex);
       }
@@ -3252,6 +3286,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       getNext: getNext,
       getPrev: getPrev,
       getEnd: getEnd,
+      setIndex: setIndex,
       getIndex: getIndex,
       toIndex: toIndex,
       toPage: toPage,
@@ -4768,7 +4803,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     };
   }
 
-  var CoreComponents = /*#__PURE__*/Object.freeze({
+  var ComponentConstructors = /*#__PURE__*/Object.freeze({
     __proto__: null,
     Options: Options,
     Direction: Direction,
@@ -5061,15 +5096,19 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       this.state.set(CREATED);
       this._private_Transition = Transition || this._private_Transition || (this.is(FADE) ? Fade : Slide);
       this._private_Extensions = Extensions || this._private_Extensions;
-      var Components = assign({}, CoreComponents, this._private_Extensions, {
+      var Constructors = assign({}, ComponentConstructors, this._private_Extensions, {
         Transition: this._private_Transition
       });
-      forOwn(Components, function (Component, key) {
+      var Components = this.Components;
+      forOwn(Constructors, function (Component, key) {
         var component = Component(_this3, _this3.Components, _this3._private_opts);
-        _this3.Components[key] = component;
+        Components[key] = component;
+        component.setup && component.setup();
+      });
+      forOwn(Components, function (component) {
         component.mount && component.mount();
       });
-      forOwn(this.Components, function (component) {
+      forOwn(Components, function (component) {
         component.mounted && component.mounted();
       });
       this.emit(EVENT_MOUNTED);

dist/types/components/Controller/Controller.d.ts

@@ -10,6 +10,7 @@ export interface ControllerComponent extends BaseComponent {
     getNext(destination?: boolean): number;
     getPrev(destination?: boolean): number;
     getEnd(): number;
+    setIndex(index: number): void;
     getIndex(prev?: boolean): number;
     toIndex(page: number): number;
     toPage(index: number): number;

dist/types/components/Controller/Controller.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Controller.d.ts","sourceRoot":"","sources":["Controller.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAIjE;;;;GAIG;AACH,MAAM,WAAW,mBAAoB,SAAQ,aAAa;IACxD,EAAE,CAAE,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE,cAAc,CAAC,EAAE,OAAO,GAAI,IAAI,CAAC;IAC/D,OAAO,CAAE,WAAW,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACzC,OAAO,CAAE,WAAW,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACzC,MAAM,IAAI,MAAM,CAAC;IACjB,QAAQ,CAAE,IAAI,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACnC,OAAO,CAAE,IAAI,EAAE,MAAM,GAAI,MAAM,CAAC;IAChC,MAAM,CAAE,KAAK,EAAE,MAAM,GAAI,MAAM,CAAC;IAChC,QAAQ,IAAI,OAAO,CAAC;CACrB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,mBAAmB,CAwR1G"}
+{"version":3,"file":"Controller.d.ts","sourceRoot":"","sources":["Controller.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAIjE;;;;GAIG;AACH,MAAM,WAAW,mBAAoB,SAAQ,aAAa;IACxD,EAAE,CAAE,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE,cAAc,CAAC,EAAE,OAAO,GAAI,IAAI,CAAC;IAC/D,OAAO,CAAE,WAAW,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACzC,OAAO,CAAE,WAAW,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACzC,MAAM,IAAI,MAAM,CAAC;IACjB,QAAQ,CAAE,KAAK,EAAE,MAAM,GAAI,IAAI,CAAC;IAChC,QAAQ,CAAE,IAAI,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACnC,OAAO,CAAE,IAAI,EAAE,MAAM,GAAI,MAAM,CAAC;IAChC,MAAM,CAAE,KAAK,EAAE,MAAM,GAAI,MAAM,CAAC;IAChC,QAAQ,IAAI,OAAO,CAAC;CACrB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,mBAAmB,CAiS1G"}

dist/types/components/Elements/Elements.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Elements.d.ts","sourceRoot":"","sources":["Elements.ts"],"names":[],"mappings":"AAoBA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAKjE;;;;GAIG;AACH,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,WAAW,CAAC;IAClB,MAAM,EAAE,WAAW,CAAC;IACpB,KAAK,EAAE,WAAW,CAAC;IACnB,IAAI,EAAE,WAAW,CAAC;IAClB,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,MAAM,EAAE,WAAW,CAAC;IACpB,IAAI,EAAE,iBAAiB,CAAC;IACxB,IAAI,EAAE,iBAAiB,CAAC;IACxB,GAAG,EAAE,WAAW,CAAC;IACjB,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,EAAE,WAAW,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,WAAW,iBAAkB,SAAQ,aAAa,EAAE,iBAAiB;CAC1E;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,iBAAiB,CAoItG"}
+{"version":3,"file":"Elements.d.ts","sourceRoot":"","sources":["Elements.ts"],"names":[],"mappings":"AAoBA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAKjE;;;;GAIG;AACH,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,WAAW,CAAC;IAClB,MAAM,EAAE,WAAW,CAAC;IACpB,KAAK,EAAE,WAAW,CAAC;IACnB,IAAI,EAAE,WAAW,CAAC;IAClB,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,MAAM,EAAE,WAAW,CAAC;IACpB,IAAI,EAAE,iBAAiB,CAAC;IACxB,IAAI,EAAE,iBAAiB,CAAC;IACxB,GAAG,EAAE,WAAW,CAAC;IACjB,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,EAAE,WAAW,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,WAAW,iBAAkB,SAAQ,aAAa,EAAE,iBAAiB;CAC1E;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,iBAAiB,CA4ItG"}

dist/types/components/Options/Options.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Options.d.ts","sourceRoot":"","sources":["Options.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAIjE;;;;GAIG;AACH,MAAM,WAAW,gBAAiB,SAAQ,aAAa;CACtD;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,OAAO,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,gBAAgB,CAqFpG"}
+{"version":3,"file":"Options.d.ts","sourceRoot":"","sources":["Options.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAIjE;;;;GAIG;AACH,MAAM,WAAW,gBAAiB,SAAQ,aAAa;CACtD;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,OAAO,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,gBAAgB,CAiGpG"}

dist/types/core/Splide/Splide.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Splide.d.ts","sourceRoot":"","sources":["Splide.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAM9D,OAAO,EAAY,gBAAgB,EAAE,cAAc,EAAS,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEpG,OAAO,EAAE,oBAAoB,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAIxE;;;;GAIG;AACH,qBAAa,MAAM;IACjB;;OAEG;IACH,MAAM,CAAC,QAAQ,EAAE,OAAO,CAAM;IAE9B;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,MAAM;;;;;;MAAU;IAEhC;;OAEG;IACH,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;IAE3B;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,cAAc,CAAc;IAE5C;;OAEG;IACH,QAAQ,CAAC,UAAU,EAAE,UAAU,CAAoB;IAEnD;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAoB;IAE/C;;OAEG;IACH,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,CAAM;IAEhC;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAe;IAEpC;;OAEG;IACH,OAAO,CAAC,UAAU,CAA4C;IAE9D;;OAEG;IACH,OAAO,CAAC,UAAU,CAAuB;IAEzC;;;;;OAKG;gBACU,MAAM,EAAE,MAAM,GAAG,WAAW,EAAE,OAAO,CAAC,EAAE,OAAO;IAU5D;;;;;;;OAOG;IACH,KAAK,CAAE,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,oBAAoB,CAAC,EAAE,UAAU,CAAC,EAAE,oBAAoB,GAAI,IAAI;IA4BnG;;;;;;;;;;;;;;;;;OAiBG;IACH,IAAI,CAAE,MAAM,EAAE,MAAM,GAAI,IAAI;IAM5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAiCG;IACH,EAAE,CAAE,OAAO,EAAE,MAAM,GAAG,MAAM,GAAI,IAAI;IAIpC;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,EAAE,CAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,gBAAgB,GAAI,IAAI;IAKtD;;;;;;;;;;;;;;;;;;OAkBG;IACH,GAAG,CAAE,MAAM,EAAE,MAAM,GAAI,IAAI;IAK3B;;;;;;;OAOG;IACH,IAAI,CAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,GAAI,IAAI;IAK3C;;;;;;;;;;;;;;;;;;;OAmBG;IACH,GAAG,CAAE,MAAM,EAAE,MAAM,GAAG,WAAW,GAAG,KAAK,CAAC,MAAM,GAAG,WAAW,CAAC,EAAE,KAAK,CAAC,EAAE,MAAM,GAAI,IAAI;IAKvF;;;;;OAKG;IACH,MAAM,CAAE,OAAO,EAAE,YAAY,GAAI,IAAI;IAKrC;;;;;;OAMG;IACH,EAAE,CAAE,IAAI,EAAE,MAAM,GAAI,OAAO;IAI3B;;;;OAIG;IACH,OAAO,IAAI,IAAI;IAKf;;;;;;OAMG;IACH,OAAO,CAAE,UAAU,CAAC,EAAE,OAAO,GAAI,IAAI;IAoBrC;;;;OAIG;IACH,IAAI,OAAO,IAAI,OAAO,CAErB;IAED;;;;OAIG;IACH,IAAI,OAAO,CAAE,OAAO,EAAE,OAAO,EAO5B;IAED;;;;OAIG;IACH,IAAI,MAAM,IAAI,MAAM,CAEnB;IAED;;;;OAIG;IACH,IAAI,KAAK,IAAI,MAAM,CAElB;CACF"}
+{"version":3,"file":"Splide.d.ts","sourceRoot":"","sources":["Splide.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAM9D,OAAO,EAAY,gBAAgB,EAAE,cAAc,EAAS,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEpG,OAAO,EAAE,oBAAoB,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAIxE;;;;GAIG;AACH,qBAAa,MAAM;IACjB;;OAEG;IACH,MAAM,CAAC,QAAQ,EAAE,OAAO,CAAM;IAE9B;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,MAAM;;;;;;MAAU;IAEhC;;OAEG;IACH,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;IAE3B;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,cAAc,CAAc;IAE5C;;OAEG;IACH,QAAQ,CAAC,UAAU,EAAE,UAAU,CAAoB;IAEnD;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAoB;IAE/C;;OAEG;IACH,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,CAAM;IAEhC;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAe;IAEpC;;OAEG;IACH,OAAO,CAAC,UAAU,CAA4C;IAE9D;;OAEG;IACH,OAAO,CAAC,UAAU,CAAuB;IAEzC;;;;;OAKG;gBACU,MAAM,EAAE,MAAM,GAAG,WAAW,EAAE,OAAO,CAAC,EAAE,OAAO;IAU5D;;;;;;;OAOG;IACH,KAAK,CAAE,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,oBAAoB,CAAC,EAAE,UAAU,CAAC,EAAE,oBAAoB,GAAI,IAAI;IAiCnG;;;;;;;;;;;;;;;;;OAiBG;IACH,IAAI,CAAE,MAAM,EAAE,MAAM,GAAI,IAAI;IAM5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAiCG;IACH,EAAE,CAAE,OAAO,EAAE,MAAM,GAAG,MAAM,GAAI,IAAI;IAIpC;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,EAAE,CAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,gBAAgB,GAAI,IAAI;IAKtD;;;;;;;;;;;;;;;;;;OAkBG;IACH,GAAG,CAAE,MAAM,EAAE,MAAM,GAAI,IAAI;IAK3B;;;;;;;OAOG;IACH,IAAI,CAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,GAAI,IAAI;IAK3C;;;;;;;;;;;;;;;;;;;OAmBG;IACH,GAAG,CAAE,MAAM,EAAE,MAAM,GAAG,WAAW,GAAG,KAAK,CAAC,MAAM,GAAG,WAAW,CAAC,EAAE,KAAK,CAAC,EAAE,MAAM,GAAI,IAAI;IAKvF;;;;;OAKG;IACH,MAAM,CAAE,OAAO,EAAE,YAAY,GAAI,IAAI;IAKrC;;;;;;OAMG;IACH,EAAE,CAAE,IAAI,EAAE,MAAM,GAAI,OAAO;IAI3B;;;;OAIG;IACH,OAAO,IAAI,IAAI;IAKf;;;;;;OAMG;IACH,OAAO,CAAE,UAAU,CAAC,EAAE,OAAO,GAAI,IAAI;IAoBrC;;;;OAIG;IACH,IAAI,OAAO,IAAI,OAAO,CAErB;IAED;;;;OAIG;IACH,IAAI,OAAO,CAAE,OAAO,EAAE,OAAO,EAO5B;IAED;;;;OAIG;IACH,IAAI,MAAM,IAAI,MAAM,CAEnB;IAED;;;;OAIG;IACH,IAAI,KAAK,IAAI,MAAM,CAElB;CACF"}

dist/types/types/general.d.ts

@@ -19,6 +19,7 @@ export declare type ComponentConstructor = (Splide: Splide, Components: Componen
  * @since 3.0.0
  */
 export interface BaseComponent {
+    setup?(): void;
     mount?(): void;
     mounted?(): void;
     destroy?(completely?: boolean): void;

dist/types/types/general.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"general.d.ts","sourceRoot":"","sources":["general.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAGpC;;;;GAIG;AACH,oBAAY,WAAW,GAAG,CAAE,GAAG,IAAI,EAAE,GAAG,EAAE,KAAM,GAAG,CAAC;AAEpD;;;;GAIG;AACH,oBAAY,oBAAoB,GAAG,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,KAAM,aAAa,CAAC;AAEjH;;;;GAIG;AACH,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,IAAI,IAAI,CAAC;IACf,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB,OAAO,CAAC,CAAE,UAAU,CAAC,EAAE,OAAO,GAAI,IAAI,CAAC;CACxC;AAED;;;;GAIG;AACH,MAAM,WAAW,mBAAoB,SAAQ,aAAa;IACxD,KAAK,CAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,IAAI,GAAI,IAAI,CAAC;IAC/C,MAAM,IAAI,IAAI,CAAC;CAChB;AAED;;;;GAIG;AACH,oBAAY,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,GAClD,OAAO,CAAC;KACN,CAAC,IAAI,MAAM,OAAO,cAAc,GAAI,UAAU,CAAC,OAAO,cAAc,CAAE,CAAC,CAAE,CAAC;CAC7E,CAAC,GACA;IAAE,UAAU,EAAE,mBAAmB,CAAA;CAAE,CAAA"}
+{"version":3,"file":"general.d.ts","sourceRoot":"","sources":["general.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAGpC;;;;GAIG;AACH,oBAAY,WAAW,GAAG,CAAE,GAAG,IAAI,EAAE,GAAG,EAAE,KAAM,GAAG,CAAC;AAEpD;;;;GAIG;AACH,oBAAY,oBAAoB,GAAG,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,KAAM,aAAa,CAAC;AAEjH;;;;GAIG;AACH,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,IAAI,IAAI,CAAC;IACf,KAAK,CAAC,IAAI,IAAI,CAAC;IACf,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB,OAAO,CAAC,CAAE,UAAU,CAAC,EAAE,OAAO,GAAI,IAAI,CAAC;CACxC;AAED;;;;GAIG;AACH,MAAM,WAAW,mBAAoB,SAAQ,aAAa;IACxD,KAAK,CAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,IAAI,GAAI,IAAI,CAAC;IAC/C,MAAM,IAAI,IAAI,CAAC;CAChB;AAED;;;;GAIG;AACH,oBAAY,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,GAClD,OAAO,CAAC;KACN,CAAC,IAAI,MAAM,OAAO,cAAc,GAAI,UAAU,CAAC,OAAO,cAAc,CAAE,CAAC,CAAE,CAAC;CAC7E,CAAC,GACA;IAAE,UAAU,EAAE,mBAAmB,CAAA;CAAE,CAAA"}

src/js/components/Controller/Controller.ts

@@ -16,6 +16,7 @@ export interface ControllerComponent extends BaseComponent {
   getNext( destination?: boolean ): number;
   getPrev( destination?: boolean ): number;
   getEnd(): number;
+  setIndex( index: number ): void;
   getIndex( prev?: boolean ): number;
   toIndex( page: number ): number;
   toPage( index: number ): number;
@@ -52,38 +53,46 @@ export function Controller( Splide: Splide, Components: Components, options: Opt
   /**
    * The latest number of slides.
    */
-  let slideCount = getLength( true );
+  let slideCount: number;
 
   /**
    * The latest `perMove` value.
    */
-  let perMove = options.perMove;
+  let perMove: number;
 
   /**
    * The latest `perMove` value.
    */
-  let perPage = options.perPage;
+  let perPage: number;
 
   /**
    * Called when the component is mounted.
    */
   function mount(): void {
+    init();
     Move.jump( currIndex );
 
-    on( [ EVENT_UPDATED, EVENT_REFRESH ], () => {
-      slideCount = getLength( true );
-      perMove    = options.perMove;
-      perPage    = options.perPage;
-    } );
+    on( [ EVENT_UPDATED, EVENT_REFRESH ], init );
 
     on( EVENT_SCROLLED, () => {
       setIndex( Move.toIndex( Move.getPosition() ) );
     }, 0 );
   }
 
+  /**
+   * Initializes the component.
+   */
+  function init(): void {
+    slideCount = getLength( true );
+    perMove    = options.perMove;
+    perPage    = options.perPage;
+  }
+
   /**
    * Moves the slider by the control pattern.
    *
+   * @todo
+   *
    * @see `Splide#go()`
    *
    * @param control        - A control pattern.
@@ -93,7 +102,7 @@ export function Controller( Splide: Splide, Components: Components, options: Opt
     const dest  = parse( control );
     const index = loop( dest );
 
-    if ( ! Move.isBusy() && index > -1 && ( allowSameIndex || index !== currIndex ) ) {
+    if ( index > -1 && ! Move.isBusy() && ( allowSameIndex || index !== currIndex ) ) {
       setIndex( index );
       Move.move( dest, index, prevIndex );
     }
@@ -308,6 +317,7 @@ export function Controller( Splide: Splide, Components: Components, options: Opt
     getNext,
     getPrev,
     getEnd,
+    setIndex,
     getIndex,
     toIndex,
     toPage,

src/js/components/Drag/test/general.test.ts

@@ -8,13 +8,13 @@ describe( 'Drag', () => {
     const splide = init();
     const track  = splide.Components.Elements.track;
 
-    fireWithCoord( track, 'mousedown', { x: 0 } );
-    fireWithCoord( window, 'mousemove', { x: 0 } );
-    fireWithCoord( window, 'mousemove', { x: -100 } );
+    fireWithCoord( track, 'mousedown', { x: 0, timeStamp: 1 } );
+    fireWithCoord( window, 'mousemove', { x: 0, timeStamp: 1 } );
+    fireWithCoord( window, 'mousemove', { x: -100, timeStamp: 2 } );
 
     expect( splide.Components.Move.getPosition() ).toBe( -100 );
 
-    fireWithCoord( window, 'mousemove', { x: -200 } );
+    fireWithCoord( window, 'mousemove', { x: -200, timeStamp: 3 } );
 
     expect( splide.Components.Move.getPosition() ).toBe( -200 );
   } );

src/js/components/Elements/Elements.ts

@@ -93,29 +93,20 @@ export function Elements( Splide: Splide, Components: Components, options: Optio
   let list: HTMLElement;
 
   /**
-   * Called when the component is mounted.
+   * Called when the component is constructed.
    */
-  function mount(): void {
-    init();
+  function setup(): void {
+    collect();
     identify();
-
-    on( EVENT_REFRESH, () => {
-      destroy();
-      init();
-    } );
-
-    on( EVENT_UPDATED, () => {
-      removeClass( root, classes );
-      addClass( root, ( classes = getClasses() ) );
-    } );
+    addClass( root, ( classes = getClasses() ) );
   }
 
   /**
-   * Initializes the component.
+   * Called when the component is mounted.
    */
-  function init(): void {
-    collect();
-    addClass( root, ( classes = getClasses() ) );
+  function mount(): void {
+    on( EVENT_REFRESH, refresh );
+    on( EVENT_UPDATED, update );
   }
 
   /**
@@ -126,6 +117,22 @@ export function Elements( Splide: Splide, Components: Components, options: Optio
     removeClass( root, classes );
   }
 
+  /**
+   * Recollects slide elements.
+   */
+  function refresh(): void {
+    destroy();
+    setup();
+  }
+
+  /**
+   * Updates the status of elements.
+   */
+  function update(): void {
+    removeClass( root, classes );
+    addClass( root, ( classes = getClasses() ) );
+  }
+
   /**
    * Collects elements which the slider consists of.
    */
@@ -191,6 +198,7 @@ export function Elements( Splide: Splide, Components: Components, options: Optio
   }
 
   return assign( elements, {
+    setup,
     mount,
     destroy,
   } );

src/js/components/Options/Options.ts

@@ -25,14 +25,10 @@ export interface OptionsComponent extends BaseComponent {
  * @return An Options component object.
  */
 export function Options( Splide: Splide, Components: Components, options: Options ): OptionsComponent {
-  try {
-    merge( options, JSON.parse( getAttribute( Splide.root, DATA_ATTRIBUTE ) ) );
-  } catch ( e ) {
-    assert( false, e.message );
-  }
-
-  const initialOptions = merge( {}, options );
-  const { breakpoints } = options;
+  /**
+   * Keeps the initial options to apply when no matched query exists.
+   */
+  let initialOptions: Options;
 
   /**
    * Stores breakpoints with the MediaQueryList object.
@@ -44,10 +40,25 @@ export function Options( Splide: Splide, Components: Components, options: Option
    */
   let currPoint: string | undefined;
 
+  /**
+   * Called when the component is constructed.
+   */
+  function setup(): void {
+    try {
+      merge( options, JSON.parse( getAttribute( Splide.root, DATA_ATTRIBUTE ) ) );
+    } catch ( e ) {
+      assert( false, e.message );
+    }
+
+    initialOptions = merge( {}, options );
+  }
+
   /**
    * Called when the component is mounted.
    */
   function mount(): void {
+    const { breakpoints } = options;
+
     if ( breakpoints ) {
       points = Object.keys( breakpoints )
         .sort( ( n, m ) => +n - +m )
@@ -90,22 +101,23 @@ export function Options( Splide: Splide, Components: Components, options: Option
    * @param point - A matched point, or `undefined` that means no breakpoint matches a media query.
    */
   function onMatch( point: string | undefined ): void {
-    const options = breakpoints[ point ] || initialOptions;
+    const newOptions = options.breakpoints[ point ] || initialOptions;
 
-    if ( options.destroy ) {
+    if ( newOptions.destroy ) {
       Splide.options = initialOptions;
-      Splide.destroy( options.destroy === 'completely' );
+      Splide.destroy( newOptions.destroy === 'completely' );
     } else {
       if ( Splide.state.is( DESTROYED ) ) {
         destroy( true );
         Splide.mount();
       }
 
-      Splide.options = options;
+      Splide.options = newOptions;
     }
   }
 
   return {
+    setup,
     mount,
     destroy,
   };

src/js/core/Splide/Splide.ts

@@ -97,15 +97,20 @@ export class Splide {
     this.Transition = Transition || this.Transition || ( this.is( FADE ) ? Fade : Slide );
     this.Extensions = Extensions || this.Extensions;
 
-    const Components = assign( {}, ComponentConstructors, this.Extensions, { Transition: this.Transition } );
+    const Constructors = assign( {}, ComponentConstructors, this.Extensions, { Transition: this.Transition } );
+    const { Components } = this;
 
-    forOwn( Components, ( Component, key ) => {
+    forOwn( Constructors, ( Component, key ) => {
       const component = Component( this, this.Components, this.opts );
-      this.Components[ key ] = component;
+      Components[ key ] = component;
+      component.setup && component.setup();
+    } );
+
+    forOwn( Components, component => {
       component.mount && component.mount();
     } );
 
-    forOwn( this.Components, component => {
+    forOwn( Components, component => {
       component.mounted && component.mounted();
     } );
 

src/js/test/php/examples/extension.php

@@ -0,0 +1,45 @@
+<?php
+require_once '../parts.php';
+require_once '../settings.php';
+
+$settings = get_settings();
+?>
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <title>Default</title>
+
+  <link rel="stylesheet" href="../../../../../dist/css/themes/splide-<?php echo $settings['theme'] ?>.min.css">
+  <link rel="stylesheet" href="../../assets/css/styles.css">
+  <script type="text/javascript" src="../../../../../dist/js/splide.js"></script>
+
+  <script>
+    document.addEventListener( 'DOMContentLoaded', function () {
+      var splide = new Splide( '#splide01', {
+        perPage: 2,
+        gap    : '1rem',
+      } );
+
+      var Extension = function ( Splide ) {
+        function setup() {
+          Splide.Components.Controller.setIndex( 4 );
+        }
+
+        return {
+          setup: setup,
+        }
+      }
+
+      splide.mount( { Extension: Extension } );
+    } );
+  </script>
+</head>
+<body>
+
+<?php render(); ?>
+
+</body>
+</html>

src/js/types/general.ts

@@ -23,6 +23,7 @@ export type ComponentConstructor = ( Splide: Splide, Components: Components, opt
  * @since 3.0.0
  */
 export interface BaseComponent {
+  setup?(): void;
   mount?(): void;
   mounted?(): void;
   destroy?( completely?: boolean ): void;