refactor(component): Adds Component suffix & removes output defs

BREAKING CHANGE: `HotTable` was renamed to `HotTableComponentComponent`

README.md

@@ -54,7 +54,7 @@ export class MyModule {
 
 The free version of Handsontable is used by default, but the pro-version could be used as a drop-in replacement.
 
-6. The following methods are available as a public API on HotTable component (which you can access from your parent component with `@ViewChild(HotTable) hotTableComponent`):
+6. The following methods are available as a public API on HotTableComponent (which you can access from your parent component with `@ViewChild(HotTableComponent) hotTableComponent`):
 - `getHandsontableInstance(): Handsontable` - returns the underlying [Handsontable Core instance](https://docs.handsontable.com/Core.html); all registered Handsontable plugins are accessible via [instance.getPlugin()](https://docs.handsontable.com/pro/1.11.0/Core.html#getPlugin)
 
 7. See the [demo](http://valor-software.github.io/ng2-handsontable/) and the [demo sources](https://github.com/valor-software/ng2-handsontable/tree/master/demo/src) for further details.

demo/src/handsontable.component.spec.ts

@@ -1,17 +1,17 @@
 /* tslint:disable:no-any no-magic-numbers no-consecutive-blank-lines max-file-line-count */
 import { async, TestBed, ComponentFixture } from '@angular/core/testing';
-import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
-// tslint:disable-next-line:import-blacklist
+import { Component, NO_ERRORS_SCHEMA, EventEmitter } from '@angular/core';
 import * as _ from 'lodash';
-import { htEventNames } from '../../src/handsontable.component';
-import { BasicDemoComponent } from './components/handsontable/basic-demo';
 import { HotTableModule } from '../../src/handsontable.module';
+import { HotTableComponent } from '../../src/handsontable.component';
+import { BasicDemoComponent } from './components/handsontable/basic-demo';
 import { AdvancedDemoComponent } from './components/handsontable/advanced-demo';
 import { SheetDemoComponent } from './components/handsontable/sheet-demo';
 import { FinanceDemoComponent } from './components/handsontable/finance-demo';
 import { ScienceDemoComponent } from './components/handsontable/science-demo';
 import { SportDemoComponent } from './components/handsontable/sport-demo';
 import { DemoModule } from './demo.module';
+import * as Handsontable from 'handsontable';
 
 
 @Component({template: ''})
@@ -20,11 +20,7 @@ class TestComponent {}
 let fixture: ComponentFixture<TestComponent>;
 
 
-describe('HotTable', () => {
-
-  // beforeEach(() => {
-  //   jasmine.DEFAULT_TIMEOUT_INTERVAL = 30000;
-  // });
+describe('HotTableComponent', () => {
 
   afterEach(() => {
     fixture.destroy();
@@ -251,24 +247,21 @@ function compileTestComponent(template: string, properties?: object) {
     });
 }
 
-function buildTestComponentFromProperties(properties: object) {
+function buildTestComponentFromProperties(inputsAndOutputs: object) {
+  const component = new HotTableComponent(null, null);
   // Build template
   const inputs = ['data', 'pagedData', 'colHeaders', 'columns', 'colWidths', 'options'];
-  const outputs = htEventNames;
   let template = '<hotTable ';
-  for (const input of inputs) {
-    if (input in properties) {
-      template += `[${input}]="${input}"`;
+  _.forOwn(inputsAndOutputs, (value, key) => {
+    if (component[key] instanceof EventEmitter) {
+      template += `(${key})="${key}"`;
+    } else {
+      template += `[${key}]="${key}"`;
     }
-  }
-  for (const ouput of outputs) {
-    if (ouput in properties) {
-      template += `(${ouput})="${ouput}"`;
-    }
-  }
+  });
   template += '><hotTable>';
 
-  return compileTestComponent(template, properties);
+  return compileTestComponent(template, inputsAndOutputs);
 }
 
 /* Retrieve main Handsontable <table> element in component element */

package.json

@@ -24,6 +24,7 @@
     "test": "ng test -sr",
     "test-cross": "SAUCE=true ng test -sr",
     "test-coverage": "ng test -sr -cc",
+    "test-watch": "npm run pretest && ng test -w",
     "postversion": "run-s changelog git-add git-commit-changelog",
     "git-add": "git add -A",
     "git-commit-changelog": "git commit -am \"chore(changelog): update\"",

src/handsontable.component.ts

@@ -6,18 +6,16 @@ import { Observable } from 'rxjs/Observable';
 import { Subscription } from 'rxjs/Subscription';
 import * as Handsontable from 'handsontable';
 import { handsontableStyles } from './handsontable.component.css';
+import * as _ from 'lodash';
 
-// tslint:disable-next-line:max-line-length
-export const htEventNames: string[] = ['afterAddChild', 'afterBeginEditing', 'afterCellMetaReset', 'afterChange', 'afterChangesObserved', 'afterColumnMove', 'afterColumnResize', 'afterColumnSort', 'afterContextMenuDefaultOptions', 'afterContextMenuHide', 'afterContextMenuShow', 'afterCopy', 'afterCopyLimit', 'afterCreateCol', 'afterCreateRow', 'afterCut', 'afterDeselect', 'afterDestroy', 'afterDetachChild', 'afterDocumentKeyDown', 'afterDropdownMenuDefaultOptions', 'afterDropdownMenuHide', 'afterDropdownMenuShow', 'afterePaste', 'afterFilter', 'afterGetCellMeta', 'afterGetColHeader', 'afterGetColumnHeaderRenderers', 'afterGetRowHeader', 'afterGetRowHeaderRenderers', 'afterInit', 'afterLoadData', 'afterModifyTransformEnd', 'afterModifyTransformStart', 'afterMomentumScroll', 'afterOnCellCornerDblClick', 'afterOnCellCornerMouseDown', 'afterOnCellMouseDown', 'afterOnCellMouseOver', 'afterPluginsInitialized', 'afterRedo', 'afterRemoveCol', 'afterRemoveRow', 'afterRender', 'afterRenderer', 'afterRowMove', 'afterRowResize', 'afterScrollHorizontally', 'afterScrollVertically', 'afterSelection', 'afterSelectionByProp', 'afterSelectionEnd', 'afterSelectionEndByProp', 'afterSetCellMeta', 'afterSetDataAtCell', 'afterSetDataAtRowProp', 'afterTrimRow', 'afterUndo', 'afterUntrimRow', 'afterUpdateSettings', 'afterValidate', 'afterViewportColumnCalculatorOverride', 'afterViewportRowCalculatorOverride', 'beforeAddChild', 'beforeAutofill', 'beforeAutofillInsidePopulate', 'beforeCellAlignment', 'beforeChange', 'beforeChangeRender', 'beforeColumnMove', 'beforeColumnResize', 'beforeColumnSort', 'beforeContextMenuSetItems', 'beforeCopy', 'beforeCreateCol', 'beforeCreateRow', 'beforeCut', 'beforeDetachChild', 'beforeDrawBorders', 'beforeDropdownMenuSetItems', 'beforeFilter', 'beforeGetCellMeta', 'beforeInit', 'beforeInitWalkontable', 'beforeKeyDown', 'beforeOnCellMouseDown', 'beforeOnCellMouseOut', 'beforeOnCellMouseOver', 'beforePaste', 'beforeRedo', 'beforeRemoveCol', 'beforeRemoveRow', 'beforeRender', 'beforeRenderer', 'beforeRowMove', 'beforeRowResize', 'beforeSetRangeEnd', 'beforeSetRangeStart', 'beforeStretchingColumnWidth', 'beforeTouchScroll', 'beforeUndo', 'beforeValidate', 'beforeValueRender', 'construct', 'hiddenColumn', 'hiddenRow', 'init', 'manualRowHeights', 'modifyAutofillRange', 'modifyCol', 'modifyColHeader', 'modifyColumnHeaderHeight', 'modifyColWidth', 'modifyCopyableRange', 'modifyData', 'modifyRow', 'modifyRowHeader', 'modifyRowHeaderWidth', 'modifyRowHeight', 'modifyRowSourceData', 'modifyTransformEnd', 'modifyTransformStart', 'persistentStateLoad', 'persistentStateReset', 'persistentStateSave', 'skipLengthCache', 'unmodifyCol', 'unmodifyRow'];
 
 @Component({
   selector: 'hotTable',
   template: '',
   encapsulation: ViewEncapsulation.None,
   styles: [handsontableStyles]
 })
-// tslint:disable-next-line:component-class-suffix
-export class HotTable implements OnInit, OnDestroy, OnChanges {
+export class HotTableComponent implements OnInit, OnDestroy, OnChanges {
   @Input() public data: any[] = [];
   @Input() public pagedData: Observable<any[]>;
   @Input() public colHeaders: string[];
@@ -161,10 +159,6 @@ export class HotTable implements OnInit, OnDestroy, OnChanges {
   private zoneQueueTimeout = 0;
 
   constructor(private element: ElementRef, private ngZone: NgZone) {
-    // fill events dynamically
-    htEventNames.forEach((eventName: string) => {
-      (this as any)[eventName] = new EventEmitter();
-    });
   }
 
   public getHandsontableInstance(): Handsontable {
@@ -274,23 +268,25 @@ export class HotTable implements OnInit, OnDestroy, OnChanges {
       data: this.data || null
     };
 
-    htEventNames.forEach(eventName => {
-      // Only register the event if the emitter has an observer (i.e., if the output is actually being used)
-      if ((this as any)[eventName].observers.length) {
-        htOptions[eventName] = (...args: any[]) => {
-          let data: any[] = [];
-          // Handsontable event handlers are always called with 6 arguments. Cut off any trailing undefined values.
-          for (let index = args.length; index >= 0; index--) {
-            if (args[index] !== void 0) {
-              data = args.slice(0, index + 1);
-              break;
+    _.forOwn(this, (output, key) => {
+      if (output instanceof EventEmitter) {
+        // Only register the event if the emitter has an observer (i.e., if the output is actually being used)
+        if (output.observers.length) {
+          htOptions[key] = (...args: any[]) => {
+            let data: any[] = [];
+            // Handsontable event handlers are always called with 6 arguments. Cut off any trailing undefined values.
+            for (let index = args.length; index >= 0; index--) {
+              if (args[index] !== void 0) {
+                data = args.slice(0, index + 1);
+                break;
+              }
             }
-          }
-          // Queue all emissions to only cause 1 Zone.run() call per tick.
-          this.queueForRunningInZone(() => {
-            (this as any)[eventName].emit(data);
-          });
-        };
+            // Queue all emissions to only cause 1 Zone.run() call per tick.
+            this.queueForRunningInZone(() => {
+              output.emit(data);
+            });
+          };
+        }
       }
     });
 

src/handsontable.module.ts

@@ -1,12 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { HotTable } from './handsontable.component';
+import { HotTableComponent } from './handsontable.component';
 
 @NgModule({
   imports: [CommonModule],
-  declarations: [HotTable],
-  exports: [HotTable]
+  declarations: [HotTableComponent],
+  exports: [HotTableComponent]
 })
 export class HotTableModule {
 }

src/index.ts

@@ -1,2 +1,2 @@
-export { HotTable } from './handsontable.component';
+export { HotTableComponent } from './handsontable.component';
 export { HotTableModule } from './handsontable.module';

tslint.json

@@ -8,6 +8,7 @@
     "only-arrow-functions": false,
     "no-access-missing-member": false,
     "directive-selector": false,
-    "component-selector": false
+    "component-selector": false,
+    "import-blacklist": [true, "rxjs", "rxjs/Rx"]
   }
 }