pawajs 1.4.2 → 1.4.4

package/CHANGELOG.md

@@ -1,3 +1,4 @@
 CHANGELOG.md
 + version 1.3.0 - v1.4.0 on experiment
 + version 1.4.0 for-key bug fixing
++ version 1.4.4 added onSuspense and fix out- (document event)

package/README.md

@@ -281,6 +281,12 @@ For handling DOM events.
 <button on-click="addTodo()">Add Todo</button>
 <input on-input="newTodoText.value = e.target.value" />
 ```
+#### `out-<event>`
+For handling DOM events.
+
+```html
+<button out-click="console.log('outside')">Add Todo</button>
+```
 
 ### Component Props
 

package/index.d.ts

@@ -2,7 +2,7 @@
 export interface PawaElement extends HTMLElement {
     _running: boolean;
     _context: any;
-    _staticContext: any[];
+    _staticContext: Array<string>;
     _resetEffects: Set<Function>;
     _avoidPawaRender: boolean;
     _el: HTMLElement;
@@ -188,8 +188,6 @@ export function getPawaAttributes(): Set<string>;
 
 export function getPrimaryDirectives(): Set<string>;
 
-export function setError(params: { error: any }): void;
-
 /**
  * Registers components for use in templates.
  * @param {...(string | Function)} args - Component functions or (name, function - done by pawajs-vite-plugin automaticly) pairs.
@@ -264,8 +262,9 @@ export function useServer<T = Record<string, any>>(): {
  * Stores the component instance into the returned $async hook.
  * Used in async component.
  * Must be called before any await call
+ * + uses onSuspense for loading state before any await
  */
-export function useAsync(): { $async: <T>(callback: () => T) => T };
+export function useAsync(): { $async: <T>(callback: () => T) => T ,onSuspense:(html:string)=>void};
 
 /**
  * Returns TRUE when pawajs is in continous rendering mode from ssr

package/index.js

@@ -105,7 +105,11 @@ const createPawaDev = () => {
             if (warn) {
                 console.warn(msg, stack, template, el,directives)
             } else {
-                console.error(msg, stack, template, el)
+                if (typeof window === 'undefined') {
+                    console.error(msg, stack, template)
+                }else{
+                    console.error(msg, stack, template, el)
+                }
             }
         },
         logRender: (component, time) => {
@@ -320,6 +324,7 @@ let stateContext = {
     _formerContext: null,
     _insert: {},
     _resume: false,
+    _suspense:'',
     _hook: {
         effect: [],
         isMount: [],
@@ -365,19 +370,6 @@ export const getDependentAttribute = () => dependentPawaAttribute
 export const getPawaAttributes = () => {
     return pawaAttributes
 }
-export const setError = ({ error }) => {
-    if (!client) return
-    if (!stateContext) {
-        console.warn('must be used inside of a component')
-        return
-    }
-    if (!stateContext._hasRun) {
-        if (!stateContext?._error) {
-            stateContext._error = []
-        }
-        stateContext?._error.push(error)
-    }
-}
 
 /**
  * 
@@ -465,7 +457,7 @@ export const runEffect = (callback, deps) => {
 }
 
 /**
- * 
+ * to validate component for runtime rules
  * @param {object} props 
  * @returns {object}
  */
@@ -478,6 +470,7 @@ export const useValidateComponent = (component, object) => {
     }
     /**
      * @returns {{id:string,setValue:()=>void}}
+     * + Sets the context
      */
 export const setContext = () => {
     if (client) {
@@ -533,7 +526,7 @@ export const useContext = (context) => {
 }
 
 /**
- * Get Current component context from the html
+ * Get Current component context from the html (the component parent)
  * @returns {object}
  */
 export const useInnerContext = () => {
@@ -592,16 +585,22 @@ export const useAsync = () => {
                 storeContext._hasRun = true
                 stateContext = null
                 return res
+            },
+            onSuspense:(html)=>{
+                storeContext._suspense=html
             }
         }
     } else {
+        //sets server initialization to default
         return {
             $async: (callback) => {
                 return callback()
-            }
+            },
+            onSuspense:(html)=>{}
         }
     }
 }
+//resume state during after ssr
 export const isResume = () => {
         if (client) {
             return stateContext._resume
@@ -664,6 +663,7 @@ export const setStateContext = (context) => {
     stateContext._reactiveProps = {}
     stateContext._template = ''
     stateContext._resume = false
+    stateContext._suspense=''
     stateContext._hook={
         beforeMount:[],
         reactiveEffect:[],
@@ -854,7 +854,7 @@ const component = (el, resume = false, attr, notRender, stopResume) => {
         return
     }
     el._running = true
-
+    
     if (!resume) {
         normal_component(el, stateContext, setStateContext, mapsPlugins, formerStateContext, pawaContext, stateWatch)
     } else {
@@ -1257,6 +1257,8 @@ const Pawa = {
     setContext,
     $state,
     pawaStartApp,
+    useAsync,
+    useInnerContext,
     RegisterComponent,
     runEffect,
     html

package/normal/component.js

@@ -78,31 +78,45 @@ export const normal_component=(el,stateContext,setStateContext,mapsPlugin,former
     const storeContext=stateContexts
     let compo 
     let awaits=false
+    let suspense=''
       try {
         if(done){
         const compoCall=component.component(app)
         if( compoCall instanceof Promise){
+          suspense=stateContexts._suspense || ''
+          
           awaits=true 
           compoCall.then((res)=>{
             div.innerHTML=res
+            let promise
+            if (comment.nextSibling !== endComment) {
+              promise= pawaWayRemover(comment,endComment)
+            }
             propsSetter()
-            if (storeContext._hasRun) {
-                storeContext._hasRun = false
-                keepContext(storeContext)
-             }if (storeContext?._insert) {
-      Object.assign(el._context,storeContext._insert)
-    }
-            childInsert()
-            lifeCircle()
-            storeContext._hasRun=true
-            stateContext=null
-          })
+            Promise.all([promise]).then(()=>{
+              if (storeContext._hasRun) {
+                  storeContext._hasRun = false
+                  keepContext(storeContext)
+               }if (storeContext?._insert) {
+        Object.assign(el._context,storeContext._insert)
+      }
+              childInsert(false)
+              lifeCircle()
+              storeContext._hasRun=true
+              stateContext=null
+            })
+            })
         }else if (compoCall !== undefined){
           compo= sanitizeTemplate(compoCall)
         }
       }else{
           compo=""
         }
+        if (awaits && suspense) {
+          
+          compo= sanitizeTemplate(suspense)
+        }
+        
       } catch (error) {
         setPawaDevError({
           message:`error from ${el._componentName} component  ${error.message}`,
@@ -138,10 +152,11 @@ export const normal_component=(el,stateContext,setStateContext,mapsPlugin,former
         }
       }
       
-      const childInsert=()=>{
-        console.log(el._component?._hook,el.tagName)
-      el._component?._hook?.beforeMount?.forEach((bfm) => {
-        bfm._sent=true
+      const childInsert=(awaiting)=>{
+        console.log(stateContexts._insert)
+        if (awaiting === false) {
+          el._component?._hook?.beforeMount?.forEach((bfm) => {
+            bfm._sent=true
      const result= bfm(comment)
      if (typeof result === 'function') {
        el._unMountFunctions.push(result)
@@ -149,18 +164,19 @@ export const normal_component=(el,stateContext,setStateContext,mapsPlugin,former
     })
     
     el._component?._hook?.isMount.forEach((hook) => {
-        hook._sent=true
-        el._MountFunctions.push(hook)
+      hook._sent=true
+      el._MountFunctions.push(hook)
     })
     el._component?._hook?.isUnMount.forEach((hook) => {
-        hook._sent=true
-        el._unMountFunctions.push(hook)
+      hook._sent=true
+      el._unMountFunctions.push(hook)
     })
-    const child=div.children[0]
-    
-    if (child !== null ) {
-      if (child) {
-    endComment.parentElement.insertBefore(child, endComment)
+  }
+  const child=div.children[0]
+  
+  if (child !== null ) {
+    if (child) {
+      endComment.parentElement.insertBefore(child, endComment)
     
     stateContexts?._error?.forEach((error) => {
       throw Error(error)
@@ -169,7 +185,7 @@ export const normal_component=(el,stateContext,setStateContext,mapsPlugin,former
       } 
     }
     }
-    if(awaits === false)childInsert();
+    childInsert(awaits?true:false);
     const lifeCircle=()=>{
       Promise.resolve().then(()=>{
       el._component?._hook?.effect.forEach((hook) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pawajs",
-  "version": "1.4.2",
+  "version": "1.4.4",
   "type":"module",
   "description": "pawajs library (html runtime) for easily building web ui, enhancing html element, micro frontend etc ",
   "main": "index.js",
@@ -24,5 +24,6 @@
   "bugs": {
     "url": "https://github.com/Allisboy/pawajs/issues"
   },
-  "homepage": "https://github.com/Allisboy/pawajs#readme"
+  "homepage": "https://github.com/Allisboy/pawajs#readme",
+  "website": "https://pawajs.vercel.app"
 }

package/power.js

@@ -343,7 +343,7 @@ export const documentEvent = (el, attr) => {
     const resolvePath = (path, obj) => {
         return path.split('.').reduce((acc, key) => acc?.[key], obj);
     };              
-    const func = new Function('e', ...keys, `
+    const func = new Function('e','$element', ...keys, `
     try{
     ${attr.value}
     }catch(error){
@@ -352,9 +352,9 @@ export const documentEvent = (el, attr) => {
     }`)
     const values = keys.map((key) => resolvePath(key, el._context));
     const functions = (e) => {
-        try {
-
-            func(e, ...values)
+        try { 
+            const $element=el
+            func(e,$element, ...values)
         } catch (error) {
             setPawaDevError({
                 message: `Error from out-${eventName} directive ${error.message}`,
@@ -364,15 +364,14 @@ export const documentEvent = (el, attr) => {
         }
     }
     el.removeAttribute(attr.name)
-    setTimeout(() => {
+    el._MountFunctions.push( ()=> {
         document.addEventListener(eventName, functions)
-    }, 1000)
+    })
 
     const unMount = () => document.removeEventListener(eventName, functions);
     el._setUnMount(unMount)
 
 }
-
 export const exitTransition=(el,attr)=>{
 if (el._running) {
     return