vaderjs 1.7.3 → 1.7.5

package/bundler/index.js

@@ -7,7 +7,7 @@ import {
   useAsyncState,
   Fragment,
 } from "vaderjs";
-import { document } from "vaderjs/document";
+import { document } from "vaderjs/document/index.ts";
 import fs from "fs";
 import ansiColors from "ansi-colors";
 import path from "path";
@@ -15,8 +15,8 @@ let path2 = require("path");
 globalThis.Fragment = Fragment;
 globalThis.window = {
   location: {
-    hash: "",
-    host: "",
+      hash: "",
+      host: "",
   },
 };
 globalThis.Component = Component;
@@ -29,126 +29,122 @@ globalThis.genKey = () => {
   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"],
-});
+try {
+  await Bun.build({
+      entrypoints: [process.env.ENTRYPOINT],
+      minify: false,
+      root: process.cwd() + "/dist/",
+      outdir: process.cwd() + "/dist/", 
+      format: "esm",
+      ...(process.env.DEV ? { sourcemap: "inline" } : {}),
+      packages: "bundle",
+      external: ['*.jsx', '*.js', '*.ts']
+  });
+} catch (error) {
+console.error(error)
+}
 
-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;
+      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)
       }
-    } else {
-      newLines.push(line);
-    }
   }
   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");
