Webitel packages

Окремих репо-апплікейшенів ми маємо багато, а отже і багато коду, який треба між ними шейрити. Тому, маємо окремий репо з кодовою базою, яку паблішимо як npm пакети, і використовуємо там де треба.

Як працювати з ними під час розробки?

Лінкуванння

Лінкуємо лібу чи певний пакет (або все разом) до апплікейшена, де це потрібно. В необхідному аплікейшині виконуємо npm link назва-пакету.

Зазвичай, у package.json апплікейшенів є команда на подобі:

{
  "utils:link-libs": "npm link @webitel/api-services @webitel/ui-sdk @webitel/styleguide && npm run utils:ls-libs"
}

TIP

Увага!

1. Ліби одна до одної лінкуються завжди, за допомогою package.json. workspaces.
2. Версія пакету у /packages в середині @webitel/ui-sdk має збігатись з версією у package.json/package-lock.json аплікейшина, бо будуть помилки
3. Якщо лінкування відбувається перший раз (новий пакет чи нова машина) - треба зробити npm link і саме в корені цього пакету
4. Якщо ліба пролінкована але зміни у аплікейшини не застосовуються і ці зміни стосуються компонента - саме у аплікейшині потрібно додати імпорт цього компоненту
5. В корені @webitel/ui-sdk виконуємо npm run build у разі якщо є зміни по компонентах з глобальною реєстрацією з ui-sdk/src/components

Розробка ui-компонентів

Якщо тестування в аплікейшинах не потрібно, то для розробки компонентів ми локально піднімаємо доку, і вже в локально піднятій доці маємо можливість тестувати та дивитись на зміни конкретного компонента.

Якщо в доках немає такого прикладу використання компонента, який вам необхідний – додайте, буде не зайвим 🙂 Якщо треба тестування в аплікейшинах - теж можна лінкувати лібу

Як паблішити

Використовуйте мануальні відповідні Github Actions.

FAQ

Чому @webitel/ui-sdk такий великий?

Тому що раніше існував тільки @webitel/ui-sdk пакет, у якому лежало все. Починалось все з ліби ui-компонентів, і далі воно розросталось.

Зокрема, великі reusable фічі, що включали в себе купу всього (скажімо, components + mixins + store), були винесені у /modules.

А чому вирішили розділяти на окремі пакети?

Версійність пакета

А отже і гнучкість рефакторингу та оновлень.

Розділення, реорганізація кодової бази

Самі розумієте 🙂

Чому немає playgroundʼів для тесту ui-компонентів з ліби?

У нас немає окремого playground (хоча може десь і є) – як раз в тому і ідея, щоб в документації вже були приклади, і під час розробки так само паралельно доповнювалась документація.