vaderjs 1.1.4 → 1.1.5

package/vader.js

@@ -1,32 +1,22 @@
-/**
- * @Object window
- * @property {Object} props
- * @description Allows you to store props for component
- */
-window.props = {};
-
-let events = {};
-/**
- * @function vhtml
- * @param {String} strings
- * @param  {...any} args
- * @returns  modified string
- *
- */
 
-window.dom = {};
+let dom = /**@type {Obect}  **/ {};
 /**
  * @function useRef
  * @description Allows you to get reference to DOM element
  * @param {String} ref
  * @returns {Object} {current}
- * @returns
  */
-export const useRef = (ref) => {
+export const useRef = (ref /** @type {string} */) => {
   // Try to get the existing DOM element from window.dom
-  let el = window.dom[ref] || document.querySelector(`[ref="${ref}"]`);
+   /**@type {object }*/
+  let el =   dom[ref] || document.querySelector(`[ref="${ref}"]`);
 
   // Function to update the DOM element with new HTML content
+  /**
+   * @function update
+   * @description Allows you to update the DOM element with new HTML content
+   * @param {String} data 
+   */
   const update = (data) => {
     // Parse the new HTML data
     const newDom = new DOMParser().parseFromString(data, "text/html");
@@ -39,13 +29,12 @@ export const useRef = (ref) => {
         const newElement = newHtml.cloneNode(true);
         // Replace the old element with the new one
         el.parentNode.replaceChild(newElement, el);
-        window.dom[ref] = newElement;
+        dom[ref] = newElement;
       }
     } else {
       // If the element doesn't exist, create it
       el = newHtml.cloneNode(true);
-      window.dom[ref] = el;
-      console.log("Element created:", ref);
+      dom[ref] = el;
     }
   };
 
@@ -54,326 +43,274 @@ export const useRef = (ref) => {
     update,
   };
 };
