refactor(everything) Remove jsdoc types, add TS typings

README.md

@@ -1,7 +1,182 @@
-# Virtual Swiper
+<!--
+*** Thanks for checking out this README Template. If you have a suggestion that would
+*** make this better, please fork the repo and create a pull request or simply open
+*** an issue with the tag "enhancement".
+*** Thanks again! Now go create something AMAZING! :D
+***
+***
+***
+*** To avoid retyping too much info. Do a search and replace for the following:
+*** github_username, repo, twitter_handle, email
+-->
 
-This typescript swiper aims to provide a high-performance swiper carousel best used when multiple instances on a page are necessary (e.g. list of cards where each card has a swiper gallery - Airbnb, Hometogo,...).
+<!-- PROJECT SHIELDS -->
+<!--
+*** I'm using markdown "reference style" links for readability.
+*** Reference links are enclosed in brackets [ ] instead of parentheses ( ).
+*** See the bottom of this document for the declaration of the reference variables
+*** for contributors-url, forks-url, etc. This is an optional, concise syntax you may use.
+*** https://www.markdownguide.org/basic-syntax/#reference-style-links
+-->
+
+[![Contributors][contributors-shield]][contributors-url]
+[![Forks][forks-shield]][forks-url]
+[![Stargazers][stars-shield]][stars-url]
+[![Issues][issues-shield]][issues-url]
+[![MIT License][license-shield]][license-url]
+[![LinkedIn][linkedin-shield]][linkedin-url]
+
+<!-- PROJECT LOGO -->
+<br />
+<p align="center">
+  <a href="https://github.com/github_username/repo">
+    <img src="images/logo.png" alt="Logo" width="80" height="80">
+  </a>
+
+  <h3 align="center">Virtual Swiper</h3>
+
+  <p align="center">
+    YOUR_SHORT_DESCRIPTION
+    <br />
+    <a href="https://github.com/github_username/repo"><strong>Explore the docs »</strong></a>
+    <br />
+    <br />
+    <a href="https://github.com/github_username/repo">View Demo</a>
+    ·
+    <a href="https://github.com/github_username/repo/issues">Report Bug</a>
+    ·
+    <a href="https://github.com/github_username/repo/issues">Request Feature</a>
+  </p>
+</p>
+
+<!-- TABLE OF CONTENTS -->
+
+## Table of Contents
+
+- [About the Project](#about-the-project)
+  - [Built With](#built-with)
+- [Getting Started](#getting-started)
+  - [Prerequisites](#prerequisites)
+  - [Installation](#installation)
+- [Usage](#usage)
+- [Roadmap](#roadmap)
+- [Contributing](#contributing)
+- [License](#license)
+- [Contact](#contact)
+- [Acknowledgements](#acknowledgements)
+
+<!-- ABOUT THE PROJECT -->
+
+## About The Project
+
+[![Product Name Screen Shot][product-screenshot]](https://example.com)
+
+This swiper library written in TypeScript aims to provide a high-performance swiper carousel best used when multiple instances on a page are necessary (e.g. list of cards where each card has a swiper gallery - Airbnb, Hometogo,...).
 
 To achieve this goal, this swiper carousel uses virtual slides to only render those slides which are really necessary.
 
+**To avoid retyping too much info. Do a search and replace with your text editor for the following:**
+`github_username`, `repo`, `twitter_handle`, `email`
+
+### Built With
+
+- []()
+- []()
+- []()
+
+<!-- GETTING STARTED -->
+
+## Getting Started
+
+To get a local copy up and running follow these simple steps.
+
+### Prerequisites
+
+This is an example of how to list things you need to use the software and how to install them.
+
+- npm
+
+```sh
+npm install virtual-swiper
+```
+
+### Installation
+
+1. Clone the repo
+
+```sh
+git clone https://github.com/github_username/repo.git
+```
+
+2. Install NPM packages
+
+```sh
+npm install
+```
+
+<!-- USAGE EXAMPLES -->
+
+## Usage
+
+Use this space to show useful examples of how a project can be used. Additional screenshots, code examples and demos work well in this space. You may also link to more resources.
+
+_For more examples, please refer to the [Documentation](https://example.com)_
+
+<!-- ROADMAP -->
+
+## Roadmap
+
+See the [open issues](https://github.com/github_username/repo/issues) for a list of proposed features (and known issues).
+
+<!-- CONTRIBUTING -->
+
+## Contributing
+
+Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.
+
+1. Fork the Project
+2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
+3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
+4. Push to the Branch (`git push origin feature/AmazingFeature`)
+5. Open a Pull Request
+
+<!-- LICENSE -->
+
+## License
+
+Distributed under the MIT License. See `LICENSE` for more information.
+
+<!-- CONTACT -->
+
+## Contact
+
+Your Name - [@twitter_handle](https://twitter.com/twitter_handle) - email
+
+Project Link: [https://github.com/github_username/repo](https://github.com/github_username/repo)
+
+<!-- ACKNOWLEDGEMENTS -->
+
+## Acknowledgements
+
 Huge credits to https://github.com/Splidejs/splide by NaotoshiFujita. Great slider and very well implemented!
+
+- []()
+- []()
+- []()
+
+<!-- MARKDOWN LINKS & IMAGES -->
+<!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->
+
+[contributors-shield]: https://img.shields.io/github/contributors/othneildrew/Best-README-Template.svg?style=flat-square
+[contributors-url]: https://github.com/othneildrew/Best-README-Template/graphs/contributors
+[forks-shield]: https://img.shields.io/github/forks/othneildrew/Best-README-Template.svg?style=flat-square
+[forks-url]: https://github.com/othneildrew/Best-README-Template/network/members
+[stars-shield]: https://img.shields.io/github/stars/othneildrew/Best-README-Template.svg?style=flat-square
+[stars-url]: https://github.com/othneildrew/Best-README-Template/stargazers
+[issues-shield]: https://img.shields.io/github/issues/othneildrew/Best-README-Template.svg?style=flat-square
+[issues-url]: https://github.com/othneildrew/Best-README-Template/issues
+[license-shield]: https://img.shields.io/github/license/othneildrew/Best-README-Template.svg?style=flat-square
+[license-url]: https://github.com/othneildrew/Best-README-Template/blob/master/LICENSE.txt
+[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=flat-square&logo=linkedin&colorB=555
+[linkedin-url]: https://linkedin.com/in/othneildrew
+[product-screenshot]: images/screenshot.png

examples/index.html

@@ -23,8 +23,6 @@
           <div class="vswiper-slide" data-key="1"><span>Slide 2</span></div>
         </div>
       </div>
-      <!-- If we need pagination -->
-      <div class="vswiper-pagination"></div>
 
       <!-- If we need navigation buttons -->
       <div class="vswiper-button-prev"></div>
@@ -41,8 +39,6 @@
           <div class="vswiper-slide" data-key="1"><span>Slide 2</span></div>
         </div>
       </div>
-      <!-- If we need pagination -->
-      <div class="vswiper-pagination"></div>
 
       <!-- If we need navigation buttons -->
       <div class="vswiper-button-prev"></div>

src/components/clone/clone.component.ts

@@ -1,8 +1,7 @@
-import { addClass, append, before, remove, removeAttribute, domify } from '../../utils/dom';
+import { addClass, append, before, domify, remove, removeAttribute } from '../../utils/dom';
 import TrackComponent from '../track/track.component';
 import VirtualComponent from '../virtual/virtual.component';
 import { LOOP } from './../../constants/types';
-import { Event } from './../../core/event';
 import VirtualSwiper, { VirtualSwiperComponents, VirtualSwiperOptions } from './../../virtual-swiper';
 import { BaseComponent } from './../base-component';
 import { SlideComponent } from './../virtual/slide.component';
@@ -52,36 +51,36 @@ export default class CloneComponent implements BaseComponent {
   /**
    * Return all clones.
    *
-   * @return {Element[]} - Cloned elements.
+   * @return Cloned elements.
    */
-  get clones() {
+  get clones(): SlideComponent[] {
     return [...this._clonesBefore, ...this._clonesAfter];
   }
 
   /**
    * Return clone length.
    *
-   * @return {number} - A length of clones.
+   * @return A length of clones.
    */
-  get length() {
+  get length(): number {
     return this.clones.length;
   }
 
   /**
    * Return before clone length.
    *
-   * @return {number} - A length of before clones.
+   * @return A length of before clones.
    */
-  get lengthBefore() {
+  get lengthBefore(): number {
     return this._clonesBefore.length;
   }
 
   /**
    * Return after clone length.
    *
-   * @return {number} - A length of after clones.
+   * @return A length of after clones.
    */
-  get lengthAfter() {
+  get lengthAfter(): number {
     return this._clonesAfter.length;
   }
 
@@ -140,7 +139,7 @@ export default class CloneComponent implements BaseComponent {
    *
    * @param slide - An element being duplicated.
    *
-   * @return {Node} - A cloned node(element).
+   * @return A cloned node(element).
    */
   private cloneDeeply(element: HTMLElement): HTMLElement {
     const clone = element.cloneNode(true) as HTMLElement;