vaderjs 1.4.2-mpiml56 → 1.4.2-npiml56

package/README.md

@@ -39,8 +39,8 @@ Keyword folders - all files are passed from these folders to the build folder
 
 ```md
 1. pages - used for jsx route files
-2. src  - used for your jsx components / javascript files
-3. public - used for anything 
+2. src  - used for your jsx components / javascript -typescript files
+3. public - used for anything / css / json etc
 ```
 
 
@@ -49,18 +49,28 @@ Keyword folders - all files are passed from these folders to the build folder
 ```ts
 import { defineConfig } from "vaderjs/config"; 
 import cloudflare from "vaderjs/plugins/cloudflare/functions"
+import tailwindcss from "vaderjs/plugins/tailwindcss"
 export default defineConfig({
     target: "web",
     host: {
         hostname: "localhost",
-        provider:'cloudflare'
+        provider:'cloudflare' // used for ssg or ssr
     }, 
     env: {
         PORT: 3000,
         SSR: true,
         apiRoute: "https://api.example.com"
     }, 
-    plugins: [cloudflare],
+     Router: {
+        tls: {
+            cert: "cert.pem",
+            key: "key.pem"
+        },
+        headers: {
+            "cache-control": "public, max-age=0, must-revalidate"
+        }
+    },
+    plugins: [cloudflare, tailwindcss],
 });
 
 ```

package/binaries/Kalix/index.js

@@ -111,7 +111,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();
@@ -351,7 +351,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;
@@ -561,7 +561,17 @@ function handleStyles(styles, nodeEl) {
  */
 export function Element(tag, props = {}, ...children) {
     if(typeof tag === 'function'){
-        let el = tag(props, children)
+        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})
         return el
     }
     if(props === null){

package/binaries/compiler/main.js

@@ -332,15 +332,8 @@ export async function Compile(){
           copy = copy.replace(old, newStatereducer);
            break;
            case line.includes('vaderjs/client') && line.includes('import') || line.includes('vaderjs') && line.includes('import'): 
-            let b4 = line 
-            let isUsingProvider = config?.host?.provider
-            let replacement = isUsingProvider === 'cloudflare' ? 'remove' : '/src/client.js'
-            if(replacement === 'remove'){
-               copy = copy.replace(b4, '')  
-               break;
-            } 
-            let after = line.replace('vaderjs/client',  replacement).replace('vaderjs',  replacement) 
-            copy = copy.replace(b4, after)
+            let b4 = line  
+            copy = copy.replace(b4, '')
           break;
           
            case line.includes('import') && !line.includes('vaderjs/client') && !line.includes('vaderjs') && !line.includes('import.meta') && !line.includes('import.meta.url') && !line.includes('import.meta.env'): 
@@ -359,9 +352,7 @@ export async function Compile(){
              
         }
       }
-      if(!contents.includes('import Element')){ 
-   
-   }
+     
       return copy
   }    
    
@@ -450,6 +441,11 @@ export async function Compile(){
         absolute: true,
         ignore: ["**/node_modules/**"]
       });
+
+      const publics  = new Glob("/public/**/*", {
+        absolute: true,
+        ignore: ["**/node_modules/**"]
+      })
       let srcArray = await Array.fromAsync(src.scan())
       srcArray = srcArray.map((file) => {
         file = file.replaceAll('\\', '/')
@@ -489,9 +485,25 @@ export async function Compile(){
           });
         })
         file = file.split('/src')[1]
-         
+        fs.mkdirSync(process.cwd() + '/build/src/' + file.split('/').slice(0, -1).join('/'), { recursive: true })
         fs.writeFileSync(process.cwd() +  '/build/src' + file, contents)
       }
+
+      let publicArray = await Array.fromAsync(publics.scan())
+      publicArray = publicArray.map((file) => {
+        file = file.replaceAll('\\', '/')
+        file ='./' + file
+        return file
+      })
+
+      for(var file of publicArray){
+        file = file.split('/public')[1]
+        fs.mkdirSync(process.cwd() + '/build/public/' + file.split('/').slice(0, -1).join('/'), { recursive: true })
+        let out = `/build/public${file}` 
+        let contents = await Bun.file(process.cwd() + '/public' + file).text()
+        fs.writeFileSync(process.cwd() + out, contents)
+         
+      }
        
       resolve()
     })

package/binaries/watcher/hmr.js

