kempo 2.3.0 → 2.4.0

package/icons/tools.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M756-120 537-339l84-84 219 219-84 84Zm-552 0-84-84 276-276-68-68-28 28-51-51v82l-28 28-121-121 28-28h82l-50-50 142-142q20-20 43-29t47-9q24 0 47 9t43 29l-92 92 50 50-28 28 68 68 90-90q-4-11-6.5-23t-2.5-24q0-59 40.5-99.5T701-841q15 0 28.5 3t27.5 9l-99 99 72 72 99-99q7 14 9.5 27.5T841-701q0 59-40.5 99.5T701-561q-12 0-24-2t-23-7L204-120Z"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "type": "module",
   "description": "A web component library",
   "main": "dist/index.js",

package/src/components/LazyComponent.js

@@ -1,6 +1,6 @@
 import Component from './Component.js';
 import { isInView } from '../utils/element.js';
-
+import raf from '../utils/raf.js';
 
 export default class LazyComponent extends Component {
   constructor(shadowDetails){
@@ -18,21 +18,24 @@ export default class LazyComponent extends Component {
   async connectedCallback(){
     // Do not do super.connectedCallback() because it will render the component prematurely
     await this.renderSkelton(); // so that the skeleton height is rendered, which will give it the propert height so potentional LazyComponents below it will get out of the viewport as they normally would, before we then check if it is in View (which is delayed a few frames.
-    if(await isInView(this)){
-      await this.inViewCallback();
-    }
+    raf(async ()=>{
+      if(await isInView(this)) await this.inViewCallback();
+    }, 2);
   }
   async inViewCallback(){
-    await this.render();
+    return await this.render();
   }
   async outOfViewCallback(){
     if(this.unrender){
       await this.renderSkelton();
+      return true;
     }
+    return false;
   }
   async renderSkelton(){
     this.shadowRoot.innerHTML = `<link rel="stylesheet" href="${Component.pathToKempo}/kempo-styles.css" />${this.skeletonTemplate}<style>${this.shadowStyles}</style>`;
     this.rendered = false;
+    return true;
   }
   get skeletonTemplate(){
     return /*html*/`<div style="height: var(--skeleton_height, 1rem)"></div>`;

package/src/utils/raf.js

@@ -0,0 +1,10 @@
+const raf = (callback, frames = 1) => {
+  requestAnimationFrame(()=>{
+    if(frames === 1){
+      callback();
+    } else {
+      raf(callback, frames-1);
+    }
+  });
+}
+export default raf;