vaderjs 1.3.3-alpha-22 → 1.3.3-alpha-24

package/client/index.js

@@ -170,19 +170,7 @@ export class Component {
     this.vdom =  []
     
     this.children = []
-    let dom = new DOMParser().parseFromString(this.render(), 'text/html').body.firstChild;
-    dom.querySelectorAll('*').forEach((el) => {
-       let obj = {
-          el: el,
-          tag: el.tagName,
-          html: el.innerHTML,
-          content: el.textContent,
-          value: el.value,
-          attributes: el.attributes,
-          children: el.childNodes,
-       } 
-       this.vdom.push(obj)
-    });
+   
      
     /**
      * Parent of the current component.
@@ -261,13 +249,13 @@ export class Component {
       throw new Error('new components must have a key')
     } 
     let comp = new component(props);
-    if(this.components[props.key]){
-      return this.components[props.key]
-    }
+    
     comp['props'] = props;
     comp.children = children; 
     comp.props.children = children.join('')
     comp.parentNode  = this;
+    comp.request = this.request;
+    comp.response = this.response;
     comp.key = props.key || null;
      
     this.components[props.key] = comp
@@ -286,7 +274,8 @@ export class Component {
     }
  
     let comp = this.components[component.key];
-    
+    console.log(component.props)
+    comp.props = component.props;
     let h = comp.render() 
     
     if(h && h.split('>,').length > 1){
@@ -420,7 +409,7 @@ export class Component {
    */
   bind(funcData,jsx,ref, paramNames, ...params) {
    
-   
+    
     const name = `func_${crypto ? crypto.getRandomValues(new Uint32Array(1))[0] : Math.random()}`;
 
     var dynamicFunction = async (...params) => {
@@ -434,29 +423,22 @@ export class Component {
    
       paramNames = paramNames.replace(/,,/g, ',');
     let newparamnames = paramNames.replaceAll(',,', ',')
-     params.forEach((param, index) => {
-       if(param && Object.keys(param).includes('detail')){ 
-         param = param['detail']['target']['event']
-         params[index] = param
-       }
-     });
-      // Remove trailing commas
-      paramNames.endsWith(',') ? paramNames = paramNames.slice(0, -1) : null;
-      console.log(paramNames)
-
-      params.forEach((param, index) => {
-        paramObject[newparamnames.split(',')[index]] = param;
-      });
+      
+
+      for(var i in params){
+        paramObject[newparamnames.split(',')[i]] = params[i]
+      }
+       
+    
       
       paramNames = paramNames.replace(',,', ',');
       let func = new Function(`${paramNames}`, `
         return (async (${paramNames}) => {
-           ${funcData}
+           ${funcData}  
         })(${Object.keys(paramObject).join(',')})
-      `);
-    
-      // Bind and execute the function with the provided parameters
-      await func.bind(this)(...Object.values(paramObject));
+      `); 
+       await func.bind(this)(...Object.values(paramObject));
+      
     };
      
 
@@ -464,7 +446,7 @@ export class Component {
     if (!this.functionMap.has(name)) {
       document.addEventListener(`call_${name}`, (e) => {
         
-        dynamicFunction(params);
+        dynamicFunction(params)
         this.functionMap.set(e.detail.name, {
           lastUsed: Date.now(),
         });
@@ -489,12 +471,8 @@ export class Component {
       event.target.setAttribute('data-ref', '${ref}');
       let reference = event.target.getAttribute('data-ref');
       event.target.eventData = event;
-       
-      let domquery = queryRef(reference);
-       
-      domquery.eventData = event;
-      domquery.eventData.target = domquery;
-      call('${name}', {event:domquery.eventData}, '${paramNames}')
+      event.target.data = event 
+      call('${name}', {event:event.target.data}, '${paramNames}')
     })(event)
     `;
   }
@@ -552,28 +530,45 @@ export class Component {
   }
 
   /**
-   * Uses state to dynamically update the component.
-   * @method useState
-   * @param {string} [key=null] - The auto-generated key.
-   * @param {*} initialState - The initial state.
-   * @param {Component.render} [func=null] - The render function.
-   * @returns {Array} - An array containing the state value and the setter function.
-   */
-  useState(key = null, initialState) {
-    if (!this.state[key]) {
-      this.state[key] = initialState;
-    }
-    let updatedValue = () => this.state[key];
-    const getValue = updatedValue()
-    const set = (newValue, hook) => { 
-      this.state[key] = newValue;
-      this.hydrate(hook);
-    };
-    this[`set${key}`] = set;
-    this[`get${key}`] = getValue;
-    return [getValue, set];
+ * useState hook.
+ *
+ * @template T
+ * @param {string} key - The key for the state property.
+ * @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;
   }
 
+  /**
+   * Get the current state value.
+   *
+   * @returns {T} The current state value.
+   */
+  let updatedValue = () => this.state[key];
+
+  const getValue = updatedValue();
+
+  /**
+   * Set a new value for the state.
+   *
+   * @param {T} newValue - The new value to set.
+   * @param {Function} hook - The hook to hydrate after setting the value.
+   */
+  const set = (newValue, hook) => {
+    this.state[key] = newValue;
+    this.hydrate(hook);
+  };
+
+ 
+
+  return  [this.state[key], set];
+}
+
+  
+
   useRef(key = null, initialState) {
     if (!this.state[key]) {
       this.state[key] = initialState;
@@ -681,22 +676,41 @@ export const require = async (path, noresolve = false) => {
 
 
 window.require = require;
-
 /**
- * @method useState - type
- * @param {*} initialState
- * @returns  {Array} [value, set]
- * @description Allows you to use state to dynamically update your component
+ *  useState hook.
+ *
+ * @param {string} key - The key for the state property.
+ * @param {*} initialState - The initial state value.
+ * @returns {[*]} - A tuple with the current state value and a setter function.
  */
-export const useState = (initialState) => {
-  let key = ''
-  let value = initialState;
-  if (key && !states[key]) {
-    this.states[key] = initialState;
+export const useState = (key, initialState) => {
+  if (!states[key]) {
+    states[key] = initialState;
   }
-  return [value, (newValue) => {}];
+
+  /**
+   * Get the current state value.
+   *
+   * @returns {*} The current state value.
+   */
+  let updatedValue = () => states[key];
+
+  /**
+   * Set a new value for the state.
+   *
+   * @param {*} newValue - The new value to set.
+   * @param {Function} hook - The hook to hydrate after setting the value.
+   */
+  const set = (newValue, hook) => {
+    states[key] = newValue;
+    this.hydrate(hook);
+  };
+
+  return [states[key], set];
 };
 
+ 
+
 /**
  * @method useReducer
  * @param {*} initialState 
@@ -717,19 +731,27 @@ export const constant = (value) => {
   }
   return constants[key];
 };
-/**
- * @method useRef
- * @description  Allows you to use a reference to a DOM element
- * @param {*} initialState 
- * @returns 
- */
 
+ /**
+ *  useRef hook.
+ *
+ * @param {*} initialState - The initial state value for the ref.
+ * @returns {{ current: *, bind: string }} - An object containing the current value and a bind string.
+ */
 export const useRef = (initialState) => {
   return {
+    /**
+     * @description The current value of the ref.
+     
+     */
     current: initialState,
+    /**
+     * @description A unique string that can be used to bind the ref to an element.
+     */
     bind: '',
   };
 };
+
 export default {
   Component,
   require,

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-22",
+  "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

@@ -45,7 +45,6 @@ let mounts = [];
 export const strictMount = (key, callback) => {
   let timer = setInterval(() => {
     if (document.querySelector('[key="' + key + '"]')) {
-      console.log('mounted')
       clearInterval(timer);
       callback();
     }
@@ -167,7 +166,7 @@ export class Component {
     this.checkIFMounted();
     this.memoizes = []
     
-    
+    this.vdom =  []
     
     this.children = []
    
@@ -249,19 +248,30 @@ export class Component {
       throw new Error('new components must have a key')
     } 
     let comp = new component(props);
-    if(this.components[props.key]){
-      return this.components[props.key]
-    }
+    
     comp['props'] = props;
     comp.children = children; 
     comp.props.children = children.join('')
     comp.parentNode  = this;
+    comp.request = this.request;
+    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')
@@ -274,7 +284,7 @@ export class Component {
     }
  
     let comp = this.components[component.key];
-    
+    comp.props = component.props; 
     let h = comp.render() 
     
     if(h && h.split('>,').length > 1){
@@ -408,7 +418,7 @@ export class Component {
    */
   bind(funcData,jsx,ref, paramNames, ...params) {
    
-   
+    
     const name = `func_${crypto ? crypto.getRandomValues(new Uint32Array(1))[0] : Math.random()}`;
 
     var dynamicFunction = async (...params) => {
@@ -422,29 +432,22 @@ export class Component {
    
       paramNames = paramNames.replace(/,,/g, ',');
     let newparamnames = paramNames.replaceAll(',,', ',')
-     params.forEach((param, index) => {
-       if(param && Object.keys(param).includes('detail')){ 
-         param = param['detail']['target']['event']
-         params[index] = param
-       }
-     });
-      // Remove trailing commas
-      paramNames.endsWith(',') ? paramNames = paramNames.slice(0, -1) : null;
-      console.log(paramNames)
-
-      params.forEach((param, index) => {
-        paramObject[newparamnames.split(',')[index]] = param;
-      });
+      
+
+      for(var i in params){
+        paramObject[newparamnames.split(',')[i]] = params[i]
+      }
+       
+    
       
       paramNames = paramNames.replace(',,', ',');
       let func = new Function(`${paramNames}`, `
         return (async (${paramNames}) => {
-           ${funcData}
+           ${funcData}  
         })(${Object.keys(paramObject).join(',')})
-      `);
-    
-      // Bind and execute the function with the provided parameters
-      await func.bind(this)(...Object.values(paramObject));
+      `); 
+       await func.bind(this)(...Object.values(paramObject));
+      
     };
      
 
@@ -452,7 +455,7 @@ export class Component {
     if (!this.functionMap.has(name)) {
       document.addEventListener(`call_${name}`, (e) => {
         
-        dynamicFunction(params);
+        dynamicFunction(params)
         this.functionMap.set(e.detail.name, {
           lastUsed: Date.now(),
         });
@@ -472,17 +475,20 @@ export class Component {
     };
 
     // Return a valid inline js function call
-    return jsx ? dynamicFunction : `
+    function jsxCall(){
+      document.dispatchEvent(
+        new CustomEvent(`call_${name}`, {
+          detail: { name: `call_${name}` },
+        })
+      );
+    }
+    return jsx ? jsxCall: `
     ((event) => { 
       event.target.setAttribute('data-ref', '${ref}');
       let reference = event.target.getAttribute('data-ref');
       event.target.eventData = event;
-       
-      let domquery = queryRef(reference);
-       
-      domquery.eventData = event;
-      domquery.eventData.target = domquery;
-      call('${name}', {event:domquery.eventData}, '${paramNames}')
+      event.target.data = event 
+      call('${name}', {event:event.target.data}, '${paramNames}')
     })(event)
     `;
   }
@@ -547,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;
   }
 
   /**
@@ -557,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();
 
@@ -568,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,12 +226,13 @@ function Compiler(func) {
             
             let paramString = params ? params.split(' ').map(param => param + ',').join('') : "";
  
-            let newatribute =  `${attributeName}="\${this.bind(\`${newvalue}\`, ${isJSXComponent ? true : false}, '${ref}', "${paramString}", ${params || null})}"`
+            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({
@@ -261,13 +262,13 @@ function Compiler(func) {
           otherdata["jsx"] = isJSXComponent;
           otherdata["ref"] = ref; 
           // since js is all in one line split it
-          newvalue = newvalue.split('\n').map(line => line.trim() ? line.trim() + ';' : line).join('\n');
-          // param1, param2, param3
-          let length = params ? params.split(' ').length : 0;
+          newvalue = newvalue.split('\n').map(line => line.trim() ? line.trim() + ';' : line).join('\n'); 
           let paramString = params ? params.split(' ').map(param => param + ',').join('') : "";
-          let newattribute = `${attributeName}="\${this.bind(\`${newvalue}\`, ${isJSXComponent ? true : false}, '${ref}', "${paramString}", ${params || null})}"`
+          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);
         }
       }
     }
@@ -324,6 +325,7 @@ function Compiler(func) {
       const { element, attributes } = attribute;
       if (Object.keys(attributes).length === 0) return;
 
+       
       newAttributes.push(attribute);
       for (let key in attributes) {
 
@@ -333,6 +335,7 @@ function Compiler(func) {
           if (value && value.includes("={")) {
             value = value.replace("=", "");
             value == "undefined" ? (value = '"') : (value = value);
+            console.log(value)
             key == 'style' ? value = `{this.parseStyle({${value.split('{{')[1].split('}}')[0]}})}` : null
 
              
@@ -347,9 +350,7 @@ function Compiler(func) {
 
           }
         } else if (value && value.new) {
-          let newvalue = value.new + ",";
-          let old = value.old;
-          string = string.replace(old, newvalue);
+          string = string.replace(value.old, value.new);
         }
       }
     });
@@ -545,11 +546,13 @@ function Compiler(func) {
       
  
 
-  
-      props = props
-      .replaceAll("=", ":")
+      /**
+       * @prop {string} props
+       * @description replace any given possible value in props and parse the string to a valid JSON object
+       */
+      props = props 
       .replaceAll('"', "'")
-      //fix key:'value' to key:'value', only if value ="value"
+     
       
       .replaceAll(",,", ',')
       .replaceAll("className", "class")
@@ -558,14 +561,27 @@ function Compiler(func) {
       .replaceAll("}'", "")
       .split("$:")
       .join("") 
-      .replace('/', '')
-      // remove trailing ,
+      // replace / with '' at the end of the string
+      .replace(/\/\s*$/, "")
+     
       .replace(/,\s*$/, "")
-      props = props.replace(/:('[^']*'|"[^"]*")/g, ':$1,');
+      .replaceAll('="', ':"')
+      .replaceAll("='", ":'")
+      .replaceAll('=`', ':`')
+      .replaceAll(`={\``, ':`')
+      .replaceAll('`}', '`')
+      .replaceAll(",,", ',')
+      
+      .replaceAll(/=([A-z])/g, ":$1")
+      props = props.replace(/:('[^']*'|"[^"]*")/g, ':$1,');  
+      // ANY VALUE NUMBER BOOLEAN OR STRING
+      props = props.replace(/=(\d+)/g, ':$1,');
       props = props.replaceAll(',,', ',')
      
  
-     
+     /**
+      * @memoize - memoize a component to be remembered on each render and replace the old jsx
+      */
  
       let replace = "";
       replace = isChild