@@ -17,6 +17,7 @@ export function watchDir(cwd, _){
             continue;
         }
         watch(process.cwd() + '/' + path, { recursive: true, absolute:true }, (event, filename) => { 
+            if(!filename.endsWith('.ts') && !filename.endsWith('.tsx') && !filename.endsWith('.js') && !filename.endsWith('.jsx')) return
            if(filename && !filename.includes('node_modules') && !globalThis.hasLogged){ 
             console.log(`\x1b[36mwait \x1b[0m  - compiling (client and server)`)
                 globalThis.hasLogged = true 

package/client/runtime/index.js

@@ -67,7 +67,14 @@ function generateJSX(tag, props, ...children) {
     let comp = new Component({ $$key: node._key })
     tag = tag.bind(comp)
     comp.render = () => {
-        return tag(props, ...children)
+        let childObj = children.map((child) => {
+            if (typeof child === 'function') {
+                return generateJSX(child, props, ...child.children)
+            }
+            return child
+        })
+        console.log(childObj)
+        return tag({...props,  children:childObj[0] || childObj})
     }
     node.firstChild = comp.render()
     node.firstChild.htmlNode._key = node._key
@@ -102,6 +109,7 @@ let hasBeenCalled = []
  * @returns  {Object} - The virtual DOM element
  */
 function Element(tag, props, ...children) {
+    console.log(tag)
     !props ? props = {} : null
     if (!props?.['$$key']) {
         props['$$key'] = tag.name || Math.random().toString(36).substring(7)

package/config/index.ts

@@ -26,6 +26,11 @@
  * @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: { 
@@ -46,10 +51,24 @@ 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 = {}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vaderjs",
   "description": "A reactive framework for building fast and scalable web applications",
-  "version": "1.4.2-mpiml56", 
+  "version": "1.4.2-npiml56", 
   "author": {
     "name": "Malikwhitten67",
     "email": "malikwhitterb@gmail.com"

package/plugins/cloudflare/functions/index.js

@@ -8,6 +8,10 @@ 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

@@ -10,10 +10,40 @@ export class DOMParser {
      */
     parseFromString(html) {
         let doc = new Document();
-        return {
-            error: "Not implemented",
-        }
-       
+        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
     }
     /**
      * @description - Returns a string containing the HTML serialization of the element's descendants.
@@ -37,7 +67,7 @@ export class HTMLTextNode {
     }
 
     insertBefore(node) {
-        this.nodeValue = `${node.toString()}${this.nodeValue}`;
+        this.nodeValue = `${node.nodeValue}${this.nodeValue}`;
         return this;
     }
 }
@@ -81,7 +111,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();
@@ -123,7 +153,9 @@ export class HTMLElement {
                         } 
                     })
                     .join(""); 
-                return string; 
+                return string;
+             
+           
             default:
                 break;
         }
@@ -150,8 +182,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;
@@ -319,7 +351,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;
@@ -407,6 +439,9 @@ export class Document {
      * @returns {HTMLElement}
      */
     createElement(nodeData) {
+        if(!nodeData){
+            return new HTMLElement("div", {}, [])
+        }
         if (typeof nodeData === 'string') {
             return new HTMLElement(nodeData, {}, [])
         }
@@ -526,7 +561,17 @@ function handleStyles(styles, nodeEl) {
  */
 export function Element(tag, props = {}, ...children) {
     if(typeof tag === 'function'){
-        let el = tag(props, children)
+        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})
         return el
     }
     if(props === null){
@@ -592,9 +637,12 @@ 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",
@@ -607,7 +655,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

@@ -2,6 +2,7 @@ window.vader = {
     version: '1.0.0'
 }
 globalThis.isServer = false
+globalThis.preRender = false;
 window.hasRan = []
 globalThis.memoizedFunctions = []
 const memoizedRefs = []
@@ -11,40 +12,40 @@ const memoizedRefs = []
  * @param {HTMLElement} newNode 
  * @returns 
  */
-function calculateDiff(oldNode, newNode){  
-    if(oldNode === undefined || newNode === undefined){
+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]))
-             
-        } 
+    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})
+    }
+    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.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})
+        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 
@@ -52,38 +53,51 @@ function calculateDiff(oldNode, newNode){
  * @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
+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,
+    }
+
+    let comp = new Component({ $$key: node._key })
+    tag = tag.bind(comp)
+    comp.render = () => {
+        children = children.flat(Infinity)
+        let childObj = children.map((child) => {
+            if (typeof child === 'function') {
+                return generateJSX(child, props,  child.props.children)
+            }
+            return child
+        })
+       
+        return tag({...props,  children:childObj[0] || childObj})
+    }
+    node.firstChild = comp.render()
+    node.firstChild.htmlNode._key = node._key
     node.firstChild.htmlRoot = node
-    node.firstChild.htmlNode._isRoot = true 
-    node.firstChild.props = props || {}  
+    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
-    
+    node.firstChild.props['key'] = node._key
+    return node.firstChild
+
 
 }
-function handleStyles(styles, nodeEl) { 
+function handleStyles(styles, nodeEl) {
 
     for (let key in styles) {
-        if(typeof styles[key] === 'object'){
+        if (typeof styles[key] === 'object') {
             handleStyles(styles[key], nodeEl)
         }
         nodeEl.style[key] = styles[key];
     }
- 
+
 }
 
 
@@ -95,166 +109,166 @@ let hasBeenCalled = []
  * @param  {...any} children 
  * @returns  {Object} - The virtual DOM element
  */
-function Element(tag, props, ...children){
+function Element(tag, props, ...children) { 
     !props ? props = {} : null
-    if(!props?.['$$key']){
+    if (!props?.['$$key']) {
         props['$$key'] = tag.name || Math.random().toString(36).substring(7)
     }
 
-    if(typeof tag === 'function'){ 
-       return generateJSX(tag, props, children) 
+    if (typeof tag === 'function') {
+        return generateJSX(tag, props, children)
     }
     let node = {
         tag: tag,
         props: props,
-        children: children, 
+        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: []
+    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 }
+            }
         }
-      }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){
+
+    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){
+    if (props.style) {
         handleStyles(props.style, nodeEl)
     }
 
-    if(props.id){
+    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;
-
-       }
+    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)
-      }
-    }
- 
-}
-   
+
+
+    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  
+
+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': 
+            case diff[i].type === 'PROPS':
                 break;
-       }
+        }
     }
 
 }
 let states = {}
