vaderjs 1.3.3-8924566yt812 → 1.3.3-9bn28b17d42e1

package/vader.js

@@ -1,11 +1,40 @@
 #!/usr/bin/env node
-import fs from "fs";
+import fs, { fstatSync } from "fs";
 import { glob, globSync, globStream, globStreamSync, Glob, } from 'glob'
 import puppeteer from 'puppeteer';
 import http from 'http'
+import { SourceMapGenerator } from 'source-map'
+
 import { WebSocketServer } from 'ws'
+import prettier from 'prettier'
 import { watch } from "fs";
 import path from 'path'
+
+globalThis.compiledFiles = []
+
+const sourceMapGen = (data, code) => {
+  let { origin, fileName } = data
+  const sourceMap = new SourceMapGenerator({ file: '/src/' + fileName.replace('.jsx', '.js') });
+
+  const lines = fs.readFileSync(origin, "utf8").split("\n");
+  let line = 1;
+  let column = 0;
+  for (const l of lines) {
+    sourceMap.addMapping({
+      source: origin,
+      sourceRoot: '/src',
+      original: { line: line, column: 0 },
+      generated: { line: line, column: 0 },
+    });
+    line++;
+  }
+
+  sourceMap.setSourceContent(origin, fs.readFileSync(origin, "utf8"));
+
+  code = code + `\n//# sourceMappingURL=./src/maps/${fileName.replace('.jsx', '.js')}.map \n //#sourceURL=/src/maps/${fileName.replace('.jsx', '.js')}.map`
+  return { code, sourceMap };
+}
+
 let config = await import('file://' + process.cwd() + '/vader.config.js').then((e) => e.default || e)
 let writer = async (file, data) => {
   globalThis.isWriting = file
@@ -22,8 +51,8 @@ let writer = async (file, data) => {
   globalThis.isWriting = null
   return { _written: true };
 };
- 
-let bundleSize = 0; 
+
+let bundleSize = 0;
 
 if (!fs.existsSync(process.cwd() + '/dist')) {
   fs.mkdirSync(process.cwd() + '/dist')
@@ -33,91 +62,47 @@ if (!fs.existsSync(process.cwd() + '/dist')) {
 
 
 if (typeof process.env.isCloudflare !== "undefined" || !fs.existsSync(process.cwd() + '/dist/index.html')) {
-  let htmlFile = fs.readFileSync(process.cwd() + "/node_modules/vaderjs/runtime/index.html", 'utf8')
-  fs.writeFileSync(process.cwd() + "/dist/index.html", htmlFile)
+  fs.writeFileSync(process.cwd() + "/dist/index.html", '')
 }
 
 
 
 function Compiler(func, file) {
-  let string = func; 
+  let string = func;
   let returns = []
   let comments = string.match(/\{\s*\/\*.*\*\/\s*}/gs)?.map((comment) => comment.trim());
 
- 
-  
- 
- 
 
-  let childs = [];
 
-  const spreadAttributeRegex = /\s*([a-zA-Z0-9_-]+)(\s*\$\s*=\s*{{((?:[^{}]|(?:\{(?:[^{}]|(?:\{[^{}]*\})*)*\})*)*)}})/gs;
-  let spreadMatch;
-  while ((spreadMatch = spreadAttributeRegex.exec(string)) !== null) {
-    let [, element, spread] = spreadMatch;
-    let isJSXComponent = element.match(/[A-Z]/) ? true : false;
-    if (isJSXComponent) {
-      continue
-
-    }
-    let old = spread;
-
-    // turn spread into attributes 
-    spread = spread.replace(/\s*$\s*=\s*/, "");
-    spread = spread.replace(/{{/, "");
-    spread = spread.replace(/}}/, "");
-    spread = spread.replace(/\$\s*=\s*/, "");
-
-    // turn : into =
 
-    // do not split inner Objects ex: {color: 'red', background: {color: 'blue'}} -> {color: 'red', background: {color: 'blue'}}
-    let splitByCommas = spread.split(/,(?![^{]*})/g);
-    splitByCommas = splitByCommas.map((e) => e.trim())
-    splitByCommas = splitByCommas.map((e) => {
-      switch (true) {
-        case e.includes('function') || e.includes('=>'):
-          e = e.replace(/:(.*)/gs, '={$1}')
-          break;
-        case e.includes('style'):
-          e = e.replace(/:(.*)/gs, '="${this.parseStyle($1)}"')
-          break;
-        case e.includes('[') && e.includes(']'):
-          e = e.replace(/:(.*)/gs, '={$1.join(" ")}')
-          break;
-        default:
-          e = e.replace(/:(.*)/gs, '=$1')
-          break;
-      }
 
-      return e.trim()
-    })
 
-    let newSpread = `\t` + splitByCommas.join(' ') + `\t`
+  let childs = [];
 
-    string = string.replace(old, newSpread);
 
-  }
+  // or : value boolean variable etc
+  const spreadAttributeRegex = /\s*([a-zA-Z0-9_-]+)\s*(\$\s*=\s*\{\s*\{(?:[^{}]|(?:\{(?:[^{}]|(?:\{[^{}]*\})*)*\})*)*\}\s*\})/gs;
 
 
+  string = parseComponents(string);
 
   function extractAttributes(code) {
-    // Match elements with opening tags
+    // grab $={...} and ={...}
     const elementRegex = /<([a-zA-Z0-9_-]+)([^>]*)>/gs;
 
     // Match attributes in an opening tag, including those with ={}
     // Match attributes in an opening tag, including those with ={...}
     const attributeRegex =
-      /\s*([a-zA-Z0-9_-]+)(\s*=\s*("([^"\\]*(\\.[^"\\]*)*)"|'([^'\\]*(\\.[^'\\]*)*)'|\{(?:[^{}]|(?:\{(?:[^{}]|(?:\{[^{}]*\})*)*\})*)*\}|(?:\([^)]*\)|\{[^}]*\}|()=>\s*(?:\{[^}]*\})?)|\[[^\]]*\]))?/gs;
+      /\s*([a-zA-Z0-9_-]+)(\s*=\s*("(?:[^"\\]*(?:\\.[^"\\]*)*)"|'(?:[^'\\]*(?:\\.[^'\\]*)*)'|\{(?:[^{}]|(?:\{(?:[^{}]|(?:\{[^{}]*\})*)*\})*)*\}|(?:\([^)]*\)|\{[^}]*\}|()=>\s*(?:\{[^}]*\})?)|\[[^\]]*\]))?/gs;
 
-    
 
- 
-    const functionAttributeRegex = /\s*([a-zA-Z0-9_-]+)(\s*=\s*{((?:[^{}]|(?:\{(?:[^{}]|(?:\{[^{}]*\})*)*\})*)*)})/gs;
+
+    const functionAttributeRegex = /\s*([a-zA-Z0-9_-]+)\s*(=\s*{((?:[^{}]|(?:\{(?:[^{}]|(?:\{[^{}]*\})*)*\})*)*)})/gs;
 
     let attributesList = [];
 
     let spreadAttributes = [];
-    let spreadMatch;
+
     /**
      * @search - handle spread for html elements
      * @keywords - spread, spread attributes, spread props, spread html attributes
@@ -130,19 +115,46 @@ function Compiler(func, file) {
      * 
      */
     let functionAttributes = [];
+    let spreadFunctions = [];
     let functionMatch;
+
+    /**
+     * @search - handle attributes for html elements
+     * @keywords - attributes, props, html attributes
+     */
+    let match;
+    while ((match = elementRegex.exec(string)) !== null) {
+      let [, element, attributes] = match;
+
+
+      let attributesMatch;
+      let elementAttributes = {};
+
+      while ((attributesMatch = attributeRegex.exec(attributes)) !== null) {
+        let [, attributeName, attributeValue] = attributesMatch;
+
+        elementAttributes[attributeName] = attributeValue || null;
+      }
+
+      attributesList.push({ element, attributes: elementAttributes });
+    }
+
+
+
     while ((functionMatch = functionAttributeRegex.exec(code)) !== null) {
 
       let [, attributeName, attributeValue] = functionMatch;
       let attribute = {};
 
-      if (attributeValue && attributeValue.includes("=>") || attributeValue && attributeValue.includes("function")
+      if (attributeValue && attributeValue.includes("=>")
+        && !attributeValue.includes("this.bind")
+        || attributeValue && attributeValue.includes("function")
         && !spreadFunctions.includes(attributeValue)
       ) {
-        
+
         let ref = Math.random().toString(36).substring(2).split('').filter((e) => !Number(e)).join('')
         let old = `${attributeName}${attributeValue}`
-       
+
         let elementMatch = string.match(/<([a-zA-Z0-9_-]+)([^>]*)>/gs);
         let isJSXComponent = false;
         elementMatch.forEach((element) => {
@@ -155,11 +167,15 @@ function Compiler(func, file) {
             isJSXComponent = elementTag.match(/^[A-Z]/) ? true : false;
           }
         });
+        if (isJSXComponent) {
+          continue
+        }
         // add ; after newlines  
 
 
         let newvalue = attributeValue.includes('=>') ? attributeValue.split("=>").slice(1).join("=>").trim() : attributeValue.split("function").slice(1).join("function").trim()
 
+        // add ; after newlines 
 
 
         newvalue = newvalue.trim();
@@ -196,7 +212,7 @@ function Compiler(func, file) {
         newvalue = newvalue.replace(/}\s*$/, '');
 
 
-        
+
 
         newvalue = newvalue.replaceAll(',,', ',')
         let paramnames = params ? params.split(',').map((e) => e.trim()) : null
@@ -206,8 +222,11 @@ function Compiler(func, file) {
 
         // add ; after newlines
         newvalue = newvalue.replaceAll(/\n/g, ";\n")
+        // remove () from newvalue
+        newvalue = newvalue.replace(/\(\s*=>/gs, '=>').replace(/\function\s*\([^\)]*\)\s*\{/gs, '{')
+        newvalue = newvalue + `\n /**@id=${ref}**/ \n`
 
-        let bind = isJSXComponent ? `${attributeName}='function(${params}){${newvalue}}'` : `${attributeName}="\$\{this.bind(function(){${newvalue}}.bind(this), ${isJSXComponent}, "${ref}",   "${paramnames ? paramnames.map((e, index) => {
+        let bind = !isJSXComponent && `${attributeName}="\$\{this.bind(function(){${newvalue}}.bind(this), ${isJSXComponent}, "${ref}",   "${paramnames ? paramnames.map((e, index) => {
           if (e.length < 1) return ''
           if (e.length > 0) {
             index == 0 ? e : ',' + e
@@ -215,30 +234,10 @@ function Compiler(func, file) {
           return e
         }) : ''}" ${params ? params.split(',').map((e) => e.trim()).filter(Boolean).map((e) => `,${e}`).join('') : ''})}"`
 
-        string = string.replace(old, bind);
+        string = string.replace(old, bind)
       }
     }
 
-    /**
-     * @search - handle attributes for html elements
-     * @keywords - attributes, props, html attributes
-     */
-    let match;
-    while ((match = elementRegex.exec(code)) !== null) {
-      let [, element, attributes] = match;
-
-      let attributesMatch;
-      let elementAttributes = {};
-
-      while ((attributesMatch = attributeRegex.exec(attributes)) !== null) {
-        let [, attributeName, attributeValue] = attributesMatch;
-
-        elementAttributes[attributeName] = attributeValue || null;
-      }
-
-      attributesList.push({ element, attributes: elementAttributes });
-    }
-
     return attributesList;
   }
 
@@ -247,7 +246,7 @@ function Compiler(func, file) {
     let returns = code.match(/return\s*\<>.*\<\/>|return\s*\(.*\)/gs);
 
     return returns || [];
-  } 
+  }
   if (string.match(/return\s*\<>|return\s*\(.*\)/gs) && !string.match(/return\s*\<>.*\<\/>|return\s*\(.*\)/gs)
     || string.match(/return\s*\<[a-zA-Z0-9_-]+.*>/gs)
   ) {
@@ -280,17 +279,22 @@ function Compiler(func, file) {
     }
     let usesBraces = returnStatement.match(/return\s*\(/gs) ? true : false;
 
- 
+    let attributes = extractAttributes(string);
     contents = contents.trim().replace(/\]$/, "")
     contents = contents.replace(/\)$/, "");
     usesBraces ? !contents.includes('<>') ? contents = `<>${contents}</>` : null : null
     updatedContents = contents;
-    let attributes = extractAttributes(contents);
+
 
     let newAttributes = [];
     let oldAttributes = [];
     attributes.forEach((attribute) => {
       const { element, attributes } = attribute;
+      // make sure it isnt a jsx component
+      let isJSXComponent = element.match(/[A-Z]/) ? true : false;
+      if (isJSXComponent) {
+        return;
+      }
       if (Object.keys(attributes).length === 0) return;
 
 
@@ -300,7 +304,9 @@ function Compiler(func, file) {
         let value = attributes[key];
         let oldvalue = value;
         if (value && !value.new) {
+
           if (value && value.includes("={")) {
+
             value = value.replace("=", "");
             value == "undefined" ? (value = '"') : (value = value);
 
@@ -354,9 +360,15 @@ function Compiler(func, file) {
       switch (true) {
         case line.includes("useState") && !line.includes("import"):
           let varType = line.split("[")[0]
+          if (!line.split("=")[0].split(",")[1]) {
+            throw new Error('You forgot to value selector  (useState) ' + ' at ' + `${file}:${string.split(line)[0].split('\n').length}`)
+          }
           let key = line.split("=")[0].split(",")[0].trim().split('[')[1];
 
-          let setKey = line.split("=")[0].trim().split(",")[1].trim().replace("]", "");
+          if (!line.split("=")[0].split(",")[1]) {
+            throw new Error('You forgot to add a setter (useState) ' + ' at ' + `${file}:${string.split(line)[0].split('\n').length}`)
+          }
+          let setKey = line.split("=")[0].split(",")[1].trim().replace("]", "");
           key = key.replace("[", "").replace(",", "");
           let valuestate = line.split("=")[1].split("useState(")[1];
 
@@ -425,86 +437,80 @@ function Compiler(func, file) {
       let myChildrens = [];
 
       let name = component.split("<")[1].split(">")[0].split(" ")[0].replace("/", "");
-      let componentAttributes = component.split("<")[1].split(">")[0].split(" ").join(" ").replace(name, "").trim(); 
-      const dynamicAttributesRegex = /(\w+)(?:="([^"]*)")?(?:='([^']*)')?(?:=\{([^}]*)\})?(?:=\{(.*?)\})?(?:={([^}]*)})?(?:{([^}]*)})?|(?:{(?:[^{}]+|\{(?:[^{}]+|\{[^}]*\})*\})*\})|(\.{3}\{(?:[^{}]+|\{(?:[^{}]+|\{[^}]*\})*\})*\})|\$=\{(?:[^{}]+|\{(?:[^{}]+|\{[^}]*\})*\})*\}/gs;
-
-
-
-
-
-      let props = component.match(dynamicAttributesRegex)
-
-      let filteredProps = [];
-      let isWithinComponent = false;
-      let componentName = name
-      let currentProps = []
+      let componentAttributes = component.split("<")[1].split(">")[0].split(" ").join(" ").replace(name, "").trim();
+      let props = component.includes('/>') ? component.split(`<`)[1].split('/>')[0] : component.split(`<`)[1].split(`>`)[0]
+      props = props.replaceAll(/\s+/g, " ").trim()
+      props = props.replace(name, '').trim()
+      component = component.replace(componentAttributes, '')
+      // or spread attributes {...{}, ...{}}
+      const dynamicAttributesRegex = /([a-zA-Z0-9_-]+)\s*=\s*("(?:[^"\\]*(?:\\.[^"\\]*)*)"|'(?:[^'\\]*(?:\\.[^'\\]*)*)'|\{(?:[^{}]|(?:\{(?:[^{}]|(?:\{(.*.*?)\})*)*\})*)*\}|(?:\([^)]*\)|()\s*=>\s*(?:\{.*.*\})?|\{.*\})|\[[^\]]*\])|\${\{.*\}}/gs;
 
+      const attributeObject = {};
+      let propstring = ''
       let $_ternaryprops = []
+      let spreadRegex = /\$\{.*\}/gs;
+      let spreadMatch;
+      let hasSpread = false;
+      while ((spreadMatch = spreadRegex.exec(props)) !== null) {
+        let spread = spreadMatch[0].trim().replace(/\s+/g, " ");
+        if (!spread.includes('...')) {
+          continue
+        }
+        let old = spread;
+        spread = spread.trim().replace(/\s+/g, " ");
+        //${...( loaded ? { title: "Malik Whitten - Blog" } : { title: "Loading" } )} -> ...( loaded ? { title: "Malik Whitten - Blog" } : { title: "Loading" } )
 
-      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('$=', '$_ternary=')
-
-            // remove trailing }
-            prop = prop.replace(/}\s*$/, '')
-            component = component.replace(old, prop)
-            componentAttributes = componentAttributes.replace(old, prop)
-
-            $_ternaryprops.push(prop)
+        let spreadContent = spread.match(/\$\{.*\}/gs) ? spread.match(/\$\{.*.*\}/gs)[0] : null
+        spreadContent = spread.split('${')[1]
 
-          }
-          else if (prop.includes('${')) { 
+        spreadContent = spread.replace(/\${/, '')
+        spreadContent = spreadContent.replaceAll(/\s+/g, " ").trim()
+        spreadContent = spreadContent.replace(')}', ')').replace('}}', '}')
 
-            prop = prop.replace('="', ':').replace('}"', '}')
-            if (prop.includes('${')) {
-              prop = prop.replace('="', ':')
-              prop = prop.replace('${', '')
-              prop = prop.replace('}', '')
+        propstring += spreadContent + ','
+        hasSpread = true
 
-            }
-            if (prop.includes('="${{')) {
-              prop = prop.replace('${{', '{')
-              prop = prop.replace('}}', '}')
-              prop = prop.replace('="', ':')
-              prop = prop.replace('}"', '}')
-            }
+      }
 
-          }
-          else if (prop.startsWith('={')) {
-            prop = prop.replace('={', ':`${')
-            prop.replace('} ', '}`')
-          }
+      let match;
 
-          if (prop.includes('function')) {
-            // parse 'function' to function 
-            prop = prop.replace("'", '')
+      // 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
+        }
 
-            if (prop.endsWith("}'")) {
-              prop = prop.replace("}'", '}')
+        if (hasSpread) {
 
-            }
-
-            prop = prop.replace('=function', ':function')
+          console.log('\x1b[33m', '🚨 Code confliction detected', '\x1b[0m')
+          let line = string.split(match[0])[0].split('\n').length
+          try {
+            throw new Error('You cannot use spread props and named props\n on the same component at ' + match[0] + ' at ' + `${file}:${line}`)
+          } catch (error) {
+            console.error(error)
+            process.exit(1)
           }
+        }
 
-          filteredProps.push(prop);
-
+        str = str.replaceAll(/\s+/g, " ")
+        str = str.split('=')
+        let key = str[0].trim()
+        let value = str.slice(1).join('=').trim().match(/\{.*\}/gs) ? str.slice(1).join('=').trim().match(/\{.*\}/gs)[0] : str.slice(1).join('=').trim();
 
 
+        let isObject = value.startsWith('{{') && value.endsWith('}}')
+        if (isObject) {
+          value = value.split('{{')[1].split('}}')[0].trim()
+          value = `{${value}}`
+          propstring += `${key}:${value},`
+        } else {
+          // remove starting { and ending } using regex
+          value = value.replace(/^{/, '').replace(/}$/, '')
+          propstring += `${key}:${value},`
         }
+        propstring = propstring.replaceAll(/\s+/g, " ").trim()
 
-
-        else {
-          isWithinComponent = false;
-        }
       }
       component = component.replaceAll(/\s+/g, " ");
 
@@ -513,10 +519,9 @@ function Compiler(func, file) {
         component = component.replace(prop, '')
       })
 
-      let children = component.split(`<${name}`)[1].split(`</${name}>`)[0].trim().replace(/\s+/g, " ").trim().replace(/,$/, '').replace('>', '').replace(/\/$/, '').trim()
+      let children = new RegExp(`<${name}[^>]*>([^]*)<\/${name}>`, 'gs').exec(component)?.[1] || null;
 
 
-      props = filteredProps.join(',').replace(/\s+/g, " ").trim().replace(/,$/, '')
 
       let savedname = name;
 
@@ -549,24 +554,15 @@ function Compiler(func, file) {
 
 
 
-
-      props = props.replaceAll(`,${savedname}`, '').replaceAll(savedname, '')
-      if (props.startsWith(',')) {
-        props = props.replace(',', '')
-      }
-      props = props.replaceAll("='", ":'")
-        .replaceAll('=`', ':`')
-        .replaceAll('="', ':"')
-        .replaceAll('={', ':')
+      propstring = propstring.replace(/,$/, '')
 
 
       /**
        * @memoize - memoize a component to be remembered on each render and replace the old jsx
        */
 
-
       let replace = "";
-      replace = `\${this.memoize(this.createComponent(${savedname}, {${props}}, [\`${myChildrens.join('')}\`]))}`;
+      replace = `\${this.memoize(this.createComponent(${savedname}, {${propstring}}, [\`${myChildrens.join('')}\`]))}`;
 
 
       body = body.replace(before, replace);
@@ -582,48 +578,49 @@ function Compiler(func, file) {
   let replaceMents = [];
 
 
-  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 (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 })
-        }
+          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 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} `)
           }
-          let dest = file.split('node_modules')[1]
-          dest = dest.split(baseFolder)[1]
-          // write to dist
-          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;
+          break;
+        default:
+          break;
+      }
     }
   }
 
@@ -644,7 +641,7 @@ function Compiler(func, file) {
   string = string.replaceAll(/\$\{\/\*.*\*\/\}/gs, "");
   string = string.replaceAll("<>", "`").replaceAll("</>", "`");
   string = string.replaceAll(".jsx", ".js");
-  string = parseComponents(string);
+
 
   string = string
     .replaceAll("className", "class")
@@ -810,236 +807,165 @@ function Compiler(func, file) {
 
 globalThis.isBuilding = false
 globalThis.isWriting = null
-const glb = await glob("**/**/**/**.{jsx,js}", {
-  ignore: ["node_modules/**/*", "dist/**/*"],
-  cwd: process.cwd() + '/pages/',
-  absolute: true,
-  recursive: true
-});
+
+let hasRendered = []
+
 async function Build() {
+  const glb = await glob("**/**/**/**.{jsx,js}", {
+    ignore: ["node_modules/**/*", "dist/**/*"],
+    cwd: process.cwd() + '/pages/',
+    absolute: true,
+    recursive: true
+  });
+
   globalThis.isBuilding = true
-  console.log('Compiling......')
+  console.log(globalThis.isProduction ? 'Creating Optimized Production Build\n' : '')
+  let str = `Page \t\t\t\t Size\n`
+  globalThis.isProduction ? console.log('\x1b[32m%s\x1b[0m', str) : null
   let reader = async (file) => {
     let text = await fs.readFileSync(file, "utf8");
     return text;
   };
 
- 
+
+
   function ssg(routes = []) {
     globalThis.isBuilding = true
-    console.log(`Generating html files for ${routes.length} routes`)
+    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');
+          } else {
+            res.writeHead(200, { 'Content-Type': filePath.includes('js') ? 'text/javascript' : 'text/html' });
+            res.end(data);
+          }
+        });
+      }
+    });
+
+    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(':')) {
-        console.log('Route ' + route.url + ' is a dynamic route and will not be generated')
         return
       }
-      let equalparamroute = 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(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}')
-          window.module = await import('/${route.fileName.replace('.jsx', '.js')}')
-          let metadata = await module.$metadata 
-          if(metadata && metadata.title){
-            document.head.innerHTML += '<title>' + metadata.title + '</title>'
-         } 
-         if(metadata && metadata.description){
-           document.head.innerHTML += '<meta name="description" content="' + metadata.description + '">'
-         }
-         if(metadata && metadata.keywords){
-           document.head.innerHTML += '<meta name="keywords" content="' + metadata.keywords + '">'
-         }
-         if(metadata && metadata.author){
-           document.head.innerHTML += '<meta name="author" content="' + metadata.author + '">'
-         }
-         if(metadata && metadata.image){
-            let image = metadata.image.file
-            let type = metadata.image.type
-            
-            document.head.innerHTML += '<meta property="og:image" content="' + image + '">'
-            document.head.innerHTML += '<meta property="og:image:type" content="' + type + '">'
-         }
-         if(metadata && metadata.url){
-           document.head.innerHTML += '<meta property="og:url" content="' + metadata.url + '">'
-         } 
-          
-         if(metadata && metadata.robot){
-            document.head.innerHTML += '<meta name="robots" content="' + metadata.robot + '">'
-         }
-         if(metadata && metadata.manifest){
-            document.head.innerHTML += '<link rel="manifest" href="' + metadata.manifest + '">'
-         }
-         if(metadata && metadata.tags){
-            metadata.tags.forEach(tag => {
-              document.head.innerHTML += tag
-            })
-         }
+      globalThis.listen = true;
 
-         if(metadata && metadata.styles){
-           metadata.styles.forEach(style => {
-             style = style.replaceAll('./', '/')
-             style = style.replaceAll('../', '/')
-             style = style.replace("'", '')
-             document.head.innerHTML += '<link rel="stylesheet" href="' + style + '">'
-           })
-         }
-         if(metadata && metadata.icon){
-           document.head.innerHTML += '<link rel="icon" href="' + metadata.icon + '">'
-         }
-         </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) => {
-           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)
-         }) 
-         ${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>
-    `;
+      try {
 
-      // generate random but common ports
-      let port = Math.floor(Math.random() * (65535 - 49152 + 1) + 49152)
+        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}`)
+          });
 
-      const server = http.createServer((req, res) => {
+          await page.goto(`http://localhost:${port}${route.url}`, { waitUntil: 'networkidle2' });
 
-        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);
+          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();
 
-      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);
-        }
-      })
+          html = await prettier.format(html, { parser: "html" })
 
