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

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,13 +260,16 @@ export class Component {
     if(!props.key){
       throw new Error('new components must have a key')
     } 
-    let comp = new component();
-     
+    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] 
@@ -202,6 +286,7 @@ export class Component {
     }
  
     let comp = this.components[component.key];
+    
     let h = comp.render() 
     
     if(h && h.split('>,').length > 1){
@@ -227,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.
@@ -266,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() {
@@ -286,24 +418,47 @@ export class Component {
    * @param {string} ref - The reference.
    * @returns {string} - A valid inline JS function call.
    */
-  bind(funcData,jsx,ref, params) {
+  bind(funcData,jsx,ref, paramNames, ...params) {
+   
    
-    console.log(jsx)
     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(),
         });
@@ -325,13 +480,15 @@ export class Component {
     // Return a valid inline js function call
     return jsx ? dynamicFunction : `
     ((event) => { 
-      event.target.setAttribute('data-ref', '${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}, '${params}')
+       
+      domquery.eventData = event;
+      domquery.eventData.target = domquery;
+      call('${name}', {event:domquery.eventData}, '${paramNames}')
     })(event)
     `;
   }
@@ -400,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];
   }
 
@@ -417,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
     }
   }
 
@@ -443,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);
@@ -521,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;
@@ -528,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;
 
@@ -539,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

@@ -39,8 +39,7 @@ function Compiler(func) {
         )
       ) {
         return;
-      }
-      let code = string;
+      } 
 
       let name = func.split(" ")[1].split("(")[0].trim();
 
@@ -159,7 +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)
@@ -188,7 +187,7 @@ function Compiler(func) {
                 newvalue = newvalue.replace(
                   hasParams ? `${name}(${params})` : name,
                   `this.callFunction(\${${replacement}}, ${isJSXComponent ? true : false
-                  }, event,${params || null})`
+                  }, event, \${JSON.stringify(${params || null})})`
                 );
               }
             }
@@ -215,14 +214,19 @@ 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');
             
+            // turn params into param1, param2, param3
 
-            let newatribute =  `${attributeName}="\${this.bind(\`${newvalue}\`, ${isJSXComponent ? true : false}, '${ref}', ${params || null})}"`
+            
+            let paramString = params ? params.split(' ').map(param => param + ',').join('') : "";
+ 
+            let newatribute =  `${attributeName}="\${this.bind(\`${newvalue}\`, ${isJSXComponent ? true : false}, '${ref}', "${paramString}", ${params || null})}"`
 
             
             attribute[attributeName] = {
@@ -258,7 +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 ? true : false}, '${ref}', ${params || null})}"`
+          // 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);
         }
@@ -295,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++) {
@@ -303,7 +311,7 @@ function Compiler(func) {
         continue;
       }
       contents += line + "\n";
-    }
+    } 
 
     // Remove trailing ']'
     contents = contents.trim().replace(/\]$/, "");
@@ -321,19 +329,19 @@ 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}",`;
-            string = string.replaceAll(oldvalue, value);
+            string = string.replace(oldvalue, value);
 
-          } else if (value && value.includes("`")) {
+          } else if (value && value.includes("={`")) {
             value = value.replace("=", "");
-
+ 
             value = `"\$${value}",`;
             string = string.replace(oldvalue, value);
 
@@ -405,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) => {
@@ -429,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);
       }
@@ -475,6 +492,12 @@ function Compiler(func) {
     return array;
   };
 
+  // replaceall comments ${/* */} with ''
+  string = string.replaceAll(/\$\{\/\*.*\*\/\}/gs, "");
+
+  string = string.replaceAll('../src', './src')
+ 
+
   // capture <Component />, <Component></Component>, and <Component>content</Component>
 
   // Example usage
@@ -495,7 +518,7 @@ function Compiler(func) {
 
       let name = component.split("<")[1].split(">")[0].split(" ")[0].replace("/", "");
       let props = component.split(`<${name}`)[1].split(">")[0].trim() 
-      console.log(props)
+      
      
       let savedname = name;
       let children = props
@@ -551,6 +574,7 @@ function Compiler(func) {
       // remove trailing ,
       .replace(/,\s*$/, "")
       props = props.replace(/:('[^']*'|"[^"]*")/g, ':$1,');
+      props = props.replaceAll(',,', ',')
      
  
      
@@ -724,9 +748,7 @@ async function Build() {
     });
     
   }
-
  
-  console.log(`Compilation completed`)
   globalThis.isBuilding = false
 }
 import { watch } from "fs";