-export const useState = (name,   initialValue)  => {}
-export function useRef(name,  initialValue){
+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  {
+    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)){
+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{
+    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})
+
+let effects = [];
+
+export function useEffect(fn, deps) {
+    if (!effects.find((el) => el.fn.toString() === fn.toString())) {
+        effects.push({ fn, deps })
     }
-    else{
+    else {
         let effect = effects.find((el) => el.fn.toString() === fn.toString())
-        if(effect.deps.toString() !== deps.toString()){
+        if (effect.deps.toString() !== deps.toString()) {
             effect.deps = deps
             effect.fn()
         }
@@ -264,169 +278,143 @@ export function  useEffect(fn, deps){
     }
 
 }
-export function useReducer(name, reducer, vnode, initialState){
+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]
+    return [state, dispatch]
 
 }
 
 class Component {
-    constructor(props){
+    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 = []
+        this.passiveProps = {}
     }
 
 
-    setState(newState){
+    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 
+    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': 
+                case diff[i].type === 'PROPS':
                     break;
-           }
+            }
         }
     }
-    calculateDiff(oldNode, newNode){
-        if(oldNode === undefined || newNode === undefined){
+    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]))
-                 
-            } 
+        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})
+        }
+        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.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})
+            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]){
+    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) =>{  
+        let setState = (newValue) => {
+            let dEl = this.firstChild.htmlNode
+            if (dEl.tagName === 'HTML') {
+                dEl = dEl.querySelector('body')
+                dEl.firstChild._key = this._key
+            }
+            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) 
+            }) 
+            let diff = calculateDiff(el, this.render(this.passiveProps).htmlNode.tagName === 'HTML' ? this.render(this.passiveProps).htmlNode.querySelector('body') : this.render(this.passiveProps).htmlNode)
             handleDiff(diff)
-            
-        }  
-        return  [getState, setState] 
+
+        }
+        return [getState, setState]
 
     }
-    useReducer(name, reducer, initialState){
+    useEffect = useEffect
+    useReducer(name, reducer, initialState) {
         let [state, setState] = this.useState(name, initialState)
         let dispatch = (action) => {
-            let newState = reducer(state(), action) 
+            let newState = reducer(state(), action)
             setState(newState)
         }
 
-        return  [state, dispatch]
+        return [state, dispatch]
     }
 
-    render(){
+    render() {
         return null
     }
 
 }
- 
-export async function render(vnode, container, ...passProps){  
-    
-    if(!vnode){
+
+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)}) 
+    let comp = new Component({ $$key: vnode.name || Math.random().toString(36).substring(7) })
     vnode = vnode.bind(comp)
