pawa-ssr 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Allwell Oriso-owubo (Allisboy)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,13 @@
+# pawajs-ssr 
+pawajs ssr (server side rendering) for javascript
+
+# Directives
+server-for, server-if,server-else,server-else-if
+
+>>>html
+<div server-if="user.value.name">
+    <h1>@(user.value.name)</h1>
+</div>
+>>>
+
+* Notice pawajs ssr uses @() instead of @{} and pawajs ssr doesn't use client's hooks

package/classes.js

@@ -0,0 +1,56 @@
+
+export const ComponentProps=(some,message)=>{
+    
+    return({
+    Array:()=>{
+
+        if (Array.isArray(some)) {
+            return true
+        }else{
+            throw new Error(message ?message + ' / Not type of an Array ': `${some} must be an array`);
+            
+        }
+    },
+    String:()=>{
+        if (typeof some === 'string') {
+            return true
+        }else{
+            throw new Error(message? message + ' / Not type of a String' :`${some} must be a string`);
+            
+        }
+    },
+    Number:()=>{
+        if (typeof some === 'number') {
+            return true
+        }else{
+            throw new Error(message? message+' / Not type of a Number ': `${some} must be a number`);
+            
+        }
+    },
+    Object:()=>{
+        if (typeof some === 'object') {
+            return true
+        }else{
+            throw new Error(message? message+' / Not type of an Object ' :`${some} must be an object`);
+            
+        }
+    },
+    Function:()=>{
+        if (typeof some === 'function') {
+            return true
+        }else{
+            throw new Error(message? message+' / Not type of a Function ': `${some} must be a function`);
+            
+        }
+    },
+    Boolean:()=>{
+        if (typeof some === 'boolean') {
+            return true
+        }else{
+            throw new Error(message? message+' / Not type of a Boolean ' :`${some} must be a Boolean`);
+            
+        }
+    },
+})
+
+}

package/index.js

