pawajs 1.4.33 → 1.4.35

package/index.d.ts

@@ -194,6 +194,13 @@ export function getPrimaryDirectives(): Set<string>;
  */
 export function RegisterComponent(...args: (string | Function)[]): void;
 
+export namespace RegisterComponent {
+    /**
+     * Registers components lazily. The component's bundle is only fetched when the element enters the viewport.
+     */
+    export function lazy(...args: (string | Function)[]): Promise<void>;
+}
+
 /**
  * Runs a side effect or lifecycle hook.
  * @param {(comment:PawaComment) => void | (() => void)} callback - Effect function,comment for component hacking and optionally returning cleanup .

package/index.js

@@ -275,53 +275,42 @@ 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
-                }
+export const createIntersectionObserver = (element, observeBy) => {
+    const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                const tagName = element.tagName;
+                const lazyData = lazyComponents.get(tagName);
                 
-               }
-               insectObserver.disconnect()
-               intersectionObserver.disconnect();
-                     
+                if (!lazyData) return;
+
+                lazyData.component().then(res => {
+                    const compoFunc = res[lazyData.name];
+                    if (!compoFunc) return;
+
+                    components.set(tagName, compoFunc);
+                    lazyComponents.delete(tagName);
+
+                    const instances = lazyComponentElement.get(tagName) || [];
+                    while (instances.length > 0) {
+                        const { element: el, func } = instances.shift();
+                        if (el) {
+                            if (el._component) el._component.component = compoFunc;
+                            
+                            keepContext(el._stateContext);
+                            el._stateContext._hasRun = false;
+                            func(); 
+                            el._stateContext._hasRun = true;
+                        }
+                    }
+                    observer.disconnect();
+                }).catch(err => console.error(`Lazy load failed for ${tagName}:`, err));
             }
-            
-           }).catch(err=>{
-            console.log(err);
-            
-           })
-        }
-    })
-    insectObserver.observe(observeBy?observeBy:element)
-    return insectObserver
-    intersectionObserver.observe(observeBy?observeBy:element)
-    return intersectionObserver
+        });
+    }, { rootMargin: '100px' }); 
+
+    observer.observe(observeBy || element);
+    return observer;
 }
 RegisterComponent.lazy=async(...args)=>{
     if (typeof args[0] === 'string') {

package/merger/for.js

@@ -79,9 +79,10 @@ export const merger_for = (el, stateContext, attr, arrayName, arrayItem, indexes
                     let indexKey=0
                     keyOrder.forEach((value,key)=>{
                         if(update)return;
-                        if(div.children[indexKey].getAttribute('data-for-index') !== key){
+                        if(div.children[indexKey]?.getAttribute('data-for-index') !== key){
                             update=true
                         }
+                        indexKey++
                     })
                 }
                  const next = () => Promise.all(removeElement).then(async (res) => {

package/merger/switch.js

@@ -99,7 +99,7 @@ export const merger_switch=(el,attr,stateContext,resume=false,{comment,endCommen
                             }
                         }
                         
-                        if(firstEnter === false && resume && oldChain.id !== latestChain.id){
+                        if(firstEnter === false && resume && oldChain.id === latestChain.id){
                             el.removeAttribute(attr.name)
                          if (stateContext._hasRun) {
                         stateContext._hasRun = false
@@ -109,7 +109,7 @@ export const merger_switch=(el,attr,stateContext,resume=false,{comment,endCommen
                             let isIndex=0
                             children.forEach((value, index) => {
                               number.index = isIndex
-                              isIndex++
+                              isIndex++ 
                             if (number.notRender !== null && isIndex <= number.notRender) return
                               render(value,context,number)
                             })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pawajs",
-  "version": "1.4.33",
+  "version": "1.4.35",
   "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,7 +1,7 @@
 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 { createIntersectionObserver } from './index.js';
 import { addLazyComponentElement } from './index.js';
 import { lazyComponentElement } from './index.js';
 
@@ -54,7 +54,7 @@ export class PawaElement {
     if (lazyComponents.has(this._el.tagName)) {
       this._lazy=true
       if (!lazyComponentElement.has(this._el.tagName)) {
-        createInsectObserver(this._el)
+        createIntersectionObserver(this._el)
       }
     }
   }