pawa-ssr 1.3.9 → 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');
 
@@ -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.9",
+  "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

@@ -255,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')
@@ -334,6 +334,7 @@ export const For=async(el,attr,stream)=>{
     }
 }
 
+
 export const State=async(el,attr)=>{
   if (el._running) {
     return