npm - vaderjs - Versions diffs - 1.4.6 → 1.4.8 - Mend

vaderjs 1.4.6 → 1.4.8

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 (6) hide show

package/README.MD CHANGED Viewed

@@ -45,7 +45,7 @@ Keyword folders - all files are passed from these folders to the build folder
 # Define your config
 ```ts
-import defineConfig from "../config";
+import defineConfig from "vaderjs/config";
 export default defineConfig({
     port: 3000,

package/bundler/index.js ADDED Viewed

@@ -0,0 +1,97 @@
+import {
+    Component,
+    e,
+    useState,
+    useEffect,
+    useFetch,
+    useAsyncState,
+    Fragment,
+} from "vaderjs";
+import { document } from "vaderjs/document";
+import fs from "fs";
+import ansiColors from "ansi-colors";
+let path2 = require("path");
+globalThis.Fragment = Fragment;
+globalThis.window = {
+    location: {
+        hash: "",
+        host: "",
+    },
+};
+globalThis.Component = Component;
+globalThis.e = e;
+globalThis.useFetch = useFetch;
+globalThis.useEffect = useEffect;
+globalThis.useAsyncState = useAsyncState;
+globalThis.useState = useState;
+globalThis.genKey = () => {
+    return crypto.randomUUID();
+};
+globalThis.document = {
+    createElement: (tag) => { },
+    getElementById: (id) => { },
+    querySelector: (query) => { },
+};
+await Bun.build({
+    entrypoints: [process.env.ENTRYPOINT],
+    minify: true,
+    root: process.cwd() + "/dist/",
+    outdir: process.cwd() + "/dist/",
+    format: "esm",
+    ...(process.env.DEV ? { sourcemap: "inline" } : {}),
+});
+let isClass = function (element) {
+    return element.toString().startsWith("class");
+};
+const generatePage = async (
+    data = { path: process.env.INPUT, route: process.env.OUT }
+) => {
+    const { path, route } = data;
+    if (path.includes("root.js")) return;
+    let html = await import(path).then((m) => m.default);
+    let { head } = await import(path).then((m) => m);
+    let isFunction = false;
+    globalThis.isServer = true;
+    if (isClass(html)) {
+        html = new html();
+        html.Mounted = true;
+        html = html.render();
+    } else {
+        isFunction = true;
+        let instance = new Component();
+        html = html.bind(instance);
+        instance.render = html;
+        html = instance.render();
+    }
+    let h = document(html);
+    if (!fs.existsSync(process.cwd() + "/dist" + path2.dirname(route))) {
+        fs.mkdirSync(process.cwd() + "/dist" + path2.dirname(route), {
+            recursive: true,
+        });
+    }
+    let headHtml = "";
+    if (head) {
+        headHtml = document(head());
+    }
+    Bun.write(
+        process.cwd() + "/dist/" + route + "/index.html",
+        `<!DOCTYPE html><head>${headHtml}</head>${h}
+              <script type="module">
+              import c from '${process.env.filePath}'
+              import {render} from '/src/vader/index.js'
+              render(c, document.body.firstChild)
+              </script>
+              `
+    );
+    console.log(
+        ansiColors.blue(
+            `${process.env.filePath.replace(".js", ".jsx")} - ${parseInt(
+                process.env.size
+            ).toFixed(2)}kb`
+        )
+    );
+    process.exit(0);
+};
+generatePage({ path: process.env.INPUT, route: process.env.OUT });

package/document/index.ts CHANGED Viewed

@@ -21,7 +21,7 @@ export const document = (element: any) => {
          continue;
       }
       //@ts-ignore
-      if (key.includes("on")) {
+      if (key.startsWith("on")){
          continue;
       }
       el += ` ${key}="${attributes[key]}"`;

package/index.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 //@ts-nocheck
 let isClassComponent = function(element) {
   return element.toString().startsWith("class");
-};
+};
 const memoizes = new Map();
 //@ts-ignore
@@ -14,9 +14,12 @@ declare global {
     state: any;
   }
   const genKey: any;
+  /**
+   * @description Allows you to check if current session is server or  client
+   */
   let isServer: boolean;
   /**
-   * @description - The params object is used to store the query parameters of the current URL
+   * @description - The params object is used to store the  parameters of the current URL
    * @example
    * // URL: https://example.com?name=John
    * console.log(params.name) // John
@@ -27,6 +30,7 @@ declare global {
    * console.log(params.age) // 20
    */
   let params:  { [key: string]: string };
+  let localStorage : []
 }
 //@ts-ignore
 globalThis.isServer = typeof window === "undefined";
@@ -39,6 +43,7 @@ globalThis.params = {
   },
 };
 /**
  * @description useFetch allows you to make POST - GET - PUT - DELETE requests then returns the data, loading state and error
@@ -51,12 +56,11 @@ export const useFetch = (url: string, options: any) => {
 };
 /**
- * @description A custom hook that allows you to use state in a functional component
- * @param key
+ * @description  - Handle asyncronous promises and return the data or error;
  * @param promise
  * @returns
  */
-export const useAsyncState = (key: string, promise: Promise<any>) => {
+export const useAsyncState = (promise: Promise<any>) => {
   return [null, () => {}];
 }
 export const useEffect = (callback:any, dependencies: any[]) => {
@@ -64,19 +68,18 @@ export const useEffect = (callback:any, dependencies: any[]) => {
   if (dependencies.length === 0) {
     callback();
   }
-}
+}
-function memoizeComponent(Component: any) {
-  let key = Component.toString();
-  if (memoizes.has(key)) {
-    return memoizes.get(key);
+export const Fragment = (props: any, children: any) => {
+  return  {
+    type: "div",
+    props: props || {},
+    children: children || [],
   }
-  let instance = new Component();
-  memoizes.set(key, instance);
-  return instance;
 }
+globalThis.Fragment = Fragment;
 /**
  * @description - Create a new element
  * @param element
@@ -85,30 +88,52 @@ function memoizeComponent(Component: any) {
  * @returns
  */
 export const e = (element: any, props: any, ...children: any[]) => {
-  if(typeof element === "function"){
-    let instance = new Component();
-    instance.render = element;
-    return instance.render()
-  }
-  return { type: element, props: props || {}, children: children || [] };
+  let instance;
+  switch (true){
+    case isClassComponent(element):
+       instance = new element();
+      instance.props = props;
+      instance.children = children;
+      return instance.render();
+    case typeof element === "function":
+      instance = new Component();
+      instance.render = element;
+      return instance.render();
+    default:
+      return { type: element, props: props || {}, children: children || [] };
+  }
 };
 /**
- * @description - Create a new element
+ * @description -  Manage state and forceupdate specific affected elements
  * @param key
  * @param initialState
  * @returns {state,  (newState: any, Element: string) => void, key}
  */
 export const useState = <T>(initialState: T) => {
-  const setState = (newState: T, Element: string) => {
+  const setState = (newState: T) => {
     initialState = newState;
   }
   return [initialState, setState];
-}
-//@ts-ignore
-if(!isServer){
-  window.state = {};
-}
+}
+/**
+ * @description -  Create a new component
+ * @param element
+ * @param props
+ * @param children
+ * @returns
+ * @example
+ * const App = (props) => {
+ *   return (
+ *     <div>
+ *       <h1>Hello, {props.name}</h1>
+ *     </div>
+ *    )
+ *  }
+ *
+ *  render(<App name="John" />, document.getElementById("root"));
+ */
 export class Component {
   props: any;
   state: any;
@@ -120,21 +145,12 @@ export class Component {
   constructor() {
     this.key = Math.random().toString(36).substring(7);
     this.props = {};
-    //@ts-ignore
-    if(!isServer){
-      window.state[this.key] = {};
-      this.state =  window.state[this.key];
-    }else{
-      this.state = {};
-    }
+    this.state = {};
     this.effect = [];
     this.Mounted = false;
-    this.element = null;
-  }
-  setState(newState: any, Element: string) {
-    globalThis.window.state[this.key] = { ...this.state, ...newState };
-    this.forceUpdate(Element);
+    this.element = null;
   }
   useEffect(callback: any, dependencies: any[]) {
     if (dependencies.length === 0 && this.Mounted && this.effect.length === 0) {
@@ -149,35 +165,41 @@ export class Component {
       }
     }
   }
-   useState <T> (key: string, defaultValue: T)  {
-    let value = sessionStorage.getItem("state_" + key) || defaultValue;
-    typeof value === "string" ? value = JSON.parse(value) : value;
-    window.onbeforeunload = function() {
-      sessionStorage.removeItem("state_" + key);
-    }
-    const setValue =  (newValue: T ,element: string) => {
-      value = newValue;
-      sessionStorage.setItem("state_" + key, JSON.stringify(value));
-      this.state[key] = value;
-      this.forceUpdate(element)
+   useState<T>(key: string, defaultValue: T) {
+    let value = sessionStorage.getItem("state_" + key) ? JSON.parse(sessionStorage.getItem("state_" + key)).value : defaultValue;
+    // Parse value if it's a stringified object or number
+    if (typeof value === 'string') {
+      try {
+        value = JSON.parse(value);
+      } catch (error) {
+        // Not a valid JSON, keep it as is
+      }
+    }
+    // Add listener for unload event to save state
+    if (!window['listener' + key]) {
+      window['listener' + key] = true;
+      window.addEventListener('beforeunload', () => {
+        sessionStorage.removeItem('state_' + key)
+      });
     }
-    return [value, setValue];
+    const setValue = (newValue: T) => {
+      value = newValue;
+      sessionStorage.setItem("state_" + key, JSON.stringify({ type: typeof newValue, value: newValue }));
+      this.forceUpdate(this.key)
+    };
+    return [value as T, setValue];
   }
-  useFetch(url, options) {
-    const { key } = options;
-    if (!key) {
-        throw new Error(`You must supply a key for the affected element in the options object`);
-    }
+  useFetch(url: string, options: any) {
     const loadingKey = "loading_" + url;
     const errorKey = "error" + url;
-    const dataKey = "_data" + url;
-    // Initialize loading to false if loadingKey doesn't exist in state
+    const dataKey = "_data" + url;
      let [loading, setLoading] = this.useState(loadingKey, false);
      let [error, setError] = this.useState(errorKey, null);
      let [data, setData] = this.useState(dataKey, null);
@@ -189,13 +211,13 @@ export class Component {
             .then((res) => res.json())
             .then((data) => {
               //@ts-ignore
-                setLoading(false, options.key);
-                setData(data, options.key);
-                this.forceUpdate(key);
+                setLoading(false);
+                setData(data);
+                this.forceUpdate(this.key);
             })
             .catch((err) => {
-                setError(err, options.key);
-                this.forceUpdate(key);
+                setError(err);
+                this.forceUpdate(this.key);
             });
     }
@@ -206,38 +228,39 @@ export class Component {
   forceUpdate(key) {
     //@ts-ignore
     let el = Array.from(document.querySelectorAll("*")).filter((el2: any) =>{ return el2.key === key})[0];
-    let newl = this.parseToElement(this.render());
+    let newl = this.toElement();
     if(newl.key !== key){
       //@ts-ignore
       newl = Array.from(newl.children).filter((el2) => el2.key === key)[0];
-    }
-    if (this.Reconciler.shouldUpdate(el, newl)) {
-       el.replaceWith(newl);
-    }
+    }
+    this.Reconciler.update(el, newl);
   }
   Reconciler = {
-     shouldUpdate(oldElement, newElement) {
-       if(oldElement.outerHTML === newElement.outerHTML){
-          return false;
-       }
-       let attributes = oldElement.attributes;
-        let newAttributes = newElement.attributes;
-      for (let i = 0; i < attributes.length; i++) {
-        let attribute = attributes[i];
-        if (attribute.name === "key") {
-          continue;
-        }
-        if (attribute.name === "class") {
-          if (attribute.value !== newElement.className) {
-            return true;
-          }
-          continue;
-        }
-        if (attribute.value !== newAttributes[attribute.name]) {
-          return true;
+    update: (oldElement, newElement) => {
+      if(!oldElement || !newElement) return;
+      if (this.Reconciler.shouldUpdate(oldElement, newElement) && oldElement.tagName == newElement.tagName){
+          oldElement.replaceWith(newElement)
+      } else {
+        let children = oldElement.childNodes;
+        for (let i = 0; i < children.length; i++) {
+          this.Reconciler.update(children[i], newElement.childNodes[i]);
         }
       }
-      return true;
+    },
+     shouldUpdate(oldElement, newElement) {
+      if (oldElement.nodeType !== newElement.nodeType) {
+        return true;
+      }
+      if (oldElement.nodeType === 3 && newElement.nodeType === 3) {
+        return oldElement.textContent !== newElement.textContent;
+      }
+      if (oldElement.nodeName !== newElement.nodeName) {
+        return true;
+      }
+      if (oldElement.childNodes.length !== newElement.childNodes.length) {
+        return true;
+      }
+      return false;
     }
   };
@@ -301,7 +324,12 @@ export class Component {
   }
   toElement() {
     let children = this.render();
+    //@ts-ignore
+    if(children.props['key']){
+      this.key = children.props['key'];
+    }
     let el = this.parseToElement(children);
+    el.key = this.key;
     return el;
   }
   render() {
@@ -321,8 +349,12 @@ function memoizeClassComponent(Component: any) {
   return instance;
 }
-export function render(element: any, container) {
+/**
+ * @description - Render jsx Componenet to the DOM
+ * @param element
+ * @param container
+ */
+export function render(element: any, container: HTMLElement) {
   if (isClassComponent(element)) {
     const instance = new element();
     instance.Mounted = true;
@@ -330,15 +362,13 @@ export function render(element: any, container) {
     instance.element = el;
     container.innerHTML = "";
     container.replaceWith(el);
-  } else {
-     // memoizeComponent(element);
+  } else {
      let memoizedInstance = memoizeClassComponent(Component);
       memoizedInstance.Mounted = true;
       memoizedInstance.render =  element.bind(memoizedInstance);
-      let el = memoizedInstance.toElement();
+      let el = memoizedInstance.toElement();
       container.innerHTML = "";
       container.replaceWith(el);
   }
-}
+}

package/main.js CHANGED Viewed

@@ -1,19 +1,19 @@
 #!/usr/bin/env bun
+import ansiColors from 'ansi-colors'
 import { Glob } from 'bun'
 const args = Bun.argv.slice(2)
 import fs from 'fs'
-import path from 'path'
+import path from 'path'
 if (!fs.existsSync(process.cwd() + '/app')) {
     console.error(`App directory not found in ${process.cwd()}/app`)
     process.exit(1)
 }
 if (!fs.existsSync(process.cwd() + '/public')) {
     fs.mkdirSync(process.cwd() + '/public')
-}
-const mode = args.includes('dev') ? 'development' :  args.includes('prod') || args.includes('build') ? 'production' : null
-if(!mode){
+}
+const mode = args.includes('dev') ? 'development' : args.includes('prod') || args.includes('build') ? 'production' : null
+if (!mode) {
     console.log(`
     Usage:
      bun vaderjs dev - Start development server output in dist/
