pawajs 1.4.34 → 1.4.36

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') {
@@ -331,6 +320,7 @@ RegisterComponent.lazy=async(...args)=>{
             if (components.has(name.toUpperCase())) return
             if (typeof name === 'string' && typeof component === 'function') {
                 if (isServer()) {
+                    lazyComponents.set(name.toUpperCase(), {name,component});
                    const compo=await component()
                    if (compo[name]) {
                        components.set(name.toUpperCase(),compo[name]) 
@@ -613,6 +603,20 @@ export const useInsert = (obj = {}) => {
     }
 }
 const createDeepProxy = (target, callback) => {
+    // Skip proxies for DOM objects and native objects that don't work well with proxies
+    if (target instanceof FileList) return target
+    if (target instanceof File) return target
+    if (target instanceof Blob) return target
+    if (target instanceof FormData) return target
+    if (target instanceof Date) return target
+    if (target instanceof RegExp) return target
+    
+    // Also skip if it's already a proxy
+    if (target && target._isPawaProxy) return target
+    
+    // Also skip if it's a DOM element
+    if (target && target.nodeType && typeof target === 'object') return target
+    
     return new Proxy(target, {
         get(target, property) {
             const value = target[property];
@@ -1078,7 +1082,7 @@ const directives = {
     'for-each': For,
     else:(el)=>{el._running =true},
     case:(el)=>{el._running =true},
-    default:(el)=>{el._running =true},
+    "s-default":(el)=>{el._running =true},
     'else-if':(el)=>{el._running =true},
     mount: mountElement,
     unmount: unMountElement,

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pawajs",
-  "version": "1.4.34",
+  "version": "1.4.36",
   "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';
 
@@ -51,10 +51,10 @@ export class PawaElement {
     return Array.from(this._el.children)
   }
   checkLazy(){
-    if (lazyComponents.has(this._el.tagName)) {
+    if (lazyComponents.has(splitAndAdd(this._el.tagName))) {
       this._lazy=true
-      if (!lazyComponentElement.has(this._el.tagName)) {
-        createInsectObserver(this._el)
+      if (!lazyComponentElement.has(splitAndAdd(this._el.tagName))) {
+        createIntersectionObserver(this._el)
       }
     }
   }

package/power.js

@@ -222,7 +222,7 @@ export const Switch = (el, attr, stateContext,resume=false,notRender,stopResume)
                                 chainMap.set(nextSibling.getAttribute('case'),{condition:'case',element:nextSibling})
                                 getChained(nextSibling.nextElementSibling)
                                 nextSibling.remove()
-                            }else if (nextSibling.getAttribute('default') === '') {
+                            }else if (nextSibling.getAttribute('s-default') === '') {
                                 chained.push({
                                     exp:'false',
                                     condition:'default',

package/utils.js

@@ -176,7 +176,12 @@ export const sanitizeTemplate = (temp) => {
 };
 
 export const ComponentProps=(somes,message,name,key)=>{
-let some=somes?.() || somes
+let some
+  if (typeof somes === 'function') {
+    some=somes()
+  }else{
+    some=somes
+  }
     return({
     Array:()=>{