@emberkit/cli 0.5.2 → 0.6.1-alpha.0

package/dist/cli.js

@@ -2,8 +2,9 @@ import inquirer from "inquirer";
 import { dev } from "./commands/dev.js";
 import { build } from "./commands/build.js";
 import { preview } from "./commands/preview.js";
-import { create } from "./commands/create.js";
-import { TEMPLATES } from "./commands/create.js";
+import { create, TEMPLATES } from "./commands/create.js";
+import { generate } from "./utils/generator.js";
+import { toKebabCase } from "./templates/index.js";
 export async function runCLI(args) {
     const [command, ...restArgs] = args.slice(2);
     if (!command) {
@@ -28,7 +29,7 @@ export async function runCLI(args) {
             break;
         case "--version":
         case "-v":
-            console.log("EmberKit CLI v0.1.0");
+            console.log("EmberKit CLI v0.6.0");
             break;
         case "--help":
         case "-h":
@@ -42,7 +43,7 @@ export async function runCLI(args) {
 }
 function showHelp() {
     console.log(`
-🔥 EmberKit CLI v0.1.0
+🔥 EmberKit CLI v0.6.0
 
 Usage: emberkit <command> [options]
 
@@ -51,15 +52,24 @@ Commands:
   dev                  Start development server
   build                Build for production
   preview              Preview production build
-  generate <type>      Generate code (routes, components, etc.)
+  generate <type> <name>  Generate a file from a template
 
 Options:
   --template, -t <id>  Project template to use
   --no-install         Skip dependency installation
+  --path, -p <path>    Output path for generate (overrides default)
   --help, -h           Show this help message
   --version, -v        Show version number
 
-Templates:
+Generate types:
+  route      Route component (src/routes/)
+  component  UI component (src/components/)
+  layout     Layout component (src/layouts/)
+  loader     Data loader (src/loaders/)
+  action     Form action (src/actions/)
+  api        API route handler (src/routes/_api/)
+
+Project templates:
   basic      Simple starter with Tailwind CSS (default)
   with-ui    Starter with EmberKit UI components
   minimal    Barebones project, no CSS framework
@@ -163,12 +173,36 @@ function extractFlagValue(args, longFlag, shortFlag) {
     }
     return undefined;
 }
+const GENERATE_TYPES = {
+    route: { dir: "src/routes", ext: ".tsx" },
+    component: { dir: "src/components", ext: ".tsx" },
+    layout: { dir: "src/layouts", ext: ".tsx" },
+    error: { dir: "src/routes", ext: ".tsx" },
+    loader: { dir: "src/loaders", ext: ".ts" },
+    action: { dir: "src/actions", ext: ".ts" },
+    api: { dir: "src/routes/_api", ext: ".ts" },
+};
 async function runGenerate(args) {
-    const [type, name] = args;
+    const nonFlagArgs = args.filter((a) => !a.startsWith("-"));
+    const [type, name] = nonFlagArgs;
     if (!type || !name) {
-        console.error("Usage: emberkit generate <type> <name>");
+        console.error(`Usage: emberkit generate <type> <name> [--path <file-path>]\n\nTypes: ${Object.keys(GENERATE_TYPES).join(", ")}`);
+        process.exit(1);
+    }
+    const explicitPath = extractFlagValue(args, "--path", "-p");
+    const typeConfig = GENERATE_TYPES[type];
+    if (!typeConfig && !explicitPath) {
+        console.error(`Unknown type "${type}". Valid types: ${Object.keys(GENERATE_TYPES).join(", ")}`);
+        process.exit(1);
+    }
+    const filePath = explicitPath ??
+        `${typeConfig.dir}/${toKebabCase(name)}${typeConfig.ext}`;
+    const result = await generate({ name, path: filePath, template: type });
+    if (result.success) {
+        console.log(`✓ Generated ${type}: ${result.path}`);
+    }
+    else {
+        console.error(`✗ ${result.error}`);
         process.exit(1);
     }
-    console.log(`🎨 Generating ${type}: ${name}`);
-    console.log("(Not yet implemented)");
 }

package/dist/commands/create.js

@@ -1,13 +1,15 @@
 import { existsSync, mkdirSync, writeFileSync } from "fs";
-import { resolve, join } from "path";
+import { resolve, join, dirname } from "path";
 import { execSync } from "child_process";
 import { getPackageManager, getInstallCommand } from "../utils/filesystem.js";
-import { starterFiles, withUiTemplate } from "../templates/projects.js";
-import { minimalTemplate } from "../templates/minimal.js";
-import { blogTemplate } from "../templates/blog.js";
-import { saasTemplate } from "../templates/saas.js";
-import { dashboardTemplate } from "../templates/dashboard.js";
-import { apiTemplate } from "../templates/api.js";
+import { formatTemplate, toKebabCase } from "../templates/index.js";
+import { starterFiles } from "../templates/project-templates/starter-kit/starter.js";
+import { withUiTemplate } from "../templates/project-templates/starter-kit/with-ui.js";
+import { minimalTemplate } from "../templates/project-templates/minimal/minimal.js";
+import { blogTemplate } from "../templates/project-templates/blog/blog.js";
+import { saasTemplate } from "../templates/project-templates/saas/saas.js";
+import { dashboardTemplate } from "../templates/project-templates/dashboard/dashboard.js";
+import { apiTemplate } from "../templates/project-templates/api/api.js";
 const RESET = "\x1b[0m";
 const BOLD = "\x1b[1m";
 const DIM = "\x1b[2m";
@@ -67,19 +69,6 @@ function printInfo(message) {
     const info = BRIGHT_BLUE + "›" + RESET;
     console.log(`  ${info} ${DIM + message + RESET}`);
 }
-function formatTemplate(template, vars) {
-    let result = template;
-    for (const [key, value] of Object.entries(vars)) {
-        result = result.replace(new RegExp(`\\{\\{${key}\\}\\}`, "g"), value);
-    }
-    return result;
-}
-function toKebabCase(str) {
-    return str
-        .replace(/([a-z])([A-Z])/g, "$1-$2")
-        .replace(/[\s_]+/g, "-")
-        .toLowerCase();
-}
 function getNpmPackageName(name) {
     const kebab = toKebabCase(name);
     return kebab.startsWith("@") ? kebab : kebab.replace(/^emberkit-/, "");
@@ -115,7 +104,7 @@ export async function create(options) {
     const templateFiles = template.files;
     for (const [filePath, content] of Object.entries(templateFiles)) {
         const fullPath = join(targetDir, filePath);
-        const dir = join(targetDir, filePath.split("/").slice(0, -1).join("/"));
+        const dir = dirname(fullPath);
         if (!existsSync(dir)) {
             mkdirSync(dir, { recursive: true });
         }

package/dist/templates/action/index.js

@@ -0,0 +1,12 @@
+export const actionTemplate = `import type { ActionFunction, LoaderResult } from '@emberkit/core';
+
+export const action: ActionFunction = async ({ params, request }) => {
+  const formData = await request.formData();
+
+  return {
+    data: {
+      success: true,
+    },
+  } as LoaderResult<unknown>;
+};
+`;

package/dist/templates/action.js

@@ -0,0 +1,12 @@
+export const actionTemplate = `import type { ActionFunction, LoaderResult } from '@emberkit/core';
+
+export const action: ActionFunction = async ({ params, request }) => {
+  const formData = await request.formData();
+
+  return {
+    data: {
+      success: true,
+    },
+  } as LoaderResult<unknown>;
+};
+`;

package/dist/templates/api/api.js

@@ -0,0 +1,280 @@
+export const apiTemplate = {
+    "package.json": `{
+  "name": "{{name}}",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "emberkit dev",
+    "build": "emberkit build",
+    "preview": "emberkit preview"
+  },
+  "dependencies": {
+    "@emberkit/core": "^0.2.4"
+  },
+  "devDependencies": {
+    "@emberkit/cli": "^0.2.4",
+    "typescript": "^5.7.0",
+    "vite": "^6.0.0"
+  }
+}`,
+    "tsconfig.json": `{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "jsxImportSource": "@emberkit/core",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}`,
+    "vite.config.ts": `import { defineConfig } from 'vite';
+import { emberkitVitePlugin } from '@emberkit/core/vite-plugin';
+
+export default defineConfig({
+  plugins: [emberkitVitePlugin()],
+  server: {
+    port: 3000,
+    host: 'localhost',
+  },
+  esbuild: {
+    jsxImportSource: '@emberkit/core',
+  },
+});`,
+    "index.html": `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{name}} API</title>
+</head>
+<body id="app">
+  <script type="module" src="/src/index.tsx"></script>
+</body>
+</html>`,
+    "src/index.tsx": `import { render } from '@emberkit/core';
+import { routes } from 'virtual:emberkit-routes';
+import App from './routes/index';
+
+const root = document.getElementById('app');
+
+if (root) {
+  try {
+    render(App, root, { routes });
+  } catch (error) {
+    console.error('[entry] Render error:', error);
+  }
+}`,
+    "src/routes/index.tsx": `import type { RouteComponent } from '@emberkit/core';
+
+const ApiHome: RouteComponent = () => {
+  const endpoints = [
+    { method: 'GET', path: '/api/users', desc: 'List all users' },
+    { method: 'POST', path: '/api/users', desc: 'Create a new user' },
+    { method: 'GET', path: '/api/users/:id', desc: 'Get a user by ID' },
+    { method: 'PUT', path: '/api/users/:id', desc: 'Update a user' },
+    { method: 'DELETE', path: '/api/users/:id', desc: 'Delete a user' },
+    { method: 'GET', path: '/api/health', desc: 'Health check' },
+  ];
+
+  const methodColor = (method: string) => {
+    switch (method) {
+      case 'GET': return 'bg-green-100 text-green-700';
+      case 'POST': return 'bg-blue-100 text-blue-700';
+      case 'PUT': return 'bg-yellow-100 text-yellow-700';
+      case 'DELETE': return 'bg-red-100 text-red-700';
+      default: return 'bg-gray-100 text-gray-700';
+    }
+  };
+
+  return (
+    <div style={{ fontFamily: 'system-ui, sans-serif', maxWidth: '800px', margin: '2rem auto', padding: '0 1rem' }}>
+      <header className="mb-12">
+        <h1 className="text-3xl font-bold mb-2">{{name}} API</h1>
+        <p className="text-gray-600">RESTful API built with EmberKit</p>
+        <div className="mt-4 p-4 bg-gray-100 rounded-lg">
+          <code className="text-sm">Base URL: http://localhost:3000</code>
+        </div>
+      </header>
+
+      <section>
+        <h2 className="text-xl font-semibold mb-4">Endpoints</h2>
+        <div className="space-y-3">
+          {endpoints.map((ep) => (
+            <div key={ep.method + ep.path} className="flex items-center gap-4 p-4 border border-gray-200 rounded-lg">
+              <span className={\`px-2 py-1 rounded text-xs font-bold \${methodColor(ep.method)}\`}>
+                {ep.method}
+              </span>
+              <code className="text-sm font-mono">{ep.path}</code>
+              <span className="text-gray-500 text-sm ml-auto">{ep.desc}</span>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      <section className="mt-12">
+        <h2 className="text-xl font-semibold mb-4">Example Response</h2>
+        <pre className="p-4 bg-gray-900 text-gray-100 rounded-lg overflow-x-auto text-sm">
+{JSON.stringify({
+  data: [
+    { id: 1, name: 'John Doe', email: 'john@example.com' },
+    { id: 2, name: 'Jane Smith', email: 'jane@example.com' },
+  ],
+  meta: { page: 1, total: 2 },
+}, null, 2)}
+        </pre>
+      </section>
+    </div>
+  );
+};
+
+export default ApiHome;`,
+    "src/routes/_api/users.ts": `import type { LoaderFunction, LoaderResult, ActionFunction } from '@emberkit/core';
+
+// In-memory store (replace with database in production)
+const users = [
+  { id: 1, name: 'John Doe', email: 'john@example.com', createdAt: '2026-01-15' },
+  { id: 2, name: 'Jane Smith', email: 'jane@example.com', createdAt: '2026-02-20' },
+  { id: 3, name: 'Mike Johnson', email: 'mike@example.com', createdAt: '2026-03-10' },
+];
+
+let nextId = 4;
+
+export const GET: LoaderFunction = async ({ query }) => {
+  const page = parseInt(query.page as string) || 1;
+  const limit = parseInt(query.limit as string) || 10;
+  const start = (page - 1) * limit;
+  const end = start + limit;
+
+  return {
+    data: {
+      users: users.slice(start, end),
+      meta: {
+        page,
+        limit,
+        total: users.length,
+      },
+    },
+  } as LoaderResult<unknown>;
+};
+
+export const POST: ActionFunction = async ({ request }) => {
+  const body = await request.json();
+
+  if (!body.name || !body.email) {
+    return {
+      error: {
+        code: 'VALIDATION_ERROR',
+        message: 'Name and email are required',
+        status: 400,
+      },
+    } as LoaderResult<unknown>;
+  }
+
+  const newUser = {
+    id: nextId++,
+    name: body.name,
+    email: body.email,
+    createdAt: new Date().toISOString().split('T')[0],
+  };
+
+  users.push(newUser);
+
+  return {
+    data: newUser,
+  } as LoaderResult<unknown>;
+};`,
+    "src/routes/_api/users/[id].ts": `import type { LoaderFunction, LoaderResult, ActionFunction } from '@emberkit/core';
+
+// In-memory store (replace with database in production)
+const users = [
+  { id: 1, name: 'John Doe', email: 'john@example.com', createdAt: '2026-01-15' },
+  { id: 2, name: 'Jane Smith', email: 'jane@example.com', createdAt: '2026-02-20' },
+  { id: 3, name: 'Mike Johnson', email: 'mike@example.com', createdAt: '2026-03-10' },
+];
+
+export const GET: LoaderFunction = async ({ params }) => {
+  const id = parseInt(params.id);
+  const user = users.find((u) => u.id === id);
+
+  if (!user) {
+    return {
+      error: {
+        code: 'NOT_FOUND',
+        message: 'User not found',
+        status: 404,
+      },
+    } as LoaderResult<unknown>;
+  }
+
+  return {
+    data: user,
+  } as LoaderResult<unknown>;
+};
+
+export const PUT: ActionFunction = async ({ params, request }) => {
+  const id = parseInt(params.id);
+  const index = users.findIndex((u) => u.id === id);
+
+  if (index === -1) {
+    return {
+      error: {
+        code: 'NOT_FOUND',
+        message: 'User not found',
+        status: 404,
+      },
+    } as LoaderResult<unknown>;
+  }
+
+  const body = await request.json();
+  users[index] = { ...users[index], ...body };
+
+  return {
+    data: users[index],
+  } as LoaderResult<unknown>;
+};
+
+export const DELETE: ActionFunction = async ({ params }) => {
+  const id = parseInt(params.id);
+  const index = users.findIndex((u) => u.id === id);
+
+  if (index === -1) {
+    return {
+      error: {
+        code: 'NOT_FOUND',
+        message: 'User not found',
+        status: 404,
+      },
+    } as LoaderResult<unknown>;
+  }
+
+  users.splice(index, 1);
+
+  return {
+    data: { success: true },
+  } as LoaderResult<unknown>;
+};`,
+    "src/routes/_api/health.ts": `import type { LoaderFunction, LoaderResult } from '@emberkit/core';
+
+export const GET: LoaderFunction = async () => {
+  return {
+    data: {
+      status: 'ok',
+      timestamp: new Date().toISOString(),
+      uptime: process.uptime(),
+    },
+  } as LoaderResult<unknown>;
+};`,
+};

package/dist/templates/apiRoute/index.js

@@ -0,0 +1,20 @@
+export const apiRouteTemplate = `import type { LoaderFunction, LoaderResult } from '@emberkit/core';
+
+export const GET: LoaderFunction = async ({ params, query, request }) => {
+  return {
+    data: {
+      message: 'Hello from API',
+    },
+  } as LoaderResult<unknown>;
+};
+
+export const POST: LoaderFunction = async ({ request }) => {
+  const body = await request.json();
+
+  return {
+    data: {
+      received: body,
+    },
+  } as LoaderResult<unknown>;
+};
+`;

package/dist/templates/apiRoute.js

@@ -0,0 +1,20 @@
+export const apiRouteTemplate = `import type { LoaderFunction, LoaderResult } from '@emberkit/core';
+
+export const GET: LoaderFunction = async ({ params, query, request }) => {
+  return {
+    data: {
+      message: 'Hello from API',
+    },
+  } as LoaderResult<unknown>;
+};
+
+export const POST: LoaderFunction = async ({ request }) => {
+  const body = await request.json();
+
+  return {
+    data: {
+      received: body,
+    },
+  } as LoaderResult<unknown>;
+};
+`;