@@ -0,0 +1,448 @@
+import {Attr, DOMParser,parseHTML,Node, HTMLElement} from 'linkedom'
+import PawaElement from './pawaElement.js'
+import { If,Else,ElseIf,For } from './power.js';
+import PawaComponent from './pawaComponent.js';
+import { sanitizeTemplate,propsValidator, evaluateExpr } from './utils.js';
+
+/**
+ * @type{null|{_formerContext:stateContext,_hasRun:boolean,_prop:object,_name:string,_insert:object,_transportContext}}
+ */
+// export let stateContext=null;
+// let formerContext=null;
+export const components=new Map()
+
+
+
+export const $state=(arg)=>{
+    return {
+        value:arg
+    }
+}
+
+// under consideration
+ 
+/**
+ * @type{string}
+ */
+export const allServerAttr=['server-if','server-else','server-else-if','server-for']
+
+export const RegisterComponent=(...arg)=>{
+   
+    arg.forEach(func=>{
+        if (typeof func === 'function') {
+            components.set(func.name.toUpperCase(),func)
+        }else{
+            console.warn('must be a function')
+        }
+    })
+   
+}
+
+const compoBeforeCall = new Set()
+const compoAfterCall=new Set()
+const renderBeforePawa=new Set()
+const renderAfterPawa=new Set()
+const renderBeforeChild=new Set()
+const attrPlugin=new Set()
+/**
+ * @typedef {{
+ * attribute?:{register:Array<string>,plugin:(el:HTMLElement,attr:object)=>void},
+ * component?:{
+ * beforeCall?:(stateContext:PawaComponent,app:object)=>void,
+ * afterCall?:(stateContext:PawaComponent,el:HTMLElement)=>void
+ * },
+ * renderSystem?:{
+ *  beforePawa?:(el:HTMLElement,context:object)=>void,
+ *  afterPawa?:(el:PawaElement)=>void,
+ *  beforeChildRender?:(el:PawaElement)=>void
+ * }
+ * }} PluginObject
+ */
+/**
+ * @param {Array<()=>PluginObject>} func
+ */
+export const PluginSystem=(...func)=>{
+  func.forEach(fn=>{
+    /**
+     * @type {PluginObject}
+     */
+    const getPlugin=fn()
+    // attributes plugin or extension
+    if (getPlugin?.attribute) {
+      const attr=getPlugin.attribute
+      if(attr.register === null){
+        console.error('attribute register must be giving is an array of attributes to add into pawajs attribute rendering')
+      }
+      if(Array.isArray(attr.register)){
+        attr.register.forEach(attr=>{
+          if(pawaAttributes.has(attr)){
+            console.warn('attribute already exist in pawajs Attributes',attr)
+            throw Error('attribute already exist ',attr)
+          }else{
+            pawaAttributes.add(attr)
+          }
+        })
+      }else{
+        console.warn('pawa attribute plugin register must be an array')
+      }
+      if(attr.plugin === null){
+        console.error('attribute plugin function must be giving, is a function of attributes to run the plugin pawajs attribute rendering')
+      }else{
+        if(attr.plugin instanceof Function){
+          attrPlugin.add(attr.plugin)
+        }
+      }
+      
+
+    }
+    if (getPlugin?.component) {
+      if (getPlugin.component?.beforeCall && typeof getPlugin.component?.beforeCall === 'function') {
+        compoBeforeCall.add(getPlugin.component.beforeCall)
+      }
+      if (getPlugin.component?.afterCall && typeof getPlugin.component?.afterCall === 'function') {
+        compoAfterCall.add(getPlugin.component.afterCall)
+      }
+    }
+    if (getPlugin?.renderSystem) {
+      if (getPlugin.renderSystem?.beforePawa && typeof getPlugin.renderSystem?.beforePawa === 'function') {
+        renderBeforePawa.add(getPlugin.renderSystem?.beforePawa)
+      }
+      if (getPlugin.renderSystem?.afterPawa && typeof getPlugin.renderSystem?.afterPawa === 'function') {
+        renderAfterPawa.add(getPlugin.renderSystem?.afterPawa)
+      }
+      if (getPlugin.renderSystem?.beforeChildRender && typeof getPlugin.renderSystem?.beforeChildRender === 'function') {
+        renderAfterPawa.add(getPlugin.renderSystem?.beforeChildRender)
+      }
+    }
+  })
+}
+
+
+/**
+ * 
+ * @param {PawaElement|HTMLElement} el 
+ * @returns 
+ */
+const component=(el)=>{
+    if(el._running){
+        return
+    }
+   try {
+    const slot=el._slots
+    const slots={}
+    let stateContext=null
+    Array.from(slot.children).forEach(prop =>{
+      if (prop.getAttribute('prop')) {
+        slots[prop.getAttribute('prop')]=prop.innerHTML
+      }else{
+        console.warn('sloting props must have prop attribute')
+      }
+    }) 
+    const children=el._componentChildren
+    const component =el._component
+    stateContext=component
+    const insert=(arg={})=>{
+            Object.assign(stateContext.context,arg)
+    }
+    /**
+ * 
+ * @param {object} props 
+ * @returns {object}
+ */
+stateContext._prop={children,...el._props}
+stateContext._name=el._componentName
+ const useValidateProps=(props={}) => {
+  if (!stateContext) {
+    console.warn('must be used inside of a component')
+    return
+  }
+    
+    return propsValidator(props,stateContext._prop,stateContext._name)
+}
+    const app = {
+        children,
+        app:{
+          insert,
+          useValidateProps
+        },
+        ...slots,
+        ...el._props
+      }
+      for (const fn of compoBeforeCall) {
+            try {
+              fn(stateContext,app)
+            } catch (error) {
+              console.error(error.message,error.stack)
+            }
+          } 
+      const {document}=parseHTML()
+    const comment=document.createComment('componet')
+    el.replaceWith(comment)
+    const div=document.createElement('div')
+    let compo 
+    try{
+      compo=sanitizeTemplate(component.component(app))
+    }catch(error){
+      console.error(error.message,error.stack)
+    }
+    if (component?._insert) {
+        Object.assign(el._context,component._insert)
+      }
+
+      div.innerHTML=compo
+      if(Object.entries(el._restProps).length > 0){
+          const findElement=div.querySelector('[--]') || div.querySelector('[rest]')
+          if (findElement) {
+            for (const [key,value] of Object.entries(el._restProps)) {
+                findElement.setAttribute(value.name,value.value)
+                findElement.removeAttribute('--')
+                findElement.removeAttribute('rest')
+              }
+          }
+        }
+        for (const fn of compoAfterCall) {
+          try {
+            fn(stateContext,div?.firstElementChild)
+          } catch (error) {
+            console.error(error.message,error.stack)
+          }
+        }
+        const newElement=div.firstElementChild
+      if (newElement) {
+        comment.replaceWith(newElement)
+        render(newElement,el._context)
+      }
+        comment.remove()
+         } catch (error) {
+    console.log(error.message,error.stack);
+    
+   }
+}
+const textContentHandler=(el)=>{
+    if (el._running) {
+        return
+      }
+      const nodesMap = new Map();
+      
+      // Get all text nodes and store their original content
+      const textNodes = el.childNodes.filter(node => node.nodeType === 3);
+      textNodes.forEach(node => {
+        nodesMap.set(node, node.nodeValue);
+      });
+      const evaluate = () => {
+        try {
+          textNodes.forEach(textNode => {
+            // Always use original content from map for evaluation
+            let value = nodesMap.get(textNode);
+            const regex = /@\((.*?)\)/g;
+            
+            value = value.replace(regex, (match, expression) => {
+                const func = evaluateExpr(expression,el._context)
+                return String(func);
+              });            
+            textNode.nodeValue = value;
+            
+            
+          });
+        } catch (error) {
+          console.warn(`error at ${el} textcontent`)
+        }
+      };
+      evaluate()
+}
+const attributeHandler=(el,attr)=>{
+    if (el._hasForOrIf()) {
+        return
+      }
+      if(el._running){
+        return
+      }
+      const removableAttributes=new Set()
+      removableAttributes.add('disabled')
+      const evaluate=()=>{
+          try {
+            const regex =  /@\((.*?)\)/g;
+
+            let value = attr.value;
+        const keys = Object.keys(el._context);
+        const resolvePath = (path, obj) => {
+          return path.split('.').reduce((acc, key) => acc?.[key], obj);
+        };
+        const values = keys.map((key) => resolvePath(key, el._context));
+        
+        value = value.replace(regex, (match, expression) => {
+          return evaluateExpr(expression,el._context)
+        });
+        
+        if (removableAttributes.has(attr.name)) {
+            if (value) {
+              el.setAttribute(attr.name, '');
+            } else {
+              el.removeAttribute(attr.name)
+            }
+          } else {
+            el.setAttribute(attr.name, value);
+          }
+        } catch (error) {
+            console.log(error.message,error.stack)
+        }
+      }
+      evaluate()
+}
+/**
+   * @param {HTMLElement} el
+   */
+  const innerHtml = (el,context) => {
+    if (el.getAttribute('client')) {
+      return
+    }
+    const {document}=parseHTML()
+    const nodesMap = new Map();
+  
+    // Get all text nodes and store original value
+    const textNodes = Array.from(el.childNodes).filter(
+      (node) => node.nodeType === 3
+    );
+  
+    textNodes.forEach((node) => {
+      nodesMap.set(node, node.nodeValue);
+    });
+  
+    const evaluate = () => {
+      try {
+        
+        textNodes.forEach((textNode) => {
+          const originalValue = nodesMap.get(textNode);
+          const regex = /@html\((.*?)\)/g;
+          let match;
+          let hasHtml = false;
+          const fragments = [];
+  
+          let lastIndex = 0;
+  
+          while ((match = regex.exec(originalValue))) {
+            const before = originalValue.slice(lastIndex, match.index);
+            if (before) fragments.push(document.createTextNode(before));
+  
+            let expression = match[1];
+            let htmlString = '';
+            
+            
+            try {
+              
+              htmlString = evaluateExpr(expression,context)
+            } catch (e) {
+              htmlString = `<span style="color:red;">[Invalid Expression]</span>`;
+            }
+  
+            const temp = document.createElement('div');
+            temp.innerHTML = sanitizeTemplate(htmlString);
+            fragments.push(...temp.childNodes);
+            hasHtml = true;
+  
+            lastIndex = regex.lastIndex;
+          }
+  
+          const after = originalValue.slice(lastIndex);
+          if (after) fragments.push(document.createTextNode(after));
+  
+          if (hasHtml) {
+            const parent = textNode.parentNode;
+            parent.insertBefore(document.createDocumentFragment(), textNode);
+            fragments.forEach((frag) => parent.insertBefore(frag, textNode));
+            parent.removeChild(textNode);
+          }
+        });
+      } catch (error) {
+        console.warn(`Error while evaluating innerHTML for`, el, error);
+      }
+    };
+  
+    // Helper to resolve nested properties
+    const resolvePath = (path, obj) => {
+      return path.split('.').reduce((acc, key) => acc?.[key], obj);
+    };
+  
+    evaluate();
+  };
+const directives={
+    'server-if':If,
+    'server-else':Else,
+    'server-else-if':ElseIf,
+    'server-for':For
+}
+
+/**
+ * 
+ * @param {PawaElement | HTMLElement} el 
+ * @param {object} contexts 
+ */
+export const render=(el,contexts={})=>{
+    const context={
+        ...contexts
+    }
+    for (const fn of renderBeforePawa) {
+      try {
+        fn(el,context)
+      } catch (error) {
+        console.error(error.message,error.stack)
+      }
+    }
+    innerHtml(el,context)
+    PawaElement.Element(el,context)
+    
+     if(el.childNodes.some(node=>node.nodeType === 3 && node.nodeValue.includes('@('))){
+        textContentHandler(el)  
+     }
+     for (const fn of renderAfterPawa) {
+      try {
+        fn(el)
+      } catch (error) {
+        console.error(error.message,error.stack)
+      }
+    }
+    el.attributes.forEach(attr=>{
+        if (directives[attr.name]) {
+            directives[attr.name](el,attr)  
+        }else if(attr.value.includes('@(')){
+            attributeHandler(el,attr)
+        }else {
+          attrPlugin.forEach((plugins) => {
+            plugins(el,attr)
+          })
+        }
+        
+    })
+    if (el._componentName) {
+        component(el)
+        return
+    }
+    for (const fn of renderBeforeChild) {
+      try {
+        fn(el)
+      } catch (error) {
+        console.error(error.message,error.stack)
+      }
+    }
+    if(!el._running){
+        Array.from(el.children).forEach(child=>{
+            render(child,el._context)
+        })
+    }
+}
+
+export const startApp=(html,context={})=>{
+    const app=new DOMParser()
+    const {document}=parseHTML()
+   const body= app.parseFromString(html,'text/html')
+   const div=body.firstElementChild
+    const element=document.createElement('div')
+    element.appendChild(div)
+    render(div,context);
+    
+    
+    return {
+      element:div,
+      toString:()=>element.innerHTML
+    }
+}

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "pawa-ssr",
+  "version": "1.0.0",
+  "description": "pawajs ssr libary",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Allisboy/pawajs-ssr.git"
+  },
+  "keywords": [
+    "ssr",
+    "html",
+    "js",
+    "pawajs"
+  ],
+  "author": "Allwell Oriso-owubo",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/Allisboy/pawajs-ssr/issues"
+  },
+  "homepage": "https://github.com/Allisboy/pawajs-ssr#readme",
+  "dependencies": {
+    "linkedom": "^0.18.11",
+    "vm2": "^3.9.19"
+  }
+}

