@emberkit/cli 0.5.1 → 0.6.0

package/dist/templates/index.js

@@ -1,263 +1,3 @@
-export const routeTemplate = `import type { RouteComponent } from '@emberkit/core';
-
-const {{name}}: RouteComponent = () => {
-  return (
-    <div>
-      <h1>{{name}}</h1>
-    </div>
-  );
-};
-
-export default {{name}};
-`;
-export const componentTemplate = `interface {{name}}Props {
-  className?: string;
-}
-
-const {{name}} = ({ className = '' }: {{name}}Props) => {
-  return (
-    <div className={className}>
-      {{name}} component
-    </div>
-  );
-};
-
-export default {{name}};
-`;
-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;
-`;
-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;
-`;
-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>;
-};
-`;
-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>;
-};
-`;
-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>;
-};
-`;
-export const configTemplate = `import { defineConfig } from '@emberkit/core';
-
-export default defineConfig({
-  mode: 'hybrid',
-  server: {
-    port: 3000,
-  },
-  build: {
-    outDir: 'dist',
-    target: 'esnext',
-  },
-});
-`;
-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);
-  }
-}
-`;
-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 {};
-`;
-export const signalTemplate = `import { signal, computed, effect } from '@emberkit/core';
-
-// Writable signal
-const count = signal(0);
-
-// Computed value
-const doubled = computed(() => count.value * 2);
-
-// Side effect
-effect(() => {
-  console.log('Count changed to:', count.value);
-});
-
-// Update
-count.value++;
-
-// Batch updates
-import { batch } from '@emberkit/core';
-
-batch(() => {
-  count.value = 10;
-});
-
-export { count, doubled };
-`;
-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 };
-`;
-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;
-`;
-export function getTemplate(type) {
-    const templates = {
-        route: routeTemplate,
-        component: componentTemplate,
-        layout: layoutTemplate,
-        error: errorBoundaryTemplate,
-        loader: loaderTemplate,
-        action: actionTemplate,
-        api: apiRouteTemplate,
-        config: configTemplate,
-        index: indexTemplate,
-        signal: signalTemplate,
-        context: contextTemplate,
-        form: formTemplate,
-    };
-    return templates[type] ?? routeTemplate;
-}
 export function formatTemplate(template, params) {
     let result = template;
     for (const [key, value] of Object.entries(params)) {

package/dist/templates/layout.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.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.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/minimal/minimal.js

@@ -0,0 +1,89 @@
+export const minimalTemplate = {
+    "package.json": `{
+  "name": "{{name}}",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "emberkit dev",
+    "build": "emberkit build",
+    "preview": "emberkit preview"
+  },
+  "dependencies": {
+    "@emberkit/core": "^0.2.4"
+  },
+  "devDependencies": {
+    "@emberkit/cli": "^0.2.4",
+    "typescript": "^5.7.0",
+    "vite": "^6.0.0"
+  }
+}`,
+    "tsconfig.json": `{
+  "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"]
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}`,
+    "vite.config.ts": `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',
+  },
+});`,
+    "index.html": `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{name}}</title>
+</head>
+<body id="app">
+  <script type="module" src="/src/index.tsx"></script>
+</body>
+</html>`,
+    "src/index.tsx": `import { render } from '@emberkit/core';
+import { routes } from 'virtual:emberkit-routes';
+import App from './routes/index';
+
+const root = document.getElementById('app');
+
+if (root) {
+  try {
+    render(App, root, { routes });
+  } catch (error) {
+    console.error('[entry] Render error:', error);
+  }
+}`,
+    "src/routes/index.tsx": `import type { RouteComponent } from '@emberkit/core';
+
+const Home: RouteComponent = () => {
+  return (
+    <div style={{ fontFamily: 'system-ui, sans-serif', maxWidth: '600px', margin: '2rem auto', padding: '0 1rem' }}>
+      <h1>{{name}}</h1>
+      <p>Built with EmberKit</p>
+    </div>
+  );
+};
+
+export default Home;`,
+};

package/dist/templates/projects/starter.js

@@ -0,0 +1,286 @@
+export const starterFiles = {
+    "package.json": `{
+  "name": "{{name}}",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "emberkit dev",
+    "build": "emberkit build",
+    "preview": "emberkit preview"
+  },
+  "dependencies": {
+    "@emberkit/core": "^0.2.4"
+  },
+  "devDependencies": {
+    "@emberkit/cli": "^0.2.4",
+    "typescript": "^5.7.0",
+    "vite": "^6.0.0",
+    "tailwindcss": "^4.0.0",
+    "@tailwindcss/vite": "^4.0.0"
+  }
+}`,
+    "tsconfig.json": `{
+  "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"],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}`,
+    "vite.config.ts": `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',
+  },
+});`,
+    "index.html": `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{name}}</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&display=swap" rel="stylesheet">
+</head>
+<body id="app">
+  <script type="module" src="/src/index.tsx"></script>
+</body>
+</html>`,
+    "src/index.tsx": `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);
+  }
+}`,
+    "src/styles.css": `@import "tailwindcss";
+
+@theme {
+  --color-ember-50: #fff7ed;
+  --color-ember-100: #ffedd5;
+  --color-ember-200: #fed7aa;
+  --color-ember-300: #fdba74;
+  --color-ember-400: #fb923c;
+  --color-ember-500: #f97316;
+  --color-ember-600: #ea580c;
+  --color-ember-700: #c2410c;
+  --color-ember-800: #9a3412;
+  --color-ember-900: #7c2d12;
+  --font-sans: 'Inter', system-ui, sans-serif;
+}
+
+@keyframes float {
+  0%, 100% { transform: translateY(0px); }
+  50% { transform: translateY(-20px); }
+}
+
+@keyframes fade-in-up {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes pulse-glow {
+  0%, 100% { opacity: 0.4; transform: scale(1); }
+  50% { opacity: 0.6; transform: scale(1.05); }
+}
+
+body {
+  @apply bg-[#0b0f19] text-slate-200 font-sans min-h-screen;
+}
+
+a {
+  @apply text-inherit no-underline transition-colors;
+}
+
+.animate-float { animation: float 6s ease-in-out infinite; }
+.animate-fade-in-up { animation: fade-in-up 0.6s ease-out forwards; }
+.animate-pulse-glow { animation: pulse-glow 4s ease-in-out infinite; }`,
+    "src/routes/_layout.tsx": `import type { RouteComponent } from '@emberkit/core';
+import { Head } from '@emberkit/core';
+
+const Layout: RouteComponent = ({ children }) => {
+  return (
+    <>
+      <Head>
+        <title>{{name}}</title>
+        <meta name="description" content="Built with EmberKit" />
+      </Head>
+      <div className="relative min-h-screen flex flex-col">
+        {/* Ambient background */}
+        <div className="pointer-events-none fixed inset-0 overflow-hidden">
+          <div className="absolute -top-40 -right-40 w-96 h-96 rounded-full bg-ember-500/10 blur-[120px] animate-pulse-glow" />
+          <div className="absolute -bottom-40 -left-40 w-96 h-96 rounded-full bg-amber-500/5 blur-[120px] animate-pulse-glow" style={{ animationDelay: '2s' }} />
+        </div>
+
+        <header className="relative z-50 border-b border-slate-800/50 bg-[#0b0f19]/80 backdrop-blur-xl sticky top-0">
+          <div className="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
+            <a href="/" className="flex items-center gap-2 group">
+              <span className="text-2xl animate-float">&#128293;</span>
+              <span className="text-xl font-bold bg-gradient-to-r from-ember-400 to-ember-500 bg-clip-text text-transparent">
+                {{name}}
+              </span>
+            </a>
+            <nav className="flex items-center gap-6">
+              <a href="/" className="text-slate-400 hover:text-ember-500 font-medium transition-colors">Home</a>
+              <a href="/about" className="text-slate-400 hover:text-ember-500 font-medium transition-colors">About</a>
+              <a href="https://emberkit.dev/docs" target="_blank" className="text-slate-400 hover:text-ember-500 font-medium transition-colors">
+                Docs <span className="text-xs">&#8599;</span>
+              </a>
+            </nav>
+          </div>
+        </header>
+        <main className="relative z-10 flex-1">{children}</main>
+        <footer className="relative z-10 border-t border-slate-800/50 py-8 text-center text-sm text-slate-500">
+          <p>Built with <a href="https://emberkit.dev" className="text-ember-500 hover:underline">EmberKit</a></p>
+        </footer>
+      </div>
+    </>
+  );
+};
+
+export default Layout;`,
+    "src/routes/index.tsx": `import type { RouteComponent } from '@emberkit/core';
+import { signal } from '@emberkit/core';
+
+const HomePage: RouteComponent = () => {
+  const count = signal(0);
+
+  return (
+    <div className="relative max-w-6xl mx-auto px-6 py-16 space-y-24">
+      {/* Hero Section */}
+      <section className="relative text-center space-y-6 animate-fade-in-down">
+        <div className="pointer-events-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-[400px] w-[400px] rounded-full bg-ember-500/10 blur-[120px] animate-pulse-glow" />
+        <h1 className="relative z-10 text-5xl md:text-6xl font-extrabold tracking-tight">
+          Welcome to <span className="bg-gradient-to-r from-ember-400 via-ember-500 to-amber-500 bg-clip-text text-transparent">{{name}}</span>
+        </h1>
+        <p className="relative z-10 text-xl text-slate-400 max-w-2xl mx-auto">
+          A minimalist TypeScript-first JSX framework built for speed and simplicity.
+          Get started in seconds with hot module replacement and zero-config routing.
+        </p>
+        <div className="relative z-10 flex gap-4 justify-center pt-4">
+          <a href="/about" className="px-6 py-3 bg-ember-500 hover:bg-ember-600 text-white font-semibold rounded-lg transition-all hover:scale-105 shadow-lg shadow-ember-500/20">
+            Learn More
+          </a>
+          <a href="https://emberkit.dev/docs" target="_blank" className="px-6 py-3 border border-slate-700 hover:border-ember-500 text-slate-300 hover:text-ember-500 font-semibold rounded-lg transition-all">
+            Read Docs &#8594;
+          </a>
+        </div>
+      </section>
+
+      {/* Features Grid */}
+      <section className="grid md:grid-cols-3 gap-6">
+        {[
+          { icon: '&#9889;', title: 'Lightning Fast', desc: 'Sub-10KB runtime with tree-shakeable architecture' },
+          { icon: '&#128303;', title: 'TypeScript First', desc: 'Full type safety with intelligent autocomplete' },
+          { icon: '&#128726;', title: 'File-Based Routing', desc: 'Routes automatically created from your file structure' },
+        ].map((f, i) => (
+          <div key={f.title} className="p-6 rounded-xl border border-slate-800 bg-slate-800/30 hover:border-ember-500/50 transition-all duration-300 hover:-translate-y-1 group animate-fade-in-up" style={{ animationDelay: \`\[PHONE REDACTED]ms\` }}>
+            <div className="text-3xl mb-4 group-hover:scale-110 transition-transform">{f.icon}</div>
+            <h3 className="text-lg font-semibold mb-2">{f.title}</h3>
+            <p className="text-slate-400">{f.desc}</p>
+          </div>
+        ))}
+      </section>
+
+      {/* Counter Demo */}
+      <section className="relative p-8 rounded-3xl bg-gradient-to-br from-slate-800/50 to-slate-900/50 border border-slate-700/50 text-center backdrop-blur-sm">
+        <h2 className="text-2xl font-bold mb-6">Interactive Counter Demo</h2>
+        <div className="flex items-center justify-center gap-6">
+          <button
+            className="w-12 h-12 rounded-lg bg-slate-800 border border-slate-700 hover:bg-ember-500 hover:border-ember-500 text-ember-500 hover:text-white text-xl transition-all hover:scale-110"
+            onClick={() => count.value--}
+          >
+            &#8722;
+          </button>
+          <span className="text-5xl font-bold tabular-nums min-w-[80px] bg-clip-text text-transparent bg-gradient-to-b from-white to-slate-400">{count}</span>
+          <button
+            className="w-12 h-12 rounded-lg bg-slate-800 border border-slate-700 hover:bg-ember-500 hover:border-ember-500 text-ember-500 hover:text-white text-xl transition-all hover:scale-110"
+            onClick={() => count.value++}
+          >
+            +
+          </button>
+        </div>
+        <p className="text-slate-500 mt-4 text-sm">Try clicking the buttons!</p>
+      </section>
+
+      <section className="text-center py-8">
+        <div className="inline-flex items-center gap-3 px-4 py-2 rounded-full bg-ember-500/10 border border-ember-500/20 text-ember-400">
+          <span className="w-2 h-2 rounded-full bg-ember-500 animate-pulse"></span>
+          <span className="text-sm font-medium">Ready to build something amazing?</span>
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default HomePage;`,
+    "src/routes/about.tsx": `import type { RouteComponent } from '@emberkit/core';
+import { Head } from '@emberkit/core';
+
+const AboutPage: RouteComponent = () => {
+  return (
+    <div className="max-w-3xl mx-auto px-6 py-16 space-y-12 animate-fade-in-up">
+      <Head>
+        <title>About - {{name}}</title>
+      </Head>
+      <div className="text-center">
+        <h1 className="text-4xl font-bold mb-6">About {{name}}</h1>
+        <p className="text-slate-400 text-lg leading-relaxed max-w-2xl mx-auto">
+          EmberKit is a minimalist TypeScript-first JSX framework built for speed and simplicity.
+          It combines the best of modern frontend development with a lightweight runtime.
+        </p>
+      </div>
+      <div className="grid sm:grid-cols-3 gap-4">
+        {[
+          { label: 'SPA & SSR', desc: 'Works in both modes' },
+          { label: 'Zero Config', desc: 'Sensible defaults' },
+          { label: 'HMR', desc: 'Hot module replacement' },
+        ].map((f) => (
+          <div key={f.label} className="p-4 rounded-xl bg-slate-800/30 border border-slate-800 hover:border-ember-500/50 transition-all hover:-translate-y-1 group">
+            <span className="text-ember-500 text-sm font-semibold">{f.label}</span>
+            <p className="text-slate-500 text-sm mt-1">{f.desc}</p>
+          </div>
+        ))}
+      </div>
+      <div className="text-center">
+        <a href="/" className="inline-flex items-center gap-2 text-ember-500 hover:text-ember-400 font-medium transition-colors">
+          &#8592; Back to Home
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default AboutPage;`,
+};