mfe-platform-cli 1.0.0

package/README.md

@@ -0,0 +1,61 @@
+# mfe-platform-cli
+
+Генератор воркспейса: host (shell), remote-модули (`services/*`), пакеты `@mfe-platform/shared` и `@mfe-platform/tracing`, манифест `mfe.platform.json`.
+
+## Установка
+
+```bash
+npm install -g mfe-platform-cli
+```
+
+Или без установки:
+
+```bash
+npx mfe-platform-cli create workspace ./my-app --with-remote shop
+```
+
+## Рекомендуемый сценарий
+
+1. **Оболочка + первый микрофронт одной командой** (трассировка уже в `packages/tracing`):
+
+```bash
+mfe-platform create workspace ./my-app --with-remote shop --remote-port 4181 --remote-title "Магазин"
+cd my-app && npm install && npm run dev
+```
+
+2. **Второй и следующие микрофронты** (подключаются к тому же host):
+
+```bash
+mfe-platform add remote ./my-app billing --port 4182 --title "Оплата"
+cd my-app && npm install && npm run dev
+```
+
+## Команды
+
+```bash
+mfe-platform create workspace <targetDir> [--host-name shell] [--host-port 4180] \
+  [--with-remote <name> [--remote-port 4181] [--remote-title "Заголовок"]]]
+mfe-platform add remote <workspaceDir> <remoteName> [--port 4181] [--title "Title"]
+```
+
+## Локальная разработка (из клонированного репозитория)
+
+```bash
+npm install
+npm run platform -- create workspace ./tmp-workspace
+```
+
+Общее описание монорепозитория и сценарии запуска — в корневом **`README.md`** репозитория `mfe-practice`.
+
+## Публикация в npm (для сопровождающих пакет)
+
+Публикуйте **из этого каталога**, не из корня `mfe-practice`:
+
+```bash
+cd tooling/mfe-platform
+npm login
+npm pack --dry-run
+npm publish
+```
+
+Перед первой публикацией обновите поле `repository.url` в `package.json` под ваш Git-репозиторий.

package/index.mjs

