pawa-ssr 1.3.16 → 1.3.18

package/index.js

@@ -1,11 +1,11 @@
 import {getServerInstance, setServer} from 'pawajs/server.js'
 import { DOMParser,parseHTML, HTMLElement} from 'linkedom'
 import PawaComponent from './pawaComponent.js'
-import { propsValidator, evaluateExpr,extractAtExpressions, reArrangeAttri,resumeAttribute, pawaGenerateId, escapeHtml } from './utils.js'
+import { propsValidator, evaluateExpr,extractAtExpressions, reArrangeAttri,resumeAttribute, pawaGenerateId, escapeHtml, splitAndAdd } from './utils.js'
 import {AsyncLocalStorage} from'node:async_hooks'
 import { If,For,State,Switch, Key } from'./power.js';
 import PawaElement from'./pawaElement.js'
-import { pluginsMap, lazyComponents } from "pawajs";
+import { pluginsMap, lazyComponents } from "/pawajs";
 
 const PAWA_STORE_SYMBOL = Symbol.for('pawa.ssr.store');
 
@@ -84,6 +84,18 @@ const accessChild=()=>{
     }
   }
 }
+const forwardProps=(props={})=>{
+  const appContext=store.getStore().stateContext
+  try {
+    if (appContext) {
+      appContext.restProps=Object.entries(props).length > 0 ? props : {bPAr:''}
+    }
+  } catch (error) {
+    if(isDevelopment){
+      console.log(error.message,'this is from component',error.stack)
+    }
+  }
+}
 const useServer=()=>{
   const appContext = store.getStore().stateContext;
   try{
@@ -200,7 +212,8 @@ setServer({
   $state,
   accessChild,
   useServer,
-  useAsync
+  useAsync,
+  forwardProps
 })
 export const pawaForServer=setServer
 const components = new Map();
@@ -231,7 +244,7 @@ const setPawaAttribute=(...attr)=>{
     pawaAttributes.add(att)
   })
 }
