chore: Fork client-side router decoupling it from Meteor APIs (RocketChat#36602)

Author: tassoevan

apps/meteor/.meteor/packages

@@ -69,4 +69,3 @@ autoupdate@2.0.1
 
 zodern:types
 zodern:standard-minifier-js
-ostrio:flow-router-extra

apps/meteor/.meteor/versions

@@ -62,7 +62,6 @@ oauth1@1.5.2
 oauth2@1.3.3
 ordered-dict@1.2.0
 ostrio:cookies@2.7.2
-ostrio:flow-router-extra@3.11.0
 promise@1.0.0
 random@1.2.2
 rate-limit@1.1.2

apps/meteor/client/main.ts

@@ -1,14 +1,6 @@
 import './serviceWorker';
 import './startup/accounts';
 
-import { FlowRouter } from 'meteor/ostrio:flow-router-extra';
-
-FlowRouter.wait();
-
-FlowRouter.notFound = {
-	action: () => undefined,
-};
-
 import('@rocket.chat/fuselage-polyfills')
 	.then(() => import('./meteorOverrides'))
 	.then(() => import('./ecdh'))

apps/meteor/client/providers/RouterProvider.tsx

@@ -1,210 +1,11 @@
-import type { RoomType, RoomRouteData } from '@rocket.chat/core-typings';
 import { RouterContext } from '@rocket.chat/ui-contexts';
-import type {
-	RouterContextValue,
-	RouteName,
-	LocationPathname,
-	RouteParameters,
-	SearchParameters,
-	To,
-	RouteObject,
-	LocationSearch,
-} from '@rocket.chat/ui-contexts';
-import { FlowRouter } from 'meteor/ostrio:flow-router-extra';
-import { Tracker } from 'meteor/tracker';
+import type { RouterContextValue } from '@rocket.chat/ui-contexts';
 import type { ReactNode } from 'react';
 
-import { appLayout } from '../lib/appLayout';
-import { roomCoordinator } from '../lib/rooms/roomCoordinator';
-import { queueMicrotask } from '../lib/utils/queueMicrotask';
+import { Router } from '../router';
 
-const subscribers = new Set<() => void>();
-
-const listenToRouteChange = () => {
-	FlowRouter.watchPathChange();
-	subscribers.forEach((onRouteChange) => onRouteChange());
-};
-
-let computation: Tracker.Computation | undefined;
-
-queueMicrotask(() => {
-	computation = Tracker.autorun(listenToRouteChange);
-});
-
-const subscribeToRouteChange = (onRouteChange: () => void): (() => void) => {
-	subscribers.add(onRouteChange);
-
-	computation?.invalidate();
-
-	return () => {
-		subscribers.delete(onRouteChange);
-
-		if (subscribers.size === 0) {
-			queueMicrotask(() => computation?.stop());
-		}
-	};
-};
-
-const getLocationPathname = () => FlowRouter.current().path.replace(/\?.*/, '') as LocationPathname;
-
-const getLocationSearch = () => location.search as LocationSearch;
-
-const getRouteParameters = () => (FlowRouter.current().params ?? {}) as RouteParameters;
-
-const getSearchParameters = () => (FlowRouter.current().queryParams ?? {}) as SearchParameters;
-
-const getRouteName = () => FlowRouter.current().route?.name as RouteName | undefined;
-
-const encodeSearchParameters = (searchParameters: SearchParameters) => {
-	const search = new URLSearchParams();
-
-	for (const [key, value] of Object.entries(searchParameters)) {
-		search.append(key, value);
-	}
-
-	const searchString = search.toString();
-
-	return searchString ? `?${searchString}` : '';
-};
-
-const buildRoutePath = (to: To): LocationPathname | `${LocationPathname}?${LocationSearch}` => {
-	if (typeof to === 'string') {
-		return to;
-	}
-
-	if ('pathname' in to) {
-		const { pathname, search = {} } = to;
-		return (pathname + encodeSearchParameters(search)) as LocationPathname | `${LocationPathname}?${LocationSearch}`;
-	}
-
-	if ('pattern' in to) {
-		const { pattern, params = {}, search = {} } = to;
-		return Tracker.nonreactive(() => FlowRouter.path(pattern, params, search)) as
-			| LocationPathname
-			| `${LocationPathname}?${LocationSearch}`;
-	}
-
-	if ('name' in to) {
-		const { name, params = {}, search = {} } = to;
-		return Tracker.nonreactive(() => FlowRouter.path(name, params, search)) as LocationPathname | `${LocationPathname}?${LocationSearch}`;
-	}
-
-	throw new Error('Invalid route');
-};
-
-const navigate = (
-	toOrDelta: To | number,
-	options?: {
-		replace?: boolean;
-	},
-) => {
-	if (typeof toOrDelta === 'number') {
-		history.go(toOrDelta);
-		return;
-	}
-
-	const path = buildRoutePath(toOrDelta);
-	const state = { path };
-
-	if (options?.replace) {
-		history.replaceState(state, '', path);
-	} else {
-		history.pushState(state, '', path);
-	}
-
-	dispatchEvent(new PopStateEvent('popstate', { state }));
-};
-
-const routes: RouteObject[] = [];
-const routesSubscribers = new Set<() => void>();
-
-const updateFlowRouter = () => {
-	if (FlowRouter._initialized) {
-		FlowRouter._updateCallbacks();
-		FlowRouter._page.dispatch(new FlowRouter._page.Context(FlowRouter._current.path));
-		return;
-	}
-
-	FlowRouter.initialize({
-		hashbang: false,
-		page: {
-			click: true,
-		},
-	});
-};
-
-const defineRoutes = (routes: RouteObject[]) => {
-	const flowRoutes = routes.map((route) => {
-		if (route.path === '*') {
-			FlowRouter.notFound = {
-				action: () => appLayout.render(<>{route.element}</>),
-			};
-
-			return FlowRouter.notFound;
-		}
-
-		return FlowRouter.route(route.path, {
-			name: route.id,
-			action: () => appLayout.render(<>{route.element}</>),
-		});
-	});
-
-	routes.push(...routes);
-	const index = routes.length - 1;
-
-	updateFlowRouter();
-	routesSubscribers.forEach((onRoutesChange) => onRoutesChange());
-
-	return () => {
-		flowRoutes.forEach((flowRoute) => {
-			FlowRouter._routes = FlowRouter._routes.filter((r) => r !== flowRoute);
-			if ('name' in flowRoute && flowRoute.name) {
-				delete FlowRouter._routesMap[flowRoute.name];
-			} else {
-				FlowRouter.notFound = {
-					action: () => appLayout.render(<></>),
-				};
-			}
-		});
-
-		if (index !== -1) {
-			routes.splice(index, 1);
-		}
-
-		updateFlowRouter();
-		routesSubscribers.forEach((onRoutesChange) => onRoutesChange());
-	};
-};
-
-const getRoutes = () => routes;
-
-const subscribeToRoutesChange = (onRoutesChange: () => void): (() => void) => {
-	routesSubscribers.add(onRoutesChange);
-
-	onRoutesChange();
-
-	return () => {
-		routesSubscribers.delete(onRoutesChange);
-	};
-};
-
-/** @deprecated */
-export const router: RouterContextValue = {
-	subscribeToRouteChange,
-	getLocationPathname,
-	getLocationSearch,
-	getRouteParameters,
-	getSearchParameters,
-	getRouteName,
-	buildRoutePath,
-	navigate,
-	defineRoutes,
-	getRoutes,
-	subscribeToRoutesChange,
-	getRoomRoute(roomType: RoomType, routeData: RoomRouteData) {
-		return { path: roomCoordinator.getRouteLink(roomType, routeData) || '/' };
-	},
-};
+/** @deprecated consume it from the `RouterContext` instead */
+export const router: RouterContextValue = new Router();
 
 type RouterProviderProps = {
 	children?: ReactNode;