@xeno-js/cli 0.1.0

package/src/infrastructure/generators/vue/packagejson.generator.ts

@@ -0,0 +1,50 @@
+import path from 'node:path'
+
+import { type IFileService, type IGenerator } from '../../../domain'
+import type { VueOptions } from '../../../shared'
+
+export class PackageJsonVueGenerator implements IGenerator<VueOptions> {
+  constructor(private readonly _fileService: IFileService) {}
+
+  public async generate(projectPath: string, options: VueOptions): Promise<void> {
+    const packageJson = {
+      name: options.targetDir,
+      version: '1.0.0',
+      private: true,
+      type: 'module',
+      scripts: {
+        dev: 'vite',
+        build: 'vue-tsc -b && vite build',
+        preview: 'vite preview',
+        g: 'xeno-js generate',
+      } as Record<string, string>,
+      dependencies: {
+        '@xeno-js/vue': 'latest',
+        'vue': '^3.5.0',
+      } as Record<string, string>,
+      devDependencies: {
+        '@types/node': '^20.0.0',
+        '@vitejs/plugin-vue': '^5.1.0',
+        'typescript': '^5.5.0',
+        'vite': '^5.4.0',
+        'vue-tsc': '^2.1.0',
+      } as Record<string, string>,
+    }
+
+    if (options.axios) packageJson.dependencies['axios'] = '^1.7.0'
+    if (options.cockatiel) packageJson.dependencies['cockatiel'] = '^4.0.0'
+    if (options.supabase) packageJson.dependencies['@supabase/supabase-js'] = '^2.45.0'
+    if (options.sentry) packageJson.dependencies['@sentry/vue'] = '^8.28.0'
+    if (options.pinia) packageJson.dependencies['pinia'] = '^2.2.0'
+    if (options.router) packageJson.dependencies['vue-router'] = '^4.4.0'
+    if (options.zod) packageJson.dependencies['zod'] = '^4.4.3'
+
+    if (options.tailwind) {
+      packageJson.devDependencies['tailwindcss'] = '^4.0.0'
+      packageJson.devDependencies['@tailwindcss/vite'] = '^4.0.0'
+    }
+
+    const filePath = path.join(projectPath, 'package.json')
+    await this._fileService.writeFileRecursive(filePath, JSON.stringify(packageJson, null, 2))
+  }
+}

package/src/infrastructure/generators/vue/readme.generator.ts