-setPawaAttribute('if','else','else-if','for-each','ref','key')
+setPawaAttribute('if','else','else-if','for-each','case','switch','s-default','for-key','key')
 export const getPawaAttributes=()=>pawaAttributes
 /**
  * @typedef {{startsWith:string,fullName:string,plugin:(el:HTMLElement | PawaElement,attr:object)=>void}} AttriPlugin
@@ -348,6 +361,7 @@ const component=async (el,stream)=>{
     let appContext={
       transportContext: {},
       innerContext:el._context,
+      restProps:{},
       mount:[],
       formerContext:oldAppContext,
       name:el._componentName,
@@ -454,9 +468,47 @@ appContext.component._prop={children,...el._props,...slots}
     if(typeof compo !== 'boolean' && typeof compo === 'string'){
       div.innerHTML=compo
       }
+        const restProps={}
+        if (Object.entries(appContext.restProps).length > 0) {
+          const props=el._restProps
+          if (appContext.restProps['className'] && props['class']) {
+            restProps['class']={...props['class']}
+          }
+          if (appContext.restProps['defaultValue'] && props['default']) {
+            restProps['default']={...props['default']}
+          }
+      for (const key in props) {
+        let name=key
+        name=name.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+        if (appContext.restProps[name]) {
+          restProps[key]={name:key,value:props[key]}
+        }
+      }
+    }else{
+      Object.assign(restProps,el._restProps)
+    }
+         const getAsChild=()=>{
+      const asChild=div.firstElementChild
+      if (splitAndAdd(asChild?.tagName|| '') === 'ASCHILD') {
+        const getChildren=asChild.firstElementChild
+        if (getChildren === null) return
+        Array.from(asChild.attributes).forEach(attr=>{
+          if (getChildren.hasAttribute(attr.name)) {
+            let attrName=getChildren.getAttribute(attr.name)
+            attrName=attr.value +' '+attrName
+            getChildren.setAttribute(attr.name, attrName)
+          }else{
+            getChildren.setAttribute(attr.name, attr.value)
+          }
+        })
+        asChild.remove()
+        div.appendChild(getChildren)        
+      }
+    }       
+    getAsChild()
           const findElement=div.querySelector('[--]') || div.querySelector('[r-]')
           if (findElement) {
-            for (const [key,value] of Object.entries(el?._restProps)) {
+            for (const [key,value] of Object.entries(restProps)) {
                 findElement.setAttribute(value.name,value.value)
               }
               findElement.removeAttribute('--')
@@ -539,6 +591,7 @@ const streamingComponent=async (el,stream)=>{
       transportContext: {},
       innerContext:el._context,
       mount:[],
+      restProps:{},
       formerContext:oldAppContext,
       name:el._componentName,
       insert:{},
@@ -645,6 +698,44 @@ appContext.component._prop={children,...el._props,...slots}
       },
       slots:{...slotHydrates},
     }
+    const restProps={}
+        if (Object.entries(appContext.restProps).length > 0) {
+          const props=el._restProps
+
+          if (appContext.restProps['className'] && props['class']) {
+            restProps['class']={...props['class']}
+          }
+          if (appContext.restProps['defaultValue'] && props['default']) {
+            restProps['default']={...props['default']}
+          }
+      for (const key in props) {
+        let name=key
+        name=name.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+        if (appContext.restProps[name]) {
+          restProps[key]={...props[key]}
+        }
+      }
+    }else{
+      Object.assign(restProps,el._restProps)
+    }
+    const getAsChild=(divs)=>{
+      const asChild=divs.firstElementChild
+      if (splitAndAdd(asChild?.tagName|| '') === 'ASCHILD') {
+        const getChildren=asChild.firstElementChild
+        if (getChildren === null) return
+        Array.from(asChild.attributes).forEach(attr=>{
+          if (getChildren.hasAttribute(attr.name)) {
+            let attrName=getChildren.getAttribute(attr.name)
+            attrName=attr.value +' '+attrName
+            getChildren.setAttribute(attr.name, attrName)
+          }else{
+            getChildren.setAttribute(attr.name, attr.value)
+          }
+        })
+        asChild.remove()
+        divs.appendChild(getChildren)        
+      }
+    }   
     if (isBoundary) {
       store.getStore().batch.push({
         component:compo,
@@ -656,8 +747,9 @@ appContext.component._prop={children,...el._props,...slots}
         },
         appContext:appContext,
         context:{...el._context},
-        restProps:el._restProps,
-        hydrate:hydrate
+        restProps:restProps,
+        hydrate:hydrate,
+        getAsChild:getAsChild
       })
       
     }
@@ -666,10 +758,12 @@ appContext.component._prop={children,...el._props,...slots}
     }
     if(typeof compo !== 'boolean' && typeof compo === 'string'){
       div.innerHTML=compo
-      }
+      }   
+            
+    getAsChild(div)
           const findElement=div.querySelector('[--]') || div.querySelector('[r-]')
           if (findElement) {
-            for (const [key,value] of Object.entries(el?._restProps)) {
+            for (const [key,value] of Object.entries(restProps)) {
                 findElement.setAttribute(value.name,value.value)
               }
               findElement.removeAttribute('--')
@@ -837,6 +931,9 @@ const attributeHandler =async (el, attr) => {
   if (el._running) {
     return;
   }
+  if (el._componentName) {
+    return
+  }
   el._replaceResumeAttr(attr.name,`c-at-${attr.name}`,attr.value)
   const currentHtmlString = el.outerHTML;
   const removableAttributes = new Set();
@@ -970,13 +1067,14 @@ export const render =async (el, contexts = {},stream) => {
         console.error(error.message,error.stack)
       }
     }
+    const isAcomponent=el._componentName?true:false
     if (!el._avoidPawaRender) {
       
       const attributes = Array.from(el.attributes);
       for(const attr of attributes){
         if (directives[attr.name]) {
           await directives[attr.name](el,attr,stream)  
-        }else if(attr.value.includes('@{')){
+        }else if(attr.value.includes('@{') && !isAcomponent){
           await  attributeHandler(el,attr)
         }else if (attr.name.startsWith('state-')) {
           directives['state-'](el,attr)
@@ -1213,7 +1311,7 @@ const resolvesAsync=async({component,
           encodeJSON,
           name
         },
-        appContext,context,restProps,hydrate},root,stream,index)=>{
+        appContext,context,restProps,hydrate,getAsChild},root,stream,index)=>{
           let chunk=''
           const bufferStream=(string)=>{
             chunk+=string
@@ -1226,6 +1324,7 @@ const resolvesAsync=async({component,
       if(typeof compo !== 'boolean' && compo){
       div.innerHTML=compo
       }
+        getAsChild(div)
           const findElement=div.querySelector('[--]') || div.querySelector('[r-]')
           if (findElement) {
             for (const [key,value] of Object.entries(restProps)) {

package/package.json

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

package/pawaElement.js

@@ -186,7 +186,10 @@ class PawaElement {
         if (this._componentName) {
          const allServerAttr=getPawaAttributes()
           this._el.attributes.forEach(attr=>{
-            if(!allServerAttr.has(attr.name) ){
+            if(!allServerAttr.has(attr.name)){
+              if (attr.name === 'svg') {
+               return
+              }
               if ( !attr.name.startsWith(':')) {
                 if( attr.name.startsWith('c-') || attr.name.startsWith('p:c') || attr.name.startsWith('state-')) return
                 let name=''
@@ -195,30 +198,27 @@ class PawaElement {
                 }else{
                   name=attr.name
                 }
+                let hydatename
+                if(name === 'class'){
+                 hydatename=':'+'className'
+                }else if(name === 'default'){
+                 hydatename=':'+'defaultValue'
+                }else{
+                 hydatename=':'+name
+                }
+                this._hydrateProps[hydatename]=attr.value
                 const setProps=()=>{
-                  this._hydrateProps[name]=attr.value
-                 delete this._restProps[name]
-                 let hydatename
-                 if(name === 'class'){
-                  hydatename=':'+'className'
-                 }else if(name === 'default'){
-                  hydatename=':'+'defaultValue'
-                 }else{
-                  hydatename=':'+name
-                 }
                   let value=attr.value
                  if (value.includes('@{')) {
                    const regex = /@{([^}]*)}/g;
                  value = value.replace(regex, (match, expression) => {
-                     if (checkKeywordsExistence(this._staticContext, expression)) {
-                         return value
-                     } else {
+                     
                          const res = this.evaluateExpr(expression,this._context,`evaluating props with template operators at ${attr.name} - ${attr.value} : ${this._template}`)
                          return res
-                     }
+                     
                  });
                  return value
-                 }else if( attr.name.startsWith('on-') || attr.name.startsWith('out-')){
+                 }else if( attr.name.startsWith('on-') || attr.name.startsWith('out-') || attr.name === 'ref'){
                   const res=this.evaluateExpr(`(e)=>{
                     ${attr.value}
                   }`, this._context,`evaluating props with template operators at ${attr.name} - ${attr.value} : ${this._template}`)
@@ -226,8 +226,10 @@ class PawaElement {
                  }
                  return attr.value
                 }
+                
+                this._restProps[name]={name:name,value:attr.value}
                 name=name.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
-                if (this._props[name] || this._props.className || this._props.defaultValue) return
+                if (this._props[name] || name ==='class' && this._props?.className || name ==='default' && this._props.defaultValue) return
                 if (name === 'class') {
                   this._props['className']=setProps
                 }else if(name === 'default'){
@@ -235,8 +237,6 @@ class PawaElement {
                 }else{
                   this._props[name]=setProps
                 }
-
-                this._restProps[name]={name:name,value:attr.value}
                 
               } else if(attr.name.startsWith(':')) {
                 this._hydrateProps[attr.name.slice(1)]=attr.value

package/power.js

@@ -1,410 +1,298 @@
-import {render} from "./index.js";
-import { convertToNumber,evaluateExpr, processNode, reArrangeAttri, pawaGenerateId }  from "./utils.js";
-import {parseHTML}  from "linkedom"
-export const If = async(el, attr,stream) => {
-  if (el._running) return;
-  el._running = true;
+import { HTMLElement, parseHTML } from "linkedom"
+import {getPawaAttributes, getDevelopment } from "./index.js"
+import {components,lazyComponents} from '/pawajs'
+import PawaComponent from "./pawaComponent.js"
+import { evaluateExpr, splitAndAdd,replaceTemplateOperators } from "./utils.js"
 
-  const nextSiblings = el.nextElementSibling || null;
-   const chained=[{
-        exp:el.getAttribute('if'),
-        condition:'if',
-        element:el
-    }]
-    const chainMap=new Map()
-    chainMap.set(el.getAttribute('if'),{condition:'if',element:el})
-    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;
+const expressionCache = new Map();
+// changed the hydrateProps 
+
+class PawaElement {
+  /**
+   * 
+   * @param {HTMLElement} element 
+   * @param {object} context 
+   */
+    constructor(element,context) {
+      const {document}=parseHTML()
+      /**
+       * @type{PawaElement|HTMLElement}
+       */
+        this._el=element
+        this._slots=document.createDocumentFragment()
+        this._context=context
+        this._avoidPawaRender=element.hasAttribute('s-pawa-avoid')
+        this._client=element.hasAttribute('client')
+        this._props={}
+        this._template=element.outerHTML
+        this._component=null
+        this._componentName=''
+        this._thisSame=element.hasAttribute('pawa-same')
+        this._arrangeAttribute={}
+        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
+        this._setError=this.setError
+        this._hydrateProps={}
+        this._resumeAttr=''
+        this._evaluateExpr=this.evaluateExpr
+        this._reArrangeAttri=this.reArrange
+        this._replaceResumeAttr=this.replaceResumeAttr
+        this._setResumeAttr=this.setResumeAttr
+        if(this._avoidPawaRender){
+      element.removeAttribute('s-pawa-avoid')
+      Array.from(element.children).forEach((child) => {
+        if (child.nodeType === 1) {
+          child.setAttribute('s-pawa-avoid','')
         }
+      })
     }
-    getChained(nextSiblings)
-let func=new Map()
-let current
-let latestChain
-  chained.forEach((item)=>{
-       if(item.condition === 'else' || current)return
-       const result = el._evaluateExpr(item.exp, el._context,`at condition  directives check - ${item.exp} at ${item.element.toString()}`);
-       current=result
-       if (current) {
-            latestChain={
-                id:item.exp,
-                condition:item.condition
-            }
-         }else{
-             latestChain={
-                 id:'else',
-                 condition:'else'
-             }
-         }
-       
-   })
-  const document=el.ownerDocument
-  const id=pawaGenerateId(10)
-  const comment=document.createComment(`condition(${latestChain.id})@-$@-$@${id}`)
-  const endComment=document.createComment(`end condition(${latestChain.id})@-$@-$@${id}`)
-  el.replaceWith(endComment);
-  let stringHtml=''
-  const template=document.createElement('template')
-  const store=document.createElement('template')
-  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)
-    copyElement.attributes.forEach((att)=>{
-      if(att.name.startsWith('c-')){
-        copyElement.removeAttribute(att.name)
+        /** 
+        * @typedef{object}
+        * @property{any} 
+        * Object of Html Attributes for Rest Attributes
+        */
+        this._restProps={}
+        this._componentChildren=null
+        this.getComponent()
+        this.setProps()
+        this.pawaAttribute()
+    }
+    /**
+     * 
+     * @param {HTMLElement} el 
+     * @param {object} context 
+     * @returns {PawaElement}
+     */
+    static Element(el,context){
+        const pawa=new PawaElement(el,context)
+        Object.assign(el,pawa)
+        return el   
+    }
+    attributes(){
+      this._el.attributes.forEach((value, index,) => {
+        this._arrangeAttribute[value.name]=value.value
+      })
+    }
+    checkLazy(){
+      if (lazyComponents.has(splitAndAdd(this._el.tagName))) {
+        this._lazy=true        
       }
-    })
-    const dataComment=document.createComment(stringHtml)
-    let newElement = el.cloneNode(true);
-    if (attr.value === latestChain.id) {
-      el._replaceResumeAttr('if',`c-if-${id}`,latestChain.id)
-      newElement = el.cloneNode(true);
-    }else{
-      el._replaceResumeAttr('if',`c-if-${id}`,latestChain.id,copyElement)
-      newElement = copyElement;
     }
-    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,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,stream) => {
-  if (el._running) return;
-  el._running = true;
-
-  const nextSiblings = el.nextElementSibling || null;
-  const cases =el.getAttribute('case')
-  const chained=[{
-        exp:el.getAttribute('case'),
-        condition:'case',
-        element:el
-    }]
-    const chainMap=new Map()
-    chainMap.set(el.getAttribute('case'),{condition:'case',element:el})
-    const getChained = (sibling) => {
-        while (sibling) {
-            const next = sibling.nextElementSibling;
-            const isCase = sibling.hasAttribute('case') && !sibling.hasAttribute('switch');
-            const isDefault = sibling.hasAttribute('s-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;
-        }
+    setResumeAttr(name){
+      if(name.startsWith(':')) return
+      this._resumeAttr+=`${name};`
+      this._el.setAttribute('p:C',this._resumeAttr)
     }
-    getChained(nextSiblings)
-let func=new Map()
-let current
-let latestChain
-const switchFunc=el._evaluateExpr(attr.value,el._context,`at switch directive ${attr.value}`)
-  chained.forEach((item)=>{
-       if(item.condition === 'default' || current)return
-       const result = switchFunc === el._evaluateExpr(item.exp, el._context,`at condition  directives check case - ${item.exp} ${item.element.toString()}`);
-       current=result
-       if (current || item.condition === 'default') {
-            latestChain={
-                id:item.exp,
-                condition:item.condition
-            }
-         }else{
-           latestChain={
-             id:'default',
-             condition:'default'
-             }
-         }
-       
-        })
-        const document=el.ownerDocument
-        const id=pawaGenerateId(10)
-        const comment=document.createComment(`switch case (${latestChain.id})@-$@-$@${id}`)
-        const endComment=document.createComment(`end switch(${latestChain.id})@-$@-$@${id}`)
-        el.replaceWith(endComment);
-        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;
-          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')) {
-    const copyElement=getRightElement.element.cloneNode(true)
-
-    copyElement.attributes.forEach((att)=>{
-      if(att.name.startsWith('c-')){
-        copyElement.removeAttribute(att.name)
+    pawaAttribute(){
+      const pawaAttr=getPawaAttributes()
+      const setTextResume=()=>{
+        if( this._componentName === ''&& this._el.firstElementChild === null && this._el.childNodes.some(node=>node.nodeType === 3 && node.nodeValue.includes('@{')) && !this._avoidPawaRender){
+        return this._resumeAttr+='c-t'
+     }
       }
-    })
-    let newElement = el.cloneNode(true);
-    if (cases === latestChain.id) {
-      el._replaceResumeAttr(latestChain.condition,`c-sw-${id}`,latestChain.id)
-       newElement = el.cloneNode(true);
+      if (this._thisSame) {
+        this._resumeAttr=this._el.getAttribute('p:c')
+        this._el.removeAttribute('pawa-same')
+      }else {
+        if (this._el.hasAttribute('p:c')) {
+          this._resumeAttr=this._el.getAttribute('p:c')
+          this._el.attributes.forEach((value, index, array) => {
+            if(this._resumeAttr.includes(value.name) || value.name === 'p:c')return
+            if (value.name.startsWith(':')) return
+            this._resumeAttr+=`${value.name};`
+          })
+        }else{
+              this._el.attributes.forEach((value, index, array) => {
+            if(this._resumeAttr.includes(value.name) || value.name === 'p:c' )return
+            if (value.name.startsWith(':')) return
+            this._resumeAttr+=`${value.name};`
+          })
+        }
+        setTextResume()
+      }
+      this._el.setAttribute('p:c',this._resumeAttr)
+    }
+    replaceResumeAttr(name,newName,value,ele){
+      if (ele === undefined) {
+        this._el.setAttribute(newName,value)
+        const array=this._resumeAttr.split(';')
+        const index=array.indexOf(name,0)
+        array[index]=newName
+        const toString=array.join(';')
+        this._el.setAttribute('p:c',toString)
+        this._resumeAttr=toString
       }else{
-        el._replaceResumeAttr(latestChain.condition === 's-default'?'s-default':latestChain.condition ,`c-sw-${id}`,latestChain.id,copyElement)
-        newElement = copyElement;
+        ele.setAttribute(newName,value)
+        ele.setAttribute('p:c',`${newName};`)
       }
-      newElement.removeAttribute(latestChain.condition)
-      newElement.setAttribute('pawa-same',true)
-      store.setAttribute('p:store-switch',id)
-      store.setAttribute('p:store','')
-      endComment.parentElement.insertBefore(comment,endComment)
-      stream(`<!--${comment.data}-->`)
-      comment.parentElement.insertBefore(store,endComment)
-      stream(store.outerHTML)
-    comment.parentElement.insertBefore(newElement,endComment)
-    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,stream)=>{
-    if(el._running){
-      return
     }
-    el._running=true
-    try {
-    const value=attr.value
-    const document=el.ownerDocument
-    const dirId=pawaGenerateId(10)
-    const comment=document.createComment(`for(${value})@-$@-$@${dirId}`)
-    const endComment=document.createComment(`endfor(${value})@-$@-$@${dirId}`)
-    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}`);
-    const [_, itemPart, arrayName] = match;
-    const arrayItems=itemPart.split(',')
-    const arrayItem=arrayItems[0].trim()
-    const indexes=arrayItems[1]
-    const array=el._evaluateExpr(arrayName,el._context,`at for directives check - ${attr.value}`)
-    const copyElement=el.cloneNode(true)
-    const store=[]
-    Array.from(copyElement.attributes).forEach(at=>{
-      if (at.name.startsWith('c-')) {
-        store.push(at)
-        copyElement.removeAttribute(at.name)
-      }                         
-    })
-    
-    const template=document.createElement('template')
-    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
-          }
+    reArrange(name,value,replace){
+      const newAttribute={}
+      if(this._arrangeAttribute){
+        this._el.attributes.forEach((value, index) => {
+          this._el.removeAttribute(value.name)
         })
-        el._replaceResumeAttr('for-each',`c-for`,dirId)
-        el.removeAttribute('for-each') 
+        for (const [key,value] of Object.entries(this._arrangeAttribute)) {
+          if (key === replace) {
+            this._el.setAttribute(name,value)
+          }else{
+            this._el.setAttribute(key,value)
+          }
+        }
+      }
+    }
+    hasForOrIf(){
+        if (this._el.getAttribute('if') || this._el.getAttribute('for-each') || this._el.getAttribute('else') || this._el.getAttribute('else-if')) {
+          return true
+        }else{
+          return false
+        }
+      }
+      
+      getComponent(){
+        if (components.has(splitAndAdd(this._el.tagName.toUpperCase())) && !this._client || this._lazy) {
+          this._componentName=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 =>{
         
-        // Fix: Use for...of to ensure await works correctly in SSR
-        for (const [index, item] of array.entries()) {
-          const context=el._context
-          const itemContext = {
-            [arrayItem]: item,
-            [indexes]: index,
-            ...context
+            if (slot.tagName === 'TEMPLATE' && slot.getAttribute('prop')) {
+              
+              this._slots.appendChild(slot)
+            }
+          })
+          this._componentChildren=this._el.innerHTML
+        }else{
+          if(this._el.hasAttribute('only-client')){
+            this._el.removeAttribute('only-client')
           }
-          itemContext[arrayItem]=item
-          const newElement=el.cloneNode(true)
-          if(index !== 0){
-            newElement.removeAttribute('c-for')
-            for (const [key,value] of Object.entries(componentAttr)) {
-              if(newElement.hasAttribute(key)){ //removing element with resuming attri from second -- for element
-                newElement.removeAttribute(key)
+        }
+      }
+      setError(){
+        if (getDevelopment() && this._error.length > 0) {
+          this._el.setAttribute('ssr-error',JSON.stringify(this._error))
+        }
+      }
+      createError({message,stack}){
+        this._error.push({message,stack})
+      }
+     //set Component props
+      setProps(){
+        if (this._componentName) {
+         const allServerAttr=getPawaAttributes()
+          this._el.attributes.forEach(attr=>{
+            if(!allServerAttr.has(attr.name)){
+              if ( !attr.name.startsWith(':')) {
+                if( attr.name.startsWith('c-') || attr.name.startsWith('p:c') || attr.name.startsWith('state-')) return
+                let name=''
+                if (attr.name.startsWith('-')) {
+                  name=attr.name.slice(1)
+                }else{
+                  name=attr.name
+                }
+                let hydatename
+                if(name === 'class'){
+                 hydatename=':'+'className'
+                }else if(name === 'default'){
+                 hydatename=':'+'defaultValue'
+                }else{
+                 hydatename=':'+name
+                }
+                this._hydrateProps[hydatename]=attr.value
+                const setProps=()=>{
+                  let value=attr.value
+                 if (value.includes('@{')) {
+                   const regex = /@{([^}]*)}/g;
+                 value = value.replace(regex, (match, expression) => {
+                     
+                         const res = this.evaluateExpr(expression,this._context,`evaluating props with template operators at ${attr.name} - ${attr.value} : ${this._template}`)
+                         return res
+                     
+                 });
+                 return value
+                 }else if( attr.name.startsWith('on-') || attr.name.startsWith('out-') || attr.name === 'ref'){
+                  const res=this.evaluateExpr(`(e)=>{
+                    ${attr.value}
+                  }`, this._context,`evaluating props with template operators at ${attr.name} - ${attr.value} : ${this._template}`)
+                  return res
+                 }
+                 return attr.value
+                }
+                
+                this._restProps[name]={name:name,value:attr.value}
+                name=name.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+                if (this._props[name] || name ==='class' && this._props?.className || name ==='default' && this._props.defaultValue) return
+                if (name === 'class') {
+                  this._props['className']=setProps
+                }else if(name === 'default'){
+                  this._props['defaultValue']=setProps
+                }else{
+                  this._props[name]=setProps
+                }
+                
+              } else if(attr.name.startsWith(':')) {
+                this._hydrateProps[attr.name.slice(1)]=attr.value
+                if(attr.value === '') attr.value=true;
+                try {
+                  const func = this.evaluateExpr(`()=>{
+                  const prop= ${replaceTemplateOperators(attr.value)};
+                  if(prop === '')return prop
+                  return prop
+                  }
+                  `,this._context,`setting props at ${attr.name} - ${attr.value} : ${this._template}`)
+                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)
+                __pawaDev.setError({ 
+                    el:this._el, 
+                    msg:`errors while setting props at runtime ${error.message}`, 
+                    directives:'setting props', 
+                    stack:error.stack, 
+                    template:el?._template, 
+                 })
+                }
               }
             }
-          }
-          newElement.setAttribute('pawa-same',true)
-          processNode(newElement,itemContext)
-          
-            const key=newElement.getAttribute('for-key')
-            const keyComment=document.createComment(`forKey@-$@-$@${dirId}@-$@-$@${key || index}`)
-            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,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()
       }
-    }
-    
-    } catch (error) {
-      console.error(error.message,error.stack)
-       __pawaDev.setError({ 
-           el:el, 
-           msg:`error from for-each ${attr.value}`+ error.message + error.stack, 
-           directives:'for-each', 
-           stack:error.stack, 
-           template:el?._template, 
-        })
-    }
-}
-
-
-export const State=async(el,attr)=>{
-  if (el._running) {
-    return
-  }
+evaluateExpr(expr, context = {},error){
   try {
+    const keys = Object.keys(context);
+    // Create a cache key based on the expression and the available context keys
+    // We sort keys to ensure consistent cache hits regardless of key order
+    const cacheKey = expr + '|||' + keys.sort().join(',');
 
-    const name=attr.name.split('-')[1]
-    el._replaceResumeAttr(attr.name,`c-$-${name}`,attr.value)
-    el.removeAttribute(attr.name)
-    const result=el._evaluateExpr(attr.value,el._context,`at state directive ${attr.name}=${attr.value}`)
-    // el.setAttribute(`resume-state-${name}`,attr.value)
-    el._context[name]={value:result}
-  } catch (error) {
-    console.log(error.message,error.stack)
-     __pawaDev.setError({ 
-           el:el, 
-           msg:`error from state ${attr.name} : ${attr.value}`+ error.message + error.stack, 
-           directives:el.tagName, 
-           stack:error.stack, 
-           template:el?._template, 
-        })
-  }
-  
-}
-
-export const Key=async(el,attr,stream)=>{
-  if(el._running){
-      return
+    let func = expressionCache.get(cacheKey);
+    if (!func) {
+      func = new Function(...keys, `
+        const require=null
+        return ${expr}`);
+      expressionCache.set(cacheKey, func);
     }
-    el._running=true
-    try {
-    const value=attr.value
-    const document=el.ownerDocument
-    const dirId=pawaGenerateId(10)
-    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','')
-    Array.from(clone.attributes).forEach(at => {
-      if (at.name.startsWith('c-') || at.name === 'p:c') {
-        clone.removeAttribute(at.name);
-      }
-    });
-    template.appendChild(clone)
-    el.replaceWith(endComment)
-    endComment.parentElement.insertBefore(comment,endComment)
-    const func=el._evaluateExpr(attr.value,el._context,`error at Key - ${attr.name} = ${attr.value}`)
-    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,stream)
-     stream(`<!--${endComment.data}-->`)
-}catch(error){
-  console.error(error.message,error.stack)
-   __pawaDev.setError({ 
-       el:el, 
-       msg:`error from Key at ${attr.value}`+ error.message + error.stack, 
-       directives:el.tagName, 
-       stack:error.stack, 
-       template:el?._template, 
-    })
+
+    const values = keys.map((key) => context[key]);
+    return func(...values);
+  } catch (err) {
+    console.error(`Evaluation failed for: ${expr}`,error,err.message,err.stack);
+    __pawaDev.setError({ 
+         el:this._el, 
+         msg:`${error} ${err.message}`, 
+         directives:'expression', 
+         stack:err.stack, 
+         template:this._el?._template, 
+      })
+    return null;
+  }
+};
 }
-}
+export default PawaElement

package/utils.js

@@ -156,7 +156,26 @@ export const propsValidator=(obj={},propsAttri,name,template,el)=>{
       if(propsAttri[key] || propsAttri[key] === 0){
         const checker=ComponentProps(propsAttri[key],value?.err,name)
         if (value.type) {
-        checker[value.type.name]()
+          if (Array.isArray(value.type)) {
+            let isValid = false
+            for (const type of value.type) {
+              try {
+                checker[type.name]()
+                isValid = true
+                break
+              } catch (error) {}
+            }
+            if (!isValid) {
+              const types = value.type.map(t => t.name).join(' or ')
+              throw new Error(value?.err ? value.err : `${key} must be type of ${types} at ${name} component`);
+            }
+          } else {
+            try {
+              checker[value.type.name]()
+            } catch (error) {
+              throw new Error(value?.err ? value.err : `${key} must be type of ${value.type.name} at ${name} component`);
+            }
+          }
         }
       }else{
         if (value.strict) {