@emberkit/cli 0.6.5 → 0.6.8

package/dist/brand.js

@@ -0,0 +1,21 @@
+/**
+ * ANSI terminal brand marks (no emoji) for consistent CLI branding.
+ */
+export const cliBrand = {
+    orange: "\x1b[38;5;208m",
+    cyan: "\x1b[38;5;51m",
+    red: "\x1b[38;5;196m",
+    reset: "\x1b[0m",
+    /** EmberKit logo mark in terminal output */
+    logo() {
+        return `${cliBrand.orange}◆${cliBrand.reset}`;
+    },
+    /** Success / highlight accent */
+    spark() {
+        return `${cliBrand.cyan}✦${cliBrand.reset}`;
+    },
+    /** Error line prefix */
+    fail() {
+        return `${cliBrand.red}◆${cliBrand.reset}`;
+    },
+};

package/dist/cli.js

@@ -3,9 +3,11 @@ import { getCliPackageVersion } from "./cli-package-version.js";
 import { dev } from "./commands/dev.js";
 import { build } from "./commands/build.js";
 import { preview } from "./commands/preview.js";
+import { serve } from "./commands/serve.js";
 import { create, TEMPLATES } from "./commands/create.js";
 import { generate } from "./utils/generator.js";
 import { toKebabCase } from "./templates/index.js";
