npm - vaderjs - Versions diffs - 1.4.2-jpiml56 → 1.4.2-kml56 - Mend

vaderjs 1.4.2-jpiml56 → 1.4.2-kml56

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/README.md +4 -14
package/binaries/Kalix/index.js +12 -20
package/binaries/compiler/main.js +20 -99
package/binaries/vader.js +0 -0
package/binaries/watcher/hmr.js +0 -5
package/client/runtime/index.js +417 -1
package/client/runtime/router.js +235 -1
package/config/index.ts +1 -20
package/package.json +3 -2
package/plugins/cloudflare/functions/index.js +0 -4
package/plugins/cloudflare/toCopy/@server/Kalix/index.js +14 -62
package/plugins/cloudflare/toCopy/src/client.js +432 -1
package/plugins/cloudflare/toCopy/src/router.js +235 -1
package/plugins/ssg/index.js +21 -94
package/router/index.ts +10 -37
package/server/index.js +2 -16
package/plugins/tailwindcss/index.ts +0 -93
/package/{vader_dev.js → vader.js} +0 -0

package/package.json CHANGED Viewed

@@ -1,7 +1,8 @@
 {
   "name": "vaderjs",
   "description": "A reactive framework for building fast and scalable web applications",
-  "version": "1.4.2-jpiml56",
+  "version": "1.4.2-kml56",
+  "main": "vader.js",
   "author": {
     "name": "Malikwhitten67",
     "email": "malikwhitterb@gmail.com"
@@ -13,7 +14,7 @@
   },
   "type": "module",
   "bin":{
-    "vader":"./vader_dev.js"
+    "vader":"./vader.js"
   },
   "dependencies": {
     "ws": "latest"

package/plugins/cloudflare/functions/index.js CHANGED Viewed

@@ -8,10 +8,6 @@ const glob = new Glob("/**/*.{ts,tsx,js,jsx}", {
  */
 async function generate(){
     let config   = await import(process.cwd() + '/vader.config.js').then((config) => { return config.default })
-    if(!config?.env || !config?.env.SSR){
-       console.error('\x1b[31m[CloudFlare Functions] \x1b[0m -  Please add an SSR environment variable to your vader.config.js file')
-        return
-    }
     let start = Date.now()
     for(var i of glob.scanSync({cwd: process.cwd() + '/routes', absolute: true})){
         let data = await Bun.file(i).text()

package/plugins/cloudflare/toCopy/@server/Kalix/index.js CHANGED Viewed

@@ -10,40 +10,10 @@ export class DOMParser {
      */
     parseFromString(html) {
         let doc = new Document();
-        let t = new Bun.Transpiler({
-            loader: "tsx", // "js | "jsx" | "ts" | "tsx",
-            target: "browser",
-            define: {
-                "jsxDEV": "Element",
-                "jsx": "Element"
-            }
-        });
-        let el = t.transformSync(`
-        const html = ${html}
-        function Doc() {
-            return (
-               <html>
-               <body>${html}</body>
-               </html>
-            )
-          }
-         return Doc()
-        ` )
-        el = el.replaceAll(`jsxDEV`, `Element`)
-        let evaluated = eval(`(function(){${el}})()`)
-        evaluated.children.forEach((child) => {
-            child.outerHTML = child.toString()
-        })
-        doc.tree = evaluated.children
-        doc.body = evaluated.children[0]
-        doc.body.outerHTML = evaluated.children[0].toString()
-        doc.body.firstChild = evaluated.children[0].children[0]
-        doc.documentElement = evaluated
-        doc.documentElement.outerHTML = evaluated.children[0].toString()
-        this.tree = evaluated.children
-        return doc
+        return {
+            error: "Not implemented",
+        }
     }
     /**
      * @description - Returns a string containing the HTML serialization of the element's descendants.
@@ -67,7 +37,7 @@ export class HTMLTextNode {
     }
     insertBefore(node) {
-        this.nodeValue = `${node.nodeValue}${this.nodeValue}`;
+        this.nodeValue = `${node.toString()}${this.nodeValue}`;
         return this;
     }
 }
@@ -111,7 +81,7 @@ export class HTMLElement {
                     if (key !== 'style' && key !== 'ref' && !key.startsWith('on')) {
                         props += `${key}="${this.props[key]}" `
                     }
-                }
+                }
                 let children = this.children
                     .map((child) => {
                         return child.toString();
@@ -153,9 +123,7 @@ export class HTMLElement {
                         }
                     })
                     .join("");
-                return string;
+                return string;
             default:
                 break;
         }
@@ -182,8 +150,8 @@ export class HTMLElement {
      * @returns {HTMLElement}
      */
      setContent(content) {
-        let textNode = new  HTMLTextNode(content)
-        this.children = [textNode];
+        let textNode = new HTMLTextNode(content);
+        this.children = [textNode];
         this.outerHTML = this.toString("outerHTML");
         this.innerHTML = this.toString("innerHTML");
         return this;
@@ -351,7 +319,7 @@ export class HTMLElement {
                     this.textContent = this.toString("innerText");
                     this.children.forEach((c) => {
                         if (c.children) {
-                            child = c.children.find((child) => {
+                            child = c.children.find((child) => {
                                 child.outerHTML = child.toString("outerHTML");
                                 child.innerHTML = child.toString("innerHTML");
                                 return child.tagName === selector;
@@ -439,9 +407,6 @@ export class Document {
      * @returns {HTMLElement}
      */
     createElement(nodeData) {
-        if(!nodeData){
-            return new HTMLElement("div", {}, [])
-        }
         if (typeof nodeData === 'string') {
             return new HTMLElement(nodeData, {}, [])
         }
@@ -561,17 +526,7 @@ function handleStyles(styles, nodeEl) {
  */
 export function Element(tag, props = {}, ...children) {
     if(typeof tag === 'function'){
-        let childObj = children.map((child) => {
-            if (child.tagName === "TEXT_ELEMENT") {
-                return new HTMLTextNode(child);
-            }
-            if (child instanceof HTMLElement) {
-                return child;
-            }
-            return new HTMLElement(child.tagName, child.props, child.children);
-        })
-        childObj = childObj[0]
-        let el = tag({...props, children: childObj})
+        let el = tag(props, children)
         return el
     }
     if(props === null){
@@ -637,12 +592,9 @@ export function Element(tag, props = {}, ...children) {
         node.children = children
         delete props.children
-    }
+    }
     for (var i = 0; i < children.length; i++) {
-        if(typeof children[i] === 'undefined'){
-            delete children[i]
-            continue;
-        }
         if (typeof children[i] === "string" || typeof children[i] === "number") {
             children[i] = {
                 tagName: "TEXT_ELEMENT",
@@ -655,7 +607,7 @@ export function Element(tag, props = {}, ...children) {
         } else {
             if (children[i]) {
                 children[i].parentNode = { tagName: tag, props: props, children: children };
-            }
+            }
             children[i] = new HTMLElement(children[i].tagName, children[i].props, children[i].children)
         }

package/plugins/cloudflare/toCopy/src/client.js CHANGED Viewed

@@ -1 +1,432 @@
-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
+        this.effects = []
+    }
+    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
+    }
+    useEffect(fn, deps){
+        if(!this.effects.find((el) => el.fn.toString() === fn.toString())){
+            this.effects.push({fn, deps})
+        }
+        else{
+            let effect = this.effects.find((el) => el.fn.toString() === fn.toString())
+            if(effect.deps.toString() !== deps.toString()){
+                effect.deps = deps
+                effect.fn()
+            }
+        }
+        return () => {
+            this.effects = this.effects.filter((el) => el.fn !== fn)
+        }
+    }
+    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]
+    }
+    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