-      globalThis.listen = true;
+          writer(process.cwd() + '/dist/' + (route.url === '/' ? 'index.html' : `${route.url}/` + 'index.html'), html)
 
-      const browser = await puppeteer.launch({
-        headless: "new", args: ['--no-sandbox', '--disable-setuid-sandbox'],
-        warning: false,
-      })
- 
-      const browserPID = browser.process().pid
-      try {
+          console.log(`\x1b[32m%s\x1b[0m`, `Prerendered ${route.url}...`)
 
-        route.url = route.url.replaceAll(/\/:[a-zA-Z0-9_-]+/gs, '')
-        let page = await browser.newPage();
-        await page.goto(`http://localhost:${port}/`, { waitUntil: 'networkidle2' });
-        await page.on('console', msg => console.log('PAGE LOG:', msg.text()));
-        await page.on('error', err => console.log('PAGE LOG:', err));
-        await page.on('pageerror', err => console.log('PAGE LOG:', err));
-        await page.evaluate(() => {
-          window.onerror = function (msg, url, lineNo, columnNo, error) {
-            console.log(msg, url, lineNo, columnNo, error)
-          }
+          hasRendered.push(route.url)
         })
-        await page.waitForSelector('#root', { timeout: 10000 })
-        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}`)
-          }
-        }) 
-        const html = await page.content();
 
-        await page.close();
-        await writer(process.cwd() + '/dist/' + (route.url === '/' ? 'index.html' : `${route.url}/` + 'index.html'), html)
-        await browser.close();
-        server.close()
+
+
 
       } catch (error) {
-        server.close()
-        await browser.close();
+        console.log('\x1b[31m%s\x1b[0m', 'Error:', error)
+
       }
       finally {
-        await browser.close();
-        server.close()
-      }
-      try {
-        process.kill(browserPID)
-      } catch (error) {
       }
+    })
+
 
 
-    })
 
-    let timeout = setTimeout(() => {
+
+    function kill() {
+      console.log(`\x1b[32m%s\x1b[0m`, `\nPrerendered ${routes.length} pages...\n`)
+      server.close()
+      browser.then((browser) => {
+        browser.close()
+      })
+      hasRendered = []
       globalThis.isBuilding = false
-      clearTimeout(timeout)
-    }, 1000)
-    console.log(`Generated ${routes.length} html files for ${routes.length} routes`)
-  }
 
+    }
+
+    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);
+    }
+  }
   globalThis.routes = []
+  globalThis.paramRoutes = []
 
   for await (let file of glb) {
     // Normalize file paths
     let origin = file.replace(/\\/g, '/');
     let fileName = origin.split('/pages/')[1].split('.jsx')[0].replace('.jsx', '') + '.jsx';
+    if (file.endsWith('.js')) {
+      console.warn('\x1b[33m%s\x1b[0m', `Warning: js files in the pages directory are not supported. Skipping ${file}`)
+      continue
+    }
     let isBasePath = fileName === 'index.jsx';
     let isParamRoute = fileName.includes('[') && fileName.includes(']') ? true : false
 
@@ -1063,17 +989,15 @@ async function Build() {
 
 
     let data = await fs.readFileSync(origin, "utf8");
-    console.log(`Compiling ${fileName}...`)
-    data = Compiler(data, origin);
-
 
-    await writer(process.cwd() + "/dist/" + fileName.replace('.jsx', '.js'), data).then(async () => {
-
-
-
-      await writer(process.cwd() + "/dist/" + fileName.replace('.jsx', '.js'), data)
-
-    })
+    // gen sourcemap if not production
+    let size = fs.statSync(origin).size;
+    if (!globalThis.isProduction) {
+      let { sourceMap } = sourceMapGen({ origin: origin, fileName: fileName }, await Compiler(data, origin))
+      data = data + `\n//# sourceMappingURL=/src/maps/${fileName.replace('.jsx', '.js.map')}\n //#sourceURL=${origin}`
+      await writer(process.cwd() + "/dist/src/maps/" + fileName.replace('.jsx', '.js.map'), JSON.stringify(sourceMap, null, 2))
+    }
+    await writer(process.cwd() + "/dist/" + fileName.replace('.jsx', '.js'), await Compiler(data, origin))
 
     // configure routing for each page
 
@@ -1135,13 +1059,148 @@ async function Build() {
     }
 
 
-    globalThis.routes.push({ fileName: fileName, url: obj.url, html: '/' + (isBasePath ? 'index.html' : `${obj.url}/` + 'index.html') })
+    if (obj.url.includes(':') && !paramRoutes.includes(obj.url)) {
+      globalThis.paramRoutes.push({ fileName: fileName, url: obj.url, html: '/' + (isBasePath ? 'index.html' : `${obj.url}/` + 'index.html') })
+    } else {
 
+      globalThis.routes.push({ fileName: fileName, url: obj.url, html: '/' + (isBasePath ? 'index.html' : `${obj.url}/` + 'index.html') })
+    }
 
+    // check if route has a index.html file
 
+    if (!fs.existsSync(process.cwd() + '/dist/' + (isBasePath ? 'index.html' : `${obj.url}/` + 'index.html'))
+      && !obj.url.includes(':') && !globalThis.isProduction
+    ) {
+      let document = `<!DOCTYPE html>
+      <html lang="en">
+      <head>
+          <meta charset="UTF-8">
+          <meta name="viewport" content="width=device-width, initial-scale=1.0">
+          <title>${obj.url}</title>
+          <script>
+          window.routes = JSON.parse('${JSON.stringify(globalThis.routes)}')
+          </script>
+          <script type="module">
+           import VaderRouter from '/router.js'
+           const router = new VaderRouter('${obj.url}')
+            router.get('${obj.url}', async (req, res) => {
+              let module = await import('${obj.url === '/' ? 'index.js' : obj.url}/index.js')
+              if(Object.keys(module).includes('$prerender') && !module.$prerender){
+                document.head.setAttribute('prerender', 'false')
+              }
+              res.render(module, req, res, module.$metadata)
+            })
+            router.listen(3000)
+          </script>
+      </head>
+      <body>
+           <div id="root"></div>
+      </body>
+      </html>`
+      writer(process.cwd() + '/dist/' + (isBasePath ? 'index.html' : `${obj.url}/` + 'index.html'), document)
+    }
+
+    let stats = {
+      route: obj.url.padEnd(30),
+      size: Math.round(size / 1000) + 'kb',
+      letParentFolder: obj.url.split('/').slice(0, -1).join('/'),
+      isChildRoute: obj.url.split('/').slice(0, -1).join('/').includes(':') ? true : false,
+      parentRoute: obj.url.split('/').slice(0, -1).join('/').split(':')[0],
+
+    }
+    stats.isChildRoute ? stats.route = `? ${obj.url}` : null
+    let string = `${isBasePath ? '+' : '+'} ${stats.route.padEnd(30)} ${stats.size}`
+
+    globalThis.isProduction ? console.log(string) : null
   }
 
