npm - vaderjs - Versions diffs - 1.3.3-alpha-3 → 1.3.3-alpha-5 - Mend

vaderjs 1.3.3-alpha-3 → 1.3.3-alpha-5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/README.md +1 -0
package/package.json +4 -12
package/runtime/{static/index.html → index.html} +1 -1
package/runtime/vader.js +552 -0
package/vader.js +96 -116

package/README.md CHANGED Viewed

@@ -64,6 +64,7 @@ public - used for anything
 4. And your done - Run `bun run vader --build` and the compiled output is visible inside of the `/dist/` folder!
 ## Key Features & Examples
 ### File based routing

package/package.json CHANGED Viewed

@@ -2,20 +2,12 @@
   "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-3",
+  "version": "1.3.3-alpha-5",
   "bin": {
     "vader": "./vader.js"
   },
-  "scripts": {
-    "build": "bunx vader --build",
-    "watch": "bun run vader --watch",
-    "help": "bunx vader"
-  },
   "type": "module",
-  "devDependencies": {
-    "@types/bun": "latest"
-  },
-  "peerDependencies": {
-    "typescript": "^5.0.0"
+  "dependencies": {
+    "glob": "latest"
   }
-}
+}

package/runtime/{static/index.html → index.html} RENAMED Viewed

@@ -10,7 +10,7 @@
 <body>
     <div id="root"></div>
     <script type="module">
-        import VaderRouter from './public/vader/router.js'
+        import VaderRouter from './router.js'
         const router = new VaderRouter('/', 3000)
         window.router = router

package/runtime/vader.js ADDED Viewed

