create-ereo 0.1.26 → 0.1.28

package/README.md

@@ -5,20 +5,20 @@ Scaffold a new EreoJS project with a single command. Creates a fully configured
 ## Usage
 
 ```bash
-bunx create-ereo my-app
+bunx create-ereo@latest my-app
 ```
 
 Or with npm/npx:
 
 ```bash
-npx create-ereo my-app
+npx create-ereo@latest my-app
 ```
 
 ## Quick Start
 
 ```bash
 # Create a new project with the default template
-bunx create-ereo my-app
+bunx create-ereo@latest my-app
 
 # Navigate to the project
 cd my-app
@@ -35,13 +35,13 @@ Choose from multiple starter templates:
 
 ```bash
 # Minimal template - bare essentials
-bunx create-ereo my-app --template minimal
+bunx create-ereo@latest my-app --template minimal
 
 # Default template - standard setup
-bunx create-ereo my-app --template default
+bunx create-ereo@latest my-app --template default
 
 # Tailwind template - full-featured with Tailwind CSS (default)
-bunx create-ereo my-app --template tailwind
+bunx create-ereo@latest my-app --template tailwind
 ```
 
 ### Template Contents
@@ -76,16 +76,16 @@ bunx create-ereo my-app --template tailwind
 
 ```bash
 # Create with minimal template
-bunx create-ereo my-app -t minimal
+bunx create-ereo@latest my-app -t minimal
 
 # Create without TypeScript
-bunx create-ereo my-app --no-typescript
+bunx create-ereo@latest my-app --no-typescript
 
 # Create without installing dependencies
-bunx create-ereo my-app --no-install
+bunx create-ereo@latest my-app --no-install
 
 # Create without git initialization
