vaderjs 2.2.5 → 2.3.0

package/README.MD

@@ -8,70 +8,92 @@
   </a>
 </p>
 
-# Vader.js A reactive framework for building fast and scalable web applications
+# Vader.js  
+A modern, reactive framework for building ultra-fast web applications — built on simplicity and speed.
 
 [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Postr-Inc/Vader.js/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/vaderjs.svg?style=flat)](https://www.npmjs.com/package/vaderjs)
 
+---
+
+## 🚀 Quick Example
+
 ```tsx
 import { useState, Switch, Match } from "vaderjs"
 
-export default function(){
-  let [count, setCount] = useState(0)
-  return(
+export default function() {
+  const [count, setCount] = useState(0)
+  return (
     <div>
-     <Switch>
-      <Match when={count > 10}>
-           <h1>Count is greater than 10 </h1>
-      </Match>
-      <Match when={count < 10}>
-       <h1>Count is less than 10 </h1>
-      </Match>
-     </Switch>
-   </div>
+      <Switch>
+        <Match when={count > 10}>
+          <h1>Count is greater than 10</h1>
+        </Match>
+        <Match when={count <= 10}>
+          <h1>Count is less than or equal to 10</h1>
+        </Match>
+      </Switch>
+    </div>
   )
 }
 ```
-# Installation
 
-```js
-bun install vaderjs @latest
-```
+---
 
+## 📦 Installation
 
+```bash
+bun install vaderjs@latest
+```
 
-# Project Setup 
-Create a pages folder - which allows you to have nextjs page like routing via buns file based router
+## ⚙️ Project Structure
 
-> Note only use this when using production server - not supported by cloudflare, github or vercel
+Vader.js supports file-based routing out of the box. Just create a `pages` folder like in Next.js:
 
-Tip: Each folder can be deep nested up to 4 levels!
+> ⚠️ Note: This routing system is designed for **production servers** only. It will not work with Cloudflare Pages, GitHub Pages, or Vercel.
 
-```md 
-/pages/index.jsx = /
-/pages/home/[page].jsx  = /home/:page
-/pages/path/index.jsx = /path/
-/pages/test/[[...catchall]]/index.jsx = /path/test/*
-/pages/route/[param1]/[param2].jsx = /path/route/:param1/:param2
+You can nest up to 4 levels deep.
 
 ```
-Keyword folders - all files are passed from these folders to the build folder
-
-```md
-1. app - used for jsx route files 
-2. public - used for anything / css / json etc
-3. Src - components utilities etc
+/pages/index.jsx                         -> /
+/pages/home/[page].jsx                   -> /home/:page
+/pages/path/index.jsx                    -> /path/
+/pages/test/[[...catchall]]/index.jsx    -> /test/*
+/pages/route/[param1]/[param2].jsx       -> /route/:param1/:param2
 ```
 
+---
+
+## 🗂 Keyword Folders
+
+Certain folders are special and automatically picked up by the bundler:
 
-# Define your config
+| Folder    | Purpose                             |
+| --------- | ----------------------------------- |
+| `app/`    | Contains all route `.jsx` files     |
+| `src/`    | Your components, utilities, etc.    |
+| `public/` | Static files like CSS, JSON, images |
+
+---
+
+## 🛠 Define Config
+
+Create a `config.ts` file at the root of your project:
 
 ```ts
 import defineConfig from "vaderjs/config";
 
 export default defineConfig({
-    port: 3000,
-    host: 'localhost', 
-    hot_reload: true,
-})
-
+  port: 3000,
+  host: "localhost",
+  hot_reload: true,
+});
 ```
+ 
+
+## 🤔 Why Vader.js?
+
+* Minimal reactivity model with zero VDOM
+* File-based routing system built into Bun
+* Tiny runtime, blazing fast updates
+* Familiar API inspired by React, but simpler
+* Perfect for Bun-first, fullstack apps

package/cli.ts

@@ -0,0 +1,186 @@
+#!/usr/bin/env bun
+
+import fs from "fs/promises";
+import fsSync from "fs";
+import path from "path"; 
+import readline from "readline";
+
+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());
+    })
+  );
+}
+
+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);
+  }
+}
+
+ export async function init() {
+  console.log("🚀 Welcome to Vader.js project initializer!");
+
+  const cwd = process.cwd();
+  let projectDir = await ask(
+    `Enter the directory to initialize the project (default: current dir):`
+  );
+  if (!projectDir) projectDir = ".";
+
+  projectDir = path.resolve(cwd, projectDir);
+  if (!fsSync.existsSync(projectDir)) {
+    await fs.mkdir(projectDir, { recursive: true });
+    console.log(`Created directory: ${projectDir}`);
+  }
+
+  // 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}`);
+    }
+  }
+
+  // Create example app/index.jsx with counter
+  const counterCode = wantsTailwind
+    ? `import { useState } from "vaderjs";
+
+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>
+  );
+}
+`
+    : `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(appDir, "index.jsx"), counterCode);
+  console.log(`Created example route: ${path.join("app", "index.jsx")}`);
+
+  // 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`);
+
+  // Create minimal package.json if not exist
+  const pkgJsonPath = path.join(projectDir, "package.json");
+  if (!fsSync.existsSync(pkgJsonPath)) {
+    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",
+      },
+    };
+    await fs.writeFile(pkgJsonPath, JSON.stringify(pkg, null, 2));
+    console.log(`Created package.json`);
+  }
+
+  // Install dependencies: vaderjs + optionally tailwindcss, postcss plugins
+  console.log("Installing dependencies with Bun...");
+  const deps = ["vaderjs"];
+  if (wantsTailwind) {
+    deps.push("tailwindcss", "@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 = `module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};`;
+    await fs.writeFile(path.join(projectDir, "postcss.config.cjs"), postcssConfig);
+    console.log("Created postcss.config.cjs");
+  }
+
+  // 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
+  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.");
+}
+
+
+