pawajs 1.5.7 → 2.0.0

package/index.d.ts

@@ -163,7 +163,11 @@ export function pluginsMap(): {
     pawaAttributes: Set<string>;
     allowAsProp: Set<string>;
 };
-
+export function  PawaCustomEvent(eventType:string,handler:(el:PawaElement,modifiers:Set,options:{
+        capture: Boolean,
+        once: Boolean,
+        passive: Boolean
+    },execute:(e:EventListener)=>void)=>{})
 export const escapePawaAttribute: Set<string>;
 export const dependentPawaAttribute: Set<string>;
 

package/index.js

@@ -49,6 +49,15 @@ const createPawaDev = () => {
             dev.errors = [];
             dev.emit('clear', null);
         },
+        getSnapshot() {
+            return {
+                renderCount: dev.renderCount,
+                totalEffect: dev.totalEffect,
+                performance: dev.performance,
+                errors: dev.errors,
+                componentCount: dev.components.size
+            };
+        },
         logRender(c, t) { dev.renderCount++; /* preserve logging */ },
         logEffect(e, t) { dev.totalEffect++; /* preserve */ },
         logComponent(n, t) { /* preserve */ }
@@ -66,6 +75,7 @@ if (typeof globalThis !== 'undefined') {
     global.__pawaDev = pawaDevInstance;
 }
 
+export const customEventMap = new Map()
 const compoBeforeCall = new Set()
 const compoAfterCall = new Set()
 const renderBeforePawa = new Set()
@@ -517,7 +527,10 @@ export const setContext = () => {
     }
 
 }
