vaderjs 1.6.9 → 1.7.0

package/README.MD

@@ -20,10 +20,10 @@ export default function(){
   return(
     <div>
      <Switch>
-      <Match when={count() > 10}>
+      <Match when={count > 10}>
            <h1>Count is greater than 10 </h1>
       </Match>
-      <Match when={count() < 10}>
+      <Match when={count < 10}>
        <h1>Count is less than 10 </h1>
       </Match>
      </Switch>

package/bundler/index.js

@@ -1,11 +1,11 @@
 import {
-    Component,
-    e,
-    useState,
-    useEffect,
-    useFetch,
-    useAsyncState,
-    Fragment,
+  Component,
+  e,
+  useState,
+  useEffect,
+  useFetch,
+  useAsyncState,
+  Fragment,
 } from "vaderjs";
 import { document } from "vaderjs/document";
 import fs from "fs";
@@ -14,10 +14,10 @@ import path from "path";
 let path2 = require("path");
 globalThis.Fragment = Fragment;
 globalThis.window = {
-    location: {
-        hash: "",
-        host: "",
-    },
+  location: {
+    hash: "",
+    host: "",
+  },
 };
 globalThis.Component = Component;
 globalThis.e = e;
@@ -26,87 +26,99 @@ globalThis.useEffect = useEffect;
 globalThis.useAsyncState = useAsyncState;
 globalThis.useState = useState;
 globalThis.genKey = () => {
-    return crypto.randomUUID();
+  return crypto.randomUUID();
 };
 globalThis.document = {
-    createElement: (tag) => { },
-    getElementById: (id) => { },
-    querySelector: (query) => { },
+  createElement: (tag) => {},
+  getElementById: (id) => {},
+  querySelector: (query) => {},
 };
 await Bun.build({
-    entrypoints: [process.env.ENTRYPOINT],
-    minify: false,
-    root: process.cwd() + "/dist/",
-    outdir: process.cwd() + "/dist/",
-    
-    format: "esm",
-    ...(process.env.DEV ? { sourcemap: "inline" } : {}),
-    external:['*.jsx', '*.js', '*.ts']
+  entrypoints: [process.env.ENTRYPOINT],
+  minify: false,
+  root: process.cwd() + "/dist/",
+  outdir: process.cwd() + "/dist/",
+
+  format: "esm",
+  ...(process.env.DEV ? { sourcemap: "inline" } : {}),
+  external: ["*.jsx", "*.js", "*.ts"],
 });
 
-let builtCode = fs.readFileSync(path.join(process.cwd(), 'dist', process.env.filePath), 'utf-8')
- 
+let builtCode = fs.readFileSync(
+  path.join(process.cwd(), "dist", process.env.filePath),
+  "utf-8",
+);
+
 function handleReplacements(code) {
-    let lines = code.split("\n");
-    let newLines = [];
-    for (let line of lines) {
-        let hasImport = line.includes('import')
-        if(hasImport && line.includes('from') && !newLines.includes(line)){
-            try {
-                let url = line.includes("'") ? line.split("'")[1] : line.split('"')[1]
-                line = line.replace(url, url.replace('.jsx', '.js').replace('.tsx', '.js'))
-                line  = line.replace(url, url.replace('.ts', '.js').replace('.tsx', '.js'))
-                newLines.push(line)
-            } catch (error) {
-                continue;
-            }
-        }else{
-              newLines.push(line)
-        }
+  let lines = code.split("\n");
+  let newLines = [];
+  for (let line of lines) {
+    let hasImport = line.includes("import");
+    if (hasImport && line.includes("from") && !newLines.includes(line)) {
+      try {
+        let url = line.includes("'") ? line.split("'")[1] : line.split('"')[1];
+        line = line.replace(
+          url,
+          url.replace(".jsx", ".js").replace(".tsx", ".js"),
+        );
+        line = line.replace(
+          url,
+          url.replace(".ts", ".js").replace(".tsx", ".js"),
+        );
+        newLines.push(line);
+      } catch (error) {
+        continue;
+      }
+    } else {
+      newLines.push(line);
     }
-    return newLines.join("\n");
+  }
+  return newLines.join("\n");
 }
-builtCode = handleReplacements(builtCode)
-fs.writeFileSync(path.join(process.cwd(), 'dist', process.env.filePath), builtCode)
+builtCode = handleReplacements(builtCode);
+fs.writeFileSync(
+  path.join(process.cwd(), "dist", process.env.filePath),
+  builtCode,
+);
 
 let isClass = function (element) {
-    return element.toString().startsWith("class");
+  return element.toString().startsWith("class");
 };
 const generatePage = async (
-    data = { path: process.env.INPUT, route: process.env.OUT }
+  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();
-    }
+  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());  
-    }
-  
-    await Bun.write(
-        process.cwd() + "/dist/" + route + "/index.html",
-        `<!DOCTYPE html>
+  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());
+  }
+
+  await Bun.write(
+    process.cwd() + "/dist/" + route + "/index.html",
+    `<!DOCTYPE html>
         <head>
                ${headHtml}
                ${process.env.bindes}
@@ -114,29 +126,29 @@ const generatePage = async (
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
         </head>
         ${h}
-        <script type="module"> 
+        <script type="module">
           import c from '${process.env.filePath}'
           import {render, e} from '/src/vader/index.js'
           window.e = e
           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);
+              `,
+  );
+  console.log(
+    ansiColors.blue(
+      `${process.env.filePath.replace(".ts", ".js")} - ${parseInt(
+        process.env.size,
+      ).toFixed(2)}kb`,
+    ),
+  );
+  process.exit(0);
 };
- try {
-    if(process.env.isTs == undefined &&  process.env.isImport) {
-        generatePage({ path: process.env.INPUT, route: process.env.OUT }) 
-    }else if(process.env.isTs == undefined){
-        generatePage({ path: process.env.INPUT, route: process.env.OUT })
-    } 
- } catch (error) {
-    console.log(ansiColors.red(error))
- }
+try {
+  if (process.env.isTs == undefined && process.env.isImport) {
+    generatePage({ path: process.env.INPUT, route: process.env.OUT });
+  } else if (process.env.isTs == undefined) {
+    generatePage({ path: process.env.INPUT, route: process.env.OUT });
+  }
+} catch (error) {
+  console.log(ansiColors.red(error));
+}

package/index.ts

@@ -63,8 +63,8 @@ export const useFetch = (url: string, options: any) => {
 export const useAsyncState = (promise: Promise<any>) => {
   return [null, () => {}];
 }
-export const useEffect = (callback:any, dependencies: any[]) => {
-  dependencies = dependencies.map((dep) => dep.toString());
+export const useEffect = (callback:any, dependencies: any[] = []) => {
+  dependencies = dependencies.map((dep) =>  JSON.stringify(dep));
   if (dependencies.length === 0) {
     callback();
   }
@@ -138,9 +138,12 @@ export const e = (element, props, ...children) => {
       instance.Mounted = true;
       let firstEl = instance.render({key: instance.key, children: children, ...props}, children);
       instance.children = children;
-      if (!firstEl) firstEl = {type: "div", props: {key: instance.key,  ...props}, children: children};
+      if (!firstEl) {
+        return {type: "div", props: {key: instance.key,  ...props}, children: children};
+      }
+
       firstEl.props = { key: instance.key,  ...firstEl.props, ...props };
-      return firstEl;
+      return { type: "ghost", props:{}, children: [firstEl]}
     default:
       return { type: element, props: props || {}, children: children || [] };
   }
@@ -177,20 +180,15 @@ export function Match({ when, children }) {
  * @param key
  * @param initialState
  * @param persist - persist state on reload
- * @returns {()=> T,  (newState: any, Element: string) => void, key}
+ * @returns {T,  (newState: any, Element: string) => void, key}
  */
 export const useState = <T>(initialState: T, persist: false) => {
   const setState = (newState: T) => {
     initialState = newState;
   }
-  /**
-   * @returns {T}
-   */
-  const getVal = () => {
-    return initialState as T;
-  }
 
-  return [getVal, setState];
+
+  return [initialState, setState];
 }
 
 if (!isServer) {
@@ -215,6 +213,19 @@ if (!isServer) {
  *
  *  render(<App name="John" />, document.getElementById("root"));
  */
+
+ // create a hidden object on window
+ //
+if(!isServer){
+  Object.defineProperty(window, "state", {
+    value: [],
+    writable: true,
+    enumerable: true,
+  })
+
+}else{
+  globalThis.state = []
+}
 export class Component {
   props;
   state;
@@ -225,17 +236,27 @@ export class Component {
   effectCalls: any[]
   eventRegistry: any
   prevState;
+  refs: HTMLElement[] | any[]
+  state: any[] = []
   constructor() {
     this.key = crypto.randomUUID();
     this.props = {};
-    this.state = {};
     this.effect = [];
     this.Mounted = false;
+    this.state = [];
     this.element = null;
     this.effectCalls = []
     this.errorThreshold = 1000
     this.maxIntervalCalls  = 10
-    this.eventRegistry = new Map();
+    this.eventRegistry = new WeakMap();
+    this.refs = []
+  }
+  useRef = (key, value) => {
+     if(!this.refs.find((r)=> r.key == key)){
+        this.refs.push({key, value});
+     }
+
+      return this.refs.find((r)=> r.key == key).value;
   }
   useEffect(callback, dependencies = []) {
     const callbackId = callback.toString();
@@ -263,7 +284,10 @@ export class Component {
 
         setTimeout(() => {
             try {
-                callback();
+
+              effects.push(callbackId);
+
+                callback()
             } catch (error) {
                 console.error(error);
             }
@@ -273,7 +297,6 @@ export class Component {
     if (dependencies.length === 0 && this.Mounted && this.effect.length === 0 && !effects.includes(callbackId)){
         executeCallback();
         this.effect.push(callbackId);
-        effects.push(callbackId);
     } else {
         // Check if dependencies have changed
         let dependenciesChanged = false;
@@ -295,53 +318,96 @@ export class Component {
     }
 }
   useState(key, defaultValue, persist = false) {
+
     if (typeof window === "undefined")
       return [defaultValue, () => {
       }];
-     let value = sessionStorage.getItem("state_" + key) ? JSON.parse(sessionStorage.getItem("state_" + key)).value : defaultValue;
 
+     let value = this.state.find((v) => v.key == key) ?  this.state.find((v) => v.key == key).value : defaultValue;
+
+    if(!this.state.find(i => i.key === key)){
+      this.state.push({key: key, value: defaultValue})
+    }
     if (typeof value === "string") {
       try {
         value = JSON.parse(value);
       } catch (error) {
       }
     }
-    if (!window["listener" + key] && !isServer) {
-      window["listener" + key] = true;
-      window.addEventListener("beforeunload", () => {
-        !persist && sessionStorage.removeItem("state_" + key);
-      });
+
+    const clear = () =>{
+      this.state =  this.state.filter((v) => v.key !== key);
     }
     const setValue = (newValue) => {
+      // If newValue is a function, call it with the current value
       if (typeof newValue === "function") {
-        newValue = newValue(value);
+        const item = this.state.find(i => i.key === key);
+        newValue = item ? newValue(item.value) : newValue;
+      }
+
+
+      let itemIndex = this.state.findIndex(i => i.key === key);
+
+      if (itemIndex !== -1) {
+        this.state[itemIndex].value = newValue;
+      } else {
+        this.state.push({ key: key, value: newValue });
       }
-      sessionStorage.setItem("state_" + key, JSON.stringify({ value: newValue }));
+
       this.forceUpdate(this.key);
     };
-    const getVal = () => {
-      return sessionStorage.getItem("state_" + key) ? JSON.parse(sessionStorage.getItem("state_" + key)).value : defaultValue;
-    }
-    return [getVal, setValue];
+
+
+    return [value, setValue, clear];
   }
   useFetch(url, options) {
     const loadingKey = "loading_" + url;
     const errorKey = "error" + url;
     const dataKey = "_data" + url;
-    let [loading, setLoading] = this.useState(loadingKey, true);
-    let [error, setError] = this.useState(errorKey, null);
-    let [data, setData] = this.useState(dataKey, null);
-    if (loading && !error && !data) {
+    let [loading, setLoading, _clear1] = this.useState(loadingKey, true);
+    let [error, setError, _clear2] = this.useState(errorKey, null);
+    let [data, setData, clear] = this.useState(dataKey, null);
+    if (loading() && !error() && !data()) {
       fetch(url, options).then((res) => res.json()).then((data2) => {
         setLoading(false);
         setData(data2);
         this.forceUpdate(this.key);
+        setTimeout(()=> {
+          _clear1()
+          _clear2()
+          clear()
+        }, 1500)
       }).catch((err) => {
         setError(err);
         this.forceUpdate(this.key);
       });
     }
-    return [data, loading, error];
+    return { loading, error, data };
+  }
+  addEventListener(element, event, handler) {
+    // Ensure element is tracked
+    if (!this.eventRegistry.has(element)) {
+      this.eventRegistry.set(element, []);
+    }
+
+    // Check for duplicates
+    const registeredEvents = this.eventRegistry.get(element);
+    const isDuplicate = registeredEvents.some(
+      (e) => e.type === event && e.handler === handler
+    );
+    if (!isDuplicate) {
+      element.addEventListener(event, handler);
+      registeredEvents.push({ type: event, handler });
+      this.eventRegistry.set(element, registeredEvents);
+    }
+  }
+  removeEventListeners(element) {
+    // Unregister and remove all events for the element
+    const registeredEvents = this.eventRegistry.get(element) || [];
+    registeredEvents.forEach(({ type, handler }) => {
+      element.removeEventListener(type, handler);
+    });
+    this.eventRegistry.delete(element);
   }
   forceUpdate(key) {
     let el = Array.from(document.querySelectorAll("*")).filter((el2) => {
@@ -354,50 +420,92 @@ export class Component {
     this.Reconciler.update(el, newl);
   }
   Reconciler = {
-    update: (oldElement, newElement) => {
+    update:(oldElement, newElement) => {
       if (!oldElement || !newElement) return;
-
-      // Store and re-attach events before updating
-      const events = this.eventRegistry.get(oldElement) || [];
-
+    
+      // If nodes are the same type and can be updated
       if (this.Reconciler.shouldUpdate(oldElement, newElement)) {
-        let part = this.Reconciler.shouldUpdate(oldElement, newElement, true);
-        if (part === true) {
-          if (oldElement.nodeType === 3) {
-            oldElement.nodeValue = newElement.nodeValue;
+        // Update attributes of the parent
+        Array.from(oldElement.attributes).forEach(({ name }) => {
+          if (!newElement.hasAttribute(name)) {
+            oldElement.removeAttribute(name);
+          }
+        });
+    
+        Array.from(newElement.attributes).forEach(({ name, value }) => {
+          if (oldElement.getAttribute(name) !== value) {
+            oldElement.setAttribute(name, value);
+          }
+        });
+    
+        // Update the parent content (if text content differs)
+        if (oldElement.childNodes.length === 1 && oldElement.firstChild.nodeType === Node.TEXT_NODE) {
+          if (oldElement.textContent !== newElement.textContent) {
+            oldElement.textContent = newElement.textContent;
+          }
+          return; // No children to reconcile if it's a text node
+        }
+    
+        // Reconcile child nodes
+        const oldChildren = Array.from(oldElement.childNodes);
+        const newChildren = Array.from(newElement.childNodes);
+    
+        const maxLength = Math.max(oldChildren.length, newChildren.length);
+        for (let i = 0; i < maxLength; i++) {
+          if (i >= oldChildren.length) {
+            // Add new children
+            const newChildClone = newChildren[i].cloneNode(true);
+            oldElement.appendChild(newChildClone);
+    
+            // Transfer events for the new child
+            const newChildEvents = this.eventRegistry.get(newChildren[i]) || [];
+            newChildEvents.forEach(({ type, handler }) => {
+              this.addEventListener(newChildClone, type, handler);
+            });
+          } else if (i >= newChildren.length) {
+            // Remove extra old children
+            oldElement.removeChild(oldChildren[i]);
           } else {
-            oldElement.innerHTML = newElement.innerHTML;
-
-            // Swap attributes
-            for (let i = 0; i < newElement.attributes.length; i++) {
-              let attr = newElement.attributes[i];
-              oldElement.setAttribute(attr.name, attr.value);
-            }
-
-            // Re-attach events
-            for (const { event, handler } of events) {
-              oldElement.addEventListener(event, handler);
-            }
-
-            // Update children recursively
-            for (let i = 0; i < newElement.childNodes.length; i++) {
-              this.Reconciler.update(oldElement.childNodes[i], newElement.childNodes[i], true);
-            }
+            // Update existing children recursively
+            this.Reconciler.update(oldChildren[i], newChildren[i]);
           }
-        } else if (part.type === "attribute") {
-          oldElement.setAttribute(part.name, part.value);
         }
+    
+        // Reapply events to the parent
+        const parentEvents = this.eventRegistry.get(newElement) || [];
+        parentEvents.forEach(({ type, handler }) => {
+          this.addEventListener(oldElement, type, handler);
+        });
       } else {
-        // Update children recursively
-        for (let i = 0; i < newElement.childNodes.length; i++) {
-          this.Reconciler.update(oldElement.childNodes[i], newElement.childNodes[i], true);
+        const oldChildren = Array.from(oldElement.childNodes);
+        const newChildren = Array.from(newElement.childNodes);
+    
+        const maxLength = Math.max(oldChildren.length, newChildren.length);
+        for (let i = 0; i < maxLength; i++) {
+          if (i >= oldChildren.length) {
+            // Add new children
+            const newChildClone = newChildren[i].cloneNode(true);
+            oldElement.appendChild(newChildClone);
+    
+            // Transfer events for the new child
+            const newChildEvents = this.eventRegistry.get(newChildren[i]) || [];
+            newChildEvents.forEach(({ type, handler }) => {
+              this.addEventListener(newChildClone, type, handler);
+            });
+          } else if (i >= newChildren.length) {
+            // Remove extra old children
+            oldElement.removeChild(oldChildren[i]);
+          } else {
+            // Update existing children recursively
+            this.Reconciler.update(oldChildren[i], newChildren[i]);
+          }
         }
       }
     },
-
+    
     shouldUpdate: (oldElement, newElement, isChild = false) => {
       if (oldElement.nodeType !== newElement.nodeType) {
-        return oldElement.innerHTML !== newElement.innerHTML ? { type: 'innerHTML' } : true;
+        return oldElement.innerHTML !== newElement.innerHTML ? { type: "innerHTML" } : true;
       }
       if (oldElement.nodeType === 3 && newElement.nodeType === 3) {
         if (oldElement.nodeValue !== newElement.nodeValue) {
@@ -411,7 +519,7 @@ export class Component {
         return true;
       }
       if (newElement.attributes) {
-        for (let i = 0; i < newElement.attributes.length; i++) {
+        for (let i = 0;i < newElement.attributes.length; i++) {
           let attr = newElement.attributes[i];
           if (oldElement.getAttribute(attr.name) !== attr.value) {
             return { type: "attribute", name: attr.name, value: attr.value };
@@ -428,7 +536,7 @@ export class Component {
     let svg = ["svg", "path", "circle", "rect", "line", "polyline", "polygon", "ellipse", "g"];
     let el =  svg.includes(element.type) ? document.createElementNS("http://www.w3.org/2000/svg", element.type) : document.createElement(element.type);
     let isText = typeof element === "string" || typeof element === "number" || typeof element === "boolean";
-    if (isText) {
+    if (isText && element){ 
       el.innerHTML = element;
     } else {
       let attributes = element.props;
@@ -439,7 +547,7 @@ export class Component {
           continue;
         }
         if (key === "className") {
-          el.className = attributes[key];
+          el.setAttribute("class", attributes[key]);
           continue;
         }
         if (key === "style") {
@@ -454,7 +562,8 @@ export class Component {
         }
         if (key.startsWith("on")) {
           el.addEventListener(key.substring(2).toLowerCase(), attributes[key]);
-          this.eventRegistry.set(el, [...(this.eventRegistry.get(el) || []), { event: key.substring(2).toLowerCase(), handler: attributes[key] }]);
+          this.eventRegistry.set(el, [...this.eventRegistry.get(el) || [], { event: key.substring(2).toLowerCase(), handler: attributes[key] }]);
+          this.addEventListener(el,key.substring(2).toLowerCase(), attributes[key])
           continue;
         }
         el.setAttribute(key, attributes[key]);
@@ -468,8 +577,7 @@ export class Component {
             el.appendChild(this.parseToElement(c));
           });
         }
-        if (typeof child === "function") {
-          console.log("child is function");
+        if (typeof child === "function") { 
           let comp = memoizeClassComponent(Component);
           comp.Mounted = true;
           comp.render = child;
@@ -478,7 +586,7 @@ export class Component {
           el.appendChild(el2);
         } else if (typeof child === "object") {
           el.appendChild(this.parseToElement(child));
-        } else {
+        } else if(child){
           let span = document.createTextNode(child)
           el.appendChild(span);
         }

package/main.js

@@ -110,7 +110,9 @@ const vader = {
 const handleReplacements = (code) => {
     let lines = code.split('\n')
     let newLines = []
+    let isDefault
     for (let line of lines) {
+
         let hasImport = line.includes('import')
 
         if (hasImport && line.includes('.css')) {
@@ -300,7 +302,6 @@ async function generateApp() {
 function handleFiles() {
     return new Promise(async (resolve, reject) => {
         try {
-            console.log(Glob)
             let glob = new Glob('public/**/*')
             for await (var i of glob.scan()) {
                 let file = i
@@ -311,42 +312,42 @@ function handleFiles() {
                 fs.copyFileSync(file, path.join(process.cwd() + '/dist', file))
             }
             let glob2 = new Glob('src/**/*')
-            for await (var i of glob2.scan()) {
-                var file = i
-                fs.mkdirSync(path.join(process.cwd() + '/dist', path.dirname(file)), { recursive: true })
-                // turn jsx to js
-                if (file.includes('.jsx') || file.includes('.tsx')) {
-                    let code = await Bun.file(file).text()
-
-                    code = handleReplacements(code)
-
-                    file = file.replace('.jsx', '.js').replace('.tsx', '.js')
-                    fs.writeFileSync(path.join(process.cwd() + '/dist', file.replace('.jsx', '.js').replace('.tsx', '.js')), code)
-                    await Bun.spawn({
-                        cmd: ['bun', 'run', './dev/bundler.js'],
-                        cwd: process.cwd(),
-                        stdout: 'inherit',
-                        env: {
-                            ENTRYPOINT: path.join(process.cwd() + '/dist/' + file.replace('.jsx', '.js').replace('.tsx', '.js')),
-                            ROOT: process.cwd() + '/app/',
-                            OUT: path.dirname(file),
-                            shouldReplace: true,
-                            file: process.cwd() + '/dist/' + file.replace('.jsx', '.js').replace('.tsx', '.js'),
-                            DEV: mode === 'development',
-                            size: code.length / 1024,
-                            filePath: file.replace('.jsx', '.js'),
-                            isTs: file.includes('.tsx'),
-                            INPUT: path.join(process.cwd(), file.replace('.js', '.jsx').replace('.tsx', '.js')),
-                        },
-                        onExit({ exitCode: code }) {
-                            if (code === 0) {
-                                resolve()
-                            } else {
-                                reject()
-                            }
-                        }
-                    })
-                } else if (file.includes('.ts')) {
+          for await (var i of glob2.scan()) {
+            var file = i
+            fs.mkdirSync(path.join(process.cwd() + '/dist', path.dirname(file)), { recursive: true })
+            // turn jsx to js
+            if (file.includes('.jsx') || file.includes('.tsx')) {
+              let code = await Bun.file(file).text()
+
+              code = handleReplacements(code)
+
+              file = file.replace('.jsx', '.js').replace('.tsx', '.js')
+              fs.writeFileSync(path.join(process.cwd() + '/dist', file.replace('.jsx', '.js').replace('.tsx', '.js')), code)
+              await Bun.spawn({
+                cmd: ['bun', 'run', './dev/bundler.js'],
+                cwd: process.cwd(),
+                stdout: 'inherit',
+                env: {
+                  ENTRYPOINT: path.join(process.cwd() + '/dist/' + file.replace('.jsx', '.js').replace('.tsx', '.js')),
+                  ROOT: process.cwd() + '/app/',
+                  OUT: path.dirname(file),
+                  shouldReplace: true,
+                  file: process.cwd() + '/dist/' + file.replace('.jsx', '.js').replace('.tsx', '.js'),
+                  DEV: mode === 'development',
+                  size: code.length / 1024,
+                  filePath: file.replace('.jsx', '.js'),
+                  isTs:  false,
+                  INPUT: path.join(process.cwd(), file.replace('.js', '.jsx').replace('.tsx', '.js')),
+                },
+                onExit({ exitCode: code }) {
+                  if (code === 0) {
+                    resolve()
+                  } else {
+                    reject()
+                  }
+                }
+              })
+            } else if (file.includes('.ts') || file.includes('.js')) {
                     let code = await Bun.file(file).text()
                     code = handleReplacements(code)
                     file = file.replace('.ts', '.js')
@@ -361,10 +362,10 @@ function handleFiles() {
                             OUT: path.dirname(file),
                             file: process.cwd() + '/dist/' + file.replace('.ts', '.js'),
                             DEV: mode === 'development',
-                            isTS: true,
+                            isTs: true,
                             size: code.length / 1024,
                             filePath: file.replace('.ts', '.js'),
-                            INPUT: path.join(process.cwd(), file.replace('.js', '.jsx')),
+                            INPUT: path.join(process.cwd(), file.replace('.ts', '.js')),
                         },
                         onExit({ exitCode: code }) {
                             if (code === 0) {
@@ -399,6 +400,7 @@ if (mode === 'development') {
     const handleFileChangeDebounced = async (change, file) => {
         if (file.endsWith('.tsx') || file.endsWith('.jsx') || file.endsWith('.css') || file.endsWith('.ts')
         && !file.includes('node_module')
+        || file.endsWith('.js') && !file.includes('dist')
         ) {
             // delete files cache
             if (file.endsWith('vader.config.ts')){

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vaderjs",
-    "version": "1.6.9",
+    "version": "1.7.0",
     "description": "A simple and powerful JavaScript library for building modern web applications.", 
     "bin": {
         "vaderjs": "./main.js"