TypeScript

Пакет написан на TypeScript, и типы не собираются в один общий .d.ts: у каждого подпути свой. Импортировали компонент — получили его типы, не потянув объявления остальных.

Что экспортирует подпуть компонента

import {
  GrButton,
  type GrButtonProps,
  type GrButtonInstance,
  type GrButtonTone,
} from '@feugene/granularity/components/GrButton'

Рядом с компонентом экспортируются три типа — GrXProps, GrXEmits и GrXInstance; последний есть у компонентов, которые что-то выставили через defineExpose. Состав держит гейт пакета. Остальные имена — GrXConfigurableProps, grXConfig, grXSafelist — есть не у всех. Схема имён при этом одна на все компоненты, и это удобнее списка:

GrXInstance пригодится там, где к компоненту обращаются по ссылке:

<script setup lang="ts">
import { useTemplateRef } from 'vue'
import type { GrDataTableInstance } from '@feugene/granularity/components/GrDataTable'

const table = useTemplateRef<GrDataTableInstance>('table')
</script>

Составные компоненты отдают и типы своих данных — у таблицы это GrDataColumn, GrDataTableRowKey, GrDataTableSortDir и прочее, что иначе пришлось бы описывать у себя и держать в синхронизации руками.

Типы, не связанные с компонентами

• @feugene/granularity/tokens — справочник токенов как типизированные данные: grFoundationTokens, grThemeTokens, grComponentTokens, grDerivedTokens и типы к ним. Источник — те же tokens/*.json, из которых генерируется CSS, поэтому разойтись с реальными значениями они не могут.
• @feugene/granularity/directives — директивы вместе с типами их аргументов.
• @feugene/granularity/fileValidation — правила проверки файлов отдельным модулем: типы там основная ценность, а не побочная.

JetBrains: автодополнение из коробки

Пакет собирает и публикует web-types.json — формат, который IDE JetBrains читают сами. Ничего настраивать не нужно: после установки WebStorm, PhpStorm и IDEA знают компоненты пакета в шаблонах, их пропы со значениями по умолчанию и описаниями, а также слоты. Событий и директив в файле нет.

VS Code и остальные редакторы

Настройка проекта

Ничего специфического пакет не требует, но два пункта экономят вечер:

Если типы «не находятся» именно у подпути, а корень импортируется нормально — это почти всегда первый пункт; разбор с сообщением компилятора есть на странице типовых поломок.