-
+export const PawaCustomEvent=(eventName,handler)=>{
+    if (customEventMap.has(eventName) && !__pawaDev.tool)return
+    customEventMap.set(eventName, handler)
+}
 /**
  * Get parent Context
  * @param {object} context
@@ -975,17 +988,26 @@ const component = (el, resume = false, attr, notRender, stopResume) => {
 const mainAttribute = (el, exp) => {
     const attrMap = new Map();
     if (el._running) return
-        // Store original attribute value
+
+    // Check if attribute starts with @ (shorthand for reactive attributes)
+    const isAtAttr = exp.name.startsWith('@');
+    const targetName = isAtAttr ? exp.name.slice(1) : exp.name;
+
     if (el._hasForOrIf()) {
         return
     }
     if (el._componentName) {
         return
     }
+
+    if (isAtAttr) {
+        el.removeAttribute(exp.name);
+    }
+
     attrMap.set(exp.name, exp.value);
-    el._preRenderAvoid.push(exp.name)
+    el._preRenderAvoid.push(targetName)
     const booleanAttributes = new Set(['checked', 'selected', 'disabled', 'readonly', 'required', 'multiple']);
-    el._mainAttribute[exp.name] = exp.value
+    el._mainAttribute[targetName] = exp.value
     el._checkStatic()
     let enter=false
     const context=el._context
@@ -1014,30 +1036,32 @@ const mainAttribute = (el, exp) => {
                 }
             });
 
-            if (booleanAttributes.has(exp.name)) {
+            if (booleanAttributes.has(targetName)) {
                 const boolValue = hasExpression ? !!isBoolean : value.toLowerCase() !== 'false';
-                const propName = exp.name === 'readonly' ? 'readOnly' : exp.name;
+                const propName = targetName === 'readonly' ? 'readOnly' : targetName;
 
                 if (propName in el) {
                     el[propName] = boolValue;
                 }
 
                 if (boolValue) {
-                    el.setAttribute(exp.name, value);
+                    el.setAttribute(targetName, value);
                 } else {
-                    el.removeAttribute(exp.name);
+                    el.removeAttribute(targetName);
                 }
-            } else if (exp.name === 'value' && 'value' in el) {
+            } else if (targetName === 'value' && 'value' in el) {
                 el.value = value;
-                el.setAttribute(exp.name, value);
+                el.setAttribute(targetName, value);
             } else {
-                if ((exp.name === 'class' || exp.name === 'style') && enter) {
+                if ((targetName === 'class' || targetName === 'style') && enter) {
                     requestAnimationFrame(()=>{
-                    el.setAttribute(exp.name, value);
+                        el.setAttribute(targetName, value);
                     })
                     enter=true
                 }else{
-                    el.setAttribute(exp.name, value);
+                    el.setAttribute(targetName, value);
+                    // Toggle enter to true after initial set so subsequent reactive updates use requestAnimationFrame
+                    if (targetName === 'class' || targetName === 'style') enter = true;
                 }
             }
         } catch (error) {
@@ -1196,7 +1220,7 @@ export const render = (el, contexts = {}, notRender, isName) => {
                 directives[attr.name](el, attr, stateContext)
             } else if (attr.name.startsWith('on-') && !isAcomponent) {
                 event(el, attr, stateContext)
-            } else if (attr.value.includes('@{') && !attr.name.startsWith('c-at-')) {
+            } else if ((attr.value.includes('@{') || attr.name.startsWith('@')) && !attr.name.startsWith('c-at-')) {
                 mainAttribute(el, attr, isName)
             } else if (attr.name.startsWith('state-')) {
                 States(el, attr, getCurrentContext())
@@ -1230,6 +1254,7 @@ export const render = (el, contexts = {}, notRender, isName) => {
                 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]
                     try {
                         if (typeof plugin !== 'function') {
@@ -1244,6 +1269,7 @@ export const render = (el, contexts = {}, notRender, isName) => {
             } else if (startAttribute) {
                 const name = startObject[attr.name]
                 if (externalPlugin[name]) {
+                    if (el._componentName && !attr.name.startsWith('c-'))return
                     const plugin = externalPlugin[name]
                     try {
                         if (typeof plugin !== 'function') {
@@ -1361,10 +1387,12 @@ const Pawa = {
     $state,
     pawaStartApp,
     useAsync,
+    forwardProps,
     useInnerContext,
     RegisterComponent,
     runEffect,
-    html
+    html,
+    PawaCustomEvent
 }
 
 export default Pawa

package/normal/component.js

@@ -3,6 +3,10 @@ import {PawaElement,PawaComment} from '../pawaElement.js';
 import {keepContext,render, HmrComponentMap } from '../index.js'
 import {createEffect} from '../reactive.js'
 export const normal_component=(el,stateContext,setStateContext,mapsPlugin,formerStateContext,pawaContext,stateWatch)=>{
+    // Checks if the content is an SVG fragment (graphic elements) without a root <svg> tag.
+    // We exclude 'svg' from the match because a root <svg> tag can be parsed safely inside a <div>.
+    const isSvgFragment = (str) => /^\s*<(path|circle|rect|line|polyline|polygon|ellipse|g|defs|symbol|use|image|text|animate|mask|pattern|clipPath|linearGradient|radialGradient|filter)/i.test(str);
+
     const compoBeforeCall=mapsPlugin.compoBeforeCall
     const compoAfterCall=mapsPlugin.compoAfterCall
     const endComment = document.createComment(`end ${el.tagName}`)
@@ -61,7 +65,7 @@ export const normal_component=(el,stateContext,setStateContext,mapsPlugin,former
             console.error(error.message)
           }
         } 
-        let div =el._compoToSvg?document.createElementNS('http://www.w3.org/2000/svg', 'svg'): document.createElement('div')
+        let div 
     el._componentTerminate=() => {
         comment._terminateByComponent(endComment)
     }
@@ -147,6 +151,10 @@ export const normal_component=(el,stateContext,setStateContext,mapsPlugin,former
       }
     
     // stateContext._hasRun=true
+    div = isSvgFragment(compo) 
+        ? document.createElementNS('http://www.w3.org/2000/svg', 'svg') 
+        : document.createElement('div');
+    
     div.innerHTML = compo;
     if (component?._insert) {
       Object.assign(el._context,component._insert)
@@ -173,10 +181,15 @@ export const normal_component=(el,stateContext,setStateContext,mapsPlugin,former
     } 
     const context=el._context
     const getAsChild=()=>{
-      const asChild=div.firstElementChild
-      if (splitAndAdd(asChild?.tagName|| '') === 'ASCHILD') {
-        const getChildren=asChild.firstElementChild
-        Array.from(asChild.attributes).forEach(attr=>{
+      const asChild=div
+      if (el._asChild) {
+        const divFirst=div.firstElementChild
+        if (isSvgFragment(children)) {
+          div=document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+        }
+        div.innerHTML=children
+        const getChildren=div.firstElementChild
+        Array.from(divFirst.attributes).forEach(attr=>{
           if (getChildren.hasAttribute(attr.name)) {
             let attrName=getChildren.getAttribute(attr.name)
             attrName=attr.value +' '+attrName
@@ -184,9 +197,7 @@ export const normal_component=(el,stateContext,setStateContext,mapsPlugin,former
           }else{
             getChildren.setAttribute(attr.name, attr.value)
           }
-        })
-        asChild.remove()
-        div.appendChild(getChildren)        
+        })       
       }
     }
        const propsSetter=()=>{  

package/package.json

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

package/pawaElement.js

@@ -252,7 +252,7 @@ export class PawaElement {
     }
     const tag = this._el.tagName
    try {
-      if (components.has(splitAndAdd(tag)) || this._lazy) {
+      if (components.has(splitAndAdd(tag)) || this._lazy && !this._el.hasAttribute('data-prevent:c')) {
       this._elementType='component'
       this._componentOrTemplate=true
       this._deCompositionElement=true
@@ -304,14 +304,14 @@ export class PawaElement {
       const {allowAsProp}=pluginsMap()
       const dependAttribute=getDependentAttribute()
       this._attributes.forEach((attr) => {
-        if (attr.name === 'svg') {
-          this._compoToSvg = true
+        if (attr.name.startsWith('state-')) {
           return
-        }else if(attr.name === 'aschild' || attr.name === 'as-child'){
+        }else if(attr.name === 'aschild' || attr.name === 'as-child' || attr.name === ':as-child'){
           this._asChild = true
           return
         }
-        if (!attr.name.startsWith(':') && (!pawaAttribute.has(attr.name) && !dependAttribute.has(attr.name) )) {
+        const primaryAttribute=['if','else','else-if','key','for-each','case','switch','s-default']
+        if (!attr.name.startsWith(':') && !primaryAttribute.includes(attr.name)) {
           let name=''
           if (attr.name.startsWith('-')) {
             name=attr.name.slice(1)
@@ -353,7 +353,7 @@ export class PawaElement {
                 }
                 
                 this._restProps[attr.name]={name:attr.name,value:attr.value} 
-       }else if(!pawaAttribute.has(attr.name) && attr.name.startsWith(':')){
+       }else if(!primaryAttribute.includes(attr.name) && attr.name.startsWith(':')){
         
         const propsName=attr.name.slice(1) 
         if(attr.value === '') attr.value="true";

package/power.js

@@ -7,6 +7,7 @@ import {normal_If} from './normal/If.js'
 import {normal_For} from './normal/For.js'
 import {resumer} from './resumer.js'
 import { normal_key } from './normal/Key.js';
+import { customEventMap } from './index.js';
 
 // Shared helper to check common event modifiers
 const checkCommonModifiers = (e, modifiers) => {
@@ -102,11 +103,14 @@ const checkKeyModifiers = (e, modifiers, eventType) => {
 const processEventExecution = (el, attrName, modifiers, callback, eventType, directiveName,context) => {
     const execute = () => {
         try { callback(); } 
-        catch (error) { setPawaDevError({ message: `Error from ${directiveName}-${eventType} directive ${error.message}`, error, template: el._template }); }
+        catch (error) { 
+            console.log(error,'at event')
+            setPawaDevError({ message: `Error from ${directiveName}-${eventType} directive ${error.message}`, error, template: el._template }); }
     };
     if (!el._eventTimers) el._eventTimers = {};
     const delay = parseInt([...modifiers].find(m => /^\d+$/.test(m)) || '300');
     if (modifiers.has('debounce')) {
+        
         const timerKey = `${attrName}_debounce`;
         clearTimeout(el._eventTimers[timerKey]);
         el._eventTimers[timerKey] = setTimeout(execute, delay);
@@ -308,7 +312,35 @@ export const event = (el, attr, stateContext) => {
     };
     
     const target = modifiers.has('window') ? window : el;
-    target.addEventListener(eventType, handler, options);
+
+    // Wrapper to ensure custom events respect standard action modifiers
+       const wrappedExecute = (e) => {
+        // Apply common modifiers first
+        if (!checkCommonModifiers(e, modifiers)) return;
+        if (!checkKeyModifiers(e, modifiers, eventType)) return;
+        
+        // Apply target modifiers
+        if (modifiers.has('self') && e.target !== el) return;
+        if (modifiers.has('not-self') && e.target === el) return;
+        
+        // Apply form modifiers (if applicable, though less common for custom events)
+        if (modifiers.has('dirty') && e.target && !e.target.value) return;
+        if (modifiers.has('pristine') && e.target && e.target.value) return;
+        if (modifiers.has('valid') && e.target && !e.target.checkValidity?.()) return;
+        if (modifiers.has('invalid') && e.target && e.target.checkValidity?.()) return;
+
+        // Apply action modifiers
+        if (modifiers.has('prevent')) e.preventDefault?.();
+        if (modifiers.has('stop')) e.stopPropagation?.();
+        processEventExecution(el, attr.name, modifiers, () => executeEvent(e), eventType, 'on');
+    };
+
+    if (customEventMap.has(eventType)) {
+        const custom=customEventMap.get(eventType)
+        custom(el, modifiers, options, wrappedExecute)
+        return
+    }
+    
     
     el._MountFunctions.push(() => target.addEventListener(eventType, handler, options));
     el._setUnMount(() => {