vaderjs 1.3.3-alpha-23 → 1.3.3-alpha-24

package/package.json

@@ -2,7 +2,7 @@
   "name": "vaderjs",
   "description": "A Reactive library aimed to helping you build reactive applications inspired by react.js",
   "module": "vader.js",
-  "version": "1.3.3-alpha-23",
+  "version": "1.3.3-alpha-24",
   "bin": {
     "vader": "./vader.js"
   },

package/runtime/router.js

@@ -225,6 +225,9 @@ class VaderRouter{
             if(!document.querySelector('#root')){
               throw new Error('Root element not found, please add an element with id root');
             }
+            Component.state = {}
+            Component.reset();
+            Component.components = {}
             Component.request = req;
             Component.response = res;
             document.querySelector('#root').innerHTML =   Component.render() 

package/runtime/vader.js

@@ -257,10 +257,21 @@ export class Component {
     comp.response = this.response;
     comp.key = props.key || null;
      
+    if(!this.components[props.key]){
+      states[props.key] =  {}
+    }
     this.components[props.key] = comp
     this.children.push(comp)
     return this.components[props.key] 
   }
+  reset(){
+    Object.keys(this.components).forEach((key) => {
+      states[key] =  {}
+    })
+    states[this.key] =  {}
+    this.components = {}
+    this.children = []
+  }
   memoize(/**@type {Component}**/component){  
     if(!component.key){
       throw new Error('Component must have a static key')
@@ -273,7 +284,7 @@ export class Component {
     }
  
     let comp = this.components[component.key];
-    comp.props = component.props;
+    comp.props = component.props; 
     let h = comp.render() 
     
     if(h && h.split('>,').length > 1){
@@ -542,9 +553,9 @@ export class Component {
  * @param {T} initialState - The initial state value.
  * @returns {[() => T, (newValue: T, hook: Function) => void]} - A tuple with getter and setter functions.
  */
- useState(key, initialState) {
-  if (!this.state[key]) {
-    this.state[key] = initialState;
+ useState(key, initialState) { 
+  if (!states[this.key][key]) {
+    states[this.key][key] = initialState;
   }
 
   /**
@@ -552,7 +563,7 @@ export class Component {
    *
    * @returns {T} The current state value.
    */
-  let updatedValue = () => this.state[key];
+  let updatedValue = () => states[this.key][key];
 
   const getValue = updatedValue();
 
@@ -563,13 +574,13 @@ export class Component {
    * @param {Function} hook - The hook to hydrate after setting the value.
    */
   const set = (newValue, hook) => {
-    this.state[key] = newValue;
+    states[this.key][key] = newValue;
     this.hydrate(hook);
   };
 
  
 
-  return  [this.state[key], set];
+  return  [getValue, set];
 }
 
   

package/vader.js

@@ -226,11 +226,13 @@ function Compiler(func) {
             
             let paramString = params ? params.split(' ').map(param => param + ',').join('') : "";
  
+            paramString = paramString.replaceAll(',,', ',')
+            let jsxAttribute = `${attributeName}=function(${paramString}){${newvalue}},`
             let newatribute =  `${attributeName}="\${this.bind(\`${newvalue}\`, ${isJSXComponent ? true : false}, '${ref}', "${paramString}", ${params || null})}",`
 
             attribute[attributeName] = {
               old: old,
-              new: newatribute,
+              new: isJSXComponent ? jsxAttribute : newatribute,
               attribute: attributeName,
             };
             attributesList.push({
@@ -262,9 +264,11 @@ function Compiler(func) {
           // since js is all in one line split it
           newvalue = newvalue.split('\n').map(line => line.trim() ? line.trim() + ';' : line).join('\n'); 
           let paramString = params ? params.split(' ').map(param => param + ',').join('') : "";
+          paramString = paramString.replaceAll(',,', ',')
+          let jsxAttribute = `${attributeName}=function(${paramString}){${newvalue}},`
           let newattribute = `${attributeName}="\${this.bind(\`${newvalue}\`, ${isJSXComponent ? true : false}, '${ref}', "${paramString}", ${params || null})}",`
           newattribute = newattribute.replace(/\s+/g, " ")
-          string = string.replace(old, newattribute);
+          string = string.replace(old,  isJSXComponent ? jsxAttribute : newattribute);
         }
       }
     }
@@ -566,10 +570,10 @@ function Compiler(func) {
       .replaceAll('=`', ':`')
       .replaceAll(`={\``, ':`')
       .replaceAll('`}', '`')
+      .replaceAll(",,", ',')
       
       .replaceAll(/=([A-z])/g, ":$1")
-      props = props.replace(/:('[^']*'|"[^"]*")/g, ':$1,'); 
-      props = props.replace(/:('[^']*'|"[^"]*")/g, ':$1,');
+      props = props.replace(/:('[^']*'|"[^"]*")/g, ':$1,');  
       // ANY VALUE NUMBER BOOLEAN OR STRING
       props = props.replace(/=(\d+)/g, ':$1,');
       props = props.replaceAll(',,', ',')