[Feature]: отказаться от прямого использования @vkontakte/vk-bridge

[inomdzhon]

Обоснование

Так как мы движемся к тому, что обособлить библиотеку VKUI от мини-приложений ВКонтакте, стоит отказаться от использования @vkontakte/vk-bridge (далее vkBridge) внутри VKUI.

@vkontakte/vk-bridge будет применяться самим пользователем по необходимости.

Как побочный эффект, мы облегчим библиотеку для тех, кому не нужен @vkontakte/vk-bridge. Сейчас же, все пользователи вынуждны ставить эту зависимость.

План работ

• Создать страницу по миграции на v6 (далее migration_v6.md)

  Обоснование для документации

  Изначально, VKUI создавался как инструмент для создания клиентской части мини-приложений ВКонтакте. Сейчас VKUI уже больше чем просто мини-приложения. Разработчики используют библиотеку, чтобы создавать полноценные независимые приложения, которые никак не связаны с VK Mini Apps.

  В связи с этим мы отказались от завязки на мини-приложения ВКонтакте. Для этого мы удалили интеграцию с библиотекой VK Bridge, а также убрали упоминания о VK Mini Apps в документации. Это привнесло в библиотеку ряд изменений касающихся API.

• Создать страницу по Интеграции с VK Mini Apps
• Добавить ссылку на страницу по Интеграции с VK Mini Apps в https://dev.vk.com/libraries/vkui

Остальной чеклист

Компоненты

• ConfigProvider
  • параметр isWebView
    • добавить warn, что надо будет самому передавать vkBridge.isWebView()
    • добавить в TODO [>=6]: в месте вызова vkBridge
    • добавить инфу в migration_v6.md
  • параметр platform
    • добавить warn, что надо будет самому парсить query-параметр для получения vk_platform из него
    • добавить инфу в migration_v6.md
  • параметр appearance
    • добавить warn, что надо будет самому завязаться на vkBridge, чтобы получать тему из него
    • добавить инфу в migration_v6.md
  • параметр onDetectAppearanceByBridge
    • отметить как @deprecated в связи с предыдущим пунктом
  • параметр webviewType
    • отметить как @deprecated
    • добавить warn, что св-во @deprecated, и что надо использовать новое св-во:
      • webviewType={WebviewType.INTERNAL} -> hasCustomPanelHeaderAfter={false}.
      • webviewType={WebviewType.VKAPPS} -> hasCustomPanelHeaderAfter={true}. При необходимости можно передавать customPanelHeaderAfterMinWidth={<value>} (по умолчанию будет равен 90, как сейчас).
    • заменить классы *--vkapps
      • PanelHeader--vkapps удаляем, в нём уже не будет необходимости
      • ModalRoot--vkapps -> ModalRoot--hasCustomPanelHeaderAfterSlot
    • добавить инфу в migration_v6.md
• AppRoot
  • добавить параметр safeAreaInsets
  • добавить warn, что надо будет самому передавать safeAreaInsets полученный из vkBridge
  • добавить инфу в migration_v6.md про получение safeAreaInsets из vkBridge
• AdaptivityProvider
  • добавить warn, что надо будет самому передавать параметры адаптивности полученные из vkBridge
  • добавить TODO [>=6]: на удаление использования useBridgeAdaptivity()
  • добавить инфу в migration_v6.md
• PullToRefresh
  • добавить TODO [>=6]: на удаление runTapticImpactOccurred() внутри компонента
  • добавить инфу в migration_v6.md про вызов runTapticImpactOccurred() и при onRefresh()

Функции

• useAutoDetectAppearance()
  • добавить TODO [>=6]: на удаление использования vkBridge
• useBridgeAdaptivity()
  • добавить аргумент, который быть предотвращать работу хука (если в AdaptivityProvider передали параметры адаптивности)
  • добавить TODO [>=6]: на удаление
• useInsets()
  • добавить аргумент, который быть предотвращать работу хука (если в AppRoot передали insets через новый параметр)
  • добавить TODO [>=6]: на удаление
• src/lib/taptic.ts
  • добавить TODO [>=6]: на удаление
• src/helpers/appearance.ts
  • добавить TODO [>=6]: на удаление
• src/lib/platform.ts -> getPlatformByQueryString()
  • добавить TODO [>=6]: на удаление
• src/hoc/withInsets.ts
  • добавить TODO [>=6]: на удаление
  • добавить warn, что надо использовать useInsets из @vkontakte/vk-bridge-react
  • добавить инфу в migration_v6.md про useInsets из @vkontakte/vk-bridge-react

Типы

• скопировать AppearanceType из vkBridge в VKUI
• скопировать Insets из vkBridge в VKUI

[mahnunchik]

А можно пример кода по правильной интеграции vk-bridge и vkui? А то сначала зачем то вкорячили bridge в библиотеку, теперь выпиливаете.

[mahnunchik]

Нашёл, теперь это отдельный раздел, ок https://vkcom.github.io/VKUI/#/integrations-vk-mini-apps

Можно ли хелпер transformVKBridgeAdaptivity добавить например в @vkontakte/vk-bridge-react?

А то не понятно, зачем пользователю копировать вот эту сугубо внутреннюю функцию с логикой понятной только разработчикам vk-bridge и vkui

import {
  type AdaptivityProps,
  getViewWidthByViewportWidth,
  getViewHeightByViewportHeight,
  ViewWidth,
  SizeType,
} from '@vkontakte/vkui';
import type { UseAdaptivity } from '@vkontakte/vk-bridge-react';

/**
 * Требуется конвертировать данные из VK Bridge в те, что принимает AdaptivityProvider из VKUI.
 */
export const transformVKBridgeAdaptivity = ({
  type,
  viewportWidth,
  viewportHeight,
}: UseAdaptivity): AdaptivityProps => {
  switch (type) {
    case 'adaptive':
      return {
        viewWidth: getViewWidthByViewportWidth(viewportWidth),
        viewHeight: getViewHeightByViewportHeight(viewportHeight),
      };
    case 'force_mobile':
    case 'force_mobile_compact':
      return {
        viewWidth: ViewWidth.MOBILE,
        sizeX: SizeType.COMPACT,
        sizeY: type === 'force_mobile_compact' ? SizeType.COMPACT : SizeType.REGULAR,
      };
    default:
      return {};
  }
};

[inomdzhon]

Можно ли хелпер transformVKBridgeAdaptivity добавить например в @vkontakte/vk-bridge-react?

Верно говоришь, transformVKBridgeAdaptivity стоит вынести в пакет. В @vkontakte/vk-bridge-react не можем, т.к. он не знает и не должен ничего знать про VKUI.

К v6 попробуем создать отдельный пакет.