feat: ability to set up window

[zhzz]

Проблема

Библиотека не умеет работать внутри friendly-iframe. Это подход в разработке виджетов, когда js-код выполняется внутри скрытого iframe для изоляции, а UI рендерится в основном окне приложения (или в другом iframe).

Работоспособности мешает прямое обращение к глобальным сущностям, таким как window, setTimeout и HTMLElement, которые внутри iframe свои и не совпадают с сущностями основного окна. Из-за этого конструкции, типа node instanceof HTMLElement, window.clientHeight и другие могут давать не тот результат, что ожидается.

Решение

Научить библиотеку использовать сущности из глобального контекста, задаваемого пользователем. Для этого:

1. Добавлена возможность задавать библиотеке глобальный объект window, к сущностям которого нужно обращаться.

import { Upgrade } from '@skbkontur/react-ui/lib/Upgrades';

Upgrade.setWindow(custom_window);

2. Все обращения к глобальным сущностям переписаны на использование специального глобального объекта, который учитывает переданный пользователем window.

Особенности решения

@skbkontur/global-object

Новый глобальный объект вынесен в отдельный пакет @skbkontur/global-object, который можно будет переиспользовать в валидациях, аддонах и других пакетах, когда до них дойдет дело.

Поддержка SSR

Новый глобальный объект заменил предыдущий - объект globalThat, который был создан для поддержки SSR - т.е., работы в режиме недоступности API браузера и его глобальных сущностей. Эта поддержка была точечной. Она реализовывалась на уровне проверок (isBrowser/canUseDOM) в тех местах, где мы точно знали, что они нужны. Плюс, у нас есть smoke-тесты на поддержу SSR. Но эти меры не покрывают 100% возможных случаев. Где-то в коде может не оказаться нужной проверки, а тесты не содержат всех сценариев использования компонентов.

Новый глобальный объект позволил вывести поддержку SSR на уровень типов. В нем все браузерные сущности в типе имеют undefined, поэтому их необходимо проверять перед использованием. Это гарантирует 100% безопасную работу в режиме SSR.

Для удобства вместе с глобальным объектом поставляется функция isBrowser(globalObject), которая убеждается, что браузерные сущности в данный момент доступны и позволяет их использовать без дополнительных проверок, подправляя тип globalObject.

raf

В библиотеке использовался старый полифил для requestAnimationFrame - пакет raf. Он был нужен для IE < 10 и использовал глобальные сущности, препятствуя выполнению задачи, поэтому от него пришлось избавиться.

Линт

Для контроля над корректным использованием глобальных сущностей в дальнейшем будет добавлен eslint-плагин.

Ссылки

IF-1287, merge_requests/500

Чек-лист перед запросом ревью

1. Добавлены тесты на все изменения
   ⬜ unit-тесты для логики
   ⬜ скриншоты для верстки и кросс-браузерности
   ✅ нерелевантно

2. Добавлена (обновлена) документация
   ⬜ styleguidist для пропов и примеров использования компонентов
   ⬜ jsdoc для утилит и хелперов
   ⬜ комментарии для неочевидных мест в коде
   ⬜ прочие инструкции (README.md, contributing.md и др.)
   ✅ нерелевантно

3. Изменения корректно типизированы
   ✅ без использования any (см. PR 2856)
   ⬜ нерелевантно

4. Прочее
   ✅ все тесты и линтеры на CI проходят
   ✅ в коде нет лишних изменений
   ✅ заголовок PR кратко и доступно отражает суть изменений (он попадет в changelog)