-bunx create-ereo my-app --no-git
+bunx create-ereo@latest my-app --no-git
 ```
 
 ## Project Structure

package/dist/index.js

@@ -5,12 +5,34 @@
 import { join, resolve, dirname } from "path";
 import { mkdir } from "fs/promises";
 var pkgJsonPath = join(dirname(import.meta.dir), "package.json");
-var EREO_VERSION = `^${(await Bun.file(pkgJsonPath).json()).version}`;
+var LOCAL_VERSION = (await Bun.file(pkgJsonPath).json()).version;
+var EREO_VERSION = `^${LOCAL_VERSION}`;
+async function checkForUpdates() {
+  try {
+    const controller = new AbortController;
+    const timeout = setTimeout(() => controller.abort(), 3000);
+    const res = await fetch("https://registry.npmjs.org/create-ereo/latest", {
+      signal: controller.signal
+    });
+    clearTimeout(timeout);
+    if (!res.ok)
+      return;
+    const { version: latest } = await res.json();
+    if (latest && latest !== LOCAL_VERSION) {
+      console.log(`  \x1B[33m\u26A0\x1B[0m  You are running \x1B[1mcreate-ereo@${LOCAL_VERSION}\x1B[0m.`);
+      console.log(`     The latest version is \x1B[1m\x1B[32m${latest}\x1B[0m. Update with:
+`);
+      console.log(`     \x1B[36mbunx create-ereo@latest ${process.argv[2] ?? "<project-name>"}\x1B[0m
+`);
+    }
+  } catch {}
+}
 var defaultOptions = {
   template: "tailwind",
   typescript: true,
   git: true,
-  install: true
+  install: true,
+  trace: false
 };
 function printBanner() {
   console.log(`
@@ -22,18 +44,19 @@ function printBanner() {
 function printHelp() {
   console.log(`
   \x1B[1mUsage:\x1B[0m
-    bunx create-ereo <project-name> [options]
+    bunx create-ereo@latest <project-name> [options]
 
   \x1B[1mOptions:\x1B[0m
     -t, --template <name>   Template to use (minimal, default, tailwind)
     --no-typescript         Use JavaScript instead of TypeScript
     --no-git                Skip git initialization
     --no-install            Skip package installation
+    --trace                 Include @ereo/trace for full-stack observability
 
   \x1B[1mExamples:\x1B[0m
-    bunx create-ereo my-app
-    bunx create-ereo my-app --template minimal
-    bunx create-ereo my-app --no-typescript
+    bunx create-ereo@latest my-app
+    bunx create-ereo@latest my-app --template minimal
+    bunx create-ereo@latest my-app --no-typescript
 `);
 }
 function parseArgs(args) {
@@ -64,6 +87,8 @@ function parseArgs(args) {
       options.git = false;
     } else if (arg === "--no-install") {
       options.install = false;
+    } else if (arg === "--trace") {
+      options.trace = true;
     } else if (!arg.startsWith("-") && !projectName) {
       projectName = arg;
     }
@@ -138,7 +163,7 @@ coverage
 *.tgz
 `;
 }
-async function generateMinimalProject(projectDir, projectName, typescript) {
+async function generateMinimalProject(projectDir, projectName, typescript, trace = false) {
   const ext = typescript ? "tsx" : "jsx";
   await mkdir(projectDir, { recursive: true });
   await mkdir(join(projectDir, "app/routes"), { recursive: true });
@@ -148,7 +173,7 @@ async function generateMinimalProject(projectDir, projectName, typescript) {
     version: "0.1.0",
     type: "module",
     scripts: {
-      dev: "ereo dev",
+      dev: trace ? "ereo dev --trace" : "ereo dev",
       build: "ereo build",
       start: "ereo start"
     },
@@ -159,6 +184,7 @@ async function generateMinimalProject(projectDir, projectName, typescript) {
       "@ereo/client": EREO_VERSION,
       "@ereo/data": EREO_VERSION,
       "@ereo/cli": EREO_VERSION,
+      ...trace ? { "@ereo/trace": EREO_VERSION } : {},
       react: "^18.2.0",
       "react-dom": "^18.2.0"
     },
@@ -188,9 +214,6 @@ export default function RootLayout({ children }${typescript ? ": { children: Rea
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <title>${projectName}</title>
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
-        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
         <style dangerouslySetInnerHTML={{ __html: \`
           *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
           :root {
@@ -219,7 +242,7 @@ export default function RootLayout({ children }${typescript ? ": { children: Rea
             }
           }
           body {
-            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
             background: var(--bg);
             color: var(--text);
             line-height: 1.6;
@@ -261,7 +284,7 @@ export default function RootLayout({ children }${typescript ? ": { children: Rea
           .code-dot-r { background: #ff5f57; }
           .code-dot-y { background: #febc2e; }
           .code-dot-g { background: #28c840; }
-          .code-body { padding: 1.25rem; font-family: 'JetBrains Mono', monospace; font-size: 0.875rem; color: #a5b4fc; line-height: 1.8; }
+          .code-body { padding: 1.25rem; font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.875rem; color: #a5b4fc; line-height: 1.8; }
           .code-body .prompt { color: #6ee7b7; }
           .quickstart-section { background: var(--bg-soft); padding: 5rem 2rem; text-align: center; }
           .quickstart-section h2 { font-size: 2rem; font-weight: 700; margin-bottom: 1rem; }
@@ -366,7 +389,7 @@ export default function HomePage() {
             <span className="code-dot code-dot-g" />
           </div>
           <div className="code-body">
-            <div><span className="prompt">$</span> bunx create-ereo my-app</div>
+            <div><span className="prompt">$</span> bunx create-ereo@latest my-app</div>
             <div><span className="prompt">$</span> cd my-app</div>
             <div><span className="prompt">$</span> bun run dev</div>
           </div>
@@ -409,7 +432,7 @@ dist
   await Bun.write(join(projectDir, "Dockerfile"), generateDockerfile(typescript));
   await Bun.write(join(projectDir, ".dockerignore"), generateDockerignore());
 }
-async function generateTailwindProject(projectDir, projectName, typescript) {
+async function generateTailwindProject(projectDir, projectName, typescript, trace = false) {
   const ext = typescript ? "tsx" : "jsx";
   const ts = typescript;
   await mkdir(projectDir, { recursive: true });
@@ -422,7 +445,7 @@ async function generateTailwindProject(projectDir, projectName, typescript) {
     version: "0.1.0",
     type: "module",
     scripts: {
-      dev: "ereo dev",
+      dev: trace ? "ereo dev --trace" : "ereo dev",
       build: "ereo build",
       start: "ereo start",
       test: "bun test",
@@ -437,6 +460,7 @@ async function generateTailwindProject(projectDir, projectName, typescript) {
       "@ereo/cli": EREO_VERSION,
       "@ereo/runtime-bun": EREO_VERSION,
       "@ereo/plugin-tailwind": EREO_VERSION,
+      ...trace ? { "@ereo/trace": EREO_VERSION } : {},
       react: "^18.2.0",
       "react-dom": "^18.2.0"
     },
@@ -507,8 +531,8 @@ export default {
   theme: {
     extend: {
       fontFamily: {
-        sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
-        mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
+        sans: ['system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'],
+        mono: ['ui-monospace', 'SFMono-Regular', 'SF Mono', 'Menlo', 'Consolas', 'monospace'],
       },
       colors: {
         primary: {
@@ -557,8 +581,6 @@ export default {
 `.trim();
   await Bun.write(join(projectDir, "tailwind.config.js"), tailwindConfig);
   const styles = `
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -646,6 +668,49 @@ export interface ActionResult<T = unknown> {
 `.trim();
     await Bun.write(join(projectDir, "app/lib/types.ts"), types);
   }
+  const tracingBlogPost = trace ? `
+  {
+    slug: 'full-stack-tracing',
+    title: 'Full-Stack Tracing with @ereo/trace',
+    excerpt: 'See every request from HTTP to database in a beautiful timeline. Zero-config observability for your EreoJS app.',
+    content: \\\`
+# Full-Stack Tracing with @ereo/trace
+
+EreoJS includes built-in full-stack observability that traces every request across all 11 framework layers.
+
+## Enabling Tracing
+
+Tracing is already configured in this project! Run \\\\\\\`bun run dev\\\\\\\` and open http://localhost:3000/__ereo/traces to see the trace viewer.
+
+## What Gets Traced
+
+- **Request lifecycle** \u2014 HTTP method, path, status, total duration
+- **Route matching** \u2014 Which route patterns matched, layout chains
+- **Data loading** \u2014 Loader execution time, cache hits/misses
+- **Form actions** \u2014 Validation, processing, error counts
+- **Database queries** \u2014 SQL statements, row counts, duration
+
+## CLI Output
+
+The CLI reporter shows a live tree view of every request:
+
+\\\\\\\`\\\\\\\`\\\\\\\`
+  GET    /blog  200  42.1ms
+  |-- routing       1.2ms   matched /blog
+  |-- data         38.4ms
+  |   |-- posts    35.1ms  db query
+  \\\\\\\\\\\\\\\`-- render       2.5ms
+\\\\\\\`\\\\\\\`\\\\\\\`
+
+## Production
+
+For production, alias \\\\\\\`@ereo/trace\\\\\\\` to \\\\\\\`@ereo/trace/noop\\\\\\\` \u2014 a 592-byte no-op that tree-shakes to zero runtime cost.
+    \\\`.trim(),
+    author: 'EreoJS Team',
+    date: '2024-02-01',
+    readTime: '3 min read',
+    tags: ['ereo', 'tracing', 'devtools'],
+  },` : "";
   const mockData = `
 ${ts ? `import type { Post } from './types';
 ` : ""}
@@ -674,7 +739,7 @@ EreoJS is a modern React fullstack framework that runs on Bun, offering exceptio
 ## Quick Start
 
 \\\`\\\`\\\`bash
-bunx create-ereo my-app
+bunx create-ereo@latest my-app
 cd my-app
 bun run dev
 \\\`\\\`\\\`
@@ -766,7 +831,7 @@ export default function Button({ children }) {
     date: '2024-01-25',
     readTime: '4 min read',
     tags: ['ereo', 'tailwind', 'css'],
-  },
+  },${tracingBlogPost}
 ];
 
 /**
@@ -784,7 +849,8 @@ export function getPostBySlug(slug${ts ? ": string" : ""})${ts ? ": Post | undef
 }
 
 /**
- * Simulate API delay for demo purposes.
+ * Simulate API delay for demo purposes.${trace ? `
+ * When tracing is enabled, these delays create visible spans in the trace viewer.` : ""}
  */
 export async function simulateDelay(ms${ts ? ": number" : ""} = 100)${ts ? ": Promise<void>" : ""} {
   return new Promise((resolve) => setTimeout(resolve, ms));
@@ -996,9 +1062,6 @@ export default function RootLayout({ children }${ts ? ": RootLayoutProps" : ""})
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta name="description" content="A modern web application built with EreoJS" />
         <title>${projectName}</title>
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
-        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
         <link rel="stylesheet" href="/__tailwind.css" />
       </head>
       <body className="min-h-screen flex flex-col bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
@@ -1099,7 +1162,7 @@ export default function HomePage({ loaderData }${ts ? ": HomePageProps" : ""}) {
               <span className="code-window-dot bg-green-500" />
             </div>
             <div className="px-5 py-4 font-mono text-sm text-primary-300 leading-relaxed">
-              <div><span className="text-emerald-400">$</span> bunx create-ereo my-app</div>
+              <div><span className="text-emerald-400">$</span> bunx create-ereo@latest my-app</div>
               <div><span className="text-emerald-400">$</span> cd my-app</div>
               <div><span className="text-emerald-400">$</span> bun run dev</div>
             </div>
@@ -1279,7 +1342,7 @@ export async function action({ request }) {
             <span className="code-window-dot bg-green-500" />
           </div>
           <div className="px-5 py-3 font-mono text-sm text-primary-300">
-            <span className="text-emerald-400">$</span> bunx create-ereo my-app
+            <span className="text-emerald-400">$</span> bunx create-ereo@latest my-app
           </div>
         </div>
         <div className="flex flex-wrap gap-4 justify-center">
@@ -1650,7 +1713,11 @@ export default function AboutPage() {
                 <li className="flex items-center gap-2">
                   <span className="text-green-500">\u2713</span>
                   Tailwind CSS styling
-                </li>
+                </li>${trace ? `
+                <li className="flex items-center gap-2">
+                  <span className="text-green-500">\u2713</span>
+                  Full-stack tracing &amp; observability
+                </li>` : ""}
               </ul>
             </div>
 
@@ -1801,7 +1868,8 @@ This project demonstrates:
 - **Nested Layouts** - Shared layouts per route segment
 - **Islands Architecture** - Selective hydration for interactivity
 - **Error Boundaries** - Graceful error handling
-- **Tailwind CSS** - Utility-first styling
+- **Tailwind CSS** - Utility-first styling${trace ? `
+- **Full-Stack Tracing** - Request-level observability with \`@ereo/trace\`` : ""}
 
 ## Getting Started
 
@@ -1809,10 +1877,11 @@ This project demonstrates:
 # Install dependencies
 bun install
 
-# Start development server
+# Start development server${trace ? " (tracing enabled by default)" : ""}
 bun run dev
 
-# Open http://localhost:3000
+# Open http://localhost:3000${trace ? `
+# Open http://localhost:3000/__ereo/traces for the trace viewer` : ""}
 \`\`\`
 
 ## Project Structure
@@ -1849,7 +1918,17 @@ app/
 - \`bun test\` - Run tests
 - \`bun run typecheck\` - TypeScript type checking
 
-## Learn More
+${trace ? `## Tracing
+
+This project includes \`@ereo/trace\` for full-stack observability.
+
+- **CLI Reporter** \u2014 Live tree view in your terminal for every request
+- **Trace Viewer** \u2014 Open http://localhost:3000/__ereo/traces for a timeline UI
+- **11 Layers** \u2014 Traces request, routing, data, forms, signals, RPC, database, auth, islands, build, and errors
+
+For production, alias \`@ereo/trace\` to \`@ereo/trace/noop\` in your bundler for zero runtime cost (592 bytes).
+
+` : ""}## Learn More
 
 - [EreoJS Documentation](https://ereo.dev/docs)
 - [Bun Documentation](https://bun.sh/docs)
@@ -1858,11 +1937,11 @@ app/
   await Bun.write(join(projectDir, "README.md"), readme);
 }
 async function generateProject(projectDir, projectName, options) {
-  const { template, typescript } = options;
+  const { template, typescript, trace } = options;
   if (template === "minimal") {
-    await generateMinimalProject(projectDir, projectName, typescript);
+    await generateMinimalProject(projectDir, projectName, typescript, trace);
   } else {
-    await generateTailwindProject(projectDir, projectName, typescript);
+    await generateTailwindProject(projectDir, projectName, typescript, trace);
   }
 }
 async function initGit(projectDir) {
@@ -1890,6 +1969,7 @@ async function installDeps(projectDir) {
 }
 async function main() {
   printBanner();
+  await checkForUpdates();
   const args = process.argv.slice(2);
   const { projectName, options } = parseArgs(args);
   if (!projectName) {
@@ -1913,7 +1993,8 @@ async function main() {
   console.log(`  Creating \x1B[36m${projectName}\x1B[0m...
 `);
   console.log(`  Template: ${finalOptions.template}`);
-  console.log(`  TypeScript: ${finalOptions.typescript ? "Yes" : "No"}
+  console.log(`  TypeScript: ${finalOptions.typescript ? "Yes" : "No"}`);
+  console.log(`  Tracing: ${finalOptions.trace ? "Yes" : "No"}
 `);
   await generateProject(projectDir, projectName, finalOptions);
   console.log("  \x1B[32m\u2713\x1B[0m Project files created");
@@ -1933,7 +2014,8 @@ async function main() {
     ${!finalOptions.install ? `\x1B[36mbun install\x1B[0m
     ` : ""}\x1B[36mbun run dev\x1B[0m
 
-  Open http://localhost:3000 to see your app.
+  Open http://localhost:3000 to see your app.${finalOptions.trace ? `
+  Open http://localhost:3000/__ereo/traces for the trace viewer.` : ""}
 
   Happy coding!
 `);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-ereo",
-  "version": "0.1.26",
+  "version": "0.1.28",
   "license": "MIT",
   "author": "Ereo Team",
   "homepage": "https://ereo.dev",