vaderjs 1.3.3-alpha-17 → 1.3.3-alpha-19

package/client/index.js

@@ -1,7 +1,7 @@
 
 window.params = {};
 window.Vader = {
-  version: "1.3.3", 
+  version: "1.3.2", 
 };
 
 let errors = {
@@ -42,12 +42,6 @@ let invokes = []
 let hasran = [];
 let states = {};
 let mounts = [];
-/**
- * @method strictMount
- * @description  This method allows you to call a function only when a component has been mounted
- * @param {*} key 
- * @param {*} callback 
- */
 export const strictMount = (key, callback) => {
    let interval = setInterval(() => {
     if(mounts.find(mount => mount.key === key)
@@ -61,11 +55,54 @@ export const strictMount = (key, callback) => {
    },0);
 };
 
- 
+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
@@ -101,7 +138,18 @@ export const mem = (/**@type {Component}**/ component) => {
  
 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.
@@ -114,37 +162,15 @@ export class Component {
     this.state = {};
     this.key = null;
     this.components = {};
-    this.mounted = false;
-    /**
-     * @private
-     */
-    this.checkIFMounted();
+    this.mounted = false; 
     this.currenthtml = null;
-    /**
-     * @private
-     */
     window.listeners = [];
-    /**
-     * @private 
-     */
     this.functionMap = new Map();
-    /**
-     * @private
-     */
     this.freeMemoryFromFunctions();
-    /**
-     * @private
-     */
     this.memoizes = []
     this.children = []
-    /**
-     * @property {Object} props - The component props.
-     */
-    this.props = {}
   }
-  /**
-   * @private
-   */
+
   createComponent(/**@type {Component}**/component, props, children) {
      
     if (!component) {
@@ -154,7 +180,20 @@ export class Component {
       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('}', '')
+    });
     comp['props'] = props;
     comp.children = children; 
     comp.props.children = children.join('')
@@ -164,9 +203,6 @@ export class Component {
     this.children.push(comp)
     return this.components[props.key] 
   }
-    /**
-   * @private
-   */
   memoize(/**@type {Component}**/component){  
     if(!component.key){
       throw new Error('Component must have a static key')
@@ -187,9 +223,6 @@ export class Component {
 
     return `<div key="${component.key}">${h}</div>`
   }
-    /**
-   * @private
-   */
   parseStyle(styles){ 
     let css = ''
     Object.keys(styles).forEach((key) => { 
@@ -199,9 +232,6 @@ export class Component {
     })
     return css
   }
-  /**
-   * @private
-   */
   bindMount(){
     mounts.push(this) 
   }
@@ -268,15 +298,13 @@ export class Component {
    * @param {string} p - The parameter.
    * @param {string} ref - The reference.
    * @returns {string} - A valid inline JS function call.
-   * @private
    */
   bind(funcData, d) {
    
     const name = `func_${crypto ? crypto.getRandomValues(new Uint32Array(1))[0] : Math.random()}`;
 
     var dynamicFunction = (params) => {
-      let func = new Function(`return (async (${params}) => {
-        console.log('called') 
+      let func = new Function(`return (async () => {
         ${funcData}
        })()`);
       func = func.bind(this);
@@ -324,7 +352,6 @@ export class Component {
    * Calls a function with the specified parameters. and dispatches an event.
    * @param {string} func - The function name.
    * @param {...*} params - The function parameters.
-   * @private
    */
   callFunction(func,  isInlineJsx, ...params) {
     if(!isInlineJsx && params[0] && params[0].detail){
@@ -342,7 +369,6 @@ export class Component {
    * @param {string} params - The function parameters.
    * @param {boolean} [isInlineJsx=false] - Indicates if the function is an inline JSX.
    * @returns {string} - The function call.
-   * @private
    */
   useFunction(func, params, isInlineJsx = false) {
     const sanitizedFuncName = func.name.trim().replace(/\s+/g, '_');
@@ -514,20 +540,6 @@ export const useState = (initialState) => {
   return [value, (newValue) => {}];
 };
 
-export const useRef = (initialState) => {
-    let value = initialState;
-    return {
-        /**
-         * @property {Bind} bind - Bind the current ref key to the element
-         */
-        bind: key,
-        /**
-         * @property {Function} current - Get the current ref value - or the element with the ref key
-         */
-        current: () => document.querySelector(`[ref="${key}"]`) || value,
-    }
-}
-
 const constants = {};
 let constantCounter = 0;
 

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-17",
+  "version": "1.3.3-alpha-19",
   "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.3", 
+  version: "1.3.2", 
 };
 
 let errors = {
@@ -42,12 +42,6 @@ let invokes = []
 let hasran = [];
 let states = {};
 let mounts = [];
-/**
- * @method strictMount
- * @description  This method allows you to call a function only when a component has been mounted
- * @param {*} key 
- * @param {*} callback 
- */
 export const strictMount = (key, callback) => {
    let interval = setInterval(() => {
     if(mounts.find(mount => mount.key === key)
@@ -61,11 +55,54 @@ export const strictMount = (key, callback) => {
    },0);
 };
 
- 
+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
@@ -101,7 +138,18 @@ export const mem = (/**@type {Component}**/ component) => {
  
 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.
@@ -114,37 +162,15 @@ export class Component {
     this.state = {};
     this.key = null;
     this.components = {};
-    this.mounted = false;
-    /**
-     * @private
-     */
-    this.checkIFMounted();
+    this.mounted = false; 
     this.currenthtml = null;
-    /**
-     * @private
-     */
     window.listeners = [];
-    /**
-     * @private 
-     */
     this.functionMap = new Map();
-    /**
-     * @private
-     */
     this.freeMemoryFromFunctions();
-    /**
-     * @private
-     */
     this.memoizes = []
     this.children = []
-    /**
-     * @property {Object} props - The component props.
-     */
-    this.props = {}
   }
-  /**
-   * @private
-   */
+
   createComponent(/**@type {Component}**/component, props, children) {
      
     if (!component) {
@@ -154,7 +180,7 @@ export class Component {
       throw new Error('new components must have a key')
     } 
     let comp = new component();
-    
+     
     comp['props'] = props;
     comp.children = children; 
     comp.props.children = children.join('')
@@ -164,9 +190,6 @@ export class Component {
     this.children.push(comp)
     return this.components[props.key] 
   }
-    /**
-   * @private
-   */
   memoize(/**@type {Component}**/component){  
     if(!component.key){
       throw new Error('Component must have a static key')
@@ -187,9 +210,6 @@ export class Component {
 
     return `<div key="${component.key}">${h}</div>`
   }
-    /**
-   * @private
-   */
   parseStyle(styles){ 
     let css = ''
     Object.keys(styles).forEach((key) => { 
@@ -199,9 +219,6 @@ export class Component {
     })
     return css
   }
-  /**
-   * @private
-   */
   bindMount(){
     mounts.push(this) 
   }
@@ -268,15 +285,14 @@ export class Component {
    * @param {string} p - The parameter.
    * @param {string} ref - The reference.
    * @returns {string} - A valid inline JS function call.
-   * @private
    */
-  bind(funcData, d) {
+  bind(funcData,jsx,ref, 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 (${params}) => {
-        console.log('called') 
+      let func = new Function(`return (async () => {
         ${funcData}
        })()`);
       func = func.bind(this);
@@ -307,15 +323,15 @@ 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}')
+      call('${name}', {event:domquery.eventData}, '${params}')
     })(event)
     `;
   }
@@ -324,7 +340,6 @@ export class Component {
    * Calls a function with the specified parameters. and dispatches an event.
    * @param {string} func - The function name.
    * @param {...*} params - The function parameters.
-   * @private
    */
   callFunction(func,  isInlineJsx, ...params) {
     if(!isInlineJsx && params[0] && params[0].detail){
@@ -342,7 +357,6 @@ export class Component {
    * @param {string} params - The function parameters.
    * @param {boolean} [isInlineJsx=false] - Indicates if the function is an inline JSX.
    * @returns {string} - The function call.
-   * @private
    */
   useFunction(func, params, isInlineJsx = false) {
     const sanitizedFuncName = func.name.trim().replace(/\s+/g, '_');
@@ -514,20 +528,6 @@ export const useState = (initialState) => {
   return [value, (newValue) => {}];
 };
 
-export const useRef = (initialState) => {
-    let value = initialState;
-    return {
-        /**
-         * @property {Bind} bind - Bind the current ref key to the element
-         */
-        bind: key,
-        /**
-         * @property {Function} current - Get the current ref value - or the element with the ref key
-         */
-        current: () => document.querySelector(`[ref="${key}"]`) || value,
-    }
-}
-
 const constants = {};
 let constantCounter = 0;
 

package/vader.js

@@ -25,18 +25,17 @@ 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;
@@ -73,6 +72,7 @@ function Compiler(func) {
   let childs = [];
 
 
+   
   function extractAttributes(code) {
     // Match elements with opening tags
     const elementRegex = /<([a-zA-Z0-9_-]+)([^>]*)>/gs;
@@ -134,12 +134,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,7 +159,6 @@ function Compiler(func) {
                 let params = hasParams
                   ? line.split("(")[1].split(")")[0].trim()
                   : null;
-                 
 
                 if (
                   functionparams.length > 0 &&
@@ -187,9 +185,8 @@ 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})`
                 );
@@ -223,11 +220,11 @@ function Compiler(func) {
             otherdata["ref"] = ref;
  
             newvalue = newvalue.split('\n').map(line => line.trim() ? line.trim() + ';' : line).join('\n');
-            newvalue =  newvalue.replaceAll('"', "'")
-            otherdata = JSON.stringify(otherdata).replaceAll('"', "'")
-            let newatribute = `${attributeName}="\${this.bind(\`${newvalue}\`${isJSXComponent ? "" : ","}${otherdata} )}"`;
+            
 
+            let newatribute =  `${attributeName}="\${this.bind(\`${newvalue}\`, ${isJSXComponent ? true : false}, '${ref}', ${params || null})}"`
 
+            
             attribute[attributeName] = {
               old: old,
               new: newatribute,
@@ -261,7 +258,7 @@ 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)} )}"`;
+          let newattribute = `${attributeName}="\${this.bind(\`${newvalue}\`, ${isJSXComponent ? true : false}, '${ref}', ${params || null})}"`
           newattribute = newattribute.replace(/\s+/g, " ")
           string = string.replace(old, newattribute);
         }
@@ -330,18 +327,19 @@ function Compiler(func) {
             value == "undefined" ? (value = '"') : (value = value);
             key == 'style' ? value = `{this.parseStyle({${value.split('{{')[1].split('}}')[0]}})}` : null
 
-            value = `="\$${value}"`;
-            string = string.replace(oldvalue, value);
+             
+            value = `="\$${value}",`;
+            string = string.replaceAll(oldvalue, value);
 
           } 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);
         }
@@ -477,8 +475,6 @@ function Compiler(func) {
     return array;
   };
 
-  string = string.replaceAll('vaderjs/client', './vader.js')
-
   // capture <Component />, <Component></Component>, and <Component>content</Component>
 
   // Example usage
@@ -498,8 +494,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();
-
+      let props = component.split(`<${name}`)[1].split(">")[0].trim() 
+      console.log(props)
+     
       let savedname = name;
       let children = props
         ? component
@@ -534,18 +531,33 @@ function Compiler(func) {
           myChildrens.push(child.children);
         }
       });
+      
+ 
 
-       
-      // turn props into object 
-      props = props.replaceAll('=', ':').replaceAll('/', '')
+  
+      props = props
+      .replaceAll("=", ":")
+      .replaceAll('"', "'")
+      //fix key:'value' to key:'value', only if value ="value"
       
-      // class="text-red-500" => class:"text-red-500", omit quotes if value is a variable
-      props = props.replaceAll(/([a-zA-Z0-9_-]+)\s*:\s*("([^"\\]*(\\.[^"\\]*)*)"|'([^'\\]*(\\.[^'\\]*)*)')/gs, (match, p1, p2) => {
-       return match + ','
-    });
+      .replaceAll(",,", ',')
+      .replaceAll("className", "class")
+      .replaceAll("classname", "class")
+      .replaceAll("'${", "")
+      .replaceAll("}'", "")
+      .split("$:")
+      .join("") 
+      .replace('/', '')
+      // remove trailing ,
+      .replace(/,\s*$/, "")
+      props = props.replace(/:('[^']*'|"[^"]*")/g, ':$1,');
+     
+ 
+     
+ 
       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(",") : ""
         }]))}`;
@@ -558,6 +570,7 @@ function Compiler(func) {
 
 
 
+  string = string.replaceAll('vaderjs/client', './vader.js')
   string = string.replaceAll("<>", "`").replaceAll("</>", "`");
   string = parseComponents(string);
  
@@ -618,10 +631,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
@@ -651,12 +662,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);
@@ -694,12 +706,18 @@ 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);
@@ -732,13 +750,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))