pawajs-continue 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Allisboy
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,58 @@
+# pawajs-continue
+
+The **Continuity Rendering Model (CRM)** for [Pawajs](https://github.com/Allisboy/pawajs).
+
+`pawajs-continue` handles the client-side hydration (resumption) of applications server-rendered with `pawa-ssr`. It picks up where the server left off, attaching event listeners and reactivity to the existing DOM without expensive re-renders.
+
+## Features
+
+-   **Resumability**: Hydrates components, state, and directives from server-rendered HTML.
+-   **Lightweight**: Only loads what is necessary to make the page interactive.
+-   **Seamless Integration**: Designed to work out-of-the-box with `pawajs` and `pawa-ssr`.
+
+## Installation
+
+```bash
+npm install pawajs-continue
+```
+
+## Usage
+
+In your client-side entry point (e.g., `main.js` or `app.js`), import `initiateResumer` and call it before starting the Pawajs app.
+
+```javascript
+import { isServer } from "pawajs/server";
+import { RegisterComponent, pawaStartApp } from "pawajs";
+import { initiateResumer } from "pawajs-continue";
+import { App } from "./App.js";
+
+// Register your root component and others
+RegisterComponent(App);
+
+if (!isServer()) {
+    const app = document.getElementById('app');
+    
+    // 1. Initialize the continuity engine
+    initiateResumer();
+    
+    // 2. Start the app (hydrates the existing DOM)
+    pawaStartApp(app);
+}
+```
+
+## How it Works
+
+1.  **Server-Side**: `pawa-ssr` renders the HTML and embeds serialized data (props, state, context) into comments within the DOM.
+2.  **Client-Side**: `pawajs-continue` scans the DOM during the `pawaStartApp` process.
+3.  **Continuity**: Instead of creating new DOM elements, it continues by reading he markers or the serialized data, restores the state, and attaches reactive effects to the existing elements from the server rendering.
+
+## API
+
+### `initiateResumer()`
+
+Initializes the hydration logic for attributes, text, loops (`for-each`), conditionals (`if`), and components. This must be called before `pawaStartApp` on the client.
+
+## Related Packages
+
+-   **pawajs**: The core reactive framework.
+-   **pawa-ssr**: The server-side rendering engine.

package/component.js

@@ -0,0 +1,250 @@
+import { components,keepContext,render,getCurrentContext } from "pawajs/index.js"
+import { PawaElement, PawaComment } from "pawajs/pawaElement.js"
+import  PawaComponent  from "pawajs/pawaComponent.js"
+import { createEffect } from "pawajs/reactive.js"
+import { setProps } from "./utils.js"
+import {propsValidator} from 'pawajs/utils.js'
+export const resume_component=(el,attr,setStateContext,mapsPlugin,formerStateContext,
+  pawaContext,stateWatch,{comment,endComment,children,name,id,serialized})=>{
+el.removeAttribute(attr.name)
+el._running=true  
+    let appContext={
+        _transportContext:{},
+        _formerContext:formerStateContext,
+        _reactiveProps:{},
+        _template:'',
+        _transportContext:{},
+        _elementContext:{},
+        _hasRun:false,
+        _static:[],
+        _serializedData:{}
+    }
+    /**
+     * @param {HTMLElement} node
+     */
+    try{
+const oldState=getCurrentContext()
+        
+        PawaComment.Element(comment)
+        const compo=components.get(name)
+        const binary = atob(serialized.replace(/-/g, '+'));
+        const bytes = Uint8Array.from(binary, c => c.charCodeAt(0));
+        const json = new TextDecoder('utf-8').decode(bytes);
+      
+        const props = JSON.parse(json);
+        const prop={
+            children:props.children
+    }
+    /**
+     * @type {PawaElement | HTMLElement}
+     */
+    const element=document.createElement(name)
+    PawaElement.Element(element,el._context)
+    element._underControl=comment
+        comment._componentElement=element
+        comment._controlComponent=true
+        comment._endComment=endComment
+        if(props?.data){
+          Object.assign(element._context,props.data)
+        }
+        comment.data=`<${name}>`
+        endComment.data=`</${name}>`
+    if(!compo){
+      
+        const fakeComponent=new PawaComponent(()=>null)
+         const stateContexts=setStateContext(fakeComponent)
+         stateContexts._resume=true
+        stateContexts._prop={children:'',...props._props}
+        stateContexts._static=[...stateContexts._static,...props.context]
+        if(props?.data){
+          Object.assign(element._context,props.data)
+        }
+        stateContexts._elementContext={...element._context}
+            const number={notRender:null,index:null}
+        children.forEach((value, index) => {
+          number.index=index
+          if(number.notRender && index <= number.notRender) return
+          render(value,element._context,number,attr.name)
+        })
+        stateContexts._hasRun=true
+        keepContext(stateContexts._formerContext)
+        return
+      }
+    // props setter 
+    let isStatic=false
+    for (const [key,value] of Object.entries(props.props)) {
+        const attr={
+            name:key,
+            value:value
+        }
+        if(!isStatic){
+            const resStatic=setProps(el._context,attr,prop,element)
+            isStatic=resStatic.static
+        }
+    }
+    if(isStatic){
+        const fakeComponent=new PawaComponent(()=>null)
+         const stateContexts=setStateContext(fakeComponent)
+         stateContexts._resume=true
+          if(props?.data){
+          Object.assign(element._context,props.data)
+        }
+         stateContexts._prop={children:'',...props._props}
+            stateContexts._elementContext={...element._context}
+            stateContexts._static=[...stateContexts._static,...props.context]
+        const number={notRender:null,index:null}
+        
+        children.forEach((value, index) => {
+          number.index=index
+          if(number.notRender && index <= number.notRender) return
+          render(value,element._context,number)
+        })
+        stateContexts._hasRun=true
+            keepContext(stateContexts._formerContext)
+        return
+    }
+    for (const [key,value] of Object.entries(props.slots)) {
+        prop[key]=()=>value
+    }
+    el._isKill=true
+            el._kill=()=>{
+               pawaWayRemover(comment,endComment)
+              comment.remove(),endComment.remove();
+             }
+    element._props=prop
+    let isIndex=0
+    //props setter
+    const validprops=element._component.validPropRule
+    let done=true
+    if(validprops && Object.entries(validprops).length > 0){
+      done= propsValidator(validprops,{...element._props},element._componentName,element._template,element)
+    }
+    element._componentTerminate=() => {
+      comment._terminateByComponent(endComment)
+    }
+    const apps={
+        children:prop.children,
+        ...element._props
+    }
+        const component =element._component
+        const stateContexts=setStateContext(component)
+        stateContexts._resume=true
+        stateContexts._prop={children:props.children,...element._props}
+            stateContexts._elementContext={...element._context}
+            stateContexts._name=element._componentName
+            stateContexts._template=element._template
+            stateContexts._recallEffect=()=>{
+              
+            }
+            stateContexts._serializedData=props.data
+            let isAwait=false
+            if(done){
+                const compoCall=component.component(apps)
+                 isAwait=compoCall instanceof Promise
+            if( isAwait){
+              const storeContext=stateContexts
+              compoCall.then((res)=>{
+                if (storeContext._hasRun) {
+                    storeContext._hasRun = false
+                  }
+                  keepContext(storeContext)
+                  if (storeContext?._insert) {
+                    Object.assign(element._context,storeContext._insert)
+                }
+                childInsert()
+                lifeCircle()
+                storeContext._hasRun=true
+              })
+            }else{
+              Object.assign(element._context,stateContexts._insert)
+            }
+          }
+          if (component?._insert) {
+            
+            Object.assign(element._context,component._insert)
+            // console.log(el,el._context)
+          }
+            const childInsert=()=>{
+              element._component?._hook?.beforeMount?.forEach((bfm) => {
+             const result= bfm(comment)
+             if (typeof result === 'function') {
+               element._unMountFunctions.push(result)
+             }
+            })
+            
+            element._component?._hook?.isMount.forEach((hook) => {
+                element._MountFunctions.push(hook)
+            })
+            element._component?._hook?.isUnMount.forEach((hook) => {
+                element._unMountFunctions.push(hook)
+            })
+            const number={notRender:null,index:null}
+        children.forEach((value, index) => {
+          isIndex++
+          if(value.hasAttribute(attr.name)) value.removeAttribute(attr.name);
+          number.index=index
+          if(number.notRender && index <= number.notRender){
+            return
+          } 
+          render(value,element._context,number,attr.name)
+        })
+            }
+            if(!isAwait){
+              childInsert()
+            }
+            const lifeCircle=()=>{
+              Promise.resolve().then(()=>{
+              element._component?._hook?.effect.forEach((hook) => {
+                if(hook?.done) return
+                hook.done=true
+                const result=stateWatch(hook.effect,hook.deps)
+                if (typeof result === 'function') {
+                  element._unMountFunctions.push(result)
+                }
+              })
+                
+              if (element._component?._hook?.reactiveEffect) {
+                element._component?._hook?.reactiveEffect.forEach((hook) => {
+                  if(hook?.done) return
+                  hook.done=true
+                  const effect=hook.effect(comment)
+                  if (hook.deps?.component) {
+                    createEffect(() => {
+                      return effect()
+                    },element) 
+                  } else {
+                    createEffect(() => {
+                      return effect()
+                    },hook.deps.value)
+                  }
+                })
+              }
+              element._MountFunctions.forEach((func) => {
+                func.done=true
+                const result=func(comment)
+                if (typeof result === 'function') {
+                  element._unMountFunctions.push(result)
+                }
+              })
+              
+            })
+            }
+            if(!isAwait){
+              lifeCircle()
+            }
+            stateContexts._hasRun=true
+            
+            keepContext(stateContexts._formerContext)
+            if (stateContexts._transportContext) {
+              let contextId = stateContexts._transportContext
+              delete pawaContext[contextId]
+            }
+            __pawaDev.totalComponent++
+               
+        
+    }catch(error){
+        console.log(error.message,error.stack)
+        console.error(error.message,error.stack)
+    }
+  
+}

package/index.js

@@ -0,0 +1,154 @@
+import {setResumer} from 'pawajs/resumer.js'
+import {resume_state} from './resume-directive.js'
+import {resume_if} from './resumeIf.js'
+import {resume_for} from './resumeFor.js'
+import {resume_key} from './resumeKey.js'
+import {resume_component} from './component.js'
+import {createEffect} from 'pawajs/reactive.js'
+import {checkKeywordsExistence,setPawaDevError} from 'pawajs/utils.js'
+import { resume_switch } from './resumeSwitch.js'
+export const resume_text=(el,attr,isName)=>{
+       if (el._running) {
+          return
+        }
+        el.removeAttribute('c-t')
+        el._checkStatic()
+        let textNodes
+        el.childNodes.forEach((value, index) => {
+          if(value.nodeType === 8 && value.data.startsWith('textEvaluator-')){
+           textNodes=value.data.slice(14)
+          }
+        })
+        const evaluate = () => {
+          try {
+              // Always use original content from map for evaluation
+              let value = textNodes
+              const regex = /@{([^}]*)}/g;
+                const keys = Object.keys(el._context);
+                const resolvePath = (path, obj) => {
+                  return path.split('.').reduce((acc, key) => acc?.[key], obj);
+                };
+                const values = keys.map((key) => resolvePath(key, el._context));
+                if(!value)return
+                value = value.replace(regex, (match, expression) => {
+                  if (checkKeywordsExistence(el._staticContext,expression)) {
+                    return ''
+                  }else{
+    
+                    el._textContent[expression]=value
+                    const func = new Function(...keys, `return ${expression}`);
+                    return String(func(...values));
+                  }
+                });
+                if (el.tagName === 'TEXTAREA') {
+                  el.value=value
+                }else{
+                  el.textContent=value;
+                }
+              
+          
+          } catch (error) {
+            // console.warn(`error at ${el} textcontent`)
+            setPawaDevError({
+              message:`error at TextContent ${error.message}`,
+              error:error,
+              template:el._template
+            })
+          }
+        };
+      
+        createEffect(() => {
+          evaluate();
+        },el);
+}
+
+export const resume_attribute=(el,attr,isName)=>{
+      if(el._running) return
+      // Store original attribute value
+      
+      if (el._componentName) {
+        return
+      }
+      el.removeAttribute(attr.name)
+      const attrName=attr.name.slice(5)
+      const attrValue=attr.value
+      el._preRenderAvoid.push(attrName)
+      // A set of attributes that are treated as booleans and are best controlled via properties.
+      const booleanAttributes = new Set(['checked', 'selected', 'disabled', 'readonly', 'required', 'multiple']);
+      el._mainAttribute[attrName]=attr.value
+      el._checkStatic()
+      el.removeAttribute(attr.name)
+      const evaluate = () => {
+        
+        try{
+          // Always use original value from map for evaluation
+        let value = attrValue;
+        let isBoolean
+        const regex = /@{([^}]*)}/g;
+          const keys = Object.keys(el._context);
+          const resolvePath = (path, obj) => {
+            return path.split('.').reduce((acc, key) => acc?.[key], obj);
+          };
+          const values = keys.map((key) => resolvePath(key, el._context));
+          
+          value = value.replace(regex, (match, expression) => {
+            if(checkKeywordsExistence(el._staticContext,expression)){
+              return ''
+            }else{
+              const func = new Function(...keys, `return ${expression}`);
+              const result = func(...values);
+              isBoolean = result; // Assuming one expression for boolean attributes.
+              return result;
+            }
+          });
+
+        if (booleanAttributes.has(attrName)) {
+            // If there was no expression, the presence of the attribute means true, unless its value is 'false'.
+            const boolValue = regex.test(attrValue) ? !!isBoolean : attrValue.toLowerCase() !== 'false';
+            regex.lastIndex = 0; // Reset regex state after .test()
+
+            // Map attribute name to property name where they differ (e.g., 'readonly' -> 'readOnly')
+            const propName = attrName === 'readonly' ? 'readOnly' : attrName;
+
+            if (propName in el) {
+                el[propName] = boolValue;
+            }
+
+            // Also update the attribute for consistency and for CSS selectors.
+            if (boolValue) {
+                el.setAttribute(attrName, '');
+            } else {
+                el.removeAttribute(attrName);
+            }
+        } else if (attrName === 'value' && 'value' in el) {
+            el.value = value;
+        } else {
+          el.setAttribute(attrName, value);
+        }
+        }catch(error){
+          console.warn(`failed at attribute ${attrName}`,el)
+          setPawaDevError({
+            message:`error at attribute ${error.message}`,
+            error:error,
+            template:el._template
+          })
+        }
+      };
+
+      createEffect(()=>{
+        evaluate()
+      })
+}
+
+export const initiateResumer=()=>{
+  setResumer({
+    resume_attribute,
+    resume_text,
+    resume_state,
+    resume_if,
+    resume_for,
+    resume_switch,
+    resume_component,
+    resume_key
+  })
+}

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "pawajs-continue",
+  "version": "1.0.0",
+  "description": "Pawajs continuity initializer library for ssr",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Allisboy/pawajs-continue.git"
+  },
+  "keywords": [
+    "pawajs",
+    "pawa-ssr",
+    "continuity",
+    "ssr"
+  ],
+  "author": "Allwell oriso-owubo owupele",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/Allisboy/pawajs-continue/issues"
+  },
+  "homepage": "https://github.com/Allisboy/pawajs-continue#readme",
+  "dependencies": {
+    "pawajs": "^1.3.8"
+  }
+}

