npm - pawajs - Versions diffs - 1.3.6 → 1.3.8 - Mend

pawajs 1.3.6 → 1.3.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/README.md CHANGED Viewed

@@ -11,11 +11,11 @@ PawaJS is a JavaScript library designed for building dynamic user interfaces. It
 ## Features
--   **Declarative Rendering:** Use a clean, HTML-based template syntax with powerful directives (`if`, `for`, `on-event`, etc.) to describe your UI.
+-   **Declarative Rendering:** Use a clean, HTML-based template syntax with powerful directives (`if`, `for-each`, `on-event`, etc.) to describe your UI.
 -   **Reactive State Management:** Effortlessly create reactive state that automatically updates the DOM when it changes using the `$state` utility.
 -   **Component-Based Architecture:** Build encapsulated components that manage their own state, making your code more reusable and maintainable.
 -   **Async Components:** First-class support for asynchronous components, allowing you to fetch data directly within your component definition.
--   **Efficient List Rendering:** Render lists of data with the `for` directive, including support for keyed updates for optimal performance.
+-   **Efficient List Rendering:** Render lists of data with the `for-each` directive, including support for keyed updates for optimal performance.
 -   **Lifecycle Hooks:** Tap into a component's lifecycle with `mount` and `unmount` directives, or the `runEffect` hook for more complex side effects.
 -   **Context API:** Pass data through the component tree without having to pass props down manually at every level.
 -   **Server-Side Rendering (SSR) Isomorphic architecture:** PawaJS is built with SSR in mind, featuring a "resuming" mechanism to efficiently continue server-rendered HTML on the client.
@@ -34,10 +34,10 @@ CDN
 ```html
     <head>
-        <script type="module" href="https://cdn.jsdelivr.net/npm/pawajs@1.2.0/cdn/index.js"></script>
-    </head>
+        </head>
     <body>
         <div id="app"></div>
+        <script type="module" src="https://cdn.jsdelivr.net/npm/pawajs@1.2.0/cdn/index.js"></script>
         <script type="module">
             window.$pawa.pawaStartApp(document.getElementById('app'));
         </script>
@@ -263,12 +263,12 @@ makes pawajs engine to wait before removing the element until the animation/tran
     <input value="@{user.value.name}" on-input="user.value.value = e.target.value">
 </div>
 ```
-#### `for`
+#### `for-each`
 For rendering lists from an array. Use `for-key` to give each element a unique identity, which helps PawaJS optimize rendering.
 ```html
 <ul>
-    <li for="todo, i in todos.value" for-key="{{todo.id}}">
+    <li for-each="todo, i in todos.value" for-key="{{todo.id}}">
         <span>@{i + 1}. @{todo.text}</span>
     </li>
 </ul>
@@ -342,6 +342,7 @@ useValidateComponent(TodoList, {
 -   `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.
+-   `useServer()`: Returns `{ setServerData, getServerData }` for handling server-side data serialization and client-side retrieval in SSR applications.
 ---

