vaderjs 1.3.3-alpha-18 → 1.3.3-alpha-20

package/README.md

@@ -94,9 +94,10 @@ return {default:Home}
  
 
 ### State Management
+Vaderjs uses partial hydration which is much better than react vdom,  simply pass the ref key to state and only that element will update - no vdom required!!
 
 ```jsx
-let {Component, useState} = await import('vaderjs/client') 
+let {Component, useState, useRef} = await import('vaderjs/client') 
 
 class MyApp extends Component{
   contructor(){
@@ -106,12 +107,16 @@ class MyApp extends Component{
   
   render(){
     let [count, setCount] = useState(0)
-    function increment(){
-        setCount(count()+ 1)
-    }
+    let ref = useRef('')
+   
     return  <>
-     <p>Count is ${count}</p>
-     <button onclick={()=>increment()}>Increment</button>
+     <p ref={ref.bind}>Count is ${count}</p>
+     ${/**
+       pass anything used from the toplevel render to the lowerlevel function params to be able to invoke!
+      **/}
+     <button onclick={(setCount, count, ref)=>{
+      setCount(count + 1, ref.bind)
+     }}>Increment</button>
     </>
     
   }
@@ -124,6 +129,7 @@ return {default:MyApp}
 ### Function Binding
 
 Vaderjs allows you to bind functions directly to html elements just like react
+there are two ways - top level invokes like below
 
 ```javascript
 // vader uses params[0] as the event target object and other parameters resolve after
@@ -141,8 +147,18 @@ return <>
 </>
 ```
  
- 
- 
+and lower level invokes - these operate the same just allow you to pass items from top level to lower level: ex - I have a variable named car and i want the button to log it i can pass it as a parameter to allow it to be added to the buttons function scope
+
+```jsx
+let car = {
+  model: 'tesla',
+  price: 'toomiuch'
+}
+return <>
+<button onclick={(car)=>{
+ console.log(car.model)
+}}>Log</button>
+```
 
  
 

package/client/index.js

@@ -1,7 +1,7 @@
 
 window.params = {};
 window.Vader = {
-  version: "1.3.2", 
+  version: "1.3.3", 
 };
 
 let errors = {
@@ -43,16 +43,13 @@ let hasran = [];
 let states = {};
 let mounts = [];
 export const strictMount = (key, callback) => {
-   let interval = setInterval(() => {
-    if(mounts.find(mount => mount.key === key)
-    && !hasran.includes(callback.toString())
-    ){
+  let timer = setInterval(() => {
+    if (document.querySelector('[key="' + key + '"]')) {
+      console.log('mounted')
+      clearInterval(timer);
       callback();
-      clearInterval(interval)
-      
-    hasran.push(callback.toString());
-    } 
-   },0);
+    }
+  }, 120);
 };
 
 window.delegate = (event) => {
@@ -167,9 +164,93 @@ export class Component {
     window.listeners = [];
     this.functionMap = new Map();
     this.freeMemoryFromFunctions();
+    this.checkIFMounted();
     this.memoizes = []
+    
+    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.
+     * @type {Component}
+     */
+    this.parentNode =  {}
+    
+      /**
+       * Request object.
+       */
+      this.request =  {
+        /**
+         * @type {string}
+         * @description The headers for the current route
+         */
+        headers:{},
+        /**
+         * @type {string}
+         * @description The method for the current route
+         */
+        method: "GET",
+        /**
+         * @type {string}
+         * @description params for the given route /:id/:name etc
+         */
+        params: {},
+        /**
+         * @type {string}
+         * @description path: current route path
+         */
+        path: "",
+        /**
+         * @type {string}
+         * @description query: query  object for the current route ?name=hello -> {name: 'hello'}
+         */
+        query: {},
+      },
+      /**
+       * @type {string}
+       * @description The response object for the current route
+       */
+      this.response = {
+        /**
+         * @method json
+         * @description  This method allows you to send json data to the client
+         * @param {*} data 
+         */
+        json: (data) => {},
+        /**
+         * @method send
+         * @description  This method allows you to send text data to the client
+         * @param {*} data 
+         */
+        send: (data) => {},
+        /**
+         * @method redirect
+         * @description  This method allows you to redirect the client to a new route
+         * @param {*} path 
+         */
+        redirect: (path) => {},
+        /**
+         * @method render
+         * @description  render a new component to the client
+         *  @param {*} Component
+         */
+        render: async (Component) => {},
   }
+}
 
   createComponent(/**@type {Component}**/component, props, children) {
      
@@ -179,26 +260,16 @@ export class Component {
     if(!props.key){
       throw new Error('new components must have a key')
     } 
-    let comp = new component();
-    Object.keys(props).forEach((key) => {
-       // some props are this.bind inside of "" so we need to handle that
-       let newFunc = props[key].match(/this.bind\((.*)\)/gs);
-        if (newFunc) {
-          newFunc = newFunc[0].replace(/this.bind\((.*)\)/gs, "$1");
-          newFunc = newFunc.split('`')[1]
-          props[key] = this.bind(newFunc, { jsx: true, params: props[key], ref: props.ref });
-          return
-        }
-
-        
-       
-        props[key] =  props[key].toString().replace('"', '').replace("'", '').replace('${', '').replace('}', '')
-    });
+    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.key = props.key || null;
+     
     this.components[props.key] = comp
     this.children.push(comp)
     return this.components[props.key] 
