pawajs 1.3.0

package/merger/for.js

@@ -0,0 +1,218 @@
+import { createEffect } from '../reactive.js';
+import { render, $state, keepContext, restoreContext } from '../index.js';
+import { PawaComment, PawaElement } from '../pawaElement.js';
+import { processNode, pawaWayRemover, safeEval, getEvalValues, setPawaDevError, checkKeywordsExistence } from '../utils.js';
+
+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
+    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
+            }
+            let update
+            array = func(...values)
+            if (!firstEnter) {
+                const div = document.createElement('div')
+                array.forEach((item, index) => {
+                    const context = el._context
+                    const itemContext = {
+                        [arrayItem]: item,
+                        [indexes]: index,
+                        ...context
+                    }
+                    const newElement = el._attrElement('for')
+                    newElement.setAttribute('data-for-index', index)
+                    processNode(newElement, itemContext)
+                    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)
+                })
+
+                elementArray.forEach((keyComment) => {
+                    let lookLike=null
+                    // console.log(keyComment.nextSibling,keyComment.nextSibling._exitAnimation,'next sib');
+                    lookLike = newElementsMap.get(keyComment._forKey) || null
+                    if (lookLike !== null) {
+                        keyComment._index = lookLike.getAttribute('data-for-index')
+                    }
+                    if (!el.getAttribute('for-key')) {
+                        return
+                    }
+                    if(lookLike) return
+                    if (lookLike === null) {
+                        elementArray.delete(keyComment) 
+                        
+                        insertIndex.delete(Number(keyComment._forKey))
+                        keyOrder.delete(keyComment._index)
+                        const promise = new Promise(async(resolve) => {
+                            await pawaWayRemover(keyComment,keyComment._endComment)
+                            keyComment._deleteKey()
+                            resolve(true)
+                        })
+                        removeElement.push(promise)
+                    }
+                })
+                //insertIndex.clear()
+                //find if update needed
+                if (div.children.length > elementArray.size || elementArray.size > div.children.length) {
+                    update=true
+                }else{
+                    let indexKey=0
+                    keyOrder.forEach((value,key)=>{
+                        if(update)return;
+                        if(div.children[indexKey].getAttribute('data-for-index') !== key){
+                            update=true
+                        }
+                    })
+                }
+                 const next = () => Promise.all(removeElement).then(async (res) => {
+                     if (res) {
+                        if (update) {
+                            const keyMap = new Map()
+                            elementArray.forEach(child => {
+                                keyMap.set(child._forKey, child)
+                            })
+                            Array.from(div.children).forEach((child, index) => {
+                                const key = child.getAttribute('for-key')
+                                const context = el._context
+                                const itemContext = {
+                                    [arrayItem]: array[index],
+                                    [indexes]: index,
+                                    ...context
+                                }
+                                
+                                if (keyMap.get(key)) {
+                                    let oldElement = keyMap.get(key)
+                                    const fragment = oldElement._resetForKeyElement()
+                                    
+                                    oldElement.remove()
+
+                                    endComment.parentElement.insertBefore(oldElement._endComment, endComment)
+                                    endComment.parentElement.insertBefore(oldElement, oldElement._endComment)
+                                    Array.from(fragment.childNodes).forEach((com) => {
+                                        endComment.parentElement.insertBefore(com, oldElement._endComment)
+                                    })
+                                } else {
+                                    const keyComment = document.createComment(`key=${child.getAttribute('for-key') || index}`)
+                                    const endKeyComment = document.createComment('end key')
+                                    PawaComment.Element(keyComment)
+                                    keyComment._endComment = endKeyComment
+                                    keyComment._setKey(child.getAttribute('for-key') || index)
+                                    child.setAttribute('for-unique', unique)
+                                    child.setAttribute('data-for-index', index)
+                                    keyComment._index = index
+                                    processNode(child, itemContext)
+
+                                    endComment.parentElement.insertBefore(endKeyComment, endComment)
+                                    endKeyComment.parentElement.insertBefore(keyComment, endKeyComment)
+                                    endKeyComment.parentElement.insertBefore(child, endKeyComment)
+                                    insertIndex.set(index, child.getAttribute('for-key') || 'key')
+                                    if (stateContext._hasRun) {
+                                        stateContext._hasRun = false
+                                        keepContext(stateContext)
+                                    }
+                                    elementArray.add(keyComment)
+                                    render(child, itemContext)
+                                    stateContext._hasRun = true
+                                }
+                            })
+                        }
+                    }
+                })
+
+                if (promised instanceof Promise) {
+                    promised = promised.then(()=>{
+                       return next()
+                    })
+                } else {
+                    promised = next()
+                }
+
+            }
+            if (firstEnter && !resume) {
+                array.forEach((item, index) => {
+                    const context = el._context
+                    const itemContext = {
+                        [arrayItem]: item,
+                        [indexes]: index,
+                        ...context
+                    }
+                    const newElement = el._attrElement('for')
+                    const keyComment = document.createComment(`key=${newElement.getAttribute('for-key') || index}`)
+                    const endKeyComment = document.createComment('end key')
+                    PawaComment.Element(keyComment)
+                    keyComment._endComment = endKeyComment
+                    newElement.setAttribute('for-unique', unique)
+                    newElement.setAttribute('data-for-index', index)
+                    processNode(newElement, itemContext)
+                    keyOrder.set(index,{comment:keyComment})
+                    keyComment._index = index
+                    keyComment._setKey(newElement.getAttribute('for-key') || index)
+                    endComment.parentElement.insertBefore(endKeyComment, endComment)
+                    endKeyComment.parentElement.insertBefore(keyComment, endKeyComment)
+                    endKeyComment.parentElement.insertBefore(newElement, endKeyComment)
+                    insertIndex.set(index, newElement.getAttribute('for-key') || 'key')
+                    // if(newElement.getAttribute('for-key)){
+                    //   keyMap
+                    // }
+                    if (stateContext._hasRun) {
+                        stateContext._hasRun = false
+                        keepContext(stateContext)
+                    }
+                    render(newElement, itemContext)
+                    stateContext._hasRun = true
+                    elementArray.add(keyComment)
+                })
+
+            } else {
+                if(!resume)return
+                if(once)return
+                elementArray.forEach((keyComment) => {
+                    if(keyComment.nextElementSibling === null) return
+                    const context = el._context
+                    const itemContext = {
+                        [arrayItem]: array[keyComment._index],
+                        [indexes]: keyComment._index,
+                        ...context
+                    }
+                    render(keyComment.nextElementSibling, itemContext,{notRender:false,index:null})
+                
+                })
+                once=true
+            }
+            firstEnter = false
+        } catch (error) {
+            setPawaDevError({
+                message: `Error from For directive ${error.message}`,
+                error: error,
+                template: el._template
+            })
+        }
+    }
+    return evaluate
+}