package/pawaComponent.js

@@ -0,0 +1,71 @@
+/**
+ * Represents a Pawa component instance.
+ * @class
+ */
+class PawaComponent {
+    /**
+     * @param {Function} func - The component function that defines rendering logic.
+     */
+    constructor(func) {
+      /**
+       * Default props for the component (currently unused).
+       * @type {Object}
+       */
+      this.prop = {};
+      /**
+       * The component function.
+       * @type {Function}
+       */
+      this.component = func;
+      /**
+       * Tracks whether the component has been rendered.
+       * @type {boolean}
+       */
+      this._hasRun = false;
+      /**
+       * Data to inject into the rendering context.
+       * @type {Object}
+       */
+      this._insert = {};
+      /**
+       * Lifecycle hooks for mount, unmount, and effects.
+       * @type {{effect: Array, isMount: Array, isUnMount: Array}}
+       */
+      this._hook = {
+        effect: [],
+        isMount: [],
+        isUnMount: [],
+      };
+      /**
+       * Map for non-reactive internal state (currently unused).
+       * @type {Map}
+       */
+      this._innerState = new Map();
+      /**
+       * Map for reactive state created via $state.
+       * @type {Map}
+       */
+      this._stateMap = new Map();
+      /**
+       * Stores the previous context for scoping.
+       * @type {Object|null}
+       */
+      this._formerContext = null;
+      /**
+       * @type {boolean}
+       */
+      this._isAction=false
+      /**
+       * @type{object}
+       */
+      this._action={}
+    }
+    /**
+     * Returns the component function.
+     * @returns {Function}
+     */
+    getComponent() {
+      return this.component;
+    }
+  }
+  export default PawaComponent

