@lytjs/cli 6.4.0 → 6.6.0

package/dist/lyt.cjs

@@ -5,6 +5,26 @@ var fs = require('fs');
 var path = require('path');
 var child_process = require('child_process');
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var path__namespace = /*#__PURE__*/_interopNamespace(path);
+
 var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
   get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
 }) : x)(function(x) {
@@ -62,8 +82,8 @@ function writeFile(filePath, content) {
 function readFile(filePath) {
   return fs.readFileSync(filePath, "utf-8");
 }
-function exists(path) {
-  return fs.existsSync(path);
+function exists(path2) {
+  return fs.existsSync(path2);
 }
 function isEmptyDir(dir) {
   if (!fs.existsSync(dir)) return true;
@@ -170,7 +190,7 @@ function generateProjectFiles(targetDir, projectName, template) {
     },
     devDependencies: {
       "@lytjs/plugin-vite": "^6.0.0",
-      "vite": "^5.0.0"
+      vite: "^5.0.0"
     }
   };
   if (!isMinimal) {
@@ -443,12 +463,19 @@ export const useCounterStore = defineStore('counter', () => {
     writeFile(path.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(path.join(targetDir, "src/entry-server.ts"), entryServer);
@@ -462,36 +489,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(path.join(targetDir, "server.ts"), serverTs);
   }
@@ -641,9 +746,10 @@ async function test(options = {}) {
 var TEMPLATES2 = {
   component(name, basePath) {
     const filePath = path.join(basePath, `${name}.lyt`);
-    return [{
-      filePath,
-      content: `<template>
+    return [
+      {
+        filePath,
+        content: `<template>
   <div class="${name}">
     <slot />
   </div>
@@ -665,15 +771,18 @@ defineEmits<{
 }
 </style>
 `
-    }];
+      }
+    ];
   },
   page(name, basePath) {
+    const pascalName = toPascalCase(name);
     const filePath = path.join(basePath, `${name}.lyt`);
-    return [{
-      filePath,
-      content: `<template>
+    return [
+      {
+        filePath,
+        content: `<template>
   <div class="page-${name}">
-    <h1>${toPascalCase(name)}</h1>
+    <h1>${pascalName}</h1>
   </div>
 </template>
 
@@ -687,13 +796,15 @@ defineEmits<{
 }
 </style>
 `
-    }];
+      }
+    ];
   },
   store(name, basePath) {
     const filePath = path.join(basePath, `${name}.ts`);
-    return [{
-      filePath,
-      content: `import { defineStore } from '@lytjs/store';
+    return [
+      {
+        filePath,
+        content: `import { defineStore } from '@lytjs/store';
 import { signal, computed } from '@lytjs/reactivity';
 
 export const use${toPascalCase(name)}Store = defineStore('${name}', () => {
@@ -725,12 +836,178 @@ export const use${toPascalCase(name)}Store = defineStore('${name}', () => {
   };
 });
 `
-    }];
+      }
+    ];
+  },
+  directive(name, basePath) {
+    const filePath = path.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 = path.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 = path.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 = path.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 = path.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();
+};
+`
+      }
+    ];
   }
 };
 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) {
@@ -740,6 +1017,16 @@ function resolveTargetDir(type) {
       return path.join(cwd, "src", "pages");
     case "store":
       return path.join(cwd, "src", "stores");
+    case "directive":
+      return path.join(cwd, "src", "directives");
+    case "composable":
+      return path.join(cwd, "src", "composables");
+    case "util":
+      return path.join(cwd, "src", "utils");
+    case "middleware":
+      return path.join(cwd, "src", "middleware");
+    case "hook":
+      return path.join(cwd, "src", "hooks");
   }
 }
 async function add(type, name, options = {}) {
@@ -766,6 +1053,546 @@ 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__namespace.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__namespace.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__namespace.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",
@@ -774,45 +1601,53 @@ var PLUGIN_TEMPLATES = {
 function getTemplateContent(template, pluginName) {
   const packageName = `@lytjs/plugin-${pluginName}`;
   const files = {};
-  files["package.json"] = JSON.stringify({
-    name: packageName,
-    version: "0.1.0",
-    description: `LytJS plugin: ${pluginName}`,
-    main: "dist/index.cjs",
-    module: "dist/index.mjs",
-    types: "dist/index.d.ts",
-    exports: {
-      ".": {
-        import: "./dist/index.mjs",
-        require: "./dist/index.cjs",
-        types: "./dist/index.d.ts"
+  files["package.json"] = JSON.stringify(
+    {
+      name: packageName,
+      version: "0.1.0",
+      description: `LytJS plugin: ${pluginName}`,
+      main: "dist/index.cjs",
+      module: "dist/index.mjs",
+      types: "dist/index.d.ts",
+      exports: {
+        ".": {
+          import: "./dist/index.mjs",
+          require: "./dist/index.cjs",
+          types: "./dist/index.d.ts"
+        }
+      },
+      files: ["dist"],
+      scripts: {
+        build: "tsup",
+        dev: "tsup --watch",
+        test: "vitest",
+        lint: "eslint src",
+        prepublishOnly: "npm run build"
+      },
+      keywords: ["lytjs", "plugin"],
+      license: "MIT",
+      peerDependencies: {
+        "@lytjs/core": ">=6.0.0"
       }
     },
-    files: ["dist"],
-    scripts: {
-      build: "tsup",
-      dev: "tsup --watch",
-      test: "vitest",
-      lint: "eslint src",
-      "prepublishOnly": "npm run build"
+    null,
+    2
+  );
+  files["tsconfig.json"] = JSON.stringify(
+    {
+      extends: "@lytjs/core/tsconfig.json",
+      compilerOptions: {
+        outDir: "./dist",
+        rootDir: "./src",
+        declaration: true,
+        declarationMap: true
+      },
+      include: ["src"],
+      exclude: ["node_modules", "dist", "tests"]
     },
-    keywords: ["lytjs", "plugin"],
-    license: "MIT",
-    peerDependencies: {
-      "@lytjs/core": ">=6.0.0"
-    }
-  }, null, 2);
-  files["tsconfig.json"] = JSON.stringify({
-    extends: "@lytjs/core/tsconfig.json",
-    compilerOptions: {
-      outDir: "./dist",
-      rootDir: "./src",
-      declaration: true,
-      declarationMap: true
-    },
-    include: ["src"],
-    exclude: ["node_modules", "dist", "tests"]
-  }, null, 2);
+    null,
+    2
+  );
   files["tsup.config.ts"] = `import { defineConfig } from 'tsup';
 
 export default defineConfig({
@@ -857,8 +1692,6 @@ const optionsSchema: ConfigSchema<${pluginName.replace(/-/g, "")}Options> = {
   additionalProperties: false,
 };
 
-${pluginName.replace(/-/g, "")}Options\`;
-
 export interface ${pluginName.replace(/-/g, "")}Options {
   debug?: boolean;
   option1?: string;
@@ -1026,7 +1859,16 @@ async function buildPlugin(options = {}) {
   logger.info("Building plugin...");
   try {
     const buildCmd = "tsup";
-    const args = ["--entry", "src/index.ts", "--outDir", outDir, "--format", "esm,cjs", "--dts", "--sourcemap"];
+    const args = [
+      "--entry",
+      "src/index.ts",
+      "--outDir",
+      outDir,
+      "--format",
+      "esm,cjs",
+      "--dts",
+      "--sourcemap"
+    ];
     if (options.minify) {
       args.push("--minify");
     }
@@ -1092,8 +1934,8 @@ async function validatePlugin(options = {}) {
   if (!fs.existsSync(tsupConfigPath)) {
     warnings.push("tsup.config.ts not found (recommended for builds)");
   }
-  let hasErrors = errors.length > 0;
-  let hasWarnings = warnings.length > 0;
+  const hasErrors = errors.length > 0;
+  const hasWarnings = warnings.length > 0;
   if (hasErrors) {
     logger.error("Validation failed with errors:");
     for (const err of errors) {
@@ -1122,7 +1964,7 @@ async function validatePlugin(options = {}) {
 }
 function isEmptyDir2(dir) {
   if (!fs.existsSync(dir)) return true;
-  const files = __require("fs").readdirSync(dir);
+  const files = readdirSync(dir);
   return files.length === 0;
 }
 function listPluginTemplates() {
@@ -1141,7 +1983,7 @@ async function runCli(rawArgs = process.argv.slice(2)) {
     return;
   }
   if (options.version || command === "version" || command === "-v" || command === "--version") {
-    console.log(`LytJS CLI v${VERSION}`);
+    console.warn(`LytJS CLI v${VERSION}`);
     return;
   }
   switch (command) {
@@ -1175,9 +2017,20 @@ async function runCli(rawArgs = process.argv.slice(2)) {
         grep: options.grep
       });
       break;
-    case "add":
-      if (!args[0] || !["component", "page", "store"].includes(args[0])) {
-        logger.error("Usage: lyt add <component|page|store> <name>");
+    case "add": {
+      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);
       }
@@ -1185,7 +2038,27 @@ async function runCli(rawArgs = process.argv.slice(2)) {
         force: options.force
       });
       break;
-    case "plugin":
+    }
+    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>");
         logger.info("Example: lyt plugin create my-plugin");
@@ -1222,6 +2095,7 @@ async function runCli(rawArgs = process.argv.slice(2)) {
           process.exit(1);
       }
       break;
+    }
     default:
       if (command) {
         logger.error(`Unknown command: ${command}`);
@@ -1268,7 +2142,7 @@ function parseArgs(args) {
   return { command, args: positional, options };
 }
 function showHelp() {
-  console.log(`
+  console.warn(`
 ${logger.bold("LytJS CLI")} v${VERSION}
 
 ${logger.bold("Usage:")}
@@ -1280,10 +2154,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
@@ -1307,6 +2182,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
@@ -1327,6 +2208,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
@@ -1348,6 +2239,7 @@ exports.detectPackageManager = detectPackageManager;
 exports.dev = dev;
 exports.ensureDir = ensureDir;
 exports.exists = exists;
+exports.generate = generate;
 exports.getAddCommand = getAddCommand;
 exports.getInstallCommand = getInstallCommand;
 exports.getRunCommand = getRunCommand;