Modules de routes

Les grandes applications restent plus maintenables lorsque ressources, fonctions prepare et declarations de routes vivent dans des modules separes.

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

Ressources

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'),
);

Declarations de routes

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,
        }),
      ],
    }),
  ];
}

Cette organisation isole les imports lazy dans resources.ts, le chargement de donnees dans prepares.ts et la forme navigable dans les modules de routes.