@@ -215,6 +286,7 @@ export class Component {
     }
  
     let comp = this.components[component.key];
+    
     let h = comp.render() 
     
     if(h && h.split('>,').length > 1){
@@ -240,28 +312,75 @@ export class Component {
    * Hydrates the component by updating the HTML content if it has changed.
    * @private
    */
-  hydrate() {
-    if (this.key) {
- 
-      const el = document.querySelector(`[key="${this.key}"]`);
 
-    
-      if (el) {
-        
- 
-        // Render the new HTML content
-        const newHtml = this.render();
-        // Compare the new HTML with the cached content
-        if (newHtml !== this.currentHtml) {
-          // Update the HTML only if it has changed
-          el.innerHTML = newHtml;
-
-          // Update the cached HTML content
-          this.currentHtml = newHtml;
+ domDifference(oldDom, newDom) {
+    let diff = [];
+  
+    for (let i = 0; i < oldDom.length; i++) {
+      let oldEl = oldDom[i];
+      let newEl = newDom[i];
+  
+      if (oldEl && newEl && !oldEl.isEqualNode(newEl)) {
+        diff.push({
+          type: 'replace',
+          old: oldEl,
+          new: newEl.cloneNode(true),
+        });
+      }
+    }
+  
+    return diff;
+  }
+  
+   updateChangedElements(diff) {
+    diff.forEach((change) => {
+      switch (change.type) {
+        case 'replace':
+          change.old.parentNode.replaceChild(change.new, change.old);
+          break;
+        case 'remove':
+          change.old.remove();
+          break;
+        case 'add':
+          change.old.appendChild(change.new.cloneNode(true));
+          break;
+        default:
+          break;
+      }
+    });
+  }
+  
+   hydrate(hook) {
+    if (this.key) {
+      if (hook) {
+        let newDom = new DOMParser().parseFromString(this.render(), 'text/html').body.firstChild;
+  
+        let oldElements = document.body.querySelectorAll(`[ref="${hook}"]`);
+        let newElements = newDom.querySelectorAll(`[ref="${hook}"]`);
+        let diff = this.domDifference(oldElements, newElements);
+        this.updateChangedElements(diff);
+      } else {
+        const targetElement = document.querySelector(`[key="${this.key}"]`);
+        if (targetElement) {
+          targetElement.innerHTML = this.render();
+        } else {
+          console.error('Target element not found.');
         }
       }
     }
   }
+  
+ 
+  
+  patch(oldElements, newElements) {
+    const diff = this.domDifference(oldElements, newElements);
+  
+    this.updateChangedElements(diff);
+  }
+  
+  
+  
+  
 
   /**
    * Handles an object by parsing it as JSON and evaluating it.
@@ -279,7 +398,7 @@ export class Component {
   }
 
   /**
-   * Frees memory from functions that have not been used for a certain period of time.
+   * Frees memory from functions that have not been used for a certain period of time.c
    * @private
    */
   freeMemoryFromFunctions() {
@@ -299,23 +418,47 @@ export class Component {
    * @param {string} ref - The reference.
    * @returns {string} - A valid inline JS function call.
    */
-  bind(funcData, d) {
+  bind(funcData,jsx,ref, paramNames, ...params) {
+   
    
     const name = `func_${crypto ? crypto.getRandomValues(new Uint32Array(1))[0] : Math.random()}`;
 
-    var dynamicFunction = (params) => {
-      let func = new Function(`return (async () => {
-        ${funcData}
-       })()`);
-      func = func.bind(this);
-      func(params);
+    var dynamicFunction = async (...params) => {
+      
+      // Replace double commas with a single comma
+      
+    
+      // Turn params into a destructured object
+      let paramObject = {};
+      params = params[0] 
+   
+      paramNames = paramNames.replace(/,,/g, ',');
+    let newparamnames = paramNames.replaceAll(',,', ',')
+      // Remove trailing commas
+      paramNames.endsWith(',') ? paramNames = paramNames.slice(0, -1) : null;
+      console.log(paramNames)
+
+      params.forEach((param, index) => {
+        paramObject[newparamnames.split(',')[index]] = param;
+      });
+      
+      paramNames = paramNames.replace(',,', ',');
+      let func = new Function(`${paramNames}`, `
+        return (async (${paramNames}) => {
+           ${funcData}
+        })(${Object.keys(paramObject).join(',')})
+      `);
+    
+      // Bind and execute the function with the provided parameters
+      await func.bind(this)(...Object.values(paramObject));
     };
+     
 
     dynamicFunction = dynamicFunction.bind(this);
     if (!this.functionMap.has(name)) {
       document.addEventListener(`call_${name}`, (e) => {
         
-        dynamicFunction();
+        dynamicFunction(params);
         this.functionMap.set(e.detail.name, {
           lastUsed: Date.now(),
         });
@@ -335,15 +478,17 @@ export class Component {
     };
 
     // Return a valid inline js function call
-    return d.jsx ? dynamicFunction : `
+    return jsx ? dynamicFunction : `
     ((event) => { 
-      event.target.setAttribute('data-ref', '${d.ref}');
+      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.detail.target = domquery;
-      call('${name}', {event:domquery.eventData}, '${d.params}')
+       
+      domquery.eventData = event;
+      domquery.eventData.target = domquery;
+      call('${name}', {event:domquery.eventData}, '${paramNames}')
     })(event)
     `;
   }
@@ -412,11 +557,14 @@ export class Component {
     if (!this.state[key]) {
       this.state[key] = initialState;
     }
-    const getValue = () => this.state[key];
-    const set = (newValue) => { 
+    let updatedValue = () => this.state[key];
+    const getValue = updatedValue()
+    const set = (newValue, hook) => { 
       this.state[key] = newValue;
-      this.hydrate();
+      this.hydrate(hook);
     };
+    this[`set${key}`] = set;
+    this[`get${key}`] = getValue;
     return [getValue, set];
   }
 
@@ -429,9 +577,11 @@ export class Component {
       this.state[key] = newValue;
       this.hydrate();
     };
+   
+    
     return  {
-       bind: key,
-       current: () => document.querySelector(`[ref="${key}"]`) || this.state[key],
+       bind: key + this.key,
+       current:   document.querySelector(`[ref="${key + this.key}"]`) ||  initialState
     }
   }
 
@@ -455,7 +605,7 @@ export class Component {
    * @private
    */
   checkIFMounted() {
-    if (this.mounted) return;
+    if (this.mounted || !this.key) return;
     let timer = setInterval(() => {
       if (document.querySelector('[key="' + this.key + '"]')) {
         clearInterval(timer);
@@ -533,6 +683,7 @@ window.require = require;
  * @description Allows you to use state to dynamically update your component
  */
 export const useState = (initialState) => {
+  let key = ''
   let value = initialState;
   if (key && !states[key]) {
     this.states[key] = initialState;
@@ -540,6 +691,16 @@ export const useState = (initialState) => {
   return [value, (newValue) => {}];
 };
 
+/**
+ * @method useReducer
+ * @param {*} initialState 
+ * @param {*} reducer 
+ * @returns  {Array} [value, set]
+ */
+export const useReducer = (/**@type {*}**/initialState, /**@type {function}**/reducer) => {
+  return [initialState, (newValue) => {}];
+};
+
 const constants = {};
 let constantCounter = 0;
 
@@ -551,12 +712,20 @@ export const constant = (value) => {
   return constants[key];
 };
 
+export const useRef = (initialState) => {
+  return {
+    current: initialState,
+    bind: '',
+  };
+};
 export default {
   Component,
   require,
   invoke,
   mem,
   constant,
+  useRef,
+  useReducer,
   useState,
   strictMount,
   stylis,

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-18",
+  "version": "1.3.3-alpha-20",
   "bin": {
     "vader": "./vader.js"
   },

package/runtime/index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Vaderjs v1.3.3</title>
     <meta name="description" content="Vader.js is a modern web framework for building web applications.">
-    <link rel="shortcut icon" href="https://raw.githubusercontent.com/Postr-Inc/Vader.js/vader1.3.3-beta/logo.png" type="image/x-icon">
+    <link rel="shortcut icon" href="https://raw.githubusercontent.com/Postr-Inc/Vader.js/main/logo.png" type="image/x-icon">
 </head>
 <body>
     <div id="root"></div>

package/runtime/router.js

@@ -198,6 +198,9 @@ class VaderRouter{
             });
           }
         },
+        redirect: (path) => {
+          window.location.hash = path;
+        },
         render: async (/**@type {Component} */ Component, req, res) => {
           
             if(!Component.default || !Component.constructor){

package/runtime/vader.js

@@ -1,7 +1,7 @@
 
 window.params = {};
 window.Vader = {
-  version: "1.3.2", 
+  version: "1.3.3", 
 };
 
 let errors = {
@@ -43,16 +43,13 @@ let hasran = [];
 let states = {};
 let mounts = [];
 export const strictMount = (key, callback) => {
-   let interval = setInterval(() => {
-    if(mounts.find(mount => mount.key === key)
-    && !hasran.includes(callback.toString())
-    ){
+  let timer = setInterval(() => {
+    if (document.querySelector('[key="' + key + '"]')) {
+      console.log('mounted')
+      clearInterval(timer);
       callback();
-      clearInterval(interval)
-      
-    hasran.push(callback.toString());
-    } 
-   },0);
+    }
+  }, 120);
 };
 
 window.delegate = (event) => {
@@ -167,9 +164,93 @@ export class Component {
     window.listeners = [];
     this.functionMap = new Map();
     this.freeMemoryFromFunctions();
+    this.checkIFMounted();
     this.memoizes = []
+    
+    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.
+     * @type {Component}
+     */
+    this.parentNode =  {}
+    
+      /**
+       * Request object.
+       */
+      this.request =  {
+        /**
+         * @type {string}
+         * @description The headers for the current route
+         */
+        headers:{},
+        /**
+         * @type {string}
+         * @description The method for the current route
+         */
+        method: "GET",
+        /**
+         * @type {string}
+         * @description params for the given route /:id/:name etc
+         */
+        params: {},
+        /**
+         * @type {string}
+         * @description path: current route path
+         */
+        path: "",
+        /**
+         * @type {string}
+         * @description query: query  object for the current route ?name=hello -> {name: 'hello'}
+         */
+        query: {},
+      },
+      /**
+       * @type {string}
+       * @description The response object for the current route
+       */
+      this.response = {
+        /**
+         * @method json
+         * @description  This method allows you to send json data to the client
+         * @param {*} data 
+         */
+        json: (data) => {},
+        /**
+         * @method send
+         * @description  This method allows you to send text data to the client
+         * @param {*} data 
+         */
+        send: (data) => {},
+        /**
+         * @method redirect
+         * @description  This method allows you to redirect the client to a new route
+         * @param {*} path 
+         */
+        redirect: (path) => {},
+        /**
+         * @method render
+         * @description  render a new component to the client
+         *  @param {*} Component
+         */
+        render: async (Component) => {},
   }
+}
 
   createComponent(/**@type {Component}**/component, props, children) {
      
@@ -179,26 +260,16 @@ export class Component {
     if(!props.key){
       throw new Error('new components must have a key')
     } 
-    let comp = new component();
-    Object.keys(props).forEach((key) => {
-       // some props are this.bind inside of "" so we need to handle that
-       let newFunc = props[key].match(/this.bind\((.*)\)/gs);
-        if (newFunc) {
-          newFunc = newFunc[0].replace(/this.bind\((.*)\)/gs, "$1");
-          newFunc = newFunc.split('`')[1]
-          props[key] = this.bind(newFunc, { jsx: true, params: props[key], ref: props.ref });
-          return
-        }
-
-        
-       
-        props[key] =  props[key].toString().replace('"', '').replace("'", '').replace('${', '').replace('}', '')
-    });
+    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.key = props.key || null;
+     
     this.components[props.key] = comp
     this.children.push(comp)
     return this.components[props.key] 
@@ -215,6 +286,7 @@ export class Component {
     }
  
     let comp = this.components[component.key];
+    
     let h = comp.render() 
     
     if(h && h.split('>,').length > 1){
@@ -240,28 +312,75 @@ export class Component {
    * Hydrates the component by updating the HTML content if it has changed.
    * @private
    */
-  hydrate() {
-    if (this.key) {
- 
-      const el = document.querySelector(`[key="${this.key}"]`);
 
-    
-      if (el) {
-        
- 
-        // Render the new HTML content
-        const newHtml = this.render();
-        // Compare the new HTML with the cached content
-        if (newHtml !== this.currentHtml) {
-          // Update the HTML only if it has changed
-          el.innerHTML = newHtml;
-
-          // Update the cached HTML content
-          this.currentHtml = newHtml;
+ domDifference(oldDom, newDom) {
+    let diff = [];
+  
+    for (let i = 0; i < oldDom.length; i++) {
+      let oldEl = oldDom[i];
+      let newEl = newDom[i];
+  
+      if (oldEl && newEl && !oldEl.isEqualNode(newEl)) {
+        diff.push({
+          type: 'replace',
+          old: oldEl,
+          new: newEl.cloneNode(true),
+        });
+      }
+    }
+  
+    return diff;
+  }
+  
+   updateChangedElements(diff) {
+    diff.forEach((change) => {
+      switch (change.type) {
+        case 'replace':
+          change.old.parentNode.replaceChild(change.new, change.old);
+          break;
+        case 'remove':
+          change.old.remove();
+          break;
+        case 'add':
+          change.old.appendChild(change.new.cloneNode(true));
+          break;
+        default:
+          break;
+      }
+    });
+  }
+  
+   hydrate(hook) {
+    if (this.key) {
+      if (hook) {
+        let newDom = new DOMParser().parseFromString(this.render(), 'text/html').body.firstChild;
+  
+        let oldElements = document.body.querySelectorAll(`[ref="${hook}"]`);
+        let newElements = newDom.querySelectorAll(`[ref="${hook}"]`);
+        let diff = this.domDifference(oldElements, newElements);
+        this.updateChangedElements(diff);
+      } else {
+        const targetElement = document.querySelector(`[key="${this.key}"]`);
+        if (targetElement) {
+          targetElement.innerHTML = this.render();
+        } else {
+          console.error('Target element not found.');
         }
       }
     }
   }
+  
+ 
+  
+  patch(oldElements, newElements) {
+    const diff = this.domDifference(oldElements, newElements);
+  
+    this.updateChangedElements(diff);
+  }
+  
+  
+  
+  
 
   /**
    * Handles an object by parsing it as JSON and evaluating it.
@@ -279,7 +398,7 @@ export class Component {
   }
 
   /**
-   * Frees memory from functions that have not been used for a certain period of time.
+   * Frees memory from functions that have not been used for a certain period of time.c
    * @private
    */
   freeMemoryFromFunctions() {
@@ -299,23 +418,47 @@ export class Component {
    * @param {string} ref - The reference.
    * @returns {string} - A valid inline JS function call.
    */
-  bind(funcData, d) {
+  bind(funcData,jsx,ref, paramNames, ...params) {
+   
    
     const name = `func_${crypto ? crypto.getRandomValues(new Uint32Array(1))[0] : Math.random()}`;
 
-    var dynamicFunction = (params) => {
-      let func = new Function(`return (async () => {
-        ${funcData}
-       })()`);
-      func = func.bind(this);
-      func(params);
+    var dynamicFunction = async (...params) => {
+      
+      // Replace double commas with a single comma
+      
+    
+      // Turn params into a destructured object
+      let paramObject = {};
+      params = params[0] 
+   
+      paramNames = paramNames.replace(/,,/g, ',');
+    let newparamnames = paramNames.replaceAll(',,', ',')
+      // Remove trailing commas
+      paramNames.endsWith(',') ? paramNames = paramNames.slice(0, -1) : null;
+      console.log(paramNames)
+
+      params.forEach((param, index) => {
+        paramObject[newparamnames.split(',')[index]] = param;
+      });
+      
+      paramNames = paramNames.replace(',,', ',');
+      let func = new Function(`${paramNames}`, `
+        return (async (${paramNames}) => {
+           ${funcData}
+        })(${Object.keys(paramObject).join(',')})
+      `);
+    
+      // Bind and execute the function with the provided parameters
+      await func.bind(this)(...Object.values(paramObject));
     };
+     
 
     dynamicFunction = dynamicFunction.bind(this);
     if (!this.functionMap.has(name)) {
       document.addEventListener(`call_${name}`, (e) => {
         
-        dynamicFunction();
+        dynamicFunction(params);
         this.functionMap.set(e.detail.name, {
           lastUsed: Date.now(),
         });
@@ -335,15 +478,17 @@ export class Component {
     };
 
     // Return a valid inline js function call
-    return d.jsx ? dynamicFunction : `
+    return jsx ? dynamicFunction : `
     ((event) => { 
-      event.target.setAttribute('data-ref', '${d.ref}');
+      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.detail.target = domquery;
-      call('${name}', {event:domquery.eventData}, '${d.params}')
+       
+      domquery.eventData = event;
+      domquery.eventData.target = domquery;
+      call('${name}', {event:domquery.eventData}, '${paramNames}')
     })(event)
     `;
   }
@@ -412,11 +557,14 @@ export class Component {
     if (!this.state[key]) {
       this.state[key] = initialState;
     }
-    const getValue = () => this.state[key];
-    const set = (newValue) => { 
+    let updatedValue = () => this.state[key];
+    const getValue = updatedValue()
+    const set = (newValue, hook) => { 
       this.state[key] = newValue;
-      this.hydrate();
+      this.hydrate(hook);
     };
+    this[`set${key}`] = set;
+    this[`get${key}`] = getValue;
     return [getValue, set];
   }
 
@@ -429,9 +577,11 @@ export class Component {
       this.state[key] = newValue;
       this.hydrate();
     };
+   
+    
     return  {
-       bind: key,
-       current: () => document.querySelector(`[ref="${key}"]`) || this.state[key],
+       bind: key + this.key,
+       current:   document.querySelector(`[ref="${key + this.key}"]`) ||  initialState
     }
   }
 
@@ -455,7 +605,7 @@ export class Component {
    * @private
    */
   checkIFMounted() {
-    if (this.mounted) return;
+    if (this.mounted || !this.key) return;
     let timer = setInterval(() => {
       if (document.querySelector('[key="' + this.key + '"]')) {
         clearInterval(timer);
@@ -533,6 +683,7 @@ window.require = require;
  * @description Allows you to use state to dynamically update your component
  */
 export const useState = (initialState) => {
+  let key = ''
   let value = initialState;
   if (key && !states[key]) {
     this.states[key] = initialState;
@@ -540,6 +691,16 @@ export const useState = (initialState) => {
   return [value, (newValue) => {}];
 };
 
+/**
+ * @method useReducer
+ * @param {*} initialState 
+ * @param {*} reducer 
+ * @returns  {Array} [value, set]
+ */
+export const useReducer = (/**@type {*}**/initialState, /**@type {function}**/reducer) => {
+  return [initialState, (newValue) => {}];
+};
+
 const constants = {};
 let constantCounter = 0;
 
@@ -551,12 +712,20 @@ export const constant = (value) => {
   return constants[key];
 };
 
+export const useRef = (initialState) => {
+  return {
+    current: initialState,
+    bind: '',
+  };
+};
 export default {
   Component,
   require,
   invoke,
   mem,
   constant,
+  useRef,
+  useReducer,
   useState,
   strictMount,
   stylis,

package/vader.js

@@ -25,23 +25,21 @@ function Compiler(func) {
   let savedfuncnames = [];
   let functions = string
     .match(
-      /(?:const|let|var)?\s*([a-zA-Z0-9_-]+)\s*(?:=|function)\s*\(([^)]*)\)|function\s*([a-zA-Z0-9_-]+)\s*\(([^)]*)\)|(?:const|let|var)?\s*([a-zA-Z0-9_-]+)\s*=\s*\(([^)]*)\)/gs
+      /(?:const|let)\s*([a-zA-Z0-9_-]+)\s*=\s*function\s*\(([^)]*)\)|function\s*([a-zA-Z0-9_-]+)\s*\(([^)]*)\)/gs
     )
     ?.map((match) => match.trim());
 
- 
   let functionNames = [];
 
   if (functions) {
     functions.forEach((func) => {
       if (
         !func.match(
-          /(?:const|let|var)?\s*([a-zA-Z0-9_-]+)\s*(?:=|function)\s*\(([^)]*)\)|function\s*([a-zA-Z0-9_-]+)\s*\(([^)]*)\)|(?:const|let|var)?\s*([a-zA-Z0-9_-]+)\s*=\s*\(([^)]*)\)/gs
+          /(?:const|let)\s*([a-zA-Z0-9_-]+)\s*=\s*function\s*\(([^)]*)\)|function\s*([a-zA-Z0-9_-]+)\s*\(([^)]*)\)/gs
         )
       ) {
         return;
-      }
-      let code = string;
+      } 
 
       let name = func.split(" ")[1].split("(")[0].trim();
 
@@ -73,6 +71,7 @@ function Compiler(func) {
   let childs = [];
 
 
+   
   function extractAttributes(code) {
     // Match elements with opening tags
     const elementRegex = /<([a-zA-Z0-9_-]+)([^>]*)>/gs;
@@ -134,12 +133,11 @@ function Compiler(func) {
         if (functionNames.length > 0) {
           functionNames.forEach((name) => {
             string.split("\n").forEach((line) => {
-              if (line.includes(name) && line.includes("function") || line.includes(name) && line.includes("=>")) {
+              if (line.includes(name) && line.includes("function")) {
                 line = line.trim();
                 line = line.replace(/\s+/g, " ");
 
-                let ps =  line.split("(")[1].split(")")[0].trim();
-               
+                let ps = line.split("(").slice(1).join("(").split(")")[0].trim();
 
                 // remove comments
                 ps = ps.match(/\/\*.*\*\//gs)
@@ -160,8 +158,7 @@ function Compiler(func) {
                 let params = hasParams
                   ? line.split("(")[1].split(")")[0].trim()
                   : null;
-                 
-
+ 
                 if (
                   functionparams.length > 0 &&
                   functionparams.find((p) => p.name == name)
@@ -187,11 +184,10 @@ function Compiler(func) {
                   } ${params || null}${isJSXComponent ? "" : ","} true ${isJSXComponent ? "" : ","
                   } '${ref}')`;
 
-                  console.log(replacement)
                 newvalue = newvalue.replace(
-                  line,
+                  hasParams ? `${name}(${params})` : name,
                   `this.callFunction(\${${replacement}}, ${isJSXComponent ? true : false
-                  }, event,${params || null})`
+                  }, event, \${JSON.stringify(${params || null})})`
                 );
               }
             }
@@ -218,14 +214,21 @@ function Compiler(func) {
 
 
             let otherdata = {};
+           
             params ? (otherdata["params"] = params) : null;
             otherdata["jsx"] = isJSXComponent;
             otherdata["ref"] = ref;
  
             newvalue = newvalue.split('\n').map(line => line.trim() ? line.trim() + ';' : line).join('\n');
             
-            let newatribute = `${attributeName}="\${this.bind(\`${newvalue}\`, {jsx: ${isJSXComponent}, ref: '${ref}'})}"`;
+            // turn params into param1, param2, param3
+
+            
+            let paramString = params ? params.split(' ').map(param => param + ',').join('') : "";
  
+            let newatribute =  `${attributeName}="\${this.bind(\`${newvalue}\`, ${isJSXComponent ? true : false}, '${ref}', "${paramString}", ${params || null})}"`
+
+            
             attribute[attributeName] = {
               old: old,
               new: newatribute,
@@ -259,9 +262,10 @@ function Compiler(func) {
           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');
-         
-          let newattribute = `${attributeName}="\${this.bind(\`${newvalue}\` ${isJSXComponent ? "" : ","}${JSON.stringify(otherdata)} )}"`;
-          console.log(newattribute)
+          // param1, param2, param3
+          let length = params ? params.split(' ').length : 0;
+          let paramString = params ? params.split(' ').map(param => param + ',').join('') : "";
+          let newattribute = `${attributeName}="\${this.bind(\`${newvalue}\`, ${isJSXComponent ? true : false}, '${ref}', "${paramString}", ${params || null})}"`
           newattribute = newattribute.replace(/\s+/g, " ")
           string = string.replace(old, newattribute);
         }
@@ -298,6 +302,7 @@ function Compiler(func) {
   let contents = "";
   let updatedContents = "";
   outerReturn.forEach((returnStatement) => {
+    
     let lines = returnStatement.split("\n");
 
     for (let i = 0; i < lines.length; i++) {
@@ -306,7 +311,7 @@ function Compiler(func) {
         continue;
       }
       contents += line + "\n";
-    }
+    } 
 
     // Remove trailing ']'
     contents = contents.trim().replace(/\]$/, "");
@@ -324,24 +329,25 @@ function Compiler(func) {
 
         let value = attributes[key];
         let oldvalue = value;
-        if (value && !value.new) {
-          if (value && value.includes("{")) {
+        if (value && !value.new) { 
+          if (value && value.includes("={")) {
             value = value.replace("=", "");
             value == "undefined" ? (value = '"') : (value = value);
             key == 'style' ? value = `{this.parseStyle({${value.split('{{')[1].split('}}')[0]}})}` : null
 
-            value = `="\$${value}"`;
+             
+            value = `="\$${value}",`;
             string = string.replace(oldvalue, value);
 
-          } else if (value && value.includes("`")) {
+          } else if (value && value.includes("={`")) {
             value = value.replace("=", "");
-
-            value = `"\$${value}"`;
+ 
+            value = `"\$${value}",`;
             string = string.replace(oldvalue, value);
 
           }
         } else if (value && value.new) {
-          let newvalue = value.new;
+          let newvalue = value.new + ",";
           let old = value.old;
           string = string.replace(old, newvalue);
         }
@@ -407,16 +413,15 @@ function Compiler(func) {
         let setKey = line.split("=")[0].split(",")[1].trim().replace("]", "");
 
         key = key.replace("[", "").replace(",", "");
-        let value = line
-          .split("=")[1]
-          .split("useState")[1]
-          .split("(")[1]
-          .split(")")[0]
-          .trim();
-        let newState = `${type} [${key}, ${setKey}] = this.useState('${key}', ${value}) 
-          this.${key} = ${key}
-          this.${setKey} = ${setKey}
+        let value = line.split("=")[1].split("useState(")[1] 
+        let regex = /useState\((.*)\)/gs
+        value = value.match(regex) ? value.match(regex)[0].split("useState(")[1].split(")")[0].trim() : value
+          
+          
+        let newState = `${type} [${key}, ${setKey}] = this.useState('${key}', ${value}
+         
           `;
+       
 
         // get setkey calls and replace with this.setKey
         string.split("\n").forEach((line) => {
@@ -431,18 +436,28 @@ function Compiler(func) {
           }
         });
         string = string.replace(line, newState);
-      } else if (line.includes("useRef")) {
+      } else if (line.includes("useRef") && !line.includes("import")) {
         line = line.trim();
         // let ref = useRef(null)
         let type = line.split(" ")[0];
         let key = line.split("=")[0].split(" ")[1].trim();
-        let value = line
-          .split("=")[1]
-          .split("useRef")[1]
-          .split("(")[1]
-          .split(")")[0]
-          .trim();
-        let newState = `${type} ${key} = this.useRef('${key}', ${value})`;
+        let value = line.split("=")[1].split("useRef(")[1] 
+         
+        let regex = /useState\((.*)\)/gs
+        value = value.match(regex) ? value.match(regex)[0].split("useRef(")[1].split(")")[0].trim() : value
+        let newState = `${type} ${key} = this.useRef('${key}', ${value}`;
+
+        string = string.replace(line, newState);
+      }else if (line.includes("useReducer") && !line.includes("import")){
+        line = line.trim();
+        // let ref = useRef(null)
+        let type = line.split(" ")[0];
+        let key = line.split("=")[0].split(" ")[1].trim();
+        let value = line.split("=")[1].split("useReducer(")[1] 
+         
+        let regex = /useReducer\((.*)\)/gs
+        value = value.match(regex) ? value.match(regex)[0].split("useReducer(")[1].split(")")[0].trim() : value
+        let newState = `${type} ${key} = this.useReducer('${key}', ${value}`;
 
         string = string.replace(line, newState);
       }
@@ -477,7 +492,11 @@ function Compiler(func) {
     return array;
   };
 
-  string = string.replaceAll('vaderjs/client', './vader.js')
+  // replaceall comments ${/* */} with ''
+  string = string.replaceAll(/\$\{\/\*.*\*\/\}/gs, "");
+
+  string = string.replaceAll('../src', './src')
+ 
 
   // capture <Component />, <Component></Component>, and <Component>content</Component>
 
@@ -498,29 +517,9 @@ function Compiler(func) {
       let myChildrens = [];
 
       let name = component.split("<")[1].split(">")[0].split(" ")[0].replace("/", "");
-      let props = component.split(`<${name}`)[1].split(">")[0].trim();
-      function parseProps(attributes) {
-        console.log(attributes)
-        let props = {};
-        if (attributes) {
-          let propsMatch;
-           let regex = /([a-zA-Z0-9_-]+)(\s*=\s*("([^"\\]*(\\.[^"\\]*)*)"|'([^'\\]*(\\.[^'\\]*)*)'|\{(?:[^{}]|(?:\{(?:[^{}]|(?:\{[^{}]*\})*)*\})*)*\}|(?:\([^)]*\)|\{[^}]*\}|()=>\s*(?:\{[^}]*\})?)|\[[^\]]*\]))?/gs
-          while ((propsMatch = regex.exec(attributes)) !== null) {
-            let [, attributeName, attributeValue] = propsMatch;
-            console.log(attributeName, attributeValue)
-            attributeValue = attributeValue.replaceAll('="', '').replace("='", '')
-            if(attributeValue.startsWith("'")){
-              attributeValue = attributeValue.replace("'", '')
-            }
-            props[attributeName] = attributeValue || null;
-          }
-           
-        }
-        
-        return props;
-      }
-  
+      let props = component.split(`<${name}`)[1].split(">")[0].trim() 
       
+     
       let savedname = name;
       let children = props
         ? component
@@ -555,14 +554,36 @@ function Compiler(func) {
           myChildrens.push(child.children);
         }
       });
+      
+ 
+
+  
+      props = props
+      .replaceAll("=", ":")
+      .replaceAll('"', "'")
+      //fix key:'value' to key:'value', only if value ="value"
+      
+      .replaceAll(",,", ',')
+      .replaceAll("className", "class")
+      .replaceAll("classname", "class")
+      .replaceAll("'${", "")
+      .replaceAll("}'", "")
+      .split("$:")
+      .join("") 
+      .replace('/', '')
+      // remove trailing ,
+      .replace(/,\s*$/, "")
+      props = props.replace(/:('[^']*'|"[^"]*")/g, ':$1,');
+      props = props.replaceAll(',,', ',')
+     
+ 
+     
  
-      props = JSON.stringify(parseProps(props));
-       
       let replace = "";
       replace = isChild
-        ? `this.memoize(this.createComponent(${savedname.replaceAll('/', '')}, ${props}  , [${myChildrens.length > 0 ? myChildrens.join(",") : ""
+        ? `this.memoize(this.createComponent(${savedname.replaceAll('/', '')}, ${props}, [${myChildrens.length > 0 ? myChildrens.join(",") : ""
         }])),`
-        : `\${this.memoize(this.createComponent(${savedname.replaceAll('/', '')}, ${props}  , [${myChildrens.length > 0 ? myChildrens.join(",") : ""
+        : `\${this.memoize(this.createComponent(${savedname.replaceAll('/', '')}, {${props}}, [${myChildrens.length > 0 ? myChildrens.join(",") : ""
         }]))}`;
 
       body = body.replace(before, replace);
@@ -573,6 +594,7 @@ function Compiler(func) {
 
 
 
+  string = string.replaceAll('vaderjs/client', './vader.js')
   string = string.replaceAll("<>", "`").replaceAll("</>", "`");
   string = parseComponents(string);
  
@@ -633,10 +655,8 @@ async function Build() {
   
     // Read and compile file content
     let data = await fs.readFileSync(origin, "utf8");
-    data = Compiler(data);
-  
-    // Write compiled content to the 'dist/pages' directory
-    console.log(`Compiling ${fileName} to ${obj.url}`)
+    data = Compiler(data); 
+   
     await writer(process.cwd() + "/dist/pages/" + fileName, data);
   
     // Generate routing logic
@@ -666,12 +686,13 @@ async function Build() {
     absolute: true,
   }); 
   scannedVaderFiles.forEach(async (file) => { 
-    file = file.replace(/\\/g, '/');
-    if(file.includes('index.html') && fs.existsSync(process.cwd() + "/dist/index.html")){
-      return
-    }
-     
+     file = file.replace(/\\/g, '/');
+   
+    
     let name = file.split( '/node_modules/vaderjs/runtime/')[1]
+    if(file.includes('index.html') && fs.existsSync(process.cwd() + "/dist/" + name)){
+        return
+   }
     let data = await reader(file)
     bundleSize += fs.statSync(file).size;
     await writer(process.cwd() + "/dist/" + name, data);
@@ -709,21 +730,25 @@ async function Build() {
   }) 
 
   if (!fs.existsSync(process.cwd() + "/dist/index.html")) {
+     
     scannedFiles.forEach(async (file) => {
       file = file.split(process.cwd() + '/runtime/')[1]
 
       if (file === "app.js") {
         return
       }
+      console.log(`Compiling ${file} to /dist/${file}`)
+      if(file.includes('index.html') && fs.existsSync(process.cwd() + "/runtime/" + file)){
+        console.log(`Compiling ${file} to /dist/${file}`)
+          return
+      }
       bundleSize += fs.statSync(process.cwd() +  "/runtime/" + file).size;
       let data = await reader(process.cwd() + "/runtime/" + file)
       await writer(process.cwd() + "/dist/" + file, data);
     });
     
   }
-
  
-  console.log(`Compilation completed`)
   globalThis.isBuilding = false
 }
 import { watch } from "fs"; 
@@ -747,13 +772,17 @@ Vader.js v1.3.3
           }
         },
       );
-      const watcher2 = watch( process.cwd() + '/src', { recursive: true }, (event, filename) => {
-        if (event == 'change'
-        && !globalThis.isBuilding
-        ) {
-          Build()
-        }
-      });
+      const watcher2 = watch(
+        process.cwd() + '/src',
+        { recursive: true },
+        (event, filename) => {
+          if (event == 'change'
+          && !globalThis.isBuilding
+          ) {
+            Build()
+          }
+        },
+      );
       watcher2.on('error', (err) => console.log(err))
       watcher.on('error', (err) => console.log(err))