@@ -0,0 +1,389 @@
+// src/infrastructure/generators/vue-readme.generator.ts
+import path from 'node:path'
+
+import { type IFileService, type IGenerator } from '../../../domain'
+import type { VueOptions } from '../../../shared'
+
+export class ReadmeVueGenerator implements IGenerator<VueOptions> {
+  constructor(private readonly _fileService: IFileService) {}
+
+  public async generate(projectPath: string, options: VueOptions): Promise<void> {
+    const content = `# ${options.targetDir}
+
+<div align="center">
+  <img src="logo/logo.png" alt="Xeno Logo" width="140" />
+
+  <h1>Xeno Vue</h1>
+
+  <p><em>Enterprise-grade DDD & CQRS framework for Vue.js</em></p>
+
+  <p>
+    <a href="https://github.com/xeno-js/xeno-js">
+      <img src="https://img.shields.io/badge/Powered%20by-Xeno-blueviolet?style=flat-square" alt="Powered by Xeno" />
+    </a>
+    <a href="https://github.com/xeno-js/xeno-fe/blob/main/LICENSE">
+      <img src="https://img.shields.io/npm/l/@xeno-js/vue?style=flat-square" alt="License: ISC" />
+    </a>
+    <a href="https://www.npmjs.com/package/@xeno-js/vue">
+      <img src="https://img.shields.io/npm/v/@xeno-js/vue?style=flat-square" alt="NPM Version" />
+    </a>
+    <a href="https://buymeacoffee.com/xenojs">
+      <img src="https://img.shields.io/badge/Buy%20Me%20A%20Coffee-Support-FFdd00?style=flat-square&logo=buy-me-a-coffee&logoColor=black" alt="Buy Me A Coffee" />
+    </a>
+  </p>
+</div>
+
+---
+
+## What is Xeno Vue?
+
+**Xeno Vue** (\`@xeno-js/vue\`) is an enterprise-grade, deterministic
+architectural framework that brings the strictness of **Domain-Driven Design
+(DDD)** and **Command Query Responsibility Segregation (CQRS)** natively to the
+browser.
+
+By shifting operational logic, remote data fetching, and state mutations away
+from Vue components and Pinia stores, Xeno ensures your frontend architecture
+remains pristine, highly testable, and completely decoupled from the UI layer.
+It treats the browser as a complex distributed client, not just a document
+viewer.
+
+---
+
+## 💡 Why Choose Xeno Vue?
+
+Modern frontend development often leads to "Spaghetti State" where API calls,
+business rules, and DOM manipulations are tightly coupled inside components.
+Xeno Vue fixes this with an emphasis on pure Dependency Injection (DI) and clean
+boundaries.
+
+- **Zero-Magic Dependency Injection**: Xeno provides an explicit
+  \`XenoAppBuilder\` to construct your IoC container at bootstrap. No hidden Vue
+  plugins doing implicit injections. You have total control over the dependency
+  graph.
+- **Total UI Decoupling**: Vue components act strictly as the Presentation
+  Layer. Business logic, API calls, and CQRS handlers live in pure, isolated
+  TypeScript classes. You can swap Vue for React tomorrow without touching your
+  core domain.
+- **Enterprise-Grade Client Resiliency**: The browser is a hostile, unreliable
+  environment. Xeno Vue natively integrates \`Cockatiel\` and \`Axios\` to provide
+  out-of-the-box circuit breakers, retries with jitter, and bulkheads directly
+  in the client.
+- **Frontend Middleware Pipeline**: Handle Authentication, CSRF validation,
+  aggressive Query Caching, and Performance logging _before_ a command is
+  executed or an API call fires, using the native \`Mediator\` pipeline.
+
+---
+
+## 📖 Documentation & Getting Started
+
+To explore the architecture, programmatic configurations, and extension
+workflows of Xeno Vue, read the full technical manuals located inside the main
+documentation hub:
+
+- **[Framework Documentation Repository](https://www.xeno-js.it/vue/overview)**
+
+Inside, you will find exhaustive, step-by-step assembly guides covering frontend
+IoC building (\`XenoAppBuilder\`), Vue \`Provide/Inject\` boundaries, and CQRS
+composables.
+
+---
+
+## 🚀 Live Executable Demos
+
+Want to see how Xeno Vue works? Check out the functional example application
+showcasing end-to-end command/query segregation, resilient HTTP fetching, and
+pure Composition API integration.
+
+- **[Xeno Vue Demo Architecture](https://www.xeno-js.it/demo)**
+
+---
+
+## 📦 Installation
+
+Install the Vue package:
+
+\`\`\`bash
+npm install @xeno-js/vue
+
+\`\`\`
+
+Xeno uses **Optional Peer Dependencies**. You only install the external
+libraries you actually need.
+
+\`\`\`bash
+# Example: Install tools only if you enable them in the builder
+npm install axios cockatiel zod @supabase/supabase-js @sentry/vue
+
+\`\`\`
+
+---
+
+## ⚡ Bootstrapping & Component Example
+
+Below is an architectural example of how to configure the Xeno \`XenoAppBuilder\`,
+inject it into the Vue application, and consume it using Composition API
+Composables.
+
+### 1. Initialize the Container (\`src/bootstrap.ts\`)
+
+\`\`\`typescript
+import { XenoAppBuilder, LOG_LEVEL, TOKENS } from '@xeno-js/vue'
+import { BffRemoteDataSource } from './infrastructure'
+
+import type { RemoteDataSource, XenoVueRegistry } from '@xeno-js/vue'
+
+export type MyRegistry = XenoVueRegistry<{
+  BFF_REMOTE_DS: RemoteDataSource
+}>
+
+// Create the root IoC container context for the browser
+const builder = XenoAppBuilder.create<MyRegistry>()
+  .addContext((opts) => {
+    opts.contextAccessor = useContextStore()
+  })
+  .addLogger((opts, config) => {
+    opts.console = config.get('VITE_APP_ENV') === 'development'
+    opts.level = LOG_LEVEL.DEBUG
+  })
+  .addAuth((opts, config) => {
+    opts.url = config.getOrThrow('VITE_SUPABASE_URL')
+    opts.key = config.getOrThrow('VITE_SUPABASE_KEY')
+  })
+  .addHttpCore('BFF_REMOTE_DS', (opts, config) => {
+    opts.client = {
+      baseURL: config.getOrThrow('VITE_API_BASE_URL'),
+      timeoutMs: 10000,
+    }
+    opts.resilience.retry.attempts = 3
+    opts.factory = (http, resilience) =>
+      new BffRemoteDataSource(http, resilience)
+  })
+  .addPipeline((config) => {
+    config.queryCaching = true // Enable in-memory caching for Queries
+  })
+
+export async function bootstrap() {
+  return await builder.build()
+}
+\`\`\`
+
+### 2. Inject into Vue (\`src/main.ts\`)
+
+\`\`\`typescript
+import { createApp } from 'vue'
+import App from './App.vue'
+import { bootstrap } from './bootstrap'
+import { XENO_SERVICES_KEY, ServicesUtils } from '@xeno-js/vue'
+
+async function mountApp() {
+  try {
+    const app = createApp(App)
+    const container = await bootstrap()
+
+    // Provide the Xeno IoC container globally to all components
+    app.provide(XENO_SERVICES_KEY, container)
+
+    // Register global services utility for composables
+    ServicesUtils.setGlobalServices(container)
+
+    app.mount('#app')
+  } catch (error) {
+    console.error('Critical error during frontend bootstrap:', error)
+  }
+}
+
+mountApp()
+\`\`\`
+
+### 3. CQRS Composable Usage (\`src/features/users/use-create-user.ts\`)
+
+\`\`\`typescript
+import { ref } from 'vue'
+import { Result } from '@xeno-js/shared'
+import { ServicesUtils } from '@/use-app'
+import { CreateUserCommand } from './create-user.command'
+
+export function useCreateUser() {
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+
+  const execute = async (payload: { email: string; name: string }) => {
+    if (loading.value) return Result.fail(new Error('Already executing'))
+    loading.value = true
+    error.value = null
+
+    try {
+      // Safely resolve the Mediator from the Xeno Container
+      const { mediator, BFF_REMOTE_DS } = ServicesUtils.useApp()
+      const command = new CreateUserCommand()
+
+      const result = await mediator.send(command, async () => {
+        const apiResult = await bffRemoteDs.post('/v1/users', payload)
+
+        if (!apiResult.isOk()) return Result.fail(apiResult.getErrorOrThrow())
+        return Result.ok(apiResult.getValueOrThrow())
+      })
+
+      if (!result.isOk()) {
+        error.value = result.getErrorOrThrow().message
+      }
+
+      return result
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return { loading, error, execute }
+}
+\`\`\`
+
+---
+
+## 🛠 Scaffold your project with CLI
+
+Xeno includes an official CLI tool, \`@xeno-js/cli\`, designed to bootstrap your
+new application in seconds. It offers an interactive setup for Vue projects,
+instantly scaffolding the CQRS files, composables, and dependency injection
+boundaries.
+
+\`\`\`bash
+# Generate a new Vue project
+npx @xeno-js/cli new my-frontend-app --vue
+
+# Generate a Vue Command with its Composable
+npx @xeno-js/cli g command CreateUser --vue
+
+\`\`\`
+
+Check the
+**[CLI Documentation](https://www.google.com/search?q=https://www.xeno-js.it/cli/overview&utm_source=gemini)**
+for full options.
+
+---
+
+## 🤝 For Contributors
+
+We welcome contributions to Xeno! To maintain the highest code quality and
+stability of the core framework, **direct pushes to the \`main\` and \`develop\`
+branches are strictly prohibited.** Please follow this Git Flow to contribute:
+
+1. **Branch off from \`develop**\`: Create a new branch for your feature or
+   bugfix.
+
+\`\`\`bash
+git checkout develop
+git pull origin develop
+git checkout -b feat/your-awesome-feature
+
+\`\`\`
+
+2. **Make your changes**: Write your code and ensure it passes all local checks
+   (linting, types, and tests).
+
+\`\`\`bash
+npm run check
+
+\`\`\`
+
+3. **Commit your changes**: We enforce
+   [Conventional Commits](https://www.conventionalcommits.org/?utm_source=gemini).
+   Husky will verify your commit message format.
+4. **Commit Format:**
+
+\`\`\`bash
+feat(scope): add new feature
+fix(scope): resolve bug
+chore(scope): update dependencies
+
+\`\`\`
+
+5. **Submit a Pull Request (PR)**: Push your branch to GitHub and open a Pull
+   Request targeting the **\`develop\`** branch.
+6. **Review**: The repository owner will review your code, run pipeline tests,
+   and merge it into \`develop\`.
+
+_Note: The \`main\` branch is strictly reserved for production releases. Code
+flows from feature branches ➡️ \`develop\` ➡️ \`main\`._
+
+### Scripts
+
+| Command                 | Description                                    |
+| ----------------------- | ---------------------------------------------- |
+| \`npm run build\`         | Builds the TypeScript source code into \`dist/\` |
+| \`npm run typecheck\`     | Checks types without emitting files            |
+| \`npm run lint\`          | Runs ESLint                                    |
+| \`npm run format\`        | Formats code with Prettier                     |
+| \`npm run test\`          | Runs the Vitest test suite                     |
+| \`npm run test:coverage\` | Runs tests and generates a coverage report     |
+
+### Code Quality (Husky & Git Hooks)
+
+This project strictly enforces code quality rules before pushing to the
+repository:
+
+- **\`pre-commit\`**: Runs \`lint-staged\` on staged files (ESLint + Prettier).
+- **\`commit-msg\`**: Checks commit messages with \`commitlint\` (we use
+  Conventional Commits).
+- **\`pre-push\`**: Runs type checking, linting, and testing before code leaves
+  your machine.
+
+---
+
+## 🌱 Support & Appreciation
+
+Building, benchmarking, and maintaining a progressive, enterprise-ready
+open-source framework requires a massive amount of continuous dedication and
+architectural engineering.
+
+If Xeno has brought value to your development workflows, helped decouple your
+core business logic, or simplified your system infrastructure layout, consider
+supporting its open-source lifecycle. Your backing directly accelerates our
+strategic roadmap for new out-of-the-box transport integrations and keeps the
+documentation pristine.
+
+**Want to know how you can contribute or sponsor Xeno?** We rely on the
+commitment of our community to keep the project independent and thriving.
+Whether you are an individual developer or a business using Xeno, your support
+makes a real difference.
+
+👉
+**[Read our support guidelines and find out how to help](https://www.xeno-js.it/support-us)**
+
+Thank you for being part of this decoupled open-source journey!
+
+<amp-bounce>
+</amp-bounce>
+<a href="https://www.buymeacoffee.com/xenojs" target="_blank">
+<img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" height="42" style="height: 42px !important;" />
+</a>
+
+---
+
+## 🛡️ Powered by Xeno
+
+If you are using Xeno in your project, let the world know! Add this badge to
+your README:
+
+\`\`\`html
+<a
+  href="[https://github.com/xeno-js/xeno-fe](https://github.com/xeno-js/xeno-fe)"
+  target="_blank"
+>
+  <img
+    src="[https://img.shields.io/badge/Powered%20by-Xeno-black?style=flat-square](https://img.shields.io/badge/Powered%20by-Xeno-black?style=flat-square)"
+    alt="Powered by Xeno"
+    height="20"
+  />
+</a>
+\`\`\`
+
+## 📄 License
+
+Copyright (c) 2026 Xeno. Licensed under the
+[ISC License](https://www.google.com/search?q=LICENSE&utm_source=gemini).
+`
+    await this._fileService.writeFileRecursive(path.join(projectPath, 'README.md'), content)
+  }
+}

