pawajs 2.3.5 → 2.4.0-beta.1

package/cdn/index.js

@@ -7,7 +7,7 @@ export const Counter=()=>{
   return html`
   <div>
     <h1>Counter APPs</h1>
-    <h2>@{count.value}</h2>
+    <h2 --data="through">@{count.value}</h2>
     <span if="count.value > 0">positive</span>
     <span else-if="count.value < 0">negative</span>
     <span else>It zero</span>

package/normal/component.js

@@ -73,7 +73,7 @@ function restorePawaStateFromContext(oldCtx, newCtx,stateContext,oldStateContext
       Object.prototype.hasOwnProperty.call(prevInitials, key) &&
       !sameInitial(prevInitials[key], freshInitials[key])
 
-    if (typeof newVal.value === typeof oldVal.value ) {
+    if (isPawaState(newVal) && isPawaState(oldVal) && typeof newVal.value === typeof oldVal.value ) {
       newVal.value = oldVal.value
     }
   }
@@ -190,10 +190,7 @@ export const normal_component=(el,stateContext,setStateContext,mapsPlugin,former
       el._setUnMount(()=>{
         const array=HmrComponentMap.get(el._componentName)
         if(array){
-          const index=array.findIndex(item => item.id === id)
-          if(index !== -1) array.splice(index,1)
-        }else{
-          HmrComponentMap.delete(el._componentName)
+          removeFromHmrMap()
         }
       })
     }
@@ -312,8 +309,12 @@ export const normal_component=(el,stateContext,setStateContext,mapsPlugin,former
     if(Object.entries(restProps).length > 0){
       if (findElement) {
         for (const [key,value] of Object.entries(restProps)) {
+          if (findElement.hasAttribute(value.name)) {
+            findElement.setArribute(`-${value.name}`,value.value)
+          }else{
             findElement.setAttribute(value.name,value.value)
           }
+          }
         }
       }
     }

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "pawajs",
-  "version": "2.3.5",
-  "type":"module",
-  "description": "pawajs library (reactive web runtime) for easily building web ui, enhancing html element, micro frontend, spa etc ",
+  "version": "2.4.0-beta.1",
+  "type": "module",
+  "description": "pawajs library (reactive web runtime) for easily building web ui, enhancing html element, micro frontend, spa etc",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -17,7 +17,8 @@
     "html",
     "css",
     "web development",
-    "ui"
+    "ui",
+    "runtime"
   ],
   "author": "Allwell Oriso-owubo Owupele",
   "license": "MIT",
@@ -26,4 +27,4 @@
   },
   "homepage": "https://pawajs.vercel.app",
   "website": "https://pawajs.vercel.app"
-}
+}

package/pawaElement.js

@@ -24,14 +24,13 @@ export class PawaElement {
       _slots: document.createDocumentFragment(), _mainAttribute: {}, _preRenderAvoid: [], _running: false,
       _hasForOrIf: this.hasForOrIf, _elementContent: element.textContent, _textContent: {}, _attributes: [],
       _template: div.outerHTML, _exitAnimation: null, _component: null, _unMountFunctions: [], _MountFunctions: [],_beforeUnMountFunctions:[],
-      _elementType: '', _getNode: this.getNode, _componentOrTemplate: false, _props: {}, _isView: null,
+      _elementType: '', _componentOrTemplate: false, _props: {},
       _isElementComponent: false, _pawaAttribute: {}, _setUnMount: this.setUnMounts, _componentName: '',_compoToSvg: false,_asChild: false,
       _attrElement: this.getNewElementByRemovingAttr, _attr: {}, _staticContext: [], _checkStatic: this.reCheckStaticContext,
       _callMount: this.mount, _callUnmount: this.unMount, _remove: this.remove, _componentChildren: undefined,
-      _pawaElementComponent: null, _componentTerminate: null, _cacheSetUp: false, _effectsCarrier: null,_beforeUnMount:this.beforeUnMount,
+      _pawaElementComponent: null, _componentTerminate: null,  _beforeUnMount:this.beforeUnMount,
       _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: {},
+      _deCompositionElement: false, _restProps: {}, _kill: null, _isKill: false,  _underControl: null, safeEval: this.safeEval, _reactiveProps: {},
       _clearContext:this.clearContext
     })
     
@@ -102,11 +101,17 @@ export class PawaElement {
         if(!this._el.hasAttribute(value.toLowerCase())) {
           return
         }
-        this._attributes.push({name:value,value:this._el.getAttribute(value.toLowerCase())})
+        let attrName=value.replace(/^-+/, '');
+    attrName=attrName.trim()
+        this._attributes.push({name:attrName.startsWith('on-') || attrName === 'ref'?attrName:value,value:this._el.getAttribute(value.toLowerCase())})
         // console.log(this._el,this._attributes);
       })
     }else{
-      this._attributes=Array.from(this._el.attributes)
+      this._attributes=Array.from(this._el.attributes).map((attr)=>{
+        let attrName=attr.name.replace(/^-+/, '');
+        attrName=attrName.trim()
+        return {name:attrName.startsWith('on-') || attrName === 'ref'?attrName:attr.name,value:attr.value}
+      })
     }
   }
   findPawaAttribute(){
@@ -130,12 +135,6 @@ export class PawaElement {
   setUnMounts(func){
     this._unMountFunctions.push(func)
   }
-  getNode(){
-      const nodeDiv=document.createElement('div')
-      nodeDiv.innerHTML=this._template
-      const node=nodeDiv.firstElementChild
-      return node
-  }
   terminateEffects(){
     this._terminateEffects.forEach((eff) => {
         eff()
@@ -316,12 +315,7 @@ export class PawaElement {
         }
         const primaryAttribute=['if','else','else-if','key','for-each','case','switch','s-default']
         if (!attr.name.startsWith(':') && !primaryAttribute.includes(attr.name)) {
-          let name=''
-          if (attr.name.startsWith('-')) {
-            name=attr.name.slice(1)
-          } else {
-            name=attr.name
-          }
+          let name=attr.name
           const context=this._context
           const main={...context}
                 const setProps=()=>{
@@ -338,22 +332,19 @@ export class PawaElement {
                      }
                  });
                  return value
-                 }else if( attr.name.startsWith('on-') || attr.name.startsWith('out-') || attr.name === 'ref'){
-                  const res=this.safeEval(context,`(e)=>{
-                    ${attr.value}
-                  }`, 'props',true)
-                  return res
                  }
                  return attr.value
                 }
                 
                 if (this._props[name] || name === 'class' && this._props['className'] || name === 'defaultValue' && this._props['defaultValue']) return
                 name=name.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+                let attrName=attr.name.replace(/^-+/, '');
+                attrName=attrName.trim()
                 if (name === 'class') {
                   this._props['className']=setProps
                 }else if(name === 'default'){
                   this._props['defaultValue']=setProps
-                }else{
+                }else if(!attrName.startsWith('on-') || !attrName.startsWith('ref') || !attrName.startsWith('out-')){
                   this._props[name]=setProps
                 }