npm - pawajs - Versions diffs - 2.0.2 → 2.0.4 - Mend

pawajs 2.0.2 → 2.0.4

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 (8) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -19,4 +19,6 @@ CHANGELOG.md
 + version 1.4.33 - added registerComponent.lazy
 + version 1.4.33 -1.4.42 fixing lazy registration component
 + version 1.5.1 stable
-+ version 1.5.2 - added function dependencies
++ version 1.5.2 - added function dependencies
++ version 2.0.1 -2.0.2 made runEffect to be global or component capability
++ version 2.0.3 integrating HMR system

package/README.md CHANGED Viewed

@@ -35,15 +35,53 @@ npm install pawajs
 CDN
 ```html
-    <head>
-        </head>
-    <body>
-        <div id="app"></div>
-        <script type="module" src="https://cdn.jsdelivr.net/npm/pawajs@latestVersion/index.js"></script>
-        <script type="module">
-            window.$pawa.pawaStartApp(document.getElementById('app'));
-        </script>
-    </body>
+    <!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>PawaJS CDN Demo</title>
+</head>
+<body>
+    <div id="app">
+        <counter></counter>
+    </div>
+    <!-- PawaJS CDN -->
+    <script type="module" src="https://cdn.jsdelivr.net/npm/pawajs-cdn@latest/dist/pawajs.iife.min.js"></script>
+    <script type="module">
+        const { pawaStartApp, $state, RegisterComponent, useInsert, html } = Pawa;
+        // 1. Define the component
+        const Counter = () => {
+            const count = $state(0);
+            useInsert({ count });
+            return html`
+                <div class="p-8 border rounded-lg shadow-md flex flex-col items-center">
+                    <h1 class="text-2xl font-bold">Count: @{count.value}</h1>
+                    <button
+                        on-click="count.value++"
+                        class="mt-4 px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+                    >
+                        Increment
+                    </button>
+                </div>
+            `;
+        };
+        // 2. Register it as a custom element
+        RegisterComponent(Counter);
+        // 3. Start the app
+        document.addEventListener('DOMContentLoaded', () => {
+            const app = document.getElementById('app');
+            pawaStartApp(app);
+        });
+    </script>
+</body>
+</html>
 ```
 OR
@@ -202,7 +240,7 @@ PawaJS uses a simple `@{...}` syntax to embed dynamic JavaScript expressions dir
 <!-- Bind to attributes -->
 <div class="user-card @{user.value.isActive ? 'active' : 'inactive'}">
-    <input value="@{user.value.name}" on-input="user.value.name = e.target.value">
+    <input @value="@{user.value.name}" on-input="user.value.name = e.target.value">
 </div>
 ```
@@ -304,7 +342,7 @@ const message = $state('This is a message from the parent!');
 useInsert({ message });
 return html`
-    <todo-list :title="'My Todo List'" :message="message.value" class="to the rest prop">Children in here</todo-list>
+    <todo-list title="My Todo List" :message="message.value" class="to the rest prop">Children in here</todo-list>
 `;
 ```

package/index.d.ts CHANGED Viewed

