pawajs 1.4.31 → 1.4.33

package/CHANGELOG.md

@@ -15,4 +15,5 @@ CHANGELOG.md
 + version 1.4.27 - fixed __pawaDev Tools,
 + version 1.4.28 - fixed pawaElement checkStaticsContext
 + version 1.4.30 - removed console warn from useContext
-+ version 1.4.30 - tried updating key to add element when server key is different
++ version 1.4.31- 1.4.32 - tried updating key to add element when server key is different
++ version 1.4.33 - added registerComponent.lazy

package/index.js

@@ -177,6 +177,7 @@ export const keepContext = (context) => {
 
 }
 export const components = new Map()
+export const lazyComponents=new Map()
     /**
      * @type {PawaComponent}
      */
@@ -233,7 +234,15 @@ export const getDependentAttribute = () => dependentPawaAttribute
 export const getPawaAttributes = () => {
     return pawaAttributes
 }
-
+let laziler
+export const lazyComponentElement=new Map()
+export const addLazyComponentElement=(element,func)=>{
+    if (lazyComponentElement.has(element.tagName)) {
+        lazyComponentElement.get(element.tagName).push({element:element,func})
+    }else{
+        lazyComponentElement.set(element.tagName, [{element:element,func}])
+    }
+}
 /**
  * 
  * @param  {...()=>string|null} component 
@@ -266,6 +275,79 @@ export const RegisterComponent = (...args) => {
         }
     });
 }
+export const createInsectObserver=(element,observeBy)=>{
+    // console.log(element,lazyComponentElement);
+    
+    const insectObserver=new IntersectionObserver(ob=>{
+        const entry=ob[0]
+        if (entry.intersectionRect.y > 0) {
+            console.log(entry.isVisible,entry.isIntersecting,entry);
+            
+        }
+        if (entry.isIntersecting) {
+            
+            const allThisSame=lazyComponentElement.get(element.tagName)
+           const lazyCompo=lazyComponents.get(element.tagName)
+           lazyCompo.component().then(res =>{
+            if (res[lazyCompo.name]) {
+                components.set(element.tagName, res[lazyCompo.name])
+                lazyComponents.delete(lazyCompo.name)
+               const compo=res[lazyCompo.name]   
+               for (const {element:el,func} of allThisSame) {
+                if (el) {
+                    console.log(el);
+                    
+                    if (el._component) {
+                        el._component.component=compo
+                    }
+                    keepContext(el._stateContext)
+                    el._stateContext._hasRun=false
+                    func()
+                    el._stateContext._hasRun=true
+                }
+                
+               }
+               insectObserver.disconnect()
+               intersectionObserver.disconnect();
+                     
+            }
+            
+           }).catch(err=>{
+            console.log(err);
+            
+           })
+        }
+    })
+    insectObserver.observe(observeBy?observeBy:element)
+    return insectObserver
+    intersectionObserver.observe(observeBy?observeBy:element)
+    return intersectionObserver
+}
+RegisterComponent.lazy=async(...args)=>{
+    if (typeof args[0] === 'string') {
+        for (let i = 0; i < args.length; i += 2) {
+            const name = args[i];
+            const component = args[i + 1];
+            if (components.has(name.toUpperCase())) return
+            if (typeof name === 'string' && typeof component === 'function') {
+                if (isServer()) {
+                   const compo=await component()
+                   if (compo[name]) {
+                       components.set(name.toUpperCase(),compo[name]) 
+                   }else{
+                    console.log(`component name doesn't matched the export ${name}`);
+                   }
+                }else{
+                    lazyComponents.set(name.toUpperCase(), {name,component});
+                }
+            } else {
+                console.warn('Mismatched arguments for RegisterComponent. Expected pairs of (string, function).');
+                break;
+            }
+        }
+        return;
+    }
+}
 
 /**
  * 
@@ -763,7 +845,13 @@ const component = (el, resume = false, attr, notRender, stopResume) => {
     el._running = true
     
     if (!resume) {
-        normal_component(el, stateContext, setStateContext, mapsPlugins, formerStateContext, pawaContext, stateWatch)
+        if (el._lazy) {
+            // pas the normal component to lazy handler
+            addLazyComponentElement(el,()=>normal_component(el, stateContext, setStateContext, mapsPlugins, formerStateContext, pawaContext, stateWatch))
+            return
+        }else{
+            normal_component(el, stateContext, setStateContext, mapsPlugins, formerStateContext, pawaContext, stateWatch)
+        }
     } else {
         stopResume.stop = true
         let name
@@ -822,6 +910,14 @@ const component = (el, resume = false, attr, notRender, stopResume) => {
             numberComponentChildren = notRender.index + children.length -1
         }
         notRender.notRender = numberComponentChildren
+        if (lazyComponents.has(name)) {   
+            const trackElement=document.createElement(name)
+            trackElement._stateContext=el._stateContext 
+            addLazyComponentElement(trackElement,()=>resumer.resume_component?.(el, attr, setStateContext, mapsPlugins, formerStateContext, pawaContext, stateWatch, { comment, endComment, name, serialized, id, children }))     
+              if (!lazyComponentElement.has(name)) {
+                createInsectObserver(trackElement,el)
+              }
+            }
         resumer.resume_component?.(el, attr, setStateContext, mapsPlugins, formerStateContext, pawaContext, stateWatch, { comment, endComment, name, serialized, id, children })
     }
 }
@@ -1077,11 +1173,11 @@ export const render = (el, contexts = {}, notRender, isName) => {
             } else if (attr.name.startsWith('c-t')) {//text continuity
                 resumer.resume_text(el, attr, isName)
             } else if (attr.name.startsWith('c-if-')) {
-                directives['if'](el, attr, stateContext, true, notRender, stopResume) // condition continuity
+                directives['if'](el, attr, stateContext, true, notRender, stopResume) 
             } else if (attr.name === 'c-for') {
-                directives['for-each'](el, attr, stateContext, true, notRender, stopResume) // for-each continuity
+                directives['for-each'](el, attr, stateContext, true, notRender, stopResume)
             }else if (attr.name.startsWith('c-key-')) {
-                directives['key'](el, attr, stateContext, true, notRender, stopResume)// key continuity
+                directives['key'](el, attr, stateContext, true, notRender, stopResume)
             }  
             else if (attr.name.startsWith('c-sw-')) {
                 directives['switch'](el, attr, stateContext, true, notRender, stopResume)// switch continuity

package/merger/key.js

@@ -74,6 +74,19 @@ export const merger_key=(el,attr,stateContext,resume=false,{comment,endComment,c
                         })
                         promised=true
                         
+                    }
+                    if (oldsate !== latestState && !firstEnter && resume) {
+                        Promise.resolve(removePromise).then(()=>{
+                            if (comment.nextSibling === endComment && oldsate !== latestState) {
+                                const newElement=el.cloneNode(true)
+                                 newElement.removeAttribute('key')
+                                 oldsate=latestState
+                                 setElement(newElement,latestState) 
+                            }
+                            promised=false
+                        })
+                        promised=true
+                        
                     }
                     if(!firstEnter){
                         if(oldsate === latestState)return

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pawajs",
-  "version": "1.4.31",
+  "version": "1.4.33",
   "type":"module",
   "description": "pawajs library (reactive web runtime) for easily building web ui, enhancing html element, micro frontend etc ",
   "main": "index.js",

package/pawaElement.js

@@ -1,6 +1,10 @@
-import {components,escapePawaAttribute,getPawaAttributes,getDependentAttribute,getPrimaryDirectives } from './index.js';
+import {components,lazyComponents ,escapePawaAttribute,getPawaAttributes,getDependentAttribute,getPrimaryDirectives } from './index.js';
 import {splitAndAdd,replaceTemplateOperators,setPawaDevError,getEvalValues} from './utils.js';
 import PawaComponent from './pawaComponent.js';
+import { createInsectObserver } from './index.js';
+import { addLazyComponentElement } from './index.js';
+import { lazyComponentElement } from './index.js';
+
 
 
 export class PawaElement {
@@ -30,11 +34,12 @@ export class PawaElement {
       _scriptDone: false, _underControl: null, safeEval: this.safeEval, _reactiveProps: {},
       _clearContext:this.clearContext
     })
-    if (this._lazy) this._componentOrTemplate = true
+    
     if(this._avoidPawaRender) {
       element.removeAttribute('pawa-avoid')
       Array.from(element.children).forEach((child) => { if (child.nodeType === 1) child.setAttribute('pawa-avoid','') })
     }
+    this.checkLazy()
     this.setPawaAttr(); this.elementType(); this.setProps(); this.setAttri(); this.findPawaAttribute()
   }
   
@@ -45,7 +50,14 @@ export class PawaElement {
   getChildrenTree(){
     return Array.from(this._el.children)
   }
-  
+  checkLazy(){
+    if (lazyComponents.has(this._el.tagName)) {
+      this._lazy=true
+      if (!lazyComponentElement.has(this._el.tagName)) {
+        createInsectObserver(this._el)
+      }
+    }
+  }
    safeEval(context,expression,directive,resolve=false){
   try{
     const keys = Object.keys(context);
@@ -230,12 +242,13 @@ export class PawaElement {
     }
     const tag = this._el.tagName
    try {
-      if (components.has(splitAndAdd(tag))) {
+      if (components.has(splitAndAdd(tag)) || this._lazy) {
       this._elementType='component'
       this._componentOrTemplate=true
       this._deCompositionElement=true
       this._componentName=splitAndAdd(tag)
-      this._component=new PawaComponent(components.get(splitAndAdd(tag)))
+      const forLazy=()=>true
+      this._component=new PawaComponent(components.get(splitAndAdd(tag)) || forLazy)
       Array.from(this._el.children).forEach(slot =>{
         if (slot.tagName === 'TEMPLATE' && slot.getAttribute('prop') && !slot.hasAttribute('js')) {
           this._slots.appendChild(slot)