Improve the drag performance. Fix the incorrect position of the fade carousel.

dist/js/splide-renderer.min.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 3.0.4
+ * Version  : 3.0.5
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */

dist/js/splide.cjs.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 3.0.4
+ * Version  : 3.0.5
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -811,7 +811,7 @@ function Slide$1(Splide2, index, slideIndex, slide) {
     bind(slide, "click keydown", (e) => {
       emit(e.type === "click" ? EVENT_CLICK : EVENT_SLIDE_KEYDOWN, this, e);
     });
-    on([EVENT_REPOSITIONED, EVENT_MOVED, EVENT_SCROLLED], update.bind(this));
+    on([EVENT_REFRESH, EVENT_REPOSITIONED, EVENT_MOVED, EVENT_SCROLLED], update.bind(this));
     if (updateOnMove) {
       on(EVENT_MOVE, onMove.bind(this));
     }
@@ -1190,11 +1190,10 @@ function Move(Splide2, Components2, options) {
   const { list, track } = Components2.Elements;
   let waiting;
   function mount() {
-    if (!Splide2.is(FADE)) {
-      on([EVENT_MOUNTED, EVENT_RESIZED, EVENT_UPDATED, EVENT_REFRESH], reposition);
-    } else {
-      emit(EVENT_REPOSITIONED);
-    }
+    on([EVENT_MOUNTED, EVENT_RESIZED, EVENT_UPDATED, EVENT_REFRESH], reposition);
+  }
+  function destroy() {
+    removeAttribute(list, "style");
   }
   function reposition() {
     Components2.Scroll.cancel();
@@ -1226,7 +1225,9 @@ function Move(Splide2, Components2, options) {
     translate(toPosition(index, true));
   }
   function translate(position, preventLoop) {
-    Components2.Style.ruleBy(list, "transform", `translate${resolve("X")}(${preventLoop ? position : loop(position)}px)`);
+    if (!Splide2.is(FADE)) {
+      list.style.transform = `translate${resolve("X")}(${preventLoop ? position : loop(position)}px)`;
+    }
   }
   function loop(position) {
     if (!waiting && Splide2.is(LOOP)) {
@@ -1294,6 +1295,7 @@ function Move(Splide2, Components2, options) {
   }
   return {
     mount,
+    destroy,
     move,
     jump,
     translate,
@@ -1721,7 +1723,7 @@ const FRICTION = 5;
 const LOG_INTERVAL = 200;
 const POINTER_DOWN_EVENTS = "touchstart mousedown";
 const POINTER_MOVE_EVENTS = "touchmove mousemove";
-const POINTER_UP_EVENTS = "touchend touchcancel mouseup mouseleave";
+const POINTER_UP_EVENTS = "touchend touchcancel mouseup";
 
 function Drag(Splide2, Components2, options) {
   const { on, emit, bind, unbind } = EventInterface(Splide2);
@@ -1731,7 +1733,6 @@ function Drag(Splide2, Components2, options) {
   const { getPosition, exceededLimit } = Move;
   const listenerOptions = { capture: true, passive: false };
   const isSlide = Splide2.is(SLIDE);
-  const isFade = Splide2.is(FADE);
   let basePosition;
   let baseEvent;
   let prevBaseEvent;
@@ -1787,9 +1788,7 @@ function Drag(Splide2, Components2, options) {
         if (expired || exceeded) {
           save(e);
         }
-        if (!isFade) {
-          Move.translate(basePosition + constrain(coordOf(e) - coordOf(baseEvent)));
-        }
+        Move.translate(basePosition + constrain(coordOf(e) - coordOf(baseEvent)));
         emit(EVENT_DRAGGING);
         prevent(e);
       } else {
@@ -1810,7 +1809,7 @@ function Drag(Splide2, Components2, options) {
         const destination = computeDestination(velocity);
         if (isFree) {
           Scroll.scroll(destination);
-        } else if (isFade) {
+        } else if (Splide2.is(FADE)) {
           Controller.go(Splide2.index + orient(sign(velocity)));
         } else {
           Controller.go(computeIndex(destination), true);

dist/js/splide.esm.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 3.0.4
+ * Version  : 3.0.5
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -807,7 +807,7 @@ function Slide$1(Splide2, index, slideIndex, slide) {
     bind(slide, "click keydown", (e) => {
       emit(e.type === "click" ? EVENT_CLICK : EVENT_SLIDE_KEYDOWN, this, e);
     });
-    on([EVENT_REPOSITIONED, EVENT_MOVED, EVENT_SCROLLED], update.bind(this));
+    on([EVENT_REFRESH, EVENT_REPOSITIONED, EVENT_MOVED, EVENT_SCROLLED], update.bind(this));
     if (updateOnMove) {
       on(EVENT_MOVE, onMove.bind(this));
     }
@@ -1186,11 +1186,10 @@ function Move(Splide2, Components2, options) {
   const { list, track } = Components2.Elements;
   let waiting;
   function mount() {
-    if (!Splide2.is(FADE)) {
-      on([EVENT_MOUNTED, EVENT_RESIZED, EVENT_UPDATED, EVENT_REFRESH], reposition);
-    } else {
-      emit(EVENT_REPOSITIONED);
-    }
+    on([EVENT_MOUNTED, EVENT_RESIZED, EVENT_UPDATED, EVENT_REFRESH], reposition);
+  }
+  function destroy() {
+    removeAttribute(list, "style");
   }
   function reposition() {
     Components2.Scroll.cancel();
@@ -1222,7 +1221,9 @@ function Move(Splide2, Components2, options) {
     translate(toPosition(index, true));
   }
   function translate(position, preventLoop) {
-    Components2.Style.ruleBy(list, "transform", `translate${resolve("X")}(${preventLoop ? position : loop(position)}px)`);
+    if (!Splide2.is(FADE)) {
+      list.style.transform = `translate${resolve("X")}(${preventLoop ? position : loop(position)}px)`;
+    }
   }
   function loop(position) {
     if (!waiting && Splide2.is(LOOP)) {
@@ -1290,6 +1291,7 @@ function Move(Splide2, Components2, options) {
   }
   return {
     mount,
+    destroy,
     move,
     jump,
     translate,
@@ -1717,7 +1719,7 @@ const FRICTION = 5;
 const LOG_INTERVAL = 200;
 const POINTER_DOWN_EVENTS = "touchstart mousedown";
 const POINTER_MOVE_EVENTS = "touchmove mousemove";
-const POINTER_UP_EVENTS = "touchend touchcancel mouseup mouseleave";
+const POINTER_UP_EVENTS = "touchend touchcancel mouseup";
 
 function Drag(Splide2, Components2, options) {
   const { on, emit, bind, unbind } = EventInterface(Splide2);
@@ -1727,7 +1729,6 @@ function Drag(Splide2, Components2, options) {
   const { getPosition, exceededLimit } = Move;
   const listenerOptions = { capture: true, passive: false };
   const isSlide = Splide2.is(SLIDE);
-  const isFade = Splide2.is(FADE);
   let basePosition;
   let baseEvent;
   let prevBaseEvent;
@@ -1783,9 +1784,7 @@ function Drag(Splide2, Components2, options) {
         if (expired || exceeded) {
           save(e);
         }
-        if (!isFade) {
-          Move.translate(basePosition + constrain(coordOf(e) - coordOf(baseEvent)));
-        }
+        Move.translate(basePosition + constrain(coordOf(e) - coordOf(baseEvent)));
         emit(EVENT_DRAGGING);
         prevent(e);
       } else {
@@ -1806,7 +1805,7 @@ function Drag(Splide2, Components2, options) {
         const destination = computeDestination(velocity);
         if (isFree) {
           Scroll.scroll(destination);
-        } else if (isFade) {
+        } else if (Splide2.is(FADE)) {
           Controller.go(Splide2.index + orient(sign(velocity)));
         } else {
           Controller.go(computeIndex(destination), true);

dist/js/splide.js

@@ -4,7 +4,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 /*!
  * Splide.js
- * Version  : 3.0.4
+ * Version  : 3.0.5
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -921,7 +921,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       bind(slide, "click keydown", function (e) {
         emit(e.type === "click" ? EVENT_CLICK : EVENT_SLIDE_KEYDOWN, _this2, e);
       });
-      on([EVENT_REPOSITIONED, EVENT_MOVED, EVENT_SCROLLED], update.bind(this));
+      on([EVENT_REFRESH, EVENT_REPOSITIONED, EVENT_MOVED, EVENT_SCROLLED], update.bind(this));
 
       if (updateOnMove) {
         on(EVENT_MOVE, onMove.bind(this));
@@ -1413,11 +1413,11 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     var waiting;
 
     function mount() {
-      if (!Splide2.is(FADE)) {
-        on([EVENT_MOUNTED, EVENT_RESIZED, EVENT_UPDATED, EVENT_REFRESH], reposition);
-      } else {
-        emit(EVENT_REPOSITIONED);
-      }
+      on([EVENT_MOUNTED, EVENT_RESIZED, EVENT_UPDATED, EVENT_REFRESH], reposition);
+    }
+
+    function destroy() {
+      removeAttribute(list, "style");
     }
 
     function reposition() {
@@ -1454,7 +1454,9 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     }
 
     function translate(position, preventLoop) {
-      Components2.Style.ruleBy(list, "transform", "translate" + resolve("X") + "(" + (preventLoop ? position : loop(position)) + "px)");
+      if (!Splide2.is(FADE)) {
+        list.style.transform = "translate" + resolve("X") + "(" + (preventLoop ? position : loop(position)) + "px)";
+      }
     }
 
     function loop(position) {
@@ -1539,6 +1541,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
     return {
       mount: mount,
+      destroy: destroy,
       move: move,
       jump: jump,
       translate: translate,
@@ -2067,7 +2070,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   var LOG_INTERVAL = 200;
   var POINTER_DOWN_EVENTS = "touchstart mousedown";
   var POINTER_MOVE_EVENTS = "touchmove mousemove";
-  var POINTER_UP_EVENTS = "touchend touchcancel mouseup mouseleave";
+  var POINTER_UP_EVENTS = "touchend touchcancel mouseup";
 
   function Drag(Splide2, Components2, options) {
     var _EventInterface12 = EventInterface(Splide2),
@@ -2090,7 +2093,6 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       passive: false
     };
     var isSlide = Splide2.is(SLIDE);
-    var isFade = Splide2.is(FADE);
     var basePosition;
     var baseEvent;
     var prevBaseEvent;
@@ -2157,10 +2159,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
             save(e);
           }
 
-          if (!isFade) {
-            Move.translate(basePosition + constrain(coordOf(e) - coordOf(baseEvent)));
-          }
-
+          Move.translate(basePosition + constrain(coordOf(e) - coordOf(baseEvent)));
           emit(EVENT_DRAGGING);
           prevent(e);
         } else {
@@ -2185,7 +2184,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
           if (isFree) {
             Scroll.scroll(destination);
-          } else if (isFade) {
+          } else if (Splide2.is(FADE)) {
             Controller.go(Splide2.index + orient(sign(velocity)));
           } else {
             Controller.go(computeIndex(destination), true);

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

@@ -1 +1 @@
-{"version":3,"file":"Drag.d.ts","sourceRoot":"","sources":["Drag.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAKjE;;;;GAIG;AACH,MAAM,WAAW,aAAc,SAAQ,aAAa;IAClD,OAAO,CAAE,QAAQ,EAAE,OAAO,GAAI,IAAI,CAAA;CACnC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,IAAI,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,aAAa,CAsU9F"}
+{"version":3,"file":"Drag.d.ts","sourceRoot":"","sources":["Drag.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAKjE;;;;GAIG;AACH,MAAM,WAAW,aAAc,SAAQ,aAAa;IAClD,OAAO,CAAE,QAAQ,EAAE,OAAO,GAAI,IAAI,CAAA;CACnC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,IAAI,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,aAAa,CAkU9F"}

dist/types/components/Drag/constants.d.ts

@@ -27,5 +27,5 @@ export declare const POINTER_MOVE_EVENTS = "touchmove mousemove";
  *
  * @since 3.0.0
  */
-export declare const POINTER_UP_EVENTS = "touchend touchcancel mouseup mouseleave";
+export declare const POINTER_UP_EVENTS = "touchend touchcancel mouseup";
 //# sourceMappingURL=../../../../src/js/components/Drag/constants.d.ts.map

dist/types/components/Drag/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["constants.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,QAAQ,IAAI,CAAC;AAE1B;;;;GAIG;AACH,eAAO,MAAM,YAAY,MAAM,CAAC;AAEhC;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,yBAAyB,CAAC;AAE1D;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,wBAAwB,CAAC;AAEzD;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,4CAA4C,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["constants.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,QAAQ,IAAI,CAAC;AAE1B;;;;GAIG;AACH,eAAO,MAAM,YAAY,MAAM,CAAC;AAEhC;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,yBAAyB,CAAC;AAE1D;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,wBAAwB,CAAC;AAEzD;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,iCAAiC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Move.d.ts","sourceRoot":"","sources":["Move.ts"],"names":[],"mappings":"AAWA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAI9E;;;;GAIG;AACH,MAAM,WAAW,aAAc,SAAQ,aAAa;IAClD,IAAI,CAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,WAAW,GAAI,IAAI,CAAC;IAChF,IAAI,CAAE,KAAK,EAAE,MAAM,GAAI,IAAI,CAAC;IAC5B,SAAS,CAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,OAAO,GAAI,IAAI,CAAC;IAC3D,MAAM,IAAI,IAAI,CAAC;IACf,OAAO,CAAE,QAAQ,EAAE,MAAM,GAAI,MAAM,CAAC;IACpC,UAAU,CAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACxD,WAAW,IAAI,MAAM,CAAC;IACtB,QAAQ,CAAE,GAAG,EAAE,OAAO,GAAI,MAAM,CAAC;IACjC,MAAM,IAAI,OAAO,CAAC;IAClB,aAAa,CAAE,GAAG,CAAC,EAAE,OAAO,GAAG,SAAS,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAI,OAAO,CAAC;CACxE;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,IAAI,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,aAAa,CAmP9F"}
+{"version":3,"file":"Move.d.ts","sourceRoot":"","sources":["Move.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAI9E;;;;GAIG;AACH,MAAM,WAAW,aAAc,SAAQ,aAAa;IAClD,IAAI,CAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,WAAW,GAAI,IAAI,CAAC;IAChF,IAAI,CAAE,KAAK,EAAE,MAAM,GAAI,IAAI,CAAC;IAC5B,SAAS,CAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,OAAO,GAAI,IAAI,CAAC;IAC3D,MAAM,IAAI,IAAI,CAAC;IACf,OAAO,CAAE,QAAQ,EAAE,MAAM,GAAI,MAAM,CAAC;IACpC,UAAU,CAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACxD,WAAW,IAAI,MAAM,CAAC;IACtB,QAAQ,CAAE,GAAG,EAAE,OAAO,GAAI,MAAM,CAAC;IACjC,MAAM,IAAI,OAAO,CAAC;IAClB,aAAa,CAAE,GAAG,CAAC,EAAE,OAAO,GAAG,SAAS,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAI,OAAO,CAAC;CACxE;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,IAAI,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,aAAa,CAqP9F"}

dist/types/components/Slides/Slide.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slide.d.ts","sourceRoot":"","sources":["Slide.ts"],"names":[],"mappings":"AA+BA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAmB5C;;;;GAIG;AACH,MAAM,WAAY,cAAe,SAAQ,aAAa;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,WAAW,CAAC;IACnB,SAAS,EAAE,WAAW,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,YAAY,CAAC,EAAE,OAAO,GAAI,IAAI,CAAA;IAC1E,QAAQ,CAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAI,OAAO,CAAC;CACrD;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,KAAK,CAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,GAAI,cAAc,CAwM7G"}
+{"version":3,"file":"Slide.d.ts","sourceRoot":"","sources":["Slide.ts"],"names":[],"mappings":"AAgCA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAmB5C;;;;GAIG;AACH,MAAM,WAAY,cAAe,SAAQ,aAAa;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,WAAW,CAAC;IACnB,SAAS,EAAE,WAAW,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,YAAY,CAAC,EAAE,OAAO,GAAI,IAAI,CAAA;IAC1E,QAAQ,CAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAI,OAAO,CAAC;CACrD;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,KAAK,CAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,GAAI,cAAc,CAwM7G"}

dist/types/test/utils/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["utils.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,OAAO,EAAa,aAAa,EAAE,MAAM,aAAa,CAAC;AAIvD,UAAU,QAAS,SAAQ,aAAa;IACtC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;;;GAOG;AACH,wBAAgB,IAAI,CAAE,OAAO,GAAE,OAAY,EAAE,IAAI,GAAE,QAAa,GAAI,MAAM,CAqFzE;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAE,GAAG,EAAE,WAAW,GAAI;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAiBhF;AAED;;;;;;;;;GASG;AACH,wBAAgB,IAAI,CAClB,MAAM,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,EACnC,IAAI,EAAE,MAAM,EACZ,IAAI,GAAE,GAAQ,EACd,aAAa,GAAE,SAAc,GAC5B,KAAK,CAUP;AAED;;;;;GAKG;AACH,wBAAgB,OAAO,CAAE,GAAG,EAAE,MAAM,EAAE,MAAM,GAAE,MAAM,GAAG,OAAgB,GAAI,IAAI,CAE9E;AAED;;;;;;GAMG;AACH,wBAAgB,IAAI,CAAE,QAAQ,EAAE,MAAM,GAAI,OAAO,CAAC,IAAI,CAAC,CAItD;AAED;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAE,QAAQ,EAAE,MAAM,GAAI,YAAY,CAMzD;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAE,MAAM,EAAE,MAAM,GAAG,WAAW,GAAI,YAAY,CAEvE"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["utils.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,OAAO,EAAa,aAAa,EAAE,MAAM,aAAa,CAAC;AAIvD,UAAU,QAAS,SAAQ,aAAa;IACtC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;;;GAOG;AACH,wBAAgB,IAAI,CAAE,OAAO,GAAE,OAAY,EAAE,IAAI,GAAE,QAAa,GAAI,MAAM,CAqFzE;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAE,GAAG,EAAE,WAAW,GAAI;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAgBhF;AAED;;;;;;;;;GASG;AACH,wBAAgB,IAAI,CAClB,MAAM,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,EACnC,IAAI,EAAE,MAAM,EACZ,IAAI,GAAE,GAAQ,EACd,aAAa,GAAE,SAAc,GAC5B,KAAK,CAUP;AAED;;;;;GAKG;AACH,wBAAgB,OAAO,CAAE,GAAG,EAAE,MAAM,EAAE,MAAM,GAAE,MAAM,GAAG,OAAgB,GAAI,IAAI,CAE9E;AAED;;;;;;GAMG;AACH,wBAAgB,IAAI,CAAE,QAAQ,EAAE,MAAM,GAAI,OAAO,CAAC,IAAI,CAAC,CAItD;AAED;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAE,QAAQ,EAAE,MAAM,GAAI,YAAY,CAMzD;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAE,MAAM,EAAE,MAAM,GAAG,WAAW,GAAI,YAAY,CAEvE"}

package.json

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

src/js/components/Drag/Drag.ts

@@ -34,8 +34,7 @@ export function Drag( Splide: Splide, Components: Components, options: Options )
   const { resolve, orient } = Components.Direction;
   const { getPosition, exceededLimit } = Move;
   const listenerOptions = { capture: true, passive: false };
-  const isSlide = Splide.is( SLIDE );
-  const isFade  = Splide.is( FADE );
+  const isSlide         = Splide.is( SLIDE );
 
   /**
    * The base slider position to calculate the delta of coords.
@@ -161,10 +160,7 @@ export function Drag( Splide: Splide, Components: Components, options: Options )
           save( e );
         }
 
-        if ( ! isFade ) {
-          Move.translate( basePosition + constrain( coordOf( e ) - coordOf( baseEvent ) ) );
-        }
-
+        Move.translate( basePosition + constrain( coordOf( e ) - coordOf( baseEvent ) ) );
         emit( EVENT_DRAGGING );
         prevent( e );
       } else {
@@ -196,7 +192,7 @@ export function Drag( Splide: Splide, Components: Components, options: Options )
 
         if ( isFree ) {
           Scroll.scroll( destination );
-        } else if ( isFade ) {
+        } else if ( Splide.is( FADE ) ) {
           Controller.go( Splide.index + orient( sign( velocity ) ) );
         } else {
           Controller.go( computeIndex( destination ), true );

src/js/components/Drag/constants.ts

@@ -31,4 +31,4 @@ export const POINTER_MOVE_EVENTS = 'touchmove mousemove';
  *
  * @since 3.0.0
  */
-export const POINTER_UP_EVENTS = 'touchend touchcancel mouseup mouseleave';
+export const POINTER_UP_EVENTS = 'touchend touchcancel mouseup';

src/js/components/Move/Move.ts

@@ -2,7 +2,8 @@ import {
   EVENT_MOUNTED,
   EVENT_MOVE,
   EVENT_MOVED,
-  EVENT_REFRESH, EVENT_REPOSITIONED,
+  EVENT_REFRESH,
+  EVENT_REPOSITIONED,
   EVENT_RESIZED,
   EVENT_UPDATED,
 } from '../../constants/events';
@@ -11,7 +12,7 @@ import { FADE, LOOP, SLIDE } from '../../constants/types';
 import { EventInterface } from '../../constructors';
 import { Splide } from '../../core/Splide/Splide';
 import { AnyFunction, BaseComponent, Components, Options } from '../../types';
-import { abs, ceil, clamp, isUndefined, rect, sign } from '../../utils';
+import { abs, ceil, clamp, isUndefined, rect, removeAttribute, sign } from '../../utils';
 
 
 /**
@@ -58,11 +59,14 @@ export function Move( Splide: Splide, Components: Components, options: Options )
    * Called when the component is mounted.
    */
   function mount(): void {
-    if ( ! Splide.is( FADE ) ) {
-      on( [ EVENT_MOUNTED, EVENT_RESIZED, EVENT_UPDATED, EVENT_REFRESH ], reposition );
-    } else {
-      emit( EVENT_REPOSITIONED );
-    }
+    on( [ EVENT_MOUNTED, EVENT_RESIZED, EVENT_UPDATED, EVENT_REFRESH ], reposition );
+  }
+
+  /**
+   * Destroys the component.
+   */
+  function destroy(): void {
+    removeAttribute( list, 'style' );
   }
 
   /**
@@ -125,11 +129,9 @@ export function Move( Splide: Splide, Components: Components, options: Options )
    * @param preventLoop - Optional. If `true`, sets the provided position as is.
    */
   function translate( position: number, preventLoop?: boolean ): void {
-    Components.Style.ruleBy(
-      list,
-      'transform',
-      `translate${ resolve( 'X' ) }(${ preventLoop ? position : loop( position ) }px)`
-    );
+    if ( ! Splide.is( FADE ) ) {
+      list.style.transform = `translate${ resolve( 'X' ) }(${ preventLoop ? position : loop( position ) }px)`;
+    }
   }
 
   /**
@@ -275,6 +277,7 @@ export function Move( Splide: Splide, Components: Components, options: Options )
 
   return {
     mount,
+    destroy,
     move,
     jump,
     translate,

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

@@ -6,13 +6,12 @@ describe( 'Move', () => {
     const splide = init( { width: 200, height: 100 } );
     const { Move } = splide.Components;
     const { list } = splide.Components.Elements;
-    const rule = findRuleBy( list );
 
     Move.jump( 2 );
-    expect( rule.style.transform ).toBe( 'translateX(-400px)' );
+    expect( list.style.transform ).toBe( 'translateX(-400px)' );
 
     Move.jump( 4 );
-    expect( rule.style.transform ).toBe( 'translateX(-800px)' );
+    expect( list.style.transform ).toBe( 'translateX(-800px)' );
 
     splide.destroy();
   } );
@@ -21,13 +20,12 @@ describe( 'Move', () => {
     const splide = init( { width: 200, height: 100 } );
     const { Move } = splide.Components;
     const { list } = splide.Components.Elements;
-    const rule = findRuleBy( list );
 
     Move.translate( 100 );
-    expect( rule.style.transform ).toBe( 'translateX(100px)' );
+    expect( list.style.transform ).toBe( 'translateX(100px)' );
 
     Move.translate( 500 );
-    expect( rule.style.transform ).toBe( 'translateX(500px)' );
+    expect( list.style.transform ).toBe( 'translateX(500px)' );
 
     splide.destroy();
   } );
@@ -38,10 +36,9 @@ describe( 'Move', () => {
     const splide   = init( { type: 'loop', width, height: 100 } );
     const { Move } = splide.Components;
     const { list } = splide.Components.Elements;
-    const rule = findRuleBy( list );
 
     Move.translate( width );
-    expect( rule.style.transform ).toBe( `translateX(${ -width * ( splide.length - 1 ) }px)` );
+    expect( list.style.transform ).toBe( `translateX(${ -width * ( splide.length - 1 ) }px)` );
 
     splide.destroy();
   } );
@@ -50,9 +47,10 @@ describe( 'Move', () => {
     const splide = init( { width: 200, height: 100 } );
     const { Move } = splide.Components;
     const { list } = splide.Components.Elements;
-    const rule = findRuleBy( list );
 
     Move.move( 1, 1, -1 );
+    const rule = findRuleBy( list );
+
     expect( rule.style.transition ).not.toBe( '' );
 
     Move.cancel();

src/js/components/Move/test/move.test.ts

@@ -1,6 +1,6 @@
 import { EVENT_MOVE, EVENT_MOVED } from '../../../constants/events';
 import { IDLE, MOVING } from '../../../constants/states';
-import { findRuleBy, fire, init } from '../../../test';
+import { fire, init } from '../../../test';
 
 
 describe( 'Move#move()', () => {
@@ -8,15 +8,14 @@ describe( 'Move#move()', () => {
     const splide = init( { width: 200, height: 100 } );
     const { Move } = splide.Components;
     const { list } = splide.Components.Elements;
-    const rule = findRuleBy( list );
 
     Move.move( 1, 1, -1 );
     fire( list, 'transitionend' );
-    expect( rule.style.transform ).toBe( 'translateX(-200px)' );
+    expect( list.style.transform ).toBe( 'translateX(-200px)' );
 
     Move.move( 2, 2, -1 );
     fire( list, 'transitionend' );
-    expect( rule.style.transform ).toBe( 'translateX(-400px)' );
+    expect( list.style.transform ).toBe( 'translateX(-400px)' );
   } );
 
   test( 'can change the state.', () => {

src/js/components/Slides/Slide.ts

@@ -22,6 +22,7 @@ import {
   EVENT_INACTIVE,
   EVENT_MOVE,
   EVENT_MOVED,
+  EVENT_REFRESH,
   EVENT_REPOSITIONED,
   EVENT_SCROLLED,
   EVENT_SLIDE_KEYDOWN,
@@ -100,7 +101,7 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide:
       emit( e.type === 'click' ? EVENT_CLICK : EVENT_SLIDE_KEYDOWN, this, e );
     } );
 
-    on( [ EVENT_REPOSITIONED, EVENT_MOVED, EVENT_SCROLLED ], update.bind( this ) );
+    on( [ EVENT_REFRESH, EVENT_REPOSITIONED, EVENT_MOVED, EVENT_SCROLLED ], update.bind( this ) );
 
     if ( updateOnMove ) {
       on( EVENT_MOVE, onMove.bind( this ) );

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

@@ -3,7 +3,7 @@ import { findRuleBy, init } from '../../../test';
 
 describe( 'Style', () => {
   test( 'can create a style element and append it to the head element.', () => {
-    const splide = init();
+    const splide = init( { width: 100 } );
     const style  = document.head.lastElementChild;
 
     expect( style instanceof HTMLStyleElement ).toBe( true );
@@ -11,12 +11,12 @@ describe( 'Style', () => {
     if ( style instanceof HTMLStyleElement ) {
       const { cssRules } = style.sheet;
 
-      const listRule = Array.prototype.find.call( cssRules, ( cssRule: CSSStyleRule ) => {
-        return cssRule.selectorText === `#${ splide.Components.Elements.list.id }`;
+      const rootRule = Array.prototype.find.call( cssRules, ( cssRule: CSSStyleRule ) => {
+        return cssRule.selectorText === `#${ splide.root.id }`;
       } );
 
-      expect( listRule ).not.toBeUndefined();
-      expect( listRule.style.transform ).toBe( 'translateX(0px)' );
+      expect( rootRule ).not.toBeUndefined();
+      expect( rootRule.style.maxWidth ).toBe( '100px' );
     }
 
     splide.destroy();

src/js/test/php/examples/fade.php

@@ -29,6 +29,10 @@ $settings = get_settings();
       } );
 
       splide.mount();
+
+      setTimeout( () => {
+        splide.refresh();
+      }, 1000 );
     } );
   </script>
 </head>

src/js/test/utils/utils.ts

@@ -115,11 +115,10 @@ export function init( options: Options = {}, args: InitArgs = {} ): Splide {
  * @return An object with left and top offsets.
  */
 export function parseTransform( elm: HTMLElement ): { left: number, top: number } {
-  const rule     = findRuleBy( elm );
   const position = { left: 0, top: 0 };
 
-  if ( rule && rule.style.transform ) {
-    const { transform } = rule.style;
+  if ( elm && elm.style.transform ) {
+    const { transform } = elm.style;
 
     if ( transform.includes( 'translateX' ) ) {
       position.left = parseFloat( transform.replace( /translateX\(|\)/g, '' ) ) || 0;