vaderjs 1.4.2-kml56 → 1.4.2-mpiml56

package/binaries/Kalix/index.js

@@ -67,7 +67,7 @@ export class HTMLTextNode {
     }
 
     insertBefore(node) {
-        this.nodeValue = `${node.toString()}${this.nodeValue}`;
+        this.nodeValue = `${node.nodeValue}${this.nodeValue}`;
         return this;
     }
 }
@@ -155,12 +155,7 @@ export class HTMLElement {
                     .join(""); 
                 return string;
              
-            case "innerText":
-                return this.children
-                    .map((child) => {
-                        return child.toString();
-                    })
-                    .join("");
+           
             default:
                 break;
         }
@@ -187,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;
@@ -444,6 +439,9 @@ export class Document {
      * @returns {HTMLElement}
      */
     createElement(nodeData) {
+        if(!nodeData){
+            return new HTMLElement("div", {}, [])
+        }
         if (typeof nodeData === 'string') {
             return new HTMLElement(nodeData, {}, [])
         }

package/binaries/compiler/main.js

@@ -261,7 +261,7 @@ export async function Compile(){
               }  
               copy = copy.replace(old, newLine)
             break;
-            case !line.includes('import') && line.includes('useState') && !line.includes('let useState'): 
+            case !line.includes('import') && line.includes('useState') && !line.includes('let useState') && !line.includes('var useState') && !line.includes('console'):
             let varType = line.split('[', 1)[0];
             let before =  line.split('useState(')[1].split(',')[0]; 
             let key = line.split('[')[1].split(',')[0]; 
@@ -331,19 +331,32 @@ export async function Compile(){
           old = line; 
           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)
+          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)
-           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'): 
+              
+              let filePath = line.split('from')[1].trim().replace(/'/g, '').replace(/"/g, '').replace(';', '').replaceAll('../','').replace(/\\/g, '/')
+              let contents = fs.readFileSync(filePath, 'utf8')
+              // remove default exports
+
+              if(contents.match(/export\s+default\s+/g)){
+                contents = contents.replace(/export\s+default\s+/g, '')
+              }
+              
+              copy = copy.replace(line, contents)
+            
+            break;
+             
         }
       }
       if(!contents.includes('import Element')){ 
@@ -352,6 +365,7 @@ export async function Compile(){
       return copy
   }    
    
+
   
    
    async function gen(){ 
@@ -382,9 +396,11 @@ export async function Compile(){
              'jsxDev':JSON.stringify('this.Element'),
              'jsx':  JSON.stringify('this.Element'),
            }
-       }).transformSync(await Bun.file(process.cwd() + file).text())  
-        let variables = grabVariables(data, file)
-       let contents = await main(data, file)
+       })
+       let contents =  await Bun.file(process.cwd() + file).text() 
+        contents = data.transformSync(await main(contents, file)) 
+        contents = contents.split('\n').filter((line) => !line.includes('vaderjs/client') && !line.includes('vaderjs')).join('\n') 
+        let variables = grabVariables(contents, file) 
         
       variables.forEach((variable) => { 
         contents.split('\n').forEach((line, index) => {
@@ -408,10 +424,14 @@ export async function Compile(){
               fs.mkdirSync(process.cwd() + '/build/pages/' + file.split('/').slice(0, -1).join('/'), { recursive: true })
               file = '/build/pages/' + file.replace('.tsx', '.js').replace('.ts', '.js').replace('.jsx', '.js')
               break;
+            case isUsingProvider === 'vercel': 
+              fs.mkdirSync(process.cwd() + '/build/pages/' + file.split('/').slice(0, -1).join('/'), { recursive: true })
+              file = '/build/pages/' + file.replace('.tsx', '.js').replace('.ts', '.js').replace('.jsx', '.js')
+              break;
             default:
               file = '/build/' + file.replace('./', '').replace('.tsx', '.js').replace('.ts', '.js').replace('.jsx', '.js') 
            }
-        }  
+        }    
         fs.writeFileSync(process.cwd() + file, contents)
 
          
@@ -425,6 +445,53 @@ export async function Compile(){
         await Bun.write(process.cwd() + '/build/src/router.js',  await Bun.file(process.cwd() + '/node_modules/vaderjs/client/runtime/router.js').text())
       }  
     
+      // handle src files
+      const src = new Glob("/src/**/*.{ts,tsx,js,jsx}", {
+        absolute: true,
+        ignore: ["**/node_modules/**"]
+      });
+      let srcArray = await Array.fromAsync(src.scan())
+      srcArray = srcArray.map((file) => {
+        file = file.replaceAll('\\', '/')
+        file ='./' + file
+        return file
+      })
+
+      for(var file of srcArray){
+        let data =  new Bun.Transpiler({
+          loader: "tsx",
+           tsconfig: {
+             'compilerOptions':{
+               'jsx':'react',
+               'jsxFactory': 'this.Element'
+             }
+           },
+           define:{ 
+             
+             'jsxDev':JSON.stringify('this.Element'),
+             'jsx':  JSON.stringify('this.Element'),
+           }
+       }).transformSync(await Bun.file(process.cwd() + file).text())  
+        let variables = grabVariables(data, file)
+        let contents = await main(data, file)
+        variables.forEach((variable) => { 
+          contents.split('\n').forEach((line, index) => {
+            if(line.includes(variable) && !line.includes('import') && !line.includes('let') && !line.includes('var') && !line.includes('const') 
+            && !line.includes(variable + '()') &&
+            !line.includes('.' + variable) && 
+            // not an occurence like variable1, variable2, variable3 or variabless
+            !line.match(new RegExp(variable + '[0-9]')) && !line.match(new RegExp(variable + '(w+)'))
+            && !line.includes(variable + ':')  
+            ){ 
+              let newLine = line.replaceAll(variable, variable + '()')
+              contents = contents.replace(line, newLine)
+            }
+          });
+        })
+        file = file.split('/src')[1]
+         
+        fs.writeFileSync(process.cwd() +  '/build/src' + file, contents)
+      }
        
       resolve()
     })

