vaderjs 1.4.1-ui7iuy47 → 1.4.2-jpiml56

package/client/index.d.ts

@@ -0,0 +1,226 @@
+//@ts-nocheck
+declare namespace Vader{
+    export let useState: <T>(initialState: T) => [T, (newState: T) => void];
+    export let useReducer: <T>(reducer: (state: T, action: any) => T, initialState: T) => [T, (newState: T) => void];
+    export const useRef: <T>(initialValue: T | null) => { current: T | null };
+    export const Mounted: (fn: () => void) => void;
+} 
+declare global {
+    /**
+     * @type {boolean}
+     * @description A boolean value that returns true if the current environment is a server
+     */
+    const isServer: boolean
+    /**
+     * @type {boolean}
+     * @description Default(true) - A boolean value that lets you opt out of prerendering (Only applies towards using the vaderjs serverside )
+     */
+    var preRender: boolean
+ 
+   
+       /**
+     * @description HTMLTextNode is a global interface that represents a text node
+     */
+
+    interface HTMLTextNode {
+        nodeValue: string;
+        nodeType: number;
+        tagName: string;
+        props:{nodeValue: string};
+        toString: () => string; 
+        insertBefore: (child: HTMLTextNode, ref: HTMLTextNode) => void;
+    }
+       /**
+     * @description HTMLElement is a global interface that represents an HTML element
+     */
+    interface HTMLElement{
+        tagName: string;
+        id: string; 
+        nodeType: number;
+        classList:{
+            add: (className: string) => void;
+            remove: (className: string) => void;
+            toggle: (className: string) => void;
+            contains: (className: string) => boolean;
+        }
+        props: {
+            [key: string]: string;
+        }
+        children: HTMLElement[];
+        outerHTML: string;
+        innerHTML: string; 
+        textContent: string;
+        firstChild: HTMLElement | HTMLTextNode | null;
+        style?: {
+            
+            display: string;
+            position: string;
+            top: string;
+            left: string;
+            right: string;
+            bottom: string;
+            width: string;
+            height: string;
+            maxWidth: string;
+            maxHeight: string;
+            minWidth: string;
+            minHeight: string; 
+            margin: string;
+            marginTop: string;
+            marginRight: string;
+            marginBottom: string;
+            marginLeft: string; 
+            padding: string; 
+            paddingTop: string;
+            paddingRight: string;
+            paddingBottom: string;
+            paddingLeft: string; 
+            overflow: string;
+            zIndex: string;
+            cursor: string;
+            textAlign: string;
+            fontSize: string;
+            fontWeight: string;
+            fontStyle: string;
+            textDecoration: string;
+            lineHeight: string;
+            letterSpacing: string;
+            textTransform: string;
+            backgroundColor: string;
+            backgroundImage: string;
+            backgroundSize: string;
+            backgroundPosition: string;
+            backgroundRepeat: string;
+            backgroundAttachment: string;
+            backgroundClip: string;
+            backgroundOrigin: string;
+            backgroundBlendMode: string;
+            boxShadow: string;
+            transition: string;
+            transform: string;
+            transformOrigin: string;
+            transformStyle: string;
+            perspective: string;
+            perspectiveOrigin: string;
+            backfaceVisibility: string;
+            filter: string;
+            backdropFilter: string;
+            mixBlendMode: string;
+            border: string;
+            borderTop: string;
+            borderRight: string;
+            borderBottom: string;
+            borderLeft: string;
+            borderStyle: string;
+            borderTopStyle: string;
+            borderRightStyle: string;
+            borderBottomStyle: string;
+            borderLeftStyle: string;
+            borderColor: string;
+            borderTopColor: string;
+            borderRightColor: string;
+            borderBottomColor: string;
+            borderLeftColor: string;
+            borderRadius: string;
+            borderTopLeftRadius: string;
+            borderTopRightRadius: string;
+            borderBottomRightRadius: string;
+            borderBottomLeftRadius: string;
+            borderWidth: string;
+            borderTopWidth: string;
+            borderRightWidth: string;
+            borderBottomWidth: string;
+            borderLeftWidth: string; 
+            
+            [key: string]: string;
+        } 
+        attributes: {
+            [key: string]: string;
+        };
+        events: [];
+        toString: () => string;
+        getAttribute: (attr: string) => string | null; 
+        appendChild: (child: HTMLElement) => void;
+        prepend: (child: HTMLElement) => void;
+        append: (...child: HTMLElement[]) => void;
+        insertBefore: (node1: HTMLElement, node2: HTMLElement) => void;
+        removeChild: (child: HTMLElement) => void;
+        querySelector: (selector: string) => HTMLElement | null;
+        querySelectorAll: (selector: string) => HTMLElement[]; 
+    }
+} 
+interface LastModified {
+    date: string;
+    time: string;
+    parsed: string;
+}
+ /**
+     * @type {Object}
+     * @description The file object
+     * @property {string} name - The name of the file
+     * @property {string} filetype - The type of the file
+     * @property {string} dataUrl - The data url of the file
+     * @property {string} text - The text content of the file
+     * @property {string} fileUrl - The file url
+     * @property {number} filesize - The file size
+     * @property {Blob} blob - The file blob
+     * @property {LastModified} lastModified - The last modified date
+     * @property {string} mimetype - The file mimetype
+     */
+interface File {
+    name: string;
+    filetype: string;
+    dataUrl: string;
+    fileUrl: string;
+    filesize: number;
+    lastModified: LastModified;
+    mimetype: string;
+}
+
+/**
+ * @description Returns a stateful value, and a function to update it.
+ * @template T
+ * @param {T} initialState - The initial state value.
+ * @returns {[T, (newState: T) => void]} - A tuple containing the current state value and a function to update the state.
+ * @see https://react.dev/reference/react/useState
+ */
+
+declare const useState: <T>(initialState: T) => [T, (newState: T) => void];
+
+ /**
+     * An alternative to `useState`.
+     *
+     * `useReducer` is usually preferable to `useState` when you have complex state logic that involves
+     * multiple sub-values. It also lets you optimize performance for components that trigger deep
+     * updates because you can pass `dispatch` down instead of callbacks.
+     * 
+     * @see https://react.dev/reference/react/useReducer
+     */
+
+declare const useReducer: <T>(reducer: (state: T, action: any) => T, initialState: T) => [T, (newState: T) => void];
+ /**
+     * `useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument
+     * (`initialValue`). The returned object will persist for the full lifetime of the component.
+     *
+     * Note that `useRef()` is useful for more than the `ref` attribute. It’s handy for keeping any mutable
+     * value around similar to how you’d use instance fields in classes.
+     * 
+     * @see https://react.dev/reference/react/useRef
+     */
+ declare const useRef: <T>(initialValue: T | null) => { 
+    current: T extends null ? HTMLElement : T;
+}; 
+
+ /**
+     * Accepts a function that contains imperative, possibly effectful code.
+     *
+     * @param {Function} fn Imperative function that can  be ran once the component is mounted - (does not apply when running on the server)
+     * @returns {void}
+     */
+
+declare function Mounted(fn: Function): void; 
+export { useState, useReducer, useRef, useFile, Mounted, require }
+
+
+
+ 

