pawajs 1.5.5 → 1.5.7

package/index.js

@@ -286,40 +286,49 @@ export const RegisterComponent = (...args) => {
         }
     });
 }
+/**
+ * Shared helper to trigger the dynamic import and hydration of a lazy component.
+ * @param {string} tagName 
+ */
+export const triggerLazyLoad = (tagName) => {
+    const lazyData = lazyComponents.get(tagName);
+    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) {
+                queueMicrotask(() => {
+                    el.style.opacity = "";
+                    if (el._component) {
+                        el._component.component = compoFunc;
+                        el._component.validPropRule = compoFunc?.validateProps || {}
+                    }
+
+                    keepContext(el._stateContext);
+                    el._stateContext._hasRun = false;
+                    func();
+                    el._stateContext._hasRun = true;
+                });
+            }
+        }
+        lazyComponentElement.delete(tagName);
+    }).catch(err => console.error(`Lazy load failed for ${tagName}:`, err));
+};
+
 export const createIntersectionObserver = (element, observeBy) => {
     const observer = new IntersectionObserver(entries => {
         entries.forEach(entry => {
             if (entry.isIntersecting) {
-                const tagName = splitAndAdd(element.tagName);
-                const lazyData = lazyComponents.get(tagName);
-                
-                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;
-                              el._component.validPropRule=compoFunc?.validateProps || {}
-                            } 
-                            
-                            keepContext(el._stateContext);
-                            el._stateContext._hasRun = false;
-                            func(); 
-                            el._stateContext._hasRun = true;
-                        }
-                    }
-                    lazyComponentElement.delete(tagName)
-                    observer.disconnect();
-                }).catch(err => console.error(`Lazy load failed for ${tagName}:`, err));
+                triggerLazyLoad(splitAndAdd(element.tagName));
+                observer.disconnect();
             }
         });
     }, { rootMargin: '100px' }); 
@@ -952,7 +961,7 @@ const component = (el, resume = false, attr, notRender, stopResume) => {
             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.toUpperCase())) {
-                createIntersectionObserver(trackElement,el)
+                triggerLazyLoad(trackElement.tagName)
               }
             }else{
                 resumer.resume_component?.(el, attr, setStateContext, mapsPlugins, formerStateContext, pawaContext, stateWatch, { comment, endComment, name, serialized, id, children })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pawajs",
-  "version": "1.5.5",
+  "version": "1.5.7",
   "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, pluginsMap } from './index.js';
 import {splitAndAdd,replaceTemplateOperators,setPawaDevError,getEvalValues, checkKeywordsExistence} from './utils.js';
 import PawaComponent from './pawaComponent.js';
-import { createIntersectionObserver } from './index.js';
+import { triggerLazyLoad } from './index.js';
 import { addLazyComponentElement } from './index.js';
 import { lazyComponentElement } from './index.js';
 
@@ -54,9 +54,8 @@ export class PawaElement {
     if (lazyComponents.has(splitAndAdd(this._el.tagName))) {
       if(components.has(splitAndAdd(this._el.tagName))) return
       this._lazy=true
-      if (!lazyComponentElement.has(splitAndAdd(this._el.tagName))) {
-        createIntersectionObserver(this._el)
-      }
+        triggerLazyLoad(splitAndAdd(this._el.tagName))
+      
     }
   }
    safeEval(context,expression,directive,resolve=false){

package/reactive.js

@@ -30,8 +30,8 @@ function scheduleRenderWithTimeBudget() {
 
   rafScheduled = true;
   scheduleInProgress=true
-  requestAnimationFrame(() => {
-    const start = performance.now();
+  requestAnimationFrame((timestamp) => {
+    const start = timestamp;
     const processed = [];
 
     for (const fn of scheduled) {