pawajs 1.4.37 → 1.4.38

package/index.d.ts

@@ -10,6 +10,7 @@ export interface PawaElement extends HTMLElement {
     _terminateEffects: Set<Function>;
     _deleteEffects: () => void;
     _slots: DocumentFragment;
+    _stateContext: any;
     _mainAttribute: Record<string, any>;
     _preRenderAvoid: string[];
     _lazy: boolean;
@@ -74,6 +75,7 @@ export interface PawaElement extends HTMLElement {
     mount(): void;
     elementType(): void;
     setProps(): void;
+    safeEval(context: any, expr: string, error?: string, element?: boolean): any;
 }
 
 export interface PawaComment extends Comment {
@@ -157,6 +159,9 @@ export function pluginsMap(): {
     fullNamePlugin: Set<string>;
     externalPlugin: Record<string, Function>;
     externalPluginMap: Map<string, string[]>;
+    primaryDirective: Set<string>;
+    pawaAttributes: Set<string>;
+    allowAsProp: Set<string>;
 };
 
 export const escapePawaAttribute: Set<string>;
@@ -178,6 +183,19 @@ export function keepContext(context: any): void;
 
 export const components: Map<string, Function>;
 
+export const lazyComponents: Map<string, any>;
+
+/**
+ * Internal registry for tracking elements awaiting lazy component loading.
+ */
+export const lazyComponentElement: Map<string, { element: PawaElement; func: Function }[]>;
+
+export function addLazyComponentElement(element: PawaElement, func: Function): void;
+
+export function createIntersectionObserver(element: HTMLElement, observeBy?: HTMLElement): IntersectionObserver;
+
+export const HmrComponentMap: Map<string, any>;
+
 export function getCurrentContext(): any;
 
 export function setPawaAttributes(...attr: string[]): void;
@@ -278,6 +296,12 @@ export function useAsync(): { $async: <T>(callback: () => T) => T ,onSuspense:(h
  */
 export function isResume(): boolean;
 
+/**
+ * Forwards props to the child component.
+ * @param {Record<string, any>} [props] - Props to forward.
+ */
+export function forwardProps(props?: Record<string, any>): void;
+
 /**
  * Exposes variables to the template scope.
  * @param {Record<string, any>} [obj] - Variables to expose.
@@ -335,7 +359,10 @@ declare const Pawa: {
     setContext: typeof setContext;
     $state: typeof $state;
     pawaStartApp: typeof pawaStartApp;
+    useAsync: typeof useAsync;
+    useInnerContext: typeof useInnerContext;
     RegisterComponent: typeof RegisterComponent;
+    forwardProps: typeof forwardProps;
     runEffect: typeof runEffect;
     html: typeof html;
 };

package/index.js

@@ -75,6 +75,7 @@ const startsWithSet = new Set()
 const fullNamePlugin = new Set()
 const externalPlugin = {}
 const externalPluginMap = new Map()
+const allowAsProp= new Set()
 let pawaAttributes = new Set()
 let primaryDirective = new Set()
 
@@ -90,6 +91,7 @@ const mapsPlugins = {
     externalPluginMap,
     primaryDirective,
     pawaAttributes,
+    allowAsProp
 }
 export const pluginsMap = () => mapsPlugins
 export const escapePawaAttribute = new Set()
@@ -120,7 +122,8 @@ const applyMode = (mode, callback) => {
         }
     }
     /**
-     * @typedef {{startsWith:string,mode:null |'client'|'server',dependency:Array<string>,fullName:string,plugin:(el:HTMLElement | PawaElement,attr:object)=>void}} AttriPlugin
+     * @typedef {{startsWith:string,mode:null |'client'|'server',dependency:Array<string>,
+     * allowAsProp:boolean,fullName:string,plugin:(el:HTMLElement | PawaElement,attr:object)=>void}} AttriPlugin
      */
     /**
      * @typedef {{
@@ -155,8 +158,12 @@ func.forEach(fn => {
                     dependentPawaAttribute.add(dp); extPluginArray.push(dp)
                 })
             }
+
             const name = attrPlugins.fullName || attrPlugins.startsWith, set = attrPlugins.fullName ? fullNamePlugin : startsWithSet
             if (pawaAttributes.has(name)) { console.warn(`attribute plugin already exist ${name}`); return }
+            if (attrPlugins?.allowAsProp) {
+                allowAsProp.add(name)
+            }
             applyMode(attrPlugins?.mode, () => {
                 pawaAttributes.add(name); set.add(name); externalPlugin[name] = attrPlugins.plugin
                 if (extPluginArray.length) externalPluginMap.set(name, extPluginArray)
@@ -227,9 +234,9 @@ const setPrimaryAttibute = (...name) => {
 
 export const getPrimaryDirectives=()=>primaryDirective
 
-setPrimaryAttibute('if', 'else-if', 'for-each', 'else','switch','case','default','case','key')
+setPrimaryAttibute('if', 'else-if', 'for-each', 'else','switch','case','s-default','key')
 setPawaAttributes('if', 'else-if', 'for-each', 'else', 'mount',
-    'unmount', 'forKey', 'state-', 'on-', 'out-','key','switch','case','default')
+    'unmount', 'forKey', 'state-', 'on-', 'out-','key','switch','case','s-default')
 export const getDependentAttribute = () => dependentPawaAttribute
 export const getPawaAttributes = () => {
     return pawaAttributes
@@ -406,13 +413,13 @@ RegisterComponent.lazy=async(...args)=>{
                         }
                     },{
                         _terminateEffects:terminateEffect
-                    })
+                    },)
                     if (terminateEffect.size > 0) {
                         window.addEventListener('beforeunload',()=>{
                             terminateEffect.forEach(fn =>{
                                 fn()
                             })
-                        })
+                        },deps?.update)
                     }
                 }
             } else if (Array.isArray(deps)) {
@@ -587,6 +594,14 @@ export const isResume = () => {
             return false
         }
     }
+export const forwardProps=(props={})=>{
+    if (client) {
+        if (isResume())return
+        stateContext._restProps=Object.entries(props).length > 0 ? props : {bPAr:''}
+    }else{
+        return serverInstance.forwardProps?.(props)
+    }
+}
     /**
      * Insert into the html context in component
      * @param {object} obj 
@@ -655,6 +670,7 @@ export const setStateContext = (context) => {
     stateContext._serializedData={}
     stateContext._formerContext = formerStateContext
     stateContext._reactiveProps = {}
+    stateContext._restProps={}
     stateContext._template = ''
     stateContext._resume = false
     stateContext._suspense=''
@@ -992,7 +1008,8 @@ const mainAttribute = (el, exp) => {
                 el.value = value;
                 el.setAttribute(exp.name, value);
             } else {
-                if (exp.name === 'class' && !enter) {
+                if ((exp.name === 'class' || exp.name === 'style') && enter) {
+                    
                     requestAnimationFrame(()=>{
                     el.setAttribute(exp.name, value);
                     })
@@ -1152,23 +1169,24 @@ export const render = (el, contexts = {}, notRender, isName) => {
             })
         })
         const number = { notRender: null }
+        const isAcomponent=el._componentName?true:false
         el._attributes.forEach(attr => {
 
             if (stopResume.stop || el._hasRun) return
             if (directives[attr.name]) {
                 directives[attr.name](el, attr, stateContext)
-            } else if (attr.name.startsWith('on-')) {
+            } else if (attr.name.startsWith('on-') && !isAcomponent) {
                 event(el, attr, stateContext)
             } else if (attr.value.includes('@{') && !attr.name.startsWith('c-at-')) {
                 mainAttribute(el, attr, isName)
             } else if (attr.name.startsWith('state-')) {
                 States(el, attr, getCurrentContext())
-            } else if (attr.name.startsWith('out-')) {
+            } else if (attr.name.startsWith('out-') && !isAcomponent) {
                 documentEvent(el, attr)
-            } else if (attr.name.startsWith('after-[') && attr.name.endsWith(']')) {
+            } else if (attr.name.startsWith('after-[') && attr.name.endsWith(']') && !isAcomponent) {
                 After(el, attr)
             } 
-             else if (attr.name.startsWith('every-[') && attr.name.endsWith(']')) {
+             else if (attr.name.startsWith('every-[') && attr.name.endsWith(']') && !isAcomponent) {
                 Every(el, attr)
             } 
             else if (attr.name.startsWith('c-c-')) {
@@ -1318,6 +1336,7 @@ const Pawa = {
     useAsync,
     useInnerContext,
     RegisterComponent,
+    forwardProps,
     runEffect,
     html
 }

package/merger/for.js

@@ -11,6 +11,7 @@ export const merger_for = (el, stateContext, attr, arrayName, arrayItem, indexes
     let func
     let context=el._context
     const keyOrder=keyOrders || new Map()
+    let noKey
     const evaluate = () => {
         if (endComment.parentElement === null) {
             el._deleteEffects()
@@ -50,6 +51,8 @@ export const merger_for = (el, stateContext, attr, arrayName, arrayItem, indexes
                         keyComment._index = lookLike.getAttribute('data-for-index')
                     }
                     if (!el.getAttribute('for-key')) {
+                        noKey=true
+                        lookLike=true
                         return
                     }
                     if(lookLike) return
@@ -87,7 +90,7 @@ export const merger_for = (el, stateContext, attr, arrayName, arrayItem, indexes
                 }
                  const next = () => Promise.all(removeElement).then(async (res) => {
                      if (res) {
-                        if (update) {
+                        if (update && !noKey) {
                             const keyMap = new Map()
                             elementArray.forEach(child => {
                                 keyMap.set(child._forKey, child)

package/normal/component.js

@@ -1,4 +1,4 @@
-import {propsValidator, setPawaDevError, pawaWayRemover, checkKeywordsExistence, sanitizeTemplate } from '../utils.js';
+import {propsValidator, setPawaDevError, pawaWayRemover, checkKeywordsExistence, sanitizeTemplate, splitAndAdd } from '../utils.js';
 import {PawaElement,PawaComment} from '../pawaElement.js';
 import {keepContext,render, HmrComponentMap } from '../index.js'
 import {createEffect} from '../reactive.js'
@@ -61,7 +61,7 @@ export const normal_component=(el,stateContext,setStateContext,mapsPlugin,former
             console.error(error.message)
           }
         } 
-        const div = document.createElement('div')
+        let div =el._compoToSvg?document.createElementNS('http://www.w3.org/2000/svg', 'svg'): document.createElement('div')
     el._componentTerminate=() => {
         comment._terminateByComponent(endComment)
     }
@@ -151,16 +151,54 @@ export const normal_component=(el,stateContext,setStateContext,mapsPlugin,former
     if (component?._insert) {
       Object.assign(el._context,component._insert)
     }
+    const restProps={}
+    if (Object.entries(stateContexts._restProps).length > 0) {
+      const props=el._restProps
+      if (stateContexts._restProps['className'] && props['class']) {
+        restProps['class']={...props['class']}
+      }
+      if (stateContexts._restProps['defaultValue'] && props['default']) {
+        restProps['default']={...props['default']}
+      }
+
+      for (const key in props) {
+        let name=key
+        name=name.replace(/-([a-z])/g, (g) => g[1].toUpperCase());        
+        if (stateContexts._restProps[name]) {
+          restProps[key]={...props[key]}
+        }
+      }
+    }else{
+      Object.assign(restProps,el._restProps)
+    } 
     const context=el._context
-       const propsSetter=()=>{   
+    const getAsChild=()=>{
+      const asChild=div.firstElementChild
+      if (splitAndAdd(asChild?.tagName|| '') === 'ASCHILD') {
+        const getChildren=asChild.firstElementChild
+        Array.from(asChild.attributes).forEach(attr=>{
+          if (getChildren.hasAttribute(attr.name)) {
+            let attrName=getChildren.getAttribute(attr.name)
+            attrName=attr.value +' '+attrName
+            getChildren.setAttribute(attr.name, attrName)
+          }else{
+            getChildren.setAttribute(attr.name, attr.value)
+          }
+        })
+        asChild.remove()
+        div.appendChild(getChildren)        
+      }
+    }
+       const propsSetter=()=>{  
+        getAsChild() 
          const findElement=div.querySelector('[--]') || div.querySelector('[rest]')
          if (findElement) {
         findElement.removeAttribute('--')
         findElement.removeAttribute('rest')
         }
-    if(Object.entries(el._restProps).length > 0){
+    if(Object.entries(restProps).length > 0){
       if (findElement) {
-        for (const [key,value] of Object.entries(el._restProps)) {
+        for (const [key,value] of Object.entries(restProps)) {
             findElement.setAttribute(value.name,value.value)
           }
         }
@@ -183,7 +221,7 @@ export const normal_component=(el,stateContext,setStateContext,mapsPlugin,former
             bfm._sent=true
      const result= bfm(comment)
      if (typeof result === 'function') {
-       el._unMountFunctions.push(result)
+       el._beforeUnMountFunctions.push(result)
      }
     })
     
@@ -230,7 +268,7 @@ export const normal_component=(el,stateContext,setStateContext,mapsPlugin,former
           if (hook.deps?.component) {
             createEffect(() => {
               return effect()
-            },el) 
+            },el,hook.deps?.update) 
           } else {
             createEffect(() => {
               return effect()

package/package.json

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

package/pawaElement.js

@@ -1,4 +1,4 @@
-import {components,lazyComponents ,escapePawaAttribute,getPawaAttributes,getDependentAttribute,getPrimaryDirectives } from './index.js';
+import {components,lazyComponents ,escapePawaAttribute,getPawaAttributes,getDependentAttribute,getPrimaryDirectives, pluginsMap } from './index.js';
 import {splitAndAdd,replaceTemplateOperators,setPawaDevError,getEvalValues, checkKeywordsExistence} from './utils.js';
 import PawaComponent from './pawaComponent.js';
 import { createIntersectionObserver } from './index.js';
@@ -23,12 +23,12 @@ export class PawaElement {
       _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: [],
+      _template: div.outerHTML, _exitAnimation: null, _component: null, _unMountFunctions: [], _MountFunctions: [],_beforeUnMountFunctions:[],
       _elementType: '', _getNode: this.getNode, _componentOrTemplate: false, _props: {}, _isView: null,
-      _isElementComponent: false, _pawaAttribute: {}, _setUnMount: this.setUnMounts, _componentName: '',
+      _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,
+      _pawaElementComponent: null, _componentTerminate: null, _cacheSetUp: false, _effectsCarrier: 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: {},
@@ -97,8 +97,11 @@ export class PawaElement {
       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)})
+        if(!this._el.hasAttribute(value.toLowerCase())) {
+          return
+        }
+        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)
@@ -172,10 +175,8 @@ export class PawaElement {
     }
   }
   async remove(callback){
-    if (typeof this._kill === 'function' && this._isKill && this._deCompositionElement) {
-      this._kill()
-      return
-    }
+    
+    await this._beforeUnMount()
     if (typeof this._exitAnimation === 'function') {
       
      try {
@@ -200,6 +201,15 @@ export class PawaElement {
           }
           return true
     }
+    if (typeof this._kill === 'function' && this._isKill && this._deCompositionElement) {
+      this._kill()
+      return
+    }
+  }
+  async beforeUnMount(){
+    this._beforeUnMountFunctions.forEach(func => {
+      func()
+    });
   }
  async unMount(){
  if (this._component && this._pawaElementComponentName === '') {
@@ -291,10 +301,17 @@ export class PawaElement {
         });
       } 
       const pawaAttribute=getPawaAttributes()
+      const {allowAsProp}=pluginsMap()
       const dependAttribute=getDependentAttribute()
       this._attributes.forEach((attr) => {
-        
-        if (!attr.name.startsWith(':') && !pawaAttribute.has(attr.name) && !dependAttribute.has(attr.name)) {
+        if (attr.name === 'svg') {
+          this._compoToSvg = true
+          return
+        }else if(attr.name === 'aschild' || attr.name === 'as-child'){
+          this._asChild = true
+          return
+        }
+        if (!attr.name.startsWith(':') && (!pawaAttribute.has(attr.name) && !dependAttribute.has(attr.name) )) {
           let name=''
           if (attr.name.startsWith('-')) {
             name=attr.name.slice(1)
@@ -316,7 +333,7 @@ export class PawaElement {
                      }
                  });
                  return value
-                 }else if( attr.name.startsWith('on-') || attr.name.startsWith('out-')){
+                 }else if( attr.name.startsWith('on-') || attr.name.startsWith('out-') || attr.name === 'ref'){
                   const res=this.safeEval(context,`(e)=>{
                     ${attr.value}
                   }`, 'props',true)
@@ -335,7 +352,7 @@ export class PawaElement {
                   this._props[name]=setProps
                 }
                 
-                this._restProps[name]={name:name,value:attr.value} 
+                this._restProps[attr.name]={name:attr.name,value:attr.value} 
        }else if(!pawaAttribute.has(attr.name) && attr.name.startsWith(':')){
         
         const propsName=attr.name.slice(1) 

package/power.js

@@ -388,7 +388,7 @@ export const For = (el, attr, stateContext,resume=false,notRender,stopResume) =>
 
 export const ref = (el, attr) => {
     el._checkStatic() 
-    if (el._running || checkKeywordsExistence(el._staticContext,attr.value)) {
+    if (el._running || checkKeywordsExistence(el._staticContext,attr.value) || el._componentName) {
         return
     }
     try {
@@ -519,26 +519,29 @@ export const documentEvent = (el, attr) => {
     const unMount = () => target.removeEventListener(eventType, handler, options);
     el._setUnMount(unMount)
 }
-export const exitTransition=(el,attr)=>{
-if (el._running) {
-    return
+
+export const exitTransition = (el, attr) => {
+    if (el._running || el._componentName) {
+        return
+    }
+    const maxWait = 5000  // 5 seconds max
+   const promise = (resolve, startTime = Date.now()) => {
+        setTimeout(() => {
+            const animations = el.getAnimations({ subtree: false })
+            if (animations.length === 0 ) {
+                resolve()
+                return
+            }
+            Promise.all(animations.map(a => a.finished))
+                .then(() => promise(resolve, startTime))
+                .catch(() => promise(resolve, startTime))
+        }, 50)
 }
-    el._exitAnimation=()=>{
-        return new Promise((resolve)=>{
-            requestAnimationFrame(()=>{
-                const animations =el.getAnimations({subtree:false})
-                if (animations.length === 0) {
-                    resolve()
-                    return
-                }
-                
-                Promise.all(animations.map(a=>a.finished)).then(resolve).catch(resolve)
-            })
-        })
-     }
-     el.removeAttribute(attr.name)
+    el._exitAnimation = () => {
+        return new Promise(promise)
+    }
+    el.removeAttribute(attr.name)
 }
-
 const createTimedExecutable = (el, attr, useInterval) => {
     if (el._running) return;
     const getTime = attr.name.match(/\[(.*?)\]/)[1];

package/reactive.js

@@ -27,6 +27,10 @@ function scheduleRenderWithTimeBudget() {
 
     for (const fn of scheduled) {
       const cleanUp = fn();
+      if (fn?._sideEffect) {
+        const cleared=fn?._sideEffect?.()
+        if(typeof cleared === 'function')cleared()
+      }
       if (typeof cleanUp === 'function') cleanUp();
       processed.push(fn);
       if (performance.now() - start > FRAME_BUDGET) {
@@ -75,7 +79,7 @@ export const queueEffect = (effect,depsMap) => {
 };
   
   // Add parent tracking to effects
-  export const createEffect = (fn, el) => {
+  export const createEffect = (fn, el,update=null) => {
     const effect = () => {
         activeEffect = effect;
         effect.el = el;
@@ -86,6 +90,8 @@ export const queueEffect = (effect,depsMap) => {
           return cleanUp
         }
     };
+    update?.()
+    effect._sideEffect=update
     effect._id=crypto.randomUUID()
     effect._done=false
     effect._dep=null
@@ -117,7 +123,7 @@ if (el) {
       // console.log(el,effect._dep);
   }
   
-  el._terminateEffects.add(deletes)
+  el?._terminateEffects.add(deletes)
   
 }
     return effect;
@@ -131,6 +137,7 @@ export const track = (target, key) => {
     
     let depsMap = targetMap.get(target);
     if (!depsMap) {
+      
       targetMap.set(target, (depsMap = new Map()));
     }
     let dep = depsMap.get(key);

package/server.js

@@ -10,6 +10,7 @@ const serverInstance={
   accessChild:null,
   useServer:null,
   useAsync:null,
+  forwardPops:null
 }
 export const getServerInstance=()=>serverInstance
 export const setServer=(obj={})=>{