vaderjs 2.3.14 → 2.3.16

package/main.ts

@@ -0,0 +1,744 @@
+#!/usr/bin/env bun
+
+import { build, serve } from "bun";
+import fs from "fs/promises";
+import fsSync from "fs";
+import path from "path";
+import { initProject } from "vaderjs/cli";
+
+const colors = {
+  reset: "\x1b[0m",
+  red: "\x1b[31m",
+  green: "\x1b[32m",
+  yellow: "\x1b[33m",
+  blue: "\x1b[34m",
+  magenta: "\x1b[35m",
+  cyan: "\x1b[36m",
+};
+
+globalThis.isDev = process.argv[2] === "dev";
+
+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 PUBLIC_DIR = path.join(PROJECT_ROOT, "public");
+const DIST_DIR = path.join(PROJECT_ROOT, "dist");
+const SRC_DIR = path.join(PROJECT_ROOT, "src");
+const APP_DIR = path.join(PROJECT_ROOT, "app");
+
+const VADER_SRC_PATH = path.join(
+  PROJECT_ROOT,
+  "node_modules",
+  "vaderjs",
+  "index.ts"
+);
+
+const TEMP_SRC_DIR = path.join(PROJECT_ROOT, ".vader_temp_src");
+
+let config: any = {};
+let htmlInjections: string[] = [];
+
+// --- Plugin Support ---
+
+interface Plugin {
+  name: string;
+  version: string;
+  description?: string;
+  onBuildStart?: (api: PluginAPI) => Promise<void> | void;
+  onBuildFinish?: (api: PluginAPI) => Promise<void> | void;
+  onFileChange?: (file: string, api: PluginAPI) => Promise<void> | void;
+}
+
+interface PluginAPI {
+  injectHTML(html: string): void;
+  addWatchPath(path: string): void;
+  config: any;
+  isDev: boolean;
+  distDir: string;
+  srcDir: string;
+  publicDir: string;
+  projectRoot: string;
+}
+
+let plugins: Plugin[] = [];
+
+// Create plugin API helper
+function createPluginAPI(): PluginAPI {
+  return {
+    injectHTML: (html: string) => {
+      htmlInjections.push(html);
+    },
+    addWatchPath: (watchPath: string) => {
+      if (fsSync.existsSync(watchPath)) {
+        watcher.watch(watchPath);
+      }
+    },
+    config: config,
+    isDev: globalThis.isDev,
+    distDir: DIST_DIR,
+    srcDir: SRC_DIR,
+    publicDir: PUBLIC_DIR,
+    projectRoot: PROJECT_ROOT
+  };
+}
+
+// Run plugin hooks
+async function runPluginHook(hookName: 'onBuildStart' | 'onBuildFinish', api: PluginAPI) {
+  for (const plugin of plugins) {
+    if (plugin[hookName]) {
+      try {
+        logger.info(`Running plugin hook: ${plugin.name} - ${hookName}`);
+        await plugin[hookName]!(api);
+      } catch (e) {
+        logger.error(`Error in plugin "${plugin.name}" during ${hookName}:`, e);
+        if (!globalThis.isDev) process.exit(1);
+      }
+    }
+  }
+}
+
+// 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;
+  }
+
+  const loadedPlugins: Plugin[] = [];
+  
+  for (const pluginConfig of config.plugins) {
+    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;
+      }
+      
+      if (plugin && typeof plugin === 'object' && plugin.name) {
+        loadedPlugins.push(plugin);
+        logger.success(`Loaded plugin: ${plugin.name} v${plugin.version || 'unknown'}`);
+      } else {
+        logger.warn(`Invalid plugin: missing name property`);
+      }
+    } catch (e) {
+      logger.error(`Failed to load plugin:`, e);
+    }
+  }
+  
+  plugins = loadedPlugins;
+}
+
+// Also load from plugins directory (backward compatibility)
+async function loadPluginsFromDirectory() {
+  const pluginsDir = path.join(PROJECT_ROOT, "plugins");
+  
+  if (!fsSync.existsSync(pluginsDir)) {
+    return;
+  }
+  
+  const pluginFiles = await fs.readdir(pluginsDir);
+  const loadedPlugins: Plugin[] = [];
+  
+  for (const file of pluginFiles) {
+    if (file.endsWith('.js') || file.endsWith('.ts')) {
+      try {
+        const pluginPath = path.join(pluginsDir, file);
+        const pluginModule = await import(pluginPath);
+        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}`);
+          }
+        } else {
+          logger.warn(`Invalid plugin in ${file}: missing name property`);
+        }
+      } catch (e) {
+        logger.error(`Failed to load plugin ${file}:`, e);
+      }
+    }
+  }
+  
+  plugins = [...plugins, ...loadedPlugins];
+}
+
+// --- JSConfig Setup ---
+
+async function ensureJSConfig() {
+  const jsconfigPath = path.join(PROJECT_ROOT, "jsconfig.json");
+  
+  // Check if jsconfig.json already exists
+  let existingConfig = {};
+  if (fsSync.existsSync(jsconfigPath)) {
+    try {
+      const content = await fs.readFile(jsconfigPath, "utf8");
+      existingConfig = JSON.parse(content);
+    } catch (e) {
+      logger.warn("Existing jsconfig.json is invalid, will overwrite");
+    }
+  }
+  
+  // Define the required VaderJS configuration
+  const vaderConfig = {
+    compilerOptions: {
+      jsx: "react",
+      jsxFactory: "Vader.createElement",
+      jsxFragmentFactory: "Fragment"
+    }
+  };
+  
+  // Merge with existing config (preserve other settings)
+  const mergedConfig = {
+    ...existingConfig,
+    compilerOptions: {
+      ...(existingConfig.compilerOptions || {}),
+      ...vaderConfig.compilerOptions
+    }
+  };
+  
+  // Write the config
+  await fs.writeFile(jsconfigPath, JSON.stringify(mergedConfig, null, 2));
+  logger.success(`jsconfig.json created/updated at ${jsconfigPath}`);
+}
+
+// --- FILE WATCHER ---
+
+class FileWatcher {
+  watchers = new Map<string, any>();
+  callbacks: ((file: string) => void)[] = [];
+
+  watch(dir: string) {
+    if (!fsSync.existsSync(dir)) return;
+
+    const watcher = fsSync.watch(dir, { recursive: true }, (_, filename) => {
+      if (!filename) return;
+
+      const file = path.join(dir, filename);
+
+      if (
+        file.includes("node_modules") ||
+        file.includes("dist") ||
+        file.includes(".git")
+      )
+        return;
+
+      this.callbacks.forEach((cb) => cb(file));
+    });
+
+    this.watchers.set(dir, watcher);
+  }
+
+  onChange(cb: (file: string) => void) {
+    this.callbacks.push(cb);
+  }
+
+  clear() {
+    this.watchers.forEach((w) => w.close());
+    this.watchers.clear();
+  }
+}
+
+const watcher = new FileWatcher();
+
+// --- CONFIG ---
+
+export async function loadConfig() {
+  try {
+    const configPath = path.join(PROJECT_ROOT, "vaderjs.config.ts");
+    if (fsSync.existsSync(configPath)) {
+      const mod = await import(configPath);
+      return mod.default || mod;
+    }
+    return {};
+  } catch (error) {
+    logger.warn("Failed to load config, using defaults:", error);
+    return {};
+  }
+}
+
+export function defineConfig(cfg: any) {
+  return cfg;
+}
+
+// --- BUILD HELPERS ---
+
+function patchHooksUsage(code: string) {
+  return code.replace(
+    /import\s+{[^}]*use(State|Effect|Memo)[^}]*}\s+from\s+['"]vaderjs['"];?\n?/g,
+    ""
+  );
+}
+
+async function preprocessSources(src: string, dest: string) {
+  await fs.mkdir(dest, { recursive: true });
+
+  const entries = await fs.readdir(src, { withFileTypes: true });
+
+  for (const entry of entries) {
+    const srcPath = path.join(src, entry.name);
+    const destPath = path.join(dest, entry.name);
+
+    if (entry.isDirectory()) {
+      await preprocessSources(srcPath, destPath);
+    } else if (/\.(ts|tsx|js|jsx)$/.test(entry.name)) {
+      let content = await fs.readFile(srcPath, "utf8");
+      content = patchHooksUsage(content);
+      await fs.writeFile(destPath, content);
+    } else {
+      await fs.copyFile(srcPath, destPath);
+    }
+  }
+}
+
+async function buildVaderCore() {
+  if (!fsSync.existsSync(VADER_SRC_PATH)) {
+    throw new Error("Missing vaderjs dependency");
+  }
+
+  await build({
+    entrypoints: [VADER_SRC_PATH],
+    outdir: path.join(DIST_DIR, "src", "vader"),
+    target: "browser",
+    jsxFactory: "e",
+    jsxFragment: "Fragment",
+    jsxImportSource: "vaderjs",
+    sourcemap: "external",
+  });
+}
+
+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: string[] = [];
+
+  function collect(dir: string) {
+    const files = fsSync.readdirSync(dir, { withFileTypes: true });
+
+    for (const f of files) {
+      const full = path.join(dir, f.name);
+
+      if (f.isDirectory()) collect(full);
+      else if (/\.(ts|tsx|js|jsx)$/.test(f.name)) entrypoints.push(full);
+    }
+  }
+
+  collect(TEMP_SRC_DIR);
+
+  if (!entrypoints.length) 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",
+    external: ["vaderjs"],
+  });
+}
+
+async function copyPublicAssets() {
+  if (!fsSync.existsSync(PUBLIC_DIR)) return;
+
+  const items = await fs.readdir(PUBLIC_DIR);
+
+  for (const item of items) {
+    await fs.cp(
+      path.join(PUBLIC_DIR, item),
+      path.join(DIST_DIR, item),
+      { recursive: true }
+    );
+  }
+}
+
+// Helper function to find App file
+function findAppFile(): string | null {
+  const possiblePaths = [
+    path.join(PROJECT_ROOT, "App.tsx"),
+    path.join(PROJECT_ROOT, "App.jsx"),
+    path.join(PROJECT_ROOT, "App.ts"),
+    path.join(PROJECT_ROOT, "App.js"),
+    path.join(APP_DIR, "index.tsx"),
+    path.join(APP_DIR, "index.jsx"),
+  ];
+  
+  for (const appPath of possiblePaths) {
+    if (fsSync.existsSync(appPath)) {
+      return appPath;
+    }
+  }
+  
+  return null;
+}
+
+async function buildAppEntrypoints() {
+  // First check for root App file (VaderJS standard)
+  const appFile = findAppFile();
+  
+  // Build HTML with injections from plugins
+  const htmlInjectionsString = htmlInjections.join('\n    ');
+  
+  if (appFile) {
+    logger.info(`Building App from: ${appFile}`);
+    
+    await build({
+      entrypoints: [appFile],
+      outdir: DIST_DIR,
+      target: "browser",
+      jsxFactory: "e",
+      jsxFragment: "Fragment",
+      jsxImportSource: "vaderjs",
+      naming: "index.js",
+      external: [], // Bundle everything for website
+    });
+
+    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'}</title>
+${htmlInjectionsString}
+</head>
+<body>
+<div id="app"></div>
+<script type="module" src="/index.js"></script>
+</body>
+</html>`;
+
+    await fs.writeFile(path.join(DIST_DIR, "index.html"), html);
+    return;
+  }
+  
+  // Fallback to app directory structure
+  if (!fsSync.existsSync(APP_DIR)) {
+    logger.warn("No App.tsx or app directory found");
+    return;
+  }
+
+  const entries = fsSync
+    .readdirSync(APP_DIR, { recursive: true })
+    .filter((f) => /index\.(tsx|jsx)$/.test(f as string))
+    .map((f) => ({
+      name:
+        path.dirname(f as string) === "."
+          ? "index"
+          : path.dirname(f as string),
+      path: path.join(APP_DIR, f as string),
+    }));
+
+  for (const entry of entries) { 
+    var outDir = path.join(DIST_DIR, entry.name === "index" ? "" : entry.name); 
+
+    await fs.mkdir(outDir, { recursive: true });
+    console.log("Building entrypoint:", entry.path);
+    await build({
+      entrypoints: [entry.path],
+      outdir: outDir,
+      target: "browser",
+      jsxFactory: "e",
+      jsxFragment: "Fragment",
+      jsxImportSource: "vaderjs",
+      external: [], // Bundle everything for website
+    });
+
+    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'}</title>
+${htmlInjectionsString}
+</head>
+<body>
+<div id="app"></div>
+<script type="module" src="/index.js"></script>
+</body>
+</html>`;
+
+    await fs.writeFile(path.join(outDir, "index.html"), html);
+  }
+}
+
+async function buildAll(dev = false) {
+  const start = performance.now();
+
+  // Reset HTML injections before build
+  htmlInjections = [];
+
+  // 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();
+
+  if (fsSync.existsSync(DIST_DIR)) {
+    await fs.rm(DIST_DIR, { recursive: true, force: true });
+  }
+
+  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);
+
+  // Run onBuildFinish hooks
+  await runPluginHook('onBuildFinish', pluginAPI);
+
+  logger.success(
+    `Build finished in ${(performance.now() - start).toFixed(1)}ms`
+  );
+}
+
+// --- DEV SERVER ---
+
+async function runDevServer() {
+  await buildAll(true);
+
+  const clients = new Set<any>();
+
+  const port = config.port || 3000;
+
+  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");
+      }
+      
+      // Ensure we're serving from dist directory
+      if (url.pathname === "/" || url.pathname === "") {
+        filePath = path.join(DIST_DIR, "index.html");
+      }
+      
+      console.log("Serving:", filePath);
+
+      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);
+      },
+    },
+  });
+
+  watcher.watch(APP_DIR);
+  watcher.watch(SRC_DIR);
+  watcher.watch(PUBLIC_DIR);
+  
+  // Watch config file
+  watcher.watch(path.join(PROJECT_ROOT, "vaderjs.config.js"));
+  
+  // Watch plugins directory
+  const pluginsDir = path.join(PROJECT_ROOT, "plugins");
+  if (fsSync.existsSync(pluginsDir)) {
+    watcher.watch(pluginsDir);
+  }
+  
+  // Also watch for root App file
+  const rootAppDir = path.dirname(findAppFile() || "");
+  if (rootAppDir && rootAppDir !== PROJECT_ROOT) {
+    watcher.watch(rootAppDir);
+  }
+
+  watcher.onChange(async (file) => {
+    logger.info("Changes detected, rebuilding...");
+    
+    // If config or plugin file changed, reload config and plugins
+    if (file.includes('vaderjs.config.js') || file.includes('plugins')) {
+      logger.info("Config or plugin changed, reloading...");
+      config = await loadConfig();
+      htmlInjections = [];
+      plugins = [];
+      await loadPluginsFromConfig();
+      await loadPluginsFromDirectory();
+    }
+    
+    // Run onFileChange hooks for plugins
+    const pluginAPI = createPluginAPI();
+    for (const plugin of plugins) {
+      if (plugin.onFileChange) {
+        await plugin.onFileChange(file, pluginAPI);
+      }
+    }
+    
+    await buildAll(true);
+
+    for (const c of clients) c.send("reload");
+  });
+
+  logger.success(`Dev server running http://localhost:${port}`);
+}
+
+// --- PROD SERVER ---
+
+async function runProdServer() {
+  const port = config.port || 3000;
+  
+  const server = 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");
+      }
+      
+      if (url.pathname === "/" || url.pathname === "") {
+        filePath = path.join(DIST_DIR, "index.html");
+      }
+      
+      const file = Bun.file(filePath);
+      
+      return file.exists().then((exists) =>
+        exists
+          ? new Response(file)
+          : new Response("Not Found", { status: 404 })
+      );
+    },
+  });
+  
+  logger.success(`Serving production http://localhost:${port}`);
+}
+
+// --- CLI ENTRY ---
+
+async function main() {
+  console.log(`${colors.magenta}
+    __     __  ____   ____   _______  __
+   |  |   /  |/ __ \\ / __ \\ / ____/ |/ /
+   |  |  /   / / / // /_/ // /___   |   /
+   |  | /   / /_/ / \\____// /___  /   |
+   |____/____/_____/     /_____/ |_| |_|
+${colors.reset}`);
+
+  const cmd = process.argv[2];
+
+  if (cmd === "init") {
+    await initProject(process.argv[3]);
+    // Also create jsconfig.json when initializing a new project
+    await ensureJSConfig();
+    return;
+  }
+
+  config = await loadConfig();
+  config.port ||= 3000;
+
+  switch (cmd) {
+    case "dev":
+      await runDevServer();
+      break;
+
+    case "build":
+      await buildAll(false);
+      break;
+
+    case "serve":
+      await buildAll(false);
+      await runProdServer();
+      break;
+
+    default:
+      logger.info(`
+Commands:
+  dev        Start development server with hot reload
+  build      Build for production
+  serve      Build and serve production build
+  init       Initialize a new VaderJS project
+
+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
+`);
+  }
+}
+
+main();