Перейти к содержимому

Описание проекта

@lh-ui/share — единственный общий слой семейства компонентных библиотек lh-ui, не зависящий от фреймворков.

Он выделяет «ту половину» библиотеки компонентов, которая не зависит от фреймворка, в отдельный репозиторий: вычисление классов, конечные автоматы, наборы атрибутов доступности, движок позиционирования, виртуальная прокрутка, design-токены, тексты интернационализации, исходники компонентных стилей. UI-библиотеки различных платформ (lh-ui-plus / lh-ui-vue2 / lh-ui-react / lh-ui-uniapp) потребляют этот пакет при публикации в виде npm-зависимости; при локальной разработке внутри семейства изменения исходников этого репозитория сразу же действуют в UI-библиотеках — без сборки и релиза.

Лишь небольшая часть логики библиотеки компонентов действительно зависит от реактивности фреймворка:

  • добавить класс или нет — это чистое вычисление (size, disabled) => string;
  • в какую сторону перевернуть выпадающую панель — это геометрическое вычисление;
  • какие строки списка рендерить — это вычисление индексного диапазона;
  • текст кнопки «Подтвердить» — это lookup в языковом пакете.

Если заложить это в чистые функции, то четырём платформам не нужно писать каждую вещь заново, ошибаться заново и исправлять заново. У слоя фреймворка остаётся только одно дело: привязать вывод чистых функций к шаблону и передать пользовательский ввод обратно в чистые функции.

Слой Содержимое Количество
src/core/<компонент>/ Чистые функции компонентов (logic.ts / types.ts), без импорта фреймворков 56 компонентов
src/core/shared/ Общее ядро для компонентов (popper / virtual / sx / keyboard / focus-trap …) 12 модулей
src/theme/ TS-сторона темы: типы + 5 пресетов + runtime-примитивы —
styles/ Единый источник BEM-стиилей компонентов + токены theme/common/*.scss 58 наборов стилей
src/locales/ Интернационализация (LhLocale — чистый генератор событий) + 6 языковых скелетов —
src/constants/ src/types/ src/utils/ Константы / типы / чистые утилиты (включая createNamespace) —

Методика подсчёта: core — это 56 каталогов компонентов, styles — 58 наборов: у layout / tree-select есть источники стилей, но логика полностью находится в слое UI (контейнер разметки, клей выбора дерева на стороне фреймворка), а config в каталоге стилей называется config-provider. Подробнее см. Структуру пакета.

  1. Нулевая зависимость от фреймворков: внутри src/ запрещены import 'vue' | 'react' | '@dcloudio/*'; за этим следит CI-гейт с помощью grep. В пакете external: [] — полная сборка без зависимостей.
  2. Единый источник стилей: styles/ — единственный источник BEM-стиилей компонентов для всего семейства; ни одна UI-библиотека не имеет права держать у себя локальную копию компонентного scss. Различия переходных классов между платформами собраны в трех mixin-ах transition.scss.
  3. Единый экземпляр unit-тестов: unit-тесты для core находятся только в tests/unit/ этого репозитория; три библиотеки используют этот результат и не копируют его.
  4. Реактивность относится к слою UI: core только производит данные; подписка / реактивная разводка принадлежит UI-библиотекам. Поэтому LhLocale — чистый emitter: увеличение version заставляет каждую платформу перерендерить своим механизмом.
  5. Светлое и тёмное на равных: все компоненты по умолчанию поддерживают и светлую, и тёмную тему; компонентам разрешено пользоваться токенами только через var(--lh-*, fallback), а полноту тёмной темы охраняет пункт 7 в verify:styles.
  • Не UI-библиотека: этот пакет ничего не рендерит, в нём нет runtime-а компонентов. Если нужны готовые компоненты, установите библиотеку соответствующей платформы: @lh-ui/vue3 / @lh-ui/vue2 и др.
  • Не зависит ни от одной UI-библиотеки и ни от одного фреймворка: это самый нижний слой — на него опираются, он ни на кого не опирается.
  • Не отвечает за развёртывание: результат настройки темы — это текст <style> и CSS-переменные; то, как они внедряются в DOM, решает ConfigProvider на каждой платформе.
lh-ui/
├── lh-ui-share/ ← этот репозиторий: общий слой, независимый от фреймворков (core / theme / styles / locales)
├── lh-ui-plus/ Платформа Vue3 (полная инъекция стилей через side-effect)
├── lh-ui-vue2/ Платформа Vue2 (подключение по требованию: theme.css + style/<name>)
├── lh-ui-react/ Платформа React
├── lh-ui-uniapp/ Платформа uniapp
├── docs/ Сайт документации семейства (другой репозиторий)
└── native/ Нативные платформы (android / ios / harmony, applicationId равен top.lhgb.*)

Порядок релизов — жёсткое ограничение: сначала релизится share, затем UI-библиотеки. Любое изменение share → пишется changeset → релиз → в каждой библиотеке выполняется pnpm up @lh-ui/share и проводится регрессия.

Copyright © 2024-2026 FengMo WenXue