Merge pull request #16 from Delete-Agency/type-script

Type script

README.md

@@ -18,28 +18,33 @@ $ npm install @deleteagency/dc
 
 ```js
 // collapsed/collapsed.js
-import {DcComponent} from  '@deleteagency/dc';
-
-export default class CollapsedComponent extends DcBaseComponent {
-    constructor(...args) {
-        super(...args);
-
-        this.button = this.refs.button;
-        this.content = this.refs.content;
-    }
-
-    onInit() {
-        console.log('CollapsedComponent was instantiate on the element', this.element)
-    }
-
-    static getNamespace() {
-        return 'collapsed'
-    }
+import { DcComponent } from  '@deleteagency/dc';
+
+class CollapsedComponent extends DcBaseComponent {
+	static namespace = 'collapsed';
+	static requiredRefs = ['button', 'content'];
+
+	init = () => {
+		console.log('CollapsedComponent was instantiated on the element', this.element);
+		console.log('Options', this.options);
+		console.log('Refs', this.refs);
+
+		this.addListener(this.refs.button, 'click', this.onClick);
+	}
+
+	onClick = () => {
+		if (this.refs.content.classList.contains('show')) {
+			this.refs.content.classList.remove('show');
+		} else {
+			this.refs.content.classList.add('show');
+		}
+	}
 }
 
 // collapsed/index.js
 import './scss/index.scss';
-import {dcFactory} from  '@deleteagency/dc';
+
+import { dcFactory } from  '@deleteagency/dc';
 import CollapsedComponent from './collapsed.js';
 dcFactory.register(CollapsedComponent);
 
@@ -63,7 +68,7 @@ Class which inherits DcBaseComponent and will be instantiated
 #### selector
 
 *Optional*<br>
-Type: `string`
+Type: `string | CallableFunction: HTMLElement[]`
 
 CSS selector which will override searching by getNamespace() and be used for searching elements of given componentClass. 
 
@@ -73,7 +78,7 @@ Starts the factory on a given root: finds and creates all registered components
 
 #### root
 
-*Required*<br>
+*Optional*<br>
 Type: `HTMLElement`
 
 #### withLazy
@@ -93,50 +98,6 @@ Destroy all previously registered components within the passed element
 *Required*<br>
 Type: `HTMLElement`
 
-### dcFactory.getChildComponents(element, componentClass)
-
-Returns `DcBaseComponent[]`
-
-Returns all components of componentClass which are contained within the passed element
-
-#### element
-
-*Required*<br>
-Type: `HTMLElement`
-
-#### componentClass
-
-*Required*<br>
-Type: `typeof DcBaseComponent`
-
-### dcFactory.getChildComponent(element, componentClass)
-
-Returns `DcBaseComponent`
-
-Returns first found component of componentClass which is contained within the passed element
-
-#### element
-
-*Required*<br>
-Type: `HTMLElement`
-
-#### componentClass
-
-*Required*<br>
-Type: `typeof DcBaseComponent`
-
-### dcFactory.debug(element)
-
-Returns `DcBaseComponent[]`
-
-NOTE: just for debugging purpose!
-Returns all components instances which were created on the given element.
-
-#### element
-
-*Optional*<br>
-Type: `HTMLElement`
-
 
 ## License
 [MIT](https://choosealicense.com/licenses/mit/)

babel.config.js

@@ -3,18 +3,15 @@ module.exports = {
         [
             '@babel/preset-env',
             {
-                useBuiltIns: 'usage',
-                corejs: 2,
-                targets: [
-                    "ie 11",
-                    "last 2 firefox versions",
-                    "last 2 edge versions",
-                    "last 2 chrome versions",
-                    "last 2 safari versions",
-                    "last 2 and_chr versions",
-                    "last 2 ios_saf versions"
-                ]
+                corejs: 3
             }
-        ]
-    ]
-};
+        ],
+        '@babel/preset-typescript',
+    ],
+    plugins: [
+        '@babel/plugin-transform-object-assign',
+        '@babel/plugin-proposal-class-properties',
+        '@babel/plugin-syntax-dynamic-import',
+        '@babel/plugin-proposal-object-rest-spread',
+    ],
+};

demo/test-async-component.js

@@ -1,5 +1,7 @@
-export default class TestAsyncComponent extends DcBaseComponent {
-    onInit() {
+export class TestAsyncComponent extends DcBaseComponent {
+    static namespace = 'test-async-component';
+
+    init() {
         this.element.innerHTML = 'Test async component was initialized';
     }
-}
+}

dist/dc-async.d.ts

@@ -0,0 +1,8 @@
+/**
+ * This function returns wrapper componentClass
+ *
+ * @param {function} importFunction
+ * @return {typeof DcBaseComponent} wrapper for component class
+ */
+export declare const dcAsync: (importFunction: CallableFunction) => any;
+//# sourceMappingURL=dc-async.d.ts.map

dist/dc-base-component.d.ts

@@ -0,0 +1,23 @@
+import { ReferencesCollection } from './dc-dom';
+/**
+ * Base component.
+ * @class
+ * @implements {DcBaseComponent}
+ */
+declare class DcBaseComponent {
+    readonly element: HTMLElement;
+    private _listenersList;
+    protected readonly options: object;
+    protected readonly refs: ReferencesCollection;
+    static namespace: string;
+    static requiredRefs: string[];
+    constructor(element: HTMLElement, namespace: string, requiredRefs: string[]);
+    private _checkRequiredRefs;
+    init(): void;
+    protected readonly addListener: (elem: HTMLElement, eventName: string, eventCallback: CallableFunction) => void;
+    private _removeAllListeners;
+    readonly destroy: () => void;
+    protected onDestroy(): void;
+}
+export { DcBaseComponent };
+//# sourceMappingURL=dc-base-component.d.ts.map

dist/dc-dom.d.ts

@@ -0,0 +1,40 @@
+declare const matches: (root: HTMLElement, selector: string) => boolean;
+/**
+ *
+ * @param {HTMLElement} element
+ * @param {string} selector
+ * @return {HTMLElement[]}
+ */
+declare const scopedQuerySelectorAll: (element: HTMLElement, selector: string) => HTMLElement[];
+/**
+ * @param {HTMLElement} root!
+ * @param {string} namespace
+ * @param {?string|Function} selector
+ * @return {Array}
+ * @throws Error
+ */
+declare const findElementsForInit: (root: HTMLElement, namespace: string, selector?: string | Function | undefined) => HTMLElement[];
+/**
+ * @param {HTMLElement} element
+ * @return {boolean}
+ */
+declare const isElementWithinLazyParent: (element: HTMLElement) => boolean;
+/**
+ * @param {HTMLElement} element
+ * @param {string} namespace
+ * @return {ReferencesCollection}
+ */
+interface ReferencesCollection {
+    [key: string]: HTMLElement | HTMLElement[] | {
+        [_key: string]: HTMLElement;
+    };
+}
+declare const getElementRefs: (element: HTMLElement, namespace: string) => ReferencesCollection;
+/**
+ * @param {HTMLElement} element
+ * @param {string} namespace
+ * @return {?Object}
+ */
+declare const getElementOptions: (element: HTMLElement, namespace: string) => {};
+export { ReferencesCollection, scopedQuerySelectorAll, getElementRefs, findElementsForInit, isElementWithinLazyParent, matches, getElementOptions, };
+//# sourceMappingURL=dc-dom.d.ts.map

dist/dc-factory.d.ts

@@ -0,0 +1,30 @@
+import { DcBaseComponent } from 'src/dc-base-component';
+declare class DcFactory {
+    private _registeredComponents;
+    /**
+     *
+     * @param {typeof DcBaseComponent} ComponentClass
+     * @param {Function|string} selector that indicates how we should search that component elements
+     */
+    register(ComponentClass: typeof DcBaseComponent, selector?: string | Function | undefined): void;
+    /**
+     * Starts the factory on a given root: finds and creates all registered components within the root
+     * @param {HTMLElement} root
+     * @param {boolean} withLazy - Whether or not initialize component which is marked as lazy
+     */
+    init: (root?: HTMLElement, withLazy?: boolean) => void;
+    /**
+     * Destroy all previously registered components within the passed element
+     * @param {HTMLElement} root
+     */
+    destroy: (root: HTMLElement) => void;
+    private _getComponent;
+    private _getState;
+    private _setState;
+    private _initComponent;
+    private _initComponentOnElement;
+    private _createComponent;
+}
+export declare const dcFactory: DcFactory;
+export {};
+//# sourceMappingURL=dc-factory.d.ts.map