2.1.0 (#257)

* updated 2.1.0-beta * updated test * updated travis * updated export types * updated readme * fixed travis yml typo * fixed travis yml typo
kidjp85 · Mar 14, 2019 · 57f113f · 57f113f
1 parent 6575d24
commit 57f113f
Show file tree

Hide file tree

Showing 18 changed files with 526 additions and 67 deletions.
diff --git a/.babelrc b/.babelrc
diff --git a/.travis.yml b/.travis.yml
@@ -1,15 +1,21 @@
+sudo: false
 language: node_js
-
+cache:
+  directories:
+    - node_modules
 node_js:
-  - 10
   - 8
-  - 6
-
+install:
+  - yarn install
+  - npm install -g codecov
 scripts:
-  - npm install codecov -g
-after_success:
-  - codecov
-
+  - yarn test
+  - yarn test:coverage
+  - yarn lint
+after_success: "cat ./coverage/lcov.info | $(npm bin)/codecov"
+branches:
+  only:
+  - master
 notifications:
   email:
     recipients:

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Change Log for React-id-swiper
 
+## [v2.1.0](https://github.com/kidjp85/react-id-swiper/compare/2.1.0...2.0.0) - Released on Mar 15th, 2019
+  * :bomb: **Great news** - Add new props **`modules`** that allows to import only necessary swiper modules.
+  * Fix `activeSlideKey` does not work correctly when `loop: true`
+
 ## [v2.0.0](https://github.com/kidjp85/react-id-swiper/compare/2.0.0...2.0.0-beta) - Released on Mar 14th, 2019
   * Add tests
   * Update README
@@ -101,4 +105,4 @@
 
 ## [v1.5.5](https://github.com/kidjp85/react-id-swiper/compare/1.5.5...1.5.4) - Released on November 15, 2017
   * Upgrade Swiper@4.0.6
-  * Add support for parallax
+  * Add support for parallax
diff --git a/README.md b/README.md
@@ -5,7 +5,7 @@
 
 [![Package Quality](http://npm.packagequality.com/badge/react-id-swiper.png)](http://packagequality.com/#?package=react-id-swiper)
 
-react-id-swiper ( Newest version 2.0.0 )
+react-id-swiper ( Newest version 2.1.0 )
 ========================================
 > A library to use [Swiper](http://www.idangero.us/swiper/get-started/) as a ReactJs component
 
@@ -38,13 +38,16 @@ React-id-swiper's original props
 | renderPagination   | function |                  | Render props function for pagination             |
 | renderParallax     | function |                  | Render props function for parallax               |
 | getSwiper          | function |                  | Callback function that returns Swiper instance   |
+| modules            | array    |                  | Array of Swiper modules for custom build         |
 
 
 NOTE: You can also use Swiper's original params too. Swiper API documentation [HERE](http://idangero.us/swiper/api/)
 
-## :warning: Important
+## :warning: Breaking change from 2.x
 
-From version 2.x.x requires React & ReactDOM ver >=16.8.0 to use [Hooks](https://reactjs.org/docs/hooks-intro.html)
+- From version 2.0.0 requires React & ReactDOM ver >=16.8.0 to use [Hooks](https://reactjs.org/docs/hooks-intro.html)
+
+- From version 2.1.0, adding new props named `modules` that can help reducing bundle file size. More info [here](https://idangero.us/swiper/api/#Custom%20Build)
 
 ## Installation and setup
 
@@ -65,11 +68,11 @@ yarn add react-id-swiper
 ### CDN
 
 ```html
-<script src="https://unpkg.com/react-id-swiper@2.0.0/lib/react-id-swiper.js"></script>
+<script src="https://unpkg.com/react-id-swiper@2.1.0/lib/react-id-swiper.js"></script>
 ```
 
 ```html
-<script src="https://unpkg.com/react-id-swiper@2.0.0/lib/react-id-swiper.min.js"></script>
+<script src="https://unpkg.com/react-id-swiper@2.1.0/lib/react-id-swiper.min.js"></script>
 ```
 
 ## Styling
@@ -114,9 +117,12 @@ export default SimpleSwiper;
 ```javascript
 import React from 'react';
 import Swiper from 'react-id-swiper';
+// Need to add Pagination, Navigation modules
+import { Pagination, Navigation } from 'swiper/dist/js/swiper.esm'
 
 const SimpleSwiperWithParams = () => {
   const params = {
+    modules: [Pagination, Navigation],
     pagination: {
       el: '.swiper-pagination',
       type: 'bullets',
@@ -148,6 +154,7 @@ export default SimpleSwiperWithParams;
 ```javascript
 import React, { useState } from 'react';
 import Swiper from 'react-id-swiper';
+import { Navigation } from 'swiper/dist/js/swiper.esm'
 
 const ManipulatingSwiper = () => {
   const [swiper, updateSwiper] = useState(null);
@@ -166,7 +173,7 @@ const ManipulatingSwiper = () => {
 
   return (
     <div>
-      <Swiper getSwiper={updateSwiper}>
+      <Swiper getSwiper={updateSwiper} modules={[Navigation]}>
         <div>Slide 1</div>
         <div>Slide 2</div>
         <div>Slide 3</div>
@@ -186,6 +193,7 @@ export default ManipulatingSwiper;
 
 ```javascript
 const params = {
+  modules: [Pagination],
   pagination: {
     el: '.swiper-pagination.customized-swiper-pagination',
   }, // Add your class name for pagination container
@@ -203,6 +211,7 @@ For customized rendering to work, you have to use same classname with params el.
 
 ```javascript
 const params = {
+  modules: [Navigation],
   navigation: {
     nextEl: '.swiper-button-next',
     prevEl: '.swiper-button-prev'
@@ -241,10 +250,10 @@ Each slide should be wrapped by HTML element
 
 ## Authors
 
-* **Phuc Hoang Nguyen** - *Initial work* - [Phuc Hoang Nguyen](https://github.com/kidjp85)
+* **Asher Nguyen** - *Initial work* - [Asher Nguyen](https://github.com/kidjp85)
 
 See also the list of [contributors](https://github.com/kidjp85/react-id-swiper/contributors) who participated in this project.
 
 ## License
 
-This project is licensed under the MIT License - see the [LICENSE.md](LICENSE) file for details
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,11 @@
+module.exports = function (api) {
+  api.cache(true);
+
+  const presets = ["@babel/preset-env"];
+  const plugins = ["@babel/plugin-syntax-dynamic-import"];
+
+  return {
+    presets,
+    plugins
+  };
+}
diff --git a/package.json b/package.json
@@ -1,11 +1,20 @@
 {
   "name": "react-id-swiper",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "ReactJs component for iDangerous Swiper",
   "main": "lib/index",
   "types": "lib/index.d.ts",
   "files": [
-    "lib/**/*",
+    "lib/index.js",
+    "lib/index.d.ts",
+    "lib/ReactIdSwiper.js",
+    "lib/ReactIdSwiper.d.ts",
+    "lib/utils.js",
+    "lib/utils.d.ts",
+    "lib/types.js",
+    "lib/types.d.ts",
+    "lib/react-id-swiper.js",
+    "lib/react-id-swiper.min.js",
     "src/styles/**/*"
   ],
   "scripts": {
@@ -46,17 +55,21 @@
     "swiper": ">=4.0.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.3.4",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/preset-env": "^7.3.4",
     "@babel/preset-react": "^7.0.0",
     "@types/enzyme": "^3.9.0",
     "@types/enzyme-adapter-react-16": "^1.0.5",
     "@types/jest": "^24.0.11",
+    "@types/jsdom": "^12.2.3",
     "@types/object-assign": "^4.0.30",
     "@types/react": "^16.8.7",
     "@types/react-dom": "^16.8.2",
     "@types/swiper": "^4.4.2",
     "awesome-typescript-loader": "^5.2.1",
     "babel-jest": "^24.4.0",
+    "babel-plugin-dynamic-import-node": "^2.2.0",
     "cross-env": "^5.2.0",
     "enzyme": "^3.9.0",
     "enzyme-adapter-react-16": "^1.10.0",
@@ -86,18 +99,19 @@
     "resetModules": true,
     "verbose": true,
     "browser": true,
-    "collectCoverage":true,
+    "collectCoverage": true,
     "snapshotSerializers": [
       "enzyme-to-json/serializer"
     ],
     "transform": {
-      "^.+\\.(ts|tsx)$": "ts-jest",
-      "^.+\\.(js|jsx)$": "babel-jest"
+      "^.+\\.(js|jsx)$": "babel-jest",
+      "^.+\\.(ts|tsx)$": "ts-jest"
     },
     "moduleFileExtensions": [
       "ts",
       "tsx",
-      "js"
+      "js",
+      "jsx"
     ],
     "roots": [
       "<rootDir>/src/"
@@ -106,6 +120,9 @@
       "node_modules",
       "<rootDir>/src"
     ],
+    "transformIgnorePatterns": [
+      "node_modules/(?!(swiper|dom7)/)"
+    ],
     "setupFiles": [
       "<rootDir>/src/tests/setup.ts"
     ],

diff --git a/src/ReactIdSwiper.tsx b/src/ReactIdSwiper.tsx
@@ -7,10 +7,10 @@ import React, {
   isValidElement,
   ReactElement
 } from 'react';
-import Swiper from 'swiper';
+import { Swiper } from 'swiper/dist/js/swiper.esm';
 import objectAssign from 'object-assign';
 import { ReactIdSwiperProps, SwiperInstance } from './types';
-import { classNames, validateChildren, isReactElement } from './utils';
+import { classNames, validateChildren, isReactElement, isModuleAvailable } from './utils';
 
 const ReactIdSwiper: FunctionComponent<ReactIdSwiperProps> = props => {
   const swiperRef = createRef<HTMLDivElement>();
@@ -38,10 +38,15 @@ const ReactIdSwiper: FunctionComponent<ReactIdSwiperProps> = props => {
     rtl,
     scrollbar,
     shouldSwiperUpdate,
-    slideClass
+    slideClass,
+    loop,
+    modules = []
   } = props;
 
-  // No render if wrapper elements are not provided
+  // Initialize modules to use with swiper;
+  Swiper.use(modules);
+
+  // No render if wrapper elements are not provided or when modules is empty
   if (!children || !ContainerEl || !WrapperEl) {
     return null;
   }
@@ -58,8 +63,9 @@ const ReactIdSwiper: FunctionComponent<ReactIdSwiperProps> = props => {
       return null;
     }
 
-    let activeSlideId = null;
-    let id = 0;
+    let activeSlideId = 0;
+    // In loop mode first slide index should be 1
+    let id = loop ? 1 : 0;
 
     Children.forEach(children, child => {
       if (isValidElement(child)) {
@@ -88,14 +94,18 @@ const ReactIdSwiper: FunctionComponent<ReactIdSwiperProps> = props => {
     }
   };
 
-  // Rebuild swiper
-  const rebuildSwiper = () => {
+  // Destroy swiper
+  const destroySwiper = () => {
     if (swiper !== null) {
       swiper.destroy(true, true);
       swiper = null;
       getSwiperInstance(swiper);
     }
+  };
 
+  // Rebuild swiper
+  const rebuildSwiper = () => {
+    destroySwiper();
     buildSwiper();
   };
 
@@ -135,13 +145,7 @@ const ReactIdSwiper: FunctionComponent<ReactIdSwiperProps> = props => {
       swiper.slideTo(slideToIndex);
     }
 
-    return () => {
-      if (swiper !== null) {
-        swiper.destroy(true, true);
-      }
-
-      swiper = null;
-    };
+    return () => destroySwiper();
   }, []);
 
   // Execute each time when props are updated
@@ -168,14 +172,24 @@ const ReactIdSwiper: FunctionComponent<ReactIdSwiperProps> = props => {
     }
   });
 
+  // Check modules are loaded before rendering contents
+  const shouldRenderParallax = isModuleAvailable(modules, 'parallax') && parallax && parallaxEl;
+  const shouldRenderPagination =
+    isModuleAvailable(modules, 'pagination') && pagination && pagination.el;
+  const shouldRenderScrollbar =
+    isModuleAvailable(modules, 'scrollbar') && scrollbar && scrollbar.el;
+  const isNavigationModuleAvailable = isModuleAvailable(modules, 'navigation');
+  const shouldRenderNextButton = isNavigationModuleAvailable && navigation && navigation.nextEl;
+  const shouldRenderPrevButton = isNavigationModuleAvailable && navigation && navigation.prevEl;
+
   return (
     <ContainerEl className={containerClass} dir={rtl && 'rtl'} ref={swiperRef}>
-      {parallax && parallaxEl && renderParallax && renderParallax(props)}
+      {shouldRenderParallax && renderParallax && renderParallax(props)}
       <WrapperEl className={wrapperClass}>{Children.map(children, renderContent)}</WrapperEl>
-      {pagination && pagination.el && renderPagination && renderPagination(props)}
-      {scrollbar && scrollbar.el && renderScrollbar && renderScrollbar(props)}
-      {navigation && navigation.nextEl && renderNextButton && renderNextButton(props)}
-      {navigation && navigation.prevEl && renderPrevButton && renderPrevButton(props)}
+      {shouldRenderPagination && renderPagination && renderPagination(props)}
+      {shouldRenderScrollbar && renderScrollbar && renderScrollbar(props)}
+      {shouldRenderNextButton && renderNextButton && renderNextButton(props)}
+      {shouldRenderPrevButton && renderPrevButton && renderPrevButton(props)}
     </ContainerEl>
   );
 };
@@ -198,7 +212,8 @@ ReactIdSwiper.defaultProps = {
   renderParallax: ({ parallaxEl }) =>
     parallaxEl ? (
       <div className={classNames(parallaxEl.el)} data-swiper-parallax={parallaxEl.value} />
-    ) : null
+    ) : null,
+  modules: []
 };
 
 export default ReactIdSwiper;