@@ -0,0 +1,552 @@
+window.params = {};
+window.Vader = {
+  version: "1.3.2",
+};
+let errors = {
+  "SyntaxError: Unexpected token '<'": "You forgot to enclose tags in a fragment <></>",
+}
+const path = {
+  basename: (path) => {
+    return path.split("/").pop();
+  },
+}
+window.queryRef = (ref) => {
+  return document.querySelector(`[data-ref="${ref}"]`)
+}
+window.reinvoke = (eventtype, element) => {
+  const eventListener = (e) => {
+    return e
+  };
+  // Check if the event listener has not been added before adding it
+  if (!element._eventListenerAdded) {
+    element.addEventListener(eventtype, eventListener);
+    // Set the flag to indicate that the event listener has been added
+    element._eventListenerAdded = true;
+    // Trigger the event without overwriting existing data or listeners
+    element.dispatchEvent(new Event(eventtype));
+  }
+};
+let invokes = []
+let hasran = [];
+let states = {};
+let mounts = [];
+export const strictMount = (key, callback) => {
+   let interval = setInterval(() => {
+    if(mounts.find(mount => mount.key === key)
+    && !hasran.includes(callback.toString())
+    ){
+      callback();
+      clearInterval(interval)
+    hasran.push(callback.toString());
+    }
+   },0);
+};
+window.delegate = (event) => {
+  return event.detail.target
+}
+let components = {};
+let style = document.createElement("style");
+ document.head.appendChild(style);
+const parseStyles = async (styles, className = '') => {
+    let css = await fetch(styles).then((res) => res.text());
+    let classes = css.split("}");
+    let parsedClasses = {};
+    classes.forEach((cls) => {
+      let name = cls.split(".")[1];
+      let value = cls.split("{")[1]
+      let keys = value.split(";");
+      let newKeys = [];
+      keys.forEach((key) => {
+        if (key.includes(":")) {
+          let newKey = key.split(":")[0].trim();
+          let newValue = key.split(":")[1].trim();
+          newKeys.push(`${newKey}: "${newValue}"`);
+        }
+      });
+      value = `{${newKeys.join(",")}}`;
+      parsedClasses[name] =  JSON.stringify(value);
+    });
+    return parsedClasses;
+};
+export const stylis = {
+  /**
+   * @method create
+   * @param {*} styles
+   * @returns  {Object} classes
+   * @description  This method allows you to create css classes from an object
+   */
+  create: async (/**@type {string} */ styles) => {
+    return  await parseStyles(styles);
+  },
+};
+/**
+ * @method mem
+ * @param {Component} component
+ * @returns  {Component} Stateless Component
+ * @description  This method allows you to memoize a component - this means it will be intialized only once and can be reused multiple times baased on a static key
+ */
+export const mem = (/**@type {Component}**/ component) => {
+  // ensure component is instance of Component
+  switch (true) {
+    case !(component instanceof Component):
+      throw new Error("component must be an instance of Component");
+    case !component.key:
+      throw new Error("component must have a static key");
+    // check if key was randomly generated
+  }
+  let key = component.key;
+  if (!components[key]) {
+    components[key] = component;
+  }
+  return  components[key];
+};
+/**
+ * @method invoke
+ * @description  This method allows you to invoke a function from its id
+ * @param {*} name
+ * @param {*} params
+ * @returns
+ * @example
+ * invoke(this.functions['test'], 'hello') // this will invoke the function test with the params hello
+ */
+let functions = {};
+export const invoke = (func, params) => {
+   let name = func.name;
+   window[name] = function (params) {
+      return func(params);
+   }
+   window[name] =  window[name].bind(this);
+   return `${name}(${params})`;
+};
+/**
+ * Represents a component in the Vader framework.
+ */
+export class Component {
+  /**
+   * Creates an instance of Component.
+   */
+  constructor() {
+    this.state = {};
+    this.key = null;
+    this.components = {};
+    this.mounted = false;
+    this.checkIFMounted();
+    this.currenthtml = null;
+    window.listeners = [];
+    this.functionMap = new Map();
+    this.freeMemoryFromFunctions();
+    this.memoizes = []
+    this.children = []
+  }
+  createComponent(/**@type {Component}**/component, props, children) {
+    if (!component) {
+      throw new Error("Component must be defined");
+    }
+    if(!props.key){
+      throw new Error('new components must have a key')
+    }
+    let comp = new component();
+    comp['props'] = props;
+    comp.children = children;
+    comp.props.children = children.join('')
+    comp.parentNode  = this;
+    comp.key = props.key || null;
+    this.components[props.key] = comp
+    this.children.push(comp)
+    return this.components[props.key]
+  }
+  memoize(/**@type {Component}**/component){
+    if(!component.key){
+      throw new Error('Component must have a static key')
+    }
+    switch(true){
+      case !this.memoizes.includes(component.key):
+        this.memoizes.push(component.key)
+        this.components[component.key] = component;
+        break;
+    }
+    let comp = this.components[component.key];
+    let h = comp.render()
+    if(h && h.split('>,').length > 1){
+      h = h.replaceAll('>,', '>')
+    }
+    return `<div key="${component.key}">${h}</div>`
+  }
+  parseStyle(styles){
+    let css = ''
+    Object.keys(styles).forEach((key) => {
+      let value = styles[key]
+       key = key.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase()
+       css += `${key}:${value};`
+    })
+    return css
+  }
+  bindMount(){
+    mounts.push(this)
+  }
+  /**
+   * Hydrates the component by updating the HTML content if it has changed.
+   * @private
+   */
+  hydrate() {
+    if (this.key) {
+      const el = document.querySelector(`[key="${this.key}"]`);
+      if (el) {
+        // Render the new HTML content
+        const newHtml = this.render();
+        // Compare the new HTML with the cached content
+        if (newHtml !== this.currentHtml) {
+          // Update the HTML only if it has changed
+          el.innerHTML = newHtml;
+          // Update the cached HTML content
+          this.currentHtml = newHtml;
+        }
+      }
+    }
+  }
+  /**
+   * Handles an object by parsing it as JSON and evaluating it.
+   * @param {string} obj - The object to handle.
+   * @returns {*} - The evaluated object.
+   * @prvate
+   */
+  handleObject(obj) {
+    try {
+      obj = JSON.parse(obj);
+    } catch (error) {
+      // Handle JSON parsing error if needed
+    }
+    return eval(obj);
+  }
+  /**
+   * Frees memory from functions that have not been used for a certain period of time.
+   * @private
+   */
+  freeMemoryFromFunctions() {
+    setInterval(() => {
+      for (var [key, value] in this.functionMap) {
+        if (Date.now() - value.lastUsed > 1000) {
+          this.functionMap.delete(key);
+        }
+      }
+    }, 1000);
+  }
+  /**
+   * Binds a function to the component.
+   * @param {string} funcData - The function data.
+   * @param {string} p - The parameter.
+   * @param {string} ref - The reference.
+   * @returns {string} - A valid inline JS function call.
+   */
+  bind(funcData, d) {
+    const name = `func_${crypto ? crypto.getRandomValues(new Uint32Array(1))[0] : Math.random()}`;
+    var dynamicFunction = (params) => {
+      let func = new Function(`return (async (${params}) => {
+        console.log('called')
+        ${funcData}
+       })()`);
+      func = func.bind(this);
+      func(params);
+    };
+    dynamicFunction = dynamicFunction.bind(this);
+    if (!this.functionMap.has(name)) {
+      document.addEventListener(`call_${name}`, (e) => {
+        dynamicFunction();
+        this.functionMap.set(e.detail.name, {
+          lastUsed: Date.now(),
+        });
+      });
+    }
+    this.functionMap.set(name, {
+      lastUsed: Date.now(),
+    });
+    window.call = (name, eventdata, params) => {
+      document.dispatchEvent(
+        new CustomEvent(`call_${name}`, {
+          detail: { name: `call_${name}`, target: eventdata },
+        })
+      );
+    };
+    // Return a valid inline js function call
+    return d.jsx ? dynamicFunction : `
+    ((event) => {
+      event.target.setAttribute('data-ref', '${d.ref}');
+      let reference = event.target.getAttribute('data-ref');
+      event.target.eventData = event;
+      let domquery = queryRef(reference);
+      domquery.eventData = event;
+      domquery.eventData.detail.target = domquery;
+      call('${name}', {event:domquery.eventData}, '${d.params}')
+    })(event)
+    `;
+  }
+  /**
+   * Calls a function with the specified parameters. and dispatches an event.
+   * @param {string} func - The function name.
+   * @param {...*} params - The function parameters.
+   */
+  callFunction(func,  isInlineJsx, ...params) {
+    if(!isInlineJsx && params[0] && params[0].detail){
+      let el = params[0].detail.target.event.target
+      params[0].data =   el.value;
+      params[0] = params[0].detail.target.event
+    }
+    func = func.replace(/'/g, '');
+     document.dispatchEvent(new CustomEvent(func, { detail: { name: func, params: params } }));
+  }
+  /**
+   * Uses a function with the specified parameters.
+   * @param {Function} func - The function to use.
+   * @param {string} params - The function parameters.
+   * @param {boolean} [isInlineJsx=false] - Indicates if the function is an inline JSX.
+   * @returns {string} - The function call.
+   */
+  useFunction(func, params, isInlineJsx = false) {
+    const sanitizedFuncName = func.name.trim().replace(/\s+/g, '_');
+    if (!invokes.includes(`'${sanitizedFuncName}'${this.key}`)) {
+      invokes.push(`'${sanitizedFuncName}'${this.key}`);
+      document.addEventListener(`call_${sanitizedFuncName}_${this.key}`, (e) => {
+        let { name, params } = e.detail;
+        if (name === `call_${sanitizedFuncName}_${this.key}`) {
+          let isarray = Array.isArray(params);
+          func(...(isarray ? params : [params]));
+        }
+      });
+      func = func.bind(this);
+    }
+    try {
+      params = JSON.parse(params);
+    } catch (error) {
+      // Handle JSON parsing error if needed
+    }
+    const returnString = isInlineJsx
+      ? `'call_${sanitizedFuncName}_${this.key}'`
+      : `document.dispatchEvent(new CustomEvent('call_${sanitizedFuncName}_${this.key}', { detail: { name: 'call_${sanitizedFuncName}_${this.key}', params: ${JSON.stringify(params)} } }))`;
+    return returnString;
+  }
+  /**
+   * Uses state to dynamically update the component.
+   * @method useState
+   * @param {string} [key=null] - The auto-generated key.
+   * @param {*} initialState - The initial state.
+   * @param {Component.render} [func=null] - The render function.
+   * @returns {Array} - An array containing the state value and the setter function.
+   */
+  useState(key = null, initialState) {
+    if (!this.state[key]) {
+      this.state[key] = initialState;
+    }
+    const getValue = () => this.state[key];
+    const set = (newValue) => {
+      this.state[key] = newValue;
+      this.hydrate();
+    };
+    return [getValue, set];
+  }
+  useRef(key = null, initialState) {
+    if (!this.state[key]) {
+      this.state[key] = initialState;
+    }
+    const getValue = () => this.state[key];
+    const set = (newValue) => {
+      this.state[key] = newValue;
+      this.hydrate();
+    };
+    return  {
+       bind: key,
+       current: () => document.querySelector(`[ref="${key}"]`) || this.state[key],
+    }
+  }
+  useReducer(key = null, initialState, func = null) {
+    const getValue = () => this.state[key];
+    const set = (newValue) => {
+      this.hydrate();
+    };
+    return [getValue, set];
+  }
+  /**
+   * Placeholder for content to be rendered.
+   * @method render
+   */
+  render() {}
+  /**
+   * Checks if the component is mounted and triggers the onMount method.
+   * @private
+   */
+  checkIFMounted() {
+    if (this.mounted) return;
+    let timer = setInterval(() => {
+      if (document.querySelector('[key="' + this.key + '"]')) {
+        clearInterval(timer);
+        this.mounted = true;
+        this.onMount();
+      }
+    }, 120);
+  }
+  /**
+   * Method that is called when the component is mounted.
+   * @method onMount
+   */
+  onMount() {}
+}
+let cache = {};
+/**
+ * @method require
+ * @description  Import  CommonJS modules like Node.js for the browser
+ * @param {string} path
+ * @param {Boolean} noresolve - used to tell if the path should be automatically handled or manually handled - this is false by default
+ * @returns
+ */
+export const require = async (path, noresolve = false) => {
+  if (cache[path]) {
+    return cache[path];
+  }
+  let file = ''
+  try {
+    file = await fetch(path).then((res) => res.text());
+  } catch (error) {
+     console.error(error)
+  }
+  file = file + `\n//# sourceURL=${path}\n`;
+  let filetype = path.split(".").pop();
+  switch (true) {
+    case filetype === "js":
+      let exports = file.match(/module.exports\s*=\s*{.*}/gs) || file.match(/exports\s*=\s*{.*}/gs);
+      exports = exports ? exports[0] : null;
+      if (exports) {
+        let keys = exports.split("{")[1].split("}")[0].split(",");
+        let returnstring = "";
+        keys.forEach((key) => {
+          key = key.trim();
+          returnstring += `${key},`;
+        });
+        returnstring = `return {${returnstring}}`;
+        file = file += returnstring;
+        file = file.replaceAll(exports, "");
+      }
+      return new Function(`return (async () => { ${file} })()`)();
+    case filetype === "jsx":
+    return new Function(`return (async () => { ${file} })()`)()
+  }
+};
+window.require = require;
+/**
+ * @method useState - type
+ * @param {*} initialState
+ * @returns  {Array} [value, set]
+ * @description Allows you to use state to dynamically update your component
+ */
+export const useState = (initialState) => {
+  let value = initialState;
+  if (key && !states[key]) {
+    this.states[key] = initialState;
+  }
+  return [value, (newValue) => {}];
+};
+const constants = {};
+let constantCounter = 0;
+export const constant = (value) => {
+  const key = `constant_${constantCounter++}`;
+  if (!constants[key]) {
+    constants[key] = value;
+  }
+  return constants[key];
+};
+export default {
+  Component,
+  require,
+  invoke,
+  mem,
+  constant,
+  useState,
+  strictMount,
+  stylis,
+}

package/vader.js CHANGED Viewed

@@ -1,24 +1,20 @@
-#!/usr/bin/env bun
-import fs, { watchFile } from "fs";
-import { Glob } from "bun";
+#!/usr/bin/env node
+import fs from "fs";
+import { glob, globSync, globStream, globStreamSync, Glob } from 'glob'
 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;
+if(!fs.existsSync(process.cwd() + '/dist')){
+  fs.mkdirSync(process.cwd() + '/dist')
+  fs.mkdirSync(process.cwd() + '/dist/public')
+  fs.mkdirSync(process.cwd() + '/dist/src')
+  fs.mkdirSync(process.cwd() + '/dist/pages')
+}else if(!fs.existsSync(process.cwd() + '/dist/public')){
+  fs.mkdirSync(process.cwd() + '/dist/public')
+}else if(!fs.existsSync(process.cwd() + '/src') && !fs.existsSync(process.cwd() + '/dist/src')){
+  fs.mkdirSync(process.cwd()  + '/dist/src')
+  fs.mkdirSync(process.cwd()  + '/src')
 }
 function Compiler(func) {
   let string = func;
   let comments = string
@@ -222,7 +218,8 @@ function Compiler(func) {
             otherdata["jsx"] = isJSXComponent;
             otherdata["ref"] = ref;
-            newvalue = newvalue.replaceAll(/\s+/g, "\n");
+            newvalue = newvalue.split('\n').map(line => line.trim() ? line.trim() + ';' : line).join('\n');
             let newatribute = `${attributeName}="\${this.bind(\`${newvalue}\` ${isJSXComponent ? "" : ","
               }${JSON.stringify(otherdata)} )}"`;
@@ -258,8 +255,9 @@ function Compiler(func) {
           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)} )}"`;
