Building a more rational and secure dynamic justification

[yibird]

@Tanstack/react-router provides a vite plugin that provides type-safe routes, but I hate it. I have a menu array, import.meta.glob matches the corresponding route file (the route file path has a mapping relationship with the menu path), and then converts the menu array to routes. My code is as follows:

import { createRoute, lazyRouteComponent, Route, RouteOptions } from "@tanstack/react-router";
import { omit } from "es-toolkit";
import type { IndexRoute } from "./types";
import type { IMenu } from "#/config";

type DynamicComponentModule = () => Promise<{ default: React.ComponentType }>;
type RouteModule = { default: Route } | null;
interface MenuRouteOptions {
  menu: IMenu;
  parentRoute: IndexRoute;
  routeModule?: Route | null;
}
type RouteComponentOptions = Pick<
  RouteOptions,
  "component" | "pendingComponent" | "errorComponent" | "notFoundComponent"
>;

// route component modules
const viewCompModules = import.meta.glob(
  "/src/views/**/index.tsx",
) as Recordable<DynamicComponentModule>;

// route config modules
const viewRouteModules = import.meta.glob("/src/views/**/route.ts", {
  eager: true,
}) as Recordable<RouteModule>;

const normalizePath = (path: string) => {
  return path.replace(/^\/src\/views|\/(index\.tsx|route\.ts)$/g, "");
};
const transformModulePath = <T>(modules: Recordable<T>) => {
  return Object.keys(modules).reduce((acc, path) => {
    return { ...acc, [normalizePath(path)]: modules[path] };
  }, {} as Recordable<T>);
};

const componentModules = transformModulePath(viewCompModules);
const routeModules = transformModulePath(viewRouteModules);

export function menuToRoute({ menu, parentRoute, routeModule }: MenuRouteOptions) {
  const routeOptions = omit((routeModule?.options || {}) as RouteOptions & { id?: string }, [
    "id",
  ]) as RouteComponentOptions;
  return createRoute({
    getParentRoute: () => parentRoute,
    path: menu.path!,
    component: lazyRouteComponent(componentModules[menu.path!]),
    head() {
      return {
        meta: [{ title: menu.title }],
      };
    },
    ...routeOptions,
  });
}

export function menusToRoutes(menus: IMenu[], parentRoute: IndexRoute) {
  return menus
    .filter((item) => item.type === 1 && item.path && Reflect.has(componentModules, item.path))
    .map((item) => {
      const routeModule = routeModules[item.path!]?.default;
      return menuToRoute({ menu: item, parentRoute, routeModule });
    });
}

In this case, I can't get a type-safe route. Is there a more reasonable way to write it?