Введение

Granularity — дизайн-система для Vue 3: компоненты, основы и конвейер, который собирает из них CSS. Имя здесь не украшение, а описание того единственного решения, из которого следует всё остальное.

Выбор, а не дробление

Большинство библиотек компонентов дают гранулярность дроблением на подпакеты: ядро, потом формы, потом навигация. Эта отказывается, и причина измерима: большинство рёбер её графа зависимостей пересекают границы её же групп каталога — точная доля считается на каждой сборке, потому что она меняется вместе с библиотекой. GrDrawer рендерит GrButton. GrPagination рендерит GrSelect. GrDataTable рендерит GrCheckbox. Разрежьте по этим группам — получите пакеты, зависящие друг от друга кольцом.

Поэтому гранулярность берётся с другого конца. Вы называете компоненты, которые рендерите; сборка разрешает их граф зависимостей и эмитит ровно тот CSS. Ядро — один пакет, одна версия, один changelog, и бандл растёт от того, что вы используете. Спутники вроде графиков и редактора живут отдельными пакетами со своими версиями, но ядро внутри не режется.

Чем именно платите

Числа за этими тремя строками сняты с настоящей сборки и стоят на главной — это именно они, а не округление.

Плюс конвейер на сборку — @feugene/granum и @feugene/granum-engine-wind; полный состав — в быстром старте.

Выбор компонентов

import { windEngine } from '@feugene/granum-engine-wind'
import { defineGranumConfig } from '@feugene/granum/vite'

export default defineGranumConfig({
  engine: windEngine(),
  providers: ['@feugene/granularity'],
  components: [{ provider: '@feugene/granularity', names: ['GrButton', 'GrCard'] }],
  themes: { names: ['light', 'dark'] },
})

Куда дальше

Если нужно запустить — быстрый старт самая короткая полезная страница сайта. Если хочется сначала понять, почему экспорты устроены так, читайте архитектуру.