pawa-ssr 1.3.8 → 1.3.10

package/index.js

@@ -5,7 +5,7 @@ import { propsValidator, evaluateExpr,extractAtExpressions, reArrangeAttri,resum
 import {AsyncLocalStorage} from'node:async_hooks'
 import { If,For,State,Switch, Key } from'./power.js';
 import PawaElement from'./pawaElement.js'
-import { pluginsMap } from "pawajs";
+import { pluginsMap, lazyComponents } from "pawajs";
 
 const PAWA_STORE_SYMBOL = Symbol.for('pawa.ssr.store');
 
@@ -889,7 +889,7 @@ const attributeHandler =async (el, attr) => {
       partlyPawajsDirective.add(v)
     })
   }
-  addToPartlyDirective('else','else-if','case')
+  addToPartlyDirective('else','else-if','case','default')
   const checkIfRemove=(el)=>{
     for (const v of partlyPawajsDirective) {
       if(el.hasAttribute(v)) return true
@@ -1016,6 +1016,13 @@ export const render =async (el, contexts = {},stream) => {
         return
       }
       if (el._componentName) {
+        if(el._lazy && lazyComponents.has(el.tagName)){
+          const lazyComponent=lazyComponents.has(el.tagName)
+          const {name,component} =lazyComponent()
+          components.set(name,component)
+          el._component.component=component
+          lazyComponents.delete(el.tagName)
+        }
         if(isStream){
           await streamingComponent(el,stream)
           return
@@ -1206,7 +1213,7 @@ const resolvesAsync=async({component,
           const bufferStream=(string)=>{
             chunk+=string
           }
-          bufferStream(`<div id="p${id}" hidden>`)
+          bufferStream(`<div id="res-${id}" hidden>`)
       store.getStore().stateContext=appContext
       const compo=await component.then((res)=>res)
       const div=root.createElement('div')
@@ -1245,36 +1252,31 @@ const resolvesAsync=async({component,
         bufferStream(`
           <script class="p${id}">
             const s${id}=()=>{
-              let p=document.querySelectorAll("#p${id}")
-              if(p.length < 2){
-                if(p[0]) p[0].remove()
-                document.querySelector('.p${id}').remove()
-                return
-              }
-            let c=p[0].previousSibling
-            c.data='${commentData}'
-            p[0].remove()
-            const sc=p[0]?._stateContext
-            let ec=c.nextSibling
-            let fc=p[1].firstElementChild
-            p[0].removeAttribute('pawa-avoid')
-            Array.from(p[0].attributes).forEach(a => {
-              if(a.name === 'p-async') return
-              if (a.name === 'p:c') {
-                let o=a.value + (fc.getAttribute('p:c') || '')
-                fc.setAttribute('p:c',o)
-              }else{
-                fc.setAttribute(a.name,a.value)
+              const placeholder = document.getElementById("p${id}");
+              const resolved = document.getElementById("res-${id}");
+              if(!placeholder || !resolved) return;
+              
+              const comment = placeholder.previousSibling;
+              if(comment && comment.nodeType === 8) comment.data = '${commentData}';
+              
+              const firstChild = resolved.firstElementChild;
+              Array.from(placeholder.attributes).forEach(a => {
+                if(a.name === 'p-async') return;
+                if (a.name === 'p:c') {
+                  firstChild.setAttribute('p:c', a.value + (firstChild.getAttribute('p:c') || ''));
+                } else {
+                  firstChild.setAttribute(a.name, a.value);
                 }
-            });
-            p[1].childNodes.forEach(e => {
-              c.parentElement.insertBefore(e,ec)
-            });
-            if (window?.__pawaDev) {
-              window.__pawaStream(fc,p[0]._context,sc)
-            }
-            p[1].remove()
+              });
+
+              while(resolved.firstChild) placeholder.parentNode.insertBefore(resolved.firstChild, placeholder);
+              placeholder.remove();
+              resolved.remove();
+
+              if (window?.__pawaDev) {
+                window.__pawaStream(firstChild, {}, {});
               }
+            }
             s${id}()
             document.querySelector('.p${id}').remove()
           </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pawa-ssr",
-  "version": "1.3.8",
+  "version": "1.3.10",
   "type":"module",
   "description": "pawajs ssr libary",
   "main": "index.js",
@@ -25,6 +25,6 @@
   "homepage": "https://github.com/Allisboy/pawajs-ssr#readme",
   "dependencies": {
     "linkedom": "^0.18.11",
-    "pawajs": "^1.4.28"
+    "pawajs": "^1.4.35"
   }
 }

package/pawaElement.js

@@ -1,6 +1,6 @@
 import { HTMLElement, parseHTML } from "linkedom"
 import {getPawaAttributes, getDevelopment } from "./index.js"
-import {components} from 'pawajs'
+import {components,lazyComponents} from 'pawajs'
 import PawaComponent from "./pawaComponent.js"
 import { evaluateExpr, splitAndAdd,replaceTemplateOperators } from "./utils.js"
 
@@ -32,6 +32,7 @@ class PawaElement {
         this._pawaAlready=element.hasAttribute('p:c')
         /**@type {Array<{message:string,stack:string}>} */
         this._error=[]
+        this._lazy=false
         this._running=false
         this._hasForOrIf=this.hasForOrIf
         this._createError=this.createError
@@ -77,6 +78,11 @@ class PawaElement {
         this._arrangeAttribute[value.name]=value.value
       })
     }
+    checkLazy(){
+      if (lazyComponents.has(this._el.tagName)) {
+        this._lazy=true        
+      }
+    }
     setResumeAttr(name){
       if(name.startsWith(':')) return
       this._resumeAttr+=`${name};`
@@ -149,9 +155,10 @@ class PawaElement {
       }
       
       getComponent(){
-        if (components.has(splitAndAdd(this._el.tagName.toUpperCase())) && !this._client) {
+        if (components.has(splitAndAdd(this._el.tagName.toUpperCase())) && !this._client || this._lazy) {
           this._componentName=splitAndAdd(this._el.tagName.toUpperCase())
-          this._component=new PawaComponent(components.get(splitAndAdd(this._el.tagName.toUpperCase())))
+          const fakeCompo=()=>true
+          this._component=new PawaComponent(components.get(splitAndAdd(this._el.tagName.toUpperCase())),fakeCompo)
           Array.from(this._el.children).forEach(slot =>{
         
             if (slot.tagName === 'TEMPLATE' && slot.getAttribute('prop')) {

package/power.js

@@ -13,31 +13,28 @@ export const If = async(el, attr,stream) => {
     }]
     const chainMap=new Map()
     chainMap.set(el.getAttribute('if'),{condition:'if',element:el})
-     const getChained=(nextSibling)=>{
-         if (nextSibling !== null) {
-             if (nextSibling && nextSibling.getAttribute('else') === '' || nextSibling.getAttribute('else-if')) {
-                 if (nextSibling.getAttribute('else-if')) {
-                     nextSibling.remove()
-                     chained.push({
-                         exp:nextSibling.getAttribute('else-if'),
-                         condition:'else-if',
-                         element:nextSibling
-                     })
-                     chainMap.set(nextSibling.getAttribute('else-if'),{condition:'else-if',element:nextSibling})
-                     getChained(nextSibling.nextElementSibling)
-                 }else if (nextSibling.getAttribute('else') === '') {
-                     chained.push({
-                         exp:'false',
-                         condition:'else',
-                         element:nextSibling
-                     })
-                     chainMap.set('else',{condition:'else',element:nextSibling})
-                     nextSibling.remove()
-                 }
-             }
-         }
-     }
-     getChained(nextSiblings)
+    const getChained = (sibling) => {
+        while (sibling) {
+            const next = sibling.nextElementSibling;
+            const isElseIf = sibling.hasAttribute('else-if');
+            const isElse = sibling.hasAttribute('else');
+            
+            if (isElseIf) {
+                const exp = sibling.getAttribute('else-if');
+                chained.push({ exp, condition: 'else-if', element: sibling });
+                chainMap.set(exp, { condition: 'else-if', element: sibling });
+                sibling.remove();
+            } else if (isElse) {
+                chained.push({ exp: 'false', condition: 'else', element: sibling });
+                chainMap.set('else', { condition: 'else', element: sibling });
+                sibling.remove();
+            } else {
+                break;
+            }
+            sibling = next;
+        }
+    }
+    getChained(nextSiblings)
 let func=new Map()
 let current
 let latestChain
@@ -66,24 +63,17 @@ let latestChain
   let stringHtml=''
   const template=document.createElement('template')
   const store=document.createElement('template')
-  chained.forEach((item,index) =>{
-    const clone=item.element.cloneNode(true)
-    clone._avoidPawaRender = true
-    if (index === 0) {
-        Array.from(clone.attributes).forEach(at => {
-        if (at.name.startsWith('c-')) {
-          clone.removeAttribute(at.name)
-          clone.removeAttribute('p:c')
-        }
-      });
-      // stringHtml+=clone.outerHTML
-      store.appendChild(clone)
-    }else{
-      store.appendChild(clone)
-    }
-      template.appendChild(item.element)
-      
-    })
+  chained.forEach((item) => {
+    const clone = item.element.cloneNode(true);
+    clone._avoidPawaRender = true;
+    Array.from(clone.attributes).forEach(at => {
+      if (at.name.startsWith('c-') || at.name === 'p:c') {
+        clone.removeAttribute(at.name);
+      }
+    });
+    store.appendChild(clone);
+    template.appendChild(item.element);
+  });
   const getRightElement=chainMap.get(latestChain.id)
   if (getRightElement) {
     const copyElement=getRightElement.element.cloneNode(true)
@@ -133,31 +123,28 @@ export const Switch = async(el, attr,stream) => {
     }]
     const chainMap=new Map()
     chainMap.set(el.getAttribute('case'),{condition:'case',element:el})
-     const getChained=(nextSibling)=>{
-         if (nextSibling !== null) {
-             if (nextSibling && nextSibling.getAttribute('default') === '' || nextSibling.getAttribute('case')) {
-                 if (nextSibling.getAttribute('case')) {
-                     chained.push({
-                         exp:nextSibling.getAttribute('case'),
-                         condition:'case',
-                         element:nextSibling
-                     })
-                     chainMap.set(nextSibling.getAttribute('case'),{condition:'case',element:nextSibling})
-                     getChained(nextSibling.nextElementSibling)
-                     nextSibling.remove()
-                 }else if (nextSibling.getAttribute('default') === '') {
-                     chained.push({
-                         exp:'false',
-                         condition:'default',
-                         element:nextSibling
-                     })
-                     chainMap.set('default',{condition:'default',element:nextSibling})
-                     nextSibling.remove()
-                 }
-             }
-         }
-     }
-     getChained(nextSiblings)
+    const getChained = (sibling) => {
+        while (sibling) {
+            const next = sibling.nextElementSibling;
+            const isCase = sibling.hasAttribute('case');
+            const isDefault = sibling.hasAttribute('default');
+
+            if (isCase) {
+                const exp = sibling.getAttribute('case');
+                chained.push({ exp, condition: 'case', element: sibling });
+                chainMap.set(exp, { condition: 'case', element: sibling });
+                sibling.remove();
+            } else if (isDefault) {
+                chained.push({ exp: 'false', condition: 'default', element: sibling });
+                chainMap.set('default', { condition: 'default', element: sibling });
+                sibling.remove();
+            } else {
+                break;
+            }
+            sibling = next;
+        }
+    }
+    getChained(nextSiblings)
 let func=new Map()
 let current
 let latestChain
@@ -187,24 +174,18 @@ const switchFunc=el._evaluateExpr(attr.value,el._context,`at switch directive ${
         let stringHtml='' 
         const template=document.createElement('template')
         const store=document.createElement('template')
-        let index=0
-        chained.forEach(item =>{
-          const clone=item.element.cloneNode(true)
-          clone._avoidPawaRender = true
-          if (index === 0) {
-        Array.from(clone.attributes).forEach(at => {
-        if (at.name.startsWith('c-')) {
-          clone.removeAttribute(at.name)
-        }
-      });
-
-      store.appendChild(clone)
-      }else{
-      store.appendChild(clone)
-      } 
-      index++
-      template.appendChild(item.element)
-        })
+        // let index=0
+        chained.forEach((item) => {
+          const clone = item.element.cloneNode(true);
+          clone._avoidPawaRender = true;
+          Array.from(clone.attributes).forEach(at => {
+            if (at.name.startsWith('c-') || at.name === 'p:c') {
+              clone.removeAttribute(at.name);
+            }
+          });
+          store.appendChild(clone);
+          template.appendChild(item.element);
+        });
         el.removeAttribute('switch')
   const getRightElement=chainMap.get(latestChain.id)
   if (getRightElement && (current || latestChain.condition === 'default')) {
@@ -274,7 +255,7 @@ export const For=async(el,attr,stream)=>{
       if (at.name.startsWith('c-')) {
         store.push(at)
         copyElement.removeAttribute(at.name)
-      }
+      }                         
     })
     
     const template=document.createElement('template')
@@ -353,6 +334,7 @@ export const For=async(el,attr,stream)=>{
     }
 }
 
+
 export const State=async(el,attr)=>{
   if (el._running) {
     return
@@ -394,9 +376,9 @@ export const Key=async(el,attr,stream)=>{
     const template=document.createElement('template')
     template.setAttribute('p:store-key',dirId)
     template.setAttribute('p:store','')
-    clone.attributes.forEach(at => {
-      if (at.name.startsWith('c-')) {
-        clone.removeAttribute(at.name)
+    Array.from(clone.attributes).forEach(at => {
+      if (at.name.startsWith('c-') || at.name === 'p:c') {
+        clone.removeAttribute(at.name);
       }
     });
     template.appendChild(clone)