package/client/runtime/index.js

@@ -0,0 +1 @@
+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;

package/client/runtime/router.js

@@ -0,0 +1 @@
+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;

package/config/index.ts

@@ -0,0 +1,87 @@
+/**
+ * @description Instruct the compiler to use the provided configuration
+ * @typedef {Object} Config
+ * @property {string} target - The target environment
+ * @property {Object} host - The host object
+ * @property {string} host.hostname - The hostname of the application
+ * @property {string} host.provider - The provider of the application
+ * @property {Object} compilerOptions - The compiler options
+ * @property {string} compilerOptions.outDir - The output directory
+ * @property {string} compilerOptions.target - The target of the compiler
+ * @property {any[]} plugins - The plugins to be used in the application
+ * @property {string} mode - The mode of the application
+ * @param config  - The configuration object 
+ * @returns 
+ */
+/**
+ * Defines the configuration options for VaderJS.
+ * @param {Object} config - The configuration object.
+ * @param {string} config.target - The target platform for the code ('web' or 'bun').
+ * @param {Object} [config.host] - The host configuration.
+ * @param {string} [config.host.hostname] - The hostname for the host.
+ * @param {('vercel','netlify')} [config.host.provider] - The provider for the host ('vercel', 'netlify', 'aws', 'azure', 'gcp').
+ * @param {number} [config.host.port] - The port number for the host.
+ * @param {Object} [config.compilerOptions] - The compiler options.
+ * @param {string} [config.compilerOptions.outDir] - The output directory for the compiled code.
+ * @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: { 
+    /**
+     * @type {string}
+     * @param {('web'|'bun')} target
+     */
+    target:string,
+    host?: {
+        hostname?: string,
+        /**
+         * @param {('vercel', 'netlify', 'aws', 'azure', 'gcp')} provider
+         */
+        provider?: string,
+        port?: number
+    },
+    compilerOptions?: {
+        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 = {}
+    if(config.env){
+        for(let key in config.env){
+            env[key] = config.env[key]
+        }
+        for(let key in globalThis.env){
+            env[key] = globalThis.env[key]
+        }
+    }
+
+    //@ts-ignore
+    globalThis.env = env
+    return config
+}

package/index.ts