package/merger/if.js

@@ -0,0 +1,125 @@
+import { render, $state, keepContext,restoreContext} from '../index.js';
+import { pawaWayRemover, safeEval, getEvalValues, setPawaDevError, checkKeywordsExistence } from '../utils.js';
+
+export const merger_if=(el,attr,stateContext,resume=false,{comment,endComment,children,chained,chainMap})=>{
+    let func
+    let removePromise=null
+    let promised=false
+    let firstEnter = false
+    const parent = endComment.parentElement
+    let latestChain
+    let oldChain
+    if (resume) {
+        oldChain={id:attr.value}
+    }
+    const evaluate = () => {
+        if (endComment.parentElement === null) {
+            el._deleteEffects()
+        }
+        try {
+            
+            if (!func) {
+                func =new Map()
+                chained.forEach((item)=>{
+                    if(item.condition === 'else')return
+                    let funcs=safeEval(el._context,item.exp,item.element)
+                    func.set(item.exp,funcs)
+                })
+            }
+            const values = getEvalValues(el._context)
+            let current
+            chained.forEach(element => {
+                if (current || element.condition === 'else') return
+                current=func.get(element.exp)(...values)
+                if (current) {
+                    latestChain={
+                        id:element.exp,
+                        condition:element.condition
+                    }
+                }else{
+                    latestChain={
+                        id:'else',
+                        condition:'else'
+                    }
+                }
+            });
+            if (!firstEnter) {
+                for (const fn of el._terminateEffects) {
+                    comment._terminateEffects.add(fn)
+                }
+            }
+            const setElement=(newElement,exp)=>{
+                newElement.removeAttribute(exp)
+                if (stateContext._hasRun) {
+                    stateContext._hasRun = false
+                    keepContext(stateContext)
+                }
+                comment.data=`condition ${exp}`
+                parent.insertBefore(newElement, endComment)
+                render(newElement, el._context)
+                stateContext._hasRun = true
+            }
+                if (comment.nextSibling !== endComment && oldChain.id !== latestChain.id) {
+                    removePromise=pawaWayRemover(comment,endComment)
+                }
+                    if (comment.nextSibling === endComment) {
+
+                        Promise.resolve(removePromise).then(()=>{
+                            if (comment.nextSibling === endComment) {
+                                const getRightElement=chainMap.get(latestChain.id)
+                                if (getRightElement) {
+                                    const ele=getRightElement.element.cloneNode(true)
+                                    setElement(ele,latestChain.condition) 
+                                }
+                            }
+                            promised=false
+                        })
+                        promised=true
+                        
+                    }
+                    if(firstEnter){
+                        if(oldChain.id === latestChain.id)return
+                        const getRightElement=chainMap.get(latestChain.id)
+                        if (getRightElement) {
+                            Promise.resolve(removePromise).then(()=>{
+                                if (comment.nextSibling === endComment && oldChain.id === latestChain.id) {
+                                const getRightElements=chainMap.get(latestChain.id)
+                                if (getRightElements) {
+                                    const ele=getRightElement.element.cloneNode(true)
+                                    setElement(ele,latestChain.condition) 
+                                }
+                            }
+                            promised=false
+                        })
+                            }else{
+                                removePromise=pawaWayRemover(comment,endComment)
+                            }
+                        }
+                        
+                        if(firstEnter === false && resume && current){
+                            el.removeAttribute(attr.name)
+                         if (stateContext._hasRun) {
+                        stateContext._hasRun = false
+                        keepContext(stateContext)
+                    }
+                      const number={notRender:null,index:null}
+                            children.forEach((value, index) => {
+                              number.index=index
+                              if(number.notRender && index >= number.notRender) return
+                              render(value,el._context,number)
+                            })
+                        stateContext._hasRun=true
+                }
+            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
+                })
+            }
+        }
+        return evaluate
+}

