pawajs 2.0.3 → 2.0.4

package/index.d.ts

@@ -10,7 +10,7 @@ export interface PawaElement extends HTMLElement {
     _terminateEffects: Set<Function>;
     _deleteEffects: () => void;
     _slots: DocumentFragment;
-    _stateContext: any;
+    _stateContext: StateContextType;
     _mainAttribute: Record<string, any>;
     _preRenderAvoid: string[];
     _lazy: boolean;
@@ -118,6 +118,31 @@ export interface PawaDev {
     logEffect(e: any, t: any): void;
     logComponent(n: any, t: any): void;
 }
+type StateContextType={
+    _name:string,
+    _props:object,
+    _formerStateContext:stateContextType,
+    _elementContext:object,
+    _template:string,
+    _reactiveProps:object,
+    _restProps:object,
+    _hasRun:boolean,
+    _transportContext:object,
+    _static:any[],
+    _serializedData:object,
+    _formerContext:stateContextType,
+    _resume:boolean,
+    _suspense:string,
+    _hmr:boolean,
+    _hook:{
+        beforeMount:Function[],
+        reactiveEffect:Function[],
+        effect:Function[],
+        isMount:Function[],
+        isUnMount:Function[]
+    }
+}
+export const statecontext:StateContextType
 
 declare global {
     var __pawaDev: PawaDev;
@@ -359,7 +384,7 @@ export function forwardProps(props?: Record<string, any>): void;
 export function useInsert(obj?: Record<string, any>): void;
 
 export function setStateContext(context: any): any;
-
+export function globalRerender(el:HTMLElement | string,formercontext)
 /**
  * Creates a reactive state.
  * @template T

package/index.js

@@ -890,6 +890,17 @@ export const restoreContext = (state_context) => {
     }
 export const HmrComponentMap=new Map()
 const renderedComponentsRusumed=new Set()
+export const globalRerender=(el,formercontext)=>{
+    if(!window?.hmr)return
+    let element
+    if (typeof el === 'string') {
+        const dom =document.createDocumentFragment()
+        dom.innerHTML=el
+        element=dom.firstElementChild
+    }else element=el
+    formerStateContext=formercontext
+    normal_component(element,formercontext,setStateContext,mapsPlugins,formercontext,pawaContext,stateWatch)
+}
     /**
      * 
      * @param {PawaElement|HTMLElement} el 
@@ -1363,7 +1374,10 @@ if (typeof window !== 'undefined') {
     
 }
 export const pawaStartApp = (app, context = {}) => {
-    render(app, context)
+    if (app?.tagName && app.hasAttribute('pawa-app') === false) {
+        app.setAttribute('pawa-app', '')
+        render(app, context)
+    }
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pawajs",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "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,6 +10,7 @@ import { lazyComponentElement } from './index.js';
 export class PawaElement {
   
   #context
+  #el
   /**
    * 
    * @param {HTMLElement} element 
@@ -17,10 +18,11 @@ 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'),
-      _el: element, _out: false, _stateContext: null, _terminateEffects: new Set(), _deleteEffects: this.terminateEffects,
+       _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:[],
@@ -48,13 +50,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))
       
     }
   }
@@ -93,24 +95,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)) {
@@ -143,7 +145,7 @@ export class PawaElement {
   }
   
   getNewElementByRemovingAttr(attrName){
-    const element=this._el.cloneNode(true)
+    const element=this.#el.cloneNode(true)
     element.removeAttribute(attrName)
     return element
   }
@@ -179,8 +181,10 @@ export class PawaElement {
   async remove(callback){
     
     await this._beforeUnMount()
+    if (window?.hmr) {
+      this._exitAnimation=null
+    }
     if (typeof this._exitAnimation === 'function') {
-      
      try {
       const animate=this._exitAnimation().then(async () => {
          await this._callUnmount()
@@ -252,21 +256,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'
@@ -295,9 +299,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})
         });