pawajs 1.4.38 → 1.4.39

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));
             }
@@ -856,13 +858,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 +873,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 +881,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 +937,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 +1015,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 +1156,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 +1173,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 +1195,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 +1245,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 +1348,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.39",
   "type":"module",
   "description": "pawajs library (reactive web runtime) for easily building web ui, enhancing html element, micro frontend etc ",
   "main": "index.js",