package/pawaElement.js

@@ -0,0 +1,103 @@
+import { HTMLElement, parseHTML } from "linkedom"
+import { allServerAttr, components } from "./index.js"
+import PawaComponent from "./pawaComponent.js"
+import { evaluateExpr, splitAndAdd } from "./utils.js"
+
+class PawaElement {
+  /**
+   * 
+   * @param {HTMLElement} element 
+   * @param {object} context 
+   */
+    constructor(element,context) {
+      const {document}=parseHTML()
+      /**
+       * @type{PawaElement|HTMLElement}
+       */
+        this._el=element
+        this._slots=document.createDocumentFragment()
+        this._context=context
+        this._props={}
+        this._component=null
+        this._componentName=''
+        this._running=false
+        this._hasForOrIf=this.hasForOrIf
+        /** 
+        * @typedef{object}
+        * @property{any} 
+        * Object of Html Attributes for Rest Attributes
+        */
+        this._restProps={}
+        this._componentChildren=null
+        this.getComponent()
+        this.setProps()
+    }
+    /**
+     * 
+     * @param {HTMLElement} el 
+     * @param {object} context 
+     * @returns {PawaElement}
+     */
+    static Element(el,context){
+        const pawa=new PawaElement(el,context)
+        Object.assign(el,pawa)
+        return el   
+    }
+    hasForOrIf(){
+        if (this._el.getAttribute('server-if') || this._el.getAttribute('server-for') || this._el.getAttribute('server-else') || this._el.getAttribute('server-else-if')) {
+          return true
+        }else{
+          return false
+        }
+      }
+      
+      getComponent(){
+        if (components.has(splitAndAdd(this._el.tagName.toUpperCase())) && this._el.getAttribute('client') === null) {
+          this._componentName=splitAndAdd(this._el.tagName.toUpperCase())
+          this._component=new PawaComponent(components.get(splitAndAdd(this._el.tagName.toUpperCase())))
+          Array.from(this._el.children).forEach(slot =>{
+        
+            if (slot.tagName === 'TEMPLATE' && slot.getAttribute('prop')) {
+              
+              this._slots.appendChild(slot)
+            }
+          })
+          this._componentChildren=this._el.innerHTML
+        }else{
+          if(this._el.getAttribute('client')){
+            this._el.removeAttribute('client')
+          }
+        }
+      }
+
+      //set Component props
+      setProps(){
+        if (this._componentName) {
+        
+          this._el.attributes.forEach(attr=>{
+            if(!allServerAttr.includes(attr.name)){
+              if (attr.name.startsWith('-') || attr.name.startsWith('r-')) {
+                let name=''
+                if (attr.name.startsWith('r-')) {
+                  name=attr.name.slice(2)
+                } else {
+                  name=attr.name.slice(1)
+                }
+                
+                this._restProps[name]={name:name,value:attr.value}
+                
+              } else {
+                try {
+                  const func = evaluateExpr(attr.value,this._context)
+                const name=attr.name
+                this._props[name]=func
+                } catch (error) {
+                  console.log(error.message,error.stack)
+                }
+              }
+            }
+          })
+        }
+      }
+}
+export default PawaElement