+          // since js is all in one line split it
+          newvalue = newvalue.split('\n').map(line => line.trim() ? line.trim() + ';' : line).join('\n');
+          let newattribute = `${attributeName}="\${this.bind(\`${newvalue}\` ${isJSXComponent ? "" : ","}${JSON.stringify(otherdata)} )}"`;
           newattribute = newattribute.replace(/\s+/g, " ")
           string = string.replace(old, newattribute);
         }
@@ -581,91 +579,86 @@ async function Build() {
   globalThis.isBuilding = true
   console.log('Compiling......')
   let reader = async (file) => {
-    let text = await Bun.file(file).text();
+    let text = await fs.readFileSync(file, "utf8");
     return text;
   };
   let writer = async (file, data) => {
-    await Bun.write(file, data);
+    switch (true) {
+      case !fs.existsSync(file):
+        fs.mkdirSync(file.split('/').slice(0, -1).join('/'), { recursive: true })
+        break;
+    }
+    await  fs.writeFileSync(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
+  const glb = await glob("**/**/**/**.{jsx,js}", {
+    ignore: ["node_modules/**/*", "dist/**/*"],
+    cwd: process.cwd() + '/pages/',
+    absolute: true,
+    recursive: true
+  });
+  for await (let file of  glb) {
+    let origin = file.split(process.cwd())[1] || file
+    let fileName = file.split(process.cwd() + '/pages/')[1]
     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)
-    }
+    file === 'index.jsx' ? file = '/' : null
+    let isBasePath = file === '/' ? true : false
+    // ex: /pages/index.jsx -  / or /pages/[id].jsx - /:id or /pages/folder/index.jsx - /folder
+    let aburl =  origin.split('pages')[1].split('.jsx')[0].replace('.jsx', '').replace('/index', '').replace('/_', '/:').replace('/[', '/:').replace(']', '')
+    aburl.includes('[') ? aburl = '/' +  aburl.split('[')[0].replace('/', '')   : null
-    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)
+      url:  isBasePath ? '/' : aburl,
+      pathname:  origin,
+    }
+    let data = await reader(process.cwd() + origin)
     data = Compiler(data)