-  ssg(globalThis.routes)
+  globalThis.routeDocuments = []
+  globalThis.routes.map((route) => {
+    let equalparamroute = globalThis.paramRoutes.map((e) => {
+      console
+      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 })
+  })
+
+  if (globalThis.devMode && !globalThis.oneAndDone) {
+    ssg(globalThis.routes)
+    globalThis.oneAndDone = true
+    console.log(`In Development Mode, Prerendering ${globalThis.routes.length} pages... Once`)
+  }
+  else if (globalThis.isProduction) {
+    ssg(globalThis.routes)
+  }
 
 
   const scannedSourceFiles = await glob("**/**.{jsx,js,json}", {
@@ -1169,23 +1228,25 @@ 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')) {
-      data = Compiler(data, process.cwd() + "/src/" + name);
-
-      await writer(process.cwd() + "/dist/src/" + name.split('.jsx').join('.js'), data).then(async () => {
-        await writer(process.cwd() + "/dist/src/" + name.replace('.jsx', '.js'), data)
-
-      })
+      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}`
+        await writer(process.cwd() + "/dist/src/maps/" + name.replace('.jsx', '.js.map'), JSON.stringify(sourceMap, null, 2))
+      }
+      await writer(process.cwd() + "/dist/src/" + name.split('.jsx').join('.js'), await Compiler(data, origin))
       return
     }
-    bundleSize += fs.statSync(process.cwd() + "/src/" + name).size;
+    if (!name.includes('.map')) {
+      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}", {
+  const scannedPublicFiles = await glob("**/**/**.{css,js,html,mjs,cjs,png,jpg,jpeg,gif,svg,mp4,webm,ogg}", {
     ignore: ["node_modules/**/*", "dist/**/*"],
     cwd: process.cwd() + '/public/',
     absolute: true,
@@ -1193,7 +1254,7 @@ async function Build() {
   scannedPublicFiles.forEach(async (file) => {
     file = file.replace(/\\/g, '/');
     file = file.split('/public/')[1]
-    let data = await reader(process.cwd() + "/public/" + file)
+    let data = fs.readFileSync(process.cwd() + "/public/" + file);
     bundleSize += fs.statSync(process.cwd() + "/public/" + file).size;
     await writer(process.cwd() + "/dist/public/" + file, data);
   })
@@ -1223,26 +1284,78 @@ async function Build() {
       await writer(process.cwd() + "/dist/" + file, data);
     });
 
+
   }
 
   globalThis.isBuilding = false
-  console.log(`📦 Build completed: Build Size -> ${Math.round(bundleSize / 1000)}kb`)
 
+  globalThis.isProduction ? console.log(`Total Bundle Size: ${Math.round(bundleSize / 1000)}kb`) : null
   bundleSize = 0;
+  if (!globalThis.isBuilding && !globalThis.isProduction) {
+    let folders = fs.readdirSync(process.cwd() + '/dist/', { withFileTypes: true })
+    let mapfolders = fs.readdirSync(process.cwd() + '/dist/src/maps/', { withFileTypes: true }) || []
+    console.log(`Cleaning up dist folder...`)
+    folders.forEach((folder) => {
+      // exclude files
+      if (folder.name.includes('src') || folder.name.includes('public') || folder.name.includes('pages')
+        || !folder.isDirectory()
+      ) {
+        return
+      }
+
+      let existsInPages = fs.existsSync(process.cwd() + '/pages/' + folder.name)
 
+      if (existsInPages) {
+        return
+      }
+      fs.rm(process.cwd() + '/dist/' + folder.name, { recursive: true }, (err) => {
+        if (err) {
+          throw err
+        }
+      })
+    })
+    mapfolders.forEach((folder) => {
+
+      let existsInPages = fs.existsSync(process.cwd() + '/pages/' + folder.name)
+      let existsInSrc = fs.existsSync(process.cwd() + '/src/' + folder.name)
+      if (existsInPages || existsInSrc) {
+        return
+      }
+
+      let name = folder.name.includes('.js.map') ? folder.name.split('.js.map').join('.js') : folder.name
+      if (fs.existsSync(process.cwd() + '/dist/src/maps/' + name)) {
+        fs.rm(process.cwd() + '/dist/src/maps/' + name, { recursive: true }, (err) => {
+          if (err) {
+            throw err
+          }
+        })
+      }
+
+
+
+    })
+  }
   return true
 }
-const s = () => {
+const s = (port) => {
 
   const server = http.createServer((req, res) => {
 
-    const validExtensions = ['.js', '.css', '.mjs', '.cjs', '.html', '.json', '.png', '.jpg', '.jpeg', '.gif', '.svg', '.mp4', '.webm', '.ogg'];
+    const validExtensions = ['.js', '.css', '.mjs', '.cjs', '.html', '.json', '.png', '.jpg', '.jpeg', '.gif', '.svg', '.mp4', '.webm', '.ogg', '.map']
 
     if (!validExtensions.some(ext => req.url.endsWith(ext))) {
-      req.url = req.url !== '/' ? req.url.split('/')[1] : req.url;
+      req.url = req.url + '/'
+      let baseRoute = '/' + req.url.split('/')[1]
+      let paramRoute = globalThis.paramRoutes.find((e) => {
+        let base = e.url.split('/:')[0]
+        return base === baseRoute
+      })
+      if (paramRoute) {
+        req.url = baseRoute
+      }
       req.url = path.join(process.cwd(), 'dist', req.url, 'index.html');
     } else {
-      req.url = path.join(process.cwd(), 'dist', req.url);
+      req.url = path.join(process.cwd(), 'dist/', req.url);
     }
 
     const filePath = req.url
@@ -1259,6 +1372,7 @@ const s = () => {
                let ws = new WebSocket('ws://localhost:${process.env.PORT || 3000}')
                 ws.onmessage = (e) => {
                   if(e.data === 'reload'){ 
+                    console.log('Reloading...')
                     window.location.reload()
                   }
                 }
@@ -1280,7 +1394,7 @@ const s = () => {
 
 
   function getContentType(filePath) {
-    let ext = ['.js', '.css', '.mjs', '.cjs', '.html', '.json', '.png', '.jpg', '.jpeg', '.gif', '.svg', '.mp4', '.webm', '.ogg'].includes(path.extname(filePath)) ? path.extname(filePath) : '.html'
+    let ext = ['.js', '.css', '.mjs', '.cjs', '.html', '.json', '.png', '.jpg', '.jpeg', '.gif', '.svg', '.mp4', '.webm', '.ogg', '.map'].includes(path.extname(filePath)) ? path.extname(filePath) : '.html'
     switch (ext) {
       case '.js':
         return 'text/javascript';
@@ -1292,6 +1406,8 @@ const s = () => {
         return 'text/javascript';
       case '.html':
         return 'text/html';
+      case '.map':
+        return 'application/json';
       case '.json':
         return 'application/json';
       case '.png':
@@ -1315,34 +1431,29 @@ const s = () => {
     }
   }
 
-  const PORT = process.env.PORT || 3000;
-  server.listen(PORT, () => {
-    console.log(`Server is running on port ${PORT}`);
+  server.listen(port, () => {
+    console.log(`Server is running on port ${port}`);
+    globalThis.ws = ws
   });
-  let i =
-    setInterval(() => {
-      if (globalThis.isBuilding && globalThis.devMode) {
 
-        ws.clients.forEach((client) => {
-          client.send('reload')
-        })
-      } else {
-        clearInterval(i)
-      }
-    }, 120)
 
 }
 
 
 switch (true) {
-  case process.argv.includes('--watch') && !process.argv.includes('--build') && !process.argv.includes('--serve'):
+  case process.argv.includes('dev') && !process.argv.includes('build') && !process.argv.includes('start'):
 
     globalThis.devMode = true
+    globalThis.isProduction = false
+
+    let p = process.env.PORT || config.port || process.argv.includes('-p') ? process.argv[process.argv.indexOf('-p') + 1] : 3000
+    globalThis.oneAndDone = false
     console.log(`
-Vader.js v1.3.3
+Vader.js v${fs.readFileSync(process.cwd() + '/node_modules/vaderjs/package.json', 'utf8').split('"version": "')[1].split('"')[0]}
 - Watching for changes in ./pages
 - Watching for changes in ./src
 - Watching for changes in ./public
+- Serving on port ${p}
 `)
     !globalThis.isBuilding ? Build() : null
 
@@ -1354,51 +1465,63 @@ Vader.js v1.3.3
           if (event == 'change'
             && !globalThis.isBuilding
           ) {
+            if (globalThis.ws && !globalThis.isWriting) {
+              globalThis.ws.clients.forEach((client) => {
+                console.log('Reloading...')
+                client.send('reload')
+              })
+            }
 
+            console.log('\nRebuilding...')
+            globalThis.isBuilding = true
             Build()
           }
         }).on('error', (err) => console.log(err))
     })
-    let p = process.argv[process.argv.indexOf('--watch') + 1] || process.env.PORT || 3000
-
-    process.env.PORT = p
-    s()
+    s(p)
 
     globalThis.listen = true;
 
     break;
-  case process.argv.includes('--build') && !process.argv.includes('--watch') && !process.argv.includes('--serve'):
+  case process.argv.includes('build') && !process.argv.includes('dev') && !process.argv.includes('start'):
     globalThis.devMode = false
+    globalThis.isProduction = true
+    globalThis.routeStates = []
     console.log(`
 Vader.js v1.3.3 
 Building to ./dist
 `)
+    if (fs.existsSync(process.cwd() + '/dist/src/maps')) {
+      fs.rmSync(process.cwd() + '/dist/src/maps', { recursive: true })
+    }
     Build()
 
     break;
-  case process.argv.includes('--serve') && !process.argv.includes('--watch') && !process.argv.includes('--build'):
-    let port = process.argv[process.argv.indexOf('--serve') + 1] || 3000
-    process.env.PORT = port
+  case process.argv.includes('start') && !process.argv.includes('dev') && !process.argv.includes('build'):
+    let port = process.env.PORT || config.port || process.argv.includes('-p') ? process.argv[process.argv.indexOf('-p') + 1] : 3000
+    console.log(port)
     globalThis.devMode = false
     console.log(`
 Vader.js v1.3.3 
 Serving ./dist on port ${port}
 url: http://localhost:${port}
     `)
-    s()
+    s(port)
     break;
   default:
-    console.log(`
+    // add color
+    console.log(` 
 Vader.js is a reactive framework for building interactive applications for the web built ontop of bun.js!
     
 Usage: vader <command> 
     
 Commands:
-  --watch (port)    Watch the pages folder for changes with hot reloading
+
+   vaderjs dev  -p <number>    Start the development server
     
-  --build     Build the project to ./dist
+   vaderjs build   Build the project to ./dist
     
-  --serve  (400)   Serve the project on a port (default 3000 or process.env.PORT)
+   vaderjs start  -p <number>  Production Mode (default 3000 or process.env.PORT)
       
 Learn more about vader:           https://vader-js.pages.dev/