rename dcDeferredLoading to dcAsync and add an example to demo page

demo/test-async-component.js

@@ -0,0 +1,9 @@
+export default class TestAsyncComponent extends DcBaseComponent {
+    static getNamespace() {
+        return 'test-async-component'
+    }
+
+    onInit() {
+        this.element.innerHTML = 'Test async component was initialized';
+    }
+}

index.html

@@ -200,31 +200,30 @@ <h2>Lazy initialization</h2>
         </div>
 
         <div class="mb-5">
-            <h2>Deferred Loading</h2>
+            <h2>Async 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.
+                The second argument in <i>dcAsync</i> should be the component's namespace.
             </p>
-            <script data-live-highlight="deferred-2">
-                class SomeComponent extends DcBaseComponent {
-                    static getNamespace() {
-                        return 'some-component'
-                    }
-                }
+            <p>The async 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 id="async-example" data-dc-lazy data-dc-test-async-component></div>
+            <button id="async-trigger-button"
+                    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'));
+
+                const asyncTriggerButton = document.getElementById('async-trigger-button');
+                asyncTriggerButton.addEventListener('click', () => {
+                    dcFactory.init(document.getElementById('async-example'), true);
+                })
             </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>
+            <p>
+                In Network tab you can see that the whole code of the component is downloaded separately and can be easily moved to a separate async chunk
+            </p>
         </div>
-
     </div>
 </div>
 </body>

src/dc-deferred-loading.js → src/dc-async.js

@@ -1,20 +1,17 @@
-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) {
+export default function dcAsync(importFunction, nameSpace) {
     /**
-     * A wrapper class for deferred loading
+     * A wrapper class for async loading
      * @class
      * @implements {Component}
      */
-    class DeferredWrapper {
+    class AsyncWrapper {
         constructor(element) {
             this.element = element;
         }
@@ -46,5 +43,5 @@ export default function dcDeferredLoading(importFunction, nameSpace) {
         }
     }
 
-    return DeferredWrapper;
+    return AsyncWrapper;
 }

src/index.js

@@ -1,11 +1,11 @@
 import DcBaseComponent from './dc-base-component';
 import dcFactory from './dc-factory';
 import dcDom from './dc-dom';
-import dcDeferredLoading from './dc-deferred-loading';
+import dcAsync from './dc-async';
 
 export {
     DcBaseComponent,
     dcFactory,
     dcDom,
-    dcDeferredLoading
+    dcAsync
 }