@gravity-ui/app-builder 0.28.0 → 0.28.1-beta.0

package/dist/commands/dev/index.js

@@ -34,8 +34,70 @@ const rimraf_1 = require("rimraf");
 const utils_1 = require("../../common/utils");
 const logger_1 = __importDefault(require("../../common/logger"));
 const paths_1 = __importDefault(require("../../common/paths"));
+// Импортируем систему табов для логирования
+const TerminalTabs_1 = require("./ui/TerminalTabs");
+// Глобальная система табов
+let terminalTabs;
+// Функция для добавления лога в систему табов
+function addLogToTabs(type, message, level = 'message') {
+    if (terminalTabs && process.stdout.isTTY) {
+        terminalTabs.addLog({
+            type,
+            message,
+            timestamp: Date.now(),
+            level,
+        });
+    }
+}
+// Обёртка для logger с интеграцией в табы
+function createLoggerWrapper(type) {
+    return {
+        message: (...args) => {
+            const message = args.join(' ');
+            addLogToTabs(type, message, 'message');
+            if (!process.stdout.isTTY) {
+                logger_1.default.message(`[${type}]`, message);
+            }
+        },
+        success: (...args) => {
+            const message = args.join(' ');
+            addLogToTabs(type, message, 'success');
+            if (!process.stdout.isTTY) {
+                logger_1.default.success(`[${type}]`, message);
+            }
+        },
+        warning: (...args) => {
+            const message = args.join(' ');
+            addLogToTabs(type, message, 'warning');
+            if (!process.stdout.isTTY) {
+                logger_1.default.warning(`[${type}]`, message);
+            }
+        },
+        error: (...args) => {
+            const message = args.join(' ');
+            addLogToTabs(type, message, 'error');
+            if (!process.stdout.isTTY) {
+                logger_1.default.error(`[${type}]`, message);
+            }
+        },
+        verbose: (...args) => {
+            const message = args.join(' ');
+            addLogToTabs(type, message, 'verbose');
+            if (!process.stdout.isTTY) {
+                logger_1.default.verbose(`[${type}]`, message);
+            }
+        },
+    };
+}
 async function default_1(config) {
     process.env.NODE_ENV = 'development';
+    // Инициализируем систему табов только в TTY
+    if (process.stdout.isTTY) {
+        terminalTabs = new TerminalTabs_1.TerminalTabs();
+        terminalTabs.initialize();
+        // Добавляем начальный лог
+        addLogToTabs('all', 'Запуск режима разработки...', 'message');
+    }
     const shouldCompileClient = (0, utils_1.shouldCompileTarget)(config.target, 'client');
     const shouldCompileServer = (0, utils_1.shouldCompileTarget)(config.target, 'server');
     if (shouldCompileClient && shouldCompileServer) {
@@ -48,7 +110,8 @@ async function default_1(config) {
     const { inspect, inspectBrk } = config.server;
     const startNodemon = () => {
         if (needToStartNodemon && serverCompiled && clientCompiled) {
-            logger_1.default.message('Starting application at', serverPath);
+            const serverLogger = createLoggerWrapper('server');
+            serverLogger.message('Starting application at', serverPath);
             const nodeArgs = ['--enable-source-maps'];
             if (inspect || inspectBrk) {
                 nodeArgs.push(`--${inspect ? 'inspect' : 'inspect-brk'}=:::${inspect || inspectBrk}`);
@@ -77,6 +140,8 @@ async function default_1(config) {
         serverCompilation.onMessage((msg) => {
             if (typeof msg === 'object' && 'type' in msg && msg.type === 'Emitted') {
                 serverCompiled = true;
+                const serverLogger = createLoggerWrapper('server');
+                serverLogger.success('Server compilation completed');
                 startNodemon();
             }
         });
@@ -85,25 +150,38 @@ async function default_1(config) {
     if (shouldCompileClient) {
         const { watchClientCompilation } = await import('./client.js');
         clientCompilation = await watchClientCompilation(config, () => {
-            logger_1.default.success('Manifest was compiled successfully');
+            const clientLogger = createLoggerWrapper('client');
+            clientLogger.success('Manifest was compiled successfully');
             clientCompiled = true;
             startNodemon();
         });
     }
-    process.on('SIGINT', async () => {
-        logger_1.default.success('\nCleaning up...');
+    const cleanup = async () => {
+        if (terminalTabs) {
+            terminalTabs.destroy();
+        }
         await serverCompilation?.stop('SIGINT');
         await clientCompilation?.stop();
+    };
+    process.on('SIGINT', async () => {
+        if (!process.stdout.isTTY) {
+            logger_1.default.success('\nCleaning up...');
+        }
+        await cleanup();
         process.exit(1);
     });
     process.on('SIGTERM', async () => {
-        logger_1.default.success('\nCleaning up...');
-        await serverCompilation?.stop('SIGTERM');
-        await clientCompilation?.stop();
+        if (!process.stdout.isTTY) {
+            logger_1.default.success('\nCleaning up...');
+        }
+        await cleanup();
         process.exit(1);
     });
     (0, signal_exit_1.onExit)((_code, signal) => {
         serverCompilation?.stop(signal);
         clientCompilation?.stop();
+        if (terminalTabs) {
+            terminalTabs.destroy();
+        }
     });
 }

package/dist/commands/dev/ui/LogCollector.d.ts

@@ -0,0 +1,13 @@
+import { EventEmitter } from 'events';
+import { BaseLogger } from '../../../common/logger';
+import type { LogEntry } from './TerminalTabs';
+export declare class LogCollector extends EventEmitter {
+    private logs;
+    private maxLogs;
+    constructor(maxLogs?: number);
+    addLog(entry: LogEntry): void;
+    getLogs(): LogEntry[];
+    clear(): void;
+    createLogger(type: 'server' | 'client', namespace?: string, verbose?: boolean): BaseLogger;
+}
+export declare const globalLogCollector: LogCollector;

package/dist/commands/dev/ui/LogCollector.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.globalLogCollector = exports.LogCollector = void 0;
+const events_1 = require("events");
+const logger_1 = require("../../../common/logger");
+class LogCollector extends events_1.EventEmitter {
+    logs = [];
+    maxLogs = 1000;
+    constructor(maxLogs = 1000) {
+        super();
+        this.maxLogs = maxLogs;
+    }
+    addLog(entry) {
+        this.logs.push(entry);
+        if (this.logs.length > this.maxLogs) {
+            this.logs = this.logs.slice(-this.maxLogs);
+        }
+        this.emit('log', entry);
+    }
+    getLogs() {
+        return [...this.logs];
+    }
+    clear() {
+        this.logs = [];
+        this.emit('clear');
+    }
+    createLogger(type, namespace, verbose = false) {
+        const logger = new logger_1.Logger(namespace, verbose);
+        // Перехватываем методы логирования
+        const originalMessage = logger.message.bind(logger);
+        const originalSuccess = logger.success.bind(logger);
+        const originalWarning = logger.warning.bind(logger);
+        const originalError = logger.error.bind(logger);
+        const originalVerbose = logger.verbose.bind(logger);
+        logger.message = (...args) => {
+            const message = args.join(' ');
+            this.addLog({
+                type,
+                message,
+                timestamp: Date.now(),
+                level: 'message',
+            });
+            return originalMessage(...args);
+        };
+        logger.success = (...args) => {
+            const message = args.join(' ');
+            this.addLog({
+                type,
+                message,
+                timestamp: Date.now(),
+                level: 'success',
+            });
+            return originalSuccess(...args);
+        };
+        logger.warning = (...args) => {
+            const message = args.join(' ');
+            this.addLog({
+                type,
+                message,
+                timestamp: Date.now(),
+                level: 'warning',
+            });
+            return originalWarning(...args);
+        };
+        logger.error = (...args) => {
+            const message = args.join(' ');
+            this.addLog({
+                type,
+                message,
+                timestamp: Date.now(),
+                level: 'error',
+            });
+            return originalError(...args);
+        };
+        logger.verbose = (...args) => {
+            const message = args.join(' ');
+            this.addLog({
+                type,
+                message,
+                timestamp: Date.now(),
+                level: 'verbose',
+            });
+            return originalVerbose(...args);
+        };
+        return logger;
+    }
+}
+exports.LogCollector = LogCollector;
+exports.globalLogCollector = new LogCollector();

package/dist/commands/dev/ui/TerminalTabs.d.ts

@@ -0,0 +1,25 @@
+import { EventEmitter } from 'events';
+export interface LogEntry {
+    type: 'server' | 'client' | 'all';
+    message: string;
+    timestamp: number;
+    level: 'message' | 'success' | 'warning' | 'error' | 'verbose';
+}
+export declare class TerminalTabs extends EventEmitter {
+    private logs;
+    private activeTab;
+    private maxLogs;
+    private rl;
+    private isInitialized;
+    constructor(maxLogs?: number);
+    initialize(): void;
+    addLog(entry: LogEntry): void;
+    destroy(): void;
+    private setupKeyHandlers;
+    private clearLogs;
+    private render;
+    private renderTabs;
+    private renderLogs;
+    private formatLogMessage;
+    private renderHelp;
+}

package/dist/commands/dev/ui/TerminalTabs.js

@@ -0,0 +1,183 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TerminalTabs = void 0;
+const readline = __importStar(require("readline"));
+const events_1 = require("events");
+// ANSI escape codes для цветов
+const ansi = {
+    reset: '\x1b[0m',
+    bold: '\x1b[1m',
+    dim: '\x1b[2m',
+    cyan: '\x1b[36m',
+    blue: '\x1b[34m',
+    green: '\x1b[32m',
+    yellow: '\x1b[33m',
+    red: '\x1b[31m',
+    white: '\x1b[37m',
+    bgBlue: '\x1b[44m',
+};
+const tabs = [
+    { key: 'all', title: 'Все логи', filter: () => true },
+    { key: 'server', title: 'Сервер', filter: (log) => log.type === 'server' },
+    { key: 'client', title: 'Клиент', filter: (log) => log.type === 'client' },
+];
+class TerminalTabs extends events_1.EventEmitter {
+    logs = [];
+    activeTab = 0;
+    maxLogs = 1000;
+    rl;
+    isInitialized = false;
+    constructor(maxLogs = 1000) {
+        super();
+        this.maxLogs = maxLogs;
+        this.rl = readline.createInterface({
+            input: process.stdin,
+            output: process.stdout,
+        });
+        this.setupKeyHandlers();
+    }
+    initialize() {
+        if (this.isInitialized)
+            return;
+        this.isInitialized = true;
+        console.clear();
+        this.render();
+    }
+    addLog(entry) {
+        this.logs.push(entry);
+        if (this.logs.length > this.maxLogs) {
+            this.logs = this.logs.slice(-this.maxLogs);
+        }
+        // Обновляем только если таб инициализирован
+        if (this.isInitialized) {
+            this.render();
+        }
+    }
+    destroy() {
+        if (process.stdin.isTTY) {
+            process.stdin.setRawMode(false);
+        }
+        this.rl.close();
+    }
+    setupKeyHandlers() {
+        if (process.stdin.isTTY) {
+            process.stdin.setRawMode(true);
+            process.stdin.setEncoding('utf8');
+            process.stdin.on('data', (key) => {
+                // Ctrl+C
+                if (key === '\u0003') {
+                    process.exit();
+                }
+                switch (key) {
+                    case '\u001b[D': // Стрелка влево
+                    case 'h':
+                        this.activeTab = this.activeTab > 0 ? this.activeTab - 1 : tabs.length - 1;
+                        this.render();
+                        break;
+                    case '\u001b[C': // Стрелка вправо
+                    case 'l':
+                        this.activeTab = this.activeTab < tabs.length - 1 ? this.activeTab + 1 : 0;
+                        this.render();
+                        break;
+                    case 'c':
+                        this.clearLogs();
+                        break;
+                    case 'q':
+                        process.exit();
+                        break;
+                }
+            });
+        }
+    }
+    clearLogs() {
+        this.logs = [];
+        this.render();
+    }
+    render() {
+        if (!process.stdout.isTTY)
+            return;
+        // Очищаем экран
+        console.clear();
+        // Рендерим табы
+        this.renderTabs();
+        // Рендерим логи для активного таба
+        this.renderLogs();
+        // Рендерим справку
+        this.renderHelp();
+    }
+    renderTabs() {
+        let tabsLine = '';
+        tabs.forEach((tab, index) => {
+            const isActive = index === this.activeTab;
+            const title = ` ${tab.title} `;
+            if (isActive) {
+                tabsLine += `${ansi.cyan}${ansi.bold}${ansi.bgBlue}${title}${ansi.reset}`;
+            }
+            else {
+                tabsLine += `${ansi.white}${title}${ansi.reset}`;
+            }
+            tabsLine += '  ';
+        });
+        console.log(tabsLine);
+        console.log(`${ansi.dim}${'─'.repeat(process.stdout.columns || 80)}${ansi.reset}`);
+    }
+    renderLogs() {
+        const currentTab = tabs[this.activeTab];
+        if (!currentTab)
+            return;
+        const filteredLogs = this.logs.filter(currentTab.filter);
+        const displayLogs = filteredLogs.slice(-40); // Показываем последние 40 логов
+        displayLogs.forEach((log) => {
+            console.log(this.formatLogMessage(log));
+        });
+    }
+    formatLogMessage(log) {
+        const timestamp = new Date(log.timestamp).toLocaleTimeString();
+        const prefix = `${ansi.dim}[${timestamp}] ${ansi.reset}`;
+        let colorCode = ansi.white;
+        switch (log.level) {
+            case 'success':
+                colorCode = ansi.green;
+                break;
+            case 'warning':
+                colorCode = ansi.yellow;
+                break;
+            case 'error':
+                colorCode = ansi.red;
+                break;
+            case 'verbose':
+                colorCode = ansi.dim;
+                break;
+        }
+        return `${prefix}${colorCode}${log.message}${ansi.reset}`;
+    }
+    renderHelp() {
+        const filteredCount = this.logs.filter(tabs[this.activeTab]?.filter || (() => true)).length;
+        const help = `${ansi.dim}\nУправление: ← → (или h/l) - переключение табов | c - очистить | q - выход | Показано: ${filteredCount} логов${ansi.reset}`;
+        console.log(help);
+    }
+}
+exports.TerminalTabs = TerminalTabs;

package/dist/commands/dev/ui/demo.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/commands/dev/ui/demo.js

@@ -0,0 +1,61 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const TerminalTabs_1 = require("./TerminalTabs");
+const tabs = new TerminalTabs_1.TerminalTabs();
+// Инициализируем интерфейс табов
+tabs.initialize();
+// Симулируем логи от сервера и клиента
+let logCounter = 0;
+const addServerLog = () => {
+    tabs.addLog({
+        type: 'server',
+        message: `Server log message ${++logCounter}`,
+        timestamp: Date.now(),
+        level: Math.random() > 0.7 ? 'success' : 'message',
+    });
+};
+const addClientLog = () => {
+    tabs.addLog({
+        type: 'client',
+        message: `Client build progress ${++logCounter}`,
+        timestamp: Date.now(),
+        level: Math.random() > 0.8 ? 'warning' : 'message',
+    });
+};
+const addErrorLog = () => {
+    const type = Math.random() > 0.5 ? 'server' : 'client';
+    tabs.addLog({
+        type,
+        message: `Error in ${type}: Something went wrong ${++logCounter}`,
+        timestamp: Date.now(),
+        level: 'error',
+    });
+};
+// Добавляем начальные логи
+tabs.addLog({
+    type: 'all',
+    message: 'Демонстрация системы табов запущена',
+    timestamp: Date.now(),
+    level: 'success',
+});
+// Симулируем активность
+setInterval(() => {
+    const rand = Math.random();
+    if (rand > 0.7) {
+        addServerLog();
+    }
+    else if (rand > 0.4) {
+        addClientLog();
+    }
+    else if (rand > 0.9) {
+        addErrorLog();
+    }
+}, 500);
+// Обработка выхода
+process.on('SIGINT', () => {
+    tabs.destroy();
+    console.log('\nДемонстрация завершена');
+    process.exit(0);
+});
+console.log('Нажмите Ctrl+C для выхода, стрелки влево/вправо для переключения табов, c для очистки');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/app-builder",
-  "version": "0.28.0",
+  "version": "0.28.1-beta.0",
   "description": "Develop and build your React client-server projects, powered by typescript and webpack",
   "license": "MIT",
   "type": "commonjs",
@@ -75,15 +75,16 @@
     "@rspack/core": "1.3.9",
     "@rspack/dev-server": "^1.1.1",
     "@rspack/plugin-react-refresh": "^1.4.1",
-    "@statoscope/webpack-plugin": "^5.29.0",
     "@statoscope/stats": "^5.28.1",
     "@statoscope/stats-extension-compressed": "^5.28.1",
     "@statoscope/webpack-model": "^5.29.0",
+    "@statoscope/webpack-plugin": "^5.29.0",
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0",
     "@svgr/webpack": "^8.1.0",
     "@swc/core": "1.11.24",
     "@swc/plugin-transform-imports": "7.0.3",
+    "@types/react": "^19.1.6",
     "babel-loader": "^9.2.1",
     "babel-plugin-import": "^1.13.8",
     "babel-plugin-inline-react-svg": "^2.0.2",
@@ -107,6 +108,8 @@
     "fork-ts-checker-webpack-plugin": "^9.0.2",
     "fs-extra": "^11.2.0",
     "get-port": "^7.1.0",
+    "ink": "^5.2.1",
+    "keypress": "^0.2.1",
     "mime-types": "^2.1.35",
     "mini-css-extract-plugin": "^2.9.1",
     "moment-timezone-data-webpack-plugin": "^1.5.1",