kempo 3.2.0 → 3.2.1

package/dist/components/LazyComponent.js

@@ -1 +1 @@
-import Component from"./Component.js";import{isInView}from"../utils/element.js";import raf from"../utils/raf.js";const inViewIntervalTimeout=Symbol(),inViewIntervalId=Symbol();export default class LazyComponent extends Component{constructor(e){super(e),this[inViewIntervalTimeout]=2e3,this[inViewIntervalId]=null,new IntersectionObserver((([e])=>{e.intersectionRatio>0&&!this.rendered?this.inViewCallback():this.outOfViewCallback()})).observe(this),this.registerAttribute("unrender",!1)}connectedCallback(){this.renderSkelton(),raf((()=>{isInView(this)?this.inViewCallback():this.outOfViewCallback()}),2)}async inViewCallback(){return clearInterval(this[inViewIntervalId]),await this.render()}async outOfViewCallback(){return clearInterval(this[inViewIntervalId]),this[inViewIntervalId]=setInterval((async()=>{await isInView(this)&&this.inViewCallback()}),this[inViewIntervalTimeout]),!!this.unrender&&(await this.renderSkelton(),!0)}async renderSkelton(){return this.shadowRoot.innerHTML=`<link rel="stylesheet" href="${Component.pathToKempo}/kempo-styles.css" />${this.skeletonTemplate}<style>${this.shadowStyles}</style>`,this.rendered=!1,!0}get skeletonTemplate(){return'<div style="height: var(--skeleton_height, 1rem)"></div>'}}
+import Component from"./Component.js";import{isInView}from"../utils/element.js";import raf from"../utils/raf.js";const inViewIntervalId=Symbol();export default class LazyComponent extends Component{constructor(e){super(e),this[inViewIntervalId]=null,new IntersectionObserver((([e])=>{e.intersectionRatio>0&&!this.rendered?this.inViewCallback():this.outOfViewCallback()})).observe(this),this.registerAttributes({unrender:!1,inViewInterval:0})}connectedCallback(){this.renderSkelton(),raf((()=>{isInView(this)?this.inViewCallback():this.outOfViewCallback()}),2)}async inViewCallback(){return clearInterval(this[inViewIntervalId]),await this.render()}async outOfViewCallback(){return clearInterval(this[inViewIntervalId]),this[inViewIntervalId]=setInterval((async()=>{await isInView(this)&&this.inViewCallback()}),this.inViewInterval||this.constructor.inViewIntervalTimeout),!!this.unrender&&(await this.renderSkelton(),!0)}async renderSkelton(){return this.shadowRoot.innerHTML=`<link rel="stylesheet" href="${Component.pathToKempo}/kempo-styles.css" />${this.skeletonTemplate}<style>${this.shadowStyles}</style>`,this.rendered=!1,!0}get skeletonTemplate(){return'<div style="height: var(--skeleton_height, 1rem)"></div>'}static inViewIntervalTimeout=1e3}

package/docs/components/lazy-component.html

@@ -41,6 +41,14 @@
     <p>Extend the <code>LazyComponent</code> class to create a lazy-loaded component. The component will render its content only when it becomes visible in the viewport.</p>
     <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> LazyComponent <span class="hljs-keyword">from</span> <span class="hljs-string">'kempo'</span>;<br /><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyLazyComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">LazyComponent</span> </span>{<br />  <span class="hljs-keyword">constructor</span>(){<br />    <span class="hljs-keyword">super</span>();<br />    <span class="hljs-comment">// Your Constructor</span><br />  }<br />  <span class="hljs-keyword">async</span> render(force){<br />    <span class="hljs-keyword">if</span>(<span class="hljs-keyword">await</span> <span class="hljs-keyword">super</span>.render(force)){<br />      <span class="hljs-comment">// Your render logic</span><br />      <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;<br />    }<br />    <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;<br />  }<br />}<br /><span class="hljs-built_in">window</span>.customElements.define(<span class="hljs-string">'my-lazy-component'</span>, MyLazyComponent);</code></pre>
 
