pawa-ssr 1.3.22 → 1.3.24

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, lazyComponents } from "pawajs/index.js";
+import { pluginsMap, lazyComponents,components } from "pawajs/index.js";
 
 const PAWA_STORE_SYMBOL = Symbol.for('pawa.ssr.store');
 
@@ -216,10 +216,7 @@ setServer({
   forwardProps
 })
 export const pawaForServer=setServer
-const components = new Map();
-export const getPawaComponentsMap =()=>{
-  return components ;
-}
+
  const getStore=()=>{
   return store.getStore()
 }
@@ -1124,10 +1121,10 @@ export const render =async (el, contexts = {},stream) => {
           const compo=await component()
           if(compo[name]){
             
-            components.set(name,compo[name])
+            components.set(name.toUpperCase(),compo[name])
             el._component.component=compo[name]
             el._component.validPropRule=compo[name]?.validateProps || {};
-            lazyComponents.delete(el.tagName)
+            lazyComponents.delete(name.toUpperCase())
           }
           } catch (error) {
            throw new Error(`lazy component ${el.tagName} : Error from the component - ${error.message}`,error.message) 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pawa-ssr",
-  "version": "1.3.22",
-  "type":"module",
+  "version": "1.3.24",
+  "type": "module",
   "description": "pawajs ssr libary",
   "main": "index.js",
   "scripts": {

package/pawaElement.js

@@ -90,6 +90,7 @@ class PawaElement {
       this._el.setAttribute('p:C',this._resumeAttr)
     }
     pawaAttribute(){
+      const componentAllowedAttribute=['if','else-if','for-each','switch','case','key','s-default','else']
       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){
@@ -103,12 +104,14 @@ class PawaElement {
         if (this._el.hasAttribute('p:c')) {
           this._resumeAttr=this._el.getAttribute('p:c')
           this._el.attributes.forEach((value, index, array) => {
+            // if (this._componentName && !componentAllowedAttribute.includes(value.name)) return
             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._componentName && !componentAllowedAttribute.includes(value.name)) return
             if(this._resumeAttr.includes(value.name) || value.name === 'p:c' )return
             if (value.name.startsWith(':')) return
             this._resumeAttr+=`${value.name};`

package/power.js

@@ -1,298 +1,410 @@
-import { HTMLElement, parseHTML } from "linkedom"
-import {getPawaAttributes, getDevelopment } from "./index.js"
-import {components,lazyComponents} from 'pawajs/index.js'
-import PawaComponent from "./pawaComponent.js"
-import { evaluateExpr, splitAndAdd,replaceTemplateOperators } from "./utils.js"
+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;
 
-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','')
+  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;
         }
-      })
-    }
-        /** 
-        * @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        
+    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);
       }
-    }
-    setResumeAttr(name){
-      if(name.startsWith(':')) return
-      this._resumeAttr+=`${name};`
-      this._el.setAttribute('p:C',this._resumeAttr)
-    }
-    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'
-     }
+    });
+    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)
       }
-      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};`
-          })
+    })
+    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;
         }
-        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
+    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)
+      }
+    })
+    let newElement = el.cloneNode(true);
+    if (cases === latestChain.id) {
+      el._replaceResumeAttr(latestChain.condition,`c-sw-${id}`,latestChain.id)
+       newElement = el.cloneNode(true);
       }else{
-        ele.setAttribute(newName,value)
-        ele.setAttribute('p:c',`${newName};`)
+        el._replaceResumeAttr(latestChain.condition === 's-default'?'s-default':latestChain.condition ,`c-sw-${id}`,latestChain.id,copyElement)
+        newElement = copyElement;
       }
+      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
     }
-    reArrange(name,value,replace){
-      const newAttribute={}
-      if(this._arrangeAttribute){
-        this._el.attributes.forEach((value, index) => {
-          this._el.removeAttribute(value.name)
-        })
-        for (const [key,value] of Object.entries(this._arrangeAttribute)) {
-          if (key === replace) {
-            this._el.setAttribute(name,value)
-          }else{
-            this._el.setAttribute(key,value)
+    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
           }
-        }
-      }
-    }
-    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 =>{
+        })
+        el._replaceResumeAttr('for-each',`c-for`,dirId)
+        el.removeAttribute('for-each') 
         
-            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')
+        // 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
           }
-        }
-      }
-      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, 
-                 })
-                }
+          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)
               }
             }
-          })
+          }
+          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()
       }
-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(',');
-
-    let func = expressionCache.get(cacheKey);
-    if (!func) {
-      func = new Function(...keys, `
-        const require=null
-        return ${expr}`);
-      expressionCache.set(cacheKey, func);
     }
+    
+    } 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, 
+        })
+    }
+}
+
 
-    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 const State=async(el,attr)=>{
+  if (el._running) {
+    return
   }
-};
+  try {
+
+    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
+    }
+    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, 
+    })
 }
-export default PawaElement
+}

package/test/App.js

@@ -0,0 +1,9 @@
+export const App=({children})=>{
+    return `<div class="p-4">
+        <h1 class="text-2xl font-bold mb-4">Hello, World!</h1>
+        <p class="text-gray-700">This is a test component for PawaJS.</p>
+        <div>
+            ${children}
+        </div>
+    </div>`
+}

package/test/check.js

@@ -0,0 +1,13 @@
+export const Check=()=>{
+    return `<div class="p-4">
+        <h1 class="text-2xl font-bold mb-4">Hello, World!</h1>
+        <p class="text-gray-700">This is a test Checker</p>
+    </div>`
+}
+
+export const Check2=()=>{
+    return `<div class="p-4">
+        <h1 class="text-2xl font-bold mb-4">Hello, World!</h1> 
+        <p class="text-gray-700">This is a test Checker 2</p>
+    </div>`
+}

package/test/index.js

@@ -1,67 +1,18 @@
 import {useValidateComponent, RegisterComponent,useContext,useInsert,setContext} from 'pawajs'
 import {startApp} from '../index.js'
-const auth=setContext()
-const component=async({app,name})=>{
-  auth.setValue({name:name()})
-    const user=false
-    const array=['john','peace','james']
-    useInsert({user,array,name})
-    return `
-        <div>
-            <h1 title="@{user ? name():'Guest'}" -->
-                <span>@{name()}</span>
-                <span if="user">Allwell</span>
-                <span else>false</span>
-            </h1> 
-            <div s-for="items in array" s-pawa-avoid>
-                <span>@{items}</span>
-            </div> 
-            <small-app></small-app>      
-        </div>
-        `
-}
-const SmallApp=()=>{
-   const {name}=useContext(auth)
-   useInsert({name})
-    return /*html*/`
-    <div state-count="0">
-      <h1>Small App Component</h1>
-      <span>@{name}</span>
-      <h1>@{count.value}</h1>
-      <new-app></new-app>
-    </div>`
-}
-useValidateComponent(component,{
-    name:{
-        strict:true,
-        type:String
-    }
-})
-const NewApp=()=>{
-  return
-}
-RegisterComponent(component,SmallApp,NewApp)
-const html=()=>{
-    return `
-        <!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/pawajs.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>pawajs-template</title>
-  </head>
-  <body>
-    <div id="app">
-       <div>
-         <component :name="'Allwell'"></component>
-       </div>
+ RegisterComponent.lazy(
+  'App',()=>import('./App.js'),
+  'Check',()=>import('./check.js'),
+  'Check2',()=>import('./check.js'),
+)
 
-    </div>
-    <script type="module" src="/src/main.js"></script>
-  </body>
-</html>
-    `
-}
-const newHtml=await startApp(html(),{},true)
-console.log(await newHtml.toString())
+const app=`
+<div>
+  <app>
+    <check></check>
+    <check-2></check-2>
+  </app>
+</div>
+`
+const {toString}=await startApp(app)
+console.log(await toString());