package/src/infrastructure/generators/vue/registry-ts.generator.ts

@@ -0,0 +1,26 @@
+import path from 'node:path'
+
+import { type IFileService, type IGenerator } from '../../../domain'
+import type { VueOptions } from '../../../shared'
+
+export class RegistryGenerator implements IGenerator<VueOptions> {
+  constructor(private readonly _fileService: IFileService) {}
+
+  public async generate(projectPath: string, _options: VueOptions): Promise<void> {
+    const registryTs = `import type { XenoVueRegistry } from '@xeno-js/vue';
+
+/**
+ * @file registry.ts
+ * @description Centralized Type Contract for Dependency Injection in Vue.
+ */
+export interface MyRegistry extends XenoVueRegistry {
+  // Add your frontend injection tokens here
+  // e.g., USER_DATA_SOURCE: IUserDataSource;
+}
+`
+    await this._fileService.writeFileRecursive(
+      path.join(projectPath, 'src', 'registry.ts'),
+      registryTs,
+    )
+  }
+}

package/src/infrastructure/generators/vue/router.generator.ts

@@ -0,0 +1,35 @@
+import path from 'node:path'
+
+import { type IFileService, type IGenerator } from '../../../domain'
+import type { VueOptions } from '../../../shared'
+
+export class RouterGenerator implements IGenerator<VueOptions> {
+  constructor(private readonly _fileService: IFileService) {}
+
+  public async generate(projectPath: string, options: VueOptions): Promise<void> {
+    // 6. Optional router and assets
+    if (options.router) {
+      const routerTs = `import { createRouter, createWebHistory } from 'vue-router';
+
+export default createRouter({
+  history: createWebHistory(),
+  routes: [
+    {
+      path: '/',
+      name: 'Home',
+      component: () => import('../views/HomeView.vue')
+    }
+  ]
+});`
+      await this._fileService.writeFileRecursive(
+        path.join(projectPath, 'src', 'router', 'index.ts'),
+        routerTs,
+      )
+
+      await this._fileService.writeFileRecursive(
+        path.join(projectPath, 'src', 'views', 'HomeView.vue'),
+        `<template>\n  <h1>Home View</h1>\n</template>`,
+      )
+    }
+  }
+}

