create-ereo 0.2.6 → 0.2.8

package/README.md

@@ -81,6 +81,7 @@ bunx create-ereo@latest my-app --template minimal
 | `--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 |
 | `--help` | `-h` | Show help message |
 
 ## Examples
@@ -97,6 +98,9 @@ bunx create-ereo@latest my-app --no-install
 
 # Create without git initialization
 bunx create-ereo@latest my-app --no-git
+
+# Create with tracing enabled
+bunx create-ereo@latest my-app --trace
 ```
 
 ## Project Structure

package/dist/index.js

@@ -420,11 +420,28 @@ export default function HomePage() {
         esModuleInterop: true,
         skipLibCheck: true,
         forceConsistentCasingInFileNames: true,
-        types: ["bun-types"]
+        types: ["bun-types"],
+        baseUrl: ".",
+        paths: {
+          "~/*": ["./app/*"],
+          "@/*": ["./app/*"]
+        }
       },
       include: ["app/**/*", "*.config.ts"]
     };
     await Bun.write(join(projectDir, "tsconfig.json"), JSON.stringify(tsconfig, null, 2));
+  } else {
+    const jsconfig = {
+      compilerOptions: {
+        baseUrl: ".",
+        paths: {
+          "~/*": ["./app/*"],
+          "@/*": ["./app/*"]
+        }
+      },
+      include: ["app/**/*"]
+    };
+    await Bun.write(join(projectDir, "jsconfig.json"), JSON.stringify(jsconfig, null, 2));
   }
   await Bun.write(join(projectDir, ".gitignore"), `node_modules
 .ereo
@@ -516,13 +533,27 @@ export default defineConfig({
         skipLibCheck: true,
         forceConsistentCasingInFileNames: true,
         types: ["bun-types"],
+        baseUrl: ".",
         paths: {
-          "~/*": ["./app/*"]
+          "~/*": ["./app/*"],
+          "@/*": ["./app/*"]
         }
       },
       include: ["app/**/*", "*.config.ts"]
     };
     await Bun.write(join(projectDir, "tsconfig.json"), JSON.stringify(tsconfig, null, 2));
+  } else {
+    const jsconfig = {
+      compilerOptions: {
+        baseUrl: ".",
+        paths: {
+          "~/*": ["./app/*"],
+          "@/*": ["./app/*"]
+        }
+      },
+      include: ["app/**/*"]
+    };
+    await Bun.write(join(projectDir, "jsconfig.json"), JSON.stringify(jsconfig, null, 2));
   }
   const tailwindConfig = `
 /** @type {import('tailwindcss').Config} */
@@ -713,7 +744,7 @@ For production, alias \\\`@ereo/trace\\\` to \\\`@ereo/trace/noop\\\` \u2014 a 5
     tags: ['ereo', 'tracing', 'devtools'],
   },` : "";
   const mockData = `
-${ts ? `import type { Post } from './types';
+${ts ? `import type { Post } from '~/lib/types';
 ` : ""}
 /**
  * Mock blog posts data.
@@ -859,10 +890,6 @@ export async function simulateDelay(ms${ts ? ": number" : ""} = 100)${ts ? ": Pr
 `.trim();
   await Bun.write(join(projectDir, `app/lib/data.${ts ? "ts" : "js"}`), mockData);
   const navigation = `
-'use client';
-
-import { useState } from 'react';
-
 const navLinks = [
   { href: '/', label: 'Home' },
   { href: '/blog', label: 'Blog' },
@@ -871,8 +898,6 @@ const navLinks = [
 ];
 
 export function Navigation() {
-  const [isOpen, setIsOpen] = useState(false);
-
   return (
     <nav className="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
       <div className="max-w-6xl mx-auto px-4">
@@ -905,37 +930,26 @@ export function Navigation() {
             ))}
           </div>
 
-          {/* Mobile menu button */}
-          <button
-            onClick={() => setIsOpen(!isOpen)}
-            className="md:hidden p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800"
-            aria-label="Toggle menu"
-          >
-            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              {isOpen ? (
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-              ) : (
+          {/* Mobile Navigation - uses native <details> for JS-free toggle */}
+          <details className="md:hidden relative">
+            <summary className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer list-none [&::-webkit-details-marker]:hidden">
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
-              )}
-            </svg>
-          </button>
+              </svg>
+            </summary>
+            <div className="absolute right-0 top-full mt-2 w-48 py-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg z-50">
+              {navLinks.map((link) => (
+                <a
+                  key={link.href}
+                  href={link.href}
+                  className="block px-4 py-2 text-gray-600 dark:text-gray-300 hover:text-primary-600 hover:bg-gray-50 dark:hover:bg-gray-700"
+                >
+                  {link.label}
+                </a>
+              ))}
+            </div>
+          </details>
         </div>
