@emberkit/cli 0.6.0 → 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,14 +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 } from "../templates/projects/starter.js";
-import { withUiTemplate } from "../templates/projects/with-ui.js";
-import { minimalTemplate } from "../templates/minimal/minimal.js";
-import { blogTemplate } from "../templates/blog/blog.js";
-import { saasTemplate } from "../templates/saas/saas.js";
-import { dashboardTemplate } from "../templates/dashboard/dashboard.js";
-import { apiTemplate } from "../templates/api/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";
@@ -68,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-/, "");
@@ -116,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/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/component/index.js

@@ -0,0 +1,14 @@
+export const componentTemplate = `interface {{name}}Props {
+  className?: string;
+}
+
+const {{name}} = ({ className = '' }: {{name}}Props) => {
+  return (
+    <div className={className}>
+      {{name}} component
+    </div>
+  );
+};
+
+export default {{name}};
+`;

package/dist/templates/config/index.js

@@ -0,0 +1,13 @@
+export const configTemplate = `import { defineConfig } from '@emberkit/core';
+
+export default defineConfig({
+  mode: 'hybrid',
+  server: {
+    port: 3000,
+  },
+  build: {
+    outDir: 'dist',
+    target: 'esnext',
+  },
+});
+`;

package/dist/templates/context/index.js

@@ -0,0 +1,21 @@
+export const contextTemplate = `import { createContext, useContext } from '@emberkit/core';
+
+interface {{name}}Context {
+  // Define your context shape
+  value: string;
+}
+
+const {{name}}Context = createContext<{{name}}Context>({
+  value: 'default',
+});
+
+// Provider usage:
+// <{{name}}Context.Provider value={{ value: 'hello' }}>
+//   {children}
+// </{{name}}Context.Provider>
+
+// Consumer usage:
+// const ctx = useContext({{name}}Context);
+
+export { {{name}}Context };
+`;

package/dist/templates/entry/index.js

@@ -0,0 +1,15 @@
+export const indexTemplate = `import { render } from '@emberkit/core';
+import { routes } from 'virtual:emberkit-routes';
+import App from './routes/_layout';
+import './styles.css';
+
+const root = document.getElementById('app');
+
+if (root) {
+  try {
+    render(App, root, { routes });
+  } catch (error) {
+    console.error('[entry] Render error:', error);
+  }
+}
+`;

package/dist/templates/errorBoundary/index.js

@@ -0,0 +1,17 @@
+export const errorBoundaryTemplate = `import type { RouteComponent } from '@emberkit/core';
+
+interface {{name}}ErrorProps {
+  error: Error;
+}
+
+const {{name}}Error: RouteComponent<{{name}}ErrorProps> = ({ error }) => {
+  return (
+    <div className="error-boundary">
+      <h2>Something went wrong</h2>
+      <p>{error.message}</p>
+    </div>
+  );
+};
+
+export default {{name}}Error;
+`;

package/dist/templates/form/index.js

@@ -0,0 +1,59 @@
+export const formTemplate = `import { signal } from '@emberkit/core';
+
+const {{name}}Form = () => {
+  const email = signal('');
+  const password = signal('');
+  const error = signal<string | null>(null);
+  const loading = signal(false);
+
+  const handleSubmit = async (e: Event) => {
+    e.preventDefault();
+    error.value = null;
+    loading.value = true;
+
+    try {
+      const response = await fetch('/api/auth/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          email: email.value,
+          password: password.value,
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error('Login failed');
+      }
+
+      // Handle success
+    } catch (err) {
+      error.value = err instanceof Error ? err.message : 'Unknown error';
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <input
+        type="email"
+        value={email.value}
+        onInput={(e) => { email.value = e.currentTarget.value; }}
+        placeholder="Email"
+      />
+      <input
+        type="password"
+        value={password.value}
+        onInput={(e) => { password.value = e.currentTarget.value; }}
+        placeholder="Password"
+      />
+      {error.value && <p className="text-red-500">{error.value}</p>}
+      <button type="submit" disabled={loading.value}>
+        {loading.value ? 'Loading...' : 'Submit'}
+      </button>
+    </form>
+  );
+};
+
+export default {{name}}Form;
+`;

package/dist/templates/layout/index.js

@@ -0,0 +1,16 @@
+export const layoutTemplate = `import type { RouteComponent } from '@emberkit/core';
+
+const {{name}}Layout: RouteComponent = ({ children }) => {
+  return (
+    <div>
+      <header>
+        <nav>{{name}} Navigation</nav>
+      </header>
+      <main>{children}</main>
+      <footer>Footer</footer>
+    </div>
+  );
+};
+
+export default {{name}}Layout;
+`;

