forked from templates/nextjs-template
157 lines
5.3 KiB
Markdown
157 lines
5.3 KiB
Markdown
---
|
||
title: Модуль
|
||
description: Как должен выглядеть сгенерированный SLM-модуль в проекте.
|
||
---
|
||
|
||
# Модуль
|
||
|
||
Как должен выглядеть сгенерированный SLM-модуль в проекте.
|
||
|
||
## Назначение
|
||
|
||
Архитектурное определение модуля описано в разделе [Архитектура → Модули](../basics/architecture/modules.md). Список сегментов описан в разделе [Архитектура → Сегменты](../basics/architecture/segments.md).
|
||
|
||
Эта страница показывает прикладное оформление трёх типов модулей: UI, бизнес и инфраструктурный.
|
||
|
||
## Создание
|
||
|
||
1. Проверьте, что в проекте есть нужный шаблон в `.templates/`.
|
||
2. Если шаблона нет — создайте его по разделу [Создание шаблонов](./templates/templates-create.md).
|
||
3. Сгенерируйте модуль через [VS Code или CLI](./templates/templates-usage.md).
|
||
|
||
## Типы модулей
|
||
|
||
Архитектура определяет три типа модулей ([Типы модулей](../basics/architecture/modules.md#типы-модулей)):
|
||
|
||
| Тип | Обязательный файл | Описание |
|
||
|---|---|---|
|
||
| UI-модуль | `{name}.tsx` | Модуль, выросший из компонента |
|
||
| Бизнес-модуль | `{name}.factory.ts` | Модуль вокруг публичного runtime API |
|
||
| Инфраструктурный модуль | нет | Модуль вокруг технического сервиса |
|
||
|
||
## UI-модуль
|
||
|
||
UI-модуль — это компонент, который перерос ограничения компонента: получил собственные хуки, вложенные модули в `parts/`, сценарную логику или публичный API. Внутренняя структура та же, что у компонента: корневой `.tsx`, типы, стили, `ui/`. Но без ограничений компонента.
|
||
|
||
Подробное оформление компонентов внутри `ui/` описано в разделе [Компонент](./component.md).
|
||
|
||
## Бизнес-модуль
|
||
|
||
Бизнес-модуль строится вокруг публичного runtime API. Ключевой файл — фабрика (`{name}.factory.ts`), которая возвращает всё, что нужно внешнему коду в runtime.
|
||
|
||
Архитектурное описание фабрики: [Архитектура → Фабрика](../basics/architecture/modules.md#фабрика).
|
||
|
||
### Структура
|
||
|
||
```text
|
||
business/customer/
|
||
├── customer.factory.ts
|
||
├── index.ts
|
||
└── types/
|
||
├── customer.type.ts
|
||
├── customer-api.type.ts
|
||
├── customer-deps.type.ts
|
||
└── customer-factory.type.ts
|
||
```
|
||
|
||
### Типы
|
||
|
||
`business/customer/types/customer-api.type.ts`
|
||
|
||
```ts
|
||
export type CustomerApi = {
|
||
useCustomer: () => Customer
|
||
CustomerCard: (props: CustomerCardProps) => ReactNode
|
||
}
|
||
```
|
||
|
||
`business/order/types/order-deps.type.ts`
|
||
|
||
```ts
|
||
export type OrderDeps = {
|
||
customer: Pick<CustomerApi, 'useCustomer'>
|
||
}
|
||
```
|
||
|
||
`business/order/types/order-factory.type.ts`
|
||
|
||
```ts
|
||
export type OrderFactory = (deps: OrderDeps) => OrderApi
|
||
```
|
||
|
||
### Фабрика без зависимостей
|
||
|
||
`business/customer/customer.factory.ts`
|
||
|
||
```ts
|
||
import type { CustomerFactory } from './types/customer-factory.type'
|
||
|
||
export const customerFactory: CustomerFactory = () => {
|
||
return {
|
||
useCustomer,
|
||
CustomerCard,
|
||
}
|
||
}
|
||
```
|
||
|
||
### Фабрика с зависимостями
|
||
|
||
`business/order/order.factory.ts`
|
||
|
||
```ts
|
||
import type { OrderFactory } from './types/order-factory.type'
|
||
|
||
export const orderFactory: OrderFactory = (deps) => {
|
||
return {
|
||
useOrder,
|
||
OrderCard,
|
||
}
|
||
}
|
||
```
|
||
|
||
### Композиция на уровне screen
|
||
|
||
```tsx
|
||
// screens/home/home.screen.tsx
|
||
import { customerFactory } from '@/business/customer'
|
||
import { orderFactory } from '@/business/order'
|
||
|
||
const customer = customerFactory()
|
||
const order = orderFactory({ customer })
|
||
|
||
const { useOrder, OrderCard } = order
|
||
|
||
export const HomeScreen = () => {
|
||
const currentOrder = useOrder()
|
||
|
||
return <OrderCard order={currentOrder} />
|
||
}
|
||
```
|
||
|
||
## Инфраструктурный модуль
|
||
|
||
Инфраструктурный модуль строится вокруг технического сервиса или интеграции. Его структура определяется природой сервиса — фиксированного корневого файла нет.
|
||
|
||
Архитектурное описание: [Архитектура → Типы модулей → Инфраструктурный модуль](../basics/architecture/modules.md#инфраструктурный-модуль).
|
||
|
||
Пример модуля темы:
|
||
|
||
```text
|
||
theme/
|
||
├── index.ts
|
||
├── config/
|
||
├── hooks/
|
||
├── styles/
|
||
└── ui/
|
||
```
|
||
|
||
Пример модуля API-клиента:
|
||
|
||
```text
|
||
backend-api/
|
||
├── backend-api.client.ts
|
||
├── config/
|
||
├── types/
|
||
└── index.ts
|
||
```
|