package/src/infrastructure/generators/vue/tailwind.generator.ts

@@ -0,0 +1,17 @@
+import path from 'node:path'
+
+import { type IFileService, type IGenerator } from '../../../domain'
+import type { VueOptions } from '../../../shared'
+
+export class TailwindGenerator implements IGenerator<VueOptions> {
+  constructor(private readonly _fileService: IFileService) {}
+
+  public async generate(projectPath: string, options: VueOptions): Promise<void> {
+    if (options.tailwind) {
+      await this._fileService.writeFileRecursive(
+        path.join(projectPath, 'src', 'assets', 'style.css'),
+        `@import "tailwindcss";\n`,
+      )
+    }
+  }
+}

package/src/infrastructure/generators/vue/tsconfig.generator.ts

@@ -0,0 +1,38 @@
+// src/infrastructure/generators/tsconfig-vue.generator.ts
+import path from 'node:path'
+
+import { type IFileService, type IGenerator } from '../../../domain'
+import type { VueOptions } from '../../../shared'
+
+export class TsconfigVueGenerator implements IGenerator<VueOptions> {
+  constructor(private readonly _fileService: IFileService) {}
+
+  public async generate(projectPath: string, _options: VueOptions): Promise<void> {
+    const tsconfig = {
+      compilerOptions: {
+        target: 'ES2022',
+        useDefineForClassFields: true,
+        module: 'ESNext',
+        moduleResolution: 'bundler',
+        strict: true,
+        jsx: 'preserve',
+        resolveJsonModule: true,
+        isolatedModules: true,
+        esModuleInterop: true,
+        lib: ['ES2022', 'DOM', 'DOM.Iterable'],
+        skipLibCheck: true,
+        noEmit: true,
+        types: ['vite/client'],
+        paths: {
+          '@/*': ['./src/*'],
+        },
+      },
+      include: ['src/**/*.ts', 'src/**/*.d.ts', 'src/**/*.tsx', 'src/**/*.vue'],
+    }
+
+    await this._fileService.writeFileRecursive(
+      path.join(projectPath, 'tsconfig.json'),
+      JSON.stringify(tsconfig, null, 2),
+    )
+  }
+}