package/dist/templates/layoutRoutes/index.js

@@ -0,0 +1,9 @@
+export const layoutRoutesTemplate = `// EmberKit uses file-based routing.
+// Routes are automatically discovered from the src/routes directory.
+// - src/routes/index.tsx → /
+// - src/routes/about.tsx → /about
+// - src/routes/[slug].tsx → /:slug
+// - src/routes/[...rest].tsx → catch-all
+
+export {};
+`;

package/dist/templates/loader/index.js

@@ -0,0 +1,10 @@
+export const loaderTemplate = `import type { LoaderFunction, LoaderResult } from '@emberkit/core';
+
+export const loader: LoaderFunction = async ({ params, query, request }) => {
+  return {
+    data: {
+      // Add your data here
+    },
+  } as LoaderResult<unknown>;
+};
+`;

package/dist/templates/project-templates/_shared/base.js

@@ -0,0 +1,139 @@
+/**
+ * Shared builders for project template boilerplate.
+ * Each template composes from these instead of duplicating identical config files.
+ */
+export function buildPackageJson(options = {}) {
+    const { hasTailwind = false, hasUI = false } = options;
+    const deps = { "@emberkit/core": "^0.2.4" };
+    if (hasUI)
+        deps["@emberkit/ui"] = "^0.2.3";
+    const devDeps = {
+        "@emberkit/cli": "^0.2.4",
+        typescript: "^5.7.0",
+        vite: "^6.0.0",
+    };
+    if (hasTailwind) {
+        devDeps["tailwindcss"] = "^4.0.0";
+        devDeps["@tailwindcss/vite"] = "^4.0.0";
+    }
+    return JSON.stringify({
+        name: "{{name}}",
+        version: "0.1.0",
+        private: true,
+        type: "module",
+        scripts: {
+            dev: "emberkit dev",
+            build: "emberkit build",
+            preview: "emberkit preview",
+            lint: "eslint src --ext .ts,.tsx",
+            format: 'prettier --write "src/**/*.{ts,tsx}"',
+        },
+        dependencies: deps,
+        devDependencies: devDeps,
+    }, null, 2);
+}
+export function buildTsConfig(hasPaths = true) {
+    const pathsEntry = hasPaths
+        ? `,
+    "paths": {
+      "@/*": ["./src/*"]
+    }`
+        : "";
+    return `{
+  "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"]${pathsEntry}
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}`;
+}
+export function buildViteConfig(hasTailwind = false) {
+    if (hasTailwind) {
+        return `import { defineConfig } from 'vite';
+import { emberkitVitePlugin } from '@emberkit/core/vite-plugin';
+import tailwindcss from '@tailwindcss/vite';
+
+export default defineConfig({
+  plugins: [emberkitVitePlugin(), tailwindcss()],
+  server: {
+    port: 3000,
+    host: 'localhost',
+  },
+  esbuild: {
+    jsxImportSource: '@emberkit/core',
+  },
+});`;
+    }
+    return `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',
+  },
+});`;
+}
+export function buildIndexHtml(options = {}) {
+    const { title = "{{name}}", fonts = [] } = options;
+    const fontLinks = fonts.length > 0
+        ? `\n  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+${fonts.map((href) => `  <link href="${href}" rel="stylesheet">`).join("\n")}`
+        : "";
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${title}</title>${fontLinks}
+</head>
+<body id="app">
+  <script type="module" src="/src/index.tsx"></script>
+</body>
+</html>`;
+}
+export function buildEntryFile(options = {}) {
+    const { hasLayout = false, hasCss = false } = options;
+    const appImport = hasLayout
+        ? `import App from './routes/_layout';`
+        : `import App from './routes/index';`;
+    const cssImport = hasCss ? `\nimport './styles.css';` : "";
+    return `import { render } from '@emberkit/core';
+import { routes } from 'virtual:emberkit-routes';
+${appImport}${cssImport}
+
+const root = document.getElementById('app');
+
+if (root) {
+  try {
+    render(App, root, { routes });
+  } catch (error) {
+    console.error('[entry] Render error:', error);
+  }
+}`;
+}
+export const GITIGNORE = `node_modules/
+dist/
+.env
+.env.local
+*.local
+.DS_Store
+*.tsbuildinfo
+`;