vaderjs 1.4.2-bml56 → 1.4.2-jpbvml56

package/client/runtime/index.js

@@ -1,417 +1 @@
-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
+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,...t});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 Object.keys(t).map((e=>{"className"===e&&(t.class=t[e],delete t[e])})),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 l in r.staticEl=i,t)l.toLowerCase().startsWith("on")?(i.addEventListener(l.substring(2).toLowerCase(),t[l]),r.events.push({type:l.substring(2).toLowerCase(),listener:t[l]})):"$$key"!==l||i._key||1!==i.nodeType?i&&1===i.nodeType&&i.setAttribute(l,t[l]):Object.defineProperty(i,"_key",{value:t[l],writable:!0});if(t.className&&(i.className=t.className),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:}return e}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}Element=Element;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=>{this.state[e]=t,handleDiff(calculateDiff(Array.from(document.querySelectorAll("*")).find((e=>e._key===this.firstChild.htmlNode._key)),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)});if(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(),"html"===r.firstChild.tag.toLowerCase()){let n=r.firstChild.children.find((e=>"body"===e.tag));if(!n)throw new Error("If you are rendering an HTML element, you must have a body tag enclosing the content");for(var o=0;o<n.children.length;o++){let e=n.children[o];"TEXT_ELEMENT"===e.tag?n.children[o]=Element("div",{nodeValue:e.props.nodeValue},...e.children):n.children[o]=Element(e.tag,e.props,...e.children)}n=new Element("div",{id:"root",_key:r._key},...n.children),n.htmlNode._isRoot=!0,n.htmlNode._key=r._key,t.innerHTML="",r.firstChild=n,r.firstChild.htmlNode=n.htmlNode,r.render=()=>{let t=e(r.passiveProps);if("html"===t.tag.toLowerCase()){let e=t.children.find((e=>"body"===e.tag));if(!e)throw new Error("If you are rendering an HTML element, you must have a body tag enclosing the content");for(var n=0;n<e.children.length;n++){let t=e.children[n];"TEXT_ELEMENT"===t.tag?e.children[n]=Element("div",{nodeValue:t.props.nodeValue},...t.children):e.children[n]=Element(t.tag,t.props,...t.children)}return e=new Element("div",{id:"root",_key:r._key},...e.children),e.htmlNode._isRoot=!0,e.htmlNode._key=r._key,e}},t.replaceWith(n.htmlNode)}else t.innerHTML="",t.replaceWith(r.firstChild.htmlNode)}export default Element;

package/client/runtime/router.js

@@ -1,235 +1 @@
-/**
- * @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;
+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;