+    <h3 id="basicUsage"><a href="#interval" class="no-link">In-View Interval Timeout</a></h3>
+    <p>In addition to using intersection observes to watch for components being scrolled into view, an interval is used to check if the component suddenly become visible via a display style change to itself or a parent. The timeout of the interval can be set for all instances of your LazyComponent by chaning the static member <code>inViewIntervalTimeout</code>.</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> LazyComponent <span class="hljs-keyword">from</span> <span class="hljs-string">'kempo'</span>;<br /><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyLazyComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">LazyComponent</span> </span>{<br />  <span class="hljs-keyword">constructor</span>(){<br />    <span class="hljs-keyword">super</span>();<br />    <span class="hljs-comment">// Your Constructor</span><br />  }<br />  <span class="hljs-keyword">async</span> render(force){<br />    <span class="hljs-keyword">if</span>(<span class="hljs-keyword">await</span> <span class="hljs-keyword">super</span>.render(force)){<br />      <span class="hljs-comment">// Your render logic</span><br />      <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;<br />    }<br />    <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;<br />  }<br /><br />  <span class="hljs-keyword">static</span> inViewIntervalTimeout = <span class="hljs-number">200</span>; <span class="hljs-comment">// Change the inView checking interval to 200ms instead of the default 1000</span><br />}<br /><span class="hljs-built_in">window</span>.customElements.define(<span class="hljs-string">'my-lazy-component'</span>, MyLazyComponent);</code></pre>
+    
+    <h5>Individal Component interval timer overwrites</h5>
+    <p>You can overwrite this interval timeout for individual elements by setting the <code>in-view-interval</code> attribute.</p>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">my-lazy-component</span> <span class="hljs-attr">in-view-interval</span>=<span class="hljs-string">"5000"</span>&gt;</span><br />  <span class="hljs-comment">&lt;!-- The interval to check if it is in-view (due to element/parent visibility change) is now set to check every 5 seconds --&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">my-lazy-component</span>&gt;</span></code></pre>
+
     <h2 id="jsRef">JavaScript Reference</h2>
 
     <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>

package/docs/kempo/components/LazyComponent.js

