vaderjs 1.3.2 → 1.3.3-12219a8b18b-hotfix

package/vader.js

@@ -1,1335 +1,1446 @@
-let dom = [];
-let states = {};
-let worker = new Worker(new URL("./worker.js", import.meta.url));
-/**
- * @function markdown
- * @param {String} content
- * @description Allows you to convert markdown to html
- */
-function markdown(content) {
-  let headers = content.match(/(#+)(.*)/g);
-  if (headers) {
-    headers.forEach((header) => {
-      if (
-        header.includes("/") ||
-        header.includes("<") ||
-        header.includes(">")
-      ) {
-        return;
-      }
-      let level = header.split("#").length;
-      content = content.replace(
-        header,
-        `<h${level} class="markdown_heading">${header.replace(
-          /#/g,
-          ""
-        )}</h${level}>`
-      );
+#!/usr/bin/env node
+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++;
   }
 
-  content = content.replace(/\*\*(.*?)\*\*/g, (match, text) => {
-    return `<b class="markdown_bold">${text}</b>`;
-  });
-  content = content.replace(/\*(.*?)\*/g, (match, text) => {
-    return `<i class="markdown_italic">${text}</i>`;
-  });
-  content = content.replace(/`(.*?)`/g, (match, text) => {
-    return `<code>${text}</code>`;
-  });
-  content = content.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (match, text, url) => {
-    return `<a class="markdown_link" href="${url}">${text}</a>`;
-  });
-  content = content.replace(/!\[([^\]]+)\]\(([^)]+)\)/g, (match, alt, src) => {
-    return `<img class="markdown_image" src="${src}" alt="${alt}" />`;
-  });
-  content = content
-    .split("\n")
-    .map((line, index, arr) => {
-      if (line.match(/^\s*-\s+(.*?)$/gm)) {
-        if (index === 0 || !arr[index - 1].match(/^\s*-\s+(.*?)$/gm)) {
-          return `<ul class="markdown_unordered" style="list-style-type:disc;list-style:inside"><li>${line.replace(
-            /^\s*-\s+(.*?)$/gm,
-            "$1"
-          )}</li>`;
-        } else if (
-          index === arr.length - 1 ||
-          !arr[index + 1].match(/^\s*-\s+(.*?)$/gm)
-        ) {
-          return `<li>${line.replace(/^\s*-\s+(.*?)$/gm, "$1")}</li></ul>`;
-        } else {
-          return `<li>${line.replace(/^\s*-\s+(.*?)$/gm, "$1")}</li>`;
-        }
-      } else {
-        return line;
-      }
-    })
-    .join("\n");
-
-  content = content
-    .split("\n")
-    .map((line, index, arr) => {
-      if (line.match(/^\s*\d+\.\s+(.*?)$/gm)) {
-        if (index === 0 || !arr[index - 1].match(/^\s*\d+\.\s+(.*?)$/gm)) {
-          return `<ol class="markdown_ordered" style="list-style-type:decimal;"><li>${line.replace(
-            /^\s*\d+\.\s+(.*?)$/gm,
-            "$1"
-          )}</li>`;
-        } else if (
-          index === arr.length - 1 ||
-          !arr[index + 1].match(/^\s*\d+\.\s+(.*?)$/gm)
-        ) {
-          return `<li>${line.replace(/^\s*\d+\.\s+(.*?)$/gm, "$1")}</li></ol>`;
-        } else {
-          return `<li>${line.replace(/^\s*\d+\.\s+(.*?)$/gm, "$1")}</li>`;
-        }
-      } else {
-        return line;
-      }
-    })
-    .join("\n");
+  sourceMap.setSourceContent(origin, fs.readFileSync(origin, "utf8"));
 
-  return content;
+  code = code + `\n//# sourceMappingURL=./src/maps/${fileName.replace('.jsx', '.js')}.map \n //#sourceURL=/src/maps/${fileName.replace('.jsx', '.js')}.map`
+  return { code, sourceMap };
 }
 
-/**
- * @function useRef
- * @description Allows you to get reference to DOM element
- * @param {String} ref
- * @returns {void | Object} {current, update}
- */
-
-export const useRef = (ref) => {
-  const element = document.querySelector(`[ref="${ref}"]`);
-  const getElement = () => element;
-
-  const update = (data) => {
-    const newDom = new DOMParser().parseFromString(data, "text/html");
-    const newElement = newDom.body.firstChild;
-
-    if (element) {
-      // @ts-ignore
-      const isDifferent = !newElement.isEqualNode(element);
-      if (isDifferent) {
-        // @ts-ignore
-        element.parentNode.replaceChild(newElement, element);
-      }
-    }
-  };
+let config = await import('file://' + process.cwd() + '/vader.config.js').then((e) => e.default || e)
+let writer = async (file, data) => {
+  globalThis.isWriting = file
+  switch (true) {
+    case !fs.existsSync(file):
+      fs.mkdirSync(file.split('/').slice(0, -1).join('/'), { recursive: true })
+      break;
+  }
+  if (globalThis.isWriting !== file) {
+    return
+  }
+  await fs.writeFileSync(file, data);
 
-  return {
-    current: getElement(),
-    update
-  };
+  globalThis.isWriting = null
+  return { _written: true };
 };
 
-let components = [];
-/**
- * @class Component
- * @description Allows you to create a component
- * @returns {void}
- * @example
- * import { Vader } from "../../dist/vader/index.js";
- * export class Home extends Vader.Component {
- *  constructor() {
- *   super();
- * }
- *  async render() {
- *  return this.html(`
- *     <div className="hero p-5">
- *        <h1>Home</h1>
- *     </div>
- *   `);
- *  }
- * }
- */
-export class Component {
-  constructor() {
-    this.states = {};
-    //@ts-ignore
-    this.name = this.constructor.name;
-    this.executedEffects = {};
-    this.storedProps = {};
-    this.componentMounted = false;
-    this.hasMounted = false;
-    this.$_signal_subscribers = [];
+let bundleSize = 0;
+
+if (!fs.existsSync(process.cwd() + '/dist')) {
+  fs.mkdirSync(process.cwd() + '/dist')
+}
+
+
+
+
+if (typeof process.env.isCloudflare !== "undefined" || !fs.existsSync(process.cwd() + '/dist/index.html')) {
+  fs.writeFileSync(process.cwd() + "/dist/index.html", '')
+}
+
+
+
+function Compiler(func, file) {
+  let string = func;
+  let returns = []
+  let comments = string.match(/\{\s*\/\*.*\*\/\s*}/gs)?.map((comment) => comment.trim());
+
+
+
+
+
+
+  let childs = [];
+
+
+  // or : value boolean variable etc
+  const spreadAttributeRegex = /\s*([a-zA-Z0-9_-]+)\s*(\$\s*=\s*\{\s*\{(?:[^{}]|(?:\{(?:[^{}]|(?:\{[^{}]*\})*)*\})*)*\}\s*\})/gs;
+
+
+
+
+  function extractAttributes(code) {
+    // 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;
+
+
+
+    const functionAttributeRegex = /\s*([a-zA-Z0-9_-]+)\s*(=\s*{((?:[^{}]|(?:\{(?:[^{}]|(?:\{[^{}]*\})*)*\})*)*)})/gs;
+
+    let attributesList = [];
+
+    let spreadAttributes = [];
+
     /**
-     * @property {Array} $_signal_subscribers_ran
-     * @description Allows you to keep track of signal subscribers
-     * @private
+     * @search - handle spread for html elements
+     * @keywords - spread, spread attributes, spread props, spread html attributes
      */
-    this.$_signal_subscribers_ran = [];
-    this.effects = {};
-    this.$_useStore_subscribers = [];
-    this.init();
-    this.Componentcontent = null;
-    this.$_signal_dispatch_event = new CustomEvent("SignalDispatch", {
-      detail: {
-        hasUpdated: false,
-        state: null
-      }
-    });
+
+
     /**
-     * @property {Object} $_signal_dispatch_cleanup_event
-     * @description Allows you to dispatch a signal cleanup event
-     * @private
+     * @search - handle function parsing for html elements
+     * @keywords - function, function attributes, function props, function html attributes
+     * 
      */
-    this.$_signal_dispatch_cleanup_event = new CustomEvent(
-      "Signal_Cleanup_Dispatch",
-      {
-        detail: {
-          state: null,
-          lastState: null
+    let functionAttributes = [];
+    let spreadFunctions = [];
+    let functionMatch;
+    while ((functionMatch = functionAttributeRegex.exec(code)) !== null) {
+
+      let [, attributeName, attributeValue] = functionMatch;
+      let attribute = {};
+
+      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) => {
+          element = element.trim().replace(/\s+/g, " ");
+          if (element.includes(attributeName)) {
+            let elementTag = element
+              .split("<")[1]
+              .split(">")[0]
+              .split(" ")[0];
+            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();
+
+        //remove starting {
+        newvalue = newvalue.replace("{", "")
+
+
+
+        let params = attributeValue
+          .split("=>")[0]
+          .split("(")[1]
+          .split(")")[0]
+          .trim();
+
+        // remove comments 
+        params = params.match(/\/\*.*\*\//gs)
+          ? params.replace(params.match(/\/\*.*\*\//gs)[0], "")
+          : params;
+        // split first {}
+        newvalue = newvalue.trim();
+
+
+
+        newvalue = newvalue.replace(/}\s*$/, '');
+
+
+
+        newvalue = newvalue.trim();
+
+        // remmove trailing }
+
+        newvalue = newvalue.trim();
+        newvalue = newvalue.replace(/}\s*$/, '');
+
+
+
+
+        newvalue = newvalue.replaceAll(',,', ',')
+        let paramnames = params ? params.split(',').map((e) => e.trim()) : null
+        paramnames = paramnames ? paramnames.filter((e) => e.length > 0) : null
+        // remove comments
+        paramnames = paramnames ? paramnames.map((e) => e.match(/\/\*.*\*\//gs) ? e.replace(e.match(/\/\*.*\*\//gs)[0], "") : e) : null
+
+        // add ; after newlines
+        newvalue = newvalue.replaceAll(/\n/g, ";\n")
+        // remove () from newvalue
+        newvalue = newvalue.replace(/\(\s*=>/gs, '=>').replace(/\function\s*\([^\)]*\)\s*\{/gs, '{')
+
+        let bind = isJSXComponent ? `${attributeName}='function(${params}){${newvalue}}'` : `${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
+          }
+          return e
+        }) : ''}" ${params ? params.split(',').map((e) => e.trim()).filter(Boolean).map((e) => `,${e}`).join('') : ''})}"`
+
+        string = string.replace(old, bind);
       }
-    );
-    /**
-     * @property {Array} snapshots
-     * @private
-     */
-     this.snapshots = [];
-    /**
-     * @property {Object} dom
-     * @description Allows you to get reference to DOM element
-     * @returns {void | HTMLElement}
-     *
-     */
-    this.dom = [];
+    }
 
     /**
-     * @property {Boolean} cfr
-     * @description Allows you to compile html code on the fly  - client fly rendering
-     *
-     */
-    this.cfr = false;
-    /**
-     * @property {Boolean} worker
-     * @description Allows you to use a web worker to compile html code on the fly  - client fly rendering
-      
+     * @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 });
+    }
+
+    let spreadMatch;
+    while ((spreadMatch = spreadAttributeRegex.exec(code)) !== null) {
+      let [, element, spread] = spreadMatch;
+      let isJSXComponent = element.match(/^[A-Z]/) ? true : false;
+      if (isJSXComponent) {
+        continue;
+      }
+      let old = spread;
+      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)
+      // remove empty strings
+      splitByCommas = splitByCommas.filter((e) => e.split(':')[0].trim().length > 0)
+      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('');
+            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(/,$/, '')
+            e = `${key}="\${this.parseStyle(${v2})}"`
+            break;
+
+          default:
+            let v = e.split(':')
+            key = v[0].trim()
+            // remove key from v
+            v.shift()
+            v = v.join(' ')
+            e = `${key}="\${${v}}"`
+
+            break;
+        }
+
+
+        return e;
+      });
+
+
+      let newSpread = splitByCommas.join(' ').trim().replace(/,$/, '');
+
+      // remove trailing } 
+      string = string.replace(old, newSpread);
+    }
+
+    return attributesList;
+  }
+
+  function extractOuterReturn(code) {
+    // match return [...]
+    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)
+  ) {
+
+    try {
+      throw new SyntaxError("You forgot to enclose jsx in a fragment return <> jsx html </> or  return (<> jsx html </>) at line " + string.split(/return\s*\<[a-zA-Z0-9_-]+.*>/gs)[0].split('\n').length + ' in file ' + file)
+    } catch (error) {
+      console.error(error)
+      process.exit(1)
+    }
   }
 
+  let outerReturn = extractOuterReturn(string);
+  let contents = "";
+  let updatedContents = "";
   /**
-   * @method adapter
-   * @description Allows you to create an adapter - this is used to create  custom logic
-   *
-   *
+   * @search - handle return [...]
+   * @keywords - return, return jsx, return html, return [...]
    */
-  adapter(options) {
-    // allow you to override the compoent logic
-     
-     
+  outerReturn.forEach((returnStatement) => {
+
+    let lines = returnStatement.split("\n");
+
+    for (let i = 0; i < lines.length; i++) {
+      let line = lines[i];
+      if (line.match(/return\s*\<>|return\s*\(/gs)) {
+        continue;
+      }
+      contents += line + "\n";
+    }
+    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 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;
+
+
+      newAttributes.push(attribute);
+      for (let key in attributes) {
+
+        let value = attributes[key];
+        let oldvalue = value;
+        if (value && !value.new) {
+
+          if (value && value.includes("={")) {
+
+            value = value.replace("=", "");
+            value == "undefined" ? (value = '"') : (value = value);
+
+            key == 'style'
+              && value.includes("{{")
+              ? value = `{this.parseStyle({${value.split('{{')[1].split('}}')[0]}})}` : null
+
+
+
+            value = `="\$${value}",`;
+            string = string.replace(oldvalue, value);
+
+          } else if (value && value.includes("={`")) {
+            value = value.replace("=", "");
+
+            value = `"\$${value}",`;
+            string = string.replace(oldvalue, value);
+
+          }
+        } else if (value && value.new) {
+          string = string.replace(oldvalue, value.new);
+        }
+      }
+    });
+  });
+
+
+
+  if (comments) {
+    comments.forEach((comment) => {
+      let before = comment.trim();
+
+      comment = comment.replaceAll(/\s+/g, " ");
+      comment = comment.trim();
+      string = string.replace(before, comment);
+      let to_remove = comment.split("{")[1].split("}")[0].trim();
+      let beforeComment = comment;
+      comment = comment.replaceAll(`{ ${to_remove} }`, "");
+
+      string = string.replace(beforeComment, comment);
+    });
   }
-  init() {
-    this.registerComponent();
+  let lines = string.split("\n");
+  lines.forEach((line) => {
+
+    if (
+      line.includes("let") ||
+      line.includes("const") ||
+      line.includes("var")
+    ) {
+      switch (true) {
+        case line.includes("useState") && !line.includes("import"):
+          let varType = line.split("[")[0]
+          let key = line.split("=")[0].split(",")[0].trim().split('[')[1];
+
+          let setKey = line.split("=")[0].trim().split(",")[1].trim().replace("]", "");
+          key = key.replace("[", "").replace(",", "");
+          let valuestate = line.split("=")[1].split("useState(")[1];
+
+          let regex = /useState\((.*)\)/gs;
+          valuestate = valuestate.match(regex) ? valuestate.match(regex)[0].split("useState(")[1].split(")")[0].trim() : valuestate
+
+
+          let newState = `${varType} [${key}, ${setKey}] = this.useState('${key}', ${valuestate}`;
+          string = string.replace(line, newState);
+          break;
+        case line.includes("useRef") && !line.includes("import"):
+          line = line.trim();
+          let typeref = line.split(" ")[0]
+
+          let keyref = line.split(typeref)[1].split("=")[0].trim().replace("[", "").replace(",", "");
+
+
+          let valueref = line.split("=")[1].split("useRef(")[1];
+
+          let newStateref = `${typeref} ${keyref} = this.useRef('${keyref}', ${valueref}`;
+          string = string.replace(line, newStateref);
+          break;
+        case line.includes("useReducer") && !line.includes("import"):
+          line = line.trim();
+          line = line.replaceAll(/\s+/g, " ");
+
+          let varTypereducer = line.split(" ")[0];
+          let keyreducer = line
+            .split("=")[0]
+            .split(" ")[1]
+            .trim()
+            .replace("[", "")
+            .replace(",", "");
+          let setKeyreducer = line.split("=")[0].trim().split(",")[1].trim().replace("]", "");
+
+          let reducer = line.split("=")[1].split("useReducer(")[1];
+
+          let newStatereducer = `${varTypereducer} [${keyreducer}, ${setKeyreducer}] = this.useReducer('${keyreducer}', ${line.includes('=>') ? reducer + '=>{' : reducer}`;
+
+          string = string.replace(line, newStatereducer);
+          break;
+      }
+
+    }
+  });
+
+
+  string = string.replaceAll(/\$\{\/\*.*\*\/\}/gs, "");
+
+  string = string.replaceAll('../src', './src')
+
+  function parseComponents(body, isChild) {
+    let componentRegex = /<([A-Z][A-Za-z0-9_-]+)\s*([^>]*)>\s*([\s\S]*?)\s*<\/\1>|<([A-Z][A-Za-z0-9_-]+)([^]*?)\/>/gs;
+
+    let componentMatch = body.match(componentRegex);
+    let topComponent = "";
+    componentMatch?.forEach(async (component) => {
+
+      let [, element, attributes] = component;
+      let before = component;
+      component = component.trim().replace(/\s+/g, " ");
+
+      !isChild ? (topComponent = component) : null;
+
+
+      let myChildrens = [];
+
+      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 = /([a-zA-Z0-9_-]+)\s*=\s*("(?:[^"\\]*(?:\\.[^"\\]*)*)"|'(?:[^'\\]*(?:\\.[^'\\]*)*)'|\{(?:[^{}]|(?:\{(?:[^{}]|(?:\{.*.*\})*)*\})*)*\}|(?:\([^)]*\)|()\s*=>\s*(?:\{.*\})?|\{[^}]*\})|\[[^\]]*\])/gs;
+
+      const attributeObject = {};
+
+
+      let filteredProps = [];
+      let isWithinComponent = false;
+      let componentName = name
+      let currentProps = []
+
+      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]
+        }
+        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(/}$/, '')
+        }
+        propstring += `${key}:${value},`
+      }
+      component = component.replaceAll(/\s+/g, " ");
+
+      component = component.replace(componentAttributes, '')
+      $_ternaryprops.forEach((prop) => {
+        component = component.replace(prop, '')
+      })
+
+      let children = new RegExp(`<${name}[^>]*>([^]*)<\/${name}>`, 'gs').exec(component)?.[1] || null;
+
+
+
+      let savedname = name;
+
+
+
+      name = name + Math.random().toString(36).substring(2);
+      if (children && children.match(componentRegex)) {
+        children = parseComponents(children, true);
+        childs.push({ parent: name, children: children });
+      } else {
+
+        children ? childs.push({ parent: name, children: children }) : null;
+      }
+
+      childs.forEach((child) => {
+        if (child.parent == name) {
+          let html = child.children.match(
+            /<([A-Z][A-Za-z0-9_-]+)([^>]*)>(.*?)<\/\1>|<([A-Z][A-Za-z0-9_-]+)([^]*?)\/>/gs
+          );
+          if (html) {
+            html = html.map((h) => h.trim().replace(/\s+/g, " ")).join(" ");
+            child.children = child.children.replaceAll(html, `${html}`);
+            // remove duplicate quotes 
+          }
+
+          myChildrens.push(child.children);
+          childs = childs.filter((e) => e.parent !== name);
+        }
+      });
+
+
+
+      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}, {${propstring}}, [\`${myChildrens.join('')}\`]))}`;
+
+
+      body = body.replace(before, replace);
+    });
+
+    return body;
   }
 
-  registerComponent() {
-    components.push(this);
+  string = string.replaceAll('vaderjs/client', '/vader.js')
+
+  const importRegex = /import\s*([^\s,]+|\{[^}]+\})\s*from\s*(['"])(.*?)\2/g;
+  const imports = string.match(importRegex);
+  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} `)
+          }
+  
+  
+          break;
+        default:
+          break;
+      }
+    }
   }
 
-  /**
-   * @method setState
-   * @description Allows you to set state
-   * @param {String} key
-   * @param {*} value
-   * @returns {void}
-   * @example
-   * this.setState('count', 1)
-   * */
-  setState(key, value) {
-    this.states[key] = value;
-    this.updateComponent();
+  for (let replace of replaceMents) {
+    string = string.replaceAll(replace.match, replace.replace)
   }
-  /**
-   * @method componentUnmount
-   * @description Allows you to run code after component has unmounted
-   * @type {VoidFunction}
-   * @returns {void}
-   */
-  unmount() {
-    this.componentMounted = false;
-    this.componentWillUnmount();
-    // @ts-ignore
-    document.querySelector(`[data-component="${this.name}"]`).remove();
-    if (!document.querySelector(`[data-component="${this.name}"]`)) {
-      components = components.filter(
-        (component) => component.name !== this.name
-      );
+
+  string = string.replaceAll(/\$\{[^{]*\.{3}/gs, (match) => {
+    if (match.includes('...')) {
+      // Your logic for replacement goes here
+      // For example, you can replace '...' with some other string
+      return match.replace('...', '');
     }
-  }
 
-  /**
-   * @method componentUpdate
-   * @description Allows you to run code after component has updated
-   * @param {Object} prev_state
-   * @param {Object} prev_props
-   * @param {Object} snapshot
-   * @returns {void}
-   * @example
-   * componentUpdate(prev_state, prev_props, snapshot) {
-   * console.log(prev_state, prev_props, snapshot)
-   * }
-   * */
-  componentUpdate(prev_state, prev_props, snapshot) {}
-  /**
-   * @method componentDidMount
-   * @description Allows you to run code after component has mounted
-   */
-  componentDidMount() {}
+    return match;
+  });
 
-  /**
-   * @method componentWillUnmount
-   * @description Allows you to run code before component unmounts
-   * @type {VoidFunction}
-   * @returns {void}
-   */
-  componentWillUnmount() {}
+  string = string.replaceAll(/\$\{\/\*.*\*\/\}/gs, "");
+  string = string.replaceAll("<>", "`").replaceAll("</>", "`");
+  string = string.replaceAll(".jsx", ".js");
+  string = parseComponents(string);
+
+  string = string
+    .replaceAll("className", "class")
+    .replaceAll("classname", "class");
+
+  string = string.replaceAll('../src', './src')
+  string += `\n\n //wascompiled`;
+
+
+  string = string.replaceAll("undefined", "");
+  const parse = (css) => {
+    let styles = {};
+    let currentSelector = '';
+
+    css.split('\n').forEach(line => {
+      line = line.trim();
+
+      if (line.endsWith('{')) {
+        // Start of a block, extract the selector
+        currentSelector = line.slice(0, -1).trim();
+        styles[currentSelector] = {};
+      } else if (line.endsWith('}')) {
+        // End of a block
+        currentSelector = '';
+      } else if (line.includes(':') && currentSelector) {
+        // Inside a block and contains key-value pair
+        let [key, value] = line.split(':').map(part => part.trim());
+        styles[currentSelector][key] = value;
+      }
+    });
 
-  /**
-   * @method signal
-   * @description Allows you to create a signal
-   * @param {String} key
-   * @param {any} initialState
-   * @returns  {Object} {subscribe, cleanup, dispatch, call, set, get}
-   * @example
-   * let signal = this.signal('count', 0);
-   * signal.subscribe((value) => {
-   * console.log(value)
-   * }, false) // false means it will run every time
-   * signal.subscribe((value) => {
-   * console.log(value)
-   * }, true) // true means it will run once
-   * signal.call() // this will call all subscribers
-   * signal.set(1) // this will set the value of the signal
-   * signal.get() // this will get the value of the signal
-   * signal.cleanup() // this will remove all subscribers
-   */
-  signal = (key, initialState) => {
-    let hasCaller = false;
-    let [state, setState] = this.useState(key, initialState, () => {
-      if (this.$_signal_subscribers.length > 0) {
-        for (var i = 0; i < this.$_signal_subscribers.length; i++) {
-          if (!hasCaller) {
-            if (
-              this.$_signal_subscribers[i].runonce &&
-              // @ts-ignore
-              this.$_signal_subscribers_ran.includes(
-                this.$_signal_subscribers[i]
-              )
-            ) {
+    return styles;
+  };
+  string.split('\n').forEach(line => {
+    if (line.includes('import')) {
+      // Regular expression for matching import() statements
+      let asyncimportMatch = line.match(/import\s*\((.*)\)/gs);
+      // handle import { Component } from 'vaderjs/runtime/vader.js'
+      let regularimportMatch = line.match(/import\s*([A-Za-z0-9_-]+)\s*from\s*([A-Za-z0-9_-]+)|import\s*([A-Za-z0-9_-]+)\s*from\s*(".*")|import\s*([A-Za-z0-9_-]+)\s*from\s*('.*')|import\s*([A-Za-z0-9_-]+)\s*from\s*(\{.*\})/gs);
+
+      if (asyncimportMatch) {
+        asyncimportMatch.forEach(async (match) => {
+          let beforeimport = match
+          let path = match.split('(')[1].split(')')[0].trim()
+          let newImport = ''
+          let name = match.split('import')[1].split('from')[0].trim()
+          switch (true) {
+            case path && path.includes('json'):
+              path = path.replace(';', '')
+              newImport = `let ${name} = await fetch('${path}').then(res => res.json())`
+
+              break;
+            case path && path.includes('module.css'):
+              let css = await fs.readFileSync(process.cwd() + path, 'utf8')
+              css = css.replaceAll('.', '')
+
+              if (!name) {
+                throw new Error('Could not find name for css module ' + path + ' at' + beforeimport + ' file' + file)
+              }
+              newImport = `let ${name} = ${JSON.stringify(parse(css.replaceAll('.', '').replace(/\s+/g, " ")))}`
+
+              break;
+            default:
+              let deep = path.split('/').length - 1
+              for (let i = 0; i < deep; i++) {
+                path = path.split('../').join('')
+                path = path.split('./').join('')
+              }
+              path = path.replace(/'/g, '').trim().replace(/"/g, '').trim()
+              // remove double / from path
+              path = path.split('//').join('/')
+              if (!path.startsWith('./') && !path.includes('/vader.js') && !path.startsWith('src')
+                && !path.startsWith('/public')
+              ) {
+                path = '/src/' + path
+              }
+
+              path = path.replaceAll('.jsx', '.js');
+              newImport = `await import(${path})`
+          }
+          if (newImport) {
+            string = string.replace(beforeimport, newImport)
+          }
+        })
+      }
+
+      if (regularimportMatch) {
+        for (let match of regularimportMatch) {
+          let beforeimport = match
+          let path = match.split('from')[1] ? match.split('from')[1].trim() : match.split('import')[1].trim()
+
+          let newImport = ''
+          let name = match.split('import')[1].split('from')[0].trim()
+
+
+          switch (true) {
+            case path && path.includes('json'):
+              path = path.replace(';', '')
+              newImport = `let ${name} = await fetch('${path}').then(res => res.json())`
+
+              break;
+            case path && path.includes('module.css'):
+
+              path = path.replace(';', '')
+              path = path.replace(/'/g, '').trim().replace(/"/g, '').trim()
+              path = path.replaceAll('.jsx', '.js');
+              path = path.replaceAll('../', '');
+
+              let css = fs.readFileSync(process.cwd() + '/' + path, 'utf8')
+
+              css = css.replaceAll('.', '')
+              newImport = `let ${name} = ${JSON.stringify(parse(css))}`
+              string = string.replace(beforeimport, newImport)
+              break;
+            case path && path.includes('.css'):
+              string = string.replace(beforeimport, '')
+              newImport = ``
+              break;
+            case path && !path.startsWith('./') && !path.includes('/vader.js') && !path.startsWith('src') && !path.startsWith('public') &&
+              path.match(/^[A-Za-z0-9_-]+$/gs) && !path.includes('http') && !path.includes('https'):
+
+              break;
+            default:
+              let beforePath = path
+              let deep = path.split('/').length - 1
+              for (let i = 0; i < deep; i++) {
+                path = path.split('../').join('')
+                path = path.split('./').join('')
+              }
+              path = path.replace(/'/g, '').trim().replace(/"/g, '').trim()
+              // remove double / from path
+              path = path.split('//').join('/')
+              if (!path.startsWith('./') && !path.includes('/vader.js') && !path.startsWith('src') && !path.startsWith('public')) {
+                path.includes('src') ? path.split('src')[1] : null
+                path = '/src/' + path
+              } else if (path.startsWith('src') || path.startsWith('public')) {
+                path = '/' + path
+              }
+              path = path.replaceAll('.jsx', '.js');
+
+
+              string = string.replace(beforePath, "'" + path + "'")
               break;
-            } else {
-              this.$_signal_subscribers[i].function(state);
-              this.$_signal_subscribers_ran.push(this.$_signal_subscribers[i]);
-              return;
-            }
+
           }
+
+
+          if (newImport) {
+            string = string.replace(beforeimport, newImport)
+          }
+
         }
-      } else {
-        this.$_signal_dispatch_event.detail.hasUpdated = true;
-        this.$_signal_dispatch_event.detail.state = state;
-        window.dispatchEvent(this.$_signal_dispatch_event);
-      }
-    });
-    /**
-     * @function  $_signal_subscribe
-     * @description Allows you to subscribe to a signal
-     * @param {*} fn
-     * @param {*} runonce
-     * @returns {void}
-     *
-     */
-    this.$_signal_subscribe = (fn, runonce) => {
-      this.$_signal_subscribers.push({
-        function: fn,
-        runonce: runonce
-      });
-      return fn;
-    };
-    this.$_signal_cleanup = (fn) => {
-      this.lastState = state;
-      this.$_signal_subscribers = this.$_signal_subscribers.filter(
-        (subscriber) => subscriber.function !== fn
-      );
-      // @ts-ignore
-      this.$_signal_dispatch_cleanup_event.detail.state = this.states;
-      // @ts-ignore
-      this.$_signal_dispatch_cleanup_event.detail.lastState = this.lastState;
-      window.dispatchEvent(this.$_signal_dispatch_event);
-    };
-    this.$_signal_dispatch = () => {
-      for (var i = 0; i < this.$_signal_subscribers.length; i++) {
-        if (
-          this.$_signal_subscribers[i].runonce &&
-          // @ts-ignore
-          this.$_signal_subscribers_ran.includes(this.$_signal_subscribers[i])
-        ) {
-          break;
-        } else {
-          this.$_signal_subscribers[i].function(state);
-          this.$_signal_subscribers_ran.push(this.$_signal_subscribers[i]);
-        }
+
+
       }
-    };
-    this.$_signal_get = () => {
-      return state;
-    };
-    this.$_signal_call = () => {
-      hasCaller = true;
-      // @ts-ignore
-      this.$_signal_dispatch();
-    };
-    /**
-     * @function  $_signal_set
-     * @description Allows you to set the value of a signal
-     * @param {*} detail
-     */
-    this.$_signal_set = (detail) => {
-       
-      setState(detail);
-    };
+    }
 
-    return {
-      /**
-       * @function subscribe
-       * @description Allows you to subscribe to a signal
-       * @param {*} fn
-       * @param {*} runonce
-       */
-      subscribe: this.$_signal_subscribe,
-      /**
-       * @function cleanup
-       * @description Allows you to cleanup a signal
-       * @param {*} fn
-       * @returns {null}
-       */
-      cleanup: this.$_signal_cleanup,
-      /**
-       * @function dispatch
-       * @description Allows you to dispatch a signal
-       * @returns {null}
-       */
-      dispatch: this.$_signal_dispatch,
-      /**
-       * @function call
-       * @description Allows you to call a signal
-       * @returns {null}
-       */
-      call: this.$_signal_call,
-      /**
-       * @function set
-       * @description Allows you to set the value of a signal
-       * @param {*} detail
-       * @returns {null}
-       */
-      set: this.$_signal_set,
-      /**
-       * @function get
-       * @readonly
-       * @description Allows you to get the value of a signal
-       * @returns {any}
-       */
-      get: this.$_signal_get
-    };
+
+  })
+
+  return string
+}
+
+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() {
+  globalThis.isBuilding = true
+  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;
   };
-  /**
-   * @method useAuth
-   * @description Allows you to create an auth object
-   * @param {Object} options
-   * @param {Array} options.rulesets
-   * @param {Object} options.user
-   * @returns {Object} {can, hasRole, canWithRole, assignRule, revokeRule, canAnyOf, canAllOf, canGroup}
-   * @example
-   * let auth = this.useAuth({
-   * rulesets: [
-   * {
-   * action: 'create',
-   * condition: (user) => {
-   * return user.role === 'admin'
-   *  }
-   *  }
-   * ],
-   *  user: {
-   * role: 'admin'
-   * }
-   * })
-   * auth.can('create') // true
-   */
-  useAuth(options) {
-    /**@type {Array}**/
-    let rules = options.rulesets;
-    if (!rules) {
-      throw new Error("No rulesets provided");
-    }
-    /**@type {Object}**/
-    let user = options.user;
-    let auth = {
-      can: (action) => {
-        let can = false;
-        rules.forEach((rule) => {
-          if (rule.action === action) {
-            if (rule.condition(user)) {
-              can = true;
-            }
+
+
+
+  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');
+          } else {
+            res.writeHead(200, { 'Content-Type': filePath.includes('js') ? 'text/javascript' : 'text/html' });
+            res.end(data);
           }
         });
-        return can;
-      },
-      /**
-       * @function hasRole
-       * @description Allows you to check if user has a role
-       * @param {String} role
-       * @returns {Boolean}
-       */
-      hasRole: (role) => {
-        return user.role && user.role.includes(role);
-      },
-      /**
-       * @function canWithRole
-       * @param {String} action
-       * @param {String} role
-       * @returns
-       */
-      canWithRole: (action, role) => {
-        return auth.can(action) && auth.hasRole(role);
-      },
-      assignRule: (rule) => {
-        if (
-          !rules.some((existingRule) => existingRule.action === rule.action)
-        ) {
-          rules.push(rule);
-        }
-      },
-      revokeRule: (action) => {
-        rules = rules.filter((rule) => rule.action !== action);
-      },
-      canAnyOf: (actions) => {
-        return actions.some((action) => auth.can(action));
-      },
-      canAllOf: (actions) => {
-        return actions.every((action) => auth.can(action));
-      },
-      canGroup: (actions, logicalOperator = "any") => {
-        return logicalOperator === "any"
-          ? auth.canAnyOf(actions)
-          : auth.canAllOf(actions);
       }
-    };
-    return auth;
-  }
-  /**
-   * @method useReducer
-   * @description Allows you to create a reducer
-   * @param {*} key
-   * @param {*} reducer
-   * @param {*} initialState
-   * @url - useReducer works similarly to - https://react.dev/reference/react/useReducer
-   * @returns  {Array} [state, dispatch]
-   * @example
-   *  let [count, setCount] = this.useReducer('count', (state, action) => {
-   *   switch (action.type) {
-   *   case 'increment':
-   *     return state + 1
-   *   case 'decrement':
-   *     return state - 1
-   *   default:
-   *    throw new Error()
-   *    }
-   *  }, 0)
-   *  setCount({type: 'increment'})
-   */
-  useReducer(key, reducer, initialState) {
-    if (!this.states[key]) {
-      this.states[key] = initialState;
-    }
-    return [
-      this.states[key],
-      /**
-       * @function dispatch
-       * @description Allows you to dispatch a reducer
-       * @param {*} action
-       * @returns {void}
-       */
-      (action) => {
-        this.states[key] = reducer(this.states[key], action);
-        this.updateComponent();
+    });
+
+    let port = 12000
+    server.on('error', (err) => {
+      if (err.code === 'EADDRINUSE') {
+        setTimeout(() => {
+          server.close();
+          server.listen(++port);
+        }, 1000);
       }
-    ];
-  }
+    })
 
-  runEffects() {
-    Object.keys(this.effects).forEach((component) => {
-      this.effects[component].forEach((effect) => {
-        if (!this.executedEffects[effect]) {
-          effect();
-          this.executedEffects[effect] = true;
-        }
-      });
-    });
-  }
+    const browser = puppeteer.launch({
+      headless: "new", args: ['--no-sandbox', '--disable-setuid-sandbox'],
+      warning: false,
+    })
+    server.listen(port);
 
-  /**
-   * @method useSyncStore
-   * @description Allows you to create a store
-   * @param {String} storeName
-   * @param {*} initialState
-   * @returns  {Object} {getField, setField, subscribe, clear}
-   * @example
-   *  let store = this.useSyncStore('store', {count: 0})
-   *  store.setField('count', 1)
-   *  store.getField('count') // 1
-   *
-   */
-  useSyncStore(storeName, initialState) {
-    let [storedState, setStoredState] = this.useState(
-      storeName,
-      initialState ||
-        // @ts-ignore
-        localStorage.getItem(`$_vader_${storeName}`, (s) => {
-          localStorage.setItem(`$_vader_${storeName}`, JSON.stringify(s));
-          this.$_useStore_subscribers.forEach((subscriber) => {
-            subscriber(s);
+    routes.forEach(async (route) => {
+      if (route.url.includes(':')) {
+        return
+      }
+      globalThis.listen = true;
+
+      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}`)
           });
-        }) ||
-        {}
-    );
+         
+          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();
 
-    const getField = (fieldName) => {
-      return storedState[fieldName];
-    };
-    const setField = (fieldName, value) => {
-      const newState = { ...storedState, [fieldName]: value };
-      setStoredState(newState);
-    };
-    const subscribe = (subscriber) => {
-      return this.$_useStore_subscribers.push(subscriber);
-    };
+          html = await prettier.format(html, { parser: "html" })
 
-    const clear = (fieldName) => {
-      let newState = storedState;
-      delete newState[fieldName];
-      setStoredState(newState);
-    };
-    return {
-      getField,
-      setField,
-      subscribe,
-      clear
-    };
-  }
-  /**
-   * @method useState
-   * @description Allows you to create a state
-   * @param {String} key
-   * @param {*} initialValue
-   * @param {*} callback
-   * @url - useState works similarly to - https://react.dev/reference/react/useState
-   * @returns  {Array} [state, setState]
-   * @example
-   *  let [count, setCount] = this.useState('count', 0, () => {
-   *    console.log('count has been updated')
-   *   })
-   *
-   *   setCount(count + 1)
-   */
-  useState(key, initialValue, callback = null) {
-    if (!this.states[key]) {
-      this.states[key] = initialValue;
-    }
+          writer(process.cwd() + '/dist/' + (route.url === '/' ? 'index.html' : `${route.url}/` + 'index.html'), html)
 
-    return [
-      this.states[key],
-      /**
-       * @function setState
-       * @description Allows you to set state
-       * @param {*} value
-       * @returns {void}
-       */
-      (value) => {
-        this.states[key] = value;
-        this.updateComponent();
-        // @ts-ignore
-        typeof callback === "function" ? callback() : null;
-      }
-    ];
-  }
-  /**
-   * @method useRef
-   * @memberof Component
-   * @param {string} ref
-   * @description Allows you to get reference to DOM elements from the dom array
-   * @returns {Object} {current, update}
-   * @example
-   * let ref = this.useRef('ref')
-   * ref.current // returns the DOM element 
- 
-   */
+          console.log(`\x1b[32m%s\x1b[0m`, `Prerendered ${route.url}...`)
 
-  useRef(ref) {
-    // get ref from array
-    const element = this.dom[ref];
+          hasRendered.push(route.url)
+        })
 
-    const getElement = () => element;
 
-    const update = (data) => {
-      const newDom = new DOMParser().parseFromString(data, "text/html");
-      const newElement = newDom.body.firstChild;
 
-      if (element) {
-        // @ts-ignore
-        const isDifferent = !newElement.isEqualNode(element);
-        if (isDifferent) {
-          // @ts-ignore
-          element.parentNode.replaceChild(newElement, element);
-        }
+
+      } catch (error) {
+        console.log('\x1b[31m%s\x1b[0m', 'Error:', error)
+
       }
-    };
+      finally {
+      }
+    })
 
-    return {
-      /**@type {HTMLElement} */
-      // @ts-ignore
-      current: getElement,
-      /**@type {Function} */
-      update
-    };
-  }
 
-  /**
-   *
-   * @function useEffect
-   * @param {*} effectFn
-   * @param {*} dependencies
-   * @description Allows you to run side effects
-   * @deprecated - this is no longer suggested please use vader signals instead
-   * @returns {Object} {cleanup}
-   */
-  useEffect(effectFn, dependencies) {
-    if (!this.effects[this.name]) {
-      this.effects[this.name] = [];
+
+
+
+    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
+      globalThis.isProduction ? console.log(`Total Bundle Size: ${Math.round(bundleSize / 1000)}kb`) : null
+      bundleSize = 0
     }
-    this.effects[this.name].push(effectFn);
 
-    if (dependencies.length > 0) {
-      dependencies.forEach((d) => {
-        if (d.set) {
-          throw new Error(
-            "signal found, do not use effect and signals at the same time - signals are more efficient"
-          );
+    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)
         }
-      });
-    } else if (!this.hasMounted) {
-      effectFn();
-      this.hasMounted = true;
+      }, 1000);
     }
-
-    return {
-      cleanup: () => {
-        this.effects[this.name] = this.effects[this.name].filter(
-          (effect) => effect !== effectFn
-        );
-      }
-    };
   }
-  /**
-   * @method $Function
-   * @description Allows you to create a function in global scope
-   * @returns {Function}
-   * @example
-   * let func = this.$Function(function add(e, a){
-   *  return e +  a
-   * })
-   * @param {*} fn
-   */
-  $Function(fn) {
-    // @ts-ignore
-    if (!typeof fn === "function") {
-      throw new Error("fn must be a function");
+  globalThis.routes = []
+
+  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';
+    let isBasePath = fileName === 'index.jsx';
+    let isParamRoute = fileName.includes('[') && fileName.includes(']') ? true : false
+
+    // Extract all dynamic parameters from the file path [param1]/[param2]/[param3
+    let aburl = origin.split('/pages')[1].split('.jsx')[0].replace('.jsx', '').split('[').join(':').split(']').join('');
+
+    if (aburl.includes('...')) {
+      // this is a catch all route
+      // it should be /pages/[...]/index.jsx or /pages/[...].jsx  
+      aburl = aburl.split('...').join('*').split(':*').join('*')
+      aburl = aburl.replaceAll('./index', '')
+
     }
-    let name = fn.name;
-    if (!name) {
-      name = "anonymous" + Math.floor(Math.random() * 100000000000000000);
+    // Create an object with URL and pathname properties
+    let obj = {
+      url: isBasePath ? '/' : aburl.replaceAll('/index', ''),
+      pathname: `/pages/${origin.split('pages/')[1].split('.jsx')[0].replace('.jsx', '')}.jsx`,
+      fullpath: origin,
+    };
+
+
+
+    let data = await fs.readFileSync(origin, "utf8");
+
+    // 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))
     }
-    window[name] = fn;
-    // @ts-ignore
-    return `window.${name}()`;
-  }
+    await writer(process.cwd() + "/dist/" + fileName.replace('.jsx', '.js'), await Compiler(data, origin))
 
-  // Add other methods like render, useEffect, useReducer, useAuth, etc.
+    // configure routing for each page
 
-  updateComponent() {
-    const fragment = document.createDocumentFragment();
-    Object.keys(components).forEach(async (component) => {
-      const { name } = components[component];
+    obj.compiledPath = process.cwd() + "/dist/pages/" + fileName.replace('.jsx', '.js')
+    let providerRedirects = { cloudflare: '_redirects', vercel: 'vercel.json', netlify: '_redirects' }
+    switch (true) {
+      case config && config.host && !config.host['_redirect']:
+        let host = config.host.provider
 
-      let componentContainer = document.querySelector(
-        `[data-component="${name}"]`
-      );
-      let time = new Date().getTime();
-      /**
-       * @property {Object} snapshot
-       * @description Allows you to keep track of component snapshots
-       * @private
-       * @returns {Object} {name, time, prev_state, prev_props, content}
-       */
-      let snapshot = {
-        name: name,
-        time: time,
-        prev_state: this.states,
-        prev_props: this.storedProps,
-        // @ts-ignore
-        content: componentContainer.innerHTML
-      };
-
-      if (!componentContainer) return;
-      const newHtml = await new Function(
-        "useState",
-        "useEffect",
-        "useAuth",
-        "useReducer",
-        "useSyncStore",
-        "signal",
-        "rf",
-        "props",
-        "render",
-        "return `" + (await this.render()) + "`;"
-      )(
-        this.useState,
-        this.useEffect,
-        this.useAuth,
-        this.useReducer,
-        this.useSyncStore,
-        this.signal,
-        this.render
-      );
-
-      if (newHtml !== componentContainer.innerHTML) {
-        if (this.snapshots.length > 0) {
-          let lastSnapshot = this.snapshots[this.snapshots.length - 1];
-          if (lastSnapshot !== snapshot) {
-            this.snapshots.push(snapshot);
-          }
-        } else {
-          this.snapshots.push(snapshot);
-        }
-        this.componentUpdate(
-          snapshot.prev_state,
-          snapshot.prev_props,
-          snapshot.content
-        );
-        // batch updates
-        fragment.appendChild(
-          document.createRange().createContextualFragment(newHtml)
-        );
-        componentContainer.innerHTML = "";
-        componentContainer.appendChild(fragment);
-        this.runEffects();
-      }
-    });
-  }
-  /**
-   * @method validateClassName
-   * @param {String} className
-   * @private
-   * @returns {Boolean}
-   */
-  validateClassName(className) {
-    // validate classNames ensure they are camelCase but also allow for - and _
-    return /^[a-zA-Z0-9-_]+$/.test(className);
-  }
+        let provider = providerRedirects[host]
+        if (provider) {
 
-  parseHTML(result) {
-    const dom = new DOMParser().parseFromString(result, "text/html");
-    const elements = dom.documentElement.querySelectorAll("*");
-
-    elements.forEach((element) => {
-      switch (element.nodeName) {
-        case "IMG":
-          if (
-            !element.hasAttribute("alt") &&
-            !document.documentElement.outerHTML
-              .trim()
-              .includes("<!-- #vader-disable_accessibility -->")
-          ) {
-            throw new SyntaxError(
-              `Image: ${element.outerHTML} missing alt attribute`
-            );
-          } else if (
-            element.hasAttribute("alt") &&
-            // @ts-ignore
-            element.getAttribute("alt").length < 1 &&
-            !document.documentElement.outerHTML
-              .trim()
-              .includes("<!-- #vader-disable_accessibility -->")
-          ) {
-            throw new SyntaxError(
-              `Image: ${element.outerHTML} alt attribute cannot be empty`
-            );
-          } else if (
-            (element.hasAttribute("src") &&
-              !element.getAttribute("src")?.includes("http")) ||
-            (!element.getAttribute("src")?.includes("https") &&
-              !document.documentElement.outerHTML
-                .trim()
-                .includes("<!-- #vader-disable_accessibility -->"))
-          ) {
-            let prevurl = element.getAttribute("src");
-            element.setAttribute("aria-hidden", "true");
-            element.setAttribute("hidden", "true");
-            // if window.lcoation.pathname includes a html file remove it and only use the path
-            let url =
-              window.location.origin +
-              window.location.pathname.replace(/\/[^\/]*$/, "") +
-              "/public/" +
-              element.getAttribute("src");
-            let image = new Image();
-            image.src = url;
-            image.onerror = () => {
-              // @ts-ignore
-              element.setAttribute("src", prevurl);
-              throw new Error(`Image: ${element.outerHTML} not found`);
-            };
-            element.setAttribute("src", url);
-
-            image.onload = () => {
-              document.querySelectorAll(`img[src="${url}"]`).forEach((img) => {
-                img.setAttribute("src", url);
-                img.removeAttribute("aria-hidden");
-                img.removeAttribute("hidden");
-              });
-            };
+          let redirectFile = null
+          switch (true) {
+            case provider === '_redirects':
+              redirectFile = fs.existsSync(process.cwd() + '/dist/' + provider) ? fs.readFileSync(process.cwd() + '/dist/' + provider, 'utf8') : ''
+              break;
+            case provider === 'vercel.json':
+              redirectFile = fs.existsSync(process.cwd() + '/' + provider) ? fs.readFileSync(process.cwd() + '/' + provider, 'utf8') : ''
+              break;
+            default:
+              break;
           }
-          break;
+          let type = provider === '_redirects' ? 'text/plain' : 'application/json'
 
-        default:
-          if (element.hasAttribute("ref")) {
-            // @ts-ignore
-            dom[element.getAttribute("ref")] = element;
-          }
-          if (element.nodeName === "MARKDOWN") {
-            element.innerHTML = markdown(
-              element.innerHTML.replace(/\\n/g, "\n").trim()
-            );
-          }
+          let root = obj.url.includes(':') ? obj.url.split('/:')[0] : obj.url
+          switch (true) {
+            case root === '/':
+              break;
+            case type === 'text/plain' && !redirectFile.includes(obj.url) && obj.url.includes(':'):
+              let page = obj.pathname.split('/pages/')[1].replace('.jsx', '.js')
+              redirectFile += `\n/${page} /${page} 200\n${obj.url} ${root} 200\n`
+              !redirectFile.includes('/404') ? redirectFile += `\n/404 /404 404` : null
+              fs.writeFileSync(process.cwd() + '/dist/' + provider, redirectFile)
+              console.log(`Added ${obj.url} ${obj.url} 200 to ${provider}`)
+              break;
+            case type === 'application/json' && !redirectFile?.includes(`${obj.url}`):
+              let json = redirectFile ? JSON.parse(redirectFile) : {}
+              let isVercel = provider === 'vercel.json' ? true : false
+              if (isVercel) {
+                json['rewrites'] = json['rewrites'] || []
+                json['rewrites'].push({ "source": obj.url, "destination": `${root}/index.html` })
+                fs.writeFileSync(process.cwd() + '/' + provider, JSON.stringify(json, null, 2))
+                console.log(`Added ${obj.url} ${root}/index.html to ${provider}`)
+              }
 
-          if (element.hasAttribute("class")) {
-            const allowClassComments = document.documentElement.outerHTML.includes(
-              "<!-- #vader-allow_class -->"
-            );
-            if (!allowClassComments) {
-              console.warn(
-                "you can disable class errors using, <!-- #vader-allow_class -->"
-              );
-              throw new Error(
-                "class attribute is not allowed, please use className instead"
-              );
-            }
-          } else if (element.hasAttribute("className")) {
-            // @ts-ignore
-            element.setAttribute("class", element.getAttribute("className"));
-            element.removeAttribute("className");
           }
+        }
+        break;
+      case config && config.host && config.host['_redirect']:
+        let file = config.host['_redirect']
+        file = file.split('./').join('')
+        let redirectFile = fs.existsSync(process.cwd() + '/' + file) ? fs.readFileSync(process.cwd() + '/' + file, 'utf8') : ''
+        fs.writeFileSync(process.cwd() + '/dist/' + file, redirectFile)
+        console.log(`Using ${file} for redirects`)
+      default:
+        break;
 
-          if (
-            element.hasAttribute("href") &&
-            // @ts-ignore
-            element.getAttribute("href").startsWith("/") &&
-            !document.documentElement.outerHTML
-              .trim()
-              .includes("<!-- #vader-disable_relative-paths -->")
-          ) {
-            element.setAttribute(
-              "href",
-              // @ts-ignore
-              `#/${element.getAttribute("href").replace("/", "")}`
-            );
-          }
+    }
 
-          if (
-            element.hasAttribute("src") &&
-            // @ts-ignore
-            !element.getAttribute("src").includes("http") &&
-            // @ts-ignore
-            !element.getAttribute("src").includes("https") &&
-            !document.documentElement.outerHTML.includes(
-              `<!-- #vader-disable_relative-paths -->`
-            )
-          ) {
-            element.setAttribute(
-              "src",
-              // @ts-ignore
-              `./public/${element.getAttribute("src")}`
-            );
-          }
-          break;
-      }
-    });
 
-    result = dom.body.innerHTML;
+    if (!obj.url.includes(':')) {
+      globalThis.routes.push({ fileName: fileName, url: obj.url, html: '/' + (isBasePath ? 'index.html' : `${obj.url}/` + 'index.html') })
+    }
+
 
-    this.Componentcontent = result;
+    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],
 
-    if (!result.includes("<div data-component")) {
-      result = `<div data-component="${this.name}">${result}</div>`;
     }
-    return markdown(result.replace(/\\n/g, "\n").trim());
+    stats.isChildRoute ? stats.route = `? ${obj.url}` : null
+    let string = `${isBasePath ? '+' : '+'} ${stats.route.padEnd(30)} ${stats.size}`
+
+    globalThis.isProduction ? console.log(string) : null
   }
 
-  /**
-   * The `html` method generates and processes HTML content for a component, performing various validations and tasks.
-   *
-   * @param {String} strings - The HTML content to be processed.
-   * @param {...any} args - Dynamic values to be inserted into the template.
-   * @returns {string} - The processed HTML content as a string.
-   *
-   * @throws {SyntaxError} - Throws a `SyntaxError` if image-related attributes are missing or invalid.
-   * @throws {Error} - Throws an `Error` if there are issues with class names or relative paths.
-   *
-   * @example
-   * // Example usage within a component:
-   * const myComponent = new Component();
-   * const htmlContent = myComponent.html`
-   *   <div>
-   *     <img src="/images/example.jpg" alt="Example Image" />
-   *   </div>
-   * `;
-   * document.body.innerHTML = htmlContent;
-   *
-   * @remarks
-   * The `html` method is a core function used in component rendering. It allows you to define and generate HTML content within your component while enforcing best practices and accessibility standards. The method performs several essential tasks:
-   *
-   * 1. **Image Validation**: It checks images for the presence of 'alt' attributes and their validity.
-   *    - Throws a `SyntaxError` if an image is missing the 'alt' attribute.
-   *    - Throws a `SyntaxError` if the 'alt' attribute is empty.
-   *    - Checks for an 'aria-hidden' attribute for image elements.
-   *
-   * 2. **Class Attribute Handling**: It enforces class attribute usage and allows optional configuration via comments.
-   *    - Throws an `Error` if 'class' attributes are used without permission.
-   *    - Supports 'className' attributes for class definitions.
-   *    - Allows or disallows class-related comments based on your configuration.
-   *
-   * 3. **Relative Path Handling**: It processes relative paths in 'href' and 'src' attributes, ensuring proper routing.
-   *    - Converts relative 'href' attributes to anchor links with appropriate routing.
-   *    - Converts relative 'src' attributes to absolute paths with 'public' directories.
-   *
-   * 4. **Custom Component Attributes**: It supports adding a 'data-component' attribute to the root element.
-   *    - Ensures that the 'data-component' attribute is present for component identification.
-   *
-   * 5. **Lifecycle Method Invocation**: It invokes the `componentDidMount` method if called from a 'render' context.
-   *    - Executes `componentDidMount` to handle component initialization once the DOM is ready.
-   *
-   * @see {@link Component}
-   * @see {@link Component#componentDidMount}
-   */
+  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
 
-  html(strings, ...args) {
-    // @ts-ignore
-    let tiemr = setInterval(() => {
-      if (document.querySelector(`[data-component="${this.name}"]`)) {
-        clearInterval(tiemr);
-        this.componentMounted = true;
-
-        document
-          .querySelector(`[data-component="${this.name}"]`)
-          ?.querySelectorAll("*")
-          .forEach((element) => {
-            if (element.hasAttribute("ref")) {
-              // @ts-ignore
-              this.dom[element.getAttribute("ref")] = element;
-            }
-          });
-        this.componentDidMount();
+        }
       }
-    }, 100);
-    let script = document.createElement("script");
-    script.setAttribute("type", "text/javascript");
-    script.setAttribute(`data-component-script`, this.name);
-
-    let dom = this.dom;
-
-    if (this.cfr) {
-      worker.postMessage({
-        strings,
-        args,
-        location:
-          window.location.origin +
-          window.location.pathname.replace(/\/[^\/]*$/, "") +
-          "/public/",
-        name: this.name
-      });
-      let promise = new Promise((resolve, reject) => {
-        worker.onmessage = (e) => {
-          if (e.data.error) {
-            throw new Error(e.data.error);
+      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')
           }
-          const dom = this.dom; // Assuming this.dom is an object
-          let js = e.data.js;
-          let template = e.data.template;
-          // Bind the component's context
-
-          const useState = this.useState.bind(this); // Bind the component's context
-          const useEffect = this.useEffect.bind(this); // Bind the component's context
-          const useReducer = this.useReducer.bind(this); // Bind the component's context
-          const useAuth = this.useAuth.bind(this); // Bind the component's context
-          const useSyncStore = this.useSyncStore.bind(this); // Bind the component's context
-          const signal = this.signal.bind(this); // Bind the component's context
-          const rf = this.$Function.bind(this); // Bind the component's context
-          let states = this.states;
-          const useRef = this.useRef.bind(this); // Bind the component's context
-          new Function(
-            "useState",
-            "useEffect",
-            "useAuth",
-            "useReducer",
-            "useSyncStore",
-            "signal",
-            "rf",
-            "dom",
-            "render",
-            "states",
-            "useRef",
-            js
-          )(
-            useState,
-            useEffect,
-            useAuth,
-            useReducer,
-            useSyncStore,
-            signal,
-            rf,
-            this.dom,
-            this.render,
-            this.states,
-            useRef
-          );
+          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('Prerendering...')
+  }
 
-          resolve(
-            new Function("useRef", "states", "return" + "`" + template + "`")(
-              useRef,
-              states
-            )
-          );
-        };
-        worker.onerror = (e) => {
-          reject(e);
-        };
-      });
-      // @ts-ignore
-      return promise;
-    } else {
-      let result = "";
-      for (let i = 0; i < strings.length; i++) {
-        result += strings[i];
-        if (i < args.length) {
-          result += args[i];
-        }
+
+  const scannedSourceFiles = await glob("**/**.{jsx,js,json}", {
+    ignore: ["node_modules/**/*", "dist/**/*"],
+    cwd: process.cwd() + '/src/',
+    absolute: true,
+  });
+  const scannedVaderFiles = await glob("**/**.{html,js,json}", {
+    cwd: process.cwd() + '/node_modules/vaderjs/runtime',
+    absolute: true,
+  });
+
+  scannedVaderFiles.forEach(async (file) => {
+    file = file.replace(/\\/g, '/');
+
+
+    let name = file.split('/node_modules/vaderjs/runtime/')[1]
+    if (file.includes('index.html') && fs.existsSync(process.cwd() + "/dist/" + name)) {
+      return
+    }
+    let data = await reader(file)
+    bundleSize += fs.statSync(file).size;
+    await writer(process.cwd() + "/dist/" + name, data);
+  })
+  scannedSourceFiles.forEach(async (file) => {
+    file = file.replace(/\\/g, '/');
+    let name = file.split('/src/')[1]
+
+    let data = await reader(process.cwd() + "/src/" + name)
+    if (name.includes('.jsx')) {
+      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))
       }
-      result = new Function("useRef", `return \`${result}\``)(useRef);
+      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;
+    }
+    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}", {
+    ignore: ["node_modules/**/*", "dist/**/*"],
+    cwd: process.cwd() + '/public/',
+    absolute: true,
+  });
+  scannedPublicFiles.forEach(async (file) => {
+    file = file.replace(/\\/g, '/');
+    file = file.split('/public/')[1]
+    let data = fs.readFileSync(process.cwd() + "/public/" + file);
+    bundleSize += fs.statSync(process.cwd() + "/public/" + file).size;
+    await writer(process.cwd() + "/dist/public/" + file, data);
+  })
+  const scannedFiles = await glob("**/**.{css,js,html}", {
+    ignore: ["node_modules/**/*", "dist/**/*"],
+    cwd: process.cwd() + "/runtime/",
+    absolute: true,
+  })
+
+
+  if (!fs.existsSync(process.cwd() + "/dist/index.html")) {
+
+    scannedFiles.forEach(async (file) => {
+      file = file.split(process.cwd() + '/runtime/')[1]
 
-      if (!result.trim().startsWith("<body>")) {
-        console.warn(
-          "You should wrap your html in a body tag, vader may not grab all html!"
-        );
+      let objCase = {
+        ...file == "app.js" ? { exit: true } : null,
+        ...file.includes("index.html") && fs.existsSync(process.cwd() + "/dist/" + file) ? { exit: true } : null,
+
+      }
+      if (objCase.exit) {
+        console.log('exiting')
+        return true
       }
+      bundleSize += fs.statSync(process.cwd() + "/node_modules/vaderjs/runtime/" + file).size;
+      let data = await reader(process.cwd() + "/node_modules/vaderjs/runtime/" + file)
+      await writer(process.cwd() + "/dist/" + file, data);
+    });
 
-      return this.parseHTML(result);
-    }
   }
-  // write types to ensure it returns a string
-  /**
-   * @method render
-   * @description Allows you to render html
-   * @returns {Promise <any>}
-   * @example
-   * async render() {
-   * return this.html(`
-   * <div className="hero p-5">
-   * <h1>Home</h1>
-   * </div>
-   * `);
-   */
-  async render(props) {}
+
+  globalThis.isBuilding = false
+
+  bundleSize = 0;
+
+  return true
 }
+const s = (port) => {
 
-/**
- * @object Vader
- * @property {class} Component
- * @property {function} useRef
- * @description Allows you to create a component
- * @example
- * import { Vader } from "../../dist/vader/vader.js";
- * export class Home extends Vader.Component {
- * constructor() {
- * super('Home');
- * }
- * async render() {
- * return this.html(`
- * <div className="hero p-5">
- * <h1>Home</h1>
- * </div>
- * `);
- * }
- */
-const Vader = {
-  /**
-   * @class Component
-   * @description Allows you to create a component
-   * @returns {void}
-   * @memberof {Vader}
-   * @example
-   * import { Vader } from "../../dist/vader/index.js";
-   * export class Home extends Vader.Component {
-   *  constructor() {
-   *   super();
-   * }
-   *  async render() {
-   *  return this.html(`
-   *     <div className="hero p-5">
-   *        <h1>Home</h1>
-   *     </div>
-   *   `);
-   *  }
-   * }
-   */
-  Component: Component,
-  useRef: useRef
-};
-/**
- * @function component
- * @description Allows you to create a component
- * @returns {Component}
- */
-export const component = () => {
-  return new Component()
-};
+  const server = http.createServer((req, res) => {
 
-/**
- * @function rf
- * @param {*} name
- * @param {*} fn
- * @returns {void}
- * @deprecated - rf has been replaced with Vader.Component.$Function
- * @description Allows you to register function in global scope
- */
-export const rf = (name, fn) => {
-  window[name] = fn;
-};
-let cache = {};
-async function handletemplate(data) {
-  let dom = new DOMParser().parseFromString(data, "text/html");
-  let elements = dom.documentElement.querySelectorAll("*");
-
-  if (elements.length > 0) {
-    for (var i = 0; i < elements.length; i++) {
-      if (elements[i].nodeName === "INCLUDE") {
-        if (
-          !elements[i].getAttribute("src") ||
-          elements[i].getAttribute("src") === ""
-        ) {
-          throw new Error("Include tag must have src attribute");
-        }
+    const validExtensions = ['.js', '.css', '.mjs', '.cjs', '.html', '.json', '.png', '.jpg', '.jpeg', '.gif', '.svg', '.mp4', '.webm', '.ogg', '.map']
 
-        let componentName = elements[i]
-          .getAttribute("src")
-          ?.split("/")
-          .pop()
-          ?.split(".")[0];
-        // @ts-ignore
-        let filedata = await include(elements[i].getAttribute("src"));
-        // replace ` with \`\` to allow for template literals
-        filedata = filedata.replace(/`/g, "\\`");
-        cache[elements[i].getAttribute("src")] = filedata;
-        filedata = new Function(`return \`${filedata}\`;`)();
-        let newdom = new DOMParser().parseFromString(filedata, "text/html");
+    if (!validExtensions.some(ext => req.url.endsWith(ext))) {
+      req.url = req.url !== '/' ? req.url.split('/')[1] : req.url;
+      req.url = path.join(process.cwd(), 'dist', req.url, 'index.html');
+    } else {
+      req.url = path.join(process.cwd(), 'dist', req.url);
+    }
 
-    
-        newdom.querySelectorAll("include").forEach((el) => {
-          el.remove();
-        });
-        // @ts-ignore
-
-        let els = dom.querySelectorAll(componentName);
-
-        els.forEach((el) => {
-          if (el.attributes.length > 0) {
-            for (var i = 0; i < el.attributes.length; i++) {
-              // @ts-ignore
-              newdom.body.outerHTML = newdom.body.outerHTML.replaceAll(
-                `{{${el.attributes[i].name}}}`,
-                el.attributes[i].value
-              );
-            }
-          }
-          if (el.children.length > 0 && newdom.body.querySelector("slot")) {
-            for (var i = 0; i < el.children.length; i++) {
-              let slots = newdom.body.querySelectorAll("slot");
-              slots.forEach((slot) => {
-               
-                let id = slot.getAttribute("id");
-                console.log(id)
-                if(el.hasAttribute('key') && el.getAttribute('key') === id || !el.hasAttribute('key') && el.nodeName === id){
-             
-                  slot.outerHTML = `<div>${el.innerHTML}</div>`
-                }
-              });
-            }
-          }
+    const filePath = req.url
 
-          dom.body.querySelectorAll("include").forEach((el) => {
-            el.remove();
-          });
-          // replace ` with \`\` to allow for template literals
-          dom.body.outerHTML = dom.body.outerHTML.replace(/`/g, "\\`");
-          dom.body.outerHTML = dom.body.outerHTML.replace(
-            el.outerHTML,
-            new Function(`return \`${newdom.body.outerHTML}\`;`)()
-          );
-        });
+    fs.readFile(filePath, (err, data) => {
+      if (err) {
+        res.writeHead(404, { 'Content-Type': 'text/html' });
+        res.end(fs.existsSync(process.cwd() + '/dist/404') ? fs.readFileSync(process.cwd() + '/dist/404/index.html') : '404');
+      } else {
+        const contentType = getContentType(filePath);
+        switch (true) {
+          case contentType === 'text/html' && globalThis.devMode:
+            data = data.toString() + `<script type="module">
+               let ws = new WebSocket('ws://localhost:${process.env.PORT || 3000}')
+                ws.onmessage = (e) => {
+                  if(e.data === 'reload'){ 
+                    console.log('Reloading...')
+                    window.location.reload()
+                  }
+                }
+              </script>
+              `
+        }
+        res.writeHead(200, { 'Content-Type': contentType });
+        res.end(data);
       }
+    });
+  });
+
+
+  const ws = new WebSocketServer({ server });
+  ws.on('connection', (socket) => {
+    console.log('WebSocket Hydration Client connected');
+    socket.on('close', () => console.log('WebSocket Hydration Client disconnected'));
+  });
+
+
+  function getContentType(filePath) {
+    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';
+      case '.css':
+        return 'text/css';
+      case '.mjs':
+        return 'text/javascript';
+      case '.cjs':
+        return 'text/javascript';
+      case '.html':
+        return 'text/html';
+      case '.map':
+        return 'application/json';
+      case '.json':
+        return 'application/json';
+      case '.png':
+        return 'image/png';
+      case '.jpg':
+        return 'image/jpg';
+      case '.jpeg':
+        return 'image/jpeg';
+      case '.gif':
+        return 'image/gif';
+      case '.svg':
+        return 'image/svg+xml';
+      case '.mp4':
+        return 'video/mp4';
+      case '.webm':
+        return 'video/webm';
+      case '.ogg':
+        return 'video/ogg';
+      default:
+        return 'application/octet-stream';
     }
   }
+ 
+  server.listen(port, () => {
+    console.log(`Server is running on port ${port}`);
+    globalThis.ws = ws
+  });
 
-  // replace ` with \`\` to allow for template literals
-  dom.body.outerHTML = dom.body.outerHTML.replace(/`/g, "\\`");
-  data = new Function(`return \`${dom.body.outerHTML}\`;`)();
 
-  return data;
 }
-/**
- * @function include
- * @description Allows you to include html file
- * @returns {Promise}  - modified string with html content
- * @param {string}  path
- */
-
-export const include = async (path) => {
-  if (
-    path.startsWith("/") &&
-    !path.includes("/src/") &&
-    !document.documentElement.outerHTML
-      .trim()
-      .includes("<!-- #vader-disable_relative-paths -->")
-  ) {
-    path = "/src/" + path;
-  }
-  if (cache[path]) {
-    return await handletemplate(new Function(`return \`${cache[path]}\`;`)());
-  } else {
-    return fetch(`./${path}`)
-      .then((res) => {
-        if (res.status === 404) {
-          throw new Error(`No file found at ${path}`);
-        }
-        return res.text();
-      })
-      .then(async (data) => {
-        cache[path] = data;
 
-        data = await handletemplate(new Function(`return \`${data}\`;`)());
 
-        return data;
-      });
-  }
-};
+switch (true) {
+  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 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
+
+
+    Array.from(Array(3).keys()).forEach((i) => {
+      let p = `${process.cwd()}${i == 0 ? '/pages/' : i == 1 ? '/src/' : '/public/'}`
+      watch(p
+        , { recursive: true }, (event, filename) => {
+          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))
+    })  
+    s(p)
+
+    globalThis.listen = true;
+
+    break;
+  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('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(port)
+    break;
+  default:
+    // 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:
+
+   vaderjs dev  -p <number>    Start the development server
+    
+   vaderjs build   Build the project to ./dist
+    
+   vaderjs start  -p <number>  Production Mode (default 3000 or process.env.PORT)
+      
+Learn more about vader:           https://vader-js.pages.dev/
+        
+    `)
+    break;
 
-export default Vader;
+}