package/index.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
 export interface PawaElement extends HTMLElement {
     _running: boolean;
     _context: any;
@@ -75,6 +76,42 @@ export interface PawaElement extends HTMLElement {
     setProps(): void;
 }
+export interface PawaComment extends Comment {
+    _index: number | null;
+    _el: Comment;
+    _setCoveringElement: (el: any) => void;
+    _data: Record<string, any>;
+    _terminateEffects: Set<Function>;
+    _run: any;
+    _coveringElement: any;
+    _setData: (obj: any) => void;
+    _removeSiblings: (endComment: any) => void;
+    _controlComponent: boolean;
+    _componentTerminate: Function | null;
+    _componentElement: any;
+    _setComponentOut: any;
+    _deleteEffects: () => void;
+    _remove: () => void;
+    _terminateByComponent: (endComment: any) => void;
+    _forKey: string | null;
+    _forIndex: any;
+    _setKey: (arg: any) => void;
+    _endComment: Comment | null;
+    _keyRemover: (callback?: Function, firstElement?: boolean) => Promise<void>;
+    _resetForKeyElement: () => DocumentFragment;
+    _deletKey: () => void;
+    forKeyResetElement(): DocumentFragment;
+    keyRemoveElement(callback?: Function, firstElement?: boolean): Promise<void>;
+    deleteKey(): void;
+    setForKey(arg: any): void;
+    terminateEffects(): void;
+    setCoveringElement(el: any): void;
+    setData(obj: any): void;
+    terminate(endComment: any): void;
+    remove(): void;
+    removeSiblings(endComment: any): void;
+}
 export interface AttriPlugin {
     startsWith?: string;
     fullName?: string;
@@ -149,6 +186,8 @@ export function getDependentAttribute(): Set<string>;
 export function getPawaAttributes(): Set<string>;
+export function getPrimaryDirectives(): Set<string>;
 export function setError(params: { error: any }): void;
 /**
@@ -159,10 +198,15 @@ export function RegisterComponent(...args: (string | Function)[]): void;
 /**
  * Runs a side effect or lifecycle hook.
- * @param {() => void | (() => void)} callback - Effect function, optionally returning cleanup.
+ * @param {(comment:PawaComment) => void | (() => void)} callback - Effect function,comment for component hacking and optionally returning cleanup .
  * @param {any[] | object | number | null} [deps] - Dependencies or hook type (null=mount).
+ * # number - beforemount
+ * # null - onMount
+ * # array[...deps] - dependency reactive
+ * # object<{component:true}|any element from ref> - read alone effect tied to either the component or element
  */
-export function runEffect(callback: () => void | (() => void), deps?: any[] | object | number | null): void;
+export function runEffect(callback: (comment:PawaComment) => void | (() => void), deps?: any[] | object | number | null): void;
 export interface PropValidation {
     strict?: boolean;
@@ -203,16 +247,18 @@ export function useInnerContext<T=any>(): T;
 /**
  * Tells pawa-ssr to serialize the children prop.
  * Then pawajs adds it into the component unpon re-execution
- * @returns {()=>void}
+ * @returns {void}
  */
-export function accessChild(): (()=>void);
+export function accessChild(): void;
 /**
- * Tells pawa-ssr to serialized data from useInsert.
- * Then pawajs continuity model de-serializes it and adds to the rendering context
- * @returns {void}
- * Note: meant for server-only component
+ * Tells pawa-ssr to serialized data.
+ * Then pawajs continuity model de-serializes it and adds to the rendering context or getServerData hook
+ * @returns {{setServerData:(data:object)=>void,getServerData:()=>any}}
  */
-export function useServer(): (() => void) | undefined;
+export function useServer<T = Record<string, any>>(): {
+    setServerData: (data: T) => void;
+    getServerData: () => T;
+};
 /**
  * Stores the component instance into the returned $async hook.

package/index.js CHANGED Viewed

@@ -271,6 +271,7 @@ let stateContext = {
     _transportContext: {},
     _reactiveProps: {},
     _template: '',
+    _serializedData:{},
     _static: [],
 }
@@ -295,9 +296,11 @@ const setPrimaryAttibute = (...name) => {
         primaryDirective.add(att)
     })
 }
-export const getPrimaryDirective=()=>primaryDirective
-setPrimaryAttibute('if', 'else-if', 'for', 'else','switch','case','default','case','key')
-setPawaAttributes('if', 'else-if', 'for', 'else', 'mount',
+export const getPrimaryDirectives=()=>primaryDirective
+setPrimaryAttibute('if', 'else-if', 'for-each', 'else','switch','case','default','case','key')
+setPawaAttributes('if', 'else-if', 'for-each', 'else', 'mount',
     'unmount', 'forKey', 'state-', 'on-', 'out-','key','switch','case','default')
 export const getDependentAttribute = () => dependentPawaAttribute
 export const getPawaAttributes = () => {
@@ -492,10 +495,26 @@ export const accessChild = () => {
             return serverInstance.accessChild?.()
         }
     }
-    /**@returns {()=>void} - let's component serialized useInsert data on server*/
+    /**@returns {()=>{getServerData:()=>any,setServerData:(data:object)=>void}} - let's component serialized data on server*/
 export const useServer = () => {
     if (client) {
-        return
+        if (stateContext && stateContext._hasRun === false) {
+            const component=stateContext._template
+             const data=stateContext._serializedData
+             /**
+              * Meant to ne used on server rendering
+              */
+             const setServerData=(data={})=>{
+                console.warn( `meant to be used on server-only at ${component}`)
+             }
+             /**
+              * Get serialized data from server during pawajs continuity
+              */
+             const getServerData=()=>data
+             return {setServerData,getServerData}
+        }else{
+            return {data:null}
+        }
     } else {
         return serverInstance.useServer?.()
     }
@@ -581,6 +600,7 @@ export const setStateContext = (context) => {
     }
     stateContext._transportContext = {}
     stateContext._static = []
+    stateContext._serializedData={}
     stateContext._formerContext = formerStateContext
     stateContext._reactiveProps = {}
     stateContext._template = ''
@@ -841,8 +861,7 @@ const mainAttribute = (el, exp) => {
     }
     attrMap.set(exp.name, exp.value);
     el._preRenderAvoid.push(exp.name)
-    const removeAttribute = new Set()
-    removeAttribute.add('disabled')
+    const booleanAttributes = new Set(['checked', 'selected', 'disabled', 'readonly', 'required', 'multiple']);
     el._mainAttribute[exp.name] = exp.value
     el._checkStatic()
     let enter=false
@@ -859,26 +878,40 @@ const mainAttribute = (el, exp) => {
             };
             const values = keys.map((key) => resolvePath(key, el._context));
+            const hasExpression = regex.test(value);
+            regex.lastIndex = 0;
             value = value.replace(regex, (match, expression) => {
                 if (checkKeywordsExistence(el._staticContext, expression)) {
                     return ''
                 } else {
                     const func = new Function(...keys, `return ${expression}`);
-                    isBoolean = func(...values)
-                    if (typeof isBoolean !== 'boolean') {
-                        return isBoolean
+                    const result = func(...values)
+                    isBoolean = result
+                    if (typeof result !== 'boolean') {
+                        return result
                     }else{
                         return ''
                     }
                 }
             });
-            if (removeAttribute.has(exp.name)) {
-                if (isBoolean) {
+            if (booleanAttributes.has(exp.name)) {
+                const boolValue = hasExpression ? !!isBoolean : value.toLowerCase() !== 'false';
+                const propName = exp.name === 'readonly' ? 'readOnly' : exp.name;
+                if (propName in el) {
+                    el[propName] = boolValue;
+                }
+                if (boolValue) {
                     el.setAttribute(exp.name, '');
                 } else {
-                    el.removeAttribute(exp.name)
+                    el.removeAttribute(exp.name);
                 }
+            } else if (exp.name === 'value' && 'value' in el) {
+                el.value = value;
+                el.setAttribute(exp.name, value);
             } else {
                 if (exp.name === 'class' && !enter) {
                     requestAnimationFrame(()=>{
@@ -941,7 +974,11 @@ const textContentHandler = (el, isName) => {
                         return String(func(...values));
                     }
                 });
-                textNode.nodeValue = value;
+                if(el.tagName === 'TEXTAREA'){
+                    el.value=value
+                }else{
+                    textNode.nodeValue = value;
+                }
             });
         } catch (error) {
@@ -969,7 +1006,7 @@ const template = (el,notRender, attr) => {
 const directives = {
     if: If,
-    for: For,
+    'for-each': For,
     else:(el)=>{el._running =true},
     case:(el)=>{el._running =true},
     default:(el)=>{el._running =true},
@@ -1058,25 +1095,22 @@ export const render = (el, contexts = {}, notRender, isName) => {
             }
             else if (attr.name.startsWith('c-c-')) {
                 stopResume.stop = true
-                component(el, true, attr, notRender, stopResume)
+                component(el, true, attr, notRender, stopResume)// component continuity
             } else if (attr.name.startsWith('c-at-')) {
-                resumer.resume_attribute?.(el, attr, notRender)
+                resumer.resume_attribute?.(el, attr, notRender) //attribute continuity
             } else if (attr.name.startsWith('c-$-')) {
-                resumer.resume_state?.(el, attr, notRender)
-            } else if (attr.name.startsWith('c-t')) {
+                resumer.resume_state?.(el, attr, notRender) //state continuity
+            } else if (attr.name.startsWith('c-t')) {//text continuity
                 resumer.resume_text(el, attr, isName)
             } else if (attr.name.startsWith('c-if-')) {
-                directives['if'](el, attr, stateContext, true, notRender, stopResume)
+                directives['if'](el, attr, stateContext, true, notRender, stopResume) // condition continuity
             } else if (attr.name === 'c-for') {
-                directives['for'](el, attr, stateContext, true, notRender, stopResume)
+                directives['for-each'](el, attr, stateContext, true, notRender, stopResume) // for-each continuity
             }else if (attr.name.startsWith('c-key-')) {
-                directives['key'](el, attr, stateContext, true, notRender, stopResume)
+                directives['key'](el, attr, stateContext, true, notRender, stopResume)// key continuity
             }
             else if (attr.name.startsWith('c-sw-')) {
-                directives['switch'](el, attr, stateContext, true, notRender, stopResume)
-            } else if (attr.name === 'c-for') {
-                directives['for'](el, attr, stateContext, true, notRender, stopResume)
+                directives['switch'](el, attr, stateContext, true, notRender, stopResume)// switch continuity
             } else if (fullNamePlugin.has(attr.name)) {
                 if (externalPlugin[attr.name]) {
                     const plugin = externalPlugin[attr.name]
@@ -1135,6 +1169,7 @@ export const render = (el, contexts = {}, notRender, isName) => {
         const number = { notRender: null, index: null }
         Array.from(el.children).forEach((child, index) => {
             number.index = index
+            if (number.notRender !== null && index <= number.notRender) return
             render(child, context, number, isName)
         })
         el._callMount()

package/merger/for.js CHANGED Viewed

@@ -40,7 +40,7 @@ export const merger_for = (el, stateContext, attr, arrayName, arrayItem, indexes
                         [indexes]: index,
                         ...context
                     }
-                    const newElement = el._attrElement('for')
+                    const newElement = el._attrElement('for-each')
                     newElement.setAttribute('data-for-index', index)
                     processNode(newElement, itemContext)
                     div.appendChild(newElement)
@@ -167,7 +167,7 @@ export const merger_for = (el, stateContext, attr, arrayName, arrayItem, indexes
                         [indexes]: index,
                         ...context
                     }
-                    const newElement = el._attrElement('for')
+                    const newElement = el._attrElement('for-each')
                     const keyComment = document.createComment(`key=${newElement.getAttribute('for-key') || index}`)
                     const endKeyComment = document.createComment('end key')
                     PawaComment.Element(keyComment)
@@ -197,6 +197,7 @@ export const merger_for = (el, stateContext, attr, arrayName, arrayItem, indexes
             } else {
                 if(!resume)return
                 if(once)return
+                const number={notRender:null,index:null}
                 elementArray.forEach((keyComment) => {
                     if(keyComment.nextElementSibling === null) return
                     const context = el._context

package/merger/if.js CHANGED Viewed

@@ -102,10 +102,11 @@ export const merger_if=(el,attr,stateContext,resume=false,{comment,endComment,ch
                         stateContext._hasRun = false
                         keepContext(stateContext)
                     }
-                      const number={notRender:null,index:null}
+                              const number = { notRender: null, index: null }
                             children.forEach((value, index) => {
-                              number.index=index
-                              if(number.notRender && index >= number.notRender) return
+                              number.index = index
+                            if (number.notRender !== null && index <= number.notRender) return
                               render(value,el._context,number)
                             })
                         stateContext._hasRun=true

package/merger/key.js CHANGED Viewed

@@ -51,7 +51,7 @@ export const merger_key=(el,attr,stateContext,resume=false,{comment,endComment,c
                       const number={notRender:null,index:null}
                             children.forEach((value, index) => {
                               number.index=index
-                              if(number.notRender && index >= number.notRender) return
+                              if (number.notRender !== null && index <= number.notRender) return
                               render(value,el._context,number)
                             })
                         stateContext._hasRun=true

package/merger/switch.js CHANGED Viewed

@@ -106,8 +106,8 @@ export const merger_switch=(el,attr,stateContext,resume=false,{comment,endCommen
                     }
                       const number={notRender:null,index:null}
                             children.forEach((value, index) => {
-                              number.index=index
-                              if(number.notRender && index >= number.notRender) return
+                              number.index = index
+            if (number.notRender !== null && index <= number.notRender) return
                               render(value,el._context,number)
                             })
                         stateContext._hasRun=true

package/normal/component.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import {propsValidator, setPawaDevError, pawaWayRemover, checkKeywordsExistence, sanitizeTemplate } from '../utils.js';
 import {PawaElement,PawaComment} from '../pawaElement.js';
 import {keepContext,render} from '../index.js'
+import {createEffect} from '../reactive.js'
 export const normal_component=(el,stateContext,setStateContext,mapsPlugin,formerStateContext,pawaContext,stateWatch)=>{
     const compoBeforeCall=mapsPlugin.compoBeforeCall
     const compoAfterCall=mapsPlugin.compoAfterCall

package/package.json CHANGED Viewed

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

package/pawaComponent.js CHANGED Viewed

@@ -41,6 +41,10 @@ class PawaComponent {
       isMount: [],
       isUnMount: [],
     };
+    /**
+     * Data serialized from pawa-ssr
+     */
+    this._serializedData={}
     /**
      * Map for non-reactive internal state (currently unused).
      * @type {Map}

package/pawaElement.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import {components,escapePawaAttribute,getPawaAttributes,getDependentAttribute} from './index.js';
+import {components,escapePawaAttribute,getPawaAttributes,getDependentAttribute,getPrimaryDirectives } from './index.js';
 import {splitAndAdd,replaceTemplateOperators,setPawaDevError,getEvalValues,safeEval} from './utils.js';
 import PawaComponent from './pawaComponent.js';
@@ -163,8 +163,9 @@ export class PawaElement {
         this._attr[attr.name]=attr.value
     })
   }
   hasForOrIf(){
-    const primary=getPrimaryDirective()
+    const primary=getPrimaryDirectives()
     let truth=false
     primary.forEach((att)=>{
       if(truth) return

package/power.js CHANGED Viewed

@@ -244,7 +244,7 @@ export const For = (el, attr, stateContext,resume=false,notRender,stopResume) =>
             getEndComment(comment,setEndComment,id,children,'isFor')
             const numberIfChildren=notRender.index + children.length - 1
       notRender.notRender=numberIfChildren
-            dataElement=comment.nextSibling
+            dataElement=document.querySelector(`[p\\:store-for="${id}"]`);
             el.removeAttribute(attr.name)
             dataElement.remove()
             resumer.resume_for?.(el,attr,stateContext,{comment,endComment,id,children,dataElement})

package/resumer.js CHANGED Viewed

@@ -14,8 +14,6 @@ export const resumer={
  */
 export const setResumer=(resume)=>{
     for(const [key,value] of Object.entries(resume)){
-        if(resumer[key] === null && resumer[key] !== undefined){
             resumer[key]=value
-        }
     }
 }

package/server.js CHANGED Viewed

@@ -13,8 +13,6 @@ const serverInstance={
 export const getServerInstance=()=>serverInstance
 export const setServer=(obj={})=>{
   for (const [key,value] of Object.entries(obj)) {
-    if (serverInstance[key] === null) {
       serverInstance[key]=value
-    }
   }
 }