vaderjs 1.3.3-alpha-107 → 1.3.3-alpha-109

package/client/index.js

@@ -417,10 +417,28 @@ export const useRef = (initialState) => {
   };
 };
 
+/**
+ * @method Link
+ * @param {string} href
+ * @param {string} children
+ * @returns {string} - The rendered content.
+ * @description  This method allows you to create passive links without reloading the page
+ */
+class Link extends Component{
+  constructor(props){
+    super(props)
+    this.props = props
+  }
+  render(){
+    return  
+  }
+}
+
 export default {
   Component,  
   useRef,
   useReducer,
   useState,
   strictMount, 
+  Link
 }

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-107",
+  "version": "1.3.3-alpha-109",
   "bin": {
     "vader": "./vader.js"
   },

package/runtime/vader.js

@@ -1 +1,656 @@
-window.Vader={version:"1.3.3"},window.componentRegistry={};let errors={"SyntaxError: Unexpected token '<'":"You forgot to enclose tags in a fragment <></>"},mounts=[],hasRan=[];export const strictMount=(e,t)=>{let n=setInterval((()=>{document.querySelector(`[key="${e}"]`)&&!hasRan.includes(e)&&(clearInterval(n),t(),hasRan.push(e))}),120)};export class Component{constructor(){this.state={},this.key=null,this.components={},this.mounted=!1,this.checkIFMounted(),this.memoizes=[],this.functions=[],this.children=[],this.parentNode={},this.request={headers:{},method:"GET",params:{},path:"",query:{}},this.response={json:e=>{},send:e=>{},redirect:e=>{},render:async e=>{},log:e=>{},setQuery:e=>{}},this.router={use:e=>{}}}createComponent(e,t,n){function isClass(e){return"function"==typeof e&&/^class\s/.test(Function.prototype.toString.call(e))}let s=isClass(e)?new e(t):null;if(!e)throw new Error("Component must be defined");let r=new Component(t);if(isClass(e))s.props=t,s.children=n,s.props.children=n.join(""),s.parentNode=this,s.request=this.request,s.response=this.response,s.key=t.key||null,r=s;else{e.toString();r.key=e.toString().split('key="')[1]?e.toString().split('key="')[1].split('"')[0]:null;let n={key:r.key,render:()=>e.apply(r,[t]),request:this.request,isChild:!0,response:this.response,params:this.request.params,queryParams:this.request.query,reset:r.reset.bind(r),onMount:r.onMount.bind(r),useState:null,router:{use:r.router.use.bind(r)},bindMount:r.bindMount.bind(r),memoize:r.memoize.bind(r),createComponent:r.createComponent.bind(r),isChild:!1,useState:r.useState.bind(r),parseStyle:r.parseStyle.bind(r),bind:r.bind.bind(r),useRef:r.useRef.bind(r),request:this.request,response:this.response,useReducer:r.useReducer.bind(r),hydrate:r.hydrate.bind(r),onUnmount:r.onUnmount.bind(r),parentNoe:this};r.render=n.render,r=n}return this.components[t.key]||(this.components[t.key]=r),!this.children.includes(r)&&this.children.push(r),this.components[t.key]}reset(){Object.keys(this.components).forEach((e=>{this.components[e].onUnmount(),delete this.components[e]})),this.state={},this.children=[]}memoize(e){if(!0==!this.memoizes.includes(e.key))this.memoizes.push(e.key),this.components[e.key]=e;let t=this.components[e.key];t.bindMount(),t.parentNode=this,t.props=e.props,t.request=this.request,t.response=this.response,t.onMount=e.onMount.bind(e),t.onUnmount=e.onUnmount.bind(e);let n=t.render();return n&&n.split(">,").length>1&&(n=n.replaceAll(">,",">")),`<span key="${e.key}" >${n}</span>`}parseStyle(e){let t="";return Object.keys(e).forEach((n=>{let s=e[n];n=n.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g,"$1-$2").toLowerCase(),t+=`${n}:${s};`})),t}bindMount(){mounts.push(this)}domDifference(e,t){let n=[];for(let s=0;s<e.length;s++){let r=e[s],o=t[s];r&&o&&!r.isEqualNode(o)&&n.push({type:"replace",old:r,new:o.cloneNode(!0)})}return n}updateChangedElements(e){e.forEach((e=>{switch(e.type){case"replace":e.old.parentNode.replaceChild(e.new,e.old);break;case"remove":e.old.remove();break;case"add":e.old.appendChild(e.new.cloneNode(!0))}}))}hydrate(e){if(e){(new DOMParser).parseFromString(this.render(),"text/html").body.querySelector(`[ref="${e}"]`),document.querySelector(`[ref="${e}"]`)}else{let e=this.key?document.querySelector(`[key="${this.key}"]`):null,t=(new DOMParser).parseFromString(this.render(),"text/html").body;if(t=document.createElement("div").appendChild(t),!e&&(e=document.querySelector(`[key="${t.attributes?.key?.value||null}"]`)),!e)return void console.error('Hydration failed, component not found got ensure you have set key="a value" on the component or this.key inside of function or render method body');t.querySelectorAll("*").forEach((e=>{e.hasAttribute("key")&&e.innerHTML!==document.querySelector(`[key="${e.attributes.key.value}"]`).innerHTML&&document.querySelector(`[key="${e.attributes.key.value}"]`).replaceWith(e)}))}}patch(e,t){const n=this.domDifference(e,t);this.updateChangedElements(n)}handleObject(obj){try{obj=JSON.parse(obj)}catch(e){}return eval(obj)}bind(e,t,n,s,...r){n=n+this.key||2022;let o={},i=(s=s.replace(/,,/g,",")).replaceAll(",,",",");for(var u in r){let e=r[u];o[i.split(",")[u]]=e}s=s.replace(",,",",");let a=null;e=e.split("\n").join(";");try{a=new Function(`event, ${s}`,` \n        return (async (event, ${s}) => {    \n            ${e.toString()}\n        })(event, ${Object.keys(o).join(",")}) \n      `)}catch(e){let{message:t}=e;console.error(`Error in function ${n} ${t}`)}return a=a.bind(this),this.functions.find((e=>e.ref===n))||document.addEventListener(`$dispatch_#id=${n}`,(e=>{let{name:t,event:s}=e.detail;if(t===n){let e=this.functions.find((e=>e.ref===n)).params;Object.keys(e).forEach((t=>{e[t]instanceof CustomEvent&&delete e[t],void 0===e[t]?delete e[t]:e[t]})),a(s,...Object.values(e))}})),window.callFunction=(e,t)=>{document.dispatchEvent(new CustomEvent(`$dispatch_#id=${e}`,{detail:{name:e,params:null,event:t}}))},!this.functions.find((e=>e.ref===n))&&this.functions.push({ref:n,params:o}),t?e:`((event)=>{event.target.ev = event; callFunction('${n}', event.target.ev)})(event)`}useState(e,t){this.state[e]||(this.state[e]=t);let updatedValue=()=>this.state[e],n=updatedValue();return[n,(t,s)=>{this.state[e]=t,this.hydrate(s),n=updatedValue()}]}useRef(e=null,t){this.state[e]||(this.state[e]=t);return{bind:e+this.key,current:(()=>document.querySelector(`[ref="${e+this.key}"]`)||t)()}}useReducer(e=null,t,n=null){this.state[e]||(this.state[e]=t);const getValue=()=>this.state[e];let s=getValue();return[getValue(),(t,r)=>{const o=n(s,t)??t;this.state[e]=o,this.hydrate(r),s=getValue()}]}render(){}checkIFMounted(){new MutationObserver((e=>{e.forEach((e=>{e.target.querySelector(`[key="${this.key}"]`)&&!this.mounted&&(this.onMount(),this.mounted=!0),Array.from(e.removedNodes).find((e=>e.attributes&&e.attributes.key&&e.attributes.key.value===this.key))&&(this.onUnmount(),this.reset())}))})).observe(document.body,{childList:!0,subtree:!0})}onMount(){}onUnmount(){}}export const useState=(e,t)=>{states[e]||(states[e]=t);return[states[e],(t,n)=>{states[e]=t,this.hydrate(n)}]};export const useReducer=(e,t)=>[e,e=>{}];export const useRef=e=>({current:e,bind:""});export class Link extends Component{constructor(e){super(e),this.props=e,this.link=document.createElement("a")}render(){return this.link.innerHTML=this.props.children,this.link.setAttribute("id",this.props?.href),this.link.style=this.props?.style,this.link.setAttribute("class",this.props?.class),this.link.setAttribute("onclick",`window.history.pushState({}, '', '${this.props?.href}'); window.dispatchEvent(new Event('popstate'));`),this.link.outerHTML}}export default{Component:Component,useRef:useRef,useReducer:useReducer,useState:useState,strictMount:strictMount};
+window.Vader = {
+    version: "1.3.3", 
+  };
+  window.componentRegistry = {};
+  let errors = {
+    "SyntaxError: Unexpected token '<'": "You forgot to enclose tags in a fragment <></>",
+  } 
+   
+  let mounts = [];
+  let hasRan = []
+  /**
+   * @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}"]`) && !hasRan.includes(key)) {
+        clearInterval(timer);
+        callback();
+        hasRan.push(key)
+      }
+    }, 120);
+  };
+   
+   
+   
+  /**
+   * Represents a component in the Vader framework.
+   */
+  export class Component {
+    /**
+     * Creates an instance of Component.
+     */
+    constructor() {
+      this.state = {};
+      this.key = null;
+      this.components = {};
+      this.mounted = false;  
+      this.checkIFMounted();
+      this.memoizes = []
+      this.functions = []   
+      this.children = []
+     
+       
+      /**
+       * Parent of the current component.
+       * @type {Component}
+       */
+      this.parentNode =  {}
+      
+        /**
+         * Request object.
+         */
+        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: {},
+        },
+        /**
+         * @type {string}
+         * @description The response object for the current route
+         */
+        this.response = {
+          /**
+           * @method json
+           * @description  This method allows you to send json data to the client
+           * @param {*} data 
+           */
+          json: (data) => {},
+          /**
+           * @method send
+           * @description  This method allows you to send text data to the client
+           * @param {*} data 
+           */
+          send: (data) => {},
+          /**
+           * @method redirect
+           * @description  This method allows you to redirect the client to a new route
+           * @param {*} path 
+           */
+          redirect: (path) => {},
+          /**
+           * @method render
+           * @description  render a new component to the client
+           *  @param {*} Component
+           */
+          render: async (Component) => {},
+          /**
+           * @method log
+           * @description  This method is used to log the request and response
+           * @param {String} 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
+     */
+  
+     this.router = {
+        /**
+         * @method use
+         * @description add a middleware to the current route
+         * @param {Function} middleware
+         * @returns {void}
+         */
+        use: (/**@type {Function} */ middleware) => {},
+     }
+  }
+  
+    createComponent(/**@type {Component}**/component, props, children) {
+       
+      function isClass(funcOrClass) {
+        return typeof funcOrClass === 'function' &&
+          /^class\s/.test(Function.prototype.toString.call(funcOrClass));
+      }
+      let comp = !isClass(component) ? null : new component(props);
+      if (!component) {
+        throw new Error("Component must be defined");
+      } 
+      let c =  new Component(props);
+      if(!isClass(component)){ 
+        let render = component.toString(); 
+         
+        
+       
+        
+       c.key =  component.toString().split('key="')[1] ? component.toString().split('key="')[1].split('"')[0] : null;
+       
+       let comp =  {
+          key: c.key,
+          render:  () => { 
+               return component.apply(c, [props])
+           },
+          request: this.request,
+          isChild: true,
+          response:  this.response,
+          params:  this.request.params,
+          queryParams: this.request.query,
+          reset: c.reset.bind(c), 
+          onMount: c.onMount.bind(c),
+          useState: null,
+          router: {
+            use: c.router.use.bind(c),
+          },
+          bindMount: c.bindMount.bind(c),
+          memoize: c.memoize.bind(c),
+          createComponent: c.createComponent.bind(c),
+          isChild: false, 
+          useState: c.useState.bind(c),
+          parseStyle: c.parseStyle.bind(c),
+          bind: c.bind.bind(c),
+          useRef: c.useRef.bind(c),
+          request: this.request,
+          response: this.response,
+          useReducer: c.useReducer.bind(c),
+          hydrate: c.hydrate.bind(c), 
+          onUnmount: c.onUnmount.bind(c), 
+          parentNoe: this,
+       } 
+       c.render = comp.render;
+       c = comp;  
+         
+     
+     } else{
+        comp['props'] = props;
+        comp.children = children; 
+        comp.props.children = children.join('')
+        comp.parentNode  = this;
+        comp.request = this.request;
+        comp.response = this.response;
+        comp.key = props.key || null;
+        c = comp;
+      }
+   
+      
+       
+       
+      if(!this.components[props.key]){
+        this.components[props.key] =  c
+      }  
+      !this.children.includes(c) ? this.children.push(c) : null
+      return this.components[props.key] 
+    }
+    reset(){ 
+      Object.keys(this.components).forEach((key) => {
+         this.components[key].onUnmount() 
+          delete this.components[key]
+      })
+      this.state = {} 
+      this.children = []
+    }
+    memoize(/**@type {Component}**/component){  
+    
+      switch(true){
+        case !this.memoizes.includes(component.key):
+          this.memoizes.push(component.key)
+          this.components[component.key] = component;
+          break;
+      }
+   
+      let comp = this.components[component.key];
+      comp.bindMount();
+      comp.parentNode = this;
+      comp.props = component.props;  
+      comp.request = this.request;
+      comp.response = this.response;
+      comp.onMount = component.onMount.bind(component);
+      comp.onUnmount = component.onUnmount.bind(component);
+      let h = comp.render() 
+      
+      if(h && h.split('>,').length > 1){
+        h = h.replaceAll('>,', '>')
+      }
+  
+      return `<span key="${component.key}" >${h}</span>`
+    }
+    parseStyle(styles){ 
+      let css = ''
+      Object.keys(styles).forEach((key) => { 
+        let value = styles[key]
+         key = key.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase()
+         css += `${key}:${value};`
+      })
+      return css
+    }
+    bindMount(){
+      mounts.push(this) 
+    }
+  
+    /**
+     * Hydrates the component by updating the HTML content if it has changed.
+     * @private
+     */
+  
+      /**
+     * Hydrates the component by updating the HTML content if it has changed.
+     * @private
+     */
+  
+   domDifference(oldDom, newDom) {
+    let diff = [];
+  
+    for (let i = 0; i < oldDom.length; i++) {
+      let oldEl = oldDom[i];
+      let newEl = newDom[i];
+  
+      if (oldEl && newEl && !oldEl.isEqualNode(newEl)) {
+        diff.push({
+          type: 'replace',
+          old: oldEl,
+          new: newEl.cloneNode(true),
+        });
+      }
+    }
+  
+    return diff;
+  }
+  
+   updateChangedElements(diff) {
+    diff.forEach((change) => {
+      switch (change.type) {
+        case 'replace':
+          change.old.parentNode.replaceChild(change.new, change.old);
+          break;
+        case 'remove':
+          change.old.remove();
+          break;
+        case 'add':
+          change.old.appendChild(change.new.cloneNode(true));
+          break;
+        default:
+          break;
+      }
+    });
+  }
+     hydrate(hook) {
+      
+        if (hook) { 
+          let newDom = new DOMParser().parseFromString(this.render(), 'text/html').body.querySelector(`[ref="${hook}"]`);
+          let oldDom = document.querySelector(`[ref="${hook}"]`);
+  
+        } else {
+           
+           
+            let targetElement = this.key ? document.querySelector(`[key="${this.key}"]`) : null; 
+           
+            let newDom = new DOMParser().parseFromString(this.render(), 'text/html').body
+            newDom = document.createElement('div').appendChild(newDom) 
+             
+            
+            !targetElement ? targetElement = document.querySelector(`[key="${newDom.attributes?.key?.value || null}"]`) : null
+            if(!targetElement){  
+              console.error('Hydration failed, component not found got ensure you have set key="a value" on the component or this.key inside of function or render method body')
+              return
+            } 
+             
+            newDom.querySelectorAll('*').forEach((el) => {
+              
+              if(el.hasAttribute('key') && el.innerHTML !== document.querySelector(`[key="${el.attributes.key.value}"]`).innerHTML){
+                  
+                  document.querySelector(`[key="${el.attributes.key.value}"]`).replaceWith(el)
+              }
+            });
+  
+            
+          
+        }
+       
+    }
+    
+   
+    
+    patch(oldElements, newElements) {
+      const diff = this.domDifference(oldElements, newElements);
+    
+      this.updateChangedElements(diff);
+    }
+    
+    
+    
+    
+  
+    /**
+     * Handles an object by parsing it as JSON and evaluating it.
+     * @param {string} obj - The object to handle.
+     * @returns {*} - The evaluated object.
+     * @prvate
+     */
+    handleObject(obj) {
+      try {
+        obj = JSON.parse(obj);
+      } catch (error) {
+        // Handle JSON parsing error if needed
+      }
+      return eval(obj);
+    }
+  
+    
+  
+    /**
+     * Binds a function to the component.
+     * @param {string} funcData - The function data.
+     * @param {string} p - The parameter.
+     * @param {string} ref - The reference.
+     * @returns {string} - A valid inline JS function call.
+     */
+    bind(funcTion, jsx,ref, paramNames, ...params) {
+       ref = ref + this.key || 2022
+     
+       let paramObject = {};
+     
+    
+       paramNames = paramNames.replace(/,,/g, ',');
+       let newparamnames = paramNames.replaceAll(',,', ',')
+        
+       for(var i in params){
+          let param = params[i]
+          let paramname = newparamnames.split(',')[i]
+          paramObject[paramname] = param 
+       }
+   
+     
+       
+        paramNames = paramNames.replace(',,', ',');
+        let func = null
+        // at the end of spaces or new lines add a ;
+        funcTion = funcTion.split('\n').join(';')
+        try{
+         func =  new Function(`event, ${paramNames}`, ` 
+          return (async (event, ${paramNames}) => {    
+              ${funcTion.toString()}
+          })(event, ${Object.keys(paramObject).join(',')}) 
+        `);  
+        }catch(e){
+           let  { message } = e;
+           console.error(`Error in function ${ref} ${message}`)
+        }
+         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]
+                 })     
+                 func(event, ...Object.values(params))
+              }
+           });
+           
+        }
+       
+      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})  :  null
+      
+       
+      return jsx ?  funcTion :  `((event)=>{event.target.ev = event; callFunction('${ref}', event.target.ev)})(event)`;
+    }
+   
+    
+  
+    /**
+   * useState hook.
+   *
+   * @template T
+   * @param {string} key - The key for the state property.
+   * @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;
+    }
+  
+    /**
+     * Get the current state value.
+     *
+     * @returns {T} The current state value.
+     */
+    let updatedValue = () =>  this.state[key];
+  
+    let 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);
+      getValue = updatedValue();
+    };
+  
+   
+  
+    return  [getValue, set];
+  }
+  
+    
+  
+    useRef(key = null, initialState) {
+      if (!this.state[key]) {
+        this.state[key] = initialState;
+      }
+      const getValue = () =>  document.querySelector(`[ref="${key + this.key}"]`) ||  initialState;
+      const set = (newValue) => {
+        this.state[key] = newValue;
+   
+        this.hydrate();
+      };
+     
+      
+      return  {
+         bind: key + this.key,
+         current: getValue(),
+      }
+    }
+  
+     useReducer(key = null, initialState, func = null) {
+     
+      if (!this.state[key]) {
+        this.state[key] = initialState;  
+      }
+      const getValue = () => this.state[key];
+      let value = getValue();
+      const set = (newValue, hook) => {  
+        const nextState = func(value, newValue) ?? newValue; 
+        this.state[key] =  nextState;
+        this.hydrate(hook);
+        value = getValue(); 
+      };
+      return [getValue(), set];
+    }
+    
+  
+    /**
+     * Placeholder for content to be rendered.
+     * @method render
+     */
+    render() {}
+  
+    /**
+     * Checks if the component is mounted and triggers the onMount method.
+     * @private
+     */
+    checkIFMounted() {
+      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,
+      });
+    }
+  
+    /**
+     * Method that is called when the component is mounted.
+     * @method onMount
+     */
+    onMount() {}
+    /**
+     * Method that is called when the component is unmounted.
+     * @method onUnmount
+     */
+    onUnmount() {}
+  }
+  
+   
+   
+  /**
+   *  useState hook.
+   *
+   * @param {string} key - The key for the state property.
+   * @param {*} initialState - The initial state value.
+   * @returns {[*]} - A tuple with the current state value and a setter function.
+   */
+  export const useState = (key, initialState) => {
+    if (!states[key]) {
+      states[key] = initialState;
+    }
+  
+    /**
+     * Get the current state value.
+     *
+     * @returns {*} The current state value.
+     */
+    let updatedValue = () => states[key];
+  
+    /**
+     * Set a new value for the state.
+     *
+     * @param {*} newValue - The new value to set.
+     * @param {Function} hook - The hook to hydrate after setting the value.
+     */
+    const set = (newValue, hook) => {
+      states[key] = newValue;
+      this.hydrate(hook);
+    };
+  
+    return [states[key], set];
+  };
+  
+   
+  
+  /**
+   * @method useReducer
+   * @param {*} initialState 
+   * @param {*} reducer 
+   * @returns  {Array} [value, set]
+   */
+  export const useReducer = (/**@type {*}**/initialState, /**@type {function}**/reducer) => {
+    return [initialState, (newValue) => {}];
+  };
+   
+  
+   /**
+   *  useRef hook.
+   *
+   * @param {*} initialState - The initial state value for the ref.
+   * @returns {{ current: *, bind: string }} - An object containing the current value and a bind string.
+   */
+  export const useRef = (initialState) => {
+    return {
+      /**
+       * @description The current value of the ref.
+         @type {*}
+       */
+      current: initialState,
+      /**
+       * @description A unique string that can be used to bind the ref to an element.
+       * @type {HTMLElement|string}
+       */
+      bind: '',
+    };
+  };
+  
+  export class Link extends Component{
+    constructor(props){
+      super(props)
+      this.props = props
+      this.link = document.createElement('a')
+    }
+    render(){
+       
+      
+      this.link.innerHTML = this.props.children
+      this.link.setAttribute('id', this.props?.href) 
+      this.link.style = this.props?.style
+      
+      this.link.setAttribute('class', this.props?.class)
+      this.link.setAttribute('onclick', `window.history.pushState({}, '', '${this.props?.href}'); window.dispatchEvent(new Event('popstate'));`)
+      return this.link.outerHTML
+    }
+     
+  }
+  
+  export default {
+    Component,  
+    useRef,
+    useReducer,
+    useState,
+    strictMount,  
+    Link
+  }