@emberkit/cli 0.6.1-alpha.8 → 0.6.1

package/dist/cli-package-version.js

@@ -0,0 +1,10 @@
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+/** `packages/cli/package.json` version (works when running compiled output in `dist/`). */
+export function getCliPackageVersion() {
+    const here = dirname(fileURLToPath(import.meta.url));
+    const pkgPath = join(here, "../package.json");
+    const raw = readFileSync(pkgPath, "utf8");
+    return JSON.parse(raw).version;
+}

package/dist/cli.js

@@ -1,4 +1,5 @@
 import inquirer from "inquirer";
+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";
@@ -29,7 +30,7 @@ export async function runCLI(args) {
             break;
         case "--version":
         case "-v":
-            console.log("EmberKit CLI v0.6.0");
+            console.log(`EmberKit CLI v${getCliPackageVersion()}`);
             break;
         case "--help":
         case "-h":
@@ -43,7 +44,7 @@ export async function runCLI(args) {
 }
 function showHelp() {
     console.log(`
-🔥 EmberKit CLI v0.6.0
+🔥 EmberKit CLI v${getCliPackageVersion()}
 
 Usage: emberkit <command> [options]
 

package/dist/emberkit-package-versions.js

@@ -0,0 +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.2.6",
+    ui: "^0.3.0",
+    icons: "^0.2.3",
+    cli: "^0.6.1",
+    edge: "^0.2.3",
+    tsconfig: "^0.2.1",
+};

package/dist/templates/project-templates/_shared/base.js

@@ -2,13 +2,16 @@
  * Shared builders for project template boilerplate.
  * Each template composes from these instead of duplicating identical config files.
  */
+import { EMBERKIT_PACKAGE_VERSIONS as V } from "../../../emberkit-package-versions.js";
 export function buildPackageJson(options = {}) {
     const { hasTailwind = false, hasUI = false } = options;
-    const deps = { "@emberkit/core": "^0.2.4" };
-    if (hasUI)
-        deps["@emberkit/ui"] = "^0.2.3";
+    const deps = { "@emberkit/core": V.core };
+    if (hasUI) {
+        deps["@emberkit/ui"] = V.ui;
+        deps["@emberkit/icons"] = V.icons;
+    }
     const devDeps = {
-        "@emberkit/cli": "^0.2.4",
+        "@emberkit/cli": V.cli,
         typescript: "^5.7.0",
         vite: "^6.0.0",
     };

package/dist/templates/project-templates/blog/blog.js

@@ -137,7 +137,7 @@ const HomePage: RouteComponent = () => {
       <div className="space-y-10">
         {posts.map((post) => (
           <article key={post.slug} className="group">
-            <a href={\`/posts/\${post.slug}\`} className="block">
+            <a href={post.slug} className="block">
               <h2 className="text-xl font-semibold font-serif mb-2 group-hover:text-blue-600 transition-colors">
                 {post.title}
               </h2>
@@ -156,7 +156,7 @@ const HomePage: RouteComponent = () => {
 };
 
 export default HomePage;`,
-    "src/routes/[slug].tsx": `import type { RouteComponent, RouteParams } from '@emberkit/core';
+    "src/routes/[slug].tsx": `import type { RouteParams } from '@emberkit/core';
 import { Head } from '@emberkit/core';
 
 interface PostData {
@@ -190,11 +190,11 @@ const posts: Record<string, PostData> = {
     content: \`
       <p>Signals are the reactive primitive at the core of EmberKit.</p>
       <h2>Creating Signals</h2>
-      <pre><code>const count = signal(0);</code></pre>
+      <pre><code>const [count, setCount] = createSignal(0);</code></pre>
       <h2>Computed Values</h2>
-      <pre><code>const doubled = computed(() => count.value * 2);</code></pre>
+      <pre><code>const doubled = createMemo(() => count() * 2);</code></pre>
       <h2>Side Effects</h2>
-      <pre><code>effect(() => console.log(count.value));</code></pre>
+      <pre><code>createEffect(() => console.log(count()));</code></pre>
     \`,
   },
   'file-based-routing': {
@@ -212,11 +212,7 @@ const posts: Record<string, PostData> = {
   },
 };
 
-interface Params {
-  slug: string;
-}
-
-const PostPage: RouteComponent<Params> = ({ params }: RouteParams<Params>) => {
+export default function PostPage({ params }: RouteParams<{ slug: string }>) {
   const post = posts[params.slug];
 
   if (!post) {
@@ -250,9 +246,7 @@ const PostPage: RouteComponent<Params> = ({ params }: RouteParams<Params>) => {
       </article>
     </>
   );
-};
-
-export default PostPage;`,
+}`,
     "src/routes/about.tsx": `import type { RouteComponent } from '@emberkit/core';
 import { Head } from '@emberkit/core';
 

package/dist/templates/project-templates/dashboard/dashboard.js

@@ -28,11 +28,11 @@ body {
   @apply bg-gray-50 text-gray-900 font-sans;
 }`,
     "src/routes/_layout.tsx": `import type { RouteComponent } from '@emberkit/core';
-import { signal } from '@emberkit/core';
+import { createSignal } from '@emberkit/core';
 import { Sidebar, Header } from '@emberkit/ui';
 
 const Layout: RouteComponent = ({ children }) => {
-  const sidebarOpen = signal(true);
+  const [sidebarOpen, setSidebarOpen] = createSignal(true);
 
   const sidebarItems = [
     { label: 'Dashboard', href: '/dashboard', icon: 'grid' },
@@ -47,15 +47,15 @@ const Layout: RouteComponent = ({ children }) => {
       <Sidebar
         logo={<span className="font-bold text-lg">&#9889; {{name}}</span>}
         items={sidebarItems}
-        collapsed={!sidebarOpen.value}
-        onToggle={() => { sidebarOpen.value = !sidebarOpen.value; }}
+        collapsed={!sidebarOpen()}
+        onToggle={() => { setSidebarOpen(!sidebarOpen()); }}
         className="w-64"
       />
       <div className="flex-1 flex flex-col min-w-0">
         <Header
           title="Dashboard"
           user={{ name: 'User', avatar: '' }}
-          onMenuClick={() => { sidebarOpen.value = !sidebarOpen.value; }}
+          onMenuClick={() => { setSidebarOpen(!sidebarOpen()); }}
         />
         <main className="flex-1 p-6 overflow-auto">
           {children}
@@ -162,7 +162,7 @@ const DashboardPage: RouteComponent = () => {
 export default DashboardPage;`,
     "src/routes/users.tsx": `import type { RouteComponent } from '@emberkit/core';
 import { Card, Badge, Button, Input } from '@emberkit/ui';
-import { signal } from '@emberkit/core';
+import { createSignal } from '@emberkit/core';
 
 interface User {
   id: number;
@@ -182,12 +182,12 @@ const users: User[] = [
 ];
 
 const UsersPage: RouteComponent = () => {
-  const search = signal('');
+  const [search, setSearch] = createSignal('');
 
   const filteredUsers = users.filter(
     (u) =>
-      u.name.toLowerCase().includes(search.value.toLowerCase()) ||
-      u.email.toLowerCase().includes(search.value.toLowerCase())
+      u.name.toLowerCase().includes(search().toLowerCase()) ||
+      u.email.toLowerCase().includes(search().toLowerCase())
   );
 
   const statusVariant = (status: User['status']) => {
@@ -212,8 +212,8 @@ const UsersPage: RouteComponent = () => {
         <div className="mb-4">
           <Input
             placeholder="Search users..."
-            value={search.value}
-            onInput={(e) => { search.value = e.currentTarget.value; }}
+            value={search()}
+            onInput={(e) => { setSearch(e.currentTarget.value); }}
             className="max-w-sm"
           />
         </div>
@@ -260,17 +260,17 @@ const UsersPage: RouteComponent = () => {
 export default UsersPage;`,
     "src/routes/settings.tsx": `import type { RouteComponent } from '@emberkit/core';
 import { Card, Input, Button, Alert } from '@emberkit/ui';
-import { signal } from '@emberkit/core';
+import { createSignal } from '@emberkit/core';
 
 const SettingsPage: RouteComponent = () => {
-  const name = signal('John Doe');
-  const email = signal('john@example.com');
-  const saved = signal(false);
+  const [name, setName] = createSignal('John Doe');
+  const [email, setEmail] = createSignal('john@example.com');
+  const [saved, setSaved] = createSignal(false);
 
   const handleSave = (e: Event) => {
     e.preventDefault();
-    saved.value = true;
-    setTimeout(() => { saved.value = false; }, 3000);
+    setSaved(true);
+    setTimeout(() => { setSaved(false); }, 3000);
   };
 
   return (
@@ -280,7 +280,7 @@ const SettingsPage: RouteComponent = () => {
         <p className="text-gray-600 mt-1">Manage your account preferences.</p>
       </div>
 
-      {saved.value && (
+      {saved() && (
         <Alert variant="success">Settings saved successfully!</Alert>
       )}
 
@@ -289,14 +289,14 @@ const SettingsPage: RouteComponent = () => {
         <form onSubmit={handleSave} className="space-y-4">
           <Input
             label="Full Name"
-            value={name.value}
-            onInput={(e) => { name.value = e.currentTarget.value; }}
+            value={name()}
+            onInput={(e) => { setName(e.currentTarget.value); }}
           />
           <Input
             label="Email"
             type="email"
-            value={email.value}
-            onInput={(e) => { email.value = e.currentTarget.value; }}
+            value={email()}
+            onInput={(e) => { setEmail(e.currentTarget.value); }}
           />
           <div className="flex justify-end">
             <Button variant="primary" type="submit">Save Changes</Button>

package/dist/templates/project-templates/saas/saas.js

@@ -103,11 +103,11 @@ const Layout: RouteComponent = ({ children }) => {
 
 export default Layout;`,
     "src/routes/index.tsx": `import type { RouteComponent } from '@emberkit/core';
-import { signal } from '@emberkit/core';
+import { createSignal } from '@emberkit/core';
 import { Button, Card, Badge } from '@emberkit/ui';
 
 const HomePage: RouteComponent = () => {
-  const annual = signal(false);
+  const [annual, setAnnual] = createSignal(false);
 
   const features = [
     { icon: '⚡', title: 'Lightning Fast', desc: 'Sub-10KB runtime with tree-shakeable architecture' },
@@ -121,8 +121,8 @@ const HomePage: RouteComponent = () => {
   const plans = [
     {
       name: 'Starter',
-      price: annual.value ? '$0' : '$0',
-      period: annual.value ? '/year' : '/month',
+      price: annual() ? '$0' : '$0',
+      period: annual() ? '/year' : '/month',
       desc: 'Perfect for side projects',
       features: ['1 user', '5 projects', '1GB storage', 'Community support'],
       cta: 'Get Started Free',
@@ -130,8 +130,8 @@ const HomePage: RouteComponent = () => {
     },
     {
       name: 'Pro',
-      price: annual.value ? '$199' : '$19',
-      period: annual.value ? '/year' : '/month',
+      price: annual() ? '$199' : '$19',
+      period: annual() ? '/year' : '/month',
       desc: 'For growing teams',
       features: ['10 users', 'Unlimited projects', '50GB storage', 'Priority support', 'Analytics', 'API access'],
       cta: 'Start Free Trial',
@@ -211,14 +211,14 @@ const HomePage: RouteComponent = () => {
             <p className="text-lg text-slate-600 mb-8">Choose the plan that works for your team</p>
             <div className="inline-flex items-center gap-3 p-1 bg-white rounded-lg border border-slate-200">
               <button
-                className={\`px-4 py-2 text-sm font-medium rounded-md transition-colors \${!annual.value ? 'bg-brand-600 text-white' : 'text-slate-600'}\`}
-                onClick={() => { annual.value = false; }}
+                className={\`px-4 py-2 text-sm font-medium rounded-md transition-colors \${!annual() ? 'bg-brand-600 text-white' : 'text-slate-600'}\`}
+                onClick={() => { setAnnual(false); }}
               >
                 Monthly
               </button>
               <button
-                className={\`px-4 py-2 text-sm font-medium rounded-md transition-colors \${annual.value ? 'bg-brand-600 text-white' : 'text-slate-600'}\`}
-                onClick={() => { annual.value = true; }}
+                className={\`px-4 py-2 text-sm font-medium rounded-md transition-colors \${annual() ? 'bg-brand-600 text-white' : 'text-slate-600'}\`}
+                onClick={() => { setAnnual(true); }}
               >
                 Annual <span className="text-brand-600 ml-1 font-semibold">-20%</span>
               </button>
@@ -280,19 +280,19 @@ export default HomePage;`,
     "src/routes/login.tsx": `import type { RouteComponent } from '@emberkit/core';
 import { Head } from '@emberkit/core';
 import { Button, Input, Card } from '@emberkit/ui';
-import { signal } from '@emberkit/core';
+import { createSignal } from '@emberkit/core';
 
 const LoginPage: RouteComponent = () => {
-  const email = signal('');
-  const password = signal('');
-  const error = signal<string | null>(null);
+  const [email, setEmail] = createSignal('');
+  const [password, setPassword] = createSignal('');
+  const [error, setError] = createSignal<string | null>(null);
 
   const handleSubmit = (e: Event) => {
     e.preventDefault();
-    error.value = null;
+    setError(null);
 
-    if (!email.value || !password.value) {
-      error.value = 'Please fill in all fields';
+    if (!email() || !password()) {
+      setError('Please fill in all fields');
       return;
     }
 
@@ -315,18 +315,18 @@ const LoginPage: RouteComponent = () => {
               label="Email"
               type="email"
               placeholder="you@example.com"
-              value={email.value}
-              onInput={(e) => { email.value = e.currentTarget.value; }}
+              value={email()}
+              onInput={(e) => { setEmail(e.currentTarget.value); }}
             />
             <Input
               label="Password"
               type="password"
               placeholder="&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;"
-              value={password.value}
-              onInput={(e) => { password.value = e.currentTarget.value; }}
+              value={password()}
+              onInput={(e) => { setPassword(e.currentTarget.value); }}
             />
-            {error.value && (
-              <p className="text-red-500 text-sm">{error.value}</p>
+            {error() && (
+              <p className="text-red-500 text-sm">{error()}</p>
             )}
             <div className="flex items-center justify-between text-sm">
               <label className="flex items-center gap-2">
@@ -350,20 +350,20 @@ export default LoginPage;`,
     "src/routes/signup.tsx": `import type { RouteComponent } from '@emberkit/core';
 import { Head } from '@emberkit/core';
 import { Button, Input, Card } from '@emberkit/ui';
-import { signal } from '@emberkit/core';
+import { createSignal } from '@emberkit/core';
 
 const SignupPage: RouteComponent = () => {
-  const name = signal('');
-  const email = signal('');
-  const password = signal('');
-  const error = signal<string | null>(null);
+  const [name, setName] = createSignal('');
+  const [email, setEmail] = createSignal('');
+  const [password, setPassword] = createSignal('');
+  const [error, setError] = createSignal<string | null>(null);
 
   const handleSubmit = (e: Event) => {
     e.preventDefault();
-    error.value = null;
+    setError(null);
 
-    if (!name.value || !email.value || !password.value) {
-      error.value = 'Please fill in all fields';
+    if (!name() || !email() || !password()) {
+      setError('Please fill in all fields');
       return;
     }
 
@@ -385,25 +385,25 @@ const SignupPage: RouteComponent = () => {
             <Input
               label="Full Name"
               placeholder="John Doe"
-              value={name.value}
-              onInput={(e) => { name.value = e.currentTarget.value; }}
+              value={name()}
+              onInput={(e) => { setName(e.currentTarget.value); }}
             />
             <Input
               label="Email"
               type="email"
               placeholder="you@example.com"
-              value={email.value}
-              onInput={(e) => { email.value = e.currentTarget.value; }}
+              value={email()}
+              onInput={(e) => { setEmail(e.currentTarget.value); }}
             />
             <Input
               label="Password"
               type="password"
               placeholder="8+ characters"
-              value={password.value}
-              onInput={(e) => { password.value = e.currentTarget.value; }}
+              value={password()}
+              onInput={(e) => { setPassword(e.currentTarget.value); }}
             />
-            {error.value && (
-              <p className="text-red-500 text-sm">{error.value}</p>
+            {error() && (
+              <p className="text-red-500 text-sm">{error()}</p>
             )}
             <p className="text-xs text-slate-500">
               By signing up, you agree to our {' '}

package/dist/templates/project-templates/starter-kit/with-ui.js

@@ -103,7 +103,7 @@ const Layout: RouteComponent = ({ children }) => {
 
 export default Layout;`,
     "src/routes/index.tsx": `import type { RouteComponent } from '@emberkit/core';
-import { signal } from '@emberkit/core';
+import { createSignal } from '@emberkit/core';
 import {
   Button,
   Card,
@@ -116,7 +116,7 @@ import {
 } from '@emberkit/ui';
 
 const HomePage: RouteComponent = () => {
-  const activeTab = signal('features');
+  const [activeTab, setActiveTab] = createSignal('features');
 
   const features = [
     { icon: '⚡', title: 'Lightning Fast', desc: 'Sub-10KB runtime with tree-shakeable architecture' },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@emberkit/cli",
-  "version": "0.6.1-alpha.8",
+  "version": "0.6.1",
   "type": "module",
   "private": false,
   "description": "CLI tool for EmberKit projects",
@@ -40,7 +40,11 @@
     "inquirer": "^9.2.0"
   },
   "devDependencies": {
-    "@types/inquirer": "^9.0.3"
+    "@eslint/js": "^10.0.1",
+    "@types/inquirer": "^9.0.3",
+    "eslint": "^10.0.0",
+    "eslint-plugin-perfectionist": "^5.9.0",
+    "typescript-eslint": "^8.59.3"
   },
   "scripts": {
     "build": "tsc",