@lytjs/cli 6.4.0 → 6.5.0

package/dist/index.mjs

@@ -1,5 +1,6 @@
 #!/usr/bin/env node
 import { existsSync, readFileSync, mkdirSync, writeFileSync, readdirSync } from 'fs';
+import * as path from 'path';
 import { join, resolve, dirname } from 'path';
 import { execSync, spawn } from 'child_process';
 
@@ -60,8 +61,8 @@ function writeFile(filePath, content) {
 function readFile(filePath) {
   return readFileSync(filePath, "utf-8");
 }
-function exists(path) {
-  return existsSync(path);
+function exists(path2) {
+  return existsSync(path2);
 }
 function isEmptyDir(dir) {
   if (!existsSync(dir)) return true;
@@ -441,12 +442,19 @@ export const useCounterStore = defineStore('counter', () => {
     writeFile(join(targetDir, "src", "stores", "counter.ts"), counterStore);
   }
   if (isSsr) {
-    const entryServer = `import { createSSRApp } from '@lytjs/core';
+    const entryServer = `import { createSSRApp, h } from '@lytjs/core';
+import { renderToString } from '@lytjs/ssr';
 import App from './App.lyt';
 
 export async function render(url: string) {
-  const app = createSSRApp(App);
-  return app;
+  const app = createSSRApp({
+    render() {
+      return h(App);
+    }
+  });
+
+  const html = await renderToString(app);
+  return html;
 }
 `;
     writeFile(join(targetDir, "src/entry-server.ts"), entryServer);
@@ -460,36 +468,114 @@ app.mount('#app');
     const serverTs = `/**
  * LytJS SSR Server
  *
- * A minimal SSR server for development and production.
+ * Complete SSR server with Vite dev server and production build support.
+ * Supports streaming SSR, route prefetching, and static file serving.
  */
 
 import fs from 'fs';
 import path from 'path';
 import { fileURLToPath } from 'url';
+import http from 'http';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const isProduction = process.env.NODE_ENV === 'production';
+const DIST_DIR = path.join(__dirname, 'dist');
+const PORT = parseInt(process.env.PORT || '3000', 10);
+
+interface RenderOptions {
+  url: string;
+  template: string;
+  manifest?: Record<string, string[]>;
+}
+
+async function renderPage({ url, template, manifest }: RenderOptions): Promise<string> {
+  let app: any;
+  let vite: any;
+
+  if (!isProduction) {
+    const { createServer: createViteServer } = await import('vite');
+    vite = await createViteServer({
+      server: { middlewareMode: true },
+      appType: 'custom',
+    });
+    app = (await vite.ssrLoadModule(path.join(__dirname, 'src/entry-server.ts'))).default;
+  } else {
+    app = (await import(path.join(DIST_DIR, 'server/entry-server.js'))).default;
+  }
+
+  const html = await app.render(url);
+  return template.replace('<!--app-html-->', html);
+}
 
 async function createServer() {
-  let resolve: any;
   let vite: any;
 
+  // Load index.html template
+  let template: string;
+
   if (!isProduction) {
     const { createServer: createViteServer } = await import('vite');
     vite = await createViteServer({
       server: { middlewareMode: true },
       appType: 'custom',
     });
-    resolve = (id: string) => vite.resolveUrl(id);
+    template = fs.readFileSync(path.join(__dirname, 'index.html'), 'utf-8');
   } else {
-    resolve = (id: string) => id;
+    template = fs.readFileSync(path.join(DIST_DIR, 'client/index.html'), 'utf-8');
   }
 
-  // TODO: Set up express/polka server and SSR rendering
-  console.log('LytJS SSR server starting...');
+  const server = http.createServer(async (req, res) => {
+    const url = req.url || '/';
+
+    try {
+      if (!isProduction && url.startsWith('/@')) {
+        // Vite dev server requests
+        return;
+      }
+
+      // Static assets
+      if (url.startsWith('/assets/') || url.endsWith('.js') || url.endsWith('.css')) {
+        const filePath = isProduction
+          ? path.join(DIST_DIR, 'client', url)
+          : path.join(__dirname, url);
+
+        if (fs.existsSync(filePath)) {
+          const ext = path.extname(filePath);
+          const contentType = ext === '.css' ? 'text/css' : 'application/javascript';
+          res.writeHead(200, { 'Content-Type': contentType });
+          res.end(fs.readFileSync(filePath));
+          return;
+        }
+      }
+
+      // SSR rendering
+      const html = await renderPage({
+        url,
+        template,
+        manifest: isProduction
+          ? JSON.parse(fs.readFileSync(path.join(DIST_DIR, 'client/ssr-manifest.json'), 'utf-8'))
+          : undefined
+      });
+
+      res.writeHead(200, { 'Content-Type': 'text/html' });
+      res.end(html);
+    } catch (err: any) {
+      if (!isProduction && vite) {
+        vite.ssrFixStacktrace(err);
+      }
+      console.error('SSR Error:', err);
+      res.writeHead(500, { 'Content-Type': 'text/plain' });
+      res.end('Internal Server Error');
+    }
+  });
+
+  server.listen(PORT, () => {
+    console.log(\`LytJS SSR server running at http://localhost:\${PORT}\`);
+    console.log(\`Mode: \${isProduction ? 'Production' : 'Development'}\`);
+  });
 }
 
-createServer();
+createServer().catch(console.error);
 `;
     writeFile(join(targetDir, "server.ts"), serverTs);
   }
@@ -666,12 +752,13 @@ defineEmits<{
     }];
   },
   page(name, basePath) {
+    const pascalName = toPascalCase(name);
     const filePath = join(basePath, `${name}.lyt`);
     return [{
       filePath,
       content: `<template>
   <div class="page-${name}">
-    <h1>${toPascalCase(name)}</h1>
+    <h1>${pascalName}</h1>
   </div>
 </template>
 
@@ -722,6 +809,157 @@ export const use${toPascalCase(name)}Store = defineStore('${name}', () => {
     reset,
   };
 });
+`
+    }];
+  },
+  directive(name, basePath) {
+    const filePath = join(basePath, `${name}.ts`);
+    const camelCaseName = toCamelCase(name);
+    return [{
+      filePath,
+      content: `import type { Directive } from '@lytjs/core';
+
+/**
+ * ${toPascalCase(name)} Directive
+ *
+ * @example
+ * \`\`\`vue
+ * <div v-${camelCaseName} />
+ * \`\`\`
+ */
+export const v${toPascalCase(name)}: Directive = {
+  mounted(el, binding) {
+    // Directive mounted
+  },
+
+  updated(el, binding) {
+    // Directive updated
+  },
+
+  unmounted(el) {
+    // Directive unmounted
+  },
+};
+`
+    }];
+  },
+  composable(name, basePath) {
+    const filePath = join(basePath, `use${toPascalCase(name)}.ts`);
+    return [{
+      filePath,
+      content: `import { signal, computed } from '@lytjs/reactivity';
+
+/**
+ * ${toPascalCase(name)} Composable
+ *
+ * @example
+ * \`\`\`typescript
+ * const { state, actions } = use${toPascalCase(name)}();
+ * \`\`\`
+ */
+export function use${toPascalCase(name)}() {
+  // State
+  const isLoading = signal(false);
+  const error = signal<Error | null>(null);
+  const data = signal<any>(null);
+
+  // Computed
+  const hasData = computed(() => data.value !== null);
+
+  // Actions
+  async function fetch() {
+    isLoading.value = true;
+    error.value = null;
+    try {
+      // TODO: Fetch logic here
+      // data.value = await someApi();
+    } catch (e) {
+      error.value = e as Error;
+    } finally {
+      isLoading.value = false;
+    }
+  }
+
+  function reset() {
+    isLoading.value = false;
+    error.value = null;
+    data.value = null;
+  }
+
+  return {
+    isLoading,
+    error,
+    data,
+    hasData,
+    fetch,
+    reset,
+  };
+}
+`
+    }];
+  },
+  hook(name, basePath) {
+    const filePath = join(basePath, `use${toPascalCase(name)}.ts`);
+    return [{
+      filePath,
+      content: `import { signal, onMounted, onUnmounted } from '@lytjs/core';
+
+/**
+ * ${toPascalCase(name)} Hook
+ */
+export function use${toPascalCase(name)}() {
+  const state = signal(null);
+
+  onMounted(() => {
+    // Setup code on mount
+  });
+
+  onUnmounted(() => {
+    // Cleanup on unmount
+  });
+
+  return {
+    state,
+  };
+}
+`
+    }];
+  },
+  util(name, basePath) {
+    const filePath = join(basePath, `${name}.ts`);
+    return [{
+      filePath,
+      content: `/**
+ * ${toPascalCase(name)} Utility Functions
+ */
+
+/**
+ * ${toPascalCase(name)} function
+ *
+ * @param input - The input value
+ * @returns The processed result
+ */
+export function ${toCamelCase(name)}(input: any) {
+  // TODO: Implement function
+  return input;
+}
+`
+    }];
+  },
+  middleware(name, basePath) {
+    const filePath = join(basePath, `${name}.ts`);
+    return [{
+      filePath,
+      content: `import type { NavigationGuard } from '@lytjs/router';
+
+/**
+ * ${toPascalCase(name)} Middleware
+ */
+export const ${toCamelCase(name)}Middleware: NavigationGuard = (to, from, next) => {
+  // Middleware logic
+  console.log('Middleware:', to.path);
+  next();
+};
 `
     }];
   }
@@ -729,6 +967,10 @@ export const use${toPascalCase(name)}Store = defineStore('${name}', () => {
 function toPascalCase(str) {
   return str.split(/[-_]/).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
 }
+function toCamelCase(str) {
+  const pascalCase = toPascalCase(str);
+  return pascalCase.charAt(0).toLowerCase() + pascalCase.slice(1);
+}
 function resolveTargetDir(type) {
   const cwd = process.cwd();
   switch (type) {
@@ -738,6 +980,16 @@ function resolveTargetDir(type) {
       return join(cwd, "src", "pages");
     case "store":
       return join(cwd, "src", "stores");
+    case "directive":
+      return join(cwd, "src", "directives");
+    case "composable":
+      return join(cwd, "src", "composables");
+    case "util":
+      return join(cwd, "src", "utils");
+    case "middleware":
+      return join(cwd, "src", "middleware");
+    case "hook":
+      return join(cwd, "src", "hooks");
   }
 }
 async function add(type, name, options = {}) {
@@ -764,6 +1016,548 @@ async function add(type, name, options = {}) {
     logger.success(`Created ${type}: ${file.filePath}`);
   }
 }
+var TEMPLATES3 = {
+  component: (data, withStyles, withTest, template, lang) => {
+    const styleImport = withStyles ? `
+import './${data.kebabName}.styles.css';` : "";
+    const tsOnly = lang === "ts";
+    if (template === "sfc") {
+      return `<template>
+  <div class="${data.kebabName}">
+    <slot>
+      ${data.pascalName} Component
+    </slot>
+  </div>
+</template>
+
+<script setup${tsOnly ? ' lang="ts"' : ""}>
+${tsOnly ? `import { ref } from '@lytjs/reactivity';
+` : ""}
+${tsOnly ? `
+export interface ${data.pascalName}Props {
+  className?: string;
+}
+
+const props = defineProps<${data.pascalName}Props>();
+` : ""}
+
+const title = ref('${data.pascalName}');
+</script>
+
+<style scoped>
+.${data.kebabName} {
+  /* Component styles */
+}
+</style>
+`;
+    }
+    const testImport = withTest ? `
+import { describe, it, expect } from 'vitest';
+import { ${data.pascalName} } from './${data.kebabName}';
+
+describe('${data.pascalName}', () => {
+  it('should render', () => {
+    // Add test here
+    expect(true).toBe(true);
+  });
+});` : "";
+    const propsDecl = tsOnly ? `['className', 'children']` : `[]`;
+    return `/**
+ * ${data.pascalName} \u7EC4\u4EF6
+ *
+ * @description ${data.description}
+ * @created ${data.date}
+ */
+
+import { h, defineComponent } from '@lytjs/core';${styleImport}
+
+${tsOnly ? `export interface ${data.pascalName}Props {
+  className?: string;
+  children?: any;
+}
+
+` : ""}${template === "functional" ? `export function ${data.pascalName}(${tsOnly ? `props: ${data.pascalName}Props` : "props"}) {
+  const { className = '', children } = props;
+
+  return (
+    <div className={\`${data.kebabName} \${className}\`}>
+      {children || '${data.pascalName} Component'}
+    </div>
+  );
+}` : `export const ${data.pascalName} = defineComponent({
+  name: '${data.pascalName}',
+  props: ${propsDecl},
+  setup(props) {
+    const { className = '', children } = props;
+
+    return () => (
+      <div className={\`${data.kebabName} \${className}\`}>
+        {children || '${data.pascalName} Component'}
+      </div>
+    );
+  },
+});`}
+
+export default ${data.pascalName};${testImport}
+`;
+  },
+  page: (data, withStyles, withTest, template, lang) => {
+    const styleImport = withStyles ? `
+import './${data.kebabName}.styles.css';` : "";
+    const tsOnly = lang === "ts";
+    if (template === "sfc") {
+      return `<template>
+  <div class="${data.kebabName}-page">
+    <h1>{title}</h1>
+    <p>Page content for ${data.pascalName}</p>
+    <slot />
+  </div>
+</template>
+
+<script setup${tsOnly ? ' lang="ts"' : ""}>
+${tsOnly ? `import { ref } from '@lytjs/reactivity';
+` : ""}
+${tsOnly ? `
+export interface ${data.pascalName}PageProps {
+  title?: string;
+}
+
+const props = defineProps<${data.pascalName}PageProps>();
+` : ""}
+
+const title = ref(props.title || '${data.pascalName}');
+</script>
+
+<style scoped>
+.${data.kebabName}-page {
+  padding: 2rem;
+}
+</style>
+`;
+    }
+    const testImport = withTest ? `
+import { describe, it, expect } from 'vitest';
+import { ${data.pascalName}Page } from './${data.kebabName}';
+
+describe('${data.pascalName}Page', () => {
+  it('should render', () => {
+    // Add test here
+    expect(true).toBe(true);
+  });
+});` : "";
+    return `/**
+ * ${data.pascalName} \u9875\u9762
+ *
+ * @description ${data.description}
+ * @created ${data.date}
+ */
+
+import { h, ${tsOnly ? "signal" : "signal"} } from '@lytjs/core';
+${styleImport}
+
+${tsOnly ? `export interface ${data.pascalName}PageProps {
+  title?: string;
+}
+
+` : ""}export function ${data.pascalName}Page(${tsOnly ? `props: ${data.pascalName}PageProps` : "props"}) {
+  const { title = '${data.pascalName}' } = props;
+
+  return (
+    <div className="${data.kebabName}-page">
+      <h1>{title}</h1>
+      <p>Page content for ${data.pascalName}</p>
+    </div>
+  );
+}
+
+export default ${data.pascalName}Page;${testImport}
+`;
+  },
+  service: (data, _withStyles, _withTest, _template, lang) => {
+    const tsOnly = lang === "ts";
+    return `/**
+ * ${data.pascalName} \u670D\u52A1
+ *
+ * @description ${data.description}
+ * @created ${data.date}
+ */
+
+${tsOnly ? `export interface ${data.pascalName}ServiceOptions {
+  baseUrl?: string;
+  timeout?: number;
+}
+
+` : ""}${tsOnly ? `export class ${data.pascalName}Service {
+  private baseUrl: string;
+  private timeout: number;
+` : `export class ${data.pascalName}Service {
+`}
+  constructor(${tsOnly ? `options: ${data.pascalName}ServiceOptions = {}` : "options = {}"}) {
+    this.baseUrl = options.baseUrl || '/api';
+    this.timeout = options.timeout || 30000;
+  }
+
+  async getAll()${tsOnly ? ": Promise<any[]>" : ""} {
+    const response = await fetch(\`\${this.baseUrl}/${data.kebabName}s\`, {
+      method: 'GET',
+      headers: { 'Content-Type': 'application/json' },
+      signal: AbortSignal.timeout(this.timeout),
+    });
+    return response.json();
+  }
+
+  async getById(id)${tsOnly ? ": Promise<any>" : ""} {
+    const response = await fetch(\`\${this.baseUrl}/${data.kebabName}s/\${id}\`, {
+      method: 'GET',
+      headers: { 'Content-Type': 'application/json' },
+      signal: AbortSignal.timeout(this.timeout),
+    });
+    return response.json();
+  }
+
+  async create(${tsOnly ? "data: any" : "data"})${tsOnly ? ": Promise<any>" : ""} {
+    const response = await fetch(\`\${this.baseUrl}/${data.kebabName}s\`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data),
+      signal: AbortSignal.timeout(this.timeout),
+    });
+    return response.json();
+  }
+
+  async update(id)${tsOnly ? ": Promise<any>" : ""} {
+    const response = await fetch(\`\${this.baseUrl}/${data.kebabName}s/\${id}\`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data),
+      signal: AbortSignal.timeout(this.timeout),
+    });
+    return response.json();
+  }
+
+  async delete(id)${tsOnly ? ": Promise<void>" : ""} {
+    await fetch(\`\${this.baseUrl}/${data.kebabName}s/\${id}\`, {
+      method: 'DELETE',
+      signal: AbortSignal.timeout(this.timeout),
+    });
+  }
+}
+
+export default ${data.pascalName}Service;
+`;
+  },
+  hook: (data, _withStyles, _withTest, _template, lang) => {
+    const tsOnly = lang === "ts";
+    return `/**
+ * ${data.pascalName} Hook
+ *
+ * @description ${data.description}
+ * @created ${data.date}
+ */
+
+import { signal, effect } from '@lytjs/reactivity';
+
+${tsOnly ? `export interface ${data.pascalName}Options {
+  immediate?: boolean;
+}
+
+export interface ${data.pascalName}Return {
+  data: ReturnType<typeof signal>;
+  loading: ReturnType<typeof signal>;
+  error: ReturnType<typeof signal>;
+  execute: () => Promise<void>;
+  reset: () => void;
+}
+
+` : ""}export function use${data.pascalName}(${tsOnly ? `options: ${data.pascalName}Options = {}` : "options = {}"})${tsOnly ? `: ${data.pascalName}Return` : ""} {
+  const { immediate = false } = options;
+
+  const data = signal<any>(null);
+  const loading = signal(false);
+  const error = signal<Error | null>(null);
+
+  async function execute() {
+    loading.value = true;
+    error.value = null;
+
+    try {
+      const result = await new Promise(resolve => setTimeout(() => resolve(null), 100));
+      data.value = result;
+    } catch (e) {
+      error.value = e as Error;
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  function reset() {
+    data.value = null;
+    loading.value = false;
+    error.value = null;
+  }
+
+  if (immediate) {
+    execute();
+  }
+
+  return {
+    data,
+    loading,
+    error,
+    execute,
+    reset,
+  };
+}
+
+export default use${data.pascalName};
+`;
+  },
+  store: (data, _withStyles, _withTest, _template, lang) => {
+    const tsOnly = lang === "ts";
+    return `/**
+ * ${data.pascalName} Store
+ *
+ * @description ${data.description}
+ * @created ${data.date}
+ */
+
+import { signal, computed } from '@lytjs/reactivity';
+
+${tsOnly ? `export interface ${data.pascalName}State {
+  items: any[];
+  selectedId: string | null;
+  loading: boolean;
+  error: Error | null;
+}
+
+` : ""}export function create${data.pascalName}Store() {
+  const state = signal${tsOnly ? `<${data.pascalName}State>` : ""}({
+    items: [],
+    selectedId: null,
+    loading: false,
+    error: null,
+  });
+
+  const selectedItem = computed(() => {
+    const currentState = state.value;
+    return currentState.items.find(item => item.id === currentState.selectedId);
+  });
+
+  const itemCount = computed(() => state.value.items.length);
+
+  function setItems(items) {
+    state.value = { ...state.value, items };
+  }
+
+  function selectItem(id) {
+    state.value = { ...state.value, selectedId: id };
+  }
+
+  function addItem(item) {
+    state.value = {
+      ...state.value,
+      items: [...state.value.items, item],
+    };
+  }
+
+  function updateItem(id, updates) {
+    state.value = {
+      ...state.value,
+      items: state.value.items.map(item =>
+        item.id === id ? { ...item, ...updates } : item
+      ),
+    };
+  }
+
+  function removeItem(id) {
+    state.value = {
+      ...state.value,
+      items: state.value.items.filter(item => item.id !== id),
+      selectedId: state.value.selectedId === id ? null : state.value.selectedId,
+    };
+  }
+
+  function setLoading(loading) {
+    state.value = { ...state.value, loading };
+  }
+
+  function setError(error) {
+    state.value = { ...state.value, error };
+  }
+
+  function reset() {
+    state.value = {
+      items: [],
+      selectedId: null,
+      loading: false,
+      error: null,
+    };
+  }
+
+  return {
+    state,
+    selectedItem,
+    itemCount,
+    setItems,
+    selectItem,
+    addItem,
+    updateItem,
+    removeItem,
+    setLoading,
+    setError,
+    reset,
+  };
+}
+
+${tsOnly ? `export type ${data.pascalName}Store = ReturnType<typeof create${data.pascalName}Store>;
+` : ""}export default create${data.pascalName}Store;
+`;
+  },
+  layout: (data, withStyles, _withTest, _template, lang) => {
+    const tsOnly = lang === "ts";
+    const styleImport = withStyles ? `
+import './${data.kebabName}.styles.css';` : "";
+    return `/**
+ * ${data.pascalName} \u5E03\u5C40
+ *
+ * @description ${data.description}
+ * @created ${data.date}
+ */
+
+import { h, defineComponent } from '@lytjs/core';${styleImport}
+
+${tsOnly ? `export interface ${data.pascalName}LayoutProps {
+  children?: any;
+}
+
+` : ""}export const ${data.pascalName}Layout = defineComponent({
+  name: '${data.pascalName}Layout',
+  setup(props) {
+    return () => (
+      <div className="${data.kebabName}-layout">
+        <header className="${data.kebabName}-header">
+          <slot name="header">
+            <h1>${data.pascalName}</h1>
+          </slot>
+        </header>
+        <main className="${data.kebabName}-main">
+          <slot />
+        </main>
+        <footer className="${data.kebabName}-footer">
+          <slot name="footer" />
+        </footer>
+      </div>
+    );
+  },
+});
+
+export default ${data.pascalName}Layout;
+`;
+  },
+  middleware: (data, _withStyles, _withTest, _template, lang) => {
+    const tsOnly = lang === "ts";
+    return `/**
+ * ${data.pascalName} \u4E2D\u95F4\u4EF6
+ *
+ * @description ${data.description}
+ * @created ${data.date}
+ */
+
+${tsOnly ? `import type { Request, Response, NextFunction } from 'express';
+` : ""}
+export function ${data.camelName}Middleware(${tsOnly ? `req: Request, res: Response, next: NextFunction` : "req, res, next"}) {
+  try {
+    console.log('[${data.pascalName}] Middleware executed');
+    next();
+  } catch (error) {
+    next(error);
+  }
+}
+
+export default ${data.camelName}Middleware;
+`;
+  }
+};
+function toPascalCase2(name) {
+  return name.split(/[-_]/).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
+}
+function toCamelCase2(name) {
+  const pascal = toPascalCase2(name);
+  return pascal.charAt(0).toLowerCase() + pascal.slice(1);
+}
+function toKebabCase(name) {
+  return name.replace(/([a-z])([A-Z])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase();
+}
+async function generate(options) {
+  const {
+    type,
+    name,
+    path: basePath = "./src",
+    withStyles = false,
+    withTest = false,
+    description = "",
+    template = "default",
+    language = "ts"
+  } = options;
+  const templateData = {
+    name,
+    pascalName: toPascalCase2(name),
+    kebabName: toKebabCase(name),
+    camelName: toCamelCase2(name),
+    date: (/* @__PURE__ */ new Date()).toISOString().split("T")[0],
+    description: description || `${toPascalCase2(name)} ${type}`
+  };
+  const typeDirs = {
+    component: "components",
+    page: "pages",
+    service: "services",
+    hook: "hooks",
+    store: "stores",
+    layout: "layouts",
+    middleware: "middleware"
+  };
+  const targetDir = path.join(
+    process.cwd(),
+    basePath,
+    typeDirs[type] || "components"
+  );
+  await ensureDir(targetDir);
+  const templateFn = TEMPLATES3[type];
+  if (!templateFn) {
+    logger.error(`Unknown type: ${type}`);
+    logger.info("Available types: component, page, service, hook, store, layout, middleware");
+    process.exit(1);
+  }
+  const extension = template === "sfc" ? "lyt" : language;
+  const filename = `${templateData.kebabName}${type === "page" ? ".page" : ""}.${extension}`;
+  const filePath = path.join(targetDir, filename);
+  const content = templateFn(templateData, withStyles, withTest, template, language);
+  await writeFile(filePath, content);
+  logger.success(`Generated ${type}: ${filePath}`);
+  if (withStyles && template !== "sfc") {
+    const styleContent = `/**
+ * ${templateData.pascalName} Styles
+ */
+
+.${templateData.kebabName} {
+  /* Component styles */
+}
+`;
+    const stylePath = path.join(targetDir, `${templateData.kebabName}.styles.css`);
+    await writeFile(stylePath, styleContent);
+    logger.success(`Generated styles: ${stylePath}`);
+  }
+  if (withTest && template !== "sfc") {
+    logger.info("Test file included in generated component");
+  }
+  logger.info("\nNext steps:");
+  logger.info(`  cd ${targetDir}`);
+  logger.info(`  Import your ${type}: import { ${template === "sfc" ? "default" : templateData.pascalName} } from './${templateData.kebabName}'`);
+  logger.info("\nAvailable options:");
+  logger.info("  --template=sfc : Single File Component (.lyt)");
+  logger.info("  --template=functional : Functional component");
+  logger.info("  --language=js : JavaScript output");
+}
 var PLUGIN_TEMPLATES = {
   default: "Default plugin template with TypeScript",
   minimal: "Minimal plugin without extra dependencies",
@@ -855,8 +1649,6 @@ const optionsSchema: ConfigSchema<${pluginName.replace(/-/g, "")}Options> = {
   additionalProperties: false,
 };
 
-${pluginName.replace(/-/g, "")}Options\`;
-
 export interface ${pluginName.replace(/-/g, "")}Options {
   debug?: boolean;
   option1?: string;
@@ -1174,8 +1966,10 @@ async function runCli(rawArgs = process.argv.slice(2)) {
       });
       break;
     case "add":
-      if (!args[0] || !["component", "page", "store"].includes(args[0])) {
-        logger.error("Usage: lyt add <component|page|store> <name>");
+      const addTypes = ["component", "page", "store", "directive", "composable", "util", "middleware", "hook"];
+      if (!args[0] || !addTypes.includes(args[0])) {
+        logger.error("Usage: lyt add <type> <name>");
+        logger.info("Types: component, page, store, directive, composable, util, middleware, hook");
         logger.info("Example: lyt add component Button");
         process.exit(1);
       }
@@ -1183,6 +1977,24 @@ async function runCli(rawArgs = process.argv.slice(2)) {
         force: options.force
       });
       break;
+    case "generate":
+    case "g":
+      const genTypes = ["component", "page", "service", "hook", "store"];
+      if (!args[0] || !genTypes.includes(args[0])) {
+        logger.error("Usage: lyt generate <type> <name>");
+        logger.info("Types: component, page, service, hook, store");
+        logger.info("Example: lyt generate component Button");
+        process.exit(1);
+      }
+      await generate({
+        type: args[0],
+        name: args[1] || "Unnamed",
+        path: options.path,
+        withStyles: options.styles,
+        withTest: options.test,
+        withStorybook: options.storybook
+      });
+      break;
     case "plugin":
       if (!args[0]) {
         logger.error("Usage: lyt plugin <create|build|validate|templates>");
@@ -1278,10 +2090,11 @@ ${logger.bold("Commands:")}
   dev                      Start development server
   build                    Build for production
   test                     Run tests
-  add <type> <name>        Generate a component, page, or store
+  add <type> <name>        Generate a component, page, store, directive, composable, etc.
+  generate, g              Advanced code generation (component, page, service, hook, store)
   plugin <subcmd>          Plugin development commands
   help                     Show this help message
-
+  
 ${logger.bold("Options:")}
   --version, -v     Show version number
   --help            Show help
@@ -1305,6 +2118,12 @@ ${logger.bold("Test Options:")}
   --coverage        Generate coverage report
   --grep <pattern>  Filter tests by pattern
 
+${logger.bold("Generate Options:")}
+  --path <dir>      Output directory (default: ./src)
+  --styles          Generate CSS styles file
+  --test            Generate test file
+  --storybook       Generate Storybook story file
+
 ${logger.bold("Plugin Options:")}
   --template <name>    Use a specific plugin template (default, minimal, withConfig)
   --force              Overwrite existing directory
@@ -1325,6 +2144,16 @@ ${logger.bold("Examples:")}
   lyt add component Button
   lyt add page About
   lyt add store user
+  lyt directive click-outside
+  lyt add composable fetch-data
+  lyt add util format
+  lyt add hook window-size
+  lyt generate component Button --styles --test
+  lyt generate page Dashboard --path ./src/pages
+  lyt generate service User --path ./src/services
+  lyt generate hook useCounter
+  lyt generate store Auth --path ./src/stores
+  lyt g page Login
   lyt plugin create my-plugin
   lyt plugin create my-plugin --template withConfig
   lyt plugin build
@@ -1337,6 +2166,6 @@ if (__require.main === module) {
   runCli().catch(console.error);
 }
 
-export { add, build, buildPlugin, create, createPlugin, detectPackageManager, dev, ensureDir, exists, getAddCommand, getInstallCommand, getRunCommand, listPluginTemplates, listTemplates, logger, readFile, runCli, test, validatePlugin, writeFile };
+export { add, build, buildPlugin, create, createPlugin, detectPackageManager, dev, ensureDir, exists, generate, getAddCommand, getInstallCommand, getRunCommand, listPluginTemplates, listTemplates, logger, readFile, runCli, test, validatePlugin, writeFile };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map