feat(core): Allow to type _ctx

BREAKING CHANGE: GondelBaseComponent constructor requires a ctx and a componentName argument
merkle-open · Sep 25, 2018 · 0ee58fe · 0ee58fe
1 parent 0d8485d
commit 0ee58fe
Show file tree

Hide file tree

Showing 22 changed files with 53 additions and 36 deletions.
diff --git a/examples/typescript/src/components/input.ts b/examples/typescript/src/components/input.ts
@@ -1,9 +1,7 @@
 import { Component, EventListener, GondelBaseComponent, triggerPublicEvent } from "@gondel/core";
 
 @Component("Input")
-export class Input extends GondelBaseComponent {
-  _ctx: HTMLInputElement;
-
+export class Input extends GondelBaseComponent<HTMLInputElement> {
   @EventListener("input")
   _handleInput() {
     triggerPublicEvent("gInput", this);

diff --git a/packages/core/dist/GondelComponent.d.ts b/packages/core/dist/GondelComponent.d.ts
@@ -1,19 +1,20 @@
 export declare type IGondelComponent = new (context: HTMLElement, componentName: string) => GondelComponent;
 export declare type StartMethod = ((resolve: Function, reject?: Function) => void) | (() => Promise<any>) | (() => void);
-export interface GondelComponent {
-    _ctx: HTMLElement;
+export interface GondelComponent<TElement = HTMLElement> {
+    _ctx: TElement;
     _namespace: string;
     _componentName: string;
     _stopped: boolean;
     start?: StartMethod;
     stop?(): void;
     sync?(): void;
 }
-export declare class GondelBaseComponent implements GondelComponent {
+export declare class GondelBaseComponent<TElement = HTMLElement> implements GondelComponent<TElement> {
+    constructor(domNode: TElement, componentName: string);
     /**
      * The component context
      */
-    _ctx: HTMLElement;
+    _ctx: TElement;
     /**
      * The namespace e.g. 'g'
      */

diff --git a/packages/core/dist/GondelComponent.js b/packages/core/dist/GondelComponent.js
diff --git a/packages/core/dist/GondelComponent.js.map b/packages/core/dist/GondelComponent.js.map
diff --git a/packages/core/dist/GondelComponentStarter.d.ts b/packages/core/dist/GondelComponentStarter.d.ts
@@ -16,7 +16,7 @@ export declare function attachGondelBootingFlag(domNode: HTMLElement, bootingFla
 /**
  * Constructs a new component
  */
-export declare function constructComponent(domNode: HTMLElement, gondelComponentRegistry: GondelComponentRegistry, namespace: string): GondelComponent;
+export declare function constructComponent(domNode: HTMLElement, gondelComponentRegistry: GondelComponentRegistry, namespace: string): GondelComponent<HTMLElement>;
 /**
  * Start a component after it was constructed
  */

diff --git a/packages/core/dist/GondelDecorators.d.ts b/packages/core/dist/GondelDecorators.d.ts
@@ -5,4 +5,4 @@ export declare function Component(componentName: string, namespace?: string): (c
  */
 export declare function EventListener(eventName: string, selector?: string | object): <T extends {
     __events?: [string, string, string | object | undefined][] | undefined;
-} & GondelComponent>(target: T, handler: string) => void;
+} & GondelComponent<HTMLElement>>(target: T, handler: string) => void;
diff --git a/packages/core/dist/gondel.es5.js b/packages/core/dist/gondel.es5.js
diff --git a/packages/core/dist/gondel.es5.js.map b/packages/core/dist/gondel.es5.js.map
diff --git a/packages/core/dist/gondel.es5.min.js b/packages/core/dist/gondel.es5.min.js
diff --git a/packages/core/dist/gondel.es5.min.js.map b/packages/core/dist/gondel.es5.min.js.map
diff --git a/packages/core/src/GondelComponent.ts b/packages/core/src/GondelComponent.ts
@@ -8,9 +8,9 @@ export type StartMethod =
   // Sync boot
   | (() => void);
 
-export interface GondelComponent {
+export interface GondelComponent<TElement = HTMLElement> {
   // The component context
-  _ctx: HTMLElement;
+  _ctx: TElement;
   // The namespace e.g. 'g'
   _namespace: string;
   // The componentname e.g. 'Input'
@@ -25,11 +25,12 @@ export interface GondelComponent {
   sync?(): void;
 }
 
-export class GondelBaseComponent implements GondelComponent {
+export class GondelBaseComponent<TElement = HTMLElement> implements GondelComponent<TElement> {
+  constructor(domNode: TElement, componentName: string) {}
   /**
    * The component context
    */
-  _ctx: HTMLElement;
+  _ctx: TElement;
   /**
    * The namespace e.g. 'g'
    */

diff --git a/packages/core/src/GondelComponentStarter.test.ts b/packages/core/src/GondelComponentStarter.test.ts
@@ -31,8 +31,8 @@ describe("GondelComponentStarter", () => {
       @Component("Button")
       class Button extends GondelBaseComponent {
         _wasConstructed: boolean;
-        constructor() {
-          super();
+        constructor(ctx: HTMLElement, componentName: string) {
+          super(ctx, componentName);
           this._wasConstructed = true;
         }
       }

diff --git a/packages/plugins/jquery/dist/index.d.ts b/packages/plugins/jquery/dist/index.d.ts
@@ -28,6 +28,7 @@ class MyComponent extends GondelJqueryComponent {
 }
    ```
  */
-export declare const GondelJqueryComponent: new (context: HTMLElement, componentName: string) => GondelBaseComponent & {
-    $ctx: JQuery<HTMLElement>;
-};
+export declare class GondelJqueryComponent<TElement = HTMLElement> extends GondelBaseComponent<TElement> {
+    $ctx: JQuery<TElement>;
+    constructor(ctx: TElement, componentName: string);
+}