Code generators

Генераторы кода в Fresh представляют собой мощный инструмент для ускорения разработки приложений, позволяя создавать готовые шаблоны компонентов, маршрутов и страниц с минимальными усилиями. Они встроены в CLI фреймворка и позволяют поддерживать стандартизированную структуру проекта без ручного написания повторяющегося кода.

CLI и команды генерации

Основной способ работы с генераторами — использование команды fresh gen в терминале. Структура команды:

fresh gen <тип> <имя> [опции]
  • <тип> — тип сущности, которую необходимо сгенерировать (page, component, island, route).
  • <имя> — имя создаваемой сущности, которое автоматически используется для имени файла и идентификаторов.
  • [опции] — дополнительные параметры, задающие поведение генерации.

Примеры использования:

fresh gen page Home
fresh gen component Header --island
fresh gen route /about

Каждая команда создаёт набор файлов с шаблонной структурой, соответствующей принятым в Fresh стандартам.

Структура сгенерированных сущностей

Страница (page)

Генерация страницы создаёт директорию в папке routes с файлом .tsx и, при необходимости, файлом стилей:

routes/
└── home/
    ├── index.tsx
    └── style.css

index.tsx содержит базовую структуру компонента страницы с экспортом функции Page, которая рендерит HTML. Fresh автоматически добавляет необходимые импорты для использования Island-компонентов, если они подключены на странице.

Компонент (component)

Компоненты могут быть как обычными React-подобными компонентами, так и Island-компонентами. Island-компоненты рендерятся на клиенте, обеспечивая интерактивность, а обычные компоненты остаются статическими на сервере.

Пример структуры Island-компонента:

components/
└── Header.tsx

Файл содержит шаблон с импортом useState, useEffect и необходимой логикой для интерактивности:

import { useState } from "preact/hooks";

export default function Header() {
    const [count, setCount] = useState(0);
    return (
        <header>
            <h1>Header Component</h1>
            <button onCl ick={() => setCount(count + 1)}>{count}</button>
        </header>
    );
}

Параметры генерации

Генераторы поддерживают следующие опции:

  • --island — создание Island-компонента с клиентской логикой.
  • --style — добавление отдельного CSS-файла.
  • --test — генерация файла для юнит-тестов вместе с компонентом.
  • --force — перезапись существующих файлов без запроса.

Использование опций позволяет настраивать создаваемый код под конкретные задачи, уменьшая необходимость ручного вмешательства после генерации.

Пользовательские шаблоны

Fresh CLI позволяет создавать собственные шаблоны генераторов для повторяющихся шаблонных решений. Для этого используется папка templates в корне проекта. Структура:

templates/
└── my-component/
    ├── template.tsx
    └── style.css

Файл template.tsx содержит базовую структуру компонента с маркерами ${name}, ${style} и другими переменными, которые CLI подставляет при генерации. Это позволяет поддерживать единый стиль кода в команде.

Интеграция с TypeScript

По умолчанию Fresh генерирует файлы с расширением .tsx и .ts. Генераторы создают корректные типы для пропсов компонентов, а страницы включают строгую типизацию для маршрутов и параметров запроса:

interface PageProps {
    title: string;
}

export default function Page({ title }: PageProps) {
    return <h1>{title}</h1>;
}

Это обеспечивает полную совместимость с TypeScript и повышает безопасность кода.

Автоматизация и поддержка больших проектов

Генераторы кода особенно полезны для крупных проектов с десятками маршрутов и компонентами. Они сокращают рутинные операции:

  • Создание одинаковых структур страниц и компонентов.
  • Генерация Island-компонентов с интерактивной логикой.
  • Поддержка согласованной типизации и стилей.
  • Возможность обновления всех шаблонов централизованно при изменении архитектурных стандартов.

С помощью генераторов уменьшается риск ошибок при ручном создании файлов и повышается скорость разработки.

Ограничения и особенности

  • Генераторы создают шаблонный код, который требует доработки под конкретную бизнес-логику.
  • Опция --force удаляет существующие файлы без предупреждения.
  • Island-компоненты требуют корректного импорта и подключения скриптов для клиентской части.

Генераторы Fresh обеспечивают систематизацию проекта, ускоряют создание стандартных элементов и минимизируют количество повторяющегося кода, сохраняя при этом гибкость архитектуры.

Оглавление