package/resume-directive.js

@@ -0,0 +1,32 @@
+import {$state} from 'pawajs/index.js'
+
+
+export const resume_state=(el,attr,isResume)=>{
+    if(el._running)return
+    const name=attr.name.split('-')[2]
+    el.removeAttribute(attr.name)
+    try{
+    const keys = Object.keys(el._context);
+            const resolvePath = (path, obj) => {
+                return path.split('.').reduce((acc, key) => acc?.[key], obj);
+            };
+            const values = keys.map((key) => resolvePath(key, el._context));
+            const val = new Function(...keys, `
+        try{
+        return ${attr.value}
+        }catch(error){
+        console.log(error.message,error.stack)
+        }
+        `)(...values)
+            el._context[name] = null
+            el._context[name] = $state(val)
+    
+            el.removeAttribute(attr.name)
+        } catch (error) {
+            setPawaDevError({
+                message: `Error from State directive ${error.message}`,
+                error: error,
+                template: el._template
+            })
+        }
+}

package/resumeFor.js

@@ -0,0 +1,82 @@
+import { createEffect } from 'pawajs/reactive.js';
+import { PawaComment, PawaElement } from 'pawajs/pawaElement.js';
+import { processNode, pawaWayRemover, safeEval, getEvalValues, setPawaDevError, getComment,getEndComment, checkKeywordsExistence } from 'pawajs/utils.js';
+import { merger_for } from 'pawajs/merger/for.js';
+/**
+ * @param {HTMLElement | PawaElement} el
+ * @param {{value:string,name:string}} attr,
+ * @param {{...any}} stateContext
+ * @param {{comment:Comment,endComment:Comment,id:string,children:[],dataComment:Comment}} arg
+ */
+export const resume_for=(el,attr,stateContext,{comment,endComment,id,children,dataElement})=>{
+    const element=dataElement.content.firstElementChild
+    if(checkKeywordsExistence(el._staticContext,element.getAttribute('for-each'))) return
+    PawaElement.Element(element,el._context)
+    element._out = true
+            const parent = endComment.parentElement
+            element._deCompositionElement = true
+            element._isKill = true
+            element._kill = () => {
+                pawaWayRemover(comment, endComment)
+                comment.remove(), endComment.remove();
+            }
+            const keyOrders=new Map()
+            PawaComment.Element(comment)
+            comment._setCoveringElement(element)
+            element._underControl = comment
+            const context = element._context
+            const insertIndex = new Map()
+            const elementArray = new Set()
+            let index=0
+            let isCurrentComment
+            PawaElement.Element(element,el._context)
+            const value=element.getAttribute('for-each')         
+            const exp = new WeakMap()
+                const primitive = { key: value }
+                let firstEnter = true
+                const split = value.split(' in ')
+                const arrayName = split[1]
+                const arrayItems = split[0].split(',')
+                const arrayItem = arrayItems[0]
+                const indexes = arrayItems[1]
+                element._underControl = comment
+                el._deCompositionElement = true
+        element._isKill = true
+        element._kill = () => {
+            pawaWayRemover(comment, endComment)
+            comment.remove(), endComment.remove();
+        }
+        
+            const getKeyComment=(comments)=>{
+                if(comments === endComment) return
+     const current=comments?.data?.split('@-$@-$@') || []
+     if(current[1] === id && current[0] === 'forKey'){
+        comments.data=`for-key ${current[2]}`
+        PawaComment.Element(comments)
+        comments._index = index
+        keyOrders.set(index,{comment:comments})
+        comments._setKey(current[2])
+        isCurrentComment=comments
+        elementArray.add(comments)
+        insertIndex.set(index, current[2])
+        index++
+       getKeyComment(comments.nextSibling)
+     }else if(current[0] === 'endForKey' && current[1] === id && isCurrentComment){
+        isCurrentComment._endComment = comments
+        comments.data=`end -for-key ${current[2]}`
+        getKeyComment(comments.nextSibling)
+    }else{
+         getKeyComment(comments.nextSibling)
+     }
+    }
+    
+    const unique=id
+    let evalFunc
+    getKeyComment(comment)
+    const att={name:'for-each',value:element.getAttribute('for-each')}
+   const evaluate=merger_for(element,stateContext,att,arrayName,arrayItem,indexes,true,
+    {comment,endComment,unique,elementArray,insertIndex,keyOrders})   
+    createEffect(()=>{
+        evaluate()
+    })
+}

