vaderjs 1.3.3-763562-hotfix → 1.3.3-7722242

package/package.json

@@ -2,7 +2,7 @@
   "name": "vaderjs",
   "description": "A Reactive library aimed to helping you build reactive applications inspired by react.js",
   "module": "vader.js",
-  "version": "1.3.3-763562-hotfix",
+  "version": "1.3.3-7722242",
   "bin": {
     "vader": "./vader.js"
   },

package/vader.js

@@ -143,9 +143,6 @@ function Compiler(func, file) {
             isJSXComponent = elementTag.match(/^[A-Z]/) ? true : false;
           }
         });
-        if (isJSXComponent) {
-          continue
-        }
         // add ; after newlines  
 
 
@@ -242,34 +239,34 @@ function Compiler(func, file) {
         continue;
       }
       let old = spread;
-      spread = spread.trim().replace(/\s+/g, " ");
+      spread = spread.trim().replace(/\s+/g, " "); 
       // re,pve $={ and }
       spread = spread.replace(/\s*\$\s*=\s*{\s*{/gs, '')
-
+      
       // replace trailing }
-      spread = spread.replace(/}}\s*$/, '').replace(/}\s*}$/, '')
-      let splitByCommas = spread.split(/,(?![^{}]*})/gs)
+      spread = spread.replace(/}}\s*$/, '').replace(/}\s*}$/, '') 
+      let splitByCommas =  spread.split(/,(?![^{}]*})/gs) 
       // remove empty strings
       splitByCommas = splitByCommas.filter((e) => e.split(':')[0].trim().length > 0)
