@emberkit/cli 0.6.8 → 0.7.0

package/dist/commands/build.js

@@ -4,6 +4,7 @@ import { existsSync, readFileSync, writeFileSync, mkdirSync } from "fs";
 import { pathToFileURL } from "url";
 import { cliBrand } from "../brand.js";
 import { mergeEmberkitViteConfig } from "../utils/merge-emberkit-vite.js";
+import { loadEmberKitConfig, loadViteConfig } from "../utils/load-config.js";
 const COLORS = {
     reset: "\x1b[0m",
     bright: "\x1b[1m",
@@ -29,48 +30,6 @@ function log(level, message) {
     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`);
@@ -100,7 +59,7 @@ export async function build(_args) {
             log("info", "Building client bundle...");
             await buildClient(root, outDir, viteConfig, customLogger);
             log("info", "Building SSR bundle...");
-            await buildSSR(root, outDir, viteConfig, customLogger);
+            await buildSSR(root, outDir, viteConfig, customLogger, emberkitConfig);
             log("info", "Generating SSR manifest...");
             await generateManifest(root, outDir, mode);
             if (mode === "hybrid") {
@@ -113,7 +72,7 @@ export async function build(_args) {
             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);
+            await buildSSR(root, outDir, viteConfig, customLogger, emberkitConfig);
             log("info", "Generating manifest...");
             await generateManifest(root, outDir, mode);
             log("info", "Pre-rendering all routes...");
@@ -129,11 +88,16 @@ export async function build(_args) {
     }
 }
 async function buildClient(root, outDir, viteConfig, customLogger) {
+    // Always ensure plugins are properly normalized as an array
+    const plugins = (viteConfig?.plugins && Array.isArray(viteConfig.plugins))
+        ? viteConfig.plugins
+        : (viteConfig?.plugins ? [viteConfig.plugins] : []);
     const clientConfig = {
         ...viteConfig,
         root,
         customLogger,
         logLevel: "silent",
+        plugins,
         build: {
             ...(viteConfig?.build || {}),
             outDir,
@@ -145,12 +109,30 @@ async function buildClient(root, outDir, viteConfig, customLogger) {
                 },
             },
         },
+        ssr: undefined,
     };
     await viteBuild(clientConfig);
 }
-function getServerEntryShim() {
-    return `import { routes } from 'virtual:emberkit-routes';
-import { createElement } from '@emberkit/core';
+function siteConfigToHeadOptions(site) {
+    const config = site;
+    if (!config?.url) {
+        return "null";
+    }
+    return JSON.stringify({
+        siteUrl: config.url,
+        siteName: config.name,
+        titleSuffix: config.titleSuffix,
+        defaultDescription: config.description,
+        defaultOgImage: config.ogImage,
+        twitterSite: config.twitterSite,
+    });
+}
+function getServerEntryShim(site) {
+    const siteHeadOptions = siteConfigToHeadOptions(site);
+    return `import { routes, notFoundRoute, errorRoute } from 'virtual:emberkit-routes';
+import { createElement, buildRouteHeadFromMetadata } from '@emberkit/core';
+
+const siteHeadOptions = ${siteHeadOptions};
 import { readFileSync } from 'node:fs';
 import { join, dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
@@ -277,6 +259,7 @@ export async function render(url) {
 
   let appHtml = '';
   let headContent = '';
+  let status = 200;
 
   if (match) {
     try {
@@ -284,22 +267,49 @@ export async function render(url) {
       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';
-        }
+        headContent += buildRouteHeadFromMetadata(mod.metadata, pathname, siteHeadOptions ?? undefined) + '\\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>';
+      if (errorRoute) {
+        try {
+          status = 500;
+          const mod = await errorRoute();
+          const Component = mod.default || mod;
+          const errorInfo = {
+            status: 500,
+            message: e instanceof Error ? e.message : 'Internal Server Error',
+            error: e,
+          };
+          const element = createElement(Component, { error: errorInfo });
+          appHtml = renderToString(element);
+        } catch (fallbackError) {
+          console.error('[SSR] Failed to render 500 page:', fallbackError);
+          appHtml = '<div style="color: red; padding: 20px;">Internal Server Error</div>';
+        }
+      } else {
+        appHtml = '<div style="color: red; padding: 20px;">SSR Error: ' + escapeHtml(String(e)) + '</div>';
+        status = 500;
+      }
     }
   } else {
-    appHtml = '<div style="padding: 20px;">404 - Page not found</div>';
+    status = 404;
+    if (notFoundRoute) {
+      try {
+        const mod = await notFoundRoute();
+        const Component = mod.default || mod;
+        const element = createElement(Component, {});
+        appHtml = renderToString(element);
+      } catch (e) {
+        console.error('[SSR] Failed to render 404 page:', e);
+        appHtml = '<div style="padding: 20px;">404 - Page not found</div>';
+      }
+    } else {
+      appHtml = '<div style="padding: 20px;">404 - Page not found</div>';
+    }
   }
 
   const templatePath = join(__dirname, '..', 'index.html');
@@ -317,11 +327,11 @@ export async function render(url) {
     template = template.replace('</head>', headContent + '</head>');
   }
 
-  return template;
+  return { html: template, status };
 }
 `;
 }
-async function resolveSSREntry(root) {
+async function resolveSSREntry(root, emberkitConfig) {
     const userEntryTs = join(root, "src", "entry-server.ts");
     const userEntryTsx = join(root, "src", "entry-server.tsx");
     if (existsSync(userEntryTs)) {
@@ -333,11 +343,12 @@ async function resolveSSREntry(root) {
     const cacheDir = join(root, "node_modules", ".cache", "emberkit");
     mkdirSync(cacheDir, { recursive: true });
     const shimPath = join(cacheDir, "server-entry.js");
-    writeFileSync(shimPath, getServerEntryShim(), "utf-8");
+    const site = emberkitConfig?.site;
+    writeFileSync(shimPath, getServerEntryShim(site), "utf-8");
     return shimPath;
 }
-async function buildSSR(root, outDir, viteConfig, customLogger) {
-    const ssrEntry = await resolveSSREntry(root);
+async function buildSSR(root, outDir, viteConfig, customLogger, emberkitConfig) {
+    const ssrEntry = await resolveSSREntry(root, emberkitConfig);
     const ssrConfig = {
         ...viteConfig,
         root,
@@ -358,7 +369,7 @@ async function buildSSR(root, outDir, viteConfig, customLogger) {
             },
         },
         ssr: {
-            noExternal: true,
+            noExternal: ['virtual:emberkit-routes'],
         },
     };
     await viteBuild(ssrConfig);

package/dist/commands/dev.js

@@ -1,8 +1,6 @@
 import { createServer } from "vite";
-import { join } from "path";
-import { existsSync } from "fs";
-import { pathToFileURL } from "url";
 import { mergeEmberkitViteConfig } from "../utils/merge-emberkit-vite.js";
+import { loadEmberKitConfig, loadViteConfig } from "../utils/load-config.js";
 const COLORS = {
     reset: "\x1b[0m",
     bright: "\x1b[1m",
@@ -45,46 +43,13 @@ function log(level, message, meta) {
     }
     console.log(output);
 }
-async function loadEmberKitConfig(root) {
-    const configPath = join(root, "emberkit.config.ts");
-    const configPathJs = join(root, "emberkit.config.js");
-    const finalPath = existsSync(configPath) ? configPath : existsSync(configPathJs) ? configPathJs : null;
-    if (!finalPath) {
-        return null;
-    }
-    try {
-        const configUrl = pathToFileURL(finalPath).href;
-        const mod = await import(configUrl);
-        return mod.default || mod;
-    }
-    catch {
-        return null;
-    }
-}
-async function loadViteConfig(root) {
-    const viteConfigPath = join(root, "vite.config.ts");
-    const viteConfigPathJs = join(root, "vite.config.js");
-    const finalPath = existsSync(viteConfigPath) ? viteConfigPath : existsSync(viteConfigPathJs) ? viteConfigPathJs : null;
-    if (!finalPath) {
-        return null;
-    }
-    try {
-        const configUrl = pathToFileURL(finalPath).href;
-        const mod = await import(configUrl);
-        const config = mod.default || mod;
-        return typeof config === "function" ? config({ mode: "development", command: "serve" }) : config;
-    }
-    catch {
-        return null;
-    }
-}
 export async function dev(_args) {
     const root = process.cwd();
     console.clear();
     console.log(`${COLORS.orange}${EMBERKIT_ASCII}${COLORS.reset}`);
     log("info", "Initializing development server...");
     const emberkitConfig = await loadEmberKitConfig(root);
-    const viteFileConfig = await loadViteConfig(root);
+    const viteFileConfig = await loadViteConfig(root, "serve");
     const viteConfig = mergeEmberkitViteConfig(emberkitConfig, viteFileConfig);
     if (emberkitConfig) {
         log("debug", "Loaded emberkit.config", { mode: emberkitConfig.mode || "hybrid" });

package/dist/emberkit-package-versions.js

@@ -1,10 +1,10 @@
 // Semver ranges for @emberkit/* packages written into generated projects.
 // When releasing libraries, bump these to match packages/*/package.json "version".
 export const EMBERKIT_PACKAGE_VERSIONS = {
-    core: "^0.3.8",
-    ui: "^1.0.1",
-    icons: "^1.0.8",
-    cli: "^0.6.8",
+    core: "^0.6.0",
+    ui: "^4.0.0",
+    icons: "^4.0.0",
+    cli: "^0.7.0",
     edge: "^0.2.4",
     tsconfig: "^0.2.1",
 };

package/dist/utils/load-config.js

@@ -0,0 +1,107 @@
+import { existsSync, mkdirSync } from "fs";
+import { join } from "path";
+import { pathToFileURL } from "url";
+/**
+ * Loads a TypeScript or JavaScript config file in any Node environment.
+ *
+ * Direct `import()` of `.ts` files only works on runtimes with TypeScript
+ * support (e.g. tsx, ts-node, Node ≥ 22 with --experimental-strip-types).
+ * Cloudflare Pages CI runs plain Node 18/20, so `.ts` imports silently fail.
+ *
+ * We use esbuild (a transitive dep of Vite, always present) to bundle the
+ * config to a temporary `.mjs` file and import that instead.
+ */
+async function transpileAndImport(filePath, root) {
+    // Use a cache dir that survives across the two viteBuild calls
+    const cacheDir = join(root, "node_modules", ".cache", "emberkit");
+    mkdirSync(cacheDir, { recursive: true });
+    const outFile = join(cacheDir, `config-${Date.now()}-${Math.random().toString(36).slice(2)}.mjs`);
+    try {
+        // esbuild is always available as a transitive dependency of Vite
+        const { build: esbuild } = await import("esbuild");
+        await esbuild({
+            entryPoints: [filePath],
+            bundle: true,
+            format: "esm",
+            platform: "node",
+            outfile: outFile,
+            // Preserve all package imports so they resolve from node_modules at runtime
+            packages: "external",
+            logLevel: "silent",
+        });
+        const mod = await import(pathToFileURL(outFile).href);
+        return (mod.default ?? mod);
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * Loads the `emberkit.config.ts` (or `.js` / `.mjs`) for a project root.
+ * Returns `null` when no config file is found or loading fails.
+ */
+export async function loadEmberKitConfig(root) {
+    const candidates = [
+        join(root, "emberkit.config.ts"),
+        join(root, "emberkit.config.js"),
+        join(root, "emberkit.config.mjs"),
+    ];
+    for (const filePath of candidates) {
+        if (!existsSync(filePath))
+            continue;
+        const ext = filePath.split(".").pop();
+        // Plain JS/MJS files can be imported directly
+        if (ext === "js" || ext === "mjs") {
+            try {
+                const mod = await import(pathToFileURL(filePath).href);
+                return (mod.default ?? mod);
+            }
+            catch {
+                continue;
+            }
+        }
+        // TypeScript files need transpilation
+        const result = await transpileAndImport(filePath, root);
+        if (result !== null)
+            return result;
+    }
+    return null;
+}
+/**
+ * Loads the `vite.config.ts` (or `.js`) for a project root.
+ * Returns `null` when no config file is found or loading fails.
+ */
+export async function loadViteConfig(root, command = "build") {
+    const candidates = [
+        join(root, "vite.config.ts"),
+        join(root, "vite.config.js"),
+    ];
+    for (const filePath of candidates) {
+        if (!existsSync(filePath))
+            continue;
+        const ext = filePath.split(".").pop();
+        let raw = null;
+        if (ext === "js") {
+            try {
+                const mod = await import(pathToFileURL(filePath).href);
+                raw = mod.default ?? mod;
+            }
+            catch {
+                continue;
+            }
+        }
+        else {
+            raw = await transpileAndImport(filePath, root);
+        }
+        if (raw === null)
+            continue;
+        const resolved = typeof raw === "function"
+            ? raw({
+                mode: command === "serve" ? "development" : "production",
+                command,
+            })
+            : raw;
+        return resolved;
+    }
+    return null;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@emberkit/cli",
-  "version": "0.6.8",
+  "version": "0.7.0",
   "type": "module",
   "private": false,
   "description": "CLI tool for EmberKit projects",
@@ -51,6 +51,7 @@
   "devDependencies": {
     "@eslint/js": "^10.0.1",
     "@types/inquirer": "^9.0.3",
+    "esbuild": "^0.28.0",
     "eslint": "^10.0.0",
     "eslint-plugin-perfectionist": "^5.9.0",
     "typescript-eslint": "^8.59.3"