@@ -22,15 +22,26 @@ if(!mode){
     process.exit(1)
 }
+console.log(
+    `VaderJS - v${require(process.cwd() + '/node_modules/vaderjs/package.json').version} 🚀
+  Mode: ${mode}
+  SSR: ${require(process.cwd() + '/config').default.ssr ? 'Enabled' : 'Disabled'}
+  PORT: ${require(process.cwd() + '/config').default.port || 8080}
+    `
+)
 let start = Date.now()
-console.log(`Starting build at ${new Date().toLocaleTimeString()}`)
+console.log(`Starting build at ${new Date().toLocaleTimeString()}`)
 let { port, host, host_provider } = require(process.cwd() + '/config').default
+if (host_provider === 'apache' && mode === 'development') {
+    console.warn('Note: SSR will not work with Apache')
+}
 if (!fs.existsSync(process.cwd() + '/jsconfig.json')) {
     let json = {
         "compilerOptions": {
             "jsx": "react",
             "jsxFactory": "e",
+            "jsxFragmentFactory": "Fragment",
         }
     }
     await Bun.write(process.cwd() + '/jsconfig.json', JSON.stringify(json, null, 4))
@@ -43,27 +54,27 @@ const handleReplacements = (code, file) => {
     let newLines = []
     for (let line of lines) {
         let hasImport = line.includes('import')
-        if(hasImport && line.includes('.jsx')){
+        if (hasImport && line.includes('.jsx')) {
             line = line.replace('.jsx', '.js')
         }
-        if(hasImport && line.includes('.css')){
-             try {
+        if (hasImport && line.includes('.css')) {
+            try {
                 let url = path.join('/' + line.split("'")[1])
                 let css = fs.readFileSync(process.cwd() + url, 'utf-8')
                 line = '';
-                if(!bindes.includes(`<link rel="stylesheet" href="${url}">`)) {
+                if (!bindes.includes(`<link rel="stylesheet" href="${url}">`)) {
                     bindes.push(`<link rel="stylesheet" href="${url}">`)
-                }
+                }
                 fs.mkdirSync(process.cwd() + '/dist' + path.dirname(url), { recursive: true })
                 fs.writeFileSync(process.cwd() + '/dist' + url, css)
-             } catch (error) {
+            } catch (error) {
                 console.error(error)
-             }
-        }
+            }
+        }
         if (line.toLowerCase().includes('genkey()')) {
             line = line.toLowerCase().replace('genkey()', `this.key = "${crypto.randomUUID()}"`)
         }
-        if(!hasImport && line.includes('useFetch')){
+        if (!hasImport && line.includes('useFetch')) {
             line = line.replace('useFetch', 'this.useFetch')
         }
         if (!hasImport && line.includes('useState')) {
@@ -72,7 +83,7 @@ const handleReplacements = (code, file) => {
             b4 = line.replace('useState(', `this.useState('${key}',`)
             line = b4
         }
-        if(!hasImport && line.includes('useAsyncState')){
+        if (!hasImport && line.includes('useAsyncState')) {
             let key = line.split(',')[0].split('[')[1].replace(' ', '')
             let b4 = line
             b4 = line.replace('useAsyncState(', `this.useAsyncState('${key}',`)
@@ -88,239 +99,180 @@ const handleReplacements = (code, file) => {
             let key = line.split(' ')[1].split('=')[0]
             b4 = line.replace('useRef(', `this.useRef('${key}',`)
             line = b4
-        }
+        }
         newLines.push(line)
     }
     let c = newLines.join('\n')
     return c
-}
+}
-async function generateApp() {
-// remove files from dist
-   if(mode === 'development'){
-    fs.rmdirSync(process.cwd() + '/dist', { recursive: true })
-   }else{
-    fs.mkdirSync(process.cwd() + '/dist', { recursive: true })
-   }
-   return new Promise(async (resolve, reject) => {
-    let routes = new Bun.FileSystemRouter({
-        dir: process.cwd() + '/app',
-        style: 'nextjs'
-    })
-    routes.reload()
-    globalThis.routes = routes.routes
-    Object.keys(routes.routes).forEach(async (route) => {
-        let r = routes.routes[route]
-        let code = await Bun.file(r).text()
-        code = handleReplacements(code)
-        r = r.replace(process.cwd().replace(/\\/g, '/') + '/app', '')
-        r = r.replace('.jsx', '.js')
-        fs.mkdirSync(path.dirname(process.cwd() + '/dist/' + r), { recursive: true })
-        fs.writeFileSync(process.cwd() + '/dist/' + path.dirname(r) + '/' +  path.basename(r), `
+async function generateApp() {
+    // remove files from dist
+    if (mode === 'development') {
+        fs.rmdirSync(process.cwd() + '/dist', { recursive: true })
+    } else {
+        fs.mkdirSync(process.cwd() + '/dist', { recursive: true })
+    }
+    return new Promise(async (resolve, reject) => {
+        let routes = new Bun.FileSystemRouter({
+            dir: process.cwd() + '/app',
+            style: 'nextjs'
+        })
+        routes.reload()
+        globalThis.routes = routes.routes
+        console.log(ansiColors.green(`Processing ${Object.keys(routes.routes).length} routes`))
+        Object.keys(routes.routes).forEach(async (route) => {
+            let r = routes.routes[route]
+            let code = await Bun.file(r).text()
+            code = handleReplacements(code)
+            let size = code.length / 1024
+            r = r.replace(process.cwd().replace(/\\/g, '/') + '/app', '')
+            r = r.replace('.jsx', '.js')
+            fs.mkdirSync(path.dirname(process.cwd() + '/dist/' + r), { recursive: true })
+            fs.writeFileSync(process.cwd() + '/dist/' + path.dirname(r) + '/' + path.basename(r), `
         let route = window.location.pathname.split('/').filter(v => v !== '')
         let params = {
-            ${Object.keys(routes.match(route).params || {}).length >  0 ? Object.keys(routes.match(route).params || {}) .map(p => {
+            ${Object.keys(routes.match(route).params || {}).length > 0 ? Object.keys(routes.match(route).params || {}).map(p => {
                 return `${p}: route[${Object.keys(routes.match(route).params).indexOf(p) + 1}]`
             }).join(',') : ""}
         }
         \n${code}
         `)
-        fs.mkdirSync(process.cwd() + '/dev', { recursive: true })
-        fs.writeFileSync(path.join(process.cwd() + '/dev/bundler.js'), `
-          import { Component, e, useState, useEffect, useFetch, useAsyncState } from 'vaderjs'
-          import { document } from 'vaderjs/document'
-          import fs from 'fs'
-          let path2 = require('path')
-          globalThis.window = {
-            location: {
-                hash: '',
-                host: '',
-            }
-          }
-          globalThis.Component = Component
-          globalThis.e = e
-          globalThis.useState = useState
-          globalThis.genKey = () => {
-            return crypto.randomUUID()
-          };
-          globalThis.document = {
-            createElement: (tag) => {},
-            getElementById: (id) => {},
-          }
-          await Bun.build({
-            entrypoints: [process.env.ENTRYPOINT],
-            minify:true,
-            root: process.cwd() + '/dist/',
-            outdir: process.cwd() + '/dist/',
-            format: 'esm',
-            ...(process.env.DEV ? { sourcemap: 'inline' } : {})
-         })
-        let isClass = function(element) {
-            return  element.toString().startsWith('class');
-        };
-        const generatePage = async (data = {path: process.env.INPUT, route: process.env.OUT}) => {
-            const { path, route } = data
-            if(path.includes('root.js')) return
-            let html = await import(path).then(m => m.default)
-            let { head } = await import(path).then(m => m)
-            let isFunction = false
-            globalThis.isServer = true
-            if(isClass(html)){
-                html = new html()
-                html.Mounted = true
-                html = html.render()
-            }else{
-                isFunction = true
-                let instance = new Component()
-                html = html.bind(instance)
-                instance.render = html
-                html = instance.render()
-            }
-            let h  = document(html)
-            if(!fs.existsSync(process.cwd() + '/dist' + path2.dirname(route))){
-                fs.mkdirSync(process.cwd() + '/dist' + path2.dirname(route), { recursive: true })
-            }
-            let headHtml = ''
-            if(head){
-                headHtml = document(head())
-            }
-            Bun.write(process.cwd() + '/dist/' + route + '/index.html', \`<!DOCTYPE html><head>\${headHtml}</head>\${h}
-            <script type="module">
-            import c from '\${process.env.filePath}'
-            import {render} from '/src/vader/index.js'
-            render(c, document.body.firstChild)
-            </script>
-            \`)
-         }
-         generatePage({path: process.env.INPUT, route: process.env.OUT})
-        `)
-        fs.mkdirSync(process.cwd() + '/dist/src/vader', { recursive: true })
-        fs.writeFileSync(process.cwd() + '/dist/src/vader/index.js', await new Bun.Transpiler({
-            loader: 'ts',
-        }).transformSync(await Bun.file(require.resolve('vaderjs')).text()))
-        const spawn = Bun.spawn({
-            cmd: ['bun', 'run', './dev/bundler.js'],
-            cwd: process.cwd(),
-            stdout: 'inherit',
-            env: {
-                ENTRYPOINT: path.join(process.cwd() + '/dist/' + path.dirname(r) +  '/' + path.basename(r)),
-                ROOT: process.cwd() + '/app/',
-                OUT:  path.dirname(r),
-                file: process.cwd() + '/dist/' + path.dirname(r) + '/index.js',
-                DEV: mode === 'development',
-                filePath: r,
-                INPUT:  `../app/${r.replace('.js', '.jsx')}`,
-            },
-            onExit({exitCode: code}) {
-                if (code === 0) {
-                    console.log('Build complete')
-                    resolve()
-                } else {
-                    reject()
-                }
+            fs.mkdirSync(process.cwd() + '/dev', { recursive: true })
+            if (!fs.existsSync(process.cwd() + '/dev/bundler.js')) {
+                fs.copyFileSync(require.resolve('vaderjs/bundler/index.js'), process.cwd() + '/dev/bundler.js')
             }
-        })
-    })
-    switch(host_provider){
-        case 'vercel':
-            let vercelData = {
-                rewrites: []
+            if (!fs.existsSync(process.cwd() + '/dev/readme.md')) {
+                fs.writeFileSync(process.cwd() + '/dev/readme.md', `# Please do not edit the bundler.js file in the dev directory. This file is automatically generated by the bundler. \n\n`)
             }
-            for(let route in routes.routes){
-                let {filePath, kind, name, params, pathname,query} = routes.match(route)
-                let exists = vercelData.rewrites.find(v => v.source === `/${route}`)
-                let paramString = ''
-                if(pathname === '/'){
-                    continue
+            fs.mkdirSync(process.cwd() + '/dist/src/vader', { recursive: true })
+            fs.writeFileSync(process.cwd() + '/dist/src/vader/index.js', await new Bun.Transpiler({
+                loader: 'ts',
+            }).transformSync(await Bun.file(require.resolve('vaderjs')).text()))
+            Bun.spawn({
+                cmd: ['bun', 'run', './dev/bundler.js'],
+                cwd: process.cwd(),
+                stdout: 'inherit',
+                env: {
+                    ENTRYPOINT: path.join(process.cwd() + '/dist/' + path.dirname(r) + '/' + path.basename(r)),
+                    ROOT: process.cwd() + '/app/',
+                    OUT: path.dirname(r),
+                    file: process.cwd() + '/dist/' + path.dirname(r) + '/index.js',
+                    DEV: mode === 'development',
+                    size,
+                    filePath: r,
+                    INPUT: `../app/${r.replace('.js', '.jsx')}`,
+                },
+                onExit({ exitCode: code }) {
+                    if (code === 0) {
+                        resolve()
+                    } else {
+                        reject()
+                    }
                 }
-                if(params){
-                    paramString = Object.keys(params).map(p => `:${p}`).join('/')
-                }
-                // replace double slashes
-                paramString = paramString.replace(/\/\//g, '/')
-                let base =  path.dirname(route)
-                if(base.includes('[')){
-                    base = base.split('[')[0].split('/').filter(v => v !== '').join('/')
-                }else{
-                    base = base.split('/').filter(v => v !== '').join('/')
+            })
+        })
+        switch (host_provider) {
+            case 'vercel':
+                let vercelData = {
+                    rewrites: []
                 }
-                if(!exists){
+                for (let route in routes.routes) {
+                    let { filePath, kind, name, params, pathname, query } = routes.match(route)
+                    let paramString = ''
+                    if (params) {
+                        paramString = Object.keys(params).map(p => `:${p}`).join('/')
+                    }
+                    // replace double slashes
+                    paramString = paramString.replace(/\/\//g, '/')
+                    let base = route.split('/').filter(v => v !== '').join('/')
+                    if (base.includes('[')) {
+                        base = base.split('[')[0].split('/').filter(v => v !== '').join('/')
+                    }
+                    // remove double slashes
+                    base = base.replace(/\/\//g, '/')
+                    if (base === '/' || base === '') {
+                        continue;
+                    }
                     vercelData.rewrites.push({
                         source: `/${base}/${paramString}`,
                         destination: `${path.dirname(routes.routes[route]).replace(process.cwd().replace(/\\/g, '/') + '/app', '')}/index.html`
                     })
                 }
-            }
-            fs.writeFileSync(process.cwd() + '/vercel.json', JSON.stringify(vercelData, null, 4))
+                fs.writeFileSync(process.cwd() + '/vercel.json', JSON.stringify(vercelData, null, 4))
+                break;
+        }
-        break;
-    }
-   })
+    })
 }
 await generateApp()
-function handleFiles(){
-   return new Promise(async (resolve, reject) => {
-       try {
-        let glob = new Glob('public/**/*')
-        for await (var i of glob.scan()){
-            let file = i
-            fs.mkdirSync(path.join(process.cwd() + '/dist', path.dirname(file)), { recursive: true })
-            fs.copyFileSync(file, path.join(process.cwd() + '/dist', file))
-        }
-        resolve()
-       } catch (error) {
-              reject(error)
-       }
-   })
-}
-await handleFiles()
-let  isBuilding = false;
-let timeout = null
-if(mode === 'development'){
-    const watcher = fs.watch(path.join(process.cwd() + '/app'), { recursive: true })
-    const publicWatcher = fs.watch(path.join(process.cwd() + '/public'), { recursive: true })
-    publicWatcher.on('change', async (event, filename) => {
-        try {
-            await handleFiles()
-            clients.forEach(c => {
-                c.send('reload')
-            })
-        } catch (error) {
-            console.error(error)
-        }
-    })
-    watcher.on('change', async (event, filename) => {
+function handleFiles() {
+    return new Promise(async (resolve, reject) => {
         try {
-            await generateApp()
-            handleFiles()
-            clients.forEach(c => {
-                c.send('reload')
-            })
+            let glob = new Glob('public/**/*')
+            for await (var i of glob.scan()) {
+                let file = i
+                fs.mkdirSync(path.join(process.cwd() + '/dist', path.dirname(file)), { recursive: true })
+                if (fs.existsSync(path.join(process.cwd() + '/dist', file))) {
+                    fs.rmSync(path.join(process.cwd() + '/dist', file))
+                }
+                fs.copyFileSync(file, path.join(process.cwd() + '/dist', file))
+            }
+            resolve()
         } catch (error) {
-            console.error(error)
+            reject(error)
         }
-    })
-    watcher.on('error', (err) => {
-        console.error(err)
     })
 }
+await handleFiles()
 globalThis.clients = []
-if(mode === 'development'){
+if (mode === 'development') {
+    const watcher = fs.watch(path.join(process.cwd() + '/app'), { recursive: true })
+    const publicWatcher = fs.watch(path.join(process.cwd() + '/public'), { recursive: true })
+    let isBuilding = false; // Flag to track build status
+// Initialize a variable to hold the timeout ID
+let debounceTimeout;
+// Function to handle file changes with debounce
+const handleFileChangeDebounced = async () => {
+    clearTimeout(debounceTimeout);
+    debounceTimeout = setTimeout(async () => {
+        if (!isBuilding) { // Check if not already building
+            isBuilding = true; // Set build flag to true
+            try {
+                await generateApp();
+                await handleFiles();
+                clients.forEach(c => {
+                    c.send('reload');
+                });
+            } catch (error) {
+                console.error(error);
+            } finally {
+                isBuilding = false; // Reset build flag
+            }
+        }
+    }, 500);
+};
+// Event listeners with debounced handling
+publicWatcher.on('change', handleFileChangeDebounced);
+watcher.on('change', handleFileChangeDebounced);
     let server = Bun.serve({
         port: port || 8080,
         websocket: {
@@ -333,34 +285,34 @@ if(mode === 'development'){
                     c.send(message)
                 })
             },
         },
         async fetch(req, res) {
-            if(res.upgrade(req)){
+            if (res.upgrade(req)) {
                 return new Response('Upgraded', { status: 101 })
             }
-            let url = new URL(req.url)
-            if(url.pathname.includes('.')){
-                let file = await Bun.file(path.join(process.cwd() + '/dist' + url.pathname))
-                if(!await file.exists()) return new Response('Not found', { status: 404 })
+            let url = new URL(req.url)
+            if (url.pathname.includes('.')) {
+                let file = await Bun.file(path.join(process.cwd() + '/dist' + url.pathname))
+                if (!await file.exists()) return new Response('Not found', { status: 404 })
                 return new Response(await file.text(), {
                     headers: {
-                        'Content-Type':  file.type
+                        'Content-Type': file.type
                     }
                 })
-            }
+            }
             let router = new Bun.FileSystemRouter({
                 dir: process.cwd() + '/app',
                 style: 'nextjs'
             })
-            router.reload()
+            router.reload()
             let route = router.match(url.pathname)
-            if(!route){
+            if (!route) {
                 return new Response('Not found', { status: 404 })
-            }
-            let p = route.pathname;
-            let base = path.dirname(route.filePath)
+            }
+            let p = route.pathname;
+            let base = path.dirname(route.filePath)
             base = base.replace(path.join(process.cwd() + '/app'), '')
             base = base.replace(/\\/g, '/').replace('/app', '/dist')
             return new Response(await Bun.file(path.join(base, 'index.html')).text() + `
@@ -376,12 +328,10 @@ if(mode === 'development'){
                 headers: {
                     'Content-Type': 'text/html'
                 }
-            })
+            })
         }
     })
-    console.log(`Server running on http://localhost:${server.port}`)
-}else{
+} else {
     console.log(`Build complete in ${Date.now() - start}ms at ${new Date().toLocaleTimeString()}`)
     process.exit(0)
 }

package/package.json CHANGED Viewed

@@ -1,9 +1,12 @@
 {
     "name": "vaderjs",
-    "version": "1.4.6",
+    "version": "1.4.8",
     "description": "A simple and powerful JavaScript library for building modern web applications.",
     "main":"./index.js",
     "bin": {
         "vaderjs": "./main.js"
+    },
+    "dependencies": {
+        "ansi-colors":"latest"
     }
 }