vaderjs 1.3.3-alpha-19 → 1.3.3-alpha-21

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,81 @@ export class Component {
     window.listeners = [];
     this.functionMap = new Map();
     this.freeMemoryFromFunctions();
+    this.checkIFMounted();
     this.memoizes = []
+    
+    
+    
     this.children = []
+   
+     
+    /**
+     * 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 +248,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 +274,7 @@ export class Component {
     }
  
     let comp = this.components[component.key];
+    
     let h = comp.render() 
     
     if(h && h.split('>,').length > 1){
@@ -227,28 +300,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 +386,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 +406,53 @@ 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(',,', ',')
+     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;
+      });
+      
+      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 +474,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)
     `;
   }
@@ -389,25 +540,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;
-    }
-    const getValue = () => this.state[key];
-    const set = (newValue) => { 
-      this.state[key] = newValue;
-      this.hydrate();
-    };
-    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;
@@ -417,9 +588,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 +616,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);
@@ -513,19 +686,49 @@ export const require = async (path, noresolve = false) => {
 
 
 window.require = require;
+/**
+ *  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 = (key, initialState) => {
+  if (!states[key]) {
+    states[key] = initialState;
+  }
+
+  /**
+   * 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 useState - type
- * @param {*} initialState
+ * @method useReducer
+ * @param {*} initialState 
+ * @param {*} reducer 
  * @returns  {Array} [value, set]
- * @description Allows you to use state to dynamically update your component
  */
-export const useState = (initialState) => {
-  let value = initialState;
-  if (key && !states[key]) {
-    this.states[key] = initialState;
-  }
-  return [value, (newValue) => {}];
+export const useReducer = (/**@type {*}**/initialState, /**@type {function}**/reducer) => {
+  return [initialState, (newValue) => {}];
 };
 
 const constants = {};
@@ -539,12 +742,34 @@ export const constant = (value) => {
   return constants[key];
 };
 
+ /**
+ *  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,
   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,16 @@ 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);
       }
@@ -475,6 +480,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 +506,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 +562,7 @@ function Compiler(func) {
       // remove trailing ,
       .replace(/,\s*$/, "")
       props = props.replace(/:('[^']*'|"[^"]*")/g, ':$1,');
+      props = props.replaceAll(',,', ',')
      
  
      
@@ -724,9 +736,7 @@ async function Build() {
     });
     
   }
-
  
-  console.log(`Compilation completed`)
   globalThis.isBuilding = false
 }
 import { watch } from "fs"; 
@@ -735,7 +745,9 @@ switch (true) {
   case process.argv.includes('--watch'):
 
     console.log(`
-Vader.js v1.3.3  
+Vader.js v1.3.3
+- Watching for changes in ./pages
+- Watching for changes in ./src
 `)
     Build()