package/merger/key.js

@@ -0,0 +1,101 @@
+import { render, $state, keepContext,restoreContext} from '../index.js';
+import { pawaWayRemover, safeEval, getEvalValues, setPawaDevError, checkKeywordsExistence } from '../utils.js';
+
+export const merger_key=(el,attr,stateContext,resume=false,{comment,endComment,children,old})=>{
+    let func
+    let removePromise=null
+    let promised=false
+    let firstEnter = false
+    const parent = endComment.parentElement
+    let latestState
+    let oldsate
+    let once=false
+    if (resume) {
+        oldsate=old
+    }
+    const evaluate = () => {
+        if (endComment.parentElement === null) {
+            el._deleteEffects()
+        }
+        try {
+            let value=attr.value 
+            let keyValue
+            if (!func) {
+                func=safeEval(el._context,attr.value,el)
+            }
+            const values = getEvalValues(el._context)
+            let current
+            
+            if (!firstEnter) {
+                for (const fn of el._terminateEffects) {
+                    comment._terminateEffects.add(fn)
+                }
+            }
+            const setElement=(newElement,exp)=>{
+                if (stateContext._hasRun) {
+                    stateContext._hasRun = false
+                    keepContext(stateContext)
+                }
+                comment.data=`key ${latestState}`
+                endComment.data=`/ key ${latestState}`
+                parent.insertBefore(newElement, endComment)
+                render(newElement, el._context)
+                stateContext._hasRun = true
+            }
+            latestState=func(...values) 
+            if( resume && !once && latestState === oldsate){
+                         if (stateContext._hasRun) {
+                        stateContext._hasRun = false
+                        keepContext(stateContext)
+                    }
+                      const number={notRender:null,index:null}
+                            children.forEach((value, index) => {
+                              number.index=index
+                              if(number.notRender && index >= number.notRender) return
+                              render(value,el._context,number)
+                            })
+                        stateContext._hasRun=true
+                        once=true
+                }
+                    // if(oldsate === latestState && firstEnter)return 
+                    if (comment.nextSibling !== endComment && oldsate !== latestState) {
+                        removePromise=pawaWayRemover(comment,endComment)
+                    }
+                    if (oldsate !== latestState && firstEnter) {
+                        Promise.resolve(removePromise).then(()=>{
+                            if (comment.nextSibling === endComment && oldsate !== latestState) {
+                                const newElement=el.cloneNode(true)
+                                 newElement.removeAttribute('key')
+                                 oldsate=latestState
+                                 setElement(newElement,latestState) 
+                            }
+                            promised=false
+                        })
+                        promised=true
+                        
+                    }
+                    if(!firstEnter && !resume){
+                        if(oldsate === latestState)return
+                        if (comment.nextSibling === endComment && oldsate !== latestState) {
+                            const newElement=el.cloneNode(true)
+                            newElement.removeAttribute('key')
+                            oldsate=latestState
+                            setElement(newElement,latestState) 
+                          }
+
+                    //         promised=false
+                       }
+                        
+            
+         firstEnter=true
+            } catch (error) {
+                console.log(error.message,error.stack)
+                setPawaDevError({
+                    message: `Error from IF directive ${error.message}`,
+                    error: error,
+                    template: el._template
+                })
+            }
+        }
+        return evaluate
+}

