Route modules

Large apps are easier to maintain when route resources, prepare functions, and route declarations live in separate modules.

src/routes/
  common/
    resources.ts
    prepares.ts
    renders.tsx
    types.ts
  projects.ts
  index.ts

Resources

import { getResourcePage } from '@plumile/router';

export const ProjectPageResource = getResourcePage(
  'ProjectPage',
  async () => import('../pages/ProjectPage.js'),
);

export const ProjectSettingsPageResource = getResourcePage(
  'ProjectSettingsPage',
  async () => import('../pages/ProjectSettingsPage.js'),
);

Route declarations

import { r, type Route } from '@plumile/router';

import {
  ProjectPageResource,
  ProjectSettingsPageResource,
} from './common/resources.js';
import {
  prepareProjectPage,
  prepareProjectSettingsPage,
} from './common/prepares.js';
import type { AppRouterContext } from './common/types.js';

export function getRoutes(): Route<AppRouterContext, unknown>[] {
  return [
    r({
      path: 'org/:organizationSlug/project/:projectSlug',
      resourcePage: ProjectPageResource,
      prepare: prepareProjectPage,
      children: [
        r({
          path: 'settings',
          resourcePage: ProjectSettingsPageResource,
          prepare: prepareProjectSettingsPage,
        }),
      ],
    }),
  ];
}

This keeps lazy imports isolated in resources.ts, data loading in prepares.ts, and the navigable shape in route modules.