pawajs 2.0.6 → 2.0.8

package/package.json

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

package/pawaElement.js

@@ -10,7 +10,6 @@ import { lazyComponentElement } from './index.js';
 export class PawaElement {
   
   #context
-  #el
   /**
    * 
    * @param {HTMLElement} element 
@@ -18,11 +17,10 @@ export class PawaElement {
    */
   constructor(element,context) {
   this.#context=context
-  this.#el=element
     const div=element.cloneNode(true)
     Object.assign(this, {
       _resetEffects: new Set(), _context: context, _avoidPawaRender: element.hasAttribute('pawa-avoid'),
-       _out: false, _stateContext: null, _terminateEffects: new Set(), _deleteEffects: this.terminateEffects,
+      _el: element, _out: false, _stateContext: null, _terminateEffects: new Set(), _deleteEffects: this.terminateEffects,
       _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:[],
@@ -50,13 +48,13 @@ export class PawaElement {
     Object.assign(element,pawa)
   }
   getChildrenTree(){
-    return Array.from(this.#el.children)
+    return Array.from(this._el.children)
   }
   checkLazy(){
-    if (lazyComponents.has(splitAndAdd(this.#el.tagName))) {
-      if(components.has(splitAndAdd(this.#el.tagName))) return
+    if (lazyComponents.has(splitAndAdd(this._el.tagName))) {
+      if(components.has(splitAndAdd(this._el.tagName))) return
       this._lazy=true
-        triggerLazyLoad(splitAndAdd(this.#el.tagName))
+        triggerLazyLoad(splitAndAdd(this._el.tagName))
       
     }
   }
@@ -78,9 +76,9 @@ export class PawaElement {
   
   }catch(error){
     throw new Error(`Error evaluating expression: ${expression}\n${error.message}`);
-    let element=this.#el || null
+    
     __pawaDev.setError({ 
-      el:element, 
+      el:this?._el, 
       msg:`from ${expression}`, 
       directives:directive, 
       stack:error.stack, 
@@ -95,24 +93,24 @@ export class PawaElement {
     })
   }
   setPawaAttr(){
-    const isResume=this.#el.hasAttribute('p:c')
-    if (this.#el.hasAttribute('p-async')) return
+    const isResume=this._el.hasAttribute('p:c')
+    if (this._el.hasAttribute('p-async')) return
     if(isResume){
-      const pawaAttr=this.#el.getAttribute('p:c')
+      const pawaAttr=this._el.getAttribute('p:c')
       const array=pawaAttr.split(';')
       array.forEach(value =>{
-        if(!this.#el.hasAttribute(value.toLowerCase())) {
+        if(!this._el.hasAttribute(value.toLowerCase())) {
           return
         }
-        this._attributes.push({name:value,value:this.#el.getAttribute(value.toLowerCase())})
-        // console.log(this.#el,this._attributes);
+        this._attributes.push({name: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)
     }
   }
   findPawaAttribute(){
-    Array.from(this.#el.attributes).forEach((attr) => {
+    Array.from(this._el.attributes).forEach((attr) => {
       const pawaAttribute=getPawaAttributes()
       const dependentAttribute=getDependentAttribute()
         if (pawaAttribute.has(attr.name) && !dependentAttribute.has(attr.name)) {
@@ -145,7 +143,7 @@ export class PawaElement {
   }
   
   getNewElementByRemovingAttr(attrName){
-    const element=this.#el.cloneNode(true)
+    const element=this._el.cloneNode(true)
     element.removeAttribute(attrName)
     return element
   }
@@ -189,7 +187,7 @@ export class PawaElement {
       const animate=this._exitAnimation().then(async () => {
          await this._callUnmount()
           this._out = true
-          this.#el.remove()
+          this._el.remove()
           if (callback) {
             callback()
           }
@@ -201,7 +199,7 @@ export class PawaElement {
     } else {
       this._callUnmount()
           this._out=true
-          this.#el.remove()
+          this._el.remove()
           if (callback) {
             callback()
           }
@@ -225,9 +223,9 @@ export class PawaElement {
      func()
    })
    this._deleteEffects()   
-   Array.from(this.#el.childNodes).forEach(child => {
+   Array.from(this._el.childNodes).forEach(child => {
      if (child.nodeType === 1) {
-       if (child?._template) {
+       if (child?._el) {
          child._out = true
          child._deleteEffects()
          child._callUnmount()   
@@ -256,21 +254,21 @@ export class PawaElement {
     if (this._avoidPawaRender) {
       return
     }
-    const tag = this.#el.tagName
+    const tag = this._el.tagName
    try {
-      if (components.has(splitAndAdd(tag)) || this._lazy && !this.#el.hasAttribute('data-prevent:c')) {
+      if (components.has(splitAndAdd(tag)) || this._lazy && !this._el.hasAttribute('data-prevent:c')) {
       this._elementType='component'
       this._componentOrTemplate=true
       this._deCompositionElement=true
       this._componentName=splitAndAdd(tag)
       const forLazy=()=>true
       this._component=new PawaComponent(components.get(splitAndAdd(tag)) || forLazy)
-      Array.from(this.#el.children).forEach(slot =>{
+      Array.from(this._el.children).forEach(slot =>{
         if (slot.tagName === 'TEMPLATE' && slot.getAttribute('prop') && !slot.hasAttribute('js')) {
           this._slots.appendChild(slot)
         }
       })
-      this._componentChildren=this.#el.innerHTML
+      this._componentChildren=this._el.innerHTML
       
     } else if(tag ==='TEMPLATE'){
       this._elementType='template'
@@ -299,9 +297,9 @@ export class PawaElement {
       return
     }
     if (this._componentName) {
-      const hasPC=this.#el.hasAttribute('p:c')
+      const hasPC=this._el.hasAttribute('p:c')
       if (hasPC) {
-        Array.from(this.#el.attributes).forEach(attr => {
+        Array.from(this._el.attributes).forEach(attr => {
           if (attr.name.startsWith('c-') || attr.name === 'by') return
            this._attributes.push({name:attr.name,value:attr.value})
         });