pawajs 1.4.24 → 1.4.26

package/CHANGELOG.md

@@ -10,4 +10,5 @@ CHANGELOG.md
 + 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.23 fixed _context from production
-+ version 1.4.24 - add HMR mapping
++ version 1.4.24 - add HMR mapping
++ version 1.4.26 - fixed key getcomment id

package/index.js

@@ -527,7 +527,8 @@ const createDeepProxy = (target, callback) => {
         get(target, property) {
             const value = target[property];
             track(target, property);
-            if (typeof value === "object" && value !== null) {
+            // Only proxy plain objects/arrays and skip if already a proxy
+            if (typeof value === "object" && value !== null && !value._isPawaProxy) {
                 return createDeepProxy(value, callback);
             }
             return value;
@@ -991,7 +992,7 @@ export const render = (el, contexts = {}, notRender, isName) => {
         return false
     }
      if (el.tagName === 'TITLE') {
-        document.title=el.textContent
+        document.title = (el.textContent || '').trim()
         el.remove()
     return
   }
@@ -1032,7 +1033,7 @@ export const render = (el, contexts = {}, notRender, isName) => {
         startsWithSet.forEach(starts => {
 
             el._attributes.forEach(attr => {
-                if (attr.name.startsWith('on:')) {
+                if (attr.name.startsWith(starts)) {
                     startAttribute = true
                     startObject[attr.name] = starts
                 }

package/normal/component.js

@@ -79,15 +79,16 @@ 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})
+      if (HmrComponentMap.has(stateContexts.component._filePath) && stateContexts.component._filePath) {
+        HmrComponentMap.get(stateContexts.component._filePath).push({id:id,template:el._template,el:el,stateContext:stateContexts})
       }else{
-        HmrComponentMap.set(stateContexts._name,[{id:id,template:el._template,el:el,stateContext:stateContexts}])
+        HmrComponentMap.set(stateContexts.component._filePath,[{id:id,template:el._template,el:el,stateContext:stateContexts}])
       }
       el._setUnMount(()=>{
-        const array=HmrComponentMap.get(stateContexts._name)
+        const array=HmrComponentMap.get(stateContexts.component._filePath)
         if(array){
           const index=array.findIndex(item => item.id === id)
           if(index !== -1) array.splice(index,1)
@@ -117,7 +118,7 @@ export const normal_component=(el,stateContext,setStateContext,mapsPlugin,former
       }
               childInsert(false)
               Promise.resolve().then(()=>{
-                lifeCircle()
+                lifecycle()
                 
               }).finally(()=>{
                 el._clearContext()
@@ -206,8 +207,8 @@ export const normal_component=(el,stateContext,setStateContext,mapsPlugin,former
       } 
     }
     }
-    childInsert(awaits?true:false);
-    const lifeCircle=()=>{
+    childInsert(!!awaits);
+    const lifecycle=()=>{
       Promise.resolve().then(()=>{
       el._component?._hook?.effect.forEach((hook) => {
         
@@ -246,7 +247,7 @@ export const normal_component=(el,stateContext,setStateContext,mapsPlugin,former
     })
     }
     if(awaits === false){
-      lifeCircle()
+      lifecycle()
       el._clearContext()
     }
     stateContexts._hasRun=true

package/normal/template.js

@@ -1,4 +1,5 @@
 import {render} from '../index.js'
+import { pawaWayRemover } from '../utils.js'
 export const templates=(el,notRender)=>{
     if (el.hasAttribute('p:store')) {
         return

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pawajs",
-  "version": "1.4.24",
+  "version": "1.4.26",
   "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

@@ -23,7 +23,7 @@ export class PawaElement {
       _elementType: '', _getNode: this.getNode, _componentOrTemplate: false, _props: {}, _isView: null,
       _isElementComponent: false, _pawaAttribute: {}, _setUnMount: this.setUnMounts, _componentName: '',
       _attrElement: this.getNewElementByRemovingAttr, _attr: {}, _staticContext: [], _checkStatic: this.reCheckStaticContext,
-      _callMount: this.mount, _callUnMOunt: this.unMount, _remove: this.remove, _componentChildren: undefined,
+      _callMount: this.mount, _callUnmount: this.unMount, _remove: this.remove, _componentChildren: undefined,
       _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'),
@@ -167,8 +167,8 @@ export class PawaElement {
     if (typeof this._exitAnimation === 'function') {
       
      try {
-      const animate=this._exitAnimation().then(() => {
-         this._callUnMOunt()
+      const animate=this._exitAnimation().then(async () => {
+         await this._callUnmount()
           this._out = true
           this._el.remove()
           if (callback) {
@@ -180,7 +180,7 @@ export class PawaElement {
       console.error(error);
      }
     } else {
-      this._callUnMOunt()
+      this._callUnmount()
           this._out=true
           this._el.remove()
           if (callback) {
@@ -202,7 +202,7 @@ export class PawaElement {
        if (child?._el) {
          child._out = true
          child._deleteEffects()
-         child._callUnMOunt()   
+         child._callUnmount()   
        }
      } else if (child.nodeType === 8) {
        if (child?._controlComponent) {

package/power.js

@@ -1,7 +1,7 @@
 import { createEffect } from './reactive.js';
 import { render, $state, keepContext,restoreContext} from './index.js';
 import { PawaComment, PawaElement } from './pawaElement.js';
-import { processNode, pawaWayRemover,getComment,getEndComment, safeEval, getEvalValues, setPawaDevError, checkKeywordsExistence } from './utils.js';
+import { processNode, pawaWayRemover,getComment,getEndComment, safeEval, getEvalValues, setPawaDevError, checkKeywordsExistence, evaluation } from './utils.js';
 import {normal_Switch} from './normal/Switch.js'
 import {normal_If} from './normal/If.js'
 import {normal_For} from './normal/For.js'
@@ -176,13 +176,19 @@ export const If = (el, attr, stateContext,resume=false,notRender,stopResume) =>
             let dataComment
             let id=attr.name.slice(5)
             const children=[]
-            const setComment=(c)=>comment=c
-            const setEndComment=(c)=>endComment=c
-            getComment(el,setComment,id)
-            getEndComment(comment,setEndComment,id,children)
-            const numberIfChildren=notRender.index + children.length - 2
-      notRender.notRender=numberIfChildren
-            resumer.resume_if?.(el,attr,stateContext,{comment,endComment,id,children})
+            try {
+                const setComment=(c)=>comment=c
+                const setEndComment=(c)=>endComment=c
+                getComment(el,setComment,id)
+                getEndComment(comment,setEndComment,id,children)
+                const numberIfChildren=notRender.index + children.length - 2
+          notRender.notRender=numberIfChildren
+                resumer.resume_if?.(el,attr,stateContext,{comment,endComment,id,children})
+                
+            } catch (error) {
+                console.log(error,el ,attr,id);
+                                
+            }
 
     }
 }
@@ -263,20 +269,15 @@ export const event = (el, attr, stateContext) => {
     const modifiers = new Set(parts.slice(1));
 
     el.removeAttribute(attr.name)
-    const keys = Object.keys(context);
-    const resolvePath = (path, obj) => {
-        return path.split('.').reduce((acc, key) => acc?.[key], obj);
+
+    const executeEvent = (e) => {
+        try {
+            const eventContext = { ...context, e };
+            evaluation(eventContext, attr.value);
+        } catch (error) {
+            __pawaDev.setError({ el: el, msg: error.message, stack: error.stack, directives: 'on-event' });
+        }
     };
-    const values = keys.map((key) => resolvePath(key, context));
-    
-    const func = new Function('e', ...keys, ` 
-    try{
-        ${attr.value}
-    }catch(error){
-        console.error(error.message, error.stack)
-        __pawaDev.setError({el: e.target, msg: error.message, stack: error.stack, directives: 'on-event'})
-    }
-    `)
     
     const handler = (e) => {
         if (!checkCommonModifiers(e, modifiers)) return;
@@ -297,7 +298,7 @@ export const event = (el, attr, stateContext) => {
         if (modifiers.has('stop')) e.stopPropagation();
         
         // ========== EXECUTION ==========
-        processEventExecution(el, attr.name, modifiers, () => func(e, ...values), eventType, 'on');
+        processEventExecution(el, attr.name, modifiers, () => executeEvent(e), eventType, 'on');
     };
 
     const options = {
@@ -481,18 +482,15 @@ export const documentEvent = (el, attr) => {
     if (!eventType) return;
 
     el.removeAttribute(attr.name)
-    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 func = new Function('e', '$element', ...keys, `
-    try{
-        ${attr.value}
-    }catch(error){
-        console.error(error.message, error.stack)
-        __pawaDev.setError({msg: error.message, stack: error.stack, directives: 'out-event'})
-    }`)
+
+    const executeOutEvent = (e) => {
+        try {
+            const eventContext = { ...el._context, e, $element: el };
+            evaluation(eventContext, attr.value);
+        } catch (error) {
+            __pawaDev.setError({ msg: error.message, stack: error.stack, directives: 'out-event' });
+        }
+    };
     
     const handler = (e) => {
         if (!checkCommonModifiers(e, modifiers)) return;
@@ -507,7 +505,7 @@ export const documentEvent = (el, attr) => {
         if (modifiers.has('stop')) e.stopPropagation();
         
         // ========== EXECUTION ==========
-        processEventExecution(el, attr.name, modifiers, () => func(e, el, ...values), eventType, 'out');
+        processEventExecution(el, attr.name, modifiers, () => executeOutEvent(e), eventType, 'out');
     }
 
     const options = {
@@ -592,7 +590,7 @@ export const Key = (el, attr, stateContext,resume=false,notRender,stopResume) =>
             let comment
             let endComment
             let dataComment
-            let id=attr.name.slice(10)
+            let id=attr.name.slice(6)
             const children=[]
             const setComment=(c)=>comment=c
             const setEndComment=(c)=>endComment=c

package/utils.js

@@ -1,3 +1,5 @@
+const evalCache = new Map();
+const templateFnCache = new Map();
 
 export const splitAndAdd = str => str.split('-').join('').toUpperCase();
 
@@ -55,12 +57,15 @@ export const extractContextValues = (context) => {
 
 export const evaluation=(context,exp) => {
     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));
-return new Function(...keys,`return ${exp}`)(...values)
+        const keys = Object.keys(context);
+        const cacheKey = `${keys.join(',')}:${exp}`;
+        
+        let fn = evalCache.get(cacheKey);
+        if (!fn) {
+            fn = new Function(...keys, `return ${exp}`);
+            evalCache.set(cacheKey, fn);
+        }
+        return fn(...getEvalValues(context));
     } catch (e) {
       throw e
     }
@@ -130,19 +135,20 @@ export const propsValidator=(obj={},propsAttri,name,template,el)=>{
 export const safeEval=(context,expression,el,resolve=false)=>{
   try{
     const keys = Object.keys(context);
-  const resolvePath = (path, obj) => {
-      return path.split('.').reduce((acc, key) => acc?.[key], obj);
-  };
+    const cacheKey = `${keys.join(',')}:${expression}`;
+
+    let fn = evalCache.get(cacheKey);
+    if (!fn) {
+        fn = new Function(...keys, `return ${expression}`);
+        evalCache.set(cacheKey, fn);
+    }
+
   if(resolve){
-    return new Function(...keys,`
-      return ${expression}
-      `)(...getEvalValues(context))
-  }else{
-    return new Function(...keys,`
-      return ${expression}    
-      `)
+    return fn(...getEvalValues(context))
   }
   
+  return fn;
+  
   }catch(error){
     setPawaDevError({
           message:`Error : ${error.message} ${error.stack}`,