Reformat code. Add the `Extensions` static property.

.eslintrc

@@ -28,11 +28,11 @@
     ],
     "space-in-parens": [
       "error",
-      "always"
+      "never"
     ],
     "array-bracket-spacing": [
       "error",
-      "always"
+      "never"
     ],
     "object-curly-spacing": [
       "error",
@@ -40,7 +40,7 @@
     ],
     "computed-property-spacing": [
       "error",
-      "always"
+      "never"
     ],
     "camelcase": "error",
     "comma-dangle": [
@@ -50,7 +50,7 @@
         "objects": "always-multiline",
         "imports": "always-multiline",
         "exports": "always-multiline",
-        "functions": "never"
+        "functions": "always-multiline"
       }
     ],
     "comma-spacing": [

dist/js/splide.cjs.js

@@ -77,35 +77,11 @@ function slice(arrayLike, start, end) {
 function includes(arrayLike, value) {
   return arrayProto.includes.call(arrayLike, value);
 }
-function toggleClass(elm, classes, force) {
-  if (elm) {
-    forEach(isString(classes) ? classes.split(" ") : classes, (className) => {
-      className && elm.classList.toggle(className, force);
-    });
+function assert$1(assertion, message) {
+  if (!assertion) {
+    throw new Error(message);
   }
 }
-function addClass(elm, classes) {
-  toggleClass(elm, classes, true);
-}
-function append(parent, ...children2) {
-  parent && parent.append(...children2);
-}
-function before(ref, ...nodes) {
-  ref && ref.before(...nodes);
-}
-function matches(elm, selector) {
-  return isHTMLElement(elm) && elm.matches(selector);
-}
-function children(parent, selector) {
-  const children2 = parent ? slice(parent.children) : [];
-  return selector ? children2.filter((child2) => matches(child2, selector)) : children2;
-}
-function child(parent, selector) {
-  return selector ? children(parent, selector)[0] : parent.firstElementChild;
-}
-function closest(from, selector) {
-  return from.closest(selector);
-}
 const assign = Object.assign;
 const ownKeys = Object.keys;
 function forOwn(object, iteratee, right) {
@@ -135,6 +111,35 @@ function omit(object, keys) {
   });
   return object;
 }
+function toggleClass(elm, classes, force) {
+  if (elm) {
+    forEach(isString(classes) ? classes.split(" ") : classes, (className) => {
+      className && elm.classList.toggle(className, force);
+    });
+  }
+}
+function addClass(elm, classes) {
+  toggleClass(elm, classes, true);
+}
+function append(parent, ...children2) {
+  parent && parent.append(...children2);
+}
+function before(ref, ...nodes) {
+  ref && ref.before(...nodes);
+}
+function matches(elm, selector) {
+  return isHTMLElement(elm) && elm.matches(selector);
+}
+function children(parent, selector) {
+  const children2 = parent ? slice(parent.children) : [];
+  return selector ? children2.filter((child2) => matches(child2, selector)) : children2;
+}
+function child(parent, selector) {
+  return selector ? children(parent, selector)[0] : parent.firstElementChild;
+}
+function closest(from, selector) {
+  return from.closest(selector);
+}
 function removeAttribute(elms, attrs) {
   forEach(elms, (elm) => {
     forEach(attrs, (attr) => {
@@ -248,11 +253,6 @@ function forEachEvent(events, iteratee) {
     isString(event) && event.split(" ").forEach(iteratee);
   });
 }
-function assert$1(assertion) {
-  if (!assertion) {
-    throw new Error();
-  }
-}
 function EventBinder(removersRef) {
   const removers = removersRef || /* @__PURE__ */ new Set();
   const key = removersRef ? {} : void 0;
@@ -879,20 +879,14 @@ const Slides = (Splide, Components, options, event) => {
     on(EVENT_REFRESH, init);
   }
   function init() {
-    slides.forEach((slide, index) => {
-      register(slide, index, -1);
-    });
+    slides.forEach((slide, index) => register(slide, index, -1));
   }
   function destroy() {
-    forEach$1((Slide2) => {
-      Slide2.destroy();
-    });
+    forEach$1((Slide2) => Slide2.destroy());
     empty(Slides2);
   }
   function update() {
-    forEach$1((Slide2) => {
-      Slide2.update();
-    });
+    forEach$1((Slide2) => Slide2.update());
   }
   function register(slide, index, slideIndex) {
     const object = Slide$1(Splide, index, slideIndex, slide);
@@ -939,9 +933,7 @@ const Slides = (Splide, Components, options, event) => {
     );
   }
   function style(prop, value, useContainer) {
-    forEach$1((Slide2) => {
-      Slide2.style(prop, value, useContainer);
-    });
+    forEach$1((Slide2) => Slide2.style(prop, value, useContainer));
   }
   function observeImages(elm, callback) {
     const images = queryAll(elm, "img");
@@ -1608,8 +1600,8 @@ const INTERVAL_DATA_ATTRIBUTE = `${DATA_ATTRIBUTE}-interval`;
 
 const Autoplay = (Splide, Components, options, event) => {
   const { on, bind, emit } = event;
-  const { interval: duration = 5e3, pauseOnHover = true, pauseOnFocus = true, resetProgress = true } = options;
-  const interval = RequestInterval(duration, Splide.go.bind(Splide, ">"), onAnimationFrame);
+  const { interval: duration, pauseOnHover = true, pauseOnFocus = true, resetProgress = true } = options;
+  const interval = RequestInterval(duration, () => Splide.go(">"), onAnimationFrame);
   const { isPaused } = interval;
   const { Elements, Elements: { root, toggle } } = Components;
   const { autoplay } = options;
@@ -2113,9 +2105,7 @@ const Pagination = (Splide, Components, options, event) => {
       const button = create("button", { class: classes.page, type: "button" }, li);
       const controls = Slides.getIn(i).map((Slide) => Slide.slide.id);
       const text = !hasFocus() && perPage > 1 ? i18n.pageX : i18n.slideX;
-      bind(button, "click", () => {
-        go(`>${i}`);
-      });
+      bind(button, "click", () => go(`>${i}`));
       paginationKeyboard && bind(button, "keydown", apply(onKeydown, i));
       setAttribute(li, ROLE, "presentation");
       setAttribute(button, ROLE, "tab");
@@ -2194,9 +2184,7 @@ const Sync = (Splide2, Components, options, event) => {
     }
   }
   function destroy() {
-    events.forEach((event2) => {
-      event2.destroy();
-    });
+    events.forEach((event2) => event2.destroy());
     empty(events);
   }
   function remount() {
@@ -2372,6 +2360,7 @@ const DEFAULTS = {
   easing: "cubic-bezier(0.25, 1, 0.5, 1)",
   drag: true,
   direction: "ltr",
+  interval: 5e3,
   trimSpace: true,
   focusableNodes: "a, button, textarea, input, select, iframe",
   classes: CLASSES,
@@ -2459,6 +2448,7 @@ const Slide = (Splide, Components, options, event) => {
 class Splide {
   static defaults = {};
   static STATES = STATES;
+  static Extensions;
   root;
   event = EventInterface();
   Components = {};

dist/js/splide.esm.js

@@ -73,35 +73,11 @@ function slice(arrayLike, start, end) {
 function includes(arrayLike, value) {
   return arrayProto.includes.call(arrayLike, value);
 }
-function toggleClass(elm, classes, force) {
-  if (elm) {
-    forEach(isString(classes) ? classes.split(" ") : classes, (className) => {
-      className && elm.classList.toggle(className, force);
-    });
+function assert$1(assertion, message) {
+  if (!assertion) {
+    throw new Error(message);
   }
 }
-function addClass(elm, classes) {
-  toggleClass(elm, classes, true);
-}
-function append(parent, ...children2) {
-  parent && parent.append(...children2);
-}
-function before(ref, ...nodes) {
-  ref && ref.before(...nodes);
-}
-function matches(elm, selector) {
-  return isHTMLElement(elm) && elm.matches(selector);
-}
-function children(parent, selector) {
-  const children2 = parent ? slice(parent.children) : [];
-  return selector ? children2.filter((child2) => matches(child2, selector)) : children2;
-}
-function child(parent, selector) {
-  return selector ? children(parent, selector)[0] : parent.firstElementChild;
-}
-function closest(from, selector) {
-  return from.closest(selector);
-}
 const assign = Object.assign;
 const ownKeys = Object.keys;
 function forOwn(object, iteratee, right) {
@@ -131,6 +107,35 @@ function omit(object, keys) {
   });
   return object;
 }
+function toggleClass(elm, classes, force) {
+  if (elm) {
+    forEach(isString(classes) ? classes.split(" ") : classes, (className) => {
+      className && elm.classList.toggle(className, force);
+    });
+  }
+}
+function addClass(elm, classes) {
+  toggleClass(elm, classes, true);
+}
+function append(parent, ...children2) {
+  parent && parent.append(...children2);
+}
+function before(ref, ...nodes) {
+  ref && ref.before(...nodes);
+}
+function matches(elm, selector) {
+  return isHTMLElement(elm) && elm.matches(selector);
+}
+function children(parent, selector) {
+  const children2 = parent ? slice(parent.children) : [];
+  return selector ? children2.filter((child2) => matches(child2, selector)) : children2;
+}
+function child(parent, selector) {
+  return selector ? children(parent, selector)[0] : parent.firstElementChild;
+}
+function closest(from, selector) {
+  return from.closest(selector);
+}
 function removeAttribute(elms, attrs) {
   forEach(elms, (elm) => {
     forEach(attrs, (attr) => {
@@ -244,11 +249,6 @@ function forEachEvent(events, iteratee) {
     isString(event) && event.split(" ").forEach(iteratee);
   });
 }
-function assert$1(assertion) {
-  if (!assertion) {
-    throw new Error();
-  }
-}
 function EventBinder(removersRef) {
   const removers = removersRef || /* @__PURE__ */ new Set();
   const key = removersRef ? {} : void 0;
@@ -875,20 +875,14 @@ const Slides = (Splide, Components, options, event) => {
     on(EVENT_REFRESH, init);
   }
   function init() {
-    slides.forEach((slide, index) => {
-      register(slide, index, -1);
-    });
+    slides.forEach((slide, index) => register(slide, index, -1));
   }
   function destroy() {
-    forEach$1((Slide2) => {
-      Slide2.destroy();
-    });
+    forEach$1((Slide2) => Slide2.destroy());
     empty(Slides2);
   }
   function update() {
-    forEach$1((Slide2) => {
-      Slide2.update();
-    });
+    forEach$1((Slide2) => Slide2.update());
   }
   function register(slide, index, slideIndex) {
     const object = Slide$1(Splide, index, slideIndex, slide);
@@ -935,9 +929,7 @@ const Slides = (Splide, Components, options, event) => {
     );
   }
   function style(prop, value, useContainer) {
-    forEach$1((Slide2) => {
-      Slide2.style(prop, value, useContainer);
-    });
+    forEach$1((Slide2) => Slide2.style(prop, value, useContainer));
   }
   function observeImages(elm, callback) {
     const images = queryAll(elm, "img");
@@ -1604,8 +1596,8 @@ const INTERVAL_DATA_ATTRIBUTE = `${DATA_ATTRIBUTE}-interval`;
 
 const Autoplay = (Splide, Components, options, event) => {
   const { on, bind, emit } = event;
-  const { interval: duration = 5e3, pauseOnHover = true, pauseOnFocus = true, resetProgress = true } = options;
-  const interval = RequestInterval(duration, Splide.go.bind(Splide, ">"), onAnimationFrame);
+  const { interval: duration, pauseOnHover = true, pauseOnFocus = true, resetProgress = true } = options;
+  const interval = RequestInterval(duration, () => Splide.go(">"), onAnimationFrame);
   const { isPaused } = interval;
   const { Elements, Elements: { root, toggle } } = Components;
   const { autoplay } = options;
@@ -2109,9 +2101,7 @@ const Pagination = (Splide, Components, options, event) => {
       const button = create("button", { class: classes.page, type: "button" }, li);
       const controls = Slides.getIn(i).map((Slide) => Slide.slide.id);
       const text = !hasFocus() && perPage > 1 ? i18n.pageX : i18n.slideX;
-      bind(button, "click", () => {
-        go(`>${i}`);
-      });
+      bind(button, "click", () => go(`>${i}`));
       paginationKeyboard && bind(button, "keydown", apply(onKeydown, i));
       setAttribute(li, ROLE, "presentation");
       setAttribute(button, ROLE, "tab");
@@ -2190,9 +2180,7 @@ const Sync = (Splide2, Components, options, event) => {
     }
   }
   function destroy() {
-    events.forEach((event2) => {
-      event2.destroy();
-    });
+    events.forEach((event2) => event2.destroy());
     empty(events);
   }
   function remount() {
@@ -2368,6 +2356,7 @@ const DEFAULTS = {
   easing: "cubic-bezier(0.25, 1, 0.5, 1)",
   drag: true,
   direction: "ltr",
+  interval: 5e3,
   trimSpace: true,
   focusableNodes: "a, button, textarea, input, select, iframe",
   classes: CLASSES,
@@ -2455,6 +2444,7 @@ const Slide = (Splide, Components, options, event) => {
 class Splide {
   static defaults = {};
   static STATES = STATES;
+  static Extensions;
   root;
   event = EventInterface();
   Components = {};

dist/js/splide.js

@@ -79,35 +79,11 @@
   function includes(arrayLike, value) {
     return arrayProto.includes.call(arrayLike, value);
   }
-  function toggleClass(elm, classes, force) {
-    if (elm) {
-      forEach(isString(classes) ? classes.split(" ") : classes, (className) => {
-        className && elm.classList.toggle(className, force);
-      });
+  function assert$1(assertion, message) {
+    if (!assertion) {
+      throw new Error(message);
     }
   }
-  function addClass(elm, classes) {
-    toggleClass(elm, classes, true);
-  }
-  function append(parent, ...children2) {
-    parent && parent.append(...children2);
-  }
-  function before(ref, ...nodes) {
-    ref && ref.before(...nodes);
-  }
-  function matches(elm, selector) {
-    return isHTMLElement(elm) && elm.matches(selector);
-  }
-  function children(parent, selector) {
-    const children2 = parent ? slice(parent.children) : [];
-    return selector ? children2.filter((child2) => matches(child2, selector)) : children2;
-  }
-  function child(parent, selector) {
-    return selector ? children(parent, selector)[0] : parent.firstElementChild;
-  }
-  function closest(from, selector) {
-    return from.closest(selector);
-  }
   const assign = Object.assign;
   const ownKeys = Object.keys;
   function forOwn(object, iteratee, right) {
@@ -137,6 +113,35 @@
     });
     return object;
   }
+  function toggleClass(elm, classes, force) {
+    if (elm) {
+      forEach(isString(classes) ? classes.split(" ") : classes, (className) => {
+        className && elm.classList.toggle(className, force);
+      });
+    }
+  }
+  function addClass(elm, classes) {
+    toggleClass(elm, classes, true);
+  }
+  function append(parent, ...children2) {
+    parent && parent.append(...children2);
+  }
+  function before(ref, ...nodes) {
+    ref && ref.before(...nodes);
+  }
+  function matches(elm, selector) {
+    return isHTMLElement(elm) && elm.matches(selector);
+  }
+  function children(parent, selector) {
+    const children2 = parent ? slice(parent.children) : [];
+    return selector ? children2.filter((child2) => matches(child2, selector)) : children2;
+  }
+  function child(parent, selector) {
+    return selector ? children(parent, selector)[0] : parent.firstElementChild;
+  }
+  function closest(from, selector) {
+    return from.closest(selector);
+  }
   function removeAttribute(elms, attrs) {
     forEach(elms, (elm) => {
       forEach(attrs, (attr) => {
@@ -247,11 +252,6 @@
       isString(event) && event.split(" ").forEach(iteratee);
     });
   }
-  function assert$1(assertion) {
-    if (!assertion) {
-      throw new Error();
-    }
-  }
   function EventBinder(removersRef) {
     const removers = removersRef || /* @__PURE__ */ new Set();
     const key = removersRef ? {} : void 0;
@@ -875,20 +875,14 @@
       on(EVENT_REFRESH, init);
     }
     function init() {
-      slides.forEach((slide, index) => {
-        register(slide, index, -1);
-      });
+      slides.forEach((slide, index) => register(slide, index, -1));
     }
     function destroy() {
-      forEach$1((Slide2) => {
-        Slide2.destroy();
-      });
+      forEach$1((Slide2) => Slide2.destroy());
       empty(Slides2);
     }
     function update() {
-      forEach$1((Slide2) => {
-        Slide2.update();
-      });
+      forEach$1((Slide2) => Slide2.update());
     }
     function register(slide, index, slideIndex) {
       const object = Slide$1(Splide, index, slideIndex, slide);
@@ -935,9 +929,7 @@
       );
     }
     function style(prop, value, useContainer) {
-      forEach$1((Slide2) => {
-        Slide2.style(prop, value, useContainer);
-      });
+      forEach$1((Slide2) => Slide2.style(prop, value, useContainer));
     }
     function observeImages(elm, callback) {
       const images = queryAll(elm, "img");
@@ -1604,8 +1596,8 @@
 
   const Autoplay = (Splide, Components, options, event) => {
     const { on, bind, emit } = event;
-    const { interval: duration = 5e3, pauseOnHover = true, pauseOnFocus = true, resetProgress = true } = options;
-    const interval = RequestInterval(duration, Splide.go.bind(Splide, ">"), onAnimationFrame);
+    const { interval: duration, pauseOnHover = true, pauseOnFocus = true, resetProgress = true } = options;
+    const interval = RequestInterval(duration, () => Splide.go(">"), onAnimationFrame);
     const { isPaused } = interval;
     const { Elements, Elements: { root, toggle } } = Components;
     const { autoplay } = options;
@@ -2109,9 +2101,7 @@
         const button = create("button", { class: classes.page, type: "button" }, li);
         const controls = Slides.getIn(i).map((Slide) => Slide.slide.id);
         const text = !hasFocus() && perPage > 1 ? i18n.pageX : i18n.slideX;
-        bind(button, "click", () => {
-          go(`>${i}`);
-        });
+        bind(button, "click", () => go(`>${i}`));
         paginationKeyboard && bind(button, "keydown", apply(onKeydown, i));
         setAttribute(li, ROLE, "presentation");
         setAttribute(button, ROLE, "tab");
@@ -2190,9 +2180,7 @@
       }
     }
     function destroy() {
-      events.forEach((event2) => {
-        event2.destroy();
-      });
+      events.forEach((event2) => event2.destroy());
       empty(events);
     }
     function remount() {
@@ -2368,6 +2356,7 @@
     easing: "cubic-bezier(0.25, 1, 0.5, 1)",
     drag: true,
     direction: "ltr",
+    interval: 5e3,
     trimSpace: true,
     focusableNodes: "a, button, textarea, input, select, iframe",
     classes: CLASSES,
@@ -2455,6 +2444,7 @@
   class Splide {
     static defaults = {};
     static STATES = STATES;
+    static Extensions;
     root;
     event = EventInterface();
     Components = {};

dist/types/index.d.ts

@@ -1043,6 +1043,10 @@ declare class Splide {
         DRAGGING: number;
         DESTROYED: number;
     };
+    /**
+     * Stores extension constructors.
+     */
+    static readonly Extensions: Record<string, ComponentConstructor>;
     /**
      * The root element where the Splide is applied.
      */
@@ -1052,7 +1056,7 @@ declare class Splide {
      */
     readonly event: EventInterface$1<EventMap & Record<string, AnyFunction>>;
     /**
-     * The collection of all component objects.
+     * The collection of all component instances, including extensions.
      */
     readonly Components: Components;
     /**

jest.config.ts

@@ -1,9 +1,9 @@
-import type { JestConfigWithTsJest } from 'ts-jest/dist/types';
+import type { Config } from 'jest';
 
 
-const config: JestConfigWithTsJest = {
+const config: Config = {
   transform: {
-    '^.+\\.(ts|tsx)$': 'ts-jest',
+    '^.+\\.(ts|tsx)$': '@swc/jest',
   },
   testEnvironment: 'jsdom',
   setupFiles: [

package-lock.json

@@ -13,6 +13,8 @@
       },
       "devDependencies": {
         "@rollup/plugin-node-resolve": "^15.0.0",
+        "@swc/core": "^1.3.14",
+        "@swc/jest": "^0.2.23",
         "@types/jest": "^29.0.0",
         "@types/node": "^18.7.14",
         "@typescript-eslint/eslint-plugin": "^5.36.1",
@@ -30,7 +32,6 @@
         "stylelint-config-sass-guidelines": "^9.0.1",
         "stylelint-order": "^5.0.0",
         "stylelint-scss": "^4.3.0",
-        "ts-jest": "^29.0.2",
         "tslib": "^2.4.0",
         "typescript": "^4.8.2",
         "uglify-js": "^3.17.0"
@@ -38,8 +39,10 @@
     },
     "../utils": {
       "name": "@splidejs/utils",
-      "version": "1.0.8",
+      "version": "1.1.2",
       "devDependencies": {
+        "@swc/core": "^1.3.14",
+        "@swc/jest": "^0.2.23",
         "@types/jest": "^29.0.3",
         "@types/node": "^18.7.20",
         "@typescript-eslint/eslint-plugin": "^5.38.0",
@@ -47,7 +50,6 @@
         "eslint": "^8.24.0",
         "jest": "next",
         "jest-environment-jsdom": "^29.0.3",
-        "ts-jest": "^29.0.2",
         "ts-node": "^10.9.1",
         "typedoc": "^0.23.15",
         "typescript": "^4.6.4",
@@ -960,6 +962,113 @@
         "node": ">=8"
       }
     },
+    "node_modules/@jest/create-cache-key-function": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/create-cache-key-function/-/create-cache-key-function-27.5.1.tgz",
+      "integrity": "sha512-dmH1yW+makpTSURTy8VzdUwFnfQh1G8R+DxO2Ho2FFmBbKFEVm+3jWdvFhE2VqB/LATCTokkP0dotjyQyw5/AQ==",
+      "dev": true,
+      "dependencies": {
+        "@jest/types": "^27.5.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/@jest/create-cache-key-function/node_modules/@jest/types": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/types/-/types-27.5.1.tgz",
+      "integrity": "sha512-Cx46iJ9QpwQTjIdq5VJu2QTMMs3QlEjI0x1QbBP5W1+nMzyc2XmimiRR/CbX9TO0cPTeUlxWMOu8mslYsJ8DEw==",
+      "dev": true,
+      "dependencies": {
+        "@types/istanbul-lib-coverage": "^2.0.0",
+        "@types/istanbul-reports": "^3.0.0",
+        "@types/node": "*",
+        "@types/yargs": "^16.0.0",
+        "chalk": "^4.0.0"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/@jest/create-cache-key-function/node_modules/@types/yargs": {
+      "version": "16.0.4",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.4.tgz",
+      "integrity": "sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw==",
+      "dev": true,
+      "dependencies": {
+        "@types/yargs-parser": "*"
+      }
+    },
+    "node_modules/@jest/create-cache-key-function/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@jest/create-cache-key-function/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/@jest/create-cache-key-function/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/@jest/create-cache-key-function/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/@jest/create-cache-key-function/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@jest/create-cache-key-function/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/@jest/environment": {
       "version": "29.1.2",
       "resolved": "https://registry.npmjs.org/@jest/environment/-/environment-29.1.2.tgz",
@@ -1533,6 +1642,211 @@
       "resolved": "../utils",
       "link": true
     },
+    "node_modules/@swc/core": {
+      "version": "1.3.14",
+      "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.3.14.tgz",
+      "integrity": "sha512-LpTTrXOGS7vnbR/rHrAux7GykUWbyVmI5NbICl9iF9yeqFdGm6JjaGBhbanmG8zrQL5aFx2kMxxb92V9D1KUiw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "bin": {
+        "swcx": "run_swcx.js"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/swc"
+      },
+      "optionalDependencies": {
+        "@swc/core-darwin-arm64": "1.3.14",
+        "@swc/core-darwin-x64": "1.3.14",
+        "@swc/core-linux-arm-gnueabihf": "1.3.14",
+        "@swc/core-linux-arm64-gnu": "1.3.14",
+        "@swc/core-linux-arm64-musl": "1.3.14",
+        "@swc/core-linux-x64-gnu": "1.3.14",
+        "@swc/core-linux-x64-musl": "1.3.14",
+        "@swc/core-win32-arm64-msvc": "1.3.14",
+        "@swc/core-win32-ia32-msvc": "1.3.14",
+        "@swc/core-win32-x64-msvc": "1.3.14"
+      }
+    },
+    "node_modules/@swc/core-darwin-arm64": {
+      "version": "1.3.14",
+      "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.3.14.tgz",
+      "integrity": "sha512-QFuUq3341uOCrJMIWGuo+CmRC5qZoM2lUo7o2lmv1FO1Dh9njTG85pLD83vz6y4j/F034DBGzvRgSti/Bsoccw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-darwin-x64": {
+      "version": "1.3.14",
+      "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.3.14.tgz",
+      "integrity": "sha512-fpAjbjXimJBmxCumRB8zjEtPc0lGUi9Uvu92XH6ww6AyXvg7KQmua5P2R9tnzAm6NwTCXKkgS86cgKysAbbObw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-arm-gnueabihf": {
+      "version": "1.3.14",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.3.14.tgz",
+      "integrity": "sha512-3XSFlgIyDPS+x2c0IFr0AGj4NUbrWGKbkkUCpmAURII0n3YoDsYw8Ux73I8MkWxTTwDGkou8qQOXyA28kAUM4w==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-arm64-gnu": {
+      "version": "1.3.14",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.3.14.tgz",
+      "integrity": "sha512-r3fToDRYX76NEptAjvDg5aGrbitOgqooV37RpSTIGYd/CSNuin4cpCNFdca/Vh5lnNfal7mqdGDbG7gMruARtw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-arm64-musl": {
+      "version": "1.3.14",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.3.14.tgz",
+      "integrity": "sha512-IivEUC+3HNSsQNCfaCDzev2CpsvWpgFReitCmj0PKIdXFRsTi78jtJiraLWnYy956j4wwZbKN0OFGkS2ekKAVg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-x64-gnu": {
+      "version": "1.3.14",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.3.14.tgz",
+      "integrity": "sha512-HtwwA1Z0tE2z9fgaR5ehgY5ULbnVLHj3tayyWhIElF4EWsi6aQfCyn/oCZAcjoPKfEnJiSNBYt5gMmfK8l4mJA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-x64-musl": {
+      "version": "1.3.14",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.3.14.tgz",
+      "integrity": "sha512-RPXilkTD8IVgpou4TNuqZJOB7kMrVJ7sm7GgHF4v1eV3xdIyvy4w5FWjXZRdwMW6iunLgQEckuOmVx0I4mrdNg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-win32-arm64-msvc": {
+      "version": "1.3.14",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.3.14.tgz",
+      "integrity": "sha512-H8Ka/ahJRs84hQCHC5ndORujbLBmi1mv+Z/m4CXpOaEX7TmeAo8nA17rrRckNvVkud9fghsKQGjkBQvJ0v7mRw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-win32-ia32-msvc": {
+      "version": "1.3.14",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.3.14.tgz",
+      "integrity": "sha512-H3ZmDXrVxrqBzzCFodwYfcXfTHE0xGNLJlLGzJ4haV6RBM3ZYIvRzDtPivDzic/VQncmPj1WpLoEDfx/7KNC8Q==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-win32-x64-msvc": {
+      "version": "1.3.14",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.3.14.tgz",
+      "integrity": "sha512-/D1lhWF/DQi2M7b6jWL35NmTY0mRJ5mwTXdmjqNNWOZ8h8TXQo1A3/FDFnfIIcRUeSNdF7IeB3xInT3BI34E1w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/jest": {
+      "version": "0.2.23",
+      "resolved": "https://registry.npmjs.org/@swc/jest/-/jest-0.2.23.tgz",
+      "integrity": "sha512-ZLj17XjHbPtNsgqjm83qizENw05emLkKGu3WuPUttcy9hkngl0/kcc7fDbcSBpADS0GUtsO+iKPjZFWVAtJSlA==",
+      "dev": true,
+      "dependencies": {
+        "@jest/create-cache-key-function": "^27.4.2",
+        "jsonc-parser": "^3.2.0"
+      },
+      "engines": {
+        "npm": ">= 7.0.0"
+      },
+      "peerDependencies": {
+        "@swc/core": "*"
+      }
+    },
     "node_modules/@tootallnate/once": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -2370,18 +2684,6 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
-    "node_modules/bs-logger": {
-      "version": "0.2.6",
-      "resolved": "https://registry.npmjs.org/bs-logger/-/bs-logger-0.2.6.tgz",
-      "integrity": "sha512-pd8DCoxmbgc7hyPKOvxtqNcjYoOsABPQdcCUjGp3d42VR2CX1ORhk2A87oqqu5R1kk+76nsxZupkmyd+MVtCog==",
-      "dev": true,
-      "dependencies": {
-        "fast-json-stable-stringify": "2.x"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/bser": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/bser/-/bser-2.1.1.tgz",
@@ -6405,12 +6707,6 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true
     },
-    "node_modules/lodash.memoize": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
-      "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==",
-      "dev": true
-    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -6466,7 +6762,9 @@
       "version": "1.3.6",
       "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
       "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/makeerror": {
       "version": "1.0.12",
@@ -8063,73 +8361,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/ts-jest": {
-      "version": "29.0.3",
-      "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-29.0.3.tgz",
-      "integrity": "sha512-Ibygvmuyq1qp/z3yTh9QTwVVAbFdDy/+4BtIQR2sp6baF2SJU/8CKK/hhnGIDY2L90Az2jIqTwZPnN2p+BweiQ==",
-      "dev": true,
-      "dependencies": {
-        "bs-logger": "0.x",
-        "fast-json-stable-stringify": "2.x",
-        "jest-util": "^29.0.0",
-        "json5": "^2.2.1",
-        "lodash.memoize": "4.x",
-        "make-error": "1.x",
-        "semver": "7.x",
-        "yargs-parser": "^21.0.1"
-      },
-      "bin": {
-        "ts-jest": "cli.js"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      },
-      "peerDependencies": {
-        "@babel/core": ">=7.0.0-beta.0 <8",
-        "@jest/types": "^29.0.0",
-        "babel-jest": "^29.0.0",
-        "jest": "^29.0.0",
-        "typescript": ">=4.3"
-      },
-      "peerDependenciesMeta": {
-        "@babel/core": {
-          "optional": true
-        },
-        "@jest/types": {
-          "optional": true
-        },
-        "babel-jest": {
-          "optional": true
-        },
-        "esbuild": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/ts-jest/node_modules/semver": {
-      "version": "7.3.7",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
-      "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
-      "dev": true,
-      "dependencies": {
-        "lru-cache": "^6.0.0"
-      },
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/ts-jest/node_modules/yargs-parser": {
-      "version": "21.1.1",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
-      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
-      "dev": true,
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/ts-node": {
       "version": "10.9.1",
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.1.tgz",
@@ -9320,6 +9551,88 @@
         }
       }
     },
+    "@jest/create-cache-key-function": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/create-cache-key-function/-/create-cache-key-function-27.5.1.tgz",
+      "integrity": "sha512-dmH1yW+makpTSURTy8VzdUwFnfQh1G8R+DxO2Ho2FFmBbKFEVm+3jWdvFhE2VqB/LATCTokkP0dotjyQyw5/AQ==",
+      "dev": true,
+      "requires": {
+        "@jest/types": "^27.5.1"
+      },
+      "dependencies": {
+        "@jest/types": {
+          "version": "27.5.1",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-27.5.1.tgz",
+          "integrity": "sha512-Cx46iJ9QpwQTjIdq5VJu2QTMMs3QlEjI0x1QbBP5W1+nMzyc2XmimiRR/CbX9TO0cPTeUlxWMOu8mslYsJ8DEw==",
+          "dev": true,
+          "requires": {
+            "@types/istanbul-lib-coverage": "^2.0.0",
+            "@types/istanbul-reports": "^3.0.0",
+            "@types/node": "*",
+            "@types/yargs": "^16.0.0",
+            "chalk": "^4.0.0"
+          }
+        },
+        "@types/yargs": {
+          "version": "16.0.4",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.4.tgz",
+          "integrity": "sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw==",
+          "dev": true,
+          "requires": {
+            "@types/yargs-parser": "*"
+          }
+        },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "@jest/environment": {
       "version": "29.1.2",
       "resolved": "https://registry.npmjs.org/@jest/environment/-/environment-29.1.2.tgz",
@@ -9759,6 +10072,8 @@
     "@splidejs/utils": {
       "version": "file:../utils",
       "requires": {
+        "@swc/core": "^1.3.14",
+        "@swc/jest": "^0.2.23",
         "@types/jest": "^29.0.3",
         "@types/node": "^18.7.20",
         "@typescript-eslint/eslint-plugin": "^5.38.0",
@@ -9766,13 +10081,110 @@
         "eslint": "^8.24.0",
         "jest": "next",
         "jest-environment-jsdom": "^29.0.3",
-        "ts-jest": "^29.0.2",
         "ts-node": "^10.9.1",
         "typedoc": "^0.23.15",
         "typescript": "^4.6.4",
         "vite": "^3.1.0"
       }
     },
+    "@swc/core": {
+      "version": "1.3.14",
+      "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.3.14.tgz",
+      "integrity": "sha512-LpTTrXOGS7vnbR/rHrAux7GykUWbyVmI5NbICl9iF9yeqFdGm6JjaGBhbanmG8zrQL5aFx2kMxxb92V9D1KUiw==",
+      "dev": true,
+      "requires": {
+        "@swc/core-darwin-arm64": "1.3.14",
+        "@swc/core-darwin-x64": "1.3.14",
+        "@swc/core-linux-arm-gnueabihf": "1.3.14",
+        "@swc/core-linux-arm64-gnu": "1.3.14",
+        "@swc/core-linux-arm64-musl": "1.3.14",
+        "@swc/core-linux-x64-gnu": "1.3.14",
+        "@swc/core-linux-x64-musl": "1.3.14",
+        "@swc/core-win32-arm64-msvc": "1.3.14",
+        "@swc/core-win32-ia32-msvc": "1.3.14",
+        "@swc/core-win32-x64-msvc": "1.3.14"
+      }
+    },
+    "@swc/core-darwin-arm64": {
+      "version": "1.3.14",
+      "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.3.14.tgz",
+      "integrity": "sha512-QFuUq3341uOCrJMIWGuo+CmRC5qZoM2lUo7o2lmv1FO1Dh9njTG85pLD83vz6y4j/F034DBGzvRgSti/Bsoccw==",
+      "dev": true,
+      "optional": true
+    },
+    "@swc/core-darwin-x64": {
+      "version": "1.3.14",
+      "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.3.14.tgz",
+      "integrity": "sha512-fpAjbjXimJBmxCumRB8zjEtPc0lGUi9Uvu92XH6ww6AyXvg7KQmua5P2R9tnzAm6NwTCXKkgS86cgKysAbbObw==",
+      "dev": true,
+      "optional": true
+    },
+    "@swc/core-linux-arm-gnueabihf": {
+      "version": "1.3.14",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.3.14.tgz",
+      "integrity": "sha512-3XSFlgIyDPS+x2c0IFr0AGj4NUbrWGKbkkUCpmAURII0n3YoDsYw8Ux73I8MkWxTTwDGkou8qQOXyA28kAUM4w==",
+      "dev": true,
+      "optional": true
+    },
+    "@swc/core-linux-arm64-gnu": {
+      "version": "1.3.14",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.3.14.tgz",
+      "integrity": "sha512-r3fToDRYX76NEptAjvDg5aGrbitOgqooV37RpSTIGYd/CSNuin4cpCNFdca/Vh5lnNfal7mqdGDbG7gMruARtw==",
+      "dev": true,
+      "optional": true
+    },
+    "@swc/core-linux-arm64-musl": {
+      "version": "1.3.14",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.3.14.tgz",
+      "integrity": "sha512-IivEUC+3HNSsQNCfaCDzev2CpsvWpgFReitCmj0PKIdXFRsTi78jtJiraLWnYy956j4wwZbKN0OFGkS2ekKAVg==",
+      "dev": true,
+      "optional": true
+    },
+    "@swc/core-linux-x64-gnu": {
+      "version": "1.3.14",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.3.14.tgz",
+      "integrity": "sha512-HtwwA1Z0tE2z9fgaR5ehgY5ULbnVLHj3tayyWhIElF4EWsi6aQfCyn/oCZAcjoPKfEnJiSNBYt5gMmfK8l4mJA==",
+      "dev": true,
+      "optional": true
+    },
+    "@swc/core-linux-x64-musl": {
+      "version": "1.3.14",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.3.14.tgz",
+      "integrity": "sha512-RPXilkTD8IVgpou4TNuqZJOB7kMrVJ7sm7GgHF4v1eV3xdIyvy4w5FWjXZRdwMW6iunLgQEckuOmVx0I4mrdNg==",
+      "dev": true,
+      "optional": true
+    },
+    "@swc/core-win32-arm64-msvc": {
+      "version": "1.3.14",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.3.14.tgz",
+      "integrity": "sha512-H8Ka/ahJRs84hQCHC5ndORujbLBmi1mv+Z/m4CXpOaEX7TmeAo8nA17rrRckNvVkud9fghsKQGjkBQvJ0v7mRw==",
+      "dev": true,
+      "optional": true
+    },
+    "@swc/core-win32-ia32-msvc": {
+      "version": "1.3.14",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.3.14.tgz",
+      "integrity": "sha512-H3ZmDXrVxrqBzzCFodwYfcXfTHE0xGNLJlLGzJ4haV6RBM3ZYIvRzDtPivDzic/VQncmPj1WpLoEDfx/7KNC8Q==",
+      "dev": true,
+      "optional": true
+    },
+    "@swc/core-win32-x64-msvc": {
+      "version": "1.3.14",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.3.14.tgz",
+      "integrity": "sha512-/D1lhWF/DQi2M7b6jWL35NmTY0mRJ5mwTXdmjqNNWOZ8h8TXQo1A3/FDFnfIIcRUeSNdF7IeB3xInT3BI34E1w==",
+      "dev": true,
+      "optional": true
+    },
+    "@swc/jest": {
+      "version": "0.2.23",
+      "resolved": "https://registry.npmjs.org/@swc/jest/-/jest-0.2.23.tgz",
+      "integrity": "sha512-ZLj17XjHbPtNsgqjm83qizENw05emLkKGu3WuPUttcy9hkngl0/kcc7fDbcSBpADS0GUtsO+iKPjZFWVAtJSlA==",
+      "dev": true,
+      "requires": {
+        "@jest/create-cache-key-function": "^27.4.2",
+        "jsonc-parser": "^3.2.0"
+      }
+    },
     "@tootallnate/once": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -10402,15 +10814,6 @@
         "update-browserslist-db": "^1.0.5"
       }
     },
-    "bs-logger": {
-      "version": "0.2.6",
-      "resolved": "https://registry.npmjs.org/bs-logger/-/bs-logger-0.2.6.tgz",
-      "integrity": "sha512-pd8DCoxmbgc7hyPKOvxtqNcjYoOsABPQdcCUjGp3d42VR2CX1ORhk2A87oqqu5R1kk+76nsxZupkmyd+MVtCog==",
-      "dev": true,
-      "requires": {
-        "fast-json-stable-stringify": "2.x"
-      }
-    },
     "bser": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/bser/-/bser-2.1.1.tgz",
@@ -13307,12 +13710,6 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true
     },
-    "lodash.memoize": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
-      "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==",
-      "dev": true
-    },
     "lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -13356,7 +13753,9 @@
       "version": "1.3.6",
       "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
       "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "makeerror": {
       "version": "1.0.12",
@@ -14530,39 +14929,6 @@
       "integrity": "sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==",
       "dev": true
     },
-    "ts-jest": {
-      "version": "29.0.3",
-      "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-29.0.3.tgz",
-      "integrity": "sha512-Ibygvmuyq1qp/z3yTh9QTwVVAbFdDy/+4BtIQR2sp6baF2SJU/8CKK/hhnGIDY2L90Az2jIqTwZPnN2p+BweiQ==",
-      "dev": true,
-      "requires": {
-        "bs-logger": "0.x",
-        "fast-json-stable-stringify": "2.x",
-        "jest-util": "^29.0.0",
-        "json5": "^2.2.1",
-        "lodash.memoize": "4.x",
-        "make-error": "1.x",
-        "semver": "7.x",
-        "yargs-parser": "^21.0.1"
-      },
-      "dependencies": {
-        "semver": {
-          "version": "7.3.7",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
-          "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
-          "dev": true,
-          "requires": {
-            "lru-cache": "^6.0.0"
-          }
-        },
-        "yargs-parser": {
-          "version": "21.1.1",
-          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
-          "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
-          "dev": true
-        }
-      }
-    },
     "ts-node": {
       "version": "10.9.1",
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.1.tgz",

package.json

@@ -31,6 +31,8 @@
   },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^15.0.0",
+    "@swc/core": "^1.3.14",
+    "@swc/jest": "^0.2.23",
     "@types/jest": "^29.0.0",
     "@types/node": "^18.7.14",
     "@typescript-eslint/eslint-plugin": "^5.36.1",
@@ -48,7 +50,6 @@
     "stylelint-config-sass-guidelines": "^9.0.1",
     "stylelint-order": "^5.0.0",
     "stylelint-scss": "^4.3.0",
-    "ts-jest": "^29.0.2",
     "tslib": "^2.4.0",
     "typescript": "^4.8.2",
     "uglify-js": "^3.17.0"
@@ -61,7 +62,7 @@
     "build:css": "node scripts/build-css.js",
     "build:all": "npm run build:js && npm run build:module && npm run build:css && npm run build:types",
     "check:types": "tsc --noEmit",
-    "jest": "jest --clearCache && jest",
+    "jest": "jest",
     "eslint": "eslint src",
     "stylelint": "npx stylelint --fix ./src/css/**/*.scss",
     "beforecommit": "npm run eslint && npm run stylelint && npm run jest && npm run build:all"

src/js/components/Arrows/Arrows.ts

@@ -52,7 +52,7 @@ export interface ArrowsComponent extends BaseComponent {
  *
  * @return An Arrows component object.
  */
-export const Arrows: ComponentConstructor<ArrowsComponent> = ( Splide, Components, options, event ) => {
+export const Arrows: ComponentConstructor<ArrowsComponent> = (Splide, Components, options, event) => {
   const { on, bind, emit } = event;
   const { classes, i18n } = options;
   const { Elements, Controller } = Components;
@@ -93,7 +93,7 @@ export const Arrows: ComponentConstructor<ArrowsComponent> = ( Splide, Component
    */
   function mount(): void {
     init();
-    on( EVENT_UPDATED, remount );
+    on(EVENT_UPDATED, remount);
   }
 
   /**
@@ -110,20 +110,20 @@ export const Arrows: ComponentConstructor<ArrowsComponent> = ( Splide, Component
   function init(): void {
     const { arrows: enabled = true } = options;
 
-    if ( enabled && ! ( prev && next ) ) {
+    if (enabled && !(prev && next)) {
       createArrows();
     }
 
-    if ( prev && next ) {
-      assign( arrows, { prev, next } );
-      display( wrapper, enabled ? '' : 'none' );
-      addClass( wrapper, ( wrapperClasses = `${ CLASS_ARROWS }--${ options.direction }` ) );
+    if (prev && next) {
+      assign(arrows, { prev, next });
+      display(wrapper, enabled ? '' : 'none');
+      addClass(wrapper, (wrapperClasses = `${ CLASS_ARROWS }--${ options.direction }`));
 
-      if ( enabled ) {
+      if (enabled) {
         listen();
         update();
-        setAttribute( [ prev, next ], ARIA_CONTROLS, track.id );
-        emit( EVENT_ARROWS_MOUNTED, prev, next );
+        setAttribute([prev, next], ARIA_CONTROLS, track.id);
+        emit(EVENT_ARROWS_MOUNTED, prev, next);
       }
     }
   }
@@ -133,13 +133,13 @@ export const Arrows: ComponentConstructor<ArrowsComponent> = ( Splide, Component
    */
   function destroy(): void {
     event.destroy();
-    removeClass( wrapper, wrapperClasses );
+    removeClass(wrapper, wrapperClasses);
 
-    if ( created ) {
-      removeNode( placeholder ? [ prev, next ] : wrapper );
+    if (created) {
+      removeNode(placeholder ? [prev, next] : wrapper);
       prev = next = null;
     } else {
-      removeAttribute( [ prev, next ], ALL_ATTRIBUTES );
+      removeAttribute([prev, next], ALL_ATTRIBUTES);
     }
   }
 
@@ -147,9 +147,9 @@ export const Arrows: ComponentConstructor<ArrowsComponent> = ( Splide, Component
    * Listens to some events.
    */
   function listen(): void {
-    on( [ EVENT_MOUNTED, EVENT_MOVED, EVENT_REFRESH, EVENT_SCROLLED, EVENT_END_INDEX_CHANGED ], update );
-    bind( next, 'click', apply( go, '>' ) );
-    bind( prev, 'click', apply( go, '<' ) );
+    on([EVENT_MOUNTED, EVENT_MOVED, EVENT_REFRESH, EVENT_SCROLLED, EVENT_END_INDEX_CHANGED], update);
+    bind(next, 'click', apply(go, '>'));
+    bind(prev, 'click', apply(go, '<'));
   }
 
   /**
@@ -157,21 +157,21 @@ export const Arrows: ComponentConstructor<ArrowsComponent> = ( Splide, Component
    *
    * @param control - The control pattern.
    */
-  function go( control: string ): void {
-    Controller.go( control );
+  function go(control: string): void {
+    Controller.go(control);
   }
 
   /**
    * Create arrows and append them to the slider.
    */
   function createArrows(): void {
-    wrapper = placeholder || create( 'div', classes.arrows );
-    prev    = createArrow( true );
-    next    = createArrow( false );
+    wrapper = placeholder || create('div', classes.arrows);
+    prev = createArrow(true);
+    next = createArrow(false);
     created = true;
 
-    append( wrapper, prev, next );
-    ! placeholder && before( track, wrapper );
+    append(wrapper, prev, next);
+    !placeholder && before(track, wrapper);
   }
 
   /**
@@ -182,20 +182,20 @@ export const Arrows: ComponentConstructor<ArrowsComponent> = ( Splide, Component
    *
    * @return A created button element.
    */
-  function createArrow( prev: boolean ): HTMLButtonElement {
+  function createArrow(prev: boolean): HTMLButtonElement {
     const arrow = `<button class="${ classes.arrow } ${ prev ? classes.prev : classes.next }" type="button">`
-      +	`<svg xmlns="${ XML_NAME_SPACE }" viewBox="0 0 ${ SIZE } ${ SIZE }" width="${ SIZE }" height="${ SIZE }">`
+      + `<svg xmlns="${ XML_NAME_SPACE }" viewBox="0 0 ${ SIZE } ${ SIZE }" width="${ SIZE }" height="${ SIZE }">`
       + `<path d="${ options.arrowPath || PATH }" />`;
 
-    return parseHtml<HTMLButtonElement>( arrow );
+    return parseHtml<HTMLButtonElement>(arrow);
   }
 
   /**
    * Updates status of arrows, such as `disabled` and `aria-label`.
    */
   function update(): void {
-    if ( prev && next ) {
-      const index     = Splide.index;
+    if (prev && next) {
+      const index = Splide.index;
       const prevIndex = Controller.getPrev();
       const nextIndex = Controller.getNext();
       const prevLabel = prevIndex > -1 && index < prevIndex ? i18n.last : i18n.prev;
@@ -204,10 +204,10 @@ export const Arrows: ComponentConstructor<ArrowsComponent> = ( Splide, Component
       prev.disabled = prevIndex < 0;
       next.disabled = nextIndex < 0;
 
-      setAttribute( prev, ARIA_LABEL, prevLabel );
-      setAttribute( next, ARIA_LABEL, nextLabel );
+      setAttribute(prev, ARIA_LABEL, prevLabel);
+      setAttribute(next, ARIA_LABEL, nextLabel);
 
-      emit( EVENT_ARROWS_UPDATED, prev, next, prevIndex, nextIndex );
+      emit(EVENT_ARROWS_UPDATED, prev, next, prevIndex, nextIndex);
     }
   }
 

src/js/components/Arrows/test/loop.test.ts

@@ -1,35 +1,35 @@
 import { init } from '../../../test';
 
 
-describe.each( [ [ 'loop' ], [ 'rewind' ] ] )( 'Arrows in "%s" mode', ( mode: string ) => {
-  const type   = mode === 'loop' ? 'loop' : 'slide';
+describe.each([['loop'], ['rewind']])('Arrows in "%s" mode', (mode: string) => {
+  const type = mode === 'loop' ? 'loop' : 'slide';
   const rewind = mode === 'rewind';
-  const splide = init( { arrows: true, type, rewind, speed: 0 } );
+  const splide = init({ arrows: true, type, rewind, speed: 0 });
   const { Arrows } = splide.Components;
   const { next, prev } = Arrows.arrows;
   const { i18n } = splide.options;
 
-  test( 'should not disable arrows.', () => {
-    splide.go( 0 );
+  test('should not disable arrows.', () => {
+    splide.go(0);
 
-    expect( prev.disabled ).toBe( false );
-    expect( next.disabled ).toBe( false );
+    expect(prev.disabled).toBe(false);
+    expect(next.disabled).toBe(false);
 
-    splide.go( splide.length - 1 );
+    splide.go(splide.length - 1);
 
-    expect( prev.disabled ).toBe( false );
-    expect( next.disabled ).toBe( false );
-  } );
+    expect(prev.disabled).toBe(false);
+    expect(next.disabled).toBe(false);
+  });
 
-  test( 'should change the aria-label on the first or last slide.', () => {
-    splide.go( 0 );
+  test('should change the aria-label on the first or last slide.', () => {
+    splide.go(0);
 
-    expect( prev.getAttribute( 'aria-label' ) ).toBe( i18n.last );
-    expect( next.getAttribute( 'aria-label' ) ).toBe( i18n.next );
+    expect(prev.getAttribute('aria-label')).toBe(i18n.last);
+    expect(next.getAttribute('aria-label')).toBe(i18n.next);
 
-    splide.go( splide.length - 1 );
+    splide.go(splide.length - 1);
 
-    expect( prev.getAttribute( 'aria-label' ) ).toBe( i18n.prev );
-    expect( next.getAttribute( 'aria-label' ) ).toBe( i18n.first );
-  } );
-} );
+    expect(prev.getAttribute('aria-label')).toBe(i18n.prev);
+    expect(next.getAttribute('aria-label')).toBe(i18n.first);
+  });
+});

src/js/components/Arrows/test/slide.test.ts

@@ -2,60 +2,60 @@ import { EVENT_MOVED } from '../../../constants/events';
 import { fire, init } from '../../../test';
 
 
-describe( 'Arrows', () => {
-  const splide = init( { arrows: true, speed: 0 } );
+describe('Arrows', () => {
+  const splide = init({ arrows: true, speed: 0 });
   const { Arrows } = splide.Components;
   const { next, prev } = Arrows.arrows;
   const { i18n } = splide.options;
 
-  test( 'can generate arrows.', () => {
-    expect( prev instanceof HTMLButtonElement ).toBe( true );
-    expect( next instanceof HTMLButtonElement ).toBe( true );
-  } );
+  test('can generate arrows.', () => {
+    expect(prev instanceof HTMLButtonElement).toBe(true);
+    expect(next instanceof HTMLButtonElement).toBe(true);
+  });
 
-  test( 'can navigate the slider.', () => {
-    fire( next, 'click' );
-    expect( splide.index ).toBe( 1 );
+  test('can navigate the slider.', () => {
+    fire(next, 'click');
+    expect(splide.index).toBe(1);
 
-    fire( next, 'click' );
-    expect( splide.index ).toBe( 2 );
+    fire(next, 'click');
+    expect(splide.index).toBe(2);
 
-    fire( prev, 'click' );
-    expect( splide.index ).toBe( 1 );
+    fire(prev, 'click');
+    expect(splide.index).toBe(1);
 
-    fire( prev, 'click' );
-    expect( splide.index ).toBe( 0 );
-  } );
+    fire(prev, 'click');
+    expect(splide.index).toBe(0);
+  });
 
-  test( 'can disable arrows if there is no slide to go to.', () => {
-    expect( prev.disabled ).toBe( true );
-    expect( next.disabled ).toBe( false );
+  test('can disable arrows if there is no slide to go to.', () => {
+    expect(prev.disabled).toBe(true);
+    expect(next.disabled).toBe(false);
 
     // Go to the last slide.
-    splide.go( splide.length - 1 );
+    splide.go(splide.length - 1);
 
-    expect( prev.disabled ).toBe( false );
-    expect( next.disabled ).toBe( true );
-  } );
+    expect(prev.disabled).toBe(false);
+    expect(next.disabled).toBe(true);
+  });
 
-  test( 'should not disable arrows if the slider position is not approximately same with each limit.', () => {
-    splide.go( 0 );
+  test('should not disable arrows if the slider position is not approximately same with each limit.', () => {
+    splide.go(0);
 
-    expect( prev.disabled ).toBe( true );
-    expect( next.disabled ).toBe( false );
+    expect(prev.disabled).toBe(true);
+    expect(next.disabled).toBe(false);
 
-    splide.Components.Move.translate( -10 );
-    splide.emit( EVENT_MOVED );
+    splide.Components.Move.translate(-10);
+    splide.emit(EVENT_MOVED);
 
     // Index should be still 0
-    expect( splide.index ).toBe( 0 );
+    expect(splide.index).toBe(0);
 
-    expect( prev.disabled ).toBe( false );
-    expect( next.disabled ).toBe( false );
-  } );
+    expect(prev.disabled).toBe(false);
+    expect(next.disabled).toBe(false);
+  });
 
-  test( 'can update aria attributes.', () => {
-    expect( prev.getAttribute( 'aria-label' ) ).toBe( i18n.prev );
-    expect( next.getAttribute( 'aria-label' ) ).toBe( i18n.next );
-  } );
-} );
+  test('can update aria attributes.', () => {
+    expect(prev.getAttribute('aria-label')).toBe(i18n.prev);
+    expect(next.getAttribute('aria-label')).toBe(i18n.next);
+  });
+});

src/js/components/Autoplay/Autoplay.ts

@@ -36,10 +36,10 @@ export interface AutoplayComponent extends BaseComponent {
  *
  * @return An Autoplay component object.
  */
-export const Autoplay: ComponentConstructor<AutoplayComponent> = ( Splide, Components, options, event ) => {
+export const Autoplay: ComponentConstructor<AutoplayComponent> = (Splide, Components, options, event) => {
   const { on, bind, emit } = event;
   const { interval: duration, pauseOnHover = true, pauseOnFocus = true, resetProgress = true } = options;
-  const interval = RequestInterval( duration, () => Splide.go( '>' ), onAnimationFrame );
+  const interval = RequestInterval(duration, () => Splide.go('>'), onAnimationFrame);
   const { isPaused } = interval;
   const { Elements, Elements: { root, toggle } } = Components;
   const { autoplay } = options;
@@ -64,9 +64,9 @@ export const Autoplay: ComponentConstructor<AutoplayComponent> = ( Splide, Compo
    * Called when the component is mounted.
    */
   function mount(): void {
-    if ( autoplay ) {
+    if (autoplay) {
       listen();
-      toggle && setAttribute( toggle, ARIA_CONTROLS, Elements.track.id );
+      toggle && setAttribute(toggle, ARIA_CONTROLS, Elements.track.id);
       stopped || play();
       update();
     }
@@ -76,39 +76,39 @@ export const Autoplay: ComponentConstructor<AutoplayComponent> = ( Splide, Compo
    * Listens to some events.
    */
   function listen(): void {
-    if ( pauseOnHover ) {
-      bind( root, 'mouseenter mouseleave', e => {
+    if (pauseOnHover) {
+      bind(root, 'mouseenter mouseleave', e => {
         hovered = e.type === 'mouseenter';
         autoToggle();
-      } );
+      });
     }
 
-    if ( pauseOnFocus ) {
-      bind( root, 'focusin focusout', e => {
+    if (pauseOnFocus) {
+      bind(root, 'focusin focusout', e => {
         focused = e.type === 'focusin';
         autoToggle();
-      } );
+      });
     }
 
-    if ( toggle ) {
-      bind( toggle, 'click', () => {
-        stopped ? play() : pause( true );
-      } );
+    if (toggle) {
+      bind(toggle, 'click', () => {
+        stopped ? play() : pause(true);
+      });
     }
 
-    on( [ EVENT_MOVE, EVENT_SCROLL, EVENT_REFRESH ], interval.rewind );
-    on( EVENT_MOVE, onMove );
+    on([EVENT_MOVE, EVENT_SCROLL, EVENT_REFRESH], interval.rewind);
+    on(EVENT_MOVE, onMove);
   }
 
   /**
    * Starts autoplay and clears all flags.
    */
   function play(): void {
-    if ( isPaused() && Components.Slides.isEnough() ) {
-      interval.start( ! resetProgress );
+    if (isPaused() && Components.Slides.isEnough()) {
+      interval.start(!resetProgress);
       focused = hovered = stopped = false;
       update();
-      emit( EVENT_AUTOPLAY_PLAY );
+      emit(EVENT_AUTOPLAY_PLAY);
     }
   }
 
@@ -117,13 +117,13 @@ export const Autoplay: ComponentConstructor<AutoplayComponent> = ( Splide, Compo
    *
    * @param stop - If `true`, autoplay keeps paused until `play()` is explicitly called.
    */
-  function pause( stop = true ): void {
-    stopped = !! stop;
+  function pause(stop = true): void {
+    stopped = !!stop;
     update();
 
-    if ( ! isPaused() ) {
+    if (!isPaused()) {
       interval.pause();
-      emit( EVENT_AUTOPLAY_PAUSE );
+      emit(EVENT_AUTOPLAY_PAUSE);
     }
   }
 
@@ -132,8 +132,8 @@ export const Autoplay: ComponentConstructor<AutoplayComponent> = ( Splide, Compo
    * If autoplay is manually paused, this will do nothing.
    */
   function autoToggle(): void {
-    if ( ! stopped ) {
-      hovered || focused ? pause( false ) : play();
+    if (!stopped) {
+      hovered || focused ? pause(false) : play();
     }
   }
 
@@ -141,9 +141,9 @@ export const Autoplay: ComponentConstructor<AutoplayComponent> = ( Splide, Compo
    * Updates the toggle button status.
    */
   function update(): void {
-    if ( toggle ) {
-      toggleClass( toggle, CLASS_ACTIVE, ! stopped );
-      setAttribute( toggle, ARIA_LABEL, options.i18n[ stopped ? 'play' : 'pause' ] );
+    if (toggle) {
+      toggleClass(toggle, CLASS_ACTIVE, !stopped);
+      setAttribute(toggle, ARIA_LABEL, options.i18n[stopped ? 'play' : 'pause']);
     }
   }
 
@@ -152,10 +152,10 @@ export const Autoplay: ComponentConstructor<AutoplayComponent> = ( Splide, Compo
    *
    * @param rate - The progress rate between 0 and 1.
    */
-  function onAnimationFrame( rate: number ): void {
+  function onAnimationFrame(rate: number): void {
     const { bar } = Elements;
-    bar && style( bar, 'width', `${ rate * 100 }%` );
-    emit( EVENT_AUTOPLAY_PLAYING, rate );
+    bar && style(bar, 'width', `${ rate * 100 }%`);
+    emit(EVENT_AUTOPLAY_PLAYING, rate);
   }
 
   /**
@@ -163,9 +163,9 @@ export const Autoplay: ComponentConstructor<AutoplayComponent> = ( Splide, Compo
    *
    * @param index - An index to move to.
    */
-  function onMove( index: number ): void {
-    const Slide = Components.Slides.getAt( index );
-    interval.set( Slide && +getAttribute( Slide.slide, INTERVAL_DATA_ATTRIBUTE ) || options.interval );
+  function onMove(index: number): void {
+    const Slide = Components.Slides.getAt(index);
+    interval.set(Slide && +getAttribute(Slide.slide, INTERVAL_DATA_ATTRIBUTE) || options.interval);
   }
 
   return {

src/js/components/Autoplay/test/autoToggle.test.ts

@@ -3,158 +3,158 @@ import { fire, init, wait } from '../../../test';
 import { AutoplayComponent } from '../Autoplay';
 
 
-describe( 'Autoplay', () => {
-  describe.each( [
-    [ 'mouseenter', 'mouseleave' ],
-    [ 'focusin', 'focusout' ],
-  ] )( 'autoToggle', ( pauseEvent, resumeEvent ) => {
-    const interval          = 1000;
+describe('Autoplay', () => {
+  describe.each([
+    ['mouseenter', 'mouseleave'],
+    ['focusin', 'focusout'],
+  ])('autoToggle', (pauseEvent, resumeEvent) => {
+    const interval = 1000;
     const intervalAndBuffer = 1100;
 
     let splide: Splide;
     let Autoplay: AutoplayComponent;
 
-    beforeEach( () => {
-      splide   = init( { autoplay: true, interval } );
+    beforeEach(() => {
+      splide = init({ autoplay: true, interval });
       Autoplay = splide.Components.Autoplay;
-    } );
+    });
 
-    test( `can pause autoplay when the slider detects ${ pauseEvent }.`, async () => {
-      expect( splide.index ).toBe( 0 );
+    test(`can pause autoplay when the slider detects ${ pauseEvent }.`, async () => {
+      expect(splide.index).toBe(0);
 
-      fire( splide.root, pauseEvent );
-      expect( Autoplay.isPaused() ).toBe( true );
+      fire(splide.root, pauseEvent);
+      expect(Autoplay.isPaused()).toBe(true);
 
-      await wait( intervalAndBuffer );
-      expect( splide.index ).toBe( 0 );
+      await wait(intervalAndBuffer);
+      expect(splide.index).toBe(0);
 
-      await wait( intervalAndBuffer );
-      expect( splide.index ).toBe( 0 );
-    } );
+      await wait(intervalAndBuffer);
+      expect(splide.index).toBe(0);
+    });
 
-    test( `can replay autoplay when the slider detects ${ resumeEvent } with resetting the progress.`, async () => {
-      expect( splide.index ).toBe( 0 );
+    test(`can replay autoplay when the slider detects ${ resumeEvent } with resetting the progress.`, async () => {
+      expect(splide.index).toBe(0);
 
       // Wait for 500ms
-      await wait( interval / 2 );
-      fire( splide.root, pauseEvent );
-      expect( Autoplay.isPaused() ).toBe( true );
+      await wait(interval / 2);
+      fire(splide.root, pauseEvent);
+      expect(Autoplay.isPaused()).toBe(true);
 
-      await wait( intervalAndBuffer );
-      expect( splide.index ).toBe( 0 );
+      await wait(intervalAndBuffer);
+      expect(splide.index).toBe(0);
 
-      fire( splide.root, resumeEvent );
-      expect( Autoplay.isPaused() ).toBe( false );
+      fire(splide.root, resumeEvent);
+      expect(Autoplay.isPaused()).toBe(false);
 
       // Remaining around 500ms
-      await wait( ( interval / 2 ) + 100 );
+      await wait((interval / 2) + 100);
 
       // Still 0 because the progress has been reset
-      expect( splide.index ).toBe( 0 );
+      expect(splide.index).toBe(0);
 
       // Wait for rest 500ms
-      await wait( ( interval / 2 ) );
-      expect( splide.index ).toBe( 1 );
-    } );
+      await wait((interval / 2));
+      expect(splide.index).toBe(1);
+    });
 
-    test( `can resume autoplay when the slider detects ${ resumeEvent } without resetting the progress.`, async () => {
-      splide   = init( { autoplay: true, interval, resetProgress: false } );
+    test(`can resume autoplay when the slider detects ${ resumeEvent } without resetting the progress.`, async () => {
+      splide = init({ autoplay: true, interval, resetProgress: false });
       Autoplay = splide.Components.Autoplay;
 
-      expect( splide.index ).toBe( 0 );
+      expect(splide.index).toBe(0);
 
       // Wait for 500ms
-      await wait( interval / 2 );
-      fire( splide.root, pauseEvent );
-      expect( Autoplay.isPaused() ).toBe( true );
+      await wait(interval / 2);
+      fire(splide.root, pauseEvent);
+      expect(Autoplay.isPaused()).toBe(true);
 
-      await wait( intervalAndBuffer );
-      expect( splide.index ).toBe( 0 );
+      await wait(intervalAndBuffer);
+      expect(splide.index).toBe(0);
 
-      fire( splide.root, resumeEvent );
-      expect( Autoplay.isPaused() ).toBe( false );
+      fire(splide.root, resumeEvent);
+      expect(Autoplay.isPaused()).toBe(false);
 
       // Remaining around 500ms
-      await wait( ( interval / 2 ) + 100 );
-      expect( splide.index ).toBe( 1 );
-    } );
-  } );
-
-  test( 'should not pause autoplay if the `pauseOnHover` is false.', () => {
-    const splide       = init( { autoplay: true, pauseOnHover: false } );
-    const { root }     = splide;
+      await wait((interval / 2) + 100);
+      expect(splide.index).toBe(1);
+    });
+  });
+
+  test('should not pause autoplay if the `pauseOnHover` is false.', () => {
+    const splide = init({ autoplay: true, pauseOnHover: false });
+    const { root } = splide;
     const { Autoplay } = splide.Components;
 
-    expect( Autoplay.isPaused() ).toBe( false );
+    expect(Autoplay.isPaused()).toBe(false);
 
-    fire( root, 'mouseenter' );
+    fire(root, 'mouseenter');
 
-    expect( Autoplay.isPaused() ).toBe( false );
-  } );
+    expect(Autoplay.isPaused()).toBe(false);
+  });
 
-  test( 'should not pause autoplay if the `pauseOnFocus` is false.', () => {
-    const splide       = init( { autoplay: true, pauseOnFocus: false } );
-    const { root }     = splide;
+  test('should not pause autoplay if the `pauseOnFocus` is false.', () => {
+    const splide = init({ autoplay: true, pauseOnFocus: false });
+    const { root } = splide;
     const { Autoplay } = splide.Components;
 
-    expect( Autoplay.isPaused() ).toBe( false );
+    expect(Autoplay.isPaused()).toBe(false);
 
-    fire( root, 'focusin' );
+    fire(root, 'focusin');
 
-    expect( Autoplay.isPaused() ).toBe( false );
-  } );
+    expect(Autoplay.isPaused()).toBe(false);
+  });
 
-  test( 'should not start autoplay on `mouseleave` if the slider has focus.', () => {
-    const splide       = init( { autoplay: true } );
-    const { root }     = splide;
+  test('should not start autoplay on `mouseleave` if the slider has focus.', () => {
+    const splide = init({ autoplay: true });
+    const { root } = splide;
     const { Autoplay } = splide.Components;
 
-    fire( root, 'mouseenter' );
-    fire( root, 'focusin' );
+    fire(root, 'mouseenter');
+    fire(root, 'focusin');
 
-    expect( Autoplay.isPaused() ).toBe( true );
+    expect(Autoplay.isPaused()).toBe(true);
 
-    fire( root, 'mouseleave' );
-    expect( Autoplay.isPaused() ).toBe( true );
+    fire(root, 'mouseleave');
+    expect(Autoplay.isPaused()).toBe(true);
 
-    fire( root, 'focusout' );
-    expect( Autoplay.isPaused() ).toBe( false );
-  } );
+    fire(root, 'focusout');
+    expect(Autoplay.isPaused()).toBe(false);
+  });
 
-  test( 'should not start autoplay on `focusout` if the mouse is on the slider.', () => {
-    const splide       = init( { autoplay: true } );
-    const { root }     = splide;
+  test('should not start autoplay on `focusout` if the mouse is on the slider.', () => {
+    const splide = init({ autoplay: true });
+    const { root } = splide;
     const { Autoplay } = splide.Components;
 
-    fire( root, 'mouseenter' );
-    fire( root, 'focusin' );
+    fire(root, 'mouseenter');
+    fire(root, 'focusin');
 
-    expect( Autoplay.isPaused() ).toBe( true );
+    expect(Autoplay.isPaused()).toBe(true);
 
-    fire( root, 'focusout' );
-    expect( Autoplay.isPaused() ).toBe( true );
+    fire(root, 'focusout');
+    expect(Autoplay.isPaused()).toBe(true);
 
-    fire( root, 'mouseleave' );
-    expect( Autoplay.isPaused() ).toBe( false );
-  } );
+    fire(root, 'mouseleave');
+    expect(Autoplay.isPaused()).toBe(false);
+  });
 
-  test( 'should not start autoplay on `focusout` and `mouseleave` if autoplay is manually paused.', () => {
-    const splide       = init( { autoplay: true } );
-    const { root }     = splide;
+  test('should not start autoplay on `focusout` and `mouseleave` if autoplay is manually paused.', () => {
+    const splide = init({ autoplay: true });
+    const { root } = splide;
     const { Autoplay } = splide.Components;
 
     // Manually pause autoplay.
     Autoplay.pause();
-    expect( Autoplay.isPaused() ).toBe( true );
+    expect(Autoplay.isPaused()).toBe(true);
 
-    fire( root, 'mouseenter' );
-    fire( root, 'focusin' );
+    fire(root, 'mouseenter');
+    fire(root, 'focusin');
 
-    fire( root, 'mouseleave' );
-    fire( root, 'focusout' );
+    fire(root, 'mouseleave');
+    fire(root, 'focusout');
 
     // These events should not start autoplay.
-    expect( Autoplay.isPaused() ).toBe( true );
-  } );
-} );
+    expect(Autoplay.isPaused()).toBe(true);
+  });
+});
 

src/js/components/Autoplay/test/button.test.ts

@@ -2,60 +2,60 @@ import { CLASS_ACTIVE } from '../../../constants/classes';
 import { fire, init } from '../../../test';
 
 
-describe( 'Autoplay toggle button.', () => {
-  test( 'should be active if `autoplay` option is `true`.', () => {
-    const splide = init( { autoplay: true }, { autoplay: true } );
+describe('Autoplay toggle button.', () => {
+  test('should be active if `autoplay` option is `true`.', () => {
+    const splide = init({ autoplay: true }, { autoplay: true });
     const { toggle } = splide.Components.Elements;
 
-    expect( toggle.classList.contains( CLASS_ACTIVE ) ).toBe( true );
-  } );
+    expect(toggle.classList.contains(CLASS_ACTIVE)).toBe(true);
+  });
 
-  test( 'should be inactive if `autoplay` option is `false`.', () => {
-    const splide = init( { autoplay: 'pause' }, { autoplay: true } );
+  test('should be inactive if `autoplay` option is `false`.', () => {
+    const splide = init({ autoplay: 'pause' }, { autoplay: true });
     const { toggle } = splide.Components.Elements;
 
-    expect( toggle.classList.contains( CLASS_ACTIVE ) ).toBe( false );
-  } );
+    expect(toggle.classList.contains(CLASS_ACTIVE)).toBe(false);
+  });
 
-  test( 'can start/pause autoplay and update the button status.', () => {
-    const splide = init( { autoplay: true }, { autoplay: true } );
+  test('can start/pause autoplay and update the button status.', () => {
+    const splide = init({ autoplay: true }, { autoplay: true });
     const { Autoplay } = splide.Components;
     const { toggle } = splide.Components.Elements;
 
-    expect( Autoplay.isPaused() ).toBe( false );
+    expect(Autoplay.isPaused()).toBe(false);
 
-    fire( toggle, 'click' );
-    expect( Autoplay.isPaused() ).toBe( true );
-    expect( toggle.classList.contains( CLASS_ACTIVE ) ).toBe( false );
+    fire(toggle, 'click');
+    expect(Autoplay.isPaused()).toBe(true);
+    expect(toggle.classList.contains(CLASS_ACTIVE)).toBe(false);
 
-    fire( toggle, 'click' );
-    expect( Autoplay.isPaused() ).toBe( false );
-    expect( toggle.classList.contains( CLASS_ACTIVE ) ).toBe( true );
+    fire(toggle, 'click');
+    expect(Autoplay.isPaused()).toBe(false);
+    expect(toggle.classList.contains(CLASS_ACTIVE)).toBe(true);
 
-    fire( toggle, 'click' );
-    expect( Autoplay.isPaused() ).toBe( true );
-    expect( toggle.classList.contains( CLASS_ACTIVE ) ).toBe( false );
-  } );
+    fire(toggle, 'click');
+    expect(Autoplay.isPaused()).toBe(true);
+    expect(toggle.classList.contains(CLASS_ACTIVE)).toBe(false);
+  });
 
-  test( 'should not be inactive("Play" button) when the autoplay is just paused.', () => {
-    const splide = init( { autoplay: true }, { autoplay: true } );
+  test('should not be inactive("Play" button) when the autoplay is just paused.', () => {
+    const splide = init({ autoplay: true }, { autoplay: true });
     const { Autoplay } = splide.Components;
     const { toggle } = splide.Components.Elements;
 
-    expect( Autoplay.isPaused() ).toBe( false );
+    expect(Autoplay.isPaused()).toBe(false);
 
-    fire( splide.Components.Elements.root, 'focusin' );
-    expect( Autoplay.isPaused() ).toBe( true ); // Paused but not stopped
-    expect( toggle.classList.contains( CLASS_ACTIVE ) ).toBe( true );
+    fire(splide.Components.Elements.root, 'focusin');
+    expect(Autoplay.isPaused()).toBe(true); // Paused but not stopped
+    expect(toggle.classList.contains(CLASS_ACTIVE)).toBe(true);
 
     // Clicks the "pause" button, which stops the autoplay
-    fire( toggle, 'click' );
-    expect( Autoplay.isPaused() ).toBe( true );
-    expect( toggle.classList.contains( CLASS_ACTIVE ) ).toBe( false );
+    fire(toggle, 'click');
+    expect(Autoplay.isPaused()).toBe(true);
+    expect(toggle.classList.contains(CLASS_ACTIVE)).toBe(false);
 
     // Resumes autoplay but it still stops
-    fire( splide.Components.Elements.root, 'focusout' );
-    expect( Autoplay.isPaused() ).toBe( true );
-    expect( toggle.classList.contains( CLASS_ACTIVE ) ).toBe( false );
-  } );
-} );
+    fire(splide.Components.Elements.root, 'focusout');
+    expect(Autoplay.isPaused()).toBe(true);
+    expect(toggle.classList.contains(CLASS_ACTIVE)).toBe(false);
+  });
+});

src/js/components/Autoplay/test/event.test.ts

@@ -2,71 +2,71 @@ import { EVENT_AUTOPLAY_PAUSE, EVENT_AUTOPLAY_PLAY, EVENT_AUTOPLAY_PLAYING } fro
 import { init, wait } from '../../../test';
 
 
-describe( 'Autoplay', () => {
-  test( 'can emit the event when autoplay begins.', () => {
-    const interval     = 1000;
-    const splide       = init( { autoplay: 'pause', interval } );
-    const callback     = jest.fn();
+describe('Autoplay', () => {
+  test('can emit the event when autoplay begins.', () => {
+    const interval = 1000;
+    const splide = init({ autoplay: 'pause', interval });
+    const callback = jest.fn();
     const { Autoplay } = splide.Components;
 
-    splide.on( EVENT_AUTOPLAY_PLAY, callback );
+    splide.on(EVENT_AUTOPLAY_PLAY, callback);
 
     Autoplay.play();
-    expect( callback ).toHaveBeenCalledTimes( 1 );
+    expect(callback).toHaveBeenCalledTimes(1);
 
     // The callback won't be called because autoplay has already starts.
     Autoplay.play();
-    expect( callback ).toHaveBeenCalledTimes( 1 );
+    expect(callback).toHaveBeenCalledTimes(1);
 
     Autoplay.pause();
     Autoplay.play();
-    expect( callback ).toHaveBeenCalledTimes( 2 );
-  } );
+    expect(callback).toHaveBeenCalledTimes(2);
+  });
 
-  test( 'can emit the event when autoplay is paused.', () => {
-    const interval     = 1000;
-    const splide       = init( { autoplay: true, interval } );
-    const callback     = jest.fn();
+  test('can emit the event when autoplay is paused.', () => {
+    const interval = 1000;
+    const splide = init({ autoplay: true, interval });
+    const callback = jest.fn();
     const { Autoplay } = splide.Components;
 
-    splide.on( EVENT_AUTOPLAY_PAUSE, callback );
+    splide.on(EVENT_AUTOPLAY_PAUSE, callback);
 
     Autoplay.pause();
-    expect( callback ).toHaveBeenCalledTimes( 1 );
+    expect(callback).toHaveBeenCalledTimes(1);
 
     // The callback won't be called because autoplay has been already paused.
     Autoplay.pause();
-    expect( callback ).toHaveBeenCalledTimes( 1 );
+    expect(callback).toHaveBeenCalledTimes(1);
 
     Autoplay.play();
     Autoplay.pause();
-    expect( callback ).toHaveBeenCalledTimes( 2 );
-  } );
+    expect(callback).toHaveBeenCalledTimes(2);
+  });
 
-  test( 'can emit the playing event while the interval timer is ticking.', async () => {
-    const splide = init( { autoplay: true, interval: 2000 } );
+  test('can emit the playing event while the interval timer is ticking.', async () => {
+    const splide = init({ autoplay: true, interval: 2000 });
 
     let progressRate: number;
 
-    splide.on( EVENT_AUTOPLAY_PLAYING, rate => {
+    splide.on(EVENT_AUTOPLAY_PLAYING, rate => {
       progressRate = rate;
-    } );
+    });
 
-    await wait( 1 );
-    expect( progressRate ).toBeLessThan( 0.1 );
+    await wait(1);
+    expect(progressRate).toBeLessThan(0.1);
 
     // Around 1000ms
-    await wait( 1000 + 50 );
-    expect( progressRate ).toBeGreaterThanOrEqual( 0.5 );
-    expect( progressRate ).toBeLessThan( 1 );
+    await wait(1000 + 50);
+    expect(progressRate).toBeGreaterThanOrEqual(0.5);
+    expect(progressRate).toBeLessThan(1);
 
     // Around 1600ms
-    await wait( 600 + 50 );
-    expect( progressRate ).toBeGreaterThanOrEqual( 0.8 );
-    expect( progressRate ).toBeLessThan( 1 );
+    await wait(600 + 50);
+    expect(progressRate).toBeGreaterThanOrEqual(0.8);
+    expect(progressRate).toBeLessThan(1);
 
     // Around 2000ms
-    await wait( 400 + 50 );
-    expect( progressRate ).toBeLessThan( 0.15 );
-  } );
-} );
+    await wait(400 + 50);
+    expect(progressRate).toBeLessThan(0.15);
+  });
+});

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

@@ -1,107 +1,107 @@
 import { init, wait } from '../../../test';
 
 
-describe( 'Autoplay', () => {
-  test( 'can start autoplay.', async () => {
-    const interval          = 1000;
+describe('Autoplay', () => {
+  test('can start autoplay.', async () => {
+    const interval = 1000;
     const intervalAndBuffer = 1100;
-    const splide            = init( { autoplay: true, interval, waitForTransition: false } );
+    const splide = init({ autoplay: true, interval, waitForTransition: false });
 
-    expect( splide.index ).toBe( 0 );
+    expect(splide.index).toBe(0);
 
-    await wait( intervalAndBuffer );
-    expect( splide.index ).toBe( 1 );
+    await wait(intervalAndBuffer);
+    expect(splide.index).toBe(1);
 
-    await wait( intervalAndBuffer );
-    expect( splide.index ).toBe( 2 );
-  } );
+    await wait(intervalAndBuffer);
+    expect(splide.index).toBe(2);
+  });
 
-  test( 'can use the specified interval duration.', async () => {
-    const interval          = 2000;
+  test('can use the specified interval duration.', async () => {
+    const interval = 2000;
     const intervalAndBuffer = 2100;
-    const splide            = init( { autoplay: true, interval, waitForTransition: false } );
+    const splide = init({ autoplay: true, interval, waitForTransition: false });
 
-    expect( splide.index ).toBe( 0 );
+    expect(splide.index).toBe(0);
 
-    await wait( intervalAndBuffer );
-    expect( splide.index ).toBe( 1 );
+    await wait(intervalAndBuffer);
+    expect(splide.index).toBe(1);
 
-    await wait( intervalAndBuffer );
-    expect( splide.index ).toBe( 2 );
-  } );
+    await wait(intervalAndBuffer);
+    expect(splide.index).toBe(2);
+  });
 
-  test( 'can use the interval duration provided by the data attribute.', async () => {
+  test('can use the interval duration provided by the data attribute.', async () => {
     const interval = 1000;
-    const splide   = init(
+    const splide = init(
       { autoplay: true, interval, waitForTransition: false },
-      { dataInterval: [ 0, 2000 ] }
+      { dataInterval: [0, 2000] },
     );
 
-    expect( splide.index ).toBe( 0 );
+    expect(splide.index).toBe(0);
 
-    await wait( 1100 );
-    expect( splide.index ).toBe( 1 );
+    await wait(1100);
+    expect(splide.index).toBe(1);
 
-    await wait( 1100 ); // Should be still 1 because using 2000
-    expect( splide.index ).toBe( 1 );
+    await wait(1100); // Should be still 1 because using 2000
+    expect(splide.index).toBe(1);
 
-    await wait( 1000 ); // 2100
-    expect( splide.index ).toBe( 2 );
+    await wait(1000); // 2100
+    expect(splide.index).toBe(2);
 
-    await wait( 1100 ); // Should restore the interval to 1000
-    expect( splide.index ).toBe( 3 );
-  } );
+    await wait(1100); // Should restore the interval to 1000
+    expect(splide.index).toBe(3);
+  });
 
-  test( 'can play/pause autoplay manually.', async () => {
-    const interval          = 1000;
+  test('can play/pause autoplay manually.', async () => {
+    const interval = 1000;
     const intervalAndBuffer = 1100;
-    const splide            = init( { autoplay: true, interval, waitForTransition: false } );
-    const { Autoplay }      = splide.Components;
+    const splide = init({ autoplay: true, interval, waitForTransition: false });
+    const { Autoplay } = splide.Components;
 
-    expect( splide.index ).toBe( 0 );
+    expect(splide.index).toBe(0);
 
     Autoplay.pause();
 
-    await wait( intervalAndBuffer );
-    expect( splide.index ).toBe( 0 );
+    await wait(intervalAndBuffer);
+    expect(splide.index).toBe(0);
 
     Autoplay.play();
 
-    await wait( intervalAndBuffer );
-    expect( splide.index ).toBe( 1 );
+    await wait(intervalAndBuffer);
+    expect(splide.index).toBe(1);
 
     Autoplay.pause();
 
-    await wait( intervalAndBuffer );
-    expect( splide.index ).toBe( 1 );
+    await wait(intervalAndBuffer);
+    expect(splide.index).toBe(1);
 
     Autoplay.play();
 
-    await wait( intervalAndBuffer );
-    expect( splide.index ).toBe( 2 );
-  } );
+    await wait(intervalAndBuffer);
+    expect(splide.index).toBe(2);
+  });
 
-  test( 'can check if autoplay is paused or not.', async () => {
-    const splide       = init( { autoplay: true, interval: 1000, waitForTransition: false } );
+  test('can check if autoplay is paused or not.', async () => {
+    const splide = init({ autoplay: true, interval: 1000, waitForTransition: false });
     const { Autoplay } = splide.Components;
 
-    expect( Autoplay.isPaused() ).toBe( false );
+    expect(Autoplay.isPaused()).toBe(false);
 
     Autoplay.pause();
-    expect( Autoplay.isPaused() ).toBe( true );
+    expect(Autoplay.isPaused()).toBe(true);
 
     Autoplay.play();
-    expect( Autoplay.isPaused() ).toBe( false );
-  } );
+    expect(Autoplay.isPaused()).toBe(false);
+  });
 
-  test( 'should not start autoplay if the option is `pause`.', async () => {
-    const interval          = 1000;
+  test('should not start autoplay if the option is `pause`.', async () => {
+    const interval = 1000;
     const intervalAndBuffer = 1100;
-    const splide            = init( { autoplay: 'pause', interval, waitForTransition: false } );
+    const splide = init({ autoplay: 'pause', interval, waitForTransition: false });
 
-    expect( splide.index ).toBe( 0 );
+    expect(splide.index).toBe(0);
 
-    await wait( intervalAndBuffer );
-    expect( splide.index ).toBe( 0 );
-  } );
-} );
+    await wait(intervalAndBuffer);
+    expect(splide.index).toBe(0);
+  });
+});

src/js/components/Breakpoints/Breakpoints.ts

@@ -12,8 +12,8 @@ import { EVENT_OVERFLOW, EVENT_UPDATED } from '../../constants/events';
  */
 export interface BreakpointsComponent extends BaseComponent {
   /** @internal */
-  reduce( reduced: boolean ): void;
-  set( options: Options, base?: boolean, notify?: boolean ): void;
+  reduce(reduced: boolean): void;
+  set(options: Options, base?: boolean, notify?: boolean): void;
 }
 
 /**
@@ -36,16 +36,16 @@ const NOT_OVERFLOW_KEY = '!overflow';
  *
  * @return A Media component object.
  */
-export const Breakpoints: ComponentConstructor<BreakpointsComponent> = ( Splide, Components, options, event ) => {
+export const Breakpoints: ComponentConstructor<BreakpointsComponent> = (Splide, Components, options, event) => {
   const { state } = Splide;
-  const breakpoints   = options.breakpoints || {};
+  const breakpoints = options.breakpoints || {};
   const reducedMotion = options.reducedMotion || {};
-  const binder        = EventBinder();
+  const binder = EventBinder();
 
   /**
    * Stores options and a predicate function.
    */
-  const entries: Array<[ Options, () => boolean ]> = [];
+  const entries: Array<[Options, () => boolean]> = [];
 
   /**
    * Called when the component is constructed.
@@ -53,20 +53,20 @@ export const Breakpoints: ComponentConstructor<BreakpointsComponent> = ( Splide,
   function setup(): void {
     const isMin = options.mediaQuery === 'min';
 
-    ownKeys( breakpoints )
-      .sort( ( n, m ) => isMin ? +n - +m : +m - +n )
-      .forEach( key => {
-        if ( key !== NOT_OVERFLOW_KEY ) {
-          register( breakpoints[ key ], `(${ isMin ? 'min' : 'max' }-width:${ key }px)` );
+    ownKeys(breakpoints)
+      .sort((n, m) => isMin ? +n - +m : +m - +n)
+      .forEach(key => {
+        if (key !== NOT_OVERFLOW_KEY) {
+          register(breakpoints[key], `(${ isMin ? 'min' : 'max' }-width:${ key }px)`);
         }
-      } );
+      });
 
-    if ( breakpoints[ NOT_OVERFLOW_KEY ] ) {
-      entries.push( [ breakpoints[ NOT_OVERFLOW_KEY ], () => Components.Layout && ! Components.Layout.isOverflow() ] );
-      event.on( EVENT_OVERFLOW, update );
+    if (breakpoints[NOT_OVERFLOW_KEY]) {
+      entries.push([breakpoints[NOT_OVERFLOW_KEY], () => Components.Layout && !Components.Layout.isOverflow()]);
+      event.on(EVENT_OVERFLOW, update);
     }
 
-    register( reducedMotion, MEDIA_PREFERS_REDUCED_MOTION );
+    register(reducedMotion, MEDIA_PREFERS_REDUCED_MOTION);
     update();
   }
 
@@ -75,8 +75,8 @@ export const Breakpoints: ComponentConstructor<BreakpointsComponent> = ( Splide,
    *
    * @param completely - Will be `true` for complete destruction.
    */
-  function destroy( completely: boolean ): void {
-    if ( completely ) {
+  function destroy(completely: boolean): void {
+    if (completely) {
       binder.destroy();
     }
   }
@@ -87,29 +87,29 @@ export const Breakpoints: ComponentConstructor<BreakpointsComponent> = ( Splide,
    * @param options - Options merged to current options when the document matches the query.
    * @param query   - A query string.
    */
-  function register( options: Options, query: string ): void {
-    const queryList = matchMedia( query );
-    binder.bind( queryList, 'change', update );
-    entries.push( [ options,  () => queryList.matches ] );
+  function register(options: Options, query: string): void {
+    const queryList = matchMedia(query);
+    binder.bind(queryList, 'change', update);
+    entries.push([options, () => queryList.matches]);
   }
 
   /**
    * Checks all media queries in entries and updates options.
    */
   function update(): void {
-    const destroyed = state.is( DESTROYED );
+    const destroyed = state.is(DESTROYED);
     const direction = options.direction;
-    const merged = entries.reduce<Options>( ( merged, entry ) => {
-      return merge( merged, entry[ 1 ]() ? entry[ 0 ] : {} );
-    }, {} );
+    const merged = entries.reduce<Options>((merged, entry) => {
+      return merge(merged, entry[1]() ? entry[0] : {});
+    }, {});
 
-    omit( options );
-    set( merged, false, ! state.is( CREATED ) );
+    omit(options);
+    set(merged, false, !state.is(CREATED));
 
-    if ( options.destroy ) {
-      Splide.destroy( options.destroy === 'completely' );
-    } else if ( destroyed ) {
-      destroy( true );
+    if (options.destroy) {
+      Splide.destroy(options.destroy === 'completely');
+    } else if (destroyed) {
+      destroy(true);
       Splide.mount();
     } else {
       direction !== options.direction && Splide.refresh();
@@ -124,9 +124,9 @@ export const Breakpoints: ComponentConstructor<BreakpointsComponent> = ( Splide,
    *
    * @param enable - Determines whether to apply `reducedMotion` options or not.
    */
-  function reduce( enable: boolean ): void {
-    if ( matchMedia( MEDIA_PREFERS_REDUCED_MOTION ).matches ) {
-      enable ? merge( options, reducedMotion ) : omit( options, ownKeys( reducedMotion ) );
+  function reduce(enable: boolean): void {
+    if (matchMedia(MEDIA_PREFERS_REDUCED_MOTION).matches) {
+      enable ? merge(options, reducedMotion) : omit(options, ownKeys(reducedMotion));
     }
   }
 
@@ -140,12 +140,12 @@ export const Breakpoints: ComponentConstructor<BreakpointsComponent> = ( Splide,
    * @param base   - Optional. Determines whether to also update base options or not.
    * @param notify - Optional. If `true`, emits the `update` event.
    */
-  function set( opts: Options, base?: boolean, notify?: boolean ): void {
-    merge( options, opts );
-    base && merge( Object.getPrototypeOf( options ), opts );
+  function set(opts: Options, base?: boolean, notify?: boolean): void {
+    merge(options, opts);
+    base && merge(Object.getPrototypeOf(options), opts);
 
-    if ( notify ) {
-      Splide.emit( EVENT_UPDATED, options );
+    if (notify) {
+      Splide.emit(EVENT_UPDATED, options);
     }
   }
 

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

@@ -2,55 +2,55 @@ import { DESTROYED } from '../../../constants/states';
 import { init } from '../../../test';
 
 
-describe( 'Breakpoints', () => {
-  beforeAll( () => {
-    window.matchMedia = () => ( {
-      matches            : true, // All queries match the media string.
-      media              : '',
-      onchange           : null,
-      addListener        : jest.fn(),
-      removeListener     : jest.fn(),
-      addEventListener   : jest.fn(),
+describe('Breakpoints', () => {
+  beforeAll(() => {
+    window.matchMedia = () => ({
+      matches: true, // All queries match the media string.
+      media: '',
+      onchange: null,
+      addListener: jest.fn(),
+      removeListener: jest.fn(),
+      addEventListener: jest.fn(),
       removeEventListener: jest.fn(),
-      dispatchEvent      : jest.fn(),
-    } as MediaQueryList );
-  } );
+      dispatchEvent: jest.fn(),
+    } as MediaQueryList);
+  });
 
-  test( 'can merge options when a breakpoint matches the media query.', () => {
-    const splide = init( { perPage: 2, breakpoints: { 640: { perPage: 4 } } } );
-    expect( splide.options.perPage ).toBe( 4 );
-  } );
+  test('can merge options when a breakpoint matches the media query.', () => {
+    const splide = init({ perPage: 2, breakpoints: { 640: { perPage: 4 } } });
+    expect(splide.options.perPage).toBe(4);
+  });
 
-  test( 'can destroy Splide.', () => {
-    const splide = init( { breakpoints: { 640: { destroy: true } } } );
-    expect( splide.state.is( DESTROYED ) ).toBe( true );
-  } );
+  test('can destroy Splide.', () => {
+    const splide = init({ breakpoints: { 640: { destroy: true } } });
+    expect(splide.state.is(DESTROYED)).toBe(true);
+  });
 
-  test( 'can merge options for prefers-reduced-motion:reduce.', () => {
+  test('can merge options for prefers-reduced-motion:reduce.', () => {
     const splide = init();
-    expect( splide.options.speed ).toBe( 0 );
-    expect( splide.options.rewindSpeed ).toBe( 0 );
-    expect( splide.options.autoplay ).toBe( 'pause' );
-  } );
+    expect(splide.options.speed).toBe(0);
+    expect(splide.options.rewindSpeed).toBe(0);
+    expect(splide.options.autoplay).toBe('pause');
+  });
 
-  test( 'can enable or disable `reducedMotion` option by `reduce()`.', () => {
-    const splide = init( { speed: 1000, rewindSpeed: 2000, autoplay: true } );
+  test('can enable or disable `reducedMotion` option by `reduce()`.', () => {
+    const splide = init({ speed: 1000, rewindSpeed: 2000, autoplay: true });
     const { reduce } = splide.Components.Breakpoints;
 
-    expect( splide.options.speed ).toBe( 0 );
-    expect( splide.options.rewindSpeed ).toBe( 0 );
-    expect( splide.options.autoplay ).toBe( 'pause' );
+    expect(splide.options.speed).toBe(0);
+    expect(splide.options.rewindSpeed).toBe(0);
+    expect(splide.options.autoplay).toBe('pause');
 
-    reduce( false );
+    reduce(false);
 
-    expect( splide.options.speed ).toBe( 1000 );
-    expect( splide.options.rewindSpeed ).toBe( 2000 );
-    expect( splide.options.autoplay ).toBe( true );
+    expect(splide.options.speed).toBe(1000);
+    expect(splide.options.rewindSpeed).toBe(2000);
+    expect(splide.options.autoplay).toBe(true);
 
-    reduce( true );
+    reduce(true);
 
-    expect( splide.options.speed ).toBe( 0 );
-    expect( splide.options.rewindSpeed ).toBe( 0 );
-    expect( splide.options.autoplay ).toBe( 'pause' );
-  } );
-} );
+    expect(splide.options.speed).toBe(0);
+    expect(splide.options.rewindSpeed).toBe(0);
+    expect(splide.options.autoplay).toBe('pause');
+  });
+});

src/js/components/Clones/Clones.ts

@@ -31,7 +31,7 @@ export const MULTIPLIER = 2;
  *
  * @return A Clones component object.
  */
-export const Clones: ComponentConstructor<ClonesComponent> = ( Splide, Components, options, event ) => {
+export const Clones: ComponentConstructor<ClonesComponent> = (Splide, Components, options, event) => {
   const { on } = event;
   const { Elements, Slides, Layout: { resize, trackSize } } = Components;
   const { resolve } = Components.Direction;
@@ -51,12 +51,12 @@ export const Clones: ComponentConstructor<ClonesComponent> = ( Splide, Component
    * Needs to remount the component on refresh, otherwise `refresh` event will be triggered again while refreshing.
    */
   function mount(): void {
-    on( EVENT_REFRESH, remount );
-    on( [ EVENT_UPDATED, EVENT_RESIZE ], observe );
+    on(EVENT_REFRESH, remount);
+    on([EVENT_UPDATED, EVENT_RESIZE], observe);
 
-    if ( ( cloneCount = computeCloneCount() ) ) {
-      generate( cloneCount );
-      resize( true );
+    if ((cloneCount = computeCloneCount())) {
+      generate(cloneCount);
+      resize(true);
     }
   }
 
@@ -66,15 +66,15 @@ export const Clones: ComponentConstructor<ClonesComponent> = ( Splide, Component
   function remount(): void {
     destroy();
     mount();
-    resize( true );
+    resize(true);
   }
 
   /**
    * Destroys clones.
    */
   function destroy(): void {
-    removeNode( clones );
-    empty( clones );
+    removeNode(clones);
+    empty(clones);
     event.destroy();
   }
 
@@ -85,10 +85,10 @@ export const Clones: ComponentConstructor<ClonesComponent> = ( Splide, Component
   function observe(): void {
     const count = computeCloneCount();
 
-    if ( cloneCount !== count ) {
-      if ( cloneCount < count || ! count ) {
-        ! count && Splide.go( 0 );
-        event.emit( EVENT_REFRESH );
+    if (cloneCount !== count) {
+      if (cloneCount < count || !count) {
+        !count && Splide.go(0);
+        event.emit(EVENT_REFRESH);
       }
     }
   }
@@ -98,22 +98,22 @@ export const Clones: ComponentConstructor<ClonesComponent> = ( Splide, Component
    *
    * @param count - The number of clones to generate for each side.
    */
-  function generate( count: number ): void {
+  function generate(count: number): void {
     const slides = Slides.get().slice();
     const { length } = slides;
 
-    if ( length ) {
-      while ( slides.length < count ) {
-        push( slides, slides );
+    if (length) {
+      while (slides.length < count) {
+        push(slides, slides);
       }
 
-      push( slides.slice( -count ), slides.slice( 0, count ) ).forEach( ( Slide, index ) => {
+      push(slides.slice(-count), slides.slice(0, count)).forEach((Slide, index) => {
         const isHead = index < count;
-        const clone  = cloneDeep( Slide.slide, index );
-        isHead ? before( slides[ 0 ].slide, clone ) : append( Elements.list, clone );
-        push( clones, clone );
-        Slides.register( clone, index - count + ( isHead ? 0 : length ), Slide.index );
-      } );
+        const clone = cloneDeep(Slide.slide, index);
+        isHead ? before(slides[0].slide, clone) : append(Elements.list, clone);
+        push(clones, clone);
+        Slides.register(clone, index - count + (isHead ? 0 : length), Slide.index);
+      });
     }
   }
 
@@ -125,10 +125,10 @@ export const Clones: ComponentConstructor<ClonesComponent> = ( Splide, Component
    *
    * @return A cloned element.
    */
-  function cloneDeep( elm: HTMLElement, index: number ): HTMLElement {
-    const clone = elm.cloneNode( true ) as HTMLElement;
-    addClass( clone, options.classes.clone );
-    clone.id = `${ Splide.root.id }-clone${ pad( index + 1 ) }`;
+  function cloneDeep(elm: HTMLElement, index: number): HTMLElement {
+    const clone = elm.cloneNode(true) as HTMLElement;
+    addClass(clone, options.classes.clone);
+    clone.id = `${ Splide.root.id }-clone${ pad(index + 1) }`;
     return clone;
   }
 
@@ -141,12 +141,12 @@ export const Clones: ComponentConstructor<ClonesComponent> = ( Splide, Component
   function computeCloneCount(): number {
     let { clones } = options;
 
-    if ( ! Splide.is( LOOP ) ) {
+    if (!Splide.is(LOOP)) {
       clones = 0;
-    } else if ( isUndefined( clones ) ) {
-      const fixedSize  = options[ resolve( 'fixedWidth' ) ] && Components.Layout.slideSize( 0 );
-      const fixedCount = fixedSize && ceil( trackSize() / fixedSize );
-      clones = fixedCount || ( options[ resolve( 'autoWidth' ) ] && Splide.length ) || options.perPage * MULTIPLIER;
+    } else if (isUndefined(clones)) {
+      const fixedSize = options[resolve('fixedWidth')] && Components.Layout.slideSize(0);
+      const fixedCount = fixedSize && ceil(trackSize() / fixedSize);
+      clones = fixedCount || (options[resolve('autoWidth')] && Splide.length) || options.perPage * MULTIPLIER;
     }
 
     return clones;

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

@@ -3,58 +3,58 @@ import { init } from '../../../test';
 import { MULTIPLIER } from '../Clones';
 
 
-describe( 'Clones', () => {
+describe('Clones', () => {
   // This test must be the first because of uniqueId().
-  test( 'can generate clones with unique IDs.', () => {
-    const splide = init( { type: 'loop', perPage: 3 } );
-    const clones = splide.root.getElementsByClassName( CLASS_CLONE );
-
-    expect( clones[ 0 ].id ).toBe( 'splide01-clone01' );
-    expect( clones[ 1 ].id ).toBe( 'splide01-clone02' );
-    expect( clones[ 2 ].id ).toBe( 'splide01-clone03' );
-  } );
-
-  test( 'can generate clones.', () => {
-    const splide = init( { type: 'loop', perPage: 3 } );
-    const clones = splide.root.getElementsByClassName( CLASS_CLONE );
-    const Slides = splide.Components.Slides.get( true );
-    const count  = clones.length / 2; // each side.
-
-    expect( count ).toBe( splide.options.perPage * MULTIPLIER );
-    expect( clones[ count - 1 ].nextElementSibling ).toBe( Slides[ 0 ].slide );
-    expect( clones[ count ].previousElementSibling ).toBe( Slides[ Slides.length - 1 ].slide );
-  } );
-
-  test( 'can generate clones according to the perPage option.', () => {
-    const splide = init( { type: 'loop', perPage: 3 } );
-    const clones = splide.root.getElementsByClassName( CLASS_CLONE );
+  test('can generate clones with unique IDs.', () => {
+    const splide = init({ type: 'loop', perPage: 3 });
+    const clones = splide.root.getElementsByClassName(CLASS_CLONE);
+
+    expect(clones[0].id).toBe('splide01-clone01');
+    expect(clones[1].id).toBe('splide01-clone02');
+    expect(clones[2].id).toBe('splide01-clone03');
+  });
+
+  test('can generate clones.', () => {
+    const splide = init({ type: 'loop', perPage: 3 });
+    const clones = splide.root.getElementsByClassName(CLASS_CLONE);
+    const Slides = splide.Components.Slides.get(true);
+    const count = clones.length / 2; // each side.
+
+    expect(count).toBe(splide.options.perPage * MULTIPLIER);
+    expect(clones[count - 1].nextElementSibling).toBe(Slides[0].slide);
+    expect(clones[count].previousElementSibling).toBe(Slides[Slides.length - 1].slide);
+  });
+
+  test('can generate clones according to the perPage option.', () => {
+    const splide = init({ type: 'loop', perPage: 3 });
+    const clones = splide.root.getElementsByClassName(CLASS_CLONE);
     const { perPage } = splide.options;
 
-    expect( clones.length / 2 ).toBe( perPage * MULTIPLIER );
-  } );
-
-  test( 'should register clones to Slides component.', () => {
-    const splide      = init( { type: 'loop' } );
-    const clones      = splide.root.getElementsByClassName( CLASS_CLONE );
-    const Slides      = splide.Components.Slides.get();
-    const cloneSlides = Slides.filter( Slide => Slide.isClone );
-
-    expect( clones.length ).toBe( cloneSlides.length );
-  } );
-
-  test( 'should assign indices.', () => {
-    const splide       = init( { type: 'loop' } );
-    const Slides       = splide.Components.Slides.get();
-    const cloneSlides  = Slides.filter( Slide => Slide.isClone );
-    const clonesBefore = cloneSlides.filter( ( Slide, index ) => index < cloneSlides.length / 2 );
-    const clonesAfter  = cloneSlides.filter( ( Slide, index ) => index >= cloneSlides.length / 2 );
-
-    clonesBefore.forEach( ( Slide, index ) => {
-      expect( Slide.index ).toBe( index - clonesBefore.length );
-    } );
-
-    clonesAfter.forEach( ( Slide, index ) => {
-      expect( Slide.index ).toBe( splide.length + index );
-    } );
-  } );
-} );
+    expect(clones.length / 2).toBe(perPage * MULTIPLIER);
+  });
+
+  test('should register clones to Slides component.', () => {
+    const splide = init({ type: 'loop' });
+    const clones = splide.root.getElementsByClassName(CLASS_CLONE);
+    const Slides = splide.Components.Slides.get();
+    const cloneSlides = Slides.filter(Slide => Slide.isClone);
+
+    expect(clones.length).toBe(cloneSlides.length);
+  });
+
+  test('should assign indices.', () => {
+    const splide = init({ type: 'loop' });
+    const Slides = splide.Components.Slides.get();
+    const cloneSlides = Slides.filter(Slide => Slide.isClone);
+    const clonesBefore = cloneSlides.filter((Slide, index) => index < cloneSlides.length / 2);
+    const clonesAfter = cloneSlides.filter((Slide, index) => index >= cloneSlides.length / 2);
+
+    clonesBefore.forEach((Slide, index) => {
+      expect(Slide.index).toBe(index - clonesBefore.length);
+    });
+
+    clonesAfter.forEach((Slide, index) => {
+      expect(Slide.index).toBe(splide.length + index);
+    });
+  });
+});

src/js/components/Controller/Controller.ts

@@ -21,22 +21,22 @@ import {
  * @since 3.0.0
  */
 export interface ControllerComponent extends BaseComponent {
-  go( control: number | string, callback?: AnyFunction ): void;
-  jump( control: number | string ): void;
-  scroll( destination: number, duration?: number, snap?: boolean, callback?: AnyFunction ): void;
-  getNext( destination?: boolean ): number;
-  getPrev( destination?: boolean ): number;
+  go(control: number | string, callback?: AnyFunction): void;
+  jump(control: number | string): void;
+  scroll(destination: number, duration?: number, snap?: boolean, callback?: AnyFunction): void;
+  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;
-  toDest( position: number ): number;
+  setIndex(index: number): void;
+  getIndex(prev?: boolean): number;
+  toIndex(page: number): number;
+  toPage(index: number): number;
+  toDest(position: number): number;
   hasFocus(): boolean;
   isBusy(): boolean;
 
   /** @internal */
-  getAdjacent( prev: boolean, destination?: boolean ): number;
+  getAdjacent(prev: boolean, destination?: boolean): number;
 }
 
 /**
@@ -51,16 +51,16 @@ export interface ControllerComponent extends BaseComponent {
  *
  * @return A Controller component object.
  */
-export const Controller: ComponentConstructor<ControllerComponent> = ( Splide, Components, options, event ) => {
+export const Controller: ComponentConstructor<ControllerComponent> = (Splide, Components, options, event) => {
   const { on, emit } = event;
   const { Move, Scroll } = Components;
   const { getPosition, getLimit, toPosition } = Move;
   const { isEnough, getLength } = Components.Slides;
   const { omitEnd } = options;
-  const isLoop  = Splide.is( LOOP );
-  const isSlide = Splide.is( SLIDE );
-  const getNext = apply( getAdjacent, false );
-  const getPrev = apply( getAdjacent, true );
+  const isLoop = Splide.is(LOOP);
+  const isSlide = Splide.is(SLIDE);
+  const getNext = apply(getAdjacent, false);
+  const getPrev = apply(getAdjacent, true);
 
   /**
    * The current index.
@@ -97,8 +97,8 @@ export const Controller: ComponentConstructor<ControllerComponent> = ( Splide, C
    */
   function mount(): void {
     init();
-    on( [ EVENT_UPDATED, EVENT_REFRESH, EVENT_END_INDEX_CHANGED ], init );
-    on( EVENT_RESIZED, onResized );
+    on([EVENT_UPDATED, EVENT_REFRESH, EVENT_END_INDEX_CHANGED], init);
+    on(EVENT_RESIZED, onResized);
   }
 
   /**
@@ -107,17 +107,17 @@ export const Controller: ComponentConstructor<ControllerComponent> = ( Splide, C
    * The process order must be Elements -> Controller -> Move.
    */
   function init(): void {
-    slideCount = getLength( true );
-    perMove    = options.perMove;
-    perPage    = options.perPage;
-    endIndex   = getEnd();
+    slideCount = getLength(true);
+    perMove = options.perMove;
+    perPage = options.perPage;
+    endIndex = getEnd();
 
-    const end   = omitEnd ? endIndex : slideCount - 1;
-    const index = clamp( currIndex, 0, end );
+    const end = omitEnd ? endIndex : slideCount - 1;
+    const index = clamp(currIndex, 0, end);
 
     prevIndex = index;
 
-    if ( index !== currIndex ) {
+    if (index !== currIndex) {
       currIndex = index;
       Move.reposition();
     }
@@ -128,8 +128,8 @@ export const Controller: ComponentConstructor<ControllerComponent> = ( Splide, C
    * The end index can change if `autoWidth` or `fixedWidth` is enabled.
    */
   function onResized(): void {
-    if ( endIndex !== getEnd() ) {
-      emit( EVENT_END_INDEX_CHANGED );
+    if (endIndex !== getEnd()) {
+      emit(EVENT_END_INDEX_CHANGED);
     }
   }
 
@@ -143,16 +143,16 @@ export const Controller: ComponentConstructor<ControllerComponent> = ( Splide, C
    * @param control  - A control pattern.
    * @param callback - Optional. A callback function invoked after transition ends.
    */
-  function go( control: number | string, callback?: AnyFunction ): void {
-    if ( ! isBusy() ) {
-      const [ dest, forwards ] = parse( control );
-      const index = loop( dest );
-      const canGo = dest === index || Move.exceededLimit( ! forwards ) || Move.canShift( forwards );
+  function go(control: number | string, callback?: AnyFunction): void {
+    if (!isBusy()) {
+      const [dest, forwards] = parse(control);
+      const index = loop(dest);
+      const canGo = dest === index || Move.exceededLimit(!forwards) || Move.canShift(forwards);
 
-      if ( index > -1 && canGo ) {
+      if (index > -1 && canGo) {
         Scroll.cancel();
-        setIndex( index );
-        Move.move( dest, index, prevIndex, forwards, callback );
+        setIndex(index);
+        Move.move(dest, index, prevIndex, forwards, callback);
       }
     }
   }
@@ -162,13 +162,13 @@ export const Controller: ComponentConstructor<ControllerComponent> = ( Splide, C
    *
    * @param control - An index where to jump.
    */
-  function jump( control: number | string ): void {
+  function jump(control: number | string): void {
     const { set } = Components.Breakpoints;
     const { speed } = options;
 
-    set( { speed: 0 } );
-    go( control );
-    set( { speed } );
+    set({ speed: 0 });
+    go(control);
+    set({ speed });
   }
 
   /**
@@ -179,12 +179,12 @@ export const Controller: ComponentConstructor<ControllerComponent> = ( Splide, C
    * @param snap        - Optional. Whether to snap the slider to the closest slide or not.
    * @param callback    - Optional. A callback function invoked after scroll ends.
    */
-  function scroll( destination: number, duration?: number, snap?: boolean, callback?: AnyFunction ): void {
-    Scroll.scroll( destination, duration, snap, () => {
-      const index = loop( Move.toIndex( getPosition() ) );
-      setIndex( omitEnd ? min( index, endIndex ) : index );
+  function scroll(destination: number, duration?: number, snap?: boolean, callback?: AnyFunction): void {
+    Scroll.scroll(destination, duration, snap, () => {
+      const index = loop(Move.toIndex(getPosition()));
+      setIndex(omitEnd ? min(index, endIndex) : index);
       callback && callback();
-    } );
+    });
   }
 
   /**
@@ -194,28 +194,28 @@ export const Controller: ComponentConstructor<ControllerComponent> = ( Splide, C
    *
    * @return A `dest` index.
    */
-  function parse( control: number | string ): [ number, boolean ] {
-    let dest     = currIndex;
+  function parse(control: number | string): [number, boolean] {
+    let dest = currIndex;
     let forwards = true;
 
-    if ( isString( control ) ) {
-      const [ , indicator, number ] = control.match( /([+-]|>>?|<<?)(-?\d+)?/ ) || [];
-      const oneOf = ( ...indicators: string[] ) => includes( indicators, indicator );
+    if (isString(control)) {
+      const [, indicator, number] = control.match(/([+-]|>>?|<<?)(-?\d+)?/) || [];
+      const oneOf = (...indicators: string[]) => includes(indicators, indicator);
 
-      forwards = oneOf( '+', '>', '>>' );
+      forwards = oneOf('+', '>', '>>');
 
-      if ( oneOf( '+', '-' ) ) {
-        dest = computeDestIndex( currIndex + +`${ indicator }${ +number || 1 }`, currIndex );
-      } else if ( oneOf( '>', '<' ) ) {
-        dest = number ? toIndex( +number ) : getAdjacent( ! forwards, true );
-      } else if ( oneOf( '>>', '<<' ) ) {
+      if (oneOf('+', '-')) {
+        dest = computeDestIndex(currIndex + +`${ indicator }${ +number || 1 }`, currIndex);
+      } else if (oneOf('>', '<')) {
+        dest = number ? toIndex(+number) : getAdjacent(!forwards, true);
+      } else if (oneOf('>>', '<<')) {
         dest = number ? +number || 0 : forwards ? endIndex : 0;
       }
     } else {
-      dest = isLoop ? control : clamp( control, 0, endIndex );
+      dest = isLoop ? control : clamp(control, 0, endIndex);
     }
 
-    return [ dest, forwards ];
+    return [dest, forwards];
   }
 
   /**
@@ -228,17 +228,17 @@ export const Controller: ComponentConstructor<ControllerComponent> = ( Splide, C
    *
    * @return An adjacent index if available, or otherwise `-1`.
    */
-  function getAdjacent( prev: boolean, destination?: boolean ): number {
-    const number = perMove || ( hasFocus() ? 1 : perPage );
-    const dest   = computeDestIndex( currIndex + number * ( prev ? -1 : 1 ), currIndex, ! ( perMove || hasFocus() ) );
+  function getAdjacent(prev: boolean, destination?: boolean): number {
+    const number = perMove || (hasFocus() ? 1 : perPage);
+    const dest = computeDestIndex(currIndex + number * (prev ? -1 : 1), currIndex, !(perMove || hasFocus()));
 
-    if ( dest === -1 && isSlide ) {
-      if ( ! approximatelyEqual( getPosition(), getLimit( ! prev ), 1 ) ) {
+    if (dest === -1 && isSlide) {
+      if (!approximatelyEqual(getPosition(), getLimit(!prev), 1)) {
         return prev ? 0 : endIndex;
       }
     }
 
-    return destination ? dest : loop( dest );
+    return destination ? dest : loop(dest);
   }
 
   /**
@@ -255,33 +255,33 @@ export const Controller: ComponentConstructor<ControllerComponent> = ( Splide, C
    *
    * @return A converted destination index, including clones.
    */
-  function computeDestIndex( dest: number, from: number, snapPage?: boolean ): number {
-    if ( isEnough() || hasFocus() ) {
-      const index = computeMovableDestIndex( dest );
+  function computeDestIndex(dest: number, from: number, snapPage?: boolean): number {
+    if (isEnough() || hasFocus()) {
+      const index = computeMovableDestIndex(dest);
 
-      if ( index !== dest ) {
-        from     = dest;
-        dest     = index;
+      if (index !== dest) {
+        from = dest;
+        dest = index;
         snapPage = false;
       }
 
-      if ( dest < 0 || dest > endIndex ) {
-        if ( ! perMove && ( between( 0, dest, from, true ) || between( endIndex, from, dest, true ) ) ) {
-          dest = toIndex( toPage( dest ) );
+      if (dest < 0 || dest > endIndex) {
+        if (!perMove && (between(0, dest, from, true) || between(endIndex, from, dest, true))) {
+          dest = toIndex(toPage(dest));
         } else {
-          if ( isLoop ) {
+          if (isLoop) {
             dest = snapPage
-              ? dest < 0 ? - ( slideCount % perPage || perPage ) : slideCount
+              ? dest < 0 ? -(slideCount % perPage || perPage) : slideCount
               : dest;
-          } else if ( options.rewind ) {
+          } else if (options.rewind) {
             dest = dest < 0 ? endIndex : 0;
           } else {
             dest = -1;
           }
         }
       } else {
-        if ( snapPage && dest !== from ) {
-          dest = toIndex( toPage( from ) + ( dest < from ? -1 : 1 ) );
+        if (snapPage && dest !== from) {
+          dest = toIndex(toPage(from) + (dest < from ? -1 : 1));
         }
       }
     } else {
@@ -299,11 +299,11 @@ export const Controller: ComponentConstructor<ControllerComponent> = ( Splide, C
    *
    * @return A dest index.
    */
-  function computeMovableDestIndex( dest: number ): number {
-    if ( isSlide && options.trimSpace === 'move' && dest !== currIndex ) {
+  function computeMovableDestIndex(dest: number): number {
+    if (isSlide && options.trimSpace === 'move' && dest !== currIndex) {
       const position = getPosition();
 
-      while ( position === toPosition( dest ) && between( dest, 0, Splide.length - 1, ! options.rewind ) ) {
+      while (position === toPosition(dest) && between(dest, 0, Splide.length - 1, !options.rewind)) {
         dest < currIndex ? --dest : ++dest;
       }
     }
@@ -318,8 +318,8 @@ export const Controller: ComponentConstructor<ControllerComponent> = ( Splide, C
    *
    * @return A looped index.
    */
-  function loop( index: number ): number {
-    return isLoop ? ( index + slideCount ) % slideCount || 0 : index;
+  function loop(index: number): number {
+    return isLoop ? (index + slideCount) % slideCount || 0 : index;
   }
 
   /**
@@ -331,16 +331,16 @@ export const Controller: ComponentConstructor<ControllerComponent> = ( Splide, C
    * @return An end index.
    */
   function getEnd(): number {
-    let end = slideCount - ( hasFocus() || ( isLoop && perMove ) ? 1 : perPage );
+    let end = slideCount - (hasFocus() || (isLoop && perMove) ? 1 : perPage);
 
-    while ( omitEnd && end-- > 0 ) {
-      if ( ! approximatelyEqual( toPosition( slideCount - 1 ), toPosition( end ), 0.01 ) ) {
+    while (omitEnd && end-- > 0) {
+      if (!approximatelyEqual(toPosition(slideCount - 1), toPosition(end), 0.01)) {
         end++;
         break;
       }
     }
 
-    return clamp( end, 0, slideCount - 1 );
+    return clamp(end, 0, slideCount - 1);
   }
 
   /**
@@ -350,8 +350,8 @@ export const Controller: ComponentConstructor<ControllerComponent> = ( Splide, C
    *
    * @return A slide index.
    */
-  function toIndex( page: number ): number {
-    return clamp( hasFocus() ? page : perPage * page, 0, endIndex );
+  function toIndex(page: number): number {
+    return clamp(hasFocus() ? page : perPage * page, 0, endIndex);
   }
 
   /**
@@ -361,10 +361,10 @@ export const Controller: ComponentConstructor<ControllerComponent> = ( Splide, C
    *
    * @return A page index.
    */
-  function toPage( index: number ): number {
+  function toPage(index: number): number {
     return hasFocus()
-      ? min( index, endIndex )
-      : floor( ( index >= endIndex ? slideCount - 1 : index ) / perPage );
+      ? min(index, endIndex)
+      : floor((index >= endIndex ? slideCount - 1 : index) / perPage);
   }
 
   /**
@@ -374,9 +374,9 @@ export const Controller: ComponentConstructor<ControllerComponent> = ( Splide, C
    *
    * @return A dest index.
    */
-  function toDest( destination: number ): number {
-    const closest = Move.toIndex( destination );
-    return isSlide ? clamp( closest, 0, endIndex ) : closest;
+  function toDest(destination: number): number {
+    const closest = Move.toIndex(destination);
+    return isSlide ? clamp(closest, 0, endIndex) : closest;
   }
 
   /**
@@ -384,8 +384,8 @@ export const Controller: ComponentConstructor<ControllerComponent> = ( Splide, C
    *
    * @param index - A new index to set.
    */
-  function setIndex( index: number ): void {
-    if ( index !== currIndex ) {
+  function setIndex(index: number): void {
+    if (index !== currIndex) {
       prevIndex = currIndex;
       currIndex = index;
     }
@@ -396,7 +396,7 @@ export const Controller: ComponentConstructor<ControllerComponent> = ( Splide, C
    *
    * @param prev - Optional. Whether to return previous index or not.
    */
-  function getIndex( prev?: boolean ): number {
+  function getIndex(prev?: boolean): number {
     return prev ? prevIndex : currIndex;
   }
 
@@ -406,7 +406,7 @@ export const Controller: ComponentConstructor<ControllerComponent> = ( Splide, C
    * @return `true` if the slider has the focus option.
    */
   function hasFocus(): boolean {
-    return ! isUndefined( options.focus ) || options.isNavigation;
+    return !isUndefined(options.focus) || options.isNavigation;
   }
 
   /**
@@ -415,7 +415,7 @@ export const Controller: ComponentConstructor<ControllerComponent> = ( Splide, C
    * @return `true` if the carousel is moving or scrolling, or otherwise `false`.
    */
   function isMoving(): boolean {
-    return Splide.state.is( [ MOVING, SCROLLING ] );
+    return Splide.state.is([MOVING, SCROLLING]);
   }
 
   /**
@@ -424,7 +424,7 @@ export const Controller: ComponentConstructor<ControllerComponent> = ( Splide, C
    * @return `true` if the slider can move, or otherwise `false`.
    */
   function isBusy(): boolean {
-    return isMoving() && !! options.waitForTransition;
+    return isMoving() && !!options.waitForTransition;
   }
 
   return {

src/js/components/Controller/test/getAdjacent.test.ts

@@ -1,121 +1,121 @@
 import { init } from '../../../test';
 
 
-describe( 'Controller#getAdjacent()', () => {
-  test( 'can return the next/previous index.', () => {
-    const splide = init( { speed: 0 } );
+describe('Controller#getAdjacent()', () => {
+  test('can return the next/previous index.', () => {
+    const splide = init({ speed: 0 });
     const { Controller } = splide.Components;
 
-    splide.go( 1 );
+    splide.go(1);
 
-    expect( Controller.getNext() ).toBe( 2 );
-    expect( Controller.getPrev() ).toBe( 0 );
+    expect(Controller.getNext()).toBe(2);
+    expect(Controller.getPrev()).toBe(0);
 
-    splide.go( 3 );
+    splide.go(3);
 
-    expect( Controller.getNext() ).toBe( 4 );
-    expect( Controller.getPrev() ).toBe( 2 );
-  } );
+    expect(Controller.getNext()).toBe(4);
+    expect(Controller.getPrev()).toBe(2);
+  });
 
-  test( 'can return the index of the next/previous page.', () => {
-    const splide = init( { speed: 0, perPage: 3 } );
+  test('can return the index of the next/previous page.', () => {
+    const splide = init({ speed: 0, perPage: 3 });
     const { Controller } = splide.Components;
 
-    expect( Controller.getNext() ).toBe( 3 );
-    expect( Controller.getPrev() ).toBe( -1 );
+    expect(Controller.getNext()).toBe(3);
+    expect(Controller.getPrev()).toBe(-1);
 
-    splide.go( 3 );
+    splide.go(3);
 
-    expect( Controller.getNext() ).toBe( 6 );
-    expect( Controller.getPrev() ).toBe( 0 );
-  } );
+    expect(Controller.getNext()).toBe(6);
+    expect(Controller.getPrev()).toBe(0);
+  });
 
-  test( 'can return the next/previous index with respecting the perMove option.', () => {
-    const splide = init( { speed: 0, perPage: 3, perMove: 1 } );
+  test('can return the next/previous index with respecting the perMove option.', () => {
+    const splide = init({ speed: 0, perPage: 3, perMove: 1 });
     const { Controller } = splide.Components;
 
-    expect( Controller.getNext() ).toBe( 1 );
-    expect( Controller.getPrev() ).toBe( -1 );
+    expect(Controller.getNext()).toBe(1);
+    expect(Controller.getPrev()).toBe(-1);
 
-    splide.go( 3 );
+    splide.go(3);
 
-    expect( Controller.getNext() ).toBe( 4 );
-    expect( Controller.getPrev() ).toBe( 2 );
-  } );
+    expect(Controller.getNext()).toBe(4);
+    expect(Controller.getPrev()).toBe(2);
+  });
 
-  test( 'can return the next/previous index with respecting the perMove option that is above 1.', () => {
-    const splide = init( { speed: 0, perPage: 3, perMove: 2 } );
+  test('can return the next/previous index with respecting the perMove option that is above 1.', () => {
+    const splide = init({ speed: 0, perPage: 3, perMove: 2 });
     const { Controller } = splide.Components;
 
-    expect( Controller.getNext() ).toBe( 2 );
-    expect( Controller.getPrev() ).toBe( -1 );
+    expect(Controller.getNext()).toBe(2);
+    expect(Controller.getPrev()).toBe(-1);
 
-    splide.go( 3 );
+    splide.go(3);
 
-    expect( Controller.getNext() ).toBe( 5 );
-    expect( Controller.getPrev() ).toBe( 1 );
-  } );
+    expect(Controller.getNext()).toBe(5);
+    expect(Controller.getPrev()).toBe(1);
+  });
 
-  test( 'can return -1 if there is no adjacent slide.', () => {
-    const splide = init( { speed: 0 } );
+  test('can return -1 if there is no adjacent slide.', () => {
+    const splide = init({ speed: 0 });
     const { Controller } = splide.Components;
 
-    splide.go( 0 );
-    expect( Controller.getPrev() ).toBe( -1 );
+    splide.go(0);
+    expect(Controller.getPrev()).toBe(-1);
 
-    splide.go( splide.length - 1 );
-    expect( Controller.getNext() ).toBe( -1 );
-  } );
+    splide.go(splide.length - 1);
+    expect(Controller.getNext()).toBe(-1);
+  });
 
-  test( 'can return the first or last slide index if the rewind option is available.', () => {
-    const splide = init( { rewind: true, speed: 0 } );
+  test('can return the first or last slide index if the rewind option is available.', () => {
+    const splide = init({ rewind: true, speed: 0 });
     const { Controller } = splide.Components;
 
-    expect( Controller.getNext() ).toBe( 1 );
-    expect( Controller.getPrev() ).toBe( splide.length - 1 );
+    expect(Controller.getNext()).toBe(1);
+    expect(Controller.getPrev()).toBe(splide.length - 1);
 
-    splide.go( splide.length - 1 );
+    splide.go(splide.length - 1);
 
-    expect( Controller.getNext() ).toBe( 0 );
-    expect( Controller.getPrev() ).toBe( splide.length - 2 );
-  } );
+    expect(Controller.getNext()).toBe(0);
+    expect(Controller.getPrev()).toBe(splide.length - 2);
+  });
 
-  test( 'can return the first or last slide index in the loop mode.', () => {
-    const splide = init( { type: 'loop', speed: 0 } );
+  test('can return the first or last slide index in the loop mode.', () => {
+    const splide = init({ type: 'loop', speed: 0 });
     const { Controller } = splide.Components;
 
-    expect( Controller.getNext() ).toBe( 1 );
-    expect( Controller.getPrev() ).toBe( splide.length - 1 );
+    expect(Controller.getNext()).toBe(1);
+    expect(Controller.getPrev()).toBe(splide.length - 1);
 
-    splide.go( splide.length - 1 );
+    splide.go(splide.length - 1);
 
-    expect( Controller.getNext() ).toBe( 0 );
-    expect( Controller.getPrev() ).toBe( splide.length - 2 );
-  } );
+    expect(Controller.getNext()).toBe(0);
+    expect(Controller.getPrev()).toBe(splide.length - 2);
+  });
 
-  test( 'should return -1 if there are not enough slides.', () => {
-    const splide = init( { perPage: 3 }, { length: 3 } );
+  test('should return -1 if there are not enough slides.', () => {
+    const splide = init({ perPage: 3 }, { length: 3 });
     const { Controller } = splide.Components;
 
-    expect( Controller.getNext() ).toBe( -1 );
-    expect( Controller.getPrev() ).toBe( -1 );
+    expect(Controller.getNext()).toBe(-1);
+    expect(Controller.getPrev()).toBe(-1);
 
-    splide.go( 1 );
+    splide.go(1);
 
-    expect( Controller.getNext() ).toBe( -1 );
-    expect( Controller.getPrev() ).toBe( -1 );
-  } );
+    expect(Controller.getNext()).toBe(-1);
+    expect(Controller.getPrev()).toBe(-1);
+  });
 
-  test( 'should return adjacent indices if there are not enough slides but `focus` is provided.', () => {
-    const splide = init( { perPage: 3, focus: 'center' }, { length: 3 } );
+  test('should return adjacent indices if there are not enough slides but `focus` is provided.', () => {
+    const splide = init({ perPage: 3, focus: 'center' }, { length: 3 });
     const { Controller } = splide.Components;
 
-    expect( Controller.getNext() ).toBe( 1 );
-    expect( Controller.getPrev() ).toBe( -1 );
+    expect(Controller.getNext()).toBe(1);
+    expect(Controller.getPrev()).toBe(-1);
 
-    splide.go( 1 );
+    splide.go(1);
 
-    expect( Controller.getNext() ).toBe( 2 );
-    expect( Controller.getPrev() ).toBe( 0 );
-  } );
-} );
+    expect(Controller.getNext()).toBe(2);
+    expect(Controller.getPrev()).toBe(0);
+  });
+});

src/js/components/Controller/test/getEnd.test.ts

@@ -1,30 +1,30 @@
 import { init } from '../../../test';
 
 
-describe( 'Controller#getEnd()', () => {
-  test( 'can return the end index.', () => {
-    const splide1 = init( { perPage: 3 }, { length: 4 } );
-    expect( splide1.Components.Controller.getEnd() ).toBe( 1 );
+describe('Controller#getEnd()', () => {
+  test('can return the end index.', () => {
+    const splide1 = init({ perPage: 3 }, { length: 4 });
+    expect(splide1.Components.Controller.getEnd()).toBe(1);
 
-    const splide2 = init( { perPage: 3 }, { length: 5 } );
-    expect( splide2.Components.Controller.getEnd() ).toBe( 2 );
+    const splide2 = init({ perPage: 3 }, { length: 5 });
+    expect(splide2.Components.Controller.getEnd()).toBe(2);
 
-    const splide3 = init( { perPage: 3 }, { length: 6 } );
-    expect( splide3.Components.Controller.getEnd() ).toBe( 3 );
-  } );
+    const splide3 = init({ perPage: 3 }, { length: 6 });
+    expect(splide3.Components.Controller.getEnd()).toBe(3);
+  });
 
-  test( 'should return length - 1 if the focus option is available.', () => {
-    const splide = init( { focus: 'center', perPage: 3 }, { length: 4 } );
-    expect( splide.Components.Controller.getEnd() ).toBe( splide.length - 1 );
-  } );
+  test('should return length - 1 if the focus option is available.', () => {
+    const splide = init({ focus: 'center', perPage: 3 }, { length: 4 });
+    expect(splide.Components.Controller.getEnd()).toBe(splide.length - 1);
+  });
 
-  test( 'should return length - 1 if the perMove option is available in the loop mode.', () => {
-    const splide = init( { type: 'loop', perMove: 3 }, { length: 4 } );
-    expect( splide.Components.Controller.getEnd() ).toBe( splide.length - 1 );
-  } );
+  test('should return length - 1 if the perMove option is available in the loop mode.', () => {
+    const splide = init({ type: 'loop', perMove: 3 }, { length: 4 });
+    expect(splide.Components.Controller.getEnd()).toBe(splide.length - 1);
+  });
 
-  test( 'should return length - 1 if the perPage option is 1.', () => {
+  test('should return length - 1 if the perPage option is 1.', () => {
     const splide = init();
-    expect( splide.Components.Controller.getEnd() ).toBe( splide.length - 1 );
-  } );
-} );
+    expect(splide.Components.Controller.getEnd()).toBe(splide.length - 1);
+  });
+});

src/js/components/Controller/test/go.test.ts

@@ -1,148 +1,148 @@
 import { init } from '../../../test';
 
 
-describe( 'Controller#go()', () => {
-  test( 'can move the slider to the next and previous slide.', () => {
-    const splide = init( { speed: 0 } );
+describe('Controller#go()', () => {
+  test('can move the slider to the next and previous slide.', () => {
+    const splide = init({ speed: 0 });
 
-    splide.go( '>' );
-    expect( splide.index ).toBe( 1 );
+    splide.go('>');
+    expect(splide.index).toBe(1);
 
-    splide.go( '>' );
-    expect( splide.index ).toBe( 2 );
+    splide.go('>');
+    expect(splide.index).toBe(2);
 
-    splide.go( '>' );
-    expect( splide.index ).toBe( 3 );
+    splide.go('>');
+    expect(splide.index).toBe(3);
 
-    splide.go( '<' );
-    expect( splide.index ).toBe( 2 );
+    splide.go('<');
+    expect(splide.index).toBe(2);
 
-    splide.go( '<' );
-    expect( splide.index ).toBe( 1 );
+    splide.go('<');
+    expect(splide.index).toBe(1);
 
-    splide.go( '<' );
-    expect( splide.index ).toBe( 0 );
-  } );
+    splide.go('<');
+    expect(splide.index).toBe(0);
+  });
 
-  test( 'can move the slider to the next and previous page.', () => {
-    const splide = init( { perPage: 2, speed: 0 } );
+  test('can move the slider to the next and previous page.', () => {
+    const splide = init({ perPage: 2, speed: 0 });
 
-    splide.go( '>' );
-    expect( splide.index ).toBe( 2 );
+    splide.go('>');
+    expect(splide.index).toBe(2);
 
-    splide.go( '>' );
-    expect( splide.index ).toBe( 4 );
+    splide.go('>');
+    expect(splide.index).toBe(4);
 
-    splide.go( '>' );
-    expect( splide.index ).toBe( 6 );
+    splide.go('>');
+    expect(splide.index).toBe(6);
 
-    splide.go( '<' );
-    expect( splide.index ).toBe( 4 );
+    splide.go('<');
+    expect(splide.index).toBe(4);
 
-    splide.go( '<' );
-    expect( splide.index ).toBe( 2 );
+    splide.go('<');
+    expect(splide.index).toBe(2);
 
-    splide.go( '<' );
-    expect( splide.index ).toBe( 0 );
-  } );
+    splide.go('<');
+    expect(splide.index).toBe(0);
+  });
 
-  test( 'should not move the slider if there is no slide before/after the current location.', () => {
-    const splide = init( { speed: 0 }, { length: 2 } );
+  test('should not move the slider if there is no slide before/after the current location.', () => {
+    const splide = init({ speed: 0 }, { length: 2 });
 
-    splide.go( '<' );
-    splide.go( '<' );
-    expect( splide.index ).toBe( 0 );
+    splide.go('<');
+    splide.go('<');
+    expect(splide.index).toBe(0);
 
-    splide.go( '>' );
-    splide.go( '>' );
-    expect( splide.index ).toBe( 1 );
+    splide.go('>');
+    splide.go('>');
+    expect(splide.index).toBe(1);
 
-    splide.go( '>' );
-    splide.go( '>' );
-    expect( splide.index ).toBe( 1 );
-  } );
+    splide.go('>');
+    splide.go('>');
+    expect(splide.index).toBe(1);
+  });
 
-  test( 'should not move the slider if it reaches the end index.', () => {
+  test('should not move the slider if it reaches the end index.', () => {
     // The end index is 1
-    const splide = init( { perPage: 3 }, { length: 4 } );
+    const splide = init({ perPage: 3 }, { length: 4 });
 
-    expect( splide.index ).toBe( 0 );
+    expect(splide.index).toBe(0);
 
-    splide.go( '>' );
-    expect( splide.index ).toBe( 1 );
+    splide.go('>');
+    expect(splide.index).toBe(1);
 
-    splide.go( '>' );
-    expect( splide.index ).toBe( 1 );
-  } );
+    splide.go('>');
+    expect(splide.index).toBe(1);
+  });
 
-  test( 'can increase the slide index by + or decrease it by -.', () => {
-    const splide = init( { speed: 0 } );
+  test('can increase the slide index by + or decrease it by -.', () => {
+    const splide = init({ speed: 0 });
 
-    splide.go( '+' );
-    expect( splide.index ).toBe( 1 );
+    splide.go('+');
+    expect(splide.index).toBe(1);
 
-    splide.go( '+2' );
-    expect( splide.index ).toBe( 3 );
+    splide.go('+2');
+    expect(splide.index).toBe(3);
 
-    splide.go( '+3' );
-    expect( splide.index ).toBe( 6 );
+    splide.go('+3');
+    expect(splide.index).toBe(6);
 
-    splide.go( '-' );
-    expect( splide.index ).toBe( 5 );
+    splide.go('-');
+    expect(splide.index).toBe(5);
 
-    splide.go( '-2' );
-    expect( splide.index ).toBe( 3 );
+    splide.go('-2');
+    expect(splide.index).toBe(3);
 
-    splide.go( '-3' );
-    expect( splide.index ).toBe( 0 );
+    splide.go('-3');
+    expect(splide.index).toBe(0);
 
-    splide.go( '-' );
-    expect( splide.index ).toBe( 0 );
-  } );
+    splide.go('-');
+    expect(splide.index).toBe(0);
+  });
 
-  test( 'can move the slider to the specified index.', () => {
-    const splide = init( { speed: 0 } );
+  test('can move the slider to the specified index.', () => {
+    const splide = init({ speed: 0 });
 
-    splide.go( 2 );
-    expect( splide.index ).toBe( 2 );
+    splide.go(2);
+    expect(splide.index).toBe(2);
 
-    splide.go( 4 );
-    expect( splide.index ).toBe( 4 );
+    splide.go(4);
+    expect(splide.index).toBe(4);
 
-    splide.go( 100 );
-    expect( splide.index ).toBe( splide.length - 1 );
+    splide.go(100);
+    expect(splide.index).toBe(splide.length - 1);
 
-    splide.go( -100 );
-    expect( splide.index ).toBe( 0 );
-  } );
+    splide.go(-100);
+    expect(splide.index).toBe(0);
+  });
 
-  test( 'can move the slider to the specified index with direction (internal use only).', () => {
-    const splide = init( { speed: 0, type: 'loop' } );
+  test('can move the slider to the specified index with direction (internal use only).', () => {
+    const splide = init({ speed: 0, type: 'loop' });
 
-    splide.go( '>>2' );
-    expect( splide.index ).toBe( 2 );
+    splide.go('>>2');
+    expect(splide.index).toBe(2);
 
-    splide.go( '<<4' );
-    expect( splide.index ).toBe( 4 );
+    splide.go('<<4');
+    expect(splide.index).toBe(4);
 
-    splide.go( '>>-1' );
-    expect( splide.index ).toBe( splide.length - 1 );
+    splide.go('>>-1');
+    expect(splide.index).toBe(splide.length - 1);
 
-    splide.go( '>>-2' );
-    expect( splide.index ).toBe( splide.length - 2 );
-  } );
+    splide.go('>>-2');
+    expect(splide.index).toBe(splide.length - 2);
+  });
 
-  test( 'can move the slider to the end page.', () => {
-    const splide = init( { speed: 0 } );
+  test('can move the slider to the end page.', () => {
+    const splide = init({ speed: 0 });
 
-    splide.go( '>>' );
-    expect( splide.index ).toBe( splide.length - 1 );
-  } );
+    splide.go('>>');
+    expect(splide.index).toBe(splide.length - 1);
+  });
 
-  test( 'can move the slider to the first page.', () => {
-    const splide = init( { speed: 0 } );
+  test('can move the slider to the first page.', () => {
+    const splide = init({ speed: 0 });
 
-    splide.go( '<<' );
-    expect( splide.index ).toBe( 0 );
-  } );
-} );
+    splide.go('<<');
+    expect(splide.index).toBe(0);
+  });
+});

src/js/components/Controller/test/isBusy.test.ts

@@ -1,49 +1,49 @@
 import { fire, init } from '../../../test';
 
 
-describe( 'Controller#isBusy', () => {
-  test( 'can check if the slider is moving or not.', () => {
-    const splide = init( { width: 200, height: 100, waitForTransition: true } );
+describe('Controller#isBusy', () => {
+  test('can check if the slider is moving or not.', () => {
+    const splide = init({ width: 200, height: 100, waitForTransition: true });
     const { Controller, Move } = splide.Components;
 
-    expect( Controller.isBusy() ).toBe( false );
+    expect(Controller.isBusy()).toBe(false);
 
-    Move.move( 1, 1, -1 );
-    expect( Controller.isBusy() ).toBe( true );
+    Move.move(1, 1, -1, true);
+    expect(Controller.isBusy()).toBe(true);
 
-    fire( splide.Components.Elements.list, 'transitionend' );
-    expect( Controller.isBusy() ).toBe( false );
-  } );
+    fire(splide.Components.Elements.list, 'transitionend');
+    expect(Controller.isBusy()).toBe(false);
+  });
 
-  test( 'can check if the slider is being scrolled or not.', () => {
-    const splide = init( { width: 200, height: 100, waitForTransition: true } );
+  test('can check if the slider is being scrolled or not.', () => {
+    const splide = init({ width: 200, height: 100, waitForTransition: true });
     const { Controller, Scroll } = splide.Components;
 
-    expect( Controller.isBusy() ).toBe( false );
+    expect(Controller.isBusy()).toBe(false);
 
-    Scroll.scroll( 10, 10 );
-    expect( Controller.isBusy() ).toBe( true );
+    Scroll.scroll(10, 10);
+    expect(Controller.isBusy()).toBe(true);
 
     Scroll.cancel();
-    expect( Controller.isBusy() ).toBe( false );
-  } );
+    expect(Controller.isBusy()).toBe(false);
+  });
 
-  test( 'should always return true if `waitForTransition` is false.', () => {
-    const splide = init( { width: 200, height: 100, waitForTransition: false } );
+  test('should always return true if `waitForTransition` is false.', () => {
+    const splide = init({ width: 200, height: 100, waitForTransition: false });
     const { Controller, Move, Scroll } = splide.Components;
 
-    expect( Controller.isBusy() ).toBe( false );
+    expect(Controller.isBusy()).toBe(false);
 
-    Move.move( 1, 1, -1 );
-    expect( Controller.isBusy() ).toBe( false );
+    Move.move(1, 1, -1, true);
+    expect(Controller.isBusy()).toBe(false);
 
     Move.cancel();
-    expect( Controller.isBusy() ).toBe( false );
+    expect(Controller.isBusy()).toBe(false);
 
-    Scroll.scroll( 10, 10 );
-    expect( Controller.isBusy() ).toBe( false );
+    Scroll.scroll(10, 10);
+    expect(Controller.isBusy()).toBe(false);
 
     Scroll.cancel();
-    expect( Controller.isBusy() ).toBe( false );
-  } );
-} );
+    expect(Controller.isBusy()).toBe(false);
+  });
+});

src/js/components/Controller/test/loop.test.ts

@@ -1,37 +1,37 @@
 import { init } from '../../../test';
 
 
-describe( 'Controller#go()', () => {
-  test( 'can loop the slider.', () => {
-    const splide = init( { type: 'loop', speed: 0 } );
+describe('Controller#go()', () => {
+  test('can loop the slider.', () => {
+    const splide = init({ type: 'loop', speed: 0 });
 
-    splide.go( '<' );
-    expect( splide.index ).toBe( splide.length - 1 );
+    splide.go('<');
+    expect(splide.index).toBe(splide.length - 1);
 
-    splide.go( '>' );
-    expect( splide.index ).toBe( 0 );
+    splide.go('>');
+    expect(splide.index).toBe(0);
 
-    splide.go( '-' );
-    expect( splide.index ).toBe( splide.length - 1 );
+    splide.go('-');
+    expect(splide.index).toBe(splide.length - 1);
 
-    splide.go( '+' );
-    expect( splide.index ).toBe( 0 );
-  } );
+    splide.go('+');
+    expect(splide.index).toBe(0);
+  });
 
-  test( 'can loop the slider, using the index of the last page.', () => {
+  test('can loop the slider, using the index of the last page.', () => {
     // The length is 10 and the last page only contains the slide 9.
-    const splide = init( { type: 'loop', perPage: 3, speed: 0 } );
+    const splide = init({ type: 'loop', perPage: 3, speed: 0 });
 
-    splide.go( '<' );
-    expect( splide.index ).toBe( 9 ); // 9, 0, 1
+    splide.go('<');
+    expect(splide.index).toBe(9); // 9, 0, 1
 
-    splide.go( '<' );
-    expect( splide.index ).toBe( 6 ); // 6, 7, 8
+    splide.go('<');
+    expect(splide.index).toBe(6); // 6, 7, 8
 
-    splide.go( '>' );
-    expect( splide.index ).toBe( 7 ); // 7, 8, 9
+    splide.go('>');
+    expect(splide.index).toBe(7); // 7, 8, 9
 
-    splide.go( '>' );
-    expect( splide.index ).toBe( 0 );
-  } );
-} );
+    splide.go('>');
+    expect(splide.index).toBe(0);
+  });
+});

src/js/components/Controller/test/rewind.test.ts

@@ -1,31 +1,31 @@
 import { init } from '../../../test';
 
 
-describe( 'Controller#go()', () => {
-  test( 'can rewind the slider.', () => {
-    const splide = init( { rewind: true, speed: 0 } );
+describe('Controller#go()', () => {
+  test('can rewind the slider.', () => {
+    const splide = init({ rewind: true, speed: 0 });
 
-    splide.go( '<' );
-    expect( splide.index ).toBe( splide.length - 1 );
+    splide.go('<');
+    expect(splide.index).toBe(splide.length - 1);
 
-    splide.go( '>' );
-    expect( splide.index ).toBe( 0 );
+    splide.go('>');
+    expect(splide.index).toBe(0);
 
-    splide.go( '-' );
-    expect( splide.index ).toBe( splide.length - 1 );
+    splide.go('-');
+    expect(splide.index).toBe(splide.length - 1);
 
-    splide.go( '+' );
-    expect( splide.index ).toBe( 0 );
-  } );
+    splide.go('+');
+    expect(splide.index).toBe(0);
+  });
 
-  test( 'can rewind the slider, using the end index.', () => {
+  test('can rewind the slider, using the end index.', () => {
     // The end index is 1.
-    const splide = init( { rewind: true, perPage: 3, speed: 0 }, { length: 4 } );
+    const splide = init({ rewind: true, perPage: 3, speed: 0 }, { length: 4 });
 
-    splide.go( '<' );
-    expect( splide.index ).toBe( 1 );
+    splide.go('<');
+    expect(splide.index).toBe(1);
 
-    splide.go( '>' );
-    expect( splide.index ).toBe( 0 );
-  } );
-} );
+    splide.go('>');
+    expect(splide.index).toBe(0);
+  });
+});

src/js/components/Controller/test/scroll.test.ts

@@ -2,41 +2,41 @@ import { init, wait } from '../../../test';
 import { BOUNCE_DURATION } from '../../Scroll/constants';
 
 
-describe( 'Controller#scroll()', () => {
-  test( 'can scroll the carousel.', done => {
+describe('Controller#scroll()', () => {
+  test('can scroll the carousel.', done => {
     const splide = init();
     const { scroll } = splide.Components.Controller;
 
-    scroll( -100, 100, false, () => {
-      expect( splide.Components.Move.getPosition() ).toBe( -100 );
+    scroll(-100, 100, false, () => {
+      expect(splide.Components.Move.getPosition()).toBe(-100);
       done();
-    } );
-  } );
+    });
+  });
 
-  test( 'can update the index after scroll.', async () => {
-    const splide = init( { width: 100 } );
+  test('can update the index after scroll.', async () => {
+    const splide = init({ width: 100 });
     const { scroll } = splide.Components.Controller;
 
-    scroll( -100, 100 );
-    await wait( 200 );
-    expect( splide.index ).toBe( 1 );
+    scroll(-100, 100);
+    await wait(200);
+    expect(splide.index).toBe(1);
 
-    scroll( -200, 100 );
-    await wait( 200 );
-    expect( splide.index ).toBe( 2 );
-  } );
+    scroll(-200, 100);
+    await wait(200);
+    expect(splide.index).toBe(2);
+  });
 
-  test( 'can update the index after the carousel exceeds bounds.', async () => {
-    const splide = init( { width: 100 } );
+  test('can update the index after the carousel exceeds bounds.', async () => {
+    const splide = init({ width: 100 });
     const { scroll } = splide.Components.Controller;
 
-    scroll( -100, 100 );
-    await wait( 200 );
-    expect( splide.index ).toBe( 1 );
+    scroll(-100, 100);
+    await wait(200);
+    expect(splide.index).toBe(1);
 
     // Make the carousel exceed the left limit.
-    scroll( 100, 100 );
-    await wait( 100 + BOUNCE_DURATION + 100 );
-    expect( splide.index ).toBe( 0 );
-  } );
-} );
+    scroll(100, 100);
+    await wait(100 + BOUNCE_DURATION + 100);
+    expect(splide.index).toBe(0);
+  });
+});

src/js/components/Controller/test/toIndex.test.ts

@@ -1,21 +1,21 @@
 import { init } from '../../../test';
 
 
-describe( 'Controller#toIndex()', () => {
-  test( 'can convert the page index to the slide index.', () => {
-    const splide = init( { perPage: 3 } );
+describe('Controller#toIndex()', () => {
+  test('can convert the page index to the slide index.', () => {
+    const splide = init({ perPage: 3 });
     const { toIndex } = splide.Components.Controller;
 
-    expect( toIndex( 0 ) ).toBe( 0 );
-    expect( toIndex( 1 ) ).toBe( 3 );
-    expect( toIndex( 2 ) ).toBe( 6 );
-  } );
+    expect(toIndex(0)).toBe(0);
+    expect(toIndex(1)).toBe(3);
+    expect(toIndex(2)).toBe(6);
+  });
 
-  test( 'can convert the page index with respecting the end index.', () => {
-    const splide = init( { perPage: 3 }, { length: 4 } );
+  test('can convert the page index with respecting the end index.', () => {
+    const splide = init({ perPage: 3 }, { length: 4 });
     const { toIndex } = splide.Components.Controller;
 
-    expect( toIndex( 0 ) ).toBe( 0 );
-    expect( toIndex( 1 ) ).toBe( 1 );
-  } );
-} );
+    expect(toIndex(0)).toBe(0);
+    expect(toIndex(1)).toBe(1);
+  });
+});

src/js/components/Controller/test/toPage.test.ts

@@ -1,37 +1,37 @@
 import { init } from '../../../test';
 
 
-describe( 'Controller#toPage()', () => {
-  test( 'can convert the slide index to the page index.', () => {
-    const splide = init( { perPage: 3 } );
+describe('Controller#toPage()', () => {
+  test('can convert the slide index to the page index.', () => {
+    const splide = init({ perPage: 3 });
     const { toPage } = splide.Components.Controller;
 
-    expect( toPage( 0 ) ).toBe( 0 );
-    expect( toPage( 1 ) ).toBe( 0 );
-    expect( toPage( 2 ) ).toBe( 0 );
+    expect(toPage(0)).toBe(0);
+    expect(toPage(1)).toBe(0);
+    expect(toPage(2)).toBe(0);
 
-    expect( toPage( 3 ) ).toBe( 1 );
-    expect( toPage( 4 ) ).toBe( 1 );
-    expect( toPage( 5 ) ).toBe( 1 );
-  } );
+    expect(toPage(3)).toBe(1);
+    expect(toPage(4)).toBe(1);
+    expect(toPage(5)).toBe(1);
+  });
 
-  test( 'can convert the slide index to the page index with respecting the end index.', () => {
-    const splide = init( { perPage: 3 }, { length: 4 } );
+  test('can convert the slide index to the page index with respecting the end index.', () => {
+    const splide = init({ perPage: 3 }, { length: 4 });
     const { toPage } = splide.Components.Controller;
 
-    expect( toPage( 0 ) ).toBe( 0 );
-    expect( toPage( 1 ) ).toBe( 1 );
-    expect( toPage( 2 ) ).toBe( 1 );
-    expect( toPage( 3 ) ).toBe( 1 );
-  } );
+    expect(toPage(0)).toBe(0);
+    expect(toPage(1)).toBe(1);
+    expect(toPage(2)).toBe(1);
+    expect(toPage(3)).toBe(1);
+  });
 
-  test( 'should return the slide index as is if the focus option is available.', () => {
-    const splide = init( { focus: 'center', perPage: 3 } );
+  test('should return the slide index as is if the focus option is available.', () => {
+    const splide = init({ focus: 'center', perPage: 3 });
     const { toPage } = splide.Components.Controller;
 
-    expect( toPage( 0 ) ).toBe( 0 );
-    expect( toPage( 1 ) ).toBe( 1 );
-    expect( toPage( 2 ) ).toBe( 2 );
-    expect( toPage( 3 ) ).toBe( 3 );
-  } );
-} );
+    expect(toPage(0)).toBe(0);
+    expect(toPage(1)).toBe(1);
+    expect(toPage(2)).toBe(2);
+    expect(toPage(3)).toBe(3);
+  });
+});

src/js/components/Direction/Direction.ts

@@ -11,10 +11,10 @@ import { apply } from '../../../../../utils';
  * @since 3.0.0
  */
 export interface DirectionComponent extends BaseComponent {
-  resolve<K extends keyof typeof ORIENTATION_MAP>( prop: K, axisOnly?: boolean, direction?: Options['direction'] ): typeof ORIENTATION_MAP[ K ][ number ] | K;
-  resolve<R extends string>( prop: R, axisOnly?: boolean, direction?: Options['direction'] ): R;
+  resolve<K extends keyof typeof ORIENTATION_MAP>(prop: K, axisOnly?: boolean, direction?: Options['direction']): typeof ORIENTATION_MAP[ K ][ number ] | K;
+  resolve<R extends string>(prop: R, axisOnly?: boolean, direction?: Options['direction']): R;
 
-  orient( value: number ): number;
+  orient(value: number): number;
   left(): string;
   right(): string;
   width(): string;
@@ -26,14 +26,14 @@ export interface DirectionComponent extends BaseComponent {
  * @since 3.0.0
  */
 export const ORIENTATION_MAP = {
-  width     : [ 'height' ],
-  left      : [ 'top', 'right' ],
-  right     : [ 'bottom', 'left' ],
-  x         : [ 'y' ],
-  X         : [ 'Y' ],
-  Y         : [ 'X' ],
-  ArrowLeft : [ ARROW_UP, ARROW_RIGHT ],
-  ArrowRight: [ ARROW_DOWN, ARROW_LEFT ],
+  width: ['height'],
+  left: ['top', 'right'],
+  right: ['bottom', 'left'],
+  x: ['y'],
+  X: ['Y'],
+  Y: ['X'],
+  ArrowLeft: [ARROW_UP, ARROW_RIGHT],
+  ArrowRight: [ARROW_DOWN, ARROW_LEFT],
 } as const;
 
 /**
@@ -47,7 +47,7 @@ export const ORIENTATION_MAP = {
  *
  * @return A Direction component object.
  */
-export const Direction: ComponentConstructor<DirectionComponent> = ( Splide: Splide, Components: Components, options: Options ) => {
+export const Direction: ComponentConstructor<DirectionComponent> = (Splide: Splide, Components: Components, options: Options) => {
   /**
    * Resolves the provided property name.
    *
@@ -58,15 +58,15 @@ export const Direction: ComponentConstructor<DirectionComponent> = ( Splide: Spl
   function resolve(
     prop: string,
     axisOnly?: boolean,
-    direction: Options[ 'direction' ] = options.direction
+    direction: Options[ 'direction' ] = options.direction,
   ): string {
-    const index = direction === RTL && ! axisOnly ? 1 : direction === TTB ? 0 : -1;
+    const index = direction === RTL && !axisOnly ? 1 : direction === TTB ? 0 : -1;
 
-    return ORIENTATION_MAP[ prop ] && ORIENTATION_MAP[ prop ][ index ]
-      || prop.replace( /width|left|right/i, ( match, offset ) => {
-        const replacement = ORIENTATION_MAP[ match.toLowerCase() ][ index ] || match;
-        return offset > 0 ? replacement.charAt( 0 ).toUpperCase() + replacement.slice( 1 ) : replacement;
-      } );
+    return ORIENTATION_MAP[prop] && ORIENTATION_MAP[prop][index]
+      || prop.replace(/width|left|right/i, (match, offset) => {
+        const replacement = ORIENTATION_MAP[match.toLowerCase()][index] || match;
+        return offset > 0 ? replacement.charAt(0).toUpperCase() + replacement.slice(1) : replacement;
+      });
   }
 
   /**
@@ -77,15 +77,15 @@ export const Direction: ComponentConstructor<DirectionComponent> = ( Splide: Spl
    *
    * @return The oriented value.
    */
-  function orient( value: number, direction: Options[ 'direction' ] = options.direction ): number {
-    return value * ( direction === RTL ? 1 : -1 );
+  function orient(value: number, direction: Options[ 'direction' ] = options.direction): number {
+    return value * (direction === RTL ? 1 : -1);
   }
 
   return {
     resolve,
     orient,
-    left: apply( resolve, 'left' ),
-    right: apply( resolve, 'right' ),
-    width: apply( resolve, 'width' ),
+    left: apply(resolve, 'left'),
+    right: apply(resolve, 'right'),
+    width: apply(resolve, 'width'),
   };
 };

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

@@ -2,50 +2,50 @@ import { LTR, RTL, TTB } from '../../../constants/directions';
 import { init } from '../../../test';
 
 
-describe( 'Direction', () => {
+describe('Direction', () => {
   const splide = init();
   const { options } = splide;
   const { resolve, orient } = splide.Components.Direction;
 
-  test( 'can provide property names for LTR.', () => {
+  test('can provide property names for LTR.', () => {
     options.direction = LTR;
 
-    expect( resolve( 'marginRight' ) ).toBe( 'marginRight' );
-    expect( resolve( 'width' ) ).toBe( 'width' );
-    expect( resolve( 'paddingLeft' ) ).toBe( 'paddingLeft' );
-  } );
+    expect(resolve('marginRight')).toBe('marginRight');
+    expect(resolve('width')).toBe('width');
+    expect(resolve('paddingLeft')).toBe('paddingLeft');
+  });
 
-  test( 'can provide property names for TTB.', () => {
+  test('can provide property names for TTB.', () => {
     options.direction = TTB;
 
-    expect( resolve( 'marginRight' ) ).toBe( 'marginBottom' );
-    expect( resolve( 'width' ) ).toBe( 'height' );
-    expect( resolve( 'paddingLeft' ) ).toBe( 'paddingTop' );
-  } );
+    expect(resolve('marginRight')).toBe('marginBottom');
+    expect(resolve('width')).toBe('height');
+    expect(resolve('paddingLeft')).toBe('paddingTop');
+  });
 
-  test( 'can provide property names for RTL.', () => {
+  test('can provide property names for RTL.', () => {
     options.direction = RTL;
 
-    expect( resolve( 'marginRight' ) ).toBe( 'marginLeft' );
-    expect( resolve( 'width' ) ).toBe( 'width' );
-    expect( resolve( 'paddingLeft' ) ).toBe( 'paddingRight' );
-  } );
+    expect(resolve('marginRight')).toBe('marginLeft');
+    expect(resolve('width')).toBe('width');
+    expect(resolve('paddingLeft')).toBe('paddingRight');
+  });
 
-  test( 'can provide same property names for LTR and RTL if the axisOnly is true.', () => {
+  test('can provide same property names for LTR and RTL if the axisOnly is true.', () => {
     options.direction = RTL;
 
-    expect( resolve( 'marginRight', true ) ).toBe( 'marginRight' );
-    expect( resolve( 'paddingLeft', true ) ).toBe( 'paddingLeft' );
-  } );
+    expect(resolve('marginRight', true)).toBe('marginRight');
+    expect(resolve('paddingLeft', true)).toBe('paddingLeft');
+  });
 
-  test( 'can orient the provided value towards the current direction.', () => {
+  test('can orient the provided value towards the current direction.', () => {
     options.direction = LTR;
-    expect( orient( 1 ) ).toBe( -1 );
+    expect(orient(1)).toBe(-1);
 
     options.direction = TTB;
-    expect( orient( 1 ) ).toBe( -1 );
+    expect(orient(1)).toBe(-1);
 
     options.direction = RTL;
-    expect( orient( 1 ) ).toBe( 1 );
-  } );
-} );
+    expect(orient(1)).toBe(1);
+  });
+});

src/js/components/Drag/Drag.ts

@@ -14,7 +14,7 @@ import { FRICTION, LOG_INTERVAL, POINTER_DOWN_EVENTS, POINTER_MOVE_EVENTS, POINT
  * @since 3.0.0
  */
 export interface DragComponent extends BaseComponent {
-  disable( disabled: boolean ): void;
+  disable(disabled: boolean): void;
   isDragging(): boolean;
 }
 
@@ -30,7 +30,7 @@ export interface DragComponent extends BaseComponent {
  *
  * @return A Drag component object.
  */
-export const Drag: ComponentConstructor<DragComponent> = ( Splide, Components, options, event ) => {
+export const Drag: ComponentConstructor<DragComponent> = (Splide, Components, options, event) => {
   const { on, emit, bind } = event;
   const binder = event.lock();
   const { state } = Splide;
@@ -93,12 +93,12 @@ export const Drag: ComponentConstructor<DragComponent> = ( Splide, Components, o
    * Called when the component is mounted.
    */
   function mount(): void {
-    bind( track, POINTER_MOVE_EVENTS, noop, SCROLL_LISTENER_OPTIONS );
-    bind( track, POINTER_UP_EVENTS, noop, SCROLL_LISTENER_OPTIONS );
-    bind( track, POINTER_DOWN_EVENTS, onPointerDown, SCROLL_LISTENER_OPTIONS );
-    bind( track, 'click', onClick, { capture: true } );
-    bind( track, 'dragstart', prevent );
-    on( [ EVENT_MOUNTED, EVENT_UPDATED ], init );
+    bind(track, POINTER_MOVE_EVENTS, noop, SCROLL_LISTENER_OPTIONS);
+    bind(track, POINTER_UP_EVENTS, noop, SCROLL_LISTENER_OPTIONS);
+    bind(track, POINTER_DOWN_EVENTS, onPointerDown, SCROLL_LISTENER_OPTIONS);
+    bind(track, 'click', onClick, { capture: true });
+    bind(track, 'dragstart', prevent);
+    on([EVENT_MOUNTED, EVENT_UPDATED], init);
   }
 
   /**
@@ -106,7 +106,7 @@ export const Drag: ComponentConstructor<DragComponent> = ( Splide, Components, o
    */
   function init(): void {
     const { drag } = options;
-    disable( ! drag );
+    disable(!drag);
     isFree = drag === 'free';
   }
 
@@ -118,26 +118,26 @@ export const Drag: ComponentConstructor<DragComponent> = ( Splide, Components, o
    *
    * @param e - A TouchEvent or MouseEvent object
    */
-  function onPointerDown( e: TouchEvent | MouseEvent ): void {
+  function onPointerDown(e: TouchEvent | MouseEvent): void {
     clickPrevented = false;
 
-    if ( ! disabled ) {
-      const isTouch = isTouchEvent( e );
+    if (!disabled) {
+      const isTouch = isTouchEvent(e);
 
-      if ( isDraggable( e.target ) && ( isTouch || ! e.button ) ) {
-        if ( ! Controller.isBusy() ) {
-          target        = isTouch ? track : window;
-          dragging      = state.is( [ MOVING, SCROLLING ] );
+      if (isDraggable(e.target) && (isTouch || !e.button)) {
+        if (!Controller.isBusy()) {
+          target = isTouch ? track : window;
+          dragging = state.is([MOVING, SCROLLING]);
           prevBaseEvent = null;
-          startCoord    = coordOf( e );
+          startCoord = coordOf(e);
 
-          binder.bind( target, POINTER_MOVE_EVENTS, onPointerMove, SCROLL_LISTENER_OPTIONS );
-          binder.bind( target, POINTER_UP_EVENTS, onPointerUp, SCROLL_LISTENER_OPTIONS );
+          binder.bind(target, POINTER_MOVE_EVENTS, onPointerMove, SCROLL_LISTENER_OPTIONS);
+          binder.bind(target, POINTER_UP_EVENTS, onPointerUp, SCROLL_LISTENER_OPTIONS);
           Move.cancel();
           Scroll.cancel();
-          save( e );
+          save(e);
         } else {
-          prevent( e, true );
+          prevent(e, true);
         }
       }
     }
@@ -148,33 +148,33 @@ export const Drag: ComponentConstructor<DragComponent> = ( Splide, Components, o
    *
    * @param e - A TouchEvent or MouseEvent object
    */
-  function onPointerMove( e: TouchEvent | MouseEvent ): void {
-    if ( ! state.is( DRAGGING ) ) {
-      state.set( DRAGGING );
-      emit( EVENT_DRAG );
+  function onPointerMove(e: TouchEvent | MouseEvent): void {
+    if (!state.is(DRAGGING)) {
+      state.set(DRAGGING);
+      emit(EVENT_DRAG);
     }
 
-    if ( shouldRelease( e ) ) {
-      return onPointerUp( e );
+    if (shouldRelease(e)) {
+      return onPointerUp(e);
     }
 
-    if ( e.cancelable ) {
-      if ( dragging ) {
-        Move.translate( basePosition + constrain( diffCoord( e ) ) );
+    if (e.cancelable) {
+      if (dragging) {
+        Move.translate(basePosition + constrain(diffCoord(e)));
 
-        const expired     = diffTime( e ) > LOG_INTERVAL;
-        const hasExceeded = exceeded !== ( exceeded = exceededLimit() );
+        const expired = diffTime(e) > LOG_INTERVAL;
+        const hasExceeded = exceeded !== (exceeded = exceededLimit());
 
-        if ( expired || hasExceeded ) {
-          save( e );
+        if (expired || hasExceeded) {
+          save(e);
         }
 
         clickPrevented = true;
-        emit( EVENT_DRAGGING );
-        prevent( e );
-      } else if ( isSliderDirection( e ) ) {
-        dragging = shouldStart( e );
-        prevent( e );
+        emit(EVENT_DRAGGING);
+        prevent(e);
+      } else if (isSliderDirection(e)) {
+        dragging = shouldStart(e);
+        prevent(e);
       }
     }
   }
@@ -187,15 +187,15 @@ export const Drag: ComponentConstructor<DragComponent> = ( Splide, Components, o
    *
    * @param e - A TouchEvent or MouseEvent object
    */
-  function onPointerUp( e: TouchEvent | MouseEvent ): void {
-    if ( state.is( DRAGGING ) ) {
-      state.set( IDLE );
-      emit( EVENT_DRAGGED );
+  function onPointerUp(e: TouchEvent | MouseEvent): void {
+    if (state.is(DRAGGING)) {
+      state.set(IDLE);
+      emit(EVENT_DRAGGED);
     }
 
-    if ( dragging ) {
-      move( e );
-      prevent( e );
+    if (dragging) {
+      move(e);
+      prevent(e);
     }
 
     binder.destroy();
@@ -209,9 +209,9 @@ export const Drag: ComponentConstructor<DragComponent> = ( Splide, Components, o
    *
    * @param e - A MouseEvent object.
    */
-  function onClick( e: MouseEvent ): void {
-    if ( ! disabled && clickPrevented ) {
-      prevent( e, true );
+  function onClick(e: MouseEvent): void {
+    if (!disabled && clickPrevented) {
+      prevent(e, true);
     }
   }
 
@@ -220,10 +220,10 @@ export const Drag: ComponentConstructor<DragComponent> = ( Splide, Components, o
    *
    * @param e - A TouchEvent or MouseEvent object.
    */
-  function save( e: TouchEvent | MouseEvent ): void {
+  function save(e: TouchEvent | MouseEvent): void {
     prevBaseEvent = baseEvent;
-    baseEvent     = e;
-    basePosition  = getPosition();
+    baseEvent = e;
+    basePosition = getPosition();
   }
 
   /**
@@ -233,28 +233,28 @@ export const Drag: ComponentConstructor<DragComponent> = ( Splide, Components, o
    *
    * @param e - A TouchEvent or MouseEvent object.
    */
-  function move( e: TouchEvent | MouseEvent ): void {
+  function move(e: TouchEvent | MouseEvent): void {
     const { go } = Controller;
     const { updateOnDragged = true } = options;
-    const velocity    = computeVelocity( e );
-    const destination = computeDestination( velocity );
-    const forwards    = orient( coordOf( e ) - startCoord ) > 0;
-    const rewind      = options.rewind && options.rewindByDrag;
-    const scroll      = updateOnDragged ? Controller.scroll : Scroll.scroll;
-
-    reduce( false );
-
-    if ( isFree ) {
-      scroll( destination, undefined, options.snap );
-    } else if ( Splide.is( FADE ) ) {
-      go( forwards ? ( rewind ? '>' : '+' ) : ( rewind ? '<' : '-' ) );
-    } else if ( Splide.is( SLIDE ) && exceeded && rewind ) {
-      go( exceededLimit( true ) ? '>' : '<' ); // todo
+    const velocity = computeVelocity(e);
+    const destination = computeDestination(velocity);
+    const forwards = orient(coordOf(e) - startCoord) > 0;
+    const rewind = options.rewind && options.rewindByDrag;
+    const scroll = updateOnDragged ? Controller.scroll : Scroll.scroll;
+
+    reduce(false);
+
+    if (isFree) {
+      scroll(destination, undefined, options.snap);
+    } else if (Splide.is(FADE)) {
+      go(forwards ? (rewind ? '>' : '+') : (rewind ? '<' : '-'));
+    } else if (Splide.is(SLIDE) && exceeded && rewind) {
+      go(exceededLimit(true) ? '>' : '<'); // todo
     } else {
-      go( `${ forwards ? '>>' : '<<' }${ Controller.toDest( destination ) }` );
+      go(`${ forwards ? '>>' : '<<' }${ Controller.toDest(destination) }`);
     }
 
-    reduce( true );
+    reduce(true);
   }
 
   /**
@@ -262,12 +262,12 @@ export const Drag: ComponentConstructor<DragComponent> = ( Splide, Components, o
    *
    * @param e - A TouchEvent or MouseEvent object.
    */
-  function shouldRelease( e: TouchEvent | MouseEvent ): boolean {
-    if ( options.releaseTouch && Splide.is( SLIDE ) && isTouchEvent( e ) ) {
+  function shouldRelease(e: TouchEvent | MouseEvent): boolean {
+    if (options.releaseTouch && Splide.is(SLIDE) && isTouchEvent(e)) {
       const { index } = Splide;
-      const diff = diffCoord( e );
+      const diff = diffCoord(e);
 
-      if ( exceededLimit() || index === 0 && diff > 0 || index === Splide.length - 1 && diff < 0 ) {
+      if (exceededLimit() || index === 0 && diff > 0 || index === Splide.length - 1 && diff < 0) {
         return true;
       }
     }
@@ -282,12 +282,12 @@ export const Drag: ComponentConstructor<DragComponent> = ( Splide, Components, o
    *
    * @return `true` if the distance exceeds the threshold, or `false` if not.
    */
-  function shouldStart( e: TouchEvent | MouseEvent ): boolean {
+  function shouldStart(e: TouchEvent | MouseEvent): boolean {
     const { dragMinThreshold: thresholds } = options;
-    const isObj = isObject( thresholds );
+    const isObj = isObject(thresholds);
     const mouse = isObj && thresholds.mouse || 0;
-    const touch = ( isObj ? thresholds.touch : +thresholds ) || 10;
-    return abs( diffCoord( e ) ) > ( isTouchEvent( e ) ? touch : mouse );
+    const touch = (isObj ? thresholds.touch : +thresholds) || 10;
+    return abs(diffCoord(e)) > (isTouchEvent(e) ? touch : mouse);
   }
 
   /**
@@ -297,8 +297,8 @@ export const Drag: ComponentConstructor<DragComponent> = ( Splide, Components, o
    *
    * @param e - A TouchEvent or MouseEvent object
    */
-  function isSliderDirection( e: TouchEvent | MouseEvent ): boolean {
-    return abs( diffCoord( e ) ) > abs( diffCoord( e, true ) );
+  function isSliderDirection(e: TouchEvent | MouseEvent): boolean {
+    return abs(diffCoord(e)) > abs(diffCoord(e, true));
   }
 
   /**
@@ -308,12 +308,12 @@ export const Drag: ComponentConstructor<DragComponent> = ( Splide, Components, o
    *
    * @return The drag velocity.
    */
-  function computeVelocity( e: TouchEvent | MouseEvent ): number {
-    if ( Splide.is( LOOP ) || ! exceeded ) {
-      const time = diffTime( e );
+  function computeVelocity(e: TouchEvent | MouseEvent): number {
+    if (Splide.is(LOOP) || !exceeded) {
+      const time = diffTime(e);
 
-      if ( time && time < LOG_INTERVAL ) {
-        return diffCoord( e ) / time;
+      if (time && time < LOG_INTERVAL) {
+        return diffCoord(e) / time;
       }
     }
 
@@ -327,10 +327,10 @@ export const Drag: ComponentConstructor<DragComponent> = ( Splide, Components, o
    *
    * @return The destination.
    */
-  function computeDestination( velocity: number ): number {
-    return getPosition() + sign( velocity ) * min(
-      abs( velocity ) * ( options.flickPower || 600 ),
-      isFree ? Infinity : Components.Layout.listSize() * ( options.flickMaxPages || 1 )
+  function computeDestination(velocity: number): number {
+    return getPosition() + sign(velocity) * min(
+      abs(velocity) * (options.flickPower || 600),
+      isFree ? Infinity : Components.Layout.listSize() * (options.flickMaxPages || 1),
     );
   }
 
@@ -342,8 +342,8 @@ export const Drag: ComponentConstructor<DragComponent> = ( Splide, Components, o
    *
    * @return The difference of the coord.
    */
-  function diffCoord( e: TouchEvent | MouseEvent, orthogonal?: boolean ): number {
-    return coordOf( e, orthogonal ) - coordOf( getBaseEvent( e ), orthogonal );
+  function diffCoord(e: TouchEvent | MouseEvent, orthogonal?: boolean): number {
+    return coordOf(e, orthogonal) - coordOf(getBaseEvent(e), orthogonal);
   }
 
   /**
@@ -353,8 +353,8 @@ export const Drag: ComponentConstructor<DragComponent> = ( Splide, Components, o
    *
    * @return The elapsed time in milliseconds.
    */
-  function diffTime( e: TouchEvent | MouseEvent ): number {
-    return timeOf( e ) - timeOf( getBaseEvent( e ) );
+  function diffTime(e: TouchEvent | MouseEvent): number {
+    return timeOf(e) - timeOf(getBaseEvent(e));
   }
 
   /**
@@ -365,7 +365,7 @@ export const Drag: ComponentConstructor<DragComponent> = ( Splide, Components, o
    *
    * @return A base event.
    */
-  function getBaseEvent( e: TouchEvent | MouseEvent ): TouchEvent | MouseEvent {
+  function getBaseEvent(e: TouchEvent | MouseEvent): TouchEvent | MouseEvent {
     return baseEvent === e && prevBaseEvent || baseEvent;
   }
 
@@ -378,8 +378,8 @@ export const Drag: ComponentConstructor<DragComponent> = ( Splide, Components, o
    *
    * @return A pageX or pageY coordinate.
    */
-  function coordOf( e: TouchEvent | MouseEvent, orthogonal?: boolean ): number {
-    return ( isTouchEvent( e ) ? e.changedTouches[ 0 ] : e )[ `page${ resolve( orthogonal ? 'Y' : 'X' ) }` ];
+  function coordOf(e: TouchEvent | MouseEvent, orthogonal?: boolean): number {
+    return (isTouchEvent(e) ? e.changedTouches[0] : e)[`page${ resolve(orthogonal ? 'Y' : 'X') }`];
   }
 
   /**
@@ -390,8 +390,8 @@ export const Drag: ComponentConstructor<DragComponent> = ( Splide, Components, o
    *
    * @return The constrained diff.
    */
-  function constrain( diff: number ): number {
-    return diff / ( exceeded && Splide.is( SLIDE ) ? FRICTION : 1 );
+  function constrain(diff: number): number {
+    return diff / (exceeded && Splide.is(SLIDE) ? FRICTION : 1);
   }
 
   /**
@@ -401,11 +401,11 @@ export const Drag: ComponentConstructor<DragComponent> = ( Splide, Components, o
    *
    * @return `true` if the target is draggable.
    */
-  function isDraggable( target: EventTarget ): boolean {
+  function isDraggable(target: EventTarget): boolean {
     const { noDrag } = options;
 
-    return ! matches( target, `.${ CLASS_PAGINATION_PAGE }, .${ CLASS_ARROW }` )
-      && ( ! noDrag || ! matches( target, noDrag ) );
+    return !matches(target, `.${ CLASS_PAGINATION_PAGE }, .${ CLASS_ARROW }`)
+      && (!noDrag || !matches(target, noDrag));
   }
 
   /**
@@ -415,7 +415,7 @@ export const Drag: ComponentConstructor<DragComponent> = ( Splide, Components, o
    *
    * @return `true` if the `e` is TouchEvent.
    */
-  function isTouchEvent( e: TouchEvent | MouseEvent ): e is TouchEvent {
+  function isTouchEvent(e: TouchEvent | MouseEvent): e is TouchEvent {
     return typeof TouchEvent !== 'undefined' && e instanceof TouchEvent;
   }
 
@@ -433,7 +433,7 @@ export const Drag: ComponentConstructor<DragComponent> = ( Splide, Components, o
    *
    * @param value - Set `true` to disable the component.
    */
-  function disable( value: boolean ): void {
+  function disable(value: boolean): void {
     disabled = value;
   }
 

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

@@ -2,107 +2,107 @@ import { EVENT_DRAG, EVENT_DRAGGING } from '../../../constants/events';
 import { fire, init } from '../../../test';
 
 
-describe( 'Drag', () => {
-  test( 'can move the slider by drag.', () => {
+describe('Drag', () => {
+  test('can move the slider by drag.', () => {
     const splide = init();
-    const track  = splide.Components.Elements.track;
+    const track = splide.Components.Elements.track;
 
-    fireWithCoord( track, 'mousedown', { x: 0, timeStamp: 1 } );
-    fireWithCoord( window, 'mousemove', { x: 1, timeStamp: 1 } );
-    fireWithCoord( window, 'mousemove', { x: -100, timeStamp: 2 } );
+    fireWithCoord(track, 'mousedown', { x: 0, timeStamp: 1 });
+    fireWithCoord(window, 'mousemove', { x: 1, timeStamp: 1 });
+    fireWithCoord(window, 'mousemove', { x: -100, timeStamp: 2 });
 
-    expect( splide.Components.Move.getPosition() ).toBe( -100 );
+    expect(splide.Components.Move.getPosition()).toBe(-100);
 
-    fireWithCoord( window, 'mousemove', { x: -200, timeStamp: 3 } );
+    fireWithCoord(window, 'mousemove', { x: -200, timeStamp: 3 });
 
-    expect( splide.Components.Move.getPosition() ).toBe( -200 );
-  } );
+    expect(splide.Components.Move.getPosition()).toBe(-200);
+  });
 
-  test( 'should not move the slider after dragging.', () => {
+  test('should not move the slider after dragging.', () => {
     const splide = init();
-    const track  = splide.Components.Elements.track;
+    const track = splide.Components.Elements.track;
 
-    fireWithCoord( track, 'mousedown', { x: 0 } );
-    fireWithCoord( window, 'mousemove', { x: 1 } );
-    fireWithCoord( window, 'mouseup' );
+    fireWithCoord(track, 'mousedown', { x: 0 });
+    fireWithCoord(window, 'mousemove', { x: 1 });
+    fireWithCoord(window, 'mouseup');
 
-    expect( splide.Components.Move.getPosition() ).toBe( 0 );
+    expect(splide.Components.Move.getPosition()).toBe(0);
 
-    fireWithCoord( window, 'mousemove', { x: -200 } );
-    fireWithCoord( window, 'mousemove', { x: -400 } );
+    fireWithCoord(window, 'mousemove', { x: -200 });
+    fireWithCoord(window, 'mousemove', { x: -400 });
 
-    expect( splide.Components.Move.getPosition() ).toBe( 0 );
-  } );
+    expect(splide.Components.Move.getPosition()).toBe(0);
+  });
 
-  test( 'can change the slide index if the drag velocity is enough.', () => {
-    const splide = init( { speed: 0, width: 600 } );
-    const track  = splide.Components.Elements.track;
+  test('can change the slide index if the drag velocity is enough.', () => {
+    const splide = init({ speed: 0, width: 600 });
+    const track = splide.Components.Elements.track;
 
-    fireWithCoord( track, 'mousedown', { x: 0, timeStamp: 1 } );
-    fireWithCoord( window, 'mousemove', { x: 1, timeStamp: 1 } );
-    fireWithCoord( window, 'mousemove', { x: -20, timeStamp: 21 } ); // v = -1
-    fireWithCoord( window, 'mouseup',   { x: -20, timeStamp: 21 } );
+    fireWithCoord(track, 'mousedown', { x: 0, timeStamp: 1 });
+    fireWithCoord(window, 'mousemove', { x: 1, timeStamp: 1 });
+    fireWithCoord(window, 'mousemove', { x: -20, timeStamp: 21 }); // v = -1
+    fireWithCoord(window, 'mouseup', { x: -20, timeStamp: 21 });
 
     // The destination will be flickPower * v + (-20) = -620
-    expect( splide.index ).toBe( 1 );
-  } );
+    expect(splide.index).toBe(1);
+  });
 
-  test( 'should not change the slide index if the drag velocity is not enough.', () => {
-    const splide = init( { speed: 0, width: 600 } );
-    const track  = splide.Components.Elements.track;
+  test('should not change the slide index if the drag velocity is not enough.', () => {
+    const splide = init({ speed: 0, width: 600 });
+    const track = splide.Components.Elements.track;
 
-    fireWithCoord( track, 'mousedown', { x: 0, timeStamp: 1 } );
-    fireWithCoord( window, 'mousemove', { x: 1, timeStamp: 1 } );
-    fireWithCoord( window, 'mousemove', { x: -20, timeStamp: 100 } );
-    fireWithCoord( window, 'mouseup',   { x: -20, timeStamp: 100 } );
+    fireWithCoord(track, 'mousedown', { x: 0, timeStamp: 1 });
+    fireWithCoord(window, 'mousemove', { x: 1, timeStamp: 1 });
+    fireWithCoord(window, 'mousemove', { x: -20, timeStamp: 100 });
+    fireWithCoord(window, 'mouseup', { x: -20, timeStamp: 100 });
 
-    expect( splide.index ).toBe( 0 );
-  } );
+    expect(splide.index).toBe(0);
+  });
 
-  test( 'should start moving the slider immediately if the pointing device is a mouse.', () => {
+  test('should start moving the slider immediately if the pointing device is a mouse.', () => {
     const splide = init();
     const onDrag = jest.fn();
-    const track  = splide.Components.Elements.track;
+    const track = splide.Components.Elements.track;
 
-    splide.on( EVENT_DRAG, onDrag );
+    splide.on(EVENT_DRAG, onDrag);
 
-    fire( track, 'mousedown' );
-    fireWithCoord( window, 'mousemove' );
+    fire(track, 'mousedown');
+    fireWithCoord(window, 'mousemove');
 
-    expect( onDrag ).toHaveBeenCalledTimes( 1 );
-  } );
+    expect(onDrag).toHaveBeenCalledTimes(1);
+  });
 
-  test( 'should start moving the slider only when the drag distance becomes greater than the threshold.', () => {
-    const splide     = init( { dragMinThreshold: 20 } );
+  test('should start moving the slider only when the drag distance becomes greater than the threshold.', () => {
+    const splide = init({ dragMinThreshold: 20 });
     const onDragging = jest.fn();
-    const track      = splide.Components.Elements.track;
+    const track = splide.Components.Elements.track;
 
-    splide.on( EVENT_DRAGGING, onDragging );
+    splide.on(EVENT_DRAGGING, onDragging);
 
-    fireWithCoord( track, 'touchstart', { x: 0 } );
-    fireWithCoord( track, 'touchmove', { x: -10 } );
+    fireWithCoord(track, 'touchstart', { x: 0 });
+    fireWithCoord(track, 'touchmove', { x: -10 });
 
-    expect( onDragging ).not.toHaveBeenCalled();
+    expect(onDragging).not.toHaveBeenCalled();
 
-    fireWithCoord( track, 'touchmove', { x: -30 } ); // isDragging becomes true
-    fireWithCoord( track, 'touchmove', { x: -31 } );
+    fireWithCoord(track, 'touchmove', { x: -30 }); // isDragging becomes true
+    fireWithCoord(track, 'touchmove', { x: -31 });
 
-    expect( onDragging ).toHaveBeenCalled();
-  } );
-} );
+    expect(onDragging).toHaveBeenCalled();
+  });
+});
 
-function fireCancelable( elm: Element | Window, event: string, data: any = {} ): void {
-  fire( elm, event, data, { cancelable: true } );
+function fireCancelable(elm: Element | Window, event: string, data: any = {}): void {
+  fire(elm, event, data, { cancelable: true });
 }
 
-function fireWithCoord( elm: Element | Window, event: string, data: any = {} ): void {
+function fireWithCoord(elm: Element | Window, event: string, data: any = {}): void {
   const { x: pageX = 0, y: pageY = 0 } = data;
 
-  fireCancelable( elm, event, Object.assign( data, {
+  fireCancelable(elm, event, Object.assign(data, {
     pageX,
     pageY,
     touches: [
       { pageX, pageY },
     ],
-  } ) );
+  }));
 }

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

@@ -1,79 +1,79 @@
 import { fire, init, wait } from '../../../test';
 
 
-describe( 'Drag', () => {
-  test( 'can rewind the slider if `rewind` and `rewindByDrag` are enabled.', () => {
-    const splide = init( { speed: 0, rewind: true, rewindByDrag: true } );
-    const track  = splide.Components.Elements.track;
+describe('Drag', () => {
+  test('can rewind the slider if `rewind` and `rewindByDrag` are enabled.', () => {
+    const splide = init({ speed: 0, rewind: true, rewindByDrag: true });
+    const track = splide.Components.Elements.track;
 
-    expect( splide.index ).toBe( 0 );
+    expect(splide.index).toBe(0);
 
     // On the first slide, drags backwards a bit.
-    drag( track, true );
-    expect( splide.index ).toBe( splide.length - 1 );
+    drag(track, true);
+    expect(splide.index).toBe(splide.length - 1);
 
     // On the last slide, drags forwards a bit.
-    drag( track, false ); // Forwards
-    expect( splide.index ).toBe( 0 );
-  } );
+    drag(track, false); // Forwards
+    expect(splide.index).toBe(0);
+  });
 
-  test( 'should not rewind the slider if `rewindByDrag` is disabled.', () => {
-    const splide = init( { speed: 0, rewind: true, rewindByDrag: false } );
-    const track  = splide.Components.Elements.track;
+  test('should not rewind the slider if `rewindByDrag` is disabled.', () => {
+    const splide = init({ speed: 0, rewind: true, rewindByDrag: false });
+    const track = splide.Components.Elements.track;
 
-    expect( splide.index ).toBe( 0 );
+    expect(splide.index).toBe(0);
 
-    drag( track, true );
-    expect( splide.index ).toBe( 0 );
-  } );
+    drag(track, true);
+    expect(splide.index).toBe(0);
+  });
 
-  test( 'should not rewind the slider if `rewind` is disabled.', () => {
-    const splide = init( { speed: 0, rewind: false, rewindByDrag: true } );
-    const track  = splide.Components.Elements.track;
+  test('should not rewind the slider if `rewind` is disabled.', () => {
+    const splide = init({ speed: 0, rewind: false, rewindByDrag: true });
+    const track = splide.Components.Elements.track;
 
-    expect( splide.index ).toBe( 0 );
+    expect(splide.index).toBe(0);
 
-    drag( track, true );
-    expect( splide.index ).toBe( 0 );
-  } );
+    drag(track, true);
+    expect(splide.index).toBe(0);
+  });
 
-  test( 'can rewind the fade slider if `rewind` and `rewindByDrag` are enabled.', async () => {
-    const splide = init( { type: 'fade', speed: 0, rewind: true, rewindByDrag: true } );
-    const track  = splide.Components.Elements.track;
+  test('can rewind the fade slider if `rewind` and `rewindByDrag` are enabled.', async () => {
+    const splide = init({ type: 'fade', speed: 0, rewind: true, rewindByDrag: true });
+    const track = splide.Components.Elements.track;
 
-    expect( splide.index ).toBe( 0 );
+    expect(splide.index).toBe(0);
 
-    drag( track, true );
-    expect( splide.index ).toBe( splide.length - 1 );
+    drag(track, true);
+    expect(splide.index).toBe(splide.length - 1);
 
     await wait(); // Wait `nextTick`.
 
-    drag( track, false );
-    expect( splide.index ).toBe( 0 );
-  } );
-} );
+    drag(track, false);
+    expect(splide.index).toBe(0);
+  });
+});
 
-function fireCancelable( elm: Element | Window, event: string, data: any = {} ): void {
-  fire( elm, event, data, { cancelable: true } );
+function fireCancelable(elm: Element | Window, event: string, data: any = {}): void {
+  fire(elm, event, data, { cancelable: true });
 }
 
-function fireWithCoord( elm: Element | Window, event: string, data: any = {} ): void {
+function fireWithCoord(elm: Element | Window, event: string, data: any = {}): void {
   const { x: pageX = 0, y: pageY = 0 } = data;
 
-  fireCancelable( elm, event, Object.assign( data, {
+  fireCancelable(elm, event, Object.assign(data, {
     pageX,
     pageY,
     touches: [
       { pageX, pageY },
     ],
-  } ) );
+  }));
 }
 
-function drag( track: HTMLElement, backwards?: boolean ): void {
+function drag(track: HTMLElement, backwards?: boolean): void {
   const to = backwards ? 10 : -10;
 
-  fireWithCoord( track, 'mousedown', { x: 0, timeStamp: 1 } );
-  fireWithCoord( window, 'mousemove', { x: 1, timeStamp: 1 } );
-  fireWithCoord( window, 'mousemove', { x: to, timeStamp: 20 } );
-  fireWithCoord( window, 'mouseup', { x: to, timeStamp: 20 } );
+  fireWithCoord(track, 'mousedown', { x: 0, timeStamp: 1 });
+  fireWithCoord(window, 'mousemove', { x: 1, timeStamp: 1 });
+  fireWithCoord(window, 'mousemove', { x: to, timeStamp: 20 });
+  fireWithCoord(window, 'mouseup', { x: to, timeStamp: 20 });
 }

src/js/components/Elements/Elements.ts

@@ -75,7 +75,7 @@ export interface ElementsComponent extends BaseComponent, Readonly<ElementCollec
  *
  * @return An Elements component object.
  */
-export const Elements: ComponentConstructor<ElementsComponent> = ( Splide, Components, options, event ) => {
+export const Elements: ComponentConstructor<ElementsComponent> = (Splide, Components, options, event) => {
   const { on, bind } = event;
   const { root } = Splide;
   const { i18n } = options;
@@ -124,17 +124,17 @@ export const Elements: ComponentConstructor<ElementsComponent> = ( Splide, Compo
    * Called when the component is mounted.
    */
   function mount(): void {
-    on( EVENT_REFRESH, destroy );
-    on( EVENT_REFRESH, setup );
-    on( EVENT_UPDATED, update );
+    on(EVENT_REFRESH, destroy);
+    on(EVENT_REFRESH, setup);
+    on(EVENT_UPDATED, update);
 
-    bind( document, `${ POINTER_DOWN_EVENTS } keydown`, e => {
+    bind(document, `${ POINTER_DOWN_EVENTS } keydown`, e => {
       isUsingKey = e.type === 'keydown';
-    }, { capture: true } );
+    }, { capture: true });
 
-    bind( root, 'focusin', () => {
-      toggleClass( root, CLASS_FOCUS_IN, !! isUsingKey );
-    } );
+    bind(root, 'focusin', () => {
+      toggleClass(root, CLASS_FOCUS_IN, !!isUsingKey);
+    });
   }
 
   /**
@@ -142,55 +142,55 @@ export const Elements: ComponentConstructor<ElementsComponent> = ( Splide, Compo
    *
    * @param completely - Whether to destroy the component completely or not.
    */
-  function destroy( completely?: boolean ): void {
-    const attrs = ALL_ATTRIBUTES.concat( 'style' );
-
-    empty( slides );
-    removeClass( root, rootClasses );
-    removeClass( track, trackClasses );
-    removeAttribute( [ track, list ], attrs );
-    removeAttribute( root, completely ? attrs : [ 'style', ARIA_ROLEDESCRIPTION ] );
+  function destroy(completely?: boolean): void {
+    const attrs = ALL_ATTRIBUTES.concat('style');
+
+    empty(slides);
+    removeClass(root, rootClasses);
+    removeClass(track, trackClasses);
+    removeAttribute([track, list], attrs);
+    removeAttribute(root, completely ? attrs : ['style', ARIA_ROLEDESCRIPTION]);
   }
 
   /**
    * Updates the status of elements.
    */
   function update(): void {
-    removeClass( root, rootClasses );
-    removeClass( track, trackClasses );
+    removeClass(root, rootClasses);
+    removeClass(track, trackClasses);
 
-    rootClasses  = getClasses( CLASS_ROOT );
-    trackClasses = getClasses( CLASS_TRACK );
+    rootClasses = getClasses(CLASS_ROOT);
+    trackClasses = getClasses(CLASS_TRACK);
 
-    addClass( root, rootClasses );
-    addClass( track, trackClasses );
+    addClass(root, rootClasses);
+    addClass(track, trackClasses);
 
-    setAttribute( root, ARIA_LABEL, options.label );
-    setAttribute( root, ARIA_LABELLEDBY, options.labelledby );
+    setAttribute(root, ARIA_LABEL, options.label);
+    setAttribute(root, ARIA_LABELLEDBY, options.labelledby);
   }
 
   /**
    * Collects elements which the slider consists of.
    */
   function collect(): void {
-    track = find( CLASS_TRACK );
-    list  = child( track, `.${ CLASS_LIST }` );
+    track = find(CLASS_TRACK);
+    list = child(track, `.${ CLASS_LIST }`);
 
-    assert( track && list, 'A track/list element is missing.' );
-    push( slides, children( list, `.${ CLASS_SLIDE }:not(.${ CLASS_CLONE })` ) );
+    assert(track && list, 'A track/list element is missing.');
+    push(slides, children(list, `.${ CLASS_SLIDE }:not(.${ CLASS_CLONE })`));
 
-    assign( elements, {
+    assign(elements, {
       root,
       track,
       list,
       slides,
-      arrows    : find( CLASS_ARROWS ),
-      pagination: find( CLASS_PAGINATION ),
-      prev      : find( CLASS_ARROW_PREV ),
-      next      : find( CLASS_ARROW_NEXT ),
-      bar       : find( CLASS_PROGRESS_BAR ),
-      toggle    : find( CLASS_TOGGLE ),
-    } );
+      arrows: find(CLASS_ARROWS),
+      pagination: find(CLASS_PAGINATION),
+      prev: find(CLASS_ARROW_PREV),
+      next: find(CLASS_ARROW_NEXT),
+      bar: find(CLASS_PROGRESS_BAR),
+      toggle: find(CLASS_TOGGLE),
+    });
   }
 
   /**
@@ -200,18 +200,18 @@ export const Elements: ComponentConstructor<ElementsComponent> = ( Splide, Compo
    */
   function init(): void {
     const { role = 'region' } = options;
-    const id = root.id || uniqueId( PROJECT_CODE );
+    const id = root.id || uniqueId(PROJECT_CODE);
 
-    root.id  = id;
+    root.id = id;
     track.id = track.id || `${ id }-track`;
-    list.id  = list.id || `${ id }-list`;
+    list.id = list.id || `${ id }-list`;
 
-    if ( ! getAttribute( root, ROLE ) && root.tagName !== 'SECTION' && role ) {
-      setAttribute( root, ROLE, role );
+    if (!getAttribute(root, ROLE) && root.tagName !== 'SECTION' && role) {
+      setAttribute(root, ROLE, role);
     }
 
-    setAttribute( root, ARIA_ROLEDESCRIPTION, i18n.carousel );
-    setAttribute( list, ROLE, 'presentation' );
+    setAttribute(root, ARIA_ROLEDESCRIPTION, i18n.carousel);
+    setAttribute(list, ROLE, 'presentation');
   }
 
   /**
@@ -221,9 +221,9 @@ export const Elements: ComponentConstructor<ElementsComponent> = ( Splide, Compo
    *
    * @return A found element or null.
    */
-  function find( className: string ): HTMLElement | undefined {
-    const elm = query<HTMLElement>( root, `.${ className }` );
-    return elm && closest( elm, `.${ CLASS_ROOT }` ) === root ? elm : undefined;
+  function find(className: string): HTMLElement | undefined {
+    const elm = query<HTMLElement>(root, `.${ className }`);
+    return elm && closest(elm, `.${ CLASS_ROOT }`) === root ? elm : undefined;
   }
 
   /**
@@ -233,7 +233,7 @@ export const Elements: ComponentConstructor<ElementsComponent> = ( Splide, Compo
    *
    * @return An array with classes.
    */
-  function getClasses( base: string ): string[] {
+  function getClasses(base: string): string[] {
     return [
       `${ base }--${ options.type }`,
       `${ base }--${ options.direction }`,
@@ -243,9 +243,9 @@ export const Elements: ComponentConstructor<ElementsComponent> = ( Splide, Compo
     ];
   }
 
-  return assign( elements, {
+  return assign(elements, {
     setup,
     mount,
     destroy,
-  } );
+  });
 };

src/js/components/Elements/test/attributes.test.ts

@@ -2,57 +2,57 @@ import { ALL_ATTRIBUTES } from '../../../constants/attributes';
 import { buildHtml, init } from '../../../test';
 
 
-describe( 'Elements', () => {
-  test( 'can assign aria attributes.', () => {
+describe('Elements', () => {
+  test('can assign aria attributes.', () => {
     const splide = init();
-    expect( splide.root.getAttribute( 'role' ) ).toBe( 'region' );
-    expect( splide.root.getAttribute( 'aria-roledescription' ) ).toBe( 'carousel' );
-  } );
-
-  test( 'can set a role.', () => {
-    const splide = init( { role: 'navigation' } );
-    expect( splide.root.getAttribute( 'role' ) ).toBe( 'navigation' );
-  } );
-
-  test( 'can set aria-label.', () => {
-    const splide = init( { label: 'Splide carousel' } );
-    expect( splide.root.getAttribute( 'aria-label' ) ).toBe( 'Splide carousel' );
-  } );
-
-  test( 'can set aria-labelledby.', () => {
-    const splide = init( { labelledby: 'heading' } );
-    expect( splide.root.getAttribute( 'aria-labelledby' ) ).toBe( 'heading' );
-  } );
-
-  test( 'can remove assigned attributes.', () => {
-    const splide = init( { keyboard: 'focused' } );
+    expect(splide.root.getAttribute('role')).toBe('region');
+    expect(splide.root.getAttribute('aria-roledescription')).toBe('carousel');
+  });
+
+  test('can set a role.', () => {
+    const splide = init({ role: 'navigation' });
+    expect(splide.root.getAttribute('role')).toBe('navigation');
+  });
+
+  test('can set aria-label.', () => {
+    const splide = init({ label: 'Splide carousel' });
+    expect(splide.root.getAttribute('aria-label')).toBe('Splide carousel');
+  });
+
+  test('can set aria-labelledby.', () => {
+    const splide = init({ labelledby: 'heading' });
+    expect(splide.root.getAttribute('aria-labelledby')).toBe('heading');
+  });
+
+  test('can remove assigned attributes.', () => {
+    const splide = init({ keyboard: 'focused' });
     const { root, track, list } = splide.Components.Elements;
 
     splide.destroy();
 
-    const attributes = ALL_ATTRIBUTES.concat( 'style' );
-    const callback   = jest.fn();
+    const attributes = ALL_ATTRIBUTES.concat('style');
+    const callback = jest.fn();
 
-    [ root, track, list ].forEach( elm => {
-      attributes.forEach( attr => {
-        expect( elm.getAttribute( attr ) ).toBeNull();
+    [root, track, list].forEach(elm => {
+      attributes.forEach(attr => {
+        expect(elm.getAttribute(attr)).toBeNull();
         callback();
-      } );
-    } );
+      });
+    });
 
-    expect( callback ).toHaveBeenCalledTimes( attributes.length * 3 );
-  } );
+    expect(callback).toHaveBeenCalledTimes(attributes.length * 3);
+  });
 
-  test( 'should not assign the role if the root element is section.', () => {
-    const splide = init( {}, { html: buildHtml( { tag: 'section' } ) } );
-    expect( splide.root.getAttribute( 'role' ) ).toBeNull();
-  } );
+  test('should not assign the role if the root element is section.', () => {
+    const splide = init({}, { html: buildHtml({ tag: 'section' }) });
+    expect(splide.root.getAttribute('role')).toBeNull();
+  });
 
-  test( 'should not remove the role attribute by soft destruction.', () => {
+  test('should not remove the role attribute by soft destruction.', () => {
     const splide = init();
-    expect( splide.root.getAttribute( 'role' ) ).toBe( 'region' );
+    expect(splide.root.getAttribute('role')).toBe('region');
 
-    splide.destroy( false );
-    expect( splide.root.getAttribute( 'role' ) ).toBe( 'region' );
-  } );
-} );
+    splide.destroy(false);
+    expect(splide.root.getAttribute('role')).toBe('region');
+  });
+});

src/js/components/Elements/test/focus.test.ts

@@ -2,36 +2,36 @@ import { CLASS_FOCUS_IN } from '../../../constants/classes';
 import { fire, init } from '../../../test';
 
 
-describe( 'Focus', () => {
-  test( 'can add the status class to the root when focus comes into it by a key.', () => {
-    const splide = init( {}, { arrows: true } );
+describe('Focus', () => {
+  test('can add the status class to the root when focus comes into it by a key.', () => {
+    const splide = init({}, { arrows: true });
 
-    fire( document, 'keydown' );
-    fire( splide.root, 'focusin' );
+    fire(document, 'keydown');
+    fire(splide.root, 'focusin');
 
-    expect( splide.root.classList.contains( CLASS_FOCUS_IN ) ).toBe( true );
-  } );
+    expect(splide.root.classList.contains(CLASS_FOCUS_IN)).toBe(true);
+  });
 
-  test( 'can remove the status class from the root when detecting pointerdown.', () => {
-    const splide = init( {}, { arrows: true } );
+  test('can remove the status class from the root when detecting pointerdown.', () => {
+    const splide = init({}, { arrows: true });
 
-    fire( document, 'keydown' );
-    fire( splide.root, 'focusin' );
+    fire(document, 'keydown');
+    fire(splide.root, 'focusin');
 
-    expect( splide.root.classList.contains( CLASS_FOCUS_IN ) ).toBe( true );
+    expect(splide.root.classList.contains(CLASS_FOCUS_IN)).toBe(true);
 
-    fire( splide.root, 'mousedown' );
-    fire( splide.root, 'focusin' );
+    fire(splide.root, 'mousedown');
+    fire(splide.root, 'focusin');
 
-    expect( splide.root.classList.contains( CLASS_FOCUS_IN ) ).toBe( false );
-  } );
+    expect(splide.root.classList.contains(CLASS_FOCUS_IN)).toBe(false);
+  });
 
-  test( 'should not add the status class when focus comes into the root by pointing devices.', () => {
-    const splide = init( {}, { arrows: true } );
+  test('should not add the status class when focus comes into the root by pointing devices.', () => {
+    const splide = init({}, { arrows: true });
 
-    fire( document, 'mousedown' );
-    fire( splide.root, 'focusin' );
+    fire(document, 'mousedown');
+    fire(splide.root, 'focusin');
 
-    expect( splide.root.classList.contains( CLASS_FOCUS_IN ) ).toBe( false );
-  } );
-} );
+    expect(splide.root.classList.contains(CLASS_FOCUS_IN)).toBe(false);
+  });
+});

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

@@ -12,51 +12,51 @@ import { RTL } from '../../../constants/directions';
 import { init } from '../../../test';
 
 
-describe( 'Elements', () => {
-  test( 'can collect essential elements.', () => {
-    const splide = init( {}, { autoplay: true, arrows: true, progress: true } );
+describe('Elements', () => {
+  test('can collect essential elements.', () => {
+    const splide = init({}, { autoplay: true, arrows: true, progress: true });
     const { Elements } = splide.Components;
 
-    expect( Elements.root.classList.contains( CLASS_ROOT ) ).toBe( true );
-    expect( Elements.track.classList.contains( CLASS_TRACK ) ).toBe( true );
-    expect( Elements.list.classList.contains( CLASS_LIST ) ).toBe( true );
-    expect( Elements.slides.length ).toBe( splide.length );
-    expect( Elements.prev.classList.contains( CLASS_ARROW_PREV ) ).toBe( true );
-    expect( Elements.next.classList.contains( CLASS_ARROW_NEXT ) ).toBe( true );
-    expect( Elements.bar.classList.contains( CLASS_PROGRESS_BAR ) ).toBe( true );
-    expect( Elements.toggle.classList.contains( CLASS_TOGGLE ) ).toBe( true );
-  } );
+    expect(Elements.root.classList.contains(CLASS_ROOT)).toBe(true);
+    expect(Elements.track.classList.contains(CLASS_TRACK)).toBe(true);
+    expect(Elements.list.classList.contains(CLASS_LIST)).toBe(true);
+    expect(Elements.slides.length).toBe(splide.length);
+    expect(Elements.prev.classList.contains(CLASS_ARROW_PREV)).toBe(true);
+    expect(Elements.next.classList.contains(CLASS_ARROW_NEXT)).toBe(true);
+    expect(Elements.bar.classList.contains(CLASS_PROGRESS_BAR)).toBe(true);
+    expect(Elements.toggle.classList.contains(CLASS_TOGGLE)).toBe(true);
+  });
 
-  test( 'can assign unique IDs to root, track and list elements.', () => {
-    const splide = init( {}, { autoplay: true, arrows: true, progress: true } );
+  test('can assign unique IDs to root, track and list elements.', () => {
+    const splide = init({}, { autoplay: true, arrows: true, progress: true });
     const { Elements } = splide.Components;
     const { id } = Elements.root;
 
-    expect( id ).not.toBe( '' );
-    expect( Elements.track.id ).toBe( `${ id }-track` );
-    expect( Elements.list.id ).toBe( `${ id }-list` );
-  } );
+    expect(id).not.toBe('');
+    expect(Elements.track.id).toBe(`${ id }-track`);
+    expect(Elements.list.id).toBe(`${ id }-list`);
+  });
 
-  test( 'can add classes to root element.', () => {
-    const splide = init( { type: 'loop', direction: RTL, isNavigation: true } );
+  test('can add classes to root element.', () => {
+    const splide = init({ type: 'loop', direction: RTL, isNavigation: true });
     const { classList } = splide.root;
-    const contains = classList.contains.bind( classList );
+    const contains = classList.contains.bind(classList);
 
-    expect( contains( `${ CLASS_ROOT }--loop` ) ).toBe( true );
-    expect( contains( `${ CLASS_ROOT }--slide` ) ).toBe( false );
-    expect( contains( `${ CLASS_ROOT }--fade` ) ).toBe( false );
+    expect(contains(`${ CLASS_ROOT }--loop`)).toBe(true);
+    expect(contains(`${ CLASS_ROOT }--slide`)).toBe(false);
+    expect(contains(`${ CLASS_ROOT }--fade`)).toBe(false);
 
-    expect( contains( `${ CLASS_ROOT }--rtl` ) ).toBe( true );
-    expect( contains( `${ CLASS_ROOT }--ltr` ) ).toBe( false );
-    expect( contains( `${ CLASS_ROOT }--ttb` ) ).toBe( false );
+    expect(contains(`${ CLASS_ROOT }--rtl`)).toBe(true);
+    expect(contains(`${ CLASS_ROOT }--ltr`)).toBe(false);
+    expect(contains(`${ CLASS_ROOT }--ttb`)).toBe(false);
 
-    expect( contains( `${ CLASS_ROOT }--draggable` ) ).toBe( true );
-    expect( contains( `${ CLASS_ROOT }--nav` ) ).toBe( true );
+    expect(contains(`${ CLASS_ROOT }--draggable`)).toBe(true);
+    expect(contains(`${ CLASS_ROOT }--nav`)).toBe(true);
 
-    expect( contains( CLASS_ACTIVE ) ).toBe( true );
-  } );
+    expect(contains(CLASS_ACTIVE)).toBe(true);
+  });
 
-  test( 'should not collect nested slider elements.', () => {
+  test('should not collect nested slider elements.', () => {
     const html = `
       <div class="splide">
         <div class="splide__track">
@@ -76,11 +76,11 @@ describe( 'Elements', () => {
       </div>
     `;
 
-    const splide = init( {}, { html } );
+    const splide = init({}, { html });
     const { Elements } = splide.Components;
 
-    expect( Elements.track.id ).not.toBe( 'nested-splide-track' );
-    expect( Elements.list.id ).not.toBe( 'nested-splide-list' );
-    expect( Elements.slides.length ).toBe( 1 );
-  } );
-} );
+    expect(Elements.track.id).not.toBe('nested-splide-track');
+    expect(Elements.list.id).not.toBe('nested-splide-list');
+    expect(Elements.slides.length).toBe(1);
+  });
+});

src/js/components/Keyboard/Keyboard.ts

@@ -10,7 +10,7 @@ import { prevent } from '../../../../../utils';
  * @since 3.0.0
  */
 export interface KeyboardComponent extends BaseComponent {
-  disable( disabled: boolean ): void;
+  disable(disabled: boolean): void;
 }
 
 /**
@@ -32,7 +32,7 @@ const KEYBOARD_EVENT = 'keydown';
  *
  * @return A Keyboard component object.
  */
-export const Keyboard: ComponentConstructor<KeyboardComponent> = ( Splide, Components, options, event ) => {
+export const Keyboard: ComponentConstructor<KeyboardComponent> = (Splide, Components, options, event) => {
   const { destroy } = event;
   const { resolve } = Components.Direction;
 
@@ -43,8 +43,8 @@ export const Keyboard: ComponentConstructor<KeyboardComponent> = ( Splide, Compo
     const { keyboard } = options;
 
     destroy();
-    keyboard && event.bind( keyboard === 'global' ? window : Splide.root, KEYBOARD_EVENT, onKeydown );
-    event.on( EVENT_UPDATED, mount );
+    keyboard && event.bind(keyboard === 'global' ? window : Splide.root, KEYBOARD_EVENT, onKeydown);
+    event.on(EVENT_UPDATED, mount);
   }
 
   /**
@@ -52,7 +52,7 @@ export const Keyboard: ComponentConstructor<KeyboardComponent> = ( Splide, Compo
    *
    * @param value - Toggles disabling/enabling the keyboard input.
    */
-  function disable( value: boolean ): void {
+  function disable(value: boolean): void {
     value ? destroy() : mount();
   }
 
@@ -61,13 +61,13 @@ export const Keyboard: ComponentConstructor<KeyboardComponent> = ( Splide, Compo
    *
    * @param e - A KeyboardEvent object.
    */
-  function onKeydown( e: KeyboardEvent ): void {
-    if ( e.key === resolve( ARROW_LEFT ) ) {
-      Splide.go( '<' );
-      prevent( e, true );
-    } else if ( e.key === resolve( ARROW_RIGHT ) ) {
-      Splide.go( '>' );
-      prevent( e, true );
+  function onKeydown(e: KeyboardEvent): void {
+    if (e.key === resolve(ARROW_LEFT)) {
+      Splide.go('<');
+      prevent(e, true);
+    } else if (e.key === resolve(ARROW_RIGHT)) {
+      Splide.go('>');
+      prevent(e, true);
     }
   }
 

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

@@ -2,85 +2,85 @@ import { RTL, TTB } from '../../../constants/directions';
 import { init, keydown, wait } from '../../../test';
 
 
-describe( 'Keyboard', () => {
-  test( 'can control the slider by keyboards.', async () => {
-    const splide = init( { speed: 0, keyboard: 'global' } );
+describe('Keyboard', () => {
+  test('can control the slider by keyboards.', async () => {
+    const splide = init({ speed: 0, keyboard: 'global' });
 
-    keydown( 'ArrowRight' );
-    expect( splide.index ).toBe( 1 );
+    keydown('ArrowRight');
+    expect(splide.index).toBe(1);
 
     await wait();
 
-    keydown( 'ArrowRight' );
-    expect( splide.index ).toBe( 2 );
+    keydown('ArrowRight');
+    expect(splide.index).toBe(2);
 
     await wait();
 
-    keydown( 'ArrowLeft' );
-    expect( splide.index ).toBe( 1 );
+    keydown('ArrowLeft');
+    expect(splide.index).toBe(1);
 
     await wait();
 
-    keydown( 'ArrowLeft' );
-    expect( splide.index ).toBe( 0 );
+    keydown('ArrowLeft');
+    expect(splide.index).toBe(0);
 
     splide.destroy();
-  } );
+  });
 
-  test( 'can control the slider by keyboards in TTB mode.', async () => {
-    const splide = init( { direction: TTB, height: 1, speed: 0, keyboard: 'global' } );
+  test('can control the slider by keyboards in TTB mode.', async () => {
+    const splide = init({ direction: TTB, height: 1, speed: 0, keyboard: 'global' });
 
-    keydown( 'ArrowDown' );
-    expect( splide.index ).toBe( 1 );
+    keydown('ArrowDown');
+    expect(splide.index).toBe(1);
 
     await wait();
 
-    keydown( 'ArrowDown' );
-    expect( splide.index ).toBe( 2 );
+    keydown('ArrowDown');
+    expect(splide.index).toBe(2);
 
     await wait();
 
-    keydown( 'ArrowUp' );
-    expect( splide.index ).toBe( 1 );
+    keydown('ArrowUp');
+    expect(splide.index).toBe(1);
 
     await wait();
 
-    keydown( 'ArrowUp' );
-    expect( splide.index ).toBe( 0 );
+    keydown('ArrowUp');
+    expect(splide.index).toBe(0);
 
     splide.destroy();
-  } );
+  });
 
-  test( 'can control the slider by keyboards in RTL mode.', async () => {
-    const splide = init( { direction: RTL, speed: 0, keyboard: 'global' } );
+  test('can control the slider by keyboards in RTL mode.', async () => {
+    const splide = init({ direction: RTL, speed: 0, keyboard: 'global' });
 
-    keydown( 'ArrowLeft' );
-    expect( splide.index ).toBe( 1 );
+    keydown('ArrowLeft');
+    expect(splide.index).toBe(1);
 
     await wait();
 
-    keydown( 'ArrowLeft' );
-    expect( splide.index ).toBe( 2 );
+    keydown('ArrowLeft');
+    expect(splide.index).toBe(2);
 
     await wait();
 
-    keydown( 'ArrowRight' );
-    expect( splide.index ).toBe( 1 );
+    keydown('ArrowRight');
+    expect(splide.index).toBe(1);
 
     await wait();
 
-    keydown( 'ArrowRight' );
-    expect( splide.index ).toBe( 0 );
+    keydown('ArrowRight');
+    expect(splide.index).toBe(0);
 
     splide.destroy();
-  } );
+  });
 
-  test( 'can control the slider by keyboards only when the slider has focus in the `focused` mode.', async () => {
-    const splide = init( { keyboard: 'focused', speed: 0 } );
+  test('can control the slider by keyboards only when the slider has focus in the `focused` mode.', async () => {
+    const splide = init({ keyboard: 'focused', speed: 0 });
     const { root } = splide;
 
-    keydown( 'ArrowRight' );
-    expect( splide.index ).toBe( 0 );
+    keydown('ArrowRight');
+    expect(splide.index).toBe(0);
 
     await wait();
 
@@ -88,38 +88,38 @@ describe( 'Keyboard', () => {
 
     await wait();
 
-    keydown( 'ArrowRight', root );
-    expect( splide.index ).toBe( 1 );
+    keydown('ArrowRight', root);
+    expect(splide.index).toBe(1);
 
     splide.destroy();
-  } );
+  });
 
-  test( 'can disable the keyboard input.', async () => {
-    const splide = init( { speed: 0, keyboard: 'global' } );
+  test('can disable the keyboard input.', async () => {
+    const splide = init({ speed: 0, keyboard: 'global' });
     const { disable } = splide.Components.Keyboard;
 
-    keydown( 'ArrowRight' );
-    expect( splide.index ).toBe( 1 );
+    keydown('ArrowRight');
+    expect(splide.index).toBe(1);
 
     await wait();
 
-    disable( true );
+    disable(true);
 
-    keydown( 'ArrowRight' );
-    expect( splide.index ).toBe( 1 );
+    keydown('ArrowRight');
+    expect(splide.index).toBe(1);
 
     await wait();
 
-    keydown( 'ArrowLeft' );
-    expect( splide.index ).toBe( 1 );
+    keydown('ArrowLeft');
+    expect(splide.index).toBe(1);
 
     await wait();
 
-    disable( false );
+    disable(false);
 
-    keydown( 'ArrowLeft' );
-    expect( splide.index ).toBe( 0 );
+    keydown('ArrowLeft');
+    expect(splide.index).toBe(0);
 
     splide.destroy();
-  } );
-} );
+  });
+});

src/js/components/Layout/Layout.ts

@@ -14,15 +14,15 @@ import { CLASS_OVERFLOW } from '../../constants/classes';
  */
 export interface LayoutComponent extends BaseComponent {
   trackSize(): number;
-  listSize( full?: boolean ): number;
-  slideSize( index: number, withoutGap?: boolean ): number;
-  sliderSize( withoutGap?: boolean ): number;
-  totalSize( index?: number, withoutGap?: boolean ): number;
-  getPadding( right: boolean ): number;
+  listSize(full?: boolean): number;
+  slideSize(index: number, withoutGap?: boolean): number;
+  sliderSize(withoutGap?: boolean): number;
+  totalSize(index?: number, withoutGap?: boolean): number;
+  getPadding(right: boolean): number;
   isOverflow(): boolean;
 
   /** @internal */
-  resize( force?: boolean ): void;
+  resize(force?: boolean): void;
 }
 
 /**
@@ -37,7 +37,7 @@ export interface LayoutComponent extends BaseComponent {
  *
  * @return An Layout component object.
  */
-export const Layout: ComponentConstructor<LayoutComponent> = ( Splide, Components, options, event ) => {
+export const Layout: ComponentConstructor<LayoutComponent> = (Splide, Components, options, event) => {
   const { on, bind, emit } = event;
   const { Slides } = Components;
   const { resolve, left, right, width } = Components.Direction;
@@ -64,9 +64,9 @@ export const Layout: ComponentConstructor<LayoutComponent> = ( Splide, Component
    */
   function mount(): void {
     init();
-    bind( window, 'resize load', Throttle( apply( emit, EVENT_RESIZE ) ) );
-    on( [ EVENT_UPDATED, EVENT_REFRESH ], init );
-    on( EVENT_RESIZE, resize );
+    bind(window, 'resize load', Throttle(apply(emit, EVENT_RESIZE)));
+    on([EVENT_UPDATED, EVENT_REFRESH], init);
+    on(EVENT_RESIZE, resize);
   }
 
   /**
@@ -76,11 +76,11 @@ export const Layout: ComponentConstructor<LayoutComponent> = ( Splide, Component
   function init(): void {
     vertical = options.direction === TTB;
 
-    style( root, 'maxWidth', unit( options.width ) );
-    style( track, resolve( 'paddingLeft' ), cssPadding( false ) );
-    style( track, resolve( 'paddingRight' ), cssPadding( true ) );
+    style(root, 'maxWidth', unit(options.width));
+    style(track, resolve('paddingLeft'), cssPadding(false));
+    style(track, resolve('paddingRight'), cssPadding(true));
 
-    resize( true );
+    resize(true);
   }
 
   /**
@@ -89,22 +89,22 @@ export const Layout: ComponentConstructor<LayoutComponent> = ( Splide, Component
    *
    * @param force - Skips checking the root dimension change and always performs the resizing process.
    */
-  function resize( force?: boolean ): void {
-    const newRect = rect( root );
+  function resize(force?: boolean): void {
+    const newRect = rect(root);
 
-    if ( force || rootRect.width !== newRect.width || rootRect.height !== newRect.height ) {
-      style( track, 'height', cssTrackHeight() );
+    if (force || rootRect.width !== newRect.width || rootRect.height !== newRect.height) {
+      style(track, 'height', cssTrackHeight());
 
-      styleSlides( resolve( 'marginRight' ), unit( options.gap ) );
-      styleSlides( 'width', cssSlideWidth() );
-      styleSlides( 'height', cssSlideHeight(), true );
+      styleSlides(resolve('marginRight'), unit(options.gap));
+      styleSlides('width', cssSlideWidth());
+      styleSlides('height', cssSlideHeight(), true);
 
       rootRect = newRect;
-      emit( EVENT_RESIZED );
+      emit(EVENT_RESIZED);
 
-      if ( overflow !== ( overflow = isOverflow() ) ) {
-        toggleClass( root, CLASS_OVERFLOW, overflow );
-        emit( EVENT_OVERFLOW, overflow );
+      if (overflow !== (overflow = isOverflow())) {
+        toggleClass(root, CLASS_OVERFLOW, overflow);
+        emit(EVENT_OVERFLOW, overflow);
       }
     }
   }
@@ -117,11 +117,11 @@ export const Layout: ComponentConstructor<LayoutComponent> = ( Splide, Component
    *
    * @return The padding value as a CSS string.
    */
-  function cssPadding( rightPadding: boolean ): string {
+  function cssPadding(rightPadding: boolean): string {
     const { padding } = options;
     const prop = rightPadding ? right() : left();
     return padding
-      && unit( padding[ prop ] || ( isObject( padding ) ? 0 : padding ) )
+      && unit(padding[prop] || (isObject(padding) ? 0 : padding))
       || '0px';
   }
 
@@ -133,10 +133,10 @@ export const Layout: ComponentConstructor<LayoutComponent> = ( Splide, Component
   function cssTrackHeight(): string {
     let height = '';
 
-    if ( vertical ) {
+    if (vertical) {
       height = cssHeight();
-      assert( height, 'height or heightRatio is missing.' );
-      height = `calc(${ height } - ${ cssPadding( false ) } - ${ cssPadding( true ) })`;
+      assert(height, 'height or heightRatio is missing.');
+      height = `calc(${ height } - ${ cssPadding(false) } - ${ cssPadding(true) })`;
     }
 
     return height;
@@ -148,7 +148,7 @@ export const Layout: ComponentConstructor<LayoutComponent> = ( Splide, Component
    * @return The height as a CSS string if available, or otherwise an empty string.
    */
   function cssHeight(): string {
-    return unit( options.height || rect( list ).width * options.heightRatio );
+    return unit(options.height || rect(list).width * options.heightRatio);
   }
 
   /**
@@ -159,7 +159,7 @@ export const Layout: ComponentConstructor<LayoutComponent> = ( Splide, Component
   function cssSlideWidth(): string | null {
     return options.autoWidth
       ? null
-      : unit( options.fixedWidth ) || ( vertical ? '' : cssSlideSize() );
+      : unit(options.fixedWidth) || (vertical ? '' : cssSlideSize());
   }
 
   /**
@@ -168,8 +168,8 @@ export const Layout: ComponentConstructor<LayoutComponent> = ( Splide, Component
    * @return The height of the slide.
    */
   function cssSlideHeight(): string | null {
-    return unit( options.fixedHeight )
-      || ( vertical ? ( options.autoHeight ? null : cssSlideSize() ) : cssHeight() );
+    return unit(options.fixedHeight)
+      || (vertical ? (options.autoHeight ? null : cssSlideSize()) : cssHeight());
   }
 
   /**
@@ -178,7 +178,7 @@ export const Layout: ComponentConstructor<LayoutComponent> = ( Splide, Component
    * @return The CSS string for slide width or height.
    */
   function cssSlideSize(): string {
-    const gap = unit( options.gap );
+    const gap = unit(options.gap);
     return `calc((100%${ gap && ` + ${ gap }` })/${ options.perPage || 1 }${ gap && ` - ${ gap }` })`;
   }
 
@@ -188,7 +188,7 @@ export const Layout: ComponentConstructor<LayoutComponent> = ( Splide, Component
    * @return The size of the track element in pixel.
    */
   function trackSize(): number {
-    return rect( track )[ width() ];
+    return rect(track)[width()];
   }
 
   /**
@@ -198,8 +198,8 @@ export const Layout: ComponentConstructor<LayoutComponent> = ( Splide, Component
    *
    * @return The size of the list element in pixel.
    */
-  function listSize( full?: boolean ): number {
-    return full ? list[ resolve( 'scrollWidth' ) ] : rect( list )[ width() ];
+  function listSize(full?: boolean): number {
+    return full ? list[resolve('scrollWidth')] : rect(list)[width()];
   }
 
   /**
@@ -210,9 +210,9 @@ export const Layout: ComponentConstructor<LayoutComponent> = ( Splide, Component
    *
    * @return The size of the specified slide element in pixel.
    */
-  function slideSize( index = 0, withoutGap?: boolean ): number {
-    const slide = getAt( index );
-    return ( slide ? rect( slide.slide )[ width() ] : 0 ) + ( withoutGap ? 0 : getGap() );
+  function slideSize(index = 0, withoutGap?: boolean): number {
+    const slide = getAt(index);
+    return (slide ? rect(slide.slide)[width()] : 0) + (withoutGap ? 0 : getGap());
   }
 
   /**
@@ -224,11 +224,11 @@ export const Layout: ComponentConstructor<LayoutComponent> = ( Splide, Component
    *
    * @return The total width of slides in the horizontal slider, or the height in the vertical one.
    */
-  function totalSize( index: number, withoutGap?: boolean ): number {
-    const first  = Components.Slides.get()[ 0 ];
-    const target = getAt( index );
+  function totalSize(index: number, withoutGap?: boolean): number {
+    const first = Components.Slides.get()[0];
+    const target = getAt(index);
     return first && target
-      ? abs( rect( target.slide )[ right() ] - rect( first.slide )[ left() ] ) + ( withoutGap ? 0 : getGap() )
+      ? abs(rect(target.slide)[right()] - rect(first.slide)[left()]) + (withoutGap ? 0 : getGap())
       : 0;
   }
 
@@ -240,8 +240,8 @@ export const Layout: ComponentConstructor<LayoutComponent> = ( Splide, Component
    *
    * @return The width or height of the slider without clones.
    */
-  function sliderSize( withoutGap?: boolean ): number {
-    return totalSize( Splide.length - 1 ) - totalSize( 0 ) + slideSize( 0, withoutGap );
+  function sliderSize(withoutGap?: boolean): number {
+    return totalSize(Splide.length - 1) - totalSize(0) + slideSize(0, withoutGap);
   }
 
   /**
@@ -252,12 +252,12 @@ export const Layout: ComponentConstructor<LayoutComponent> = ( Splide, Component
    * @return The gap value in pixel.
    */
   function getGap(): number {
-    const first  = getAt( 0 );
-    const second = getAt( 1 );
+    const first = getAt(0);
+    const second = getAt(1);
 
-    if ( first && second ) {
-      const firstRect = rect( first.slide );
-      return abs( rect( second.slide )[ left() ] - firstRect[ left() ] ) - firstRect[ width() ];
+    if (first && second) {
+      const firstRect = rect(first.slide);
+      return abs(rect(second.slide)[left()] - firstRect[left()]) - firstRect[width()];
     }
 
     return 0;
@@ -271,11 +271,11 @@ export const Layout: ComponentConstructor<LayoutComponent> = ( Splide, Component
    *
    * @return The padding value in pixel.
    */
-  function getPadding( right: boolean ): number {
-    return parseFloat( style(
+  function getPadding(right: boolean): number {
+    return parseFloat(style(
       track,
-      resolve( `padding${ right ? 'Right' : 'Left' }` )
-    ) ) || 0;
+      resolve(`padding${ right ? 'Right' : 'Left' }`),
+    )) || 0;
   }
 
   /**
@@ -285,7 +285,7 @@ export const Layout: ComponentConstructor<LayoutComponent> = ( Splide, Component
    * @return `true` if the carousel is wider than the list, or otherwise `false`.
    */
   function isOverflow(): boolean {
-    return Splide.is( FADE ) || sliderSize( true ) > listSize();
+    return Splide.is(FADE) || sliderSize(true) > listSize();
   }
 
   return {

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

@@ -2,52 +2,52 @@ import { EVENT_RESIZE } from '../../../constants/events';
 import { init } from '../../../test';
 
 
-describe( 'Layout', () => {
-  test( 'can set the max width of the slider.', () => {
-    const splide = init( { width: 100 } );
+describe('Layout', () => {
+  test('can set the max width of the slider.', () => {
+    const splide = init({ width: 100 });
 
-    expect( splide.root.style.maxWidth ).toBe( '100px' );
+    expect(splide.root.style.maxWidth).toBe('100px');
     splide.destroy();
-  } );
+  });
 
-  test( 'should init the component again when options are updated.', () => {
-    const splide = init( { width: 100 } );
-    const style  = splide.root.style;
+  test('should init the component again when options are updated.', () => {
+    const splide = init({ width: 100 });
+    const style = splide.root.style;
 
-    expect( style.maxWidth ).toBe( '100px' );
+    expect(style.maxWidth).toBe('100px');
 
     splide.options = { width: 200 };
 
-    expect( style.maxWidth ).toBe( '200px' );
+    expect(style.maxWidth).toBe('200px');
 
     splide.destroy();
-  } );
+  });
 
-  test( 'should init the component again when the splide is refreshed.', () => {
-    const splide = init( { width: 100 } );
-    const style  = splide.root.style;
+  test('should init the component again when the splide is refreshed.', () => {
+    const splide = init({ width: 100 });
+    const style = splide.root.style;
 
-    expect( style.maxWidth ).toBe( '100px' );
+    expect(style.maxWidth).toBe('100px');
 
     splide.options = { width: 200 };
     splide.refresh();
 
-    expect( style.maxWidth ).toBe( '200px' );
+    expect(style.maxWidth).toBe('200px');
 
     splide.destroy();
-  } );
+  });
 
-  test( 'should update the slide height when the window is resized.', () => {
-    const splide = init( { width: 1000, heightRatio: 0.5 } );
-    const style  = splide.Components.Elements.slides[ 0 ].style;
+  test('should update the slide height when the window is resized.', () => {
+    const splide = init({ width: 1000, heightRatio: 0.5 });
+    const style = splide.Components.Elements.slides[0].style;
 
-    expect( style.height ).toBe( '500px' );
+    expect(style.height).toBe('500px');
 
     splide.options = { heightRatio: 0.2 };
-    splide.emit( EVENT_RESIZE );
+    splide.emit(EVENT_RESIZE);
 
-    expect( style.height ).toBe( '200px' );
+    expect(style.height).toBe('200px');
 
     splide.destroy();
-  } );
-} );
+  });
+});

src/js/components/Layout/test/ltr.test.ts

@@ -2,103 +2,103 @@ import { init } from '../../../test';
 import { SLIDER_WIDTH } from '../../../test/fixtures/constants';
 
 
-describe( 'Layout in the LTR mode', () => {
-  test( 'can set paddings to the track element.', () => {
-    const splide1 = init( { padding: '2rem' } );
-    const track1  = splide1.Components.Elements.track;
+describe('Layout in the LTR mode', () => {
+  test('can set paddings to the track element.', () => {
+    const splide1 = init({ padding: '2rem' });
+    const track1 = splide1.Components.Elements.track;
 
-    expect( track1.style.paddingLeft ).toBe( '2rem' );
-    expect( track1.style.paddingRight ).toBe( '2rem' );
+    expect(track1.style.paddingLeft).toBe('2rem');
+    expect(track1.style.paddingRight).toBe('2rem');
     splide1.destroy();
 
-    const splide2 = init( { padding: { left: '4%', right: '5%' } } );
-    const track2  = splide2.Components.Elements.track;
+    const splide2 = init({ padding: { left: '4%', right: '5%' } });
+    const track2 = splide2.Components.Elements.track;
 
-    expect( track2.style.paddingLeft ).toBe( '4%' );
-    expect( track2.style.paddingRight ).toBe( '5%' );
+    expect(track2.style.paddingLeft).toBe('4%');
+    expect(track2.style.paddingRight).toBe('5%');
     splide2.destroy();
 
-    const splide3 = init( { padding: { left: '4%' } } );
-    const track3  = splide3.Components.Elements.track;
+    const splide3 = init({ padding: { left: '4%' } });
+    const track3 = splide3.Components.Elements.track;
 
-    expect( track3.style.paddingLeft ).toBe( '4%' );
-    expect( track3.style.paddingRight ).toBe( '0px' );
+    expect(track3.style.paddingLeft).toBe('4%');
+    expect(track3.style.paddingRight).toBe('0px');
     splide3.destroy();
-  } );
+  });
 
-  test( 'can set margin as a gap.', () => {
-    const splide = init( { gap: '2rem' } );
+  test('can set margin as a gap.', () => {
+    const splide = init({ gap: '2rem' });
     const slides = splide.Components.Elements.slides;
 
-    expect( slides[ 0 ].style.marginRight ).toBe( '2rem' );
-    expect( slides[ 1 ].style.marginRight ).toBe( '2rem' );
+    expect(slides[0].style.marginRight).toBe('2rem');
+    expect(slides[1].style.marginRight).toBe('2rem');
     splide.destroy();
-  } );
+  });
 
-  test( 'can fix the slide width.', () => {
-    const splide = init( { fixedWidth: 100 } );
+  test('can fix the slide width.', () => {
+    const splide = init({ fixedWidth: 100 });
 
-    expect( splide.Components.Elements.slides[ 0 ].style.width ).toBe( '100px' );
-    expect( splide.Components.Elements.slides[ 1 ].style.width ).toBe( '100px' );
+    expect(splide.Components.Elements.slides[0].style.width).toBe('100px');
+    expect(splide.Components.Elements.slides[1].style.width).toBe('100px');
     splide.destroy();
-  } );
+  });
 
-  test( 'can set the slide height.', () => {
-    const splide = init( { height: '10rem' } );
+  test('can set the slide height.', () => {
+    const splide = init({ height: '10rem' });
 
-    expect( splide.Components.Elements.slides[ 0 ].style.height ).toBe( '10rem' );
-    expect( splide.Components.Elements.slides[ 1 ].style.height ).toBe( '10rem' );
+    expect(splide.Components.Elements.slides[0].style.height).toBe('10rem');
+    expect(splide.Components.Elements.slides[1].style.height).toBe('10rem');
     splide.destroy();
-  } );
+  });
 
-  test( 'can set the slide height by ratio against the slider width.', () => {
-    const splide = init( { width: 500, heightRatio: 0.5 } );
+  test('can set the slide height by ratio against the slider width.', () => {
+    const splide = init({ width: 500, heightRatio: 0.5 });
 
-    expect( splide.Components.Elements.slides[ 0 ].style.height ).toBe( '250px' );
-    expect( splide.Components.Elements.slides[ 1 ].style.height ).toBe( '250px' );
+    expect(splide.Components.Elements.slides[0].style.height).toBe('250px');
+    expect(splide.Components.Elements.slides[1].style.height).toBe('250px');
     splide.destroy();
-  } );
+  });
 
-  test( 'can fix the slide height.', () => {
-    const splide = init( { fixedHeight: 100 } );
+  test('can fix the slide height.', () => {
+    const splide = init({ fixedHeight: 100 });
 
-    expect( splide.Components.Elements.slides[ 0 ].style.height ).toBe( '100px' );
-    expect( splide.Components.Elements.slides[ 1 ].style.height ).toBe( '100px' );
+    expect(splide.Components.Elements.slides[0].style.height).toBe('100px');
+    expect(splide.Components.Elements.slides[1].style.height).toBe('100px');
     splide.destroy();
-  } );
+  });
 
-  test( 'should not set the slide width when the autoWidth is true.', () => {
-    const splide = init( { autoWidth: true } );
+  test('should not set the slide width when the autoWidth is true.', () => {
+    const splide = init({ autoWidth: true });
 
-    expect( splide.Components.Elements.slides[ 0 ].style.width ).toBe( '' );
-    expect( splide.Components.Elements.slides[ 1 ].style.width ).toBe( '' );
+    expect(splide.Components.Elements.slides[0].style.width).toBe('');
+    expect(splide.Components.Elements.slides[1].style.width).toBe('');
     splide.destroy();
-  } );
+  });
 
-  test( 'can provide the list width.', () => {
-    const splide = init( { width: 100 } );
-    expect( splide.Components.Layout.listSize() ).toBe( 100 );
+  test('can provide the list width.', () => {
+    const splide = init({ width: 100 });
+    expect(splide.Components.Layout.listSize()).toBe(100);
     splide.destroy();
-  } );
+  });
 
-  test( 'can provide the slide width.', () => {
+  test('can provide the slide width.', () => {
     const splide1 = init();
 
-    expect( splide1.Components.Layout.slideSize( 0 ) ).toBe( SLIDER_WIDTH );
-    expect( splide1.Components.Layout.slideSize( 1 ) ).toBe( SLIDER_WIDTH );
+    expect(splide1.Components.Layout.slideSize(0)).toBe(SLIDER_WIDTH);
+    expect(splide1.Components.Layout.slideSize(1)).toBe(SLIDER_WIDTH);
     splide1.destroy();
 
-    const splide2 = init( { perPage: 2 } );
+    const splide2 = init({ perPage: 2 });
 
-    expect( splide2.Components.Layout.slideSize( 0 ) ).toBe( SLIDER_WIDTH / 2 );
-    expect( splide2.Components.Layout.slideSize( 1 ) ).toBe( SLIDER_WIDTH / 2 );
+    expect(splide2.Components.Layout.slideSize(0)).toBe(SLIDER_WIDTH / 2);
+    expect(splide2.Components.Layout.slideSize(1)).toBe(SLIDER_WIDTH / 2);
     splide2.destroy();
-  } );
+  });
 
-  test( 'should not set the track width.', () => {
-    const splide = init( { height: 100 } );
+  test('should not set the track width.', () => {
+    const splide = init({ height: 100 });
 
-    expect( splide.Components.Elements.track.style.height ).toBe( '' );
+    expect(splide.Components.Elements.track.style.height).toBe('');
     splide.destroy();
-  } );
-} );
+  });
+});

src/js/components/Layout/test/rtl.test.ts

@@ -2,12 +2,12 @@ import { RTL } from '../../../constants/directions';
 import { init } from '../../../test';
 
 
-describe( 'Layout in the RTL mode', () => {
-  test( 'can set margin as a gap.', () => {
-    const splide = init( { direction: RTL, gap: '2rem' } );
+describe('Layout in the RTL mode', () => {
+  test('can set margin as a gap.', () => {
+    const splide = init({ direction: RTL, gap: '2rem' });
 
-    expect( splide.Components.Elements.slides[ 0 ].style.marginLeft ).toBe( '2rem' );
-    expect( splide.Components.Elements.slides[ 1 ].style.marginLeft ).toBe( '2rem' );
+    expect(splide.Components.Elements.slides[0].style.marginLeft).toBe('2rem');
+    expect(splide.Components.Elements.slides[1].style.marginLeft).toBe('2rem');
     splide.destroy();
-  } );
-} );
+  });
+});

src/js/components/Layout/test/ttb.test.ts

@@ -2,91 +2,91 @@ import { TTB } from '../../../constants/directions';
 import { init } from '../../../test';
 
 
-describe( 'Layout in the TTB mode', () => {
-  test( 'can set paddings to the track element.', () => {
-    const splide1 = init( { height: 100, direction: TTB, padding: '2rem' } );
-    const track1  = splide1.Components.Elements.track;
+describe('Layout in the TTB mode', () => {
+  test('can set paddings to the track element.', () => {
+    const splide1 = init({ height: 100, direction: TTB, padding: '2rem' });
+    const track1 = splide1.Components.Elements.track;
 
-    expect( track1.style.paddingTop ).toBe( '2rem' );
-    expect( track1.style.paddingBottom ).toBe( '2rem' );
+    expect(track1.style.paddingTop).toBe('2rem');
+    expect(track1.style.paddingBottom).toBe('2rem');
     splide1.destroy();
 
-    const splide2 = init( { height: 100, direction: TTB, padding: { top: '4%', bottom: '5%' } } );
-    const track2  = splide2.Components.Elements.track;
+    const splide2 = init({ height: 100, direction: TTB, padding: { top: '4%', bottom: '5%' } });
+    const track2 = splide2.Components.Elements.track;
 
-    expect( track2.style.paddingTop ).toBe( '4%' );
-    expect( track2.style.paddingBottom ).toBe( '5%' );
+    expect(track2.style.paddingTop).toBe('4%');
+    expect(track2.style.paddingBottom).toBe('5%');
     splide2.destroy();
 
-    const splide3 = init( { height: 100, direction: TTB, padding: { top: '4%' } } );
-    const track3  = splide3.Components.Elements.track;
+    const splide3 = init({ height: 100, direction: TTB, padding: { top: '4%' } });
+    const track3 = splide3.Components.Elements.track;
 
-    expect( track3.style.paddingTop ).toBe( '4%' );
-    expect( track3.style.paddingBottom ).toBe( '0px' );
+    expect(track3.style.paddingTop).toBe('4%');
+    expect(track3.style.paddingBottom).toBe('0px');
     splide3.destroy();
-  } );
+  });
 
-  test( 'can set margin as a gap.', () => {
-    const splide = init( { height: 100, direction: TTB, gap: '2rem' } );
+  test('can set margin as a gap.', () => {
+    const splide = init({ height: 100, direction: TTB, gap: '2rem' });
     const slides = splide.Components.Elements.slides;
 
-    expect( slides[ 0 ].style.marginBottom ).toBe( '2rem' );
-    expect( slides[ 1 ].style.marginBottom ).toBe( '2rem' );
+    expect(slides[0].style.marginBottom).toBe('2rem');
+    expect(slides[1].style.marginBottom).toBe('2rem');
     splide.destroy();
-  } );
+  });
 
-  test( 'can set height of the track element.', () => {
-    const splide = init( { height: 100, direction: TTB } );
-    expect( splide.Components.Elements.track.style.height ).toBe( 'calc(100px - 0px - 0px)' );
+  test('can set height of the track element.', () => {
+    const splide = init({ height: 100, direction: TTB });
+    expect(splide.Components.Elements.track.style.height).toBe('calc(100px - 0px - 0px)');
     splide.destroy();
-  } );
+  });
 
-  test( 'can set height of the track element with subtracting paddings.', () => {
-    const splide = init( { height: 100, direction: TTB, padding: { top: '1rem', bottom: '2rem' } } );
-    expect( splide.Components.Elements.track.style.height ).toBe( 'calc(100px - 1rem - 2rem)' );
+  test('can set height of the track element with subtracting paddings.', () => {
+    const splide = init({ height: 100, direction: TTB, padding: { top: '1rem', bottom: '2rem' } });
+    expect(splide.Components.Elements.track.style.height).toBe('calc(100px - 1rem - 2rem)');
     splide.destroy();
-  } );
+  });
 
-  test( 'can set height of the track element by heightRatio.', () => {
-    const splide = init( { width: 500, heightRatio: 0.5, direction: TTB } );
+  test('can set height of the track element by heightRatio.', () => {
+    const splide = init({ width: 500, heightRatio: 0.5, direction: TTB });
 
-    expect( splide.Components.Elements.track.style.height ).toBe( 'calc(250px - 0px - 0px)' );
+    expect(splide.Components.Elements.track.style.height).toBe('calc(250px - 0px - 0px)');
     splide.destroy();
-  } );
+  });
 
-  test( 'can set height of the track element by heightRatio with subtracting paddings.', () => {
-    const splide = init( { width: 500, heightRatio: 0.5, direction: TTB, padding: { top: '1rem', bottom: '2rem' } } );
-    expect( splide.Components.Elements.track.style.height ).toBe( 'calc(250px - 1rem - 2rem)' );
+  test('can set height of the track element by heightRatio with subtracting paddings.', () => {
+    const splide = init({ width: 500, heightRatio: 0.5, direction: TTB, padding: { top: '1rem', bottom: '2rem' } });
+    expect(splide.Components.Elements.track.style.height).toBe('calc(250px - 1rem - 2rem)');
     splide.destroy();
-  } );
+  });
 
-  test( 'should not set the slide width.', () => {
-    const splide = init( { height: 100, direction: TTB } );
+  test('should not set the slide width.', () => {
+    const splide = init({ height: 100, direction: TTB });
     const slides = splide.Components.Elements.slides;
 
-    expect( slides[ 0 ].style.width ).toBe( '' );
-    expect( slides[ 1 ].style.width ).toBe( '' );
+    expect(slides[0].style.width).toBe('');
+    expect(slides[1].style.width).toBe('');
     splide.destroy();
-  } );
+  });
 
-  test( 'can provide the slide height.', () => {
-    const splide1 = init( { height: 500, direction: TTB } );
+  test('can provide the slide height.', () => {
+    const splide1 = init({ height: 500, direction: TTB });
 
-    expect( splide1.Components.Layout.slideSize( 0 ) ).toBe( 500 );
-    expect( splide1.Components.Layout.slideSize( 1 ) ).toBe( 500 );
+    expect(splide1.Components.Layout.slideSize(0)).toBe(500);
+    expect(splide1.Components.Layout.slideSize(1)).toBe(500);
     splide1.destroy();
 
-    const splide2 = init( { height: 500, perPage: 2, direction: TTB } );
+    const splide2 = init({ height: 500, perPage: 2, direction: TTB });
 
-    expect( splide2.Components.Layout.slideSize( 0 ) ).toBe( 250 );
-    expect( splide2.Components.Layout.slideSize( 1 ) ).toBe( 250 );
+    expect(splide2.Components.Layout.slideSize(0)).toBe(250);
+    expect(splide2.Components.Layout.slideSize(1)).toBe(250);
     splide2.destroy();
-  } );
+  });
 
   // This test must be the last.
-  test( 'should assert if both height and heightRatio are not available.', () => {
-    expect( () => {
-      init( { direction: TTB } );
-    } ).toThrowError();
-  } );
-} );
+  test('should assert if both height and heightRatio are not available.', () => {
+    expect(() => {
+      init({ direction: TTB });
+    }).toThrowError();
+  });
+});

src/js/components/LazyLoad/LazyLoad.ts

@@ -42,7 +42,7 @@ export interface LazyLoadComponent extends BaseComponent {
  *
  * @since 4.0.0
  */
-type LazyLoadEntry = [ HTMLImageElement, SlideComponent, HTMLSpanElement ];
+type LazyLoadEntry = [HTMLImageElement, SlideComponent, HTMLSpanElement];
 
 /**
  * The component for lazily loading images.
@@ -56,10 +56,10 @@ type LazyLoadEntry = [ HTMLImageElement, SlideComponent, HTMLSpanElement ];
  *
  * @return An LazyLoad component object.
  */
-export const LazyLoad: ComponentConstructor<LazyLoadComponent> = ( Splide, Components, options, event ) => {
+export const LazyLoad: ComponentConstructor<LazyLoadComponent> = (Splide, Components, options, event) => {
   const { on, off, bind, emit } = event;
   const isSequential = options.lazyLoad === 'sequential';
-  const events       = [ EVENT_MOVED, EVENT_SCROLLED ];
+  const events = [EVENT_MOVED, EVENT_SCROLLED];
 
   /**
    * Stores data of images.
@@ -70,9 +70,9 @@ export const LazyLoad: ComponentConstructor<LazyLoadComponent> = ( Splide, Compo
    * Called when the component is mounted.
    */
   function mount(): void {
-    if ( options.lazyLoad ) {
+    if (options.lazyLoad) {
       init();
-      on( EVENT_REFRESH, init );
+      on(EVENT_REFRESH, init);
     }
   }
 
@@ -81,14 +81,14 @@ export const LazyLoad: ComponentConstructor<LazyLoadComponent> = ( Splide, Compo
    * Be aware that `refresh` also calls this method.
    */
   function init() {
-    empty( entries );
+    empty(entries);
     register();
 
-    if ( isSequential ) {
+    if (isSequential) {
       loadNext();
     } else {
-      off( events );
-      on( events, check );
+      off(events);
+      on(events, check);
       check();
     }
   }
@@ -98,20 +98,20 @@ export const LazyLoad: ComponentConstructor<LazyLoadComponent> = ( Splide, Compo
    * Note that spinner can be already available because of `refresh()`.
    */
   function register(): void {
-    Components.Slides.forEach( Slide => {
-      queryAll<HTMLImageElement>( Slide.slide, IMAGE_SELECTOR ).forEach( img => {
-        const src    = getAttribute( img, SRC_DATA_ATTRIBUTE );
-        const srcset = getAttribute( img, SRCSET_DATA_ATTRIBUTE );
+    Components.Slides.forEach(Slide => {
+      queryAll<HTMLImageElement>(Slide.slide, IMAGE_SELECTOR).forEach(img => {
+        const src = getAttribute(img, SRC_DATA_ATTRIBUTE);
+        const srcset = getAttribute(img, SRCSET_DATA_ATTRIBUTE);
 
-        if ( src !== img.src || srcset !== img.srcset ) {
-          const parent  = img.parentElement;
-          const spinner = child( parent, `.${ CLASS_SPINNER }` ) || create( 'span', options.classes.spinner, parent );
+        if (src !== img.src || srcset !== img.srcset) {
+          const parent = img.parentElement;
+          const spinner = child(parent, `.${ CLASS_SPINNER }`) || create('span', options.classes.spinner, parent);
 
-          entries.push( [ img, Slide, spinner ] );
-          img.src || display( img, 'none' );
+          entries.push([img, Slide, spinner]);
+          img.src || display(img, 'none');
         }
-      } );
-    } );
+      });
+    });
   }
 
   /**
@@ -119,12 +119,12 @@ export const LazyLoad: ComponentConstructor<LazyLoadComponent> = ( Splide, Compo
    * The last `+1` is for the current page.
    */
   function check(): void {
-    entries = entries.filter( data => {
-      const distance = options.perPage * ( ( options.preloadPages || 1 ) + 1 ) - 1;
-      return data[ 1 ].isWithin( Splide.index, distance ) ? load( data ) : true;
-    } );
+    entries = entries.filter(data => {
+      const distance = options.perPage * ((options.preloadPages || 1) + 1) - 1;
+      return data[1].isWithin(Splide.index, distance) ? load(data) : true;
+    });
 
-    entries.length || off( events );
+    entries.length || off(events);
   }
 
   /**
@@ -132,16 +132,16 @@ export const LazyLoad: ComponentConstructor<LazyLoadComponent> = ( Splide, Compo
    *
    * @param data - A LazyLoadEntry object.
    */
-  function load( data: LazyLoadEntry ): void {
-    const [ img ] = data;
+  function load(data: LazyLoadEntry): void {
+    const [img] = data;
 
-    addClass( data[ 1 ].slide, CLASS_LOADING );
-    bind( img, 'load error', apply( onLoad, data ) );
+    addClass(data[1].slide, CLASS_LOADING);
+    bind(img, 'load error', apply(onLoad, data));
 
-    setAttribute( img, 'src', getAttribute( img, SRC_DATA_ATTRIBUTE ) );
-    setAttribute( img, 'srcset', getAttribute( img, SRCSET_DATA_ATTRIBUTE ) );
+    setAttribute(img, 'src', getAttribute(img, SRC_DATA_ATTRIBUTE));
+    setAttribute(img, 'srcset', getAttribute(img, SRCSET_DATA_ATTRIBUTE));
 
-    removeAttribute( img, [ SRC_DATA_ATTRIBUTE, SRCSET_DATA_ATTRIBUTE ] );
+    removeAttribute(img, [SRC_DATA_ATTRIBUTE, SRCSET_DATA_ATTRIBUTE]);
   }
 
   /**
@@ -150,18 +150,18 @@ export const LazyLoad: ComponentConstructor<LazyLoadComponent> = ( Splide, Compo
    * @param data - A LazyLoadEntry object.
    * @param e    - An Event object.
    */
-  function onLoad( data: LazyLoadEntry, e: Event ): void {
-    const [ img, Slide ] = data;
+  function onLoad(data: LazyLoadEntry, e: Event): void {
+    const [img, Slide] = data;
 
-    removeClass( Slide.slide, CLASS_LOADING );
+    removeClass(Slide.slide, CLASS_LOADING);
 
-    if ( e.type !== 'error' ) {
-      removeNode( data[ 2 ] );
-      display( img, '' );
-      emit( EVENT_LAZYLOAD_LOADED, img, Slide );
-      emit( EVENT_RESIZE );
+    if (e.type !== 'error') {
+      removeNode(data[2]);
+      display(img, '');
+      emit(EVENT_LAZYLOAD_LOADED, img, Slide);
+      emit(EVENT_RESIZE);
     } else {
-      emit( EVENT_LAZYLOAD_ERROR, img, Slide );
+      emit(EVENT_LAZYLOAD_ERROR, img, Slide);
     }
 
     isSequential && loadNext();
@@ -171,12 +171,12 @@ export const LazyLoad: ComponentConstructor<LazyLoadComponent> = ( Splide, Compo
    * Starts loading a next image.
    */
   function loadNext(): void {
-    entries.length && load( entries.shift() );
+    entries.length && load(entries.shift());
   }
 
   return {
     mount,
-    destroy: apply( empty, entries ),
+    destroy: apply(empty, entries),
     check,
   };
 };

src/js/components/LazyLoad/test/nearby.test.ts

@@ -5,168 +5,168 @@ import { URL } from '../../../test/fixtures/constants';
 import { SRC_DATA_ATTRIBUTE, SRCSET_DATA_ATTRIBUTE } from '../constants';
 
 
-describe( 'LazyLoad in the `nearby` mode', () => {
-  test( 'does nothing if the lazyLoad option is falsy.', () => {
-    init( {}, { src: false, dataSrc: true } );
-    const images = document.getElementsByTagName( 'img' );
+describe('LazyLoad in the `nearby` mode', () => {
+  test('does nothing if the lazyLoad option is falsy.', () => {
+    init({}, { src: false, dataSrc: true });
+    const images = document.getElementsByTagName('img');
 
-    expect( images[ 0 ].src ).toBe( '' );
-    expect( images[ 0 ].getAttribute( SRC_DATA_ATTRIBUTE ) ).not.toBeFalsy();
-  } );
+    expect(images[0].src).toBe('');
+    expect(images[0].getAttribute(SRC_DATA_ATTRIBUTE)).not.toBeFalsy();
+  });
 
-  test( 'can find the src data attribute and set the value to the src.', () => {
-    init( { lazyLoad: true }, { src: false, dataSrc: true } );
-    const images = document.getElementsByTagName( 'img' );
+  test('can find the src data attribute and set the value to the src.', () => {
+    init({ lazyLoad: true }, { src: false, dataSrc: true });
+    const images = document.getElementsByTagName('img');
 
-    expect( images[ 0 ].src ).toBe( `${ URL }/0.jpg` );
-    expect( images[ 0 ].getAttribute( SRC_DATA_ATTRIBUTE ) ).toBeNull();
+    expect(images[0].src).toBe(`${ URL }/0.jpg`);
+    expect(images[0].getAttribute(SRC_DATA_ATTRIBUTE)).toBeNull();
 
-    expect( images[ 1 ].src ).toBe( `${ URL }/1.jpg` );
-    expect( images[ 1 ].getAttribute( SRC_DATA_ATTRIBUTE ) ).toBeNull();
-  } );
+    expect(images[1].src).toBe(`${ URL }/1.jpg`);
+    expect(images[1].getAttribute(SRC_DATA_ATTRIBUTE)).toBeNull();
+  });
 
-  test( 'can find the srcset data attribute and set the value to the src.', () => {
-    init( { lazyLoad: true }, { src: false, dataSrcset: true } );
-    const images = document.getElementsByTagName( 'img' );
+  test('can find the srcset data attribute and set the value to the src.', () => {
+    init({ lazyLoad: true }, { src: false, dataSrcset: true });
+    const images = document.getElementsByTagName('img');
 
-    expect( images[ 0 ].srcset ).toBe( `${ URL }/0.jpg 320w` );
-    expect( images[ 0 ].getAttribute( SRCSET_DATA_ATTRIBUTE ) ).toBeNull();
+    expect(images[0].srcset).toBe(`${ URL }/0.jpg 320w`);
+    expect(images[0].getAttribute(SRCSET_DATA_ATTRIBUTE)).toBeNull();
 
-    expect( images[ 1 ].srcset ).toBe( `${ URL }/1.jpg 320w` );
-    expect( images[ 1 ].getAttribute( SRCSET_DATA_ATTRIBUTE ) ).toBeNull();
-  } );
+    expect(images[1].srcset).toBe(`${ URL }/1.jpg 320w`);
+    expect(images[1].getAttribute(SRCSET_DATA_ATTRIBUTE)).toBeNull();
+  });
 
-  test( 'should set the src if the value is not same with the one provided by the data attribute.', () => {
-    init( { lazyLoad: true }, { src: 'placeholder', dataSrc: true } );
-    const images = document.getElementsByTagName( 'img' );
+  test('should set the src if the value is not same with the one provided by the data attribute.', () => {
+    init({ lazyLoad: true }, { src: 'placeholder', dataSrc: true });
+    const images = document.getElementsByTagName('img');
 
-    expect( images[ 0 ].src ).toBe( `${ URL }/0.jpg` );
-    expect( images[ 0 ].getAttribute( SRC_DATA_ATTRIBUTE ) ).toBeNull();
+    expect(images[0].src).toBe(`${ URL }/0.jpg`);
+    expect(images[0].getAttribute(SRC_DATA_ATTRIBUTE)).toBeNull();
 
-    expect( images[ 1 ].src ).toBe( `${ URL }/1.jpg` );
-    expect( images[ 1 ].getAttribute( SRC_DATA_ATTRIBUTE ) ).toBeNull();
-  } );
+    expect(images[1].src).toBe(`${ URL }/1.jpg`);
+    expect(images[1].getAttribute(SRC_DATA_ATTRIBUTE)).toBeNull();
+  });
 
-  test( 'can append a loading spinner and add a loading class to slides.', () => {
-    const splide   = init( { lazyLoad: true }, { src: false, dataSrc: true } );
-    const slide1   = splide.Components.Slides.getAt( 0 ).slide;
-    const slide2   = splide.Components.Slides.getAt( 1 ).slide;
-    const spinner1 = slide1.querySelector( `.${ CLASS_SPINNER }` );
-    const spinner2 = slide2.querySelector( `.${ CLASS_SPINNER }` );
+  test('can append a loading spinner and add a loading class to slides.', () => {
+    const splide = init({ lazyLoad: true }, { src: false, dataSrc: true });
+    const slide1 = splide.Components.Slides.getAt(0).slide;
+    const slide2 = splide.Components.Slides.getAt(1).slide;
+    const spinner1 = slide1.querySelector(`.${ CLASS_SPINNER }`);
+    const spinner2 = slide2.querySelector(`.${ CLASS_SPINNER }`);
 
-    expect( spinner1 instanceof HTMLSpanElement ).toBe( true );
-    expect( spinner2 instanceof HTMLSpanElement ).toBe( true );
+    expect(spinner1 instanceof HTMLSpanElement).toBe(true);
+    expect(spinner2 instanceof HTMLSpanElement).toBe(true);
 
-    expect( slide1.classList.contains( CLASS_LOADING ) ).toBe( true );
-    expect( slide2.classList.contains( CLASS_LOADING ) ).toBe( true );
-  } );
+    expect(slide1.classList.contains(CLASS_LOADING)).toBe(true);
+    expect(slide2.classList.contains(CLASS_LOADING)).toBe(true);
+  });
 
-  test( 'can remove a loading spinner and a loading class on load.', () => {
-    const splide   = init( { lazyLoad: true }, { src: false, dataSrc: true } );
-    const images   = document.getElementsByTagName( 'img' );
-    const slide1   = splide.Components.Slides.getAt( 0 ).slide;
-    const slide2   = splide.Components.Slides.getAt( 1 ).slide;
+  test('can remove a loading spinner and a loading class on load.', () => {
+    const splide = init({ lazyLoad: true }, { src: false, dataSrc: true });
+    const images = document.getElementsByTagName('img');
+    const slide1 = splide.Components.Slides.getAt(0).slide;
+    const slide2 = splide.Components.Slides.getAt(1).slide;
 
-    fire( images[ 0 ], 'load' );
+    fire(images[0], 'load');
 
-    expect( slide1.querySelector( `.${ CLASS_SPINNER }` ) ).toBeNull();
-    expect( slide1.classList.contains( CLASS_LOADING ) ).toBe( false );
+    expect(slide1.querySelector(`.${ CLASS_SPINNER }`)).toBeNull();
+    expect(slide1.classList.contains(CLASS_LOADING)).toBe(false);
 
     // The slide2 is still loading.
-    expect( slide2.querySelector( `.${ CLASS_SPINNER }` ) ).not.toBeNull();
-    expect( slide2.classList.contains( CLASS_LOADING ) ).toBe( true );
+    expect(slide2.querySelector(`.${ CLASS_SPINNER }`)).not.toBeNull();
+    expect(slide2.classList.contains(CLASS_LOADING)).toBe(true);
 
-    fire( images[ 1 ], 'load' );
+    fire(images[1], 'load');
 
-    expect( slide2.querySelector( `.${ CLASS_SPINNER }` ) ).toBeNull();
-    expect( slide2.classList.contains( CLASS_LOADING ) ).toBe( false );
-  } );
+    expect(slide2.querySelector(`.${ CLASS_SPINNER }`)).toBeNull();
+    expect(slide2.classList.contains(CLASS_LOADING)).toBe(false);
+  });
 
-  test( 'can remove a loading class on error.', () => {
-    const splide   = init( { lazyLoad: true }, { src: false, dataSrc: true } );
-    const images   = document.getElementsByTagName( 'img' );
-    const slide1   = splide.Components.Slides.getAt( 0 ).slide;
-    const slide2   = splide.Components.Slides.getAt( 1 ).slide;
+  test('can remove a loading class on error.', () => {
+    const splide = init({ lazyLoad: true }, { src: false, dataSrc: true });
+    const images = document.getElementsByTagName('img');
+    const slide1 = splide.Components.Slides.getAt(0).slide;
+    const slide2 = splide.Components.Slides.getAt(1).slide;
 
-    fire( images[ 0 ], 'error' );
+    fire(images[0], 'error');
 
     // The spinner will not be removed on error.
-    expect( slide1.querySelector( `.${ CLASS_SPINNER }` ) ).not.toBeNull();
-    expect( slide1.classList.contains( CLASS_LOADING ) ).toBe( false );
+    expect(slide1.querySelector(`.${ CLASS_SPINNER }`)).not.toBeNull();
+    expect(slide1.classList.contains(CLASS_LOADING)).toBe(false);
 
-    fire( images[ 1 ], 'error' );
+    fire(images[1], 'error');
 
-    expect( slide2.querySelector( `.${ CLASS_SPINNER }` ) ).not.toBeNull();
-    expect( slide2.classList.contains( CLASS_LOADING ) ).toBe( false );
-  } );
+    expect(slide2.querySelector(`.${ CLASS_SPINNER }`)).not.toBeNull();
+    expect(slide2.classList.contains(CLASS_LOADING)).toBe(false);
+  });
 
-  test( 'can start loading an image if the slide is close to the current location.', () => {
-    const splide = init( { lazyLoad: true, speed: 0 }, { src: false, dataSrc: true } );
-    const images = document.getElementsByTagName( 'img' );
+  test('can start loading an image if the slide is close to the current location.', () => {
+    const splide = init({ lazyLoad: true, speed: 0 }, { src: false, dataSrc: true });
+    const images = document.getElementsByTagName('img');
 
-    expect( images[ 3 ].src ).toBe( '' );
-    expect( images[ 3 ].getAttribute( SRC_DATA_ATTRIBUTE ) ).not.toBeNull();
+    expect(images[3].src).toBe('');
+    expect(images[3].getAttribute(SRC_DATA_ATTRIBUTE)).not.toBeNull();
 
-    splide.go( 2 );
+    splide.go(2);
 
-    expect( images[ 3 ].src ).toBe( `${ URL }/3.jpg` );
-    expect( images[ 3 ].getAttribute( SRC_DATA_ATTRIBUTE ) ).toBeNull();
+    expect(images[3].src).toBe(`${ URL }/3.jpg`);
+    expect(images[3].getAttribute(SRC_DATA_ATTRIBUTE)).toBeNull();
 
-    expect( images[ 4 ].src ).toBe( '' );
-    expect( images[ 4 ].getAttribute( SRC_DATA_ATTRIBUTE ) ).not.toBeNull();
+    expect(images[4].src).toBe('');
+    expect(images[4].getAttribute(SRC_DATA_ATTRIBUTE)).not.toBeNull();
 
-    splide.go( 3 );
+    splide.go(3);
 
-    expect( images[ 4 ].src ).toBe( `${ URL }/4.jpg` );
-    expect( images[ 4 ].getAttribute( SRC_DATA_ATTRIBUTE ) ).toBeNull();
-  } );
+    expect(images[4].src).toBe(`${ URL }/4.jpg`);
+    expect(images[4].getAttribute(SRC_DATA_ATTRIBUTE)).toBeNull();
+  });
 
-  test( 'can start loading images of previous slides in the loop mode.', () => {
-    const splide = init( { type: 'loop', lazyLoad: true, perPage: 3 }, { src: false, dataSrc: true } );
-    const prev1  = splide.Components.Slides.getAt( -1 );
-    const prev2  = splide.Components.Slides.getAt( -2 );
-    const last1  = splide.Components.Slides.getAt( splide.length - 1 );
-    const last2  = splide.Components.Slides.getAt( splide.length - 2 );
+  test('can start loading images of previous slides in the loop mode.', () => {
+    const splide = init({ type: 'loop', lazyLoad: true, perPage: 3 }, { src: false, dataSrc: true });
+    const prev1 = splide.Components.Slides.getAt(-1);
+    const prev2 = splide.Components.Slides.getAt(-2);
+    const last1 = splide.Components.Slides.getAt(splide.length - 1);
+    const last2 = splide.Components.Slides.getAt(splide.length - 2);
 
-    expect( prev1.slide.querySelector( 'img' ).src ).toBe( `${ URL }/${ splide.length - 1 }.jpg` );
-    expect( prev2.slide.querySelector( 'img' ).src ).toBe( `${ URL }/${ splide.length - 2 }.jpg` );
+    expect(prev1.slide.querySelector('img').src).toBe(`${ URL }/${ splide.length - 1 }.jpg`);
+    expect(prev2.slide.querySelector('img').src).toBe(`${ URL }/${ splide.length - 2 }.jpg`);
 
-    expect( last1.slide.querySelector( 'img' ).src ).toBe( `${ URL }/${ splide.length - 1 }.jpg` );
-    expect( last2.slide.querySelector( 'img' ).src ).toBe( `${ URL }/${ splide.length - 2 }.jpg` );
-  } );
+    expect(last1.slide.querySelector('img').src).toBe(`${ URL }/${ splide.length - 1 }.jpg`);
+    expect(last2.slide.querySelector('img').src).toBe(`${ URL }/${ splide.length - 2 }.jpg`);
+  });
 
-  test( 'should not start loading an image if the slide is not close to the current location.', () => {
-    init( { lazyLoad: true }, { src: false, dataSrc: true } );
-    const images = document.getElementsByTagName( 'img' );
+  test('should not start loading an image if the slide is not close to the current location.', () => {
+    init({ lazyLoad: true }, { src: false, dataSrc: true });
+    const images = document.getElementsByTagName('img');
 
-    expect( images[ 3 ].src ).toBe( '' );
-    expect( images[ 3 ].getAttribute( SRC_DATA_ATTRIBUTE ) ).not.toBeNull();
+    expect(images[3].src).toBe('');
+    expect(images[3].getAttribute(SRC_DATA_ATTRIBUTE)).not.toBeNull();
 
-    expect( images[ 4 ].src ).toBe( '' );
-    expect( images[ 4 ].getAttribute( SRC_DATA_ATTRIBUTE ) ).not.toBeNull();
-  } );
+    expect(images[4].src).toBe('');
+    expect(images[4].getAttribute(SRC_DATA_ATTRIBUTE)).not.toBeNull();
+  });
 
-  test( 'should emit an event after load.', done => {
-    const splide = init( { lazyLoad: true }, { src: false, dataSrc: true } );
-    const Slide1 = splide.Components.Slides.getAt( 0 );
-    const Slide2 = splide.Components.Slides.getAt( 1 );
+  test('should emit an event after load.', done => {
+    const splide = init({ lazyLoad: true }, { src: false, dataSrc: true });
+    const Slide1 = splide.Components.Slides.getAt(0);
+    const Slide2 = splide.Components.Slides.getAt(1);
 
     let count = 0;
 
-    splide.on( EVENT_LAZYLOAD_LOADED, ( img, Slide ) => {
-      if ( count === 0 ) {
-        expect( Slide ).toBe( Slide1 );
+    splide.on(EVENT_LAZYLOAD_LOADED, (img, Slide) => {
+      if (count === 0) {
+        expect(Slide).toBe(Slide1);
       }
 
-      if ( count === 1 ) {
-        expect( Slide ).toBe( Slide2 );
+      if (count === 1) {
+        expect(Slide).toBe(Slide2);
         done();
       }
 
       count++;
-    } );
+    });
 
-    fire( Slide1.slide.querySelector( 'img' ), 'load' );
-    fire( Slide2.slide.querySelector( 'img' ), 'load' );
-  } );
-} );
+    fire(Slide1.slide.querySelector('img'), 'load');
+    fire(Slide2.slide.querySelector('img'), 'load');
+  });
+});

src/js/components/LazyLoad/test/sequential.test.ts

@@ -2,35 +2,35 @@ import { fire, init } from '../../../test';
 import { URL } from '../../../test/fixtures/constants';
 
 
-describe( 'LazyLoad in the `sequential` mode', () => {
-  test( 'can sequentially load images.', () => {
-    init( { lazyLoad: 'sequential' }, { src: false, dataSrc: true } );
-    const images = document.getElementsByTagName( 'img' );
-
-    expect( images[ 0 ].src ).toBe( `${ URL }/0.jpg` );
-    expect( images[ 1 ].src ).toBe( '' );
-    expect( images[ 2 ].src ).toBe( '' );
-
-    fire( images[ 0 ], 'load' );
-    expect( images[ 1 ].src ).toBe( `${ URL }/1.jpg` );
-    expect( images[ 2 ].src ).toBe( '' );
-
-    fire( images[ 1 ], 'load' );
-    expect( images[ 2 ].src ).toBe( `${ URL }/2.jpg` );
-  } );
-
-  test( 'should load the next image if the current image throws error to load.', () => {
-    init( { lazyLoad: 'sequential' }, { src: false, dataSrc: true } );
-    const images = document.getElementsByTagName( 'img' );
-
-    expect( images[ 0 ].src ).toBe( `${ URL }/0.jpg` );
-    expect( images[ 1 ].src ).toBe( '' );
-    expect( images[ 2 ].src ).toBe( '' );
-
-    fire( images[ 0 ], 'error' );
-    expect( images[ 1 ].src ).toBe( `${ URL }/1.jpg` );
-
-    fire( images[ 1 ], 'error' );
-    expect( images[ 2 ].src ).toBe( `${ URL }/2.jpg` );
-  } );
-} );
+describe('LazyLoad in the `sequential` mode', () => {
+  test('can sequentially load images.', () => {
+    init({ lazyLoad: 'sequential' }, { src: false, dataSrc: true });
+    const images = document.getElementsByTagName('img');
+
+    expect(images[0].src).toBe(`${ URL }/0.jpg`);
+    expect(images[1].src).toBe('');
+    expect(images[2].src).toBe('');
+
+    fire(images[0], 'load');
+    expect(images[1].src).toBe(`${ URL }/1.jpg`);
+    expect(images[2].src).toBe('');
+
+    fire(images[1], 'load');
+    expect(images[2].src).toBe(`${ URL }/2.jpg`);
+  });
+
+  test('should load the next image if the current image throws error to load.', () => {
+    init({ lazyLoad: 'sequential' }, { src: false, dataSrc: true });
+    const images = document.getElementsByTagName('img');
+
+    expect(images[0].src).toBe(`${ URL }/0.jpg`);
+    expect(images[1].src).toBe('');
+    expect(images[2].src).toBe('');
+
+    fire(images[0], 'error');
+    expect(images[1].src).toBe(`${ URL }/1.jpg`);
+
+    fire(images[1], 'error');
+    expect(images[2].src).toBe(`${ URL }/2.jpg`);
+  });
+});

src/js/components/Live/Live.ts

@@ -11,7 +11,7 @@ import { append, apply, create, removeAttribute, removeNode, RequestInterval, se
  * @since 4.0.0
  */
 export interface LiveComponent extends BaseComponent {
-  disable( disabled: boolean ): void;
+  disable(disabled: boolean): void;
 }
 
 /**
@@ -33,7 +33,7 @@ const SR_REMOVAL_DELAY = 90;
  *
  * @return A Live component object.
  */
-export const Live: ComponentConstructor<LiveComponent> = ( Splide, Components, options, event ) => {
+export const Live: ComponentConstructor<LiveComponent> = (Splide, Components, options, event) => {
   const { on } = event;
   const { track } = Components.Elements;
   const { live = true } = options;
@@ -41,17 +41,17 @@ export const Live: ComponentConstructor<LiveComponent> = ( Splide, Components, o
   /**
    * Indicates whether the live region is enabled or not.
    */
-  const enabled = live && ! options.isNavigation;
+  const enabled = live && !options.isNavigation;
 
   /**
    * The span element for the SR only text.
    */
-  const sr = create( 'span', CLASS_SR );
+  const sr = create('span', CLASS_SR);
 
   /**
    * Holds the RequestInterval instance.
    */
-  const interval = RequestInterval( SR_REMOVAL_DELAY, apply( toggle, false ) );
+  const interval = RequestInterval(SR_REMOVAL_DELAY, apply(toggle, false));
 
   /**
    * Called when the component is mounted.
@@ -59,14 +59,14 @@ export const Live: ComponentConstructor<LiveComponent> = ( Splide, Components, o
    * - Immediately removing the SR makes Windows Narrator silent, hence requires the delay around 50ms.
    */
   function mount(): void {
-    if ( enabled ) {
-      disable( ! Components.Autoplay.isPaused() );
-      setAttribute( track, ARIA_ATOMIC, true );
+    if (enabled) {
+      disable(!Components.Autoplay.isPaused());
+      setAttribute(track, ARIA_ATOMIC, true);
       sr.textContent = '…';
 
-      on( EVENT_AUTOPLAY_PLAY, apply( disable, true ) );
-      on( EVENT_AUTOPLAY_PAUSE, apply( disable, false ) );
-      on( [ EVENT_MOVED, EVENT_SCROLLED ], apply( toggle, true ) );
+      on(EVENT_AUTOPLAY_PLAY, apply(disable, true));
+      on(EVENT_AUTOPLAY_PAUSE, apply(disable, false));
+      on([EVENT_MOVED, EVENT_SCROLLED], apply(toggle, true));
     }
   }
 
@@ -75,14 +75,14 @@ export const Live: ComponentConstructor<LiveComponent> = ( Splide, Components, o
    *
    * @param active - Determines whether to activate the field or not.
    */
-  function toggle( active: boolean ): void {
-    setAttribute( track, ARIA_BUSY, active );
+  function toggle(active: boolean): void {
+    setAttribute(track, ARIA_BUSY, active);
 
-    if ( active ) {
-      append( track, sr );
+    if (active) {
+      append(track, sr);
       interval.start();
     } else {
-      removeNode( sr );
+      removeNode(sr);
       interval.cancel();
     }
   }
@@ -91,8 +91,8 @@ export const Live: ComponentConstructor<LiveComponent> = ( Splide, Components, o
    * Destroys the component.
    */
   function destroy(): void {
-    removeAttribute( track, [ ARIA_LIVE, ARIA_ATOMIC, ARIA_BUSY ] );
-    removeNode( sr );
+    removeAttribute(track, [ARIA_LIVE, ARIA_ATOMIC, ARIA_BUSY]);
+    removeNode(sr);
   }
 
   /**
@@ -101,9 +101,9 @@ export const Live: ComponentConstructor<LiveComponent> = ( Splide, Components, o
    *
    * @param disabled - `true` to disable the live region or `false` to enable it again.
    */
-  function disable( disabled: boolean ): void {
-    if ( enabled ) {
-      setAttribute( track, ARIA_LIVE, disabled ? 'off' : 'polite' );
+  function disable(disabled: boolean): void {
+    if (enabled) {
+      setAttribute(track, ARIA_LIVE, disabled ? 'off' : 'polite');
     }
   }
 

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

@@ -3,109 +3,109 @@ import { CLASS_SR } from '../../../constants/classes';
 import { init, wait } from '../../../test';
 
 
-describe( 'Live', () => {
-  test( 'can append a SR text and add aria-busy="true" to the track element after move.', () => {
-    const splide = init( { live: true, speed: 0 } );
+describe('Live', () => {
+  test('can append a SR text and add aria-busy="true" to the track element after move.', () => {
+    const splide = init({ live: true, speed: 0 });
     const { track } = splide.Components.Elements;
 
-    splide.go( 1 );
-    expect( track.getElementsByClassName( CLASS_SR ).length ).toBe( 1 );
-    expect( track.getAttribute( ARIA_BUSY ) ).toBe( 'true' );
-  } );
+    splide.go(1);
+    expect(track.getElementsByClassName(CLASS_SR).length).toBe(1);
+    expect(track.getAttribute(ARIA_BUSY)).toBe('true');
+  });
 
-  test( 'can remove a SR text and aria-busy from the track element.', async () => {
-    const splide = init( { live: true, speed: 0 } );
+  test('can remove a SR text and aria-busy from the track element.', async () => {
+    const splide = init({ live: true, speed: 0 });
     const { track } = splide.Components.Elements;
 
-    splide.go( 1 );
+    splide.go(1);
 
-    await wait( 200 );
-    expect( track.getElementsByClassName( CLASS_SR ).length ).toBe( 0 );
-    expect( track.getAttribute( ARIA_BUSY ) ).toBe( 'false' );
-  } );
+    await wait(200);
+    expect(track.getElementsByClassName(CLASS_SR).length).toBe(0);
+    expect(track.getAttribute(ARIA_BUSY)).toBe('false');
+  });
 
-  test( 'can assign aria-live="polite" and aria-atomic="true" to the list element.', () => {
-    const splide = init( { live: true } );
+  test('can assign aria-live="polite" and aria-atomic="true" to the list element.', () => {
+    const splide = init({ live: true });
     const { track } = splide.Components.Elements;
 
-    expect( track.getAttribute( ARIA_LIVE ) ).toBe( 'polite' );
-    expect( track.getAttribute( ARIA_ATOMIC ) ).toBe( 'true' );
-  } );
+    expect(track.getAttribute(ARIA_LIVE)).toBe('polite');
+    expect(track.getAttribute(ARIA_ATOMIC)).toBe('true');
+  });
 
-  test( 'can remove aria attributes on destroy.', () => {
-    const splide = init( { live: true } );
+  test('can remove aria attributes on destroy.', () => {
+    const splide = init({ live: true });
     const { track } = splide.Components.Elements;
 
     splide.destroy();
 
-    expect( track.getAttribute( ARIA_LIVE ) ).toBeNull();
-    expect( track.getAttribute( ARIA_ATOMIC ) ).toBeNull();
-    expect( track.getAttribute( ARIA_BUSY ) ).toBeNull();
-  } );
+    expect(track.getAttribute(ARIA_LIVE)).toBeNull();
+    expect(track.getAttribute(ARIA_ATOMIC)).toBeNull();
+    expect(track.getAttribute(ARIA_BUSY)).toBeNull();
+  });
 
-  test( 'should assign aria attribute again on refresh.', () => {
-    const splide = init( { live: true } );
+  test('should assign aria attribute again on refresh.', () => {
+    const splide = init({ live: true });
     const { track } = splide.Components.Elements;
 
     splide.refresh();
 
-    expect( track.getAttribute( ARIA_LIVE ) ).toBe( 'polite' );
-    expect( track.getAttribute( ARIA_ATOMIC ) ).toBe( 'true' );
-  } );
+    expect(track.getAttribute(ARIA_LIVE)).toBe('polite');
+    expect(track.getAttribute(ARIA_ATOMIC)).toBe('true');
+  });
 
-  test( 'can assign aria-live="off" to the list element when the autoplay is `true`.', () => {
-    const splide = init( { live: true, autoplay: true } );
-    expect( splide.Components.Elements.track.getAttribute( ARIA_LIVE ) ).toBe( 'off' );
-  } );
+  test('can assign aria-live="off" to the list element when the autoplay is `true`.', () => {
+    const splide = init({ live: true, autoplay: true });
+    expect(splide.Components.Elements.track.getAttribute(ARIA_LIVE)).toBe('off');
+  });
 
-  test( 'can assign aria-live="polite" to the list element when the autoplay is `"pause".`', () => {
-    const splide = init( { live: true, autoplay: 'pause' } );
-    expect( splide.Components.Elements.track.getAttribute( ARIA_LIVE ) ).toBe( 'polite' );
-  } );
+  test('can assign aria-live="polite" to the list element when the autoplay is `"pause".`', () => {
+    const splide = init({ live: true, autoplay: 'pause' });
+    expect(splide.Components.Elements.track.getAttribute(ARIA_LIVE)).toBe('polite');
+  });
 
-  test( 'can change aria-live to "off" when autoplay starts, or to "polite" when autoplay stops.', () => {
-    const splide = init( { live: true, autoplay: 'pause' } );
+  test('can change aria-live to "off" when autoplay starts, or to "polite" when autoplay stops.', () => {
+    const splide = init({ live: true, autoplay: 'pause' });
     const { track } = splide.Components.Elements;
     const { play, pause } = splide.Components.Autoplay;
 
-    expect( track.getAttribute( ARIA_LIVE ) ).toBe( 'polite' );
+    expect(track.getAttribute(ARIA_LIVE)).toBe('polite');
 
     play();
-    expect( track.getAttribute( ARIA_LIVE ) ).toBe( 'off' );
+    expect(track.getAttribute(ARIA_LIVE)).toBe('off');
 
     pause();
-    expect( track.getAttribute( ARIA_LIVE ) ).toBe( 'polite' );
+    expect(track.getAttribute(ARIA_LIVE)).toBe('polite');
 
     play();
-    expect( track.getAttribute( ARIA_LIVE ) ).toBe( 'off' );
-  } );
+    expect(track.getAttribute(ARIA_LIVE)).toBe('off');
+  });
 
-  test( 'can toggle aria-live by `disable()`', () => {
-    const splide = init( { live: true } );
+  test('can toggle aria-live by `disable()`', () => {
+    const splide = init({ live: true });
     const { track } = splide.Components.Elements;
     const { disable } = splide.Components.Live;
 
-    disable( true );
-    expect( track.getAttribute( ARIA_LIVE ) ).toBe( 'off' );
+    disable(true);
+    expect(track.getAttribute(ARIA_LIVE)).toBe('off');
 
-    disable( false );
-    expect( track.getAttribute( ARIA_LIVE ) ).toBe( 'polite' );
+    disable(false);
+    expect(track.getAttribute(ARIA_LIVE)).toBe('polite');
 
-    disable( true );
-    expect( track.getAttribute( ARIA_LIVE ) ).toBe( 'off' );
-  } );
+    disable(true);
+    expect(track.getAttribute(ARIA_LIVE)).toBe('off');
+  });
 
-  test( 'should do nothing when the `live` option is false.', () => {
-    const splide = init( { live: false } );
+  test('should do nothing when the `live` option is false.', () => {
+    const splide = init({ live: false });
     const { track } = splide.Components.Elements;
     const { disable } = splide.Components.Live;
 
-    expect( track.getAttribute( ARIA_LIVE ) ).toBeNull();
+    expect(track.getAttribute(ARIA_LIVE)).toBeNull();
 
-    disable( true );
-    expect( track.getAttribute( ARIA_LIVE ) ).toBeNull();
+    disable(true);
+    expect(track.getAttribute(ARIA_LIVE)).toBeNull();
 
-    disable( false );
-    expect( track.getAttribute( ARIA_LIVE ) ).toBeNull();
-  } );
-} );
+    disable(false);
+    expect(track.getAttribute(ARIA_LIVE)).toBeNull();
+  });
+});

src/js/components/Move/Move.ts

@@ -19,21 +19,21 @@ import { abs, ceil, clamp, isUndefined, rect, style } from '@splidejs/utils';
  * @since 3.0.0
  */
 export interface MoveComponent extends BaseComponent {
-  move( dest: number, index: number, prev: number, forwards: boolean, callback?: AnyFunction ): void;
-  jump( index: number ): void;
-  translate( position: number, preventLoop?: boolean ): void;
-  shift( position: number, backwards: boolean ): number;
+  move(dest: number, index: number, prev: number, forwards: boolean, callback?: AnyFunction): void;
+  jump(index: number): void;
+  translate(position: number, preventLoop?: boolean): void;
+  shift(position: number, backwards: boolean): number;
   cancel(): void;
-  toIndex( position: number ): number;
-  toPosition( index: number ): number;
+  toIndex(position: number): number;
+  toPosition(index: number): number;
   getPosition(): number;
-  getRate( index?: number ): number;
-  getLimit( max: boolean ): number;
-  exceededLimit( max?: boolean | undefined, position?: number ): boolean;
+  getRate(index?: number): number;
+  getLimit(max: boolean): number;
+  exceededLimit(max?: boolean | undefined, position?: number): boolean;
 
   /** @internal */
   reposition(): void;
-  canShift( backwards: boolean ): boolean;
+  canShift(backwards: boolean): boolean;
 }
 
 /**
@@ -48,7 +48,7 @@ export interface MoveComponent extends BaseComponent {
  *
  * @return A Move component object.
  */
-export const Move: ComponentConstructor<MoveComponent> = ( Splide, Components, options, event ) => {
+export const Move: ComponentConstructor<MoveComponent> = (Splide, Components, options, event) => {
   const { on, emit } = event;
   const { set, is } = Splide.state;
   const { Slides } = Components;
@@ -64,7 +64,7 @@ export const Move: ComponentConstructor<MoveComponent> = ( Splide, Components, o
   /**
    * Keeps the latest indices.
    */
-  let indices: [ number, number, number ];
+  let indices: [number, number, number];
 
   let callback: AnyFunction;
 
@@ -73,7 +73,7 @@ export const Move: ComponentConstructor<MoveComponent> = ( Splide, Components, o
    */
   function mount(): void {
     Transition = Components.Transition;
-    on( [ EVENT_MOUNTED, EVENT_RESIZED, EVENT_UPDATED, EVENT_REFRESH ], reposition );
+    on([EVENT_MOUNTED, EVENT_RESIZED, EVENT_UPDATED, EVENT_REFRESH], reposition);
   }
 
   /**
@@ -82,9 +82,9 @@ export const Move: ComponentConstructor<MoveComponent> = ( Splide, Components, o
    * - iOS Safari emits window resize event while the user swipes the slider because of the bottom bar.
    */
   function reposition(): void {
-    if ( ! Components.Controller.isBusy() ) {
+    if (!Components.Controller.isBusy()) {
       Components.Scroll.cancel();
-      jump( Splide.index );
+      jump(Splide.index);
       Slides.update();
     }
   }
@@ -101,28 +101,28 @@ export const Move: ComponentConstructor<MoveComponent> = ( Splide, Components, o
    * @param forwards - Specifies the move direction.
    * @param onMoved  - Optional. A callback function invoked after transition ends.
    */
-  function move( dest: number, index: number, prev: number, forwards: boolean, onMoved?: AnyFunction ): void {
+  function move(dest: number, index: number, prev: number, forwards: boolean, onMoved?: AnyFunction): void {
     cancel();
 
     const shiftBackwards = dest !== index ? dest > index : forwards;
-    const shouldShift    = ( dest !== index || exceededLimit( forwards ) ) && canShift( shiftBackwards );
+    const shouldShift = (dest !== index || exceededLimit(forwards)) && canShift(shiftBackwards);
 
-    shouldShift && translate( shift( getPosition(), shiftBackwards ), true );
+    shouldShift && translate(shift(getPosition(), shiftBackwards), true);
 
-    indices  = [ index, prev, dest ];
+    indices = [index, prev, dest];
     callback = onMoved;
 
-    set( MOVING );
-    emit( EVENT_MOVE, index, prev, dest );
-    Transition.start( index, onTransitionEnd );
+    set(MOVING);
+    emit(EVENT_MOVE, index, prev, dest);
+    Transition.start(index, onTransitionEnd);
   }
 
   /**
    * Called when transition ends or is cancelled.
    */
   function onTransitionEnd(): void {
-    set( IDLE );
-    emit( EVENT_MOVED, ...indices );
+    set(IDLE);
+    emit(EVENT_MOVED, ...indices);
     callback && callback();
   }
 
@@ -130,8 +130,8 @@ export const Move: ComponentConstructor<MoveComponent> = ( Splide, Components, o
    * Cancels transition.
    */
   function cancel(): void {
-    if ( is( MOVING ) && indices ) {
-      translate( getPosition(), true );
+    if (is(MOVING) && indices) {
+      translate(getPosition(), true);
       Transition.cancel();
       onTransitionEnd();
     }
@@ -142,8 +142,8 @@ export const Move: ComponentConstructor<MoveComponent> = ( Splide, Components, o
    *
    * @param index - An index to jump to.
    */
-  function jump( index: number ): void {
-    translate( toPosition( index ) );
+  function jump(index: number): void {
+    translate(toPosition(index));
   }
 
   /**
@@ -152,11 +152,11 @@ export const Move: ComponentConstructor<MoveComponent> = ( Splide, Components, o
    * @param position    - The position to move to.
    * @param preventLoop - Optional. If `true`, sets the provided position as is.
    */
-  function translate( position: number, preventLoop?: boolean ): void {
-    if ( ! Splide.is( FADE ) ) {
-      const destination = preventLoop ? position : loop( position );
-      style( list, 'transform', `translate${ resolve( 'X' ) }(${ destination }px)` );
-      position !== destination && emit( EVENT_SHIFTED );
+  function translate(position: number, preventLoop?: boolean): void {
+    if (!Splide.is(FADE)) {
+      const destination = preventLoop ? position : loop(position);
+      style(list, 'transform', `translate${ resolve('X') }(${ destination }px)`);
+      position !== destination && emit(EVENT_SHIFTED);
     }
   }
 
@@ -167,12 +167,12 @@ export const Move: ComponentConstructor<MoveComponent> = ( Splide, Components, o
    *
    * @return A looped position.
    */
-  function loop( position: number ): number {
-    if ( Splide.is( LOOP ) ) {
-      const diff = orient( position ) - orient( getPosition() );
+  function loop(position: number): number {
+    if (Splide.is(LOOP)) {
+      const diff = orient(position) - orient(getPosition());
 
-      if ( diff && exceededLimit( diff > 0, position ) ) {
-        position = shift( position, diff > 0 );
+      if (diff && exceededLimit(diff > 0, position)) {
+        position = shift(position, diff > 0);
       }
     }
 
@@ -187,10 +187,10 @@ export const Move: ComponentConstructor<MoveComponent> = ( Splide, Components, o
    *
    * @return The shifted position.
    */
-  function shift( position: number, backwards: boolean ): number {
-    const excess = position - getLimit( backwards );
-    const size   = sliderSize();
-    position -= orient( size * ( ceil( abs( excess ) / size ) || 1 ) ) * ( backwards ? 1 : -1 );
+  function shift(position: number, backwards: boolean): number {
+    const excess = position - getLimit(backwards);
+    const size = sliderSize();
+    position -= orient(size * (ceil(abs(excess) / size) || 1)) * (backwards ? 1 : -1);
     return position;
   }
 
@@ -201,19 +201,19 @@ export const Move: ComponentConstructor<MoveComponent> = ( Splide, Components, o
    *
    * @return The closest index to the position.
    */
-  function toIndex( position: number ): number {
+  function toIndex(position: number): number {
     const slides = Slides.get();
 
-    let index       = 0;
+    let index = 0;
     let minDistance = Infinity;
 
-    for ( let i = 0; i < slides.length; i++ ) {
-      const slideIndex = slides[ i ].index;
-      const distance   = abs( toPosition( slideIndex ) - position );
+    for (let i = 0; i < slides.length; i++) {
+      const slideIndex = slides[i].index;
+      const distance = abs(toPosition(slideIndex) - position);
 
-      if ( distance <= minDistance ) {
+      if (distance <= minDistance) {
         minDistance = distance;
-        index       = slideIndex;
+        index = slideIndex;
       } else {
         break;
       }
@@ -229,11 +229,11 @@ export const Move: ComponentConstructor<MoveComponent> = ( Splide, Components, o
    *
    * @return The position corresponding with the index.
    */
-  function toPosition( index: number ): number {
-    let position = orient( totalSize( index - 1 ) - offset( index ) );
+  function toPosition(index: number): number {
+    let position = orient(totalSize(index - 1) - offset(index));
 
-    if ( options.trimSpace && Splide.is( SLIDE ) ) {
-      position = clamp( position, 0, orient( sliderSize( true ) - listSize() ) );
+    if (options.trimSpace && Splide.is(SLIDE)) {
+      position = clamp(position, 0, orient(sliderSize(true) - listSize()));
     }
 
     return position;
@@ -245,8 +245,8 @@ export const Move: ComponentConstructor<MoveComponent> = ( Splide, Components, o
    * @return The position of the list element.
    */
   function getPosition(): number {
-    const left = resolve( 'left' );
-    return rect( list )[ left ] - rect( track )[ left ] + orient( getPadding( false ) );
+    const left = resolve('left');
+    return rect(list)[left] - rect(track)[left] + orient(getPadding(false));
   }
 
   /**
@@ -256,29 +256,29 @@ export const Move: ComponentConstructor<MoveComponent> = ( Splide, Components, o
    *
    * @return The progress rate.
    */
-  function getRate( index?: number ): number {
-    const useIndex = ! isUndefined( index );
+  function getRate(index?: number): number {
+    const useIndex = !isUndefined(index);
     let rate;
 
-    if ( Splide.is( FADE ) ) {
-      rate = ( useIndex ? index : Splide.index ) / ( Splide.length - 1 );
+    if (Splide.is(FADE)) {
+      rate = (useIndex ? index : Splide.index) / (Splide.length - 1);
     } else {
-      const isLoop   = Splide.is( LOOP );
-      const position = orient( useIndex ? toPosition( index ) : getPosition() );
-      const min      = orient( getLimit( false ) );
-      const max      = orient( getLimit( true ) );
-      const size     = sliderSize();
-      const curr     = ( position - min ) % size;
-      const base     = isLoop ? size : max - min;
+      const isLoop = Splide.is(LOOP);
+      const position = orient(useIndex ? toPosition(index) : getPosition());
+      const min = orient(getLimit(false));
+      const max = orient(getLimit(true));
+      const size = sliderSize();
+      const curr = (position - min) % size;
+      const base = isLoop ? size : max - min;
 
-      rate = ( curr / base ) || 0;
+      rate = (curr / base) || 0;
 
-      if ( isLoop && rate < 0 ) {
+      if (isLoop && rate < 0) {
         rate += 1;
       }
     }
 
-    return clamp( rate, 0, 1 );
+    return clamp(rate, 0, 1);
   }
 
   /**
@@ -286,11 +286,11 @@ export const Move: ComponentConstructor<MoveComponent> = ( Splide, Components, o
    *
    * @param index - An index.
    */
-  function offset( index: number ): number {
+  function offset(index: number): number {
     const { focus } = options;
     return focus === 'center'
-      ? ( listSize() - slideSize( index, true ) ) / 2
-      : +focus * slideSize( index ) || 0;
+      ? (listSize() - slideSize(index, true)) / 2
+      : +focus * slideSize(index) || 0;
   }
 
   /**
@@ -300,8 +300,8 @@ export const Move: ComponentConstructor<MoveComponent> = ( Splide, Components, o
    *
    * @return The border number.
    */
-  function getLimit( max: boolean ): number {
-    return toPosition( max ? Components.Controller.getEnd() : 0 );
+  function getLimit(max: boolean): number {
+    return toPosition(max ? Components.Controller.getEnd() : 0);
   }
 
   /**
@@ -311,10 +311,10 @@ export const Move: ComponentConstructor<MoveComponent> = ( Splide, Components, o
    *
    * @return `true` if the slider can be shifted for the specified direction, or otherwise `false`.
    */
-  function canShift( backwards: boolean ): boolean {
-    const padding = getPadding( false );
-    const shifted = orient( shift( getPosition(), backwards ) );
-    return backwards ? shifted >= padding : shifted <= listSize( true ) - trackSize() + padding;
+  function canShift(backwards: boolean): boolean {
+    const padding = getPadding(false);
+    const shifted = orient(shift(getPosition(), backwards));
+    return backwards ? shifted >= padding : shifted <= listSize(true) - trackSize() + padding;
   }
 
   /**
@@ -325,9 +325,9 @@ export const Move: ComponentConstructor<MoveComponent> = ( Splide, Components, o
    *
    * @return `true` if the position exceeds the limit, or otherwise `false`.
    */
-  function exceededLimit( max?: boolean | undefined, position = getPosition() ): boolean {
-    const exceededMin = max !== true && orient( position ) < orient( getLimit( false ) );
-    const exceededMax = max !== false && orient( position ) > orient( getLimit( true ) );
+  function exceededLimit(max?: boolean | undefined, position = getPosition()): boolean {
+    const exceededMin = max !== true && orient(position) < orient(getLimit(false));
+    const exceededMax = max !== false && orient(position) > orient(getLimit(true));
     return exceededMin || exceededMax;
   }
 

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

@@ -1,108 +1,108 @@
 import { init, setSlidesRect } from '../../../test';
 
 
-describe( 'Move', () => {
-  test( 'can jump to the specific slide.', () => {
-    const splide = init( { width: 200, height: 100 } );
+describe('Move', () => {
+  test('can jump to the specific slide.', () => {
+    const splide = init({ width: 200, height: 100 });
     const { Move } = splide.Components;
     const { list } = splide.Components.Elements;
 
-    Move.jump( 2 );
-    expect( list.style.transform ).toBe( 'translateX(-400px)' );
+    Move.jump(2);
+    expect(list.style.transform).toBe('translateX(-400px)');
 
-    Move.jump( 4 );
-    expect( list.style.transform ).toBe( 'translateX(-800px)' );
+    Move.jump(4);
+    expect(list.style.transform).toBe('translateX(-800px)');
 
     splide.destroy();
-  } );
+  });
 
-  test( 'can set transform to the list element.', () => {
-    const splide = init( { width: 200, height: 100 } );
+  test('can set transform to the list element.', () => {
+    const splide = init({ width: 200, height: 100 });
     const { Move } = splide.Components;
     const { list } = splide.Components.Elements;
 
-    Move.translate( 100 );
-    expect( list.style.transform ).toBe( 'translateX(100px)' );
+    Move.translate(100);
+    expect(list.style.transform).toBe('translateX(100px)');
 
-    Move.translate( 500 );
-    expect( list.style.transform ).toBe( 'translateX(500px)' );
+    Move.translate(500);
+    expect(list.style.transform).toBe('translateX(500px)');
 
     splide.destroy();
-  } );
+  });
 
-  test( 'can loop the slider if it exceeds bounds.', () => {
-    const width    = 200;
-    const splide   = init( { type: 'loop', width, height: 100 } );
+  test('can loop the slider if it exceeds bounds.', () => {
+    const width = 200;
+    const splide = init({ type: 'loop', width, height: 100 });
     const { Move } = splide.Components;
     const { list } = splide.Components.Elements;
 
     // All clones do not have dimensions in this jest env. Forcibly sets them.
-    setSlidesRect( splide.Components.Slides.get().map( Slide => Slide.slide ), list, width, 1 );
-    Move.jump( 0 );
+    setSlidesRect(splide.Components.Slides.get().map(Slide => Slide.slide), list, width, 1);
+    Move.jump(0);
 
-    Move.translate( width );
-    expect( list.style.transform ).toBe( `translateX(${ -width * ( splide.length - 1 ) }px)` );
+    Move.translate(width);
+    expect(list.style.transform).toBe(`translateX(${ -width * (splide.length - 1) }px)`);
 
     splide.destroy();
-  } );
+  });
 
-  test( 'can cancel the transition.', () => {
-    const splide = init( { width: 200, height: 100 } );
+  test('can cancel the transition.', () => {
+    const splide = init({ width: 200, height: 100 });
     const { Move } = splide.Components;
     const { list } = splide.Components.Elements;
 
-    Move.move( 1, 1, -1, true );
+    Move.move(1, 1, -1, true);
 
-    expect( list.style.transition ).not.toBe( '' );
+    expect(list.style.transition).not.toBe('');
 
     Move.cancel();
-    expect( list.style.transition ).toBe( '' );
+    expect(list.style.transition).toBe('');
 
     splide.destroy();
-  } );
+  });
 
-  test( 'can convert the position to the closest index.', () => {
-    const splide   = init( { width: 200, height: 100 } );
+  test('can convert the position to the closest index.', () => {
+    const splide = init({ width: 200, height: 100 });
     const { Move } = splide.Components;
 
-    expect( Move.toIndex( 0 ) ).toBe( 0 );
-    expect( Move.toIndex( -99 ) ).toBe( 0 );
-    expect( Move.toIndex( -100 ) ).toBe( 1 );
-    expect( Move.toIndex( -200 ) ).toBe( 1 );
-    expect( Move.toIndex( -299 ) ).toBe( 1 );
-    expect( Move.toIndex( -300 ) ).toBe( 2 );
+    expect(Move.toIndex(0)).toBe(0);
+    expect(Move.toIndex(-99)).toBe(0);
+    expect(Move.toIndex(-100)).toBe(1);
+    expect(Move.toIndex(-200)).toBe(1);
+    expect(Move.toIndex(-299)).toBe(1);
+    expect(Move.toIndex(-300)).toBe(2);
 
     splide.destroy();
-  } );
+  });
 
-  test( 'can convert the index to the position.', () => {
-    const splide   = init( { width: 200, height: 100 } );
+  test('can convert the index to the position.', () => {
+    const splide = init({ width: 200, height: 100 });
     const { Move } = splide.Components;
 
-    expect( Move.toPosition( 0 ) ).toBe( -0 );
-    expect( Move.toPosition( 1 ) ).toBe( -200 );
-    expect( Move.toPosition( 2 ) ).toBe( -400 );
-    expect( Move.toPosition( 3 ) ).toBe( -600 );
+    expect(Move.toPosition(0)).toBe(-0);
+    expect(Move.toPosition(1)).toBe(-200);
+    expect(Move.toPosition(2)).toBe(-400);
+    expect(Move.toPosition(3)).toBe(-600);
 
     splide.destroy();
-  } );
+  });
 
-  test( 'can check the position exceeds bounds or not.', () => {
-    const width     = 200;
-    const splide    = init( { width, height: 100 } );
+  test('can check the position exceeds bounds or not.', () => {
+    const width = 200;
+    const splide = init({ width, height: 100 });
     const totalSize = width * splide.length;
-    const { Move }  = splide.Components;
+    const { Move } = splide.Components;
 
-    expect( Move.exceededLimit( false, -10 ) ).toBe( false );
-    expect( Move.exceededLimit( false, 10 ) ).toBe( true );
+    expect(Move.exceededLimit(false, -10)).toBe(false);
+    expect(Move.exceededLimit(false, 10)).toBe(true);
 
-    expect( Move.exceededLimit( true, - ( totalSize - width ) + 10 ) ).toBe( false );
-    expect( Move.exceededLimit( true, - ( totalSize - width ) - 10 ) ).toBe( true );
+    expect(Move.exceededLimit(true, -(totalSize - width) + 10)).toBe(false);
+    expect(Move.exceededLimit(true, -(totalSize - width) - 10)).toBe(true);
 
-    Move.translate( 10 );
+    Move.translate(10);
 
-    expect( Move.exceededLimit() ).toBe( true );
+    expect(Move.exceededLimit()).toBe(true);
 
     splide.destroy();
-  } );
-} );
+  });
+});

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

@@ -1,51 +1,51 @@
 import { init } from '../../../test';
 
 
-describe( 'Move#getRate()', () => {
-  test( 'can return the current progress rate.', () => {
+describe('Move#getRate()', () => {
+  test('can return the current progress rate.', () => {
     // To make the calculation simple, set the length to 11 so that the base number becomes 10.
-    const splide = init( { width: 200, speed: 0 }, { length: 11 } );
+    const splide = init({ width: 200, speed: 0 }, { length: 11 });
     const { getRate, translate } = splide.Components.Move;
 
-    translate( -100 ); // Middle in the first slide
-    expect( getRate() ).toBe( 0.05 );
+    translate(-100); // Middle in the first slide
+    expect(getRate()).toBe(0.05);
 
-    translate( -150 );
-    expect( getRate() ).toBe( 0.075 );
+    translate(-150);
+    expect(getRate()).toBe(0.075);
 
-    translate( -200 ); // On the first slide
-    expect( getRate() ).toBe( 0.1 );
+    translate(-200); // On the first slide
+    expect(getRate()).toBe(0.1);
 
-    translate( -250 );
-    expect( getRate() ).toBe( 0.125 );
+    translate(-250);
+    expect(getRate()).toBe(0.125);
 
     splide.destroy();
-  } );
+  });
 
-  test( 'can return 1 when the current index is the end index.', () => {
-    const splide = init( { width: 200, speed: 0, perPage: 3 } );
+  test('can return 1 when the current index is the end index.', () => {
+    const splide = init({ width: 200, speed: 0, perPage: 3 });
     const { getRate } = splide.Components.Move;
     const end = splide.Components.Controller.getEnd();
 
-    splide.go( end );
-    expect( getRate() ).toBe( 1 );
+    splide.go(end);
+    expect(getRate()).toBe(1);
 
     splide.destroy();
-  } );
+  });
 
-  test( 'should work for fade carousels.', () => {
-    const splide = init( { width: 200, speed: 0, type: 'fade' } );
+  test('should work for fade carousels.', () => {
+    const splide = init({ width: 200, speed: 0, type: 'fade' });
     const { length } = splide;
     const { getRate } = splide.Components.Move;
 
-    expect( getRate() ).toBe( 0 );
+    expect(getRate()).toBe(0);
 
-    splide.go( 1 );
-    expect( getRate() ).toBe( splide.index / ( length - 1 ) );
+    splide.go(1);
+    expect(getRate()).toBe(splide.index / (length - 1));
 
-    splide.go( length - 1 );
-    expect( getRate() ).toBe( splide.index / ( length - 1 ) );
+    splide.go(length - 1);
+    expect(getRate()).toBe(splide.index / (length - 1));
 
     splide.destroy();
-  } );
-} );
+  });
+});

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

@@ -3,53 +3,53 @@ import { IDLE, MOVING } from '../../../constants/states';
 import { fire, init } from '../../../test';
 
 
-describe( 'Move#move()', () => {
-  test( 'can move the slider with the transition component.', () => {
-    const splide = init( { width: 200, height: 100 } );
+describe('Move#move()', () => {
+  test('can move the slider with the transition component.', () => {
+    const splide = init({ width: 200, height: 100 });
     const { Move } = splide.Components;
     const { list } = splide.Components.Elements;
 
-    Move.move( 1, 1, -1, true );
-    fire( list, 'transitionend' );
-    expect( list.style.transform ).toBe( 'translateX(-200px)' );
+    Move.move(1, 1, -1, true);
+    fire(list, 'transitionend');
+    expect(list.style.transform).toBe('translateX(-200px)');
 
-    Move.move( 2, 2, -1, true );
-    fire( list, 'transitionend' );
-    expect( list.style.transform ).toBe( 'translateX(-400px)' );
-  } );
+    Move.move(2, 2, -1, true);
+    fire(list, 'transitionend');
+    expect(list.style.transform).toBe('translateX(-400px)');
+  });
 
-  test( 'can change the state.', () => {
-    const splide = init( { width: 200, height: 100 } );
+  test('can change the state.', () => {
+    const splide = init({ width: 200, height: 100 });
     const { Move } = splide.Components;
     const { list } = splide.Components.Elements;
 
-    Move.move( 1, 1, -1, true );
-    expect( splide.state.is( MOVING ) ).toBe( true );
+    Move.move(1, 1, -1, true);
+    expect(splide.state.is(MOVING)).toBe(true);
 
-    fire( list, 'transitionend' );
-    expect( splide.state.is( IDLE ) ).toBe( true );
-  } );
+    fire(list, 'transitionend');
+    expect(splide.state.is(IDLE)).toBe(true);
+  });
 
-  test( 'can emit events.', done => {
-    const splide = init( { width: 200, height: 100 } );
+  test('can emit events.', done => {
+    const splide = init({ width: 200, height: 100 });
     const { Move } = splide.Components;
     const { list } = splide.Components.Elements;
 
-    splide.on( EVENT_MOVE, ( index, prev, dest ) => {
-      expect( index ).toBe( 2 );
-      expect( prev ).toBe( 1 );
-      expect( dest ).toBe( 3 );
-    } );
+    splide.on(EVENT_MOVE, (index, prev, dest) => {
+      expect(index).toBe(2);
+      expect(prev).toBe(1);
+      expect(dest).toBe(3);
+    });
 
-    splide.on( EVENT_MOVED, ( index, prev, dest ) => {
-      expect( index ).toBe( 2 );
-      expect( prev ).toBe( 1 );
-      expect( dest ).toBe( 3 );
+    splide.on(EVENT_MOVED, (index, prev, dest) => {
+      expect(index).toBe(2);
+      expect(prev).toBe(1);
+      expect(dest).toBe(3);
 
       done();
-    } );
+    });
 
-    Move.move( 3, 2, 1, true );
-    fire( list, 'transitionend' );
-  } );
-} );
+    Move.move(3, 2, 1, true);
+    fire(list, 'transitionend');
+  });
+});

src/js/components/Pagination/Pagination.ts

@@ -45,7 +45,7 @@ import {
  */
 export interface PaginationComponent extends BaseComponent {
   readonly items: PaginationItem[];
-  getAt( index: number ): PaginationItem;
+  getAt(index: number): PaginationItem;
   update(): void;
 }
 
@@ -82,7 +82,7 @@ export interface PaginationItem {
  *
  * @return A Pagination component object.
  */
-export const Pagination: ComponentConstructor<PaginationComponent> = ( Splide, Components, options, event ) => {
+export const Pagination: ComponentConstructor<PaginationComponent> = (Splide, Components, options, event) => {
   const { on, emit, bind } = event;
   const { Slides, Elements, Controller } = Components;
   const { hasFocus, getIndex, go } = Controller;
@@ -109,16 +109,16 @@ export const Pagination: ComponentConstructor<PaginationComponent> = ( Splide, C
    */
   function mount(): void {
     destroy();
-    on( [ EVENT_UPDATED, EVENT_REFRESH, EVENT_END_INDEX_CHANGED ], mount );
+    on([EVENT_UPDATED, EVENT_REFRESH, EVENT_END_INDEX_CHANGED], mount);
 
     const { pagination: enabled = true } = options;
-    placeholder && display( placeholder, enabled ? '' : 'none' );
+    placeholder && display(placeholder, enabled ? '' : 'none');
 
-    if ( enabled ) {
-      on( [ EVENT_MOVE, EVENT_SCROLL, EVENT_SCROLLED ], update );
+    if (enabled) {
+      on([EVENT_MOVE, EVENT_SCROLL, EVENT_SCROLLED], update);
       createPagination();
       update();
-      emit( EVENT_PAGINATION_MOUNTED, { list, items }, getAt( Splide.index ) );
+      emit(EVENT_PAGINATION_MOUNTED, { list, items }, getAt(Splide.index));
     }
   }
 
@@ -126,10 +126,10 @@ export const Pagination: ComponentConstructor<PaginationComponent> = ( Splide, C
    * Destroys the component.
    */
   function destroy(): void {
-    if ( list ) {
-      removeNode( placeholder ? slice( list.children ) : list );
-      removeClass( list, paginationClasses );
-      empty( items );
+    if (list) {
+      removeNode(placeholder ? slice(list.children) : list);
+      removeClass(list, paginationClasses);
+      empty(items);
       list = null;
     }
 
@@ -142,32 +142,32 @@ export const Pagination: ComponentConstructor<PaginationComponent> = ( Splide, C
   function createPagination(): void {
     const { length } = Splide;
     const { classes, i18n, perPage, paginationKeyboard = true } = options;
-    const max = hasFocus() ? Controller.getEnd() + 1 : ceil( length / perPage );
+    const max = hasFocus() ? Controller.getEnd() + 1 : ceil(length / perPage);
     const dir = getDirection();
 
-    list = placeholder || create( 'ul', classes.pagination, Elements.track.parentElement );
+    list = placeholder || create('ul', classes.pagination, Elements.track.parentElement);
 
-    addClass( list, ( paginationClasses = `${ CLASS_PAGINATION }--${ dir }` ) );
-    setAttribute( list, ROLE, 'tablist' );
-    setAttribute( list, ARIA_LABEL, i18n.select );
-    setAttribute( list, ARIA_ORIENTATION, dir === TTB ? 'vertical' : '' );
+    addClass(list, (paginationClasses = `${ CLASS_PAGINATION }--${ dir }`));
+    setAttribute(list, ROLE, 'tablist');
+    setAttribute(list, ARIA_LABEL, i18n.select);
+    setAttribute(list, ARIA_ORIENTATION, dir === TTB ? 'vertical' : '');
 
-    for ( let i = 0; i < max; i++ ) {
-      const li       = create( 'li', null, list );
-      const button   = create( 'button', { class: classes.page, type: 'button' }, li );
-      const controls = Slides.getIn( i ).map( Slide => Slide.slide.id );
-      const text     = ! hasFocus() && perPage > 1 ? i18n.pageX : i18n.slideX;
+    for (let i = 0; i < max; i++) {
+      const li = create('li', null, list);
+      const button = create('button', { class: classes.page, type: 'button' }, li);
+      const controls = Slides.getIn(i).map(Slide => Slide.slide.id);
+      const text = !hasFocus() && perPage > 1 ? i18n.pageX : i18n.slideX;
 
-      bind( button, 'click', () => { go( `>${ i }` ) } );
-      paginationKeyboard && bind( button, 'keydown', apply( onKeydown, i ) );
+      bind(button, 'click', () => go(`>${ i }`));
+      paginationKeyboard && bind(button, 'keydown', apply(onKeydown, i));
 
-      setAttribute( li, ROLE, 'presentation' );
-      setAttribute( button, ROLE, 'tab' );
-      setAttribute( button, ARIA_CONTROLS, controls.join( ' ' ) );
-      setAttribute( button, ARIA_LABEL, format( text, i + 1 ) );
-      setAttribute( button, TAB_INDEX, -1 );
+      setAttribute(li, ROLE, 'presentation');
+      setAttribute(button, ROLE, 'tab');
+      setAttribute(button, ARIA_CONTROLS, controls.join(' '));
+      setAttribute(button, ARIA_LABEL, format(text, i + 1));
+      setAttribute(button, TAB_INDEX, -1);
 
-      items.push( { li, button, page: i } );
+      items.push({ li, button, page: i });
     }
   }
 
@@ -179,29 +179,29 @@ export const Pagination: ComponentConstructor<PaginationComponent> = ( Splide, C
    * @param page - A page index.
    * @param e    - A KeyboardEvent object.
    */
-  function onKeydown( page: number, e: KeyboardEvent ): void {
+  function onKeydown(page: number, e: KeyboardEvent): void {
     const { length } = items;
     const { key } = e;
     const dir = getDirection();
 
     let nextPage = -1;
 
-    if ( key === resolve( ARROW_RIGHT, false, dir ) ) {
+    if (key === resolve(ARROW_RIGHT, false, dir)) {
       nextPage = ++page % length;
-    } else if ( key === resolve( ARROW_LEFT, false, dir ) ) {
-      nextPage = ( --page + length ) % length;
-    } else if ( key === 'Home' ) {
+    } else if (key === resolve(ARROW_LEFT, false, dir)) {
+      nextPage = (--page + length) % length;
+    } else if (key === 'Home') {
       nextPage = 0;
-    } else if ( key === 'End' ) {
+    } else if (key === 'End') {
       nextPage = length - 1;
     }
 
-    const item = items[ nextPage ];
+    const item = items[nextPage];
 
-    if ( item ) {
-      focus( item.button );
-      go( `>${ nextPage }` );
-      prevent( e, true );
+    if (item) {
+      focus(item.button);
+      go(`>${ nextPage }`);
+      prevent(e, true);
     }
   }
 
@@ -221,32 +221,32 @@ export const Pagination: ComponentConstructor<PaginationComponent> = ( Splide, C
    *
    * @return A pagination item object if available, or otherwise `undefined`.
    */
-  function getAt( index: number ): PaginationItem | undefined {
-    return items[ Controller.toPage( index ) ];
+  function getAt(index: number): PaginationItem | undefined {
+    return items[Controller.toPage(index)];
   }
 
   /**
    * Updates the pagination status.
    */
   function update(): void {
-    const prev = getAt( getIndex( true ) );
-    const curr = getAt( getIndex() );
+    const prev = getAt(getIndex(true));
+    const curr = getAt(getIndex());
 
-    if ( prev ) {
+    if (prev) {
       const { button } = prev;
-      removeClass( button, CLASS_ACTIVE );
-      removeAttribute( button, ARIA_SELECTED );
-      setAttribute( button, TAB_INDEX, -1 );
+      removeClass(button, CLASS_ACTIVE);
+      removeAttribute(button, ARIA_SELECTED);
+      setAttribute(button, TAB_INDEX, -1);
     }
 
-    if ( curr ) {
+    if (curr) {
       const { button } = curr;
-      addClass( button, CLASS_ACTIVE );
-      setAttribute( button, ARIA_SELECTED, true );
-      setAttribute( button, TAB_INDEX, '' );
+      addClass(button, CLASS_ACTIVE);
+      setAttribute(button, ARIA_SELECTED, true);
+      setAttribute(button, TAB_INDEX, '');
     }
 
-    emit( EVENT_PAGINATION_UPDATED, { list, items }, prev, curr );
+    emit(EVENT_PAGINATION_UPDATED, { list, items }, prev, curr);
   }
 
   return {

src/js/components/Pagination/test/direction.test.ts

@@ -2,41 +2,41 @@ import { CLASS_PAGINATION } from '../../../constants/classes';
 import { init } from '../../../test';
 
 
-describe( 'Pagination direction', () => {
-  test( 'should follow the `direction` option unless the user provides `paginationDirection`.', () => {
-    init( { direction: 'ttb', height: 1000 } );
-    const pagination = document.querySelector( `.${ CLASS_PAGINATION }` );
-
-    expect( pagination.classList.contains( `${ CLASS_PAGINATION }--ttb` ) ).toBe( true );
-    expect( pagination.getAttribute( 'aria-orientation' ) ).toBe( 'vertical' );
-  } );
-
-  test( 'should follow the `paginationDirection`.', () => {
-    init( { direction: 'ttb', paginationDirection: 'rtl', height: 1000 } );
-    const pagination = document.querySelector( `.${ CLASS_PAGINATION }` );
-    expect( pagination.classList.contains( `${ CLASS_PAGINATION }--rtl` ) ).toBe( true );
-    expect( pagination.getAttribute( 'aria-orientation' ) ).toBeNull();
-  } );
-
-  test( 'should follow the `direction` option when it is updated.', () => {
+describe('Pagination direction', () => {
+  test('should follow the `direction` option unless the user provides `paginationDirection`.', () => {
+    init({ direction: 'ttb', height: 1000 });
+    const pagination = document.querySelector(`.${ CLASS_PAGINATION }`);
+
+    expect(pagination.classList.contains(`${ CLASS_PAGINATION }--ttb`)).toBe(true);
+    expect(pagination.getAttribute('aria-orientation')).toBe('vertical');
+  });
+
+  test('should follow the `paginationDirection`.', () => {
+    init({ direction: 'ttb', paginationDirection: 'rtl', height: 1000 });
+    const pagination = document.querySelector(`.${ CLASS_PAGINATION }`);
+    expect(pagination.classList.contains(`${ CLASS_PAGINATION }--rtl`)).toBe(true);
+    expect(pagination.getAttribute('aria-orientation')).toBeNull();
+  });
+
+  test('should follow the `direction` option when it is updated.', () => {
     const splide = init();
 
-    let pagination = document.querySelector( `.${ CLASS_PAGINATION }` );
-    expect( pagination.classList.contains( `${ CLASS_PAGINATION }--ltr` ) ).toBe( true );
+    let pagination = document.querySelector(`.${ CLASS_PAGINATION }`);
+    expect(pagination.classList.contains(`${ CLASS_PAGINATION }--ltr`)).toBe(true);
 
     splide.options = { direction: 'rtl' };
-    pagination = document.querySelector( `.${ CLASS_PAGINATION }` );
-    expect( pagination.classList.contains( `${ CLASS_PAGINATION }--rtl` ) ).toBe( true );
-  } );
+    pagination = document.querySelector(`.${ CLASS_PAGINATION }`);
+    expect(pagination.classList.contains(`${ CLASS_PAGINATION }--rtl`)).toBe(true);
+  });
 
-  test( 'should follow the `paginationDirection` option when it is updated.', () => {
-    const splide = init( { paginationDirection: 'ttb' } );
+  test('should follow the `paginationDirection` option when it is updated.', () => {
+    const splide = init({ paginationDirection: 'ttb' });
 
-    let pagination = document.querySelector( `.${ CLASS_PAGINATION }` );
-    expect( pagination.classList.contains( `${ CLASS_PAGINATION }--ttb` ) ).toBe( true );
+    let pagination = document.querySelector(`.${ CLASS_PAGINATION }`);
+    expect(pagination.classList.contains(`${ CLASS_PAGINATION }--ttb`)).toBe(true);
 
     splide.options = { paginationDirection: 'ltr' };
-    pagination = document.querySelector( `.${ CLASS_PAGINATION }` );
-    expect( pagination.classList.contains( `${ CLASS_PAGINATION }--ltr` ) ).toBe( true );
-  } );
-} );
+    pagination = document.querySelector(`.${ CLASS_PAGINATION }`);
+    expect(pagination.classList.contains(`${ CLASS_PAGINATION }--ltr`)).toBe(true);
+  });
+});

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

@@ -2,92 +2,92 @@ import { CLASS_ACTIVE, CLASS_PAGINATION, CLASS_PAGINATION_PAGE } from '../../../
 import { fire, init } from '../../../test';
 
 
-describe( 'Pagination', () => {
-  test( 'can create pagination.', () => {
-    const splide     = init();
-    const pagination = document.querySelector( `.${ CLASS_PAGINATION }` );
-    const items      = document.getElementsByClassName( CLASS_PAGINATION_PAGE );
+describe('Pagination', () => {
+  test('can create pagination.', () => {
+    const splide = init();
+    const pagination = document.querySelector(`.${ CLASS_PAGINATION }`);
+    const items = document.getElementsByClassName(CLASS_PAGINATION_PAGE);
 
-    expect( pagination.children.length ).toBe( splide.length );
-    expect( items.length ).toBe( splide.length );
-  } );
+    expect(pagination.children.length).toBe(splide.length);
+    expect(items.length).toBe(splide.length);
+  });
 
-  test( 'can create pagination according to the perPage option.', () => {
-    const splide = init( { perPage: 3 } );
-    const items  = document.getElementsByClassName( CLASS_PAGINATION_PAGE );
+  test('can create pagination according to the perPage option.', () => {
+    const splide = init({ perPage: 3 });
+    const items = document.getElementsByClassName(CLASS_PAGINATION_PAGE);
 
-    expect( items.length ).toBe( Math.ceil( splide.length / 3 ) );
-  } );
+    expect(items.length).toBe(Math.ceil(splide.length / 3));
+  });
 
-  test( 'should not paginate if the `focus` option is available.', () => {
-    const splide = init( { perPage: 3, focus: 'center' } );
-    const items  = document.getElementsByClassName( CLASS_PAGINATION_PAGE );
+  test('should not paginate if the `focus` option is available.', () => {
+    const splide = init({ perPage: 3, focus: 'center' });
+    const items = document.getElementsByClassName(CLASS_PAGINATION_PAGE);
 
-    expect( items.length ).toBe( splide.length );
-  } );
+    expect(items.length).toBe(splide.length);
+  });
 
-  test( 'should omit unnecessary items when `focus` and `omitEnd` options are enabled.', () => {
-    const splide = init( { perPage: 3, focus: 0, omitEnd: true } );
-    const items  = document.getElementsByClassName( CLASS_PAGINATION_PAGE );
+  test('should omit unnecessary items when `focus` and `omitEnd` options are enabled.', () => {
+    const splide = init({ perPage: 3, focus: 0, omitEnd: true });
+    const items = document.getElementsByClassName(CLASS_PAGINATION_PAGE);
 
-    expect( items.length ).not.toBe( splide.length );
-    expect( items.length ).toBe( splide.Components.Controller.getEnd() + 1 );
-  } );
+    expect(items.length).not.toBe(splide.length);
+    expect(items.length).toBe(splide.Components.Controller.getEnd() + 1);
+  });
 
-  test( 'can move the slider when the item is clicked.', () => {
-    const splide = init( { speed: 0 } );
-    const items  = document.getElementsByClassName( CLASS_PAGINATION_PAGE );
+  test('can move the slider when the item is clicked.', () => {
+    const splide = init({ speed: 0 });
+    const items = document.getElementsByClassName(CLASS_PAGINATION_PAGE);
 
-    fire( items[ 1 ], 'click' );
-    expect( splide.index ).toBe( 1 );
+    fire(items[1], 'click');
+    expect(splide.index).toBe(1);
 
-    fire( items[ 5 ], 'click' );
-    expect( splide.index ).toBe( 5 );
-  } );
+    fire(items[5], 'click');
+    expect(splide.index).toBe(5);
+  });
 
-  test( 'can move the slider to the end index when the last item is clicked.', () => {
-    const splide = init( { perPage: 3 } );
-    const items  = document.getElementsByClassName( CLASS_PAGINATION_PAGE );
+  test('can move the slider to the end index when the last item is clicked.', () => {
+    const splide = init({ perPage: 3 });
+    const items = document.getElementsByClassName(CLASS_PAGINATION_PAGE);
 
-    fire( items[ items.length - 1 ], 'click' );
-    expect( splide.index ).toBe( splide.Components.Controller.getEnd() );
-  } );
+    fire(items[items.length - 1], 'click');
+    expect(splide.index).toBe(splide.Components.Controller.getEnd());
+  });
 
-  test( 'can update status classes by the index.', () => {
+  test('can update status classes by the index.', () => {
     const splide = init();
-    const items  = document.getElementsByClassName( CLASS_PAGINATION_PAGE );
+    const items = document.getElementsByClassName(CLASS_PAGINATION_PAGE);
 
-    expect( items[ 0 ].classList.contains( CLASS_ACTIVE ) ).toBe( true );
-    expect( items[ 0 ].getAttribute( 'aria-selected' ) ).toBe( 'true' );
+    expect(items[0].classList.contains(CLASS_ACTIVE)).toBe(true);
+    expect(items[0].getAttribute('aria-selected')).toBe('true');
 
-    splide.go( 2 );
+    splide.go(2);
 
-    expect( items[ 0 ].classList.contains( CLASS_ACTIVE ) ).toBe( false );
-    expect( items[ 0 ].getAttribute( 'aria-selected' ) ).toBeNull();
-    expect( items[ 2 ].classList.contains( CLASS_ACTIVE ) ).toBe( true );
-    expect( items[ 2 ].getAttribute( 'aria-selected' ) ).toBe( 'true' );
-  } );
+    expect(items[0].classList.contains(CLASS_ACTIVE)).toBe(false);
+    expect(items[0].getAttribute('aria-selected')).toBeNull();
+    expect(items[2].classList.contains(CLASS_ACTIVE)).toBe(true);
+    expect(items[2].getAttribute('aria-selected')).toBe('true');
+  });
 
-  test( 'can update status classes by the page.', () => {
-    const splide = init( { perPage: 3, speed: 0 } );
-    const items  = document.getElementsByClassName( CLASS_PAGINATION_PAGE );
+  test('can update status classes by the page.', () => {
+    const splide = init({ perPage: 3, speed: 0 });
+    const items = document.getElementsByClassName(CLASS_PAGINATION_PAGE);
 
-    splide.go( 4 ); // page: 1
+    splide.go(4); // page: 1
 
-    expect( items[ 1 ].classList.contains( CLASS_ACTIVE ) ).toBe( true );
-    expect( items[ 1 ].getAttribute( 'aria-selected' ) ).toBe( 'true' );
+    expect(items[1].classList.contains(CLASS_ACTIVE)).toBe(true);
+    expect(items[1].getAttribute('aria-selected')).toBe('true');
 
-    splide.go( 7 ); // end page
+    splide.go(7); // end page
 
-    expect( items[ 3 ].classList.contains( CLASS_ACTIVE ) ).toBe( true );
-    expect( items[ 3 ].getAttribute( 'aria-selected' ) ).toBe( 'true' );
-  } );
+    expect(items[3].classList.contains(CLASS_ACTIVE)).toBe(true);
+    expect(items[3].getAttribute('aria-selected')).toBe('true');
+  });
 
-  test( 'should remove the pagination on destroy.', () => {
+  test('should remove the pagination on destroy.', () => {
     const splide = init();
     splide.destroy();
 
-    const pagination = document.querySelector( `.${ CLASS_PAGINATION }` );
-    expect( pagination ).toBeNull();
-  } );
-} );
+    const pagination = document.querySelector(`.${ CLASS_PAGINATION }`);
+    expect(pagination).toBeNull();
+  });
+});

src/js/components/Pagination/test/placeholder.test.ts

@@ -2,7 +2,7 @@ import { init } from '../../../test';
 import { fail } from 'assert';
 
 
-describe( 'Pagination', () => {
+describe('Pagination', () => {
   const html = `
     <section class="splide" aria-label="Placeholder for pagination">
       <ul class="splide__pagination pagination-placeholder"></ul>
@@ -17,32 +17,32 @@ describe( 'Pagination', () => {
     </section>
   `;
 
-  test( 'can use a placeholder if provided.', () => {
-    const splide      = init( {}, { html } );
-    const placeholder = document.querySelector( '.pagination-placeholder' );
+  test('can use a placeholder if provided.', () => {
+    const splide = init({}, { html });
+    const placeholder = document.querySelector('.pagination-placeholder');
 
-    expect( placeholder ).not.toBeUndefined();
-    expect( splide.Components.Elements.pagination === placeholder ).toBe( true );
+    expect(placeholder).not.toBeUndefined();
+    expect(splide.Components.Elements.pagination === placeholder).toBe(true);
 
-    const { items }    = splide.Components.Pagination;
+    const { items } = splide.Components.Pagination;
     const { children } = placeholder;
 
-    expect( items.length === children.length ).toBe( true );
-    expect( items[ 0 ].li === children[ 0 ] ).toBe( true );
-  } );
+    expect(items.length === children.length).toBe(true);
+    expect(items[0].li === children[0]).toBe(true);
+  });
 
-  test( 'should toggle a placeholder according to `pagination` options.', () => {
-    const splide      = init( { pagination: false }, { html } );
-    const placeholder = document.querySelector( '.pagination-placeholder' );
+  test('should toggle a placeholder according to `pagination` options.', () => {
+    const splide = init({ pagination: false }, { html });
+    const placeholder = document.querySelector('.pagination-placeholder');
 
-    if ( placeholder instanceof HTMLElement ) {
-      expect( placeholder.style.display ).toBe( 'none' );
+    if (placeholder instanceof HTMLElement) {
+      expect(placeholder.style.display).toBe('none');
 
       // Update options to show the pagination.
       splide.options = { pagination: true };
-      expect( placeholder.style.display ).toBe( '' );
+      expect(placeholder.style.display).toBe('');
     } else {
       fail();
     }
-  } );
-} );
+  });
+});

src/js/components/Pagination/test/tab.test.ts

@@ -7,117 +7,117 @@ import { Options } from '../../../types';
  * - `aria-selected` is tested on general.test.
  * - `aria-labelledby` is not necessary since each tabpanel has its own `aria-label`.
  */
-describe( 'Pagination', () => {
-  test( 'can set the `tablist` role to the pagination root.', () => {
+describe('Pagination', () => {
+  test('can set the `tablist` role to the pagination root.', () => {
     init();
-    const pagination = document.querySelector( `.${ CLASS_PAGINATION }` );
-    expect( pagination.getAttribute( 'role' ) ).toBe( 'tablist' );
-  } );
+    const pagination = document.querySelector(`.${ CLASS_PAGINATION }`);
+    expect(pagination.getAttribute('role')).toBe('tablist');
+  });
 
-  test( 'can set the `tab` role to each item in pagination.', () => {
+  test('can set the `tab` role to each item in pagination.', () => {
     init();
-    const items = Array.from( document.getElementsByClassName( CLASS_PAGINATION_PAGE ) );
+    const items = Array.from(document.getElementsByClassName(CLASS_PAGINATION_PAGE));
 
-    items.forEach( item => {
-      expect( item.getAttribute( 'role' ) ).toBe( 'tab' );
-    } );
+    items.forEach(item => {
+      expect(item.getAttribute('role')).toBe('tab');
+    });
 
-    expect( items.length ).toBeGreaterThan( 0 );
-  } );
+    expect(items.length).toBeGreaterThan(0);
+  });
 
-  test( 'can set the `aria-label` role to each item in pagination.', () => {
-    const items = Array.from( document.getElementsByClassName( CLASS_PAGINATION_PAGE ) );
+  test('can set the `aria-label` role to each item in pagination.', () => {
+    const items = Array.from(document.getElementsByClassName(CLASS_PAGINATION_PAGE));
 
-    items.forEach( ( item, index ) => {
-      expect( item.getAttribute( 'aria-label' ) ).toBe( `Go to slide ${ index + 1 }` );
-    } );
-  } );
+    items.forEach((item, index) => {
+      expect(item.getAttribute('aria-label')).toBe(`Go to slide ${ index + 1 }`);
+    });
+  });
 
-  test( 'can set `aria-controls="target slide ID"` to each item in pagination.', () => {
+  test('can set `aria-controls="target slide ID"` to each item in pagination.', () => {
     const splide = init();
-    const items  = Array.from( document.getElementsByClassName( CLASS_PAGINATION_PAGE ) );
+    const items = Array.from(document.getElementsByClassName(CLASS_PAGINATION_PAGE));
     const Slides = splide.Components.Slides;
 
-    items.forEach( ( item, index ) => {
-      const Slide = Slides.getAt( index );
+    items.forEach((item, index) => {
+      const Slide = Slides.getAt(index);
 
-      if ( Slide ) {
-        expect( item.getAttribute( 'aria-controls' ) ).toBe( Slide.slide.id );
+      if (Slide) {
+        expect(item.getAttribute('aria-controls')).toBe(Slide.slide.id);
       } else {
         fail();
       }
-    } );
-  } );
-
-  describe.each( [
-    [ 'ltr', 'ArrowRight', 'ArrowLeft' ],
-    [ 'rtl', 'ArrowLeft', 'ArrowRight' ],
-    [ 'ttb', 'ArrowDown', 'ArrowUp' ],
-  ] )( 'in %s mode.', (
+    });
+  });
+
+  describe.each([
+    ['ltr', 'ArrowRight', 'ArrowLeft'],
+    ['rtl', 'ArrowLeft', 'ArrowRight'],
+    ['ttb', 'ArrowDown', 'ArrowUp'],
+  ])('in %s mode.', (
     direction,
     nextKey,
-    prevKey
+    prevKey,
   ) => {
-    test( 'can move focus by arrow keys and activate the corresponded slide', () => {
-      const splide = init( { speed: 0, direction: direction as Options[ 'direction' ], height: 300 } );
-      const items  = document.getElementsByClassName( CLASS_PAGINATION_PAGE );
-
-      fire( items[ 0 ], 'keydown', { key: nextKey } );
-      expect( items[ 1 ] === document.activeElement ).toBe( true );
-      expect( splide.index ).toBe( 1 );
-
-      fire( items[ 1 ], 'keydown', { key: nextKey } );
-      expect( items[ 2 ] === document.activeElement ).toBe( true );
-      expect( splide.index ).toBe( 2 );
-
-      fire( items[ 2 ], 'keydown', { key: prevKey } );
-      expect( items[ 1 ] === document.activeElement ).toBe( true );
-      expect( splide.index ).toBe( 1 );
-    } );
-
-    test( 'can loop focus by arrow keys.', () => {
-      const splide = init( { speed: 0, direction: direction as Options[ 'direction' ], height: 300 } );
-      const items  = document.getElementsByClassName( CLASS_PAGINATION_PAGE );
-      const end    = splide.length - 1;
-
-      fire( items[ 0 ], 'keydown', { key: prevKey } );
-      expect( items[ end ] === document.activeElement ).toBe( true );
-      expect( splide.index ).toBe( end );
-
-      fire( items[ end ], 'keydown', { key: nextKey } );
-      expect( items[ 0 ] === document.activeElement ).toBe( true );
-      expect( splide.index ).toBe( 0 );
-    } );
-
-    test( 'can focus the first slide by  and the last slide by End.', () => {
-      const splide = init( { speed: 0, direction: direction as Options[ 'direction' ], height: 300 } );
-      const items  = document.getElementsByClassName( CLASS_PAGINATION_PAGE );
-      const end    = splide.length - 1;
-
-      fire( items[ 0 ], 'keydown', { key: 'End' } );
-      expect( items[ end ] === document.activeElement ).toBe( true );
-      expect( splide.index ).toBe( end );
-
-      fire( items[ end ], 'keydown', { key: 'Home' } );
-      expect( items[ 0 ] === document.activeElement ).toBe( true );
-      expect( splide.index ).toBe( 0 );
-    } );
-
-    test( 'can set proper orientation according to the direction.', () => {
-      init( { speed: 0, direction: direction as Options[ 'direction' ], height: 300 } );
-      const pagination = document.querySelector( `.${ CLASS_PAGINATION }` );
-
-      expect( pagination.getAttribute( 'aria-orientation' ) )
-        .toBe( direction === 'ttb' ? 'vertical' : null );
-    } );
-  } );
-
-  test( 'should not activate keyboard shortcuts if `paginationKeyboard` option is disabled.', () => {
-    const splide = init( { paginationKeyboard: false, speed: 0 } );
-    const items  = document.getElementsByClassName( CLASS_PAGINATION_PAGE );
-
-    fire( items[ 0 ], 'keydown', { key: 'ArrowRight' } );
-    expect( items[ 1 ] === document.activeElement ).toBe( false );
-    expect( splide.index ).toBe( 0 );
-  } );
-} );
+    test('can move focus by arrow keys and activate the corresponded slide', () => {
+      const splide = init({ speed: 0, direction: direction as Options[ 'direction' ], height: 300 });
+      const items = document.getElementsByClassName(CLASS_PAGINATION_PAGE);
+
+      fire(items[0], 'keydown', { key: nextKey });
+      expect(items[1] === document.activeElement).toBe(true);
+      expect(splide.index).toBe(1);
+
+      fire(items[1], 'keydown', { key: nextKey });
+      expect(items[2] === document.activeElement).toBe(true);
+      expect(splide.index).toBe(2);
+
+      fire(items[2], 'keydown', { key: prevKey });
+      expect(items[1] === document.activeElement).toBe(true);
+      expect(splide.index).toBe(1);
+    });
+
+    test('can loop focus by arrow keys.', () => {
+      const splide = init({ speed: 0, direction: direction as Options[ 'direction' ], height: 300 });
+      const items = document.getElementsByClassName(CLASS_PAGINATION_PAGE);
+      const end = splide.length - 1;
+
+      fire(items[0], 'keydown', { key: prevKey });
+      expect(items[end] === document.activeElement).toBe(true);
+      expect(splide.index).toBe(end);
+
+      fire(items[end], 'keydown', { key: nextKey });
+      expect(items[0] === document.activeElement).toBe(true);
+      expect(splide.index).toBe(0);
+    });
+
+    test('can focus the first slide by  and the last slide by End.', () => {
+      const splide = init({ speed: 0, direction: direction as Options[ 'direction' ], height: 300 });
+      const items = document.getElementsByClassName(CLASS_PAGINATION_PAGE);
+      const end = splide.length - 1;
+
+      fire(items[0], 'keydown', { key: 'End' });
+      expect(items[end] === document.activeElement).toBe(true);
+      expect(splide.index).toBe(end);
+
+      fire(items[end], 'keydown', { key: 'Home' });
+      expect(items[0] === document.activeElement).toBe(true);
+      expect(splide.index).toBe(0);
+    });
+
+    test('can set proper orientation according to the direction.', () => {
+      init({ speed: 0, direction: direction as Options[ 'direction' ], height: 300 });
+      const pagination = document.querySelector(`.${ CLASS_PAGINATION }`);
+
+      expect(pagination.getAttribute('aria-orientation'))
+        .toBe(direction === 'ttb' ? 'vertical' : null);
+    });
+  });
+
+  test('should not activate keyboard shortcuts if `paginationKeyboard` option is disabled.', () => {
+    const splide = init({ paginationKeyboard: false, speed: 0 });
+    const items = document.getElementsByClassName(CLASS_PAGINATION_PAGE);
+
+    fire(items[0], 'keydown', { key: 'ArrowRight' });
+    expect(items[1] === document.activeElement).toBe(false);
+    expect(splide.index).toBe(0);
+  });
+});

src/js/components/Scroll/Scroll.ts

@@ -19,7 +19,7 @@ import { BASE_VELOCITY, BOUNCE_DIFF_THRESHOLD, BOUNCE_DURATION, FRICTION_FACTOR,
  * @since 3.0.0
  */
 export interface ScrollComponent extends BaseComponent {
-  scroll( position: number, duration?: number, snap?: boolean, callback?: AnyFunction ): void;
+  scroll(position: number, duration?: number, snap?: boolean, callback?: AnyFunction): void;
   cancel(): void;
 }
 
@@ -35,12 +35,12 @@ export interface ScrollComponent extends BaseComponent {
  *
  * @return A Scroll component object.
  */
-export const Scroll: ComponentConstructor<ScrollComponent> = ( Splide, Components, options, event ) => {
+export const Scroll: ComponentConstructor<ScrollComponent> = (Splide, Components, options, event) => {
   const { on, emit } = event;
   const { state: { set } } = Splide;
   const { Move } = Components;
   const { getPosition, getLimit, exceededLimit, translate } = Move;
-  const isSlide = Splide.is( SLIDE );
+  const isSlide = Splide.is(SLIDE);
 
   /**
    * Retains the active RequestInterval object.
@@ -61,8 +61,8 @@ export const Scroll: ComponentConstructor<ScrollComponent> = ( Splide, Component
    * Called when the component is mounted.
    */
   function mount(): void {
-    on( EVENT_MOVE, clear );
-    on( [ EVENT_UPDATED, EVENT_REFRESH ], cancel );
+    on(EVENT_MOVE, clear);
+    on([EVENT_UPDATED, EVENT_REFRESH], cancel);
   }
 
   /**
@@ -79,21 +79,21 @@ export const Scroll: ComponentConstructor<ScrollComponent> = ( Splide, Component
     duration?: number,
     snap?: boolean,
     onScrolled?: AnyFunction,
-    noConstrain?: boolean
+    noConstrain?: boolean,
   ): void {
     clear();
 
-    const dest        = computeDestination( destination, snap );
-    const from        = getPosition();
-    const immediately = approximatelyEqual( from, dest, 1 ) || duration === 0;
+    const dest = computeDestination(destination, snap);
+    const from = getPosition();
+    const immediately = approximatelyEqual(from, dest, 1) || duration === 0;
 
     friction = 1;
-    duration = immediately ? 0 : duration || max( abs( dest - from ) / BASE_VELOCITY, MIN_DURATION );
+    duration = immediately ? 0 : duration || max(abs(dest - from) / BASE_VELOCITY, MIN_DURATION);
     callback = onScrolled;
-    interval = RequestInterval( duration, onEnd, apply( update, from, dest, noConstrain ), 1 );
+    interval = RequestInterval(duration, onEnd, apply(update, from, dest, noConstrain), 1);
 
-    set( SCROLLING );
-    emit( EVENT_SCROLL );
+    set(SCROLLING);
+    emit(EVENT_SCROLL);
     interval.start();
   }
 
@@ -105,11 +105,11 @@ export const Scroll: ComponentConstructor<ScrollComponent> = ( Splide, Component
    *
    * @return A computed destination.
    */
-  function computeDestination( destination: number, snap?: boolean ): number {
-    if ( snap ) {
-      if ( ! isSlide || ! exceededLimit() ) {
+  function computeDestination(destination: number, snap?: boolean): number {
+    if (snap) {
+      if (!isSlide || !exceededLimit()) {
         const position = destination % Components.Layout.sliderSize();
-        const snapped  = Move.toPosition( Components.Controller.toDest( position ) );
+        const snapped = Move.toPosition(Components.Controller.toDest(position));
         destination -= position - snapped;
       }
     }
@@ -121,9 +121,9 @@ export const Scroll: ComponentConstructor<ScrollComponent> = ( Splide, Component
    * Called when scroll ends or has been just canceled.
    */
   function onEnd(): void {
-    set( IDLE );
+    set(IDLE);
     callback && callback();
-    emit( EVENT_SCROLLED );
+    emit(EVENT_SCROLLED);
   }
 
   /**
@@ -134,20 +134,20 @@ export const Scroll: ComponentConstructor<ScrollComponent> = ( Splide, Component
    * @param noConstrain - Whether to suppress constraint process when the slider exceeds bounds.
    * @param rate        - A current rate.
    */
-  function update( from: number, to: number, noConstrain: boolean | undefined, rate: number ): void {
-    const { easingFunc = t => 1 - Math.pow( 1 - t, 4 ) } = options;
+  function update(from: number, to: number, noConstrain: boolean | undefined, rate: number): void {
+    const { easingFunc = t => 1 - Math.pow(1 - t, 4) } = options;
     const position = getPosition();
-    const target   = from + ( to - from ) * easingFunc( rate );
-    const diff     = ( target - position ) * friction;
+    const target = from + (to - from) * easingFunc(rate);
+    const diff = (target - position) * friction;
 
-    translate( position + diff );
-    emit( EVENT_SCROLLING );
+    translate(position + diff);
+    emit(EVENT_SCROLLING);
 
-    if ( isSlide && ! noConstrain && exceededLimit() ) {
+    if (isSlide && !noConstrain && exceededLimit()) {
       friction *= FRICTION_FACTOR;
 
-      if ( abs( diff ) < BOUNCE_DIFF_THRESHOLD ) {
-        scroll( getLimit( exceededLimit( true ) ), BOUNCE_DURATION, false, callback, true );
+      if (abs(diff) < BOUNCE_DIFF_THRESHOLD) {
+        scroll(getLimit(exceededLimit(true)), BOUNCE_DURATION, false, callback, true);
       }
     }
   }
@@ -156,7 +156,7 @@ export const Scroll: ComponentConstructor<ScrollComponent> = ( Splide, Component
    * Clears the active interval.
    */
   function clear(): void {
-    if ( interval ) {
+    if (interval) {
       interval.cancel();
     }
   }
@@ -165,7 +165,7 @@ export const Scroll: ComponentConstructor<ScrollComponent> = ( Splide, Component
    * Cancels the active interval and emits the `scrolled` event.
    */
   function cancel(): void {
-    if ( interval && ! interval.isPaused() ) {
+    if (interval && !interval.isPaused()) {
       clear();
       onEnd();
     }

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

@@ -2,75 +2,75 @@ import { init, wait } from '../../../test';
 import { BASE_VELOCITY, BOUNCE_DURATION } from '../constants';
 
 
-describe( 'Scroll', () => {
-  test( 'can scroll the slider to the destination.', async () => {
-    const splide   = init();
+describe('Scroll', () => {
+  test('can scroll the slider to the destination.', async () => {
+    const splide = init();
     const duration = 100;
 
     // Waiting for the initial reposition. It will cancel scrolling.
-    await wait( 100 );
+    await wait(100);
 
-    splide.Components.Scroll.scroll( -100, duration );
+    splide.Components.Scroll.scroll(-100, duration);
 
-    await wait( duration + 50 );
+    await wait(duration + 50);
 
-    expect( Math.round( splide.Components.Move.getPosition() ) ).toBe( -100 );
+    expect(Math.round(splide.Components.Move.getPosition())).toBe(-100);
 
     splide.destroy();
-  } );
+  });
 
-  test( 'can scroll the slider to the destination in specified duration.', async () => {
-    const splide   = init();
+  test('can scroll the slider to the destination in specified duration.', async () => {
+    const splide = init();
     const duration = 200;
     const { getPosition } = splide.Components.Move;
 
-    await wait( 100 );
+    await wait(100);
 
-    splide.Components.Scroll.scroll( -100, duration );
+    splide.Components.Scroll.scroll(-100, duration);
 
-    await wait( duration / 2 );
+    await wait(duration / 2);
 
-    expect( getPosition() ).toBeGreaterThan( -100 );
+    expect(getPosition()).toBeGreaterThan(-100);
 
-    await wait( duration / 2 + 50 );
+    await wait(duration / 2 + 50);
 
-    expect( Math.round( getPosition() ) ).toBe( -100 );
+    expect(Math.round(getPosition())).toBe(-100);
 
     splide.destroy();
-  } );
+  });
 
-  test( 'can constrain the position when the slider goes over the bounds.', async () => {
-    const splide   = init();
+  test('can constrain the position when the slider goes over the bounds.', async () => {
+    const splide = init();
     const duration = 100;
 
     // Trying to run over the bounds by providing the positive number as the distance.
-    splide.Components.Scroll.scroll( 100, duration );
+    splide.Components.Scroll.scroll(100, duration);
 
-    await wait( duration + BOUNCE_DURATION + 100 );
+    await wait(duration + BOUNCE_DURATION + 100);
 
-    expect( Math.round( splide.Components.Move.getPosition() ) ).toBe( 0 );
+    expect(Math.round(splide.Components.Move.getPosition())).toBe(0);
 
     splide.destroy();
-  } );
+  });
 
-  test( 'can vary the duration according to the distance if the time is not provided.', async () => {
-    const splide      = init();
+  test('can vary the duration according to the distance if the time is not provided.', async () => {
+    const splide = init();
     const destination = -1000;
     const { getPosition } = splide.Components.Move;
 
     // Velocity: px/ms, t[ms] = x/v
-    const expectedDuration = Math.abs( destination / BASE_VELOCITY );
+    const expectedDuration = Math.abs(destination / BASE_VELOCITY);
 
-    splide.Components.Scroll.scroll( destination );
+    splide.Components.Scroll.scroll(destination);
 
-    await wait( expectedDuration / 2 );
+    await wait(expectedDuration / 2);
 
-    expect( getPosition() ).toBeGreaterThan( destination );
+    expect(getPosition()).toBeGreaterThan(destination);
 
-    await wait( expectedDuration / 2 + 100 );
+    await wait(expectedDuration / 2 + 100);
 
-    expect( Math.round( getPosition() ) ).toBe( destination );
+    expect(Math.round(getPosition())).toBe(destination);
 
     splide.destroy();
-  } );
-} );
+  });
+});

src/js/components/Slides/Slide.ts

@@ -61,7 +61,7 @@ import {
  *
  * @since 3.0.0
  */
-export interface  SlideComponent extends BaseComponent {
+export interface SlideComponent extends BaseComponent {
   readonly index: number;
   readonly slideIndex: number;
   readonly slide: HTMLElement;
@@ -69,9 +69,9 @@ export interface  SlideComponent extends BaseComponent {
   readonly isClone: boolean;
 
   update(): void;
-  style( prop: CSSProperties, value: string | number, useContainer?: boolean ): void
-  isWithin( from: number, distance: number ): boolean;
-  isVisible( partial?: boolean ): boolean;
+  style(prop: CSSProperties, value: string | number, useContainer?: boolean): void
+  isWithin(from: number, distance: number): boolean;
+  isVisible(partial?: boolean): boolean;
 }
 
 /**
@@ -86,17 +86,17 @@ export interface  SlideComponent extends BaseComponent {
  *
  * @return A Slide subcomponent.
  */
-export const Slide = ( Splide: Splide, index: number, slideIndex: number, slide: HTMLElement ): SlideComponent => {
+export const Slide = (Splide: Splide, index: number, slideIndex: number, slide: HTMLElement): SlideComponent => {
   const event = Splide.event.lock();
   const { on, emit, bind } = event;
   const { Components, root, options } = Splide;
   const { isNavigation, updateOnMove, i18n, pagination, slideFocus } = options;
   const { Elements } = Components;
   const { resolve } = Components.Direction;
-  const styles    = getAttribute( slide, 'style' );
-  const label     = getAttribute( slide, ARIA_LABEL );
-  const isClone   = slideIndex > -1;
-  const container = child( slide, `.${ CLASS_CONTAINER }` );
+  const styles = getAttribute(slide, 'style');
+  const label = getAttribute(slide, ARIA_LABEL);
+  const isClone = slideIndex > -1;
+  const container = child(slide, `.${ CLASS_CONTAINER }`);
 
   /**
    * Turns into `true` when the component is destroyed.
@@ -106,12 +106,12 @@ export const Slide = ( Splide: Splide, index: number, slideIndex: number, slide:
   /**
    * Called when the component is mounted.
    */
-  function mount( this: SlideComponent ): void {
-    if ( ! isClone ) {
-      slide.id = `${ root.id }-slide${ pad( index + 1 ) }`;
-      setAttribute( slide, ROLE, pagination ? 'tabpanel' : 'group' );
-      setAttribute( slide, ARIA_ROLEDESCRIPTION, i18n.slide );
-      setAttribute( slide, ARIA_LABEL, label || format( i18n.slideLabel, index + 1, Splide.length ) );
+  function mount(this: SlideComponent): void {
+    if (!isClone) {
+      slide.id = `${ root.id }-slide${ pad(index + 1) }`;
+      setAttribute(slide, ROLE, pagination ? 'tabpanel' : 'group');
+      setAttribute(slide, ARIA_ROLEDESCRIPTION, i18n.slide);
+      setAttribute(slide, ARIA_LABEL, label || format(i18n.slideLabel, index + 1, Splide.length));
     }
 
     listen();
@@ -121,13 +121,13 @@ export const Slide = ( Splide: Splide, index: number, slideIndex: number, slide:
    * Listens to some events.
    */
   function listen(): void {
-    bind( slide, 'click', apply( emit, EVENT_CLICK, self ) );
-    bind( slide, 'keydown', apply( emit, EVENT_SLIDE_KEYDOWN, self ) );
-    on( [ EVENT_MOVED, EVENT_SHIFTED, EVENT_SCROLLED ], update );
-    on( EVENT_NAVIGATION_MOUNTED, initNavigation );
+    bind(slide, 'click', apply(emit, EVENT_CLICK, self));
+    bind(slide, 'keydown', apply(emit, EVENT_SLIDE_KEYDOWN, self));
+    on([EVENT_MOVED, EVENT_SHIFTED, EVENT_SCROLLED], update);
+    on(EVENT_NAVIGATION_MOUNTED, initNavigation);
 
-    if ( updateOnMove ) {
-      on( EVENT_MOVE, onMove );
+    if (updateOnMove) {
+      on(EVENT_MOVE, onMove);
     }
   }
 
@@ -137,32 +137,32 @@ export const Slide = ( Splide: Splide, index: number, slideIndex: number, slide:
   function destroy(): void {
     destroyed = true;
     event.destroy();
-    removeClass( slide, STATUS_CLASSES );
-    removeAttribute( slide, ALL_ATTRIBUTES );
-    setAttribute( slide, 'style', styles );
-    setAttribute( slide, ARIA_LABEL, label || '' );
+    removeClass(slide, STATUS_CLASSES);
+    removeAttribute(slide, ALL_ATTRIBUTES);
+    setAttribute(slide, 'style', styles);
+    setAttribute(slide, ARIA_LABEL, label || '');
   }
 
   /**
    * Initializes slides as navigation.
    */
   function initNavigation(): void {
-    const controls = Splide.splides.map( target => {
-      const Slide = target.splide.Components.Slides.getAt( index );
+    const controls = Splide.splides.map(target => {
+      const Slide = target.splide.Components.Slides.getAt(index);
       return Slide ? Slide.slide.id : '';
-    } ).join( ' ' );
+    }).join(' ');
 
-    setAttribute( slide, ARIA_LABEL, format( i18n.slideX, ( isClone ? slideIndex : index ) + 1 ) );
-    setAttribute( slide, ARIA_CONTROLS, controls );
-    setAttribute( slide, ROLE, slideFocus ? 'button' : '' );
-    slideFocus && removeAttribute( slide, ARIA_ROLEDESCRIPTION );
+    setAttribute(slide, ARIA_LABEL, format(i18n.slideX, (isClone ? slideIndex : index) + 1));
+    setAttribute(slide, ARIA_CONTROLS, controls);
+    setAttribute(slide, ROLE, slideFocus ? 'button' : '');
+    slideFocus && removeAttribute(slide, ARIA_ROLEDESCRIPTION);
   }
 
   /**
    * If the `updateOnMove` option is `true`, called when the slider starts moving.
    */
   function onMove(): void {
-    if ( ! destroyed ) {
+    if (!destroyed) {
       update();
     }
   }
@@ -171,13 +171,13 @@ export const Slide = ( Splide: Splide, index: number, slideIndex: number, slide:
    * Updates attribute and classes of the slide.
    */
   function update(): void {
-    if ( ! destroyed ) {
+    if (!destroyed) {
       const { index: curr } = Splide;
 
       updateActivity();
       updateVisibility();
-      toggleClass( slide, CLASS_PREV, index === curr - 1 );
-      toggleClass( slide, CLASS_NEXT, index === curr + 1 );
+      toggleClass(slide, CLASS_PREV, index === curr - 1);
+      toggleClass(slide, CLASS_NEXT, index === curr + 1);
     }
   }
 
@@ -187,10 +187,10 @@ export const Slide = ( Splide: Splide, index: number, slideIndex: number, slide:
   function updateActivity(): void {
     const active = isActive();
 
-    if ( active !== hasClass( slide, CLASS_ACTIVE ) ) {
-      toggleClass( slide, CLASS_ACTIVE, active );
-      setAttribute( slide, ARIA_CURRENT, isNavigation && active || '' );
-      emit( active ? EVENT_ACTIVE : EVENT_INACTIVE, self );
+    if (active !== hasClass(slide, CLASS_ACTIVE)) {
+      toggleClass(slide, CLASS_ACTIVE, active);
+      setAttribute(slide, ARIA_CURRENT, isNavigation && active || '');
+      emit(active ? EVENT_ACTIVE : EVENT_INACTIVE, self);
     }
   }
 
@@ -201,26 +201,26 @@ export const Slide = ( Splide: Splide, index: number, slideIndex: number, slide:
    */
   function updateVisibility(): void {
     const visible = isVisible();
-    const hidden = ! visible && ( ! isActive() || isClone );
+    const hidden = !visible && (!isActive() || isClone);
 
-    if ( ! Splide.state.is( [ MOVING, SCROLLING ] ) ) {
-      setAttribute( slide, ARIA_HIDDEN, hidden || '' );
+    if (!Splide.state.is([MOVING, SCROLLING])) {
+      setAttribute(slide, ARIA_HIDDEN, hidden || '');
     }
 
-    setAttribute( queryAll( slide, options.focusableNodes || '' ), TAB_INDEX, hidden ? -1 : '' );
+    setAttribute(queryAll(slide, options.focusableNodes || ''), TAB_INDEX, hidden ? -1 : '');
 
-    if ( slideFocus ) {
-      setAttribute( slide, TAB_INDEX, hidden ? -1 : 0 );
+    if (slideFocus) {
+      setAttribute(slide, TAB_INDEX, hidden ? -1 : 0);
     }
 
-    if ( visible !== hasClass( slide, CLASS_VISIBLE ) ) {
-      toggleClass( slide, CLASS_VISIBLE, visible );
-      emit( visible ? EVENT_VISIBLE : EVENT_HIDDEN, self );
+    if (visible !== hasClass(slide, CLASS_VISIBLE)) {
+      toggleClass(slide, CLASS_VISIBLE, visible);
+      emit(visible ? EVENT_VISIBLE : EVENT_HIDDEN, self);
     }
 
-    if ( ! visible && document.activeElement === slide ) {
-      const Slide = Components.Slides.getAt( Splide.index );
-      Slide && focus( Slide.slide );
+    if (!visible && document.activeElement === slide) {
+      const Slide = Components.Slides.getAt(Splide.index);
+      Slide && focus(Slide.slide);
     }
   }
 
@@ -231,8 +231,8 @@ export const Slide = ( Splide: Splide, index: number, slideIndex: number, slide:
    * @param value        - A CSS value to add.
    * @param useContainer - Optional. Determines whether to apply the rule to the container or not.
    */
-  function style( prop: CSSProperties, value: string | number, useContainer?: boolean ): void {
-    _style( ( useContainer && container ) || slide, prop, value );
+  function style(prop: CSSProperties, value: string | number, useContainer?: boolean): void {
+    _style((useContainer && container) || slide, prop, value);
   }
 
   /**
@@ -243,24 +243,24 @@ export const Slide = ( Splide: Splide, index: number, slideIndex: number, slide:
   function isActive(): boolean {
     const { index: curr } = Splide;
     const { cloneStatus = true } = options;
-    return curr === index || ( cloneStatus && curr === slideIndex );
+    return curr === index || (cloneStatus && curr === slideIndex);
   }
 
   /**
    * Checks if the slide is visible or not.
    */
-  function isVisible( partial?: boolean ): boolean {
-    if ( Splide.is( FADE ) ) {
+  function isVisible(partial?: boolean): boolean {
+    if (Splide.is(FADE)) {
       return isActive();
     }
 
-    const trackRect = rect( Elements.track );
-    const slideRect = rect( slide );
-    const left      = resolve( 'left', true );
-    const right     = resolve( 'right', true );
+    const trackRect = rect(Elements.track);
+    const slideRect = rect(slide);
+    const left = resolve('left', true);
+    const right = resolve('right', true);
 
-    return floor( trackRect[ left ] ) <= ceil( slideRect[ partial ? right : left ] )
-      && floor( slideRect[ partial ? left : right ] ) <= ceil( trackRect[ right ] );
+    return floor(trackRect[left]) <= ceil(slideRect[partial ? right : left])
+      && floor(slideRect[partial ? left : right]) <= ceil(trackRect[right]);
   }
 
   /**
@@ -272,11 +272,11 @@ export const Slide = ( Splide: Splide, index: number, slideIndex: number, slide:
    *
    * @return `true` if the slide is within the `distance` from the base slide, or otherwise `false`.
    */
-  function isWithin( from: number, distance: number ): boolean {
-    let diff = abs( from - index );
+  function isWithin(from: number, distance: number): boolean {
+    let diff = abs(from - index);
 
-    if ( ! isClone && ( options.rewind || Splide.is( LOOP ) ) ) {
-      diff = min( diff, Splide.length - diff );
+    if (!isClone && (options.rewind || Splide.is(LOOP))) {
+      diff = min(diff, Splide.length - diff);
     }
 
     return diff <= distance;

src/js/components/Slides/Slides.ts

@@ -29,16 +29,16 @@ import { Slide, SlideComponent } from './Slide';
  */
 export interface SlidesComponent extends BaseComponent {
   update(): void;
-  register( slide: HTMLElement, index: number, slideIndex: number ): void;
-  get( excludeClones?: boolean ): SlideComponent[];
-  getIn( page: number ): SlideComponent[];
-  getAt( index: number ): SlideComponent | undefined;
-  add( slide: string | Element | Array<string | Element>, index?: number ): void;
-  remove( selector: SlideMatcher ): void;
-  forEach( iteratee: SlidesIteratee, excludeClones?: boolean ): void;
-  filter( matcher: SlideMatcher ): SlideComponent[];
-  style( prop: string, value: string | number, useContainer?: boolean ): void
-  getLength( excludeClones?: boolean ): number;
+  register(slide: HTMLElement, index: number, slideIndex: number): void;
+  get(excludeClones?: boolean): SlideComponent[];
+  getIn(page: number): SlideComponent[];
+  getAt(index: number): SlideComponent | undefined;
+  add(slide: string | Element | Array<string | Element>, index?: number): void;
+  remove(selector: SlideMatcher): void;
+  forEach(iteratee: SlidesIteratee, excludeClones?: boolean): void;
+  filter(matcher: SlideMatcher): SlideComponent[];
+  style(prop: string, value: string | number, useContainer?: boolean): void
+  getLength(excludeClones?: boolean): number;
   isEnough(): boolean;
 }
 
@@ -47,14 +47,14 @@ export interface SlidesComponent extends BaseComponent {
  *
  * @since 3.0.0
  */
-export type SlidesIteratee = ( Slide: SlideComponent, index: number, Slides: SlideComponent[] ) => void
+export type SlidesIteratee = (Slide: SlideComponent, index: number, Slides: SlideComponent[]) => void
 
 /**
  * The predicate function for Slides.
  *
  * @since 3.0.0
  */
-export type SlidesPredicate = ( Slide: SlideComponent, index: number, Slides: SlideComponent[] ) => any
+export type SlidesPredicate = (Slide: SlideComponent, index: number, Slides: SlideComponent[]) => any
 
 /**
  * The type for filtering SlideComponent objects.
@@ -75,7 +75,7 @@ export type SlideMatcher = number | number[] | string | SlidesPredicate;
  *
  * @return An Slides component object.
  */
-export const Slides: ComponentConstructor<SlidesComponent> = ( Splide, Components, options, event ) => {
+export const Slides: ComponentConstructor<SlidesComponent> = (Splide, Components, options, event) => {
   const { on, emit, bind } = event;
   const { slides, list } = Components.Elements;
 
@@ -89,30 +89,30 @@ export const Slides: ComponentConstructor<SlidesComponent> = ( Splide, Component
    */
   function mount(): void {
     init();
-    on( EVENT_REFRESH, destroy );
-    on( EVENT_REFRESH, init );
+    on(EVENT_REFRESH, destroy);
+    on(EVENT_REFRESH, init);
   }
 
   /**
    * Initializes the component.
    */
   function init(): void {
-    slides.forEach( ( slide, index ) => { register( slide, index, -1 ) } );
+    slides.forEach((slide, index) => register(slide, index, -1));
   }
 
   /**
    * Destroys the component.
    */
   function destroy(): void {
-    forEach( Slide => { Slide.destroy() } );
-    empty( Slides );
+    forEach(Slide => Slide.destroy());
+    empty(Slides);
   }
 
   /**
    * Manually updates the status of all slides.
    */
   function update(): void {
-    forEach( Slide => { Slide.update() } );
+    forEach(Slide => Slide.update());
   }
 
   /**
@@ -123,11 +123,11 @@ export const Slides: ComponentConstructor<SlidesComponent> = ( Splide, Component
    * @param index      - A slide index.
    * @param slideIndex - A slide index for clones. This must be `-1` for regular slides.
    */
-  function register( slide: HTMLElement, index: number, slideIndex: number ): void {
-    const object = Slide( Splide, index, slideIndex, slide );
+  function register(slide: HTMLElement, index: number, slideIndex: number): void {
+    const object = Slide(Splide, index, slideIndex, slide);
     object.mount();
-    Slides.push( object );
-    Slides.sort( ( Slide1, Slide2 ) => Slide1.index - Slide2.index );
+    Slides.push(object);
+    Slides.sort((Slide1, Slide2) => Slide1.index - Slide2.index);
   }
 
   /**
@@ -137,8 +137,8 @@ export const Slides: ComponentConstructor<SlidesComponent> = ( Splide, Component
    *
    * @return An array with Slide objects.
    */
-  function get( excludeClones?: boolean ): SlideComponent[] {
-    return excludeClones ? filter( Slide => ! Slide.isClone ) : Slides;
+  function get(excludeClones?: boolean): SlideComponent[] {
+    return excludeClones ? filter(Slide => !Slide.isClone) : Slides;
   }
 
   /**
@@ -148,11 +148,11 @@ export const Slides: ComponentConstructor<SlidesComponent> = ( Splide, Component
    *
    * @return An array with slides that belong to the page.
    */
-  function getIn( page: number ): SlideComponent[] {
+  function getIn(page: number): SlideComponent[] {
     const { Controller } = Components;
-    const index = Controller.toIndex( page );
-    const max   = Controller.hasFocus() ? 1 : options.perPage;
-    return filter( Slide => between( Slide.index, index, index + max - 1 ) );
+    const index = Controller.toIndex(page);
+    const max = Controller.hasFocus() ? 1 : options.perPage;
+    return filter(Slide => between(Slide.index, index, index + max - 1));
   }
 
   /**
@@ -162,8 +162,8 @@ export const Slides: ComponentConstructor<SlidesComponent> = ( Splide, Component
    *
    * @return A Slide object if available, or otherwise `undefined`.
    */
-  function getAt( index: number ): SlideComponent | undefined {
-    return filter( index )[ 0 ];
+  function getAt(index: number): SlideComponent | undefined {
+    return filter(index)[0];
   }
 
   /**
@@ -172,21 +172,21 @@ export const Slides: ComponentConstructor<SlidesComponent> = ( Splide, Component
    * @param items - A slide element, an HTML string or an array with them.
    * @param index - Optional. An index to insert the slide at. If omitted, appends it to the list.
    */
-  function add( items: string | Element | Array<string | Element>, index?: number ): void {
-    forEachItem( items, slide => {
-      if ( isString( slide ) ) {
-        slide = parseHtml( slide );
+  function add(items: string | Element | Array<string | Element>, index?: number): void {
+    forEachItem(items, slide => {
+      if (isString(slide)) {
+        slide = parseHtml(slide);
       }
 
-      if ( isHTMLElement( slide ) ) {
-        const ref = slides[ index ];
-        ref ? before( ref, slide ) : append( list, slide );
-        addClass( slide, options.classes.slide );
-        observeImages( slide, apply( emit, EVENT_RESIZE ) );
+      if (isHTMLElement(slide)) {
+        const ref = slides[index];
+        ref ? before(ref, slide) : append(list, slide);
+        addClass(slide, options.classes.slide);
+        observeImages(slide, apply(emit, EVENT_RESIZE));
       }
-    } );
+    });
 
-    emit( EVENT_REFRESH );
+    emit(EVENT_REFRESH);
   }
 
   /**
@@ -195,9 +195,9 @@ export const Slides: ComponentConstructor<SlidesComponent> = ( Splide, Component
    *
    * @param matcher - An index, an array with indices, a selector string, or an iteratee function.
    */
-  function remove( matcher: SlideMatcher ): void {
-    removeNode( filter( matcher ).map( Slide => Slide.slide ) );
-    emit( EVENT_REFRESH );
+  function remove(matcher: SlideMatcher): void {
+    removeNode(filter(matcher).map(Slide => Slide.slide));
+    emit(EVENT_REFRESH);
   }
 
   /**
@@ -206,8 +206,8 @@ export const Slides: ComponentConstructor<SlidesComponent> = ( Splide, Component
    * @param iteratee      - An iteratee function that takes a Slide object, an index and an array with Slides.
    * @param excludeClones - Optional. Determines whether to exclude clones or not.
    */
-  function forEach( iteratee: SlidesIteratee, excludeClones?: boolean ): void {
-    get( excludeClones ).forEach( iteratee );
+  function forEach(iteratee: SlidesIteratee, excludeClones?: boolean): void {
+    get(excludeClones).forEach(iteratee);
   }
 
   /**
@@ -218,12 +218,12 @@ export const Slides: ComponentConstructor<SlidesComponent> = ( Splide, Component
    *
    * @return An array with SlideComponent objects.
    */
-  function filter( matcher: SlideMatcher ): SlideComponent[] {
-    return Slides.filter( isFunction( matcher )
+  function filter(matcher: SlideMatcher): SlideComponent[] {
+    return Slides.filter(isFunction(matcher)
       ? matcher
-      : Slide => isString( matcher )
-        ? matches( Slide.slide, matcher )
-        : includes( toArray( matcher ), Slide.index )
+      : Slide => isString(matcher)
+        ? matches(Slide.slide, matcher)
+        : includes(toArray(matcher), Slide.index),
     );
   }
 
@@ -234,8 +234,8 @@ export const Slides: ComponentConstructor<SlidesComponent> = ( Splide, Component
    * @param value        - A CSS value to add.
    * @param useContainer - Optional. Determines whether to apply the rule to the container or not.
    */
-  function style( prop: CSSProperties, value: string | number, useContainer?: boolean ): void {
-    forEach( Slide => { Slide.style( prop, value, useContainer ) } );
+  function style(prop: CSSProperties, value: string | number, useContainer?: boolean): void {
+    forEach(Slide => Slide.style(prop, value, useContainer));
   }
 
   /**
@@ -244,18 +244,18 @@ export const Slides: ComponentConstructor<SlidesComponent> = ( Splide, Component
    * @param elm      - An element that may contain images.
    * @param callback - A callback function.
    */
-  function observeImages( elm: Element, callback: AnyFunction ): void {
-    const images = queryAll( elm, 'img' );
+  function observeImages(elm: Element, callback: AnyFunction): void {
+    const images = queryAll(elm, 'img');
     let { length } = images;
 
-    if ( length ) {
-      images.forEach( img => {
-        bind( img, 'load error', () => {
-          if ( ! --length ) {
+    if (length) {
+      images.forEach(img => {
+        bind(img, 'load error', () => {
+          if (!--length) {
             callback();
           }
-        } );
-      } );
+        });
+      });
     } else {
       callback();
     }
@@ -268,7 +268,7 @@ export const Slides: ComponentConstructor<SlidesComponent> = ( Splide, Component
    *
    * @return The length of slides.
    */
-  function getLength( excludeClones?: boolean ): number {
+  function getLength(excludeClones?: boolean): number {
     return excludeClones ? slides.length : Slides.length;
   }
 

src/js/components/Slides/test/add.test.ts

@@ -1,82 +1,82 @@
 import { init } from '../../../test';
 
 
-describe( 'Slides#add()', () => {
-  test( 'can append a new element to the slider.', () => {
+describe('Slides#add()', () => {
+  test('can append a new element to the slider.', () => {
     const splide = init();
     const { Slides } = splide.Components;
-    const slide = document.createElement( 'div' );
+    const slide = document.createElement('div');
 
-    Slides.add( slide );
+    Slides.add(slide);
 
-    expect( Slides.getAt( Slides.getLength() - 1 ).slide ).toBe( slide );
-  } );
+    expect(Slides.getAt(Slides.getLength() - 1).slide).toBe(slide);
+  });
 
-  test( 'can append elements to the slider.', () => {
+  test('can append elements to the slider.', () => {
     const splide = init();
     const { Slides } = splide.Components;
-    const slide1 = document.createElement( 'div' );
-    const slide2 = document.createElement( 'div' );
+    const slide1 = document.createElement('div');
+    const slide2 = document.createElement('div');
 
-    Slides.add( [ slide1, slide2 ] );
+    Slides.add([slide1, slide2]);
 
-    expect( Slides.getAt( Slides.getLength() - 2 ).slide ).toBe( slide1 );
-    expect( Slides.getAt( Slides.getLength() - 1 ).slide ).toBe( slide2 );
-  } );
+    expect(Slides.getAt(Slides.getLength() - 2).slide).toBe(slide1);
+    expect(Slides.getAt(Slides.getLength() - 1).slide).toBe(slide2);
+  });
 
-  test( 'can append a new slide by HTML.', () => {
+  test('can append a new slide by HTML.', () => {
     const splide = init();
     const { add, getAt, getLength } = splide.Components.Slides;
 
-    add( [ '<div class="slide1">' ] );
+    add(['<div class="slide1">']);
 
-    expect( getAt( getLength() - 1 ).slide.classList.contains( 'slide1' ) ).toBe( true );
-  } );
+    expect(getAt(getLength() - 1).slide.classList.contains('slide1')).toBe(true);
+  });
 
-  test( 'can append new slides by HTML.', () => {
+  test('can append new slides by HTML.', () => {
     const splide = init();
     const { add, getAt, getLength } = splide.Components.Slides;
 
-    add( [ '<div class="slide1">', '<div class="slide2">' ] );
+    add(['<div class="slide1">', '<div class="slide2">']);
 
-    expect( getAt( getLength() - 2 ).slide.classList.contains( 'slide1' ) ).toBe( true );
-    expect( getAt( getLength() - 1 ).slide.classList.contains( 'slide2' ) ).toBe( true );
-  } );
+    expect(getAt(getLength() - 2).slide.classList.contains('slide1')).toBe(true);
+    expect(getAt(getLength() - 1).slide.classList.contains('slide2')).toBe(true);
+  });
 
-  test( 'can insert a new element at the specific index.', () => {
+  test('can insert a new element at the specific index.', () => {
     const splide = init();
     const { Slides } = splide.Components;
-    const slide = document.createElement( 'div' );
+    const slide = document.createElement('div');
 
-    Slides.add( slide, 1 );
+    Slides.add(slide, 1);
 
-    expect( Slides.getAt( 1 ).slide ).toBe( slide );
-  } );
+    expect(Slides.getAt(1).slide).toBe(slide);
+  });
 
-  test( 'can insert new elements at the specific index.', () => {
+  test('can insert new elements at the specific index.', () => {
     const splide = init();
     const { Slides } = splide.Components;
-    const slide1 = document.createElement( 'div' );
-    const slide2 = document.createElement( 'div' );
+    const slide1 = document.createElement('div');
+    const slide2 = document.createElement('div');
 
-    Slides.add( [ slide1, slide2 ], 1 );
+    Slides.add([slide1, slide2], 1);
 
-    expect( Slides.getAt( 1 ).slide ).toBe( slide1 );
-    expect( Slides.getAt( 2 ).slide ).toBe( slide2 );
-  } );
+    expect(Slides.getAt(1).slide).toBe(slide1);
+    expect(Slides.getAt(2).slide).toBe(slide2);
+  });
 
-  test( 'should not break the order of Slides.', () => {
-    const splide = init( { type: 'loop' } );
+  test('should not break the order of Slides.', () => {
+    const splide = init({ type: 'loop' });
     const { Slides } = splide.Components;
-    const slide  = document.createElement( 'div' );
+    const slide = document.createElement('div');
     const slides = Slides.get();
 
-    expect( slides[ 0 ].index ).toBeLessThan( 0 ); // negative index for clones
-    expect( slides[ slides.length - 1 ].index ).toBeGreaterThanOrEqual( splide.length );
+    expect(slides[0].index).toBeLessThan(0); // negative index for clones
+    expect(slides[slides.length - 1].index).toBeGreaterThanOrEqual(splide.length);
 
-    Slides.add( slide, 1 ); // This emits refresh.
+    Slides.add(slide, 1); // This emits refresh.
 
-    expect( slides[ 0 ].index ).toBeLessThan( 0 ); // negative index for clones
-    expect( slides[ slides.length - 1 ].index ).toBeGreaterThanOrEqual( splide.length );
-  } );
-} );
+    expect(slides[0].index).toBeLessThan(0); // negative index for clones
+    expect(slides[slides.length - 1].index).toBeGreaterThanOrEqual(splide.length);
+  });
+});

src/js/components/Slides/test/filter.test.ts

@@ -2,33 +2,33 @@ import { CLASS_SLIDE } from '../../../constants/classes';
 import { init } from '../../../test';
 
 
-describe( 'Slides#filter()', () => {
+describe('Slides#filter()', () => {
   const splide = init();
   const { Slides } = splide.Components;
   const all = Slides.get();
 
-  test( 'can filter slides by the index.', () => {
-    expect( Slides.filter( 2 )[ 0 ] ).toBe( Slides.get()[ 2 ] );
-  } );
+  test('can filter slides by the index.', () => {
+    expect(Slides.filter(2)[0]).toBe(Slides.get()[2]);
+  });
 
-  test( 'can filter slides by indices.', () => {
-    expect( Slides.filter( [ 0, 2, 4 ] ) ).toEqual( [ all[ 0 ], all[ 2 ], all[ 4 ] ] );
-  } );
+  test('can filter slides by indices.', () => {
+    expect(Slides.filter([0, 2, 4])).toEqual([all[0], all[2], all[4]]);
+  });
 
-  test( 'can filter slides by the CSS selector.', () => {
-    const first = Slides.filter( `.${ CLASS_SLIDE }:first-child` )[ 0 ];
-    const last  = Slides.filter( `.${ CLASS_SLIDE }:last-child` )[ 0 ];
+  test('can filter slides by the CSS selector.', () => {
+    const first = Slides.filter(`.${ CLASS_SLIDE }:first-child`)[0];
+    const last = Slides.filter(`.${ CLASS_SLIDE }:last-child`)[0];
 
-    expect( first ).toBe( all[ 0 ] );
-    expect( last ).toBe( all[ all.length - 1 ] );
-  } );
+    expect(first).toBe(all[0]);
+    expect(last).toBe(all[all.length - 1]);
+  });
 
-  test( 'can filter slides by the predicate function.', () => {
-    const filtered = Slides.filter( ( Slide, index ) => {
+  test('can filter slides by the predicate function.', () => {
+    const filtered = Slides.filter((Slide, index) => {
       return index < 5;
-    } );
+    });
 
-    expect( filtered.length ).toBe( 5 );
-    expect( filtered[ filtered.length - 1 ] ).toBe( all[ filtered.length - 1 ] );
-  } );
-} );
+    expect(filtered.length).toBe(5);
+    expect(filtered[filtered.length - 1]).toBe(all[filtered.length - 1]);
+  });
+});

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

@@ -2,118 +2,118 @@ import { CLASS_CLONE, CLASS_SLIDE } from '../../../constants/classes';
 import { init } from '../../../test';
 
 
-describe( 'Slides', () => {
-  test( 'can create a Slide component.', () => {
-    const splide = init( {}, { length: 0 } );
+describe('Slides', () => {
+  test('can create a Slide component.', () => {
+    const splide = init({}, { length: 0 });
     const { Slides } = splide.Components;
 
-    expect( Slides.getLength( false ) ).toBe( 0 );
+    expect(Slides.getLength(false)).toBe(0);
 
-    const slide = document.createElement( 'div' );
+    const slide = document.createElement('div');
 
-    Slides.register( slide, 0, 0 );
-    expect( Slides.getLength( false ) ).toBe( 1 );
+    Slides.register(slide, 0, 0);
+    expect(Slides.getLength(false)).toBe(1);
 
-    const Slide = Slides.getAt( 0 );
-    expect( Slide.slide === slide ).toBe( true );
-  } );
+    const Slide = Slides.getAt(0);
+    expect(Slide.slide === slide).toBe(true);
+  });
 
-  test( 'can provide all Slide components with/without clones.', () => {
-    const splide        = init( { type: 'loop' } );
-    const { Slides }    = splide.Components;
-    const slides        = document.getElementsByClassName( CLASS_SLIDE );
-    const clones        = document.getElementsByClassName( CLASS_CLONE );
-    const WithClones    = Slides.get();
-    const WithoutClones = Slides.get( true );
+  test('can provide all Slide components with/without clones.', () => {
+    const splide = init({ type: 'loop' });
+    const { Slides } = splide.Components;
+    const slides = document.getElementsByClassName(CLASS_SLIDE);
+    const clones = document.getElementsByClassName(CLASS_CLONE);
+    const WithClones = Slides.get();
+    const WithoutClones = Slides.get(true);
 
-    expect( WithClones.length ).toBe( slides.length );
-    expect( WithoutClones.length ).toBe( slides.length - clones.length );
-  } );
+    expect(WithClones.length).toBe(slides.length);
+    expect(WithoutClones.length).toBe(slides.length - clones.length);
+  });
 
-  test( 'can provide Slide components in the specified page.', () => {
-    const splide     = init( { perPage: 3 } ); // end index: 7
+  test('can provide Slide components in the specified page.', () => {
+    const splide = init({ perPage: 3 }); // end index: 7
     const { Slides } = splide.Components;
 
-    const SlidesInPage0 = Slides.getIn( 0 );
-    expect( SlidesInPage0.length ).toBe( 3 );
-    expect( SlidesInPage0[ 0 ].index ).toBe( 0 );
-    expect( SlidesInPage0[ 1 ].index ).toBe( 1 );
-    expect( SlidesInPage0[ 2 ].index ).toBe( 2 );
+    const SlidesInPage0 = Slides.getIn(0);
+    expect(SlidesInPage0.length).toBe(3);
+    expect(SlidesInPage0[0].index).toBe(0);
+    expect(SlidesInPage0[1].index).toBe(1);
+    expect(SlidesInPage0[2].index).toBe(2);
 
-    const SlidesInPage2 = Slides.getIn( 2 );
-    expect( SlidesInPage2.length ).toBe( 3 );
+    const SlidesInPage2 = Slides.getIn(2);
+    expect(SlidesInPage2.length).toBe(3);
 
-    const SlidesInPage3 = Slides.getIn( 3 );
-    expect( SlidesInPage3.length ).toBe( 3 );
-  } );
+    const SlidesInPage3 = Slides.getIn(3);
+    expect(SlidesInPage3.length).toBe(3);
+  });
 
-  test( 'can provide a Slide component at the specified index.', () => {
-    const splide     = init();
+  test('can provide a Slide component at the specified index.', () => {
+    const splide = init();
     const { Slides } = splide.Components;
-    const slides     = document.getElementsByClassName( CLASS_SLIDE );
+    const slides = document.getElementsByClassName(CLASS_SLIDE);
 
-    const Slide0 = Slides.getAt( 0 );
-    expect( Slide0.slide === slides[ 0 ] ).toBe( true );
+    const Slide0 = Slides.getAt(0);
+    expect(Slide0.slide === slides[0]).toBe(true);
 
-    const Slide2 = Slides.getAt( 2 );
-    expect( Slide2.slide === slides[ 2 ] ).toBe( true );
+    const Slide2 = Slides.getAt(2);
+    expect(Slide2.slide === slides[2]).toBe(true);
 
-    const Slide100 = Slides.getAt( 100 );
-    expect( Slide100 ).toBeUndefined();
-  } );
+    const Slide100 = Slides.getAt(100);
+    expect(Slide100).toBeUndefined();
+  });
 
-  test( 'can iterate over Slide components.', () => {
-    const splide     = init();
+  test('can iterate over Slide components.', () => {
+    const splide = init();
     const { Slides } = splide.Components;
-    const slides     = document.getElementsByClassName( CLASS_SLIDE );
-    const callback   = jest.fn();
+    const slides = document.getElementsByClassName(CLASS_SLIDE);
+    const callback = jest.fn();
 
-    Slides.forEach( ( Slide, index ) => {
-      expect( Slide.slide === slides[ index ] ).toBe( true );
+    Slides.forEach((Slide, index) => {
+      expect(Slide.slide === slides[index]).toBe(true);
       callback();
-    } );
+    });
 
-    expect( callback ).toHaveBeenCalledTimes( splide.length );
-  } );
+    expect(callback).toHaveBeenCalledTimes(splide.length);
+  });
 
-  test( 'can iterate over Slide components, including clones.', () => {
-    const splide        = init( { type: 'loop' } );
-    const { Slides }    = splide.Components;
-    const slides        = document.getElementsByClassName( CLASS_SLIDE );
-    const clones        = document.getElementsByClassName( CLASS_CLONE );
-    const callback      = jest.fn();
+  test('can iterate over Slide components, including clones.', () => {
+    const splide = init({ type: 'loop' });
+    const { Slides } = splide.Components;
+    const slides = document.getElementsByClassName(CLASS_SLIDE);
+    const clones = document.getElementsByClassName(CLASS_CLONE);
+    const callback = jest.fn();
     const callbackClone = jest.fn();
 
-    Slides.forEach( ( Slide ) => {
+    Slides.forEach((Slide) => {
       callback();
 
-      if ( Slide.isClone ) {
+      if (Slide.isClone) {
         callbackClone();
       }
-    } );
+    });
 
-    expect( callback ).toHaveBeenCalledTimes( slides.length );
-    expect( callbackClone ).toHaveBeenCalledTimes( clones.length );
-  } );
+    expect(callback).toHaveBeenCalledTimes(slides.length);
+    expect(callbackClone).toHaveBeenCalledTimes(clones.length);
+  });
 
-  test( 'can provided the number of slides with/without clones.', () => {
-    const splide     = init( { type: 'loop' } );
+  test('can provided the number of slides with/without clones.', () => {
+    const splide = init({ type: 'loop' });
     const { Slides } = splide.Components;
-    const slides     = document.getElementsByClassName( CLASS_SLIDE );
-    const clones     = document.getElementsByClassName( CLASS_CLONE );
+    const slides = document.getElementsByClassName(CLASS_SLIDE);
+    const clones = document.getElementsByClassName(CLASS_CLONE);
 
-    expect( Slides.getLength() ).toBe( slides.length );
-    expect( Slides.getLength( true ) ).toBe( slides.length - clones.length );
-  } );
+    expect(Slides.getLength()).toBe(slides.length);
+    expect(Slides.getLength(true)).toBe(slides.length - clones.length);
+  });
 
-  test( 'can tell if there are enough slides to move or not.', () => {
-    const splide = init( { perPage: 3 }, { length: 2 } );
+  test('can tell if there are enough slides to move or not.', () => {
+    const splide = init({ perPage: 3 }, { length: 2 });
     const { Slides } = splide.Components;
 
-    expect( Slides.isEnough() ).toBe( false );
+    expect(Slides.isEnough()).toBe(false);
 
     splide.options = { perPage: 1 };
 
-    expect( Slides.isEnough() ).toBe( true );
-  } );
-} );
+    expect(Slides.isEnough()).toBe(true);
+  });
+});

src/js/components/Slides/test/remove.test.ts

@@ -1,54 +1,54 @@
 import { init } from '../../../test';
 
 
-describe( 'Slides#remove()', () => {
-  test( 'can remove a slide at the specified index.', () => {
+describe('Slides#remove()', () => {
+  test('can remove a slide at the specified index.', () => {
     const splide = init();
     const { Slides } = splide.Components;
-    const Slide1 = Slides.getAt( 1 );
-    const Slide2 = Slides.getAt( 2 );
+    const Slide1 = Slides.getAt(1);
+    const Slide2 = Slides.getAt(2);
     const length = Slides.getLength();
 
-    Slides.remove( 1 );
+    Slides.remove(1);
 
-    expect( Slides.getLength() ).toBe( length - 1 );
-    expect( Slides.getAt( 1 ).slide ).not.toBe( Slide1.slide );
-    expect( Slides.getAt( 1 ).slide ).toBe( Slide2.slide );
-  } );
+    expect(Slides.getLength()).toBe(length - 1);
+    expect(Slides.getAt(1).slide).not.toBe(Slide1.slide);
+    expect(Slides.getAt(1).slide).toBe(Slide2.slide);
+  });
 
-  test( 'can remove slides at the specified indices.', () => {
+  test('can remove slides at the specified indices.', () => {
     const splide = init();
     const { Slides } = splide.Components;
-    const Slide4 = Slides.getAt( 4 );
+    const Slide4 = Slides.getAt(4);
     const length = Slides.getLength();
 
-    Slides.remove( [ 1, 2, 3 ] );
+    Slides.remove([1, 2, 3]);
 
-    expect( Slides.getLength() ).toBe( length - 3 );
-    expect( Slides.getAt( 1 ).slide ).toBe( Slide4.slide );
-  } );
+    expect(Slides.getLength()).toBe(length - 3);
+    expect(Slides.getAt(1).slide).toBe(Slide4.slide);
+  });
 
-  test( 'can remove slides by a selector.', () => {
+  test('can remove slides by a selector.', () => {
     const splide = init();
     const { Slides } = splide.Components;
-    const Slide3 = Slides.getAt( 3 );
+    const Slide3 = Slides.getAt(3);
     const length = Slides.getLength();
 
-    Slides.remove( 'li:nth-child( 1 ), li:nth-child( 2 )' );
+    Slides.remove('li:nth-child( 1 ), li:nth-child( 2 )');
 
-    expect( Slides.getLength() ).toBe( length - 2 );
-    expect( Slides.getAt( 1 ).slide ).toBe( Slide3.slide );
-  } );
+    expect(Slides.getLength()).toBe(length - 2);
+    expect(Slides.getAt(1).slide).toBe(Slide3.slide);
+  });
 
-  test( 'can remove slides by a predicate function.', () => {
+  test('can remove slides by a predicate function.', () => {
     const splide = init();
     const { Slides } = splide.Components;
-    const Slide3 = Slides.getAt( 3 );
+    const Slide3 = Slides.getAt(3);
     const length = Slides.getLength();
 
-    Slides.remove( Slide => Slide.index < 3 );
+    Slides.remove(Slide => Slide.index < 3);
 
-    expect( Slides.getLength() ).toBe( length - 3 );
-    expect( Slides.getAt( 0 ).slide ).toBe( Slide3.slide );
-  } );
-} );
+    expect(Slides.getLength()).toBe(length - 3);
+    expect(Slides.getAt(0).slide).toBe(Slide3.slide);
+  });
+});

src/js/components/Slides/test/slide.test.ts

@@ -13,373 +13,373 @@ import { format } from '@splidejs/utils';
 import { SlideComponent } from '../Slide';
 
 
-describe( 'Slide', () => {
-  test( 'can assign the unique ID to the slide element.', () => {
-    const splide = init( { speed: 0 } );
+describe('Slide', () => {
+  test('can assign the unique ID to the slide element.', () => {
+    const splide = init({ speed: 0 });
     const { Slides } = splide.Components;
-    const Slide = Slides.getAt( 0 );
-    expect( Slide.slide.id.indexOf( splide.root.id ) ).toBe( 0 );
-  } );
+    const Slide = Slides.getAt(0);
+    expect(Slide.slide.id.indexOf(splide.root.id)).toBe(0);
+  });
 
-  test( 'can toggle the `is-active` class.', () => {
-    const splide = init( { speed: 0 } );
+  test('can toggle the `is-active` class.', () => {
+    const splide = init({ speed: 0 });
     const { Slides } = splide.Components;
-    const Slide0 = Slides.getAt( 0 );
-    const Slide1 = Slides.getAt( 1 );
+    const Slide0 = Slides.getAt(0);
+    const Slide1 = Slides.getAt(1);
 
-    expect( Slide0.slide.classList.contains( CLASS_ACTIVE ) ).toBe( true );
-    expect( Slide1.slide.classList.contains( CLASS_ACTIVE ) ).toBe( false );
+    expect(Slide0.slide.classList.contains(CLASS_ACTIVE)).toBe(true);
+    expect(Slide1.slide.classList.contains(CLASS_ACTIVE)).toBe(false);
 
-    splide.go( 1 );
+    splide.go(1);
 
-    expect( Slide0.slide.classList.contains( CLASS_ACTIVE ) ).toBe( false );
-    expect( Slide1.slide.classList.contains( CLASS_ACTIVE ) ).toBe( true );
-  } );
+    expect(Slide0.slide.classList.contains(CLASS_ACTIVE)).toBe(false);
+    expect(Slide1.slide.classList.contains(CLASS_ACTIVE)).toBe(true);
+  });
 
-  test( 'can emit an event when the slide becomes active.', () => {
-    const splide = init( { speed: 0 } );
+  test('can emit an event when the slide becomes active.', () => {
+    const splide = init({ speed: 0 });
     const { Slides } = splide.Components;
-    const Slide1    = Slides.getAt( 1 );
-    const Slide2    = Slides.getAt( 2 );
-    const callback  = jest.fn();
+    const Slide1 = Slides.getAt(1);
+    const Slide2 = Slides.getAt(2);
+    const callback = jest.fn();
 
-    splide.on( EVENT_ACTIVE, callback );
+    splide.on(EVENT_ACTIVE, callback);
 
-    splide.go( 1 );
-    expect( callback ).toHaveBeenCalledWith( Slide1 );
+    splide.go(1);
+    expect(callback).toHaveBeenCalledWith(Slide1);
 
-    splide.go( 2 );
-    expect( callback ).toHaveBeenCalledWith( Slide2 );
-  } );
+    splide.go(2);
+    expect(callback).toHaveBeenCalledWith(Slide2);
+  });
 
-  test( 'can emit an event when the slide becomes inactive.', () => {
-    const splide = init( { speed: 0 } );
+  test('can emit an event when the slide becomes inactive.', () => {
+    const splide = init({ speed: 0 });
     const { Slides } = splide.Components;
-    const Slide0    = Slides.getAt( 0 );
-    const Slide1    = Slides.getAt( 1 );
-    const Slide2    = Slides.getAt( 2 );
-    const callback  = jest.fn();
+    const Slide0 = Slides.getAt(0);
+    const Slide1 = Slides.getAt(1);
+    const Slide2 = Slides.getAt(2);
+    const callback = jest.fn();
 
-    splide.on( EVENT_INACTIVE, callback );
-    splide.on( EVENT_INACTIVE, callback );
+    splide.on(EVENT_INACTIVE, callback);
+    splide.on(EVENT_INACTIVE, callback);
 
-    splide.go( 1 );
-    expect( callback ).toHaveBeenCalledWith( Slide0 );
+    splide.go(1);
+    expect(callback).toHaveBeenCalledWith(Slide0);
 
-    splide.go( 2 );
-    expect( callback ).toHaveBeenCalledWith( Slide1 );
+    splide.go(2);
+    expect(callback).toHaveBeenCalledWith(Slide1);
 
-    splide.go( 1 );
-    expect( callback ).toHaveBeenCalledWith( Slide2 );
-  } );
+    splide.go(1);
+    expect(callback).toHaveBeenCalledWith(Slide2);
+  });
 
-  test( 'can toggle the `is-visible` class and the `aria-hidden` attribute.', () => {
-    const splide = init( { speed: 0, perPage: 2 } );
+  test('can toggle the `is-visible` class and the `aria-hidden` attribute.', () => {
+    const splide = init({ speed: 0, perPage: 2 });
     const { Slides } = splide.Components;
 
-    const Slide0 = Slides.getAt( 0 );
-    const Slide1 = Slides.getAt( 1 );
-    const Slide2 = Slides.getAt( 2 );
+    const Slide0 = Slides.getAt(0);
+    const Slide1 = Slides.getAt(1);
+    const Slide2 = Slides.getAt(2);
 
-    expect( Slide0.slide.classList.contains( CLASS_VISIBLE ) ).toBe( true );
-    expect( Slide1.slide.classList.contains( CLASS_VISIBLE ) ).toBe( true );
-    expect( Slide2.slide.classList.contains( CLASS_VISIBLE ) ).toBe( false );
+    expect(Slide0.slide.classList.contains(CLASS_VISIBLE)).toBe(true);
+    expect(Slide1.slide.classList.contains(CLASS_VISIBLE)).toBe(true);
+    expect(Slide2.slide.classList.contains(CLASS_VISIBLE)).toBe(false);
 
-    expect( Slide0.slide.getAttribute( 'aria-hidden' ) ).toBeNull();
-    expect( Slide1.slide.getAttribute( 'aria-hidden' ) ).toBeNull();
-    expect( Slide2.slide.getAttribute( 'aria-hidden' ) ).toBe( 'true' );
+    expect(Slide0.slide.getAttribute('aria-hidden')).toBeNull();
+    expect(Slide1.slide.getAttribute('aria-hidden')).toBeNull();
+    expect(Slide2.slide.getAttribute('aria-hidden')).toBe('true');
 
-    splide.go( 1 );
+    splide.go(1);
 
-    expect( Slide0.slide.classList.contains( CLASS_VISIBLE ) ).toBe( false );
-    expect( Slide1.slide.classList.contains( CLASS_VISIBLE ) ).toBe( true );
-    expect( Slide2.slide.classList.contains( CLASS_VISIBLE ) ).toBe( true );
+    expect(Slide0.slide.classList.contains(CLASS_VISIBLE)).toBe(false);
+    expect(Slide1.slide.classList.contains(CLASS_VISIBLE)).toBe(true);
+    expect(Slide2.slide.classList.contains(CLASS_VISIBLE)).toBe(true);
 
-    expect( Slide0.slide.getAttribute( 'aria-hidden' ) ).toBe( 'true' );
-    expect( Slide1.slide.getAttribute( 'aria-hidden' ) ).toBeNull();
-    expect( Slide2.slide.getAttribute( 'aria-hidden' ) ).toBeNull();
-  } );
+    expect(Slide0.slide.getAttribute('aria-hidden')).toBe('true');
+    expect(Slide1.slide.getAttribute('aria-hidden')).toBeNull();
+    expect(Slide2.slide.getAttribute('aria-hidden')).toBeNull();
+  });
 
-  test( 'should not update aria-hidden on move even if `updateOnMove` is enabled.', () => {
-    const splide = init( { speed: 100, updateOnMove: true } );
+  test('should not update aria-hidden on move even if `updateOnMove` is enabled.', () => {
+    const splide = init({ speed: 100, updateOnMove: true });
     const { Slides } = splide.Components;
     const { list } = splide.Components.Elements;
 
-    const Slide0 = Slides.getAt( 0 );
-    const Slide1 = Slides.getAt( 1 );
-    const Slide2 = Slides.getAt( 2 );
+    const Slide0 = Slides.getAt(0);
+    const Slide1 = Slides.getAt(1);
+    const Slide2 = Slides.getAt(2);
 
-    splide.go( 1 );
+    splide.go(1);
 
-    expect( Slide0.slide.getAttribute( 'aria-hidden' ) ).toBeNull();
-    expect( Slide1.slide.getAttribute( 'aria-hidden' ) ).toBe( 'true' );
-    expect( Slide2.slide.getAttribute( 'aria-hidden' ) ).toBe( 'true' );
+    expect(Slide0.slide.getAttribute('aria-hidden')).toBeNull();
+    expect(Slide1.slide.getAttribute('aria-hidden')).toBe('true');
+    expect(Slide2.slide.getAttribute('aria-hidden')).toBe('true');
 
-    fire( list, 'transitionend' );
+    fire(list, 'transitionend');
 
-    expect( Slide0.slide.getAttribute( 'aria-hidden' ) ).toBe( 'true' );
-    expect( Slide1.slide.getAttribute( 'aria-hidden' ) ).toBeNull();
-    expect( Slide2.slide.getAttribute( 'aria-hidden' ) ).toBe( 'true' );
+    expect(Slide0.slide.getAttribute('aria-hidden')).toBe('true');
+    expect(Slide1.slide.getAttribute('aria-hidden')).toBeNull();
+    expect(Slide2.slide.getAttribute('aria-hidden')).toBe('true');
 
-    splide.go( 2 );
+    splide.go(2);
 
-    expect( Slide0.slide.getAttribute( 'aria-hidden' ) ).toBe( 'true' );
-    expect( Slide1.slide.getAttribute( 'aria-hidden' ) ).toBeNull();
-    expect( Slide2.slide.getAttribute( 'aria-hidden' ) ).toBe( 'true' );
+    expect(Slide0.slide.getAttribute('aria-hidden')).toBe('true');
+    expect(Slide1.slide.getAttribute('aria-hidden')).toBeNull();
+    expect(Slide2.slide.getAttribute('aria-hidden')).toBe('true');
 
-    fire( list, 'transitionend' );
+    fire(list, 'transitionend');
 
-    expect( Slide0.slide.getAttribute( 'aria-hidden' ) ).toBe( 'true' );
-    expect( Slide1.slide.getAttribute( 'aria-hidden' ) ).toBe( 'true' );
-    expect( Slide2.slide.getAttribute( 'aria-hidden' ) ).toBeNull();
-  } );
+    expect(Slide0.slide.getAttribute('aria-hidden')).toBe('true');
+    expect(Slide1.slide.getAttribute('aria-hidden')).toBe('true');
+    expect(Slide2.slide.getAttribute('aria-hidden')).toBeNull();
+  });
 
-  test( 'can emit an event when the slide becomes visible.', () => {
-    const splide = init( { speed: 0, perPage: 2 } );
+  test('can emit an event when the slide becomes visible.', () => {
+    const splide = init({ speed: 0, perPage: 2 });
     const { Slides } = splide.Components;
-    const Slide0        = Slides.getAt( 0 );
-    const Slide1        = Slides.getAt( 1 );
-    const Slide2        = Slides.getAt( 2 );
-    const Slide3        = Slides.getAt( 3 );
-    const callback      = jest.fn();
+    const Slide0 = Slides.getAt(0);
+    const Slide1 = Slides.getAt(1);
+    const Slide2 = Slides.getAt(2);
+    const Slide3 = Slides.getAt(3);
+    const callback = jest.fn();
     const visibleSlides = [] as SlideComponent[];
 
-    splide.on( EVENT_VISIBLE, Slide => {
+    splide.on(EVENT_VISIBLE, Slide => {
       callback();
-      visibleSlides.push( Slide );
-    } );
+      visibleSlides.push(Slide);
+    });
 
-    splide.go( '>' );
-    expect( visibleSlides ).toEqual( [ Slide2, Slide3 ] );
+    splide.go('>');
+    expect(visibleSlides).toEqual([Slide2, Slide3]);
     visibleSlides.length = 0;
 
-    splide.go( '<' );
-    expect( visibleSlides ).toEqual( [ Slide0, Slide1 ] );
-  } );
+    splide.go('<');
+    expect(visibleSlides).toEqual([Slide0, Slide1]);
+  });
 
-  test( 'can toggle `tabindex` by visibility if `slideFocus` is enabled.', () => {
-    const splide = init( { speed: 0, slideFocus: true } );
+  test('can toggle `tabindex` by visibility if `slideFocus` is enabled.', () => {
+    const splide = init({ speed: 0, slideFocus: true });
     const { Slides } = splide.Components;
 
-    const Slide0 = Slides.getAt( 0 );
-    const Slide1 = Slides.getAt( 1 );
+    const Slide0 = Slides.getAt(0);
+    const Slide1 = Slides.getAt(1);
 
-    expect( Slide0.slide.tabIndex ).toBe( 0 );
-    expect( Slide1.slide.tabIndex ).toBe( -1 );
+    expect(Slide0.slide.tabIndex).toBe(0);
+    expect(Slide1.slide.tabIndex).toBe(-1);
 
-    splide.go( 1 );
+    splide.go(1);
 
-    expect( Slide0.slide.tabIndex ).toBe( -1 );
-    expect( Slide1.slide.tabIndex ).toBe( 0 );
-  } );
+    expect(Slide0.slide.tabIndex).toBe(-1);
+    expect(Slide1.slide.tabIndex).toBe(0);
+  });
 
-  test( 'can disable focus of focusable descendants when the slide gets hidden.', () => {
-    const splide = init( { speed: 0 }, { mount: false } );
-    const slide0 = document.querySelector( `.${ CLASS_SLIDE }` );
-    const a      = document.createElement( 'a' );
-    const button = document.createElement( 'button' );
+  test('can disable focus of focusable descendants when the slide gets hidden.', () => {
+    const splide = init({ speed: 0 }, { mount: false });
+    const slide0 = document.querySelector(`.${ CLASS_SLIDE }`);
+    const a = document.createElement('a');
+    const button = document.createElement('button');
 
-    slide0.appendChild( a );
-    slide0.appendChild( button );
+    slide0.appendChild(a);
+    slide0.appendChild(button);
 
     splide.mount();
 
-    splide.go( 1 );
-    expect( a.tabIndex ).toBe( -1 );
-    expect( button.tabIndex ).toBe( -1 );
+    splide.go(1);
+    expect(a.tabIndex).toBe(-1);
+    expect(button.tabIndex).toBe(-1);
 
-    splide.go( 0 );
-    expect( a.tabIndex ).toBe( 0 );
-    expect( button.tabIndex ).toBe( 0 );
-  } );
+    splide.go(0);
+    expect(a.tabIndex).toBe(0);
+    expect(button.tabIndex).toBe(0);
+  });
 
-  test( 'can emit an event when the slide gets hidden.', () => {
-    const splide = init( { speed: 0, perPage: 2 } );
+  test('can emit an event when the slide gets hidden.', () => {
+    const splide = init({ speed: 0, perPage: 2 });
     const { Slides } = splide.Components;
-    const Slide0       = Slides.getAt( 0 );
-    const Slide1       = Slides.getAt( 1 );
-    const Slide2       = Slides.getAt( 2 );
-    const Slide3       = Slides.getAt( 3 );
-    const callback     = jest.fn();
+    const Slide0 = Slides.getAt(0);
+    const Slide1 = Slides.getAt(1);
+    const Slide2 = Slides.getAt(2);
+    const Slide3 = Slides.getAt(3);
+    const callback = jest.fn();
     const hiddenSlides = [] as SlideComponent[];
 
-    splide.on( EVENT_HIDDEN, Slide => {
+    splide.on(EVENT_HIDDEN, Slide => {
       callback();
-      hiddenSlides.push( Slide );
-    } );
+      hiddenSlides.push(Slide);
+    });
 
-    splide.go( '>' );
-    expect( hiddenSlides ).toEqual( [ Slide0, Slide1 ] );
+    splide.go('>');
+    expect(hiddenSlides).toEqual([Slide0, Slide1]);
     hiddenSlides.length = 0;
 
-    splide.go( '<' );
-    expect( hiddenSlides ).toEqual( [ Slide2, Slide3 ] );
-  } );
+    splide.go('<');
+    expect(hiddenSlides).toEqual([Slide2, Slide3]);
+  });
 
-  test( 'can toggle the `is-prev` and `is-next` classes.', () => {
-    const splide = init( { type: 'loop', speed: 0 } );
+  test('can toggle the `is-prev` and `is-next` classes.', () => {
+    const splide = init({ type: 'loop', speed: 0 });
     const { Slides } = splide.Components;
 
-    const Clone1 = Slides.getAt( -1 );
-    const Slide0 = Slides.getAt( 0 );
-    const Slide1 = Slides.getAt( 1 );
-    const Slide2 = Slides.getAt( 2 );
+    const Clone1 = Slides.getAt(-1);
+    const Slide0 = Slides.getAt(0);
+    const Slide1 = Slides.getAt(1);
+    const Slide2 = Slides.getAt(2);
 
-    expect( Clone1.slide.classList.contains( CLASS_PREV ) ).toBe( true );
-    expect( Slide0.slide.classList.contains( CLASS_PREV ) ).toBe( false );
-    expect( Slide0.slide.classList.contains( CLASS_NEXT ) ).toBe( false );
-    expect( Slide1.slide.classList.contains( CLASS_NEXT ) ).toBe( true );
+    expect(Clone1.slide.classList.contains(CLASS_PREV)).toBe(true);
+    expect(Slide0.slide.classList.contains(CLASS_PREV)).toBe(false);
+    expect(Slide0.slide.classList.contains(CLASS_NEXT)).toBe(false);
+    expect(Slide1.slide.classList.contains(CLASS_NEXT)).toBe(true);
 
-    splide.go( 1 );
+    splide.go(1);
 
-    expect( Clone1.slide.classList.contains( CLASS_PREV ) ).toBe( false );
-    expect( Slide0.slide.classList.contains( CLASS_PREV ) ).toBe( true );
-    expect( Slide1.slide.classList.contains( CLASS_PREV ) ).toBe( false );
-    expect( Slide1.slide.classList.contains( CLASS_NEXT ) ).toBe( false );
-    expect( Slide2.slide.classList.contains( CLASS_NEXT ) ).toBe( true );
-  } );
+    expect(Clone1.slide.classList.contains(CLASS_PREV)).toBe(false);
+    expect(Slide0.slide.classList.contains(CLASS_PREV)).toBe(true);
+    expect(Slide1.slide.classList.contains(CLASS_PREV)).toBe(false);
+    expect(Slide1.slide.classList.contains(CLASS_NEXT)).toBe(false);
+    expect(Slide2.slide.classList.contains(CLASS_NEXT)).toBe(true);
+  });
 
-  test( 'can tell if the slide is within the specified range.', () => {
-    const splide = init( { type: 'loop', speed: 0 } );
+  test('can tell if the slide is within the specified range.', () => {
+    const splide = init({ type: 'loop', speed: 0 });
     const { Slides } = splide.Components;
 
-    const Slide0 = Slides.getAt( 0 );
-    const Slide1 = Slides.getAt( 1 );
-    const Slide2 = Slides.getAt( 2 );
-    const Clone  = Slides.getAt( -1 );
+    const Slide0 = Slides.getAt(0);
+    const Slide1 = Slides.getAt(1);
+    const Slide2 = Slides.getAt(2);
+    const Clone = Slides.getAt(-1);
 
-    expect( Slide0.isWithin( 0, 1 ) ).toBe( true );
-    expect( Slide1.isWithin( 0, 1 ) ).toBe( true );
-    expect( Slide2.isWithin( 0, 1 ) ).toBe( false );
+    expect(Slide0.isWithin(0, 1)).toBe(true);
+    expect(Slide1.isWithin(0, 1)).toBe(true);
+    expect(Slide2.isWithin(0, 1)).toBe(false);
 
-    expect( Clone.isWithin( 0, 1 ) ).toBe( true );
-  } );
+    expect(Clone.isWithin(0, 1)).toBe(true);
+  });
 
 
-  test( 'should assign the tabpanel role if the pagination option is enabled.', () => {
-    const splide = init( { pagination: true } );
+  test('should assign the tabpanel role if the pagination option is enabled.', () => {
+    const splide = init({ pagination: true });
 
-    splide.Components.Slides.forEach( ( { slide } ) => {
-      expect( slide.getAttribute( 'role' ) ).toBe( 'tabpanel' );
-    } );
-  } );
+    splide.Components.Slides.forEach(({ slide }) => {
+      expect(slide.getAttribute('role')).toBe('tabpanel');
+    });
+  });
 
-  test( 'should assign group tab role with `aria-roledescription` if the pagination option is disabled.', () => {
-    const splide = init( { pagination: false } );
+  test('should assign group tab role with `aria-roledescription` if the pagination option is disabled.', () => {
+    const splide = init({ pagination: false });
 
-    splide.Components.Slides.forEach( ( { slide } ) => {
-      expect( slide.getAttribute( 'role' ) ).toBe( 'group' );
-      expect( slide.getAttribute( 'aria-roledescription' ) ).toBe( splide.options.i18n.slide );
-    } );
-  } );
+    splide.Components.Slides.forEach(({ slide }) => {
+      expect(slide.getAttribute('role')).toBe('group');
+      expect(slide.getAttribute('aria-roledescription')).toBe(splide.options.i18n.slide);
+    });
+  });
 
-  test( 'can assign and update role/aria attributes for navigation.', () => {
-    const splide = init( { speed: 0, isNavigation: true, pagination: false } );
+  test('can assign and update role/aria attributes for navigation.', () => {
+    const splide = init({ speed: 0, isNavigation: true, pagination: false });
     const { Slides } = splide.Components;
-    const Slide0 = Slides.getAt( 0 );
-    const Slide1 = Slides.getAt( 1 );
+    const Slide0 = Slides.getAt(0);
+    const Slide1 = Slides.getAt(1);
 
-    expect( Slide0.slide.getAttribute( 'aria-current' ) ).toBe( 'true' );
-    expect( Slide0.slide.getAttribute( 'aria-label' ) ).toBe( format( splide.options.i18n.slideX, 1 ) );
+    expect(Slide0.slide.getAttribute('aria-current')).toBe('true');
+    expect(Slide0.slide.getAttribute('aria-label')).toBe(format(splide.options.i18n.slideX, 1));
 
-    expect( Slide1.slide.getAttribute( 'aria-current' ) ).toBeNull();
-    expect( Slide1.slide.getAttribute( 'aria-label' ) ).toBe( format( splide.options.i18n.slideX, 2 ) );
+    expect(Slide1.slide.getAttribute('aria-current')).toBeNull();
+    expect(Slide1.slide.getAttribute('aria-label')).toBe(format(splide.options.i18n.slideX, 2));
 
-    splide.go( 1 );
+    splide.go(1);
 
-    expect( Slide0.slide.getAttribute( 'aria-current' ) ).toBeNull();
-    expect( Slide1.slide.getAttribute( 'aria-current' ) ).toBe( 'true' );
-  } );
+    expect(Slide0.slide.getAttribute('aria-current')).toBeNull();
+    expect(Slide1.slide.getAttribute('aria-current')).toBe('true');
+  });
 
-  test( 'can emit the `click` event on click.', done => {
-    const splide = init( { speed: 0 } );
+  test('can emit the `click` event on click.', done => {
+    const splide = init({ speed: 0 });
     const { Slides } = splide.Components;
-    const { slide } = Slides.getAt( 2 );
+    const { slide } = Slides.getAt(2);
 
-    splide.on( EVENT_CLICK, Slide => {
-      expect( Slide.slide ).toBe( slide );
+    splide.on(EVENT_CLICK, Slide => {
+      expect(Slide.slide).toBe(slide);
       done();
-    } );
+    });
 
-    fire( slide, 'click' );
-  } );
+    fire(slide, 'click');
+  });
 
-  test( 'can emit the `slide:keydown` event on keydown.', done => {
-    const splide = init( { speed: 0, isNavigation: true } );
+  test('can emit the `slide:keydown` event on keydown.', done => {
+    const splide = init({ speed: 0, isNavigation: true });
     const { Slides } = splide.Components;
-    const { slide } = Slides.getAt( 2 );
+    const { slide } = Slides.getAt(2);
 
-    splide.on( EVENT_SLIDE_KEYDOWN, ( Slide, e ) => {
-      expect( Slide.slide ).toBe( slide );
-      expect( e.key ).toBe( 'Enter' );
+    splide.on(EVENT_SLIDE_KEYDOWN, (Slide, e) => {
+      expect(Slide.slide).toBe(slide);
+      expect(e.key).toBe('Enter');
       done();
-    } );
+    });
 
-    keydown( 'Enter', slide );
-  } );
+    keydown('Enter', slide);
+  });
 
-  test( 'should remove status classes and added attributes.', () => {
-    const splide = init( { speed: 0, isNavigation: true } );
+  test('should remove status classes and added attributes.', () => {
+    const splide = init({ speed: 0, isNavigation: true });
     const { Slides } = splide.Components;
-    const { slide } = Slides.getAt( 0 );
+    const { slide } = Slides.getAt(0);
 
     splide.destroy();
 
-    expect( slide.classList.contains( CLASS_ACTIVE ) ).toBe( false );
-    expect( slide.classList.contains( CLASS_VISIBLE ) ).toBe( false );
-    expect( slide.getAttribute( 'role' ) ).toBe( null );
-    expect( slide.getAttribute( 'aria-label' ) ).toBe( null );
-  } );
+    expect(slide.classList.contains(CLASS_ACTIVE)).toBe(false);
+    expect(slide.classList.contains(CLASS_VISIBLE)).toBe(false);
+    expect(slide.getAttribute('role')).toBe(null);
+    expect(slide.getAttribute('aria-label')).toBe(null);
+  });
 
-  test( 'can notify the active slide of other components on initialization.', () => {
-    const splide   = init( { start: 1 }, { mount: false } );
+  test('can notify the active slide of other components on initialization.', () => {
+    const splide = init({ start: 1 }, { mount: false });
     const callback = jest.fn();
 
-    const component = ( Splide: Splide ) => {
+    const component = (Splide: Splide) => {
       return {
         setup() {
-          Splide.on( EVENT_ACTIVE, Slide => {
-            expect( Slide.index ).toBe( 1 );
+          Splide.on(EVENT_ACTIVE, Slide => {
+            expect(Slide.index).toBe(1);
             callback();
-          } );
+          });
         },
       };
     };
 
-    splide.mount( { component } );
-    expect( callback ).toHaveBeenCalled();
-  } );
+    splide.mount({ component });
+    expect(callback).toHaveBeenCalled();
+  });
 
-  test( 'can check some slide is within the specified distance.', () => {
-    const splide = init( { perPage: 2, type: 'loop' } );
+  test('can check some slide is within the specified distance.', () => {
+    const splide = init({ perPage: 2, type: 'loop' });
     const { Slides } = splide.Components;
-    const Slide0 = Slides.getAt( 0 );
-    const Slide1 = Slides.getAt( 1 );
-    const Slide2 = Slides.getAt( 2 );
-    const Clone  = Slides.getAt( -1 );
-
-    expect( Slide0.isWithin( 0, 0 ) ).toBe( true );
-    expect( Slide0.isWithin( 0, 1 ) ).toBe( true );
-
-    expect( Slide1.isWithin( 0, 0 ) ).toBe( false );
-    expect( Slide1.isWithin( 0, 1 ) ).toBe( true );
-    expect( Slide1.isWithin( 0, 2 ) ).toBe( true );
-
-    expect( Slide2.isWithin( 0, 0 ) ).toBe( false );
-    expect( Slide2.isWithin( 0, 1 ) ).toBe( false );
-    expect( Slide2.isWithin( 0, 2 ) ).toBe( true );
-    expect( Slide2.isWithin( 0, 3 ) ).toBe( true );
-
-    expect( Slide0.isWithin( 2, 0 ) ).toBe( false );
-    expect( Slide0.isWithin( 2, 1 ) ).toBe( false );
-    expect( Slide0.isWithin( 2, 2 ) ).toBe( true );
-
-    expect( Slide1.isWithin( 2, 0 ) ).toBe( false );
-    expect( Slide1.isWithin( 2, 1 ) ).toBe( true );
-    expect( Slide1.isWithin( 2, 2 ) ).toBe( true );
-
-    expect( Clone.isWithin( 0, 0 ) ).toBe( false );
-    expect( Clone.isWithin( 0, 1 ) ).toBe( true );
-    expect( Clone.isWithin( 0, 2 ) ).toBe( true );
-  } );
-} );
+    const Slide0 = Slides.getAt(0);
+    const Slide1 = Slides.getAt(1);
+    const Slide2 = Slides.getAt(2);
+    const Clone = Slides.getAt(-1);
+
+    expect(Slide0.isWithin(0, 0)).toBe(true);
+    expect(Slide0.isWithin(0, 1)).toBe(true);
+
+    expect(Slide1.isWithin(0, 0)).toBe(false);
+    expect(Slide1.isWithin(0, 1)).toBe(true);
+    expect(Slide1.isWithin(0, 2)).toBe(true);
+
+    expect(Slide2.isWithin(0, 0)).toBe(false);
+    expect(Slide2.isWithin(0, 1)).toBe(false);
+    expect(Slide2.isWithin(0, 2)).toBe(true);
+    expect(Slide2.isWithin(0, 3)).toBe(true);
+
+    expect(Slide0.isWithin(2, 0)).toBe(false);
+    expect(Slide0.isWithin(2, 1)).toBe(false);
+    expect(Slide0.isWithin(2, 2)).toBe(true);
+
+    expect(Slide1.isWithin(2, 0)).toBe(false);
+    expect(Slide1.isWithin(2, 1)).toBe(true);
+    expect(Slide1.isWithin(2, 2)).toBe(true);
+
+    expect(Clone.isWithin(0, 0)).toBe(false);
+    expect(Clone.isWithin(0, 1)).toBe(true);
+    expect(Clone.isWithin(0, 2)).toBe(true);
+  });
+});

src/js/components/Sync/Sync.ts

@@ -29,7 +29,7 @@ export interface SyncComponent extends BaseComponent {
  *
  * @since 3.0.0
  */
-const TRIGGER_KEYS = [ ' ', 'Enter' ];
+const TRIGGER_KEYS = [' ', 'Enter'];
 
 /**
  * The component for syncing multiple sliders.
@@ -43,7 +43,7 @@ const TRIGGER_KEYS = [ ' ', 'Enter' ];
  *
  * @return A Sync component object.
  */
-export const Sync: ComponentConstructor<SyncComponent> = ( Splide, Components, options, event ) => {
+export const Sync: ComponentConstructor<SyncComponent> = (Splide, Components, options, event) => {
   const { isNavigation, slideFocus } = options;
 
   /**
@@ -55,14 +55,14 @@ export const Sync: ComponentConstructor<SyncComponent> = ( Splide, Components, o
    * Called when the component is mounted.
    */
   function mount(): void {
-    Splide.splides.forEach( target => {
-      if ( ! target.isParent ) {
-        sync( Splide, target.splide );
-        sync( target.splide, Splide );
+    Splide.splides.forEach(target => {
+      if (!target.isParent) {
+        sync(Splide, target.splide);
+        sync(target.splide, Splide);
       }
-    } );
+    });
 
-    if ( isNavigation ) {
+    if (isNavigation) {
       navigate();
     }
   }
@@ -71,8 +71,8 @@ export const Sync: ComponentConstructor<SyncComponent> = ( Splide, Components, o
    * Destroys the component.
    */
   function destroy(): void {
-    events.forEach( event => { event.destroy() } );
-    empty( events );
+    events.forEach(event => event.destroy());
+    empty(events);
   }
 
   /**
@@ -91,14 +91,14 @@ export const Sync: ComponentConstructor<SyncComponent> = ( Splide, Components, o
    * @param splide - A splide instance to sync with.
    * @param target - A target splide instance.
    */
-  function sync( splide: Splide, target: Splide ): void {
+  function sync(splide: Splide, target: Splide): void {
     const event = splide.event.lock();
 
-    event.on( EVENT_MOVE, ( index, prev, dest ) => {
-      target.index !== index && target.go( target.is( LOOP ) ? dest : index );
-    } );
+    event.on(EVENT_MOVE, (index, prev, dest) => {
+      target.index !== index && target.go(target.is(LOOP) ? dest : index);
+    });
 
-    events.push( event );
+    events.push(event);
   }
 
   /**
@@ -109,12 +109,12 @@ export const Sync: ComponentConstructor<SyncComponent> = ( Splide, Components, o
     const ev = event.lock();
     const { on } = ev;
 
-    on( EVENT_CLICK, onClick );
-    on( EVENT_SLIDE_KEYDOWN, onKeydown );
-    on( [ EVENT_MOUNTED, EVENT_UPDATED ], update );
+    on(EVENT_CLICK, onClick);
+    on(EVENT_SLIDE_KEYDOWN, onKeydown);
+    on([EVENT_MOUNTED, EVENT_UPDATED], update);
 
-    events.push( ev );
-    ev.emit( EVENT_NAVIGATION_MOUNTED, Splide.splides );
+    events.push(ev);
+    ev.emit(EVENT_NAVIGATION_MOUNTED, Splide.splides);
   }
 
   /**
@@ -124,7 +124,7 @@ export const Sync: ComponentConstructor<SyncComponent> = ( Splide, Components, o
     setAttribute(
       Components.Elements.list,
       ARIA_ORIENTATION,
-      options.direction === TTB ? 'vertical' : ''
+      options.direction === TTB ? 'vertical' : '',
     );
   }
 
@@ -133,8 +133,8 @@ export const Sync: ComponentConstructor<SyncComponent> = ( Splide, Components, o
    *
    * @param Slide - A clicked Slide component.
    */
-  function onClick( Slide: SlideComponent ): void {
-    Splide.go( Slide.index );
+  function onClick(Slide: SlideComponent): void {
+    Splide.go(Slide.index);
   }
 
   /**
@@ -143,18 +143,18 @@ export const Sync: ComponentConstructor<SyncComponent> = ( Splide, Components, o
    * @param Slide - A Slide component.
    * @param e     - A KeyboardEvent object.
    */
-  function onKeydown( Slide: SlideComponent, e: KeyboardEvent ): void {
-    if ( includes( TRIGGER_KEYS, e.key ) ) {
-      onClick( Slide );
-      prevent( e );
+  function onKeydown(Slide: SlideComponent, e: KeyboardEvent): void {
+    if (includes(TRIGGER_KEYS, e.key)) {
+      onClick(Slide);
+      prevent(e);
     }
   }
 
   return {
     setup: apply(
       Components.Breakpoints.set,
-      { slideFocus: isUndefined( slideFocus ) ? isNavigation : slideFocus },
-      true
+      { slideFocus: isUndefined(slideFocus) ? isNavigation : slideFocus },
+      true,
     ),
     mount,
     destroy,

src/js/components/Sync/test/navigation.test.ts

@@ -1,52 +1,52 @@
 import { fire, init, keydown } from '../../../test';
 
 
-describe( 'Sync#navigate()', () => {
-  test( 'can make slides clickable.', () => {
-    const primary   = init( { speed: 0 }, { id: 'primary', mount: false } );
-    const secondary = init( { speed: 0, isNavigation: true }, { id: 'secondary', insertHtml: true, mount: false } );
+describe('Sync#navigate()', () => {
+  test('can make slides clickable.', () => {
+    const primary = init({ speed: 0 }, { id: 'primary', mount: false });
+    const secondary = init({ speed: 0, isNavigation: true }, { id: 'secondary', insertHtml: true, mount: false });
 
-    primary.sync( secondary ).mount();
+    primary.sync(secondary).mount();
     secondary.mount();
 
     const Slides = secondary.Components.Slides.get();
 
-    fire( Slides[ 1 ].slide, 'click' );
+    fire(Slides[1].slide, 'click');
 
-    expect( primary.index ).toBe( 1 );
-    expect( secondary.index ).toBe( 1 );
+    expect(primary.index).toBe(1);
+    expect(secondary.index).toBe(1);
 
-    fire( Slides[ 5 ].slide, 'click' );
+    fire(Slides[5].slide, 'click');
 
-    expect( primary.index ).toBe( 5 );
-    expect( secondary.index ).toBe( 5 );
-  } );
+    expect(primary.index).toBe(5);
+    expect(secondary.index).toBe(5);
+  });
 
-  test( 'can make slides receive key inputs.', () => {
-    const primary   = init( { speed: 0 }, { id: 'primary', mount: false } );
-    const secondary = init( { speed: 0, isNavigation: true }, { id: 'secondary', insertHtml: true, mount: false } );
+  test('can make slides receive key inputs.', () => {
+    const primary = init({ speed: 0 }, { id: 'primary', mount: false });
+    const secondary = init({ speed: 0, isNavigation: true }, { id: 'secondary', insertHtml: true, mount: false });
 
-    primary.sync( secondary ).mount();
+    primary.sync(secondary).mount();
     secondary.mount();
 
     const Slides = secondary.Components.Slides.get();
 
-    Slides[ 1 ].slide.focus();
-    keydown( 'Enter', Slides[ 1 ].slide );
+    Slides[1].slide.focus();
+    keydown('Enter', Slides[1].slide);
 
-    expect( primary.index ).toBe( 1 );
-    expect( secondary.index ).toBe( 1 );
+    expect(primary.index).toBe(1);
+    expect(secondary.index).toBe(1);
 
-    Slides[ 5 ].slide.focus();
-    keydown( ' ', Slides[ 5 ].slide );
+    Slides[5].slide.focus();
+    keydown(' ', Slides[5].slide);
 
-    expect( primary.index ).toBe( 5 );
-    expect( secondary.index ).toBe( 5 );
+    expect(primary.index).toBe(5);
+    expect(secondary.index).toBe(5);
 
-    Slides[ 3 ].slide.focus();
-    keydown( 'Enter', Slides[ 3 ].slide );
+    Slides[3].slide.focus();
+    keydown('Enter', Slides[3].slide);
 
-    expect( primary.index ).toBe( 3 );
-    expect( secondary.index ).toBe( 3 );
-  } );
-} );
+    expect(primary.index).toBe(3);
+    expect(secondary.index).toBe(3);
+  });
+});

src/js/components/Sync/test/sync.test.ts

@@ -3,96 +3,96 @@ import { Splide } from '../../../core/Splide/Splide';
 import { init } from '../../../test';
 
 
-describe( 'Sync#sync()', () => {
-  test( 'can sync Splide sliders.', () => {
-    const primary   = init( { speed: 0 }, { id: 'primary', mount: false } );
-    const secondary = init( { speed: 0 }, { id: 'secondary', insertHtml: true, mount: false } );
+describe('Sync#sync()', () => {
+  test('can sync Splide sliders.', () => {
+    const primary = init({ speed: 0 }, { id: 'primary', mount: false });
+    const secondary = init({ speed: 0 }, { id: 'secondary', insertHtml: true, mount: false });
 
-    primary.sync( secondary ).mount();
+    primary.sync(secondary).mount();
     secondary.mount();
 
-    expect( primary.index ).toBe( 0 );
-    expect( secondary.index ).toBe( 0 );
+    expect(primary.index).toBe(0);
+    expect(secondary.index).toBe(0);
 
-    primary.go( 1 );
-    expect( primary.index ).toBe( 1 );
-    expect( secondary.index ).toBe( 1 );
+    primary.go(1);
+    expect(primary.index).toBe(1);
+    expect(secondary.index).toBe(1);
 
-    primary.go( 4 );
-    expect( primary.index ).toBe( 4 );
-    expect( secondary.index ).toBe( 4 );
+    primary.go(4);
+    expect(primary.index).toBe(4);
+    expect(secondary.index).toBe(4);
 
-    secondary.go( 0 );
-    expect( primary.index ).toBe( 0 );
-    expect( secondary.index ).toBe( 0 );
+    secondary.go(0);
+    expect(primary.index).toBe(0);
+    expect(secondary.index).toBe(0);
 
-    secondary.go( 5 );
-    expect( primary.index ).toBe( 5 );
-    expect( secondary.index ).toBe( 5 );
-  } );
+    secondary.go(5);
+    expect(primary.index).toBe(5);
+    expect(secondary.index).toBe(5);
+  });
 
-  test( 'can sync Splide sliders after mount.', () => {
-    const primary   = init( { speed: 0 }, { id: 'primary', mount: false } );
-    const secondary = init( { speed: 0 }, { id: 'secondary', insertHtml: true, mount: false } );
+  test('can sync Splide sliders after mount.', () => {
+    const primary = init({ speed: 0 }, { id: 'primary', mount: false });
+    const secondary = init({ speed: 0 }, { id: 'secondary', insertHtml: true, mount: false });
 
     primary.mount();
     secondary.mount();
-    primary.sync( secondary );
+    primary.sync(secondary);
 
-    primary.go( 1 );
-    expect( primary.index ).toBe( 1 );
-    expect( secondary.index ).toBe( 1 );
+    primary.go(1);
+    expect(primary.index).toBe(1);
+    expect(secondary.index).toBe(1);
 
-    primary.go( 4 );
-    expect( primary.index ).toBe( 4 );
-    expect( secondary.index ).toBe( 4 );
-  } );
+    primary.go(4);
+    expect(primary.index).toBe(4);
+    expect(secondary.index).toBe(4);
+  });
 
-  test( 'can sync multiple Splide sliders.', () => {
-    const primary = init( { speed: 0 }, { id: 'primary', mount: false } );
+  test('can sync multiple Splide sliders.', () => {
+    const primary = init({ speed: 0 }, { id: 'primary', mount: false });
     const splides: Splide[] = [];
 
-    Array.from( { length: 5 } ).forEach( ( item, index ) => {
-      const secondary = init( { speed: 0 }, { id: `secondary-${ index }`, insertHtml: true, mount: false } );
-      splides.push( secondary );
-      primary.sync( secondary );
-    } );
+    Array.from({ length: 5 }).forEach((item, index) => {
+      const secondary = init({ speed: 0 }, { id: `secondary-${ index }`, insertHtml: true, mount: false });
+      splides.push(secondary);
+      primary.sync(secondary);
+    });
 
     primary.mount();
-    splides.forEach( splide => splide.mount() );
-
-    primary.go( 1 );
-    splides.forEach( splide => {
-      expect( splide.index ).toBe( 1 );
-    } );
-
-    primary.go( 5 );
-    splides.forEach( splide => {
-      expect( splide.index ).toBe( 5 );
-    } );
-
-    splides[ 3 ].go( 3 );
-    expect( primary.index ).toBe( 3 );
-    splides.forEach( splide => {
-      expect( splide.index ).toBe( 3 );
-    } );
-  } );
-
-  test( 'should prevent recursive calls of `move` event handlers.', () => {
-    const primary   = init( { speed: 0 }, { id: 'primary', mount: false } );
-    const secondary = init( { speed: 0 }, { id: 'secondary', insertHtml: true, mount: false } );
-    const callback  = jest.fn();
-
-    primary.sync( secondary ).mount();
+    splides.forEach(splide => splide.mount());
+
+    primary.go(1);
+    splides.forEach(splide => {
+      expect(splide.index).toBe(1);
+    });
+
+    primary.go(5);
+    splides.forEach(splide => {
+      expect(splide.index).toBe(5);
+    });
+
+    splides[3].go(3);
+    expect(primary.index).toBe(3);
+    splides.forEach(splide => {
+      expect(splide.index).toBe(3);
+    });
+  });
+
+  test('should prevent recursive calls of `move` event handlers.', () => {
+    const primary = init({ speed: 0 }, { id: 'primary', mount: false });
+    const secondary = init({ speed: 0 }, { id: 'secondary', insertHtml: true, mount: false });
+    const callback = jest.fn();
+
+    primary.sync(secondary).mount();
     secondary.mount();
 
-    primary.on( EVENT_MOVE, callback );
+    primary.on(EVENT_MOVE, callback);
 
-    primary.go( 1 );
-    expect( callback ).toHaveBeenCalledTimes( 1 );
+    primary.go(1);
+    expect(callback).toHaveBeenCalledTimes(1);
 
-    secondary.go( 2 );
-    expect( callback ).toHaveBeenCalledTimes( 2 );
-  } );
-} );
+    secondary.go(2);
+    expect(callback).toHaveBeenCalledTimes(2);
+  });
+});
 

src/js/components/Wheel/Wheel.ts

@@ -25,7 +25,7 @@ export interface WheelComponent extends BaseComponent {
  *
  * @return A Wheel component object.
  */
-export const Wheel: ComponentConstructor<WheelComponent> = ( Splide, Components, options, event ) => {
+export const Wheel: ComponentConstructor<WheelComponent> = (Splide, Components, options, event) => {
   /**
    * Holds the last time when the wheel moves the slider.
    */
@@ -37,11 +37,11 @@ export const Wheel: ComponentConstructor<WheelComponent> = ( Splide, Components,
   function mount(): void {
     event.destroy();
 
-    if ( options.wheel ) {
-      event.bind( Components.Elements.track, 'wheel', onWheel, SCROLL_LISTENER_OPTIONS );
+    if (options.wheel) {
+      event.bind(Components.Elements.track, 'wheel', onWheel, SCROLL_LISTENER_OPTIONS);
     }
 
-    event.on( EVENT_UPDATED, mount );
+    event.on(EVENT_UPDATED, mount);
   }
 
   /**
@@ -49,20 +49,20 @@ export const Wheel: ComponentConstructor<WheelComponent> = ( Splide, Components,
    *
    * @param e - A WheelEvent object.
    */
-  function onWheel( e: WheelEvent ): void {
-    if ( e.cancelable ) {
-      const delta     = parse( e );
+  function onWheel(e: WheelEvent): void {
+    if (e.cancelable) {
+      const delta = parse(e);
       const backwards = delta < 0;
-      const timeStamp = timeOf( e );
-      const min       = options.wheelMinThreshold || 0;
-      const sleep     = options.wheelSleep || 0;
+      const timeStamp = timeOf(e);
+      const min = options.wheelMinThreshold || 0;
+      const sleep = options.wheelSleep || 0;
 
-      if ( abs( delta ) > min && timeStamp - lastTime > sleep ) {
-        Splide.go( delta < 0 ? '<' : '>' );
+      if (abs(delta) > min && timeStamp - lastTime > sleep) {
+        Splide.go(delta < 0 ? '<' : '>');
         lastTime = timeStamp;
       }
 
-      shouldPrevent( backwards ) && prevent( e );
+      shouldPrevent(backwards) && prevent(e);
     }
   }
 
@@ -71,11 +71,11 @@ export const Wheel: ComponentConstructor<WheelComponent> = ( Splide, Components,
    *
    * @param e - A WheelEvent object.
    */
-  function parse( e: WheelEvent ): number {
+  function parse(e: WheelEvent): number {
     const { wheelAxis = 'y' } = options;
     const { deltaX, deltaY } = e;
-    const x = includes( wheelAxis, 'x' ) ? Components.Direction.orient( -deltaX ) : 0;
-    const y = includes( wheelAxis, 'y' ) ? deltaY : 0;
+    const x = includes(wheelAxis, 'x') ? Components.Direction.orient(-deltaX) : 0;
+    const y = includes(wheelAxis, 'y') ? deltaY : 0;
 
     return x || y;
   }
@@ -87,10 +87,10 @@ export const Wheel: ComponentConstructor<WheelComponent> = ( Splide, Components,
    *
    * @return `true` if the action should be prevented.
    */
-  function shouldPrevent( backwards: boolean ): boolean {
-    return ! options.releaseWheel
-      || Splide.state.is( MOVING )
-      || Components.Controller.getAdjacent( backwards ) !== -1;
+  function shouldPrevent(backwards: boolean): boolean {
+    return !options.releaseWheel
+      || Splide.state.is(MOVING)
+      || Components.Controller.getAdjacent(backwards) !== -1;
   }
 
   return {

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

@@ -1,43 +1,43 @@
 import { fire, init } from '../../../test';
 
 
-describe( 'Wheel', () => {
-  test( 'can navigate the slider by the mouse wheel.', () => {
-    const splide = init( { speed: 0, wheel: true } );
+describe('Wheel', () => {
+  test('can navigate the slider by the mouse wheel.', () => {
+    const splide = init({ speed: 0, wheel: true });
     const { track } = splide.Components.Elements;
 
-    fireCancelable( track, 'wheel', { deltaY: 100 } );
-    expect( splide.index ).toBe( 1 );
+    fireCancelable(track, 'wheel', { deltaY: 100 });
+    expect(splide.index).toBe(1);
 
-    fireCancelable( track, 'wheel', { deltaY: 100 } );
-    expect( splide.index ).toBe( 2 );
+    fireCancelable(track, 'wheel', { deltaY: 100 });
+    expect(splide.index).toBe(2);
 
-    fireCancelable( track, 'wheel', { deltaY: 100 } );
-    expect( splide.index ).toBe( 3 );
+    fireCancelable(track, 'wheel', { deltaY: 100 });
+    expect(splide.index).toBe(3);
 
-    fireCancelable( track, 'wheel', { deltaY: -100 } );
-    expect( splide.index ).toBe( 2 );
+    fireCancelable(track, 'wheel', { deltaY: -100 });
+    expect(splide.index).toBe(2);
 
-    fireCancelable( track, 'wheel', { deltaY: -100 } );
-    expect( splide.index ).toBe( 1 );
+    fireCancelable(track, 'wheel', { deltaY: -100 });
+    expect(splide.index).toBe(1);
 
-    fireCancelable( track, 'wheel', { deltaY: -100 } );
-    expect( splide.index ).toBe( 0 );
-  } );
+    fireCancelable(track, 'wheel', { deltaY: -100 });
+    expect(splide.index).toBe(0);
+  });
 
-  test( 'should be inactive if the `wheel` option is falsy.', () => {
-    const splide = init( { speed: 0, wheel: false } );
+  test('should be inactive if the `wheel` option is falsy.', () => {
+    const splide = init({ speed: 0, wheel: false });
     const { track } = splide.Components.Elements;
 
-    fireCancelable( track, 'wheel', { deltaY: 100 } );
-    expect( splide.index ).toBe( 0 );
+    fireCancelable(track, 'wheel', { deltaY: 100 });
+    expect(splide.index).toBe(0);
 
-    fireCancelable( track, 'wheel', { deltaY: 100 } );
-    expect( splide.index ).toBe( 0 );
-  } );
-} );
+    fireCancelable(track, 'wheel', { deltaY: 100 });
+    expect(splide.index).toBe(0);
+  });
+});
 
-export function fireCancelable( elm: Element | Window, event: string, data: any = {} ): void {
-  fire( elm, event, data, { cancelable: true } );
+export function fireCancelable(elm: Element | Window, event: string, data: any = {}): void {
+  fire(elm, event, data, { cancelable: true });
 }
 

src/js/components/Wheel/test/inertia.test.ts

@@ -2,45 +2,45 @@ import { init } from '../../../test';
 import { fireCancelable } from './general.test';
 
 
-describe( 'Wheel', () => {
-  test( 'should move the slider only when the delta is greater than the min threshold.', () => {
-    const splide = init( { speed: 0, wheel: true, wheelMinThreshold: 50 } );
+describe('Wheel', () => {
+  test('should move the slider only when the delta is greater than the min threshold.', () => {
+    const splide = init({ speed: 0, wheel: true, wheelMinThreshold: 50 });
     const { track } = splide.Components.Elements;
 
-    fireCancelable( track, 'wheel', { deltaY: 49 } );
-    expect( splide.index ).toBe( 0 );
+    fireCancelable(track, 'wheel', { deltaY: 49 });
+    expect(splide.index).toBe(0);
 
-    fireCancelable( track, 'wheel', { deltaY: 50 } );
-    expect( splide.index ).toBe( 0 );
+    fireCancelable(track, 'wheel', { deltaY: 50 });
+    expect(splide.index).toBe(0);
 
-    fireCancelable( track, 'wheel', { deltaY: 51 } );
-    expect( splide.index ).toBe( 1 );
+    fireCancelable(track, 'wheel', { deltaY: 51 });
+    expect(splide.index).toBe(1);
 
-    fireCancelable( track, 'wheel', { deltaY: -49 } );
-    expect( splide.index ).toBe( 1 );
+    fireCancelable(track, 'wheel', { deltaY: -49 });
+    expect(splide.index).toBe(1);
 
-    fireCancelable( track, 'wheel', { deltaY: -50 } );
-    expect( splide.index ).toBe( 1 );
+    fireCancelable(track, 'wheel', { deltaY: -50 });
+    expect(splide.index).toBe(1);
 
-    fireCancelable( track, 'wheel', { deltaY: -51 } );
-    expect( splide.index ).toBe( 0 );
-  } );
+    fireCancelable(track, 'wheel', { deltaY: -51 });
+    expect(splide.index).toBe(0);
+  });
 
-  test( 'should not move the slider while the wheel component is sleeping.', () => {
-    const splide = init( { speed: 0, wheel: true, wheelSleep: 500 } );
+  test('should not move the slider while the wheel component is sleeping.', () => {
+    const splide = init({ speed: 0, wheel: true, wheelSleep: 500 });
     const { track } = splide.Components.Elements;
 
-    fireCancelable( track, 'wheel', { deltaY: 100, timeStamp: 1000 } );
-    expect( splide.index ).toBe( 1 );
+    fireCancelable(track, 'wheel', { deltaY: 100, timeStamp: 1000 });
+    expect(splide.index).toBe(1);
 
-    fireCancelable( track, 'wheel', { deltaY: 100, timeStamp: 1100 } );
-    expect( splide.index ).toBe( 1 );
+    fireCancelable(track, 'wheel', { deltaY: 100, timeStamp: 1100 });
+    expect(splide.index).toBe(1);
 
-    fireCancelable( track, 'wheel', { deltaY: 100, timeStamp: 1500 } );
-    expect( splide.index ).toBe( 1 );
+    fireCancelable(track, 'wheel', { deltaY: 100, timeStamp: 1500 });
+    expect(splide.index).toBe(1);
 
-    fireCancelable( track, 'wheel', { deltaY: 100, timeStamp: 1501 } );
-    expect( splide.index ).toBe( 2 );
-  } );
-} );
+    fireCancelable(track, 'wheel', { deltaY: 100, timeStamp: 1501 });
+    expect(splide.index).toBe(2);
+  });
+});
 

src/js/components/index.ts

@@ -19,24 +19,25 @@ import { Sync } from './Sync/Sync';
 import { Wheel } from './Wheel/Wheel';
 import { Live } from './Live/Live';
 
+
 export { Breakpoints } from './Breakpoints/Breakpoints';
-export { Direction }   from './Direction/Direction';
-export { Elements }    from './Elements/Elements';
-export { Slides }      from './Slides/Slides';
-export { Layout }      from './Layout/Layout';
-export { Clones }      from './Clones/Clones';
-export { Move }        from './Move/Move';
-export { Controller }  from './Controller/Controller';
-export { Arrows }      from './Arrows/Arrows';
-export { Autoplay }    from './Autoplay/Autoplay';
-export { Scroll }      from './Scroll/Scroll';
-export { Drag }        from './Drag/Drag';
-export { Keyboard }    from './Keyboard/Keyboard';
-export { LazyLoad }    from './LazyLoad/LazyLoad';
-export { Pagination }  from './Pagination/Pagination';
-export { Sync }        from './Sync/Sync';
-export { Wheel }       from './Wheel/Wheel';
-export { Live }        from './Live/Live';
+export { Direction } from './Direction/Direction';
+export { Elements } from './Elements/Elements';
+export { Slides } from './Slides/Slides';
+export { Layout } from './Layout/Layout';
+export { Clones } from './Clones/Clones';
+export { Move } from './Move/Move';
+export { Controller } from './Controller/Controller';
+export { Arrows } from './Arrows/Arrows';
+export { Autoplay } from './Autoplay/Autoplay';
+export { Scroll } from './Scroll/Scroll';
+export { Drag } from './Drag/Drag';
+export { Keyboard } from './Keyboard/Keyboard';
+export { LazyLoad } from './LazyLoad/LazyLoad';
+export { Pagination } from './Pagination/Pagination';
+export { Sync } from './Sync/Sync';
+export { Wheel } from './Wheel/Wheel';
+export { Live } from './Live/Live';
 
 
 /**

src/js/components/types.ts

@@ -1,21 +1,21 @@
 export type { BreakpointsComponent } from './Breakpoints/Breakpoints';
-export type { DirectionComponent }   from './Direction/Direction';
-export type { ElementsComponent }    from './Elements/Elements';
-export type { SlidesComponent }      from './Slides/Slides';
-export type { SlideComponent }       from './Slides/Slide';
-export type { LayoutComponent }      from './Layout/Layout';
-export type { ClonesComponent }      from './Clones/Clones';
-export type { MoveComponent }        from './Move/Move';
-export type { ControllerComponent }  from './Controller/Controller';
-export type { ArrowsComponent }      from './Arrows/Arrows';
-export type { AutoplayComponent }    from './Autoplay/Autoplay';
-export type { ScrollComponent }      from './Scroll/Scroll';
-export type { DragComponent }        from './Drag/Drag';
-export type { KeyboardComponent }    from './Keyboard/Keyboard';
-export type { LazyLoadComponent }    from './LazyLoad/LazyLoad';
-export type { PaginationComponent }  from './Pagination/Pagination';
-export type { SyncComponent }        from './Sync/Sync';
-export type { WheelComponent }       from './Wheel/Wheel';
-export type { LiveComponent }        from './Live/Live';
+export type { DirectionComponent } from './Direction/Direction';
+export type { ElementsComponent } from './Elements/Elements';
+export type { SlidesComponent } from './Slides/Slides';
+export type { SlideComponent } from './Slides/Slide';
+export type { LayoutComponent } from './Layout/Layout';
+export type { ClonesComponent } from './Clones/Clones';
+export type { MoveComponent } from './Move/Move';
+export type { ControllerComponent } from './Controller/Controller';
+export type { ArrowsComponent } from './Arrows/Arrows';
+export type { AutoplayComponent } from './Autoplay/Autoplay';
+export type { ScrollComponent } from './Scroll/Scroll';
+export type { DragComponent } from './Drag/Drag';
+export type { KeyboardComponent } from './Keyboard/Keyboard';
+export type { LazyLoadComponent } from './LazyLoad/LazyLoad';
+export type { PaginationComponent } from './Pagination/Pagination';
+export type { SyncComponent } from './Sync/Sync';
+export type { WheelComponent } from './Wheel/Wheel';
+export type { LiveComponent } from './Live/Live';
 
 export type { PaginationData, PaginationItem } from './Pagination/Pagination';

src/js/constants/arrows.ts

@@ -1,5 +1,5 @@
 const ARROW = 'Arrow';
-export const ARROW_LEFT  = `${ ARROW }Left`;
+export const ARROW_LEFT = `${ ARROW }Left`;
 export const ARROW_RIGHT = `${ ARROW }Right`;
-export const ARROW_UP    = `${ ARROW }Up`;
-export const ARROW_DOWN  = `${ ARROW }Down`;
+export const ARROW_UP = `${ ARROW }Up`;
+export const ARROW_DOWN = `${ ARROW }Down`;

src/js/constants/attributes.ts

@@ -1,19 +1,19 @@
-export const ROLE      = 'role';
+export const ROLE = 'role';
 export const TAB_INDEX = 'tabindex';
-export const DISABLED  = 'disabled';
+export const DISABLED = 'disabled';
 
-export const ARIA_PREFIX          = 'aria-';
-export const ARIA_CONTROLS        = `${ ARIA_PREFIX }controls`;
-export const ARIA_CURRENT         = `${ ARIA_PREFIX }current`;
-export const ARIA_SELECTED        = `${ ARIA_PREFIX }selected`;
-export const ARIA_LABEL           = `${ ARIA_PREFIX }label`;
-export const ARIA_LABELLEDBY      = `${ ARIA_PREFIX }labelledby`;
-export const ARIA_HIDDEN          = `${ ARIA_PREFIX }hidden`;
-export const ARIA_ORIENTATION     = `${ ARIA_PREFIX }orientation`;
+export const ARIA_PREFIX = 'aria-';
+export const ARIA_CONTROLS = `${ ARIA_PREFIX }controls`;
+export const ARIA_CURRENT = `${ ARIA_PREFIX }current`;
+export const ARIA_SELECTED = `${ ARIA_PREFIX }selected`;
+export const ARIA_LABEL = `${ ARIA_PREFIX }label`;
+export const ARIA_LABELLEDBY = `${ ARIA_PREFIX }labelledby`;
+export const ARIA_HIDDEN = `${ ARIA_PREFIX }hidden`;
+export const ARIA_ORIENTATION = `${ ARIA_PREFIX }orientation`;
 export const ARIA_ROLEDESCRIPTION = `${ ARIA_PREFIX }roledescription`;
-export const ARIA_LIVE            = `${ ARIA_PREFIX }live`;
-export const ARIA_BUSY            = `${ ARIA_PREFIX }busy`;
-export const ARIA_ATOMIC          = `${ ARIA_PREFIX }atomic`;
+export const ARIA_LIVE = `${ ARIA_PREFIX }live`;
+export const ARIA_BUSY = `${ ARIA_PREFIX }busy`;
+export const ARIA_ATOMIC = `${ ARIA_PREFIX }atomic`;
 
 /**
  * The array with all attributes to remove later.

src/js/constants/classes.ts

@@ -1,5 +1,6 @@
 import { PROJECT_CODE } from './project';
 
+
 /**
  * The prefix for classes.
  *
@@ -17,33 +18,33 @@ export const STATUS_CLASS_PREFIX = 'is-';
 /**
  * All classes as constants.
  */
-export const CLASS_ROOT            = PROJECT_CODE;
-export const CLASS_TRACK           = `${ CLASS_PREFIX }track`;
-export const CLASS_LIST            = `${ CLASS_PREFIX }list`;
-export const CLASS_SLIDE           = `${ CLASS_PREFIX }slide`;
-export const CLASS_CLONE           = `${ CLASS_SLIDE }--clone`;
-export const CLASS_CONTAINER       = `${ CLASS_SLIDE }__container`;
-export const CLASS_ARROWS          = `${ CLASS_PREFIX }arrows`;
-export const CLASS_ARROW           = `${ CLASS_PREFIX }arrow`;
-export const CLASS_ARROW_PREV      = `${ CLASS_ARROW }--prev`;
-export const CLASS_ARROW_NEXT      = `${ CLASS_ARROW }--next`;
-export const CLASS_PAGINATION      = `${ CLASS_PREFIX }pagination`;
+export const CLASS_ROOT = PROJECT_CODE;
+export const CLASS_TRACK = `${ CLASS_PREFIX }track`;
+export const CLASS_LIST = `${ CLASS_PREFIX }list`;
+export const CLASS_SLIDE = `${ CLASS_PREFIX }slide`;
+export const CLASS_CLONE = `${ CLASS_SLIDE }--clone`;
+export const CLASS_CONTAINER = `${ CLASS_SLIDE }__container`;
+export const CLASS_ARROWS = `${ CLASS_PREFIX }arrows`;
+export const CLASS_ARROW = `${ CLASS_PREFIX }arrow`;
+export const CLASS_ARROW_PREV = `${ CLASS_ARROW }--prev`;
+export const CLASS_ARROW_NEXT = `${ CLASS_ARROW }--next`;
+export const CLASS_PAGINATION = `${ CLASS_PREFIX }pagination`;
 export const CLASS_PAGINATION_PAGE = `${ CLASS_PAGINATION }__page`;
-export const CLASS_PROGRESS        = `${ CLASS_PREFIX }progress`;
-export const CLASS_PROGRESS_BAR    = `${ CLASS_PROGRESS }__bar`;
-export const CLASS_TOGGLE          = `${ CLASS_PREFIX }toggle`;
-export const CLASS_TOGGLE_PLAY     = `${ CLASS_TOGGLE }__play`;
-export const CLASS_TOGGLE_PAUSE    = `${ CLASS_TOGGLE }__pause`;
-export const CLASS_SPINNER         = `${ CLASS_PREFIX }spinner`;
-export const CLASS_SR              = `${ CLASS_PREFIX }sr`;
-export const CLASS_INITIALIZED     = `${ STATUS_CLASS_PREFIX }initialized`;
-export const CLASS_ACTIVE          = `${ STATUS_CLASS_PREFIX }active`;
-export const CLASS_PREV            = `${ STATUS_CLASS_PREFIX }prev`;
-export const CLASS_NEXT            = `${ STATUS_CLASS_PREFIX }next`;
-export const CLASS_VISIBLE         = `${ STATUS_CLASS_PREFIX }visible`;
-export const CLASS_LOADING         = `${ STATUS_CLASS_PREFIX }loading`;
-export const CLASS_FOCUS_IN        = `${ STATUS_CLASS_PREFIX }focus-in`;
-export const CLASS_OVERFLOW        = `${ STATUS_CLASS_PREFIX }overflow`;
+export const CLASS_PROGRESS = `${ CLASS_PREFIX }progress`;
+export const CLASS_PROGRESS_BAR = `${ CLASS_PROGRESS }__bar`;
+export const CLASS_TOGGLE = `${ CLASS_PREFIX }toggle`;
+export const CLASS_TOGGLE_PLAY = `${ CLASS_TOGGLE }__play`;
+export const CLASS_TOGGLE_PAUSE = `${ CLASS_TOGGLE }__pause`;
+export const CLASS_SPINNER = `${ CLASS_PREFIX }spinner`;
+export const CLASS_SR = `${ CLASS_PREFIX }sr`;
+export const CLASS_INITIALIZED = `${ STATUS_CLASS_PREFIX }initialized`;
+export const CLASS_ACTIVE = `${ STATUS_CLASS_PREFIX }active`;
+export const CLASS_PREV = `${ STATUS_CLASS_PREFIX }prev`;
+export const CLASS_NEXT = `${ STATUS_CLASS_PREFIX }next`;
+export const CLASS_VISIBLE = `${ STATUS_CLASS_PREFIX }visible`;
+export const CLASS_LOADING = `${ STATUS_CLASS_PREFIX }loading`;
+export const CLASS_FOCUS_IN = `${ STATUS_CLASS_PREFIX }focus-in`;
+export const CLASS_OVERFLOW = `${ STATUS_CLASS_PREFIX }overflow`;
 
 /**
  * The array with all status classes except for `is-initialized`.
@@ -66,13 +67,13 @@ export const STATUS_CLASSES = [
  * @since 3.0.0
  */
 export const CLASSES = {
-  slide     : CLASS_SLIDE,
-  clone     : CLASS_CLONE,
-  arrows    : CLASS_ARROWS,
-  arrow     : CLASS_ARROW,
-  prev      : CLASS_ARROW_PREV,
-  next      : CLASS_ARROW_NEXT,
+  slide: CLASS_SLIDE,
+  clone: CLASS_CLONE,
+  arrows: CLASS_ARROWS,
+  arrow: CLASS_ARROW,
+  prev: CLASS_ARROW_PREV,
+  next: CLASS_ARROW_NEXT,
   pagination: CLASS_PAGINATION,
-  page      : CLASS_PAGINATION_PAGE,
-  spinner   : CLASS_SPINNER,
+  page: CLASS_PAGINATION_PAGE,
+  spinner: CLASS_SPINNER,
 };

src/js/constants/defaults.ts

@@ -10,20 +10,20 @@ import { I18N } from './i18n';
  * @since 3.0.0
  */
 export const DEFAULTS: Options = {
-  type          : 'slide',
-  speed         : 400,
-  perPage       : 1,
-  easing        : 'cubic-bezier(0.25, 1, 0.5, 1)',
-  drag          : true,
-  direction     : 'ltr',
-  interval      : 5000,
-  trimSpace     : true,
+  type: 'slide',
+  speed: 400,
+  perPage: 1,
+  easing: 'cubic-bezier(0.25, 1, 0.5, 1)',
+  drag: true,
+  direction: 'ltr',
+  interval: 5000,
+  trimSpace: true,
   focusableNodes: 'a, button, textarea, input, select, iframe',
-  classes       : CLASSES,
-  i18n          : I18N,
+  classes: CLASSES,
+  i18n: I18N,
   reducedMotion: {
-    speed      : 0,
+    speed: 0,
     rewindSpeed: 0,
-    autoplay   : 'pause',
+    autoplay: 'pause',
   },
 };

src/js/constants/events.ts

@@ -1,36 +1,36 @@
-export const EVENT_MOUNTED            = 'mounted';
-export const EVENT_READY              = 'ready';
-export const EVENT_MOVE               = 'move';
-export const EVENT_MOVED              = 'moved';
-export const EVENT_CLICK              = 'click';
-export const EVENT_ACTIVE             = 'active';
-export const EVENT_INACTIVE           = 'inactive';
-export const EVENT_VISIBLE            = 'visible';
-export const EVENT_HIDDEN             = 'hidden';
-export const EVENT_REFRESH            = 'refresh';
-export const EVENT_UPDATED            = 'updated';
-export const EVENT_RESIZE             = 'resize';
-export const EVENT_RESIZED            = 'resized';
-export const EVENT_DRAG               = 'drag';
-export const EVENT_DRAGGING           = 'dragging';
-export const EVENT_DRAGGED            = 'dragged';
-export const EVENT_SCROLL             = 'scroll';
-export const EVENT_SCROLLING          = 'scrolling';
-export const EVENT_SCROLLED           = 'scrolled';
-export const EVENT_OVERFLOW           = 'overflow';
-export const EVENT_DESTROY            = 'destroy';
-export const EVENT_ARROWS_MOUNTED     = 'arrows:mounted';
-export const EVENT_ARROWS_UPDATED     = 'arrows:updated';
+export const EVENT_MOUNTED = 'mounted';
+export const EVENT_READY = 'ready';
+export const EVENT_MOVE = 'move';
+export const EVENT_MOVED = 'moved';
+export const EVENT_CLICK = 'click';
+export const EVENT_ACTIVE = 'active';
+export const EVENT_INACTIVE = 'inactive';
+export const EVENT_VISIBLE = 'visible';
+export const EVENT_HIDDEN = 'hidden';
+export const EVENT_REFRESH = 'refresh';
+export const EVENT_UPDATED = 'updated';
+export const EVENT_RESIZE = 'resize';
+export const EVENT_RESIZED = 'resized';
+export const EVENT_DRAG = 'drag';
+export const EVENT_DRAGGING = 'dragging';
+export const EVENT_DRAGGED = 'dragged';
+export const EVENT_SCROLL = 'scroll';
+export const EVENT_SCROLLING = 'scrolling';
+export const EVENT_SCROLLED = 'scrolled';
+export const EVENT_OVERFLOW = 'overflow';
+export const EVENT_DESTROY = 'destroy';
+export const EVENT_ARROWS_MOUNTED = 'arrows:mounted';
+export const EVENT_ARROWS_UPDATED = 'arrows:updated';
 export const EVENT_PAGINATION_MOUNTED = 'pagination:mounted';
 export const EVENT_PAGINATION_UPDATED = 'pagination:updated';
 export const EVENT_NAVIGATION_MOUNTED = 'navigation:mounted';
-export const EVENT_AUTOPLAY_PLAY      = 'autoplay:play';
-export const EVENT_AUTOPLAY_PLAYING   = 'autoplay:playing';
-export const EVENT_AUTOPLAY_PAUSE     = 'autoplay:pause';
-export const EVENT_LAZYLOAD_LOADED    = 'lazyload:loaded';
-export const EVENT_LAZYLOAD_ERROR     = 'lazyload:error';
+export const EVENT_AUTOPLAY_PLAY = 'autoplay:play';
+export const EVENT_AUTOPLAY_PLAYING = 'autoplay:playing';
+export const EVENT_AUTOPLAY_PAUSE = 'autoplay:pause';
+export const EVENT_LAZYLOAD_LOADED = 'lazyload:loaded';
+export const EVENT_LAZYLOAD_ERROR = 'lazyload:error';
 
 /** @internal */
-export const EVENT_SLIDE_KEYDOWN     = '_sk';
-export const EVENT_SHIFTED           = '_sh';
+export const EVENT_SLIDE_KEYDOWN = '_sk';
+export const EVENT_SHIFTED = '_sh';
 export const EVENT_END_INDEX_CHANGED = '_ei';

src/js/constants/i18n.ts

@@ -4,16 +4,16 @@
  * @since 3.0.0
  */
 export const I18N = {
-  prev      : 'Previous slide',
-  next      : 'Next slide',
-  first     : 'Go to first slide',
-  last      : 'Go to last slide',
-  slideX    : 'Go to slide %s',
-  pageX     : 'Go to page %s',
-  play      : 'Start autoplay',
-  pause     : 'Pause autoplay',
-  carousel  : 'carousel',
-  slide     : 'slide',
-  select    : 'Select a slide to show',
+  prev: 'Previous slide',
+  next: 'Next slide',
+  first: 'Go to first slide',
+  last: 'Go to last slide',
+  slideX: 'Go to slide %s',
+  pageX: 'Go to page %s',
+  play: 'Start autoplay',
+  pause: 'Pause autoplay',
+  carousel: 'carousel',
+  slide: 'slide',
+  select: 'Select a slide to show',
   slideLabel: '%s of %s', // [ slide number ] / [ slide size ]
 };

src/js/core/Splide/Splide.ts

@@ -40,6 +40,11 @@ export class Splide {
    */
   static readonly STATES = STATES;
 
+  /**
+   * Stores extension constructors.
+   */
+  static readonly Extensions: Record<string, ComponentConstructor>;
+
   /**
    * The root element where the Splide is applied.
    */
@@ -51,14 +56,14 @@ export class Splide {
   readonly event = EventInterface<EventMap & Record<string, AnyFunction>>();
 
   /**
-   * The collection of all component objects.
+   * The collection of all component instances, including extensions.
    */
   readonly Components: Components = {} as Components;
 
   /**
    * The StateObject object.
    */
-  readonly state = State( CREATED );
+  readonly state = State(CREATED);
 
   /**
    * An array with SyncTarget objects for splide instances to sync with.
@@ -91,24 +96,24 @@ export class Splide {
    * @param target  - The selector for the target element, or the element itself.
    * @param options - Optional. An object with options.
    */
-  constructor( target: string | HTMLElement, options: Options = {} ) {
-    const root = isString( target ) ? query<HTMLElement>( document, target ) : target;
-    assert( root, `${ root } is invalid.` );
+  constructor(target: string | HTMLElement, options: Options = {}) {
+    const root = isString(target) ? query<HTMLElement>(document, target) : target;
+    assert(root, `${ root } is invalid.`);
 
     this.root = root;
 
-    options = merge( {
-      label     : getAttribute( root, ARIA_LABEL ) || '',
-      labelledby: getAttribute( root, ARIA_LABELLEDBY ) || '',
-    }, DEFAULTS, Splide.defaults, options );
+    options = merge({
+      label: getAttribute(root, ARIA_LABEL) || '',
+      labelledby: getAttribute(root, ARIA_LABELLEDBY) || '',
+    }, DEFAULTS, Splide.defaults, options);
 
     try {
-      merge( options, JSON.parse( getAttribute( root, DATA_ATTRIBUTE ) ) );
-    } catch ( e ) {
-      assert( false, 'Invalid JSON' );
+      merge(options, JSON.parse(getAttribute(root, DATA_ATTRIBUTE)));
+    } catch (e) {
+      assert(false, 'Invalid JSON');
     }
 
-    this._o = Object.create( merge( {}, options ) );
+    this._o = Object.create(merge({}, options));
   }
 
   /**
@@ -119,34 +124,34 @@ export class Splide {
    *
    * @return `this`
    */
-  mount( Extensions: Record<string, ComponentConstructor> = this._E, Transition: ComponentConstructor = this._T ): this {
+  mount(Extensions: Record<string, ComponentConstructor> = this._E, Transition: ComponentConstructor = this._T): this {
     const { state, Components } = this;
-    assert( state.is( [ CREATED, DESTROYED ] ), 'Already mounted!' );
+    assert(state.is([CREATED, DESTROYED]), 'Already mounted!');
 
-    state.set( CREATED );
+    state.set(CREATED);
 
     this._C = Components;
-    this._T = Transition || ( this.is( FADE ) ? Fade : Slide );
+    this._T = Transition || (this.is(FADE) ? Fade : Slide);
     this._E = Extensions;
 
-    const Constructors = assign( {}, COMPONENTS, this._E, { Transition: this._T } );
+    const Constructors = assign({}, COMPONENTS, this._E, { Transition: this._T });
 
-    forOwn( Constructors, ( Component, key ) => {
-      const component = Component( this, Components, this._o, this.event.lock() );
-      Components[ key ] = component;
+    forOwn(Constructors, (Component, key) => {
+      const component = Component(this, Components, this._o, this.event.lock());
+      Components[key] = component;
       component.setup && component.setup();
-    } );
+    });
 
-    forOwn( Components, component => {
+    forOwn(Components, component => {
       component.mount && component.mount();
-    } );
+    });
 
-    this.emit( EVENT_MOUNTED );
+    this.emit(EVENT_MOUNTED);
 
-    addClass( this.root, CLASS_INITIALIZED );
+    addClass(this.root, CLASS_INITIALIZED);
 
-    state.set( IDLE );
-    this.emit( EVENT_READY );
+    state.set(IDLE);
+    this.emit(EVENT_READY);
 
     return this;
   }
@@ -169,11 +174,11 @@ export class Splide {
    *
    * @return `this`
    */
-  sync( splide: Splide ): this {
-    this.splides.push( { splide } );
-    splide.splides.push( { splide: this, isParent: true } );
+  sync(splide: Splide): this {
+    this.splides.push({ splide });
+    splide.splides.push({ splide: this, isParent: true });
 
-    if ( this.state.is( IDLE ) ) {
+    if (this.state.is(IDLE)) {
       this._C.Sync.remount();
       splide.Components.Sync.remount();
     }
@@ -219,8 +224,8 @@ export class Splide {
    *
    * @return `this`
    */
-  go( control: number | string ): this {
-    this._C.Controller.go( control );
+  go(control: number | string): this {
+    this._C.Controller.go(control);
     return this;
   }
 
@@ -231,8 +236,8 @@ export class Splide {
    *
    * @return `this`
    */
-  jump( control: number | string ): this {
-    this._C.Controller.jump( control );
+  jump(control: number | string): this {
+    this._C.Controller.jump(control);
     return this;
   }
 
@@ -258,10 +263,10 @@ export class Splide {
    *
    * @return `this`
    */
-  on<K extends keyof EventMap>( events: K, callback: EventMap[ K ] ): this;
-  on( events: string | string[], callback: AnyFunction ): this;
-  on( events: string | string[], callback: AnyFunction ): this {
-    this.event.on( events, callback );
+  on<K extends keyof EventMap>(events: K, callback: EventMap[ K ]): this;
+  on(events: string | string[], callback: AnyFunction): this;
+  on(events: string | string[], callback: AnyFunction): this {
+    this.event.on(events, callback);
     return this;
   }
 
@@ -285,8 +290,8 @@ export class Splide {
    *
    * @return `this`
    */
-  off<K extends keyof EventMap>( events: K | K[] | string | string[], callback: AnyFunction ): this {
-    this.event.off( events, callback );
+  off<K extends keyof EventMap>(events: K | K[] | string | string[], callback: AnyFunction): this {
+    this.event.off(events, callback);
     return this;
   }
 
@@ -298,10 +303,10 @@ export class Splide {
    *
    * @return `this`
    */
-  emit<K extends keyof EventMap>( event: K, ...args: Parameters<EventMap[ K ]> ): this;
-  emit( event: string, ...args: any[] ): this;
-  emit( event: string, ...args: any[] ): this {
-    this.event.emit( event, ...args );
+  emit<K extends keyof EventMap>(event: K, ...args: Parameters<EventMap[ K ]>): this;
+  emit(event: string, ...args: any[]): this;
+  emit(event: string, ...args: any[]): this {
+    this.event.emit(event, ...args);
     return this;
   }
 
@@ -325,8 +330,8 @@ export class Splide {
    *
    * @return `this`
    */
-  add( slides: string | HTMLElement | Array<string | HTMLElement>, index?: number ): this {
-    this._C.Slides.add( slides, index );
+  add(slides: string | HTMLElement | Array<string | HTMLElement>, index?: number): this {
+    this._C.Slides.add(slides, index);
     return this;
   }
 
@@ -336,8 +341,8 @@ export class Splide {
    *
    * @param matcher - An index, an array with indices, a selector string, or an iteratee function.
    */
-  remove( matcher: SlideMatcher ): this {
-    this._C.Slides.remove( matcher );
+  remove(matcher: SlideMatcher): this {
+    this._C.Slides.remove(matcher);
     return this;
   }
 
@@ -348,7 +353,7 @@ export class Splide {
    *
    * @return `true` if the type matches the current one, or otherwise `false`.
    */
-  is( type: string ): boolean {
+  is(type: string): boolean {
     return this._o.type === type;
   }
 
@@ -358,7 +363,7 @@ export class Splide {
    * @return `this`
    */
   refresh(): this {
-    this.emit( EVENT_REFRESH );
+    this.emit(EVENT_REFRESH);
     return this;
   }
 
@@ -369,21 +374,21 @@ export class Splide {
    *
    * @return `this`
    */
-  destroy( completely = true ): this {
+  destroy(completely = true): this {
     const { event, state } = this;
 
-    if ( state.is( CREATED ) ) {
+    if (state.is(CREATED)) {
       // Postpones destruction requested before the slider becomes ready.
-      this.on( EVENT_READY, this.destroy.bind( this, completely ) );
+      this.on(EVENT_READY, this.destroy.bind(this, completely));
     } else {
-      forOwn( this._C, component => {
-        component.destroy && component.destroy( completely );
-      }, true );
+      forOwn(this._C, component => {
+        component.destroy && component.destroy(completely);
+      }, true);
 
-      event.emit( EVENT_DESTROY );
+      event.emit(EVENT_DESTROY);
       event.destroy();
-      completely && empty( this.splides );
-      state.set( DESTROYED );
+      completely && empty(this.splides);
+      state.set(DESTROYED);
     }
 
     return this;
@@ -403,8 +408,8 @@ export class Splide {
    *
    * @param options - An object with new options.
    */
-  set options( options: Options ) {
-    this._C.Breakpoints.set( options, true, true );
+  set options(options: Options) {
+    this._C.Breakpoints.set(options, true, true);
   }
 
   /**
@@ -413,7 +418,7 @@ export class Splide {
    * @return The number of slides.
    */
   get length(): number {
-    return this._C.Slides.getLength( true );
+    return this._C.Slides.getLength(true);
   }
 
   /**

src/js/core/Splide/test/general.test.ts

@@ -2,25 +2,25 @@ import { init } from '../../../test';
 import { DEFAULTS } from '../../../constants/defaults';
 
 
-describe( 'Splide', () => {
-  test( 'can merge options to defaults.', () => {
-    const splide = init( { width: 200, height: 200 } );
+describe('Splide', () => {
+  test('can merge options to defaults.', () => {
+    const splide = init({ width: 200, height: 200 });
     const { options } = splide;
 
-    expect( options.width ).toBe( 200 );
-    expect( options.height ).toBe( 200 );
-    expect( options.type ).toBe( DEFAULTS.type );
-    expect( options.speed ).toBe( DEFAULTS.speed );
-  } );
+    expect(options.width).toBe(200);
+    expect(options.height).toBe(200);
+    expect(options.type).toBe(DEFAULTS.type);
+    expect(options.speed).toBe(DEFAULTS.speed);
+  });
 
-  test( 'can merge options provided by the data attribute.', () => {
-    const data   = { width: 100, height: 100, type: 'loop', waitForTransition: false };
-    const splide = init( { width: 200, height: 200 }, { json: JSON.stringify( data ) } );
+  test('can merge options provided by the data attribute.', () => {
+    const data = { width: 100, height: 100, type: 'loop', waitForTransition: false };
+    const splide = init({ width: 200, height: 200 }, { json: JSON.stringify(data) });
     const { options } = splide;
 
-    expect( options.width ).toBe( 100 );
-    expect( options.height ).toBe( 100 );
-    expect( options.type ).toBe( 'loop' );
-    expect( options.waitForTransition ).toBe( false );
-  } );
-} );
+    expect(options.width).toBe(100);
+    expect(options.height).toBe(100);
+    expect(options.type).toBe('loop');
+    expect(options.waitForTransition).toBe(false);
+  });
+});

src/js/renderer/SplideRenderer/SplideRenderer.ts

@@ -40,16 +40,16 @@ export class SplideRenderer {
    *
    * @param splide - A Splide instance.
    */
-  static clean( splide: Splide ): void {
+  static clean(splide: Splide): void {
     const { on } = splide.event;
     const { root } = splide;
-    const clones = queryAll( root, `.${ CLASS_CLONE }` );
+    const clones = queryAll(root, `.${ CLASS_CLONE }`);
 
-    on( EVENT_MOUNTED, () => {
-      removeNode( child( root, 'style' ) );
-    } );
+    on(EVENT_MOUNTED, () => {
+      removeNode(child(root, 'style'));
+    });
 
-    removeNode( clones );
+    removeNode(clones);
   }
 
   /**
@@ -90,7 +90,7 @@ export class SplideRenderer {
   /**
    * An array with options for each breakpoint.
    */
-  private readonly breakpoints: [ string, Options ][] = [];
+  private readonly breakpoints: [string, Options][] = [];
 
   /**
    * The SplideRenderer constructor.
@@ -100,17 +100,17 @@ export class SplideRenderer {
    * @param config   - Static default options.
    * @param defaults - Default options for the slider. Pass `Splide.defaults` if you are using it.
    */
-  constructor( contents: string[] | SlideContent[], options?: Options, config?: RendererConfig, defaults?: Options ) {
-    merge( DEFAULTS, defaults || {} );
-    merge( merge( this.options, DEFAULTS ), options || {} );
+  constructor(contents: string[] | SlideContent[], options?: Options, config?: RendererConfig, defaults?: Options) {
+    merge(DEFAULTS, defaults || {});
+    merge(merge(this.options, DEFAULTS), options || {});
 
-    this.contents  = contents;
-    this.config    = assign( {}, RENDERER_DEFAULT_CONFIG, config || {} );
-    this.id        = this.config.id || uniqueId( 'splide' );
-    this.Style     = new Style( this.id, this.options );
-    this.Direction = Direction( null, null, this.options, undefined );
+    this.contents = contents;
+    this.config = assign({}, RENDERER_DEFAULT_CONFIG, config || {});
+    this.id = this.config.id || uniqueId('splide');
+    this.Style = new Style(this.id, this.options);
+    this.Direction = Direction(null, null, this.options, undefined);
 
-    assert( this.contents.length, 'Provide at least 1 content.' );
+    assert(this.contents.length, 'Provide at least 1 content.');
 
     this.init();
   }
@@ -131,25 +131,25 @@ export class SplideRenderer {
    * Initializes slides.
    */
   private initSlides(): void {
-    push( this.slides, this.contents.map( ( content, index ) => {
-      content = isString( content ) ? { html: content } : content;
+    push(this.slides, this.contents.map((content, index) => {
+      content = isString(content) ? { html: content } : content;
       content.styles = content.styles || {};
-      content.attrs  = content.attrs || {};
+      content.attrs = content.attrs || {};
 
-      this.cover( content );
+      this.cover(content);
 
       const classes = `${ this.options.classes.slide } ${ index === 0 ? CLASS_ACTIVE : '' }`;
 
-      assign( content.attrs, {
+      assign(content.attrs, {
         class: `${ classes } ${ content.attrs.class || '' }`.trim(),
-        style: this.buildStyles( content.styles ),
-      } );
+        style: this.buildStyles(content.styles),
+      });
 
       return content;
-    } ) );
+    }));
 
-    if ( this.isLoop() ) {
-      this.generateClones( this.slides );
+    if (this.isLoop()) {
+      this.generateClones(this.slides);
     }
   }
 
@@ -157,9 +157,9 @@ export class SplideRenderer {
    * Registers styles for the root element.
    */
   private registerRootStyles(): void {
-    this.breakpoints.forEach( ( [ width, options ] ) => {
-      this.Style.rule( ' ', 'max-width', unit( options.width ), width );
-    } );
+    this.breakpoints.forEach(([width, options]) => {
+      this.Style.rule(' ', 'max-width', unit(options.width), width);
+    });
   }
 
   /**
@@ -169,11 +169,11 @@ export class SplideRenderer {
     const { Style } = this;
     const selector = `.${ CLASS_TRACK }`;
 
-    this.breakpoints.forEach( ( [ width, options ] ) => {
-      Style.rule( selector, this.resolve( 'paddingLeft' ), this.cssPadding( options, false ), width );
-      Style.rule( selector, this.resolve( 'paddingRight' ), this.cssPadding( options, true ), width );
-      Style.rule( selector, 'height', this.cssTrackHeight( options ), width );
-    } );
+    this.breakpoints.forEach(([width, options]) => {
+      Style.rule(selector, this.resolve('paddingLeft'), this.cssPadding(options, false), width);
+      Style.rule(selector, this.resolve('paddingRight'), this.cssPadding(options, true), width);
+      Style.rule(selector, 'height', this.cssTrackHeight(options), width);
+    });
   }
 
   /**
@@ -183,13 +183,13 @@ export class SplideRenderer {
     const { Style } = this;
     const selector = `.${ CLASS_LIST }`;
 
-    this.breakpoints.forEach( ( [ width, options ] ) => {
-      Style.rule( selector, 'transform', this.buildTranslate( options ), width );
+    this.breakpoints.forEach(([width, options]) => {
+      Style.rule(selector, 'transform', this.buildTranslate(options), width);
 
-      if ( ! this.cssSlideHeight( options ) ) {
-        Style.rule( selector, 'aspect-ratio', this.cssAspectRatio( options ), width );
+      if (!this.cssSlideHeight(options)) {
+        Style.rule(selector, 'aspect-ratio', this.cssAspectRatio(options), width);
       }
-    } );
+    });
   }
 
   /**
@@ -199,12 +199,12 @@ export class SplideRenderer {
     const { Style } = this;
     const selector = `.${ CLASS_SLIDE }`;
 
-    this.breakpoints.forEach( ( [ width, options ] ) => {
-      Style.rule( selector, 'width', this.cssSlideWidth( options ), width );
-      Style.rule( selector, 'height', this.cssSlideHeight( options ) || '100%', width );
-      Style.rule( selector, this.resolve( 'marginRight' ), unit( options.gap ) || '0px', width );
-      Style.rule( `${ selector } > img`, 'display', options.cover ? 'none' : 'inline', width );
-    } );
+    this.breakpoints.forEach(([width, options]) => {
+      Style.rule(selector, 'width', this.cssSlideWidth(options), width);
+      Style.rule(selector, 'height', this.cssSlideHeight(options) || '100%', width);
+      Style.rule(selector, this.resolve('marginRight'), unit(options.gap) || '0px', width);
+      Style.rule(`${ selector } > img`, 'display', options.cover ? 'none' : 'inline', width);
+    });
   }
 
   /**
@@ -214,22 +214,22 @@ export class SplideRenderer {
    *
    * @return A string with multiple translate functions.
    */
-  private buildTranslate( options: Options ): string {
+  private buildTranslate(options: Options): string {
     const { resolve, orient } = this.Direction;
     const values = [];
 
-    values.push( this.cssOffsetClones( options ) );
-    values.push( this.cssOffsetGaps( options ) );
+    values.push(this.cssOffsetClones(options));
+    values.push(this.cssOffsetGaps(options));
 
-    if ( this.isCenter( options ) ) {
-      values.push( this.buildCssValue( orient( -50 ), '%' ) );
-      values.push( ...this.cssOffsetCenter( options ) );
+    if (this.isCenter(options)) {
+      values.push(this.buildCssValue(orient(-50), '%'));
+      values.push(...this.cssOffsetCenter(options));
     }
 
     return values
-      .filter( Boolean )
-      .map( value => `translate${ resolve( 'X' ) }(${ value })` )
-      .join( ' ' );
+      .filter(Boolean)
+      .map(value => `translate${ resolve('X') }(${ value })`)
+      .join(' ');
   }
 
   /**
@@ -240,17 +240,17 @@ export class SplideRenderer {
    *
    * @return The offset.
    */
-  private cssOffsetClones( options: Options ): string {
+  private cssOffsetClones(options: Options): string {
     const { resolve, orient } = this.Direction;
     const cloneCount = this.getCloneCount();
 
-    if ( this.isFixedWidth( options ) ) {
-      const { value, unit } = this.parseCssValue( options[ resolve( 'fixedWidth' ) ] );
-      return this.buildCssValue( orient( value ) * cloneCount, unit );
+    if (this.isFixedWidth(options)) {
+      const { value, unit } = this.parseCssValue(options[resolve('fixedWidth')]);
+      return this.buildCssValue(orient(value) * cloneCount, unit);
     }
 
     const percent = 100 * cloneCount / options.perPage;
-    return `${ orient( percent ) }%`;
+    return `${ orient(percent) }%`;
   }
 
   /**
@@ -265,23 +265,23 @@ export class SplideRenderer {
    *
    * @return The offset.
    */
-  private cssOffsetCenter( options: Options ): string[] {
+  private cssOffsetCenter(options: Options): string[] {
     const { resolve, orient } = this.Direction;
 
-    if ( this.isFixedWidth( options ) ) {
-      const { value, unit } = this.parseCssValue( options[ resolve( 'fixedWidth' ) ] );
-      return [ this.buildCssValue( orient( value / 2 ), unit ) ];
+    if (this.isFixedWidth(options)) {
+      const { value, unit } = this.parseCssValue(options[resolve('fixedWidth')]);
+      return [this.buildCssValue(orient(value / 2), unit)];
     }
 
     const values = [];
     const { perPage, gap } = options;
 
-    values.push( `${ orient( 50 / perPage ) }%` );
+    values.push(`${ orient(50 / perPage) }%`);
 
-    if ( gap ) {
-      const { value, unit } = this.parseCssValue( gap );
-      const gapOffset = ( value / perPage - value ) / 2;
-      values.push( this.buildCssValue( orient( gapOffset ), unit ) );
+    if (gap) {
+      const { value, unit } = this.parseCssValue(gap);
+      const gapOffset = (value / perPage - value) / 2;
+      values.push(this.buildCssValue(orient(gapOffset), unit));
     }
 
     return values;
@@ -294,20 +294,20 @@ export class SplideRenderer {
    *
    * @return The offset as `calc()`.
    */
-  private cssOffsetGaps( options: Options ): string {
+  private cssOffsetGaps(options: Options): string {
     const cloneCount = this.getCloneCount();
 
-    if ( cloneCount && options.gap ) {
+    if (cloneCount && options.gap) {
       const { orient } = this.Direction;
-      const { value, unit } = this.parseCssValue( options.gap );
+      const { value, unit } = this.parseCssValue(options.gap);
 
-      if ( this.isFixedWidth( options ) ) {
-        return this.buildCssValue( orient( value * cloneCount ), unit );
+      if (this.isFixedWidth(options)) {
+        return this.buildCssValue(orient(value * cloneCount), unit);
       }
 
       const { perPage } = options;
       const gaps = cloneCount / perPage;
-      return this.buildCssValue( orient( gaps * value ), unit );
+      return this.buildCssValue(orient(gaps * value), unit);
     }
 
     return '';
@@ -320,8 +320,8 @@ export class SplideRenderer {
    *
    * @return A resolved property name in the Kebab case.
    */
-  private resolve( prop: string ): string {
-    return camelToKebab( this.Direction.resolve( prop ) );
+  private resolve(prop: string): string {
+    return camelToKebab(this.Direction.resolve(prop));
   }
 
   /**
@@ -332,10 +332,10 @@ export class SplideRenderer {
    *
    * @return Padding in the CSS format.
    */
-  private cssPadding( options: Options, right: boolean ): string {
+  private cssPadding(options: Options, right: boolean): string {
     const { padding } = options;
-    const prop = this.Direction.resolve( right ? 'right' : 'left', true );
-    return padding && unit( padding[ prop ] || ( isObject( padding ) ? 0 : padding ) ) || '0px';
+    const prop = this.Direction.resolve(right ? 'right' : 'left', true);
+    return padding && unit(padding[prop] || (isObject(padding) ? 0 : padding)) || '0px';
   }
 
   /**
@@ -345,13 +345,13 @@ export class SplideRenderer {
    *
    * @return Height in the CSS format.
    */
-  private cssTrackHeight( options: Options ): string {
+  private cssTrackHeight(options: Options): string {
     let height = '';
 
-    if ( this.isVertical() ) {
-      height = this.cssHeight( options );
-      assert( height, '"height" is missing.' );
-      height = `calc(${ height } - ${ this.cssPadding( options, false ) } - ${ this.cssPadding( options, true ) })`;
+    if (this.isVertical()) {
+      height = this.cssHeight(options);
+      assert(height, '"height" is missing.');
+      height = `calc(${ height } - ${ this.cssPadding(options, false) } - ${ this.cssPadding(options, true) })`;
     }
 
     return height;
@@ -364,8 +364,8 @@ export class SplideRenderer {
    *
    * @return Height in the CSS format.
    */
-  private cssHeight( options: Options ): string {
-    return unit( options.height );
+  private cssHeight(options: Options): string {
+    return unit(options.height);
   }
 
   /**
@@ -375,10 +375,10 @@ export class SplideRenderer {
    *
    * @return Width in the CSS format.
    */
-  private cssSlideWidth( options: Options ): string {
+  private cssSlideWidth(options: Options): string {
     return options.autoWidth
       ? ''
-      : unit( options.fixedWidth ) || ( this.isVertical() ? '' : this.cssSlideSize( options ) );
+      : unit(options.fixedWidth) || (this.isVertical() ? '' : this.cssSlideSize(options));
   }
 
   /**
@@ -388,11 +388,11 @@ export class SplideRenderer {
    *
    * @return Height in the CSS format.
    */
-  private cssSlideHeight( options: Options ): string {
-    return unit( options.fixedHeight )
-      || ( this.isVertical()
-        ? ( options.autoHeight ? '' : this.cssSlideSize( options ) )
-        : this.cssHeight( options )
+  private cssSlideHeight(options: Options): string {
+    return unit(options.fixedHeight)
+      || (this.isVertical()
+        ? (options.autoHeight ? '' : this.cssSlideSize(options))
+        : this.cssHeight(options)
       );
   }
 
@@ -403,8 +403,8 @@ export class SplideRenderer {
    *
    * @return Width or height in the CSS format.
    */
-  private cssSlideSize( options: Options ): string {
-    const gap = unit( options.gap );
+  private cssSlideSize(options: Options): string {
+    const gap = unit(options.gap);
     return `calc((100%${ gap && ` + ${ gap }` })/${ options.perPage || 1 }${ gap && ` - ${ gap }` })`;
   }
 
@@ -415,7 +415,7 @@ export class SplideRenderer {
    *
    * @return aspectRatio in the CSS format.
    */
-  private cssAspectRatio( options: Options ): string {
+  private cssAspectRatio(options: Options): string {
     const { heightRatio } = options;
     return heightRatio ? `${ 1 / heightRatio }` : '';
   }
@@ -428,7 +428,7 @@ export class SplideRenderer {
    *
    * @return A built value for a CSS value.
    */
-  private buildCssValue( value: number, unit: string ): string {
+  private buildCssValue(value: number, unit: string): string {
     return `${ value }${ unit }`;
   }
 
@@ -439,10 +439,10 @@ export class SplideRenderer {
    *
    * @return An object with value and unit.
    */
-  private parseCssValue( value: string | number ): { value: number, unit: string } {
-    if ( isString( value ) ) {
-      const number = parseFloat( value ) || 0;
-      const unit   = value.replace( /\d*(\.\d*)?/, '' ) || 'px';
+  private parseCssValue(value: string | number): { value: number, unit: string } {
+    if (isString(value)) {
+      const number = parseFloat(value) || 0;
+      const unit = value.replace(/\d*(\.\d*)?/, '') || 'px';
       return { value: number, unit };
     }
 
@@ -455,12 +455,12 @@ export class SplideRenderer {
   private parseBreakpoints(): void {
     const { breakpoints } = this.options;
 
-    this.breakpoints.push( [ 'default', this.options ] );
+    this.breakpoints.push(['default', this.options]);
 
-    if ( breakpoints ) {
-      forOwn( breakpoints, ( options, width ) => {
-        this.breakpoints.push( [ width, merge( merge( {}, this.options ), options ) ] );
-      } );
+    if (breakpoints) {
+      forOwn(breakpoints, (options, width) => {
+        this.breakpoints.push([width, merge(merge({}, this.options), options)]);
+      });
     }
   }
 
@@ -469,8 +469,8 @@ export class SplideRenderer {
    *
    * @return `true` if the slide width is fixed, or otherwise `false`.
    */
-  private isFixedWidth( options: Options ): boolean {
-    return !! options[ this.Direction.resolve( 'fixedWidth' ) ];
+  private isFixedWidth(options: Options): boolean {
+    return !!options[this.Direction.resolve('fixedWidth')];
   }
 
   /**
@@ -487,14 +487,14 @@ export class SplideRenderer {
    *
    * @return `true` if the slide should be centered, or otherwise `false`.
    */
-  private isCenter( options: Options ): boolean {
-    if( options.focus === 'center' ) {
-      if ( this.isLoop() ) {
+  private isCenter(options: Options): boolean {
+    if (options.focus === 'center') {
+      if (this.isLoop()) {
         return true;
       }
 
-      if ( this.options.type === SLIDE ) {
-        return ! this.options.trimSpace;
+      if (this.options.type === SLIDE) {
+        return !this.options.trimSpace;
       }
     }
 
@@ -525,8 +525,8 @@ export class SplideRenderer {
       options.drag && `${ CLASS_ROOT }--draggable`,
       options.isNavigation && `${ CLASS_ROOT }--nav`,
       CLASS_ACTIVE,
-      ! this.config.hidden && CLASS_RENDERED,
-    ].filter( Boolean ).join( ' ' );
+      !this.config.hidden && CLASS_RENDERED,
+    ].filter(Boolean).join(' ');
   }
 
   /**
@@ -536,12 +536,12 @@ export class SplideRenderer {
    *
    * @return A built string.
    */
-  private buildAttrs( attrs: Record<string, string | number | boolean> ): string {
+  private buildAttrs(attrs: Record<string, string | number | boolean>): string {
     let attr = '';
 
-    forOwn( attrs, ( value, key ) => {
-      attr += value ? ` ${ camelToKebab( key ) }="${ value }"` : '';
-    } );
+    forOwn(attrs, (value, key) => {
+      attr += value ? ` ${ camelToKebab(key) }="${ value }"` : '';
+    });
 
     return attr.trim();
   }
@@ -553,12 +553,12 @@ export class SplideRenderer {
    *
    * @return A built string.
    */
-  private buildStyles( styles: Record<string, string | number> ): string {
+  private buildStyles(styles: Record<string, string | number>): string {
     let style = '';
 
-    forOwn( styles, ( value, key ) => {
-      style += ` ${ camelToKebab( key ) }:${ value };`;
-    } );
+    forOwn(styles, (value, key) => {
+      style += ` ${ camelToKebab(key) }:${ value };`;
+    });
 
     return style.trim();
   }
@@ -571,9 +571,9 @@ export class SplideRenderer {
   private renderSlides(): string {
     const { slideTag: tag } = this.config;
 
-    return this.slides.map( content => {
-      return `<${ tag } ${ this.buildAttrs( content.attrs ) }>${ content.html || '' }</${ tag }>`;
-    } ).join( '' );
+    return this.slides.map(content => {
+      return `<${ tag } ${ this.buildAttrs(content.attrs) }>${ content.html || '' }</${ tag }>`;
+    }).join('');
   }
 
   /**
@@ -581,14 +581,14 @@ export class SplideRenderer {
    *
    * @param content - A slide content.
    */
-  private cover( content: SlideContent ): void {
+  private cover(content: SlideContent): void {
     const { styles, html = '' } = content;
 
-    if ( this.options.cover && ! this.options.lazyLoad ) {
-      const src = html.match( /<img.*?src\s*=\s*(['"])(.+?)\1.*?>/ );
+    if (this.options.cover && !this.options.lazyLoad) {
+      const src = html.match(/<img.*?src\s*=\s*(['"])(.+?)\1.*?>/);
 
-      if ( src && src[ 2 ] ) {
-        styles.background = `center/cover no-repeat url('${ src[ 2 ] }')`;
+      if (src && src[2]) {
+        styles.background = `center/cover no-repeat url('${ src[2] }')`;
       }
     }
   }
@@ -598,20 +598,20 @@ export class SplideRenderer {
    *
    * @param contents - An array with SlideContent objects.
    */
-  private generateClones( contents: SlideContent[] ): void {
+  private generateClones(contents: SlideContent[]): void {
     const { classes } = this.options;
-    const count  = this.getCloneCount();
+    const count = this.getCloneCount();
     const slides = contents.slice();
 
-    while ( slides.length < count ) {
-      push( slides, slides );
+    while (slides.length < count) {
+      push(slides, slides);
     }
 
-    push( slides.slice( -count ).reverse(), slides.slice( 0, count ) ).forEach( ( content, index ) => {
-      const attrs = assign( {}, content.attrs, { class: `${ content.attrs.class } ${ classes.clone }` } );
-      const clone = assign( {}, content, { attrs } );
-      index < count ? contents.unshift( clone ) : contents.push( clone );
-    } );
+    push(slides.slice(-count).reverse(), slides.slice(0, count)).forEach((content, index) => {
+      const attrs = assign({}, content.attrs, { class: `${ content.attrs.class } ${ classes.clone }` });
+      const clone = assign({}, content, { attrs });
+      index < count ? contents.unshift(clone) : contents.push(clone);
+    });
   }
 
   /**
@@ -620,15 +620,15 @@ export class SplideRenderer {
    * @return A number of clones.
    */
   private getCloneCount(): number {
-    if ( this.isLoop() ) {
+    if (this.isLoop()) {
       const { options } = this;
 
-      if ( options.clones ) {
+      if (options.clones) {
         return options.clones;
       }
 
-      const perPage = max( ...this.breakpoints.map( ( [ , options ] ) => options.perPage ) );
-      return perPage * ( ( options.flickMaxPages || 1 ) + 1 );
+      const perPage = max(...this.breakpoints.map(([, options]) => options.perPage));
+      return perPage * ((options.flickMaxPages || 1) + 1);
     }
 
     return 0;
@@ -643,8 +643,8 @@ export class SplideRenderer {
     let html = '';
 
     html += `<div class="${ this.options.classes.arrows }">`;
-    html += this.renderArrow( true );
-    html += this.renderArrow( false );
+    html += this.renderArrow(true);
+    html += this.renderArrow(false);
     html += `</div>`;
 
     return html;
@@ -658,16 +658,16 @@ export class SplideRenderer {
    *
    * @return The HTML for the prev or next arrow.
    */
-  private renderArrow( prev: boolean ): string {
+  private renderArrow(prev: boolean): string {
     const { classes, i18n } = this.options;
     const attrs = {
-      class    : `${ classes.arrow } ${ prev ? classes.prev : classes.next }`,
-      type     : 'button',
+      class: `${ classes.arrow } ${ prev ? classes.prev : classes.next }`,
+      type: 'button',
       ariaLabel: prev ? i18n.prev : i18n.next,
     };
 
-    return `<button ${ this.buildAttrs( attrs ) }>`
-      +	`<svg xmlns="${ XML_NAME_SPACE }" viewBox="0 0 ${ SIZE } ${ SIZE }" width="${ SIZE }" height="${ SIZE }">`
+    return `<button ${ this.buildAttrs(attrs) }>`
+      + `<svg xmlns="${ XML_NAME_SPACE }" viewBox="0 0 ${ SIZE } ${ SIZE }" width="${ SIZE }" height="${ SIZE }">`
       + `<path d="${ this.options.arrowPath || PATH }" />`
       + `</svg>`
       + `</button>`;
@@ -686,14 +686,14 @@ export class SplideRenderer {
     html += `<div id="${ this.id }" class="${ this.buildClasses() } ${ rootClass || '' }">`;
     html += `<style>${ this.Style.build() }</style>`;
 
-    if ( slider ) {
+    if (slider) {
       html += beforeSlider || '';
       html += `<div class="splide__slider">`;
     }
 
     html += beforeTrack || '';
 
-    if ( arrows ) {
+    if (arrows) {
       html += this.renderArrows();
     }
 
@@ -707,7 +707,7 @@ export class SplideRenderer {
 
     html += afterTrack || '';
 
-    if ( slider ) {
+    if (slider) {
       html += `</div>`;
       html += afterSlider || '';
     }

src/js/renderer/Style/Style.ts

@@ -3,8 +3,8 @@ import { forOwn } from '@splidejs/utils';
 
 
 interface Styles {
-  [ breakpoint: string ]: {
-    [ selector: string ]: Record<string, string | number>
+  [breakpoint: string]: {
+    [selector: string]: Record<string, string | number>
   };
 }
 
@@ -35,8 +35,8 @@ export class Style {
    * @param id      - A slider ID.
    * @param options - Options.
    */
-  constructor( id: string, options: Options ) {
-    this.id      = id;
+  constructor(id: string, options: Options) {
+    this.id = id;
     this.options = options;
   }
 
@@ -48,11 +48,11 @@ export class Style {
    * @param value
    * @param breakpoint
    */
-  rule( selector: string, prop: string, value: string | number, breakpoint?: string ): void {
+  rule(selector: string, prop: string, value: string | number, breakpoint?: string): void {
     breakpoint = breakpoint || 'default';
-    const selectors = ( this.styles[ breakpoint ] = this.styles[ breakpoint ] || {} );
-    const styles    = ( selectors[ selector ] = selectors[ selector ] || {} );
-    styles[ prop ] = value;
+    const selectors = (this.styles[breakpoint] = this.styles[breakpoint] || {});
+    const styles = (selectors[selector] = selectors[selector] || {});
+    styles[prop] = value;
   }
 
   /**
@@ -63,19 +63,19 @@ export class Style {
   build(): string {
     let css = '';
 
-    if ( this.styles.default ) {
-      css += this.buildSelectors( this.styles.default );
+    if (this.styles.default) {
+      css += this.buildSelectors(this.styles.default);
     }
 
-    Object.keys( this.styles )
-      .sort( ( n, m ) => this.options.mediaQuery === 'min' ? +n - +m : +m - +n )
-      .forEach( breakpoint => {
-        if ( breakpoint !== 'default' ) {
+    Object.keys(this.styles)
+      .sort((n, m) => this.options.mediaQuery === 'min' ? +n - +m : +m - +n)
+      .forEach(breakpoint => {
+        if (breakpoint !== 'default') {
           css += `@media screen and (max-width: ${ breakpoint }px) {`;
-          css += this.buildSelectors( this.styles[ breakpoint ] );
+          css += this.buildSelectors(this.styles[breakpoint]);
           css += `}`;
         }
-      } );
+      });
 
     return css;
   }
@@ -87,20 +87,20 @@ export class Style {
    *
    * @return Built styles.
    */
-  private buildSelectors( selectors: Record<string, Record<string, string | number>> ): string {
+  private buildSelectors(selectors: Record<string, Record<string, string | number>>): string {
     let css = '';
 
-    forOwn( selectors, ( styles, selector ) => {
+    forOwn(selectors, (styles, selector) => {
       css += `${ `#${ this.id } ${ selector }`.trim() } {`;
 
-      forOwn( styles, ( value, prop ) => {
-        if ( value || value === 0 ) {
+      forOwn(styles, (value, prop) => {
+        if (value || value === 0) {
           css += `${ prop }: ${ value };`;
         }
-      } );
+      });
 
       css += '}';
-    } );
+    });
 
     return css;
   }

src/js/renderer/constants/defaults.ts

@@ -7,6 +7,6 @@ import { RendererConfig } from '../types/types';
  * @since 3.0.0
  */
 export const RENDERER_DEFAULT_CONFIG: RendererConfig = {
-  listTag : 'ul',
+  listTag: 'ul',
   slideTag: 'li',
 };

src/js/test/assets/css/styles.css

@@ -1,5 +1,5 @@
 body {
-  background : #555;
+  background: #555;
   /*height: 200vh;*/
   font-family: Roboto, sans-serif;
   line-height: 1.5;

src/js/test/fixtures/html.ts

@@ -24,7 +24,7 @@ export interface BuildHtmlArgs {
  *
  * @return A built HTML.
  */
-export function buildHtml( args: BuildHtmlArgs = {} ): string {
+export function buildHtml(args: BuildHtmlArgs = {}): string {
   const {
     tag = 'div',
     id,
@@ -43,7 +43,7 @@ export function buildHtml( args: BuildHtmlArgs = {} ): string {
 <${ tag } class="splide"${ id ? ` id=${ id }` : '' }${ json ? ` data-splide='${ json }'` : '' }>
   <div class="splide__track">
     <ul class="splide__list">
-      ${ generateSlides( length, src, dataSrc, dataSrcset, dataInterval ) }
+      ${ generateSlides(length, src, dataSrc, dataSrcset, dataInterval) }
     </ul>
   </div>
 
@@ -70,41 +70,41 @@ export function generateSlides(
   src?: boolean | string,
   dataSrc?: boolean | string,
   dataSrcset?: boolean | string,
-  dataInterval: number[] = []
+  dataInterval: number[] = [],
 ): string {
-  return Array.from<string>( { length } ).reduce( ( html, item, index ) => {
+  return Array.from<string>({ length }).reduce((html, item, index) => {
     const attrs: string[] = [];
 
-    if ( dataInterval ) {
-      const interval = dataInterval[ index ];
+    if (dataInterval) {
+      const interval = dataInterval[index];
 
-      if ( interval ) {
-        attrs.push( `${ INTERVAL_DATA_ATTRIBUTE }="${ interval }"` );
+      if (interval) {
+        attrs.push(`${ INTERVAL_DATA_ATTRIBUTE }="${ interval }"`);
       }
     }
 
-    html += `<li class="splide__slide" ${ attrs.join( ' ' ) }>`;
+    html += `<li class="splide__slide" ${ attrs.join(' ') }>`;
 
-    const imgAttrs = [ `alt="${ index }"` ];
+    const imgAttrs = [`alt="${ index }"`];
 
-    if ( src ) {
-      imgAttrs.push( `src="${ URL }/${ typeof src === 'string' ? src + '-' : '' }${ index }.jpg"` );
+    if (src) {
+      imgAttrs.push(`src="${ URL }/${ typeof src === 'string' ? src + '-' : '' }${ index }.jpg"`);
     }
 
-    if ( dataSrc ) {
-      imgAttrs.push( `${ SRC_DATA_ATTRIBUTE }="${ URL }/${ typeof dataSrc === 'string' ? dataSrc + '-' : '' }${ index }.jpg"` );
+    if (dataSrc) {
+      imgAttrs.push(`${ SRC_DATA_ATTRIBUTE }="${ URL }/${ typeof dataSrc === 'string' ? dataSrc + '-' : '' }${ index }.jpg"`);
     }
 
-    if ( dataSrcset ) {
+    if (dataSrcset) {
       imgAttrs.push(
-        `${ SRCSET_DATA_ATTRIBUTE }="${ URL }/${ typeof dataSrcset === 'string' ? dataSrcset + '-' : '' }${ index }.jpg 320w"`
+        `${ SRCSET_DATA_ATTRIBUTE }="${ URL }/${ typeof dataSrcset === 'string' ? dataSrcset + '-' : '' }${ index }.jpg 320w"`,
       );
     }
 
-    html += `<img ${ imgAttrs.join( ' ' ) }>`;
+    html += `<img ${ imgAttrs.join(' ') }>`;
     html += `</li>`;
     return html;
-  }, '' );
+  }, '');
 }
 
 export const HTML_ARROWS = `

src/js/test/html/index.html

@@ -1,62 +1,62 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-	<title>HTML</title>
-	<link rel="stylesheet" href="../../../../dist/css/themes/splide-default.min.css">
-	<link rel="stylesheet" href="./src/js/test/assets/css/styles.css">
-	<script type="text/javascript" src="../../../../dist/js/splide.js"></script>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <title>HTML</title>
+  <link rel="stylesheet" href="../../../../dist/css/themes/splide-default.min.css">
+  <link rel="stylesheet" href="./src/js/test/assets/css/styles.css">
+  <script type="text/javascript" src="../../../../dist/js/splide.js"></script>
 
-	<script>
-		document.addEventListener( 'DOMContentLoaded', function () {
-			const splide = new Splide( '#splide01', {
-				isNavigation: true,
-				fixedWidth: 100,
-				pagination: false,
-			} );
+  <script>
+    document.addEventListener('DOMContentLoaded', function () {
+      const splide = new Splide('#splide01', {
+        isNavigation: true,
+        fixedWidth: 100,
+        pagination: false,
+      });
 
-			splide.mount();
-		} );
-	</script>
+      splide.mount();
+    });
+  </script>
 </head>
 <body>
 
 <section id="splide01" class="splide">
-	<div class="splide__track">
-		<ul class="splide__list">
-			<li class="splide__slide">
-				<img src="./src/js/test/assets/images/pics/slide01.jpg">
-			</li>
-			<li class="splide__slide">
-				<img src="./src/js/test/assets/images/pics/slide02.jpg">
-			</li>
-			<li class="splide__slide">
-				<img src="./src/js/test/assets/images/pics/slide03.jpg">
-			</li>
-			<li class="splide__slide">
-				<img src="./src/js/test/assets/images/pics/slide04.jpg">
-			</li>
-			<li class="splide__slide">
-				<img src="./src/js/test/assets/images/pics/slide05.jpg">
-			</li>
-			<li class="splide__slide">
-				<img src="./src/js/test/assets/images/pics/slide06.jpg">
-			</li>
-			<li class="splide__slide">
-				<img src="./src/js/test/assets/images/pics/slide07.jpg">
-			</li>
-			<li class="splide__slide">
-				<img src="./src/js/test/assets/images/pics/slide08.jpg">
-			</li>
-			<li class="splide__slide">
-				<img src="./src/js/test/assets/images/pics/slide09.jpg">
-			</li>
-			<li class="splide__slide">
-				<img src="./src/js/test/assets/images/pics/slide10.jpg">
-			</li>
-		</ul>
-	</div>
+  <div class="splide__track">
+    <ul class="splide__list">
+      <li class="splide__slide">
+        <img src="./src/js/test/assets/images/pics/slide01.jpg">
+      </li>
+      <li class="splide__slide">
+        <img src="./src/js/test/assets/images/pics/slide02.jpg">
+      </li>
+      <li class="splide__slide">
+        <img src="./src/js/test/assets/images/pics/slide03.jpg">
+      </li>
+      <li class="splide__slide">
+        <img src="./src/js/test/assets/images/pics/slide04.jpg">
+      </li>
+      <li class="splide__slide">
+        <img src="./src/js/test/assets/images/pics/slide05.jpg">
+      </li>
+      <li class="splide__slide">
+        <img src="./src/js/test/assets/images/pics/slide06.jpg">
+      </li>
+      <li class="splide__slide">
+        <img src="./src/js/test/assets/images/pics/slide07.jpg">
+      </li>
+      <li class="splide__slide">
+        <img src="./src/js/test/assets/images/pics/slide08.jpg">
+      </li>
+      <li class="splide__slide">
+        <img src="./src/js/test/assets/images/pics/slide09.jpg">
+      </li>
+      <li class="splide__slide">
+        <img src="./src/js/test/assets/images/pics/slide10.jpg">
+      </li>
+    </ul>
+  </div>
 </section>
 
 </body>

src/js/test/jest/setup.ts

@@ -1,10 +1,10 @@
-window.matchMedia = () => ( {
-  matches            : false, // All queries match the media string.
-  media              : '',
-  onchange           : null,
-  addListener        : jest.fn(),
-  removeListener     : jest.fn(),
-  addEventListener   : jest.fn(),
+window.matchMedia = () => ({
+  matches: false, // All queries match the media string.
+  media: '',
+  onchange: null,
+  addListener: jest.fn(),
+  removeListener: jest.fn(),
+  addEventListener: jest.fn(),
   removeEventListener: jest.fn(),
-  dispatchEvent      : jest.fn(),
-} as MediaQueryList );
+  dispatchEvent: jest.fn(),
+} as MediaQueryList);

src/js/test/php/examples/add.php

@@ -24,27 +24,27 @@ $settings = get_settings();
 <button id="remove">Remove</button>
 
 <script>
-  var splide = new Splide( '#splide01', {
-    type   : 'loop',
+  var splide = new Splide('#splide01', {
+    type: 'loop',
     perPage: 3,
-    gap    : '1rem',
-  } );
+    gap: '1rem',
+  });
 
   splide.mount();
 
-  var add    = document.getElementById( 'add' );
-  var remove = document.getElementById( 'remove' );
+  var add = document.getElementById('add');
+  var remove = document.getElementById('remove');
 
-  add.addEventListener( 'click', function() {
-    splide.add( [
+  add.addEventListener('click', function () {
+    splide.add([
       '<li class="splide__slide"><img src="../../assets/images/pics/slide15.jpg"></li>',
       '<li class="splide__slide"><img src="../../assets/images/pics/slide16.jpg"></li>',
-    ] );
-  } );
+    ]);
+  });
 
-  remove.addEventListener( 'click', function() {
-    splide.remove( splide.length - 1 );
-  } );
+  remove.addEventListener('click', function () {
+    splide.remove(splide.length - 1);
+  });
 </script>
 
 </body>

src/js/test/php/examples/autoHeight.php

@@ -15,19 +15,19 @@ $settings = get_settings();
   <script src="../../../../../dist/js/splide.js"></script>
 
   <script>
-    document.addEventListener( 'DOMContentLoaded', function () {
-      var splide = new Splide( '#splide01', {
-        width     : 1000,
-        height    : '90vh',
-        direction : 'ttb',
+    document.addEventListener('DOMContentLoaded', function () {
+      var splide = new Splide('#splide01', {
+        width: 1000,
+        height: '90vh',
+        direction: 'ttb',
         autoHeight: true,
-        gap       : '1rem',
-        trimSpace : 'move',
-        focus     : 'center',
-      } );
+        gap: '1rem',
+        trimSpace: 'move',
+        focus: 'center',
+      });
 
       splide.mount();
-    } );
+    });
   </script>
 
   <style>

src/js/test/php/examples/autoWidth.php

@@ -15,32 +15,32 @@ $settings = get_settings();
   <script src="../../../../../dist/js/splide.js"></script>
 
   <script>
-    document.addEventListener( 'DOMContentLoaded', function () {
-      var splide01 = new Splide( '#splide01', {
+    document.addEventListener('DOMContentLoaded', function () {
+      var splide01 = new Splide('#splide01', {
         // width     : 1000,
-        autoWidth : true,
-        gap       : '1rem',
+        autoWidth: true,
+        gap: '1rem',
         // trimSpace : tr,
-        focus     : 0,
-        drag      : 'free',
-        omitEnd   : true,
-      } );
+        focus: 0,
+        drag: 'free',
+        omitEnd: true,
+      });
 
       splide01.mount();
 
-      var splide02 = new Splide( '#splide02', {
+      var splide02 = new Splide('#splide02', {
         // width     : 1000,
-        type      : 'loop',
-        autoWidth : true,
-        gap       : '1rem',
-        focus     : 'center',
-        trimSpace : false,
-        drag      : 'free',
+        type: 'loop',
+        autoWidth: true,
+        gap: '1rem',
+        focus: 'center',
+        trimSpace: false,
+        drag: 'free',
 
-      } );
+      });
 
       splide02.mount();
-    } );
+    });
   </script>
 </head>
 <body>