pawa-ssr 1.2.5 → 1.2.6

package/index.js

@@ -1,4 +1,4 @@
-import {getServerInstance, setServer} from 'pawajs/server.js'
+import {getServerInstance, setServer} from '../src/pawajs/server.js'
 import { DOMParser,parseHTML, HTMLElement} from 'linkedom'
 import PawaComponent from './pawaComponent.js'
 import { propsValidator, evaluateExpr,extractAtExpressions, reArrangeAttri,resumeAttribute, pawaGenerateId } from './utils.js'
@@ -22,15 +22,39 @@ const useInsert=(obj={})=>{
       Object.assign(appContext.stateContext.insert, obj);
     }
   }catch(error){
-    if(isDevelopment){
+    if(__pawaDev){
       console.log(error.message,error.stack)
     }
   }
 }
-
+const useAsync=()=>{
+  try {
+    const appContext=store.getStore();
+    if (appContext?.stateContext) {
+      const keep=appContext?.stateContext
+      return {
+        $async:(callback)=>{
+          if (typeof callback === 'function') {
+            store.getStore().stateContext=keep
+            const res=callback()
+            return res
+          }
+        },
+        onSuspense:(html)=>{
+          if (typeof html === 'string') {
+            keep.suspense=html
+          }
+        }
+      }
+    }
+  } catch (error) {
+    
+  }
+}
 const setContext=()=>{
   const id=crypto.randomUUID()
   const setValue=(context={})=>{
+
     try{
       const appContext = store.getStore();
       if(appContext?.stateContext?.transportContext){
@@ -60,18 +84,20 @@ const accessChild=()=>{
   }
 }
 const useServer=()=>{
+  const appContext = store.getStore().stateContext;
   try{
-    const appContext = store.getStore();
-    if (appContext?.stateContext) {
-      appContext.stateContext.serializeData = true;
+    if (appContext) {
+      appContext.useServer=true
+      appContext.serializeData = true;
       const setServerData=(data={})=>{
+        
         for (const [key,value] of Object.entries(data)) {
             if (typeof value !== 'function') {
-              appContext.stateContext.fromSerialized[key]=value
+              appContext.fromSerialized[key]=value
             }
           }
       }
-      const getServerData=()=>appContext.stateContext.fromSerialized
+      const getServerData=()=>appContext.fromSerialized
       return {setServerData,getServerData}
     }
   }catch(error){
@@ -85,6 +111,7 @@ const useContext=(context)=>{
     const appContext = store.getStore();
     const id=context?.id
     if(appContext?.stateContext?.transportContext && id){
+      
       return appContext.stateContext.transportContext[id];
     }
     return {}
@@ -129,9 +156,10 @@ setServer({
   setContext,
   $state,
   accessChild,
-  useServer
+  useServer,
+  useAsync
 })
-
+export const pawaForServer=setServer
 const components = new Map();
 export const getPawaComponentsMap =()=>{
   return components ;
@@ -267,7 +295,7 @@ export const useValidateComponent=(component,object)=>{
  * @param {import('./pawaElement.js').default} el
  * @returns 
  */
-const component=async (el)=>{
+const component=async (el,stream)=>{
     if(el._running){
         return
     }
@@ -276,7 +304,8 @@ const component=async (el)=>{
     const document = el.ownerDocument
     const slots={}
     /**@type {AppStateContextType} */
-    const oldAppContext=getStore().stateContext
+    const oldAppContext=store.getStore().stateContext
+    // console.log(oldAppContext)
     let stateContext={}
     let appContext={
       transportContext: {},
@@ -289,7 +318,12 @@ const component=async (el)=>{
       accessChild:false,
       serializeData:false,
       serialize:{},
-      fromSerialized:{}
+      fromSerialized:{},
+      useServer:false,
+      suspense:'',
+      carrier:'',
+      pc:el.getAttribute('p:c')
+      
     }
     Object.assign(appContext.transportContext, oldAppContext?.transportContext || {})
     const slotHydrates={}
@@ -341,22 +375,22 @@ appContext.component._prop={children,...el._props,...slots}
         ...el._props
       }
       for (const fn of compoBeforeCall) {
-            try {
+        try {
             await fn(stateContext,app)
-            } catch (error) {
-              console.error(`Error in beforeCall for ${el._componentName}:`, error.message,error.stack)
-               __pawaDev.setError({ 
+          } catch (error) {
+            console.error(`Error in beforeCall for ${el._componentName}:`, error.message,error.stack)
+             __pawaDev.setError({ 
                     el:el, 
                     msg:`from  compoBeforeCall${el._componentName}:`+ error.message + error.stack, 
                     directives:'plugin', 
                     stack:error.stack, 
                     template:el?._template, 
                  })
-            }
-          } 
-      
-    const div=document.createElement('div')
-    el._setResumeAttr(`c-compo-${el._componentName}-${id}`)
+          }
+        } 
+        
+        const div=document.createElement('div')
+        el._setResumeAttr(`c-compo-${el._componentName}-${id}`)
     let compo=""
     try{
       if(done){
@@ -375,11 +409,11 @@ appContext.component._prop={children,...el._props,...slots}
                     template:el?._template, 
                  })
     }
-    if (appContext?.insert){
+          if (appContext?.insert){
       Object.assign(el._context,appContext.insert)
     }
-    // if(compo instanceOf Promise){}
-    if(typeof compo !== 'boolean' && compo){
+     
+    if(typeof compo !== 'boolean' && typeof compo === 'string'){
       div.innerHTML=compo
       }
           const findElement=div.querySelector('[--]') || div.querySelector('[r-]')
@@ -403,7 +437,7 @@ appContext.component._prop={children,...el._props,...slots}
           }
         }
 
-        
+          
         hydrate.data=null
         if (appContext.serializeData) { // get serialized data 
           for (const [key,value] of Object.entries(appContext.fromSerialized)) {
@@ -417,12 +451,232 @@ appContext.component._prop={children,...el._props,...slots}
           for (const [key] of Object.entries(appContext.insert)) {
             hydrate.context.push(key)
           }
+          
           comment.data=`component+${id}+${el._componentName}+${encodeJSON(hydrate)}`
         
         for (const newElement of newElements) {
           comment.parentElement.insertBefore(newElement, endComment)
-          newElement.setAttribute('p:c', el.getAttribute('p:c'))
+      
+            newElement.setAttribute('p:c', el.getAttribute('p:c'))
+          Array.from(el.attributes).forEach((value) => {
+            if (value.name.startsWith('c-')) {
+              newElement.setAttribute(value.name, value.value)
+            }
+          })
+          
+          newElement.setAttribute(`c-c-${el._componentName}-${id}`, id)
+            await render(newElement, el._context,stream)
+          
+        }              
+        store.getStore().stateContext=appContext.formerContext
+         } catch (error) {
+    console.log(error.message,error.stack);
+     __pawaDev.setError({ 
+                    el:el, 
+                    msg:`from  ${el.tagName} component`, 
+                    directives:'component', 
+                    stack:error.stack, 
+                    template:el?._template, 
+                 })
+    
+   }
+}
+/**
+ * 
+ * @param {import('./pawaElement.js').default} el
+ * @returns 
+ */
+const streamingComponent=async (el,stream)=>{
+    if(el._running){
+        return
+    }
+   try {
+    const slot=el._slots
+    const document = el.ownerDocument
+    const slots={}
+    /**@type {AppStateContextType} */
+    const oldAppContext=store.getStore().stateContext
+    // console.log(oldAppContext)
+    let stateContext={}
+    let appContext={
+      transportContext: {},
+      innerContext:el._context,
+      mount:[],
+      formerContext:oldAppContext,
+      name:el._componentName,
+      insert:{},
+      component:el._component,
+      accessChild:false,
+      serializeData:false,
+      serialize:{},
+      fromSerialized:{},
+      useServer:false,
+      suspense:'',
+      carrier:'',
+      pc:el.getAttribute('p:c')
+      
+    }
+    Object.assign(appContext.transportContext, oldAppContext?.transportContext || {})
+    const slotHydrates={}
+    Array.from(slot.children).forEach(prop =>{
+      if (prop.getAttribute('prop')) {
+        const html=prop.innerHTML
+        slots[prop.getAttribute('prop')]=()=>html
+        slotHydrates[prop.getAttribute('prop')]=html
+      }else{
+        console.warn('sloting props must have prop attribute')
+      }
+    }) 
+    const children=el._componentChildren
+    const hydrate={
+      children:children,
+      props:{
+        ...el._hydrateProps,
+      },
+      slots:{...slotHydrates},
+    }
+    
+    const id=pawaGenerateId(10)
+    const encodeJSON = (obj) => Buffer.from(JSON.stringify(obj)).toString('base64').replace(/\+/g, '-');
+const comment = document.createComment(`component+${id}`);
+const endComment=document.createComment(`end component+${id}+${el._componentName}`)
+    el.replaceWith(endComment)
+    endComment.parentElement.insertBefore(comment,endComment)
+    /**
+     * @type {import('./pawaComponent.js').default}
+     */
+    const component =el._component
+    stateContext=component
+    /**
+ * 
+ * @param {object} props 
+ * @returns {object}
+ */
+stateContext._name=el._componentName
+
+let done=true
+if(Object.entries(el._component.validPropRule).length > 0){
+  done=propsValidator(el._component.validPropRule,{...el._props,...slots},appContext.component._name,el.toString(),el)
+}
+appContext.component._prop={children,...el._props,...slots}
+
+    const app = {
+        children,
+        ...slots,
+        ...el._props
+      }
+      for (const fn of compoBeforeCall) {
+        try {
+            await fn(stateContext,app)
+          } catch (error) {
+            console.error(`Error in beforeCall for ${el._componentName}:`, error.message,error.stack)
+             __pawaDev.setError({ 
+                    el:el, 
+                    msg:`from  compoBeforeCall${el._componentName}:`+ error.message + error.stack, 
+                    directives:'plugin', 
+                    stack:error.stack, 
+                    template:el?._template, 
+                 })
+          }
+        } 
+        
+        const div=document.createElement('div')
+        el._setResumeAttr(`c-compo-${el._componentName}-${id}`)
+    let compo=""
+    let isBoundary=false
+    try{
+      if(done){
+      
+        store.getStore().stateContext=appContext
+        compo=component.component(app)
+         isBoundary=appContext.suspense && appContext.useServer
+        if (compo instanceof Promise && !isBoundary) {
+          compo=await compo.then((res)=>res)
+        }
+      }
+
+    }catch(error){
+      console.error(`error from PawaComponent.${appContext.component._name}`,error.message,error.stack)
+             __pawaDev.setError({ 
+                    el:el, 
+                    msg:`error from PawaComponent.${appContext.component._name}`+ error.message + error.stack, 
+                    directives:el.tagName, 
+                    stack:error.stack, 
+                    template:el?._template, 
+                 })
+    }
+          if (appContext?.insert){
+      Object.assign(el._context,appContext.insert)
+    }
+    if (isBoundary) {
+      store.getStore().batch.push({
+        component:compo,
+        id:id,
+        comment:{
+          hydrate:hydrate,
+          encodeJSON:encodeJSON,
+          name:el._componentName
+        },
+        appContext:appContext,
+        context:{...el._context},
+        restProps:el._restProps,
+        hydrate:hydrate
+      })
+      
+    }
+     if(isBoundary){
+      compo=`<div id="p${id}">${appContext.suspense}</div>`
+    }
+    if(typeof compo !== 'boolean' && typeof compo === 'string'){
+      div.innerHTML=compo
+      }
+          const findElement=div.querySelector('[--]') || div.querySelector('[r-]')
+          if (findElement) {
+            for (const [key,value] of Object.entries(el?._restProps)) {
+                findElement.setAttribute(value.name,value.value)
+              }
+              findElement.removeAttribute('--')
+              findElement.removeAttribute('r-')
+        }
+        
+        // Handle multiple root nodes (Fragments)
+        const newElements = Array.from(div.children)
+        for (const fn of compoAfterCall) {
+          try {
+            // Note: passing the first child might be limiting if there are multiple, 
+            // but keeping API consistent for now.
+            await fn(appContext, newElements[0], el)
+          } catch (error) {
+            console.error(error.message,error.stack)
+          }
+        }
+
+          
+        hydrate.data=null
+        if (appContext.serializeData) { // get serialized data 
+          for (const [key,value] of Object.entries(appContext.fromSerialized)) {
+            if (typeof value !== 'function') {
+              appContext.serialize[key]=value
+            }
+          }
+          hydrate.data=appContext.serialize
+        }
+        hydrate.context=[]
+          for (const [key] of Object.entries(appContext.insert)) {
+            hydrate.context.push(key)
+          }
           
+          comment.data=`component+${id}+${el._componentName}+${encodeJSON(hydrate)}`
+          stream(`<!--${comment.data}-->`)
+        
+        for (const newElement of newElements) {
+          comment.parentElement.insertBefore(newElement, endComment)
+          if (!isBoundary) {
+            newElement.setAttribute('p:c', el.getAttribute('p:c'))
+          }else{
+            newElement.setAttribute('p:c',el.getAttribute('p:c'))
+            newElement.setAttribute('p-async', el.getAttribute('p:c'))
+          }
           Array.from(el.attributes).forEach((value) => {
             if (value.name.startsWith('c-')) {
               newElement.setAttribute(value.name, value.value)
@@ -430,25 +684,33 @@ appContext.component._prop={children,...el._props,...slots}
           })
           
           newElement.setAttribute(`c-c-${el._componentName}-${id}`, id)
-          await render(newElement, el._context)
+          
+          
+            await render(newElement, el._context,stream)
+          
         }
+        stream(`<!--${endComment.data}-->`)
         
         appContext.mount.forEach(async(call)=>{
           await call()
         })
+  
+        
+
         store.getStore().stateContext=appContext.formerContext
          } catch (error) {
-    console.log(error.message,error.stack,`at ${el.tagName} component`);
-    __pawaDev.setError({ 
+    console.log(error.message,error.stack);
+     __pawaDev.setError({ 
                     el:el, 
                     msg:`from  ${el.tagName} component`, 
                     directives:'component', 
                     stack:error.stack, 
                     template:el?._template, 
                  })
+    
    }
 }
-const templates=async(el,context)=>{
+const templates=async(el,stream)=>{
   if(el._running)return
   const document = el.ownerDocument
        const comment=document.createComment(`<template>`)
@@ -456,6 +718,7 @@ const templates=async(el,context)=>{
        el.replaceWith(endComment)
        
        endComment.parentElement.insertBefore(comment,endComment)
+       stream(`<!--${comment.data}-->`)
        let element=[]
        for (const child of Array.from(el.content.children)) {
          endComment.parentElement.insertBefore(child,endComment)
@@ -471,8 +734,9 @@ const templates=async(el,context)=>{
             }
           }
           }
-          await render(child,el._context) 
+          await render(child,el._context,stream) 
       }
+      stream(`<!--${endComment.data}-->`)
 }
 const textContentHandler = async(el) => {
   if (el._running || el._componentName) return;
@@ -546,7 +810,7 @@ const attributeHandler =async (el, attr) => {
       const expressions = extractAtExpressions(value);
 
       expressions.forEach(({ fullMatch, expression }) => {
-        const func = evaluateExpr(
+        const func =el._evaluateExpr(
           expression,
           el._context,
           `from text interpolation @{} - ${expression} at ${currentHtmlString} attribute ${attr.name}`
@@ -564,7 +828,7 @@ const attributeHandler =async (el, attr) => {
       }
     } catch (error) {
       console.log(error.message, error.stack);
-      __pawaDev.setError({ 
+       __pawaDev.setError({ 
            el:el, 
            msg:`error from Attribute Handler`+ error.message + error.stack, 
            directives:'Attribute Handler', 
@@ -577,13 +841,18 @@ const attributeHandler =async (el, attr) => {
   evaluate();
   
 };
-  
+  const singleElement=new Set()
+  const setSingle=(...string)=>{
+    string.forEach(v => singleElement.add(v))
+  }
+  setSingle('img','br')
 /**
  * 
  * @param {PawaElement | HTMLElement} el 
  * @param {object} contexts 
  */
-export const render =async (el, contexts = {}) => {
+export const render =async (el, contexts = {},stream) => {
+  const isStream=store.getStore().stream
   if(el.hasAttribute('only-client')){
     el.removeAttribute('only-client')
     const template=el.ownerDocument.createElement('template')
@@ -616,7 +885,6 @@ export const render =async (el, contexts = {}) => {
     }
     
     PawaElement.Element(el,context)
-    
      if(el.childNodes.some(node=>node.nodeType === 3 && node.nodeValue.includes('@{')) && !el._avoidPawaRender){
        await textContentHandler(el)  
      }
@@ -646,11 +914,11 @@ export const render =async (el, contexts = {}) => {
       const attributes = Array.from(el.attributes);
       for(const attr of attributes){
           if (directives[attr.name]) {
-              await directives[attr.name](el,attr)  
+              await directives[attr.name](el,attr,stream)  
           }else if(attr.value.includes('@{')){
             await  attributeHandler(el,attr)
           }else if (attr.name.startsWith('state-')) {
-            await directives['state-'](el,attr)
+             directives['state-'](el,attr)
           }
           else if(fullNamePlugin.has(attr.name)) {
           if(externalPlugin[attr.name]){
@@ -683,12 +951,18 @@ export const render =async (el, contexts = {}) => {
           
       }
       if(el.tagName === 'TEMPLATE'){
-        await templates(el)
+        await templates(el,stream)
         return
       }
       if (el._componentName) {
-          await component(el)
+        if(isStream){
+          await streamingComponent(el,stream)
+          return
+        }else{
+          await component(el,stream)
           return
+        }
+        return
       }
     }
     for (const fn of renderBeforeChild) {
@@ -699,10 +973,26 @@ export const render =async (el, contexts = {}) => {
       }
     }
 if(!el._running){
-   const children = Array.from(el.children);
+  const attr=Array.from(el.attributes).map(att=>`${att.name}="${att.value}"`).join(' ')
+  const isSingle=singleElement.has(el.tagName.toLowerCase())
+  if (isSingle) {
+    stream(`<${el.tagName.toLowerCase()} ${attr} />`)
+  }else{
+    stream(`<${el.tagName.toLowerCase()} ${attr} >`)
+  }
+   const children = el.childNodes;
    for(const child of children){
-     await render(child, el._context);
+    if (child.nodeType === 3) {
+      stream(child.nodeValue)
+    }else if (child.nodeType === 8) {
+      stream(`<!--${child.nodeValue}-->`)
+    }else if (child.nodeType === 1){
+      await render(child, el._context,stream);
+    }
    };
+   if (!isSingle) {
+    stream(`</${el.tagName.toLowerCase()}>`)
+   }
   
 }
 
@@ -717,11 +1007,11 @@ const directives={
     'switch':Switch,
     'key':Key
 }
-
 export const startApp = async (html, context = {}, devlopment = false) => {
   const appContext = {
     context: context,
     stateContext: null,
+    stream:false
   };
   isDevelopment = devlopment;
   const app = new DOMParser();
@@ -731,9 +1021,9 @@ export const startApp = async (html, context = {}, devlopment = false) => {
   const div = body.firstElementChild; // Original app div
   const root = body.createElement('div'); // New root to track transformations
   root.appendChild(div?.cloneNode(true)); // Clone to preserve original structure
-
+const fakeStream=(html)=>{}
   await store.run(appContext, async () => {
-    await render(root.firstElementChild, context); // Render into cloned div
+    await render(root.firstElementChild, context,fakeStream); // Render into cloned div
   });
   return {
     element: root?.firstElementChild, // Return the transformed element
@@ -741,3 +1031,217 @@ export const startApp = async (html, context = {}, devlopment = false) => {
     head:body.head.innerHTML
   };
 };
+
+export const startStreamApp = async (html, context = {},stream,{templateStart,templateEnd}) => {
+  const appContext = {
+    context: context,
+    stateContext: null,
+    useServer:false,
+    batch:[],
+    stream:true
+  };
+  const app = new DOMParser();
+  
+  const body = app.parseFromString(html, 'text/html');
+  
+  const div = body.firstElementChild; // Original app div
+  
+  const root = body.createElement('div'); // New root to track transformations
+  root.appendChild(div?.cloneNode(true)); // Clone to preserve original structure
+  await store.run(appContext, async () => {
+    stream(templateStart)
+    stream('<div id="app">')
+    await render(root.firstElementChild, context,stream); // Render into cloned div
+    stream('</div>')
+    const batchs=store.getStore().batch
+  
+      // stream(`<script>console.log('first run') </script>`)
+      stream(`<script>
+        if (window?.__pawaDev && !window?.__pawaHasStarted) {
+        window?.__startClient()
+        window.__pawaHasStarted=true
+        __startClient=null
+      } </script>`)
+           // ===== RESOLVE BATCHED ASYNC COMPONENTS =====
+        let batch = store.getStore().batch;
+        let maxDepth = 10; // Prevent infinite loops
+        let depth = 0;
+        
+        while (batch.length > 0 && depth < maxDepth) {
+            // console.log(`Resolving batch depth ${depth}: ${batch.length} components`);
+            
+            // Clear the batch for this iteration
+            const currentBatch = [...batch];
+            store.getStore().batch = [];
+            
+            // Resolve all in parallel
+            await Promise.allSettled(
+  currentBatch.map(item => resolvesAsync({...item}, body, stream))
+);
+            
+            // Check if new async components were discovered
+            batch = store.getStore().batch;
+            depth++;
+        }
+        stream(`<script>
+            if (window?.__pawaDev && !window?.__pawaHasStarted && window?.__startClient !== null) {
+                window?.__startClient();
+                window.__pawaHasStarted = true;
+                __startClient = null;
+            } else {
+                window.__shouldStart = true;
+            }
+        </script>`);
+  });
+   const errors=__pawaDev.errors
+    const errorHtml = errors?.length ? `
+    <div pawa-avoid style="position:fixed; top:0; left:0; width:100vw; height:100vh; background-color:#1a1a1a; z-index:99999; overflow-y:auto; font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; padding:2rem; box-sizing:border-box;">
+      <h1 style="color:#ff6b6b; margin-top:0; border-bottom:1px solid #333; padding-bottom:1rem;">PawaJS Error Overlay</h1>
+      ${errors.map((err, i) => `
+        <div style="background-color:#242424; border:1px solid #333; border-radius:0.5rem; padding:1.5rem; margin-bottom:1.5rem; box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.5);">
+          <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem;">
+            <h2 style="color:#e0e0e0; margin:0; font-size:1.25rem;">${err.directives || 'Runtime Error'}</h2>
+            <span style="background-color:#333; color:#888; padding:0.25rem 0.5rem; border-radius:0.25rem; font-size:0.75rem;">Error #${i + 1}</span>
+          </div>
+          
+          <div style="margin-bottom:1rem;">
+            <p style="color:#ff8787; margin:0; font-weight:bold;">${err.msg}</p>
+          </div>
+
+          ${err.template ? `
+          <div style="margin-bottom:1rem;">
+            <h3 style="color:#888; font-size:0.875rem; text-transform:uppercase; margin:0 0 0.5rem 0;">Template Context</h3>
+            <pre style="background-color:#111; color:#a8a8a8; padding:1rem; border-radius:0.25rem; overflow-x:auto; margin:0; border:1px solid #333;"><code>${err.template.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</code></pre>
+          </div>
+          ` : ''}
+
+          <div>
+            <h3 style="color:#888; font-size:0.875rem; text-transform:uppercase; margin:0 0 0.5rem 0;">Stack Trace</h3>
+            <pre style="background-color:#111; color:#888; padding:1rem; border-radius:0.25rem; overflow-x:auto; margin:0; border:1px solid #333; font-size:0.875rem; line-height:1.5;"><code>${err.stack.split('\n').map(line => {
+              const escaped = line.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+              return escaped.replace(/((?:[a-zA-Z]:\\|\/)[^:)]+):(\d+):(\d+)/g, (match, path, l, c) => {
+                return `<a href="/__open-in-editor?file=${encodeURIComponent(path + ':' + l + ':' + c)}" onclick="event.preventDefault(); fetch(this.href);" style="color:#64b5f6; text-decoration:underline; cursor:pointer;">${match}</a>`
+              })
+            }).join('\n')}</code></pre>
+          </div>
+        </div>
+      `).join('')}
+    </div>
+    ` : ''
+    __pawaDev.errors=[]
+    stream(errorHtml)
+  stream(templateEnd)
+};
+
+const resolvesAsync=async({component,
+        id:id,
+        comment:{
+          encodeJSON,
+          name
+        },
+        appContext,context,restProps,hydrate},root,stream,index)=>{
+          let chunk=''
+          const bufferStream=(string)=>{
+            chunk+=string
+          }
+          bufferStream(`<div id="p${id}" hidden>`)
+      store.getStore().stateContext=appContext
+      const compo=await component.then((res)=>res)
+      const div=root.createElement('div')
+      let commentData=''
+      if(typeof compo !== 'boolean' && compo){
+      div.innerHTML=compo
+      }
+          const findElement=div.querySelector('[--]') || div.querySelector('[r-]')
+          if (findElement) {
+            for (const [key,value] of Object.entries(restProps)) {
+                findElement.setAttribute(value.name,value.value)
+              }
+              findElement.removeAttribute('--')
+              findElement.removeAttribute('r-')
+        }
+        
+        const newElement=div.firstElementChild
+        hydrate.data=null
+        if (appContext.serializeData) { // get serialized data 
+          for (const [key,value] of Object.entries(appContext.fromSerialized)) {
+            if (typeof value !== 'function') {
+              appContext.serialize[key]=value
+            }
+          }
+          hydrate.data=appContext.serialize
+        }
+        hydrate.context=[]
+          for (const [key] of Object.entries(appContext.insert)) {
+            hydrate.context.push(key)
+          }
+          commentData=`component+${id}+${name}+${encodeJSON(hydrate)}`
+        if (newElement) {
+         await render(newElement,{context,...appContext.insert},bufferStream)
+        }
+        bufferStream(`</div>`)
+        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)
+                }
+            });
+            p[1].childNodes.forEach(e => {
+              c.parentElement.insertBefore(e,ec)
+            });
+            if (window?.__pawaDev) {
+              window.__pawaStream(fc,p[0]._context,sc)
+            }
+            p[1].remove()
+              }
+            s${id}()
+            document.querySelector('.p${id}').remove()
+          </script>
+          `)
+        stream(chunk)  
+}
+
+function streamErrorFallback(id, stream) {
+    stream(`
+        <div hidden id="R${id}">
+            <div class="async-error">
+                <p>⚠️ Failed to load content</p>
+                <button onclick="location.reload()">Retry</button>
+            </div>
+        </div>
+        <script>
+            (function() {
+                try {
+                    var p = document.getElementById("p${id}");
+                    var r = document.getElementById("R${id}");
+                    if (p && r) {
+                        p.innerHTML = r.innerHTML;
+                        p.classList.add('error-state');
+                        r.remove();
+                    }
+                } catch (e) {
+                    console.error('Error handling fallback:', e);
+                }
+            })();
+        </script>
+    `);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pawa-ssr",
-  "version": "1.2.5",
+  "version": "1.2.6",
   "type":"module",
   "description": "pawajs ssr libary",
   "main": "index.js",

package/pawaElement.js

@@ -200,7 +200,10 @@ class PawaElement {
                   return prop
                   }
                   `,this._context,`setting props at ${attr.name} - ${attr.value} : ${this._template}`)
-                const name=attr.name.slice(1)
+                let name=attr.name.slice(1)
+                if(name.includes('-')){
+                     name=name.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+                }
                 this._props[name]=func
                 } catch (error) {
                   console.log(error.message,error.stack)

package/power.js

@@ -1,7 +1,7 @@
 import {render} from "./index.js";
 import { convertToNumber,evaluateExpr, processNode, reArrangeAttri, pawaGenerateId }  from "./utils.js";
 import {parseHTML}  from "linkedom"
-export const If = async(el, attr) => {
+export const If = async(el, attr,stream) => {
   if (el._running) return;
   el._running = true;
 
@@ -68,6 +68,7 @@ let latestChain
   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-')) {
@@ -103,18 +104,23 @@ let latestChain
     newElement.removeAttribute(latestChain.condition)
     newElement.setAttribute('pawa-same',true)
     endComment.parentElement.insertBefore(comment,endComment)
+    stream(`<!--${comment.data}-->`)
     store.setAttribute('p:store-if',id)
     store.setAttribute('p:store','')
     comment.parentElement.insertBefore(store,endComment)
+    stream(store.outerHTML)
     comment.parentElement.insertBefore(newElement,endComment)
-    await render(newElement, el._context);
+    await render(newElement, el._context,stream);
+    stream(`<!--${endComment.data}-->`)
   } else {
     
     template.setAttribute('pawa-render',true)
     endComment.replaceWith(template);
+    stream(`${template.outerHTML}`)
+    // await render(template, el._context,stream);
   }
 };
-export const Switch = async(el, attr) => {
+export const Switch = async(el, attr,stream) => {
   if (el._running) return;
   el._running = true;
 
@@ -184,6 +190,7 @@ const switchFunc=el._evaluateExpr(attr.value,el._context,`at switch directive ${
         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-')) {
@@ -220,19 +227,26 @@ const switchFunc=el._evaluateExpr(attr.value,el._context,`at switch directive ${
       store.setAttribute('p:store-switch',id)
       store.setAttribute('p:store','')
       endComment.parentElement.insertBefore(comment,endComment)
-      comment.parentElement.insertBefore(template,endComment)
+      stream(`<!--${comment.data}-->`)
+      comment.parentElement.insertBefore(store,endComment)
+      stream(store.outerHTML)
     comment.parentElement.insertBefore(newElement,endComment)
-    await render(newElement, el._context);
+    await render(newElement, el._context,stream);
+    stream(`<!--${endComment.data}-->`)
   } else {
     // If no case matches and no default, we just leave the comments
     template.setAttribute('pawa-render',true)
     endComment.parentElement.insertBefore(comment, endComment);
+    stream(`${template.outerHTML}`)
+    // stream(`<!--${comment.data}-->`)
     comment.parentElement.insertBefore(template, endComment);
+    // await render(template, el._context,stream);
     // No element rendered
+    // stream(`<!--${endComment.data}-->`)
   }
 };
 
-export const For=async(el,attr)=>{
+export const For=async(el,attr,stream)=>{
     if(el._running){
       return
     }
@@ -246,7 +260,6 @@ export const For=async(el,attr)=>{
     el.replaceWith(endComment)
     const hasKey=el.getAttribute('for-key')
     endComment.parentElement.insertBefore(comment,endComment)
-    
     // More robust split using regex to find the last occurrence of ' in ' or handle simple cases
     const match = value.match(/^(.*?) in (.*)$/);
     if (!match) throw new Error(`Invalid for loop syntax: ${value}`);
@@ -265,16 +278,20 @@ export const For=async(el,attr)=>{
     })
     
     const template=document.createElement('template')
-    template.appendChild(copyElement.cloneNode(true))
+    const storeClone = copyElement.cloneNode(true)
+    storeClone._avoidPawaRender = true
+    template.appendChild(storeClone)
     store.forEach(at=>{
       copyElement.setAttribute(at.name,at.value)
     })
     const componentAttr={}
     if(Array.isArray(array)){
       if (array.length > 0) {
+        stream(`<!--${comment.data}-->`)
         template.setAttribute('p:store-for',dirId)
         template.setAttribute('p:store','')
         endComment.parentElement.insertBefore(template,endComment)
+        stream(template.outerHTML)
         el.attributes.forEach(attri =>{
           if(attri.name.startsWith('c-')){
             componentAttr[attri.name]=attri.value
@@ -309,12 +326,15 @@ export const For=async(el,attr)=>{
             const endKeyComment=document.createComment(`endForKey@-$@-$@${dirId}@-$@-$@${key  || index}`)
             endComment.parentElement.insertBefore(endKeyComment,endComment)
             endKeyComment.parentElement.insertBefore(keyComment,endKeyComment)
+            stream(`<!--${keyComment.data}-->`)
             endKeyComment.parentElement.insertBefore(newElement,endKeyComment)
-            await render(newElement,itemContext)
+            await render(newElement,itemContext,stream)
+            stream(`<!--${endKeyComment.data}-->`)
         }
-
+        stream(`<!--${endComment.data}-->`)
       }else{
         template.setAttribute('pawa-render',true)
+        stream(`<template pawa-render="true">${el.outerHTML}</template>`)
         template.appendChild(el)
         comment.replaceWith(template)
         endComment.remove()
@@ -358,7 +378,7 @@ export const State=async(el,attr)=>{
   
 }
 
-export const Key=async(el,attr)=>{
+export const Key=async(el,attr,stream)=>{
   if(el._running){
       return
     }
@@ -370,6 +390,7 @@ export const Key=async(el,attr)=>{
     const comment=document.createComment(`key`)
     const endComment=document.createComment(`key`)
     const clone=el.cloneNode(true)
+    clone._avoidPawaRender = true
     const template=document.createElement('template')
     template.setAttribute('p:store-key',dirId)
     template.setAttribute('p:store','')
@@ -385,11 +406,14 @@ export const Key=async(el,attr)=>{
     endComment.parentElement.insertBefore(template,endComment)
     comment.data=`key(${func})@-$@-$@${dirId}`
     endComment.data=`key(${func})@-$@-$@${dirId}`
+    stream(`<!--${comment.data}-->`)
+    stream(template.outerHTML)
     el._replaceResumeAttr('key',`c-key-${dirId}`,typeof func === 'string'?`'${func}'`:func)
     el.removeAttribute(attr.name)
     const newElement=el.cloneNode(true)
      endComment.parentElement.insertBefore(newElement,endComment)
-     await render(newElement,el._context)
+     await render(newElement,el._context,stream)
+     stream(`<!--${endComment.data}-->`)
 }catch(error){
   console.error(error.message,error.stack)
    __pawaDev.setError({