package/src/infrastructure/generators/vue/use-app.generator.ts

@@ -0,0 +1,38 @@
+import path from 'node:path'
+
+import { type IFileService, type IGenerator } from '../../../domain'
+import type { VueOptions } from '../../../shared'
+
+export class UseAppVueGenerator implements IGenerator<VueOptions> {
+  constructor(private readonly _fileService: IFileService) {}
+
+  public async generate(projectPath: string, _options: VueOptions): Promise<void> {
+    const content = `import type { Nullable } from "@xeno-js/vue";
+import { Guards, XENO_SERVICES_KEY } from "@xeno-js/vue";
+import { inject } from "vue";
+import type { MyRegistry } from "./registry";
+
+let globalServices: Nullable<MyRegistry> = null;
+
+export const ServicesUtils = Object.freeze({
+    // Metodo per registrare i servizi al bootstrap
+    setGlobalServices(services: MyRegistry) {
+        globalServices = services;
+    },
+    useApp(): MyRegistry {
+        if (Guards.isDefined(globalServices))
+            return globalServices;
+
+        const services = inject<MyRegistry>(XENO_SERVICES_KEY);
+        if (!services)
+            throw new Error(
+                '[Xeno Error]: XenoServices not found. Did you provide them using app.provide(XENO_SERVICES_KEY, services)?',
+            );
+
+        return services;
+    }
+} as const);
+`
+    await this._fileService.writeFileRecursive(path.join(projectPath, 'src', 'use-app.ts'), content)
+  }
+}

