vaderjs 2.3.18 → 2.3.19

package/main.ts

@@ -5,7 +5,6 @@ import fs from "fs/promises";
 import fsSync from "fs";
 import path from "path";
 import { initProject } from "vaderjs/cli";
-import { rimraf } from "rimraf";
 
 const colors = {
   reset: "\x1b[0m",
@@ -37,7 +36,7 @@ async function timedStep(name, fn) {
     logger.success(`Finished '${name}' in ${duration}ms`);
   } catch (e) {
     logger.error(`Error during '${name}':`, e);
-    if (!isDev) process.exit(1);
+    if (!globalThis.isDev) process.exit(1);
   }
 }
 
@@ -89,10 +88,8 @@ class HTMLInjectionManager {
   private injections: Map<string, string> = new Map();
   
   add(html: string, id?: string): void {
-    // Generate an ID if not provided (based on content hash)
     const injectionId = id || this.generateId(html);
     
-    // Only add if not already present
     if (!this.injections.has(injectionId)) {
       this.injections.set(injectionId, html);
       logger.info(`Added HTML injection: ${injectionId}`);
@@ -102,26 +99,21 @@ class HTMLInjectionManager {
   }
   
   private generateId(html: string): string {
-    // Simple ID generation based on content
-    // For CSS links, extract the href
     const hrefMatch = html.match(/href=["']([^"']+)["']/);
     if (hrefMatch) {
       return `link:${hrefMatch[1]}`;
     }
     
-    // For script tags, extract the src
     const srcMatch = html.match(/src=["']([^"']+)["']/);
     if (srcMatch) {
       return `script:${srcMatch[1]}`;
     }
     
-    // For meta tags, extract name or property
     const nameMatch = html.match(/(?:name|property)=["']([^"']+)["']/);
     if (nameMatch) {
       return `meta:${nameMatch[1]}`;
     }
     
-    // Fallback to hash of content
     let hash = 0;
     for (let i = 0; i < html.length; i++) {
       hash = ((hash << 5) - hash) + html.charCodeAt(i);
@@ -137,10 +129,6 @@ class HTMLInjectionManager {
   clear(): void {
     this.injections.clear();
   }
-  
-  has(id: string): boolean {
-    return this.injections.has(id);
-  }
 }
 
 const htmlInjectionManager = new HTMLInjectionManager();
@@ -182,7 +170,6 @@ async function runPluginHook(hookName: 'onBuildStart' | 'onBuildFinish', api: Pl
 
 // Load plugins from config
 async function loadPluginsFromConfig() {
-  console.log(config)
   if (!config.plugins || !Array.isArray(config.plugins)) {
     logger.info("No plugins defined in config");
     return;
@@ -194,32 +181,26 @@ async function loadPluginsFromConfig() {
     try {
       let plugin;
       
-      // If plugin is a string, import it
       if (typeof pluginConfig === 'string') {
         const pluginPath = path.isAbsolute(pluginConfig) 
           ? pluginConfig 
           : path.join(PROJECT_ROOT, pluginConfig);
         
-        // Check if file exists
         if (fsSync.existsSync(pluginPath)) {
           const pluginModule = await import(pluginPath);
           plugin = pluginModule.default || pluginModule;
         } else {
-          // Try as npm package
           plugin = await import(pluginConfig);
         }
       } 
-      // If plugin is an object with resolve property
       else if (typeof pluginConfig === 'object' && pluginConfig.resolve) {
         const pluginModule = await import(pluginConfig.resolve);
         plugin = pluginModule.default || pluginModule;
         
-        // Pass options to plugin if it's a factory function
         if (typeof plugin === 'function' && pluginConfig.options) {
           plugin = await plugin(pluginConfig.options);
         }
       }
-      // If plugin is already a plugin object
       else if (typeof pluginConfig === 'object' && pluginConfig.name) {
         plugin = pluginConfig;
       }
@@ -238,7 +219,7 @@ async function loadPluginsFromConfig() {
   plugins = loadedPlugins;
 }
 
-// Also load from plugins directory (backward compatibility)
+// Also load from plugins directory
 async function loadPluginsFromDirectory() {
   const pluginsDir = path.join(PROJECT_ROOT, "plugins");
   
@@ -257,7 +238,6 @@ async function loadPluginsFromDirectory() {
         const plugin = pluginModule.default || pluginModule;
         
         if (plugin && typeof plugin === 'object' && plugin.name) {
-          // Check if plugin already loaded from config
           if (!plugins.some(p => p.name === plugin.name)) {
             loadedPlugins.push(plugin);
             logger.info(`Loaded plugin from directory: ${plugin.name} v${plugin.version}`);
@@ -279,7 +259,6 @@ async function loadPluginsFromDirectory() {
 async function ensureJSConfig() {
   const jsconfigPath = path.join(PROJECT_ROOT, "jsconfig.json");
   
-  // Check if jsconfig.json already exists
   let existingConfig = {};
   if (fsSync.existsSync(jsconfigPath)) {
     try {
@@ -290,7 +269,6 @@ async function ensureJSConfig() {
     }
   }
   
-  // Define the required VaderJS configuration
   const vaderConfig = {
     compilerOptions: {
       jsx: "react",
@@ -299,7 +277,6 @@ async function ensureJSConfig() {
     }
   };
   
-  // Merge with existing config (preserve other settings)
   const mergedConfig = {
     ...existingConfig,
     compilerOptions: {
@@ -308,7 +285,6 @@ async function ensureJSConfig() {
     }
   };
   
-  // Write the config
   await fs.writeFile(jsconfigPath, JSON.stringify(mergedConfig, null, 2));
   logger.success(`jsconfig.json created/updated at ${jsconfigPath}`);
 }
@@ -339,7 +315,6 @@ class FileWatcher {
         )
           return;
 
-        // Debounce file changes
         this.pendingFiles.add(file);
         
         if (this.debounceTimer) {
@@ -350,13 +325,12 @@ class FileWatcher {
           const files = Array.from(this.pendingFiles);
           this.pendingFiles.clear();
           
-          // Only trigger if not already rebuilding
           if (!this.rebuildInProgress) {
             this.callbacks.forEach((cb) => {
               files.forEach(file => cb(file));
             });
           }
-        }, 100); // Wait 100ms for multiple file changes
+        }, 100);
       });
 
       this.watchers.set(dir, watcher);
@@ -503,7 +477,6 @@ async function copyPublicAssets() {
   }
 }
 
-// Helper function to find App file
 function findAppFile(): string | null {
   const possiblePaths = [
     path.join(PROJECT_ROOT, "App.tsx"),
@@ -523,28 +496,23 @@ function findAppFile(): string | null {
   return null;
 }
 
-// Helper to deduplicate HTML injections
 function getUniqueInjections(injections: string[]): string[] {
   const seen = new Set<string>();
   const unique: string[] = [];
   
   for (const injection of injections) {
-    // Create a normalized key for comparison
     let key = injection;
     
-    // For link tags, normalize by href
     const hrefMatch = injection.match(/href=["']([^"']+)["']/);
     if (hrefMatch) {
       key = `link:${hrefMatch[1]}`;
     }
     
-    // For script tags, normalize by src
     const srcMatch = injection.match(/src=["']([^"']+)["']/);
     if (srcMatch) {
       key = `script:${srcMatch[1]}`;
     }
     
-    // For meta tags, normalize by name/property
     const nameMatch = injection.match(/(?:name|property)=["']([^"']+)["']/);
     if (nameMatch) {
       key = `meta:${nameMatch[1]}`;
@@ -559,9 +527,107 @@ function getUniqueInjections(injections: string[]): string[] {
   return unique;
 }
 
- async function buildAppEntrypoints() { 
+// --- VERCEL CONFIG GENERATION ---
+
+async function generateVercelConfig(routes: { route: string; htmlPath: string }[]) {
+  if (config.host_provider !== "vercel") {
+    logger.info("Hosting provider is not 'vercel', skipping vercel.json generation");
+    return;
+  }
+
+  logger.info("🔧 Generating Vercel configuration for deployment...");
+
+  // Build the vercel.json configuration
+  const vercelConfig: any = {
+    version: 2,
+    buildCommand: "bun run build",
+    outputDirectory: "dist",
+    installCommand: "bun install",
+    framework: null,
+    rewrites: [],
+  };
+
+  // Add specific rewrites for each generated HTML route
+  for (const route of routes) {
+    if (route.route === "index") {
+      // Root route
+      vercelConfig.rewrites.push({
+        source: "/",
+        destination: "/dist/index.html",
+      });
+    } else {
+      // Nested route - exact match
+      vercelConfig.rewrites.push({
+        source: `/${route.route}`,
+        destination: `/dist/${route.route}/index.html`,
+      });
+      // Also handle subpaths (for client-side routing)
+      vercelConfig.rewrites.push({
+        source: `/${route.route}/:path*`,
+        destination: `/dist/${route.route}/index.html`,
+      });
+    }
+  }
+
+  // Fallback for static assets (CSS, JS, images)
+  vercelConfig.rewrites.push({
+    source: "/:path*",
+    destination: "/dist/:path*",
+  });
+
+  // Final fallback for any unmatched routes (SPA behavior)
+  vercelConfig.rewrites.push({
+    source: "/(.*)",
+    destination: "/dist/index.html",
+  });
+
+  // Remove duplicate rewrites (keep first occurrence for each source pattern)
+  const uniqueRewrites = [];
+  const seenSources = new Set();
+  for (const rewrite of vercelConfig.rewrites) {
+    if (!seenSources.has(rewrite.source)) {
+      seenSources.add(rewrite.source);
+      uniqueRewrites.push(rewrite);
+    }
+  }
+  vercelConfig.rewrites = uniqueRewrites;
+
+  // Write vercel.json to PROJECT ROOT (not inside dist)
+  const vercelPath = path.join(PROJECT_ROOT, "vercel.json");
+  await fs.writeFile(vercelPath, JSON.stringify(vercelConfig, null, 2));
+  
+  logger.success(`✅ vercel.json generated at ${vercelPath}`);
+  logger.info(`   Routes configured to serve from ./dist directory`);
+  logger.info(`   ${routes.length} route(s) configured`);
+}
+
+async function generateVercelProjectConfig() {
+  if (config.hosting !== "vercel") return;
+  
+  const vercelDir = path.join(PROJECT_ROOT, ".vercel");
+  await fs.mkdir(vercelDir, { recursive: true });
+  
+  const projectConfig = {
+    projectId: config.vercelProjectId || "",
+    orgId: config.vercelOrgId || "",
+    settings: {
+      framework: null,
+      devCommand: "bun run dev",
+      installCommand: "bun install",
+      buildCommand: "bun run build",
+      outputDirectory: "dist",
+    },
+  };
+  
+  const vercelProjectPath = path.join(vercelDir, "project.json");
+  await fs.writeFile(vercelProjectPath, JSON.stringify(projectConfig, null, 2));
+  logger.info(`📁 Generated .vercel/project.json`);
+}
+
+// --- BUILD APP ENTRYPOINTS ---
+
+async function buildAppEntrypoints() { 
   
-  // Get unique HTML injections from plugins
   const allInjections = htmlInjectionManager.getAll();
   const uniqueInjections = getUniqueInjections(allInjections);
   const htmlInjectionsString = uniqueInjections.join('\n    ');
@@ -570,34 +636,31 @@ function getUniqueInjections(injections: string[]): string[] {
     logger.info(`Injecting ${uniqueInjections.length} unique HTML items into page`);
   }
    
-  
-  // Handle app directory structure with nested routes
   if (!fsSync.existsSync(APP_DIR)) {
-    logger.warn("No App.tsx or app directory found");
+    logger.warn("No app directory found");
     return;
   }
 
-  // Find all index.{tsx,jsx} files in app directory (including nested)
   const entrypoints: { route: string; path: string }[] = [];
-  console.log(`Searching for entrypoints in ${APP_DIR}...`);
+  const generatedRoutes: { route: string; htmlPath: string }[] = [];
+  
   function findIndexFiles(dir: string, baseRoute: string = "") {
     const entries = fsSync.readdirSync(dir, { withFileTypes: true });
-    console.log(entries)
     
     for (const entry of entries) {
       const fullPath = path.join(dir, entry.name);
       const routePath = path.join(baseRoute, entry.name);
       
       if (entry.isDirectory()) {
-        // Recursively search subdirectories
         findIndexFiles(fullPath, routePath);
       } else if (entry.name.match(/^index\.(tsx|jsx)$/)) {
-        // Found an index file
         let route = baseRoute;
         
-        // Special handling for root index file
         if (route === "") {
           route = "index";
+        } else {
+          // Convert Windows backslashes to forward slashes for URL
+          route = route.replace(/\\/g, '/');
         }
         
         entrypoints.push({
@@ -617,19 +680,13 @@ function getUniqueInjections(injections: string[]): string[] {
     return;
   }
   
-  // Build each entrypoint
   for (const entry of entrypoints) {
-    // Determine output directory based on route
     let outDir: string;
     let outputName = "index.js";
 
-    console.log(entry)
-    
     if (entry.route === "index") {
-      // Root route goes to dist root
       outDir = DIST_DIR;
     } else {
-      // Nested route goes to corresponding subdirectory
       outDir = path.join(DIST_DIR, entry.route);
     }
     
@@ -645,16 +702,25 @@ function getUniqueInjections(injections: string[]): string[] {
       jsxFragment: "Fragment",
       jsxImportSource: "vaderjs",
       naming: outputName,
-      external: [], // Bundle everything for website
+      external: [],
+    });
+    
+    const htmlPath = path.join(outDir, "index.html");
+    generatedRoutes.push({
+      route: entry.route,
+      htmlPath: htmlPath
     });
     
-    // Generate HTML file for this route
+    const pageTitle = entry.route === "index" 
+      ? (config.title || 'Vader App') 
+      : `${config.title || 'Vader App'} - ${entry.route.charAt(0).toUpperCase() + entry.route.slice(1)}`;
+    
     const html = `<!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8"/>
 <meta name="viewport" content="width=device-width,initial-scale=1"/>
-<title>${config.title || 'Vader App'} - ${entry.route === 'index' ? 'Home' : entry.route}</title>
+<title>${pageTitle}</title>
 ${htmlInjectionsString}
 </head>
 <body>
@@ -663,25 +729,25 @@ ${htmlInjectionsString}
 </body>
 </html>`;
     
-    const htmlPath = path.join(outDir, "index.html");
     await fs.writeFile(htmlPath, html);
-    
     logger.success(`Generated ${htmlPath}`);
   }
   
-  // Log summary
   logger.success(`Built ${entrypoints.length} routes: ${entrypoints.map(e => e.route).join(', ')}`);
+  
+  // Generate Vercel config if hosting is set to vercel 
+  if (config.host_provider === "vercel") { 
+    await generateVercelConfig(generatedRoutes);
+  }
 }
 
 // Windows-compatible directory removal
 async function removeDirectory(dir: string) {
   try {
     if (fsSync.existsSync(dir)) {
-      // Use fs.rm with recursive option for Windows compatibility
       await fs.rm(dir, { recursive: true, force: true });
     }
   } catch (error) {
-    // Fallback: manual deletion for stubborn directories
     if (fsSync.existsSync(dir)) {
       const files = await fs.readdir(dir);
       for (const file of files) {
@@ -698,38 +764,33 @@ async function removeDirectory(dir: string) {
   }
 }
 
+// --- MAIN BUILD ---
+
 async function buildAll(dev = false) {
   const start = performance.now();
 
-  // Clear HTML injections before build
   htmlInjectionManager.clear();
 
-  // Load plugins from config first
   await loadPluginsFromConfig();
-  
-  // Also load from plugins directory (backward compatibility)
   await loadPluginsFromDirectory();
   
-  // Create plugin API
   const pluginAPI = createPluginAPI();
-  
-  // Run onBuildStart hooks
   await runPluginHook('onBuildStart', pluginAPI);
 
-  // Ensure jsconfig.json exists before building
   await ensureJSConfig();
-
-  // Remove dist directory with Windows compatibility
   await removeDirectory(DIST_DIR);
-
   await fs.mkdir(DIST_DIR, { recursive: true });
 
   await timedStep("Build Vader Core", buildVaderCore);
   await timedStep("Build Src", buildSrc);
   await timedStep("Copy Public", copyPublicAssets);
   await timedStep("Build App", buildAppEntrypoints);
+  
+  // Generate Vercel project config if needed (optional)
+  if (config.hosting === "vercel") {
+    await generateVercelProjectConfig();
+  }
 
-  // Run onBuildFinish hooks
   await runPluginHook('onBuildFinish', pluginAPI);
 
   logger.success(
@@ -739,11 +800,10 @@ async function buildAll(dev = false) {
 
 // --- DEV SERVER ---
 
- async function runDevServer() {
+async function runDevServer() {
   let buildPromise: Promise<void> | null = null;
   let reloadTimeout: NodeJS.Timeout | null = null;
   
-  // Function to trigger reload with debounce
   const triggerReload = (clients: Set<any>) => {
     if (reloadTimeout) {
       clearTimeout(reloadTimeout);
@@ -754,9 +814,7 @@ async function buildAll(dev = false) {
       for (const c of clients) {
         try {
           c.send("reload");
-        } catch (e) {
-          // Client might be disconnected
-        }
+        } catch (e) {}
       }
       reloadTimeout = null;
     }, 50);
@@ -773,27 +831,21 @@ async function buildAll(dev = false) {
     fetch(req, server) {
       const url = new URL(req.url);
       
-      // Handle HMR upgrade
       if (url.pathname === "/__hmr" && server.upgrade(req)) return;
 
-      // Remove leading slash and handle path
       let requestPath = url.pathname;
       
-      // If path ends with slash, serve index.html from that directory
       if (requestPath.endsWith('/')) {
         requestPath = path.join(requestPath, 'index.html');
       }
       
-      // Build the file path
       let filePath = path.join(DIST_DIR, requestPath);
       
-      // If no extension, try as directory with index.html
       if (!path.extname(filePath)) {
         const indexPath = path.join(filePath, 'index.html');
         if (fsSync.existsSync(indexPath)) {
           filePath = indexPath;
         } else {
-          // Try as .html file
           const htmlPath = filePath + '.html';
           if (fsSync.existsSync(htmlPath)) {
             filePath = htmlPath;
@@ -801,15 +853,12 @@ async function buildAll(dev = false) {
         }
       }
       
-      // Special handling for root
       if (url.pathname === "/" || url.pathname === "") {
         filePath = path.join(DIST_DIR, "index.html");
       }
       
-      // Check if file exists and serve it
       if (fsSync.existsSync(filePath)) {
         const file = Bun.file(filePath);
-        // Set correct content type
         const ext = path.extname(filePath);
         const contentType = {
           '.html': 'text/html',
@@ -831,8 +880,7 @@ async function buildAll(dev = false) {
         });
       }
       
-      // 404 - Not found
-      logger.warn(`404 Not Found: ${requestPath} (resolved to ${filePath})`);
+      logger.warn(`404 Not Found: ${requestPath}`);
       return new Response("Not Found", { status: 404 });
     },
 
@@ -848,31 +896,26 @@ async function buildAll(dev = false) {
     },
   });
 
-  // Watch all relevant directories
   watcher.watch(APP_DIR);
   watcher.watch(SRC_DIR);
   watcher.watch(PUBLIC_DIR);
   
-  // Watch config file
   const configPath = path.join(PROJECT_ROOT, "vaderjs.config.ts");
   if (fsSync.existsSync(configPath)) {
     watcher.watch(configPath);
   }
   
-  // Watch plugins directory
   const pluginsDir = path.join(PROJECT_ROOT, "plugins");
   if (fsSync.existsSync(pluginsDir)) {
     watcher.watch(pluginsDir);
   }
   
-  // Also watch for root App file
   const rootAppFile = findAppFile();
   if (rootAppFile) {
     watcher.watch(path.dirname(rootAppFile));
   }
 
   watcher.onChange(async (file) => {
-    // Don't trigger rebuild if one is already in progress
     if (buildPromise) {
       logger.info("Build already in progress, skipping...");
       return;
@@ -882,7 +925,6 @@ async function buildAll(dev = false) {
     watcher.setRebuildStatus(true);
     
     try {
-      // If config or plugin file changed, reload config and plugins
       if (file.includes('vaderjs.config.ts') || file.includes('plugins')) {
         logger.info("Config or plugin changed, reloading...");
         config = await loadConfig();
@@ -891,7 +933,6 @@ async function buildAll(dev = false) {
         await loadPluginsFromDirectory();
       }
       
-      // Run onFileChange hooks for plugins
       const pluginAPI = createPluginAPI();
       for (const plugin of plugins) {
         if (plugin.onFileChange) {
@@ -899,12 +940,10 @@ async function buildAll(dev = false) {
         }
       }
       
-      // Rebuild
       buildPromise = buildAll(true);
       await buildPromise;
       buildPromise = null;
       
-      // Trigger reload for all connected clients
       triggerReload(clients);
       
     } catch (error) {
@@ -918,7 +957,6 @@ async function buildAll(dev = false) {
   logger.success(`Dev server running http://localhost:${port}`);
   logger.info("Waiting for changes... (Press Ctrl+C to stop)");
   
-  // Log available routes
   const distFiles = fsSync.readdirSync(DIST_DIR, { recursive: true });
   const htmlFiles = distFiles.filter(f => f.toString().endsWith('index.html'));
   if (htmlFiles.length > 0) {
@@ -978,7 +1016,6 @@ ${colors.reset}`);
 
   if (cmd === "init") {
     await initProject(process.argv[3]);
-    // Also create jsconfig.json when initializing a new project
     await ensureJSConfig();
     return;
   }
@@ -1012,6 +1049,7 @@ Make sure you have:
   - App.tsx or App.jsx in your project root
   - OR an app/ directory with index.tsx/jsx files
   - vaderjs installed as a dependency
+  - For Vercel deployment: set hosting: "vercel" in vaderjs.config.ts
 `);
   }
 }

package/package.json

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