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

pawajs 2.0.2 → 2.0.3

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

@@ -265,11 +265,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 .

package/index.js CHANGED Viewed

@@ -903,7 +903,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 +1205,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 +1217,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 +1271,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') {
@@ -1393,6 +1396,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.3",
   "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

@@ -75,6 +75,8 @@ export class PawaElement {
   }
   }catch(error){
+    throw new Error(`Error evaluating expression: ${expression}\n${error.message}`);
     __pawaDev.setError({
       el:this?._el,
       msg:`from ${expression}`,
@@ -319,6 +321,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 +331,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) => {