frontend-style-guide/parts/8-1-templates-generation.md

title

title
Шаблоны генерации кода

Шаблоны генерации кода

Подход к использованию шаблонов и генерации кода для стандартизации структуры и ускорения разработки.

Что генерируем

• Компоненты (screens, layouts, widgets, features, entities).
• Страницы (nextjs app, pages)
• Типовые инфраструктурные модули (например, store).

Чем генерируем

VSCode extension

расширение VS Code — создание файлов и папок из шаблонов через UI‑интерфейс внутри редактора.

CLI (для агентов)

@gromlab/create — CLI для генерации файлов и папок по шаблонам.

Примеры:

# Создать компонент
create component button

# Создать компонент используя NPX
npx @gromlab/create component button

Структура папок

Все шаблоны лежат в .templates/ в корне проекта.
Каждая папка в .templates/ — это уникальный шаблон.

.templates/                     # корневая папка всех шаблонов
├── component/                  # шаблон компонента
│   └── {{name.kebabCase}}/
│       ├── styles/
│       │   └── {{name.kebabCase}}.module.css
│       ├── types/
│       │   └── {{name.kebabCase}}.interface.ts
│       ├── {{name.kebabCase}}.ui.tsx
│       └── index.ts
└── store/                      # шаблон Zustand стора
    └── {{name.kebabCase}}/
        ├── {{name.kebabCase}}.store.ts
        ├── {{name.kebabCase}}.type.ts
        └── index.ts

Синтаксис

• Переменные в шаблонах работают в именах файлов/папок и внутри файлов.
• Базовая переменная — name.

Формат записи переменной:

{{variable}}

Модификаторы — это преобразования переменной, которые меняют регистр и формат записи. Они пишутся после имени через точку и применяются в момент генерации.

{{name.pascalCase}} -> MyButton
{{name.camelCase}} -> myButton
{{name.kebabCase}} -> my-button
{{name.snakeCase}} -> my_button
{{name.screamingSnakeCase}} -> MY_BUTTON

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

{{name}}.tsx
{{name.pascalCase}}.tsx

export const {{name.pascalCase}} = () => {
  return <div>{{name}}</div>
}

Шаблон компонента

Рекомендуемая структура компонента, создаётся генератором по шаблону.

// .templates/component/index.ts
export { {{name.pascalCase}} } from './{{name.kebabCase}}.ui'

// .templates/component/types/{{name.kebabCase}}.interface.ts
import type { HTMLAttributes } from 'react'

/**
 * Параметры {{name.pascalCase}}.
 */
export interface {{name.pascalCase}}Props extends HTMLAttributes<HTMLDivElement> {}

// .templates/component/{{name.kebabCase}}.ui.tsx
import type { FC } from 'react'
import cl from 'clsx'
import type { {{name.pascalCase}}Props } from './types/{{name.kebabCase}}.interface'
import styles from './styles/{{name.kebabCase}}.module.css'

/**
 * {{name.pascalCase}}.
 */
export const {{name.pascalCase}}: FC<{{name.pascalCase}}Props> = ({ className, ...htmlAttr }) => {
  return (
    <div {...htmlAttr} className={cl(styles.root, className)}>
      {{name.kebabCase}}
    </div>
  )
}

/* .templates/component/styles/{{name.kebabCase}}.module.css */
.root {

}