import { ComponentType, FC, createContext, useContext, useEffect, useState } from 'react'; import type { RouteProps } from 'react-router'; export interface RouterEntry { props: Omit; component: ComponentType; } interface PublicDeckyRouterState { routes: Map; } export class DeckyRouterState { private _routes = new Map(); public eventBus = new EventTarget(); publicState(): PublicDeckyRouterState { return { routes: this._routes }; } addRoute(path: string, component: RouterEntry['component'], props: RouterEntry['props'] = {}) { this._routes.set(path, { props, component }); this.notifyUpdate(); } removeRoute(path: string) { this._routes.delete(path); this.notifyUpdate(); } private notifyUpdate() { this.eventBus.dispatchEvent(new Event('update')); } } interface DeckyRouterStateContext extends PublicDeckyRouterState { addRoute(path: string, component: RouterEntry['component'], props: RouterEntry['props']): void; removeRoute(path: string): void; } const DeckyRouterStateContext = createContext(null as any); export const useDeckyRouterState = () => useContext(DeckyRouterStateContext); interface Props { deckyRouterState: DeckyRouterState; } export const DeckyRouterStateContextProvider: FC = ({ children, deckyRouterState }) => { const [publicDeckyRouterState, setPublicDeckyRouterState] = useState({ ...deckyRouterState.publicState(), }); useEffect(() => { function onUpdate() { setPublicDeckyRouterState({ ...deckyRouterState.publicState() }); } deckyRouterState.eventBus.addEventListener('update', onUpdate); return () => deckyRouterState.eventBus.removeEventListener('update', onUpdate); }, []); const addRoute = (path: string, component: RouterEntry['component'], props: RouterEntry['props'] = {}) => deckyRouterState.addRoute(path, component, props); const removeRoute = (path: string) => deckyRouterState.removeRoute(path); return ( {children} ); };