-      splitByCommas = splitByCommas.map((e, index) => {
+      splitByCommas = splitByCommas.map((e, index) => { 
         let key = e.split(':')[0].trim()
         switch (true) {
           case e.includes('function') && !e.includes('this.bind') || e && e.includes('=>') && !e.includes('this.bind'):
             let value = e.split(':')[1].trim()
-            let ref = Math.random().toString(36).substring(2).split('').filter((e) => !Number(e)).join('');
+            let ref = Math.random().toString(36).substring(2).split('').filter((e) => !Number(e)).join(''); 
             value = `this.bind(${value}, false, "${ref}", "")`
             e = `${key}="\${${value}}"`
             break;
-          case e.includes('style:'):
-            let v2 = e.split('style:')[1].trim().replace(/,$/, '')
-            v2 = v2.replace(/,$/, '')
+          case  e.includes('style:'):
+            let v2 = e.split('style:')[1].trim().replace(/,$/, '') 
+            v2 = v2.replace(/,$/, '') 
             e = `${key}="\${this.parseStyle(${v2})}"`
-            break;
-
-          default:
-            let v = e.split(':')
+           break;
+           
+          default:  
+            let v = e.split(':') 
             key = v[0].trim()
-            // remove key from v
+             // remove key from v
             v.shift()
             v = v.join(' ')
             e = `${key}="\${${v}}"`
@@ -280,7 +277,7 @@ function Compiler(func, file) {
 
         return e;
       });
-
+ 
 
       let newSpread = splitByCommas.join(' ').trim().replace(/,$/, '');
 
@@ -351,7 +348,7 @@ function Compiler(func, file) {
       newAttributes.push(attribute);
       for (let key in attributes) {
 
-        let value = attributes[key];
+        let value = attributes[key]; 
         let oldvalue = value;
         if (value && !value.new) {
 
@@ -482,16 +479,11 @@ function Compiler(func, file) {
 
       let name = component.split("<")[1].split(">")[0].split(" ")[0].replace("/", "");
       let componentAttributes = component.split("<")[1].split(">")[0].split(" ").join(" ").replace(name, "").trim();
-      // catchall = "" ={} =[]
-
-
-      let props = component.split("<")[1].split(">")[0]
+      const dynamicAttributesRegex = /(\w+)(?:="([^"]*?)"|='([^']*?)'|(?:=\{([^}]*?)\})?|(?:=\{(.*?)*\})?|(?:={([^}]*?)})?|(?:{([^}]*?)})?|(?:}))?|\$=\s*\{\s*\{\s*([^]*?)\s*\}\s*\}/gs;
 
 
-      const dynamicAttributesRegex = /([a-zA-Z0-9_-]+)\s*=\s*("(?:[^"\\]*(?:\\.[^"\\]*)*)"|'(?:[^'\\]*(?:\\.[^'\\]*)*)'|\{(?:[^{}]|(?:\{(?:[^{}]|(?:\{.*.*\})*)*\})*)*\}|(?:\([^)]*\)|()\s*=>\s*(?:\{.*\})?|\{[^}]*\})|\[[^\]]*\])/gs;
-
-      const attributeObject = {};
 
+      let props = component.match(dynamicAttributesRegex)
 
       let filteredProps = [];
       let isWithinComponent = false;
@@ -500,31 +492,76 @@ function Compiler(func, file) {
 
       let $_ternaryprops = []
 
-      let match;
-      let propstring = ''
-      // props right now is just a string with all of them on one line and a space between each
-      while ((match = dynamicAttributesRegex.exec(props)) !== null) {
-        let str = match[0].trim().replace(/\s+/g, " ");
-        if (!str.includes('=')) {
-          continue
-        }
-        str = str.split('=')
-        let key = str[0].trim()
-        let value = str[1].trim()
-        if (value.startsWith('"') && !value.endsWith('"') || value.startsWith("'") && !value.endsWith("'")
-          || value.startsWith('`') && !value.endsWith('`')) {
-          // wrap in respective quotes
-          value = value + value[0]
+      for (let prop of props) {
+
+        if (prop === componentName) {
+
+          isWithinComponent = true;
+          filteredProps.push(prop);
+        } else if (isWithinComponent && prop.includes('=')) {
+
+          if (prop.startsWith('$=')) {
+            let old = prop 
+            prop = prop.replace(/\$\s*=\s*\{\s*\{\s*([^]*?)\s*\}\s*\}/gs, '$1') 
+            component = component.replace(old, '')
+            componentAttributes = componentAttributes.replace(prop, '') 
+            $_ternaryprops.push(prop)
+
+          }
+          else if (prop.includes('${')) {
+
+
+            prop = prop.replace('="', ':')
+            if (prop.includes('${')) {
+              prop = prop.replace('="', ':')
+              prop = prop.replace('${', '')
+            }
+            if (prop.includes('="${{')) {
+              prop = prop.replace('${{', '{')
+              prop = prop.replace('}}', '}')
+              prop = prop.replace('="', ':')
+              prop = prop.replace('}"', '}')
+            }
+
+          }
+          if (prop.includes('={')) {
+            let value = prop.split('={')
+            let isObj = value[1].match(/^{.*}$/gs) ? true : false
+            if (!isObj) {
+              // remove trailing }
+              value[1] = value[1].replace(/}\s*$/, '')
+            }
+
+            if (value[0] == 'style' && isObj) {
+              value[1] = `this.parseStyle(${value[1]})`
+            }
+            prop = `${value[0]}:${value[1]}`
+          }
+
+          if (prop.includes('function') || prop.includes('=>')) {
+            // parse 'function' to function 
+            prop = prop.replace("'", '')
+
+            if (prop.endsWith("}'")) {
+              prop = prop.replace("}'", '}')
+
+            }
+
+            prop = prop.replace('=function', ':function')
+          }
+
+          filteredProps.push(prop);
+
+
+
+        } else if (isWithinComponent && prop.includes('}')) {
+
         }
-        let isObject = value.startsWith('{{') && value.endsWith('}}')
-        if (isObject) {
-          value = value.split('{{')[1].split('}}')[0].trim()
-          value = `{${value}}`
-        } else {
-          // remove starting { and ending } using regex
-          value = value.replace(/^{/, '').replace(/}$/, '')
+
+
+        else {
+          isWithinComponent = false;
         }
-        propstring += `${key}:${value},`
       }
       component = component.replaceAll(/\s+/g, " ");
 
@@ -535,7 +572,7 @@ function Compiler(func, file) {
 
       let children = new RegExp(`<${name}[^>]*>([^]*)<\/${name}>`, 'gs').exec(component)?.[1] || null;
 
-
+      props = filteredProps.join(',').replace(/\s+/g, " ").trim().replace(/,$/, '')
 
       let savedname = name;
 
@@ -568,15 +605,24 @@ function Compiler(func, file) {
 
 
 
-      propstring = propstring.replace(/,$/, '')
+
+      props = props.replaceAll(`,${savedname}`, '').replaceAll(savedname, '')
+      if (props.startsWith(',')) {
+        props = props.replace(',', '')
+      }
+      props = props.replaceAll("='", ":'")
+        .replaceAll('=`', ':`')
+        .replaceAll('="', ':"')
+        .replaceAll('={', ':')
 
 
       /**
        * @memoize - memoize a component to be remembered on each render and replace the old jsx
        */
 
+
       let replace = "";
-      replace = `\${this.memoize(this.createComponent(${savedname}, {${propstring}}, [\`${myChildrens.join('')}\`]))}`;
+      replace = `\${this.memoize(this.createComponent(${savedname}, {${props}}, [\`${myChildrens.join('')}\`]))}`;
 
 
       body = body.replace(before, replace);
@@ -592,49 +638,47 @@ function Compiler(func, file) {
   let replaceMents = [];
 
 
-  if(imports){
-    for (let match of imports) {
-      let path = match.split('from')[1].trim().replace(/'/g, '').replace(/"/g, '').trim()
-      switch (true) {
-        case path && !path.includes('./') && !path.includes('/vader.js') && !path.includes('/vaderjs/client') && !path.startsWith('src') && !path.startsWith('public') && !path.includes('http') && !path.includes('https'):
-          let componentFolder = fs.existsSync(process.cwd() + '/node_modules/' + path) ? process.cwd() + '/node_modules/' + path : process.cwd() + '/node_modules/' + path.split('/')[0]
-          componentFolder = componentFolder.split(process.cwd())[1]
-          if (!fs.existsSync(process.cwd() + componentFolder)) {
-            throw new Error('Could not find ' + path + ' at ' + match + ' in file ' + file)
-          }
-  
-          if (!fs.existsSync(process.cwd() + '/dist/src/' + componentFolder.split('/').slice(2).join('/'))) {
-            fs.mkdirSync(process.cwd() + '/dist/src/' + componentFolder.split('/').slice(2).join('/'), { recursive: true })
-          }
-  
-          let baseFolder = componentFolder.split('node_modules')[1].split('/')[1]
-          let glp = globSync('**/**/**/**.{jsx,js}', {
-            cwd: process.cwd() + '/node_modules/' + baseFolder + '/',
-            absolute: true,
-            recursive: true
-          })
-          for (let file of glp) {
-            let text = fs.readFileSync(file, "utf8");
-            if (!file.endsWith('.js') && file.endsWith('.jsx')) {
-              text = Compiler(text, file);
-  
-            }
-            let dest = file.split('node_modules')[1]
-            dest = dest.split(baseFolder)[1]
-            writer(process.cwd() + '/dist/src/' + baseFolder + dest, text)
-            let importname = match.split('import')[1].split('from')[0].trim()
-            let oldImportstring = match.split('from')[1].trim().replace(/'/g, '').replace(/"/g, '').trim()
-            let newImport = `/src/${baseFolder + dest}`
-            newImport = newImport.replaceAll('.jsx', '.js').replaceAll('\\', '/')
-            replaceMents.push({ match: oldImportstring, replace: newImport })
-            console.log(`📦 imported Node Package  ${baseFolder} `)
+  for (let match of imports) {
+    let path = match.split('from')[1].trim().replace(/'/g, '').replace(/"/g, '').trim()
+    switch (true) {
+      case path && !path.includes('./') && !path.includes('/vader.js') && !path.includes('/vaderjs/client') && !path.startsWith('src') && !path.startsWith('public') && !path.includes('http') && !path.includes('https'):
+        let componentFolder = fs.existsSync(process.cwd() + '/node_modules/' + path) ? process.cwd() + '/node_modules/' + path : process.cwd() + '/node_modules/' + path.split('/')[0]
+        componentFolder = componentFolder.split(process.cwd())[1]
+        if (!fs.existsSync(process.cwd() + componentFolder)) {
+          throw new Error('Could not find ' + path + ' at ' + match + ' in file ' + file)
+        }
+
+        if (!fs.existsSync(process.cwd() + '/dist/src/' + componentFolder.split('/').slice(2).join('/'))) {
+          fs.mkdirSync(process.cwd() + '/dist/src/' + componentFolder.split('/').slice(2).join('/'), { recursive: true })
+        }
+
+        let baseFolder = componentFolder.split('node_modules')[1].split('/')[1]
+        let glp = globSync('**/**/**/**.{jsx,js}', {
+          cwd: process.cwd() + '/node_modules/' + baseFolder + '/',
+          absolute: true,
+          recursive: true
+        })
+        for (let file of glp) {
+          let text = fs.readFileSync(file, "utf8");
+          if (!file.endsWith('.js') && file.endsWith('.jsx')) {
+            text = Compiler(text, file);
+
           }
-  
-  
-          break;
-        default:
-          break;
-      }
+          let dest = file.split('node_modules')[1]
+          dest = dest.split(baseFolder)[1]
+          writer(process.cwd() + '/dist/src/' + baseFolder + dest, text)
+          let importname = match.split('import')[1].split('from')[0].trim()
+          let oldImportstring = match.split('from')[1].trim().replace(/'/g, '').replace(/"/g, '').trim()
+          let newImport = `/src/${baseFolder + dest}`
+          newImport = newImport.replaceAll('.jsx', '.js').replaceAll('\\', '/')
+          replaceMents.push({ match: oldImportstring, replace: newImport })
+          console.log(`📦 imported Node Package  ${baseFolder} `)
+        }
+
+
+        break;
+      default:
+        break;
     }
   }
 
@@ -827,8 +871,6 @@ const glb = await glob("**/**/**/**.{jsx,js}", {
   absolute: true,
   recursive: true
 });
-let hasRendered = []
-
 async function Build() {
   globalThis.isBuilding = true
   console.log(globalThis.isProduction ? 'Creating Optimized Production Build\n' : '')
@@ -843,133 +885,191 @@ async function Build() {
 
   function ssg(routes = []) {
     globalThis.isBuilding = true
-    let server = http.createServer((req, res) => {
-      let route = routes.find((e) => e.url === req.url)
-      if (route) {
-        let document = globalThis.routeDocuments.find((e) => e.url === req.url)
-        res.writeHead(200, { 'Content-Type': 'text/html' });
-        res.end(document.document);
-      } else {
-        const filePath = process.cwd() + '/dist/' + req.url
-
-        fs.readFile(filePath, (err, data) => {
-          if (err) {
-            res.writeHead(404, { 'Content-Type': filePath.includes('js') ? 'text/javascript' : 'text/html' });
-            res.end('File not found');
+    routes.forEach(async (route) => {
+      if (route.url.includes(':')) {
+        return
+      }
+      let equalparamroute = routes.map((e) => {
+        if (e.url.includes(':')) {
+          let url = e.url.split('/:')[0]
+          if (url && route.url === url) {
+            return e
           } else {
-            res.writeHead(200, { 'Content-Type': filePath.includes('js') ? 'text/javascript' : 'text/html' });
-            res.end(data);
+            return null
+
           }
-        });
-      }
-    });
+        }
+        return null
+      }).filter(Boolean)
+      let document = `
+      <!DOCTYPE html>
+      <html lang="en">
+      <head>
+          <script>
+          window.routes = JSON.parse('${JSON.stringify(routes)}')
+            
+         
+          </script>
+          <script id="isServer">
+          window.isServer = true
+          </script>
+          <meta charset="UTF-8">
+          <meta name="viewport" content="width=device-width,initial-scale=1.0">
+          <script type="module" id="meta">
+          window.history.pushState({}, '', '${route.url}') 
+          
+         </script>
+         <script type="module" id="router">
+         import VaderRouter from '/router.js' 
+         const router = new VaderRouter('${route.url}', 3000)
+         router.get('${route.url}', async (req, res) => {
+           try{
+            let module = await import('/${route.fileName.replace('.jsx', '.js')}')
+            if(Object.keys(module).includes('$prerender') && !module.$prerender){
+              document.head.setAttribute('prerender', 'false')
+            }
+            res.render(module, req, res, module.$metadata)
+           }
+           catch(error){
+            let errorMessage = {
+              message: error.message,
+              name: error.name,
+              stack: error.stack,
+              path: window.location.pathname
+            };
+          
+            
+            document.documentElement.setAttribute('error', JSON.stringify(errorMessage));
+            throw new Error(error)
+           }
+         }) 
+         ${equalparamroute.length > 0 ? equalparamroute.map((e) => {
 
-    let port = 12000
-    server.on('error', (err) => {
-      if (err.code === 'EADDRINUSE') {
-        setTimeout(() => {
-          server.close();
-          server.listen(++port);
-        }, 1000);
-      }
-    })
 
-    const browser = puppeteer.launch({
-      headless: "new", args: ['--no-sandbox', '--disable-setuid-sandbox'],
-      warning: false,
-    })
-    server.listen(port);
 
-    routes.forEach(async (route) => {
-      if (route.url.includes(':')) {
-        return
-      }
+        return `router.get('${e.url}', async (req, res) => {
+            let module = await import('/${e.fileName.replace('.jsx', '.js')}')
+            res.render(module, req, res, module.$metadata)
+         })\n`
+      }) : ''}
+         router.listen(3000)
+         
+     </script> 
+      </head>
+      <body>
+          <div id="root"></div>
+      </body>  
+      
+      
+      </html>
+    `;
+
+      // generate random but common ports
+      let port = Math.floor(Math.random() * (65535 - 49152 + 1) + 49152)
+
+      const server = http.createServer((req, res) => {
+
+        if (req.url === '/') {
+          res.writeHead(200, { 'Content-Type': 'text/html' });
+          res.end(document);
+        } else {
+          // Serve static files (adjust the file paths based on your project structure)
+          const filePath = process.cwd() + '/dist/' + req.url
+
+          fs.readFile(filePath, (err, data) => {
+            if (err) {
+              res.writeHead(404, { 'Content-Type': filePath.includes('js') ? 'text/javascript' : 'text/html' });
+              res.end('File not found');
+            } else {
+              res.writeHead(200, { 'Content-Type': filePath.includes('js') ? 'text/javascript' : 'text/html' });
+              res.end(data);
+            }
+          });
+        }
+      });
+
+      server.listen(port)
+      server.on('error', (err) => {
+        if (err.code === 'EADDRINUSE') {
+          console.log(`Port ${port} is in use, trying another port...`);
+          setTimeout(() => {
+            server.close();
+            server.listen(++port);
+          }, 1000);
+        }
+      })
+
       globalThis.listen = true;
 
+      const browser = await puppeteer.launch({
+        headless: "new", args: ['--no-sandbox', '--disable-setuid-sandbox'],
+        warning: false,
+      })
       try {
 
         route.url = route.url.replaceAll(/\/:[a-zA-Z0-9_-]+/gs, '')
-        let page = (await browser).newPage()
-        page.then(async (page) => {
-          page.on('error', (err) => {
-            console.error('JS ERROR:', JSON.parse(err));
-          });
-          try {
-            page.on('pageerror', async err => {
-              let errorObj = JSON.parse(await page.evaluate(() => document.documentElement.getAttribute('error')) || '{}')
-              console.log('\x1b[31m%s\x1b[0m', 'Compiler Error:', errorObj)
-
-              console.log('\x1b[31m%s\x1b[0m', 'Error:', err)
-            });
-          } catch (error) {
-            page.close()
-          }
-          page.on('crash', () => {
-            console.error(`Render process crashed for ${route.url}`)
-          });
-          page.on('requestfailed', request => {
-            console.error('REQUEST FAILED:', request.url(), request.failure().errorText);
+        let page = await browser.newPage();
+        // Handle browser errors
+        page.on('error', (err) => {
+          console.error('BROWSER ERROR:', JSON.parse(err));
+        });
+      
+        try {
+          page.on('pageerror', async err => { 
+            let errorObj =  JSON.parse(await page.evaluate(() => document.documentElement.getAttribute('error')) || '{}') 
+            console.log('\x1b[31m%s\x1b[0m', 'Compiler Error:',  errorObj)
+
           });
-          await page.goto(`http://localhost:${port}${route.url}`, { waitUntil: 'networkidle2' });
-
-          page.evaluate(() => {
-            document.querySelector('#meta').remove()
-            document.querySelector('#isServer').innerHTML = 'window.isServer = false'
-            if (document.head.getAttribute('prerender') === 'false') {
-              document.querySelector('#root').innerHTML = ''
-              console.log(`Disabled prerendering for ${window.location.pathname}`)
-            }
-          })
-          let html = await page.content();
+        } catch (error) {
+          browser.close()
+        }
+        // Handle page crashes
+        page.on('crash', () => {
+          console.error('PAGE CRASHED');
+        });
+        page.on('requestfailed', request => {
+          console.error('REQUEST FAILED:', request.url(), request.failure().errorText);
+        });
+        await page.goto(`http://localhost:${port}/`, { waitUntil: 'networkidle2' });
+
+
 
-          html = await prettier.format(html, { parser: "html" })
 
-          writer(process.cwd() + '/dist/' + (route.url === '/' ? 'index.html' : `${route.url}/` + 'index.html'), html)
 
-          console.log(`\x1b[32m%s\x1b[0m`, `Prerendered ${route.url}...`)
 
-          hasRendered.push(route.url)
+
+        await page.evaluate(() => {
+          document.getElementById('meta').remove()
+          document.querySelector('#isServer').innerHTML = 'window.isServer = false'
+          if (document.head.getAttribute('prerender') === 'false') {
+            document.querySelector('#root').innerHTML = ''
+            console.log(`Disabled prerendering for ${window.location.pathname}`)
+          }
         })
+        let html = await page.content();
 
+        html = await prettier.format(html, { parser: "html" })
 
 
+        await writer(process.cwd() + '/dist/' + (route.url === '/' ? 'index.html' : `${route.url}/` + 'index.html'), html)
 
-      } catch (error) {
-        console.log('\x1b[31m%s\x1b[0m', 'Error:', error)
 
+      } catch (error) {
+        console.log(error)
       }
+
       finally {
+        browser.close()
+        server.close()
       }
     })
 
-
-
-
-
-    function kill() {
-      console.log(`\x1b[32m%s\x1b[0m`, `\nPrerendered ${routes.length} pages...\n`)
-      server.close()
-      browser.then((browser) => {
-        browser.close()
-      })
-      hasRendered = []
+    let timeout = setTimeout(() => {
       globalThis.isBuilding = false
-      globalThis.isProduction ? console.log(`Total Bundle Size: ${Math.round(bundleSize / 1000)}kb`) : null
-      bundleSize = 0
-    }
-
-    if (hasRendered.length === routes.length) {
-      kill()
-    } else {
-      console.log(`\x1b[32m%s\x1b[0m`, `Prerendering ${routes.length} pages...\n`)
-      let interval = setInterval(() => {
-        if (hasRendered.length === routes.length) {
-          kill()
-          clearInterval(interval)
-        }
-      }, 1000);
-    }
+      clearTimeout(timeout)
+    }, 1000)
   }
+
   globalThis.routes = []
 
   for await (let file of glb) {
@@ -1069,9 +1169,7 @@ async function Build() {
     }
 
 
-    if (!obj.url.includes(':')) {
-      globalThis.routes.push({ fileName: fileName, url: obj.url, html: '/' + (isBasePath ? 'index.html' : `${obj.url}/` + 'index.html') })
-    }
+    globalThis.routes.push({ fileName: fileName, url: obj.url, html: '/' + (isBasePath ? 'index.html' : `${obj.url}/` + 'index.html') })
 
 
     let stats = {
@@ -1088,84 +1186,6 @@ async function Build() {
     globalThis.isProduction ? console.log(string) : null
   }
 
-  globalThis.routeDocuments = []
-  globalThis.routes.map((route) => {
-    let equalparamroute = globalThis.routes.map((e) => {
-      if (e.url.includes(':')) {
-        let url = e.url.split('/:')[0]
-        if (url && route.url === url) {
-          return e
-        } else {
-          return null
-
-        }
-      }
-      return null
-    }).filter(Boolean)
-    let document = `
-    <!DOCTYPE html>
-    <html lang="en">
-    <head>
-        <script>
-        window.routes = JSON.parse('${JSON.stringify(globalThis.routes)}') 
-        </script>
-        <script type="module" id="meta">
-        window.history.pushState({}, '', '${route.url}')
-        
-       </script>
-        <script id="isServer">
-        window.isServer = true
-        </script>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width,initial-scale=1.0">
-         
-       <script type="module" id="router">
-       import VaderRouter from '/router.js' 
-       const router = new VaderRouter('${route.url}')
-       router.get('${route.url}', async (req, res) => {
-         try{
-          let module = await import('/${route.fileName.replace('.jsx', '.js')}')
-          if(Object.keys(module).includes('$prerender') && !module.$prerender){
-            document.head.setAttribute('prerender', 'false')
-          }
-          res.render(module, req, res, module.$metadata)
-         }
-         catch(error){
-          let errorMessage = {
-            message: error.message,
-            name: error.name,
-            stack: error.stack,
-            path: window.location.pathname
-          };
-        
-          
-          document.documentElement.setAttribute('error', JSON.stringify(errorMessage));
-          throw new Error(error)
-         }
-       }) 
-       ${equalparamroute.length > 0 ? equalparamroute.map((e) => {
-
-
-
-      return `router.get('${e.url}', async (req, res) => {
-          let module = await import('/${e.fileName.replace('.jsx', '.js')}')
-          res.render(module, req, res, module.$metadata)
-       })\n`
-    }) : ''}
-       router.listen(3000)
-       
-   </script> 
-    </head>
-    <body>
-        <div id="root"></div>
-    </body>  
-    
-    
-    </html>
-  `;
-    globalThis.routeDocuments.push({ url: route.url, document: document })
-  })
-
   ssg(globalThis.routes)
 
 
@@ -1194,10 +1214,11 @@ async function Build() {
   scannedSourceFiles.forEach(async (file) => {
     file = file.replace(/\\/g, '/');
     let name = file.split('/src/')[1]
+    //parse jsx 
 
     let data = await reader(process.cwd() + "/src/" + name)
     if (name.includes('.jsx')) {
-      let origin = process.cwd() + "/src/" + name
+      let origin = process.cwd() + "/src/" + name 
       if (!globalThis.isProduction) {
         let { sourceMap } = sourceMapGen({ origin: origin, fileName: name }, await Compiler(data, origin))
         data = data + `\n//# sourceMappingURL=/src/maps/${name.replace('.jsx', '.js.map')}\n //#sourceURL=${origin}`
@@ -1206,13 +1227,11 @@ async function Build() {
       await writer(process.cwd() + "/dist/src/" + name.split('.jsx').join('.js'), await Compiler(data, origin))
       return
     }
-    if (!name.includes('.map')) {
-      bundleSize += fs.statSync(process.cwd() + "/src/" + name).size;
-    }
+    bundleSize += fs.statSync(process.cwd() + "/src/" + name).size;
     await writer(process.cwd() + "/dist/src/" + name, data);
   })
 
-  const scannedPublicFiles = await glob("**/**/**.{css,js,html,mjs,cjs,png,jpg,jpeg,gif,svg,mp4,webm,ogg}", {
+  const scannedPublicFiles = await glob("**/**.{css,js,html,mjs,cjs}", {
     ignore: ["node_modules/**/*", "dist/**/*"],
     cwd: process.cwd() + '/public/',
     absolute: true,
@@ -1220,7 +1239,7 @@ async function Build() {
   scannedPublicFiles.forEach(async (file) => {
     file = file.replace(/\\/g, '/');
     file = file.split('/public/')[1]
-    let data = fs.readFileSync(process.cwd() + "/public/" + file);
+    let data = await reader(process.cwd() + "/public/" + file)
     bundleSize += fs.statSync(process.cwd() + "/public/" + file).size;
     await writer(process.cwd() + "/dist/public/" + file, data);
   })
@@ -1253,6 +1272,7 @@ async function Build() {
   }
 
   globalThis.isBuilding = false
+  console.log(`\nTotal bundle size: ${Math.round(bundleSize / 1000)}kb`)
 
   bundleSize = 0;
 
@@ -1360,7 +1380,7 @@ switch (true) {
     globalThis.devMode = true
     globalThis.isProduction = false
     console.log(`
-Vader.js v${fs.readFileSync(process.cwd() + '/node_modules/vaderjs/package.json', 'utf8').split('"version": "')[1].split('"')[0]}
+Vader.js v1.3.3
 - Watching for changes in ./pages
 - Watching for changes in ./src
 - Watching for changes in ./public
@@ -1382,7 +1402,6 @@ Vader.js v${fs.readFileSync(process.cwd() + '/node_modules/vaderjs/package.json'
               })
             }
 
-            console.log('\nRebuilding...')
             globalThis.isBuilding = true
             Build()
           }