create-avalon 0.1.9 → 0.1.11

package/README.md

@@ -1,59 +1,59 @@
-# create-avalon
-
-Scaffold a new [Avalon](https://useavalon.dev) project in seconds.
-
-## Usage
-
-```bash
-npm create avalon@latest
-```
-
-Or with other package managers:
-
-```bash
-pnpm create avalon@latest
-yarn create avalon
-bun create avalon
-```
-
-The CLI walks you through:
-
-- Project name and directory
-- Framework selection (React, Preact, Vue, Svelte, Solid, Lit, Qwik — or multiple)
-- Styling approach (CSS Modules, Tailwind, vanilla CSS)
-- Optional features (API routes, middleware, layouts, MDX)
-- Package manager preference
-
-## What you get
-
-A ready-to-run Avalon project with file-system routing, islands architecture, and zero JavaScript by default.
-
-```
-my-project/
-├── app/
-│   ├── modules/
-│   │   └── home/
-│   │       ├── pages/          # File-system routes
-│   │       ├── components/     # Interactive components
-│   │       └── layouts/        # Module layouts
-│   └── shared/
-│       ├── layouts/            # Root layout
-│       ├── components/         # Shared components
-│       └── styles/             # Global styles & tokens
-├── middleware/                  # Server middleware
-├── routes/
-│   └── api/                    # API routes
-├── server/                     # Server config & env
-├── public/                     # Static assets
-├── vite.config.ts
-└── package.json
-```
-
-## Links
-
-- [Documentation](https://useavalon.dev/docs/introduction)
-- [GitHub](https://github.com/useAvalon/Avalon)
-
-## License
-
-MIT
+# create-avalon
+
+Scaffold a new [Avalon](https://useavalon.dev) project in seconds.
+
+## Usage
+
+```bash
+npm create avalon@latest
+```
+
+Or with other package managers:
+
+```bash
+pnpm create avalon@latest
+yarn create avalon
+bun create avalon
+```
+
+The CLI walks you through:
+
+- Project name and directory
+- Framework selection (React, Preact, Vue, Svelte, Solid, Lit, Qwik — or multiple)
+- Styling approach (CSS Modules, Tailwind, vanilla CSS)
+- Optional features (API routes, middleware, layouts, MDX)
+- Package manager preference
+
+## What you get
+
+A ready-to-run Avalon project with file-system routing, islands architecture, and zero JavaScript by default.
+
+```
+my-project/
+├── app/
+│   ├── modules/
+│   │   └── home/
+│   │       ├── pages/          # File-system routes
+│   │       ├── components/     # Interactive components
+│   │       └── layouts/        # Module layouts
+│   └── shared/
+│       ├── layouts/            # Root layout
+│       ├── components/         # Shared components
+│       └── styles/             # Global styles & tokens
+├── middleware/                  # Server middleware
+├── routes/
+│   └── api/                    # API routes
+├── server/                     # Server config & env
+├── public/                     # Static assets
+├── vite.config.ts
+└── package.json
+```
+
+## Links
+
+- [Documentation](https://useavalon.dev/docs/introduction)
+- [GitHub](https://github.com/useAvalon/Avalon)
+
+## License
+
+MIT

package/dist/cli.js

@@ -1156,7 +1156,12 @@ async function collectProjectConfig(initialName) {
   const pluginsResult = await Lt2({
     message: "Which plugins would you like to include? (use space to toggle, enter to confirm)",
     options: [
-      { value: "agent-optimization", label: "agent-optimization", hint: "LLM/AI optimization" }
+      { value: "agent-optimization", label: "agent-optimization", hint: "LLM/AI optimization" },
+      {
+        value: "syntax-highlighting",
+        label: "syntax-highlighting",
+        hint: "Code block highlighting for MDX (rehype-highlight)"
+      }
     ],
     required: false
   });
@@ -1187,7 +1192,7 @@ async function collectProjectConfig(initialName) {
 
 // src/scaffold.ts
 import { mkdir, writeFile } from "node:fs/promises";
-import { join } from "node:path";
+import { join, dirname } from "node:path";
 
 // src/types.ts
 var INTEGRATION_PACKAGES = {
@@ -1223,6 +1228,9 @@ function generatePackageJson(config) {
   if (config.plugins.includes("agent-optimization")) {
     dependencies["@useavalon/agent-optimization"] = "latest";
   }
+  if (config.plugins.includes("syntax-highlighting")) {
+    dependencies["rehype-highlight"] = "latest";
+  }
   switch (config.middleware) {
     case "hono":
       dependencies["hono"] = "latest";
@@ -1246,6 +1254,8 @@ function generatePackageJson(config) {
       devDependencies["tailwindcss"] = "latest";
       devDependencies["@tailwindcss/vite"] = "latest";
       dependencies["@shadcn/ui"] = "latest";
+      dependencies["tailwind-merge"] = "^3.5.0";
+      dependencies["clsx"] = "^2.1.1";
       break;
   }
   const pkg = {
@@ -1274,7 +1284,10 @@ function generateTsConfig() {
       esModuleInterop: true,
       skipLibCheck: true,
       allowArbitraryExtensions: true,
+      allowImportingTsExtensions: true,
+      noEmit: true,
       jsx: "react-jsx",
+      types: ["@useavalon/avalon/types"],
       paths: {
         "@shared/*": ["./app/shared/*"],
         "@modules/*": ["./app/modules/*"]
@@ -1288,6 +1301,7 @@ function generateTsConfig() {
 // src/templates/vite-config.ts
 function generateViteConfig(config) {
   const imports = [
+    `import { resolve } from 'node:path';`,
     `import { defineConfig, type UserConfig } from 'vite';`,
     `import { avalon } from '@useavalon/avalon';`
   ];
@@ -1340,6 +1354,14 @@ function generateViteConfig(config) {
 `),
     `    ],`,
     ``,
+    `    resolve: {`,
+    `      alias: {`,
+    `        '@shared': resolve(__dirname, 'app/shared'),`,
+    `        '@modules': resolve(__dirname, 'app/modules'),`,
+    `        '@': resolve(__dirname, 'app'),`,
+    `      },`,
+    `    },`,
+    ``,
     `    server: {`,
     `      port: 3000,`,
     `    },`,
@@ -1445,91 +1467,32 @@ export default async function HomePage() {
 }
 
 // src/templates/middleware.ts
-function generateSampleMiddleware(config) {
-  switch (config.middleware) {
-    case "h3":
-      return generateH3Middleware();
-    case "hono":
-      return generateHonoMiddleware();
-    case "elysia":
-      return generateElysiaMiddleware();
-  }
-}
-function generateH3Middleware() {
-  return `import { defineHandler } from 'nitro/h3';
+function generateSampleMiddleware(_config) {
+  return `import { defineHandler } from 'nitro';
 
 export default defineHandler((event) => {
   console.log(\`[\${new Date().toISOString()}] \${event.method} \${event.path}\`);
 });
 `;
 }
-function generateHonoMiddleware() {
-  return `import { Hono } from 'hono';
-
-const app = new Hono();
-
-app.use('*', async (c, next) => {
-  console.log(\`[\${new Date().toISOString()}] \${c.req.method} \${c.req.path}\`);
-  await next();
-});
-
-export default app;
-`;
-}
-function generateElysiaMiddleware() {
-  return `import { Elysia } from 'elysia';
-
-export default new Elysia()
-  .onBeforeHandle(({ request }) => {
-    console.log(\`[\${new Date().toISOString()}] \${request.method} \${new URL(request.url).pathname}\`);
-  });
-`;
-}
 
 // src/templates/api-routes.ts
-function generateHelloRoute(config) {
-  switch (config.middleware) {
-    case "h3":
-      return generateH3Route();
-    case "hono":
-      return generateHonoRoute();
-    case "elysia":
-      return generateElysiaRoute();
-  }
-}
-function generateH3Route() {
-  return `import { defineHandler } from 'nitro/h3';
+function generateHelloRoute(_config) {
+  return `import { defineHandler } from 'nitro';
 
 export default defineHandler(() => {
-  return { message: 'Hello from Avalon!' };
+  return Response.json({ message: 'Hello from Avalon!' });
 });
 `;
 }
-function generateHonoRoute() {
-  return `import { Hono } from 'hono';
-
-const app = new Hono();
-
-app.get('/', (c) => {
-  return c.json({ message: 'Hello from Avalon!' });
-});
-
-export default app;
-`;
-}
-function generateElysiaRoute() {
-  return `import { Elysia } from 'elysia';
-
-export default new Elysia()
-  .get('/', () => ({ message: 'Hello from Avalon!' }));
-`;
-}
 
 // src/templates/styling.ts
 function generateStylingFiles(config) {
   const files = new Map;
   files.set("app/shared/styles/main.css", generateMainCss(config));
-  files.set("app/shared/styles/reset.css", generateResetCss());
+  if (config.styling === "css-modules") {
+    files.set("app/shared/styles/reset.css", generateResetCss());
+  }
   switch (config.styling) {
     case "css-modules":
       files.set("app/shared/styles/tokens.css", generateTokensCss());
@@ -1539,19 +1502,21 @@ function generateStylingFiles(config) {
       break;
     case "tailwind":
       files.set("tailwind.config.js", generateTailwindConfig());
-      files.set("app/shared/styles/global.css", generateTailwindGlobalCss());
+      files.set("app/shared/styles/global.css", generateTailwindGlobalCss(config));
       break;
     case "shadcn":
       files.set("tailwind.config.js", generateTailwindConfig());
-      files.set("app/shared/styles/global.css", generateTailwindGlobalCss());
+      files.set("app/shared/styles/global.css", generateTailwindGlobalCss(config));
       files.set("components.json", generateShadcnComponentsJson(config));
+      files.set("app/shared/utils/cn.ts", generateCnUtil());
       break;
   }
   return files;
 }
 function generateMainCss(config) {
-  const imports = [`@import './reset.css';`];
+  const imports = [];
   if (config.styling === "css-modules") {
+    imports.push(`@import './reset.css';`);
     imports.push(`@import './tokens.css';`);
   } else {
     imports.push(`@import './global.css';`);
@@ -1659,8 +1624,47 @@ export default {
 };
 `;
 }
-function generateTailwindGlobalCss() {
-  return `@import "tailwindcss";
+function generateTailwindGlobalCss(config) {
+  const lines = [`@import "tailwindcss";`];
+  if (config.styling === "shadcn") {
+    lines.push("");
+    lines.push(`@theme inline {
+  --color-background: oklch(1 0 0);
+  --color-foreground: oklch(0.145 0 0);
+  --color-card: oklch(1 0 0);
+  --color-card-foreground: oklch(0.145 0 0);
+  --color-popover: oklch(1 0 0);
+  --color-popover-foreground: oklch(0.145 0 0);
+  --color-primary: oklch(0.205 0 0);
+  --color-primary-foreground: oklch(0.985 0 0);
+  --color-secondary: oklch(0.97 0 0);
+  --color-secondary-foreground: oklch(0.205 0 0);
+  --color-muted: oklch(0.97 0 0);
+  --color-muted-foreground: oklch(0.556 0 0);
+  --color-accent: oklch(0.97 0 0);
+  --color-accent-foreground: oklch(0.205 0 0);
+  --color-destructive: oklch(0.577 0.245 27.325);
+  --color-destructive-foreground: oklch(0.577 0.245 27.325);
+  --color-border: oklch(0.922 0 0);
+  --color-input: oklch(0.922 0 0);
+  --color-ring: oklch(0.708 0 0);
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+}`);
+  }
+  return lines.join(`
+`) + `
+`;
+}
+function generateCnUtil() {
+  return `import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
 `;
 }
 function generateShadcnComponentsJson(config) {
@@ -1687,6 +1691,39 @@ function getFaviconBuffer() {
 }
 
 // src/scaffold.ts
+function generateHonoServerEntry() {
+  return `import { Hono } from 'hono';
+
+const app = new Hono();
+
+// Add your Hono middleware and routes here.
+// This file is the Nitro server entry using the web fetch interface.
+// Route files in routes/ still use defineHandler from 'nitro'.
+
+app.use('*', async (c, next) => {
+  console.log(\`[\${new Date().toISOString()}] \${c.req.method} \${c.req.path}\`);
+  await next();
+});
+
+export default app;
+`;
+}
+function generateElysiaServerEntry() {
+  return `import { Elysia } from 'elysia';
+
+const app = new Elysia();
+
+// Add your Elysia middleware and routes here.
+// This file is the Nitro server entry using the web fetch interface.
+// Route files in routes/ still use defineHandler from 'nitro'.
+
+app.onBeforeHandle(({ request }) => {
+  console.log(\`[\${new Date().toISOString()}] \${request.method} \${new URL(request.url).pathname}\`);
+});
+
+export default app;
+`;
+}
 async function scaffoldProject(config, targetDir) {
   await mkdir(targetDir, { recursive: true });
   for (const dir of BASE_DIRS) {
@@ -1700,8 +1737,14 @@ async function scaffoldProject(config, targetDir) {
   await writeFile(join(targetDir, "app/modules/home/pages/index.tsx"), generateHomePage(config));
   await writeFile(join(targetDir, "middleware/01.logger.ts"), generateSampleMiddleware(config));
   await writeFile(join(targetDir, "routes/api/hello.ts"), generateHelloRoute(config));
+  if (config.middleware === "hono") {
+    await writeFile(join(targetDir, "server.ts"), generateHonoServerEntry());
+  } else if (config.middleware === "elysia") {
+    await writeFile(join(targetDir, "server.ts"), generateElysiaServerEntry());
+  }
   const stylingFiles = generateStylingFiles(config);
   for (const [filePath, content] of stylingFiles) {
+    await mkdir(join(targetDir, dirname(filePath)), { recursive: true });
     await writeFile(join(targetDir, filePath), content);
   }
   await writeFile(join(targetDir, "public/favicon.ico"), getFaviconBuffer());

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "create-avalon",
-	"version": "0.1.9",
+	"version": "0.1.11",
 	"description": "Scaffold a new Avalon project with multi-framework islands architecture",
 	"license": "MIT",
 	"type": "module",
@@ -10,11 +10,21 @@
 		"directory": "packages/create-avalon"
 	},
 	"homepage": "https://useavalon.dev",
-	"keywords": ["avalon", "create", "scaffold", "cli", "islands", "vite"],
+	"keywords": [
+		"avalon",
+		"create",
+		"scaffold",
+		"cli",
+		"islands",
+		"vite"
+	],
 	"bin": {
 		"create-avalon": "dist/cli.js"
 	},
-	"files": ["dist", "README.md"],
+	"files": [
+		"dist",
+		"README.md"
+	],
 	"scripts": {
 		"build": "bun build src/cli.ts --outdir dist --target node --format esm",
 		"prepublishOnly": "bun run build"