pawajs 1.4.22 → 1.4.24

package/CHANGELOG.md

@@ -8,4 +8,6 @@ CHANGELOG.md
 + version 1.4.13 - 1.4.16 fixed issues for resuming component 
 + version 1.4.18 - 1.4.19  fixed issue with component inside template and added event modifiers
 + version 1.4.19 - 1.4.21 made runEffect Global
-+ version 1.4.22 fixed merger if when the ssr render else and else render down in pawajs engine
++ version 1.4.22 fixed merger if when the ssr render else and else render down in pawajs engine
++ version 1.4.23 fixed _context from production
++ version 1.4.24 - add HMR mapping

package/index.js

@@ -187,7 +187,8 @@ let stateContext = {
     _template: '',
     _serializedData:{},
     _static: [],
-    _id:""
+    _id:"",
+    hmr:false
 }
 
 export const getCurrentContext = () => {
@@ -559,6 +560,7 @@ export const setStateContext = (context) => {
     stateContext._template = ''
     stateContext._resume = false
     stateContext._suspense=''
+    stateContext._hmr=false
     stateContext._hook={
         beforeMount:[],
         reactiveEffect:[],
@@ -739,6 +741,7 @@ const stateWatch = (callback, dependencies) => {
 export const restoreContext = (state_context) => {
         stateContext = state_context._formerContext
     }
+export const HmrComponentMap=new Map()
     /**
      * 
      * @param {PawaElement|HTMLElement} el 
@@ -833,6 +836,7 @@ const mainAttribute = (el, exp) => {
     el._mainAttribute[exp.name] = exp.value
     el._checkStatic()
     let enter=false
+    const context=el._context
     const evaluate = () => {
 
         try {
@@ -848,7 +852,7 @@ const mainAttribute = (el, exp) => {
                 if (checkKeywordsExistence(el._staticContext, expression)) {
                     return ''
                 } else {
-                    const result = el.safeEval(el._context, expression, `error at attribute ${exp.name}`, true)
+                    const result = el.safeEval(context, expression, `error at attribute ${exp.name}`, true)
                     isBoolean = result
                     if (typeof result !== 'boolean') {
                         return result ?? ''
@@ -915,7 +919,9 @@ const textContentHandler = (el, isName) => {
         nodesMap.set(node, node.nodeValue);
     });
     el._checkStatic()
+    const context=el._context
     const evaluate = () => {
+        
         try {
             textNodes.forEach(textNode => {
                 // Always use original content from map for evaluation
@@ -928,7 +934,7 @@ const textContentHandler = (el, isName) => {
                     } else {
                         if(expression === '')return value
                         el._textContent[expression] = value
-                        const res = el.safeEval(el._context, expression, 'textContent', true)
+                        const res = el.safeEval(context, expression, 'textContent', true)
                         return String(res ?? '');
                     }
                 });
@@ -1138,7 +1144,8 @@ export const render = (el, contexts = {}, notRender, isName) => {
             render(child, context, number, isName)
         })
         el._callMount()
-       if (el.hasAttribute('p:c') && !el.hasAttribute('p-async')) {
+        if (el.hasAttribute('p:c') && !el.hasAttribute('p-async')) {
+           el._clearContext()
         el.removeAttribute('p:c')
        }
 }

package/merger/for.js

@@ -17,14 +17,13 @@ export const merger_for = (el, stateContext, attr, arrayName, arrayItem, indexes
         }
         try {
             if (!func) {
-                func=el.safeEval(el._context, arrayName, 'for-each');
+                func=el.safeEval(context, arrayName, 'for-each');
             }
             let array = func(...getEvalValues(context))
             let update;
             if (!firstEnter) {
                 const div = document.createElement('div')
                 array.forEach((item, index) => {
-                    const context = el._context
                     const itemContext = {
                         [arrayItem]: item,
                         [indexes]: index,
@@ -94,7 +93,6 @@ export const merger_for = (el, stateContext, attr, arrayName, arrayItem, indexes
                             })
                             Array.from(div.children).forEach((child, index) => {
                                 const key = child.getAttribute('for-key') || index
-                                const context = el._context
                                 const itemContext = {
                                     [arrayItem]: array[index],
                                     [indexes]: index,
@@ -151,7 +149,7 @@ export const merger_for = (el, stateContext, attr, arrayName, arrayItem, indexes
             }
             if (firstEnter && !resume) {
                 array.forEach((item, index) => {
-                    const context = el._context
+                    const context = context
                     const itemContext = {
                         [arrayItem]: item,
                         [indexes]: index,
@@ -190,7 +188,6 @@ export const merger_for = (el, stateContext, attr, arrayName, arrayItem, indexes
                 const number={notRender:null,index:null}
                 elementArray.forEach((keyComment) => {
                     if(keyComment.nextElementSibling === null) return
-                    const context = el._context
                     const itemContext = {
                         [arrayItem]: array[keyComment._index],
                         [indexes]: keyComment._index,
@@ -206,9 +203,10 @@ export const merger_for = (el, stateContext, attr, arrayName, arrayItem, indexes
                 message: `Error from For directive ${error.message}`,
                 error: error,
                 template: el._template,
-                el: el._el
+                el: el
             })
         }
     }
+    el?._clearContext()
     return evaluate
 }

package/merger/if.js

@@ -13,6 +13,7 @@ export const merger_if=(el,attr,stateContext,resume=false,{comment,endComment,ch
     if (resume) {
         oldChain={id:attr.value}
     }
+    const context=el._context
     const evaluate = () => {
         if (endComment.parentElement === null) {
             el._deleteEffects()
@@ -23,11 +24,11 @@ export const merger_if=(el,attr,stateContext,resume=false,{comment,endComment,ch
                 func =new Map()
                 chained.forEach((item)=>{
                     if(item.condition === 'else')return
-                    let funcs=el.safeEval(el._context,item.exp,'if')
+                    let funcs=el.safeEval(context,item.exp,'if')
                     func.set(item.exp,funcs)
                 })
             }
-            const values = getEvalValues(el._context)
+            const values = getEvalValues(context)
             let current
             chained.forEach(element => {
                 if (current || element.condition === 'else') return
@@ -57,7 +58,7 @@ export const merger_if=(el,attr,stateContext,resume=false,{comment,endComment,ch
                 }
                 comment.data=`condition ${exp}`
                 parent.insertBefore(newElement, endComment)
-                render(newElement, el._context)
+                render(newElement, context)
                 stateContext._hasRun = true
             }
                 if (comment.nextSibling !== endComment && oldChain.id !== latestChain.id) {
@@ -110,7 +111,7 @@ export const merger_if=(el,attr,stateContext,resume=false,{comment,endComment,ch
                               number.index = isIndex
                               isIndex++
                             if (number.notRender !== null && isIndex <= number.notRender) return
-                              render(value,el._context,number)
+                              render(value,context,number)
                             })
                         stateContext._hasRun=true
                 }
@@ -129,5 +130,6 @@ export const merger_if=(el,attr,stateContext,resume=false,{comment,endComment,ch
                  })
             }
         }
+        el?._clearContext()
         return evaluate
 }

package/merger/key.js

@@ -13,6 +13,7 @@ export const merger_key=(el,attr,stateContext,resume=false,{comment,endComment,c
     if (resume) {
         oldsate=old
     }
+    const context=el._context
     const evaluate = () => {
         if (endComment.parentElement === null) {
             el._deleteEffects()
@@ -21,9 +22,9 @@ export const merger_key=(el,attr,stateContext,resume=false,{comment,endComment,c
             let value=attr.value 
             let keyValue
             if (!func) {
-                func=el.safeEval(el._context,attr.value,'key')
+                func=el.safeEval(context,attr.value,'key')
             }
-            const values = getEvalValues(el._context)
+            const values = getEvalValues(context)
             let current
             
             if (!firstEnter) {
@@ -39,7 +40,7 @@ export const merger_key=(el,attr,stateContext,resume=false,{comment,endComment,c
                 comment.data=`key ${latestState}`
                 endComment.data=`/ key ${latestState}`
                 parent.insertBefore(newElement, endComment)
-                render(newElement, el._context)
+                render(newElement, context)
                 stateContext._hasRun = true
             }
             latestState=func(...values) 
@@ -52,7 +53,7 @@ export const merger_key=(el,attr,stateContext,resume=false,{comment,endComment,c
                             children.forEach((value, index) => {
                               number.index=index
                               if (number.notRender !== null && index <= number.notRender) return
-                              render(value,el._context,number)
+                              render(value,context,number)
                             })
                         stateContext._hasRun=true
                         once=true
@@ -100,5 +101,6 @@ export const merger_key=(el,attr,stateContext,resume=false,{comment,endComment,c
                  })
             }
         }
+        el?._clearContext()
         return evaluate
 }

package/merger/switch.js

@@ -13,6 +13,7 @@ export const merger_switch=(el,attr,stateContext,resume=false,{comment,endCommen
     if (resume) {
         oldChain={id:caseValue.value}
     }
+    const context=el._context
     const evaluate = () => {
         if (endComment.parentElement === null) {
             el._deleteEffects()
@@ -23,12 +24,12 @@ export const merger_switch=(el,attr,stateContext,resume=false,{comment,endCommen
                 func =new Map()
                 chained.forEach((item)=>{
                     if(item.condition === 'default')return
-                    let funcs=safeEval(el._context,item.exp,item.element)
+                    let funcs=safeEval(context,item.exp,item.element)
                     func.set(item.exp,funcs)
                 })
-                switchFunc=safeEval(el._context,attr.value,el)
+                switchFunc=safeEval(context,attr.value,el)
             }
-            const values = getEvalValues(el._context)
+            const values = getEvalValues(context)
             let current
             chained.forEach(element => {
                 if (current || element.condition === 'default') return
@@ -58,7 +59,7 @@ export const merger_switch=(el,attr,stateContext,resume=false,{comment,endCommen
                 }
                 comment.data=`condition ${exp}`
                 parent.insertBefore(newElement, endComment)
-                render(newElement, el._context)
+                render(newElement, context)
                 stateContext._hasRun = true
             }
                 if (comment.nextSibling !== endComment && oldChain.id !== latestChain.id) {
@@ -110,7 +111,7 @@ export const merger_switch=(el,attr,stateContext,resume=false,{comment,endCommen
                               number.index = isIndex
                               isIndex++
                             if (number.notRender !== null && isIndex <= number.notRender) return
-                              render(value,el._context,number)
+                              render(value,context,number)
                             })
                         stateContext._hasRun=true
                 }
@@ -128,5 +129,6 @@ export const merger_switch=(el,attr,stateContext,resume=false,{comment,endCommen
                  })
             }
         }
+        el?._clearContext()
         return evaluate
 }

package/normal/component.js

@@ -1,6 +1,6 @@
 import {propsValidator, setPawaDevError, pawaWayRemover, checkKeywordsExistence, sanitizeTemplate } from '../utils.js';
 import {PawaElement,PawaComment} from '../pawaElement.js';
-import {keepContext,render} from '../index.js'
+import {keepContext,render, HmrComponentMap } from '../index.js'
 import {createEffect} from '../reactive.js'
 export const normal_component=(el,stateContext,setStateContext,mapsPlugin,formerStateContext,pawaContext,stateWatch)=>{
     const compoBeforeCall=mapsPlugin.compoBeforeCall
@@ -79,6 +79,21 @@ export const normal_component=(el,stateContext,setStateContext,mapsPlugin,former
     let compo 
     let awaits=false
     let suspense=''
+    if (__pawaDev.tool) {
+      const id= crypto.randomUUID()
+      if (HmrComponentMap.has(stateContexts._name)) {
+        HmrComponentMap.get(stateContexts._name).push({id:id,template:el._template,el:el,stateContext:stateContexts})
+      }else{
+        HmrComponentMap.set(stateContexts._name,[{id:id,template:el._template,el:el,stateContext:stateContexts}])
+      }
+      el._setUnMount(()=>{
+        const array=HmrComponentMap.get(stateContexts._name)
+        if(array){
+          const index=array.findIndex(item => item.id === id)
+          if(index !== -1) array.splice(index,1)
+        }
+      })
+    }
       try {
         if(done){
         const compoCall=component.component(app)
@@ -103,6 +118,9 @@ export const normal_component=(el,stateContext,setStateContext,mapsPlugin,former
               childInsert(false)
               Promise.resolve().then(()=>{
                 lifeCircle()
+                
+              }).finally(()=>{
+                el._clearContext()
               })
               storeContext._hasRun=true
               stateContext=null
@@ -132,6 +150,7 @@ export const normal_component=(el,stateContext,setStateContext,mapsPlugin,former
     if (component?._insert) {
       Object.assign(el._context,component._insert)
     }
+    const context=el._context
        const propsSetter=()=>{   
     if(Object.entries(el._restProps).length > 0){
       const findElement=div.querySelector('[--]') || div.querySelector('[rest]')
@@ -183,7 +202,7 @@ export const normal_component=(el,stateContext,setStateContext,mapsPlugin,former
     stateContexts?._error?.forEach((error) => {
       throw Error(error)
     })
-    render(child, el._context) 
+    render(child, context) 
       } 
     }
     }
@@ -226,7 +245,10 @@ export const normal_component=(el,stateContext,setStateContext,mapsPlugin,former
       
     })
     }
-    if(awaits === false)lifeCircle()
+    if(awaits === false){
+      lifeCircle()
+      el._clearContext()
+    }
     stateContexts._hasRun=true
     keepContext(stateContexts._formerContext)
     if (stateContexts._transportContext) {
@@ -235,5 +257,5 @@ export const normal_component=(el,stateContext,setStateContext,mapsPlugin,former
     }
      stateContext=formerStateContext  
     __pawaDev.totalComponent++
-       
+      
 }

package/normal/template.js

@@ -28,4 +28,5 @@ export const templates=(el,notRender)=>{
          element.forEach(child=>{
              render(child,el._context,isResume?notRender:{ notRender: null, index: null }) 
             })
+            el?._clearContext()
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pawajs",
-  "version": "1.4.22",
+  "version": "1.4.24",
   "type":"module",
   "description": "pawajs library (reactive web runtime) for easily building web ui, enhancing html element, micro frontend etc ",
   "main": "index.js",

package/pawaElement.js

@@ -5,12 +5,14 @@ import PawaComponent from './pawaComponent.js';
 
 export class PawaElement {
   
+  #context
   /**
    * 
    * @param {HTMLElement} element 
    * @param {object} context 
    */
-constructor(element,context) {
+  constructor(element,context) {
+  this.#context=context
     const div=document.createElement('div'); div.appendChild(element.cloneNode(true))
     Object.assign(this, {
       _resetEffects: new Set(), _context: context, _avoidPawaRender: element.hasAttribute('pawa-avoid'),
@@ -25,7 +27,8 @@ constructor(element,context) {
       _pawaElementComponent: null, _componentTerminate: null, _cacheSetUp: false, _effectsCarrier: null,
       _pawaElementComponentName: '', _reCallEffect: this.reCallEffect, _ElementEffects: new Map(),
       _deCompositionElement: false, _restProps: {}, _kill: null, _isKill: false, _scriptFetching: element.hasAttribute('script'),
-      _scriptDone: false, _underControl: null, safeEval: this.safeEval, _reactiveProps: {}
+      _scriptDone: false, _underControl: null, safeEval: this.safeEval, _reactiveProps: {},
+      _clearContext:this.clearContext
     })
     if (this._lazy) this._componentOrTemplate = true
     if(this._avoidPawaRender) {
@@ -42,6 +45,7 @@ constructor(element,context) {
   getChildrenTree(){
     return Array.from(this._el.children)
   }
+  
    safeEval(context,expression,directive,resolve=false){
   try{
     const keys = Object.keys(context);
@@ -146,7 +150,7 @@ constructor(element,context) {
     })
   } 
   reCheckStaticContext(){ 
-    const context=this._context
+    const context=this.context
     if (this._staticContext.length > 0) {
       for (const [key,value] of Object.entries(context)) {
         if (this._staticContext.includes(key)) {
@@ -174,7 +178,6 @@ constructor(element,context) {
        return animate
      } catch (error) {
       console.error(error);
-      
      }
     } else {
       this._callUnMOunt()
@@ -254,6 +257,11 @@ constructor(element,context) {
     
    }
   }
+  clearContext(){
+    if (!__pawaDev.tool) {
+      this._context={}
+    }
+  }
   setProps(){
     if (this._avoidPawaRender) {
       return

package/power.js

@@ -99,7 +99,7 @@ const checkKeyModifiers = (e, modifiers, eventType) => {
 };
 
 // Shared helper to execute event with debounce/throttle/error handling
-const processEventExecution = (el, attrName, modifiers, callback, eventType, directiveName) => {
+const processEventExecution = (el, attrName, modifiers, callback, eventType, directiveName,context) => {
     const execute = () => {
         try { callback(); } 
         catch (error) { setPawaDevError({ message: `Error from ${directiveName}-${eventType} directive ${error.message}`, error, template: el._template }); }
@@ -255,6 +255,7 @@ export const event = (el, attr, stateContext) => {
     if (el._running || checkKeywordsExistence(el._staticContext, attr.value)) {
         return
     }
+    const context = el._context
     
     const directive = attr.name.substring(3); // 'on-click.prevent' → 'click.prevent'
     const parts = directive.split('.');
@@ -262,7 +263,6 @@ export const event = (el, attr, stateContext) => {
     const modifiers = new Set(parts.slice(1));
 
     el.removeAttribute(attr.name)
-    const context = el._context
     const keys = Object.keys(context);
     const resolvePath = (path, obj) => {
         return path.split('.').reduce((acc, key) => acc?.[key], obj);
@@ -315,10 +315,10 @@ export const event = (el, attr, stateContext) => {
     });
 }
 
-const createBoundCallback = (el, code) => {
-    const keys = Object.keys(el._context);
+const createBoundCallback = (el, code,context) => {
+    const keys = Object.keys(context);
     const resolvePath = (path, obj) => path.split('.').reduce((acc, key) => acc?.[key], obj);
-    const values = keys.map((key) => resolvePath(key, el._context));
+    const values = keys.map((key) => resolvePath(key, context));
     const func = new Function(...keys, code);
     return () => func(...values);
 };
@@ -326,7 +326,7 @@ const createBoundCallback = (el, code) => {
 export const mountElement = (el, attr) => {
     if (el._running) return;
     try {
-        const func = createBoundCallback(el, attr.value);
+        const func = createBoundCallback(el, attr.value,el._context);
         el._MountFunctions.push(func);
         el.removeAttribute(attr.name);
     } catch (error) {
@@ -341,7 +341,7 @@ export const mountElement = (el, attr) => {
 export const unMountElement = (el, attr) => {
     if (el._running) return;
     try {
-        const func = createBoundCallback(el, attr.value);
+        const func = createBoundCallback(el, attr.value,el._context);
         el._unMountFunctions.push(func);
         el.removeAttribute(attr.name);
     } catch (error) {
@@ -485,6 +485,7 @@ export const documentEvent = (el, attr) => {
     const resolvePath = (path, obj) => {
         return path.split('.').reduce((acc, key) => acc?.[key], obj);
     };              
+    const values = keys.map((key) => resolvePath(key, el._context));
     const func = new Function('e', '$element', ...keys, `
     try{
         ${attr.value}
@@ -492,7 +493,6 @@ export const documentEvent = (el, attr) => {
         console.error(error.message, error.stack)
         __pawaDev.setError({msg: error.message, stack: error.stack, directives: 'out-event'})
     }`)
-    const values = keys.map((key) => resolvePath(key, el._context));
     
     const handler = (e) => {
         if (!checkCommonModifiers(e, modifiers)) return;