+import { cliBrand } from "./brand.js";
 export async function runCLI(args) {
     const [command, ...restArgs] = args.slice(2);
     if (!command) {
@@ -22,6 +24,10 @@ export async function runCLI(args) {
         case "preview":
             await preview(restArgs);
             break;
+        case "serve":
+        case "start":
+            await serve(restArgs);
+            break;
         case "create":
             await handleCreate(restArgs);
             break;
@@ -44,15 +50,16 @@ export async function runCLI(args) {
 }
 function showHelp() {
     console.log(`
-🔥 EmberKit CLI v${getCliPackageVersion()}
+${cliBrand.logo()} EmberKit CLI v${getCliPackageVersion()}
 
 Usage: emberkit <command> [options]
 
 Commands:
   create [name]        Create a new EmberKit project
   dev                  Start development server
-  build                Build for production
-  preview              Preview production build
+  build                Build for production (SSR/hybrid/static/SPA)
+  preview              Preview production build locally
+  serve                Start production server (SSR/hybrid)
   generate <type> <name>  Generate a file from a template
 
 Options:
@@ -128,7 +135,7 @@ async function handleCreate(args) {
 }
 function showCreateHelp() {
     console.log(`
-🔥 EmberKit — Create a new project
+${cliBrand.logo()} EmberKit — Create a new project
 
 Usage: emberkit create [name] [options]
 
@@ -200,10 +207,10 @@ async function runGenerate(args) {
         `${typeConfig.dir}/${toKebabCase(name)}${typeConfig.ext}`;
     const result = await generate({ name, path: filePath, template: type });
     if (result.success) {
-        console.log(`✓ Generated ${type}: ${result.path}`);
+        console.log(`${cliBrand.spark()} Generated ${type}: ${result.path}`);
     }
     else {
-        console.error(`✗ ${result.error}`);
+        console.error(`${cliBrand.fail()} ${result.error}`);
         process.exit(1);
     }
 }

package/dist/commands/build.js

@@ -1,24 +1,498 @@
-import { spawn } from "child_process";
-import { platform } from "os";
-export async function build(args) {
-    console.log("🔨 Building for production...\n");
-    const isWindows = platform() === "win32";
-    const vite = spawn("vite", ["build", ...args], {
-        stdio: "inherit",
-        shell: isWindows,
+import { build as viteBuild } from "vite";
+import { join } from "path";
+import { existsSync, readFileSync, writeFileSync, mkdirSync } from "fs";
+import { pathToFileURL } from "url";
+import { cliBrand } from "../brand.js";
+import { mergeEmberkitViteConfig } from "../utils/merge-emberkit-vite.js";
+const COLORS = {
+    reset: "\x1b[0m",
+    bright: "\x1b[1m",
+    dim: "\x1b[2m",
+    orange: "\x1b[38;5;208m",
+    ember: "\x1b[38;5;202m",
+    gray: "\x1b[38;5;240m",
+    green: "\x1b[38;5;40m",
+    cyan: "\x1b[38;5;51m",
+    yellow: "\x1b[38;5;220m",
+    red: "\x1b[38;5;196m",
+};
+function log(level, message) {
+    const timestamp = new Date().toLocaleTimeString("en-US", { hour12: false });
+    const prefix = `${COLORS.gray}[${timestamp}]${COLORS.reset}`;
+    const levelColors = {
+        info: COLORS.cyan,
+        warn: COLORS.yellow,
+        error: COLORS.red,
+        success: COLORS.green,
+    };
+    const levelLabel = `${levelColors[level]}${level.toUpperCase().padEnd(7)}${COLORS.reset}`;
+    const emberTag = `${COLORS.ember}[emberkit]${COLORS.reset}`;
+    console.log(`${prefix} ${levelLabel} ${emberTag} ${message}`);
+}
+async function loadEmberKitConfig(root) {
+    const configPaths = [
+        join(root, "emberkit.config.ts"),
+        join(root, "emberkit.config.js"),
+        join(root, "emberkit.config.mjs"),
+    ];
+    for (const configPath of configPaths) {
+        if (existsSync(configPath)) {
+            try {
+                const configUrl = pathToFileURL(configPath).href;
+                const mod = await import(configUrl);
+                return mod.default || mod;
+            }
+            catch {
+                continue;
+            }
+        }
+    }
+    return null;
+}
+async function loadViteConfig(root) {
+    const viteConfigPaths = [
+        join(root, "vite.config.ts"),
+        join(root, "vite.config.js"),
+    ];
+    for (const configPath of viteConfigPaths) {
+        if (existsSync(configPath)) {
+            try {
+                const configUrl = pathToFileURL(configPath).href;
+                const mod = await import(configUrl);
+                const config = mod.default || mod;
+                return typeof config === "function"
+                    ? config({ mode: "production", command: "build" })
+                    : config;
+            }
+            catch {
+                continue;
+            }
+        }
+    }
+    return null;
+}
+export async function build(_args) {
+    const root = process.cwd();
+    console.log(`\n${cliBrand.logo()} ${COLORS.orange}EmberKit Build${COLORS.reset}\n`);
+    const emberkitConfig = await loadEmberKitConfig(root);
+    const viteFileConfig = await loadViteConfig(root);
+    const viteConfig = mergeEmberkitViteConfig(emberkitConfig, viteFileConfig);
+    const mode = emberkitConfig?.mode || "hybrid";
+    const outDir = emberkitConfig?.build?.outDir || "dist";
+    log("info", `Build mode: ${COLORS.ember}${mode}${COLORS.reset}`);
+    log("info", `Output directory: ${COLORS.cyan}${outDir}${COLORS.reset}`);
+    const customLogger = {
+        info: () => { },
+        warn: (msg) => log("warn", msg),
+        error: (msg) => log("error", msg),
+        warnOnce: () => { },
+        clearScreen: () => { },
+        hasWarned: false,
+        hasErrorLogged: () => false,
+    };
+    try {
+        if (mode === "spa") {
+            log("info", "Building SPA (client-only)...");
+            await buildClient(root, outDir, viteConfig, customLogger);
+            log("success", "SPA build complete!");
+        }
+        else if (mode === "ssr" || mode === "hybrid") {
+            log("info", "Building client bundle...");
+            await buildClient(root, outDir, viteConfig, customLogger);
+            log("info", "Building SSR bundle...");
+            await buildSSR(root, outDir, viteConfig, customLogger);
+            log("info", "Generating SSR manifest...");
+            await generateManifest(root, outDir, mode);
+            if (mode === "hybrid") {
+                log("info", "Pre-rendering static routes...");
+                await prerenderStaticRoutes(root, outDir);
+            }
+            log("success", `${mode.toUpperCase()} build complete!`);
+        }
+        else if (mode === "static") {
+            log("info", "Building static site...");
+            await buildClient(root, outDir, viteConfig, customLogger);
+            log("info", "Building SSR bundle for pre-rendering...");
+            await buildSSR(root, outDir, viteConfig, customLogger);
+            log("info", "Generating manifest...");
+            await generateManifest(root, outDir, mode);
+            log("info", "Pre-rendering all routes...");
+            await prerenderStaticRoutes(root, outDir, true);
+            log("success", "Static build complete!");
+        }
+        console.log(`\n${cliBrand.spark()} ${COLORS.green}Build finished successfully!${COLORS.reset}\n`);
+        console.log(`${COLORS.gray}   Output: ${COLORS.cyan}./${outDir}${COLORS.reset}\n`);
+    }
+    catch (error) {
+        log("error", `Build failed: ${error instanceof Error ? error.message : String(error)}`);
+        process.exit(1);
+    }
+}
+async function buildClient(root, outDir, viteConfig, customLogger) {
+    const clientConfig = {
+        ...viteConfig,
+        root,
+        customLogger,
+        logLevel: "silent",
+        build: {
+            ...(viteConfig?.build || {}),
+            outDir,
+            emptyOutDir: true,
+            rollupOptions: {
+                ...(viteConfig?.build?.rollupOptions || {}),
+                output: {
+                    manualChunks: undefined,
+                },
+            },
+        },
+    };
+    await viteBuild(clientConfig);
+}
+function getServerEntryShim() {
+    return `import { routes } from 'virtual:emberkit-routes';
+import { createElement } from '@emberkit/core';
+import { readFileSync } from 'node:fs';
+import { join, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+const routeToRegex = (routePath) => {
+  const paramNames = [];
+  const regexStr = routePath
+    .replace(/:([^/]+)\\*/g, (_, name) => {
+      paramNames.push(name);
+      return '(.*)';
+    })
+    .replace(/:([^/]+)/g, (_, name) => {
+      paramNames.push(name);
+      return '([^/]+)';
     });
-    return new Promise((resolve, reject) => {
-        vite.on("exit", (code) => {
-            if (code === 0) {
-                console.log("\n✨ Build complete!");
-                resolve();
+  return { regex: new RegExp('^' + regexStr.replace(/\\/$/, '/?') + '$'), paramNames };
+};
+
+const matchRoute = (routeList, pathname) => {
+  const normalizedPath = pathname.replace(/\\/+$/, '') || '/';
+  const sortedRoutes = [...routeList].sort((a, b) => {
+    const aScore = a.path.includes(':') ? 0 : 1;
+    const bScore = b.path.includes(':') ? 0 : 1;
+    return bScore - aScore;
+  });
+  for (const route of sortedRoutes) {
+    const pattern = routeToRegex(route.path);
+    const match = normalizedPath.match(pattern.regex);
+    if (match) {
+      const params = {};
+      pattern.paramNames.forEach((name, i) => { params[name] = match[i + 1]; });
+      return { route, params };
+    }
+  }
+  return null;
+};
+
+const escapeHtml = (str) => {
+  if (typeof str !== 'string') return str;
+  return str
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+};
+
+const renderToString = (element) => {
+  if (!element && element !== 0) return '';
+  if (typeof element === 'string') return escapeHtml(element);
+  if (typeof element === 'number') return String(element);
+  if (Array.isArray(element)) return element.map(renderToString).join('');
+
+  if (typeof element !== 'object' || !element.type) return '';
+
+  let { type, props } = element;
+  props = props || {};
+
+  let depth = 0;
+  while (typeof type === 'function' && depth < 50) {
+    depth++;
+    try {
+      const result = type(props);
+      if (result && typeof result === 'object' && result.type) {
+        type = result.type;
+        props = result.props || {};
+      } else if (typeof result === 'string' || typeof result === 'number') {
+        return typeof result === 'string' ? escapeHtml(result) : String(result);
+      } else if (Array.isArray(result)) {
+        return result.map(renderToString).join('');
+      } else {
+        return '';
+      }
+    } catch (e) {
+      console.error('[SSR render error]', e);
+      return '';
+    }
+  }
+
+  if (type === 'Fragment' || type === 'React.Fragment') {
+    const children = Array.isArray(props.children) ? props.children : [props.children];
+    return children.filter(Boolean).map(renderToString).join('');
+  }
+
+  const SELF_CLOSING = new Set(['area','base','br','col','embed','hr','img','input','link','meta','source','track','wbr']);
+
+  const children = Array.isArray(props.children) ? props.children : (props.children ? [props.children] : []);
+  let childHtml = children.filter(c => c != null).map(renderToString).join('');
+
+  if (props.dangerouslySetInnerHTML && props.dangerouslySetInnerHTML.__html) {
+    childHtml = props.dangerouslySetInnerHTML.__html;
+  }
+
+  const attrs = Object.entries(props)
+    .filter(([k, v]) => k !== 'children' && k !== 'key' && k !== 'dangerouslySetInnerHTML' && v != null && typeof v !== 'function')
+    .map(([k, v]) => {
+      if (k === 'className') k = 'class';
+      if (v === true) return ' ' + k;
+      if (v === false) return '';
+      if (k === 'style' && typeof v === 'object') {
+        const styleStr = Object.entries(v)
+          .filter(([, sv]) => sv != null)
+          .map(([sp, sv]) => sp.replace(/([A-Z])/g, '-$1').toLowerCase() + ': ' + sv)
+          .join('; ');
+        return ' ' + k + '="' + escapeHtml(styleStr) + '"';
+      }
+      return ' ' + k + '="' + escapeHtml(String(v)) + '"';
+    })
+    .join('');
+
+  if (SELF_CLOSING.has(type)) {
+    return '<' + type + attrs + '/>';
+  }
+
+  return '<' + type + attrs + '>' + childHtml + '</' + type + '>';
+};
+
+export async function render(url) {
+  const pathname = url.split('?')[0];
+
+  const match = matchRoute(routes, pathname);
+
+  let appHtml = '';
+  let headContent = '';
+
+  if (match) {
+    try {
+      const mod = await match.route.component();
+      const Component = mod.default || mod;
+
+      if (mod.metadata) {
+        if (mod.metadata.title) {
+          headContent += '<title>' + escapeHtml(mod.metadata.title) + '</title>\\n';
+        }
+        if (mod.metadata.description) {
+          headContent += '<meta name="description" content="' + escapeHtml(mod.metadata.description) + '">\\n';
+        }
+      }
+
+      const element = createElement(Component, { params: match.params });
+      appHtml = renderToString(element);
+    } catch (e) {
+      console.error('[SSR] Failed to render route:', pathname, e);
+      appHtml = '<div style="color: red; padding: 20px;">SSR Error: ' + escapeHtml(String(e)) + '</div>';
+    }
+  } else {
+    appHtml = '<div style="padding: 20px;">404 - Page not found</div>';
+  }
+
+  const templatePath = join(__dirname, '..', 'index.html');
+  let template = readFileSync(templatePath, 'utf-8');
+
+  if (template.includes('<body id="app">')) {
+    template = template.replace('<body id="app">', '<body id="app">' + appHtml);
+  } else if (template.includes('<div id="app">')) {
+    template = template.replace('<div id="app"></div>', '<div id="app">' + appHtml + '</div>');
+  } else if (template.includes('<div id="app"/>')) {
+    template = template.replace('<div id="app"/>', '<div id="app">' + appHtml + '</div>');
+  }
+
+  if (headContent && template.includes('</head>')) {
+    template = template.replace('</head>', headContent + '</head>');
+  }
+
+  return template;
+}
+`;
+}
+async function resolveSSREntry(root) {
+    const userEntryTs = join(root, "src", "entry-server.ts");
+    const userEntryTsx = join(root, "src", "entry-server.tsx");
+    if (existsSync(userEntryTs)) {
+        return userEntryTs;
+    }
+    if (existsSync(userEntryTsx)) {
+        return userEntryTsx;
+    }
+    const cacheDir = join(root, "node_modules", ".cache", "emberkit");
+    mkdirSync(cacheDir, { recursive: true });
+    const shimPath = join(cacheDir, "server-entry.js");
+    writeFileSync(shimPath, getServerEntryShim(), "utf-8");
+    return shimPath;
+}
+async function buildSSR(root, outDir, viteConfig, customLogger) {
+    const ssrEntry = await resolveSSREntry(root);
+    const ssrConfig = {
+        ...viteConfig,
+        root,
+        customLogger,
+        logLevel: "silent",
+        build: {
+            ...(viteConfig?.build || {}),
+            outDir: join(outDir, "server"),
+            emptyOutDir: true,
+            ssr: true,
+            rollupOptions: {
+                ...(viteConfig?.build?.rollupOptions || {}),
+                input: ssrEntry,
+                output: {
+                    format: "esm",
+                    entryFileNames: "entry-server.js",
+                },
+            },
+        },
+        ssr: {
+            noExternal: true,
+        },
+    };
+    await viteBuild(ssrConfig);
+}
+async function generateManifest(root, outDir, mode) {
+    const routesDir = join(root, "src", "routes");
+    const routes = [];
+    if (existsSync(routesDir)) {
+        const files = await scanRouteFiles(routesDir);
+        for (const file of files) {
+            const relativePath = file.replace(routesDir, "").replace(/\\/g, "/");
+            if (relativePath.includes("_layout") || relativePath.includes("_error") || relativePath.includes("_loading")) {
+                continue;
+            }
+            if (relativePath.startsWith("/_api/") || relativePath.includes("/_api/")) {
+                continue;
+            }
+            let routePath = relativePath
+                .replace(/\.(tsx|ts|jsx|js|md|mdx)$/, "")
+                .replace(/(^|\/)index$/, "$1")
+                .replace(/\[\.\.\.(\w+)\]/g, ":$1*")
+                .replace(/\[([^\]]+)\]/g, ":$1");
+            if (routePath === "" || routePath === "/") {
+                routePath = "/";
             }
             else {
-                reject(new Error(`Build failed with code ${code}`));
+                routePath = routePath.startsWith("/") ? routePath : "/" + routePath;
             }
-        });
-        vite.on("error", (error) => {
-            reject(error);
-        });
+            const isStatic = !routePath.includes(":");
+            routes.push({
+                path: routePath,
+                file: relativePath,
+                isStatic,
+            });
+        }
+    }
+    routes.sort((a, b) => {
+        const aScore = a.path.includes(":") ? 0 : 1;
+        const bScore = b.path.includes(":") ? 0 : 1;
+        return bScore - aScore;
     });
+    const indexHtmlPath = join(root, outDir, "index.html");
+    let template = "";
+    if (existsSync(indexHtmlPath)) {
+        template = readFileSync(indexHtmlPath, "utf-8");
+    }
+    const manifest = {
+        mode,
+        routes,
+        clientEntry: "/src/index.tsx",
+        template,
+        buildTime: new Date().toISOString(),
+    };
+    const manifestPath = join(root, outDir, "ssr-manifest.json");
+    writeFileSync(manifestPath, JSON.stringify(manifest, null, 2), "utf-8");
+}
+async function scanRouteFiles(dir) {
+    const { readdir, stat } = await import("fs/promises");
+    const files = [];
+    const extensions = new Set(["tsx", "ts", "jsx", "js", "md", "mdx"]);
+    async function walk(currentDir) {
+        let entries;
+        try {
+            entries = await readdir(currentDir);
+        }
+        catch {
+            return;
+        }
+        for (const entry of entries) {
+            const fullPath = join(currentDir, entry);
+            const fileStat = await stat(fullPath);
+            if (fileStat.isDirectory()) {
+                await walk(fullPath);
+            }
+            else {
+                const ext = entry.split(".").pop() ?? "";
+                if (extensions.has(ext)) {
+                    files.push(fullPath);
+                }
+            }
+        }
+    }
+    await walk(dir);
+    return files;
+}
+async function prerenderStaticRoutes(root, outDir, prerenderAll = false) {
+    const manifestPath = join(root, outDir, "ssr-manifest.json");
+    if (!existsSync(manifestPath)) {
+        log("warn", "No SSR manifest found, skipping pre-rendering");
+        return;
+    }
+    const manifest = JSON.parse(readFileSync(manifestPath, "utf-8"));
+    const serverEntryPath = join(root, outDir, "server", "entry-server.js");
+    if (!existsSync(serverEntryPath)) {
+        log("warn", "Server entry not found, skipping pre-rendering");
+        return;
+    }
+    let serverModule;
+    try {
+        const serverUrl = pathToFileURL(serverEntryPath).href;
+        serverModule = await import(serverUrl);
+    }
+    catch (e) {
+        log("warn", `Failed to load server module: ${e}`);
+        return;
+    }
+    const routesToPrerender = manifest.routes.filter((route) => prerenderAll || route.isStatic);
+    for (const route of routesToPrerender) {
+        if (route.path.includes(":")) {
+            continue;
+        }
+        try {
+            let html;
+            if (serverModule.render) {
+                html = await serverModule.render(route.path);
+            }
+            else if (serverModule.default && typeof serverModule.default === "function") {
+                html = "<!DOCTYPE html><html><head></head><body></body></html>";
+            }
+            else {
+                continue;
+            }
+            const outputPath = route.path === "/"
+                ? join(root, outDir, "index.html")
+                : join(root, outDir, route.path, "index.html");
+            const outputDir = outputPath.replace(/\/index\.html$/, "");
+            if (!existsSync(outputDir)) {
+                mkdirSync(outputDir, { recursive: true });
+            }
+            writeFileSync(outputPath, html, "utf-8");
+            console.log(`  ${cliBrand.spark()} ${COLORS.green}${route.path}${COLORS.reset}`);
+        }
+        catch (e) {
+            console.log(`  ${COLORS.red}◆${COLORS.reset} ${COLORS.red}${route.path} - ${e}${COLORS.reset}`);
+        }
+    }
 }

package/dist/commands/create.js

@@ -10,6 +10,7 @@ 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";
+import { cliBrand } from "../brand.js";
 const RESET = "\x1b[0m";
 const BOLD = "\x1b[1m";
 const DIM = "\x1b[2m";
@@ -45,7 +46,7 @@ function printTemplateList() {
 function printHeader() {
     const header = `
 ${BRIGHT_BLACK}╭─────────────────────────────────────────────────────╮${RESET}
-${BRIGHT_BLACK}│${RESET}   ${ORANGE_BG}${BRIGHT_BLACK} EmberKit ${RESET}                                         ${BRIGHT_BLACK}│${RESET}
+${BRIGHT_BLACK}│${RESET}   ${cliBrand.logo()} ${ORANGE_BG}${BRIGHT_BLACK} EmberKit ${RESET}                                         ${BRIGHT_BLACK}│${RESET}
 ${BRIGHT_BLACK}│${RESET}   ${DIM}A minimalist TypeScript-first JSX framework${RESET}     ${BRIGHT_BLACK}│${RESET}
 ${BRIGHT_BLACK}╰─────────────────────────────────────────────────────╯${RESET}
 `;
@@ -58,11 +59,11 @@ function printStep(step, total, message) {
     console.log(`  ${numStr} ${BRIGHT_WHITE + message + RESET} ${bar}`);
 }
 function printSuccess(message) {
-    const check = BRIGHT_GREEN + "✓" + RESET;
+    const check = cliBrand.spark();
     console.log(`\n  ${check} ${BRIGHT_GREEN + message + RESET}\n`);
 }
 function printError(message) {
-    const err = BRIGHT_RED + "✗" + RESET;
+    const err = `${BRIGHT_RED}◆${RESET}`;
     console.log(`\n  ${err} ${BRIGHT_RED + message + RESET}\n`);
 }
 function printInfo(message) {