final

Delete-Agency · Oct 25, 2020 · c3d60cd · c3d60cd
1 parent efe4602
commit c3d60cd
Show file tree

Hide file tree

Showing 14 changed files with 4,537 additions and 250 deletions.
diff --git a/README.md b/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 instantiate 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. 
 
@@ -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/)
diff --git a/babel.config.js b/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',
+    ],
+};
diff --git a/demo/dist/dc.min.js b/demo/dist/dc.min.js
diff --git a/demo/dist/dc.min.js.map b/demo/dist/dc.min.js.map
diff --git a/index.html b/index.html
@@ -78,38 +78,39 @@ <h2>Simple example</h2>
             <div data-live-highlight-target="simple"></div>
 
             <div class="example mb-5">
-                <div class="collapsed" id="simple-collapsed" data-live-highlight="simple"
-                        data-dc-collapsed='{"speed": 500, "ease": "linear"}'>
-                    <button class="collapsed__button" data-dc-collapsed-ref="button">
+                <div class="collapsed" data-live-highlight="simple" data-dc-collapsed='{"speed": 500, "ease": "linear"}'>
+                    <button class="collapsed__button btn btn-primary mt-2 mb-2" data-dc-collapsed-ref="button">
                         Toggle
                     </button>
                     <div class="collapse card card-body" data-dc-collapsed-ref="content">
                         Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.
+
+                        <div class="collapsed" data-dc-collapsed='{"speed": 500, "ease": "linear"}'>
+                            <button class="collapsed__button btn btn-primary mt-2 mb-2" data-dc-collapsed-ref="button">
+                                Nested Toggle
+                            </button>
+                            <div class="collapse card card-body" data-dc-collapsed-ref="content">
+                                Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
 
             <script data-live-highlight="simple">
                 class CollapsedComponent extends DcBaseComponent {
-                    constructor(...args) {
-                        super(...args);
-
-                        this.onClick = this.onClick.bind(this);
-                    }
+                    static namespace = 'collapsed';
+                    static requiredRefs = ['button', 'content'];
 
-                    static getNamespace() {
-                        return 'collapsed'
-                    }
-
-                    onInit() {
+                    init = () => {
                         console.log('CollapsedComponent was instantiate on the element', this.element);
                         console.log('Options', this.options);
                         console.log('Refs', this.refs);
 
-                        this.refs.button.addEventListener('click', this.onClick);
+                        this.addListener(this.refs.button, 'click', this.onClick);
                     }
 
-                    onClick() {
+                    onClick = () => {
                         if (this.refs.content.classList.contains('show')) {
                             this.refs.content.classList.remove('show');
                         } else {
@@ -176,11 +177,9 @@ <h2>Lazy initialization</h2>
 
             <script data-live-highlight="lazy">
                 class MessageComponent extends DcBaseComponent {
-                    static getNamespace() {
-                        return 'message'
-                    }
+                    static namespace = 'message';
 
-                    onInit() {
+                    init() {
                         console.log('MessageComponent is created on node', this.element);
                         this.element.innerText = this.options.message;
                     }
@@ -207,7 +206,7 @@ <h2>Async Loading</h2>
             </p>
             <p>
                 The second argument in <i>dcAsync</i> should be the component's namespace.
-                This value will also replace components <i>getNamespace</i> static method so you don't have to declare component namespace twice.
+                This value will also replace components <i>namespace</i> static method so you don't have to declare component namespace twice.
             </p>
             <p>
                 The async loading is more powerful with lazy initialization.
@@ -218,7 +217,7 @@ <h2>Async Loading</h2>
                     class="btn btn-primary mt-2 mb-2">Init lazy component combined with async
             </button>
             <script>
-                dcFactory.register(dcAsync(() => import('./demo/test-async-component.js'), 'test-async-component'));
+                dcFactory.register(dcAsync(() => import('./demo/test-async-component.js')), '[data-dc-test-async-component]');
 
                 const asyncTriggerButton = document.getElementById('async-trigger-button');
                 asyncTriggerButton.addEventListener('click', () => {
@@ -232,4 +231,4 @@ <h2>Async Loading</h2>
     </div>
 </div>
 </body>
-</html>
+</html>
diff --git a/package.json b/package.json
@@ -2,32 +2,38 @@
   "name": "@deleteagency/dc",
   "version": "2.0.2",
   "description": "",
-  "main": "src/index.js",
+  "main": "src/index.ts",
   "files": [
-    "src",
-    "standalone"
+    "src"
   ],
   "repository": {
     "type": "git",
     "url": "https://github.com/Delete-Agency/dc.git"
   },
   "homepage": "https://github.com/Delete-Agency/dc",
   "scripts": {
-    "standalone": "webpack --config webpack.standalone.config.js",
     "demo": "webpack --config webpack.demo.config.js",
     "demo:watch": "webpack --config webpack.demo.config.js --watch",
-    "test": "echo \"No test specified\"",
-    "prepublish": "npm run standalone"
   },
   "author": "",
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "^7.5.5",
-    "@babel/preset-env": "^7.5.5",
-    "babel-loader": "^8.0.6",
-    "clean-webpack-plugin": "^3.0.0",
-    "core-js": "^2.0.0",
-    "webpack": "^4.41.2",
-    "webpack-cli": "^3.3.6"
+    "@babel/core": "7.10.3",
+    "@babel/plugin-proposal-class-properties": "7.10.1",
+    "@babel/plugin-proposal-object-rest-spread": "7.10.3",
+    "@babel/plugin-syntax-dynamic-import": "7.0.0",
+    "@babel/plugin-transform-object-assign": "7.10.3",
+    "@babel/preset-env": "7.10.3",
+    "@babel/preset-typescript": "7.10.1",
+    "@babel/runtime-corejs3": "7.12.1",
+    "babel-loader": "8.1.0",
+    "clean-webpack-plugin": "3.0.0",
+    "core-js": "3.6.4",
+    "fork-ts-checker-webpack-plugin": "5.2.0",
+    "thread-loader": "3.0.0",
+    "ts-loader": "8.0.5",
+    "typescript": "4.0.3",
+    "webpack": "4.44.0",
+    "webpack-cli": "3.3.12"
   }
 }
diff --git a/src/dc-async.ts b/src/dc-async.ts
@@ -14,28 +14,28 @@ export const dcAsync = (importFunction: CallableFunction): any => {
      */
     class AsyncWrapper {
         public element: HTMLElement;
-        public instance: DcBaseComponent;
+        public instance: DcBaseComponent | undefined;
 
         constructor(element: HTMLElement) {
             this.element = element;
         }
 
-        init() {
+        public init() {
             importFunction()
                 .then(( _Class: typeof DcBaseComponent ) => {
                     this.instance = new _Class(this.element, _Class.namespace, _Class.requiredRefs);
                     this.instance.init();
                 })
-                .catch(error => {
+                .catch((error: any) => {
                     console.error(
                         `An error occurred while loading the component ${importFunction}`
                     );
                     console.error(error);
                 });
         }
 
-        destroy() {
-            this.instance.destroy();
+        public destroy() {
+            if (this.instance) this.instance.destroy();
         }
     }