package/merger/switch.js

@@ -0,0 +1,127 @@
+import { render, $state, keepContext,restoreContext} from '../index.js';
+import { pawaWayRemover, safeEval, getEvalValues, setPawaDevError, checkKeywordsExistence } from '../utils.js';
+
+export const merger_switch=(el,attr,stateContext,resume=false,{comment,endComment,children,chained,chainMap,caseValue})=>{
+    let func
+    let removePromise=null
+    let promised=false
+    let firstEnter = false
+    const parent = endComment.parentElement
+    let latestChain
+    let oldChain
+    let switchFunc
+    if (resume) {
+        oldChain={id:caseValue.value}
+    }
+    const evaluate = () => {
+        if (endComment.parentElement === null) {
+            el._deleteEffects()
+        }
+        try {
+            
+            if (!func) {
+                func =new Map()
+                chained.forEach((item)=>{
+                    if(item.condition === 'default')return
+                    let funcs=safeEval(el._context,item.exp,item.element)
+                    func.set(item.exp,funcs)
+                })
+                switchFunc=safeEval(el._context,attr.value,el)
+            }
+            const values = getEvalValues(el._context)
+            let current
+            chained.forEach(element => {
+                if (current || element.condition === 'default') return
+                current=switchFunc(...values) === func.get(element.exp)(...values)
+                if (current) {
+                    latestChain={
+                        id:element.exp,
+                        condition:element.condition
+                    }
+                }else{
+                    latestChain={
+                        id:'default',
+                        condition:'default'
+                    }
+                }
+            });
+            if (!firstEnter) {
+                for (const fn of el._terminateEffects) {
+                    comment._terminateEffects.add(fn)
+                }
+            }
+            const setElement=(newElement,exp)=>{
+                newElement.removeAttribute(exp)
+                if (stateContext._hasRun) {
+                    stateContext._hasRun = false
+                    keepContext(stateContext)
+                }
+                comment.data=`condition ${exp}`
+                parent.insertBefore(newElement, endComment)
+                render(newElement, el._context)
+                stateContext._hasRun = true
+            }
+                if (comment.nextSibling !== endComment && oldChain.id !== latestChain.id) {
+                    removePromise=pawaWayRemover(comment,endComment)
+                }
+                    if (comment.nextSibling === endComment) {
+
+                        Promise.resolve(removePromise).then(()=>{
+                            if (comment.nextSibling === endComment) {
+                                const getRightElement=chainMap.get(latestChain.id)
+                                if (getRightElement) {
+                                    const ele=getRightElement.element.cloneNode(true)
+                                    setElement(ele,latestChain.condition) 
+                                }
+                            }
+                            promised=false
+                        })
+                        promised=true
+                        
+                    }
+                    if(firstEnter){
+                        if(oldChain.id === latestChain.id)return
+                        const getRightElement=chainMap.get(latestChain.id)
+                            if (getRightElement) {
+                                Promise.resolve(removePromise).then(()=>{
+                            if (comment.nextSibling === endComment) {
+                                const getRightElement=chainMap.get(latestChain.id)
+                                if (getRightElement) {
+                                    const ele=getRightElement.element.cloneNode(true)
+                                    setElement(ele,latestChain.condition) 
+                                }
+                            }
+                            promised=false
+                        })
+                            }else{
+                                removePromise=pawaWayRemover(comment,endComment)
+                            }
+                        }
+                        
+                        if(firstEnter === false && resume && current){
+                            el.removeAttribute(attr.name)
+                         if (stateContext._hasRun) {
+                        stateContext._hasRun = false
+                        keepContext(stateContext)
+                    }
+                      const number={notRender:null,index:null}
+                            children.forEach((value, index) => {
+                              number.index=index
+                              if(number.notRender && index >= number.notRender) return
+                              render(value,el._context,number)
+                            })
+                        stateContext._hasRun=true
+                }
+            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
+                })
+            }
+        }
+        return evaluate
+}

