refactor: migrate classnames to clsx

__tests__/regression/fix-1813.test.js

@@ -31,12 +31,12 @@ function MultipleItems() {
   return <GenericSliderComponent slidesCount={9} settings={settings} />;
 }
 
-describe("Multiple Items with slidesToShow = slides count in infinite mode", function() {
-  it("should have 9 active slides", function() {
+describe("Multiple Items with slidesToShow = slides count in infinite mode", function () {
+  it("should have 9 active slides", function () {
     const { container } = render(<MultipleItems />);
     expect(getActiveSlidesCount(container)).toEqual(9);
   });
-  it("should show first 9 slides", function() {
+  it("should show first 9 slides", function () {
     const { container } = render(<MultipleItems />);
     //expect(getActiveButton(container)).toEqual(["1"]);
     expect(getActiveSlidesText(container)).toEqual([

__tests__/regression/fix-2414.test.js

@@ -29,32 +29,32 @@ function SliderWithUnslick() {
   return <GenericSliderComponent slidesCount={2} settings={settings} />;
 }
 
-describe("Slider with one slide", function() {
-  it("should have 1 active slide", function() {
+describe("Slider with one slide", function () {
+  it("should have 1 active slide", function () {
     const { container } = render(<SliderWithOneSlide />);
     expect(getActiveSlidesCount(container)).toEqual(1);
   });
-  it("should not have any clones", function() {
+  it("should not have any clones", function () {
     const { container } = render(<SliderWithOneSlide />);
     expect(getClonesCount(container)).toEqual(0);
   });
-  it("should no have dots and arrows", function() {
+  it("should no have dots and arrows", function () {
     const { container } = render(<SliderWithOneSlide />);
     expect(hasArrows(container)).toEqual(false);
     expect(hasDots(container)).toEqual(false);
   });
 });
 
-describe("Slider with unslick=true", function() {
-  it("should have one active slide", function() {
+describe("Slider with unslick=true", function () {
+  it("should have one active slide", function () {
     const { container } = render(<SliderWithUnslick />);
     expect(getActiveSlidesCount(container)).toEqual(1);
   });
-  it("should not have any clones", function() {
+  it("should not have any clones", function () {
     const { container } = render(<SliderWithUnslick />);
     expect(getClonesCount(container)).toEqual(0);
   });
-  it("should no have dots and arrows", function() {
+  it("should no have dots and arrows", function () {
     const { container } = render(<SliderWithUnslick />);
     expect(hasArrows(container)).toEqual(false);
     expect(hasDots(container)).toEqual(false);

examples/__tests__/MultipleItems.test.js

@@ -19,8 +19,8 @@ import {
 } from "../../test-utils";
 import MultipleItems from "../MultipleItems";
 
-describe("Multiple Items", function() {
-  it("should have 9 actual slides and (3(pre) + 3(post)) clone slides", function() {
+describe("Multiple Items", function () {
+  it("should have 9 actual slides and (3(pre) + 3(post)) clone slides", function () {
     const { container } = render(<MultipleItems />);
     expect(getSlidesCount(container)).toEqual(15);
     expect(getClonesCount(container)).toEqual(6);

examples/__tests__/SimpleSlider.test.js

@@ -16,7 +16,7 @@ import {
 } from "../../test-utils";
 
 describe("SimpleSlider example", () => {
-  it("should have 13 slides (1(preclone) + 6(actual) + 1(postclone))", function() {
+  it("should have 13 slides (1(preclone) + 6(actual) + 1(postclone))", function () {
     const { container } = render(<SimpleSlider />);
     expect(container.getElementsByClassName("slick-slide").length).toBe(8);
   });

gulpfile.js

@@ -30,7 +30,7 @@ gulp.task("copy", function () {
     .pipe(gulp.dest("./build"));
 });
 
-gulp.task("prepare-playwright", function() {
+gulp.task("prepare-playwright", function () {
   // Copy files to src-jsx directory with jsx extension
   return gulp
     .src("./src/**/*.js")

jest.config.js

@@ -1,9 +1,7 @@
 module.exports = {
   collectCoverage: true,
-  coverageReporters: ['text', 'cobertura'],
-  collectCoverageFrom: [
-    'src/**/*',
-  ],
+  coverageReporters: ["text", "cobertura"],
+  collectCoverageFrom: ["src/**/*"],
   testEnvironment: "jsdom",
   setupFilesAfterEnv: ["<rootDir>/test-setup.js"],
   testPathIgnorePatterns: ["/node_modules/", "playwright-tests"],

package.json

@@ -101,10 +101,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.7",
+    "clsx": "^2.1.1",
     "@testing-library/dom": "^10.4.1",
-    "classnames": "^2.2.5",
     "json2mq": "^0.2.0",
-    "resize-observer-polyfill": "^1.5.1",
     "throttle-debounce": "^5.0.0"
   },
   "peerDependencies": {

src/arrows.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import React from "react";
-import classnames from "classnames";
+import { clsx } from "clsx";
 import { canGoNext } from "./utils/innerSliderUtils";
 
 export class PrevArrow extends React.PureComponent {
@@ -27,7 +27,7 @@ export class PrevArrow extends React.PureComponent {
     let prevArrowProps = {
       key: "0",
       "data-role": "none",
-      className: classnames(prevClasses),
+      className: clsx(prevClasses),
       style: { display: "block" },
       onClick: prevHandler
     };
@@ -74,7 +74,7 @@ export class NextArrow extends React.PureComponent {
     let nextArrowProps = {
       key: "1",
       "data-role": "none",
-      className: classnames(nextClasses),
+      className: clsx(nextClasses),
       style: { display: "block" },
       onClick: nextHandler
     };

src/dots.js

@@ -1,10 +1,10 @@
 "use strict";
 
 import React from "react";
-import classnames from "classnames";
+import { clsx } from "clsx";
 import { clamp } from "./utils/innerSliderUtils";
 
-const getDotCount = spec => {
+const getDotCount = (spec) => {
   let dots;
 
   if (spec.infinite) {
@@ -55,7 +55,7 @@ export class Dots extends React.PureComponent {
         ? _leftBound
         : clamp(_leftBound, 0, slideCount - 1);
 
-      let className = classnames({
+      let className = clsx({
         "slick-active": infinite
           ? currentSlide >= leftBound && currentSlide <= rightBound
           : currentSlide === leftBound

src/inner-slider.js

@@ -3,7 +3,7 @@
 import React from "react";
 import initialState from "./initial-state";
 import { debounce } from "throttle-debounce";
-import classnames from "classnames";
+import { clsx } from "clsx";
 import {
   getOnDemandLazySlides,
   extractObject,
@@ -25,7 +25,6 @@ import {
 import { Track } from "./track";
 import { Dots } from "./dots";
 import { PrevArrow, NextArrow } from "./arrows";
-import ResizeObserver from "resize-observer-polyfill";
 
 export class InnerSlider extends React.Component {
   constructor(props) {
@@ -78,17 +77,19 @@ export class InnerSlider extends React.Component {
     if (this.props.lazyLoad === "progressive") {
       this.lazyLoadTimer = setInterval(this.progressiveLazyLoad, 1000);
     }
-    this.ro = new ResizeObserver(() => {
-      if (this.state.animating) {
-        this.onWindowResized(false); // don't set trackStyle hence don't break animation
-        this.callbackTimers.push(
-          setTimeout(() => this.onWindowResized(), this.props.speed)
-        );
-      } else {
-        this.onWindowResized();
-      }
-    });
-    this.ro.observe(this.list);
+    if (typeof ResizeObserver !== "undefined") {
+      this.ro = new ResizeObserver(() => {
+        if (this.state.animating) {
+          this.onWindowResized(false); // don't set trackStyle hence don't break animation
+          this.callbackTimers.push(
+            setTimeout(() => this.onWindowResized(), this.props.speed)
+          );
+        } else {
+          this.onWindowResized();
+        }
+      });
+      this.ro.observe(this.list);
+    }
     document.querySelectorAll &&
       Array.prototype.forEach.call(
         document.querySelectorAll(".slick-slide"),
@@ -122,7 +123,7 @@ export class InnerSlider extends React.Component {
     if (this.autoplayTimer) {
       clearInterval(this.autoplayTimer);
     }
-    this.ro.disconnect();
+    this.ro?.disconnect();
   };
 
   didPropsChange(prevProps) {
@@ -619,7 +620,7 @@ export class InnerSlider extends React.Component {
     this.autoPlay("blur");
 
   render = () => {
-    var className = classnames("slick-slider", this.props.className, {
+    var className = clsx("slick-slider", this.props.className, {
       "slick-vertical": this.props.vertical,
       "slick-initialized": true
     });

src/track.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import React from "react";
-import classnames from "classnames";
+import { clsx } from "clsx";
 import {
   lazyStartIndex,
   lazyEndIndex,
@@ -123,7 +123,7 @@ const renderSlides = (spec) => {
       React.cloneElement(child, {
         key: "original" + getKey(child, index),
         "data-index": index,
-        className: classnames(slideClasses, slideClass),
+        className: clsx(slideClasses, slideClass),
         tabIndex: "-1",
         "aria-hidden": !slideClasses["slick-active"],
         style: { outline: "none", ...(child.props.style || {}), ...childStyle },
@@ -155,7 +155,7 @@ const renderSlides = (spec) => {
             key: "precloned" + getKey(child, key),
             "data-index": key,
             tabIndex: "-1",
-            className: classnames(slideClasses, slideClass),
+            className: clsx(slideClasses, slideClass),
             "aria-hidden": !slideClasses["slick-active"],
             style: { ...(child.props.style || {}), ...childStyle },
             onClick: (e) => {
@@ -178,10 +178,10 @@ const renderSlides = (spec) => {
             key: "postcloned" + getKey(child, key),
             "data-index": key,
             tabIndex: "-1",
-            className: classnames(slideClasses, slideClass),
+            className: clsx(slideClasses, slideClass),
             "aria-hidden": !slideClasses["slick-active"],
             style: { ...(child.props.style || {}), ...childStyle },
-            onClick: e => {
+            onClick: (e) => {
               child.props && child.props.onClick && child.props.onClick(e);
               if (spec.focusOnSelect) {
                 spec.focusOnSelect(childOnClickOptions);