vaderjs 1.3.3-7924566dd811 → 1.3.3-7b27417dd2e1

package/client/index.js

@@ -5,7 +5,7 @@
  * @param {Function} callback 
  */
 export const strictMount = (key, callback) => {
-   
+
 };
 
 /**
@@ -26,15 +26,15 @@ export const strictMount = (key, callback) => {
  */
 
 export const $metdata = {
-  title:'',
+  title: '',
   styles,
-  description:'',
-  keywords:'',
-  author:'',
-  image:'',
-  url:'',
-  robot:'',
-  manifest:'',
+  description: '',
+  keywords: '',
+  author: '',
+  image: '',
+  url: '',
+  robot: '',
+  manifest: '',
   tags: []
 
 }
@@ -48,9 +48,9 @@ export const $prerender = {
 }
 
 
- 
- 
- 
+
+
+
 /**
  * Represents a component in the Vader framework.
  */
@@ -69,52 +69,52 @@ export class Component {
      * @private
      */
     this.components = {};
-    this.mounted = false;  
+    this.mounted = false;
     this.checkIFMounted();
     this.memoizes = []
     /**
      * @private
      */
-    this.functions = []   
+    this.functions = []
     this.children = []
-   
-     
+
+
     /**
      * Parent of the current component.
      * @type {Component}
      */
-    this.parentNode =  {}
-    
+    this.parentNode = {}
+
+    /**
+     * Request object.
+     */
+    this.request = {
       /**
-       * Request object.
+       * @type {string}
+       * @description The headers for the current route
        */
-      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: {},
-      },
+      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
@@ -125,90 +125,90 @@ export class Component {
          * @description  This method allows you to send json data to the client
          * @param {*} data 
          */
-        json: (data) => {},
+        json: (data) => { },
         /**
          * @method send
          * @description  This method allows you to send text data to the client
          * @param {*} data 
          */
-        send: (data) => {},
+        send: (data) => { },
         /**
          * @method redirect
          * @description  This method allows you to redirect the client to a new route
          * @param {*} path 
          */
-        redirect: (path) => {},
+        redirect: (path) => { },
         /**
          * @method render
          * @description  render a new component to the client
          *  @param {*} Component
          */
-        render: async (Component) => {},
+        render: async (Component) => { },
         /**
          * @method log
          * @description  This method is used to log the request and response
          * @param {String} type
          */
-        log: (type) => {},
+        log: (type) => { },
         /**
          * @method setQuery
          * @description  This method is used to set the query object for the current route
          */
-        setQuery: (query) => {},
-        
-  }
-  /**
-   * @method router
-   * @description use router methods directly from the parent component
-   */
+        setQuery: (query) => { },
+
+      }
+    /**
+     * @method router
+     * @description use router methods directly from the parent component
+     */
 
-   this.router = {
+    this.router = {
       /**
        * @method use
        * @description add a middleware to the current route
        * @param {Function} middleware
        * @returns {void}
        */
-      use: (/**@type {Function} */ middleware) => {},
-   }
-}
+      use: (/**@type {Function} */ middleware) => { },
+    }
+  }
 
-/**
- * @method createComponent
- * @description  This method allows you to create a component from a class or function
- * @param {Component} component 
- * @param {Object} props 
- * @param {Array} children 
- */
+  /**
+   * @method createComponent
+   * @description  This method allows you to create a component from a class or function
+   * @param {Component} component 
+   * @param {Object} props 
+   * @param {Array} children 
+   */
   createComponent(/**@type {Component}**/component, props, children) {
-    
+
   }
   /**
    * @private
    */
