Deferred loading (#7)

* Ability to async loading the component chunk * Introduce Component interface * Updated documentation
Delete-Agency · Nov 26, 2019 · 01d5970 · 01d5970
1 parent 06966d0
commit 01d5970
Show file tree

Hide file tree

Showing 7 changed files with 162 additions and 32 deletions.
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
@@ -198,6 +198,33 @@ <h2>Lazy initialization</h2>
             </script>
 
         </div>
+
+        <div class="mb-5">
+            <h2>Deferred Loading</h2>
+            <p>
+                You can defer your components loading by changing the way of registering components. This technique uses Webpack dynamic import under the hood. So Webpack creates a separate chunk for the component on the build step.
+            </p>
+            <script data-live-highlight="deferred-1">
+                const importFunction = () => import(/* webpackChunkName: "some-component" */ './some-component');
+                dcFactory.register(dcDeferredLoading(importFunction, 'some-component'));
+
+
+            </script>
+            <div data-live-highlight-target="deferred-1"></div>
+            <p>
+               The second argument in <i>dcDeferredLoading</i> should be the component's namespace.
+            </p>
+            <script data-live-highlight="deferred-2">
+                class SomeComponent extends DcBaseComponent {
+                    static getNamespace() {
+                        return 'some-component'
+                    }
+                }
+            </script>
+            <div data-live-highlight-target="deferred-2"></div>
+            <p>The deferred loading is more powerfull with lazy initialization. In this case, the component's chunk will be loaded after dcFactory tries to initialize it.</p>
+        </div>
+
     </div>
 </div>
 </body>

diff --git a/src/dc-base-component.js b/src/dc-base-component.js
@@ -5,12 +5,49 @@ import utils from './utils';
  * @typedef {Object.<string, {(HTMLElement|HTMLElement[]|Object.<string, HTMLElement>)}>} ReferencesCollection
  */
 
+/**
+ * Interface for classes that can be initialized by factory.
+ * @interface Component
+*/
+/**
+ * Init Component
+ * @method
+ * @name Component#init
+ *
+ */
+/**
+ * Destroy Component
+ * @method
+ * @name Component#destroy
+ *
+ */
+/**
+ * @method
+ * @name Component#getElement
+ * @return {HTMLElement} element
+ */
+/**
+ * @method
+ * @name Component#getNamespace
+ * @static
+ */
+
+/**
+ * Base component.
+ * @class
+ * @implements {Component}
+ */
 export default class DcBaseComponent {
     /**
      * @param {HTMLElement} element
      */
     constructor(element) {
-        utils.checkForbiddenOverrides(DcBaseComponent, this, ['getElement', 'getNamespace', 'init', 'addListener']);
+        utils.checkForbiddenOverrides(DcBaseComponent, this, [
+            'getElement',
+            'getNamespace',
+            'init',
+            'addListener'
+        ]);
 
         /**
          * Root element of the component
@@ -49,7 +86,11 @@ export default class DcBaseComponent {
         /**
          * @type {ReferencesCollection}
          */
-        this.refs = dcDom.getElementRefs(element, this.getNamespace(), this._id);
+        this.refs = dcDom.getElementRefs(
+            element,
+            this.getNamespace(),
+            this._id
+        );
 
         this._checkRequiredRefs(this.refs);
     }
@@ -94,9 +135,11 @@ export default class DcBaseComponent {
      * @private
      */
     _checkRequiredRefs(refs) {
-        this.constructor.getRequiredRefs().forEach((name) => {
+        this.constructor.getRequiredRefs().forEach(name => {
             if (!refs[name]) {
-                throw new Error(`the value of required ref ${name} is ${refs[name]}`);
+                throw new Error(
+                    `the value of required ref ${name} is ${refs[name]}`
+                );
             }
         });
     }
@@ -122,7 +165,7 @@ export default class DcBaseComponent {
     }
 
     _removeAllListeners() {
-        this._listenersList.forEach((listener) => {
+        this._listenersList.forEach(listener => {
             const { elem, eventName, eventCallback } = listener;
             elem.removeEventListener(eventName, eventCallback);
         });
@@ -139,19 +182,27 @@ export default class DcBaseComponent {
         this.onDestroy();
     }
 
-    onDestroy() {
-    }
+    onDestroy() {}
 
     getChildAttribute(childNode, attributeName) {
         const childId = dcDom.getParentId(childNode, this.getNamespace());
         if (this._id !== childId) {
-            throw new Error('id attributes of child and parent don\'t match');
+            throw new Error("id attributes of child and parent don't match");
         }
 
-        return dcDom.getNamespacedAttributeValue(childNode, attributeName, this.getNamespace());
+        return dcDom.getNamespacedAttributeValue(
+            childNode,
+            attributeName,
+            this.getNamespace()
+        );
     }
 
     findChildrenWithAttribute(attributeName) {
-        return dcDom.findChildrenWithAttribute(this.element, attributeName, this.getNamespace(), this._id);
+        return dcDom.findChildrenWithAttribute(
+            this.element,
+            attributeName,
+            this.getNamespace(),
+            this._id
+        );
     }
 }
diff --git a/src/dc-deferred-loading.js b/src/dc-deferred-loading.js
@@ -0,0 +1,50 @@
+import DcBaseComponent from './dc-base-component';
+import dcFactory from './dc-factory';
+
+/**
+ * This function returns wrapper componentClass
+ *
+ * @param {function} importFunction
+ * @param {string} nameSpace
+ * @return {typeof Component} wrapper for component class
+ */
+export default function dcDeferredLoading(importFunction, nameSpace) {
+    /**
+     * A wrapper class for deferred loading
+     * @class
+     * @implements {Component}
+     */
+    class DeferredWrapper {
+        constructor(element) {
+            this.element = element;
+        }
+
+        getElement() {
+            return this.element;
+        }
+
+        init() {
+            importFunction()
+                .then(({ default: componentClass }) => {
+                    this.actualInstance = new componentClass(this.element);
+                    this.actualInstance.init();
+                })
+                .catch(error => {
+                    console.error(
+                        `An error occurred while loading the component ${nameSpace}`
+                    );
+                    console.error(error);
+                });
+        }
+
+        destroy() {
+            this.actualInstance.destroy();
+        }
+
+        static getNamespace() {
+            return nameSpace;
+        }
+    }
+
+    return DeferredWrapper;
+}
diff --git a/src/dc-factory.js b/src/dc-factory.js
@@ -33,29 +33,29 @@ class DcFactory {
     constructor() {
         /**
          *
-         * @type {{componentClass: typeof DcBaseComponent, selector: string}[]}
+         * @type {{componentClass: typeof Component, selector: string}[]}
          * @private
          */
         this._registredComponents = [];
 
         /**
          *
-         * @type {WeakMap<HTMLElement, Map<typeof DcBaseComponent, ComponentState>>}
+         * @type {WeakMap<HTMLElement, Map<typeof Component, ComponentState>>}
          * @private
          */
         this._elementsComponents = new WeakMap();
 
         /**
          *
-         * @type {DcBaseComponent[]}
+         * @type {Component[]}
          * @private
          */
         this._instances = [];
     }
 
     /**
      *
-     * @param {typeof DcBaseComponent} componentClass
+     * @param {typeof Component} componentClass
      * @param {Function|string} selector that indicates how we should search that component elements
      */
     register(componentClass, selector = null) {
@@ -68,7 +68,7 @@ class DcFactory {
     /**
      *
      * @param {HTMLElement} element
-     * @param {typeof DcBaseComponent} componentClass
+     * @param {typeof Component} componentClass
      * @return ComponentState
      * @private
      */
@@ -80,7 +80,7 @@ class DcFactory {
     /**
      *
      * @param {HTMLElement} element
-     * @param {typeof DcBaseComponent} componentClass
+     * @param {typeof Component} componentClass
      * @param {ComponentState} state
      * @private
      */
@@ -114,7 +114,7 @@ class DcFactory {
     /**
      *
      * @param {HTMLElement} root
-     * @param {typeof DcBaseComponent} componentClass
+     * @param {typeof Component} componentClass
      * @param {Function|string} selector
      * @param {boolean} withLazy
      * @private
@@ -140,7 +140,7 @@ class DcFactory {
     /**
      * Init component class on elements
      * @param {HTMLElement} element
-     * @param {typeof DcBaseComponent} componentClass
+     * @param {typeof Component} componentClass
      * @param {boolean} withLazy
      * @private
      */
@@ -179,8 +179,8 @@ class DcFactory {
     }
 
     /**
-     * @param {DcBaseComponent} instance
-     * @param {typeof DcBaseComponent} componentClass
+     * @param {Component} instance
+     * @param {typeof Component} componentClass
      * @private
      */
     _onComponentCreated(instance, componentClass) {
@@ -193,7 +193,7 @@ class DcFactory {
     /**
      * @param {Error} error
      * @param {HTMLElement} element
-     * @param {typeof DcBaseComponent} componentClass
+     * @param {typeof Component} componentClass
      * @private
      */
     _onComponentCreationError(error, element, componentClass) {
@@ -204,9 +204,9 @@ class DcFactory {
 
     /**
      *
-     * @param {typeof DcBaseComponent} componentClass
+     * @param {typeof Component} componentClass
      * @param {HTMLElement} element
-     * @return {DcBaseComponent}
+     * @return {Component}
      * @private
      */
     _createComponentOnElement(componentClass, element) {
@@ -237,7 +237,7 @@ class DcFactory {
 
     /**
      *
-     * @param {DcBaseComponent} component
+     * @param {Component} component
      * @private
      */
     _destroyComponent(component) {
@@ -248,8 +248,8 @@ class DcFactory {
     /**
      * Returns all components of componentClass which are contained within the passed element
      * @param {HTMLElement} element
-     * @param {typeof DcBaseComponent} componentClass
-     * @return DcBaseComponent[]
+     * @param {typeof Component} componentClass
+     * @return Component[]
      */
     getChildComponents(element, componentClass) {
         return this._instances.filter((instance) => element.contains(instance.getElement()) && instance instanceof componentClass);
@@ -258,8 +258,8 @@ class DcFactory {
     /**
      * Returns first found component of componentClass which is contained within the passed element
      * @param {HTMLElement} element
-     * @param {typeof DcBaseComponent} componentClass
-     * @return DcBaseComponent
+     * @param {typeof Component} componentClass
+     * @return Component
      */
     getChildComponent(element, componentClass) {
         return this.getChildComponents(element, componentClass)[0];
@@ -268,7 +268,7 @@ class DcFactory {
     /**
      * Returns all existing components on the passed element. Just for debugging purpose!
      * @param {HTMLElement} element
-     * @return DcBaseComponent[]
+     * @return Component[]
      */
     debug(element) {
         return this._instances.filter((instance) => instance.getElement() === element);

diff --git a/src/index.js b/src/index.js
@@ -1,9 +1,11 @@
 import DcBaseComponent from './dc-base-component';
 import dcFactory from './dc-factory';
 import dcDom from './dc-dom';
+import dcDeferredLoading from './dc-deferred-loading';
 
 export {
     DcBaseComponent,
     dcFactory,
-    dcDom
+    dcDom,
+    dcDeferredLoading
 }