@buenojs/bueno 0.8.6 → 0.8.8

package/src/cli/commands/add-frontend.ts

@@ -0,0 +1,444 @@
+/**
+ * Add Frontend Command
+ *
+ * Add a frontend framework to an existing or new Bueno project
+ */
+
+import { cliConsole, colors, printTable } from "../core/console";
+import { isInteractive, select } from "../core/prompt";
+import { type TaskOptions, runTasks, spinner } from "../core/spinner";
+import { CLIError, CLIErrorType } from "../index";
+import {
+	type FrontendFramework,
+	getFrontendOptions,
+	getFrontendTemplate,
+} from "../templates";
+import { createDirectory, fileExists, joinPaths, readFile, writeFile } from "../utils/fs";
+import { defineCommand } from "./index";
+import type { ParsedArgs } from "../core/args";
+import { getOption, hasFlag } from "../core/args";
+
+/**
+ * Validate we're in a Bueno project
+ */
+async function validateBuenoProject(projectPath: string): Promise<boolean> {
+	const packageJsonPath = joinPaths(projectPath, "package.json");
+	const buenoCofigPath = joinPaths(projectPath, "bueno.config.ts");
+
+	const hasPackageJson = await fileExists(packageJsonPath);
+	const hasBuenoConfig = await fileExists(buenoCofigPath);
+
+	return hasPackageJson && hasBuenoConfig;
+}
+
+/**
+ * Check if client directory exists
+ */
+async function clientDirExists(projectPath: string): Promise<boolean> {
+	return await fileExists(joinPaths(projectPath, "client"));
+}
+
+/**
+ * Generate Bun bundler config for framework
+ */
+function getBunBundlerConfig(framework: FrontendFramework): string {
+	const configBase = {
+		react: {
+			entrypoints: ["./src/main.tsx"],
+			loaders: {
+				".tsx": "tsx",
+				".ts": "tsx",
+				".css": "file",
+				".svg": "file",
+			},
+		},
+		vue: {
+			entrypoints: ["./src/main.ts"],
+			loaders: {
+				".vue": "file",
+				".ts": "ts",
+				".css": "file",
+				".svg": "file",
+			},
+		},
+		svelte: {
+			entrypoints: ["./src/main.ts"],
+			loaders: {
+				".svelte": "file",
+				".ts": "ts",
+				".css": "file",
+				".svg": "file",
+			},
+		},
+		solid: {
+			entrypoints: ["./src/main.tsx"],
+			loaders: {
+				".tsx": "tsx",
+				".ts": "tsx",
+				".css": "file",
+				".svg": "file",
+			},
+		},
+	};
+
+	const config = configBase[framework] || configBase.react;
+
+	return `import type { BunPlugin } from 'bun';
+import postcss from 'postcss';
+import tailwindcss from 'tailwindcss';
+import autoprefixer from 'autoprefixer';
+import * as fs from 'fs';
+import * as path from 'path';
+
+// PostCSS processor for Tailwind
+const postcssPlugin: BunPlugin = {
+  name: 'postcss-plugin',
+  setup(build) {
+    build.onLoad({ filter: /\\.css$/ }, async (args) => {
+      const css = fs.readFileSync(args.path, 'utf-8');
+      const result = await postcss([tailwindcss, autoprefixer]).process(css, {
+        from: args.path,
+      });
+      return {
+        contents: result.css,
+        loader: 'text',
+      };
+    });
+  },
+};
+
+export const config = {
+  entrypoints: [${config.entrypoints.map((e) => `"${e}"`).join(", ")}],
+  outdir: "../dist/client",
+  minify: true,
+  sourcemap: "external",
+  loaders: {
+${Object.entries(config.loaders)
+	.map(([ext, loader]) => `    "${ext}": "${loader}",`)
+	.join("\n")}
+  },
+  plugins: [postcssPlugin],
+};
+`;
+}
+
+/**
+ * Generate Tailwind config
+ */
+function getTailwindConfig(): string {
+	return `export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{tsx,ts,jsx,js}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
+`;
+}
+
+/**
+ * Generate PostCSS config
+ */
+function getPostCSSConfig(): string {
+	return `export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+`;
+}
+
+/**
+ * Merge package.json dependencies and scripts
+ */
+async function mergePackageJson(
+	projectPath: string,
+	newDeps: Record<string, string>,
+	newDevDeps: Record<string, string>,
+	newScripts: Record<string, string>,
+): Promise<void> {
+	const packageJsonPath = joinPaths(projectPath, "package.json");
+	const content = await readFile(packageJsonPath);
+	const packageJson = JSON.parse(content);
+
+	// Merge dependencies
+	packageJson.dependencies = {
+		...packageJson.dependencies,
+		...newDeps,
+	};
+
+	// Merge devDependencies
+	packageJson.devDependencies = {
+		...packageJson.devDependencies,
+		...newDevDeps,
+	};
+
+	// Merge scripts (preserve existing, add new)
+	packageJson.scripts = {
+		...packageJson.scripts,
+		...newScripts,
+	};
+
+	// Write back
+	await writeFile(packageJsonPath, JSON.stringify(packageJson, null, 2) + "\n");
+}
+
+/**
+ * Handle add frontend command
+ */
+async function handleAddFrontend(args: ParsedArgs): Promise<void> {
+	// Get project path from option or use current directory
+	const projectPath = getOption(args, "project-path", {
+		name: "project-path",
+		type: "string",
+		description: "Path to the Bueno project",
+	}) as string || process.cwd();
+
+	// Validate we're in a Bueno project
+	const isValid = await validateBuenoProject(projectPath);
+	if (!isValid) {
+		throw new CLIError(
+			"Not a Bueno project. Please run this command in a Bueno project directory (must have package.json and bueno.config.ts)",
+			CLIErrorType.INVALID_ARGS,
+		);
+	}
+
+	// Get framework choice (from positional arg or option)
+	let framework = (args.positionals[0] ||
+		getOption(args, "framework", {
+			name: "framework",
+			alias: "f",
+			type: "string",
+			description: "",
+		})) as FrontendFramework;
+
+	const skipInstall = hasFlag(args, "skip-install");
+
+	// Interactive prompt if no framework specified
+	if (!framework && isInteractive()) {
+		framework = await select<FrontendFramework>(
+			"Select a frontend framework:",
+			getFrontendOptions(),
+			{ default: "react" },
+		);
+	}
+
+	framework = framework || "react";
+
+	// Check if client already exists
+	if (await clientDirExists(projectPath)) {
+		cliConsole.warn("client/ directory already exists");
+		// In a real implementation, we'd prompt to overwrite
+		// For now, we'll throw an error
+		throw new CLIError(
+			"client/ directory already exists. Please remove it first or use a different project.",
+			CLIErrorType.FILE_EXISTS,
+		);
+	}
+
+	// Get frontend template
+	const frontendTemplate = getFrontendTemplate(framework);
+
+	// Display info
+	cliConsole.header(`Adding ${colors.cyan(framework)} frontend to project`);
+
+	const rows = [
+		["Framework", framework],
+		["Frontend Directory", "client/"],
+		["Include Tailwind CSS", "Yes"],
+		["Bundler", "Bun (native)"],
+		["Install dependencies", skipInstall ? colors.red("No") : colors.green("Yes")],
+	];
+
+	printTable(["Setting", "Value"], rows);
+	cliConsole.log("");
+
+	const tasks: TaskOptions[] = [];
+
+	// Create client directory structure
+	tasks.push({
+		text: "Creating client directory structure",
+		task: async () => {
+			await createDirectory(joinPaths(projectPath, "client", "src", "components"));
+			await createDirectory(joinPaths(projectPath, "client", "src", "styles"));
+			await createDirectory(joinPaths(projectPath, "client", "public"));
+
+			// Create template-specific directories
+			for (const dir of frontendTemplate.directories) {
+				// Strip 'client/' prefix if present in directory path
+				const dirPath = dir.startsWith("client/") ? dir.slice(7) : dir;
+				await createDirectory(joinPaths(projectPath, "client", dirPath));
+			}
+		},
+	});
+
+	// Create client files
+	for (const file of frontendTemplate.files) {
+		tasks.push({
+			text: `Creating ${file.path}`,
+			task: async () => {
+				// Strip 'client/' prefix if present in file path
+				const filePath = file.path.startsWith("client/")
+					? file.path.slice(7)
+					: file.path;
+				await writeFile(joinPaths(projectPath, "client", filePath), file.content);
+			},
+		});
+	}
+
+	// Create Bun bundler config
+	tasks.push({
+		text: "Creating Bun bundler configuration",
+		task: async () => {
+			const bundlerConfig = getBunBundlerConfig(framework);
+			await writeFile(joinPaths(projectPath, "client", "bun.bundler.ts"), bundlerConfig);
+		},
+	});
+
+	// Create Tailwind config
+	tasks.push({
+		text: "Creating Tailwind CSS configuration",
+		task: async () => {
+			const tailwindConfig = getTailwindConfig();
+			await writeFile(joinPaths(projectPath, "client", "tailwind.config.ts"), tailwindConfig);
+		},
+	});
+
+	// Create PostCSS config
+	tasks.push({
+		text: "Creating PostCSS configuration",
+		task: async () => {
+			const postCSSConfig = getPostCSSConfig();
+			await writeFile(joinPaths(projectPath, "client", "postcss.config.js"), postCSSConfig);
+		},
+	});
+
+	// Create TypeScript config for client
+	tasks.push({
+		text: "Creating client TypeScript configuration",
+		task: async () => {
+			const tsConfig = JSON.stringify(
+				{
+					extends: "../tsconfig.json",
+					compilerOptions: {
+						jsx: framework === "solid" ? "preserve" : "react-jsx",
+						jsxImportSource: framework === "solid" ? "solid-js" : "react",
+					},
+					include: ["src/**/*"],
+				},
+				null,
+				2,
+			);
+			await writeFile(joinPaths(projectPath, "client", "tsconfig.json"), tsConfig);
+		},
+	});
+
+	// Update package.json with frontend deps and scripts
+	tasks.push({
+		text: "Updating package.json with frontend dependencies and scripts",
+		task: async () => {
+			const newDeps = frontendTemplate.dependencies || {};
+			const newDevDeps = {
+				...frontendTemplate.devDependencies,
+				concurrently: "^8.2.0", // Add concurrently for running server + client
+			};
+
+			const entryFile = framework === "react" || framework === "solid" ? ".tsx" : ".ts";
+			const newScripts = {
+				"dev:server": "bun run --watch server/main.ts",
+				"dev:client": `bun build client/src/main${entryFile} --watch --outdir ./dist/client 2>&1 | grep -v "invalid @ rule"`,
+				"dev": "concurrently 'bun run dev:server' 'bun run dev:client'",
+				"build:client": `bun build client/src/main${entryFile} --outdir ./dist/client --minify 2>&1 | grep -v "invalid @ rule"`,
+			};
+
+			await mergePackageJson(projectPath, newDeps, newDevDeps, newScripts);
+		},
+	});
+
+	// Run all tasks
+	await runTasks(tasks);
+
+	// Install dependencies
+	if (!skipInstall) {
+		cliConsole.subheader("Installing dependencies...");
+		const installSpinner = spinner("Running bun install...");
+
+		try {
+			const proc = Bun.spawn(["bun", "install"], {
+				cwd: projectPath,
+				stdout: "pipe",
+				stderr: "pipe",
+			});
+
+			const exitCode = await proc.exited;
+
+			if (exitCode === 0) {
+				installSpinner.success("Dependencies installed");
+			} else {
+				installSpinner.warn("Failed to install dependencies. Run `bun install` manually.");
+			}
+		} catch {
+			installSpinner.warn("Failed to install dependencies. Run `bun install` manually.");
+		}
+	}
+
+	// Success message
+	cliConsole.log("");
+	const frameworkName = framework.charAt(0).toUpperCase() + framework.slice(1);
+	cliConsole.success(`${colors.cyan(frameworkName)} frontend added successfully!`);
+	cliConsole.log("");
+	cliConsole.log("Next steps:");
+	cliConsole.log("  Terminal 1: bun run dev:server");
+	cliConsole.log("  Terminal 2: bun run dev:client");
+	cliConsole.log("");
+	cliConsole.log("  Or run both together:");
+	cliConsole.log("  bun run dev");
+	cliConsole.log("");
+}
+
+// Register the command
+defineCommand(
+	{
+		name: "add:frontend",
+		description: "Add a frontend framework to your Bueno project",
+		positionals: [
+			{
+				name: "framework",
+				required: false,
+				description: "Frontend framework (react, vue, svelte, solid)",
+			},
+		],
+		options: [
+			{
+				name: "framework",
+				alias: "f",
+				type: "string",
+				description: "Frontend framework (react, vue, svelte, solid)",
+			},
+			{
+				name: "skip-install",
+				type: "boolean",
+				default: false,
+				description: "Skip dependency installation",
+			},
+			{
+				name: "project-path",
+				type: "string",
+				description: "Path to the Bueno project (internal use)",
+			},
+		],
+		examples: [
+			"bueno add:frontend",
+			"bueno add:frontend react",
+			"bueno add:frontend vue",
+			"bueno add:frontend svelte",
+			"bueno add:frontend solid",
+			"bueno add:frontend react --skip-install",
+		],
+	},
+	handleAddFrontend,
+);