-  reset(){
-     
+  reset() {
+
   }
   /**
    * @method memoize
    * @description  This method allows you to memoize a component which when rerendered will not be reinstantiated
    * @param {Component} component 
    */
-  memoize(/**@type {Component}**/component){  
-    
+  memoize(/**@type {Component}**/component) {
+
   }
   /**
    * @method parseStyle
    * @description  This method allows you to parse a jsx style object to a string
    * @param {object} styles 
    */
-  parseStyle(styles){ 
-     
+  parseStyle(styles) {
+
   }
   /** 
    * @private
    */
-  bindMount(){ 
+  bindMount() {
   }
 
   /**
@@ -216,29 +216,29 @@ export class Component {
    * @private
    */
 
- domDifference(oldDom, newDom) {
-   
+  domDifference(oldDom, newDom) {
+
   }
   /**
    * @private
    * @param {*} diff 
    */
-  
-   updateChangedElements(diff) {
-     
+
+  updateChangedElements(diff) {
+
   }
-  
+
   /**
    * @method hydrate
    * @description  This method allows you to hydrate a component
    * @private
    * @param {*} hook 
    */
-   hydrate(hook) {
-    
+  hydrate(hook) {
+
   }
-  
- 
+
+
   /**
    * @method patch
    * @description  This method allows you to patch the dom
@@ -246,14 +246,14 @@ export class Component {
    * @param {*} oldElements 
    * @param {*} newElements 
    */
-  
+
   patch(oldElements, newElements) {
-   
+
   }
-  
-  
-  
-  
+
+
+
+
 
   /**
    * Handles an object by parsing it as JSON and evaluating it.
@@ -262,10 +262,10 @@ export class Component {
    * @prvate
    */
   handleObject(obj) {
-    
+
   }
 
-  
+
 
   /**
    * Binds a function to the component.
@@ -276,11 +276,11 @@ export class Component {
    * @param {...*} params - The parameters.
    * @returns {string} - A valid inline JS function call.
    */
-  bind(funcTion,isTerny, jsx,ref, paramNames, ...params) {
-    
+  bind(funcTion, isTerny, jsx, ref, paramNames, ...params) {
+
   }
- 
-  
+
+
 
   /**
  * useState hook.
@@ -290,46 +290,46 @@ export class Component {
  * @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;
-  }
+  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];
+    /**
+     * Get the current state value.
+     *
+     * @returns {T} The current state value.
+     */
+    let updatedValue = () => this.state[key];
 
-  const getValue = updatedValue();
+    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);
-  };
+    /**
+     * 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  [getValue, set];
-}
 
-  
+    return [getValue, set];
+  }
 
- /**
-  *  useRef hook.
-  * @param {string} key 
-  * @param {any} initialState 
-  * @returns  {{ current: HTMLElement|any, bind: string }} - An object containing the current value and a bind string.
-  */
+
+
+  /**
+   *  useRef hook.
+   * @param {string} key 
+   * @param {any} initialState 
+   * @returns  {{ current: HTMLElement|any, bind: string }} - An object containing the current value and a bind string.
+   */
   useRef(key = null, initialState) {
-    
+
   }
 
   /**
@@ -340,17 +340,17 @@ export class Component {
    * @returns {[*, (newValue: *, hook: Function) => void]} - A tuple with getter and setter functions.
    * **/
 
-   useReducer(key = null, initialState, func = null) {
-    
+  useReducer(key = null, initialState, func = null) {
+
   }
-  
+
 
   /**
    * Placeholder for content to be rendered.
    * @method render
    * @returns {string} - The rendered content.
    */
-  render() {}
+  render() { }
 
   /**
    * Checks if the component is mounted and triggers the onMount method.
@@ -359,15 +359,15 @@ export class Component {
   checkIFMounted() {
     let observer = new MutationObserver((mutations) => {
       mutations.forEach((mutation) => {
-        
+
         if (mutation.target.querySelector(`[key="${this.key}"]`) && !this.mounted) {
-          this.onMount(); 
-          this.mounted = true;   
+          this.onMount();
+          this.mounted = true;
         }
-       
-        if(Array.from(mutation.removedNodes).find((node) => node.attributes && node.attributes.key && node.attributes.key.value === this.key)){
+
+        if (Array.from(mutation.removedNodes).find((node) => node.attributes && node.attributes.key && node.attributes.key.value === this.key)) {
           this.onUnmount();
-          this.reset();  
+          this.reset();
         }
       })
     })
@@ -381,16 +381,16 @@ export class Component {
    * Method that is called when the component is mounted.
    * @method onMount
    */
-  onMount() {}
+  onMount() { }
   /**
    * Method that is called when the component is unmounted.
    * @method onUnmount
    */
-  onUnmount() {}
+  onUnmount() { }
 }
 
- 
- 
+
+
 /**
  *  useState hook.
  *
@@ -424,7 +424,7 @@ export const useState = (key, initialState) => {
   return [states[key], set];
 };
 
- 
+
 
 /**
  * @method useReducer
@@ -433,16 +433,16 @@ export const useState = (key, initialState) => {
  * @returns  {Array} [value, set]
  */
 export const useReducer = (/**@type {*}**/initialState, /**@type {function}**/reducer) => {
-  return [initialState, (newValue) => {}];
+  return [initialState, (newValue) => { }];
 };
- 
 
- /**
-  *  useRef hook.
-  * @param {string} key 
-  * @param {any} initialState 
-  * @returns  {{ current: HTMLElement|any, bind: string }} - An object containing the current value and a bind string.
-  */
+
+/**
+ *  useRef hook.
+ * @param {string} key 
+ * @param {any} initialState 
+ * @returns  {{ current: HTMLElement|any, bind: string }} - An object containing the current value and a bind string.
+ */
 export const useRef = (initialState) => {
   return {
     /**
@@ -458,34 +458,33 @@ export const useRef = (initialState) => {
   };
 };
 
- /**
- * @class Link
- * @description Link component
- * @extends Component
- * @example
- * <Link href="/some-path" class="custom-link" style="color: blue;">Click me!</Link>
- */
+/**
+* @class Link
+* @description Allows you to seamlessly navigate to different pages in your application
+* @extends Component
+* @example
+* <Link href="/some-path" class="custom-link" style="color: blue;">Click me!</Link>
+*/
 export class Link extends Component {
   /**
-   * @constructor
-   * @param {object} props - Component props
-   * @param {string} props.href - URL for the link 
-   * @param {string} props.className - CSS class for the link
-   * @param {string} props.title - Title for the link
-   * @param {string} props.key - Unique identifier for the link
-   * @param {string} props.style - Inline CSS style for the link
-   * @param {string} props.children - Content to be displayed inside the link
-   */
+     * @constructor
+     * @param {object} props - Component props 
+     * @param {string} props.href - URL for the link 
+     * @param {string} props.action - Action to be performed when the link is clicked
+     * @param {string} [props.class] - CSS class for the link
+     * @param {string} [props.style] - Inline CSS style for the link
+     * @param {string} [props.children] - Content to be displayed inside the link
+     */
   constructor(props) {
     super(props);
-
     /**
-     * @type {object}
-     * @property {string} href - URL for the link
-     * @property {string} [class] - CSS class for the link
-     * @property {string} [style] - Inline CSS style for the link
-     * @property {string} [children] - Content to be displayed inside the link
-     */
+          * @type {object}
+          * @property {string} href - URL for the link
+          * @property {string} [action] - Action to be performed when the link is clicked
+          * @property {string} [class] - CSS class for the link
+          * @property {string} [style] - Inline CSS style for the link
+          * @property {string} [children] - Content to be displayed inside the link
+          */
     this.props = props;
 
     /**
@@ -504,20 +503,20 @@ export class Link extends Component {
    * @returns {string} - Rendered HTML for the Link component
    */
   render() {
-    
+
     return this.link.outerHTML;
   }
 }
 
 
 
- /**
- * @class Image
- * @description Image component
- * @extends Component
- * @example
- * <Image src="https://via.placeholder.com/150"  alt="image" />
- */
+/**
+* @class Image
+* @description Image component
+* @extends Component
+* @example
+* <Image src="https://via.placeholder.com/150"  alt="image" />
+*/
 export class Image extends Component {
   /**
    * @constructor
@@ -586,32 +585,32 @@ export class Image extends Component {
    */
   render() {
     // adjust width and height to the user's screen size
-   
+
 
     return this.img.outerHTML;
   }
 }
 
 export class Head extends Component {
-   /**
-   * @constructor
-   * @param {object} props - Component props
-   * @param {string} props.children - Content to be displayed inside the head
-   */
+  /**
+  * @constructor
+  * @param {object} props - Component props
+  * @param {string} props.children - Content to be displayed inside the head
+  */
   constructor(props) {
     super(props);
     this.props = {
-      children: props.children, 
+      children: props.children,
     }
     this.key = 'head';
     this.head = document.createElement('head');
   }
 
-    
+
 
   render() {
     this.head.innerHTML = this.props.children;
-    return   this.head.outerHTML;
+    return this.head.outerHTML;
   }
 
   onMount() {
@@ -621,32 +620,32 @@ export class Head extends Component {
 }
 
 export class Script extends Component {
-    /**
-    * @constructor
-    * @param {object} props - Component props
-    * @param {string} props.children - Content to be displayed inside the script
-    */
-    constructor(props) {
-      super(props);
-      this.props = {
-        children: props.children, 
-      }
-      this.key = 'script';
-      this.script = document.createElement('script');
-    }
-  
-      
-  
-    render() {
-      this.script.innerHTML = this.props.children.split('\n').join(';\n');
-      return   this.script.outerHTML;
-    }
-  
-    onMount() {
-      document.head.appendChild(this.script);
-      document.body.querySelector(`[key="${this.key}"]`).remove();
+  /**
+  * @constructor
+  * @param {object} props - Component props
+  * @param {string} props.children - Content to be displayed inside the script
+  */
+  constructor(props) {
+    super(props);
+    this.props = {
+      children: props.children,
     }
-  
+    this.key = 'script';
+    this.script = document.createElement('script');
+  }
+
+
+
+  render() {
+    this.script.innerHTML = this.props.children.split('\n').join(';\n');
+    return this.script.outerHTML;
+  }
+
+  onMount() {
+    document.head.appendChild(this.script);
+    document.body.querySelector(`[key="${this.key}"]`).remove();
+  }
+
 }
 
 /**
@@ -692,14 +691,14 @@ export class Html extends Component {
 
 }
 export default {
-  Component,  
+  Component,
   useRef,
   useReducer,
   useState,
-  strictMount, 
+  strictMount,
   Link,
   Image,
   Head,
   Html,
-  
+
 }