vaderjs 1.3.3-alpha-41 → 1.3.3-alpha-43

package/runtime/vader.js

@@ -1,152 +1,29 @@
-
-window.params = {};
 window.Vader = {
   version: "1.3.3", 
 };
-
+window.componentRegistry = {};
 let errors = {
   "SyntaxError: Unexpected token '<'": "You forgot to enclose tags in a fragment <></>",
-}
+} 
  
-const path = {
-  basename: (path) => {
-    return path.split("/").pop();
-  },
-
-}
-
-window.queryRef = (ref) => {
-  return document.querySelector(`[data-ref="${ref}"]`)
-}
-window.reinvoke = (eventtype, element) => {
-  const eventListener = (e) => {
-    return e
-  };
-
-  // Check if the event listener has not been added before adding it
-  if (!element._eventListenerAdded) {
-    element.addEventListener(eventtype, eventListener);
-
-    // Set the flag to indicate that the event listener has been added
-    element._eventListenerAdded = true;
-
-    // Trigger the event without overwriting existing data or listeners
-    element.dispatchEvent(new Event(eventtype));
-  }
-};
-
-
-
-
-let invokes = []
-let hasran = [];
-let states = {};
 let mounts = [];
+/**
+ * @method strictMount
+ * @description  This method allows you to await until the component is mounted before running a callback
+ * @param {*} key 
+ * @param {*} callback 
+ */
 export const strictMount = (key, callback) => {
   let timer = setInterval(() => {
-    if (document.querySelector('[key="' + key + '"]')) {
+    if (mounts.find((m) => m.key === key)) {
       clearInterval(timer);
       callback();
     }
   }, 120);
 };
-
-window.delegate = (event) => {
-  return event.detail.target
-}
-
-let components = {};
  
-let style = document.createElement("style");
- document.head.appendChild(style);
-
-const parseStyles = async (styles, className = '') => {
-    let css = await fetch(styles).then((res) => res.text());
-    let classes = css.split("}");
-    let parsedClasses = {};
-    classes.forEach((cls) => {
-     
-      let name = cls.split(".")[1];
-      let value = cls.split("{")[1] 
-      let keys = value.split(";");
-      let newKeys = [];
-      keys.forEach((key) => {
-        if (key.includes(":")) {
-          let newKey = key.split(":")[0].trim();
-          let newValue = key.split(":")[1].trim();
-          newKeys.push(`${newKey}: "${newValue}"`);
-        }
-      });
-      value = `{${newKeys.join(",")}}`;
-     
-      
-      parsedClasses[name] =  JSON.stringify(value);
-    });
-    return parsedClasses;
-};
-
-
-export const stylis = {
-  /**
-   * @method create 
-   * @param {*} styles 
-   * @returns  {Object} classes
-   * @description  This method allows you to create css classes from an object
-   */
-  create: async (/**@type {string} */ styles) => {
-     
-    return  await parseStyles(styles);
-  },
-};
-
-/**
- * @method mem
- * @param {Component} component
- * @returns  {Component} Stateless Component
- * @description  This method allows you to memoize a component - this means it will be intialized only once and can be reused multiple times baased on a static key
- */
-export const mem = (/**@type {Component}**/ component) => {
-  // ensure component is instance of Component
-  switch (true) {
-    case !(component instanceof Component):
-      throw new Error("component must be an instance of Component");
-    case !component.key:
-      throw new Error("component must have a static key");
-    // check if key was randomly generated
-  } 
-  let key = component.key;
-  if (!components[key]) {
-    components[key] = component;
-  }
-
-  return  components[key];
-};
-
-/**
- * @method invoke
- * @description  This method allows you to invoke a function from its id
- * @param {*} name
- * @param {*} params
- * @returns
- * @example
- * invoke(this.functions['test'], 'hello') // this will invoke the function test with the params hello
- */
  
-let functions = {};
  
-export const invoke = (func, params) => {
-   let name = func.name;
-  
-   window[name] = function (params) {
-      return func(params);
-   }
-   window[name] =  window[name].bind(this);
-   
-    
-   return `${name}(${params})`;
-   
-};
-
 /**
  * Represents a component in the Vader framework.
  */
@@ -158,20 +35,10 @@ export class Component {
     this.state = {};
     this.key = null;
     this.components = {};
-    this.mounted = false; 
-    this.currenthtml = null;
-    window.listeners = [];
-    this.functionMap = new Map();
-    this.freeMemoryFromFunctions();
+    this.mounted = false;  
     this.checkIFMounted();
     this.memoizes = []
-    /**
-     * @type {boolean}
-     * @description Indicates if the component is a child component
-     */
-    this.isChild = false;
-    this.vdom =  []
-    
+    this.functions = []   
     this.children = []
    
      
@@ -285,23 +152,21 @@ export class Component {
     comp.parentNode  = this;
     comp.request = this.request;
     comp.response = this.response;
-    comp.isChild = true;
-    delete comp.router 
     comp.key = props.key || null;
      
     if(!this.components[props.key]){
-      states[props.key] =  {}
-    }
-    this.components[props.key] = comp
+      this.components[props.key] = comp;
+    } 
     this.children.push(comp)
     return this.components[props.key] 
   }
   reset(){
+    console.log('reset')
     Object.keys(this.components).forEach((key) => {
-      states[key] =  {}
+       this.components[key].onUnmount() 
+        delete this.components[key]
     })
-    states[this.key] =  {}
-    this.components = {}
+    this.state = {} 
     this.children = []
   }
   memoize(/**@type {Component}**/component){  
@@ -316,7 +181,11 @@ export class Component {
     }
  
     let comp = this.components[component.key];
-    comp.props = component.props; 
+    comp.bindMount();
+    comp.parentNode = this;
+    comp.props = component.props;  
+    comp.request = this.request;
+    comp.response = this.response;
     let h = comp.render() 
     
     if(h && h.split('>,').length > 1){
@@ -427,19 +296,7 @@ export class Component {
     return eval(obj);
   }
 
-  /**
-   * Frees memory from functions that have not been used for a certain period of time.c
-   * @private
-   */
-  freeMemoryFromFunctions() {
-    setInterval(() => {
-      for (var [key, value] in this.functionMap) {
-        if (Date.now() - value.lastUsed > 1000) {
-          this.functionMap.delete(key);
-        }
-      }
-    }, 1000);
-  }
+  
 
   /**
    * Binds a function to the component.
@@ -448,134 +305,58 @@ export class Component {
    * @param {string} ref - The reference.
    * @returns {string} - A valid inline JS function call.
    */
-  bind(funcData,jsx,ref, paramNames, ...params) {
+  bind(funcTion,isTerny, jsx,ref, paramNames, ...params) {
+     ref = ref + this.key;
+  
+     let paramObject = {};
    
-    
-    const name = `func_${crypto ? crypto.getRandomValues(new Uint32Array(1))[0] : Math.random()}`;
-
-    var dynamicFunction = async (...params) => {
-      
-      // Replace double commas with a single comma
+  
+     paramNames = paramNames.replace(/,,/g, ',');
+     let newparamnames = paramNames.replaceAll(',,', ',')
       
-    
-      // Turn params into a destructured object
-      let paramObject = {};
-      params = params[0] 
+     for(var i in params){
+        let param = params[i]
+        let paramname = newparamnames.split(',')[i]
+        paramObject[paramname] = param 
+     }
+ 
    
-      paramNames = paramNames.replace(/,,/g, ',');
-    let newparamnames = paramNames.replaceAll(',,', ',')
-      
-
-      for(var i in params){
-        paramObject[newparamnames.split(',')[i]] = params[i]
-      }
-       
-    
-      
+     
       paramNames = paramNames.replace(',,', ',');
       let func = new Function(`${paramNames}`, `
-        return (async (${paramNames}) => {
-           ${funcData}  
-        })(${Object.keys(paramObject).join(',')})
-      `); 
-       await func.bind(this)(...Object.values(paramObject));
-      
-    };
+       return (async (${paramNames}) => { 
+          ${funcTion.toString()}
+       })(${Object.keys(paramObject).join(',')}) 
+     `); 
+       func   = func.bind(this)
+    
+       if(!this.functions.find((f) => f.ref === ref)){
+         document.addEventListener(`$dispatch_#id=${ref}`, (e) => {
+            let { name,   event } = e.detail;
+            if (name === ref) { 
+              let params = this.functions.find((f) => f.ref === ref).params 
+               Object.keys(params).forEach((key) => {
+                if(params[key] instanceof CustomEvent){
+                  delete params[key]
+                }
+                params[key] === undefined ? delete params[key] : params[key]
+               })  
+               isTerny ? funcTion(event, ...Object.values(params)) : func(...Object.values(params))
+            }
+         });
+         
+      }
      
-
-    dynamicFunction = dynamicFunction.bind(this);
-    if (!this.functionMap.has(name)) {
-      document.addEventListener(`call_${name}`, (e) => {
-        
-        dynamicFunction(params)
-        this.functionMap.set(e.detail.name, {
-          lastUsed: Date.now(),
-        });
-      });
-    }
-
-    this.functionMap.set(name, {
-      lastUsed: Date.now(),
-    });
-
-    window.call = (name, eventdata, params) => {  
-      document.dispatchEvent(
-        new CustomEvent(`call_${name}`, {
-          detail: { name: `call_${name}`, target: eventdata },
-        })
-      );
-    };
-
-    // Return a valid inline js function call
-    function jsxCall(){
-      document.dispatchEvent(
-        new CustomEvent(`call_${name}`, {
-          detail: { name: `call_${name}` },
-        })
-      );
-    }
-    return jsx ? jsxCall: `
-    ((event) => { 
-      event.target.setAttribute('data-ref', '${ref}');
-      let reference = event.target.getAttribute('data-ref');
-      event.target.eventData = event;
-      event.target.data = event 
-      call('${name}', {event:event.target.data}, '${paramNames}')
-    })(event)
-    `;
-  }
-
-  /**
-   * Calls a function with the specified parameters. and dispatches an event.
-   * @param {string} func - The function name.
-   * @param {...*} params - The function parameters.
-   */
-  callFunction(func,  isInlineJsx, ...params) {
-    if(!isInlineJsx && params[0] && params[0].detail){
-      let el = params[0].detail.target.event.target 
-      params[0].data =   el.value; 
-      params[0] = params[0].detail.target.event
-    } 
-    func = func.replace(/'/g, '');
-     document.dispatchEvent(new CustomEvent(func, { detail: { name: func, params: params } }));
-  }
-
-  /**
-   * Uses a function with the specified parameters.
-   * @param {Function} func - The function to use.
-   * @param {string} params - The function parameters.
-   * @param {boolean} [isInlineJsx=false] - Indicates if the function is an inline JSX.
-   * @returns {string} - The function call.
-   */
-  useFunction(func, params, isInlineJsx = false) {
-    const sanitizedFuncName = func.name.trim().replace(/\s+/g, '_');
-
-    if (!invokes.includes(`'${sanitizedFuncName}'${this.key}`)) {
-      invokes.push(`'${sanitizedFuncName}'${this.key}`); 
-      document.addEventListener(`call_${sanitizedFuncName}_${this.key}`, (e) => { 
-        let { name, params } = e.detail;
-        if (name === `call_${sanitizedFuncName}_${this.key}`) {
-          let isarray = Array.isArray(params);
-
-          func(...(isarray ? params : [params]));
-        }
-      });
-
-      func = func.bind(this);
-    }
-
-    try {
-      params = JSON.parse(params);
-    } catch (error) {
-      // Handle JSON parsing error if needed
-    }
-
-    const returnString = isInlineJsx
-      ? `'call_${sanitizedFuncName}_${this.key}'`
-      : `document.dispatchEvent(new CustomEvent('call_${sanitizedFuncName}_${this.key}', { detail: { name: 'call_${sanitizedFuncName}_${this.key}', params: ${JSON.stringify(params)} } }))`;
-
-    return returnString;
+    window.callFunction = (name, event) => { 
+      document.dispatchEvent(new CustomEvent(`$dispatch_#id=${name}`, { detail: { name: name, params: null, event: event } }));
+    }   
+    !this.functions.find((f) => f.ref === ref) ? this.functions.push({ref: ref, params: paramObject})  :  !isTerny ? this.functions.find((f) => f.ref === ref).params = paramObject : null
+    
+     
+    return jsx ?  funcTion :  `((event)=>{event.target.ev = event; callFunction('${ref}', event.target.ev)})(event)`;
   }
+ 
+  
 
   /**
  * useState hook.
@@ -586,8 +367,8 @@ export class Component {
  * @returns {[() => T, (newValue: T, hook: Function) => void]} - A tuple with getter and setter functions.
  */
  useState(key, initialState) { 
-  if (!states[this.key][key]) {
-    states[this.key][key] = initialState;
+  if (!this.state[key]) {
+    this.state[key] = initialState;
   }
 
   /**
@@ -595,7 +376,7 @@ export class Component {
    *
    * @returns {T} The current state value.
    */
-  let updatedValue = () => states[this.key][key];
+  let updatedValue = () =>  this.state[key];
 
   const getValue = updatedValue();
 
@@ -606,7 +387,7 @@ export class Component {
    * @param {Function} hook - The hook to hydrate after setting the value.
    */
   const set = (newValue, hook) => {
-    states[this.key][key] = newValue;
+    this.state[key] = newValue;
     this.hydrate(hook);
   };
 
@@ -634,14 +415,16 @@ export class Component {
     }
   }
 
-  useReducer(key = null, initialState, func = null) {
+   useReducer(key = null, initialState, func = null) {
     const getValue = () => this.state[key];
+    const value = getValue();
     const set = (newValue) => {
-       
-      this.hydrate();
+      const nextState = func ? func(this.state[key], newValue) : newValue;
+      this.state[key] = nextState;
     };
-    return [getValue, set];
+    return [value, set];
   }
+  
 
   /**
    * Placeholder for content to be rendered.
@@ -654,14 +437,24 @@ export class Component {
    * @private
    */
   checkIFMounted() {
-    if (this.mounted || !this.key) return;
-    let timer = setInterval(() => {
-      if (document.querySelector('[key="' + this.key + '"]')) {
-        clearInterval(timer);
-        this.mounted = true;
-        this.onMount();
-      }
-    }, 120);
+    let observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        
+        if (mutation.target.querySelector(`[key="${this.key}"]`) && !this.mounted) {
+          this.onMount(); 
+          this.mounted = true;   
+        }
+       
+        if(Array.from(mutation.removedNodes).find((node) => node.attributes && node.attributes.key && node.attributes.key.value === this.key)){
+          this.onUnmount();
+          this.reset();  
+        }
+      })
+    })
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+    });
   }
 
   /**
@@ -669,69 +462,15 @@ export class Component {
    * @method onMount
    */
   onMount() {}