package/power.js

@@ -0,0 +1,108 @@
+import { render } from "./index.js";
+import { convertToNumber,evaluateExpr } from "./utils.js";
+
+
+
+export const If = (el, attr) => {
+  if (el._running) return;
+  el._running = true;
+
+  const nextSibling = el.nextElementSibling || null;
+  if (nextSibling && (nextSibling.getAttribute('server-else') !== null || nextSibling.getAttribute('server-else-if'))) {
+    
+    nextSibling.setAttribute('data-if', attr.value);
+  }
+
+  const result = evaluateExpr(attr.value, el._context);
+  if (result) {
+    const newElement = el.cloneNode(true);
+    newElement.removeAttribute('server-if');
+    newElement.setAttribute('s-data-if', convertToNumber(attr.value));
+    el.replaceWith(newElement);
+    render(newElement, el._context);
+  } else {
+    el.remove();
+  }
+};
+
+export const Else = (el, attr) => {
+  if (el._running) return;
+  el._running = true;
+
+  const value = el.getAttribute('data-if') || '';
+  el.removeAttribute('data-if');
+  const result = evaluateExpr(value, el._context);
+  if (result) {
+    el.remove();
+  } else {
+    const newElement = el.cloneNode(true);
+    newElement.removeAttribute('server-else');
+    newElement.setAttribute('s-data-else',convertToNumber(value));
+    el.replaceWith(newElement);
+    render(newElement, el._context);
+  }
+};
+
+export const ElseIf = (el, attr) => {
+  if (el._running) return;
+  el._running = true;
+
+  const nextSibling = el.nextElementSibling || null;
+  const prevCondition = el.getAttribute('data-if') || '';
+  el.removeAttribute('data-if');
+
+  if (nextSibling && (nextSibling.getAttribute('server-else') !== null || nextSibling.getAttribute('server-else-if'))) {
+    
+    nextSibling.setAttribute('data-if', attr.value);
+  }
+
+  const prevResult = evaluateExpr(prevCondition, el._context);
+  const currentResult = evaluateExpr(attr.value, el._context);
+
+  if (prevResult) {
+    el.remove();
+  } else if (currentResult) {
+    const newElement = el.cloneNode(true);
+    newElement.removeAttribute('server-else-if');
+    newElement.setAttribute('s-data-else-if', convertToNumber(attr.value));
+    el.replaceWith(newElement);
+    render(newElement, el._context);
+  } else {
+    el.remove();
+  }
+};
+
+export const For=(el,attr)=>{
+    if(el._running){
+      return
+    }
+    el._running=true
+    const value=attr.value
+    const split=value.split(' in ')
+    const arrayName=split[1]
+    const arrayItems=split[0].split(',')
+    const arrayItem=arrayItems[0]
+    const indexes=arrayItems[1]
+    const array=evaluateExpr(arrayName,el._context)
+    if(Array.isArray(array)){
+      array.forEach((item,index)=>{
+        const context=el._context
+        const itemContext = {
+          [arrayItem]: item,
+          [indexes]: index,
+          ...context
+        }
+        const newElement=el.cloneNode(true)
+        newElement.removeAttribute('server-for')
+        newElement.setAttribute('s-data-for',convertToNumber(attr.value))
+        
+        el.parentElement.insertBefore(newElement,el)
+        render(newElement,itemContext)
+        if (newElement.getAttribute('server-key')) {
+          newElement.setAttribute('s-data-loop-key',convertToNumber(newElement.getAttribute('server-key')))
+          newElement.removeAttribute('server-key')
+        }
+      })
+    }
+    el.remove()
+}