@@ -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;
@@ -265,11 +290,10 @@ export function RegisterComponent(...args: (string | Function)[]): void;
 export namespace RegisterComponent {
     /**
      * Registers components lazily. The component's bundle is only fetched during runime encounter.
-     * (nam,import) or ([names,...],import)
+     * (name,import) or ([names,...],import)
      */
-    export function lazy(...args: (string | Array<string> | Function)[]): Promise<void>;
+    export function lazy(...arg:Array<string|Function|Array<string>>): Promise<void>;
 }
 /**
  * Runs a side effect or lifecycle hook.
  * @param {(comment:PawaComment) => void | (() => void)} callback - Effect function,comment for component hacking and optionally returning cleanup .
@@ -360,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 CHANGED Viewed

@@ -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
@@ -903,7 +914,7 @@ const component = (el, resume = false, attr, notRender, stopResume) => {
     if (!resume) {
         if (el._lazy) {
-            // pas the normal component to lazy handler
+            // passes the normal component to lazy handler
             el.style.opacity=0
             addLazyComponentElement(el,()=>normal_component(el, stateContext, setStateContext, mapsPlugins, formerStateContext, pawaContext, stateWatch))
             return
@@ -1205,9 +1216,11 @@ export const render = (el, contexts = {}, notRender, isName) => {
         startsWithSet.forEach(starts => {
             el._attributes.forEach(attr => {
-                if (attr.name.startsWith(starts)) {
+                let attrName=attr.name.replace(/^-+/, '');
+    attrName=attrName.trim()
+                if (attrName.startsWith(starts)) {
                     startAttribute = true
-                    startObject[attr.name] = starts
+                    startObject[attrName] = starts
                 }
             })
         })
@@ -1215,51 +1228,52 @@ export const render = (el, contexts = {}, notRender, isName) => {
         const isAcomponent=el._componentName?true:false
         el._attributes.forEach(attr => {
+            let attrName=attr.name.replace(/^-+/, '');
+            attrName=attrName.trim()
             if (stopResume.stop || el._hasRun) return
-            if (directives[attr.name]) {
-                directives[attr.name](el, attr, stateContext)
-            } else if (attr.name.startsWith('on-') && !isAcomponent) {
+            if (directives[attrName]) {
+                directives[attrName](el, attr, stateContext)
+            } else if (attrName.startsWith('on-') && !isAcomponent) {
                 event(el, attr, stateContext)
-            } else if ((attr.value.includes('@{') || attr.name.startsWith('@')) && !attr.name.startsWith('c-at-')) {
+            } else if ((attr.value.includes('@{') || attrName.startsWith('@')) && !attrName.startsWith('c-at-')) {
                 mainAttribute(el, attr, isName)
-            } else if (attr.name.startsWith('state-')) {
+            } else if (attrName.startsWith('state-')) {
                 States(el, attr, getCurrentContext())
-            } else if (attr.name.startsWith('out-') && !isAcomponent) {
+            } else if (attrName.startsWith('out-') && !isAcomponent) {
                 documentEvent(el, attr)
-            } else if (attr.name.startsWith('after-[') && attr.name.endsWith(']') && !isAcomponent) {
+            } else if (attrNamestartsWith('after-[') && attrName.endsWith(']') && !isAcomponent) {
                 After(el, attr)
             }
-             else if (attr.name.startsWith('every-[') && attr.name.endsWith(']') && !isAcomponent) {
+             else if (attrName.startsWith('every-[') && attrName.endsWith(']') && !isAcomponent) {
                 Every(el, attr)
             }
-            else if (attr.name.startsWith('c-c-')) {
+            else if (attrName.startsWith('c-c-')) {
                 stopResume.stop = true
                 component(el, true, attr, notRender, stopResume)// component continuity
-            } else if (attr.name.startsWith('c-at-')) {
+            } else if (attrName.startsWith('c-at-')) {
                 resumer.resume_attribute?.(el, attr, notRender) //attribute continuity
-            } else if (attr.name.startsWith('c-$-')) {
+            } else if (attrName.startsWith('c-$-')) {
                 resumer.resume_state?.(el, attr, notRender) //state continuity
-            } else if (attr.name.startsWith('c-t')) {//text continuity
+            } else if (attrName.startsWith('c-t')) {//text continuity
                 resumer.resume_text(el, attr, isName)
-            } else if (attr.name.startsWith('c-if-')) {
+            } else if (attrName.startsWith('c-if-')) {
                 directives['if'](el, attr, stateContext, true, notRender, stopResume)
-            } else if (attr.name === 'c-for') {
+            } else if (attrName === 'c-for') {
                 directives['for-each'](el, attr, stateContext, true, notRender, stopResume)
-            }else if (attr.name.startsWith('c-key-')) {
+            }else if (attrName.startsWith('c-key-')) {
                 directives['key'](el, attr, stateContext, true, notRender, stopResume)
             }
-            else if (attr.name.startsWith('c-sw-')) {
+            else if (attrName.startsWith('c-sw-')) {
                 directives['switch'](el, attr, stateContext, true, notRender, stopResume)// switch continuity
-            } else if (fullNamePlugin.has(attr.name)) {
-                if (externalPlugin[attr.name]) {
-                    if (el._componentName && !attr.name.startsWith('c-'))return
-                    const plugin = externalPlugin[attr.name]
+            } else if (fullNamePlugin.has(attrName)) {
+                if (externalPlugin[attrName]) {
+                    if (el._componentName && !attrName.startsWith('c-'))return
+                    const plugin = externalPlugin[attrName]
                     try {
                         if (typeof plugin !== 'function') {
-                            console.warn(`${attr.name} plugin must be a function`)
+                            console.warn(`${attrName} plugin must be a function`)
                             return
                         }
                         plugin(el, attr, stateContext, notRender, stopResume)
@@ -1268,9 +1282,9 @@ export const render = (el, contexts = {}, notRender, isName) => {
                     }
                 }
             } else if (startAttribute) {
-                const name = startObject[attr.name]
+                const name = startObject[attrName]
                 if (externalPlugin[name]) {
-                    if (el._componentName && !attr.name.startsWith('c-'))return
+                    if (el._componentName && !attrName.startsWith('c-'))return
                     const plugin = externalPlugin[name]
                     try {
                         if (typeof plugin !== 'function') {
@@ -1360,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)
+    }
 }
 /**
@@ -1393,6 +1410,7 @@ const Pawa = {
     RegisterComponent,
     runEffect,
     html,
+    accessChild,
     PawaCustomEvent
 }

package/normal/component.js CHANGED Viewed

@@ -83,19 +83,26 @@ export const normal_component=(el,stateContext,setStateContext,mapsPlugin,former
     let compo
     let awaits=false
     let suspense=''
+    let elementContext=el._context
     if (__pawaDev.tool) {
-      const id= crypto.randomUUID()
-      if (HmrComponentMap.has(stateContexts.component._filePath) && stateContexts.component._filePath) {
-        HmrComponentMap.get(stateContexts.component._filePath).push({id:id,template:el._template,el:el,stateContext:stateContexts})
+        const id=Date.now() + Math.random()
+      if (HmrComponentMap.has(el._componentName)) {
+        HmrComponentMap.get(el._componentName).push({id:id,template:el._template,el:el,stateContext:stateContexts,remove:()=>{
+          return pawaWayRemover(comment,endComment)
+        },context:elementContext,comment:comment
+        })
       }else{
-        HmrComponentMap.set(stateContexts.component._filePath,[{id:id,template:el._template,el:el,stateContext:stateContexts}])
+        HmrComponentMap.set(el._componentName,[{id:id,template:el._template,el:el,stateContext:stateContexts,remove:()=>{
+          return pawaWayRemover(comment,endComment)
+        },context:elementContext,comment:comment}])
       }
       el._setUnMount(()=>{
-        const array=HmrComponentMap.get(stateContexts.component._filePath)
+        const array=HmrComponentMap.get(el._componentName)
         if(array){
           const index=array.findIndex(item => item.id === id)
           if(index !== -1) array.splice(index,1)
+        }else{
+          HmrComponentMap.delete(el._componentName)
         }
       })
     }

package/package.json CHANGED Viewed

@@ -1,8 +1,8 @@
 {
   "name": "pawajs",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "type":"module",
-  "description": "pawajs library (reactive web runtime) for easily building web ui, enhancing html element, micro frontend etc ",
+  "description": "pawajs library (reactive web runtime) for easily building web ui, enhancing html element, micro frontend, spa etc ",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/pawaElement.js CHANGED Viewed

@@ -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))
     }
   }
@@ -75,6 +77,8 @@ export class PawaElement {
   }
   }catch(error){
+    throw new Error(`Error evaluating expression: ${expression}\n${error.message}`);
     __pawaDev.setError({
       el:this?._el,
       msg:`from ${expression}`,
@@ -91,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)) {
@@ -141,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
   }
@@ -177,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()
@@ -250,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'
@@ -293,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})
         });
@@ -319,6 +325,7 @@ export class PawaElement {
             name=attr.name
           }
           const context=this._context
+          const main={...context}
                 const setProps=()=>{
                  delete this._restProps[name]
                  let value=attr.value
@@ -328,7 +335,7 @@ export class PawaElement {
                      if (checkKeywordsExistence(this._staticContext, expression)) {
                          return value
                      } else {
-                         const res = this.safeEval(context, expression, 'props', true)
+                         const res = this.safeEval({...main}, expression, 'props', true)
                          return res
                      }
                  });

package/power.js CHANGED Viewed

@@ -104,7 +104,8 @@ const processEventExecution = (el, attrName, modifiers, callback, eventType, dir
     const execute = () => {
         try { callback(); }
         catch (error) {
-            console.log(error,'at event')
+            throw new Error(error,`at ${attrName} from ${el._template}`);
             setPawaDevError({ message: `Error from ${directiveName}-${eventType} directive ${error.message}`, error, template: el._template }); }
     };
     if (!el._eventTimers) el._eventTimers = {};
@@ -352,8 +353,9 @@ const createBoundCallback = (el, code,context) => {
     const keys = Object.keys(context);
     const resolvePath = (path, obj) => path.split('.').reduce((acc, key) => acc?.[key], obj);
     const values = keys.map((key) => resolvePath(key, context));
-    const func = new Function(...keys, code);
-    return () => func(...values);
+    const func = new Function('$el',...keys, code);
+    const $el=el
+    return () => func($el,...values);
 };
 export const mountElement = (el, attr) => {