package/resumeIf.js

@@ -0,0 +1,70 @@
+import { createEffect } from 'pawajs/reactive.js';
+import { PawaComment, PawaElement } from 'pawajs/pawaElement.js';
+import {  pawaWayRemover, safeEval, getEvalValues, setPawaDevError } from 'pawajs/utils.js';
+import { merger_if} from 'pawajs/merger/if.js'
+export const resume_if=(el,attr,stateContext,{comment,endComment,id,children,number})=>{
+    const dataElement=document.querySelector(`[p\\:store-if="${id}"]`);
+    dataElement.remove()
+    const element=dataElement.content.firstElementChild
+    // console.log(id,element,el._attributes)
+    const chained=[{
+      exp:element.getAttribute('if'),
+      condition:'if',
+      element:element
+    }]
+    const nextSiblings=element.nextElementSibling || null
+    const chainMap=new Map()
+    chainMap.set(element.getAttribute('if'),{condition:'if',element:element})
+    const getChained=(nextSibling)=>{
+                    if (nextSibling !== null) {
+                        if (nextSibling && nextSibling.getAttribute('else') === '' || nextSibling.getAttribute('else-if')) {
+                            // console.log(true,'it has',nextSibling.getAttribute('else'))
+                            if (nextSibling.getAttribute('else-if')) {
+                                chained.push({
+                                    exp:nextSibling.getAttribute('else-if'),
+                                    condition:'else-if',
+                                    element:nextSibling
+                                })
+                                chainMap.set(nextSibling.getAttribute('else-if'),{condition:'else-if',element:nextSibling})
+                                getChained(nextSibling.nextElementSibling)
+                                nextSibling.remove()
+                            }else if (nextSibling.getAttribute('else') === '') {
+                                chained.push({
+                                    exp:'false',
+                                    condition:'else',
+                                    element:nextSibling
+                                })
+                                chainMap.set('else',{condition:'else',element:nextSibling})
+                                nextSibling.remove()
+                            }
+                        }
+                    }
+                }
+                getChained(nextSiblings)
+
+    PawaElement.Element(element,el._context)
+    element._out = true
+            const parent = endComment.parentElement
+            element._deCompositionElement = true
+            element._isKill = true
+            element._kill = () => {
+                pawaWayRemover(comment, endComment)
+                comment.remove(), endComment.remove();
+              }
+              PawaComment.Element(comment)
+              comment._setCoveringElement(element)
+              element._underControl = comment
+              const context = element._context
+              comment._controlComponent = true
+        el.removeAttribute(attr.name)
+        /**
+         * endComment,comment,func(a function to set func),firstEnter,getFirst,stateContext
+         */
+          const evaluate=merger_if(element,attr,stateContext,true,
+            {comment,endComment,children,chained,chainMap}
+          )
+            createEffect(()=>{
+                evaluate()
+            },element)
+    
+}

