improve(size) Shave of a few bytes

package.json

@@ -41,11 +41,12 @@
     "@babel/preset-typescript": "^7.10.4",
     "postcss-copy": "^7.1.0",
     "postcss-import": "^12.0.1",
+    "rollup": "^2.26.0",
     "rollup-plugin-postcss": "^3.1.5",
     "rollup-plugin-serve": "^1.0.3",
-    "typescript": "^3.9.7",
-    "rollup": "^2.26.0",
     "rollup-plugin-terser": "^7.0.0",
-    "rollup-plugin-typescript2": "^0.27.2"
+    "rollup-plugin-typescript2": "^0.27.2",
+    "rollup-plugin-visualizer": "^4.1.0",
+    "typescript": "^3.9.7"
   }
 }

rollup.config.js

@@ -5,6 +5,7 @@ import serve from 'rollup-plugin-serve';
 import postcss from 'rollup-plugin-postcss';
 import postcss_import from 'postcss-import';
 import postcss_copy from 'postcss-copy';
+import visualizer from 'rollup-plugin-visualizer';
 
 export default {
   input: 'src/virchual.ts', // our source file
@@ -26,6 +27,7 @@ export default {
   ],
   external: [...Object.keys(pkg.dependencies || {})],
   plugins: [
+    visualizer(),
     typescript({
       typescript: require('typescript'),
     }),

src/components/clone/clone.component.ts

@@ -1,4 +1,4 @@
-import { addClass, append, before, domify, remove, removeAttribute } from '../../utils/dom';
+import { addClass, append, before, domify, remove } from '../../utils/dom';
 import TrackComponent from '../track/track.component';
 import VirtualComponent from '../virtual/virtual.component';
 import { LOOP } from './../../constants/types';
@@ -146,7 +146,7 @@ export default class CloneComponent implements BaseComponent {
     addClass(clone, this.instance.classes.clone);
 
     // ID should not be duplicated.
-    removeAttribute(clone, 'id');
+    clone.removeAttribute('id');
 
     return clone as HTMLElement;
   }

src/components/drag/drag.component.ts

@@ -4,13 +4,6 @@ import TrackComponent from '../track/track.component';
 import Virchual, { VirchualComponents, VirchualOptions } from './../../virchual';
 import { BaseComponent } from './../base-component';
 
-/**
- * Adjust how much the track can be pulled on the first or last page.
- * The larger number this is, the farther the track moves.
- * This should be around 5 - 9.
- */
-const FRICTION_REDUCER = 7;
-
 export default class DragComponent implements BaseComponent {
   // Coordinate of the track on starting drag.
   private startCoord: { x: number; y: number };
@@ -22,15 +15,15 @@ export default class DragComponent implements BaseComponent {
   private currentInfo;
 
   // Determine whether slides are being dragged or not.
-  private isDragging;
+  private isDragging = false;
 
   // Whether the slider direction is vertical or not.
   private isVertical = false;
 
   // Axis for the direction.
   private axis = this.isVertical ? 'y' : 'x';
 
-  private isDisabled: boolean = false;
+  private isDisabled = false;
 
   private track: TrackComponent;
   private layout: BaseLayout;
@@ -63,23 +56,23 @@ export default class DragComponent implements BaseComponent {
   }
 
   private onMove(event: MouseEvent & TouchEvent) {
-    if (this.startInfo) {
-      this.currentInfo = this.analyze(event, this.startInfo);
+    if (!this.startInfo) {
+      return;
+    }
 
-      if (this.isDragging) {
-        if (event.cancelable) {
-          event.preventDefault();
-        }
+    this.currentInfo = this.analyze(event, this.startInfo);
+
+    if (this.isDragging) {
+      event.cancelable && event.preventDefault();
 
-        const position = this.startCoord[this.axis] + this.currentInfo.offset[this.axis];
+      const position = this.startCoord[this.axis] + this.currentInfo.offset[this.axis];
 
-        this.track.translate(this.resist(position));
-      } else {
-        if (this.shouldMove(this.currentInfo)) {
-          this.instance.emit('drag', this.startInfo);
+      this.track.translate(position);
+    } else {
+      if (this.shouldMove(this.currentInfo)) {
+        this.instance.emit('drag', this.startInfo);
 
-          this.isDragging = true;
-        }
+        this.isDragging = true;
       }
     }
   }
@@ -108,33 +101,6 @@ export default class DragComponent implements BaseComponent {
     return false;
   }
 
-  /**
-   * Resist dragging the track on the first/last page because there is no more.
-   *
-   * @param position - A position being applied to the track.
-   *
-   * @return Adjusted position.
-   */
-  private resist(position: number): number {
-    // if (!Splide.is(LOOP)) {
-    //   const sign = Track.sign;
-    //   const start = sign * Track.trim(Track.toPosition(0));
-    //   const end = sign * Track.trim(Track.toPosition(Controller.edgeIndex));
-
-    //   position *= sign;
-
-    //   if (position < start) {
-    //     position = start - FRICTION_REDUCER * Math.log(start - position);
-    //   } else if (position > end) {
-    //     position = end + FRICTION_REDUCER * Math.log(position - end);
-    //   }
-
-    //   position *= sign;
-    // }
-
-    return position;
-  }
-
   /**
    * Called when dragging ends.
    */
@@ -176,10 +142,6 @@ export default class DragComponent implements BaseComponent {
         index += sign * this.track.direction.sign;
       }
 
-      // if ( ! Splide.is( LOOP ) ) {
-      // 	index = between( index, 0, Controller.edgeIndex );
-      // }
-
       this.controller.go(index, options.isNavigation);
     }
   }

src/components/layout/index.ts

@@ -1,5 +1,5 @@
 import { applyStyle } from '../../utils/dom';
-import { throttle } from '../../utils/time';
+import { throttle } from '../../utils/throttle';
 import { unit } from '../../utils/utils';
 import Virchual, { VirchualComponents, VirchualOptions } from '../../virchual';
 import { BaseComponent } from '../base-component';

src/components/track/track.component.ts

@@ -45,6 +45,7 @@ export default class TrackComponent implements BaseComponent {
     this._track = this.instance.root.querySelector('.virchual__track');
     this._list = this.instance.root.querySelector('.virchual__list');
   }
+
   /**
    * Called after the component is mounted.
    * The resize event must be registered after the Layout's one is done.

src/components/virtual/slide.component.ts

@@ -1,4 +1,4 @@
-import { addClass, find, getAttribute, hasClass, removeClass, setAttribute } from '../../utils/dom';
+import { addClass, find, removeClass } from '../../utils/dom';
 import { values } from '../../utils/object';
 import { pad } from '../../utils/utils';
 import Virchual, { VirchualComponents, VirchualOptions } from '../../virchual';
@@ -46,7 +46,7 @@ export class SlideComponent implements BaseComponent {
   ) {
     this.container = find(this.slide, `.virchual__list`);
     this.isClone = realIndex > -1;
-    this.styles = getAttribute(this.slide, 'style') || '';
+    this.styles = this.slide.getAttribute('style') || '';
     this.statusUpdateEvents = 'ready.slide updated.slide resize.slide ' + (this.options.updateOnMove ? 'move.slide' : 'moved.slide');
   }
 
@@ -153,7 +153,7 @@ export class SlideComponent implements BaseComponent {
 
       this.instance.emit(`${type}`, this.slide);
     } else {
-      if (hasClass(this.slide, className)) {
+      if (this.slide.classList.contains(className)) {
         removeClass(this.slide, className);
 
         this.instance.emit(`${forVisibility ? 'hidden' : 'inactive'}`, this.slide);
@@ -165,6 +165,6 @@ export class SlideComponent implements BaseComponent {
    * Restore the original styles.
    */
   private restoreStyles() {
-    setAttribute(this.slide, 'style', this.styles);
+    this.slide.setAttribute('style', this.styles);
   }
 }

src/core/event.ts

@@ -20,9 +20,7 @@ export class Event {
     options: boolean | AddEventListenerOptions = {},
   ) {
     events.split(' ').forEach(event => {
-      if (element) {
-        element.addEventListener(event, handler, options);
-      }
+      element && element.addEventListener(event, handler, options);
 
       this.data.push({ event, handler, elm: element, options });
     });

src/utils/dom.ts

@@ -24,7 +24,7 @@ export function find(elm: HTMLElement | ParentNode, selector: string): HTMLEleme
  */
 export function create(tag: string, attrs: object): HTMLElement {
   const elm = document.createElement(tag);
-  each(attrs, (value, key) => setAttribute(elm, key, value));
+  each(attrs, (value, key) => elm.setAttribute(key, value));
 
   return elm;
 }
@@ -133,50 +133,3 @@ export function addClass(elm: HTMLElement, classes: string | string[]) {
 export function removeClass(elm: HTMLElement, classes: string | string[]) {
   addOrRemoveClasses(elm, classes, true);
 }
-
-/**
- * Verify if the provided element has the class or not.
- *
- * @param elm       - An element.
- * @param className - A class name.
- *
- * @return True if the element has the class or false if not.
- */
-export function hasClass(elm: HTMLElement, className: string): boolean {
-  return !!elm && elm.classList.contains(className);
-}
-
-/**
- * Set attribute to the given element.
- *
- * @param elm   - An element where an attribute is assigned.
- * @param name  - Attribute name.
- * @param value - Attribute value.
- */
-export function setAttribute(elm: HTMLElement, name: string, value: string | number | boolean) {
-  elm && elm.setAttribute(name, `${value}`);
-}
-
-/**
- * Get attribute from the given element.
- *
- * @param elm  - An element where an attribute is assigned.
- * @param name - Attribute name.
- *
- * @return The value of the given attribute if available. An empty string if not.
- */
-export function getAttribute(elm: HTMLElement, name: string): string {
-  return elm ? elm.getAttribute(name) : '';
-}
-
-/**
- * Remove attribute from the given element.
- *
- * @param elms  - An element where an attribute is removed.
- * @param names - Attribute name.
- */
-export function removeAttribute(elms: HTMLElement | HTMLElement[], names: string | string[]) {
-  toArray(names).forEach(name => {
-    toArray(elms).forEach(elm => elm && elm.removeAttribute(name));
-  });
-}

src/virchual.ts

@@ -182,6 +182,7 @@ export default class Virchual {
    */
   emit(event: string, ...args: any) {
     this.event.emit(event, ...args);
+
     return this;
   }
 
@@ -202,7 +203,7 @@ export default class Virchual {
     } catch (e) {
       error(e.message);
 
-      return null;
+      return;
     }
 
     each(this.components, component => {