Use size-limit and imporve defaultProps

Author: midudev

package.json

@@ -26,7 +26,8 @@
     "lint:sass": "sui-lint sass",
     "prelib": "npm run clean:lib -s",
     "release": "np",
-    "prepublish": "npm run lib"
+    "prepublish": "npm run lib",
+    "test": "size-limit"
   },
   "license": "MIT",
   "repository": {
@@ -40,22 +41,21 @@
   },
   "devDependencies": {
     "@babel/cli": "7",
-    "@mdx-js/loader": "1.5.3",
-    "@next/mdx": "9.1.7",
+    "@next/mdx": "9.3.4",
     "@s-ui/lint": "3",
+    "@size-limit/preset-small-lib": "4.4.5",
     "@zeit/next-sass": "1.0.1",
     "babel-preset-sui": "3",
     "copyfiles": "2.1.1",
-    "next": "9.1.7",
-    "node-sass": "4.13.0",
+    "next": "9.3.4",
+    "node-sass": "4.13.1",
     "np": "5.2.1",
     "prism-react-renderer": "1.0.2",
     "prop-types": "15",
     "react": ">= 16.8.0 < 17",
     "react-dom": ">= 16.8.0 < 17",
     "rimraf": "3.0.0",
-    "sass-loader": "8.0.2",
-    "webpack": "4.41.5"
+    "size-limit": "4.4.5"
   },
   "dependencies": {
     "intersection-observer": "0.7.0"
@@ -71,5 +71,11 @@
   "prettier": "./node_modules/@s-ui/lint/.prettierrc.js",
   "stylelint": {
     "extends": "./node_modules/@s-ui/lint/stylelint.config.js"
-  }
+  },
+  "size-limit": [
+    {
+      "limit": "2.65 KB",
+      "path": "lib/*.js"
+    }
+  ]
 }

src/index.js

@@ -11,18 +11,41 @@ const CLASSNAMES = {
   fullWidth: 'react-Slidy--fullWidth'
 }
 
-const ReactSlidy = props => {
-  const [showSlider, setShowSlider] = useState(!props.lazyLoadSlider)
+const ReactSlidy = ({
+  children,
+  classNameBase = 'react-Slidy',
+  doAfterDestroy = noop,
+  doAfterInit = noop,
+  doAfterSlide = noop,
+  doBeforeSlide = noop,
+  imageObjectFit,
+  itemsToPreload = 1,
+  initialSlide = 0,
+  ease = 'ease',
+  lazyLoadSlider = true,
+  lazyLoadConfig = {
+    offset: 150
+  },
+  keyboardNavigation = false,
+  numOfSlides = 1,
+  sanitize = true,
+  slide = 0,
+  slideSpeed = 500,
+  showArrows = true,
+  useFullHeight = false,
+  useFullWidth = true
+}) => {
+  const [showSlider, setShowSlider] = useState(!lazyLoadSlider)
   const nodeEl = useRef(null)
 
   useEffect(
     function() {
       let observer
 
-      if (props.lazyLoadSlider) {
+      if (lazyLoadSlider) {
         const initLazyLoadSlider = () => {
           // if we support IntersectionObserver, let's use it
-          const {offset = 0} = props.lazyLoadConfig
+          const {offset = 0} = lazyLoadConfig
           observer = new window.IntersectionObserver(handleIntersection, {
             rootMargin: `${offset}px 0px 0px`
           })
@@ -48,16 +71,6 @@ const ReactSlidy = props => {
     }
   }
 
-  const {
-    children,
-    classNameBase,
-    imageObjectFit,
-    numOfSlides,
-    sanitize,
-    useFullHeight,
-    useFullWidth
-  } = props
-
   const numOfSlidesSanitzed = Math.min(
     numOfSlides,
     React.Children.count(children)
@@ -72,15 +85,31 @@ const ReactSlidy = props => {
     .filter(Boolean)
     .join(' ')
 
+  const reactSlidySliderProps = {
+    children,
+    classNameBase,
+    doAfterDestroy,
+    doAfterInit,
+    doAfterSlide,
+    doBeforeSlide,
+    ease,
+    initialSlide,
+    itemsToPreload,
+    keyboardNavigation,
+    numOfSlides,
+    slide,
+    showArrows,
+    slideSpeed
+  }
+
   return (
     <div className={rootClassName} ref={nodeEl}>
       {showSlider && (
         <ReactSlidySlider
-          parentRef={nodeEl}
-          {...props}
+          {...reactSlidySliderProps}
           numOfSlides={sanitize ? numOfSlidesSanitzed : numOfSlides}
         >
-          {props.children}
+          {children}
         </ReactSlidySlider>
       )}
     </div>
@@ -117,8 +146,6 @@ ReactSlidy.propTypes = {
     /** Distance which the slider will be loaded */
     offset: PropTypes.number
   }),
-  /** Activate navigation by keyboard */
-  navigateByKeyboard: PropTypes.bool,
   /** Number of slides to show at once */
   numOfSlides: PropTypes.number,
   /** Determine if we want to sanitize the slides or take numberOfSlider directly */
@@ -135,27 +162,4 @@ ReactSlidy.propTypes = {
   useFullHeight: PropTypes.bool
 }
 
-ReactSlidy.defaultProps = {
-  classNameBase: 'react-Slidy',
-  doAfterDestroy: noop,
-  doAfterInit: noop,
-  doAfterSlide: noop,
-  doBeforeSlide: noop,
-  itemsToPreload: 1,
-  initialSlide: 0,
-  ease: 'ease',
-  lazyLoadSlider: true,
-  lazyLoadConfig: {
-    offset: 150
-  },
-  navigateByKeyboard: false,
-  numOfSlides: 1,
-  sanitize: true,
-  slide: 0,
-  slideSpeed: 500,
-  showArrows: true,
-  useFullHeight: false,
-  useFullWidth: true
-}
-
 export default ReactSlidy