package/resumeKey.js

@@ -0,0 +1,38 @@
+import { createEffect } from 'pawajs/reactive.js';
+import { PawaComment, PawaElement } from 'pawajs/pawaElement.js';
+import {  pawaWayRemover, safeEval, getEvalValues, setPawaDevError } from 'pawajs/utils.js';
+import { merger_key } from 'pawajs/merger/key.js';
+export const resume_key=(el,attr,stateContext,{comment,endComment,id,children})=>{
+    let dataElement
+  dataElement=document.querySelector(`[p\\:store-key="${id}"]`);
+   const element=dataElement.content.firstElementChild
+   dataElement.remove()
+    PawaElement.Element(element,el._context)
+        element._out = true
+                const parent = endComment.parentElement
+                element._deCompositionElement = true
+                element._isKill = true
+                element._kill = () => {
+                    pawaWayRemover(comment, endComment)
+                    comment.remove(), endComment.remove();
+                  }
+                  PawaComment.Element(comment)
+                  comment._setCoveringElement(element)
+                  element._underControl = comment
+                  const context = element._context
+                  comment._controlComponent = true
+            el.removeAttribute(attr.name)
+            const att={name:'key',value:element.getAttribute('key')}
+            let key
+            try {
+                key=new Function(`return ${attr.value}`)()    
+            } catch (error) {
+                key=''
+            }
+            
+          const evaluate=merger_key(element,att,stateContext,true,
+            {comment,endComment,children,old:key})
+          createEffect(()=>{
+            evaluate()
+          },element)
+}

