pawajs 1.4.38 → 1.4.40

package/index.js

@@ -244,10 +244,11 @@ export const getPawaAttributes = () => {
 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})
+    const tagName=splitAndAdd(element.tagName)
+    if (lazyComponentElement.has(tagName)) {
+        lazyComponentElement.get(tagName).push({element:element,func})
     }else{
-        lazyComponentElement.set(element.tagName, [{element:element,func}])
+        lazyComponentElement.set(tagName, [{element:element,func}])
     }
 }
 /**
@@ -286,7 +287,7 @@ export const createIntersectionObserver = (element, observeBy) => {
     const observer = new IntersectionObserver(entries => {
         entries.forEach(entry => {
             if (entry.isIntersecting) {
-                const tagName = element.tagName;
+                const tagName = splitAndAdd(element.tagName);
                 const lazyData = lazyComponents.get(tagName);
                 
                 if (!lazyData) return;
@@ -313,6 +314,7 @@ export const createIntersectionObserver = (element, observeBy) => {
                             el._stateContext._hasRun = true;
                         }
                     }
+                    lazyComponentElement.delete(tagName)
                     observer.disconnect();
                 }).catch(err => console.error(`Lazy load failed for ${tagName}:`, err));
             }
@@ -322,26 +324,36 @@ export const createIntersectionObserver = (element, observeBy) => {
     observer.observe(observeBy || element);
     return observer;
 }
-RegisterComponent.lazy=async(...args)=>{
+RegisterComponent.lazy=(...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()) {
-                    lazyComponents.set(name.toUpperCase(), {name,component});
-                   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});
+            const componentFunc = args[i + 1];
+
+            if (typeof componentFunc !== 'function') {
+                console.warn('Mismatched arguments for RegisterComponent. Expected pairs of (string|string[], function).');
+                break;
+            }
+
+            const processName =(compName) => {
+                if (components.has(compName.toUpperCase())) return;
+                if (typeof compName === 'string') {
+                    if (isServer()) {
+                        componentFunc();
+                    } 
+                        lazyComponents.set(compName.toUpperCase(), { name: compName, component: componentFunc });
+                    
+                }
+            };
+
+            if (Array.isArray(name)) {
+                for (const compName of name) {
+                    processName(compName);
                 }
+            } else if (typeof name === 'string') {
+                 processName(name);
             } else {
-                console.warn('Mismatched arguments for RegisterComponent. Expected pairs of (string, function).');
+                console.warn('Mismatched arguments for RegisterComponent. Expected pairs of (string|string[], function).');
                 break;
             }
         }
@@ -856,13 +868,14 @@ export const restoreContext = (state_context) => {
         stateContext = state_context._formerContext
     }
 export const HmrComponentMap=new Map()
+const renderedComponentsRusumed=new Set()
     /**
      * 
      * @param {PawaElement|HTMLElement} el 
      * @returns null
      */
 const component = (el, resume = false, attr, notRender, stopResume) => {
-    if (el._running) {
+    if (el._running || (resume && renderedComponentsRusumed.has(attr.value))) {
         return
     }
     el._running = true
@@ -870,6 +883,7 @@ const component = (el, resume = false, attr, notRender, stopResume) => {
     if (!resume) {
         if (el._lazy) {
             // pas the normal component to lazy handler
+            el.style.opacity=0
             addLazyComponentElement(el,()=>normal_component(el, stateContext, setStateContext, mapsPlugins, formerStateContext, pawaContext, stateWatch))
             return
         }else{
@@ -877,7 +891,7 @@ const component = (el, resume = false, attr, notRender, stopResume) => {
         }
     } else {
         stopResume.stop = true
-        let name
+        let name=''
         let comment
         let endComment
         const children = []
@@ -933,12 +947,14 @@ const component = (el, resume = false, attr, notRender, stopResume) => {
             numberComponentChildren = notRender.index + children.length -1
         }
         notRender.notRender = numberComponentChildren
-        if (lazyComponents.has(name)) {   
+        renderedComponentsRusumed.add(attr.value)
+        
+        if (lazyComponents.has(name.toUpperCase())) {   
             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)
+              if (lazyComponentElement.has(name.toUpperCase())) {
+                createIntersectionObserver(trackElement,el)
               }
             }else{
                 resumer.resume_component?.(el, attr, setStateContext, mapsPlugins, formerStateContext, pawaContext, stateWatch, { comment, endComment, name, serialized, id, children })
@@ -1009,6 +1025,7 @@ const mainAttribute = (el, exp) => {
                 el.setAttribute(exp.name, value);
             } else {
                 if ((exp.name === 'class' || exp.name === 'style') && enter) {
+                    console.log('entered',enter);
                     
                     requestAnimationFrame(()=>{
                     el.setAttribute(exp.name, value);
@@ -1149,11 +1166,7 @@ export const render = (el, contexts = {}, notRender, isName) => {
         }
     }
 
-    if (Array.from(el.childNodes).some(node =>
-            node.nodeType === Node.TEXT_NODE && node.nodeValue.includes('@{')
-        ) && !el._avoidPawaRender) {
-        textContentHandler(el, isName)
-    }
+    
     let startAttribute = false
     const startObject = {}
         //get startsWith plugin
@@ -1170,6 +1183,7 @@ export const render = (el, contexts = {}, notRender, isName) => {
         })
         const number = { notRender: null }
         const isAcomponent=el._componentName?true:false
+        
         el._attributes.forEach(attr => {
 
             if (stopResume.stop || el._hasRun) return
@@ -1191,6 +1205,8 @@ export const render = (el, contexts = {}, notRender, isName) => {
             } 
             else if (attr.name.startsWith('c-c-')) {
                 stopResume.stop = true
+            
+                
                 component(el, true, attr, notRender, stopResume)// component continuity
             } else if (attr.name.startsWith('c-at-')) {
                 resumer.resume_attribute?.(el, attr, notRender) //attribute continuity
@@ -1239,7 +1255,13 @@ export const render = (el, contexts = {}, notRender, isName) => {
 
         })
     }
+
     if (stopResume.stop) return
+    if (Array.from(el.childNodes).some(node =>
+            node.nodeType === Node.TEXT_NODE && node.nodeValue.includes('@{')
+        ) && !el._avoidPawaRender) {
+        textContentHandler(el, isName)
+    }
     if (el._componentName && !el._avoidPawaRender) {
         component(el)
         return
@@ -1336,7 +1358,6 @@ const Pawa = {
     useAsync,
     useInnerContext,
     RegisterComponent,
-    forwardProps,
     runEffect,
     html
 }

package/merger/for.js

@@ -12,6 +12,7 @@ export const merger_for = (el, stateContext, attr, arrayName, arrayItem, indexes
     let context=el._context
     const keyOrder=keyOrders || new Map()
     let noKey
+    let array
     const evaluate = () => {
         if (endComment.parentElement === null) {
             el._deleteEffects()
@@ -20,7 +21,7 @@ export const merger_for = (el, stateContext, attr, arrayName, arrayItem, indexes
             if (!func) {
                 func=el.safeEval(context, arrayName, 'for-each');
             }
-            let array = func(...getEvalValues(context))
+             array = func(...getEvalValues(context))
             let update;
             if (!firstEnter) {
                 const div = document.createElement('div')
@@ -56,6 +57,7 @@ export const merger_for = (el, stateContext, attr, arrayName, arrayItem, indexes
                         return
                     }
                     if(lookLike) return
+                    
                     if (lookLike === null) {
                         elementArray.delete(keyComment) 
                         
@@ -82,7 +84,7 @@ 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') && indexKey !== key){
                             update=true
                         }
                         indexKey++
@@ -185,22 +187,7 @@ export const merger_for = (el, stateContext, attr, arrayName, arrayItem, indexes
                     stateContext._hasRun = true
                     elementArray.add(keyComment)
                 })
-
-            } else {
-                if(!resume)return
-                if(once)return
-                const number={notRender:null,index:null}
-                elementArray.forEach((keyComment) => {
-                    if(keyComment.nextElementSibling === null) return
-                    const itemContext = {
-                        [arrayItem]: array[keyComment._index],
-                        [indexes]: keyComment._index,
-                        ...context
-                    }
-                    render(keyComment.nextElementSibling, itemContext,{notRender:false,index:null})
-                })
-                once=true
-            }
+            } 
             firstEnter = false
         } catch (error) {
             setPawaDevError({

package/package.json

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