vaderjs 2.3.14 → 2.3.15

package/main.js

@@ -1,750 +0,0 @@
-#!/usr/bin/env bun
-
-import { build, serve } from "bun";
-import fs from "fs/promises";
-import fsSync from "fs";
-import path from "path";
-import { initProject, addPlugin, listPlugins, removePlugin } from "./cli";
-
-// --- UTILITIES for a Sleek CLI ---
-
-const colors = {
-  reset: "\x1b[0m",
-  red: "\x1b[31m",
-  green: "\x1b[32m",
-  yellow: "\x1b[33m",
-  blue: "\x1b[34m",
-  magenta: "\x1b[35m",
-  cyan: "\x1b[36m",
-};
-
-const logger = {
-  _log: (color, ...args) => console.log(color, ...args, colors.reset),
-  info: (...args) => logger._log(colors.cyan, "ℹ", ...args),
-  success: (...args) => logger._log(colors.green, "✅", ...args),
-  warn: (...args) => logger._log(colors.yellow, "⚠️", ...args),
-  error: (...args) => logger._log(colors.red, "❌", ...args),
-  step: (...args) => logger._log(colors.magenta, "\n🚀", ...args),
-};
-
-async function timedStep(name, fn) {
-  logger.step(`${name}...`);
-  const start = performance.now();
-  try {
-    await fn();
-    const duration = (performance.now() - start).toFixed(2);
-    logger.success(`Finished '${name}' in ${duration}ms`);
-  } catch (e) {
-    logger.error(`Error during '${name}':`, e);
-    if (!isDev) process.exit(1);
-  }
-}
-
-// --- CONSTANTS ---
-
-const PROJECT_ROOT = process.cwd();
-const APP_DIR = path.join(PROJECT_ROOT, "app");
-const PUBLIC_DIR = path.join(PROJECT_ROOT, "public");
-const DIST_DIR = path.join(PROJECT_ROOT, "dist");
-const SRC_DIR = path.join(PROJECT_ROOT, "src");
-const VADER_SRC_PATH = path.join(PROJECT_ROOT, "node_modules", "vaderjs", "index.ts");
-const TEMP_SRC_DIR = path.join(PROJECT_ROOT, ".vader_temp_src");
-
-// --- SIMPLIFIED WATCHER ---
-
-class FileWatcher {
-  constructor() {
-    this.watchers = new Map();
-    this.onChangeCallbacks = [];
-    this.isRebuilding = false;
-    this.lastRebuildTime = 0;
-    this.REBUILD_COOLDOWN = 1000; // 1 second cooldown between rebuilds
-  }
-
-  shouldIgnorePath(filePath) {
-    const normalized = path.normalize(filePath);
-    // Ignore dist folder and its contents
-    if (normalized.includes(path.normalize(DIST_DIR))) {
-      return true;
-    }
-    // Ignore node_modules
-    if (normalized.includes(path.normalize('node_modules'))) {
-      return true;
-    }
-    // Ignore .git folder
-    if (normalized.includes(path.normalize('.git'))) {
-      return true;
-    }
-    // Ignore the temporary source directory
-    if (normalized.includes(path.normalize(TEMP_SRC_DIR))) {
-      return true;
-    }
-    return false;
-  }
-
-  async watchDirectory(dirPath, recursive = true) {
-    // Skip if directory should be ignored
-    if (this.shouldIgnorePath(dirPath) || !fsSync.existsSync(dirPath)) {
-      return;
-    }
-    
-    try {
-      // Close existing watcher if any
-      if (this.watchers.has(dirPath)) {
-        try {
-          this.watchers.get(dirPath).close();
-        } catch (err) {
-          // Ignore close errors
-        }
-      }
-      
-      // Create new watcher
-      const watcher = fsSync.watch(dirPath, { recursive }, (eventType, filename) => {
-        if (!filename) return;
-        
-        const changedFile = path.join(dirPath, filename);
-        const normalizedChanged = path.normalize(changedFile);
-        
-        // Skip if file should be ignored
-        if (this.shouldIgnorePath(normalizedChanged)) {
-          return;
-        }
-        
-        // Check if this is a file we care about
-        if (this.shouldTriggerRebuild(normalizedChanged)) {
-          logger.info(`File changed: ${path.relative(PROJECT_ROOT, normalizedChanged)}`);
-          
-          // Only trigger if not already rebuilding and cooldown has passed
-          const now = Date.now();
-          if (!this.isRebuilding && (now - this.lastRebuildTime) > this.REBUILD_COOLDOWN) {
-            this.triggerChange(normalizedChanged);
-          } else if (this.isRebuilding) {
-            logger.info(`Skipping rebuild - already rebuilding`);
-          } else {
-            logger.info(`Skipping rebuild - cooldown period`);
-          }
-        }
-      });
-      
-      watcher.on('error', (err) => {
-        logger.warn(`Watcher error on ${dirPath}:`, err.message);
-      });
-      
-      this.watchers.set(dirPath, watcher);
-      
-      logger.info(`Watching directory: ${path.relative(PROJECT_ROOT, dirPath)}`);
-    } catch (err) {
-      logger.warn(`Could not watch directory ${dirPath}:`, err.message);
-    }
-  }
-
-  shouldTriggerRebuild(filePath) {
-    // Only trigger rebuild for specific file types
-    const ext = path.extname(filePath).toLowerCase();
-    const triggerExtensions = ['.js', '.jsx', '.ts', '.tsx', '.css', '.html', '.json', '.config.js', '.config.ts'];
-    return triggerExtensions.includes(ext) || ext === '';
-  }
-
-  triggerChange(filePath) {
-    for (const callback of this.onChangeCallbacks) {
-      try {
-        callback(filePath);
-      } catch (err) {
-        logger.error("Change callback error:", err);
-      }
-    }
-  }
-
-  onChange(callback) {
-    this.onChangeCallbacks.push(callback);
-    return () => {
-      const index = this.onChangeCallbacks.indexOf(callback);
-      if (index > -1) this.onChangeCallbacks.splice(index, 1);
-    };
-  }
-
-  setRebuilding(state) {
-    this.isRebuilding = state;
-    if (state) {
-      this.lastRebuildTime = Date.now();
-    }
-  }
-
-  clear() {
-    for (const [dir, watcher] of this.watchers) {
-      try {
-        watcher.close();
-      } catch (err) {
-        // Ignore close errors
-      }
-    }
-    this.watchers.clear();
-    this.onChangeCallbacks = [];
-    this.isRebuilding = false;
-  }
-}
-
-const watcher = new FileWatcher();
-
-// --- CONFIG & PLUGIN SYSTEM ---
-
-let config = {};
-let htmlInjections = [];
-
-const vaderAPI = {
-  runCommand: async (cmd) => {
-    if (typeof cmd === "string") cmd = cmd.split(" ");
-    const p = Bun.spawn(cmd);
-    await p.exited;
-  },
-  injectHTML: (content) => htmlInjections.push(content),
-  log: {
-    warn: (msg) => logger.warn(msg),
-    info: (msg) => logger.info(msg), 
-    success: (msg) => logger.success(msg),
-    step: (msg) => logger.step(msg)
-  },
-  getProjectRoot: () => PROJECT_ROOT,
-  getDistDir: () => DIST_DIR,
-  getPublicDir: () => PUBLIC_DIR,
-};
-
-async function loadConfig() {
-  try {
-    const configModule = await import(path.join(PROJECT_ROOT, "vaderjs.config.js"));
-    return configModule.default || configModule;
-  } catch {
-    logger.warn("No 'vaderjs.config.js' found, using defaults.");
-    return {};
-  }
-}
-
-export function defineConfig(config) {
-  return config;
-}
-
-async function runPluginHook(hookName) {
-  if (!config.plugins) return;
-  for (const plugin of config.plugins) {
-    if (typeof plugin[hookName] === "function") {
-      try {
-        await plugin[hookName](vaderAPI);
-      } catch (e) {
-        logger.error(`Plugin hook error (${hookName} in ${plugin.name || 'anonymous'}):`, e);
-      }
-    }
-  }
-}
-
-// --- BUILD LOGIC ---
-
-/**
- * Step 1: Transpile and bundle the core vaderjs library.
- */
-async function buildVaderCore() {
-  if (!fsSync.existsSync(VADER_SRC_PATH)) {
-    logger.error("VaderJS source not found:", VADER_SRC_PATH);
-    throw new Error("Missing vaderjs dependency.");
-  }
-
-  await build({
-    entrypoints: [VADER_SRC_PATH],
-    outdir: path.join(DIST_DIR, "src", "vader"),
-    target: "browser",
-    minify: false,
-    sourcemap: "external",
-    jsxFactory: "e",
-    jsxFragment: "Fragment",
-    jsxImportSource: "vaderjs",
-  });
-}
-
-/**
- * Step 2: Patches source code to remove server-side hook imports.
- */
-function patchHooksUsage(code) {
-  return code.replace(/import\s+{[^}]*use(State|Effect|Memo|Navigation)[^}]*}\s+from\s+['"]vaderjs['"];?\n?/g, "");
-}
-
-function publicAssetPlugin() {
-  return {
-    name: "public-asset-replacer",
-    setup(build) {
-      build.onLoad({ filter: /\.(js|ts|jsx|tsx|html)$/ }, async (args) => {
-        let code = await fs.readFile(args.path, "utf8");
-
-        code = code.replace(/\{\{public:(.+?)\}\}/g, (_, relPath) => {
-          const absPath = path.join(PUBLIC_DIR, relPath.trim());
-          if (fsSync.existsSync(absPath)) {
-            return "/" + relPath.trim().replace(/\\/g, "/");
-          }
-          logger.warn(`Public asset not found: ${relPath}`);
-          return relPath;
-        });
-
-        return {
-          contents: code,
-          loader: args.path.endsWith(".html")
-            ? "text"
-            : args.path.endsWith(".tsx")
-            ? "tsx"
-            : args.path.endsWith(".jsx")
-            ? "jsx"
-            : args.path.endsWith(".ts")
-            ? "ts"
-            : "js",
-        };
-      });
-    },
-  };
-}
-
-/**
- * Step 3: Pre-processes all files in `/src` into a temporary directory.
- */
-async function preprocessSources(srcDir, tempDir) {
-  await fs.mkdir(tempDir, { recursive: true });
-  for (const entry of await fs.readdir(srcDir, { withFileTypes: true })) {
-    const srcPath = path.join(srcDir, entry.name);
-    const destPath = path.join(tempDir, entry.name);
-
-    if (entry.isDirectory()) {
-      await preprocessSources(srcPath, destPath);
-    } else if (/\.(tsx|jsx|ts|js)$/.test(entry.name)) {
-      let content = await fs.readFile(srcPath, "utf8");
-      content = patchHooksUsage(content);
-      await fs.writeFile(destPath, content);
-    } else {
-      await fs.copyFile(srcPath, destPath);
-    }
-  }
-}
-
-/**
- * Step 4: Build the application's source code from the preprocessed temp directory.
- */
-async function buildSrc() {
-  if (!fsSync.existsSync(SRC_DIR)) return;
-
-  if (fsSync.existsSync(TEMP_SRC_DIR)) {
-    await fs.rm(TEMP_SRC_DIR, { recursive: true, force: true });
-  }
-  await preprocessSources(SRC_DIR, TEMP_SRC_DIR);
-
-  const entrypoints = fsSync.readdirSync(TEMP_SRC_DIR, { recursive: true })
-    .map(file => path.join(TEMP_SRC_DIR, file))
-    .filter(file => /\.(ts|tsx|js|jsx)$/.test(file));
-
-  if (entrypoints.length === 0) {
-    logger.info("No source files found in /src to build.");
-    return;
-  }
-
-  await build({
-    entrypoints,
-    outdir: path.join(DIST_DIR, "src"),
-    root: TEMP_SRC_DIR,
-    naming: { entry: "[dir]/[name].js" },
-    jsxFactory: "e",
-    jsxFragment: "Fragment",
-    jsxImportSource: "vaderjs",
-    target: "browser",
-    minify: false,
-    plugins: [
-      publicAssetPlugin(),
-    ],
-    external: ["vaderjs"],
-  });
-}
-
-/**
- * Step 5: Copy all assets from the `/public` directory to `/dist`.
- */
-async function copyPublicAssets() {
-  if (!fsSync.existsSync(PUBLIC_DIR)) return;
-  // Copy contents of public into dist, not the public folder itself
-  for (const item of await fs.readdir(PUBLIC_DIR)) {
-    await fs.cp(path.join(PUBLIC_DIR, item), path.join(DIST_DIR, item), { recursive: true });
-  }
-}
-
-async function buildAppEntrypoint(entryPath, name, isDev = false) {
-  const outDir = path.join(DIST_DIR, name === 'index' ? '' : name);
-  const outJsPath = path.join(outDir, 'index.js');
-  await fs.mkdir(outDir, { recursive: true });
-
-  // --- CSS HANDLING ---
-  const cssLinks = [];
-  let content = await fs.readFile(entryPath, "utf8");
-  const cssImports = [...content.matchAll(/import\s+['"](.*\.css)['"]/g)];
-  for (const match of cssImports) {
-    const cssImportPath = match[1];
-    const sourceCssPath = path.resolve(path.dirname(entryPath), cssImportPath);
-    if (fsSync.existsSync(sourceCssPath)) {
-      const relativeCssPath = path.relative(APP_DIR, sourceCssPath);
-      const destCssPath = path.join(DIST_DIR, relativeCssPath);
-      await fs.mkdir(path.dirname(destCssPath), { recursive: true });
-      await fs.copyFile(sourceCssPath, destCssPath);
-      const htmlRelativePath = path.relative(outDir, destCssPath).replace(/\\/g, '/');
-      cssLinks.push(`<link rel="stylesheet" href="${htmlRelativePath}">`);
-    } else {
-      logger.warn(`CSS file not found: ${sourceCssPath}`);
-    }
-  }
-
-  const devClientScript = isDev
-    ? `<script>
-        new WebSocket("ws://" + location.host + "/__hmr").onmessage = (msg) => {
-          if (msg.data === "reload") location.reload();
-        };
-      </script>`
-    : "";
-
-  // --- HTML GENERATION ---
-  let htmlContent = `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <title>VaderJS App - ${name}</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  ${cssLinks.join("\n  ")}
-  ${htmlInjections.join("\n  ")}
-</head>
-<body>
-  <div id="app"></div>
-  <script type="module">
-    import App from '${name !== 'index' ? "/" + name : ''}/index.js'; 
-    import * as Vader from '/src/vader/index.js';
-    window.Vader = Vader;
-    Vader.render(Vader.createElement(App, null), document.getElementById("app"));
-  </script>
-  ${devClientScript}
-</body>
-</html>`;
-
-  // Helper to resolve any asset path from /public
-  function resolvePublicPath(p) {
-    const assetPath = p.replace(/^(\.\/|\/)/, ""); // strip leading ./ or /
-    const absPath = path.join(PUBLIC_DIR, assetPath);
-    if (fsSync.existsSync(absPath)) {
-      return "/" + assetPath.replace(/\\/g, "/");
-    }
-    return p; // leave unchanged if not in public
-  }
-
-  // --- FIX ASSET PATHS IN HTML ---
-  htmlContent = htmlContent.replace(
-    /(["'(])([^"'()]+?\.(png|jpe?g|gif|svg|webp|ico))(["')])/gi,
-    (match, p1, assetPath, ext, p4) => p1 + resolvePublicPath(assetPath) + p4
-  );
-
-  await fs.writeFile(path.join(outDir, "index.html"), htmlContent);
-
-  // --- JS BUILD ---
-  await build({
-    entrypoints: [entryPath],
-    outdir: outDir,
-    target: "browser",
-    minify: false,
-    sourcemap: "external",
-    external: ["vaderjs"],
-    jsxFactory: "e",
-    jsxFragment: "Fragment",
-    plugins: [
-      publicAssetPlugin(),
-    ],
-    jsxImportSource: "vaderjs",
-  });
-
-  // --- FIX IMPORT PATHS IN JS ---
-  let jsContent = await fs.readFile(outJsPath, "utf8");
-
-  // Vader import fix
-  jsContent = jsContent.replace(/from\s+['"]vaderjs['"]/g, `from '/src/vader/index.js'`);
-
-  // Asset path fix for JS
-  jsContent = jsContent.replace(
-    /(["'(])([^"'()]+?\.(png|jpe?g|gif|svg|webp|ico))(["')])/gi,
-    (match, p1, assetPath, ext, p4) => p1 + resolvePublicPath(assetPath) + p4
-  );
-
-  await fs.writeFile(outJsPath, jsContent);
-}
-
-async function buildAppEntrypoints(isDev = false) {
-  if (!fsSync.existsSync(APP_DIR)) {
-    logger.warn("No '/app' directory found, skipping app entrypoint build.");
-    return;
-  }
-
-  if (!fsSync.existsSync(DIST_DIR)) {
-    await fs.mkdir(DIST_DIR, { recursive: true });
-  }
-
-  // Find all index.jsx/tsx files in app directory
-  const entries = fsSync.readdirSync(APP_DIR, { recursive: true })
-    .filter(file => /index\.(jsx|tsx)$/.test(file))
-    .map(file => ({
-      name: path.dirname(file) === '.' ? 'index' : path.dirname(file).replace(/\\/g, '/'),
-      path: path.join(APP_DIR, file)
-    }));
-
-  for (const { name, path: entryPath } of entries) {
-    await buildAppEntrypoint(entryPath, name, isDev);
-  }
-}
-
-async function buildAll(isDev = false) {
-  logger.info(`Starting VaderJS ${isDev ? 'development' : 'production'} build...`);
-  const totalTime = performance.now();
-
-  htmlInjections = [];
-
-  // Ensure dist directory exists before cleaning
-  if (fsSync.existsSync(DIST_DIR)) {
-    await fs.rm(DIST_DIR, { recursive: true, force: true });
-  }
-
-  // Create the dist directory if it doesn't exist
-  await fs.mkdir(DIST_DIR, { recursive: true });
-
-  await runPluginHook("onBuildStart");
-
-  // Build the components in steps and handle errors properly
-  await timedStep("Building VaderJS Core", buildVaderCore);
-  await timedStep("Building App Source (/src)", buildSrc);
-  await timedStep("Copying Public Assets", copyPublicAssets);
-  await timedStep("Building App Entrypoints (/app)", () => buildAppEntrypoints(isDev));
-
-  await runPluginHook("onBuildFinish");
-
-  // Calculate the total duration and log it
-  const duration = (performance.now() - totalTime).toFixed(2);
-  logger.success(`Total build finished in ${duration}ms. Output is in /dist.`);
-}
-
-async function runDevServer() {
-  // Initial build
-  await buildAll(true);
-  
-  const clients = new Set();
-  const port = config.port || 3000;
-
-  logger.info(`Starting dev server at http://localhost:${port}`);
-
-  // Set up watchers for all important directories
-  logger.info("Setting up file watchers...");
-  
-  // Clear any existing watchers
-  watcher.clear();
-  
-  // Watch app directory (excluding dist)
-  if (fsSync.existsSync(APP_DIR)) {
-    await watcher.watchDirectory(APP_DIR, true);
-  }
-  
-  // Watch src directory (excluding dist)
-  if (fsSync.existsSync(SRC_DIR)) {
-    await watcher.watchDirectory(SRC_DIR, true);
-  }
-  
-  // Watch public directory (excluding dist)
-  if (fsSync.existsSync(PUBLIC_DIR)) {
-    await watcher.watchDirectory(PUBLIC_DIR, true);
-  }
-  
-  // Watch config files by watching their directory
-  const configPath = path.join(PROJECT_ROOT, "vaderjs.config.js");
-  const configPathTs = path.join(PROJECT_ROOT, "vaderjs.config.ts");
-  
-  // Watch the project root for config files
-  await watcher.watchDirectory(PROJECT_ROOT, false);
-
-  const server = serve({
-    port,
-    fetch(req, server) {
-      const url = new URL(req.url);
-      if (url.pathname === "/__hmr" && server.upgrade(req)) {
-        return;
-      }
-      let filePath = path.join(DIST_DIR, url.pathname);
-      if (!path.extname(filePath)) {
-        filePath = path.join(filePath, "index.html");
-      }
-      const file = Bun.file(filePath);
-      return file.exists().then(exists => 
-        exists ? new Response(file) : new Response("Not Found", { status: 404 })
-      );
-    },
-    websocket: {
-      open: (ws) => clients.add(ws),
-      close: (ws) => clients.delete(ws),
-    },
-  });
-
-  const rebuild = async (changedFile) => {
-    try {
-      watcher.setRebuilding(true);
-      
-      logger.info(`Rebuilding due to: ${path.relative(PROJECT_ROOT, changedFile)}`);
-      
-      // Reload config if config file changed
-      if (changedFile.includes('vaderjs.config.')) {
-        config = await loadConfig();
-      }
-      
-      // Always rebuild when something changes in development
-      await buildAll(true);
-      
-      // Send reload signal to all clients
-      for (const client of clients) {
-        client.send("reload");
-      }
-      
-      logger.success("Rebuild complete");
-    } catch (e) {
-      logger.error("Rebuild failed:", e);
-    } finally {
-      watcher.setRebuilding(false);
-    }
-  };
-
-  // Set up file change listener
-  const removeListener = watcher.onChange((changedFile) => {
-    rebuild(changedFile);
-  });
-
-  // Cleanup on exit
-  const cleanup = () => {
-    removeListener();
-    watcher.clear();
-    server.stop();
-    process.exit(0);
-  };
-
-  process.on('SIGINT', cleanup);
-  process.on('SIGTERM', cleanup);
-  process.on('exit', cleanup);
-}
-
-async function runProdServer() {
-  const port = config.port || 3000;
-  logger.info(`Serving production build from /dist on http://localhost:${port}`);
-  serve({
-    port,
-    fetch(req) {
-      const url = new URL(req.url);
-      let filePath = path.join(DIST_DIR, url.pathname);
-      if (!path.extname(filePath)) {
-        filePath = path.join(filePath, "index.html");
-      }
-      const file = Bun.file(filePath);
-      return file.exists().then(exists => 
-        exists ? new Response(file) : new Response("Not Found", { status: 404 })
-      );
-    },
-  });
-}
-
-// --- SCRIPT ENTRYPOINT ---
-
-async function main() {
-  const banner = `${colors.magenta}
-    __     __  ____   ____   _______  __
-   |  |   /  |/ __ \\ / __ \\ / ____/ |/ /
-   |  |  /   / / / // /_/ // /___   |   / 
-   |  | /   / /_/ / \\____// /___  /   |  
-   |____/____/_____/     /_____/ |_| |_|
-  ${colors.reset}`;
-
-  console.log(banner);
-
-  const command = process.argv[2];
-  const arg = process.argv[3];
-
-  try {
-    // Commands that don't require config
-    if (command === "init") {
-      await initProject(arg);
-      return;
-    }
-
-    if (command === "add") {
-      if (!arg) {
-        logger.error("Please specify a plugin to add.");
-        process.exit(1);
-      }
-      await addPlugin(arg);
-      return;
-    }
-
-    // Load config for runtime commands
-    config = await loadConfig();
-    config.port ||= 3000;
-
-    switch (command) {
-      case "add":
-        if (!arg) {
-          logger.error("Please specify a plugin to add.");
-          process.exit(1);
-        }
-        await addPlugin(arg);
-        return;
-      case "list_plugins":
-        await listPlugins();
-        return;
-      case "remove":
-        if (!arg) {
-          logger.error("Please specify a plugin to remove.");
-          process.exit(1);
-        }
-        await removePlugin(arg);
-        return;
-
-      case "dev":
-        globalThis.isDev = true;
-        await runDevServer();
-        break;
-
-      case "build":
-        await buildAll(false);
-        break;
-
-      case "serve":
-        await buildAll(false);
-        await runProdServer();
-        break;
-
-      default:
-        logger.error(`Unknown command: '${command ?? ""}'`);
-        logger.info(`
-Available commands:
-  dev            Start dev server
-  build          Build for production
-  serve          Build + serve production
-  init [dir]     Create a new Vader project
-  add <plugin>   Add a Vader plugin
-  remove <plugin> Remove a Vader plugin
-  list_plugins List currently installed Vaderjs plugins
-        `.trim());
-        process.exit(1);
-    }
-  } catch (err) {
-    logger.error("Command failed");
-    console.error(err);
-    process.exit(1);
-  }
-}
-
-main().catch(err => {
-  logger.error("An unexpected error occurred:", err);
-  process.exit(1);
-});
-
-process.on("unhandledRejection", (err) => {
-  logger.error("Unhandled Promise rejection:", err);
-});
-
-process.on("uncaughtException", (err) => {
-  logger.error("Uncaught Exception:", err);
-});