package/resumeSwitch.js

@@ -0,0 +1,73 @@
+import { createEffect } from 'pawajs/reactive.js';
+import { PawaComment, PawaElement } from 'pawajs/pawaElement.js';
+import {  pawaWayRemover, safeEval, getEvalValues, setPawaDevError } from 'pawajs/utils.js';
+import { merger_switch } from 'pawajs/merger/switch.js';
+export const resume_switch=(el,attr,stateContext,{comment,endComment,id,children})=>{
+    let dataElement
+    dataElement=document.querySelector(`[p\\:store-switch="${id}"]`);
+    const element=dataElement.content.firstElementChild
+    dataElement.remove()
+    const att={name:'switch',value:element.getAttribute('switch')}
+    element.removeAttribute('switch')
+    const chained=[{
+      exp:element.getAttribute('case'),
+      condition:'case',
+      element:element
+    }]
+    const nextSiblings=element.nextElementSibling || null
+    const chainMap=new Map()
+    chainMap.set(element.getAttribute('case'),{condition:'case',element:element})
+    const getChained=(nextSibling)=>{
+                    if (nextSibling !== null) {
+                        if (nextSibling && nextSibling.getAttribute('case') || nextSibling.getAttribute('default') === '') {
+                            // console.log(true,'it has',nextSibling.getAttribute('else'))
+                            if (nextSibling.getAttribute('case')) {
+                                chained.push({
+                                    exp:nextSibling.getAttribute('case'),
+                                    condition:'case',
+                                    element:nextSibling
+                                })
+                                chainMap.set(nextSibling.getAttribute('case'),{condition:'case',element:nextSibling})
+                                getChained(nextSibling.nextElementSibling)
+                                nextSibling.remove()
+                            }else if (nextSibling.getAttribute('default') === '') {
+                                chained.push({
+                                    exp:'false',
+                                    condition:'default',
+                                    element:nextSibling
+                                })
+                                chainMap.set('default',{condition:'default',element:nextSibling})
+                                nextSibling.remove()
+                            }
+                        }
+                    }
+                }
+             getChained(nextSiblings)
+
+    PawaElement.Element(element,el._context)
+    element._out = true
+            const parent = endComment.parentElement
+            element._deCompositionElement = true
+            element._isKill = true
+            element._kill = () => {
+                pawaWayRemover(comment, endComment)
+                comment.remove(), endComment.remove();
+              }
+              PawaComment.Element(comment)
+              comment._setCoveringElement(element)
+              element._underControl = comment
+              const context = element._context
+              comment._controlComponent = true
+        el.removeAttribute(attr.name)
+        /**
+         * endComment,comment,func(a function to set func),firstEnter,getFirst,stateContext
+         */
+          const evaluate=merger_switch(element,att,stateContext,true,
+            {comment,endComment,children,chained,chainMap,caseValue:attr}
+          )
+          
+            createEffect(()=>{
+                evaluate()
+            },element)
+    
+}

package/utils.js

@@ -0,0 +1,37 @@
+import {setPawaDevError,replaceTemplateOperators,checkKeywordsExistence} from 'pawajs/utils.js'
+export const setProps=(context,attr,props,el)=>{
+  if(checkKeywordsExistence(el._staticContext,attr.value)){
+    return {
+      static:true
+    }
+  }
+    try {
+           const keys = Object.keys(context);
+    const resolvePath = (path, obj) => {
+      return path.split('.').reduce((acc, key) => acc?.[key], obj);
+    };
+    const values = keys.map((key) => resolvePath(key, context));
+    if(attr.value === '') attr.value=true;
+    const value=new Function(...keys,`
+      return ()=>{
+        try{
+      const prop= ${replaceTemplateOperators(attr.value)};
+      if(prop === '')return prop
+      return prop
+      }catch(error){
+        console.error(error.message,error.stack)
+       }
+    }
+    `)(...values)
+    props[attr.name]=value
+    return {
+      static:false
+    }
+            } catch (error) {
+              setPawaDevError({
+                  message:`error from ${el._componentName} prop :${attr.name} ${error.message}`,
+                  error:error,
+                  template:this._template
+                })
+            }
+}