package/src/cli/commands/new.ts

@@ -9,6 +9,7 @@ import {
 	getOption,
 	getOptionValues,
 	hasFlag,
+	parseArgs,
 } from "../core/args";
 import { cliConsole, colors, printTable } from "../core/console";
 import { isInteractive, prompt, select } from "../core/prompt";
@@ -709,6 +710,28 @@ async function handleNew(args: ParsedArgs): Promise<void> {
 		}
 	}
 
+	// Stage 2: For fullstack template, add frontend
+	if (template === "fullstack") {
+		cliConsole.subheader("Adding frontend framework...");
+
+		try {
+			const { registry } = await import("./index");
+			const args = parseArgs([
+				"add:frontend",
+				framework,
+				skipInstall ? "--skip-install" : null,
+				`--project-path=${projectPath}`,
+			].filter(Boolean) as string[]);
+
+			await registry.execute("add:frontend", args);
+		} catch (error) {
+			cliConsole.error(
+				`Failed to add frontend: ${error instanceof Error ? error.message : "Unknown error"}`,
+			);
+			cliConsole.warn("You can manually run: bueno add:frontend " + framework);
+		}
+	}
+
 	// Git initialization - now disabled by default (removed)
 	// Users can run `git init` manually if needed
 

package/src/cli/index.ts

