pawajs 2.1.0 → 2.3.0

package/index.js

@@ -782,6 +782,11 @@ export const $state = (initialValue, section = null) => {
             console.warn('error while trying to use localStorage')
         }
     }
+    if (stateContext._stateMap) {
+        if (!stateContext._stateMap.has(id)) {
+            stateContext._stateMap.set(id, initialValue)
+        }
+    }
     let timeOut
     const main = createDeepProxy(states, (target, property) => {
         if (typeof section === 'string') {
@@ -890,7 +895,7 @@ export const restoreContext = (state_context) => {
     }
 export const HmrComponentMap=new Map()
 const renderedComponentsRusumed=new Set()
-export const globalRerender=(el,formercontext,context={})=>{
+export const globalRerender=(el,formercontext,context={},oldStateContext)=>{
     if(!window?.hmr)return
     let element
     if (typeof el === 'string') {
@@ -899,7 +904,7 @@ export const globalRerender=(el,formercontext,context={})=>{
         element=dom.firstElementChild
     }else element=el
     formerStateContext=formercontext
-    normal_component(element,formercontext,setStateContext,mapsPlugins,formercontext,pawaContext,stateWatch,context)
+    normal_component(element,formercontext,setStateContext,mapsPlugins,formercontext,pawaContext,stateWatch,context,oldStateContext)
 }
     /**
      * 

package/normal/component.js

@@ -10,25 +10,56 @@ function isPawaState(obj) {
     typeof obj.id === 'string'
   )
 }
-function restorePawaStateFromContext(oldCtx, newCtx) {
+
+function snapshotInsert(ctx) {
+  const snapshot = {}
+  for (const key of Object.keys(ctx)) {
+    const val = ctx[key]
+    const raw = isPawaState(val) ? val.value : val
+    try {
+      snapshot[key] = structuredClone(raw)
+    } catch {
+      snapshot[key] = undefined
+    }
+  }
+  return snapshot
+}
+
+function sameInitial(a, b) {
+  if (a === undefined || b === undefined) return false 
+  try {
+    return JSON.stringify(a) === JSON.stringify(b)
+  } catch {
+    return false
+  }
+}
+
+function restorePawaStateFromContext(oldCtx, newCtx,stateContext,oldStateContext) {
   if (!oldCtx || !newCtx) return
+
+  const prevInitials = oldStateContext._hmrinitial 
+  const freshInitials = snapshotInsert(newCtx)
   for (const key of Object.keys(newCtx)) {
     const oldVal = oldCtx[key]
     const newVal = newCtx[key]
-    if (isPawaState(oldVal) && isPawaState(newVal)) {
+    if (!isPawaState(oldVal) || !isPawaState(newVal)) continue
 
-      const newOne=newVal.value
-      const oldOne=oldVal.value
-      if (typeof newOne === typeof oldOne) {
-        newVal.value = oldVal.value
-      }else if (newVal === null) {
-        newVal.value = oldVal.value
-      }
-      
+    const initializerChanged =
+      prevInitials !== undefined &&
+      Object.prototype.hasOwnProperty.call(prevInitials, key) &&
+      !sameInitial(prevInitials[key], freshInitials[key])
+
+    if (initializerChanged) {
+      continue
+    }
+
+    if (typeof newVal.value === typeof oldVal.value ) {
+      newVal.value = oldVal.value
     }
   }
+  stateContext._hmrInitial = freshInitials
 }
-export const normal_component=(el,stateContext,setStateContext,mapsPlugin,formerStateContext,pawaContext,stateWatch,hmrPreserverContext)=>{
+export const normal_component=(el,stateContext,setStateContext,mapsPlugin,formerStateContext,pawaContext,stateWatch,hmrPreserverContext,hmrOldStateContext)=>{
     // Checks if the content is an SVG fragment (graphic elements) without a root <svg> tag.
     // We exclude 'svg' from the match because a root <svg> tag can be parsed safely inside a <div>.
     const isSvgFragment = (str) => /^\s*<(path|circle|rect|line|polyline|polygon|ellipse|g|defs|symbol|use|image|text|animate|mask|pattern|clipPath|linearGradient|radialGradient|filter)/i.test(str);
@@ -102,23 +133,38 @@ export const normal_component=(el,stateContext,setStateContext,mapsPlugin,former
         stateContexts._name=el._componentName
         stateContexts._reactiveProps=reactiveProps
         stateContexts._template=el._template
-        stateContexts._recallEffect=()=>{
-          
-        }
+        stateContexts._recallEffect=()=>{}
+        stateContexts._hmrinitial={}
+    const componentName=el._componentName
     const storeContext=stateContexts
     let compo 
     let awaits=false
     let suspense=''
     let elementContext=el._context
     if (__pawaDev.tool) {
-        const id=Date.now() + Math.random()
+            const id=Date.now() + Math.random()
+            const removeFromHmrMap = () => {
+      const array = HmrComponentMap.get(componentName)
+      if (!array) return
+            
+      const index = array.findIndex((item) => item.id === id)
+      if (index !== -1) {
+        array.splice(index, 1)
+      }
+    
+      if (array.length === 0) {
+        HmrComponentMap.delete(componentName)
+      }
+    }
       if (HmrComponentMap.has(el._componentName)) {
         HmrComponentMap.get(el._componentName).push({id:id,template:el._template,el:el,stateContext:stateContexts,remove:()=>{
+          removeFromHmrMap()
           return pawaWayRemover(comment,endComment)
         },context:elementContext,comment:comment
         })
       }else{
         HmrComponentMap.set(el._componentName,[{id:id,template:el._template,el:el,stateContext:stateContexts,remove:()=>{
+          removeFromHmrMap()
           return pawaWayRemover(comment,endComment)
         },context:elementContext,comment:comment}])
       }
@@ -190,8 +236,9 @@ export const normal_component=(el,stateContext,setStateContext,mapsPlugin,former
     
     div.innerHTML = compo;
     if (component?._insert) {
-      if (hmrPreserverContext) {
-          restorePawaStateFromContext(hmrPreserverContext,component._insert)
+      
+      if (hmrPreserverContext && hmrOldStateContext) {
+          restorePawaStateFromContext(hmrPreserverContext,component._insert,stateContexts,hmrOldStateContext)
         }
       Object.assign(el._context,component._insert)
     }

package/package.json

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