pawajs 1.3.1 → 1.3.3

package/index.js

@@ -298,7 +298,7 @@ const setPrimaryAttibute = (...name) => {
 export const getPrimaryDirective=()=>primaryDirective
 setPrimaryAttibute('if', 'else-if', 'for', 'else','switch','case','default','case','key')
 setPawaAttributes('if', 'else-if', 'for', 'else', 'mount',
-    'unmount', 'forKey', 'state-', 'on-', 'out-','key')
+    'unmount', 'forKey', 'state-', 'on-', 'out-','key','switch','case','default')
 export const getDependentAttribute = () => dependentPawaAttribute
 export const getPawaAttributes = () => {
     return pawaAttributes
@@ -358,7 +358,7 @@ export const RegisterComponent = (...args) => {
  * @param {Array|null|object|number} deps 
  * Array - for state dependency.
  * 
- * object- for any state used inside of the callback but under the use of element or component.
+ * object- for any state used inside of the callback but under the use of element or component. this is read-only state not for state updating
  * 
  * Number - before mount hook.
  * 
@@ -960,12 +960,12 @@ const textContentHandler = (el, isName) => {
     }, el);
 };
 
-const template = (el, resume = false, notRender, attr) => {
+const template = (el,notRender, attr) => {
     if (el._running) {
         return
     }
     el._running = true
-    templates(el)
+    templates(el,notRender)
 }
 
 const directives = {
@@ -1045,7 +1045,7 @@ export const render = (el, contexts = {}, notRender, isName) => {
                 directives[attr.name](el, attr, stateContext)
             } else if (attr.name.startsWith('on-')) {
                 event(el, attr, stateContext)
-            } else if (attr.value.includes('@{') && !attr.name.startsWith('resume-attr')) {
+            } else if (attr.value.includes('@{') && !attr.name.startsWith('c-at-')) {
                 mainAttribute(el, attr, isName)
             } else if (attr.name.startsWith('state-')) {
                 States(el, attr, getCurrentContext())
@@ -1072,7 +1072,10 @@ export const render = (el, contexts = {}, notRender, isName) => {
                 directives['if'](el, attr, stateContext, true, notRender, stopResume)
             } else if (attr.name === 'c-for') {
                 directives['for'](el, attr, stateContext, true, notRender, stopResume)
-            } else if (attr.name.startsWith('c-sw-')) {
+            }else if (attr.name.startsWith('c-key-')) {
+                directives['key'](el, attr, stateContext, true, notRender, stopResume)
+            }  
+            else if (attr.name.startsWith('c-sw-')) {
                 directives['switch'](el, attr, stateContext, true, notRender, stopResume)
             } else if (attr.name === 'c-for') {
                 directives['for'](el, attr, stateContext, true, notRender, stopResume)
@@ -1114,7 +1117,7 @@ export const render = (el, contexts = {}, notRender, isName) => {
         return
     }
     if (el._elementType === 'template' && !el._avoidPawaRender) {
-        template(el)
+        template(el,notRender)
         return
     }
 
@@ -1134,7 +1137,6 @@ export const render = (el, contexts = {}, notRender, isName) => {
         const number = { notRender: null, index: null }
         Array.from(el.children).forEach((child, index) => {
             number.index = index
-            if (number.notRender && index <= number.notRender) return
             render(child, context, number, isName)
         })
         el._callMount()
@@ -1144,6 +1146,7 @@ export const render = (el, contexts = {}, notRender, isName) => {
 }
 }
 
+
 export const pawaStartApp = (app, context = {}) => {
     render(app, context)
 }

package/merger/for.js

@@ -9,7 +9,7 @@ export const merger_for = (el, stateContext, attr, arrayName, arrayItem, indexes
     let func
     let once=false
     let promised
-    const keyOrder= keyOrders || new Map()
+    const keyOrder=keyOrders || new Map()
     const evaluate = () => {
         if (endComment.parentElement === null) {
             el._deleteEffects()
@@ -71,7 +71,12 @@ export const merger_for = (el, stateContext, attr, arrayName, arrayItem, indexes
                         keyOrder.delete(keyComment._index)
                         const promise = new Promise(async(resolve) => {
                             await pawaWayRemover(keyComment,keyComment._endComment)
-                            keyComment._deleteKey()
+                            if (!keyComment._deleteKey){
+                                keyComment.remove()
+                                keyComment._endComment.remove()
+                            }else{
+                                keyComment._deleteKey() 
+                            }
                             resolve(true)
                         })
                         removeElement.push(promise)
@@ -201,7 +206,6 @@ export const merger_for = (el, stateContext, attr, arrayName, arrayItem, indexes
                         ...context
                     }
                     render(keyComment.nextElementSibling, itemContext,{notRender:false,index:null})
-                
                 })
                 once=true
             }

package/normal/component.js

@@ -10,6 +10,7 @@ export const normal_component=(el,stateContext,setStateContext,mapsPlugin,former
     el.replaceWith(endComment)
     endComment.parentElement.insertBefore(comment,endComment)
     el._underControl=comment
+    comment._endComment=endComment
     comment._componentElement=el
     comment._controlComponent=true
         const props={}
@@ -135,7 +136,7 @@ export const normal_component=(el,stateContext,setStateContext,mapsPlugin,former
       }
       const childInsert=()=>{
       el._component?._hook?.beforeMount?.forEach((bfm) => {
-     const result= bfm()
+     const result= bfm(comment)
      if (typeof result === 'function') {
        el._unMountFunctions.push(result)
      }
@@ -176,7 +177,7 @@ export const normal_component=(el,stateContext,setStateContext,mapsPlugin,former
         el._component?._hook?.reactiveEffect.forEach((hook) => {
           if(hook?.done) return
           hook.done=true
-          const effect=hook.effect()
+          const effect=hook.effect(comment)
           if (hook.deps?.component) {
             createEffect(() => {
               return effect()
@@ -190,7 +191,7 @@ export const normal_component=(el,stateContext,setStateContext,mapsPlugin,former
       }
       el._MountFunctions.forEach((func) => {
         func.done=true
-        const result=func()
+        const result=func(comment)
         if (typeof result === 'function') {
           el._unMountFunctions.push(result)
         }

package/normal/template.js

@@ -1,24 +1,27 @@
 import {render} from '../index.js'
-export const templates=(el)=>{
-     const comment=document.createComment('<template>')
-         const endComment=document.createComment('</template>')
-         el.replaceWith(endComment)
-         //kill the template element
-         el._isKill=true
-        el._kill=()=>{
-           pawaWayRemover(comment,endComment)
-          comment.remove(),endComment.remove();
-         }
-         endComment.parentElement.insertBefore(comment,endComment)
-         el._underControl=comment
-         let element=[]
+export const templates=(el,notRender)=>{
+    if (el.hasAttribute('p:store')) {
+        return
+    }
+    const comment=document.createComment('<template>')
+    const endComment=document.createComment('</template>')
+    el.replaceWith(endComment)
+    //kill the template element
+    el._isKill=true
+    const isResume=el.hasAttribute('pawa-render')
+    el._kill=()=>{
+        pawaWayRemover(comment,endComment)
+        comment.remove(),endComment.remove();
+    }
+    endComment.parentElement.insertBefore(comment,endComment)
+    el._underControl=comment
+    let element=[]
          Array.from(el.content.children).forEach((child) => {
              endComment.parentElement.insertBefore(child,endComment)
              element.push(child)  
          })
-        const number={notRender:null,index:null}
+        
          element.forEach(child=>{
-            if(number.notRender)return
-            render(child,el._context,number) 
+            render(child,el._context,isResume?notRender:{ notRender: null, index: null }) 
         })
 }

package/package.json

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

package/pawaElement.js

@@ -1,7 +1,6 @@
-import {components,escapePawaAttribute,getPawaAttributes,getDependentAttribute,} from './index.js';
+import {components,escapePawaAttribute,getPawaAttributes,getDependentAttribute} from './index.js';
 import {splitAndAdd,replaceTemplateOperators,setPawaDevError,getEvalValues,safeEval} from './utils.js';
 import PawaComponent from './pawaComponent.js';
-import { getPrimaryDirective } from './index.js';
 
 
 export class PawaElement {
@@ -88,6 +87,7 @@ export class PawaElement {
         }
       })
     }
+    this.setPawaAttr()
     this.elementType()
     this.setProps()
     this.setAttri()
@@ -106,6 +106,19 @@ export class PawaElement {
       call()
     })
   }
+  setPawaAttr(){
+    const isResume=this._el.hasAttribute('p:c')
+    if(isResume){
+      const pawaAttr=this._el.getAttribute('p:c')
+      const array=pawaAttr.split(';')
+      array.forEach(value =>{
+        if(!this._el.hasAttribute(value)) return
+        this._attributes.push({name:value,value:this._el.getAttribute(value)})
+      })
+    }else{
+      this._attributes=Array.from(this._el.attributes)
+    }
+  }
   findPawaAttribute(){
     Array.from(this._el.attributes).forEach((attr) => {
       const pawaAttribute=getPawaAttributes()
@@ -198,8 +211,7 @@ export class PawaElement {
           this._out=true
           this._el.remove()
           if (callback) {
-            console.log(callback)
-            callback?.()
+            callback()
           }
           return true
     }
@@ -352,7 +364,7 @@ export class PawaComment {
     this._endComment=null
     this._keyRemover=this.keyRemoveElement
     this._resetForKeyElement=this.forKeyResetElement
-    this._deleteKey=this.deleteKey
+    this._deletKey=this.deleteKey
   }
   static Element(element){
     const pawa=new PawaComment(element)
@@ -378,15 +390,15 @@ export class PawaComment {
       return  
     } else {
       if (comment?.nextSibling?.nodeType === 8) {
+        // console.log(comment)
         if(comment.nextSibling?._controlComponent){
           comment.nextSibling._remove()
-                  }else{
+        }else{
           comment.nextSibling.remove() 
         }
            
       } else if (comment.nextSibling.nodeType === 1) {
         if (firstElement) {
-          console.log(callback)
           await comment.nextSibling._remove(callback)
         }  else{
           await comment.nextSibling._remove()

package/power.js

@@ -235,7 +235,7 @@ export const For = (el, attr, stateContext,resume=false,notRender,stopResume) =>
         stopResume.stop=true
             let comment
             let endComment
-            let dataComment
+            let dataElement
             let id=attr.value
             const children=[]
             const setComment=(c)=>comment=c
@@ -244,14 +244,15 @@ export const For = (el, attr, stateContext,resume=false,notRender,stopResume) =>
             getEndComment(comment,setEndComment,id,children,'isFor')
             const numberIfChildren=notRender.index + children.length - 1
       notRender.notRender=numberIfChildren
-            dataComment=comment.nextSibling
+            dataElement=comment.nextSibling
             el.removeAttribute(attr.name)
-            dataComment.remove()
-            resumer.resume_for?.(el,attr,stateContext,{comment,endComment,id,children,dataComment})
+            dataElement.remove()
+            resumer.resume_for?.(el,attr,stateContext,{comment,endComment,id,children,dataElement})
     }
     
 }
 
+
 export const ref = (el, attr) => {
     el._checkStatic() 
     if (el._running || checkKeywordsExistence(el._staticContext,attr.value)) {