pawajs 1.5.4 → 1.5.6

package/index.js

@@ -265,6 +265,9 @@ export const RegisterComponent = (...args) => {
             const component = args[i + 1];
             if (typeof name === 'string' && typeof component === 'function') {
                 // if (components.has(name.toUpperCase())) continue;
+                if (!isServer() && lazyComponents.has(name.toUpperCase())) {
+                    lazyComponents.delete(name.toLocaleUpperCase())
+                }
                 components.set(name.toUpperCase(), component);
             } else {
                 console.warn('Mismatched arguments for RegisterComponent. Expected pairs of (string, function).');
@@ -283,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' }); 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pawajs",
-  "version": "1.5.4",
+  "version": "1.5.6",
   "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';
 
@@ -51,10 +51,11 @@ export class PawaElement {
     return Array.from(this._el.children)
   }
   checkLazy(){
-    if (lazyComponents.has(splitAndAdd(this._el.tagName)) && !components.has(splitAndAdd(this._el.tagName))) {
+    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))
       }
     }
   }

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) {