-    await writer(process.cwd() + "/dist/pages/" + file, data);
+    await writer(process.cwd() + "/dist/pages/" + fileName, 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)
+       router.get('${obj.url}', async (req, res) => {
+         res.render(await require('.${obj.pathname}'), req, res)
        })
-       //@desc ${obj.filePath}
+       //@desc ${obj.pathname}
        ` + '\n'
-    let before = await Bun.file(process.cwd() + "/dist/app.js").exists() ? await reader(process.cwd() + "/dist/app.js") : ''
+    let before = fs.existsSync(process.cwd() + "/dist/app.js") ? await reader(process.cwd() + "/dist/app.js") : ''
     let newfile = before + '\n' + js
-    if (!before.includes(`//@desc ${obj.filePath}`)) {
+    if (!before.includes(`//@desc ${obj.pathname}`)) {
       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 }));
+  const scannedSourceFiles = await glob("**/**.{jsx,js}", {
+    ignore: ["node_modules/**/*", "dist/**/*"],
+    cwd: process.cwd() + '/src/',
+    absolute: true,
+  });
   scannedSourceFiles.forEach(async (file) => {
     file = file.split(process.cwd() + '/src/')[1]
@@ -678,57 +671,43 @@ async function Build() {
     await writer(process.cwd() + "/dist/src/" + file, data);
   })
-  const scannedPublicFiles = await Array.fromAsync(gb.scan({ cwd:  process.cwd() + '/public/', absolute: true }));
+  const scannedPublicFiles =  await glob("**/**.{css,js,html}", {
+    ignore: ["node_modules/**/*", "dist/**/*"],
+    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/" })
-  );
+  })
+  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 (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);
+      bundleSize += fs.statSync(process.cwd() +  "/runtime/" + file).size;
+      let data = await reader(process.cwd() + "/runtime/" + 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";
+import { url } from "inspector";
 switch (true) {
   case process.argv.includes('--watch'):
@@ -737,19 +716,20 @@ switch (true) {
 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')
+      const watcher = watch(
+        process.cwd() + '/pages',
+        { recursive: true },
+        (event, filename) => {
+          if (event == 'change'
+          && !globalThis.isBuilding
+          ) {
+            Build()
+          }
+        },
+      );
+      watcher.on('error', (err) => console.log(err))
     break;
   case process.argv.includes('--build'):