vaderjs 1.4.2-jpiml56 → 1.4.2-kml56

package/client/runtime/index.js

@@ -1 +1,417 @@
-window.vader={version:"1.0.0"},globalThis.isServer=!1,globalThis.preRender=!1,window.hasRan=[],globalThis.memoizedFunctions=[];const memoizedRefs=[];function calculateDiff(e,t){if(void 0===e||void 0===t)return[];let n=[];if(e?.children.length>0){for(var r=0;r<e.children.length;r++)n.push(...calculateDiff(e.children[r],t.children[r]));return n}if(!e?._isRoot)if(3===e.nodeType&&e.nodeValue!==t.nodeValue)n.push({type:"REPLACE",oldNode:e,newNode:t});else if(1===e.nodeType&&e.innerHTML!==t.innerHTML)n.push({type:"REPLACE",oldNode:e,newNode:t});else if(1===e.nodeType&&e.tagName===t.tagName)for(r=0;r<e.attributes.length;r++)e.attributes[r].value!==t.attributes[r].value&&n.push({type:"PROPS",oldNode:e,newNode:t});return n}function generateJSX(e,t,...n){let r={state:{},mainFunction:e,_key:e.name||Math.random().toString(36).substring(7),$$typeof:"JSX_CHILD",firstChild:null,children:n,_name:e.name},o=new Component({$$key:r._key});return e=e.bind(o),o.render=()=>{let r=(n=n.flat(1/0)).map((e=>"function"==typeof e?generateJSX(e,t,e.props.children):e));return e({...t,children:r[0]||r})},r.firstChild=o.render(),r.firstChild.htmlNode._key=r._key,r.firstChild.htmlRoot=r,r.firstChild.htmlNode._isRoot=!0,r.firstChild.props=t||{},r.firstChild._isRoot=!0,r.firstChild._key=r._key,r.firstChild.props.key=r._key,r.firstChild}function handleStyles(e,t){for(let n in e)"object"==typeof e[n]&&handleStyles(e[n],t),t.style[n]=e[n]}let hasBeenCalled=[];function Element(e,t,...n){if(!t&&(t={}),t?.$$key||(t.$$key=e.name||Math.random().toString(36).substring(7)),"function"==typeof e)return generateJSX(e,t,n);let r={tag:e,props:t,children:n,_key:t.$$key,events:[],staticEl:document.createElement(e),parentNode:null};for(var o=0;o<n.length;o++)"string"==typeof n[o]||"number"==typeof n[o]?n[o]={tag:"TEXT_ELEMENT",props:{nodeValue:n[o]},_key:t.$$key,parentNode:{tag:e,props:t,children:n,_key:t.$$key},children:[]}:n[o]&&(n[o].parentNode={tag:e,props:t,children:n});let i="TEXT_ELEMENT"===r.tag?document.createTextNode(""):document.createElement(r.tag);for(var s in r.staticEl=i,t)s.toLowerCase().startsWith("on")?(i.addEventListener(s.substring(2).toLowerCase(),t[s]),r.events.push({type:s.substring(2).toLowerCase(),listener:t[s]})):"$$key"!==s||i._key||1!==i.nodeType?i&&1===i.nodeType&&i.setAttribute(s,t[s]):Object.defineProperty(i,"_key",{value:t[s],writable:!0});if(t.style&&handleStyles(t.style,i),t.id&&(i.id=t.id),t.ref)switch(!0){case Array.isArray(t.ref.current):t.ref.current.find((e=>e===i))||t.ref.current.push(i);break;case t.ref.current===HTMLElement:case null===t.ref.current:t.ref.current=i;break;case"function"==typeof t.ref&&!window.hasRan.includes(t.ref):window.hasRan.push(t.ref),t.ref(i),setTimeout((()=>{window.hasRan.filter((e=>e!==t.ref))}),0);break;default:t.ref.current=i}if(r.htmlNode=i,1===i.nodeType)for(o=0;o<n.length;o++)n[o]&&("TEXT_ELEMENT"===n[o].tag&&i.appendChild(document.createTextNode(n[o].props.nodeValue)),i.appendChild(Element(n[o].tag,n[o].props,...n[o].children).htmlNode));return r}function handleDiff(e){for(var t=0;t<e.length;t++)switch(!0){case"REPLACE"===e[t].type&&!e[t].oldNode._isRoot:e[t].oldNode.parentNode;e[t].oldNode.parentNode.replaceChild(e[t].newNode,e[t].oldNode);case"PROPS"===e[t].type:}}let states={};export const useState=(e,t)=>{};export function useRef(e,t){let n=t;memoizedRefs.find((t=>t.name===e))||memoizedRefs.push({name:e,ref:n});return{current:memoizedRefs.find((t=>t.name===e)).ref,name:e}}export function Mounted(e,t){Array.from(document.querySelectorAll("*")).find((e=>e._key===memoizedFunctions.find((e=>e.mainFunction===t))._key))&&!hasBeenCalled.find((e=>e===t))?(e(),hasBeenCalled.push(t)):setTimeout((()=>{Mounted(e,t)}),0)}let effects=[];export function useEffect(e,t){if(effects.find((t=>t.fn.toString()===e.toString()))){let n=effects.find((t=>t.fn.toString()===e.toString()));n.deps.toString()!==t.toString()&&(n.deps=t,n.fn())}else effects.push({fn:e,deps:t});return()=>{effects=effects.filter((t=>t.fn!==e))}}export function useReducer(e,t,n,r){let[o,i]=void 0;return[o,e=>{let n=t(o,e);i(n)}]}class Component{constructor(e){this.props=e,this._key=e.$$key||Math.random().toString(36).substring(7),this.state={},this.htmlNode=null,this.firstChild=null,this.Element=Element,this.passiveProps={}}setState(e){this.state=e}handleDiff(e){for(var t=0;t<e.length;t++)switch(!0){case"REPLACE"===e[t].type&&!e[t].oldNode._isRoot:e[t].oldNode.parentNode;e[t].oldNode.parentNode.replaceChild(e[t].newNode,e[t].oldNode);case"PROPS"===e[t].type:}}calculateDiff(e,t){if(void 0===e||void 0===t)return[];let n=[];if(e?.children.length>0){for(var r=0;r<e.children.length;r++)n.push(...this.calculateDiff(e.children[r],t.children[r]));return n}if(!e?._isRoot)if(3===e.nodeType&&e.nodeValue!==t.nodeValue)n.push({type:"REPLACE",oldNode:e,newNode:t});else if(1===e.nodeType&&e.innerHTML!==t.innerHTML)n.push({type:"REPLACE",oldNode:e,newNode:t});else if(1===e.nodeType&&e.tagName===t.tagName)for(r=0;r<e.attributes.length;r++)e.attributes[r].value!==t.attributes[r].value&&n.push({type:"PROPS",oldNode:e,newNode:t});return n}useState(e,t){this.state[e]||(this.state[e]=t);return[()=>this.state[e],t=>{let n=this.firstChild.htmlNode;"HTML"===n.tagName&&(n=n.querySelector("body"),n.firstChild._key=this._key),this.state[e]=t,handleDiff(calculateDiff(Array.from(document.querySelectorAll("*")).find((e=>e._key===n._key)),"HTML"===this.render(this.passiveProps).htmlNode.tagName?this.render(this.passiveProps).htmlNode.querySelector("body"):this.render(this.passiveProps).htmlNode))}]}useEffect=useEffect;useReducer(e,t,n){let[r,o]=this.useState(e,n);return[r,e=>{let n=t(r(),e);o(n)}]}render(){return null}}export async function render(e,t,...n){if(!e)throw new Error("No vnode was provided");let r=new Component({$$key:e.name||Math.random().toString(36).substring(7)});e=e.bind(r),n.length>0&&(n={req:n[0],res:n[1]},r.passiveProps=n),r.render=()=>e(r.passiveProps),r.firstChild=r.render(),t.innerHTML="",t.replaceWith(r.firstChild.htmlNode)}export default Element;
+window.vader = {
+    version: '1.0.0'
+}
+globalThis.isServer = false
+window.hasRan = []
+globalThis.memoizedFunctions = []
+const memoizedRefs = []
+/**
+ * @description This function is used to calculate the difference between two nodes - and return the elements in which the difference is found
+ * @param {HTMLElement} oldNode 
+ * @param {HTMLElement} newNode 
+ * @returns 
+ */
+function calculateDiff(oldNode, newNode){  
+    if(oldNode === undefined || newNode === undefined){
+        return []
+    }
+    let diff = [] 
+    if(oldNode?.children.length > 0){
+        for(var i = 0; i < oldNode.children.length; i++){  
+             diff.push(...calculateDiff(oldNode.children[i], newNode.children[i]))
+             
+        } 
+        return diff
+    } 
+       if(!oldNode?._isRoot){  
+        if(oldNode.nodeType === 3 && oldNode.nodeValue !== newNode.nodeValue){
+            diff.push({type: 'REPLACE', oldNode, newNode})
+        }
+        else if(oldNode.nodeType === 1 && oldNode.innerHTML !== newNode.innerHTML
+        ){
+            diff.push({type: 'REPLACE', oldNode, newNode})
+        }
+        else if(oldNode.nodeType === 1 && oldNode.tagName === newNode.tagName){
+            for(var i = 0; i < oldNode.attributes.length; i++){
+                if(oldNode.attributes[i].value !== newNode.attributes[i].value){
+                    diff.push({type: 'PROPS', oldNode, newNode})
+                }
+            }
+        }
+    } 
+
+     
+
+    return diff
+}
+ 
+/**
+ *  @description This function is used to generate functonal components
+ * @param {Function} tag 
+ * @param {Object} props 
+ * @param  {...any} children 
+ * @returns  {Object} - The first child of the functional component
+ */
+function generateJSX(tag, props, ...children){ 
+   let node = {
+     state: {},
+     mainFunction: tag,
+     _key: tag.name || Math.random().toString(36).substring(7),
+     $$typeof: 'JSX_CHILD',
+     firstChild:null,
+     children: children,
+     _name: tag.name,
+   } 
+   
+    node.firstChild = tag() 
+    node.firstChild.htmlNode._key =  node._key
+    node.firstChild.htmlRoot = node
+    node.firstChild.htmlNode._isRoot = true 
+    node.firstChild.props = props || {}  
+    node.firstChild._isRoot = true
+    node.firstChild._key = node._key
+    node.firstChild.props['key'] = node._key 
+    return  node.firstChild
+    
+
+}
+function handleStyles(styles, nodeEl) { 
+
+    for (let key in styles) {
+        if(typeof styles[key] === 'object'){
+            handleStyles(styles[key], nodeEl)
+        }
+        nodeEl.style[key] = styles[key];
+    }
+ 
+}
+
+
+let hasBeenCalled = []
+/**
+ * @description Create a virtual DOM element
+ * @param {string | Function} tag 
+ * @param {Object} props 
+ * @param  {...any} children 
+ * @returns  {Object} - The virtual DOM element
+ */
+function Element(tag, props, ...children){
+    !props ? props = {} : null
+    if(!props?.['$$key']){
+        props['$$key'] = tag.name || Math.random().toString(36).substring(7)
+    }
+
+    if(typeof tag === 'function'){ 
+       return generateJSX(tag, props, children) 
+    }
+    let node = {
+        tag: tag,
+        props: props,
+        children: children, 
+        _key: props['$$key'],
+        events: [],
+        staticEl: document.createElement(tag),
+        parentNode: null
+    }
+    for(var i = 0; i < children.length; i++){
+      if(typeof children[i] === 'string' || typeof children[i] === 'number'){
+        children[i] = {
+          tag: 'TEXT_ELEMENT',
+          props: {nodeValue: children[i]},
+          _key: props['$$key'],
+          parentNode: {tag: tag, props: props, children: children, _key: props['$$key']},
+          children: []
+        }
+      }else{
+          if(children[i]){
+            children[i].parentNode = {tag: tag, props: props, children: children}
+          }
+      }
+    }  
+    let nodeEl = node.tag === 'TEXT_ELEMENT' ? document.createTextNode('') : document.createElement(node.tag)
+    node.staticEl = nodeEl
+     
+    for(var key in props){ 
+       if(key.toLowerCase().startsWith('on')){  
+         nodeEl.addEventListener(key.substring(2).toLowerCase(), props[key])
+         node.events.push({type: key.substring(2).toLowerCase(), listener: props[key]}) 
+         continue
+       }  
+       if(key === '$$key' && !nodeEl._key && nodeEl.nodeType === 1
+       ){
+          Object.defineProperty(nodeEl, '_key', {
+            value: props[key],
+            writable: true
+          })
+          continue
+       }
+
+        if(nodeEl && nodeEl.nodeType === 1){
+            nodeEl.setAttribute(key, props[key])
+        }
+    
+    }
+    if(props.style){
+        handleStyles(props.style, nodeEl)
+    }
+
+    if(props.id){
+        nodeEl.id = props.id
+    }
+    if(props.ref){
+       switch(true){
+        case Array.isArray(props.ref.current):
+            if(!props.ref.current.find((el) => el === nodeEl)){
+                props.ref.current.push(nodeEl)
+            }
+            break;
+        case props.ref.current === HTMLElement:
+            props.ref.current = nodeEl
+            break;
+        case props.ref.current === null:
+            props.ref.current = nodeEl
+            break;
+        case typeof props.ref === 'function' && !window.hasRan.includes(props.ref):
+            window.hasRan.push(props.ref)
+            props.ref(nodeEl)
+            setTimeout(() => {
+                window.hasRan.filter((el) => el !== props.ref)
+            }, 0)
+            break;
+        default:
+            props.ref.current = nodeEl
+            break;
+
+       }
+    }
+    node['htmlNode'] = nodeEl
+      
+      
+    if(nodeEl.nodeType === 1){
+    for(var i = 0; i < children.length; i++){
+      if(children[i]){
+        if(children[i].tag === 'TEXT_ELEMENT'){
+            nodeEl.appendChild(document.createTextNode(children[i].props.nodeValue))
+        } 
+        nodeEl.appendChild(Element(children[i].tag, children[i].props, ...children[i].children).htmlNode)
+      }
+    }
+ 
+}
+   
+    return node;
+}
+ 
+
+function handleDiff(diff){
+    for(var i = 0; i < diff.length; i++){
+       switch(true){
+              case diff[i].type === 'REPLACE' && !diff[i].oldNode._isRoot:
+                let parent = diff[i].oldNode.parentNode  
+                diff[i].oldNode.parentNode.replaceChild(diff[i].newNode, diff[i].oldNode)
+                break;
+              case diff[i].type === 'PROPS': 
+                break;
+       }
+    }
+
+}
+let states = {}
+export const useState = (name,   initialValue)  => {}
+export function useRef(name,  initialValue){
+    let ref = initialValue
+    if(!memoizedRefs.find((el) => el.name === name)){
+        memoizedRefs.push({name, ref})
+    }
+    let getRef = () =>  memoizedRefs.find((el) => el.name === name).ref 
+    let setRef = (newValue) => { 
+        memoizedRefs.find((el) => el.name === name).ref = newValue  
+    }   
+    return  {
+        current: getRef(),
+        name,
+    }
+}
+export function Mounted(fn, node){ 
+    let el = Array.from(document.querySelectorAll('*')).find((el) =>  el._key ===  memoizedFunctions.find((el) => el.mainFunction === node)._key)
+    if(el && !hasBeenCalled.find((el) => el === node)){
+        fn()
+        hasBeenCalled.push(node)
+    }
+    else{
+        setTimeout(() => {
+            Mounted(fn, node)
+        }, 0)
+    }
+}
+ 
+ 
+let effects = []; 
+
+export function  useEffect(fn, deps){ 
+    if(!effects.find((el) => el.fn.toString() === fn.toString())){
+        effects.push({fn, deps})
+    }
+    else{
+        let effect = effects.find((el) => el.fn.toString() === fn.toString())
+        if(effect.deps.toString() !== deps.toString()){
+            effect.deps = deps
+            effect.fn()
+        }
+    }
+    return () => {
+        effects = effects.filter((el) => el.fn !== fn)
+    }
+
+}
+export function useReducer(name, reducer, vnode, initialState){
+    let [state, setState] = useState(name, vnode, initialState)
+    let dispatch = (action) => {
+        let newState = reducer(state, action)
+        setState(newState)
+    }
+
+    return  [state, dispatch]
+
+}
+
+class Component {
+    constructor(props){
+        this.props = props
+        this._key = props['$$key'] || Math.random().toString(36).substring(7)
+        this.state = {}
+        this.htmlNode = null
+        this.firstChild = null
+        this.Element = Element
+    }
+
+
+    setState(newState){
+        this.state = newState
+    }
+
+    handleDiff(diff){
+        for(var i = 0; i < diff.length; i++){
+           switch(true){
+                  case diff[i].type === 'REPLACE' && !diff[i].oldNode._isRoot:
+                    let parent = diff[i].oldNode.parentNode 
+                    diff[i].oldNode.parentNode.replaceChild(diff[i].newNode, diff[i].oldNode)
+                    break;
+                  case diff[i].type === 'PROPS': 
+                    break;
+           }
+        }
+    }
+    calculateDiff(oldNode, newNode){
+        if(oldNode === undefined || newNode === undefined){
+            return []
+        }
+        let diff = [] 
+        if(oldNode?.children.length > 0){
+            for(var i = 0; i < oldNode.children.length; i++){  
+                 diff.push(...this.calculateDiff(oldNode.children[i], newNode.children[i]))
+                 
+            } 
+            return diff
+        } 
+           if(!oldNode?._isRoot){  
+            if(oldNode.nodeType === 3 && oldNode.nodeValue !== newNode.nodeValue){
+                diff.push({type: 'REPLACE', oldNode, newNode})
+            }
+            else if(oldNode.nodeType === 1 && oldNode.innerHTML !== newNode.innerHTML
+            ){
+                diff.push({type: 'REPLACE', oldNode, newNode})
+            }
+            else if(oldNode.nodeType === 1 && oldNode.tagName === newNode.tagName){
+                for(var i = 0; i < oldNode.attributes.length; i++){
+                    if(oldNode.attributes[i].value !== newNode.attributes[i].value){
+                        diff.push({type: 'PROPS', oldNode, newNode})
+                    }
+                }
+            }
+        } 
+
+         
+
+        return diff
+    }
+    useState(name,   initialValue){
+        if(!this.state[name]){
+            this.state[name] = initialValue
+        } 
+        
+        let getState = () => this.state[name]
+        let setState = (newValue) => { 
+            let dEl =  this.firstChild.htmlNode 
+            if(dEl.tagName === 'HTML'){
+                let firstChild = dEl.querySelector('body').firstChild
+                dEl = firstChild
+            } 
+            this.state[name] = newValue 
+            let el = Array.from(document.querySelectorAll('*')).find((el) =>{  
+                return el._key === dEl._key
+            })  
+            let diff = calculateDiff(el, this.render().htmlNode.tagName === 'HTML' ? this.render().htmlNode.querySelector('body').firstChild : this.render().htmlNode) 
+            handleDiff(diff)
+            
+        }  
+        return  [getState, setState] 
+
+    }
+    useEffect = useEffect
+    useReducer(name, reducer, initialState){
+        let [state, setState] = this.useState(name, initialState)
+        let dispatch = (action) => {
+            let newState = reducer(state(), action) 
+            setState(newState)
+        }
+
+        return  [state, dispatch]
+    }
+
+    render(){
+        return null
+    }
+
+}
+ 
+export async function render(vnode, container, ...passProps){  
+    
+    if(!vnode){
+        throw new Error('No vnode was provided')
+    }
+    // create an object for the node then bind to firstChild 
+    let comp = new Component({$$key:  vnode.name || Math.random().toString(36).substring(7)}) 
+    vnode = vnode.bind(comp)
+    comp.render = () =>   {  
+        return vnode(...passProps)
+    }
+     
+    comp.firstChild = comp.render()
+
+    if(comp.firstChild.htmlNode.tagName === 'HTML'){
+        let hasHead = comp.firstChild.htmlNode.querySelector('head') ? true : false
+        let hasBody = comp.firstChild.htmlNode.querySelector('body') ? true : false
+        
+        if(hasHead){
+             document.head.innerHTML = comp.firstChild.htmlNode.querySelector('head').innerHTML 
+             comp.firstChild.children = comp.firstChild.children.filter((el) =>{
+                    return el.htmlNode.tagName !== 'HEAD'
+             })
+        }
+        if(hasBody){ 
+            comp.firstChild.children = comp.firstChild.children.filter((el) =>{
+                if(el.htmlNode.tagName == 'BODY'){
+                    comp.firstChild = el.children[0]
+                }
+            })
+        } 
+      }
+      container.innerHTML = ''
+      
+      container.appendChild(comp.firstChild.htmlNode)
+   
+   
+}
+ 
+export default Element