@@ -0,0 +1,1065 @@
+#!/usr/bin/env node
+import fs from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+const [, , command, entity, ...argv] = process.argv
+
+function fail(message) {
+  console.error(`mfe-platform: ${message}`)
+  process.exit(1)
+}
+
+function ensureDir(target) {
+  fs.mkdirSync(target, { recursive: true })
+}
+
+function writeFile(target, content) {
+  ensureDir(path.dirname(target))
+  fs.writeFileSync(target, content, 'utf8')
+}
+
+function readJson(target) {
+  return JSON.parse(fs.readFileSync(target, 'utf8'))
+}
+
+function writeJson(target, value) {
+  writeFile(target, `${JSON.stringify(value, null, 2)}\n`)
+}
+
+function parseArgs(args) {
+  const positionals = []
+  const options = {}
+
+  for (let i = 0; i < args.length; i += 1) {
+    const value = args[i]
+    if (!value.startsWith('--')) {
+      positionals.push(value)
+      continue
+    }
+
+    const key = value.slice(2)
+    const next = args[i + 1]
+    if (!next || next.startsWith('--')) {
+      options[key] = true
+      continue
+    }
+
+    options[key] = next
+    i += 1
+  }
+
+  return { positionals, options }
+}
+
+function toTitle(value) {
+  return value
+    .split(/[-_\s]+/)
+    .filter(Boolean)
+    .map((part) => part[0].toUpperCase() + part.slice(1))
+    .join(' ')
+}
+
+function workspacePackageName(workspaceDir) {
+  return path.basename(workspaceDir).toLowerCase().replace(/[^a-z0-9-]/g, '-')
+}
+
+function renderWorkspaceManifest({ hostName, hostPort, remotes }) {
+  return {
+    host: {
+      name: hostName,
+      title: `${toTitle(hostName)} Host`,
+      port: hostPort,
+    },
+    remotes,
+    packages: {
+      shared: '@mfe-platform/shared',
+      tracing: '@mfe-platform/tracing',
+    },
+  }
+}
+
+function renderRootPackageJson(workspaceDir) {
+  const resolved = path.resolve(workspaceDir)
+  const cliEntry = path.join(__dirname, 'index.mjs')
+  const relToCli = path.relative(resolved, cliEntry).split(path.sep).join('/')
+  const platformScript = `node ${relToCli}`
+
+  return {
+    name: workspacePackageName(workspaceDir),
+    private: true,
+    version: '1.0.0',
+    workspaces: ['host', 'services/*', 'packages/*'],
+    scripts: {
+      dev: 'node ./scripts/dev.mjs',
+      build: 'node ./scripts/build.mjs',
+      platform: platformScript,
+      'mfe:add-remote:example': 'echo "Use the library CLI: npm run platform -- add remote ./TARGET name --port 4181"',
+    },
+    devDependencies: {
+      concurrently: '^9.2.1',
+    },
+  }
+}
+
+function renderDevScript() {
+  return `import { spawn } from 'node:child_process'
+import { readFileSync } from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const rootDir = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..')
+const manifest = JSON.parse(readFileSync(path.join(rootDir, 'mfe.platform.json'), 'utf8'))
+
+const commands = [
+  'npm --prefix host run dev:app',
+  ...manifest.remotes.map(
+    (remote) => \`npm --prefix services/\${remote.name} run dev:remote\`,
+  ),
+]
+
+// Do not use shell: true — the shell would split args and npm --prefix would be parsed as
+// concurrently's own --prefix flag, breaking the logger (prev.replace is not a function).
+const child = spawn('npx', ['concurrently', ...commands], {
+  cwd: rootDir,
+  stdio: 'inherit',
+})
+
+child.on('exit', (code) => process.exit(code ?? 0))
+`
+}
+
+function renderBuildScript() {
+  return `import { execSync } from 'node:child_process'
+import { readFileSync } from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const rootDir = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..')
+const manifest = JSON.parse(readFileSync(path.join(rootDir, 'mfe.platform.json'), 'utf8'))
+
+execSync('npm --prefix host run build', { cwd: rootDir, stdio: 'inherit' })
+for (const remote of manifest.remotes) {
+  execSync(\`npm --prefix services/\${remote.name} run build\`, { cwd: rootDir, stdio: 'inherit' })
+}
+`
+}
+
+function renderWorkspaceReadme() {
+  return `# MFE Platform Workspace
+
+Сгенерированное workspace-приложение для host и набора remote-модулей.
+
+## Команды
+
+\`npm install\`
+
+\`npm run dev\` — из **корня воркспейса** поднять host и все remotes.
+
+\`cd host && npm run dev\` — то же самое: скрипт \`dev\` в host запускает общий \`scripts/dev.mjs\` и поднимает Vite-оболочку (\`dev:app\`) и все \`services/*\`.
+
+\`npm run build\` — собрать host и все remotes.
+
+## Манифест
+
+Файл \`mfe.platform.json\` содержит конфигурацию host и список remote-модулей.
+После генерации достаточно выполнить один раз \`npm install\` в корне workspace: npm workspaces установят зависимости для host, services и packages автоматически.
+
+Рекомендуемый сценарий: \`mfe-platform create workspace ./app --with-remote shop\`, затем \`cd app && npm install && npm run dev\` — сразу поднимаются оболочка и первый микрофронт. Дальше: \`mfe-platform add remote ./app payments --port 4182\`. Порты по умолчанию (4180+), чтобы не пересекаться с демо в корне репозитория (4170–4172).
+
+Host-файлы \`host/src/remotes.generated.ts\`, \`host/src/federation.d.ts\` и \`host/vite.config.ts\` обновляются через CLI.
+`
+}
+
+function renderTracingPackageJson() {
+  return {
+    name: '@mfe-platform/tracing',
+    private: true,
+    version: '1.0.0',
+    type: 'module',
+    main: './src/index.ts',
+    types: './src/index.ts',
+    exports: {
+      '.': './src/index.ts',
+      './package.json': './package.json',
+    },
+    dependencies: {
+      '@opentelemetry/api': '^1.9.0',
+      '@opentelemetry/context-zone': '^2.6.0',
+      '@opentelemetry/resources': '^2.1.0',
+      '@opentelemetry/sdk-trace-base': '^2.6.0',
+      '@opentelemetry/sdk-trace-web': '^2.6.0',
+    },
+    peerDependencies: {
+      react: '>=18',
+      'react-dom': '>=18',
+    },
+    devDependencies: {
+      typescript: '~5.9.3',
+    },
+  }
+}
+
+function renderTracingTsconfig() {
+  return `{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["src"]
+}
+`
+}
+
+function renderTracingIndex() {
+  return `import { trace, SpanStatusCode } from '@opentelemetry/api'
+import { resourceFromAttributes } from '@opentelemetry/resources'
+import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base'
+import { WebTracerProvider } from '@opentelemetry/sdk-trace-web'
+import { ZoneContextManager } from '@opentelemetry/context-zone'
+
+export type TraceEntry = {
+  timestamp: string
+  eventName: string
+  traceId: string
+  attributes: Record<string, string>
+}
+
+export type TracingOptions = {
+  serviceName?: string
+  onRecord?: (entry: TraceEntry) => void
+}
+
+let initialized = false
+let activeServiceName = 'mfe-host'
+let sink: ((entry: TraceEntry) => void) | undefined
+const traceEntries: TraceEntry[] = []
+const listeners = new Set<(entries: TraceEntry[]) => void>()
+
+export function initTracing(options: TracingOptions = {}) {
+  if (initialized) return
+
+  activeServiceName = options.serviceName ?? activeServiceName
+  sink = options.onRecord
+
+  const provider = new WebTracerProvider({
+    resource: resourceFromAttributes({ 'service.name': activeServiceName }),
+    spanProcessors: [
+      new BatchSpanProcessor({
+        export(_spans, resultCallback) {
+          resultCallback({ code: 0 })
+        },
+        shutdown() {
+          return Promise.resolve()
+        },
+      }),
+    ],
+  })
+
+  provider.register({
+    contextManager: new ZoneContextManager(),
+  })
+
+  initialized = true
+}
+
+export function recordTraceEvent(eventName: string, attributes: Record<string, string> = {}) {
+  try {
+    const tracer = trace.getTracer(activeServiceName, '1.0.0')
+    const span = tracer.startSpan(eventName, { attributes })
+    span.setStatus({ code: SpanStatusCode.OK })
+
+    const entry: TraceEntry = {
+      timestamp: new Date().toISOString(),
+      eventName,
+      traceId: span.spanContext().traceId,
+      attributes,
+    }
+
+    span.end()
+    traceEntries.unshift(entry)
+    if (traceEntries.length > 20) traceEntries.pop()
+
+    listeners.forEach((listener) => listener([...traceEntries]))
+    sink?.(entry)
+    return entry
+  } catch {
+    return undefined
+  }
+}
+
+export function subscribeTraceEvents(listener: (entries: TraceEntry[]) => void) {
+  listeners.add(listener)
+  listener([...traceEntries])
+  return () => listeners.delete(listener)
+}
+
+export function getTraceEvents() {
+  return [...traceEntries]
+}
+
+export function getLastTraceIds() {
+  return traceEntries.map((entry) => entry.traceId)
+}
+`
+}
+
+function renderSharedPackageJson() {
+  return {
+    name: '@mfe-platform/shared',
+    private: true,
+    version: '1.0.0',
+    type: 'module',
+    main: './src/index.ts',
+    types: './src/index.ts',
+    exports: {
+      '.': './src/index.ts',
+      './package.json': './package.json',
+    },
+    dependencies: {
+      zustand: '^5.0.2',
+    },
+    peerDependencies: {
+      react: '>=18',
+      'react-dom': '>=18',
+    },
+    devDependencies: {
+      typescript: '~5.9.3',
+    },
+  }
+}
+
+function renderSharedTsconfig() {
+  return renderTracingTsconfig()
+}
+
+function renderSharedIndex() {
+  return `import { create } from 'zustand'
+
+export type ServiceSnapshot = {
+  key: string
+  displayName: string
+  actionCount: number
+  lastAction: string
+  updatedAt: string
+}
+
+export type PlatformStore = {
+  services: Record<string, ServiceSnapshot>
+  registerService: (key: string, displayName: string) => void
+  recordAction: (key: string, actionName: string) => void
+  resetService: (key: string) => void
+}
+
+export const usePlatformStore = create<PlatformStore>((set) => ({
+  services: {},
+  registerService: (key, displayName) =>
+    set((state) => ({
+      services: {
+        ...state.services,
+        [key]: state.services[key] ?? {
+          key,
+          displayName,
+          actionCount: 0,
+          lastAction: 'registered',
+          updatedAt: new Date().toISOString(),
+        },
+      },
+    })),
+  recordAction: (key, actionName) =>
+    set((state) => {
+      const current = state.services[key] ?? {
+        key,
+        displayName: key,
+        actionCount: 0,
+        lastAction: 'registered',
+        updatedAt: new Date().toISOString(),
+      }
+
+      return {
+        services: {
+          ...state.services,
+          [key]: {
+            ...current,
+            actionCount: current.actionCount + 1,
+            lastAction: actionName,
+            updatedAt: new Date().toISOString(),
+          },
+        },
+      }
+    }),
+  resetService: (key) =>
+    set((state) => ({
+      services: {
+        ...state.services,
+        [key]: {
+          ...(state.services[key] ?? {
+            key,
+            displayName: key,
+          }),
+          actionCount: 0,
+          lastAction: 'reset',
+          updatedAt: new Date().toISOString(),
+        },
+      },
+    })),
+}))
+`
+}
+
+function renderHostPackageJson() {
+  return {
+    name: 'host',
+    private: true,
+    version: '0.0.0',
+    type: 'module',
+    scripts: {
+      dev: 'node ../scripts/dev.mjs',
+      'dev:app': 'vite',
+      build: 'vite build',
+      preview: 'vite preview',
+    },
+    dependencies: {
+      '@mfe-platform/shared': 'file:../packages/shared',
+      '@mfe-platform/tracing': 'file:../packages/tracing',
+      '@originjs/vite-plugin-federation': '^1.4.1',
+      react: '^19.2.0',
+      'react-dom': '^19.2.0',
+      zustand: '^5.0.2',
+    },
+    devDependencies: {
+      '@types/react': '^19.2.2',
+      '@types/react-dom': '^19.2.2',
+      '@vitejs/plugin-react': '^6.0.0',
+      typescript: '~5.9.3',
+      vite: '^8.0.0',
+    },
+  }
+}
+
+function renderHostTsconfig() {
+  return `{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "types": ["vite/client"]
+  },
+  "include": ["src", "vite.config.ts"]
+}
+`
+}
+
+function renderHostMain() {
+  return `import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { initTracing } from '@mfe-platform/tracing'
+import './index.css'
+import App from './App'
+
+initTracing({ serviceName: 'mfe-host' })
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
+`
+}
+
+function renderHostApp() {
+  return `import { Suspense, useEffect, useMemo, useState } from 'react'
+import { subscribeTraceEvents, type TraceEntry, recordTraceEvent } from '@mfe-platform/tracing'
+import { usePlatformStore } from '@mfe-platform/shared'
+import { remoteModules } from './remotes.generated'
+import './App.css'
+
+function App() {
+  const [activeKey, setActiveKey] = useState(remoteModules[0]?.key ?? '')
+  const [traceEntries, setTraceEntries] = useState<TraceEntry[]>([])
+  const servicesRecord = usePlatformStore((state) => state.services)
+  const services = useMemo(() => Object.values(servicesRecord), [servicesRecord])
+
+  useEffect(() => subscribeTraceEvents(setTraceEntries), [])
+
+  const activeRemote = useMemo(
+    () => remoteModules.find((remote) => remote.key === activeKey) ?? remoteModules[0],
+    [activeKey],
+  )
+
+  const ActiveComponent = activeRemote?.Component
+
+  const switchTab = (nextKey: string) => {
+    setActiveKey(nextKey)
+    recordTraceEvent('host:tab-switched', { 'mfe.target': nextKey })
+  }
+
+  return (
+    <main className="shell-layout">
+      <header className="shell-header">
+        <h1>MFE Platform Host</h1>
+        <p>Оболочка подключает удалённые модули и показывает общую наблюдаемость.</p>
+      </header>
+
+      {remoteModules.length > 0 ? (
+        <nav className="tabs">
+          {remoteModules.map((remote) => (
+            <button
+              key={remote.key}
+              className={remote.key === activeKey ? 'active' : ''}
+              onClick={() => switchTab(remote.key)}
+            >
+              {remote.title}
+            </button>
+          ))}
+        </nav>
+      ) : (
+        <section className="empty-state">
+          <p>Remote-модули пока не добавлены. Используйте CLI: add remote.</p>
+        </section>
+      )}
+
+      <section className="module-container">
+        {ActiveComponent ? (
+          <Suspense fallback={<p>Загрузка удалённого модуля...</p>}>
+            <ActiveComponent />
+          </Suspense>
+        ) : (
+          <p>Нет активного remote-модуля.</p>
+        )}
+      </section>
+
+      <section className="platform-panels">
+        <article className="panel-card">
+          <h2>Состояние сервисов</h2>
+          {services.length === 0 ? (
+            <p>Сервисы зарегистрируются после загрузки remote-модулей.</p>
+          ) : (
+            <ul>
+              {services.map((service) => (
+                <li key={service.key}>
+                  <strong>{service.displayName}</strong>
+                  <span>Действий: {service.actionCount}</span>
+                  <span>Последнее: {service.lastAction}</span>
+                </li>
+              ))}
+            </ul>
+          )}
+        </article>
+
+        <article className="panel-card">
+          <h2>Trace-события</h2>
+          {traceEntries.length === 0 ? (
+            <p>Trace-панель обновится после действий в host или remote-модулях.</p>
+          ) : (
+            <ul>
+              {traceEntries.slice(0, 8).map((entry) => (
+                <li key={entry.timestamp + '-' + entry.eventName}>
+                  <strong>{entry.eventName}</strong>
+                  <span>{entry.traceId.slice(0, 16)}...</span>
+                </li>
+              ))}
+            </ul>
+          )}
+        </article>
+      </section>
+    </main>
+  )
+}
+
+export default App
+`
+}
+
+function renderHostCss() {
+  return `.shell-layout {
+  max-width: 1120px;
+  margin: 0 auto;
+  padding: 32px 20px 60px;
+  font-family: Inter, Arial, sans-serif;
+  color: #132238;
+}
+
+.shell-header {
+  margin-bottom: 24px;
+}
+
+.tabs {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.tabs button {
+  border: 1px solid #b8c6d9;
+  background: #ffffff;
+  border-radius: 10px;
+  padding: 10px 16px;
+  cursor: pointer;
+}
+
+.tabs button.active {
+  background: #1f5eff;
+  color: white;
+  border-color: #1f5eff;
+}
+
+.module-container,
+.panel-card,
+.empty-state {
+  border: 1px solid #d9e3f0;
+  border-radius: 16px;
+  background: white;
+  padding: 20px;
+  box-shadow: 0 10px 32px rgba(17, 38, 68, 0.08);
+}
+
+.platform-panels {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 16px;
+  margin-top: 20px;
+}
+
+.panel-card ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  gap: 10px;
+}
+
+.panel-card li {
+  display: grid;
+  gap: 4px;
+}
+`
+}
+
+function renderHostIndexCss() {
+  return `:root {
+  background: #f4f7fb;
+}
+
+body {
+  margin: 0;
+}
+
+button,
+input {
+  font: inherit;
+}
+`
+}
+
+function renderHostHtml() {
+  return `<!doctype html>
+<html lang="ru">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>MFE Platform Host</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+`
+}
+
+function renderHostViteConfig(manifest) {
+  const remotes = manifest.remotes
+    .map((remote) => `        ${remote.name}: 'http://localhost:${remote.port}/assets/remoteEntry.js',`)
+    .join('\n')
+
+  return `import path from 'node:path'
+import { readFileSync } from 'node:fs'
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import federation from '@originjs/vite-plugin-federation'
+
+const manifest = JSON.parse(
+  readFileSync(new URL('../mfe.platform.json', import.meta.url), 'utf8'),
+)
+
+export default defineConfig({
+  resolve: {
+    dedupe: ['react', 'react-dom'],
+  },
+  plugins: [
+    react(),
+    federation({
+      name: manifest.host.name,
+      remotes: {
+${remotes}
+      },
+      shared: ['react', 'react-dom', 'zustand', '@mfe-platform/shared', '@mfe-platform/tracing'],
+    }),
+  ],
+  server: {
+    port: manifest.host.port,
+    strictPort: true,
+    fs: {
+      allow: [path.resolve(__dirname, '..'), path.resolve(__dirname, '../packages')],
+    },
+  },
+  build: {
+    target: 'esnext',
+  },
+})
+`
+}
+
+function renderHostRemotesGenerated(manifest) {
+  if (manifest.remotes.length === 0) {
+    return `export const remoteModules = [] as Array<{
+  key: string
+  title: string
+  Component: React.ComponentType
+}>
+`
+  }
+
+  const imports = [`import { lazy } from 'react'`]
+  const entries = manifest.remotes.map((remote) => {
+    const alias = `${remote.name}Remote`
+    imports.push(`const ${alias} = lazy(() => import('${remote.name}/RemoteApp'))`)
+    return `  { key: '${remote.name}', title: '${remote.title}', Component: ${alias} },`
+  })
+
+  return `${imports.join('\n')}
+
+export const remoteModules = [
+${entries.join('\n')}
+]
+`
+}
+
+function renderHostFederationDts(manifest) {
+  if (manifest.remotes.length === 0) {
+    return `export {}
+`
+  }
+
+  return `${manifest.remotes
+    .map(
+      (remote) => `declare module '${remote.name}/RemoteApp' {
+  import { FC } from 'react'
+  const Component: FC
+  export default Component
+}
+`,
+    )
+    .join('\n')}`
+}
+
+function renderRemotePackageJson(name) {
+  return {
+    name,
+    private: true,
+    version: '0.0.0',
+    type: 'module',
+    scripts: {
+      dev: 'vite',
+      // Стабильная схема: полная сборка + preview. Watch оставляет неполные бандлы и ломает remoteEntry.
+      'dev:remote': 'vite build && vite preview --strictPort',
+      build: 'vite build',
+      preview: 'vite preview',
+    },
+    dependencies: {
+      '@mfe-platform/shared': 'file:../../packages/shared',
+      '@mfe-platform/tracing': 'file:../../packages/tracing',
+      '@originjs/vite-plugin-federation': '^1.4.1',
+      react: '^19.2.0',
+      'react-dom': '^19.2.0',
+      zustand: '^5.0.2',
+    },
+    devDependencies: {
+      '@types/react': '^19.2.2',
+      '@types/react-dom': '^19.2.2',
+      '@vitejs/plugin-react': '^6.0.0',
+      concurrently: '^9.2.1',
+      typescript: '~5.9.3',
+      vite: '^8.0.0',
+    },
+  }
+}
+
+function renderRemoteTsconfig() {
+  return renderHostTsconfig()
+}
+
+function renderRemoteViteConfig(name, port) {
+  return `import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import federation from '@originjs/vite-plugin-federation'
+
+export default defineConfig({
+  resolve: {
+    dedupe: ['react', 'react-dom'],
+  },
+  plugins: [
+    react(),
+    federation({
+      name: '${name}',
+      filename: 'remoteEntry.js',
+      exposes: {
+        './RemoteApp': './src/RemoteApp.tsx',
+      },
+      shared: ['react', 'react-dom', 'zustand', '@mfe-platform/shared', '@mfe-platform/tracing'],
+    }),
+  ],
+  server: {
+    port: ${port},
+    strictPort: true,
+  },
+  preview: {
+    port: ${port},
+    strictPort: true,
+    cors: true,
+  },
+  build: {
+    target: 'esnext',
+    minify: false,
+    cssCodeSplit: false,
+  },
+})
+`
+}
+
+function renderRemoteMain() {
+  return `import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import RemoteApp from './RemoteApp'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <RemoteApp />
+  </StrictMode>,
+)
+`
+}
+
+function renderRemoteHtml(name) {
+  return `<!doctype html>
+<html lang="ru">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${toTitle(name)} Remote</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+`
+}
+
+function renderRemoteIndexCss() {
+  return `body {
+  margin: 0;
+  background: #f4f7fb;
+  font-family: Inter, Arial, sans-serif;
+}
+`
+}
+
+function renderRemoteCss() {
+  return `.remote-card {
+  border: 1px solid #d9e3f0;
+  border-radius: 16px;
+  background: white;
+  padding: 20px;
+  box-shadow: 0 10px 32px rgba(17, 38, 68, 0.08);
+}
+
+.remote-card button {
+  border: none;
+  background: #1f5eff;
+  color: white;
+  border-radius: 10px;
+  padding: 10px 14px;
+  cursor: pointer;
+}
+`
+}
+
+function renderRemoteApp(name, title) {
+  return `import { useEffect } from 'react'
+import { usePlatformStore } from '@mfe-platform/shared'
+import { recordTraceEvent } from '@mfe-platform/tracing'
+import './remote.css'
+
+const serviceKey = '${name}'
+const displayName = '${title}'
+
+export default function RemoteApp() {
+  const registerService = usePlatformStore((state) => state.registerService)
+  const recordAction = usePlatformStore((state) => state.recordAction)
+  const snapshot = usePlatformStore((state) => state.services[serviceKey])
+
+  useEffect(() => {
+    registerService(serviceKey, displayName)
+    recordTraceEvent('${name}:mounted', {
+      'mfe.kind': 'remote',
+      'mfe.service': serviceKey,
+    })
+  }, [registerService])
+
+  const handleAction = () => {
+    recordAction(serviceKey, 'business-action')
+    recordTraceEvent('${name}:business-action', {
+      'mfe.kind': 'remote',
+      'mfe.service': serviceKey,
+    })
+  }
+
+  return (
+    <section className="remote-card">
+      <h2>{displayName}</h2>
+      <p>
+        Этот remote-модуль создан через CLI платформы. Он автоматически подключён к host,
+        shared store и tracing API.
+      </p>
+      <p>Количество действий: {snapshot?.actionCount ?? 0}</p>
+      <p>Последнее действие: {snapshot?.lastAction ?? 'ещё нет'}</p>
+      <button onClick={handleAction}>Выполнить действие</button>
+    </section>
+  )
+}
+`
+}
+
+function createWorkspace(targetDir, options) {
+  const workspaceDir = path.resolve(targetDir)
+  ensureDir(workspaceDir)
+
+  const hostName = options['host-name'] || 'shell'
+  const hostPort = Number(options['host-port'] || 4180)
+  const manifest = renderWorkspaceManifest({ hostName, hostPort, remotes: [] })
+
+  writeJson(path.join(workspaceDir, 'mfe.platform.json'), manifest)
+  writeJson(path.join(workspaceDir, 'package.json'), renderRootPackageJson(workspaceDir))
+  writeFile(path.join(workspaceDir, 'scripts', 'dev.mjs'), renderDevScript())
+  writeFile(path.join(workspaceDir, 'scripts', 'build.mjs'), renderBuildScript())
+  writeFile(path.join(workspaceDir, 'README.md'), renderWorkspaceReadme())
+
+  writeJson(path.join(workspaceDir, 'packages', 'tracing', 'package.json'), renderTracingPackageJson())
+  writeFile(path.join(workspaceDir, 'packages', 'tracing', 'tsconfig.json'), renderTracingTsconfig())
+  writeFile(path.join(workspaceDir, 'packages', 'tracing', 'src', 'index.ts'), renderTracingIndex())
+
+  writeJson(path.join(workspaceDir, 'packages', 'shared', 'package.json'), renderSharedPackageJson())
+  writeFile(path.join(workspaceDir, 'packages', 'shared', 'tsconfig.json'), renderSharedTsconfig())
+  writeFile(path.join(workspaceDir, 'packages', 'shared', 'src', 'index.ts'), renderSharedIndex())
+
+  writeJson(path.join(workspaceDir, 'host', 'package.json'), renderHostPackageJson())
+  writeFile(path.join(workspaceDir, 'host', 'tsconfig.json'), renderHostTsconfig())
+  writeFile(path.join(workspaceDir, 'host', 'vite.config.ts'), renderHostViteConfig(manifest))
+  writeFile(path.join(workspaceDir, 'host', 'index.html'), renderHostHtml())
+  writeFile(path.join(workspaceDir, 'host', 'src', 'main.tsx'), renderHostMain())
+  writeFile(path.join(workspaceDir, 'host', 'src', 'App.tsx'), renderHostApp())
+  writeFile(path.join(workspaceDir, 'host', 'src', 'App.css'), renderHostCss())
+  writeFile(path.join(workspaceDir, 'host', 'src', 'index.css'), renderHostIndexCss())
+  writeFile(path.join(workspaceDir, 'host', 'src', 'remotes.generated.ts'), renderHostRemotesGenerated(manifest))
+  writeFile(path.join(workspaceDir, 'host', 'src', 'federation.d.ts'), renderHostFederationDts(manifest))
+
+  ensureDir(path.join(workspaceDir, 'services'))
+
+  console.log(`Workspace created at ${workspaceDir}`)
+
+  const firstRemote = options['with-remote']
+  if (firstRemote) {
+    const name = String(firstRemote)
+    addRemote(workspaceDir, name, {
+      port: options['remote-port'],
+      title: options['remote-title'] || toTitle(name),
+      silent: true,
+    })
+    console.log('')
+    console.log(`Готово: оболочка (host) и первый микрофронт «${name}» (трассировка уже в shared/tracing).`)
+    console.log(`  cd ${workspaceDir}`)
+    console.log(`  npm install`)
+    console.log(`  npm run dev`)
+  } else {
+    console.log(`Next step: mfe-platform add remote ${workspaceDir} <имя> --port 4181`)
+    console.log(`  или: mfe-platform create workspace ${targetDir} --with-remote <имя>`)
+  }
+}
+
+function addRemote(workspaceDir, remoteName, options) {
+  const rootDir = path.resolve(workspaceDir)
+  const manifestPath = path.join(rootDir, 'mfe.platform.json')
+  if (!fs.existsSync(manifestPath)) fail(`manifest not found: ${manifestPath}`)
+
+  const manifest = readJson(manifestPath)
+  if (manifest.remotes.some((remote) => remote.name === remoteName)) {
+    fail(`remote already exists: ${remoteName}`)
+  }
+
+  const port = Number(options.port || 4181 + manifest.remotes.length)
+  const title = options.title || toTitle(remoteName)
+  manifest.remotes.push({ name: remoteName, title, port })
+  writeJson(manifestPath, manifest)
+
+  const remoteDir = path.join(rootDir, 'services', remoteName)
+  writeJson(path.join(remoteDir, 'package.json'), renderRemotePackageJson(remoteName))
+  writeFile(path.join(remoteDir, 'tsconfig.json'), renderRemoteTsconfig())
+  writeFile(path.join(remoteDir, 'vite.config.ts'), renderRemoteViteConfig(remoteName, port))
+  writeFile(path.join(remoteDir, 'index.html'), renderRemoteHtml(remoteName))
+  writeFile(path.join(remoteDir, 'src', 'main.tsx'), renderRemoteMain())
+  writeFile(path.join(remoteDir, 'src', 'RemoteApp.tsx'), renderRemoteApp(remoteName, title))
+  writeFile(path.join(remoteDir, 'src', 'remote.css'), renderRemoteCss())
+  writeFile(path.join(remoteDir, 'src', 'index.css'), renderRemoteIndexCss())
+
+  writeFile(path.join(rootDir, 'host', 'vite.config.ts'), renderHostViteConfig(manifest))
+  writeFile(path.join(rootDir, 'host', 'src', 'remotes.generated.ts'), renderHostRemotesGenerated(manifest))
+  writeFile(path.join(rootDir, 'host', 'src', 'federation.d.ts'), renderHostFederationDts(manifest))
+
+  if (!options.silent) {
+    console.log(`Remote '${remoteName}' added to ${rootDir}`)
+    console.log(`Run inside workspace:`)
+    console.log(`  cd ${rootDir}`)
+    console.log(`  npm install`)
+    console.log(`  npm run dev`)
+  }
+}
+
+function printHelp() {
+  console.log(`Usage:
+  mfe-platform create workspace <targetDir> [--host-name shell] [--host-port 4180]
+    [--with-remote <name> [--remote-port 4181] [--remote-title "Заголовок"]]]
+  mfe-platform add remote <workspaceDir> <remoteName> [--port 4181] [--title Catalog]
+
+  Сценарий: create workspace с --with-remote → npm install → npm run dev;
+  затем add remote для следующих микрофронтендов.
+
+  (из репозитория: npm run platform -- …)
+`)
+}
+
+const { positionals, options } = parseArgs(argv)
+
+if (command === 'create' && entity === 'workspace') {
+  const [targetDir] = positionals
+  if (!targetDir) fail('targetDir is required')
+  createWorkspace(targetDir, options)
+} else if (command === 'add' && entity === 'remote') {
+  const [workspaceDir, remoteName] = positionals
+  if (!workspaceDir || !remoteName) fail('workspaceDir and remoteName are required')
+  addRemote(workspaceDir, remoteName, options)
+} else {
+  printHelp()
+}

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "mfe-platform-cli",
+  "version": "1.0.0",
+  "description": "CLI для генерации воркспейса микрофронтендов (Vite, Module Federation, shared store, tracing)",
+  "type": "module",
+  "license": "MIT",
+  "author": "",
+  "keywords": [
+    "mfe",
+    "micro-frontend",
+    "vite",
+    "module-federation",
+    "cli",
+    "scaffold"
+  ],
+  "bin": {
+    "mfe-platform": "index.mjs"
+  },
+  "files": [
+    "index.mjs",
+    "README.md"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}