Merge pull request #10 from Hugoer/main

 feat(project): Defer creation of the component instance

Author: easingthemes

README.md

@@ -101,6 +101,14 @@ Adding more than one component
      data-nc-params-Component2="{}"></div>
 ```
 
+
+Defering component instantiation until it enters the viewport
+
+```
+<div data-nc="Component1"
+     data-nc-loading="lazy"></div>
+```
+
 ### register
 
 This method will register components constructor in loaderComponents
@@ -111,7 +119,7 @@ You can register individual component, or list
 ```
 /**
  * Constant with a object that contain collection of components classes.
- * 
+ *
  * @param {object} newComponents - Components collection { name: definition }
  * @param {number} [level] - level of inheritance
  */

package-lock.json

@@ -1,7 +1,7 @@
 import { components } from './components';
+import { create } from './create';
 import { deferredComponents } from './deferredComponents';
 import { instances } from './instances';
-import { create } from './create';
 import { uuid } from './uuid';
 
 const sortKeys = (list) => Object.keys(list).sort((a, b) => b - a);
@@ -18,16 +18,46 @@ const getComponent = (name) => {
  * Factory by a component name and node
  * Removed this feature from run.js function into its own function for separate use
  */
-export const factory = (name, element, initAttr) => {
+export const factory = (name, element, initAttr, lazyAttr) => {
   // if there is a component available with the name
   const component = getComponent(name);
+  const isLazy = element.getAttribute(lazyAttr) === 'lazy';
+
+  if (!component) {
+    // no component was found
+    deferredComponents[name] = deferredComponents[name] || [];
+    deferredComponents[name].push({ element, initAttr, lazyAttr });
+    // eslint-disable-next-line no-console
+    return console.warn(`Deferring initialisation of Component because factory cannot find a class for "${name}"`);
+  }
 
-  if (component) {
-    if (!instances[name]) {
-      instances[name] = [];
-    }
-    // create a unique ID for the component + node
-    element.uuid = uuid();
+  if (!instances[name]) {
+    instances[name] = [];
+  }
+  // create a unique ID for the component + node
+  element.uuid = uuid();
+
+  if (isLazy) {
+    const observerSettings = { rootMargin: '50px 0px', threshold: 0.01 };
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.intersectionRatio > 0) {
+          observer.unobserve(element);
+          // add to the active collection using a unique ID
+          instances[name].push(
+            create(
+              component, // Component Class
+              name, // Component Name
+              element, // Node
+              initAttr // params to find components
+            )
+          );
+        }
+      });
+    }, observerSettings);
+
+    observer.observe(element);
+  } else {
     // add to the active collection using a unique ID
     instances[name].push(
       create(
@@ -37,11 +67,7 @@ export const factory = (name, element, initAttr) => {
         initAttr // params to find components
       )
     );
-    return null;
   }
-  // no component was found
-  deferredComponents[name] = deferredComponents[name] || [];
-  deferredComponents[name].push({ element, initAttr });
-  // eslint-disable-next-line no-console
-  return console.warn(`Deferring initialisation of Component because factory cannot find a class for "${name}"`);
+
+  return null;
 };

src/factory.js

@@ -1,11 +1,11 @@
 export * from './components';
 export * from './create';
+export * from './domReady';
+export * from './factory';
 export * from './instances';
 export * from './observe';
 export * from './register';
 export * from './run';
-export * from './uuid';
-export * from './factory';
-export * from './domReady';
 export * from './runComponent';
 export * from './scan';
+export * from './uuid';

src/index.js

@@ -1,6 +1,6 @@
-import { factory } from './factory';
 import { components } from './components';
 import { deferredComponents } from './deferredComponents';
+import { factory } from './factory';
 
 /**
  * Constant with an object that contain collection of components classes.
@@ -19,7 +19,7 @@ export const register = (newComponents, level) => {
       components[level][name] = newComponents[name];
     }
     if (deferredComponents[name]) {
-      deferredComponents[name].forEach(({ element, initAttr }) => factory(name, element, initAttr));
+      deferredComponents[name].forEach(({ element, initAttr, lazyAttr }) => factory(name, element, initAttr, lazyAttr));
       delete deferredComponents[name];
     }
   });

src/register.js

@@ -7,7 +7,7 @@ import { scan } from './scan';
  *  @param {string} [initAttr] attribute name
  */
 
-export const run = (element = window.document, initAttr = 'data-nc') =>
+export const run = (element = window.document, initAttr = 'data-nc', lazyAttr = 'data-nc-loading') =>
   scan(element, initAttr).forEach(
     (node) => setTimeout(() => {
       // when we have coral polyfills (forced all browsers at cloud env), it creates elements twice + and move then around.
@@ -17,7 +17,7 @@ export const run = (element = window.document, initAttr = 'data-nc') =>
         // get the component that needs, will load by attribute
         const componentNames = node.getAttribute(initAttr).split(',');
         componentNames.forEach((name) =>
-          factory(name, node, initAttr));
+          factory(name, node, initAttr, lazyAttr));
       }
     })
   );

src/run.js

@@ -5,7 +5,7 @@ import { scan } from './scan';
  * Run the loader scan only for one component
  */
 
-export const runComponent = (name, element = window.document, initAttr = 'data-nc') =>
+export const runComponent = (name, element = window.document, initAttr = 'data-nc', lazyAttr = 'data-nc-loading') =>
   scan(element, `${initAttr}*="${name}"`)
     .forEach((node) => setTimeout(() =>
-      factory(name, node, initAttr)));
+      factory(name, node, initAttr, lazyAttr)));