@@ -18,6 +18,7 @@ import { cliConsole, colors, setColorEnabled } from "./core/console";
 
 // Import commands to register them
 import "./commands/new";
+import "./commands/add-frontend";
 import "./commands/generate";
 import "./commands/migration";
 import "./commands/dev";

package/src/cli/templates/frontend/react.ts

@@ -94,7 +94,8 @@ export function App() {
 			},
 			{
 				path: "client/src/styles/globals.css",
-				content: `@tailwind base;
+				content: `/* PostCSS will process these directives */
+@tailwind base;
 @tailwind components;
 @tailwind utilities;
 

package/src/cli/templates/frontend/solid.ts

@@ -91,7 +91,8 @@ export function App() {
 			},
 			{
 				path: "client/src/styles/globals.css",
-				content: `@tailwind base;
+				content: `/* PostCSS will process these directives */
+@tailwind base;
 @tailwind components;
 @tailwind utilities;
 

package/src/cli/templates/frontend/svelte.ts

@@ -86,7 +86,8 @@ export default app;
 			},
 			{
 				path: "client/src/styles/globals.css",
-				content: `@tailwind base;
+				content: `/* PostCSS will process these directives */
+@tailwind base;
 @tailwind components;
 @tailwind utilities;
 

package/src/cli/templates/frontend/vue.ts

@@ -87,7 +87,8 @@ const count = ref(0);
 			},
 			{
 				path: "client/src/styles/globals.css",
-				content: `@tailwind base;
+				content: `/* PostCSS will process these directives */
+@tailwind base;
 @tailwind components;
 @tailwind utilities;
 

package/src/cli/templates/project/api.ts

@@ -31,7 +31,7 @@ export class AppController {
 				return Response.json({ message: 'Welcome to Bueno API!', version: '1.0.0' });
 		}
 
-		@Get('health')
+		@Get('/health')
 		health(ctx: Context) {
 				return Response.json({ status: 'ok', timestamp: new Date().toISOString() });
 		}

package/src/cli/templates/project/default.ts

@@ -68,7 +68,7 @@ export class AppController {
   </ul>
   
   <h2>Documentation</h2>
-  <p>Visit <a href="https://buenojs.dev">https://buenojs.dev</a> for full documentation.</p>
+  <p>Visit <a href="https://bueno.github.io">https://bueno.github.io</a> for full documentation.</p>
   
   <h2>Quick Example</h2>
   <pre><code>@Controller('/api')

package/src/cli/templates/project/fullstack.ts

@@ -1,111 +1,21 @@
 /**
  * Fullstack Project Template
+ *
+ * Two-stage fullstack creation:
+ * Stage 1: Creates API template (backend)
+ * Stage 2: Runs add:frontend command (frontend)
+ *
+ * This template is actually just the API template.
+ * The frontend is added via the add:frontend command,
+ * making fullstack setup transparent and reusable.
  */
 
-import { noneTemplate } from "../frontend/none";
-import { reactTemplate } from "../frontend/react";
-import { solidTemplate } from "../frontend/solid";
-import { svelteTemplate } from "../frontend/svelte";
-import { vueTemplate } from "../frontend/vue";
+import { apiTemplate } from "./api";
 import type { ProjectConfig, ProjectTemplateResult } from "./types";
 
-export function fullstackTemplate(
-	config: ProjectConfig,
-): ProjectTemplateResult {
-	// Get frontend template based on framework
-	const frontendTemplates: Record<string, () => ProjectTemplateResult> = {
-		react: reactTemplate,
-		vue: vueTemplate,
-		svelte: svelteTemplate,
-		solid: solidTemplate,
-		none: noneTemplate,
-	};
-
-	const frontendTemplate = frontendTemplates[config.framework]
-		? frontendTemplates[config.framework]()
-		: reactTemplate();
-
-	return {
-		files: [
-			{
-				path: "server/main.ts",
-				content: `import { createApp, Module, Controller, Get, Post, Injectable } from '@buenojs/bueno';
-import type { Context } from '@buenojs/bueno';
-
-// Services
-@Injectable()
-export class AppService {
-  findAll() {
-    return { message: 'Welcome to Bueno!', items: [] };
-  }
-}
-
-// Controllers
-@Controller('/api')
-export class AppController {
-  constructor(private readonly appService: AppService) {}
-
-  @Get()
-  hello() {
-    return { message: 'Welcome to Bueno API!', version: '1.0.0' };
-  }
-
-  @Get('health')
-  health(ctx: Context) {
-    return { status: 'ok', timestamp: new Date().toISOString() };
-  }
-}
-
-// Module
-@Module({
-  controllers: [AppController],
-  providers: [AppService],
-})
-export class AppModule {}
-
-// Bootstrap
-const app = createApp(AppModule);
-
-// Serve static files in production
-// app.serveStatic('./dist/client');
-
-await app.listen(3000);
-console.log('🚀 Server running at http://localhost:3000');
-`,
-			},
-			// Include frontend files
-			...frontendTemplate.files,
-		],
-		directories: [
-			"server/modules/app",
-			"server/common/middleware",
-			"server/common/guards",
-			"server/common/interceptors",
-			"server/common/pipes",
-			"server/common/filters",
-			"server/database/migrations",
-			"server/config",
-			"tests/unit",
-			"tests/integration",
-			// Include frontend directories
-			...frontendTemplate.directories,
-		],
-		dependencies: {
-			zod: "^3.24.0",
-			// Include frontend dependencies
-			...frontendTemplate.dependencies,
-		},
-		devDependencies: {
-			// Include frontend dev dependencies
-			...frontendTemplate.devDependencies,
-		},
-		scripts: {
-			dev: "bun run --watch server/main.ts",
-			build: "bun build ./server/main.ts --outdir ./dist --target bun",
-			start: "bun run dist/main.js",
-			test: "bun test",
-			// Include frontend scripts
-			...frontendTemplate.scripts,
-		},
-	};
+export function fullstackTemplate(config: ProjectConfig): ProjectTemplateResult {
+	// Stage 1: Return API template
+	// Stage 2 will be handled by handleNew() in new.ts
+	// which will automatically call add:frontend with the selected framework
+	return apiTemplate(config);
 }