improve(components): better way to register components

examples/src/index.html

@@ -23,7 +23,7 @@
       <!-- Additional required wrapper -->
       <div class="virchual__frame" style="height: 100%">
         <div class="virchual__slide">
-          <picture data-id="0"
+          <picture
             ><source
               type="image/webp"
               srcset="

examples/src/index.ts

@@ -1,9 +1,7 @@
 import './../../dist/index.css';
 
-import { Virchual } from './../../src/virchual';
-import { Controls } from './../../src/components';
+import { Virchual, Controls } from './../../src/index';
 
-console.log(Virchual, Controls);
 [].forEach.call(document.querySelectorAll('.image-swiper'), (slider: HTMLElement) => {
   const instance = new Virchual(slider, {
     slides: () => {
@@ -12,7 +10,7 @@ console.log(Virchual, Controls);
       // add 9 more slides to a total of 10
       for (let i = 1; i < 10; i++) {
         slides.push(`
-          <picture data-id="${i}">
+          <picture>
             <source
               type="image/webp"
               srcset="
@@ -34,5 +32,7 @@ console.log(Virchual, Controls);
     },
   });
 
-  instance.mount([Controls]);
+  instance.register(Controls, { isEnabled: true });
+
+  instance.mount();
 });

src/components/component.ts

@@ -6,10 +6,6 @@ export type ComponentDependencies = {
   eventBus: Event;
 };
 
-export interface ComponentConstructor {
-  new (dependencies: ComponentDependencies): Component;
-}
-
-export interface Component {
-  mount(): void;
+export interface ComponentConstructor<T, U> {
+  new (imports: ComponentDependencies, settings: U): T;
 }

src/components/controls/controls.ts

@@ -1,23 +1,25 @@
-import { Component, ComponentDependencies } from './../component';
 import { identity } from '../../types';
 import { stop } from '../../utils/event';
+import { ComponentDependencies } from './../component';
 
-export class Controls implements Component {
+export class Controls {
   private controls: HTMLButtonElement[];
   private onClickBound: () => identity;
 
-  constructor(private dependencies: ComponentDependencies) {
-    this.controls = [].slice.call(dependencies.virchual.container.querySelectorAll('.virchual__control'));
+  constructor(private imports: ComponentDependencies, private settings?: { isEnabled?: boolean }) {
+    this.controls = [].slice.call(imports.virchual.container.querySelectorAll('.virchual__control'));
 
-    dependencies.eventBus.on('destroy', () => {
+    imports.eventBus.on('destroy', () => {
       console.log('controls component destroy');
     });
 
     this.onClickBound = this.onClick.bind(this);
+
+    this.mount();
   }
 
   mount(): void {
-    this.controls.forEach(button => this.dependencies.eventBus.on('click', this.onClickBound, button));
+    this.controls.forEach(button => this.imports.eventBus.on('click', this.onClickBound, button));
   }
 
   private onClick(event: MouseEvent) {
@@ -27,11 +29,11 @@ export class Controls implements Component {
     const control = button.dataset.controls as 'prev' | 'next';
 
     if (control === 'prev') {
-      this.dependencies.virchual.prev();
+      this.imports.virchual.prev();
 
       return;
     }
 
-    this.dependencies.virchual.next();
+    this.imports.virchual.next();
   }
 }

src/index.ts

@@ -1,9 +1,6 @@
-import { Controls } from './components/controls/controls';
-import { Virchual } from './virchual';
-
-export { Virchual, Controls };
+export { Controls } from './components/controls/controls';
+export { Virchual } from './virchual';
 
 // For CommonJS default export support
-module.exports = { Virchual, Controls };
-module.exports.default = Virchual;
-module.exports.__esModule = true;
+// exports = { Virchual, Controls };
+// exports.__esModule = true;

src/virchual.ts

@@ -1,3 +1,4 @@
+import { Component, ComponentDependencies } from './../dist/src/components/component.d';
 import { ComponentConstructor } from './components/component';
 import './css/styles.css';
 import { Drag } from './drag';
@@ -28,6 +29,7 @@ export class Virchual {
   private eventBus: Event;
   private isBusy = false;
   private pagination: Pagination;
+  private components: [];
 
   private eventBindings: {
     onClick: () => identity;
@@ -81,15 +83,25 @@ export class Virchual {
     this.pagination.render();
   }
 
+  /**
+   * Register component class.
+   *
+   * @param cls Component class.
+   * @param settings Optional settings.
+   */
+  register<T, U>(cls: ComponentConstructor<T, U>, settings?: U) {
+    new cls({ virchual: this, eventBus: this.eventBus }, settings);
+  }
+
   /**
    * Mount components.
    */
-  mount(components: Array<ComponentConstructor> = []) {
-    console.debug('[Mount] Virchual', components);
+  mount() {
+    console.debug('[Mount] Virchual');
 
-    components.forEach(component => {
-      new component({ virchual: this, eventBus: this.eventBus }).mount();
-    });
+    // components.forEach(component => {
+    //   // new component({ virchual: this, eventBus: this.eventBus }).mount();
+    // });
 
     this.eventBus.emit('mounted');