vaderjs 2.3.7 → 2.3.8

package/cli.ts

@@ -5,224 +5,262 @@ import fsSync from "fs";
 import path from "path";
 import readline from "readline";
 
+const cwd = process.cwd();
+
+/* ---------------------------------- utils --------------------------------- */
+
 function ask(question) {
-    const rl = readline.createInterface({
-        input: process.stdin,
-        output: process.stdout,
-    });
-    return new Promise((resolve) =>
-        rl.question(question + " ", (answer) => {
-            rl.close();
-            resolve(answer.trim());
-        })
-    );
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout,
+  });
+  return new Promise((resolve) =>
+    rl.question(question + " ", (answer) => {
+      rl.close();
+      resolve(answer.trim());
+    })
+  );
 }
 
-async function run(cmd: string, args: string[] = []) {
-    try {
-        const proc = Bun.spawn([cmd, ...args], {
-            stdout: "inherit",
-            stderr: "inherit",
-        });
-
-        const status = await proc.exited;
-        if (status !== 0) {
-            console.error(`Command failed: ${cmd} ${args.join(" ")}`);
-            process.exit(1);
-        }
-    } catch (error) {
-        console.error(`Error executing command: ${error}`);
-        process.exit(1);
-    }
+async function run(cmd, args = []) {
+  const proc = Bun.spawn([cmd, ...args], {
+    stdout: "inherit",
+    stderr: "inherit",
+  });
+
+  const status = await proc.exited;
+  if (status !== 0) process.exit(status);
 }
 
-export async function init() {
-    console.log("🚀 Welcome to Vader.js project initializer!");
+function logSection(title) {
+  console.log(`\n${title}`);
+  console.log("─".repeat(title.length));
+}
 
-    const cwd = process.cwd();
-    let projectDir = await ask(
-        `Enter the directory to initialize the project (default: current dir):`
-    );
-    if (!projectDir) projectDir = ".";
+function getFlags() {
+  return new Set(process.argv.slice(2));
+}
 
-    projectDir = path.resolve(cwd, projectDir);
-    if (!fsSync.existsSync(projectDir)) {
-        await fs.mkdir(projectDir, { recursive: true });
-        console.log(`Created directory: ${projectDir}`);
-    }
+/* ---------------------------------- init ---------------------------------- */
 
-    // Confirm Tailwind usage
-    let useTailwind = await ask("Include TailwindCSS v4 support? (y/n):");
-    while (!["y", "n", "yes", "no"].includes(useTailwind)) {
-        useTailwind = await ask("Please answer 'y' or 'n':");
-    }
-    const wantsTailwind = useTailwind === "y" || useTailwind === "yes";
-
-    // Create folders: app, src, public
-    const appDir = path.join(projectDir, "app");
-    const srcDir = path.join(projectDir, "src");
-    const publicDir = path.join(projectDir, "public");
-
-    for (const dir of [appDir, srcDir, publicDir]) {
-        if (!fsSync.existsSync(dir)) {
-            await fs.mkdir(dir, { recursive: true });
-            console.log(`Created folder: ${dir}`);
-        }
+export async function initProject(dir) {
+  const flags = getFlags();
+  const autoYes = flags.has("--yes");
+
+  console.log("🚀 Initializing Vader.js project");
+
+  const projectDir = path.resolve(cwd, dir || ".");
+  if (!fsSync.existsSync(projectDir)) {
+    await fs.mkdir(projectDir, { recursive: true });
+  }
+
+  const files = fsSync.readdirSync(projectDir);
+  if (files.length && !autoYes) {
+    const confirm = await ask("Directory is not empty. Continue? (y/n):");
+    if (confirm !== "y") process.exit(0);
+  }
+
+  logSection("📁 Creating folders");
+
+  for (const d of ["app", "public"]) {
+    const p = path.join(projectDir, d);
+    if (!fsSync.existsSync(p)) {
+      await fs.mkdir(p, { recursive: true });
+      console.log(`created ${d}/`);
     }
+  }
+
+  logSection("🧱 Writing files");
+
+  await fs.writeFile(
+    path.join(projectDir, "app/index.jsx"),
+    `import { component, useState } from "vaderjs";
 
-    // Create example app/index.jsx with counter
-    const counterCode = wantsTailwind
-        ? `import { useState } from "vaderjs";
+export default component(() => {
+  const [count, setCount] = useState(0);
 
-export default function Counter() {
-  let [count, setCount] = useState(0);
   return (
-    <div class="max-w-md mx-auto p-6 bg-gray-100 rounded shadow text-center">
-      <h1 class="text-2xl font-bold mb-4">Counter Example</h1>
-      <p class="text-xl mb-4">Count: {count}</p>
-      <button
-        class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
-        onClick={() => setCount(count + 1)}
-      >
-        Increment
-      </button>
-    </div>
+    <button onClick={() => setCount(c => c + 1)}>
+      Count: {count}
+    </button>
   );
-}
+});
 `
-        : `import { useState } from "vaderjs";
+  );
 
-export default function Counter() {
-  let [count, setCount] = useState(0);
-  return (
-    <div style={{ maxWidth: "300px", margin: "auto", padding: "1rem", background: "#eee", borderRadius: "8px", textAlign: "center" }}>
-      <h1 style={{ fontWeight: "bold", marginBottom: "1rem" }}>Counter Example</h1>
-      <p style={{ fontSize: "1.25rem", marginBottom: "1rem" }}>Count: {count}</p>
-      <button onClick={() => setCount(count + 1)}>Increment</button>
-    </div>
+  await fs.writeFile(
+    path.join(projectDir, "public/styles.css"),
+    `/* Global styles (optional) */`
+  );
+
+  await fs.writeFile(
+    path.join(projectDir, "vaderjs.config.ts"),
+    `import defineConfig from "vaderjs/config";
+
+export default defineConfig({
+  port: 3000,
+  plugins: [],
+});
+`
   );
+
+  if (!fsSync.existsSync(path.join(projectDir, "package.json"))) {
+    await fs.writeFile(
+      path.join(projectDir, "package.json"),
+      JSON.stringify(
+        {
+          name: path.basename(projectDir),
+          private: true,
+          scripts: {
+            dev: "vaderjs dev",
+            build: "vaderjs build",
+            start: "vaderjs serve",
+          },
+          dependencies: {
+            vaderjs: "latest",
+          },
+        },
+        null,
+        2
+      )
+    );
+  }
+
+  logSection("📦 Installing dependencies");
+  await run("bun", ["install", "--force"]);
+
+  console.log("\n✅ Project ready");
+  console.log("Run `bun run dev` to start");
 }
-`;
 
-    await fs.writeFile(path.join(appDir, "index.jsx"), counterCode);
-    console.log(`Created example route: ${path.join("app", "index.jsx")}`);
+/* ---------------------------------- add ----------------------------------- */
 
-    // Create public/styles.css
-    if (wantsTailwind) {
-        await fs.writeFile(path.join(publicDir, "styles.css"), `@import 'tailwindcss';\n`);
-    } else {
-        await fs.writeFile(path.join(publicDir, "styles.css"), `/* Add your styles here */\n`);
-    }
-    console.log(`Created public/styles.css`);
+export async function addPlugin(name) {
+  if (!name) {
+    console.error("Please specify a plugin to add.");
+    process.exit(1);
+  }
 
-    // Create minimal package.json if not exist
+  const flags = getFlags();
+  const force = flags.has("--force");
 
+  const pkgName = name.startsWith("vaderjs-") ? name : `vaderjs-${name}`;
+  const importName = pkgName.replace(/^vaderjs-/, "").replace(/-/g, "_");
 
-    // Install dependencies: vaderjs + optionally tailwindcss, postcss plugins, autoprefixer
-    console.log("Installing dependencies with Bun...");
-    const deps = ["vaderjs", "autoprefixer"];
-    if (wantsTailwind) {
-        deps.push("tailwindcss@4", "@tailwindcss/postcss", "postcss-cli");
-    }
-    await run("bun", ["install", ...deps]);
-    console.log("✅ Dependencies installed.");
-
-    // If Tailwind requested, create minimal tailwind.config.cjs and postcss.config.cjs
-    if (wantsTailwind) {
-        const tailwindConfig = `module.exports = {
-  content: ["./app/**/*.{js,jsx,ts,tsx}"],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-};`;
-        await fs.writeFile(path.join(projectDir, "tailwind.config.cjs"), tailwindConfig);
-        console.log("Created tailwind.config.cjs");
-
-        const postcssConfig = `export default {
-  plugins: {
-    "@tailwindcss/postcss": {},
-    autoprefixer: {},
+  logSection(`➕ Adding plugin: ${pkgName}`);
+
+ const args = ["add", pkgName];
+if (force) args.push("--force");
+
+await run("bun", args);
+
+  const configPath = path.join(cwd, "vaderjs.config.ts");
+  if (!fsSync.existsSync(configPath)) {
+    console.warn("⚠️  vaderjs.config.ts not found, skipping registration");
+    return;
   }
-};`;
-        await fs.writeFile(path.join(projectDir, "postcss.config.cjs"), postcssConfig);
-        console.log("Created postcss.config.cjs");
-    }
 
-    // Create vaderjs.config.ts regardless, add Tailwind plugin if needed
-    const vaderConfig = `import defineConfig from "vaderjs/config";
-${wantsTailwind ? 'import tailwind from "vaderjs/plugins/tailwind";' : ''}
-  
-export default defineConfig({
-  port: 3000,
-  plugins: [${wantsTailwind ? "tailwind" : ""}],
-});`;
-
-    await fs.writeFile(path.join(projectDir, "vaderjs.config.ts"), vaderConfig);
-    console.log("Created vaderjs.config.ts");
-
-    // Create jsconfig.json for VSCode/IDE support
-    const jsConfig = {
-        compilerOptions: {
-            jsx: "react",
-            jsxFactory: "Vader.createElement",
-            jsxFragmentFactory: "Fragment",
-        },
-    };
-    await fs.writeFile(path.join(projectDir, "jsconfig.json"), JSON.stringify(jsConfig, null, 2));
-    console.log("Created jsconfig.json");
-
-    // Final instructions
-    const pkgJsonPath = path.join(projectDir, "package.json");
-
-    if (!fsSync.existsSync(pkgJsonPath)) {
-        // If package.json doesn't exist, create it with basic content
-        const pkg = {
-            name: path.basename(projectDir),
-            version: "1.0.0",
-            scripts: {
-                start: "bun run vaderjs build && bun run vaderjs serve",
-                build: "bun run vaderjs build",
-                dev: "bun run vaderjs dev",
-            },
-            dependencies: {
-                vaderjs: "latest",
-            },
-        };
-
-        // If Tailwind is requested, add it to the dependencies
-        if (wantsTailwind) {
-            pkg.dependencies.tailwindcss = "latest";
-            pkg.dependencies["@tailwindcss/postcss"] = "latest";
-            pkg.dependencies.postcss = "latest";
-            pkg.dependencies.autoprefixer = "latest";
-        }
-
-        await fs.writeFile(pkgJsonPath, JSON.stringify(pkg, null, 2));
-        console.log(`Created package.json`);
-    } else {
-        // If package.json exists, update it by adding Tailwind if it's not there
-        const pkgJson = JSON.parse(await fs.readFile(pkgJsonPath, "utf8"));
-
-        // Only update the dependencies and scripts if Tailwind is enabled
-        if (wantsTailwind && !pkgJson.dependencies.tailwindcss) {
-            pkgJson.dependencies.tailwindcss = "latest";
-            pkgJson.dependencies["@tailwindcss/postcss"] = "latest";
-            pkgJson.dependencies.postcss = "latest";
-            pkgJson.dependencies.autoprefixer = "latest";
-        }
-
-        // Ensure the scripts are in place (if they're not there already)
-        if (!pkgJson.scripts) pkgJson.scripts = {};
-        pkgJson.scripts.start = pkgJson.scripts.start || "bun run vaderjs build && bun run vaderjs serve";
-        pkgJson.scripts.build = pkgJson.scripts.build || "bun run vaderjs build";
-        pkgJson.scripts.dev = pkgJson.scripts.dev || "bun run vaderjs dev";
-
-        await fs.writeFile(pkgJsonPath, JSON.stringify(pkgJson, null, 2));
-        console.log(`Updated package.json`);
-    }
+  let config = await fs.readFile(configPath, "utf8");
+
+  if (config.includes(`from "${pkgName}"`)) {
+    console.log("ℹ️  Plugin already registered");
+    return;
+  }
+
+  config =
+    `import ${importName} from "${pkgName}";\n` +
+    config.replace(/plugins:\s*\[/, `plugins: [${importName}, `);
+
+  await fs.writeFile(configPath, config);
+  console.log("✔ Plugin registered");
+}
+
+/* -------------------------------- remove ---------------------------------- */
+
+export async function removePlugin(name) {
+  if (!name) {
+    console.error("Please specify a plugin to remove.");
+    process.exit(1);
+  }
+
+  const pkgName = name.startsWith("vaderjs-") ? name : `vaderjs-${name}`;
+  const importName = pkgName.replace(/^vaderjs-/, "").replace(/-/g, "_");
+
+  logSection(`➖ Removing plugin: ${pkgName}`);
+
+  await run("bun", ["remove", pkgName]);
+
+  const configPath = path.join(cwd, "vaderjs.config.ts");
+  if (!fsSync.existsSync(configPath)) return;
+
+  let config = await fs.readFile(configPath, "utf8");
+
+  config = config
+    .replace(new RegExp(`import ${importName} from ".*?";\\n?`, "g"), "")
+    .replace(new RegExp(`\\b${importName},?\\s*`, "g"), "");
+
+  await fs.writeFile(configPath, config);
+  console.log("✔ Plugin removed");
+}
+
+/* ---------------------------------- list ---------------------------------- */
+
+export async function listPlugins() {
+  const pkgPath = path.join(cwd, "package.json");
+  if (!fsSync.existsSync(pkgPath)) {
+    console.log("No package.json found.");
+    return;
+  }
+
+  const pkg = JSON.parse(await fs.readFile(pkgPath, "utf8"));
+  const deps = Object.keys(pkg.dependencies || {}).filter((d) =>
+    d.startsWith("vaderjs-")
+  );
+
+  if (!deps.length) {
+    console.log("No Vader plugins installed.");
+    return;
+  }
+
+  logSection("🔌 Installed Vader plugins");
+  deps.forEach((d) => console.log("•", d));
+}
+
+/* ---------------------------------- cli ----------------------------------- */
+
+const [, , command, arg] = process.argv;
+
+switch (command) {
+  case "init":
+    await initProject(arg);
+    break;
+
+  case "add":
+    await addPlugin(arg);
+    break;
+
+  case "remove":
+    await removePlugin(arg);
+    break;
+
+  case "list":
+    await listPlugins();
+    break;
+
+  default:
+    console.log(`
+Vader CLI
+
+Commands:
+  vader init [dir] [--yes]
+  vader add <plugin> [--force]
+  vader remove <plugin>
+  vader list
 
-    console.log(`\n🎉 Vader.js project initialized at:\n${projectDir}`);
-    console.log(`Run cd ${projectDir} to navigate into the project folder`);
-    console.log("Run `bun run dev` or your build script to get started.");
+Examples:
+  vader init my-app --yes
+  vader add bootstrap
+  vader remove bootstrap
+  vader list
+`);
 }

package/main.js

@@ -5,7 +5,7 @@ import { build, serve } from "bun";
 import fs from "fs/promises";
 import fsSync from "fs";
 import path from "path";
-import { init } from "./cli";
+import { initProject, addPlugin, listPlugins, removePlugin} from "./cli";
 
 // --- UTILITIES for a Sleek CLI ---
 
@@ -403,6 +403,7 @@ async function copyPublicAssets() {
 }
 
 async function runDevServer() {
+  // Initial build
   await buildAll(true);
   
   const clients = new Set();
@@ -432,9 +433,14 @@ async function runDevServer() {
     },
   });
 
-  const debouncedBuild = debounce(async () => {
+  const debouncedBuild = debounce(async (event, filename) => {
+    logger.info(`File change detected: ${filename || 'unknown'}`);
     try {
+      // Reload config in case plugins or ports changed
+      config = await loadConfig(); 
+      
       await buildAll(true);
+      
       for (const client of clients) {
         client.send("reload");
       }
@@ -443,12 +449,24 @@ async function runDevServer() {
     }
   }, 200);
 
-  const watchDirs = [APP_DIR, SRC_DIR, PUBLIC_DIR].filter(fsSync.existsSync);
-  for (const dir of watchDirs) {
-    safeWatch(dir, debouncedBuild);
+  // --- IMPROVED WATCHER ---
+  const configPath = path.join(PROJECT_ROOT, "vaderjs.config.js");
+  const configPathTs = path.join(PROJECT_ROOT, "vaderjs.config.ts");
+
+  const watchTargets = [
+    APP_DIR, 
+    SRC_DIR, 
+    PUBLIC_DIR,
+    configPath,
+    configPathTs
+  ].filter(p => fsSync.existsSync(p));
+
+  logger.info(`Watching for changes in: ${watchTargets.map(p => path.basename(p)).join(", ")}`);
+
+  for (const target of watchTargets) {
+    safeWatch(target, debouncedBuild);
   }
 }
-
 async function runProdServer() {
   const port = config.port || 3000;
   logger.info(`Serving production build from /dist on http://localhost:${port}`);
@@ -481,42 +499,92 @@ function debounce(fn, delay) {
 async function main() {
   const banner = `${colors.magenta}
     __     __  ____   ____   _______  __
-   |  |   /  |/ __ \ / __ \ / ____/ |/ /
+   |  |   /  |/ __ \\ / __ \\ / ____/ |/ /
    |  |  /   / / / // /_/ // /___   |   / 
-   |  | /   / /_/ / \____// /___  /   |  
+   |  | /   / /_/ / \\____// /___  /   |  
    |____/____/_____/     /_____/ |_| |_|
   ${colors.reset}`;
 
-console.log(banner);
-
-  
-  config = await loadConfig();
-  config.port = config.port || 3000;
+  console.log(banner);
 
   const command = process.argv[2];
+  const arg = process.argv[3];
 
-  if (command === "dev") {
-    globalThis.isDev = true
-    await runDevServer();
-  } else if (command === "build") {
-    await buildAll(false);
-  } else if (command === "serve") {
-    await buildAll(false);
-    await runProdServer();
-  }
-  else if(command === "init"){
-    init().catch((e) => {
-  console.error("Initialization failed:", e);
-  process.exit(1);
-});
+  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
+    const config = await loadConfig();
+    config.port ||= 3000;
 
-  } else {
-    logger.error(`Unknown command: '${command}'.`);
-    logger.info("Available commands: 'dev', 'build', 'serve'");
+    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);

package/package.json

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

package/plugins/tailwind.ts

@@ -1,53 +0,0 @@
-//@ts-nocheck
-import fs from 'fs'
-import path from 'path'
-
-import type { VaderPlugin, VaderAPI } from "vaderjs/plugins";
-function checkIfTailwindInstalled() {
-    try {
-        //@ts-ignore
-        require.resolve('tailwindcss')
-        require.resolve('postcss')
-        return true
-    } catch (e) {
-        return false
-    }
-}
-
-function initTailwind() {  
-    const postcssConfig = path.resolve(process.cwd(), 'postcss.config.mjs')
-    const tailwindCssFile = path.join(process.cwd(), '/public/styles.css')
-    if(!fs.existsSync(tailwindCssFile)){
-        fs.writeFileSync(tailwindCssFile, `@import "tailwindcss"`)
-    }
-    if (!fs.existsSync(postcssConfig)) {
-        fs.writeFileSync(postcssConfig, `export default {  plugins: {    "@tailwindcss/postcss": {},  }}`)
-
-    }
-
-}
-
-
-export default {
-    name: 'tailwindcss',
-    description: 'TailwindCSS plugin for Vader.js',
-    version: '0.0.2',
-    onBuildStart: async (vader) => {
-        if (!checkIfTailwindInstalled()) {
-            console.error('TailwindCSS is not installed. Please install it using `bun  install tailwindcss @tailwindcss/postcss postcss-cli`\n more info: https://tailwindcss.com/docs/installation/using-postcss`')
-            process.exit(1)
-        }else{
-           initTailwind()
-           console.log('Building TailwindCSS...')
-           await vader.runCommand(['bun', 'run', 'postcss', './public/styles.css', '-o', 'dist/public/tailwind.css']) 
-           vader.injectHTML(`<link rel="stylesheet" href="/public/tailwind.css">`) 
-
-        }  
-        
-        return
-    },
-    onBuildFinish: async (vader) => {
-        console.log('TailwindCSS plugin finished building')
-    },
-
-}