vaderjs 1.3.3-alpha-13 → 1.3.3-alpha-15

package/client/index.js

@@ -42,6 +42,12 @@ 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)
@@ -55,54 +61,11 @@ 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
@@ -138,18 +101,7 @@ 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.
@@ -163,15 +115,36 @@ export class Component {
     this.key = null;
     this.components = {};
     this.mounted = false;
+    /**
+     * @private
+     */
     this.checkIFMounted();
     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) {
@@ -191,6 +164,9 @@ 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')
@@ -211,6 +187,9 @@ export class Component {
 
     return `<div key="${component.key}">${h}</div>`
   }
+    /**
+   * @private
+   */
   parseStyle(styles){ 
     let css = ''
     Object.keys(styles).forEach((key) => { 
@@ -220,6 +199,9 @@ export class Component {
     })
     return css
   }
+  /**
+   * @private
+   */
   bindMount(){
     mounts.push(this) 
   }
@@ -286,6 +268,7 @@ 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) {
    
@@ -341,6 +324,7 @@ 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){
@@ -358,6 +342,7 @@ 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, '_');
@@ -529,6 +514,20 @@ 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-13",
+  "version": "1.3.3-alpha-15",
   "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 = {
@@ -42,6 +42,12 @@ 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)
@@ -55,54 +61,11 @@ 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
@@ -138,18 +101,7 @@ 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.
@@ -163,15 +115,36 @@ export class Component {
     this.key = null;
     this.components = {};
     this.mounted = false;
+    /**
+     * @private
+     */
     this.checkIFMounted();
     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) {
@@ -191,6 +164,9 @@ 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')
@@ -211,6 +187,9 @@ export class Component {
 
     return `<div key="${component.key}">${h}</div>`
   }
+    /**
+   * @private
+   */
   parseStyle(styles){ 
     let css = ''
     Object.keys(styles).forEach((key) => { 
@@ -220,6 +199,9 @@ export class Component {
     })
     return css
   }
+  /**
+   * @private
+   */
   bindMount(){
     mounts.push(this) 
   }
@@ -286,6 +268,7 @@ 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) {
    
@@ -341,6 +324,7 @@ 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){
@@ -358,6 +342,7 @@ 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, '_');
@@ -529,6 +514,20 @@ 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

@@ -531,20 +531,10 @@ function Compiler(func) {
         }
       });
 
-      props = props
-        .replaceAll("=", ":")
-        .replaceAll('"', "'")
-        .replaceAll(" ", ",")
-        .replaceAll(",,", ',')
-        .replaceAll("className", "class")
-        .replaceAll("classname", "class")
-        .replaceAll("'${", "")
-        .replaceAll("}'", "")
-        .split("$:")
-        .join("")
-        .replaceAll("-", "");
-
-      //remove trailing /
+       
+      // turn props into object
+      props = props.replace(/(\w+)=["']([^"']+)["']/g, '"$1": `$2`,');
+      
       props = props.replace("/", ""); 
       let replace = "";
       replace = isChild
@@ -735,6 +725,14 @@ Vader.js v1.3.3
           }
         },
       );
+      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))
   
     break;