package/utils.js

@@ -0,0 +1,151 @@
+import {VM} from 'vm2'
+export const splitAndAdd=(string) => {
+    const strings=string.split('-')
+   let newString=''
+   strings.forEach(str=>{
+     newString+=str
+   })
+   return newString.toUpperCase()
+ }
+
+ export const matchRoute = (pattern, path) => {
+  // Remove trailing slashes for consistency
+  const cleanPattern = pattern.replace(/\/$/, '');
+  const cleanPath = path.replace(/\/$/, '');
+  
+  const patternParts = cleanPattern.split('/');
+  const pathParts = cleanPath.split('/');
+  
+  if (patternParts.length !== pathParts.length) {
+    
+    return [false, {}];
+  }
+  
+  const params = {};
+  
+  const match = patternParts.every((part, index) => {
+    if (part.startsWith(':')) {
+      // This is a parameter
+      const paramName = part.slice(1);
+      params[paramName] = pathParts[index];
+      return true;
+    }
+    return part === pathParts[index];
+  });
+  
+  return [match, params];
+}
+export const sanitizeTemplate = (temp) => {
+  if (typeof temp !== 'string') return '';
+  return temp.replace(/<script\b[^>]*>([\s\S]*?)<\/script>/gi, '');
+};
+/**
+ * Safely evaluates a JavaScript expression in a sandbox.
+ *
+ * @param {string} expr - The expression to evaluate.
+ * @param {object} context - The context to expose inside the sandbox.
+ * @returns {any} - The result of the evaluated expression or null on error.
+ */
+export const evaluateExpr = (expr, context = {}) => {
+  try {
+    const vm = new VM({
+      timeout: 50,
+      sandbox: { ...context },
+      require:false
+    });
+
+    return vm.run(expr);
+  } catch (err) {
+    console.warn(`Evaluation failed for: ${expr}`, err.message);
+    return null;
+  }
+};
+export const propsValidator=(obj={},propsAttri,name)=>{
+  let newObj={}
+  
+  const jsTypes=['Array','String','Number']
+  for (const[key,value] of Object.entries(obj)) {
+    const propsValue=propsAttri[key]
+    if(typeof value === 'object'){
+      if(propsAttri[key] || propsAttri[key] === 0){
+        const checker=ComponentProps(propsAttri[key],value?.err,name)
+        if (value.type) {
+        checker[value.type.name]()
+        }
+      }else{
+        if (value.strict) {
+          console.warn(`props ${key} at ${name} component props is needed`)
+          throw new Error(` ${key} props is needed`|| `${key}  props undefined ${name}`);
+        }else{
+          if (value.default || value.default === 0) {
+            propsAttri[key]=value.default
+          }
+        }
+
+      }
+    }
+  }
+  return {...propsAttri}
+}
+
+export const convertToNumber=(str)=>{
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash=(hash * 31 + str.charCodeAt(i)) | 0
+  }
+  return hash
+}
+export const ComponentProps=(some,message,name)=>{
+
+  return({
+  Array:()=>{
+
+      if (Array.isArray(some)) {
+          return true
+      }else{
+          throw new Error(message ?message + ' / Not type of an Array ': `${some} must be an array at ${name} component`);
+
+      }
+  },
+  String:()=>{
+      if (typeof some === 'string') {
+          return true
+      }else{
+          throw new Error(message? message + ' / Not type of a String' :`${some} must be a string at ${name} component`);
+
+      }
+  },
+  Number:()=>{
+      if (typeof some === 'number') {
+          return true
+      }else{
+          throw new Error(message? message+' / Not type of a Number ': `${some} must be a number at ${name} component`);
+
+      }
+  },
+  Object:()=>{
+      if (typeof some === 'object') {
+          return true
+      }else{
+          throw new Error(message? message+' / Not type of an Object ' :`${some} must be an object at ${name} component`);
+
+      }
+  },
+  Function:()=>{
+      if (typeof some === 'function') {
+          return true
+      }else{
+          throw new Error(message? message+' / Not type of a Function ': `${some} must be a function at ${name} component`);
+      }
+  },
+  Boolean:()=>{
+      if (typeof some === 'boolean') {
+          return true
+      }else{
+          throw new Error(message? message+' / Not type of a Boolean ' :`${some} must be a Boolean at ${name} component`);
+
+      }
+  },
+})
+
+}