package/client/runtime/router.js

@@ -1 +1,235 @@
-export class Kuai{constructor(t={container:"#app"}){this.routes=[],this.middleware=[],this.container=t.container?t.container:document.getElementById("app"),this.renderPlugins=[]}res={text:t=>{this.container.innerHTML=t},html:t=>{switch(typeof t){case"function":if(this.renderPlugins.length>0)return void this.renderPlugins.forEach((e=>{"html"===e.for&&(console.log("Plugin",e),e.plugin(t,this.container))}));this.container.innerHTML=t();break;case"string":this.container.innerHTML=t}},json:t=>{this.container.innerHTML=`<Oject data=${JSON.stringify(t)}></Object>`}};req={navigate:t=>{window.history.pushState({},"",t);let e=this.match(window.location.pathname.replace("/index.html",""));e&&(this.currentRoute=e.path,e.callback(this.res,e.params,this.extractQueryParams(window.location.search)))},back:()=>{window.history.back()},forward:()=>{window.history.forward()},url:window.location};extractQueryParams(t){let e=new URLSearchParams(t),i={};for(let t of e)i[t[0]]=t[1];return i}extractParams(t,e){const i=t.split("/").filter((t=>""!==t)),r=e.split("/").filter((t=>""!==t)),a={};return i.forEach(((t,e)=>{if(t.startsWith(":")){const i=t.slice(1);a[i]=r[e]}else if(t.startsWith("*")){r.slice(e).forEach(((t,e)=>{a[e]=t}))}})),a}use(t,e){this.middleware.push({path:t,middleware:e})}usePlugin(t,e){this.renderPlugins.push({plugin:t,for:e})}match(t){(t=t.endsWith("/")?t.slice(0,-1):t).includes("index.html")&&(t=t.replace("index.html","")),t.includes("?")&&(t=t.split("?")[0]);let e=this.routes.find((e=>{if(e.path===t)return!0;if(""===t&&"/"===e.path)return!0;if(e.path.includes("*")||e.path.includes(":")){const i=e.path.split("/").filter((t=>""!==t)),r=t.split("/").filter((t=>""!==t));if(this.basePath&&r.shift(),i.length!==r.length&&!e.path.endsWith("*"))return!1;for(let t=0;t<i.length;t++){const e=i[t],a=r[t];if(!e.startsWith(":")&&!e.startsWith("*")&&e!==a)return!1}return!0}}));if(e){let i=this.extractParams(e.path,t);return{...e,params:i}}return null}get(t,e){this.routes.push({path:t,callback:e})}listen(){let t=this.match(window.location.pathname.replace("/index.html",""));if(t){this.middleware.forEach((e=>{e.path===t.path&&e.middleware()})),this.currentRoute=t.path;let e={...this.res,res:this.res,req:{...this.req,params:e=>t.params[e]}};t.callback(e)}window.onpopstate=()=>{let t=this.match(window.location.pathname.replace("/index.html",""));t&&(this.currentRoute=t.path,t.callback(this.res,t.params,this.extractQueryParams(window.location.search)))}}}export default Kuai;
+/**
+ * @fileoverview - A simple router for vaderjs - Kuai
+ * @version - 1.0.0
+ */
+export class Kuai{
+    constructor(config = { container: '#app'}){
+        this.routes = [];
+        this.middleware = [];
+        this.container =  config.container ? config.container : document.getElementById('app');
+        this.renderPlugins = [];
+    }
+  
+    res = {
+        /** 
+         * @description render text to the container
+         * @param {string} data 
+         */
+        text: (data) => {
+            this.container.innerHTML = data;
+        },
+        /**
+         * @method html
+         * @description render html to the container
+         * @param {any} data 
+         * @returns 
+         */
+        html: (data) => {
+            switch(typeof data){
+                case 'function':
+                    if(this.renderPlugins.length > 0){
+                        this.renderPlugins.forEach((plugin) => {
+                            if(plugin.for === 'html'){
+                                console.log('Plugin', plugin)
+                                plugin.plugin(data, this.container)
+                            }
+                        })
+                        return;
+                    }
+                    this.container.innerHTML = data();
+                    break;
+                case 'string':
+                    this.container.innerHTML = data;
+                    break;
+            } 
+  
+        },
+        /**
+         * @method json
+         * @description render json to the container
+         * @param {Object} data 
+         */
+        json: (data) => {
+            this.container.innerHTML =  `<Oject data=${JSON.stringify(data)}></Object>`
+        }
+    }
+    req = {
+        /**
+         * @method navigate
+         * @description - navigate to a new route
+         * @param {string} path 
+         */
+        navigate: (path) => {
+            window.history.pushState({}, '', path);
+            let currentPath = this.match(window.location.pathname.replace('/index.html', ''))
+            if(currentPath){
+                this.currentRoute = currentPath.path
+                currentPath.callback(this.res, currentPath.params, this.extractQueryParams(window.location.search));
+            }
+        },
+        /**
+         * @method back
+         * @description - go back to the previous route
+         */
+        back: () => {
+            window.history.back();
+        },
+
+        /**
+         * @method forward
+         * @description - go forward to the next route
+         * @returns {void}
+         * **/
+        forward: () => {
+            window.history.forward();
+        },
+        url: window.location
+    }
+    /**
+     * @private
+     */
+    extractQueryParams(path){
+        let params = new URLSearchParams(path);
+        let query = {};
+        for(let param of params){
+            query[param[0]] = param[1];
+        }
+        return query;
+    }
+     /**
+     * @private
+     */
+    extractParams(routePath, currentPath){
+        const routeParts = routePath.split('/').filter((part) => part !== '');
+        const hashParts = currentPath.split('/').filter((part) => part !== ''); 
+        const params = {};
+        routeParts.forEach((part, index) => {
+          if (part.startsWith(':')) {
+            const paramName = part.slice(1);
+            params[paramName] = hashParts[index];
+          }else if(part.startsWith('*')){ 
+            let array = hashParts.slice(index)
+            array.forEach((i, index)=>{
+              params[index] = i
+            })
+          };
+        });
+        return params;
+    }
+    use(path, middleware){
+        this.middleware.push({path, middleware}); 
+    }
+    /**
+     * @method usePlugin
+     * @description - add a plugin to handle how the route should be rendered
+     * @param {Function} plugin 
+     * @param {('html')} method 
+     */
+    usePlugin(plugin, method){
+        this.renderPlugins.push({plugin, for: method})
+    }
+    /**
+     * @method match
+     * @description - match a route to the current path and return the route object
+     * @param {string} route 
+     * @returns  {Object} -  {path: string, callback: Function, params: Object}
+     */
+    match(hash){
+        hash = hash.endsWith('/') ? hash.slice(0, -1) : hash;  
+        hash.includes('index.html') ? hash = hash.replace('index.html', '') : null;
+        if(hash.includes('?')){
+          hash = hash.split('?')[0]
+       } 
+        let route = this.routes.find((route) => {  
+          if (route.path === hash) { 
+            return true;
+          }
+  
+          if(hash === '' && route.path === '/'){
+            return true
+          }
+      
+          
+          if (route.path.includes('*') || route.path.includes(':')) {
+            const routeParts = route.path.split('/').filter((part) => part !== ''); 
+            const hashParts = hash.split('/').filter((part) => part !== '');  
+              if(this.basePath){
+                  hashParts.shift();
+              } 
+            if (routeParts.length !== hashParts.length && !route.path.endsWith('*')) { 
+              return false;
+            }
+      
+            for (let index = 0; index < routeParts.length; index++) {
+              const routePart = routeParts[index];
+              const hashPart = hashParts[index];
+               
+      
+              if (routePart.startsWith(':') || routePart.startsWith('*')) {
+                 
+                continue;
+              }
+      
+              if (routePart !== hashPart) { 
+                return false;
+              }
+            } 
+       
+  
+            return true;
+          }  
+          
+        });  
+        if(route){
+          let params = this.extractParams(route.path, hash)
+          return { ...route, params}
+        }
+        return null;
+   
+    }
+  
+    /**
+     * @description - create a new route
+     * @param {string} path 
+     * @param {Function} callback 
+     */
+    get(path, callback){
+        this.routes.push({path, callback});
+    }
+  
+    /**
+     * @method listen
+     * @description - listen for route changes
+     */
+    listen(){ 
+        let currentPath = this.match(window.location.pathname.replace('/index.html', '')) 
+        if(currentPath){
+            this.middleware.forEach((middleware) => {
+                if(middleware.path === currentPath.path){
+                    middleware.middleware();
+                }
+            });
+            this.currentRoute = currentPath.path
+            let obj = {
+                ...this.res,
+                res: this.res,
+                req:{
+                    ...this.req,
+                    params: (param) => currentPath.params[param]
+                
+                }
+            }
+            currentPath.callback(obj);
+        }
+        window.onpopstate = () => {
+            let currentPath = this.match(window.location.pathname.replace('/index.html', ''))
+            if(currentPath){
+                this.currentRoute = currentPath.path
+                currentPath.callback(this.res, currentPath.params, this.extractQueryParams(window.location.search));
+            }
+        }
+    
+    }
+  }
+  
+  export default Kuai;

package/config/index.ts

@@ -26,11 +26,6 @@
  * @param {string} [config.mode] - The mode for the configuration.
  * @param {Array} [config.plugins] - The plugins for the configuration.
  * @param {Object} [config.env] - The environment variables for the configuration.
- * @param {Array} [config.Router] -  The router configuration.
- * @param {Object} [config.Router.tls] - The tls configuration - allows you to switch the server to https.
- * @param {string} [config.Router.tls.cert] - The certificate for the tls configuration.
- * @param {string} [config.Router.tls.key] - The key for the tls configuration.
- * @param {Object} [config.Router.headers] - The headers for the router configuration.
  * @returns {Object} The configured object.
  */
 export const defineConfig = (config: { 
@@ -51,24 +46,10 @@ export const defineConfig = (config: {
         outDir?: string, 
     },
     mode?: string,
-    /**
-     * @type {any[]}
-     * @description Allows you to extend the functionality of vaderjs
-     */
     plugins?: any[]
     env?: {
         [key: string]: any
-    },
-    Router?: {
-        tls?: {
-            cert?: string,
-            key?: string
-        },
-        headers?: {
-            [key: string]: string
-        }
-    },
-    [key: string]: any
+    }
 }) => {
     // add config.env to globalThis.env
     let env = {}