-
-export function vhtml(strings, options, ...args) {
-  console.log(options);
-  let result = "";
-
-  for (let i = 0; i < strings.length; i++) {
-    result += strings[i];
-    if (i < args.length) {
-      result += args[i];
-    }
+let components = [];
+/**
+ * @class Component
+ * @description Allows you to create a component
+ * @returns {null}
+ * @example
+ * import { Vader } from "../../dist/vader/index.js";
+ * export class Home extends Vader.Component {
+ *  constructor() {
+ *   super();
+ * }
+ *  async render() {
+ *  return this.html(`
+ *     <div className="hero p-5">
+ *        <h1>Home</h1>
+ *     </div>
+ *   `);
+ *  }
+ * }
+ */
+export class Component {
+  constructor() {
+    this.states = {};
+    //@ts-ignore
+    this.name = this.constructor.name;
+    console.log(this.name);
+    this.executedEffects = {};
+    this.storedProps = {};
+    this.componentMounted = false;
+    this.hasMounted = false;
+    this.$_signal_subscribers = [];
+    /**
+     * @property {Array} $_signal_subscribers_ran
+     * @description Allows you to keep track of signal subscribers
+     * @private
+    */
+    this.$_signal_subscribers_ran =   [];
+    this.effects = {};
+    this.$_useStore_subscribers = [];
+    this.init();
+    this.Componentcontent = null;
+    this.$_signal_dispatch_event = new CustomEvent("signalDispatch", {
+      detail: {
+        hasUpdated: false,
+        state: null,
+      },
+    });
   }
 
-  let dom = new DOMParser().parseFromString(result, "text/html");
-  if (dom.body.firstChild.nodeName.toLowerCase() !== "div") {
-    throw new Error(
-      `Ensure that you have a parent div for all component elements`
-    );
+  init() {
+    //@ts-ignore
+    this.registerComponent();
+      //@ts-ignore
+    window.states = this.states;
+      //@ts-ignore
+    window.useState = this.useState;
+      //@ts-ignore
+    window.setState = this.setState;
+      //@ts-ignore
+    window.useEffect = this.useEffect;
+      //@ts-ignore
+    window.useAuth = this.useAuth;
+      //@ts-ignore
+    window.useSyncStore = this.useSyncStore;
+      //@ts-ignore
+    window.useReducer = this.useReducer;
+      //@ts-ignore
+    window.runEffects = this.runEffects;
+      //@ts-ignore
+    window.rf = this.rf;
+      //@ts-ignore
+    window.signal = this.signal;
   }
 
-  dom.body.querySelectorAll("[className]").forEach((el) => {
-    el.setAttribute("class", el.getAttribute("classname"));
-    el.removeAttribute("classname");
-  });
-
-  return dom.body.innerHTML;
-}
-
-/**
- * @function component
- * @param {*} name 
- * @param {*} options 
- * @returns 
- *  @param {*} states
- * @param {*} setState
- * @param {*} useState
- * @param {*} useEffect
- * @param {*} useAuth
- * @param {*} render
- * 
- * @example 
- *   
- *  const app = component('app', {
-  render: (states, props) => {
-  
- 
-    let [count, setCount] = useState('count', 0);
- 
-    useEffect(() => {
-      console.log('App component mounted');
-    });
- 
-    function incrementHandler() {
-      setCount(count + 1);
-    }
-    rf('incrementHandler', incrementHandler);
-    
+  registerComponent() {
+    components.push(this);
+  }
  
-    return vhtml`
-      <div>
-        <button onclick="incrementHandler()" >Click me</button>
-        <p>You clicked ${count} times</p>
-      </div>
-    `;
-  },
-});
- ***/
-
-export function component(name, options) {
-  let states = {};
-  const effects = {};
-  const executedEffects = {};
-  let storedProps = {};
-  let componentMounted = false;
-  let hasMounted = false;
-  /**
-   * @function setState
-   * @param {*} key
-   * @param {*} value
-   * @returns {null}
-   * @description Allows you to change state of component and re-render it
-   */
-  const setState = (key, value) => {
-    states[key] = value;
-    window.props[key] = value;
-    updateComponent();
-  };
-
   /**
-   * @function signal
-   * @description Manage state much efficiently - alternative to vaders useEffect method
+   * @method setState
+   * @description Allows you to set state
    * @param {String} key
-   * @param {Object | String | Number | Boolean} initialState
-   * @returns  {Object} {subscribe, cleanup, dispatch, getDetail, call, setDetail}
+   * @param {*} value 
+   * @returns {void}
    * @example
-   * let count = signal('count', 0);
-   *
-   * count.subscribe((state) => {
-   *  console.log(state)
-   * });
-   *
-   * count.call();
-   * count.set(1);
-   * count.call();
-   * count.get();
-   *
-   */
-
-  const signal = (key, initialState) => {
-    let [state, setState] = useState(key, initialState);
-    let subscribers = [];
-
-    function subscribe(fn) {
-      subscribers.push(fn);
-    }
-    function cleanup() {
-      subscribers = subscribers.filter((subscriber) => subscriber !== fn);
-      setState(null);
-    }
-    function dispatch() {
-      subscribers.forEach((subscriber) => subscriber(state));
-    }
-    function get() {
-      return state;
-    }
-    function call() {
-      dispatch();
-    }
-    function set(detail) {
-      setState(detail);
-    }
-    return {
-      subscribe,
-      cleanup,
-      dispatch,
-
-      call,
-      set,
-      get,
-    };
-  };
+   * this.setState('count', 1)
+   * */
+  setState(key, value) {
+    this.states[key] = value;
+    this.updateComponent();
+  }
 
+  componentUpdate() {}
   /**
-   * @function useState
-   * @param {*} key
-   * @param {*} initialValue
-   * @returns  {Array} [state, setState]
-   * @description Allows you to bind state to component
+   * @method componentDidMount
+   * @description Allows you to run code after component has mounted
    */
-
-  const useState = (key, initialValue) => {
-    if (!states[key]) {
-      states[key] = initialValue;
-    }
-    return [
-      states[key],
-      (value) => {
-        states[key] = value;
-        window.props[key] = value;
-        updateComponent();
-      },
-    ];
-  };
+  componentDidMount() {}
   /**
-   * @function useEffect
-   * @param {*} effectFn
-   * @returns {null}
-   * @description Allows you to run side effects
+   * @method signal
+   * @description Allows you to create a signal
+   * @param {String} key
+   * @param {any} initialState
+   * @returns  {Object} {subscribe, cleanup, dispatch, call, set, get}
+   * @example
+   * let signal = this.signal('count', 0);
+   * signal.subscribe((value) => {
+   * console.log(value)
+   * }, false) // false means it will run every time
+   * signal.subscribe((value) => {
+   * console.log(value)
+   * }, true) // true means it will run once
+   * signal.call() // this will call all subscribers
+   * signal.set(1) // this will set the value of the signal
+   * signal.get() // this will get the value of the signal
+   * signal.cleanup() // this will remove all subscribers
    */
-
-  const useEffect = (effectFn, dependencies) => {
-    if (!effects[name]) {
-      effects[name] = [];
-    }
-    effects[name].push(effectFn);
-
-    if (dependencies.length > 0) {
-      const oldState = states[name];
-      const newState = dependencies.map((dependency) => {
-        return states[dependency];
-      });
-      if (oldState) {
-        const hasChanged = newState.some((state) => {
-          return state !== oldState;
-        });
-        if (hasChanged) {
-          effectFn();
+  signal = (key, initialState) => {
+    let hasCaller = false;
+    let [state, setState] = this.useState(key, initialState, () => {
+      if (this.$_signal_subscribers.length > 0) {
+        for (var i = 0; i < this.$_signal_subscribers.length; i++) {
+          if (!hasCaller) {
+            if (
+              this.$_signal_subscribers[i].runonce &&
+              // @ts-ignore
+              this.$_signal_subscribers_ran.includes(
+                this.$_signal_subscribers[i]
+              )
+            ) {
+              break;
+            } else {
+              this.$_signal_subscribers[i].function(state);
+              this.$_signal_subscribers_ran.push(this.$_signal_subscribers[i]);
+              return;
+            }
+          }
         }
+      } else {
+        this.$_signal_dispatch_event.detail.hasUpdated = true;
+        this.$_signal_dispatch_event.detail.state = state;
+        window.dispatchEvent(this.$_signal_dispatch_event);
       }
-    } else if (!hasMounted) {
-      effectFn();
-      hasMounted = true;
-    }
-
-    return () => {
-      effects[name] = effects[name].filter((fn) => fn !== effectFn);
-    };
-  };
-
-  /**
-   *
-   * @param {String} key
-   * @param {Function} reducer
-   * @param {Object} initialState
-   * @returns  {Array} [state, dispatch]
-   * @description Allows you to bind state to component
-   */
-
-  const useReducer = (key, reducer, initialState) => {
-    const [state, setState] = useState(key, initialState);
-
-    const dispatch = (action) => {
-      const newState = reducer(state, action);
-      setState(newState);
-    };
-
-    return [state, dispatch];
-  };
-  /**
-   * @function useSyncStore
-   * @param {*} storeName
-   * @param {*} initialState
-   * @returns {Object} {getField, setField, subscribe, clear}
-   * @description Allows you to manage state in local storage
-   */
-  const useSyncStore = (storeName, initialState) => {
-    // Load state from local storage or use initial state
-    const storedState =
-      JSON.parse(localStorage.getItem(storeName)) || initialState;
-
-    // Create a store object
-    const store = createStore(storedState);
-
+    });
     /**
-     * Get the value of a specific field from the store's state.
+     * @function  $_signal_subscribe
+     * @description Allows you to subscribe to a signal
+     * @param {*} fn
+     * @param {*} runonce
+     * @returns {void}
      *
-     * @param {string} fieldName - The name of the field.
-     * @returns {*} The value of the specified field.
      */
-    const getField = (fieldName) => {
-      return store.state[fieldName];
+    this.$_signal_subscribe = (fn, runonce) => {
+      this.$_signal_subscribers.push({
+        function: fn,
+        runonce: runonce,
+      });
     };
-
-    /**
-     * Set the value of a specific field in the store's state.
-     *
-     * @param {string} fieldName - The name of the field.
-     * @param {*} value - The new value to set for the field.
-     */
-    const setField = (fieldName, value) => {
-      // Create a new state object with the updated field
-      const newState = { ...store.state, [fieldName]: value };
-      // Update the store's state and save it to local storage
-      store.setState(newState);
-      saveStateToLocalStorage(storeName, newState);
+    this.$_signal_cleanup = (fn) => {
+      this.$_signal_subscribers = this.$_signal_subscribers.filter(
+        (subscriber) => subscriber.function !== fn
+      );
     };
-
-    /**
-     * Subscribe a function to be notified of state changes.
-     *
-     * @param {Function} subscriber - The function to call when the state changes.
-     * @returns {Function} A function to unsubscribe the subscriber.
-     */
-    const subscribe = (subscriber) => {
-      return store.subscribe(subscriber);
+    this.$_signal_dispatch = () => {
+      for (var i = 0; i < this.$_signal_subscribers.length; i++) {
+        if (
+          this.$_signal_subscribers[i].runonce &&
+          // @ts-ignore
+          this.$_signal_subscribers_ran.includes(this.$_signal_subscribers[i])
+        ) {
+          break;
+        } else {
+          this.$_signal_subscribers[i].function(state);
+          this.$_signal_subscribers_ran.push(this.$_signal_subscribers[i]);
+        }
+      }
     };
-
-    /**
-     * Clear the stored state from local storage.
-     */
-    const clear = () => {
-      localStorage.removeItem(storeName);
+    this.$_signal_get = () => {
+      return state;
+    };
+    this.$_signal_call = () => {
+      hasCaller = true;
+      this.$_signal_dispatch();
     };
-
     /**
-     * Save the state to local storage.
-     *
-     * @param {string} key - The key under which to store the state.
-     * @param {*} state - The state to be stored.
+     * @function  $_signal_set
+     * @description Allows you to set the value of a signal
+     * @param {*} detail
      */
-    const saveStateToLocalStorage = (key, state) => {
-      try {
-        localStorage.setItem(key, JSON.stringify(state));
-      } catch (error) {
-        // Handle errors when saving to local storage
-        console.error("Error saving state to local storage:", error);
-      }
+    this.$_signal_set = (detail) => {
+      setState(detail);
     };
 
     return {
-      getField,
-      setField,
-      subscribe,
-      clear,
+      /**
+       * @function subscribe
+       * @description Allows you to subscribe to a signal
+       * @param {*} fn
+       * @param {*} runonce
+       */
+      subscribe: this.$_signal_subscribe,
+      /**
+       * @function cleanup
+       * @description Allows you to cleanup a signal
+       * @param {*} fn
+       * @returns {null}
+       */
+      cleanup: this.$_signal_cleanup,
+      /**
+       * @function dispatch
+       * @description Allows you to dispatch a signal
+       * @returns {null}
+       */
+      dispatch: this.$_signal_dispatch,
+      /**
+       * @function call
+       * @description Allows you to call a signal
+       * @returns {null}
+       */
+      call: this.$_signal_call,
+      /**
+       * @function set
+       * @description Allows you to set the value of a signal
+       * @param {*} detail
+       * @returns {null}
+       */
+      set: this.$_signal_set,
+      /**
+       * @function get
+       * @readonly
+       * @description Allows you to get the value of a signal
+       * @returns {any}
+       */
+      get: this.$_signal_get,
     };
   };
-
   /**
-   * @function useAuth
-   * @param {*} rulesets
-   * @param {*} options
-   * @returns {Object} {canAccess, grantAccess, revokeAccess}
-   * @description Allows you to manage access to resources through rulesets
-   * @returns
+   * @method useAuth
+   * @description Allows you to create an auth object
+   * @param {Object} options
+   * @param {Array} options.rulesets
+   * @param {Object} options.user
+   * @returns {Object} {can, hasRole, canWithRole, assignRule, revokeRule, canAnyOf, canAllOf, canGroup}
+   * @example
+   * let auth = this.useAuth({
+   * rulesets: [
+   * {
+   * action: 'create',
+   * condition: (user) => {
+   * return user.role === 'admin'
+   *  }
+   *  }
+   * ],
+   *  user: {
+   * role: 'admin'
+   * }
+   * })
+   * auth.can('create') // true
    */
-
-  function useAuth(options) {
-    if (!options.rulesets) {
+  useAuth(options) {
+    /**@type {Array}**/ 
+    let rules =  options.rulesets;
+    if (!rules) {
       throw new Error("No rulesets provided");
     }
-
-    let rules = options.rulesets;
+    /**@type {Object}**/
     let user = options.user;
-
-    const auth = {
-      /**
-       * Check if the user can perform a specific action.
-       *
-       * @param {string} action - The action to check.
-       * @returns {boolean} True if the user can perform the action, false otherwise.
-       */
+    let auth = {
       can: (action) => {
         let can = false;
         rules.forEach((rule) => {
@@ -386,29 +323,23 @@ export function component(name, options) {
         return can;
       },
       /**
-       * Check if the user has a specific role.
-       *
-       * @param {string} role - The role to check.
-       * @returns {boolean} True if the user has the role, false otherwise.
+       * @function hasRole
+       * @description Allows you to check if user has a role
+       * @param {String} role
+       * @returns {Boolean}
        */
       hasRole: (role) => {
         return user.role && user.role.includes(role);
       },
       /**
-       * Check if the user can perform a specific action with a specific role.
-       *
-       * @param {string} action - The action to check.
-       * @param {string} role - The role to check.
-       * @returns {boolean} True if the user can perform the action with the role, false otherwise.
+       * @function canWithRole
+       * @param {String} action
+       * @param {String} role 
+       * @returns 
        */
       canWithRole: (action, role) => {
         return auth.can(action) && auth.hasRole(role);
       },
-      /**
-       * Assign a new rule to the rulesets.
-       *
-       * @param {Object} rule - The rule to assign.
-       */
       assignRule: (rule) => {
         if (
           !rules.some((existingRule) => existingRule.action === rule.action)
@@ -416,162 +347,314 @@ export function component(name, options) {
           rules.push(rule);
         }
       },
-      /**
-       * Revoke a rule from the rulesets.
-       *
-       * @param {string} action - The action of the rule to revoke.
-       */
       revokeRule: (action) => {
         rules = rules.filter((rule) => rule.action !== action);
       },
-      /**
-       * Check if the user can perform any of the specified actions.
-       *
-       * @param {Array} actions - An array of actions to check.
-       * @returns {boolean} True if the user can perform any of the actions, false otherwise.
-       */
       canAnyOf: (actions) => {
         return actions.some((action) => auth.can(action));
       },
-      /**
-       * Check if the user can perform all of the specified actions.
-       *
-       * @param {Array} actions - An array of actions to check.
-       * @returns {boolean} True if the user can perform all of the actions, false otherwise.
-       */
       canAllOf: (actions) => {
         return actions.every((action) => auth.can(action));
       },
-      /**
-       * Check if the user can perform a group of actions based on a logical operator.
-       *
-       * @param {Array} actions - An array of actions to check.
-       * @param {string} logicalOperator - The logical operator to use ('any' or 'all').
-       * @returns {boolean} True if the user can perform the actions based on the logical operator, false otherwise.
-       */
       canGroup: (actions, logicalOperator = "any") => {
         return logicalOperator === "any"
           ? auth.canAnyOf(actions)
           : auth.canAllOf(actions);
       },
     };
-
     return auth;
   }
+  /**
+   * @method useReducer
+   * @description Allows you to create a reducer
+   * @param {*} key
+   * @param {*} reducer
+   * @param {*} initialState
+   * @url - useReducer works similarly to - https://react.dev/reference/react/useReducer
+   * @returns  {Array} [state, dispatch]
+   * @example
+   *  let [count, setCount] = this.useReducer('count', (state, action) => {
+   *   switch (action.type) {
+   *   case 'increment':
+   *     return state + 1
+   *   case 'decrement':
+   *     return state - 1
+   *   default:
+   *    throw new Error()
+   *    }
+   *  }, 0)
+   *  setCount({type: 'increment'})
+   */
+  useReducer(key, reducer, initialState) {
+    const [state, setState] = this.useState(key, initialState);
+    const dispatch = (action) => {
+      const newState = reducer(state, action);
+      setState(newState);
+    };
+    return [state, dispatch];
+  }
+  runEffects() {
+    Object.keys(this.effects).forEach((component) => {
+      this.effects[component].forEach((effect) => {
+        if (!this.executedEffects[effect]) {
+          effect();
+          this.executedEffects[effect] = true;
+        }
+      });
+    });
+  }
+  /**
+   * @method useSyncStore
+   * @description Allows you to create a store
+   * @param {*} storeName 
+   * @param {*} initialState 
+   * @returns  {Object} {getField, setField, subscribe, clear}
+   * @example
+   *  let store = this.useSyncStore('store', {count: 0})
+   *  store.setField('count', 1)
+   *  store.getField('count') // 1
+   * 
+   */
+  useSyncStore(storeName, initialState) {
+    let [storedState, setStoredState] = this.useState(
+      storeName,
+      initialState ||
+       // @ts-ignore
+        localStorage.getItem(`$_vader_${storeName}`, (s) => {
+          
+          localStorage.setItem(`$_vader_${storeName}`, JSON.stringify(s));
+          this.$_useStore_subscribers.forEach((subscriber) => {
+            subscriber(s);
+          });
+        }) ||
+        {}
+    );
+
+    const getField = (fieldName) => {
+      return storedState[fieldName];
+    };
+    const setField = (fieldName, value) => {
+      const newState = { ...storedState, [fieldName]: value };
+      setStoredState(newState);
+    };
+    const subscribe = (subscriber) => {
+      return this.$_useStore_subscribers.push(subscriber);
+    };
+
+    const clear = (fieldName) => {
+      let newState = storedState;
+      delete newState[fieldName];
+      setStoredState(newState);
+    };
+    return {
+      getField,
+      setField,
+      subscribe,
+      clear,
+    };
+  }
+  /**
+   * @method useState
+   * @description Allows you to create a state
+   * @param {String} key
+   * @param {*} initialValue
+   * @param {*} callback
+   * @url - useState works similarly to - https://react.dev/reference/react/useState
+   * @returns  {Array} [state, setState]
+   * @example
+   *  let [count, setCount] = this.useState('count', 0, () => {
+   *    console.log('count has been updated')
+   *   })
+   *
+   *   setCount(count + 1)
+   */
+  useState(key, initialValue, callback) {
+    if (!this.states[key]) {
+      this.states[key] = initialValue;
+    }
+    return [
+      this.states[key],
+      (value) => {
+        this.states[key] = value;
+        this.updateComponent();
+        typeof callback === "function" ? callback() : null;
+      },
+    ];
+  }
 
   /**
-   * @function runEffects
-   * @returns {null}
+   * @function useEffect
+   * @param {*} effectFn
+   * @param {*} dependencies
    * @description Allows you to run side effects
+   * @deprecated - this is no longer suggested please use vader signals instead
+   * @returns {Object} {cleanup}
    */
-  const runEffects = () => {
-    if (!executedEffects[name] && effects[name]) {
-      effects[name].forEach((effectFn) => effectFn());
-      executedEffects[name] = true;
+  useEffect(effectFn, dependencies) {
+    if (!this.effects[this.name]) {
+      this.effects[this.name] = [];
     }
-  };
-  window.useState = useState;
-  window.setState = setState;
-  window.useEffect = useEffect;
-  window.useAuth = useAuth;
-  window.useSyncStore = useSyncStore;
-  window.useReducer = useReducer;
-  window.runEffects = runEffects;
-  window.signal = signal;
-
-  const updateComponent = async () => {
-    const componentContainer = document.querySelector(
-      `[data-component="${name}"]`
-    );
-    const newHtml = await options.render(states, storedProps);
-    if (componentContainer && newHtml !== componentContainer.innerHTML) {
-      // only update the chunk of DOM that has changed
-      let newDom = new DOMParser().parseFromString(newHtml, "text/html");
-      let oldDom = new DOMParser().parseFromString(
-        componentContainer.innerHTML,
-        "text/html"
-      );
-      let html = newDom.body.firstChild;
-      let oldHtml = oldDom.body.firstChild;
-      if (!html.isEqualNode(oldHtml)) {
-        // make shadow
-        let shadow = document.createElement("div");
-        shadow.innerHTML = newHtml;
-        let newHtmlDom = shadow.firstChild;
-        let oldHtmlDom = componentContainer.firstChild;
-        // replace old html with new html
-        componentContainer.replaceChild(newHtmlDom, oldHtmlDom);
-      }
-      if (!componentMounted) {
-        componentMounted = true;
+    this.effects[this.name].push(effectFn);
 
-        // Execute the "component did mount" code here
-        if (
-          options.componentDidMount &&
-          typeof options.componentDidMount === "function"
-        ) {
-          options.componentUpdate ? options.componentDidMount() : null;
+    if (dependencies.length > 0) {
+      dependencies.forEach((d) => {
+        if (d.set) {
+          throw new Error(
+            "signal found, do not use effect and signals at the same time - signals are more efficient"
+          );
         }
-      }
+      });
+    } else if (!this.hasMounted) {
+      effectFn();
+      this.hasMounted = true;
     }
-  };
 
+    return{
+      cleanup: () => {
+        this.effects[this.name] = this.effects[this.name].filter(
+          (effect) => effect !== effectFn
+        );
+      },
+    }
+  }
   /**
-   * @function render
-   * @param {*} states
-   * @param {*} props
-   * @description Allows you to render component to DOM
-   * @returns {HTMLcContent}
-   * @returns
+   * @method $Function
+   * @description Allows you to create a function in global scope
+   * @returns {Function}
+   * @example
+   * let func = this.$Function(function add(e, a){
+   *  return e +  a
+   * })
+   * @param {*} fn
    */
+  $Function(fn) {
+    // @ts-ignore
+    if (!typeof fn === "function") {
+      throw new Error("fn must be a function");
+    }
+    let name = fn.name;
+    if (!name) {
+      name = "anonymous";
+    }
+    window[name] = fn;
+    // @ts-ignore
+    return `window.${name}()`;
+  }
 
-  const render = async (props) => {
-    let data = await vhtml(
-      `<div data-component="${name}">${await options.render(
-        states,
-        props
-      )}</div>`
-    );
-    storedProps = props;
+  // Add other methods like render, useEffect, useReducer, useAuth, etc.
 
-    setTimeout(() => {
-      options.componentDidMount ? options.componentDidMount() : null;
-    }, 0);
+  updateComponent() {
+    Object.keys(components).forEach(async (component) => {
+      const { name } = components[component];
+      const componentContainer = document.querySelector(
+        `[data-component="${name}"]`
+      );
 
-    return data;
-  };
+      if (!componentContainer) return;
+      const newHtml = await new Function(
+        "useState",
+        "useEffect",
+        "useAuth",
+        "useReducer",
+        "useSyncStore",
+        "signal",
+        "rf",
+        "props",
+        "render",
+        "return `" + (await this.render()) + "`;"
+      )(
+        this.useState,
+        this.useEffect,
+        this.useAuth,
+        this.useReducer,
+        this.useSyncStore,
+        this.signal,
+        this.render
+      );
+      this.componentDidMount();
 
-  return {
-    render,
-    setState,
-    useState,
-    useEffect,
-    useAuth,
-    useSyncStore,
-    useReducer,
-    runEffects,
-    signal,
-  };
+      if (newHtml && newHtml !== componentContainer.innerHTML) {
+        componentContainer.outerHTML = newHtml;
+      }
+    });
+  }
+  html(strings, ...args) {
+    let result = "";
+    for (let i = 0; i < strings.length; i++) {
+      result += strings[i];
+      if (i < args.length) {
+        result += args[i];
+      }
+    }
+    // add ref to all elements
+    let dom = new DOMParser().parseFromString(result, "text/html");
+    let elements = dom.body.querySelectorAll("*");
+    elements.forEach((element) => {
+      if (element.hasAttribute("ref")) {
+        dom[element.getAttribute("ref")] = element;
+      }
+    });
+    this.Componentcontent = result;
+    if (!result.includes("<div data-component")) {
+      result = `<div data-component="${this.name}">${result}</div>`;
+    }
+
+    return result;
+  }
+  async render() {
+    this.componentMounted = true;
+    this.componentDidMount();
+    return await new Function(`return \`${this.Componentcontent}\`;`)();
+  }
 }
 
+/**
+ * @object Vader
+ * @property {class} Component
+ * @property {function} useRef
+ * @description Allows you to create a component
+ * @example
+ * import { Vader } from "../../dist/vader/vader.js";
+ * export class Home extends Vader.Component {
+ * constructor() {
+ * super('Home');
+ * }
+ * async render() {
+ * return this.html(`
+ * <div className="hero p-5">
+ * <h1>Home</h1>
+ * </div>
+ * `);
+ * }
+ */
+export const Vader = {
+  Component: Component,
+  useRef: useRef,
+};
+export const component = (name) => {
+  return new Component()
+};
+
 /**
  * @function rf
  * @param {*} name
  * @param {*} fn
- * @returns {null}
+ * @returns {void}
+ * @deprecated - rf has been replaced with Vader.Component.$Function
  * @description Allows you to register function in global scope
  */
 export const rf = (name, fn) => {
   window[name] = fn;
 };
+let cache = {};
 /**
  * @function include
  * @description Allows you to include html file
  * @returns   - modified string with html content
  * @param {string}  path
+ * @param {Object} options
  */
 
-let cache = {};
 export const include = (path, options) => {
   if (cache[path]) {
     return new Function(`return \`${cache[path]}\`;`)();
@@ -585,8 +668,26 @@ export const include = (path, options) => {
       return res.text();
     })
     .then((data) => {
-      cache[path] = data;
+      // Handle includes
+      let includes = data.match(/<include src="(.*)"\/>/gs);
+      if (includes) {
+        // Use Promise.all to fetch all includes concurrently
+        const includePromises = includes.map((e) => {
+          let includePath = e.match(/<include src="(.*)"\/>/)[1];
+          return include(includePath).then((includeData) => {
+            // Replace the include tag with the fetched data
+            data = data.replace(e, includeData);
+          });
+        });
 
-      return new Function(`return \`${data}\`;`)();
+        // Wait for all includes to be fetched and replaced
+        return Promise.all(includePromises).then(() => {
+          cache[path] = data;
+          return new Function(`return \`${data}\`;`)();
+        });
+      } else {
+        cache[path] = data;
+        return new Function(`return \`${data}\`;`)();
+      }
     });
-};
+};