pawajs 1.4.18 → 1.4.20

package/CHANGELOG.md

@@ -6,4 +6,4 @@ CHANGELOG.md
 + version 1.4.11 - added more event modifiers
 + version 1.4.12 - fixed pluginsMap pawaAttribute to pawa-ssr 1.3.3
 + version 1.4.13 - 1.4.16 fixed issues for resuming component 
-+ version 1.4.18  fixed issue with component inside template and added event modifiers
++ version 1.4.18 - 1.4.19  fixed issue with component inside template and added event modifiers

package/README.md

@@ -343,13 +343,13 @@ useValidateComponent(TodoList, {
 ### Core Functions
 -   `pawaStartApp(rootElement, initialContext)`: Initializes the PawaJS application on a given root DOM element.
 -   `RegisterComponent(...components)`: Registers one or more components to be used in templates.
--   `$state(initialValue, localStorageKey?)`: Creates a new reactive state object.
+-   `$state(initialValue, localStorageKey?)`: Creates a new reactive state object. Used inside or outside Component (module export)
 -   `PluginSystem(plugin)`: Registers a plugin to extend PawaJS functionality (e.g., Routers, Global Stores).
 -   `html`: A tagged template literal for syntax highlighting and potential future optimizations.
 
 ### Component Hooks
 -   `useInsert(object)`: Exposes data and functions from a component's setup to its template.
--   `runEffect(callback, dependencies?)`: Runs a side effect after or before the component renders, and re-runs it when its dependencies change .
+-   `runEffect(callback, dependencies?)`: Runs a side effect after or before the component renders, and re-runs it when its dependencies change . Used inside or outside Component 
 -   `useContext(contextObject)` & `setContext()`: A mechanism for providing and consuming data throughout a component tree.
 -   `useRef()`: Creates a reference object that can be attached to a DOM element using the `ref` directive.
 -   `useValidateComponent(Component, rules)`: Defines validation rules for a component's props.

package/index.js

@@ -418,39 +418,88 @@ export const RegisterComponent = (...args) => {
  * 
  * null- for Mount hook 
  * @returns {void}
- */
-export const runEffect = (callback, deps) => {
+ */export const runEffect = (callback, deps) => {
     if (client) {
         if (stateContext._hasRun) {
             return
         }
+
+        // Detect if inside a component
+        // stateContext._name is set in setStateContext
+        // default stub has no _name
+        const insideComponent = !!stateContext._name || 
+                                !!stateContext.component
+
         if (stateContext) {
-            if (!stateContext._hook) {
-                stateContext._hook = {}
-            }
-            if (!stateContext._hook.isMount) {
-                stateContext._hook.isMount = []
-            }
-            if (!stateContext._hook.beforeMount) {
-                stateContext._hook.beforeMount = []
-            }
-            if (!stateContext._hook.reactiveEffect) {
-                stateContext._hook.reactiveEffect = []
-            }
-            if (!stateContext._hook.effect) {
-                stateContext._hook.effect = []
-            }
+            if (!stateContext._hook) stateContext._hook = {}
+            if (!stateContext._hook.isMount) stateContext._hook.isMount = []
+            if (!stateContext._hook.beforeMount) stateContext._hook.beforeMount = []
+            if (!stateContext._hook.reactiveEffect) stateContext._hook.reactiveEffect = []
+            if (!stateContext._hook.effect) stateContext._hook.effect = []
+
             if (deps === undefined || deps === null) {
-                stateContext._hook.isMount.push(callback)
+                if (insideComponent) {
+                    // Inside component — register for later
+                    stateContext._hook.isMount.push(callback)
+                } else {
+                    // Outside component — execute immediately
+                    // after current execution context via microtask
+                    Promise.resolve().then(() => {
+                        const cleanup = callback()
+                        if (typeof cleanup === 'function') {
+                            // Register global cleanup on page unload
+                            window.addEventListener('beforeunload', cleanup, { once: true })
+                        }
+                    })
+                }
             } else if (typeof deps === 'object' && !Array.isArray(deps)) {
-                stateContext._hook.reactiveEffect.push({ deps: deps, effect: callback })
+                // readonly reactive effect — needs component context
+                // silently ignore outside component
+                if (insideComponent) {
+                    stateContext._hook.reactiveEffect.push({ deps, effect: callback })
+                }else{
+                    
+                    let terminateEffect=new Set()
+                    const mainFunction=callback()
+                    createEffect(()=>{
+                        const cleanUp=mainFunction?.()
+                        if (typeof cleanUp === 'function') {
+                            return cleanUp
+                        }
+                    },{
+                        _terminateEffects:terminateEffect
+                    })
+                    if (terminateEffect.size > 0) {
+                        window.addEventListener('beforeunload',()=>{
+                            terminateEffect.forEach(fn =>{
+                                fn()
+                            })
+                        })
+                    }
+                }
             } else if (Array.isArray(deps)) {
-                stateContext._hook.effect.push({
-                    deps: deps,
-                    effect: callback
-                })
+                // watch — needs component context
+                // silently ignore outside component
+                if (insideComponent) {
+                    stateContext._hook.effect.push({ deps, effect: callback })
+                }else{
+                    //used pawajs stateWatch
+                    const cleanUp=stateWatch(callback,deps)
+                    window.addEventListener('beforeunload',cleanUp,{once:true})
+                }
             } else if (typeof deps === 'number') {
-                stateContext._hook.beforeMount.push(callback)
+                if (insideComponent) {
+                    // Inside component — register for later
+                    stateContext._hook.beforeMount.push(callback)
+                } else {
+                    // Outside component — execute after deps ms
+                    setTimeout(() => {
+                        const cleanup = callback()
+                        if (typeof cleanup === 'function') {
+                            window.addEventListener('beforeunload', cleanup, { once: true })
+                        }
+                    }, deps)
+                }
             }
         }
     }

package/normal/component.js

@@ -178,7 +178,7 @@ export const normal_component=(el,stateContext,setStateContext,mapsPlugin,former
   
   if (child !== null ) {
     if (child) {
-      endComment.parentElement.insertBefore(child, endComment)
+      endComment.parentElement?.insertBefore(child, endComment)
     
     stateContexts?._error?.forEach((error) => {
       throw Error(error)

package/package.json

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