Nested routes for mobx-state-router

1-nested-routes.ts

import { Route as PlainRoute, RouterStore, RouterState } from 'mobx-state-router';
import { TransitionHook } from 'mobx-state-router/dist/types/router-store';

export interface Route extends PlainRoute {
  children?: Route[];
}

type KeysOfType<A extends object, B> = { [K in keyof A]: A[K] extends B ? K : never }[keyof A];
type HookKey = Exclude<KeysOfType<PlainRoute, TransitionHook | undefined>, undefined>;

const enterHooks: HookKey[] = ['beforeEnter', 'onEnter'];
const exitHooks: HookKey[] = ['beforeExit', 'onExit'];

export function flatten(tree: Route[], parent?: Route): PlainRoute[] {
  const result: PlainRoute[] = [];
  for (const route of tree) {
    const r: PlainRoute = {
      name: [parent ? parent.name : '', route.name].filter(Boolean).join('.'),
      pattern: (parent ? parent.pattern : '') + route.pattern,
    };
    for (const hk of [...enterHooks, ...exitHooks]) {
      if (route[hk]) {
        r[hk] = route[hk];
      }
    }

    for (const hk of enterHooks) {
      if (parent && parent[hk]) {
        r[hk] = async (fromState: RouterState, toState: RouterState, routerStore: RouterStore) => {
          parent[hk] && (await parent[hk]!(fromState, toState, routerStore));
          route[hk] && (await route[hk]!(fromState, toState, routerStore));
        };
      }
    }

    for (const hk of exitHooks) {
      if (parent && parent[hk]) {
        r[hk] = async (fromState: RouterState, toState: RouterState, routerStore: RouterStore) => {
          route[hk] && (await route[hk]!(fromState, toState, routerStore));
          parent[hk] && (await parent[hk]!(fromState, toState, routerStore));
        };
      }
    }

    if (route.children) {
      result.push(...flatten(route.children, r));
    } else {
      result.push(r);
    }
  }

  return result;
}

2-example-nested-routes.ts

import { flatten, Route } from '../ui/utils/nested-routes';

export const routes: Route[] = flatten([
  {
    name: 'home',
    pattern: '/',
  },
  {
    name: 'about',
    pattern: '/about',
    children: [
      {
        name: 'index',
        pattern: '',
      },
      {
        name: 'team',
        pattern: '/team',
      },
    ],
  },
  {
    name: 'notFound',
    pattern: '/not-found',
  },
]);

3-equal-non-nested-example.ts

import { Route } from 'mobx-state-router';

export const routes: Route[] = [
  {
    name: 'home',
    pattern: '/',
  },
  {
    name: 'about.index',
    pattern: '/about',
  },
  {
    name: 'about.team',
    pattern: '/about/team',
  },
  {
    name: 'notFound',
    pattern: '/not-found',
  },
];