package/normal/For.js

@@ -0,0 +1,30 @@
+import { createEffect } from '../reactive.js';
+import { pawaWayRemover} from '../utils.js';
+import { merger_for } from '../merger/for.js';
+export const normal_For = (el, attr, stateContext, endComment) => {
+    const exp = new WeakMap()
+    const value = attr.value
+    const split = value.split(' in ')
+    const arrayName = split[1]
+    const arrayItems = split[0].split(',')
+    const arrayItem = arrayItems[0]
+    const indexes = arrayItems[1]
+    const comment = document.createComment(`${attr.value}`)
+    endComment.parentElement.insertBefore(comment, endComment)
+    el._underControl = comment
+    const unique = crypto.randomUUID()
+    const insertIndex = new Map()
+    const elementArray = new Set()
+    el._deCompositionElement = true
+    el._isKill = true
+    el._kill = () => {
+        pawaWayRemover(comment, endComment)
+        comment.remove(), endComment.remove();
+    }
+    const evaluate = merger_for(el, stateContext, attr, arrayName, arrayItem, indexes, false,
+        { comment, endComment, unique, elementArray, insertIndex })
+    createEffect(() => {
+        evaluate()
+    })
+
+}

package/normal/If.js

@@ -0,0 +1,29 @@
+import { createEffect } from '../reactive.js';
+import { render, $state, keepContext,restoreContext} from '../index.js';
+import { PawaComment, PawaElement } from '../pawaElement.js';
+import { processNode, pawaWayRemover, safeEval, getEvalValues, setPawaDevError, checkKeywordsExistence } from '../utils.js';
+import { merger_if } from '../merger/if.js';
+export const normal_If=(el, attr, stateContext,endComment,chainMap,chained)=>{
+    
+        const comment = document.createComment(`condition`)
+        el._out = true
+        const parent = endComment.parentElement
+        el._deCompositionElement = true
+        el._isKill = true
+        el._kill = () => {
+            pawaWayRemover(comment, endComment)
+            comment.remove(), endComment.remove();
+        }
+        PawaComment.Element(comment)
+        comment._setCoveringElement(el)
+        parent.insertBefore(comment, endComment)
+        el._underControl = comment
+        const context = el._context
+        let firstEnter = false
+        comment._controlComponent = true
+       const evaluate=merger_if(el,attr,stateContext,false,
+        {comment,endComment,chained,chainMap})
+        createEffect(() => {
+            evaluate()
+        }, el)
+}

package/normal/Key.js

@@ -0,0 +1,27 @@
+import { createEffect } from '../reactive.js';
+import { render, $state, keepContext,restoreContext} from '../index.js';
+import { PawaComment, PawaElement } from '../pawaElement.js';
+import { processNode, pawaWayRemover, safeEval, getEvalValues, setPawaDevError, checkKeywordsExistence } from '../utils.js';
+import { merger_key } from '../merger/key.js';
+export const normal_key=(el, attr, stateContext,endComment,chainMap,chained)=>{
+    
+        const comment = document.createComment(`condition`)
+        el._out = true
+        const parent = endComment.parentElement
+        el._deCompositionElement = true
+        el._isKill = true
+        el._kill = () => {
+            pawaWayRemover(comment, endComment)
+            comment.remove(), endComment.remove();
+        }
+        PawaComment.Element(comment)
+        comment._setCoveringElement(el)
+        parent.insertBefore(comment, endComment)
+        el._underControl = comment
+        comment._controlComponent = true
+       const evaluate=merger_key(el,attr,stateContext,false,
+        {comment,endComment})
+        createEffect(() => {
+            evaluate()
+        }, el)
+}