-    comp.render = () =>   {  
-        return vnode(...passProps)
+    if(passProps.length > 0){
+        
+        passProps = {
+            req: passProps[0],
+            res: passProps[1]
+        }
+        comp.passiveProps = passProps
+    }
+    comp.render = () => {  
+        return vnode(comp.passiveProps)
     }
-     
+
     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)
-   
-   
+    container.innerHTML = ''
+    container.replaceWith(comp.firstChild.htmlNode)
+
 }
- 
+
 export default Element

package/plugins/tailwindcss/index.ts

@@ -0,0 +1,93 @@
+//@ts-nocheck
+function checkIFtailwindInstalled() {
+    try {
+      require.resolve('tailwindcss');
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+  
+  
+  export default {
+      name: "tailwind",
+      description: "A plugin to install tailwindcss",
+      once: true,
+      init: async () => {
+          let config = require(process.cwd() + "/vader.config.js").default;
+          const fs = require("fs");
+          const path = require("path");
+          const { exec} = require("child_process");
+          const tailwindConfig = `
+          /** @type {import('tailwindcss').Config} */
+          module.exports = {
+            content: ['./src/**/*.{jsx,tsx,js,ts}', './pages/**/*.{jsx,tsx,js,ts}', './components/**/*.{jsx,tsx,js,ts}'],
+            theme: {
+              ${
+                  config?.tailwind?.theme ? JSON.stringify(config.tailwind.theme, null, 2) : ``
+              }
+              },
+            plugins: [
+               ${
+                  config?.tailwind?.plugins ? config?.tailwind?.plugins.map((plugin) => {
+                      return `require('${plugin}')`
+                  }).join(",") : ``
+               }
+            ]
+          }
+          `;
+          fs.writeFileSync(
+              path.join(process.cwd(), "tailwind.config.js"),
+              tailwindConfig
+          );
+          if (!checkIFtailwindInstalled()) {  
+              console.log(`\x1b[36mwait \x1b[0m  -  installing tailwindcss  & ${config?.tailwind?.plugins ? config?.tailwind?.plugins.length + " plugins" : ""} (First time only)`);
+              let npmPath = process.platform === "win32" ? "npm.cmd" : "npm";
+              Bun.spawnSync({
+                  cmd: [npmPath, "install", "tailwindcss", "postcss", "autoprefixer" , ...config?.tailwind?.plugins || []],
+                  cwd:  process.cwd(),  
+                  stderr: "inherit",
+              })
+              console.log(`\x1b[32msuccess \x1b[0m  - tailwindcss installed`)
+               
+  
+              const postcssConfig = `
+              module.exports = {
+                  plugins: {
+                    tailwindcss: {},
+                    autoprefixer: {},
+                  },
+                }
+              `;
+              fs.mkdirSync(path.join(process.cwd(), "src/public/styles"), {
+                  recursive: true,
+              });
+              fs.writeFileSync(
+                  path.join(process.cwd(), "src/public/styles/tailwind.css"),
+                  `@import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities';`
+              );
+              fs.writeFileSync(
+                  path.join(process.cwd(), "postcss.config.js"),
+                  postcssConfig
+              ); 
+          }
+  
+          if(!fs.existsSync(path.join(process.cwd(), "src/public/styles/tailwind.css"))){
+              fs.mkdirSync(path.join(process.cwd(), "src/public/styles"), {
+                  recursive: true,
+              });
+              fs.writeFileSync(
+                  path.join(process.cwd(), "src/public/styles/tailwind.css"),
+                  `@import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities';`
+              );
+          }
+  
+          let cmd = process.platform === "win32" ? "npx.cmd" : "npx";
+          Bun.spawn({
+              cmd: [ cmd, "tailwindcss", process.cwd() + '/tailwind.config.js' ,  "-i", "src/public/styles/tailwind.css", "-o", config?.tailwind?.output || "public/styles/tailwind.css", "--minify"],
+              cwd: process.cwd(),
+              stdin: "inherit",
+              stderr: "inherit",
+          });
+      },
+  }

package/router/index.ts

@@ -56,7 +56,11 @@ function spawn_ssr_server(config: any ){
          let fileType = handleContentTypes(file)
           if(fs.existsSync(file)){
                  let content = await Bun.file(file).text()
-                 return new Response(content, {status: 200, headers: {'Content-Type': fileType, 'x-powered-by': 'Vader'}})
+                 let data = Buffer.from(content, 'utf-8');
+                 const compressed = Bun.gzipSync(data);
+                 return new Response(compressed, {status: 200, headers: {'Content-Type': fileType, 'x-powered-by': 'Vader', 
+                'Content-Encoding':'gzip',
+                 ...config?.routes.find(route => route.pathname === "*" || route.pathname === url.pathname)?.headers}})
           }
     }
     let routeMatch = routesRouter.match(url.pathname) 
@@ -76,6 +80,7 @@ function spawn_ssr_server(config: any ){
             if(response instanceof Response){ 
                 // set x-powered-by header
                 response.headers.set('x-powered-by', 'Vader')
+                response.headers.set('Content-Type', 'text/html')
                 return response
             }
             throw new Error(`Route ${routeMatch.filePath.split('/routes')[1]} did not return a response in file ${routeMatch.filePath}`)
@@ -89,11 +94,12 @@ function spawn_ssr_server(config: any ){
     }
    }
    let server =  Bun.serve({
-        port:  config.env.PORT || 3000,
-        hostname: config.host.hostname || 'localhost', 
+        port:  config?.env?.PORT || 3000,
+        hostname: config?.host?.hostname || 'localhost', 
         reusePort: true,
         lowMemoryMode: true,
         development: false, 
+        ...(config?.Router?.tls && {tls: {cert: config.Router.tls.cert, key: config.Router.tls.key}}),
         websocket: {
         message(event){
             
@@ -142,7 +148,12 @@ function spawnServer(config: any){
                let fileType = handleContentTypes(file)
                 if(fs.existsSync(file)){
                      let content = await Bun.file(file).text()
-                     return new Response(content, {status: 200, headers: {'Content-Type': fileType, 'x-powered-by': 'Vader'}})
+                     let data = Buffer.from(content, 'utf-8');
+                     const compressed = Bun.gzipSync(data);
+
+                     return new Response(compressed, {status: 200, headers: {'Content-Type': fileType, 'x-powered-by': 'Vader',  'x-powered-by': 'Vader', 
+                     'Content-Encoding':'gzip',
+                     'Accept-Encoding': 'gzip, deflate, br','Connection': 'keep-alive', 'Cache-Control': 'no-cache', 'Pragma': 'no-cache', 'Expires': '0',  ...config?.Router?.headers}})
                 }
             }
             let route = router.match(url.pathname)
@@ -161,8 +172,13 @@ function spawnServer(config: any){
                     window.location.reload()
                 }
               </script>
-              `
-              return new Response(html, {status: 200, headers: {'Content-Type': 'text/html', 'x-powered-by': 'Vader'}})
+              ` 
+              const data = Buffer.from(html, 'utf-8');
+              const compressed = Bun.gzipSync(data);
+              return new Response(compressed, {status: 200, headers: {'Content-Type': 'text/html', 'x-powered-by': 'Vader', 
+              'Content-Encoding':'gzip',
+              'Accept-Encoding': 'gzip, deflate, br','Connection': 'keep-alive', 'Cache-Control': 'no-cache', 'Pragma': 'no-cache', 'Expires': '0',
+              ...config?.Router?.headers}})
             }
             return new Response('Not Found', {status: 404})
         }

package/server/index.js

@@ -48,7 +48,21 @@ class Component {
 
 }
 export async function renderToString(element, args = []) {   
-    let data = typeof element === 'function' ? await element(args) : element
+    globalThis.isServer = true
+    globalThis.preRender = true
+    let data = typeof element === 'function' ? await element(args) : element  
+    if(data?.tagName === 'html'){
+       let body = data.querySelector('body') || new Document().createElement('body')
+       let innerHTML = body.innerHTML
+       innerHTML = `${innerHTML}`
+       body.tagName = 'div'
+       body.setAttribute('id', 'root')
+       body.innerHTML = innerHTML
+       data.removeChild(data.querySelector('body'))
+       data.appendChild(body)
+    }else if(data){ 
+        data.firstChild.setAttribute('id', 'root')
+    }
     let doc = new Document()
     let el = doc.createElement(data)