+let isClass = function (element) { 
+  return element && 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;
+  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();
+  globalThis.isServer = true; 
+  if(!html){
+    return
+  }
+  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();
+      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,
-    });
+      fs.mkdirSync(process.cwd() + "/dist" + path2.dirname(route), {
+          recursive: true,
+      });
   }
   let headHtml = "";
   if (head) {
-    headHtml = document(head());
+      headHtml = document(head());
+  }
+
+
+
+  if (h.includes("<head>")) { 
+      h = h.replace("<head>", `<head>${process.env.bindes}`)
+  }else{
+    h += process.env.bindes
   }
 
   await Bun.write(
-    process.cwd() + "/dist/" + route + "/index.html",
-    `<!DOCTYPE html>
-        <head>
-               ${headHtml}
-               ${process.env.bindes}
-               <meta charset="UTF-8">
-               <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        </head>
-        ${h}
-        <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>
-              `,
+      process.cwd() + "/dist/" + route + "/index.html",
+      `<!DOCTYPE html>
+      ${h} 
+      <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(".ts", ".js")} - ${parseInt(
-        process.env.size,
-      ).toFixed(2)}kb`,
-    ),
+      ansiColors.blue(
+          `${process.env.filePath.replace(".js", ".jsx")} - ${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 });
+}; 
+try {  
+    if (process.env.isJsx == "true" && process.env.isAppFile == "true"  ) {
+      generatePage({ path: process.env.INPUT, route: process.env.OUT })
   }
 } catch (error) {
-  console.log(ansiColors.red(error));
-}
+  console.log(ansiColors.red(error))
+}

package/index.ts

@@ -124,6 +124,8 @@ globalThis.Fragment = Fragment;
  * @returns
  */
 export const e = (element, props, ...children) => {
+  if (!element)
+    return "";
   let instance;
   switch (true) {
     case isClassComponent(element):
@@ -135,6 +137,10 @@ export const e = (element, props, ...children) => {
     case typeof element === "function":
       instance = new Component;
       instance.render = element;
+      if(element.name.toLowerCase() == "default"){
+        throw new Error("Function name must be unique")
+      } 
+      instance.key = element.name
       instance.Mounted = true;
       let firstEl = instance.render({ key: instance.key, children, ...props }, children);
       instance.children = children;
@@ -404,165 +410,213 @@ export class Component {
     }
     this.Reconciler.update(el, newl);
   }
+  attachEventsRecursively = (element, source) => {
+    // Rebind events for the current element
+    const events = this.eventRegistry.get(source) || [];
+    events.forEach(({ event, handler }) => {
+      this.addEventListener(element, event, handler);
+    });
+  
+    // Traverse children recursively
+    const children = Array.from(source.childNodes || []);
+    const elementChildren = Array.from(element.childNodes || []);
+  
+    children.forEach((child, index) => {
+      if (elementChildren[index]) {
+        this.attachEventsRecursively(elementChildren[index], child);
+      }
+    });
+  };
+
+
   Reconciler = {
-    update: (oldElement, newElement) => {
-      if (!oldElement || !newElement)
-        return;
+    update: (oldElement, newElement) => { 
+      if (!oldElement || !newElement) return;
+  
+      // Check if the current element needs an update
       if (this.Reconciler.shouldUpdate(oldElement, newElement)) {
-        console.log(oldElement, newElement)
-        if (oldElement.attributes && Object.keys(oldElement.attributes).length > 0)
-          Array.from(oldElement.attributes).forEach(({ name }) => {
-            if (!newElement.hasAttribute(name)) {
-              oldElement.removeAttribute(name);
-            }
-          });
-        if (newElement.attributes && Object.keys(newElement.attributes).length > 0)
-          Array.from(newElement.attributes).forEach(({ name, value }) => {
-            if (oldElement.getAttribute(name) !== value) {
-              oldElement.setAttribute(name, value);
-            }
-          });
-        if (oldElement.childNodes.length === 1 && oldElement.firstChild.nodeType === Node.TEXT_NODE) {
-          if (oldElement.textContent !== newElement.textContent) {
-            oldElement.textContent = newElement.textContent;
-          }
-          return;
-        }else if(oldElement.nodeType === Node.TEXT_NODE){
-          if (oldElement.textContent !== newElement.textContent) {
-            oldElement.textContent = newElement.textContent;
-          }
-          return;
-        }
+        // Update attributes
         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++) {
+        for (let i = 0; i < maxLength; i++) {
           if (i >= oldChildren.length) {
             const newChildClone = newChildren[i].cloneNode(true);
             oldElement.appendChild(newChildClone);
-            const newChildEvents = this.eventRegistry.get(newChildren[i]) || [];
-            newChildEvents.forEach(({ type, handler }) => {
-              this.addEventListener(newChildClone, type, handler);
-            });
+    
+            // Rebind events to the new child (and its children recursively)
+            this.attachEventsRecursively(newChildClone, newChildren[i]);
           } else if (i >= newChildren.length) {
             oldElement.removeChild(oldChildren[i]);
           } else {
             this.Reconciler.update(oldChildren[i], newChildren[i]);
           }
         }
-        const parentEvents = this.eventRegistry.get(newElement) || [];
-        parentEvents.forEach(({ type, handler }) => {
-          this.addEventListener(oldElement, type, handler);
+    
+        Array.from(oldElement.attributes || []).forEach(({ name }) => {
+          if (!newElement.hasAttribute(name)) {
+            oldElement.removeAttribute(name);
+          }
         });
-      } else {
-        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) {
-            const newChildClone = newChildren[i].cloneNode(true);
-            oldElement.appendChild(newChildClone);
-            const newChildEvents = this.eventRegistry.get(newChildren[i]) || [];
-            newChildEvents.forEach(({ type, handler }) => {
-              this.addEventListener(newChildClone, type, handler);
-            });
-          } else if (i >= newChildren.length) {
-            oldElement.removeChild(oldChildren[i]);
-          } else { 
-            this.Reconciler.update(oldChildren[i], newChildren[i]);
+  
+        Array.from(newElement.attributes || []).forEach(({ name, value }) => {
+          if (oldElement.getAttribute(name) !== value) {
+            oldElement.setAttribute(name, value);
+          }
+        });
+  
+        // Handle text node updates
+        if (oldElement.nodeType === Node.TEXT_NODE) {
+          if (oldElement.textContent !== newElement.textContent) {
+            oldElement.textContent = newElement.textContent;
           }
+          return;
+        }
+  
+        // If the element has a single text node, update text directly
+        if (
+          oldElement.childNodes.length === 1 &&
+          oldElement.firstChild.nodeType === Node.TEXT_NODE
+        ) {
+          if (oldElement.textContent !== newElement.textContent) {
+            oldElement.textContent = newElement.textContent;
+          }
+          return;
         }
       }
+  
+      // Process children recursively
+      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 child if it exists in newChildren but not in oldChildren
+          const newChildClone = newChildren[i].cloneNode(true);
+          oldElement.appendChild(newChildClone);
+  
+          // Attach any event listeners
+          const newChildEvents = this.eventRegistry.get(newChildren[i]) || [];
+          newChildEvents.forEach(({ type, handler }) => {
+            this.addEventListener(newChildClone, type, handler);
+          });
+        } else if (i >= newChildren.length) {
+          // Remove child if it exists in oldChildren but not in newChildren
+          oldElement.removeChild(oldChildren[i]);
+        } else { 
+          this.Reconciler.update(oldChildren[i], newChildren[i]);
+        }
+      }
+  
+      // Reapply events for the current element
+      const parentEvents = this.eventRegistry.get(newElement) || [];
+      parentEvents.forEach(({ type, handler }) => {
+        this.addEventListener(oldElement, type, handler);
+      });
+
     },
-    shouldUpdate: (oldElement, newElement, isChild = false) => {
+    shouldUpdate: (oldElement, newElement) => { 
+      // Check if node types differ
       if (oldElement.nodeType !== newElement.nodeType) {
-        return oldElement.innerHTML !== newElement.innerHTML ? { type: "innerHTML" } : true;
+        return true;
       }
-      if (oldElement.nodeType === 3 && newElement.nodeType === 3) {
-        if (oldElement.nodeValue !== newElement.nodeValue) {
-          return true;
-        }
+  
+      // Check if text content differs
+      if (oldElement.nodeType === Node.TEXT_NODE) {
+        return oldElement.textContent !== newElement.textContent;
       }
+  
+      // Check if node names differ
       if (oldElement.nodeName !== newElement.nodeName) {
         return true;
       }
+  
+      // Check if child counts differ
       if (oldElement.childNodes.length !== newElement.childNodes.length) {
         return true;
       }
-      if (newElement.attributes) {
-        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 };
-          }
+  
+      // Check if attributes differ
+      const newAttributes = Array.from(newElement.attributes || []);
+      for (let { name, value } of newAttributes) {
+        if (oldElement.getAttribute(name) !== value) {
+          return true;
         }
       }
+  
+      // If no differences found, no update needed
       return false;
-    }
-  };
-
+    },
+  } 
+  
   parseToElement = (element) => {
-    if (!element) return document.createElement("div");
-    // create either a element or svg element
-    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 && element) {
-      el.innerHTML = element;
-    } else {
-      let attributes = element.props;
-      let children = element.children;
-      for (let key in attributes) {
-        if (key === "key") {
-          el.key = attributes[key];
-          continue;
-        }
-        if (key === "className") {
-          el.setAttribute("class", attributes[key]);
-          continue;
-        }
-        if (key === "style") {
-          try {
-            for (let styleKey in attributes[key]) {
-              el.style[styleKey] = attributes[key][styleKey];
-            }
-          } catch (error) {
-
+    if (!element || element.nodeType) return  "" 
+  
+    let svgTags = ["svg", "path", "circle", "rect", "line", "polyline", "polygon", "ellipse", "g"];
+    let isSvg = svgTags.includes(element.type);
+  
+    // Create the element, using proper namespace for SVG
+    let el = isSvg
+      ? document.createElementNS("http://www.w3.org/2000/svg", element.type)
+      : document.createElement(element.type);
+  
+    // Handle text nodes
+    if (typeof element === "string" || typeof element === "number" || typeof element === "boolean") {
+      el.textContent = element; // Safer alternative to innerHTML
+      return el;
+    }
+  
+    // Set attributes
+    let attributes = element.props || {};
+    for (let key in attributes) {
+      if (key === "key") {
+        el.key = attributes[key];
+      } else if (key === "className") {
+        el.setAttribute("class", attributes[key]);
+      } else if (key === "style") {
+        let styleObject = attributes[key];
+        if (typeof styleObject === "object") {
+          for (let styleKey in styleObject) {
+            el.style[styleKey] = styleObject[styleKey];
           }
-          continue;
-        }
-        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.addEventListener(el, key.substring(2).toLowerCase(), attributes[key])
-          continue;
         }
+      } else if (key.startsWith("on")) {
+        // Event listeners
+        const eventType = key.substring(2).toLowerCase();
+        const handler = attributes[key];
+        this.eventRegistry.set(el, [...(this.eventRegistry.get(el) || []), { event: eventType, handler }]);
+        this.addEventListener(el, eventType, handler);
+      } else if (attributes[key] !== null && attributes[key] !== undefined) {
+        // General attributes
         el.setAttribute(key, attributes[key]);
       }
-      if (children === undefined)
-        return el;
-      for (let i = 0; i < children.length; i++) {
-        let child = children[i];
-        if (Array.isArray(child)) {
-          child.forEach((c) => {
-            el.appendChild(this.parseToElement(c));
-          });
-        }
-        if (typeof child === "function") {
-          let comp = memoizeClassComponent(Component);
-          comp.Mounted = true;
-          comp.render = child;
-          let el2 = comp.toElement();
-          el2.key = comp.key;
-          el.appendChild(el2);
-        } else if (typeof child === "object") {
-          el.appendChild(this.parseToElement(child));
-        } else if (child) {
-          let span = document.createTextNode(child)
-          el.appendChild(span);
-        }
-      }
     }
+  
+    // Handle children
+    let children = element.children || [];
+    children.forEach((child) => {
+      if (Array.isArray(child)) {
+        // Recursively process nested arrays
+        child.forEach((nestedChild) => el.appendChild(this.parseToElement(nestedChild)));
+      } else if (typeof child === "function") {
+        // Handle functional components
+        let component = memoizeClassComponent(Component);
+        component.Mounted = true;
+        component.render = child;
+        let componentElement = component.toElement();
+        el.appendChild(componentElement);
+      } else if (typeof child === "object") {
+        // Nested object children
+        el.appendChild(this.parseToElement(child));
+      } else if (child !== null && child !== undefined) {
+        // Text nodes
+        el.appendChild(document.createTextNode(child));
+      }
+    });
+  
     return el;
   };
   e(element, props, ...children) {
@@ -609,10 +663,14 @@ export function render(element, container) {
   } else {
     let memoizedInstance = memoizeClassComponent(Component);
     memoizedInstance.Mounted = true;
-    memoizedInstance.render = element.bind(memoizedInstance);
-    let el = memoizedInstance.toElement();
-    el.key = memoizedInstance.key;
+    memoizedInstance.render = element.bind(memoizedInstance); 
+    if(element.name == "default"){
+      throw new Error("Function name Must be a unique function name as it is used for a element key")
+    }
+    memoizedInstance.key = element.name
+    let el = memoizedInstance.toElement(); 
+    el.key = element.name
     container.innerHTML = "";
     container.replaceWith(el);
   }
-}
+}

package/main.js

@@ -204,6 +204,7 @@ async function generateApp() {
             code = handleReplacements(code)
             let size = code.length / 1024
             r = r.replace(process.cwd().replace(/\\/g, '/') + '/app', '')
+            var beforeR = r
             r = r.replace('.jsx', '.js').replace('.tsx', '.js') 
             fs.mkdirSync(path.join(process.cwd() + '/dist', path.dirname(r)), { recursive: true })
             fs.writeFileSync(process.cwd() + '/dist/' + path.dirname(r) + '/' + path.basename(r), `
@@ -227,31 +228,40 @@ async function generateApp() {
             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) + '/' + path.basename(r),
-                    DEV: mode === 'development',
-                    size,
-                    bindes: bindes.join('\n'),
-                    filePath: r,
-                    INPUT: `../app/${r.replace('.js', '.jsx').replace('.tsx', '.js')}`,
-                },
-                onExit({ exitCode: code }) {
-                    if (code === 0) {
-                        bindes = []
-                        console.log(`Built ${r} in ${Date.now() - start}ms`)
-                        resolve()
-                    } else {
-                        reject()
+             
+            try {
+                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) + '/' + path.basename(r),
+                        DEV: mode === 'development',
+                        size,
+                        bindes: bindes.join('\n'),
+                        isTs: beforeR.endsWith(".tsx"),
+                        filePath: r,
+                        
+                        isJsx:  beforeR.endsWith('.tsx') || beforeR.endsWith(".jsx") ,
+                        isAppFile: true,
+                        INPUT: `../app/${beforeR}`,
+                    },
+                    onExit({ exitCode: code }) {
+                        if (code === 0) {
+                            bindes = []
+                            console.log(`Built ${r} in ${Date.now() - start}ms`)
+                            resolve()
+                        } else {
+                            reject()
+                        }
                     }
-                }
-            })
+                })
+            } catch (error) {
+                
+            }
 
         })
 