-
-        {/* Mobile Navigation */}
-        {isOpen && (
-          <div className="md:hidden py-4 border-t border-gray-200 dark:border-gray-800">
-            {navLinks.map((link) => (
-              <a
-                key={link.href}
-                href={link.href}
-                className="block py-2 text-gray-600 dark:text-gray-300 hover:text-primary-600"
-                onClick={() => setIsOpen(false)}
-              >
-                {link.label}
-              </a>
-            ))}
-          </div>
-        )}
       </div>
     </nav>
   );
@@ -1077,6 +1091,21 @@ export default function RootLayout({ children }${ts ? ": RootLayoutProps" : ""})
 }
 `.trim();
   await Bun.write(join(projectDir, `app/routes/_layout.${ext}`), rootLayout);
+  const clientEntry = `
+/**
+ * Client Entry Point
+ *
+ * This file initializes the client-side runtime:
+ * - Hydrates island components marked with 'use client'
+ * - Sets up client-side navigation
+ * - Enables link prefetching
+ */
+import { initClient } from '@ereo/client';
+
+// Initialize the EreoJS client runtime
+initClient();
+`.trim();
+  await Bun.write(join(projectDir, `app/entry.client.${ext}`), clientEntry);
   const homePage = `
 import { Counter } from '~/components/Counter';
 import { getAllPosts, simulateDelay } from '~/lib/data';
@@ -1290,7 +1319,7 @@ export async function action({ request }) {
               This counter is an island \u2014 it's the only part of this page that ships JavaScript. The rest is pure HTML from the server.
             </p>
             <div className="flex justify-center">
-              <Counter initialCount={0} />
+              <Counter client:load initialCount={0} />
             </div>
           </div>
         </div>
@@ -1514,13 +1543,9 @@ export function ErrorBoundary({ error }${ts ? ": { error: Error }" : ""}) {
 `.trim();
   await Bun.write(join(projectDir, `app/routes/blog/[slug].${ext}`), blogPost);
   const contactPage = `
-'use client';
-
-import { useState } from 'react';
-
 /**
  * Action handler for the contact form.
- * Runs on the server when the form is submitted.
+ * Runs on the server when the form is submitted via POST.
  */
 export async function action({ request }${ts ? ": { request: Request }" : ""}) {
   const formData = await request.formData();
@@ -1568,13 +1593,6 @@ ${ts ? `interface ContactPageProps {
 }
 ` : ""}
 export default function ContactPage({ actionData }${ts ? ": ContactPageProps" : ""}) {
-  const [isSubmitting, setIsSubmitting] = useState(false);
-
-  const handleSubmit = async (e${ts ? ": React.FormEvent<HTMLFormElement>" : ""}) => {
-    setIsSubmitting(true);
-    // Form will be handled by the action
-  };
-
   return (
     <div className="min-h-screen py-12 px-4">
       <div className="max-w-2xl mx-auto">
@@ -1593,7 +1611,7 @@ export default function ContactPage({ actionData }${ts ? ": ContactPageProps" :
             </div>
           </div>
         ) : (
-          <form method="POST" onSubmit={handleSubmit} className="space-y-6">
+          <form method="POST" className="space-y-6">
             <div>
               <label htmlFor="name" className="block text-sm font-medium mb-2">
                 Name
@@ -1647,10 +1665,9 @@ export default function ContactPage({ actionData }${ts ? ": ContactPageProps" :
 
             <button
               type="submit"
-              disabled={isSubmitting}
-              className="btn btn-primary w-full disabled:opacity-50"
+              className="btn btn-primary w-full"
             >
-              {isSubmitting ? 'Sending...' : 'Send Message'}
+              Send Message
             </button>
           </form>
         )}
@@ -2051,13 +2068,27 @@ export default defineConfig({
         skipLibCheck: true,
         forceConsistentCasingInFileNames: true,
         types: ["bun-types"],
+        baseUrl: ".",
         paths: {
-          "~/*": ["./app/*"]
+          "~/*": ["./app/*"],
+          "@/*": ["./app/*"]
         }
       },
       include: ["app/**/*", "*.config.ts"]
     };
     await Bun.write(join(projectDir, "tsconfig.json"), JSON.stringify(tsconfig, null, 2));
+  } else {
+    const jsconfig = {
+      compilerOptions: {
+        baseUrl: ".",
+        paths: {
+          "~/*": ["./app/*"],
+          "@/*": ["./app/*"]
+        }
+      },
+      include: ["app/**/*"]
+    };
+    await Bun.write(join(projectDir, "jsconfig.json"), JSON.stringify(jsconfig, null, 2));
   }
   const tailwindConfig = `
 /** @type {import('tailwindcss').Config} */
@@ -2341,7 +2372,7 @@ export default db;
  * Shared types for the application.
  */
 
-export type { User, Task, TaskStats } from './db';
+export type { User, Task, TaskStats } from '~/lib/db';
 
 export interface ActionResult<T = unknown> {
   success: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-ereo",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "license": "MIT",
   "author": "Ereo Team",
   "homepage": "https://ereojs.github.io/ereoJS",