package/binaries/watcher/hmr.js

@@ -1,4 +1,5 @@
 import { watch } from 'fs'
+import fs from 'fs'
 globalThis.hasLogged = false
 export function watchDir(cwd, _){
     process.chdir(cwd)
@@ -12,6 +13,9 @@ export function watchDir(cwd, _){
     let paths = ['src', 'pages', 'public', 'routes', 'vader.config.ts']
     for(var i in paths){
         let path = paths[i]
+        if(!fs.existsSync(process.cwd() + '/' + path)){ 
+            continue;
+        }
         watch(process.cwd() + '/' + path, { recursive: true, absolute:true }, (event, filename) => { 
            if(filename && !filename.includes('node_modules') && !globalThis.hasLogged){ 
             console.log(`\x1b[36mwait \x1b[0m  - compiling (client and server)`)

package/client/runtime/index.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,43 @@ 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 = () => {
+        return tag(props, ...children)
+    }
+    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 +101,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,154 +270,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.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
     }
-    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]
 
     }
     useEffect = useEffect
-    useReducer(name, reducer, initialState){
+    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/package.json

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

package/plugins/ssg/index.js

@@ -1,5 +1,5 @@
 import * as Bun from 'bun'
-import { Element, Document, DOMParser} from 'vaderjs/binaries/Kalix/index.js'
+import {  Document, DOMParser} from 'vaderjs/binaries/Kalix/index.js'
 import { renderToString } from '../../server'
 import fs from 'fs'
 let routes = new Bun.FileSystemRouter({
@@ -11,35 +11,77 @@ async function generate(){
   let config = await import(process.cwd() + '/vader.config.js').then((config) => { return config.default })
   let provider = config?.host?.provider   
 
-  let providerRoutes = []
+  let providerRoutes = [] 
+    Object.keys(routes).map((route) => {
+      if(route.includes('[')){
+               
+               let root = Object.keys(routes).find((r) => {
+                   return r === '/'
+               } ) 
+            
+                
+                let param = route.split('/[')[1].split(']')[0] 
+                let p = {}
+                let existingParams = routes[root]?.params || []
+                existingParams.push({
+                    isCatchAll: route.includes('[[catchall]]') ? true : false,  
+                    name: param,
+                    file: routes[route],
+                    baseFolder: route.split('[')[0]
+                }) 
+                p.file = routes[root]
+                p.params = existingParams
+                routes[root] = p 
+                delete routes[route] 
+            
+      }
+  })
   for(var i in routes){
-    let path = i 
+    let path = i  
     let file = routes[i]
-    let comp =  require(file).default
-    let document = new Document()
-    let div = document.createElement('div')
-    div.setAttribute('id', 'root') 
-    let dom =  await renderToString(comp)   
-    div.setContent(dom) 
-    dom = div.toString("outerHTML")   
+    if(typeof file === 'object'){
+        file = file.file
+    } 
+    let comp =  require(file).default 
+    if(!comp){
+        continue;
+    } 
+      
+    let dom =  await renderToString(comp)
+    let isHtml = dom.includes('<html')  
     let folder = path.split('/pages')[0]
     let newPath = process.cwd() + '/build' + folder + '/index.html'
-    let name = comp.name
+    let name = comp.name || 'App'
     file = file.replace(/\\/g, '/').replace('\/\/', '/').replace(process.cwd().replace(/\\/g, '/'), '').split('/pages')[1].replace('.tsx', '.js').replace('.jsx', '.js')
-    let isParamRoute = path.includes('[')
+    let isParamRoute = routes[i].params ? true : false 
     let baseFolder = ''
     if(isParamRoute){
-        baseFolder = path.split('[')[0]
+        let route  = routes[i].params[0]
+        baseFolder =  i.split('[')[0] 
         let providerPath;
         switch(true){
             case provider === 'vercel':
-                 providerPath = `${baseFolder}:${path.split('[')[1].split(']')[0]}`
-                 providerRoutes.push({source: providerPath, dest: `${path}/index.html`}) 
+                 if(route.isCatchAll){
+                    providerPath = `${baseFolder}/*`
+                    providerRoutes.push({source: providerPath, destination: `${path}/index.html`})
+                    break;
+                 }
+                 providerPath = `${baseFolder}:${route.name}`
+                 providerRoutes.push({source: providerPath, dest: `/`}) 
                  break;
             case provider === 'nginx': 
                 providerPath = `RewriteRule ^${baseFolder.replace('/', '')}.*$ ${path}/index.html [L]`
                 providerRoutes.push(providerPath)
                 break;
+            case provider === 'cloudflare':
+                if(route.isCatchAll){
+                    providerPath = `${baseFolder}/*`
+                    providerRoutes.push({source: providerPath, destination: `${path}/index.html`})
+                    break;
+                }
+                providerPath = `${baseFolder}/*`
+                providerRoutes.push({source: providerPath, destination: `${path}/index.html`})
+                break;
         }
     }else{
         let providerPath;
@@ -55,17 +97,48 @@ async function generate(){
                 providerPath = `RewriteRule ^${path.replace('/', '')}/$ ${path}/index.html [L]`
                 providerRoutes.push(providerPath)
                 break;
+           
             
         }
-    }
-    dom = dom + `
-    <script type="module">
+    } 
+    dom = preRender ? dom : '<div id="root"></div>' + `
+    <script type="module"> 
+        
        import { render } from '/src/client.js'
-       import ${name} from '/pages/${file.replace(process.cwd(), '')}'
+       let ${name} = await import('/pages/${file.replace(process.cwd(), '')}')
+         if(${name}.default){
+            ${name} = ${name}.default
+        }else{
+                let keys = Object.keys(${name})
+                ${name} = ${name}[keys[0]]
+        }
        import Kuai from '/src/router.js'
        let kuai = new Kuai()
+       ${
+         routes[i].params ? 
+         routes[i].params.map((param) => {
+                let name = param.name
+                let file = param.file.replace(/\\/g, '/').replace('\/\/', '/').replace(process.cwd().replace(/\\/g, '/'), '').split('/pages')[1].replace('.tsx', '.js').replace('.jsx', '.js')
+                return `
+                // handle if default or named
+                let ${name} = await import('/pages/${file}')
+                if(${name}.default){
+                    ${name} = ${name}.default
+                }else{
+                     let keys = Object.keys(${name})
+                     ${name} = ${name}[keys[0]]
+                }
+                kuai.get('${param.baseFolder}:${name}', (c) => {
+                    render(${name}, ${
+                    isHtml ? `document.documentElement`: `document.body.firstChild`
+                    }, c.req, c.res)
+                })`
+         }).join('\n') : ''
+       }
        kuai.get('${path}', (c) => {
-            render(${name}, document.getElementById('root'), c.req, c.res)
+            render(${name}, ${
+            isHtml ? `document.documentElement`: `document.body.firstChild`
+            }, c.req, c.res)
        })
 
        kuai.listen()
@@ -100,7 +173,7 @@ Header add x-powered-by "vaderjs"
 </IfModule>
         `
          fs.writeFileSync(process.cwd() + '/.htaccess', full)
-        break;
+        break; 
   }
   console.log(`\x1b[32mSuccess\x1b[0m - Static files generated`)
 

package/router/index.ts

@@ -137,10 +137,8 @@ function spawnServer(config: any){
             if(url.pathname.includes('.')){
                url.pathname = url.pathname.replace('/\/', '/')
                url.pathname = url.pathname.replace('/build/', '') 
-               if(url.pathname.includes('/build')){
-                     url.pathname = url.pathname.replace('/build', '')
-               }
-               let file = process.cwd() + '/build' + url.pathname   
+               
+               let file = process.cwd() + '/build' + url.pathname  
                let fileType = handleContentTypes(file)
                 if(fs.existsSync(file)){
                      let content = await Bun.file(file).text()
@@ -149,8 +147,21 @@ function spawnServer(config: any){
             }
             let route = router.match(url.pathname)
             if(route){ 
+              let isParamRoute = route.filePath.includes('[') && route.filePath.includes(']')
               let path = route.filePath.split('/pages')[1].replace('.jsx', '.js').replace('.tsx', '.js').replace('.ts', '.js')  
+              path = isParamRoute ?  'index.html' : path
               let html = fs.readFileSync(process.cwd() + `/build/${path.replace('.js', '.html')}`).toString()
+              html = html + `
+              <script>
+               let ws = new WebSocket('ws://${config.host.hostname || 'localhost'}:${config.env.PORT || 3000}')
+                ws.onmessage = function(event){
+                     console.log(event.data)
+                }
+                ws.onclose = function(event){
+                    window.location.reload()
+                }
+              </script>
+              `
               return new Response(html, {status: 200, headers: {'Content-Type': 'text/html', 'x-powered-by': 'Vader'}})
             }
             return new Response('Not Found', {status: 404})
@@ -171,7 +182,7 @@ export default {
          if(!globalThis.isListening){ 
              let config = require(process.cwd() + '/vader.config.js').default  
              if(process.env.mode === 'production'){
-                console.log(`Listening at - http://${config.host.hostname}:${config.env.PORT}`)
+                console.log(`\x1b[32msuccess \x1b[0m- listening on port ${config.env.PORT || 3000}`)
                 spawnServer(config)
              }  
              config?.env?.SSR ? spawn_ssr_server(config ) : spawnServer(config)  

package/server/index.js

@@ -47,7 +47,7 @@ class Component {
     }
 
 }
-export async function renderToString(element, args = []) {  
+export async function renderToString(element, args = []) {   
     let data = typeof element === 'function' ? await element(args) : element
     let doc = new Document()
     let el = doc.createElement(data)