@@ -299,8 +309,7 @@ async function generateApp() {
 
 function handleFiles() {
     return new Promise(async (resolve, reject) => {
-        try {
-            console.log(Glob)
+        try { 
             let glob = new Glob('public/**/*')
             for await (var i of glob.scan()) {
                 let file = i
@@ -315,13 +324,13 @@ function handleFiles() {
                 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')) {
+                if (file.endsWith('.jsx') || file.endsWith('.tsx')) {
                     let code = await Bun.file(file).text()
 
                     code = handleReplacements(code)
-
+                    var url = file 
                     file = file.replace('.jsx', '.js').replace('.tsx', '.js')
-                    fs.writeFileSync(path.join(process.cwd() + '/dist', file.replace('.jsx', '.js').replace('.tsx', '.js')), code)
+                    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(),
@@ -335,8 +344,9 @@ function handleFiles() {
                             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')),
+                            isJsx: url.endsWith('.tsx') || url.endsWith(".jsx") ,
+                            isAppFile: false,
+                            INPUT: path.join(process.cwd(), url),
                         },
                         onExit({ exitCode: code }) {
                             if (code === 0) {
@@ -346,7 +356,7 @@ function handleFiles() {
                             }
                         }
                     })
-                } else if (file.includes('.ts')) {
+                } else if (file.endsWith('.ts')) {
                     let code = await Bun.file(file).text()
                     code = handleReplacements(code)
                     file = file.replace('.ts', '.js')
@@ -528,4 +538,4 @@ if (mode == 'development' || mode == 'serve') {
     })
 
     console.log(ansiColors.green('Server started at http://localhost:' + port || 8080))
-}
+}

package/package.json

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