package/src/infrastructure/generators/vue/vite-config.generator.ts

@@ -0,0 +1,35 @@
+// src/infrastructure/generators/viteconfig.generator.ts
+import path from 'node:path'
+
+import { type IFileService, type IGenerator } from '../../../domain'
+import type { VueOptions } from '../../../shared'
+
+export class ViteconfigGenerator implements IGenerator<VueOptions> {
+  constructor(private readonly _fileService: IFileService) {}
+
+  public async generate(projectPath: string, options: VueOptions): Promise<void> {
+    const tailwindImport = options.tailwind ? `\nimport tailwindcss from '@tailwindcss/vite';` : ''
+    const tailwindPlugin = options.tailwind ? `\n    tailwindcss(),` : ''
+
+    const content = `import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';${tailwindImport}
+import path from 'node:path';
+
+export default defineConfig({
+  plugins: [
+    vue(),${tailwindPlugin}
+  ],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  server: {
+    port: 5173,
+  }
+});
+`
+    const filePath = path.join(projectPath, 'vite.config.ts')
+    await this._fileService.writeFileRecursive(filePath, content)
+  }
+}

package/src/infrastructure/index.ts

@@ -0,0 +1,5 @@
+export * from './bootstrap'
+export * from './commands'
+export * from './dispatcher'
+export * from './file'
+export * from './strategies'