@@ -0,0 +1,344 @@
+//@ts-nocheck
+import {Element} from 'vaderjs/binaries/Kalix'
+import React from 'react'
+export const Vader = {
+    version: "0.0.1",
+}
+ 
+declare global {
+    /**
+     * @type {boolean}
+     * @description A boolean value that returns true if the current environment is a server
+     */
+    const isServer: boolean;
+    var location: {
+        href: string,
+        pathname: string,
+        search: string,
+        hash: string,
+        host: string,
+        hostname: string,
+        port: string,
+        protocol: string,
+        origin: string,
+        reload: () => void,
+    }
+    /**
+     * @description The env object - refers to the env variable either set in config or through the process.env
+     * @type {Object} [env]
+     */
+    var env:{
+        [key: string]: any
+    }
+    var history: {
+        pushState: (state: any, title: string, url: string) => void,
+        replaceState: (state: any, title: string, url: string) => void,
+        go: (delta: number) => void,
+        back: () => void,
+        forward: () => void,
+    }
+    var localStorage: {
+        getItem: (key: string) => string,
+        setItem: (key: string, value: string) => void,
+        removeItem: (key: string) => void,
+        clear: () => void,
+    }
+    /**
+     * @description The window object - used to manipulate the browser window
+     * @property {string} location.href - The URL of the current page
+     * @property {string} location.pathname - The path of the current page
+     * @property {string} location.search - The query string of the current page
+     * @property {string} location.hash - The hash of the current page
+     * @property {string} location.host - The host of the current page
+     * @property {string} location.hostname - The hostname of the current page
+     * @property {string} location.port - The port of the current page
+     * @property {string} location.protocol - The protocol of the current page
+     * @property {string} location.origin - The origin of the current page
+     * @property {Function} location.reload - Reloads the current page
+     * @property {Object} history - The history object
+     * @property {Function} history.pushState - Pushes a new state to the history object
+     */
+    var window: {
+        location: {
+            href: string,
+            /**
+             *  @property {string} location.pathname - The path of the current page
+             */
+            pathname: string,
+            search: string,
+            hash: string,
+            host: string,
+            hostname: string,
+            port: string,
+            protocol: string,
+            origin: string,
+            reload: () => void,
+        },
+        history: {
+            pushState: (state: any, title: string, url: string) => void,
+            replaceState: (state: any, title: string, url: string) => void,
+            go: (delta: number) => void,
+            back: () => void,
+            forward: () => void,
+        },
+        localStorage: {
+            getItem: (key: string) => string,
+            setItem: (key: string, value: string) => void,
+            removeItem: (key: string) => void,
+            clear: () => void,
+        },
+
+    };
+    var preRender: boolean;
+    /**
+     * @type {Object}
+     * @description The file object
+     * @property {string} name - The name of the file
+     * @property {string} filetype - The type of the file
+     * @property {string} dataUrl - The data url of the file
+     * @property {string} text - The text content of the file
+     * @property {string} fileUrl - The file url
+     * @property {number} filesize - The file size
+     * @property {Blob} blob - The file blob
+     * @property {number} lastModified - The last modified date
+     * @property {string} mimetype - The file mimetype
+     */
+     
+    const requirePath: (path: string) => any;
+
+    const useFile: (file: string) => {
+        name: string,
+        type: string,
+        lastModified:{
+            date: string,
+            time: string,
+            parsed: string,
+        },
+        size: number,
+        fileContent: string,
+    }
+       /**
+     * @description HTMLTextNode is a global interface that represents a text node
+     */
+
+    interface HTMLTextNode{
+        nodeType: number,
+        textContent: string,
+        toString: () => string,
+    }
+       /**
+     * @description HTMLElement is a global interface that represents an HTML element
+     */
+    interface HTMLElement{
+        tagName: string,
+        id: string, 
+        nodeType: number,
+        classList:{
+            add: (className: string) => void,
+            remove: (className: string) => void,
+            toggle: (className: string) => void,
+            contains: (className: string) => boolean,
+        }
+        props: {
+            [key: string]: string,
+        }
+        children: HTMLElement[],
+        outerHTML: string,
+        innerHTML: string, 
+        textContent: string,
+        firstChild: HTMLElement | HTMLTextNode | null,
+        style?: {
+            
+            display: string,
+            position: string,
+            top: string,
+            left: string,
+            right: string,
+            bottom: string,
+            width: string,
+            height: string,
+            maxWidth: string,
+            maxHeight: string,
+            minWidth: string,
+            minHeight: string, 
+            margin: string,
+            marginTop: string,
+            marginRight: string,
+            marginBottom: string,
+            marginLeft: string, 
+            padding: string, 
+            paddingTop: string,
+            paddingRight: string,
+            paddingBottom: string,
+            paddingLeft: string,  
+            overflow: string,
+            zIndex: string,
+            cursor: string,
+            textAlign: string,
+            fontSize: string,
+            fontWeight: string,
+            fontStyle: string,
+            textDecoration: string,
+            lineHeight: string,
+            letterSpacing: string,
+            textTransform: string,
+            backgroundColor: string,
+            backgroundImage: string,
+            backgroundSize: string,
+            backgroundPosition: string,
+            backgroundRepeat: string,
+            backgroundAttachment: string,
+            backgroundClip: string,
+            backgroundOrigin: string,
+            backgroundBlendMode: string,
+            boxShadow: string,
+            transition: string,
+            transform: string,
+            transformOrigin: string,
+            transformStyle: string,
+            perspective: string,
+            perspectiveOrigin: string,
+            backfaceVisibility: string,
+            filter: string,
+            backdropFilter: string,
+            mixBlendMode: string,
+            border: string,
+            borderTop: string,
+            borderRight: string,
+            borderBottom: string,
+            borderLeft: string,
+            borderStyle: string,
+            borderTopStyle: string,
+            borderRightStyle: string,
+            borderBottomStyle: string,
+            borderLeftStyle: string,
+            borderColor: string,
+            borderTopColor: string,
+            borderRightColor: string,
+            borderBottomColor: string,
+            borderLeftColor: string,
+            borderRadius: string,
+            borderTopLeftRadius: string,
+            borderTopRightRadius: string,
+            borderBottomRightRadius: string,
+            borderBottomLeftRadius: string,
+            borderWidth: string,
+            borderTopWidth: string,
+            borderRightWidth: string,
+            borderBottomWidth: string,
+            borderLeftWidth: string, 
+            
+            [key: string]: string,
+        } 
+        attributes: {
+            [key: string]: string,
+        },
+        events: [],
+        toString: () => string,
+        getAttribute: (attr: string) => string | null, 
+        setAttribute: (attr: string, value: string) => void,
+        appendChild: (child: HTMLElement) => void,
+        prepend: (child: HTMLElement) => void,
+        append: (...child: HTMLElement[]) => void,
+        insertBefore: (node1: HTMLElement, node2: HTMLElement) => void,
+        removeChild: (child: HTMLElement) => void,
+        querySelector: (selector: string) => HTMLElement | null,
+        querySelectorAll: (selector: string) => HTMLElement[], 
+    }
+} 
+let states = []
+
+export const useState = (initialState: any) => {
+    let state = initialState
+    let setState = (newState: any) => {
+        state = newState
+    }
+    states.push({state, setState})
+    return [state, setState]
+}
+
+export const useReducer = (reducer: any, initialState: any) => {
+    let state = initialState
+    let dispatch = (action: any) => {
+        state = reducer(state, action)
+    }
+    states.push({state, dispatch})
+    return [state, dispatch]
+}
+let refs = [] 
+   
+
+export const useRef = <T>(defaultValue: T) => {
+    if(!globalThis.isNotFirstRun) {
+        console.warn(`⚠️  Note: useRef in the server environment  will not work like it does in the client, you cannot  store the reference in a variable within mounted!
+        `)
+    }
+    let refKey = "${Math.random().toString(36).substring(7).replace('.', '').replace('\d', '')}"
+    let ref = {name: refKey, current: defaultValue}
+    refs.push(ref)
+    return ref
+}
+ 
+/**
+ * @description The mounted function is called when the component is mounted based on pregenerated keys
+ * @param callback {Function}
+ * @param parent {Function}
+ */
+export const Mounted = (callback: Function, parent: Function) => {
+    callback()
+}
+ 
+let effects = []
+ /**
+     * Use this to perform DOM mutations. This is the primary method you use to update the user interface in response to event handlers and server responses. 
+     * Prefer the standard `useEffect` when possible to avoid blocking visual updates.
+     */
+
+export const useEffect = (callback: Function, dependencies: any[]) => {
+    if(!effects.includes(callback)){
+        effects.push({callback, dependencies})
+    }
+    let deps = effects.find((effect: any) => effect.callback === callback).dependencies
+    if(deps){
+        deps.forEach((dep: any) => {
+            if(dep !== dependencies[0]){
+                callback()
+            }
+        })
+    }else{
+        callback() 
+    }
+}
+
+globalThis.window = {
+    location: {
+        href: '',
+        pathname: '',
+        search: '',
+        hash: '',
+        host: '',
+        hostname: '',
+        port: '',
+        protocol: '',
+        origin: '',
+        reload: () => {}
+    },
+    history: {
+        pushState: (state: any, title: string, url: string) => {},
+        replaceState: (state: any, title: string, url: string) => {},
+        go: (delta: number) => {},
+        back: () => {},
+        forward: () => {},
+    },
+    localStorage: {
+        getItem: (key: string) => '',
+        setItem: (key: string, value: string) => {},
+        removeItem: (key: string) => {},
+        clear: () => {},
+    }
+}
+
+export const render = (element: any, container: any) => {
+    container.appendChild(element)
+}
+export default  Element