+  /**
+   * Method that is called when the component is unmounted.
+   * @method onUnmount
+   */
+  onUnmount() {}
 }
 
-
-
-
-
-let cache = {};
-/**
- * @method require
- * @description  Import  CommonJS modules like Node.js for the browser
- * @param {string} path
- * @param {Boolean} noresolve - used to tell if the path should be automatically handled or manually handled - this is false by default
- * @returns
- */
-export const require = async (path, options) => {
-   
-  if (cache[path]) {
-    return cache[path];
-  }
-  let file = ''
-  try {
-    file = await fetch(path).then((res) =>  options && options.type === 'json' ? res.json() : res.text());
-  
-  } catch (error) {
-     console.error(error)
-  }
-
-  
-
-  let filetype = path.split(".").pop();
-  filetype !== "json"  ? file = file + `\n//# sourceURL=${path}\n` : null;
-  switch (true) {
-    case filetype === "js":
-      let exports = file.match(/module.exports\s*=\s*{.*}/gs) || file.match(/exports\s*=\s*{.*}/gs);
-      exports = exports ? exports[0] : null;
-
-      if (exports) {
-        let keys = exports.split("{")[1].split("}")[0].split(",");
-        let returnstring = "";
-        keys.forEach((key) => {
-          key = key.trim();
-          returnstring += `${key},`;
-        });
-        returnstring = `return {${returnstring}}`;
-        file = file += returnstring;
-        file = file.replaceAll(exports, "");
-      }
-      
-      cache[path] = new Function(`return (async () => { ${file} })()`)();
-      return cache[path]
-    case filetype === "json": 
-      cache[path] = file
-      return cache[path]
-
-    case filetype === "jsx": 
-    cache[path] = new Function(`return (async () => { ${file} })()`)();
-    return  cache[path]
-       
-  } 
-};
-
-
-window.require = require;
+ 
+ 
 /**
  *  useState hook.
  *
@@ -776,17 +515,7 @@ export const useState = (key, initialState) => {
 export const useReducer = (/**@type {*}**/initialState, /**@type {function}**/reducer) => {
   return [initialState, (newValue) => {}];
 };
-
-const constants = {};
-let constantCounter = 0;
-
-export const constant = (value) => {
-  const key = `constant_${constantCounter++}`;
-  if (!constants[key]) {
-    constants[key] = value;
-  }
-  return constants[key];
-};
+ 
 
  /**
  *  useRef hook.
@@ -810,14 +539,9 @@ export const useRef = (initialState) => {
 };
 
 export default {
-  Component,
-  require,
-  invoke,
-  mem,
-  constant,
+  Component,  
   useRef,
   useReducer,
   useState,
-  strictMount,
-  stylis,
+  strictMount, 
 }