vaderjs 1.3.3-alpha-1 → 1.3.3-alpha-3

package/package.json

@@ -2,9 +2,9 @@
   "name": "vaderjs",
   "description": "A Reactive library aimed to helping you build reactive applications inspired by react.js",
   "module": "vader.js",
-  "version": "1.3.3-alpha-1",
+  "version": "1.3.3-alpha-3",
   "bin": {
-    "vader": "./vader"
+    "vader": "./vader.js"
   },
   "scripts": {
     "build": "bunx vader --build",

package/vader.js

@@ -0,0 +1,777 @@
+#!/usr/bin/env bun
+
+import fs, { watchFile } from "fs";
+
+import { Glob } from "bun";
+let bundleSize = 0; 
+switch (true) {
+  case !fs.existsSync(process.cwd() + "/pages"):
+    fs.mkdirSync(process.cwd() + "/pages");
+    break;
+  case !fs.existsSync(process.cwd() + "/dist"):
+    fs.mkdirSync(process.cwd() + "/dist");
+    console.log("Created dist folder");
+  case !fs.existsSync(process.cwd() + "/public"):
+    fs.mkdirSync(process.cwd() + "/public");
+    break; 
+  case !fs.existsSync(process.cwd() + "/src"):
+    fs.mkdirSync(process.cwd() + "/src");
+    break;
+}
+
+function Compiler(func) {
+  let string = func;
+  let comments = string
+
+    .match(/\{\s*\/\*.*\*\/\s*}/gs)
+    ?.map((comment) => comment.trim());
+
+  let savedfuncnames = [];
+  let functions = string
+    .match(
+      /(?:const|let)\s*([a-zA-Z0-9_-]+)\s*=\s*function\s*\(([^)]*)\)|function\s*([a-zA-Z0-9_-]+)\s*\(([^)]*)\)/gs
+    )
+    ?.map((match) => match.trim());
+
+  let functionNames = [];
+
+  if (functions) {
+    functions.forEach((func) => {
+      if (
+        !func.match(
+          /(?:const|let)\s*([a-zA-Z0-9_-]+)\s*=\s*function\s*\(([^)]*)\)|function\s*([a-zA-Z0-9_-]+)\s*\(([^)]*)\)/gs
+        )
+      ) {
+        return;
+      }
+      let code = string;
+
+      let name = func.split(" ")[1].split("(")[0].trim();
+
+      let lines = string.match(/return\s*\<>.*\<\/>/gs);
+
+      if (lines) {
+        for (let i = 0; i < lines.length; i++) {
+          let line = lines[i];
+
+          if (!functionNames.includes(name)) {
+            functionNames.push(name);
+          }
+        }
+      }
+    });
+  }
+  // get all Obj({}) and parse to JSON.stringify
+
+  let objects = string.match(/Obj\({.*}\)/gs);
+  if (objects) {
+    objects.forEach((obj) => {
+      let key = obj.split("Obj")[1].split("(")[1].split(")")[0].trim();
+      let newobj = obj.replaceAll(`Obj(${key})`, `${key}`);
+      // let newobj = obj.replaceAll(`Obj(${key})`, `JSON.parse('${key}')`)
+      string = string.replaceAll(obj, `this.handleObject('${newobj}')`);
+    });
+  }
+
+  let childs = [];
+
+
+  function extractAttributes(code) {
+    // Match elements with opening tags
+    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;
+
+    // only return elements with attribute {()=>{}} or if it also has parameters ex: onclick={(event)=>{console.log(event)}} also get muti line functions
+    const functionAttributeRegex =
+      /\s*([a-zA-Z0-9_-]+)(\s*=\s*{(?:[^{}]|(?:\{(?:[^{}]|(?:\{[^{}]*\})*)*\})*)*})/gs;
+
+    let attributesList = [];
+
+    // handle functions
+    let functionAttributes = [];
+    let functionMatch;
+    while ((functionMatch = functionAttributeRegex.exec(code)) !== null) {
+      let [, attributeName, attributeValue] = functionMatch;
+      let attribute = {};
+
+      if (attributeValue && attributeValue.includes("=>")) {
+        let ref = Math.random().toString(36).substring(2);
+        let old = `${attributeName}${attributeValue}`;
+
+        let newvalue =
+          attributeValue.split("=>")[1] || attributeValue.split("=>")[1].trim();
+
+        newvalue = newvalue.trim();
+
+        //remove starting {
+        newvalue = newvalue.replace("{", "");
+
+        let params = attributeValue
+          .split("=>")[0]
+          .split("(")[1]
+          .split(")")[0]
+          .trim();
+        let functionparams = [];
+        // split first {}
+        newvalue = newvalue.trim();
+
+        if (newvalue.startsWith("{")) {
+          newvalue = newvalue.split("{")[1];
+        }
+
+        switch(true){
+          case newvalue.endsWith("}}"):
+            newvalue = newvalue.replace("}}", "");
+            break;
+          case newvalue.endsWith("}"):
+            newvalue = newvalue.replace("}", "");
+            break;
+        }
+
+        
+
+        if (functionNames.length > 0) {
+          functionNames.forEach((name) => {
+            string.split("\n").forEach((line) => {
+              if (line.includes(name) && line.includes("function")) {
+                line = line.trim();
+                line = line.replace(/\s+/g, " ");
+
+                let ps = line.split("(").slice(1).join("(").split(")")[0].trim();
+
+                // remove comments
+                ps = ps.match(/\/\*.*\*\//gs)
+                  ? ps.replace(ps.match(/\/\*.*\*\//gs)[0], "")
+                  : ps;
+
+                functionparams.push({ ref: ref, name: name, params: ps });
+              }
+            });
+            newvalue = newvalue.trim();
+            let lines = newvalue.split("\n");
+
+            for (let i = 0; i < lines.length; i++) {
+              let line = lines[i];
+
+              if (line.includes(name) && !line.includes("useFunction")) {
+                let hasParams = line.includes("(") && line.includes(")");
+                let params = hasParams
+                  ? line.split("(")[1].split(")")[0].trim()
+                  : null;
+
+                if (
+                  functionparams.length > 0 &&
+                  functionparams.find((p) => p.name == name)
+                ) {
+                  let params = functionparams.find((p) => p.name == name).params;
+                  line.includes(params) ? (params = params) : (params = null);
+                }
+
+                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;
+                  }
+                });
+
+                let replacement = `this.useFunction(${name} ${isJSXComponent ? "" : ","
+                  } ${params || null}${isJSXComponent ? "" : ","} true ${isJSXComponent ? "" : ","
+                  } '${ref}')`;
+
+                newvalue = newvalue.replace(
+                  hasParams ? `${name}(${params})` : name,
+                  `this.callFunction(\${${replacement}}, ${isJSXComponent ? true : false
+                  }, event,${params || null})`
+                );
+              }
+            }
+
+            params = params.match(/\/\*.*\*\//gs)
+              ? params.replace(params.match(/\/\*.*\*\//gs)[0], "")
+              : params;
+
+            // get full element with function from string
+            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;
+              }
+
+            });
+
+
+
+            let otherdata = {};
+            params ? (otherdata["params"] = params) : null;
+            otherdata["jsx"] = isJSXComponent;
+            otherdata["ref"] = ref;
+ 
+            newvalue = newvalue.replaceAll(/\s+/g, "\n");
+            let newatribute = `${attributeName}="\${this.bind(\`${newvalue}\` ${isJSXComponent ? "" : ","
+              }${JSON.stringify(otherdata)} )}"`;
+
+
+            attribute[attributeName] = {
+              old: old,
+              new: newatribute,
+              attribute: attributeName,
+            };
+            attributesList.push({
+              element: attributeName,
+              attributes: attribute,
+            });
+          });
+        }
+        else {
+          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;
+            }
+
+          });
+
+
+          let otherdata = {};
+          params ? (otherdata["params"] = params) : null;
+          otherdata["jsx"] = isJSXComponent;
+          otherdata["ref"] = ref; 
+          newvalue = newvalue.replaceAll(/\s+/g, ";");
+          let newattribute = `${attributeName}="\${this.bind(\`${newvalue}\`, ${isJSXComponent ? "" : ","}${JSON.stringify(otherdata)} )}"`;
+          newattribute = newattribute.replace(/\s+/g, " ")
+          string = string.replace(old, newattribute);
+        }
+      }
+    }
+
+    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;
+  }
+
+  function extractOuterReturn(code) {
+    // match return [...]
+    let returns = code.match(/return\s*\<>.*\<\/>/gs);
+
+    return returns || [];
+  }
+
+  let outerReturn = extractOuterReturn(string);
+  let contents = "";
+  let updatedContents = "";
+  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*\<>/gs)) {
+        continue;
+      }
+      contents += line + "\n";
+    }
+
+    // Remove trailing ']'
+    contents = contents.trim().replace(/\]$/, "");
+    updatedContents = contents;
+    let attributes = extractAttributes(contents);
+
+    let newAttributes = [];
+    let oldAttributes = [];
+    attributes.forEach((attribute) => {
+      const { element, attributes } = attribute;
+      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 = `{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) {
+          let newvalue = value.new;
+          let old = value.old;
+          string = string.replace(old, newvalue);
+        }
+      }
+    });
+  });
+
+  let retursnString = [];
+  let outerReturnString = extractOuterReturn(string);
+
+  outerReturnString.forEach((returnStatement) => {
+    let lines = returnStatement.split("\n");
+    let code = "";
+    for (let i = 0; i < lines.length; i++) {
+      let line = lines[i];
+      if (line.match(/return\s*\<>/gs)) {
+      }
+      code += line + "\n";
+    }
+
+    code = code.trim().replace(/\<\/\>$/, "");
+    retursnString.push(code);
+  });
+
+  retursnString.forEach((returnStatement, index) => {
+    let old = outerReturnString[index];
+
+    let newReturn = `${returnStatement}</>`;
+    string = string.replace(old, newReturn);
+  });
+
+  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);
+    });
+  }
+  let lines = string.split("\n");
+  lines.forEach((line) => {
+    if (
+      line.includes("let") ||
+      line.includes("const") ||
+      line.includes("var")
+    ) {
+      if (line.includes("useState") && !line.includes("import")) {
+        line = line.trim();
+        // derive [key, value] from line
+        let type = line.split(" ")[0];
+        let key = line
+          .split("=")[0]
+          .split(" ")[1]
+          .trim()
+          .replace("[", "")
+          .replace(",", "");
+        let setKey = line.split("=")[0].split(",")[1].trim().replace("]", "");
+
+        key = key.replace("[", "").replace(",", "");
+        let value = line
+          .split("=")[1]
+          .split("useState")[1]
+          .split("(")[1]
+          .split(")")[0]
+          .trim();
+        let newState = `${type} [${key}, ${setKey}] = this.useState('${key}', ${value}) 
+          this.${key} = ${key}
+          this.${setKey} = ${setKey}
+          `;
+
+        // get setkey calls and replace with this.setKey
+        string.split("\n").forEach((line) => {
+          if (line.includes(setKey) && !line.includes("useState")) {
+            string = string.replace(line, line);
+          }
+
+          if (line.includes(key)) {
+            line = line.replace(key, `this.states['${key}']`);
+
+            string = string.replace(line, line);
+          }
+        });
+        string = string.replace(line, newState);
+      } else if (line.includes("useRef")) {
+        line = line.trim();
+        // let ref = useRef(null)
+        let type = line.split(" ")[0];
+        let key = line.split("=")[0].split(" ")[1].trim();
+        let value = line
+          .split("=")[1]
+          .split("useRef")[1]
+          .split("(")[1]
+          .split(")")[0]
+          .trim();
+        let newState = `${type} ${key} = this.useRef('${key}', ${value})`;
+
+        string = string.replace(line, newState);
+      }
+    }
+  });
+
+  // create a polyfill for Array.prototype.filter
+
+  /**
+   * @method Delete
+   * @param {*} item
+   * @returns  {Array} array
+   * @description  Delete an item from an array
+   */
+  Array.prototype.delete = function (item) {
+    let array = this;
+    array.forEach((i, index) => {
+      switch (true) {
+        case typeof i === "object":
+          if (JSON.stringify(i) === JSON.stringify(item)) {
+            array.splice(index, 1);
+          }
+          break;
+        default:
+          if (i === item) {
+            array.splice(index, 1);
+          }
+          break;
+      }
+    });
+
+    return array;
+  };
+
+  // capture <Component />, <Component></Component>, and <Component>content</Component>
+
+  // Example usage
+  function parseComponents(body, isChild) {
+    let componentRegex =
+      /<([A-Z][a-zA-Z0-9_-]+)([^>]*)\/>|<([A-Z][a-zA-Z0-9_-]+)([^>]*)>(.*?)<\/\3>/gs;
+
+    let componentMatch = body.match(componentRegex);
+    let topComponent = "";
+    componentMatch?.forEach(async (component) => {
+      const rewriter = new HTMLRewriter();
+      let [, element, attributes] = component;
+
+      !isChild ? (topComponent = component) : null;
+      let before = component;
+      component = component.trim().replace(/\s+/g, " ");
+
+      let myChildrens = [];
+
+      let name = component.split("<")[1].split(">")[0].split(" ")[0].replace("/", "");
+      let props = component.split(`<${name}`)[1].split(">")[0].trim();
+
+      let savedname = name;
+      let children = props
+        ? component
+          .split(`<${name}`)[1]
+          .split(`${props}`)[1]
+          .split(`</${name}>`)[0]
+          .trim()
+          .replace(">", "")
+        : component.split(`<${name}`)[1].split(`</${name}>`)[0].trim().replace(">", "");
+      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 = `\`${children}\`,`;
+        children ? childs.push({ parent: name, children: children }) : null;
+      }
+
+      childs.forEach((child) => {
+        if (child.parent == name) {
+          let html = child.children.match(
+            /<([a-zA-Z0-9_-]+)([^>]*)>(.*?)<\/\1>/gs
+          );
+          if (html) {
+            html = html.map((h) => h.trim().replace(/\s+/g, " ")).join(" ");
+            let before = child.children;
+            child.children = child.children.replaceAll(html, `${html}`);
+            // remove duplicate quotes 
+          }
+
+          myChildrens.push(child.children);
+        }
+      });
+
+      props = props
+        .replaceAll("=", ":")
+        .replaceAll('"', "'")
+        .replaceAll(" ", ",")
+        .replaceAll(",,", ',')
+        .replaceAll("className", "class")
+        .replaceAll("classname", "class")
+        .replaceAll("'${", "")
+        .replaceAll("}'", "")
+        .split("$:")
+        .join("")
+        .replaceAll("-", "");
+
+      //remove trailing /
+      props = props.replace("/", ""); 
+      let replace = "";
+      replace = isChild
+        ? `this.memoize(this.createComponent(${savedname.replaceAll('/', '')}, {${props}}, [${myChildrens.length > 0 ? myChildrens.join(",") : ""
+        }])),`
+        : `\${this.memoize(this.createComponent(${savedname.replaceAll('/', '')}, {${props}}, [${myChildrens.length > 0 ? myChildrens.join(",") : ""
+        }]))}`;
+
+      body = body.replace(before, replace);
+    });
+
+    return body;
+  }
+
+
+
+  string = string.replaceAll("<>", "`").replaceAll("</>", "`");
+  string = parseComponents(string);
+ 
+  string = string
+    .replaceAll("className", "class")
+    .replaceAll("classname", "class");
+
+  string += `\n\n //wascompiled`;
+
+  string = string.replaceAll("undefined", "");
+
+  return string;
+}
+let bindings = []
+globalThis.isBuilding = false
+async function Build() {
+  globalThis.isBuilding = true
+  console.log('Compiling......')
+  let reader = async (file) => {
+    let text = await Bun.file(file).text();
+    return text;
+  };
+  let writer = async (file, data) => {
+    await Bun.write(file, data);
+
+    return { _written: true };
+  };
+
+
+  const glob = new Glob("**/*.{jsx,js}");
+  for await (let file of glob.scan({ cwd: process.cwd() + '/pages/', absolute: true })) {
+    let origin = file.split(process.cwd())[1] || file
+    file = file.split(process.cwd() + '/pages/')[1]
+    bindings[file] = ''
+    const router = new Bun.FileSystemRouter({
+      style: "nextjs",
+      dir: process.cwd() + "/pages/",
+      origin: process.env.ORIGIN || "http://localhost:3000",
+      assetPrefix: "_next/static/",
+      fileExtensions: [".jsx", ".js"],
+    });
+
+
+    let m = router.match(origin.includes('/pages/index.jsx') ? '/' : '/' + file)
+    router.reload()
+
+    if (!m) {
+      console.error(`Error: ${file} is not a valid route\nFollow Proper Routing Structure:   
+      `)
+      console.info(`
+      /pages/index.jsx
+      /pages/folder/index.jsx
+      /pages/folder/[param].jsx
+      `)
+      process.exit(1)
+    }
+
+
+    let writtenpath = ''
+    // change /home/[app].jsx to /home
+    m && m.kind === 'dynamic' ? writtenpath = m.pathname.split('[')[0] : null
+
+    let obj = {
+      filePath: m.filePath,
+      kind: m.kind,
+      params: m.params,
+      query: m.query,
+      scriptSrc: m.scriptSrc,
+      src: m.src,
+      pathname: writtenpath || m.pathname,
+    }
+
+    let data = await reader(process.cwd() + "/pages/" + file)
+    data = Compiler(data)
+    await writer(process.cwd() + "/dist/pages/" + file, data);
+    let params = obj.params ? Object.keys(obj.params).map((r) => {
+      r = r.replace('[', '').replace(']', '')
+      return `:${r}`
+    }) : ''
+
+    obj.pathname === '//' ? obj.pathname = '/' : null
+
+
+
+    let js = `
+       router.get('${obj.pathname.includes('.jsx') ? obj.pathname.replace('.jsx', '') + params : obj.pathname + params}', async (req, res) => {
+         res.render(await require('./pages/${file}'), req, res)
+       }) 
+       //@desc ${obj.filePath}
+       ` + '\n'
+
+
+
+    let before = await Bun.file(process.cwd() + "/dist/app.js").exists() ? await reader(process.cwd() + "/dist/app.js") : ''
+
+    let newfile = before + '\n' + js
+    if (!before.includes(`//@desc ${obj.filePath}`)) {
+      await writer(process.cwd() + "/dist/app.js", newfile);
+    }
+
+  }
+   
+  const gb = new Glob("*");
+  const scannedSourceFiles = await Array.fromAsync(gb.scan({ cwd:  process.cwd() + '/src/', absolute: true }));
+  scannedSourceFiles.forEach(async (file) => { 
+     
+    file = file.split(process.cwd() + '/src/')[1]
+    let data = await reader(process.cwd() + "/src/" + file)
+    bundleSize += fs.statSync(process.cwd() + "/src/" + file).size;
+    if(file.endsWith('.jsx')){
+      data = Compiler(data)
+    }
+ 
+    await writer(process.cwd() + "/dist/src/" + file, data);
+  })
+ 
+  const scannedPublicFiles = await Array.fromAsync(gb.scan({ cwd:  process.cwd() + '/public/', absolute: true }));
+  scannedPublicFiles.forEach(async (file) => {
+    file = file.split(process.cwd() + '/public/')[1]
+    let data = await reader(process.cwd() + "/public/" + file)
+    bundleSize += fs.statSync(process.cwd() + "/public/" + file).size;
+    await writer(process.cwd() + "/dist/public/" + file, data);
+  })
+  const scannedFiles = await Array.fromAsync(gb.scan({ cwd: process.cwd() + '/node_modules/vaderjs/' + './runtime/static' }));
+  const scannedVaderFiles = await Array.fromAsync(
+    gb.scan({ cwd: process.cwd() + '/node_modules/vaderjs/' + "/runtime/" })
+  );
+
+  if (!fs.existsSync(process.cwd() + "/dist/index.html")) {
+    scannedFiles.forEach(async (file) => {
+
+      if (file === "app.js") {
+        return
+      }
+      bundleSize += fs.statSync(process.cwd() + '/node_modules/vaderjs/' + "/runtime/static/" + file).size;
+      let data = await reader(process.cwd() + '/node_modules/vaderjs/' + "/runtime/static/" + file);
+      await writer(process.cwd() + "/dist/" + file, data);
+    });
+    scannedVaderFiles.forEach(async (file) => {
+      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/public/vader/" + file, data);
+    });
+  }
+
+
+  if (!fs.existsSync(process.cwd() + "/dist/index.html")) {
+    scannedFiles.forEach(async (file) => {
+
+      bundleSize += fs.statSync(process.cwd() + '/node_modules/vaderjs/' + "/runtime/static/" + file).size;
+      let data = await reader(process.cwd() + '/node_modules/vaderjs/' + "/runtime/static/" + file);
+      await writer(process.cwd() + "/dist/" + file, data);
+    });
+    scannedVaderFiles.forEach(async (file) => {
+      bundleSize += fs.statSync(
+        process.cwd() + "/runtime/" + file
+      ).size;
+      let data = await reader(process.cwd() + "/runtime/" + file);
+      await writer(process.cwd() + '/node_modules/vaderjs/' + "/dist/public/vader/" + file, data);
+    });
+  }
+  console.log(`Compilation completed`)
+  globalThis.isBuilding = false
+}
+import { watch } from "fs";
+
+switch (true) {
+  case process.argv.includes('--watch'):
+
+    console.log(`
+Vader.js v1.3.3  
+`)
+    Build()
+    const watcher = watch(
+      process.cwd() + '/pages',
+      { recursive: true },
+      (event, filename) => {
+        if (event == 'change'
+        && !globalThis.isBuilding
+        ) {
+          Build()
+        }
+      },
+    );
+    watcher.on('error', (err) => console.log(err))
+    console.log('Watching for changes')
+    break;
+  case process.argv.includes('--build'):
+
+    console.log(`
+Vader.js v1.3.3 
+Building to ./dist
+`)
+    Build()
+    break;
+  default:
+    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     Watch the pages folder for changes and recompile 
+
+  --build     Build the project
+Learn more about vader:           https://vader-js.pages.dev/
+    
+`)
+    break;
+
+}