pawajs 1.3.9 → 1.4.1

package/CHANGELOG.md

@@ -0,0 +1,3 @@
+CHANGELOG.md
++ version 1.3.0 - v1.4.0 on experiment
++ version 1.4.0 for-key bug fixing

package/index.js

@@ -31,8 +31,9 @@ const errorCaller = (message) => {
 }
 const client = isServer() === false
 const serverInstance = getServerInstance()
-if (client) {
-    window.__pawaDev = {
+const createPawaDev = () => {
+    const listeners = new Set();
+    const devTools = {
         tool: false,
         errors: [],
         totalEffect: 0,
@@ -48,49 +49,107 @@ if (client) {
             start: 0,
             end: 0
         },
+        _originalStyles: new Map(),
+
+        highlightElement(el) {
+            if (!(el instanceof HTMLElement)) return;
+
+            if (!this._originalStyles.has(el)) {
+                this._originalStyles.set(el, {
+                    outline: el.style.outline,
+                    boxShadow: el.style.boxShadow,
+                });
+            }
+            el.style.outline = '2px solid #f87171';
+            el.style.boxShadow = '0 0 10px rgba(248, 113, 113, 0.7)';
+            el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        },
+
+        unhighlightElement(el) {
+            if (!(el instanceof HTMLElement) || !this._originalStyles.has(el)) return;
+            const original = this._originalStyles.get(el);
+            el.style.outline = original.outline;
+            el.style.boxShadow = original.boxShadow;
+            this._originalStyles.delete(el);
+        },
+        subscribe(callback) {
+            listeners.add(callback);
+            return () => listeners.delete(callback);
+        },
+        emit(type, data) {
+            listeners.forEach(cb => {
+                try {
+                    cb({ type, data });
+                } catch (e) {
+                    console.error("PawaDev listener error:", e);
+                }
+            });
+        },
         setError: ({ el, msg, directives, stack, template, warn } = {}) => {
-            if (__pawaDev.tool !== true) return
-            if (__pawaDev.errorState) {
-                __pawaDev.errorState.value = true
+            if (devTools.tool !== true) return
+            if (devTools.errorState) {
+                devTools.errorState.value = true
             }
-            __pawaDev.errors.push({
+            const errorInfo = {
                 el,
                 msg,
                 directives,
                 stack,
                 timestamp: Date.now(),
-                template: template ? template : ''
-            })
+                template: template ? template : '',
+                type: warn ? 'warning' : 'error'
+            }
+            devTools.errors.push(errorInfo)
+            devTools.emit('error', errorInfo)
+            
             if (warn) {
-                console.warn(msg, stack, template)
+                console.warn(msg, stack, template, el,directives)
+            } else {
+                console.error(msg, stack, template, el)
             }
-            console.error(msg, stack)
         },
         logRender: (component, time) => {
-            __pawaDev.renderCount++
-                __pawaDev.performance.renderTime.push({
-                    component,
-                    time,
-                    timestamp: Date.now()
-                })
+            devTools.renderCount++
+            const data = {
+                component,
+                time,
+                timestamp: Date.now()
+            }
+            devTools.performance.renderTime.push(data)
+            devTools.emit('render', data)
         },
         logEffect: (effect, time) => {
-            __pawaDev.totalEffect++
-                __pawaDev.performance.effectTime.push({
-                    effect,
-                    time,
-                    timestamp: Date.now()
-                })
+            devTools.totalEffect++
+            const data = {
+                effect,
+                time,
+                timestamp: Date.now()
+            }
+            devTools.performance.effectTime.push(data)
+            devTools.emit('effect', data)
         },
         logComponent: (name, time) => {
-            __pawaDev.components.add(name)
-            __pawaDev.performance.componentTime.push({
+            devTools.components.add(name)
+            const data = {
                 name,
                 time,
                 timestamp: Date.now()
-            })
+            }
+            devTools.performance.componentTime.push(data)
+            devTools.emit('component', data)
         }
     }
+    return devTools;
+}
+
+const pawaDevInstance = createPawaDev();
+
+if (typeof globalThis !== 'undefined') {
+    globalThis.__pawaDev = pawaDevInstance;
+} else if (typeof window !== 'undefined') {
+    window.__pawaDev = pawaDevInstance;
+} else if (typeof global !== 'undefined') {
+    global.__pawaDev = pawaDevInstance;
 }
 
 const compoBeforeCall = new Set()
@@ -872,11 +931,6 @@ const mainAttribute = (el, exp) => {
             let value = attrMap.get(exp.name);
             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));
 
             const hasExpression = regex.test(value);
             regex.lastIndex = 0;
@@ -885,11 +939,10 @@ const mainAttribute = (el, exp) => {
                 if (checkKeywordsExistence(el._staticContext, expression)) {
                     return ''
                 } else {
-                    const func = new Function(...keys, `return ${expression}`);
-                    const result = func(...values)
+                    const result = el.safeEval(el._context, expression, `error at attribute ${exp.name}`, true)
                     isBoolean = result
                     if (typeof result !== 'boolean') {
-                        return result
+                        return result ?? ''
                     }else{
                         return ''
                     }
@@ -924,11 +977,13 @@ const mainAttribute = (el, exp) => {
             }
         } catch (error) {
             console.warn(`failed at attribute ${exp.name}`, el)
-            setPawaDevError({
-                message: `error at attribute ${error.message}`,
-                error: error,
-                template: el._template
-            })
+            __pawaDev.setError({ 
+                    el:el, 
+                    msg:`from  ${exp.name} ${exp.value}`, 
+                    directives:exp.name, 
+                    stack:error.stack, 
+                    template:el?._template, 
+                 })
         }
     };
     createEffect(() => {
@@ -958,20 +1013,14 @@ const textContentHandler = (el, isName) => {
                 let value = nodesMap.get(textNode);
                 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 {
-
+                        if(expression === '')return value
                         el._textContent[expression] = value
-                        const func = new Function(...keys, `return ${expression}`);
-                        return String(func(...values));
+                        const res = el.safeEval(el._context, expression, 'textContent', true)
+                        return String(res ?? '');
                     }
                 });
                 if(el.tagName === 'TEXTAREA'){

package/merger/for.js

@@ -6,31 +6,21 @@ import { processNode, pawaWayRemover, safeEval, getEvalValues, setPawaDevError,
 export const merger_for = (el, stateContext, attr, arrayName, arrayItem, indexes, resume,
     { comment, endComment, unique, elementArray, insertIndex,keyOrders }) => {
     let firstEnter
-    let func
     let once=false
     let promised
+    let func
+    let context=el._context
     const keyOrder=keyOrders || new Map()
     const evaluate = () => {
         if (endComment.parentElement === null) {
             el._deleteEffects()
         }
         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));
-
-            let array
             if (!func) {
-
-                const funcs = new Function(...keys, `
-                    return ${arrayName}
-                `)
-                func = funcs
+                func=el.safeEval(el._context, arrayName, 'for-each');
             }
-            let update
-            array = func(...values)
+            let array = func(...getEvalValues(context))
+            let update;
             if (!firstEnter) {
                 const div = document.createElement('div')
                 array.forEach((item, index) => {
@@ -42,15 +32,15 @@ export const merger_for = (el, stateContext, attr, arrayName, arrayItem, indexes
                     }
                     const newElement = el._attrElement('for-each')
                     newElement.setAttribute('data-for-index', index)
-                    processNode(newElement, itemContext)
+                    processNode(newElement, itemContext, el)
                     div.appendChild(newElement)
                 })
                 const removeElement = []
                 
                 const newElementsMap = new Map()
-                Array.from(div.children).forEach(child => {
-                    const key = child.getAttribute('for-key')
-                    if (key) newElementsMap.set(key, child)
+                Array.from(div.children).forEach((child,i) => {
+                    const key = child.getAttribute('for-key') || i
+                    if (key || key === 0) newElementsMap.set(key, child)
                 })
 
                 elementArray.forEach((keyComment) => {
@@ -103,7 +93,7 @@ export const merger_for = (el, stateContext, attr, arrayName, arrayItem, indexes
                                 keyMap.set(child._forKey, child)
                             })
                             Array.from(div.children).forEach((child, index) => {
-                                const key = child.getAttribute('for-key')
+                                const key = child.getAttribute('for-key') || index
                                 const context = el._context
                                 const itemContext = {
                                     [arrayItem]: array[index],
@@ -131,7 +121,7 @@ export const merger_for = (el, stateContext, attr, arrayName, arrayItem, indexes
                                     child.setAttribute('for-unique', unique)
                                     child.setAttribute('data-for-index', index)
                                     keyComment._index = index
-                                    processNode(child, itemContext)
+                                    processNode(child, itemContext, el)
 
                                     endComment.parentElement.insertBefore(endKeyComment, endComment)
                                     endKeyComment.parentElement.insertBefore(keyComment, endKeyComment)
@@ -174,7 +164,7 @@ export const merger_for = (el, stateContext, attr, arrayName, arrayItem, indexes
                     keyComment._endComment = endKeyComment
                     newElement.setAttribute('for-unique', unique)
                     newElement.setAttribute('data-for-index', index)
-                    processNode(newElement, itemContext)
+                    processNode(newElement, itemContext, el)
                     keyOrder.set(index,{comment:keyComment})
                     keyComment._index = index
                     keyComment._setKey(newElement.getAttribute('for-key') || index)
@@ -215,7 +205,8 @@ export const merger_for = (el, stateContext, attr, arrayName, arrayItem, indexes
             setPawaDevError({
                 message: `Error from For directive ${error.message}`,
                 error: error,
-                template: el._template
+                template: el._template,
+                el: el._el
             })
         }
     }

package/merger/if.js

@@ -6,6 +6,7 @@ export const merger_if=(el,attr,stateContext,resume=false,{comment,endComment,ch
     let removePromise=null
     let promised=false
     let firstEnter = false
+    const elementArray=[]
     const parent = endComment.parentElement
     let latestChain
     let oldChain
@@ -22,7 +23,7 @@ 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=safeEval(el._context,item.exp,item.element)
+                    let funcs=el.safeEval(el._context,item.exp,'if')
                     func.set(item.exp,funcs)
                 })
             }
@@ -114,12 +115,16 @@ export const merger_if=(el,attr,stateContext,resume=false,{comment,endComment,ch
             oldChain=latestChain
          firstEnter=true
             } catch (error) {
-                console.log(error.message,error.stack)
-                setPawaDevError({
-                    message: `Error from IF directive ${error.message}`,
-                    error: error,
-                    template: el._template
-                })
+                console.error(error.message,error.stack,el,chainMap)
+                console.warn(error.message,error.stack,el,'error at if/else-if/else directive check the exprresion')
+
+                __pawaDev.setError({ 
+                    el:el, 
+                    msg:`from {if/elseif/else} ${attr.value}`, 
+                    directives:'if/elseif/else', 
+                    stack:error.stack, 
+                    template:el?._template, 
+                 })
             }
         }
         return evaluate

package/merger/key.js

@@ -21,7 +21,7 @@ export const merger_key=(el,attr,stateContext,resume=false,{comment,endComment,c
             let value=attr.value 
             let keyValue
             if (!func) {
-                func=safeEval(el._context,attr.value,el)
+                func=el.safeEval(el._context,attr.value,'key')
             }
             const values = getEvalValues(el._context)
             let current
@@ -89,12 +89,15 @@ export const merger_key=(el,attr,stateContext,resume=false,{comment,endComment,c
             
          firstEnter=true
             } catch (error) {
-                console.log(error.message,error.stack)
-                setPawaDevError({
-                    message: `Error from IF directive ${error.message}`,
-                    error: error,
-                    template: el._template
-                })
+                console.error(error.message,error.stack,el,attr.value)
+                console.warn(error.message,error.stack,el,'error at key direcive check your expression')
+                __pawaDev.setError({ 
+                    el:el, 
+                    msg:`from  {key} ${attr.value}`, 
+                    directives:'key', 
+                    stack:error.stack, 
+                    template:el?._template, 
+                 })
             }
         }
         return evaluate

package/merger/switch.js

@@ -115,12 +115,15 @@ export const merger_switch=(el,attr,stateContext,resume=false,{comment,endCommen
             oldChain=latestChain
          firstEnter=true
             } catch (error) {
-                console.log(error.message,error.stack)
-                setPawaDevError({
-                    message: `Error from IF directive ${error.message}`,
-                    error: error,
-                    template: el._template
-                })
+                console.error(error.message,error.stack,el)
+                console.warn(error.message,error.stack,el,'from at switch case check your exprssion')
+                 __pawaDev.setError({ 
+                    el:el, 
+                    msg:`from  {switch/case} ${attr.value}`, 
+                    directives:'switch/case', 
+                    stack:error.stack, 
+                    template:el?._template, 
+                 })
             }
         }
         return evaluate

package/package.json

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

package/pawaElement.js

@@ -1,5 +1,5 @@
 import {components,escapePawaAttribute,getPawaAttributes,getDependentAttribute,getPrimaryDirectives } from './index.js';
-import {splitAndAdd,replaceTemplateOperators,setPawaDevError,getEvalValues,safeEval} from './utils.js';
+import {splitAndAdd,replaceTemplateOperators,setPawaDevError,getEvalValues} from './utils.js';
 import PawaComponent from './pawaComponent.js';
 
 
@@ -70,6 +70,7 @@ export class PawaElement {
     this._scriptFetching=element.hasAttribute('script')
     this._scriptDone=false
     this._underControl=null
+    this.safeEval=this.safeEval
     /**
      * @type{object}
      */
@@ -101,6 +102,33 @@ export class PawaElement {
   getChildrenTree(){
     return Array.from(this._el.children)
   }
+   safeEval(context,expression,directive,resolve=false){
+  try{
+    const keys = Object.keys(context);
+  const resolvePath = (path, obj) => {
+      return path.split('.').reduce((acc, key) => acc?.[key], obj);
+  };
+  if(resolve){
+    return new Function(...keys,`
+      return ${expression}
+      `)(...getEvalValues(context))
+  }else{
+    return new Function(...keys,`
+      return ${expression}    
+      `)
+  }
+  
+  }catch(error){
+    __pawaDev.setError({ 
+      el:this?._el, 
+      msg:`from ${expression}`, 
+      directives:directive, 
+      stack:error.stack, 
+      template:this?._template, 
+     })
+  }
+}
+
   reCallEffect(){
     this._resetEffects.forEach((call)=>{
       call()
@@ -307,31 +335,19 @@ export class PawaElement {
        }else if(!pawaAttribute.has(attr.name) && attr.name.startsWith(':')){
         
         const propsName=attr.name.slice(1) 
-        try {
-       const keys = Object.keys(this._context);
-const resolvePath = (path, obj) => {
-  return path.split('.').reduce((acc, key) => acc?.[key], obj);
-};
-const values = keys.map((key) => resolvePath(key, this._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)
-this._props[propsName]=value
-        } catch (error) {
-          setPawaDevError({
-              message:`error from ${this._componentName} prop :${propsName} ${error.message}`,
-              error:error,
-              template:this._template
-            })
+        if(attr.value === '') attr.value="true";
+        const expression=`()=>{
+            try{
+          const prop= ${replaceTemplateOperators(attr.value)};
+          if(prop === '')return prop
+          return prop
+          }catch(error){
+            console.error(error.message,error.stack)
+           }
+        }`
+        const value=this.safeEval(this._context,expression,`prop sdvd :${propsName}`,true)
+        if (value) {
+          this._props[propsName]=value
         }
        }
     })

package/utils.js

@@ -27,44 +27,24 @@ export const pawaWayRemover=async (comment,endComment)=>{
   }
 return await pawaWayRemover(comment,endComment)
 }
-export const processNode = (node, itemContext) => {
+export const processNode = (node, itemContext, pawaEl) => {
   
   if (typeof itemContext === 'number') {
     return
   }
   
-  if (node.nodeType === 3) { // Text node
-    const text = node.textContent
-    const newText = text.replace(/{{(.+?)}}/g, (match, exp) => {
-      try {
-        const keys = Object.keys(itemContext)
-        
-        const values = keys.map(key => itemContext[key])
-        
-        return new Function(...keys, `return ${exp}`)(...values)
-      } catch {
-        return match
-      }
-    })
-    //console.log(newText)
-    node.textContent = newText
-  } else if (node.attributes) {
+  if (node.attributes) {
     Array.from(node.attributes).forEach(attr => {
+      if(attr.name !== 'for-key') return
       const newValue = attr.value.replace(/{{(.+?)}}/g, (match, exp) => {
-        try {
-          const keys = Object.keys(itemContext)
-          const values = keys.map(key => itemContext[key])
-          return new Function(...keys, `return ${exp}`)(...values)
-        } catch {
-          return match
-        }
+        // The pawaEl is the element holding the for-each directive.
+        const result = pawaEl.safeEval(itemContext, exp, 'for-key', true);
+        return result ?? match;
       })
       attr.value = newValue
     })
   }
-  Array.from(node.childNodes).forEach((n) => {
-    processNode(n, itemContext)
-  })
+  
 }
 
 export const extractContextValues = (context) => {
@@ -86,9 +66,9 @@ return new Function(...keys,`return ${exp}`)(...values)
     }
 }
 
-export const setPawaDevError=({message,error,template})=>{
+export const setPawaDevError=({message,error,template, el})=>{
   console.error(message,error.message,error.stack)
-   __pawaDev.setError({msg:message ,stack:error.stack,el:template})
+   __pawaDev.setError({msg:message ,stack:error.stack,template:template, el:el})
 }
 
 export const propsValidator=(obj={},propsAttri,name,template,el)=>{
@@ -155,21 +135,11 @@ export const safeEval=(context,expression,el,resolve=false)=>{
   };
   if(resolve){
     return new Function(...keys,`
-      try{
       return ${expression}
-      }catch(error){
-      console.error(error.message,error.stack)
-      __pawaDev.setError({msg:error.message,stack:error.stack})
-      }
       `)(...getEvalValues(context))
   }else{
     return new Function(...keys,`
-      try{
-      return ${expression}
-      }catch(error){
-      console.error(error.message,error.stack)
-      __pawaDev.setError({msg:error.message,stack:error.stack})
-      }
+      return ${expression}    
       `)
   }
   
@@ -177,7 +147,7 @@ export const safeEval=(context,expression,el,resolve=false)=>{
     setPawaDevError({
           message:`Error : ${error.message} ${error.stack}`,
           error:error,
-          template:el._template
+          template:el?._template
         })
   }
 }