import {Meta} from '@storybook/addon-docs/blocks'

<Meta title='@dxtmisha/ru/scripts/Classes/DesignScreenshot - Автоматическое создание скриншотов'/>

# Класс DesignScreenshot

Класс `DesignScreenshot` представляет собой специализированную утилиту разработчика, предназначенную для автоматического захвата скриншотов компонентов/страниц, HTML-кода и стилей путем запуска локального сервера разработки в фоновом режиме и сканирования его с помощью безголового браузера (headless browser).

## Ключевые особенности

- **Автоматический запуск сервера** — запускает дочерний процесс `npm run dev` в фоновом режиме и считывает поток его вывода.
- **Автоопределение порта** — парсит текстовый поток вывода терминала для извлечения адреса локального сервера (`http://localhost:...`).
- **Единый конвейер захвата** — использует `BrowserItem` для захвата скриншотов всей страницы, получения HTML-тела страницы и извлечения активных стилей CSS с последующим сохранением всех файлов в папку `./ai-screenshot/`.
- **Самозавершающийся цикл** — автоматически завершает фоновый процесс дочернего сервера разработки сразу после успешного захвата данных, сохраняя системные ресурсы.

## Инициализация

`DesignScreenshot` может быть инициализирован с необязательным префиксом имени выходного файла.

**Параметры конструктора:**
- `file: string` — (Опционально) Префикс пути к выходному файлу (по умолчанию: `'./ai-screenshot/screenshot'`).

```typescript
import { DesignScreenshot } from '@dxtmisha/scripts'

const capturer = new DesignScreenshot('./ai-screenshot/mockup-preview')
```

## Методы

### Управление

#### `make`
Запускает процесс создания скриншотов: создает структуру выходных каталогов, запускает сервер разработки и вешает слушатели вывода для триггера захвата.

**Возвращает:** `Promise<void>`

```typescript
await capturer.make()
```

#### `makeUrl`
Извлекает адрес локального сервера из консольного вывода команды.

**Параметры:**
- `data: string` — Кусок stdout-потока терминала.

**Возвращает:** `this`

### Защищенные методы и свойства

- `isReading: boolean` — Флаг-предохранитель для предотвращения нескольких параллельных вызовов захвата.
- `url?: string` — Обнаруженный адрес локального сервера разработки.
- `listener(): Promise<boolean>` — Триггер безголового браузера, который захватывает скриншоты, HTML-тело и стили.
- `makeServer(): this` — Запускает фоновый дочерний процесс `npm run dev`.