@@ -1 +1 @@
-import Component from"./Component.js";import{isInView}from"../utils/element.js";import raf from"../utils/raf.js";const inViewIntervalTimeout=Symbol(),inViewIntervalId=Symbol();export default class LazyComponent extends Component{constructor(e){super(e),this[inViewIntervalTimeout]=2e3,this[inViewIntervalId]=null,new IntersectionObserver((([e])=>{e.intersectionRatio>0&&!this.rendered?this.inViewCallback():this.outOfViewCallback()})).observe(this),this.registerAttribute("unrender",!1)}connectedCallback(){this.renderSkelton(),raf((()=>{isInView(this)?this.inViewCallback():this.outOfViewCallback()}),2)}async inViewCallback(){return clearInterval(this[inViewIntervalId]),await this.render()}async outOfViewCallback(){return clearInterval(this[inViewIntervalId]),this[inViewIntervalId]=setInterval((async()=>{await isInView(this)&&this.inViewCallback()}),this[inViewIntervalTimeout]),!!this.unrender&&(await this.renderSkelton(),!0)}async renderSkelton(){return this.shadowRoot.innerHTML=`<link rel="stylesheet" href="${Component.pathToKempo}/kempo-styles.css" />${this.skeletonTemplate}<style>${this.shadowStyles}</style>`,this.rendered=!1,!0}get skeletonTemplate(){return'<div style="height: var(--skeleton_height, 1rem)"></div>'}}
+import Component from"./Component.js";import{isInView}from"../utils/element.js";import raf from"../utils/raf.js";const inViewIntervalId=Symbol();export default class LazyComponent extends Component{constructor(e){super(e),this[inViewIntervalId]=null,new IntersectionObserver((([e])=>{e.intersectionRatio>0&&!this.rendered?this.inViewCallback():this.outOfViewCallback()})).observe(this),this.registerAttributes({unrender:!1,inViewInterval:0})}connectedCallback(){this.renderSkelton(),raf((()=>{isInView(this)?this.inViewCallback():this.outOfViewCallback()}),2)}async inViewCallback(){return clearInterval(this[inViewIntervalId]),await this.render()}async outOfViewCallback(){return clearInterval(this[inViewIntervalId]),this[inViewIntervalId]=setInterval((async()=>{await isInView(this)&&this.inViewCallback()}),this.inViewInterval||this.constructor.inViewIntervalTimeout),!!this.unrender&&(await this.renderSkelton(),!0)}async renderSkelton(){return this.shadowRoot.innerHTML=`<link rel="stylesheet" href="${Component.pathToKempo}/kempo-styles.css" />${this.skeletonTemplate}<style>${this.shadowStyles}</style>`,this.rendered=!1,!0}get skeletonTemplate(){return'<div style="height: var(--skeleton_height, 1rem)"></div>'}static inViewIntervalTimeout=1e3}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "type": "module",
   "description": "A web component library",
   "exports": {
@@ -11,7 +11,7 @@
     "./components/*": "./dist/components/*.js"
   },
   "scripts": {
-    "test": "node ./scrips/test.js",
+    "test": "node ./scripts/test.js",
     "build": "node ./scripts/build.js",
     "docs": "node ./scripts/docs.js",
     "docs-src": "node ./scripts/docs.js -s"

package/scripts/test.js

@@ -0,0 +1,31 @@
+import express from 'express';
+import { dirname, join } from 'path';
+import { fileURLToPath } from 'url';
+import {
+  getArgs,
+  runChildNodeProcess
+} from '../src/utils/cli.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const options = getArgs({
+  p: 'port',
+  b: 'build',
+  s: 'src'
+});
+
+const {
+  port = 8084,
+  build = true
+} = options;
+
+const app = express();
+
+app.use('/kempo', express.static('src'));
+app.use('/icons', express.static('icons'));
+app.use(express.static('test'));
+
+app.listen(port, () => {
+  console.log(`Docs Running on: http://localhost:${port}`);
+});

package/src/components/Component.js

@@ -107,3 +107,4 @@ export default class Component extends HTMLElement {
   static observedAttributes = ['rendered'];
   static pathToKempo = import.meta.url.substring(0, import.meta.url.indexOf('/components/Component.js') );
 }
+window.customElements.define('k-component', Component);

package/src/components/LazyComponent.js

@@ -2,14 +2,12 @@ import Component from './Component.js';
 import { isInView } from '../utils/element.js';
 import raf from '../utils/raf.js';
 
-const inViewIntervalTimeout = Symbol(),
-      inViewIntervalId = Symbol();
+const inViewIntervalId = Symbol();
 export default class LazyComponent extends Component {
   constructor(shadowDetails){
     super(shadowDetails);
 
     /* Private Members */
-    this[inViewIntervalTimeout] = 2000;
     this[inViewIntervalId] = null;
     
     (new IntersectionObserver(([comp]) => {
@@ -20,7 +18,10 @@ export default class LazyComponent extends Component {
       }
     })).observe(this);
     
-    this.registerAttribute('unrender', false);
+    this.registerAttributes({
+      unrender: false,
+      inViewInterval: 0
+    });
   }
   connectedCallback(){
     // Do not do super.connectedCallback() because it will render the component prematurely
@@ -43,7 +44,7 @@ export default class LazyComponent extends Component {
       if(await isInView(this)){
         this.inViewCallback();
       }
-    }, this[inViewIntervalTimeout]);
+    }, this.inViewInterval || LazyComponent.inViewIntervalTimeout);
     if(this.unrender){
       await this.renderSkelton();
       return true;
@@ -58,4 +59,7 @@ export default class LazyComponent extends Component {
   get skeletonTemplate(){
     return /*html*/`<div style="height: var(--skeleton_height, 1rem)"></div>`;
   }
+
+  /* Static Members */
+  static inViewIntervalTimeout = 1000;
 }