pawajs 1.4.23 → 1.4.25

package/CHANGELOG.md

@@ -9,4 +9,5 @@ CHANGELOG.md
 + 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.23 
++ 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 = () => {
@@ -526,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;
@@ -559,6 +561,7 @@ export const setStateContext = (context) => {
     stateContext._template = ''
     stateContext._resume = false
     stateContext._suspense=''
+    stateContext._hmr=false
     stateContext._hook={
         beforeMount:[],
         reactiveEffect:[],
@@ -739,6 +742,7 @@ const stateWatch = (callback, dependencies) => {
 export const restoreContext = (state_context) => {
         stateContext = state_context._formerContext
     }
+export const HmrComponentMap=new Map()
     /**
      * 
      * @param {PawaElement|HTMLElement} el 
@@ -988,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
   }
@@ -1029,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
                 }
@@ -1141,8 +1145,8 @@ export const render = (el, contexts = {}, notRender, isName) => {
             render(child, context, number, isName)
         })
         el._callMount()
-        el._clearContext()
-       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/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,22 @@ 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.component._filePath) && stateContexts.component._filePath) {
+        HmrComponentMap.get(stateContexts.component._filePath).push({id:id,template:el._template,el:el,stateContext:stateContexts})
+      }else{
+        HmrComponentMap.set(stateContexts.component._filePath,[{id:id,template:el._template,el:el,stateContext:stateContexts}])
+      }
+      el._setUnMount(()=>{
+        const array=HmrComponentMap.get(stateContexts.component._filePath)
+        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)
@@ -102,7 +118,7 @@ export const normal_component=(el,stateContext,setStateContext,mapsPlugin,former
       }
               childInsert(false)
               Promise.resolve().then(()=>{
-                lifeCircle()
+                lifecycle()
                 
               }).finally(()=>{
                 el._clearContext()
@@ -191,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) => {
         
@@ -231,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.23",
+  "version": "1.4.25",
   "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'
@@ -263,20 +263,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 +292,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 +476,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 +499,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 = {

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}`,