Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
38 tasks done
inomdzhon opened this issue May 11, 2023 · 3 comments · Fixed by #5496
Closed
38 tasks done

Comments

@inomdzhon
Copy link
Contributor

inomdzhon commented May 11, 2023

Обоснование

Так как мы движемся к тому, что обособлить библиотеку 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
Copy link

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

@mahnunchik
Copy link

Нашёл, теперь это отдельный раздел, ок 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
Copy link
Contributor Author

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

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Archived in project
Development

Successfully merging a pull request may close this issue.

2 participants