mirror of
https://github.com/gromlab-ru/slm-design.git
synced 2026-08-22 07:30:16 +03:00
66 lines
4.2 KiB
Markdown
66 lines
4.2 KiB
Markdown
|
|
# Компоненты Level 1
|
|||
|
|
|
|||
|
|
> Пояснение нормативной модели компонентов Level 1.
|
|||
|
|
|
|||
|
|
Компонент является строительным элементом интерфейса, а не самостоятельной архитектурной единицей.
|
|||
|
|
|
|||
|
|
## Связанные правила
|
|||
|
|
|
|||
|
|
- [`SLM-L1-COMPONENT-R009`](../rules/level-1.md#slm-l1-component-r009)
|
|||
|
|
- [`SLM-L1-LAYER-A002`](../rules/level-1.md#slm-l1-layer-a002)
|
|||
|
|
- [`SLM-L1-MODULE-A004`](../rules/level-1.md#slm-l1-module-a004)
|
|||
|
|
- [`SLM-L1-DEPENDENCY-A005`](../rules/level-1.md#slm-l1-dependency-a005)
|
|||
|
|
- [`SLM-L1-MODULE-R011`](../rules/level-1.md#slm-l1-module-r011)
|
|||
|
|
- [`SLM-L1-LIFECYCLE-R013`](../rules/level-1.md#slm-l1-lifecycle-r013)
|
|||
|
|
|
|||
|
|
## Файловая форма
|
|||
|
|
|
|||
|
|
Файловую форму компонента определяет стайлгайд. Компонент может быть одним файлом фреймворка или каталогом со вспомогательными файлами.
|
|||
|
|
|
|||
|
|
```text
|
|||
|
|
landing/
|
|||
|
|
└── ui/
|
|||
|
|
└── hero.tsx
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```text
|
|||
|
|
landing/
|
|||
|
|
└── ui/
|
|||
|
|
└── hero/
|
|||
|
|
├── hero.tsx
|
|||
|
|
├── styles/
|
|||
|
|
│ └── hero.module.css
|
|||
|
|
└── types/
|
|||
|
|
└── hero-props.type.ts
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Наличие каталога, типов, стилей или локального `index.ts` не превращает компонент в модуль.
|
|||
|
|
|
|||
|
|
## Реализация
|
|||
|
|
|
|||
|
|
Компонент может отображать входные данные, вызывать переданные обработчики, условно строить интерфейс и хранить локальное состояние представления.
|
|||
|
|
|
|||
|
|
Level 1 не вводит отдельного запрета на импорты, выполняемые кодом компонента. Каждый такой импорт считается зависимостью родительского модуля и должен соблюдать направление слоёв, публичные API и запрет циклов.
|
|||
|
|
|
|||
|
|
Доступ к данным, состояние, контекст или код жизненного цикла внутри компонента сами по себе не создают новую архитектурную границу. Их источники, зависимости и область жизни определяет родительский модуль.
|
|||
|
|
|
|||
|
|
Провайдер может технически реализовывать контекст и жизненный цикл фреймворка, но владельцем состояния и ресурсов остаётся родительский модуль.
|
|||
|
|
|
|||
|
|
Файл в `app` может технически быть компонентом React или Vue. Архитектурно он является точкой входа фреймворка, а не компонентом SLM.
|
|||
|
|
|
|||
|
|
## Компонент и модуль
|
|||
|
|
|
|||
|
|
| Признак | Компонент | Модуль |
|
|||
|
|
|---|---|---|
|
|||
|
|
| Самостоятельная ответственность | Нет | Да |
|
|||
|
|
| Собственный публичный API | Нет | Да |
|
|||
|
|
| Собственная граница зависимостей | Нет | Да |
|
|||
|
|
| Вспомогательные файлы | Может иметь | Может иметь |
|
|||
|
|
| Сегменты и вложенные модули | Нет | Может иметь |
|
|||
|
|
|
|||
|
|
Модуль может состоять всего из одного корневого компонента. Различие определяется владением, а не количеством файлов.
|
|||
|
|
|
|||
|
|
## Когда нужен вложенный модуль
|
|||
|
|
|
|||
|
|
Если часть интерфейса получает самостоятельную ответственность, публичный API, собственную границу зависимостей, область жизни или внутреннюю модульную декомпозицию, она является модулем. При локальном использовании такой модуль может размещаться как вложенный.
|