@eolme/vma-router NPM

@happysanta/router

Роутер для приложений на VKUI

причины создания этой поделки описаный в статье https://vk.com/@-197036977-navigaciya-mini-apps-vkui

пример приложения с роутером https://github.com/HappySanta/router-example/tree/master/src

Как использовать

Определить роуты

const PAGE_MAIN = '/'
const PAGE_PRODUCT = '/product/:id([0-9]+)'

const PANEL_PRODUCT = "panel_product"
const routes = {
  [PAGE_MAIN]: new Page(),
  [PAGE_PRODUCT]: new Page(PANEL_PRODUCT),
}

startGlobalRouter

startGlobalRouter(routes)

вызвать функцию в сама начале приложения еще до первого рендера

HOC withSantaRouter

В компоненте App использовать withSantaRouter чтобы получить текущий роут withSantaRouter передаст в пропсы объекты route:Route и routeState:State

route.getViewId() id View передается в VKUI как есть <Root activeView={route.getViewId()}>

getPanelIdInView(route, viewId), передается в activePanel у <View>

route.hasOverlay() ? [] : getViewHistory(route, viewId) передается в history у <View>

route.getModalId() pushModal/replaceModal

route.getPopupId() pushPopup/replacePopup

Методы для перехода между экраноами

pushPage(PAGE, params = {}) pushModal(MODAL, params = {}) pushPopup(POPOUT, params = {})

replacePage(PAGE, params = {}) replaceModal(MODAL, params = {}) replacePopup(POPOUT, params = {})

popPage() popPageIfModalOrPopup() -- перейдет назад по истории только если сейчас показана маодалка или попап

pushPageAfterPreviews(OLD_PAGE, PAGE, params = {}) -- откатиться по истории до OLD_PAGE и запушить после нее PAGE

Получить текущую страницу

getCurrentRoute():Route

useRoute()

Обратите внимание что данные меняются не синхронно со сменой панелей в VKUI, поэтому эти данные надо сохранять в компоненте

Подписаться на изменения роута

getGlobalRouter().on("update", (next:Route, old?:Route) => {
	console.log("new route id", next)
	if (old) {
		console.log("old route was", old)
	}
})

или можно сделать это там где определяем роуты

export const routes: { [key: string]: Page } = {
   	[PAGE_MAIN]: new Page().onEnter((r:Route) => console.log('enter on main page', r) ),  
};

У Page есть колбеки onEnter onLeave

Фичи

withThrottlingRouter позвонят обходить проблему со слишком частой сменой панелей из-за которой VKUI может зависнуть передает то же самое что и withSantaRouter + колбек onTransitionEnd который надо вызывать на событиях onTransition у и

useHomePageCheck -- вернет true если мы находимся на первой странице

Бесконечные панели

1) Пометить роут как makeInfinity 2) использовать getViewHistoryWithLastPanel для получения списков панелей которые надо отрендерить 3) isInfinityPanel(panelId) и getInfinityPanelId(panelId) чтобы понять какой компонент рендерить